BEGINNER MODULE (Days 1–7)

Goal: Lay the foundation with HTML, CSS, JavaScript basics, Git, and introductory UI/UX design.

1. Introduction to Web Development

• How the Internet Actually Works

• Understanding how the web works (Frontend vs Backend)

• Tools setup: VS Code, Chrome DevTools, Node.js, Git & GitHub

• Project structure and file organization

2. HTML5 - Building the Skeleton

• Semantic tags and structure

• What is HTML?

• HTML Headings, Paragraphs, and Self-Closing Tags

• The List Element & Nesting

• Anchor & Image Element

• Forms, Inputs, and Tables

• Media embedding (video, audio, images)

3. CSS3 - Styling the Web

• Selectors, box model, colors, fonts

• Positioning, Flexbox, and Grid systems

• Media queries & responsive design

• Intro to animations and transitions

4. JavaScript Fundamentals

• Variables, Data Types, Operators

• Conditionals & Loops

• Functions & Events

• Arrays and Objects

• DOM Manipulation

5. Version Control with Git & GitHub

• Git basics: init, commit, push, pull

• Branching and collaboration

• Hosting with GitHub Pages

6. Basic UX/UI Principles

• Color theory, typography, spacing

• User-centered design

• Wireframing tools (Figma basics)

Capstone Project 1: Personal Portfolio Website

• A single-page responsive portfolio site with HTML, CSS, and JavaScript

---

INTERMEDIATE MODULE (Days 8–20)

Goal: Dive deeper into JavaScript, introduce Bootstrap, APIs, databases, and backend with Express.js.

1. JavaScript Advanced

• ES6+ features (let/const, arrow functions, destructuring, spread)

• Array methods (map, filter, reduce)

• Asynchronous JS: Callbacks, Promises, async/await

• Coding Exercise 3: BMI Calculator Challenge

2. Bootstrap & MUI

• Bootstrap components & grid

• Customizing Bootstrap themes

• Intro to Material UI (MUI) with React

• Using prebuilt React components

3. Client-Server Communication

• HTTP methods (GET, POST, PUT, DELETE)

• Fetch API and Axios

• JSON and REST APIs

4. Node.js and Express.js

• Setting up a Node.js environment

• Express basics: routes, middleware

• Handling forms and query parameters

• Serving static files

5. Databases - MySQL and MongoDB

• SQL vs NoSQL comparison

• CRUD operations in MySQL (with phpMyAdmin or Sequelize)

• CRUD operations in MongoDB (with MongoDB Atlas & Mongoose)

• Connecting databases to Node/Express

Capstone Project 2: Blog CMS (Content Management System)

• A full-stack blog application with Node.js, Express, and MongoDB or MySQL

• Features: authentication, create/edit/delete posts, responsive design

Bonus Project

Personal Expenses Tracker App

---

ADVANCED MODULE (Days 21–30)

Goal: Master modern frontend frameworks (React, Next.js), advanced backend topics, and deploy full applications.

1. ReactJS Essentials

• JSX, Components, Props, and State

• useEffect and useState Hooks

• React Router DOM for navigation

• Lifting state up and component communication

• Form handling and validation

2. Next.js - Full-Stack React Framework

• File-based routing

• SSR vs SSG vs CSR

• API Routes in Next.js

• Image optimization, Head, and dynamic routes

• Connecting to external APIs

3. Advanced Express.js & Authentication

• Middleware chains

• Authentication with JWT

• Role-based access control

• Sessions and cookies

4. UX/UI Design in Production

• Advanced Figma prototyping

• Accessibility (WCAG standards)

• Mobile-first & Performance optimization

5. Testing, Debugging & Deployment

• Console debugging & Chrome DevTools

• Unit Testing with Jest

• Deploying on Vercel (Next.js), Netlify (React), and Render/Heroku (Node.js)

Capstone Project 3: E-commerce Web App

• Features: product listing, shopping cart, user auth, admin dashboard

• Tech stack: React, Express, MongoDB, MUI

Capstone Project 4: Job Board Platform

• Features: job listing, filter/search, application form, admin panel

• Tech stack: Next.js, MySQL, MUI, REST API, SSR/SSG pages

---

✅ ADDITIONAL BONUSES

• Weekly code challenges & quizzes

• Tip - How to Work as a Freelancer

• Interview prep: coding questions, resume tips

• Live project reviews and mentorship sessions

• Certificate of completion after final capstone submission