React

Name	Link
Hello World
JSX Expressions
Props Example
Default Props
Children Prop
Inline Styling
CSS Class Binding
Rendering Variables
Conditional Rendering (if/else)
Conditional Rendering (ternary)
Rendering Lists with map
Using Keys in Lists
Fragment Usage
Event Handling (onClick)
Passing Event Handlers as Props
Controlled Input (text)
Controlled Input (checkbox)
Controlled Input (select)
Multiple Inputs Form
Form Submit Handling
Basic Button Component
Image Rendering
Dynamic Attributes
Basic Layout with Divs
Nesting Components
Import/Export Components
Reusable Card Component
Passing Functions as Props
Prop Drilling Example
Default Export vs Named Export
useState Counter
Toggle with useState
Manage Object State
Manage Array State
Update Array with Spread
Delete from Array State
Filter Array State
Add Item to List State
Form with useState
Multiple States Example
useEffect Basic
useEffect with Cleanup
useEffect API Fetch
useEffect Dependency Array
useRef DOM Access
useRef Persist Value
useRef to Count Renders
Forward Ref Example
useContext Basic
Theme Context Example
Auth Context Example
Nested Context Example
useReducer Counter
useReducer Todo List
Multiple Reducers
Custom Hook (useToggle)
Custom Hook (useLocalStorage)
Custom Hook (useFetch)
Custom Hook (usePrevious)
Custom Hook (useDebounce)
State Lifting Example
Derived State Example
Memoization with useMemo
Memoization with useCallback
React.memo Optimization
Lazy State Initialization
Async State Updates
Batched State Updates
Immutable Updates Example
Complex Form State
Setup React Router
Basic Route
Nested Routes
Route Params
Query Params
useNavigate Example
Navigate Programmatically
Protected Route
Redirect Route
Link Component
NavLink with Active Class
Layout with Outlet
404 Not Found Page
Private Route Wrapper
Dynamic Nested Routes
Lazy Loading Routes
Suspense with Routes
Multiple Routers
Scroll to Top on Route Change
Route Guards
Basic Form Submit
Multiple Input Form
Controlled vs Uncontrolled Inputs
File Upload Input
Textarea Input
Radio Buttons Input
Checkbox Group Input
Select Dropdown Input
Form Validation (manual)
Required Field Validation
Min/Max Length Validation
Number Validation
Email Validation
Regex Validation
Disable Button Until Valid
Error Messages Display
Real-time Validation
Multi-step Form
useForm Hook Example
Formik Example
Name	Link
-----------------------------------------	------
useLayoutEffect Example
useImperativeHandle Example
forwardRef Advanced
Compound Components Pattern
Render Props Pattern
Higher Order Component
Custom Context Hook
Error Boundary Component
Suspense Fallback UI
Concurrent Rendering Example
Code Splitting Example
Dynamic Import Example
useTransition Example
useDeferredValue Example
useId Example
useSyncExternalStore Example
useInsertionEffect Example
Controlled vs Uncontrolled Components
Portals Example
Modal with Portal
Tooltip with Portal
Event Bubbling Example
Synthetic Events Example
StrictMode Example
Profiler API Example
Optimize Re-renders Example
Context Performance Pitfall
Context Selector Pattern
Subscription Example
Performance Measurement
Fetch API Example
Fetch with Async/Await
Fetch Error Handling
Loading State Example
Retry Fetch Example
Fetch on Button Click
Fetch on Input Change
Cancel Fetch with AbortController
useSWR Example
React Query Example
Axios Fetch Example
POST API Request
PUT API Request
DELETE API Request
GraphQL API Example
REST API Pagination
Infinite Scroll with API
Search with API Data
Debounced API Search
Cached API Data
Navbar Component
Sidebar Component
Footer Component
Modal Component
Dialog Component
Tooltip Component
Dropdown Component
Accordion Component
Tabs Component
Carousel Component
Pagination Component
Breadcrumb Component
Stepper Component
Snackbar/Toast Component
Loader/Spinner Component
Skeleton Loader Component
Card Component
Avatar Component
Badge Component
Rating Component
Todo App
Notes App
Weather App (API)
Calculator App
Stopwatch App
Timer App
Quiz App
BMI Calculator
Random Joke Generator
Random Quote Generator
Image Gallery
Movie Search App (API)
Shopping Cart
E-commerce Product List
Expense Tracker
Crypto Price Tracker
Blog App
Markdown Previewer
Music Player
Chat App (basic)

