osad-logo-dark

ব্যাচ শুরু

29 June

Live Class

09:00 PM- 10:30 PM (Sunday,Tuesday)

ভর্তি চলছে

6ষ্ঠ ব্যাচে

Free Masterclass

Modern Web Development with AI: Tailwind, TypeScript & Beyond

2 June

09:00 PM

Curriculum

22 Module

42 Live Class

Foundational Frontend Skills (Module 0-3)

Week

0

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

41 recorded video

Week

2

Tailwind CSS Mastery

2 live class

1 Quiz

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)

Week

1

Dev Setup & Modern Frontend Foundations

2 live class

1 Quiz

Objective: Set up a scalable dev environment and reinforce key JavaScript skills.

Live Class 1: Developer Environment & 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)

Week

3

React Core Essentials

2 live class

1 Quiz

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

Advanced Frontend Concepts (Module 4-7)

Week

4

Component Design & UI Architecture

2 live class

1 Quiz

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

Week

6

Advanced TypeScript for Frontend Projects

2 live class

1 Quiz

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

Week

5

TypeScript with React

2 live class

1 Quiz

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 & Filters

Week

7

State Management & Custom Hooks

2 live class

1 Quiz

Objective: Manage app-wide state and abstract reusable logic.


Live Class 1: Context API & Reducers
Global state, dispatch pattern


Live Class 2: Zustand + Custom Hooks
Store setup, sync with localStorage


Project: Pomodoro Timer with Global State

Full-Stack & Modern Tools (Module 8-11)

Week

8

Next.js Foundations

2 live class

1 Quiz

Objective: Build server-enabled, file-based routed apps using the Next.js App Router.


Live Class 1: Routing, Layouts & Metadata
App directory structure, nested routes


Live Class 2: API Routes & Server Components
Dynamic pages, fetch on server, error handling


Project: Markdown Blog App (static content)

Week

10

Forms, Validation & UI Libraries

2 live class

1 Quiz

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 & Toasts
Alerts, inputs, feedback UI


Project: Contact + Feedback Form with Modal Confirmation

Week

9

Authentication & Access Control

2 live class

1 Quiz

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

Week

11

AI-Powered Frontend Coding

2 live class

1 Quiz

Objective: Use AI for code generation and integrate LLMs in apps.


Live Class 1: Dev Acceleration with Copilot & 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

কোর্সটি আপনারই জন্য

যাদের টার্গেট একজন ফ্রন্টএন্ড ডেভেলপার হওয়া

যারা আগে থেকে জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাংগুয়েজ জানেন

রিএক্ট নিয়ে আগে থেকে যারা কাজ করছেন

যেসব ট্যুলস ও টেকনোলোজি শিখবেন

VS Code

Tailwind CSS

React.Js

Next.Js

Vercel

Git & Git Hub

API Integration

কোর্সে আপনি পাচ্ছেন

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

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

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

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

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

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

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

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

সার্টিফিকেট

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

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

Pre Recorded videos

Free

41 Videos

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

course img

যেসকল রিয়েল লাইফ প্রোজেক্ট করানো হবে

কোর্সটি আপনারই জন্য

যাদের টার্গেট একজন ফ্রন্টএন্ড ডেভেলপার হওয়া

যারা আগে থেকে জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাংগুয়েজ জানেন

রিএক্ট নিয়ে আগে থেকে যারা কাজ করছেন

Instructor

Lead Instructor

Showrin Barua

Senior Software Engineer L3 at Enosis Solutions | Former Software Engineer (Deputy Team Lead - Frontend Development) at WellDev | Former Writer at UX Planet | Former Technical Secretary at Manipulator of Electrons Club (MEC) | Former Frontend Engineer at Xbit Studio

Lead Instructor

Salim Reza Joy

Full Stack Engineer at DigiGround | Ex MERN Stack Developer at Duber

Lead Instructor

Nirob Hasan

Software Engineer at E. B. Solutions Ltd | Former programming mentor at Bangladesh Open Source Network (BdOSN)

Teaching Assistant

Md.Manirul Islam

Software Engineer at Rashi-Tech Co. Ltd

Teaching Assistant

Amit Biswas

MERN | NEXTJS | Prisma | MySql | Javascript

কী কী থাকতে হবে

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

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

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

সাকসেসফুল হয়েছেন যারা

