Module 01: : HTML

• Introduction to HTML & Web Structure

• Semantic HTML & SEO Best Practices

• HTML5 Page Boilerplate & Meta Tags

• Paragraphs, Headings & Typography Tags

• Images with Alt Text, Lazy Loading & Formats

• Advanced Lists (Nested, Ordered, Description)

• Interactive Forms (Validation, Input Types, Labels)

• Accessible Tables with Captions & Scopes

• Div, Span & Semantic Layout Tags (section, article, aside)

• Block vs Inline vs Inline-Block Elements

• Important Tags Overview (abbr, mark, code, progress, meter, details)

• Embedding Content (video, audio, iframe, SVG)

• HTML Entities & Character Sets

• Accessibility & ARIA Basics

• HTML Project: Responsive Resume Page

Module 02: : CSS

• Introduction to CSS & Best Practices

• CSS Selectors Deep Dive (Attribute, Grouping, Nesting)

• Color Systems (HEX, RGBA, HSL, Gradients)

• Backgrounds (Multiple, Patterns, Fixed, Gradients)

• Box Model in Real Layouts

• Advanced Spacing (calc(), clamp(), aspect-ratio)

• Border Effects & Outline Tricks

• Typography Control & Custom Fonts

• Advanced Positioning (Layering, Z-index Use Cases)

• Display Types (block, inline, grid, flex, contents)

• Responsive Flexbox Techniques

• CSS Grid Mastery with Layout Patterns

• Media Queries & Breakpoint Strategy

• Pseudo-elements & Pseudo-classes in UI

• Custom CSS Variables & Reusability

• Smooth Transitions & Micro Animations

• Keyframe Animations in UI Design

• Managing Opacity, Visibility, and Layering

• Responsive Web Design Techniques

• CSS Project: Responsive Landing Page

Module 03: JavaScript

• Introduction to JavaScript & Browser Environment

• JavaScript Comments (Single-line, Multi-line, Documentation)

• Variables & Scope (var, let, const + Hoisting Concepts)

• Data Types (Primitive vs Reference)

• Operators (Arithmetic, Logical, Comparison, Ternary, Spread)

• Conditional Statements (if, else, switch-case, short-circuiting)

• Loops (for, while, do-while, for-in, for-of)

• Functions (Declaration, Expression, Arrow, IIFE)

• Events & Event Delegation

• DOM Manipulation (querySelector, createElement, innerHTML, classList)

• Window Object, History API & Navigator

• Timers (setTimeout, setInterval, clearTimeout, use cases)

• Array Methods (map, filter, reduce, find, forEach, includes)

• String Methods (slice, substring, split, replaceAll, template literals)

• Objects & Object Methods (keys, values, entries, destructuring)

• Date and Time Handling (Date object, formatting, timestamp)

• Math Object (round, floor, ceil, random, trunc)

• Error Handling (try, catch, finally, throw custom errors)

• Form Validation (onSubmit, preventDefault, regex validations)

• ES6+ Features (let/const, arrow functions, spread/rest, destructuring, modules)

• Callback Functions (nested callbacks, callback hell example)

• Promises (create, resolve, reject, chaining)

• Async / Await (try-catch, fetch with await, best practices)

• Fetch API (GET/POST requests, JSON parsing, headers)

• Local Storage & Session Storage (setItem, getItem, removeItem)

• JSON (parse, stringify, structure, nested usage)

• JavaScript Project: Calculator App

• JavaScript Project: DOM-Based To-Do List or Theme Switcher

Module 04:Tailwind CSS

• Introduction & Setup

• Installation & CDN vs CLI

• Utility-First Concept & Best Practices

• Responsive Design with Breakpoints

• Container, Spacing & Sizing Utilities

• Flexbox Utilities & Alignment

• Grid System & Auto-Flow Tricks

• Width, Height, Min/Max Control

• Advanced Typography (Line Clamp, Tracking, Leading)

• Color Palette & Theme Customization

• Border, Radius, Shadow Utilities

• Background Gradients & Opacity

• Positioning (absolute, fixed, sticky)