Tailwind-css

🎨 Tailwind CSS – 200 Codes Roadmap

Name	Link
Install Tailwind in React
Setup Tailwind CLI
Responsive Container
Text Colors
Background Colors
Font Size Utilities
Font Weight Utilities
Letter Spacing Utilities
Line Height Utilities
Responsive Text Alignment
Responsive Visibility (hidden, block)
Margin Utilities
Padding Utilities
Width Utilities
Height Utilities
Min/Max Width Utilities
Min/Max Height Utilities
Border Utilities
Border Radius Utilities
Border Color Utilities
Shadow Utilities
Opacity Utilities
Z-Index Utilities
Overflow Utilities
Display Utilities
Flexbox Basics
Flex Direction Utilities
Justify Content Utilities
Align Items Utilities
Gap Utilities
Simple Navbar
Centered Hero Section
Two-column Layout (flex)
Three-column Layout (flex)
Grid Basics
Grid with 2 Columns
Grid with 3 Columns
Grid with Responsive Breakpoints
Grid with Gaps
Sticky Navbar
Fixed Footer
Responsive Sidebar
Split Screen Layout
Holy Grail Layout
Dashboard Layout
Sticky Header Layout
Responsive Card Grid
Masonry Layout (grid)
Nested Grids
Grid with Auto Rows
Grid Template Columns
Grid Template Rows
Auto-fit Grid
Auto-fill Grid
CSS Grid Areas with Tailwind
Responsive Flex Wrap
Flex Grow Example
Flex Shrink Example
Flex Basis Example
Responsive Flexbox
Button Variants
Icon Button
Button with Loading Spinner
Card Component
Image Card
Profile Card
Pricing Card
Product Card
Badge Component
Avatar Component
Alert Component
Modal Component
Dialog Box
Tooltip Component
Dropdown Component
Accordion Component
Tabs Component
Pagination Component
Breadcrumb Component
Navbar with Dropdown
Sidebar with Collapse
Search Bar Component
Input Field Variants
Checkbox Styling
Radio Button Styling
Switch Toggle Component
Select Dropdown Styling
File Upload Styling
Table Component
Data Table with Striped Rows
Hover Table Row Effect
Responsive Table
Toast/Notification Component
Skeleton Loader
Spinner Loader
Progress Bar
Stepper Component
Timeline Component
Chat Bubble UI
Comment Section Component
Name	Link
-------------------------------------	------
Dark Mode Setup
Gradient Backgrounds
Hover Effects
Focus Effects
Active State Effects
Group Hover Effects
Transition Utilities
Transform Utilities
Scale Effect
Rotate Effect
Translate Effect
Skew Effect
Animation Utilities
Custom Keyframes
Pulse Animation
Bounce Animation
Spin Animation
Ping Animation
Wiggle Animation
Animate on Scroll
Responsive Grid + Flex Combo
Glassmorphism Card
Neumorphism Button
Frosted Glass Navbar
Gradient Text
Gradient Borders
Image Overlay Effect
Responsive Hero with Gradient
Custom Container Widths
Responsive Spacing Utilities
Sticky Scroll Sections
Parallax Scrolling Section
Clip-path Effect
Backdrop Filter Blur
Backdrop Filter Brightness
Responsive Typography
Responsive Image Grids
CSS Variables in Tailwind
Tailwind with Plugins
Customizing Tailwind Config
Login Page
Registration Page
Landing Page
Portfolio Website
Blog Homepage
Blog Post Page
Product Listing Page
Product Detail Page
Shopping Cart Page
Checkout Page
Dashboard Page
Analytics Dashboard
Profile Page
Settings Page
Contact Page
About Us Page
Services Page
FAQ Page
Pricing Page
Features Page
Admin Dashboard
Dark Mode Website
Light/Dark Toggle
Sidebar Dashboard Layout
Music Player UI
Video Player UI
Chat UI
Social Media Feed
E-commerce Homepage
Travel Agency Landing Page
Restaurant Menu Page
Food Delivery UI
Event Landing Page
Conference Website
Resume Website
Business Website
SaaS Landing Page
Login + Social Auth UI
Newsletter Subscription Form
Testimonial Section
Team Section
Gallery Page
Image Slider
Testimonial Carousel
Pricing Table
Feature Comparison Table
Multi-step Form
Kanban Board UI
Todo App UI
Weather App UI
Calculator UI
Calendar UI
File Manager UI
Music Playlist UI
Video Streaming UI
Ecommerce Dashboard
Finance Tracker UI
Personal Blog UI
Social Profile UI
Complete Portfolio Website

