Week Sections Topics Comments

1.1.What is Internet_
1.2.What is www/http/URL
1.3.Frontend and Backend Explained
Section 1: Introduction to web development 1.4. HTML,CSS,JS
1.5. Setting up your environment
1.6. Things you shoukd know
1.7. MUST WATCH
2.1. HTML Introduction
2.2. HTML in Action - Learning Basic tags
Section 2: Let's Dive into HTML 2.3. Building a simple portfolio website using only HTML
2.4. Browser Developer Tools
2.5. HTML Boilerplate
3.1. HTML Tables
3.2. HTML Forms
3.3. HTML Tables + Forms
Section 3: HTML Forms and Tables
3.4. Create a Contact form for my Portfolio Page
3.5. How to link Multiple HTML Pages
Week 1 3.6. Things you should know
4.1. What is CSS and its type
4.2. CSS Basic Styles
4.3. CSS Selectors
4.4. CSS Box Model Explained
Section 4: Introduction to CSS 4.5. Display Property of CSS is everything you need
4.6. CSS hover Property
4.7. Creating a CSS Card Component
4.8. BEM Explained
4.9. The concept of Specificity
5.1. Adding basic Styles
5.2. Working with Display Property
Section 5: Upgrading Protfolio Website 5.3. Styling Contact Page
5.4. Launch your first website on GitHub.
5.5. Reestar Project Task
Recap Section 1, 2, 3 and 4
Week-1 Activities Week 1 - Assignments
HTML & CSS Week 01 Assessment

6.1. Udemy Project Introduction

6.2. Introduction to Complete Flexbox with Exercise
6.3. Building Categories Section - Udemy
6.4. Sale Image Section - Udemy
Section 6: Master Flex with a Project
6.5. Course Card - Udemy
6.6. Flex-grow and Flex-basis Explained.
6.7. Wrapping up Udemy Project
6.8. Time to Practice Flex
7.1. What is Git and GitHub
7.2. Setup your Git Environment
Section 7: Git and GitHub - Introduction
7.3. GitHub Push and Pull Demo
7.4. Let’s Push Udemy Project from the Terminal
8.1. What is CSS Position
8.2. What are 5 Different Positions
Section 8: CSS Positioning with Examples 8.3. Create Components Using CSS Position
Week 2
8.4. What is z-index
8.5. Update Udemy Project and Git it
9.1. What is CSS Animation
9.2. Opacity vs rgba
9.3. Transition Property
Section 9: CSS Animations - Learn Basics
9.4. Advance Animation using Keyframes
9.5 Animation in Practice
9.6. Update Udemy Project and Git it
10.1. What is a Responsive Website
10.2. Introduction to Media Queries
Section 10: Responsive Websites Makes You Pro
10.3. Practice Questions on Responsive Design
10.4. Upgrading Udemy Project using MQ
You are going to create a TripAdvisor Clone
Week-2 Activities Recap Session 6, 7, 8, 9 and 10
CSS & GIT Week 02 Assessment

11.1. What is Tailwind CSS

11.2. Bootstrap vs Tailwind CSS
11.3. Introduction to Greenden Project
11.4. Building Responsive Navbar

Section 11: Tailwind for Fast Development

 11.5. Header Section
11.6. About Section
Section 11: Tailwind for Fast Development
11.7. How grid differs from flex
11.8. Building Best Seller Section Using Grid
11.9. Let’s Wrap it up with Reviews, Newsletter and Footer
11.10. Product Page Task
11.11 How you can easily Take Template from Internet
11.12 Time to Git it
12.1. Why JavaScript
12.2. What are Variables
12.3. What ES6 means
Section 12: JavaScript: It's time to code 12.4. JavaScript Primitives
12.5. JavaScript Operators
12.6. Ternary Operators
12.7. Let’s Practice Basic JavaScript
13.1 If-Else in JavaScript
Week 3 13.2 If-Else Practice Questions
13.3 What are functions in JavaScript_
Section 13: JavaScript: If-Else and Functions
13.4 Parameters Explained
13.5 Return Keyword in JavaScript
13.6 Function Practice Questions
14.1. How to generate a random Number
Section 14: JavaScript: Guess the Number Game
14.2. Let’s create a Game
15.1. Loops Explained!
Section 15: JavaScript: Loop is powerful
15.2. Exercise Questions
16.1. What is Array
16.2. Push and Pop
16.3. Slice and Splice
Section 16: JavaScript: Arrays 16.4. indexOf, includes, Length
16.5. const & Arrays
16.6. Combining Arrays with loop
16.7. Arrays Practice Question
17.1. Introduction to Object Literals
Section 17: JavaScript: Object Literals
17.2. Arrays + Objects
Recap Section 11, 12, 13, 14, 15, 16 and 17
Week-3 Activities CSS & TAILWIND CSS & JAVASCRIPT - Assessment
JS - Assignment

18.1. What is JavaScript DOM?

18.2. Selecting and Manipulating DOM using ID
18.3. Selecting and Manipulating DOM using querySelector
Section 18: JavaScript: DOM Introduction 18.4. textContent vs InnerHTML
18.5. Exercise Questions with Id and querySelector
18.6. use of setAttribute
18.7. How to Manipulate CSS
19.1 What are Events & Even handlers
19.2. Event Object
19.3. Add 2 Numbers and Print Result
19.4. Exercise with Input Tag
Section 19: All about Events
19.5. Guess the Random Number 2.0
19.6. What are event Listeners with Example
19.7. Create a PopUp Box on a Button Click - 1
19.8. Create a PopUp Box on a Button Click - 2
Week-4 20.1. How to create a HTML Element
20.2. Append vs Prepend.
Section 20: Let’s Create a TO-DO List 20.3. How to Delete an Element
20.4. Let’s Create a TO-DO List from Scratch
20.5. Task for the Session
21.1. How to select value from Radio Buttons
21.2. How to select value from CheckBox
Section 21: Working with Forms
21.3. What is Regex and its Example
21.4 Form Validation
22.1 Creating a Responsive Side Navbar
Section 22: Upgrading Greenden Project with JS 22.2. Search Functionality in Product Page
22.3. Deploy into GitHub
Section 23: E-commerce Task (HTML+CSS+JS) 23.1. Create an E-commerce Website called Nostra
Recap Section 18, 19, 20, 21, 22 and 23
Week-4 Activities Javascript DOM Week -4 Assesment
E-commerce Website called Nostra Assignment

