osad-logo-dark

ব্যাচ শুরু

30 April

Live Class

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

ভর্তি চলছে

5 ব্যাচে

Free Masterclass

Frontend Excellence Unleashed: Mastering Tailwind CSS, React & Next.js for High-Performance Web Apps!

21 March

10:15 PM

Curriculum

16 Module

28 Live Class

Mastering Tailwind (Module 0-4)

Week

0

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

161 recorded video

Week

2

টেইলউইন্ড দিয়ে শিখবো পার্ফেক্ট স্পেসিং এবং প্রো সাইজিং

3 live class

1 Quiz

Live Class 1

Padding | Margin | Space Between | Width | Min-Width | Max-Width | Height | Min-Height | Max-Height | Size | Font Family | Font Size | Font Smoothing | Font Style | Font Weight | Font Variant Numeric | Letter Spacing | Line Clamp | Line Height | List Style Image | List Style Position | List Style Type | Text Align | Text Color | Text Decoration

Live Class 2

Text Decoration Color | Text Decoration Style | Text Decoration Thickness | Text Underline Offset | Text Transform | Text Overflow | Text Wrap | Text Indent | Vertical Align | Whitespace | Word Break | Hyphens | Content | Background Attachment | Background Clip | Background Color | Background Origin | Background Position | Background Repeat | Background Size | Background Image

Live Class 3
Gradient Color Stops | Border Radius | Border Width | Border Color | Border Style | Divide Width | Divide Color | Divide Style | Outline Width | Outline Color | Outline Style | Outline Offset | Ring Width | Ring Color | Ring Offset Width | Ring Offset Color


[Project Class] 

গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Week

4

এক্সাম উইক ১

1 Assignment

1 Test

Assignment

মডিউল ১ থেকে মডিউল ৩ পর্যন্ত যা যা আলোচনা হয়েছে, তার উপর ভিত্তি করে থাকবে একটি বড়সড় অ্যাসাইনমেন্ট। এটি আপনাকে আপনার শেখা বিষয়গুলো পুনর্বিবেচনা এবং বাস্তব জীবনের চ্যালেঞ্জ মোকাবিলার প্রস্তুতি নিতে সাহায্য করবে।


Test

মডিউল ১ থেকে মডিউল ৩ পর্যন্ত শেখা বিষয়গুলোর উপর ভিত্তি করে একটি লাইভ টেস্ট হবে। এই টেস্টে আপনার দক্ষতা ঝালাই করার সুযোগ থাকবে।

Week

1

টেইলউইন্ড সিএসএস দিয়ে দিয়ে শুরু

3 live class

1 Quiz

Live Class 1: Installation | Editor Setup | Core Concept: Utility-First Fundamentals | Core Concept: Hover, Focus, and Other States | Core Concept: Responsive Design | Core Concept: Dark Mode | Core Concept: Functions & Directives

Live Class 2: Aspect Ratio | Container | Columns | Break After | Break Before | Break Inside | Box Decoration Break | Box Sizing | Display | Object Fit | Object Position || Justify Items | Justify Self | Align Content | Align Items | Align Self | Place Content | Place Items | Place Self


Live Class 3: Overflow | Overscroll Behavior | Position | Top / Right / Bottom / Left | Visibility | Z-Index | Flex Basis | Direction | Wrap | Flex | Flex Grow | Flex Shrink | Order | Grid Template Columns | Grid Column Start / End | Grid Template Rows | Grid Row Start / End | Grid Auto Flow | Grid Auto Columns | Grid Auto Rows | Gap | Justify Content

 [Project Class]  গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Week

3

শিখবো টেইলউইন্ড এবং রিয়েক্ট এর ইন্টারএকটিভিটি

3 live class

1 Quiz

Live Class 1

Box Shadow | Box Shadow Color | Opacity | Mix Blend Mode | Background Blend Mode | Blur | Brightness | Contrast | Drop Shadow | Grayscale | Hue Rotate | Invert | Saturate | Sepia | Backdrop Blur