Bootstrap

🅱️ Bootstrap – 200 Codes Roadmap

Name	Link
Install Bootstrap via CDN
Install Bootstrap via npm
Container Usage	https://github.com/siddengineer/Tailwindcss-css-Bootstrap/blob/main/%F0%9F%A7%B1%20Bootstrap%20Container%20Usage
Grid Basics	https://github.com/siddengineer/Tailwindcss-css-Bootstrap/blob/main/%F0%9F%A7%A9%20Bootstrap%20Grid%20System
Responsive Grid
Typography Basics
Text Alignment
Text Colors
Background Colors
Borders
Border Radius
Shadows
Spacing Utilities (m, p)
Display Utilities
Flex Utilities
Grid with Gutters
Responsive Breakpoints
Float Utilities
Position Utilities
Visibility Utilities
Overflow Utilities
Ratio Utilities
Z-Index Utilities
Sizing Utilities
Responsive Images
Figure Component
Tables Basic
Table with Striped Rows
Responsive Table
Hoverable Table
Button Variants
Outline Buttons
Button Groups
Button Toolbar
Alerts
Badges
Breadcrumbs
Cards Basic
Card with Image
Card Deck
Carousel
Close Button
Collapse Component
Dropdowns
List Groups
Modal
Navs
Navbar
Offcanvas
Pagination
Popovers
Progress Bars
Scrollspy
Spinners
Toasts
Tooltips
Accordion
Form Control Input
Select Dropdown
Checkbox Input
Radio Input
Range Slider
File Input
Floating Labels
Form Validation
Input Groups
Date Input
Disabled Inputs
Readonly Inputs
Inline Forms
Simple Navbar Layout
Hero Section Layout
Two-column Layout
Three-column Layout
Responsive Sidebar Layout
Dashboard Layout
Split Screen Layout
Holy Grail Layout
Sticky Footer Layout
Fixed Navbar Layout
Responsive Card Grid
Masonry Layout
Login Form Layout
Registration Form Layout
Contact Form Layout
About Page Layout
Services Page Layout
Pricing Page Layout
FAQ Layout
Portfolio Layout
Blog Homepage Layout
Blog Post Layout
Product Listing Layout
Product Detail Layout
Shopping Cart Layout
Checkout Layout
Profile Page Layout
Settings Page Layout
Admin Dashboard Layout
Analytics Dashboard Layout
Hover Effects
Active Effects
Focus Effects
Responsive Text Utilities
Responsive Spacing Utilities
Responsive Borders
Responsive Shadows
Custom Colors
Gradients
Animations with Bootstrap
Transitions with Bootstrap
Responsive Flex Wrap
Align Items Utilities
Justify Content Utilities
Order Utilities
Grow/Shrink Utilities
Responsive Margin Utilities
Responsive Padding Utilities
Responsive Gap Utilities
Responsive Display Utilities
Dark Mode Bootstrap
Light Mode Bootstrap
CSS Variables Bootstrap
Icons with Bootstrap Icons
Responsive Modals
Responsive Tables
Responsive Carousels
Responsive Navbars
Scrollable Sections
Sticky Sections
Fixed Position Utilities
Relative Position Utilities
Absolute Position Utilities
Tooltip Triggers
Popover Placement
Toast Placement
Offcanvas Placement
Collapse with Accordion
Nested Dropdowns
Megamenu with Navbar
Login Page
Signup Page
Landing Page
Portfolio Website
Blog Website
News Website
Product Landing Page
Ecommerce Homepage
Product Detail Page
Cart Page
Checkout Page
Payment Form
Dashboard Page
Admin Panel
Profile Page
Settings Page
FAQ Page
Pricing Page
Contact Page
About Page
Services Page
SaaS Landing Page
Resume Website
Personal Blog
Music Player UI
Video Player UI
Weather App UI
Calculator UI
Chat UI
Social Media Feed
Restaurant Website
Food Delivery UI
Travel Website
Event Landing Page
Conference Website
University Website
Hospital Website
Gym Website
Real Estate Website
Finance Tracker
Stock Price Tracker
Movie Booking Website
Hotel Booking Website
Flight Booking Website
Job Portal UI
Ecommerce Dashboard
File Manager UI
Calendar UI
Todo App UI
Notes App UI
Kanban Board UI
CRM Dashboard
Analytics Dashboard
Crypto Tracker UI
Blog CMS
Ecommerce CMS
Multi-step Form
Newsletter Form
Testimonial Section
Complete Portfolio Website