প্রায়ই জিজ্ঞেস করা প্রশ্ন

  • 1. আমি কি ভিডিওগুলো ডাউনলোড করতে পারবো?

    হ্যা, ওস্তাদের অ্যাপে আপনি ভিডিও ডাউনলোড করে রাখতে পারবেন।
  • 2. আমি কি মোবাইল দিয়ে জয়েন করতে পারবো?

    মোবাইল দিয়ে লাইভ ক্লাসে জয়েন করতে পারবেন কিন্তু প্র্যাকটিস করতে পারবেন না
  • 3. আমার কি ভিডিওগুলোর লাইফটাইম এক্সেস থাকবে?

    জ্বি, ভিডিও এবং রিসোর্সের লাইফ টাইম এক্সেস পাচ্ছেন।
  • 4. লাইভ ক্লাস কোথায় হবে ?

    লাইভ ক্লাসে আপনি একটি সিঙ্গেল ক্লিকে জয়েন করে ফেলতে পারবেন ওস্তাদ প্ল্যাটফর্ম থেকেই।
  • 5. এসেসমেন্ট কিভাবে হবে?

    প্রতি সপ্তাহে থাকবে একটি করে কুইজ এবং এক্সাম উইকে থাকবে এসাইনমেন্ট এবং কুইজ।
  • 6. ওস্তাদ প্রো ব্যাচে কাদেরকে নেয়া হবে?

    ৭০% বা তার বেশি মার্ক নিয়ে যারা কোর্স কমপ্লিট করবেন তাদেরকে নিয়ে করা হবে প্রো ব্যাচ।
  • 7. দেশের বাইরে থেকে কিভাবে পেমেন্ট করবো?

    ওস্তাদের ইন্টারন্যাশনাল পেমেন্ট গেটওয়ের (Stripe) মাধ্যমে আপনি ক্রেডিট কিংবা ডেবিট কার্ড দিয়ে পে করতে পারবেন।
  • 8. লাইভ ক্লাসের রেকর্ডিং থাকবে?

    জ্বী, পাবেন লাইভ ক্লাস রেকর্ডিং এর লাইফ টাইম এক্সেস।
  • 9. প্র্যাকটিস করতে গিয়ে সমস্যায় পড়লে সাপোর্ট পাবো কোথায়?

    যেকোনো সমস্যায় দুইবেলা সাপোর্ট ক্লাসে স্ক্রিন শেয়ার করে সাপোর্ট নিবেন দক্ষ সাবজেক্ট ম্যাটার এক্সপার্টদের থেকে।

How to Pay

  • 1. পেমেন্ট মেথড কি কি?

    আপনি সরাসরি ওস্তাদের পেমেন্ট গেইটওয়ের মাধ্যমে Bkash, Nagad, Rocket, Visa, Mastercard, Debit and Credit কার্ড দিয়ে পেমেন্ট করতে পারবেন।
  • 2. আমি কি যেকোনো ডিভাইস দিয়ে পেমেন্ট করতে পারবো?

    জ্বী, আপনি ফোন, পিসি কিংবা ল্যাপটপ যেকোনো ডিভাইস দিয়ে পেমেন্ট করতে পারবেন।
  • 3. পেমেন্ট প্রসেস কি?

    পেমেন্ট করার জন্য প্রথমে ব্যাচে ভর্তি হোন বাটনে ক্লিক করুন। এরপর পেমেন্ট পেইজ থেকে পেমেন্ট মেথড সিলেক্ট করে পেমেন্ট করুন বাটনে ক্লিক করুন এবং পেমেন্ট সম্পন্ন করুন।
  • 4. ডিসকাউন্ট কিভাবে পাবো?

    আপনি ব্যাচে ভর্তি হওয়ার আগে এভেইলেবল প্রোমো কোড বসিয়ে এক্সপেক্টেড ডিসকাউন্ট পেতে পারেন।
  • 5. পেমেন্ট কনফার্মেশন কিভাবে পাবো?

    পেমেন্ট প্রসেস শেষ হলে আপনার কাছে একটি মেসেজ আসবে এবং আপনার ড্যাশবোর্ডে আপনার জয়েন করা ব্যাচটি দেখাবে। আপনার স্টাডি প্লান অনুযায়ী কোর্স শুরু করে দিতে পারবেন।
  • 6. আমার লেনদেনের হিসাব থাকবে কি?

    আপনার ড্যাশবোর্ডে আপনি প্রোফাইল থেকে ট্রাঞ্জেকশন ট্যাবে ক্লিক করে লেনদেন দেখতে পারবেন।