Live Class 2
Backdrop Brightness | Backdrop Contrast | Backdrop Grayscale | Backdrop Hue Rotate | Backdrop Invert | Backdrop Opacity | Backdrop Saturate | Backdrop Sepia | Border Collapse | Border Spacing | Table Layout | Caption Side | Transition Property | Transition Duration


Live Class 3

Transition Timing Function | Transition Delay | Animation | Accent Color | Appearance | Cursor | Caret Color | Pointer Events | Resize | Scroll Behavior | Scroll Margin | Scroll Padding | Scroll Snap Align | Scroll Snap Stop | Scroll Snap Type | Touch Action | User Select | Will Change

[Project Class]

গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Mastering react.js (Module 5-9)

Week

5

রিয়েক্ট দিয়ে শিখবো প্রোপার্টি, ইভেন্ট এবং সিমলেস নেভিগেশন

2 live class

1 Quiz

Live Class 1
JSX | Conventions | JSX in-line if-else | Function expressions inside your JSX | JSX Loop inside | JSX Conditional Rendering using if-else | JSX Conditional Rendering using switch case | JSX Conditional Rendering using Ternary Operator | JSX Conditional Rendering using logical && | JSX Conditional Rendering using IIF


Live Class 2
Passing props | Click Event | Submit Event | OnChange | OnKeyUp | OnKeyDown | Form Submission | React Router Dom | HashRouter | Browser Router


[Project Class] 

গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Week

7

রিয়েক্ট এবং টেইলউইন্ড দিয়ে বানাবো ফাংশনাল ইউআই

2 live class

1 Quiz

Live Class 1
Accordion | Avatar | Badge | Alert Dialog | Modal | Bottom Sheet | Top Sheet | Left Sheet | Right Sheet | Circular Progress Bar | Dashboard Card | Datatable


Live Class 2
Searchable DropDown | File Drag Input | List View With Action | Login Form | Registration Form | Payment Form | OTP Input | Price Table | Rating Card | Side Nav Layout | Tab Layout


[Project Class]
গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Week

9

এক্সাম উইক ২

1 Assignment

1 Test

Assignment

মডিউল ৫ থেকে মডিউল ৮ পর্যন্ত যা যা আলোচনা হয়েছে, তার উপর ভিত্তি করে থাকবে একটি বড়সড় অ্যাসাইনমেন্ট। এটি আপনাকে আপনার শেখা বিষয়গুলো পুনর্বিবেচনা এবং বাস্তব জীবনের চ্যালেঞ্জ মোকাবিলার প্রস্তুতি নিতে সাহায্য করবে।


Test

মডিউল ৫ থেকে মডিউল ৮ পর্যন্ত শেখা বিষয়গুলোর উপর ভিত্তি করে একটি লাইভ টেস্ট হবে। এই টেস্টে আপনার দক্ষতা ঝালাই করার সুযোগ থাকবে।

Week

6

শিখবো স্টেটফুল রিয়েক্ট এবং করবো এপিআই ইন্টিগ্রেশন

2 live class

1 Quiz

Live Class 1
Working with useState() | Create a counter app using state | Create a todo list app using state | Managing form using state | Call API and make a product list using state | Working with useEffect() | Working with useLayoutEffect()


Live Class 2
Working with useRef() | Working with useMemo() | Working with useCallback() | Working with useReducer() | Working with useDebugValue()


[Project Class]
গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Week

8

ইন্টার‍্যাকটিভ ড্যাশবোর্ডঃ ফিগমা এবং এপিআই ইন্টিগ্রেশন

2 live class

1 Quiz

Live Class 1
Sidebar Navigation | Top Navbar | Dashboard Overview (Summary Cards) | Data Table | Charts and Graphs


Live Class 2
User Profile | Settings Panel | Notifications/Alerts | Task/To-Do List | Activity Log/Recent Activities


[Project Class]
গত লাইভ ক্লাসগুলোতে যা শিখেছেন তার প্র্যাকটিক্যাল ইমপ্লিমেন্টেশন শিখবেন এই ক্লাসে