Code	Level	Status

1 Hello World Basics ⬜ 2 JSX Expressions Basics ⬜ 3 Props Example Basics ⬜ 4 Default Props Basics ⬜ 5 Children Prop Basics ⬜ 6 Inline Styling Basics ⬜ 7 CSS Class Binding Basics ⬜ 8 Rendering Variables Basics ⬜ 9 Conditional Rendering (if/else) Basics ⬜ 10 Conditional Rendering (ternary) Basics ⬜ 11 Rendering Lists with map Basics ⬜ 12 Using Keys in Lists Basics ⬜ 13 Fragment Usage Basics ⬜ 14 Event Handling (onClick) Basics ⬜ 15 Passing Event Handlers as Props Basics ⬜ 16 Controlled Input (text) Basics ⬜ 17 Controlled Input (checkbox) Basics ⬜ 18 Controlled Input (select) Basics ⬜ 19 Multiple Inputs Form Basics ⬜ 20 Form Submit Handling Basics ⬜ 21 Basic Button Component Basics ⬜ 22 Image Rendering Basics ⬜ 23 Dynamic Attributes Basics ⬜ 24 Basic Layout with Divs Basics ⬜ 25 Nesting Components Basics ⬜ 26 Import/Export Components Basics ⬜ 27 Reusable Card Component Basics ⬜ 28 Passing Functions as Props Basics ⬜ 29 Prop Drilling Example Basics ⬜ 30 Default Export vs Named Export Basics ⬜ 31 useState Counter State & Hooks ⬜ 32 Toggle with useState State & Hooks ⬜ 33 Manage Object State State & Hooks ⬜ 34 Manage Array State State & Hooks ⬜ 35 Update Array with Spread State & Hooks ⬜ 36 Delete from Array State State & Hooks ⬜ 37 Filter Array State State & Hooks ⬜ 38 Add Item to List State State & Hooks ⬜ 39 Form with useState State & Hooks ⬜ 40 Multiple States Example State & Hooks ⬜ 41 useEffect Basic State & Hooks ⬜ 42 useEffect with Cleanup State & Hooks ⬜ 43 useEffect API Fetch State & Hooks ⬜ 44 useEffect Dependency Array State & Hooks ⬜ 45 useRef DOM Access State & Hooks ⬜ 46 useRef Persist Value State & Hooks ⬜ 47 useRef to Count Renders State & Hooks ⬜ 48 Forward Ref Example State & Hooks ⬜ 49 useContext Basic State & Hooks ⬜ 50 Theme Context Example State & Hooks ⬜ 51 Auth Context Example State & Hooks ⬜ 52 Nested Context Example State & Hooks ⬜ 53 useReducer Counter State & Hooks ⬜ 54 useReducer Todo List State & Hooks ⬜ 55 Multiple Reducers State & Hooks ⬜ 56 Custom Hook (useToggle) State & Hooks ⬜ 57 Custom Hook (useLocalStorage) State & Hooks ⬜ 58 Custom Hook (useFetch) State & Hooks ⬜ 59 Custom Hook (usePrevious) State & Hooks ⬜ 60 Custom Hook (useDebounce) State & Hooks ⬜ 61 State Lifting Example State & Hooks ⬜ 62 Derived State Example State & Hooks ⬜ 63 Memoization with useMemo State & Hooks ⬜ 64 Memoization with useCallback State & Hooks ⬜ 65 React.memo Optimization State & Hooks ⬜ 66 Lazy State Initialization State & Hooks ⬜ 67 Async State Updates State & Hooks ⬜ 68 Batched State Updates State & Hooks ⬜ 69 Immutable Updates Example State & Hooks ⬜ 70 Complex Form State State & Hooks ⬜ 71 Setup React Router Routing ⬜ 72 Basic Route Routing ⬜ 73 Nested Routes Routing ⬜ 74 Route Params Routing ⬜ 75 Query Params Routing ⬜ 76 useNavigate Example Routing ⬜ 77 Navigate Programmatically Routing ⬜ 78 Protected Route Routing ⬜ 79 Redirect Route Routing ⬜ 80 Link Component Routing ⬜ 81 NavLink with Active Class Routing ⬜ 82 Layout with Outlet Routing ⬜ 83 404 Not Found Page Routing ⬜ 84 Private Route Wrapper Routing ⬜ 85 Dynamic Nested Routes Routing ⬜ 86 Lazy Loading Routes Routing ⬜ 87 Suspense with Routes Routing ⬜ 88 Multiple Routers Routing ⬜ 89 Scroll to Top on Route Change Routing ⬜ 90 Route Guards Routing ⬜

