৫ মাসের স্টাডিপ্ল্যান

৪২ টি লাইভ ক্লাস

৫ টি ইন্ডাস্ট্রি স্ট্যান্ডার্ড প্রজেক্ট

প্রোগ্রেস ট্র্যাকিং

প্রতিদিন ১ বেলা সাপোর্ট ক্লাস

কমিউনিটি সাপোর্ট

লাইফটাইম এক্সেস

ইন্টারভিউ হ্যান্ডবুক

সার্টিফিকেট

ল্যাপটপ/ডেস্কটপ (৮ জিবি র‍্যাম)

ভালো ইন্টারনেট কানেকশন

লেগে থাকার মানসিকতা

থাকছে ৫ টির বেশি রিয়েল লাইফ প্রজেক্ট, যেগুলো করে হয়ে যাবে মোস্ট ডিমানডিং প্রোডাক্ট বিল্ড করার অভিজ্ঞতা।

Run you first code!

HTML, CSS এবং Bootstrap এর উপর ফ্রি ভিডিওগুলো দেখে আপনার বেসিক ক্লিয়ার করে নিন।

বেসিক ঝালাই করুন এখান থেকে

VS Code

Tailwind CSS

React.Js

Next.Js

Vercel

Git & Git Hub

API Integration

টিম প্রোজেক্ট

সিভি মেকিং এবং পোর্ট ফোলিও বিল্ডিং

জব পাওয়া পর্যন্ত সাপোর্ট

Amir Hamza

Sohanur Rahman

Parvej Hossain

Shahid Afridi Zihad

Rejaul karim

Ismile Sardar

Taib Islam Dipu

Md Sakhawat Hossain

ব্যাচে ভর্তি হোন

জনপ্রিয় ফ্রন্টেন্ড ফ্রেমওয়ার্ক React.js ই তাদের ডকুমেন্টেশনে সাজেস্ট করছে next.js ব্যবহার করতে! বোঝাই যাচ্ছে ওয়েব ডেভেলপমেন্টের ক্ষেত্রে ফিউচার লিড করতে যাচ্ছে Next.js. আপনি একজন বড় মাপের ডেভেলপার হতে চাইলে নিশ্চয়ই নিখুঁত কাজের পাশাপাশি দ্রুততা চাইবেন যেটি আপনাকে দিতে পারে Next.js স্ট্যাক। Next.js কী?মডার্ন ওয়েব ডেভেলপমেন্টের ক্ষেত্রে React.js এখন খুবই পপুলার একটা go-to-framework. আবার অন্যদিকে Next.js একটি ওপেন সোর্স নোড ফ্রেমওয়ার্ক যা সহজেই স্কেলেবল Node.js সার্ভার সাইড অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়। এটি TypeScript ব্যবহার করে তৈরি করা যেটি স্কেলেবল এবং টেস্টেবল অ্যাপ্লিকেশন তৈরিতে সাহায্য করে। PostgreSQL, MongoDB, এবং MySQL এর সমস্ত ডাটাবেস এতে রয়েছে।&nbsp;কোর্সে কী কী প্রোজেক্ট করবেন?1. SEO Friendly Agency Website Project Using Next JS &amp; Rest API&nbsp; 2. News Portal Project Using Next JS&nbsp; 3. E-commerce Proejct Using Next JS 4. Inventory Rest API Project Using Next.js&nbsp; 5. Portfolio Website Project With Admin Dashboard&nbsp;

Ask Me Anything About the “Frontend Excellence with Tailwind CSS, TypeScript, React & AI” Course

SEO Friendly Agency Website (Next JS + Rest API)

News Portal (Next JS)

Ecommerce Project (Next JS)

<span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;HTML,CSS, Basic JavaScript, ES6, React JS, Web Application Terminlogy , Foundation of Software Engineering .&quot;}" data-sheets-userformat="{&quot;2&quot;:961,&quot;3&quot;:{&quot;1&quot;:0},&quot;9&quot;:1,&quot;10&quot;:1,&quot;11&quot;:4,&quot;12&quot;:0}">HTML,CSS, Basic JavaScript, ES6, React JS, Web Application Terminlogy , Foundation of Software Engineering এর সকল গুরুত্বপূর্ণ ও খুঁটিনাটি বিষয়গুলো বিস্তারিতভাবে শিখে নেই এই মডিউলে।&nbsp;

শুরুর আগে শুরুঃ HTML, CSS, JavaScript

01. Introduction to HTML

02. HTML Structure and Basic Tags

03. Headings and Paragraphs in HTML

