Complete Web Development (MERN Stack)

Strips away the magic of the internet — exactly what happens when you type a URL into your browser. Think of the web as a global restaurant: the browser is the customer, the server is the kitchen, and HTTP is the waiter carrying orders back and forth.

1. 1.1How the Internet works: Packets, Routing, and DNS Watch free
2. 1.2The Client-Server Model Watch free
3. 1.3HTTP Methods (GET, POST, PUT, DELETE) Watch free
4. 1.4HTTP Status Codes (200 OK, 404 Not Found, 500 Server Error) Watch free
5. 1.5Developer Tools: Inspecting the Network Tab Watch free
6. 1.6Practical Exercise: Making raw HTTP requests to a public API with curl

How the browser parses and renders structural nodes and style cascades. If a website is a house, HTML is the concrete foundation and framing, and CSS is the paint, interior design, and architectural style.

1. 2.1HTML5 Semantic Tags and Accessibility (a11y)
2. 2.2The CSS Box Model (Margins, Borders, Padding, Content)
3. 2.3CSS Selectors, Specificity, and the Cascade
4. 2.4Modern Layouts: Flexbox and CSS Grid
5. 2.5Responsive Web Design & Media Queries
6. 2.6Practical Exercise: Building a responsive, semantic portfolio landing page

The transition from static documents to dynamic applications, introducing programming logic in the browser. If HTML is the house and CSS the paint, JavaScript is the electricity and plumbing that make it interactive.

1. 3.1JavaScript Engine Basics (V8 overview)
2. 3.2Variables (let, const), Data Types, and Operators
3. 3.3Control Flow (If/Else, Switch, Loops)
4. 3.4Functions, Scope, and Closures
5. 3.5DOM Manipulation (Selecting elements, attaching event listeners)
6. 3.6Practical Exercise: Building a fully functional DOM calculator

JavaScript's single-threaded nature and how it manages to do many things at once. Picture a lone chef who puts a cake in the oven (an async task), chops onions while it bakes, and returns when the timer — the event loop — rings.

1. 4.1ES6+ Features (Destructuring, Spread/Rest, Arrow Functions)
2. 4.2Synchronous vs. Asynchronous Programming
3. 4.3Callbacks and "Callback Hell"
4. 4.4Promises and the then/catch syntax
5. 4.5Modern Asynchronous JS: async / await
6. 4.6Fetching data from external APIs
7. 4.7Practical Exercise: A weather dashboard using async/await and fetch

From imperative Vanilla JS to React's declarative, component-based architecture. React is like a smart manager: you declare "I want the door open" and it figures out the most efficient steps to get there.

1. 5.1Why React? Understanding the Virtual DOM
2. 5.2JSX: Writing UI logic inside JavaScript
3. 5.3Component Architecture and Props
4. 5.4State Management with useState
5. 5.5Handling Side Effects with useEffect
6. 5.6Routing Single Page Applications (React Router)
7. 5.7Practical Exercise: Building a Trello-style Kanban board

Building the APIs you were previously only consuming. An API is a contract — like a drive-thru window where you follow a strict protocol to place an order and receive a standardized package of JSON data back.

1. 6.1Introduction to Node.js and npm (Node Package Manager)
2. 6.2Building an HTTP Server with Express.js
3. 6.3REST API Design (Endpoints, Controllers, Routes)
4. 6.4Understanding and Writing Custom Middleware
5. 6.5Handling Cross-Origin Resource Sharing (CORS)
6. 6.6Practical Exercise: A RESTful blogging API, tested end-to-end with Postman

Data persistence with NoSQL structures and object modeling. A SQL database is a rigid filing cabinet; MongoDB is a flexible binder that stores related documents of different shapes together in one folder.

1. 7.1SQL vs NoSQL Paradigms
2. 7.2Setting up MongoDB Atlas (Cloud Database)
3. 7.3Basic CRUD operations in MongoDB
4. 7.4Object Data Modeling (ODM) with Mongoose
5. 7.5Defining Schemas, Models, and Validations
6. 7.6Database Relationships (Referencing vs. Embedding)
7. 7.7Practical Exercise: Modeling an e-commerce store's schemas with validation

Gluing the MERN stack together, securing it, and shipping it to the world. JWT authentication works like a festival wristband: your ID is checked once at the gate, then you simply flash the wristband to enter VIP areas.

1. 8.1Connecting the React Frontend to the Express Backend
2. 8.2Password Hashing with bcrypt
3. 8.3Stateless Authentication via JSON Web Tokens (JWT)
4. 8.4Protecting React Routes and Express Endpoints
5. 8.5Environment Variables and Security Best Practices
6. 8.6Deployment (Render/Heroku for backend, Vercel/Netlify for frontend)
7. 8.7Practical Exercise: The capstone — deploying a secured full-stack app live