Objective: Learn the structure and styling of websites.
Topics:
● What is Web Development?
● Client vs Server
● How the Web Works (DNS, HTTP/S, Browsers)
Tools:
● Code Editor (VS Code)
● Chrome DevTools

Objective: Build static web pages with proper structure and styling.
Topics:
● HTML5 (Headings, Links, Lists, Forms, Tables, Media)
● CSS3 (Selectors, Box Model, Flexbox, Grid)
● Responsive Design (Media Queries)
● Accessibility & Semantic HTML
Tools/Frameworks:
● Bootstrap or Tailwind CSS (optional)

Objective: Make websites interactive using JavaScript.
Topics:
● Syntax, Variables, Data Types
● Operators, Conditionals, Loops
● Functions, Arrays, Objects
● DOM Manipulation
● Events
● ES6+ Features (let/const, arrow functions, spread, etc.)

Objective: Handle complex logic, asynchronous tasks, and APIs.
Topics:
● Closures, Callbacks, Hoisting, this
● Promises & Async/Await
● Fetch API / Axios
● JSON & Local Storage

Objective: Manage and collaborate on code efficiently.
Topics:
● Git (init, commit, push, pull, branch, merge)
● GitHub Repositories
● Pull Requests
● Branch Management & Conflict Resolution

Objective: Build single-page applications (SPAs) using React.
Topics:
● JSX, Components
● Props & State
● Event Handling
● useEffect & Lifecycle
● Forms & Validation
● Routing (React Router)
● State Management (useContext or Redux)

Objective: Set up a server and understand backend logic.
Topics:
● Node.js Environment
● Core Modules (fs, path, http)
● npm, scripts
● Creating an HTTP Server
● Event Loop, Call Stack

Objective: Build RESTful APIs with routing and middleware.
Topics:
● Setting up Express Server
● Routing (GET, POST, PUT, DELETE)
● Middleware (custom and built-in)
● Request/Response cycle
● REST API principles
● Error Handling

Objective: Store and retrieve data in relational or NoSQL databases.
Options:
Relational (SQL – PostgreSQL or MySQL)
● Tables, Rows, CRUD
● Joins, Constraints, Indexing
Non-Relational (MongoDB)
● Collections, Documents
● CRUD with Mongoose
● Schema Design
● Relationships (Reference vs Embedded)

Objective: Secure your app and manage user sessions.
Topics:
● User Login/Signup
● Hashing Passwords (bcrypt)
● Sessions & Cookies
● JSON Web Tokens (JWT)
● Role-based Access Control

Objective: Combine React (frontend) with Express API (backend).
Topics:
● Fetching data from API in React
● Handling CORS
● Proxy setup in React
● Environment variables
● Loading states, error handling

Objective: Make your app live on the internet.
Topics:
● Deploying Frontend (Netlify, Vercel)
● Deploying Backend (Render, Railway, Heroku)
● Environment Variables
● Domain Linking (custom domains)
● Basic CI/CD (GitHub Actions – optional)

Objective: Test your code for reliability.
Frontend Testing:
● Unit Testing (Jest)
● React Testing Library
Backend Testing:
● Mocha, Chai, Supertest

Objective: Add type safety to JavaScript for better code.
Topics:
● Type annotations
● Interfaces & Types
● TypeScript in React
● TypeScript with Node.js

Objective: Build and deploy a full-stack project from scratch.
Sample Projects:
● E-commerce site
● Blog/CMS
● Social media dashboard
● Chat app (with sockets)
● Task Manager (with auth)
Requirements:
● Use Git & GitHub
● React frontend
● Express & Node backend
● MongoDB or SQL
● Authentication
● Responsive Design
● Deployment (frontend + backend)