CONTENTS

Week 1: Foundations of HTML and CSS

Session 1: Fundamentals of HTML

● Introduction to HTML

● Basic structure of an HTML document

● Common tags (headings, paragraphs, links, images, lists)

● Form elements and attributes

● Input types and validation

● Semantic HTML tags (header, nav, section, article, footer)

● Project: First landing page with HTML

Session 2: Getting Started with CSS & github

● Inline, internal, and external CSS

● Basic selectors and properties (color, background, font, text alignment)

● Box model (margin, border, padding, content)

● Positioning (static, relative, absolute, fixed)

● Flexbox basics

● Introduction to git & github and its setup

● Project: Creating a simple layout with CSS

Week 2: JavaScript Essentials and Advanced Techniques

Session 3: JavaScript Essentials

● Variables, data types, and operators

● Basic syntax and control structures (if statements, loops)

● Introduction to functions

● Let var and const

● Hoisting and scopes

● Closure

● Introduction to HOF

● DOM manipulation (getElementById, querySelector)

● Event handling (click, hover, etc.)

● Event bubbling and capturing

Session 4: Advanced Concepts of JavaScript

● Arrow functions

● Destructuring arrays and objects

● Working with arrays (methods like push, pop, map, filter)

● Objects and their properties

● Working with asynchronous javascript (callbacks, promises, async/await)

Week 3: Introduction to React and Component Basics

Session 5: Introduction to React and JSX

● What is React and why use it

● Setting up a React environment (using Create React App)

● Installing bundlers

● React.createElement and render method

● Introduction to JSX

● Tailwind CSS

Session 6: Components, Props, and State

● Creating and rendering components

● Creating different components

● Understanding props

● Creating cards with props

● React reconciliation and React fibers

● Understanding keys in React

● Understanding the useState hook

● Project: Creating a simple React project

Week 4: React Advanced Features and Routing

Session 7: Advanced Hooks and State Management

● Understanding the useEffect hook

● Clean-up function of useEffect

● Custom hooks

● State lifting

● Context API

Session 8: UI Functionalities and React-Routing

● Introduction to React Router DOM

● Creating different paths

● Creating an error page using useRouteError hook

● Creating children routes

● Understanding types of routing (SSR vs CSR)

● Single Page Application and dynamic routing

● Using useParams hook

● Applying event handlers

Week 5: CSS Frameworks and Advanced React Concepts

Session 9: Getting Started with Frameworks

● Introduction to Bootstrap / Tailwind

● Setting up Bootstrap/Tailwind

● Grid system and responsive design

● Commonly used classes (buttons, cards, alerts)

Session 10: Advanced React Concepts

● Higher-order components

● Lazy loading (on-demand loading)

● Controlled vs uncontrolled components

Week 6: React lifecycle and performance optimization

Session 11: Class Components

● Creating class-based components

● States in class components

● Lifecycle methods of React

Session 12: Performance optimization

● Error boundaries

● Fragments and StrictMode

● Performance optimization with React.memo and useCallback

Week 7: State management with Redux

Session 13: Introduction to Redux

● What is Redux and why use it

● Setting up Redux

● Actions, reducers, and the store

● Connecting Redux with React components

Session 14: Advanced Redux

● Advanced Redux concepts (middleware, async actions)

● Combining reducers

● Project work: Integrating Redux into the Recipe app

Week 8: Project Implementation

Session 15: Setting Up the E-commerce Website

● Planning the project structure

● Setting up the environment with Create React App

● Installing necessary dependencies (React Router, Redux, Tailwind CSS, etc.)

● Creating the basic layout (header, footer, product listing)

Session 16: Implementing Functionality and deployment

● Adding product data and displaying products

● Implementing product details page

● Adding a shopping cart with Redux

● Deployment of react front end on hosting platforms

Week 9: Introduction to Node.js and Express

Session 17: Node.js Basics and Modules

● Introduction to Node.js and its architecture

● Setting up Node.js and creating a basic server

● Understanding the Node.js event loop and asynchronous programming

● Core modules and third-party packages

● Working with NPM for package management

● Creating and managing custom modules

Session 18: Basics of Express.js and RESTful APIs

● Setting up an Express application

● Understanding routing and middleware in Express

● Creating a basic RESTful API

● CRUD operations and data handling

● Implementing error handling and validation

Week 10: Advanced Express and API Design

Session 19: Advanced Express Features

● Authentication and authorization (JWT, OAuth)

● Advanced routing techniques and error handling

● Integrating third-party services (e.g., payment gateways)

Session 20: API Design and Documentation

● Designing scalable and maintainable APIs

● Documenting APIs using tools like Swagger

● Testing APIs with Postman or similar tools

Week 11: Introduction to MongoDB

Session 21: MongoDB Basics

● Introduction to NoSQL and MongoDB

● Setting up MongoDB and using MongoDB Atlas

● Basic CRUD operations and data modeling

Session 22: Advanced MongoDB

● Schema design and data relationships

● Aggregation framework and indexing

● Performance optimization and data validation

Week 12: Authentication and CI/CD Pipelines

Session 23: Authentication and Authorization

● Implementing user authentication (e.g., JWT, Passport.js)

● Managing user roles and permissions

● Securing APIs and handling sessions

Session 24: CI/CD Pipelines

● Introduction to Continuous Integration and Continuous Deployment

● Setting up CI/CD pipelines using GitHub Actions or similar tools

● Deploying applications (backend and frontend) to cloud platforms

Week 13: Major Project Frontend Setup

Session 25: Setting Up the E-commerce Website

● Planning and organizing the project structure

● Setting up the frontend environment with Create React App

● Installing and configuring dependencies (React Router, Redux, Tailwind CSS,

etc.)

● Building the basic layout (header, footer, product listing)

Session 26: Implementing Functionality

● Adding and displaying product data

● Implementing product details and shopping cart functionality with Redux

Week 14: Finalizing and Deployment

Session 27: Backend Integration and Checkout Functionality

● Developing checkout functionality and integrating with the backend

Session 28: Deployment and Final Touches

● Deploying Node.js/Express backend to cloud platforms (Heroku, AWS, etc.)

● Hosting the React frontend on platforms like Netlify or Vercel

● Configuring domain names, SSL certificates, and final deployment checks

● Conducting final testing and performance optimization