Introduction to Web and JavaScript Basics

Day 1: Introduction to Web and Browsers

• Introduction to Browser & Web
• Browser Wars
• DOM tree, CSSOM tree
• Browser internals: HTML parser, CSS parser, JavaScript V8 engine

Day 2: Networking and HTTP Basics

• Internals: IP, MAC address, Ports & Evolution of HTTP
• HTTP Methods
• How the Server looks at the URL
• Request & Response cycle

Day 3: HTML Browser Tools and JavaScript Basics

• HTML Browser view: Debugger, Inspect
• Browser JS vs Node.js
• Data types

Day 4: JavaScript Data Handling

• Copy by value and Copy by reference
• Window & document object

Day 5: JavaScript Arrays and Iteration

• Introduction to Arrays
• Array and JSON iteration

JavaScript Arrays, Objects, and Functions

Day 6: XMLHttpRequest and Hoisting

• XMLHttpRequest
• Hoisting & scope

Day 7: JavaScript Functions

• Introduction to functions
• Function & return keyword
• Types of functions

Day 8: ES6 Basics – Variables and Scoping

• var vs let vs const
• Block scoping
• Spread & rest operators

Day 9: ES6 Advanced – Destructuring and Shorthand

• Array & object destructure
• Object property shorthand
• Template literals
• Arrow functions

Day 10: JavaScript OOP – Prototypes and Classes

• Understanding the basics of prototype
• What are classes in JS?
• Constructor
• Need for setters/getters
• Use of this keyword in classes

JavaScript OOP and Advanced Concepts 

Day 11: JavaScript Array Methods

• Map, Reduce, Filter
• Other array methods

Day 12: Introduction to HTML

• What is HTML & Why use it?
• Basic Tags
• HTML vs HTML5
• div vs section vs article
• div vs span
• Inline vs block elements

Day 13: HTML Forms

• HTML Forms
• Input elements and attributes
• Form submit

Day 14: Introduction to CSS

• What is CSS?
• Ways to use CSS
• Property & value
• Class vs ID
• Use of !important

Day 15: CSS Display and Pseudo-Classes

• Display property: inline, block
• Intro to pseudo-classes (link, visited, hover, active)

Advanced HTML & CSS 

Day 16: CSS Box Model and Flexbox

• Box model: padding, margin, border
• Grid
• Flex: display, direction, wrap, flex-flow, justify-content, align-content

Day 17: CSS Positioning and Gradients

• Position property: fixed, static, relative, absolute, sticky
• Parent inherit
• Gradient

Day 18: CSS Overflow and Media Queries

• Overflow: hidden, scroll, auto, visible
• Dropbox
• Measurements
• Fonts
• Icons
• Media query

Day 19: Responsive Web Design and Bootstrap Setup

• What is RWD?
• What is the mobile-first approach?
• Bootstrap setup

Day 20: Bootstrap Layout and Grid System

• Bootstrap layout
• Container, container-fluid & container with breakpoints
• Grid in Bootstrap
• Column prefix & its use
• Maximum columns for a row
• Nested columns and column ordering

DOM Manipulation and JavaScript Async Programming 

Day 21: DOM Basics

• What is DOM?
• createElement, setAttribute, getElementById, querySelector vs querySelectorAll
• innerHTML vs innerText
• appendChild vs append

Day 22: Window and Event Handling

• Window – Common Util functions
• setTimeout vs setInterval
• Prompt, Alert, Confirm

Day 23: JavaScript Callbacks

• Working with events
• Recap of DOM topics
• Callback
• What’s the callback? – call stack, web API, event loop, queue

Day 24: JavaScript Promises

• Use & purpose of the callback
• Pain of callback
• Promise: What is a promise?
• Promise States
• Promise chain
• promise.all()

Day 25: Promises and Async/Await

• Use of fetch() & then()
• Promise chaining
• Async/Await with error handling

JavaScript Promises and Fetch API 

Day 26: Implementing CRUD with Fetch API