04. HTML Links (Anchor Tags)

05. HTML Images and Image Attributes

Objective: Set up a scalable dev environment and reinforce key JavaScript skills. Live Class 1: Developer Environment &amp; Tools VSCode setup, Git/GitHub workflows | CLI tools: pnpm, Vite | Folder structures, ESLint + Prettier Live Class 2: JavaScript Essentials for React ES6+ syntax, array methods, destructuring | Async/await and fetch Project: Interactive Hero Section (theme toggle, Tailwind)

[Tailwind & React]  Getting Started

[Tailwind & React] Details on tailwind Layout

[Tailwind & React] Flexbox & Grid

Dev Setup & Modern Frontend Foundations

Objective: Create fast, responsive UIs using utility-first Tailwind CSS. Live Class 1: Tailwind Fundamentals Responsive utilities, typography, spacing | Configuring custom themes Live Class 2: Component Styling in Practice Buttons, cards, layout grids, hover/focus states | Dark/light mode toggle with Tailwind Project: Auth UI Screens (signup/login)

[Tailwind & React] Spacing & Sizing

[Tailwind & React] Typography

[Tailwind & React] Backgrounds & Borders

Tailwind CSS Mastery

Frontend Foundation & Tailwind CSS (Module 0-2)

Objective: Learn foundational concepts of React and state-driven UIs. Live Class 1: React Basics – JSX, useState, Props Functional components, event handling Live Class 2: useEffect, Lists, Conditional Rendering Side effects, mapping data, toggling UI Project: To-Do App with Dynamic State

[Tailwind & React] Effects & Filters

[Tailwind & React] Tables Transitions & Animation

[Tailwind & React] Interactivity

React Core Essentials

Objective: Structure clean, reusable UI components for scalability. Live Class 1: Atomic Design Principles Component hierarchies, composition patterns Live Class 2: Props, Children, Component Reuse Folder structure, separation of concerns Project: Dashboard Widgets UI

মডিউল ৪ এর অ্যাসাইনমেন্ট

Component Design & UI Architecture

React JS (Module 3-4)

Objective: Use TypeScript for safe, maintainable frontend development. Live Class 1: TypeScript Fundamentals Types, interfaces, enums, inference Live Class 2: Typing React Props, Hooks, Events Generic types, event types Project: Task Manager with TS &amp; Filters

React JSX And Conditional Rendering

React Props and Event & Routing

TypeScript with React

Objective: Level up TypeScript proficiency to confidently handle complex types, generics, and reusable patterns. Live Class 1: Advanced Typing Patterns Discriminated unions, type narrowing, utility types (Partial, Pick, Omit, Record) | Intersection types and conditional types | Extending third-party types Live Class 2: Generic Components and Inference Generic functions and components | Inferring types from props, responses, and API layers | Type guards and exhaustive checks Project: Type-Safe Form Builder or API Layer Create a reusable form schema OR Build a typed wrapper around fetch API with error types and response inference

React Hooks

React State Managment And API Calling

Advanced TypeScript for Frontend Projects

TypeScript (Module 5-6)

Objective: Manage app-wide state and abstract reusable logic. Live Class 1: Context API &amp; Reducers Global state, dispatch pattern Live Class 2: Zustand + Custom Hooks Store setup, sync with localStorage Project: Pomodoro Timer with Global State

Figma to Dynamic React Tailwind Component Development

State Management & Custom Hooks

TypeScript with React (Module 7-7)

Objective: Build server-enabled, file-based routed apps using the Next.js App Router. Live Class 1: Routing, Layouts &amp; Metadata App directory structure, nested routes Live Class 2: API Routes &amp; Server Components Dynamic pages, fetch on server, error handling Project: Markdown Blog App (static content)

[ Project ] Figma to React Dashboard Template Project Part (1)

Next.js Foundations

Objective: Implement secure auth using Clerk or NextAuth.js. Live Class 1: Auth Setup (Clerk/NextAuth) Providers, sessions, auth context Live Class 2: Protecting Routes + Role-Based Access Middleware, redirects, conditional rendering Project: Notes App with Protected Routes

মডিউল ৯ এর অ্যাসাইনমেন্ট

Authentication & Access Control

Objective: Build robust forms with validation and enhanced UI. Live Class 1: React Hook Form + Zod Schema validation, input components Live Class 2: Shadcn/UI + Modals &amp; Toasts Alerts, inputs, feedback UI Project: Contact + Feedback Form with Modal Confirmation

[ Project ] Figma+Rest API to Organic Food Store Ecommerce Front End Development Part 01