Code Level Status

91 Basic Form Submit Forms & Validation ⬜ 92 Multiple Input Form Forms & Validation ⬜ 93 Controlled vs Uncontrolled Inputs Forms & Validation ⬜ 94 File Upload Input Forms & Validation ⬜ 95 Textarea Input Forms & Validation ⬜ 96 Radio Buttons Input Forms & Validation ⬜ 97 Checkbox Group Input Forms & Validation ⬜ 98 Select Dropdown Input Forms & Validation ⬜ 99 Form Validation (manual) Forms & Validation ⬜ 100 Required Field Validation Forms & Validation ⬜ 101 Min/Max Length Validation Forms & Validation ⬜ 102 Number Validation Forms & Validation ⬜ 103 Email Validation Forms & Validation ⬜ 104 Regex Validation Forms & Validation ⬜ 105 Disable Button Until Valid Forms & Validation ⬜ 106 Error Messages Display Forms & Validation ⬜ 107 Real-time Validation Forms & Validation ⬜ 108 Multi-step Form Forms & Validation ⬜ 109 useForm Hook Example Forms & Validation ⬜ 110 Formik Example Forms & Validation ⬜ 111 useLayoutEffect Example Advanced Hooks & Patterns ⬜ 112 useImperativeHandle Example Advanced Hooks & Patterns ⬜ 113 forwardRef Advanced Advanced Hooks & Patterns ⬜ 114 Compound Components Pattern Advanced Hooks & Patterns ⬜ 115 Render Props Pattern Advanced Hooks & Patterns ⬜ 116 Higher Order Component Advanced Hooks & Patterns ⬜ 117 Custom Context Hook Advanced Hooks & Patterns ⬜ 118 Error Boundary Component Advanced Hooks & Patterns ⬜ 119 Suspense Fallback UI Advanced Hooks & Patterns ⬜ 120 Concurrent Rendering Example Advanced Hooks & Patterns ⬜ 121 Code Splitting Example Advanced Hooks & Patterns ⬜ 122 Dynamic Import Example Advanced Hooks & Patterns ⬜ 123 useTransition Example Advanced Hooks & Patterns ⬜ 124 useDeferredValue Example Advanced Hooks & Patterns ⬜ 125 useId Example Advanced Hooks & Patterns ⬜ 126 useSyncExternalStore Example Advanced Hooks & Patterns ⬜ 127 useInsertionEffect Example Advanced Hooks & Patterns ⬜ 128 Controlled vs Uncontrolled Components Advanced Hooks & Patterns ⬜ 129 Portals Example Advanced Hooks & Patterns ⬜ 130 Modal with Portal Advanced Hooks & Patterns ⬜ 131 Tooltip with Portal Advanced Hooks & Patterns ⬜ 132 Event Bubbling Example Advanced Hooks & Patterns ⬜ 133 Synthetic Events Example Advanced Hooks & Patterns ⬜ 134 StrictMode Example Advanced Hooks & Patterns ⬜ 135 Profiler API Example Advanced Hooks & Patterns ⬜ 136 Optimize Re-renders Example Advanced Hooks & Patterns ⬜ 137 Context Performance Pitfall Advanced Hooks & Patterns ⬜ 138 Context Selector Pattern Advanced Hooks & Patterns ⬜ 139 Subscription Example Advanced Hooks & Patterns ⬜ 140 Performance Measurement Advanced Hooks & Patterns ⬜ 141 Fetch API Example API & Data Handling ⬜ 142 Fetch with Async/Await API & Data Handling ⬜ 143 Fetch Error Handling API & Data Handling ⬜ 144 Loading State Example API & Data Handling ⬜ 145 Retry Fetch Example API & Data Handling ⬜ 146 Fetch on Button Click API & Data Handling ⬜ 147 Fetch on Input Change API & Data Handling ⬜ 148 Cancel Fetch with AbortController API & Data Handling ⬜ 149 useSWR Example API & Data Handling ⬜ 150 React Query Example API & Data Handling ⬜ 151 Axios Fetch Example API & Data Handling ⬜ 152 POST API Request API & Data Handling ⬜ 153 PUT API Request API & Data Handling ⬜ 154 DELETE API Request API & Data Handling ⬜ 155 GraphQL API Example API & Data Handling ⬜ 156 REST API Pagination API & Data Handling ⬜ 157 Infinite Scroll with API API & Data Handling ⬜ 158 Search with API Data API & Data Handling ⬜ 159 Debounced API Search API & Data Handling ⬜ 160 Cached API Data API & Data Handling ⬜ 161 Navbar Component UI Components ⬜ 162 Sidebar Component UI Components ⬜ 163 Footer Component UI Components ⬜ 164 Modal Component UI Components ⬜ 165 Dialog Component UI Components ⬜ 166 Tooltip Component UI Components ⬜ 167 Dropdown Component UI Components ⬜ 168 Accordion Component UI Components ⬜ 169 Tabs Component UI Components ⬜ 170 Carousel Component UI Components ⬜ 171 Pagination Component UI Components ⬜ 172 Breadcrumb Component UI Components ⬜ 173 Stepper Component UI Components ⬜ 174 Snackbar/Toast Component UI Components ⬜ 175 Loader/Spinner Component UI Components ⬜ 176 Skeleton Loader Component UI Components ⬜ 177 Card Component UI Components ⬜ 178 Avatar Component UI Components ⬜ 179 Badge Component UI Components ⬜ 180 Rating Component UI Components ⬜ 181 Todo App Projects ⬜ 182 Notes App Projects ⬜ 183 Weather App (API) Projects ⬜ 184 Calculator App Projects ⬜ 185 Stopwatch App Projects ⬜ 186 Timer App Projects ⬜ 187 Quiz App Projects ⬜ 188 BMI Calculator Projects ⬜ 189 Random Joke Generator Projects ⬜ 190 Random Quote Generator Projects ⬜ 191 Image Gallery Projects ⬜ 192 Movie Search App (API) Projects ⬜ 193 Shopping Cart Projects ⬜ 194 E-commerce Product List Projects ⬜ 195 Expense Tracker Projects ⬜ 196 Crypto Price Tracker Projects ⬜ 197 Blog App Projects ⬜ 198 Markdown Previewer Projects ⬜ 199 Music Player Projects ⬜ 200 Chat App (basic) Projects ⬜