• Promise fetch – request info & request init
• Implementing CRUD with HTML, CSS, JavaScript
• Recap of callback, Promise Topics

React Introduction and Basic Concepts 

Day 27: React Basics and JSX

• Why React
• Setup React project
• Understanding JSX
• Components (simple HTML layout to reusable React components)

Day 28: React Components

• Understanding the components
• Passing data through props
• Deploying React to Netlify

Day 29: React Lists and Conditional Rendering

• Working with array lists
• Usage of keys
• Conditional rendering
• Handling Events
• Props vs State

React Components and Hooks

Day 30: Advanced React Components

• Components – In-depth
• Component life cycle

Day 31: React State and Hooks

• Stateful and stateless components
• Reusable components
• Passing dynamic data to component
• Introduction to Hook

Day 32: React Hooks – useState and useEffect

• What is the hook?
• Lifecycle of Hook
• useState, useEffect
• Props drilling
• Passing data from child to parent component

Day 33: React Router

• React-router-dom
• BrowserRouter, Switch, Link, Route, URL params

Day 34: React Hands-on Practice

• Recap With Previous Day Topics
• Session-based Hands-on practice Task with any Admin Dashboard

React Context API and Redux 

Day 35: React Context API

• Context-API
• What is context, provide, createContext
• Avoid props drilling
• Session task – profile name changes

Day 36: React Advanced Hooks

• useRef, useReducer
• Front end game demonstration – hangman / tictactoe / tile match

Day 37: React API Integration

• Playing around with API
• fetch() or Axios
• Implementing simple CRUD

Day 38: React Final Project

• Completed recap by implementing any Front end game/CRUD to understand the importance of hooks

Day 39: Introduction to Redux

• Intro to Redux – to understand the state management with react application

Database Introduction and MySQL 

Day 40: Introduction to Databases

• Introduction to database
• What is MySQL?
• Intro to MySQL engines
• Basic queries – create db, table

Day 41: MySQL Queries

• Insert, update, alter
• Select – where clause, distinct, group by, order by, offset, limit

Day 42: Advanced MySQL

• Normalization
• Select queries
• Joins

Day 43: MongoDB Introduction

• DB model design
• Intro to MongoDB & installation of MongoDB

Day 44: MongoDB Basics

• Why MongoDB?
• What is a document?
• What is a collection?

MongoDB and Node.js Introduction 

Day 45: MongoDB vs MySQL

• MongoDB vs MySQL
• Creation of database, collections, documents
• find – query & projection
• Use of operators in find() query

Day 46: MongoDB Aggregation and Cursor Methods

• Basic cursor methods – map, toArray, pretty, forEach, limit, count, sort
• Aggregation
• Server-side vs Client-side rendering

Day 47: Introduction to Node.js

• What is Node.js?
• NPM packages
• In-built, third-party, and custom packages

Day 48: Node.js and Express.js Basics

• What is Express?
• API methods – GET, POST, PUT, DELETE
• Request & response objects
• URL & query parameters

Day 49: Node.js and MongoDB Connectivity

• Connection to MongoDB (local & atlas)
• Simultaneous frontend + backend connectivity

Node.js Deployment and Authentication 

Day 50: Node.js Deployment

• dotenv
• Deployment
• Simultaneous frontend + backend connectivity

Day 51: Node.js Authentication

• Authentication
• bcrypt
• Simultaneous frontend + backend connectivity

Day 52: Node.js JWT and Middleware

• JWT
• Custom middleware
• Authorization
• Simultaneous frontend + backend connectivity

Final Project and Review

Day 53: Final Project Implementation

• Final project implementation
• Hands-on practice with CRUD operations and authentication

Day 54: Project Review

• Project review
• Debugging and optimization

Day 55: Course Recap

• Recap of all topics
• Final Q&A session

Day 56: Final Assessments and Presentations

• Final assessments and project presentations

Day 57: Course Wrap-up

• Course wrap-up
• Feedback and future learning paths