Mastering Next.js (Module 10-15)

Week

10

Organic Food Store Frontend: Figma & API Integration

3 live class

1 Quiz

Live Class 1
Designing the Organic Food Store Frontend using Figma | Creating Wireframes and Mockups | Understanding Design Elements | Implementing Responsive Design Principles


Live Class 2
Introduction to API Integration | Fetching Data from APIs | Displaying Dynamic Data on the Frontend


Live Class 3
Handling API Errors and Loading States | Integrating API with Organic Food Store Design | Finalizing and Optimizing Frontend Integration

Week

12

নেক্সট জেএস ডাটা ফেচিং এবং লেআউট

2 live class

1 Quiz

Live Class 1

On the server, with the fetch API | On the server, with third-party libraries | On the client, with third-party libraries

Live Class 2

Caching, and Revalidating | SSR CSR combination: Where and how | Master layout in directory structure | Directory file naming convention and use cases

Week

14

ফিগমা, নেক্সট জেএস এবং রেস্ট এপিআই দিয়ে বানাবো নিউজ পোর্টাল

2 live class

1 Quiz

Live Class 1

Introduction to Figma and Next.js | | Designing a News Portal Layout in Figma | | Converting Figma Design to Next.js Components | | Integrating REST API Endpoints for News Content

Live Class 2

SEO Best Practices and Implementation in Next.js | | Styling Components with CSS and Styled-Components | | Handling Data Fetching and State Management | | Optimizing Performance and SEO in Next.js

Week

11

শিখবো নেক্সট জেএস রাউটিং এবং নেভিগেশন

2 live class

1 Quiz

Live Class 1
Creating a New Project | Understanding Project Structure in Detail | How Next.js Optimization Works Behind the Scenes | How Server-Side Rendering (SSR) and Client-Side Rendering (CSR) Work in Next.js


Live Class 2
| Styling and Serving Static Files | Detailed Overview of Routing in Next.js | Link Component Usage: Queries and Properties

Week

13

নেক্সট জেএস দিয়ে বানাবো এজেন্সি সাইট

2 live class

1 Quiz

Live Class 1

Introduction to Figma and Next.js | | Designing a Layout in Figma | | Converting Figma Design to Next.js Components

Live Class 2

Integrating API Endpoints into Next.js | | Styling Components with CSS and Styled-Components | | Handling Data Fetching and State Management | | Optimizing Performance in Next.js

Week

15

এক্সাম উইক ৩

1 Assignment

1 Test

Assignment
মডিউল ১০ থেকে মডিউল ১৪ পর্যন্ত যা যা আলোচনা হয়েছে, তার উপর ভিত্তি করে থাকবে একটি বড়সড় অ্যাসাইনমেন্ট। এটি আপনাকে আপনার শেখা বিষয়গুলো পুনর্বিবেচনা এবং বাস্তব জীবনের চ্যালেঞ্জ মোকাবিলার প্রস্তুতি নিতে সাহায্য করবে।

Test
মডিউল ১০ থেকে মডিউল ১৪ পর্যন্ত শেখা বিষয়গুলোর উপর ভিত্তি করে একটি লাইভ টেস্ট হবে। এই টেস্টে আপনার দক্ষতা ঝালাই করার সুযোগ থাকবে।

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

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

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

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

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

VS Code

Tailwind CSS

React.Js

Next.Js

Vercel

Git & Git Hub

API Integration

Code Mama

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

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

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

সপ্তাহে ৩ দিন লাইভ ক্লাস

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

১০+ প্র্যাক্টিস প্রোজেক্ট

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

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

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

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

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

সার্টিফিকেট

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

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

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

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

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

Instructor

Lead Instructor

Showrin Barua

Senior Software Engineer L3 at Enosis Solutions

Lead Instructor

Nirob Hasan

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

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

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

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

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

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

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

  • 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. আমার লেনদেনের হিসাব থাকবে কি?

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