• Display, Visibility & Hidden States

• Hover, Focus, Group States

• Transitions, Animations, Motion-safe

• Customizing Tailwind Config

• Dark Mode Strategies

• Plugin Integration & Custom Components

• Tailwind Project: Dashboard UI

Module 05: Bootstrap

• Introduction to Bootstrap & Setup Methods (CDN vs Local)

• Bootstrap Container, Rows & Grid System (12-column layout)

• Breakpoints & Responsive Design Classes

• Spacing Utilities (m-, p-, gap, gutters)

• Display & Position Utilities (d-, position-, z-index)

• Typography Utilities (headings, text-* classes, responsive text)

• Colors, Backgrounds & Borders Utilities

• Buttons & Button Groups (outline, sizing, disabled)

• Images & Media (responsive images, figure, ratios)

• Forms & Form Validation (form-control, floating labels, input groups)

• Cards, Alerts, Badges, and List Groups

• Navbar & Navigation Components (responsive nav, toggler, scrollspy)

• Collapse & Accordion Components

• Modals (custom sizing, animation, triggers)

• Carousel & Image Sliders (interval, control, indicators)

• Tooltips, Popovers & Toast Notifications

• Tabs & Pills Navigation

• Tables (striped, bordered, hover, responsive)

• Icons Integration (Bootstrap Icons, Font Awesome)

• Bootstrap Grid with Flexbox Utilities

• Bootstrap Dark Mode (custom classes or themes)

• Customizing Bootstrap via Sass or CSS Overrides

• Bootstrap Project: Responsive Admin Dashboard

Module 06: ReactJS

• Introduction to React & SPA Architecture

• Setting Up React (Vite & CRA Setup, File Structure)

• JSX Syntax, Expressions & Fragment Usage

• Functional Components & Props

• Component Communication (Parent-to-Child, Child-to-Parent)

⚙️ Core React Hooks (Explained Separately)

• useState – State Management in Components

• useEffect – Side Effects, API Calls, Lifecycle Simulation

• useRef – Accessing DOM Elements, Persisting Mutable Values

• useContext – Global State Without Prop Drilling

• useReducer – Complex State Management (Redux-like logic)

• useMemo – Memoization for Expensive Calculations

• useCallback – Caching Function References

• useLayoutEffect – DOM Read/Write Before Paint

• useId, useTransition, useDeferredValue – React 18 Advanced Hooks

• Custom Hooks – Creating Reusable Logic Across Components

🚀 More React Concepts

• Handling Events (Click, Change, Submit, Keyboard)

• Conditional Rendering (If/Else, Ternary, Logical AND)

• Lists & Keys (Dynamic Lists, Unique Keys)

• Controlled & Uncontrolled Forms

• Lifting State Up & Prop Drilling Solution

• Routing with React Router DOM (v6+): Routes, Nested Routes, URL Params

• API Integration (Using fetch and axios)

• Error Boundaries (Fallback UIs for Component Crashes)

• React Project Folder Structure (Atomic Design or Feature-Based)

• Lazy Loading & Code Splitting with React.lazy() and Suspense

• Reusable Components & Composition Patterns

• Component Styling Approaches (Tailwind, CSS Modules, Styled Components)

• Deployment on Vercel / Netlify

• React Project: Calculator / To-Do List

• React Project: Blog App or Task Manager with Routing + API Integration

Module 07: cPanel & Website Hosting

• Introduction to cPanel & Web Hosting

• Accessing cPanel from Hosting Provider

• File Manager

  • Uploading Website Files

  • Creating Folders, Editing Files

  • Extracting ZIP Files

• Domains

  • Adding Domain & Subdomain

  • Domain Redirects

• Creating Email Accounts

  • Accessing Webmail

  • Sending & Receiving Emails

• Databases

  • Creating MySQL Database & User

  • phpMyAdmin Basics (Import/Export SQL)

• FTP Accounts

  • What is FTP

  • Creating FTP Account

  • Using FileZilla to Upload Files

• SSL Certificate

  • Enabling Free SSL (Let’s Encrypt)

