Introduction to React, setup, and tools.

• npm and npx
• React components and JSX.
• Props and state management
• Event handling in React
• Lifecycle methods and hooks basics (useState, useEffect).
• Conditional rendering and lists.
• Mini Project: Simple React app (e.g., a counter or weather app).

Deployment & Final Touches 1

• Final deployment checks
• Environment variables and best practices
• Creating a basic developer portfolio with links to projects

Introduction to HTML

• What is Hyper Text and Markup Language ?
• What are various tags in HTML and how they are used ?
• Structure of an HTML page

Introduction to HTML 2

• Forms, buttons, and input elements
• CSS styling, selectors, layouts
• Practice Assignment

JavaScript Basics

• Variables, functions, loops, conditionals
• Arrays
• Mock Interview Questions for practise

More about JavaScript

• DOM Manipulation
• Click events and changing styles
• Most asked interview question

Mini Task: Build a Counter App using HTML, CSS, and JavaScript

React Basics

• Introduction to React
• Setting up a React project using Vite

React Basics 2

• Components and Props
• UI libraries, forms (Controlled and Uncontrolled))

React Basics 3

• State management with useState
• Creative task using useState

Make a React Website

Node.js and Express.js

• Introduction to Node.js
• Installing Node.js and npm
• More About Node

Introduction to Express.js

• Creating a basic server
• Setting up Mongo DB

Handling routes

• GET, POST,PUT,DELETE
• Sending and receiving JSON data
• Validation schema and MVC

Mini Task: Create a simple API that returns a list of users

MongoDB & Connecting Frontend and Backend

• Introduction to MongoDB
• Installing MongoDB and Mongoose
• Defining Schemas and Models with Mongoose

CRUD operations

• Basic CRUD operations with MongoDB
• CORS,Express,Jwt

Connection building

• Connecting React to Express API using Axios
• Response Handling (Promises)
• localStorage

Mini Project: Notes App (React + Express + MongoDB)

Final Full Stack Project

• Setup full stack project structure
• Creating user signup/login using JWT

Final Full Stack Project 2

• CRUD operations (Add, display, delete posts)

Final Full Stack Project 3

• Styling with CSS

Final Full Stack Project 4

• Deploy React frontend to Vercel
• Deploy backend to Render

Deployment & Final Touches

• Debugging common issues
• Improving user experience

Week 1 (Days 1–7): HTML

• Introduction to Web Development, HTML structure, basic tags.
• Forms, input elements, and semantic tags.
• Lists, tables, images, and links.
• Multimedia (audio, video), Iframes.
• HTML5 features: , , , etc.
• Practice building simple static web pages.
• Mini Project: A static website (e.g., personal profile).

Week 2 (Days 8–14): CSS

• Introduction to CSS: Selectors, properties, colors, fonts.
• Box model, margins, paddings, borders
• Flexbox: Alignments, responsive layouts
• CSS Grid: Building complex layouts.
• Animations and transitions.
• Media queries for responsive design.
• Mini Project: Responsive web design for an HTML site.

Week 3 (Days 15–21): JavaScript Basics

• Variables, data types, operators.
• Functions, conditions, loops.
• Arrays, objects, and JSON basics.
• DOM manipulation and event handling.
• Basic ES6 concepts: Arrow functions, template literals.
• Fetch API basics for making HTTP requests.
• Mini Project: Interactive to-do list.

Git & GitHub

• Git basics: Install, initialize, and create repositories.
• Git commands: Add, commit, push, pull.
• Branching, merging, resolving conflicts.
• Working with GitHub and creating repositories
• Collaborating with pull requests.
• Project versioning and team workflows.
• Mini Project: Version control for a team-based project.

Week 5 (Days 31–37): Introduction to MERN Stack

• Introduction to MERN Stack
• Difference between NPM, NPX, NVM tools, and their use cases
• Introduction to React, setup, and explanation about folder structure
• About React JS, JSX, extensions, and navigation using react-router
• How to integrate and set up Tailwind and AntD design, also how to use it
• Creating web pages and interactive UI designs using Tailwind and AntD
• Mini Project: Simple React app or student's desired website

Week 6 (Days 38–44): Backend Development with Node

• Introduction to Node.js and setting up the backend file (server.js)
• About, creating cluster, CORS, Express, Mongoose
• Why segregation is important to build an API and what we mean by MVC
• Understanding structure and building up basic API and integrating with frontend
• What is Axios, and how to use it, and what are the different methods
• How to send and request data (body, params, query) from frontend to backend
• Mini Project: Build 1–2 basic APIs (login, register) with integration with frontend

Advanced React Concepts

• React Router: Navigation between pages
• Forms and validation in React
• Advanced hooks: useContext, useReducer
• State management (with Axios)
• React performance optimization tips
• Integrating APIs with Axios
• Mini Project: Multi-page React app (e.g., product catalog)

Week 8 (Days 52–60): Advanced React & Deployment

• Dynamic routing and query params in React Router
• Code splitting and lazy loading
• Error boundaries and debugging React apps
• Deploying React apps to Vercel
• Major Project: E-commerce frontend (React, Material-UI)

Week 9 (Days 61–67): Node.js Basics

• Introduction to Node.js: Setup
• Modules and package management with npm
• File system and handling asynchronous operations
• Events and streams
• HTTP module and building a basic server
• Middleware basics
• Mini Project: Simple API with static data

Week 10 (Days 68–74): Express.js

• Introduction to Express.js: Setting up a server
• Routes and request handling
• Middleware: Built-in and custom
• Error handling in Express
• Using templates (Handlebars/EJS)
• Mini Project: Blog backend with Express
• REST API design principles

Week 11 (Days 75–81): MongoDB Basics

• Introduction to NoSQL and MongoDB setup
• CRUD operations in MongoDB
• Using Mongoose for schema and models
• Aggregations and indexing in MongoDB
• Relationships (one-to-many, many-to-many)
• Authentication with JWT and bcrypt
• Mini Project: REST API with MongoDB

Week 12 (Days 82–90): Backend Integration

• Connecting Node.js with MongoDB
• API testing with Postman
• Error handling and validation in Express
• Major Project: Backend for an E-commerce app
• Deployment of Node.js app on DigitalOcean