Self- Paced Content Curriculum

HTML

●​ Basic structure of an HTML document​

●​ Semantic tags (<header>, <main>, <section>, <footer>, etc.)​

●​ Forms and input types​

●​ Tables and lists​

●​ Media embedding (images, videos, iframes)​

●​ HTML5 elements and best practices​

CSS

●​ CSS syntax and selectors​

●​ Box model, margin, padding, borders​

●​ Flexbox layout system​

●​ CSS Grid layout system​

●​ Media queries and responsive design​

●​ CSS transitions and animations​

●​ Pseudo-classes and pseudo-elements​

●​ Styling forms and UI components​

●​ CSS architecture and modular design​

●​ Introduction to Bootstrap​

●​ Bootstrap grid system​

●​ Bootstrap components (navbar, cards, buttons)​

●​ Responsive utilities​

●​ Customizing Bootstrap​

Git & GitHub (Version Control)

●​ Introduction to Git and Version Control Systems​

●​ Git basics: init, add, commit, status, log​

●​ Branching and merging​

●​ Cloning, pushing, pulling from GitHub​

●​ Resolving merge conflicts​

●​ Creating and managing GitHub repositories​

JavaScript

●​ Variables (let, const, var) and data types​

●​ Operators and expressions​

●​ Control structures (if-else, switch, loops)​

●​ Functions, arrow functions​

●​ Arrays and objects​

●​ DOM manipulation (selectors, events, traversal)​

●​ Event handling (onclick, onchange, etc.)​

●​ Form validation​

●​ Closures, hoisting, scope​

●​ Asynchronous JavaScript: callbacks, promises, async/await​

●​ Error handling (try-catch)​

●​ ES6+ features​

React.js

●​ Introduction to React and JSX​

●​ Setting up a React project (Vite or CRA)​

●​ Functional components​

●​ Props and component communication​

●​ State management using useState​

●​ Handling events in React​

●​ Conditional rendering​

●​ List rendering with .map()​

●​ Controlled components and form handling​

●​ React lifecycle with useEffect​

●​ Context API for global state​

●​ Lazy loading and code splitting​

●​ Class-based components (basic overview)​

Redux (State Management)

●​ Introduction to Redux architecture​

●​ Actions, reducers, and store​

●​ Connecting Redux to React​

●​ Using middleware like Redux Thunk​

●​ Managing complex state with Redux​

Node.js

●​ Introduction to Node.js and its architecture​

●​ Installing and running Node.js scripts​

●​ Modules and packages​

●​ File system module​

●​ Creating HTTP server​

●​ Understanding the event loop​

●​ Handling asynchronous code​

●​ Environment variables​
Express.js

●​ Introduction to Express.js​

●​ Setting up an Express server​

●​ Creating and managing routes​

●​ Using middleware​

●​ RESTful API architecture​

●​ Handling JSON and URL-encoded data​

●​ CRUD operations with Express​

●​ File uploads​

●​ Error handling and validation​

●​ CORS and security middleware​

●​ Logging and debugging​

MongoDB & Mongoose

●​ Introduction to NoSQL databases​

●​ Installing and running MongoDB locally/cloud (e.g., Atlas)​

●​ Collections and documents​

●​ Data modeling and schema design​

●​ Mongoose schema definitions​

●​ CRUD operations using Mongoose​

●​ Querying, filtering, sorting​

●​ Authentication and access control​

●​ Data validation and error messages​

Authentication & Authorization

●​ JWT (JSON Web Token) basics​

●​ User registration and login flows​

●​ Password hashing with bcrypt​

●​ Securing routes with tokens​

●​ Role-based access (user/admin)​

●​ Storing tokens securely (cookies/localStorage)​

Full-Stack Integration (MERN)

●​ Connecting React frontend with Express backend using Axios​

●​ Fetching and submitting data via APIs​

●​ Maintaining authentication state in frontend​

●​ Handling protected routes and user roles​

●​ Building a complete CRUD app with MERN​

Project Development & Deployment

●​ Planning and building a full-stack E-commerce application​

○​ Product catalog, cart, checkout simulation​

○​ Order management​

●​ Deployment of frontend (Netlify, Vercel)​

●​ Deployment of backend (Render, Heroku, or custom server)​

●​ Using environment variables in deployment​

●​ CI/CD pipeline setup (GitHub Actions or Travis-CI)​

Live Class Curriculum​

●​ Introduction to HTML5 and semantic tags​

●​ Structuring a webpage: header, main, section, footer​

●​ Introduction to Git and GitHub​

●​ Creating and pushing your first repository​

Session 2: Styling & Hosting Your First Project

●​ CSS Flexbox and Grid layout systems​

●​ Responsive design with media queries​

●​ CSS transitions and animations​

●​ Hosting your website using GitHub Pages​

Session 3: JavaScript in Action – DOM & Events

●​ DOM manipulation and task card generation​

●​ Handling events: add, edit, delete tasks​

●​ UI feedback and input validation​

Session 4: Persistent Tasks – ES6 & LocalStorage

●​ Using LocalStorage for data persistence​

●​ Exploring ES6 features: arrow functions, array methods​

●​ Finalizing UI and committing changes to GitHub​

Week 3 – React Fundamentals & Project Setup

Session 5: React Essentials – Components, JSX & State

●​ Introduction to React and its importance in modern web development​

●​ Setting up a React project using Vite or Create React App​

●​ Understanding JSX and how it integrates with JavaScript​

●​ Creating and structuring functional components​

●​ Managing state with the useState hook​

●​ Passing and accessing props for component communication​

Session 6: User Interaction – Events, Lists & Forms in React

●​ Building forms with controlled components​

●​ Conditional rendering for dynamic UIs​

●​ Rendering lists with .map() and handling keys​

●​ Introduction to useEffect for basic lifecycle awareness

Week 4 – RESTful Notes API (Backend Development)

Session 7: Getting Started with Express & MongoDB

●​ Setting up Node.js and Express server​

●​ Connecting to MongoDB using Mongoose​

●​ Creating schemas and basic routing​

Session 8: Building and Testing Complete CRUD APIs

●​ Implementing Create, Read, Update, Delete operations​

●​ API testing using Postman​

●​ Adding validation and error handling logic​

Week 5 – Authentication System (Full Stack)

Session 9: Secure Backend – User Auth with JWT & Bcrypt

●​ Creating user model and password hashing​

●​ Securing APIs with JWT authentication​

Session 10: Authenticated Frontend – React Integration

●​ Building login/signup forms in React​

●​ Setting up context for auth state​

●​ Connecting frontend with backend using Axios​

●​ Implementing protected routes​

Week 6 – Capstone Project: E-commerce Application (Full MERN Stack)

Session 11: Backend for E-commerce – Models, APIs & Auth

●​ Designing product, cart, and user models (with roles)​

●​ Building Express APIs with CRUD and JWT-based auth​

●​ Role-based access for buyer/admin​

Session 12: Frontend & Deployment – Complete User Journey

●​ React frontend: product listing, filtering, and cart​

●​ Add to cart, remove, checkout simulation​

●​ Order summary and cart state management​

●​ Deployment: frontend (Vercel), backend (Render/Heroku)​

●​