• Softaculous App Installer

  • Installing WordPress or PHP Script

• Basic DNS Settings (Name Servers, A Record)

• Backups

  • Taking Manual Backup

  • Restoring a Backup

• Uploading Static Website (HTML/CSS)

• Uploading React or PHP Project

• Pointing Domain from Namecheap / GoDaddy to cPanel Hosting

Module 08: Git & GitHub

• Introduction to Git & GitHub (Version Control Concepts)

• Git Installation (Windows, macOS, Linux)

• Git Configuration (Username & Email Setup)

• Initializing a Git Repository (git init)

• Staging Files with Git (git add, .gitignore)

• Committing Changes (git commit -m "")

• Checking Repository Status (git status)

• Viewing Commit History (git log)

• Creating a GitHub Account & Repo

• Connecting Local Repo to GitHub (Using git remote add origin)

• Pushing Project to GitHub (git push -u origin main)

• Cloning Repositories from GitHub (git clone)

• Pulling Changes from Remote Repo (git pull)

• Creating & Switching Branches (git branch, git checkout)

• Deleting Local Branches (git branch -d branch-name)

• GitHub .gitignore Usage (Node_modules, .env, etc.)

• Hosting Projects on GitHub (HTML, React, etc.)

• Real-World Use: Uploading a Frontend or React Project to GitHub

Module 09: Python

• Introduction to Python (Features, Use Cases)

• Installing Python & Setting Up VS Code

• Python Comments (Single-line, Multi-line)

• Variables & Data Types (int, float, str, bool)

• Type Casting & type() Function

• Input & Output (Using input() and print())

• Arithmetic & Logical Operators

• Conditional Statements (if, elif, else)

• Loops in Python (for, while, break, continue)

• Working with Strings (Indexing, Slicing, Functions)

• Lists (Indexing, Methods, Loops)

• Tuples (Immutable Sequences)

• Sets (Unique Unordered Collections)

• Dictionaries (Key-Value Pairs, Methods)

• Functions (def, Return Values, Arguments)

• Lambda Functions & map(), filter(), reduce()

• Modules & Packages (import, from, Built-in Modules)

• File Handling (Read, Write, Append – .txt files)

• Error Handling (try, except, finally)

• Object-Oriented Programming (Classes, Objects, Inheritance)

• Working with Dates & Time (datetime module)

• List Comprehensions & Dictionary Comprehensions

• Working with JSON (json module: load, dump)

• Python Virtual Environments (venv)

• Installing External Libraries with pip

• Basic requests Module for APIs

• Automating Tasks with pyautogui, smtplib, schedule

• Introduction to Web Scraping (Optional: BeautifulSoup, selenium)

Python Projects (Automation-Based)

• QR Code Generator

• Instagram Bot

• Send Multiple Emails with Attachment

• Handwriting to Text Converter

• Automate WhatsApp Messages

Module 10: Django

• Introduction to Django (What & Why Django)

• Installing Django & Virtual Environment Setup

• Creating a New Django Project

• Project Structure Overview (manage.py, settings, wsgi, etc.)

• Creating Django App (python manage.py startapp)

• Registering Apps in settings.py

• Running the Django Development Server

Django Core Concepts

• URL Routing & Views (Function-Based Views)

• Templates & Template Inheritance (base.html)

• Template Tags & Filters

• Static Files (CSS, JS, Images)

• Handling Forms with POST

• Django Models & Database Setup

• Migrations: makemigrations & migrate

• Django Admin Panel Customization

• Working with Django Shell (python manage.py shell)

Blog Project – Step-by-Step

• Setting Up the Blog App

• Creating the Blog Post Model (title, slug, content, image, date, status)

• Creating Superuser & Using Admin Panel to Add Posts

• Dynamic URLs for Blog Detail Pages (slug)

• List & Detail Views for Blog Posts

• Displaying Posts Using Templates

• Creating a Sidebar (Recent Posts, Categories, Search)

• Adding Author Field & Linking with Django User Model

• Pagination for Blog Posts

• Creating a Blog Post Form (Only for Admin Users)