[ Project ] Figma+Rest API to Organic Food Store Ecommerce Front End Development Part 02

[ Project ] Figma+Rest API to Organic Food Store Ecommerce Front End Development Part 03

Forms, Validation & UI Libraries

Next JS (Module 8-10)

Objective: Use AI for code generation and integrate LLMs in apps. Live Class 1: Dev Acceleration with Copilot &amp; Prompts GitHub Copilot, prompt engineering basics Live Class 2: Calling OpenAI API in Frontend OpenAI SDK, fetch usage, error states Project: AI Joke/Text Generator App

Start With Next jS SSR, CSR

Next jS Routing

AI-Powered Frontend Coding

Vibe Coding (Module 11-11)

Objective: Design and build a modern portfolio with live previews and animations. Live Class 1: UI/UX Design + Page Setup Layouts, section routing, motion basics Live Class 2: Projects Showcase + Social Links Framer Motion, hover animations Output: Portfolio – Part 1 (About, Projects, Contact)

Next jS Data Fetching

Master Layout

Project – Developer Portfolio Website (Part 1)

Objective: Complete, optimize, and deploy your personal dev portfolio. Live Class 1: SEO, Open Graph, Metadata Vercel OG images, dynamic head tags Live Class 2: Deploying on Vercel + GitHub README Vercel deploy hooks, live demo Output: Fully deployed, SEO-optimized portfolio site

Figma+Rest API to Next.js Seo Friendly Agency Web Site Project Part 01

Figma+Rest API to  Next.js Seo Friendly Agency Web Site Project Part 02

Project – Developer Portfolio Website (Part 2)

Objective: Start building a multi-widget dashboard app. Live Class 1: Project Setup + UI Layouts Dashboard grid, Zustand store Live Class 2: Widgets – Notes, Calendar, Tasks Widget data structure + routing Output: Productivity UI scaffold + 2 working widgets

Figma+Rest API to  Next.js Seo Friendly News Portal Project Part 01

Figma+Rest API to Next.js Seo Friendly News Portal Project Part 02

Project – Productivity Dashboard (Part 1)

Objective: Enhance dashboard with smart AI features and storage. Live Class 1: AI Goal Generator Integration (OpenAI) Task/goal generation from prompt Live Class 2: LocalStorage/Cloud Sync + Final Touches Zustand + useEffect for persistence Output: Dashboard app with AI-based goal planner

মডিউল ১৫ এর অ্যাসাইনমেন্ট

Project – Productivity Dashboard (Part 2)

Objective: Build a markdown blog editor powered by LLMs. Live Class 1: Markdown Editor + Preview textarea input, live preview with markdown-it Live Class 2: Integrate OpenAI for Post Generation Post title/intro/body generation Output: Basic blog editor with AI writing support

Project – AI Blog Generator (Part 1)

Objective: Add filters, design, and deploy the blogging platform. Live Class 1: Tag Filtering, Cards, Pagination Tailwind cards, filters with state Live Class 2: SEO Optimization + Vercel Deployment Public blog routes, OG images Output: Shareable blog generator with AI + markdown

Project – AI Blog Generator (Part 2)

Objective: Build a socket-based chat interface with auth. Live Class 1: Chat UI + Auth Setup Clerk + Zustand + layout Live Class 2: Integrate <a target="_blank" rel="noopener noreferrer nofollow" href="http://Socket.io">Socket.io</a> Messages, connection handling Output: Authenticated real-time chat frontend

Project – Real-time Chat App (Part 1)

Objective: Complete chat features and add AI-powered suggestions. Live Class 1: Typing Indicator + AI Reply Suggestions Socket emit/broadcast, OpenAI reply endpoint Live Class 2: Theme switcher, UI polish, deploy Framer Motion + deploy setup Output: Real-time AI-powered messaging app

Project – Real-time Chat App (Part 2)

Complete Frontend Projects (Module 12-19)

Objective: Plan a full-stack SaaS app with an AI assistant. Live Class 1: Project Scoping + UI Wireframing Define features, user flow, DB model Live Class 2: Auth, Layouts, Dashboard Shell Clerk/Supabase + page structure Output: Capstone app foundation ready

SAAS Planning & Scaffolding

Objective: Finish building and present a polished, AI-enhanced productivity SaaS. Live Class 1: AI Assistant Integration + UI Completion LangChain or OpenAI task planner, suggestions Live Class 2: Deployment, README, Portfolio Integration Polish, deploy to Vercel, write case study Final Project: Full-stack AI productivity tool – résumé &amp; demo-day ready