24.1. Arrow Function

24.2. Template Literals
24.3. Destructuring Assignment

Section 24: ES6 in detail

Week-5
 24.4. Spread and Rest Operator
Section 24: ES6 in detail 24.5. Default Parameter
24.6. Classes
24.7. Callback_
24.8. Promises
Week-5
24.9. Async _Await
25.1. ForEach Method
Section 25: JavaScript Array Methods 25.2. Let’s Filter
25.3. Map is powerful
Recap Section 24 and 25
Javascript MCQ Test
Week-5 Activities
Javascript Coding Questions
javascript-practical-questions

26.1. What and why is React

26.2. Let’s Practice React - codesandbox
26.3. How to run React Application from VS Code
26.4. How to add Styles
26.5. What are React Components
26.6. Recreate Perfumy Project Using React
Section 26: This is what everyone is talking about - React JS
26.7. Import and Export Components
26.8. Upgrade Perfumy React
26.9. What are Fragments _
Week-6
26.10. Push React Apps to Git
26.11. Using vercel to Deploy
26.12. Convert Udemy css Project to Udemy-react
27.1. What are props
27.2. Separation of Components
Section 27: Props and Map
27.3. Statement vs Expression
27.4 How to Work with Maps
Recap 26 and 27 Sections
Week- 6 Activities
Image Gallery Exercise

28.1. What is state

28.2. How to create a State
Section 28: useState Explained
28.3. Counter App with State
28.4. State Exercise
29.1. Controlled Components
29.2. Multiple Inputs
Section 29: Form Controls
29.3. Multiple Inputs 2.0
29.4. Creating a Shopping List
30.1. Change Color on a Button Click
Week-7
Section 30: Conditional Rendering 30.2. Check & Uncheck List
30.3. Before vs After Login
31.1. React component Life Cycle
31.2. React Hooks and its Types
Section 31: Things you should know
31.3. UseEffects Hook Explained
31.4. List and key
Guest Speaker from Industry Live session with guest from industry to clarify any doubts
Recap 28, 29, 30 and 31
Week-7 Activities
Week 7 - Asssesment

Section 32: Let’s Create a To-Do List 32.1. Complete To-Do List Tutorial
33.1. Actodo Project Overview
33.2. How to Integrate Tailwind with React
33.3. Project Folder Structure
33.4. Creating a Header Component
Section 33: Actodo Project - Part 1
33.5. Creating a Card Component
33.6. Building TodoList
33.7. Adding TodoList Functionality
33.8. Building AddTodoForm
34.1 React router Explained.
34.2. Link Tag in React Router
34.3. Create Login and Signup Page
Section 34: React Router 34.4. Add Login Functionality
Week-8
34.5. Add User via Sign Up
34.6. Fixing Login Logical Error
34.7. How to Navigate
35.1 Merge Router+Actodo Todo List
Section 35: Finishing up Actodo Project
35.2 Let’s Deploy
36.1. Why useContext
36.2. Create your own context.
Section 36: useContext Hook Explained
36.3. Add list with UseContext
36.4. Correct way to use useContext
 Recap scection 33 and 34
Resume creation
Week-8 Activities
Naukri + Linkedin Session
Favourite Student List Task

37.1. What is API

37.2. Promises
Section 37: Weather App using API 37.3. How to work with Axios
Week-9 37.4. Working with Weather API
37.5. React Weather App
Complete Resume and update Naukri, Linkedin profile
Week-9 Activities
React Project Task

38.1. Server vs Client

38.2. How to create your own server
Section 38: Backend Begins
38.3. Let’s Create an API
38.4. Practice Session
39.1. Let’s Connect Backend with html.
Section 39: Integrate Backend and Frontend 39.2. What is Get and POST Method
Week-10 39.3. Simple Login Practice.
40.1. Create Login Functionality in React
40.2. What is Middleware
Section 40: Integrate React with Node
40.3. Send and receive data from React and Node
40.4. Axios Post Method
Recap section 38, 39 and 40
Week-9 Activities
React - Axios (API) and Node JS Task

41.1. What is Database

Section 41: Let’s Learn about Database
41.2. Relational vs non-relational
42.1. What and why is MongoDB
Section 42: MongoDB 42.2. Installation and Setup
42.3. MongoDB CRUD
Week-11
43.1. How to use Mongoose
Section 43: Integrate MongoDB with Node 43.2. Creating Todo with React + Node.
43.3. Connecting Todo with MongoDB
Recap section 41, 42 and 43
Week-11 Activities
Mongo DB Exercise

44.1. BulkMail App Overview

44.2. How to Send an Email from node
44.3. How to read a file
44.4. Building UI for BulkMail
Section 44: Creating BulkMail App (MERN APP) 44.5. Merge Frontend with Backend
44.6. Adding Bulk Mailing Feature
44.7. Fixing a Problem
Week-12
44.8. Connecting to MongoDB
44.9. MongoDB Cloud
45.1. What and why is Redux
Section 45: Redux Tutorial 45.2. Redux Short Tutorial
45.3. Redux Slicer Explained
Recap Redux section
Week-11 Activities
Redux mini project task