• Updating & Deleting Blog Posts

• Adding Categories/Tags to Posts

• Filtering by Category or Tag

• Search Functionality (By Title or Content)

User Authentication

• User Registration Form

• Login & Logout Functionality

• Django Messages (Success/Error Alerts)

• Login Required Decorator for Restricted Pages

• Password Reset (Basic Setup with Email Backend)

Advanced Features

• Media File Upload (Post Images, Profile Pictures)

• CKEditor or TinyMCE Integration for Rich Text Editing

• Comments System (Custom or with Django Packages)

• Like/Unlike Post Functionality

• SEO-Friendly URLs (Slugs, Meta Tags)

• Django Signals (Post Save for Profile Creation or Notifications)

• Social Sharing Buttons (Facebook, WhatsApp, etc.)

Deployment

• Preparing Settings for Deployment (Debug, Allowed Hosts, Static Root)

• Hosting Django on cPanel or Railway/Render

• Connecting Custom Domain

• Database Backup & Restore

Module 11: NodeJs & ExpressJs

• Introduction to Node.js & Express.js (Modern Backend with JS)

• Installing Node.js, npm & Setting Up VS Code

• Initializing Project with npm init

• Understanding package.json & node_modules

• Creating and Importing Custom Modules

• Built-in Modules (fs, path, os, url, http)

• Creating a Basic Server using http Module

• Introduction to Express.js & Installing Express

• Creating Express Server

• Basic Routing (GET, POST, PUT, DELETE)

• Route Parameters & Query Strings

• Middleware in Express (Built-in, Third-party, Custom)

• Serving Static Files with Express

• Handling Forms & JSON Data (body-parser, express.json)

• REST API Structure & Best Practices

• Connecting Node.js with MongoDB using Mongoose (Intro Only)

• Creating RESTful API with Express (CRUD Operations)

• Error Handling & Status Codes (try-catch, 404, 500)

• Environment Variables with dotenv

• Nodemon for Auto Restart in Dev Mode

• File Upload Handling (with multer)

• Using cors for Cross-Origin Access

• Folder Structure for Scalable Projects (MVC/Feature-Based)

• Project: Simple Blog API or Task Manager API

• Hosting Node.js App on Render/Railway/Glitch

Real-World Project

• Build a Blog REST API (Posts, Users, Comments)

• Test with Postman or Thunder Client

• Use MongoDB Atlas or Local MongoDB

• Deploy the backend to Render with public API URL

Module 12: MongoDB

• Introduction to MongoDB (NoSQL vs SQL)

• Installing MongoDB Locally & MongoDB Compass

• Introduction to MongoDB Atlas (Cloud Database)

• Creating a Cluster on MongoDB Atlas

• Creating Databases & Collections

• MongoDB Data Types & BSON

• MongoDB CRUD Operations:

  • Insert Documents (insertOne, insertMany)

  • Read Documents (find, findOne, filters)

  • Update Documents (updateOne, updateMany)

  • Delete Documents (deleteOne, deleteMany)

• Query Operators ($gt, $lt, $in, $regex, etc.)

• Working with Arrays & Embedded Documents

• Schema Design Principles for MongoDB

• Introduction to Mongoose ODM

• Installing Mongoose in Node.js Projects

• Creating Mongoose Models & Schemas

• Connecting Node.js to MongoDB with Mongoose

• Validations in Mongoose (required, unique, type)

• Relationships & References (ObjectId, populate())

• Using MongoDB with Express REST APIs

• Pagination, Sorting & Filtering Queries

• MongoDB Indexing (Intro Only)

• Environment Variables for DB Security (.env)

• MongoDB Aggregation Framework (Basics)

• Real-World Example: Blog Posts & Users (One-to-Many)

• Hosting MongoDB on Atlas for Live Apps

• MongoDB Compass vs Atlas vs Terminal Usage

Real-World Practice (In Projects)

• Use in Blog API or Task Manager Project

• Apply validations, populate author info, timestamps

• Filter posts by category, author, or date range

• Deploy app with MongoDB Atlas integration