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
CONTENTS
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)
CONTENTS
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
● [Link] 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
CONTENTS
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
CONTENTS
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 [Link] and useCallback
CONTENTS
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
CONTENTS
Week 9: Introduction to [Link] and Express
Session 17: [Link] Basics and Modules
● Introduction to [Link] and its architecture
● Setting up [Link] and creating a basic server
● Understanding the [Link] 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 [Link] 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
CONTENTS
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
CONTENTS
Week 12: Authentication and CI/CD Pipelines
Session 23: Authentication and Authorization
● Implementing user authentication (e.g., JWT, [Link])
● 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
CONTENTS
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 [Link]/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