⏳ Total Duration: 1 hour and 30 minutes per session.
💻 Tools Required: VS Code, Node, Laptop/Desktop
📚 HTML (Structure and Content)
📅 Session 1: Intro to Web Development & HTML Basics
- What is the Internet and how websites work (client/server model)
- HTML overview: What it is, how it works
- Structure of an HTML document: <!DOCTYPE html>, <html>, <head>, <body>
- Creating your first HTML page
📅 Session 2: Text Elements and Links
- Headings (<h1> to <h6>)
- Paragraphs, line breaks (<br>), horizontal lines (<hr>)
- Bold, italic, underline (<b>, <i>, <u>)
- Anchor tags: internal/external links, target=”_blank”
📅 Session 3: Lists, Images, and Attributes
- Ordered (<ol>) and Unordered lists (<ul>)
- Nested lists
- Adding images (<img>) with src, alt, width, height
- Global attributes: title, id, class
📅 Session 4: Tables and Forms
- <table>, <tr>, <td>, <th>, colspan, rowspan
- Forms: <form>, <input>, textarea, select, checkbox, radio, button
- Form attributes: action, method, name, value
📅 Session 5: Semantic HTML
- What are semantic tags and why they matter
- Tags: <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>
- Accessibility basics
📅 Session 6: Mini Project – Personal Profile Website
- Combine everything from previous sessions:
- About Me
- Hobbies
- Image
- Contact Form
- Table of Skills
📚 CSS (Styling & Layout)
📅 Session 7: Introduction to CSS
- CSS syntax: selectors, properties, values
- Types of CSS: Inline, Internal, External
- Colors, units (px, %, em, rem)
- Basic text styles: color, font-size, font-family
📅 Session 8: Backgrounds, Borders, and Fonts
- background-color, background-image
- Borders: width, style, color
- Google Fonts
- Text properties: text-align, line-height, letter-spacing
📅 Session 9: Box Model
- Understanding margin, border, padding
- Width, height, overflow
- box-sizing
- Developer tools for inspecting
📅 Session 10: Positioning and Display
- display: block, inline, inline-block, none
- position: static, relative, absolute, fixed
- Z-index
- Activity: Layout demo using absolute and relative positions
- Homework: Make a floating contact button on your page.
📅 Session 11: Flexbox Layout
- Flex container and items
- Direction, justification, alignment
- Gap, wrapping
📅 Session 12: Mini Project – Styled Portfolio Page
- Style your HTML portfolio using learned CSS concepts
- Use colors, spacing, layout, fonts, forms
📚 Bootstrap (Responsive Design & Components)
📅 Session 13: Introduction to Bootstrap & Grid System
- What is Bootstrap and why use it?
- Including Bootstrap via CDN
- Containers (.container, .container-fluid)
- Rows and Columns – the 12-column responsive grid
- Breakpoints (col-sm, col-md, col-lg, etc.)
- Nesting rows and columns
📅 Session 14: Bootstrap Components (Navbar, Buttons, Cards)
- Navbar: responsive menu with toggler
- Buttons: styles, sizes, colors
- Cards: image, text, links, layout
- Button groups
📅 Session 15: Bootstrap Forms and Utilities
- Bootstrap form classes: form-group, form-control, etc.
- Inputs, labels, selects, checkboxes
- Utility classes: spacing (m-, p-), colors, text, borders
- Grid-based form layout
📅 Session 16: Mini Project – Responsive Bootstrap Website
- Build a single-page site using Bootstrap
- Navbar
- Hero section with image and text
- Cards for services/products
- Contact form
📚 JavaScript (Fundamentals & Interactivity)
📅 Session 17: JavaScript Introduction & Variables
- What is JavaScript?
- Adding JS to HTML: <script> tag (internal vs external)
- Variables: let, const, var (with differences)
- Data types: string, number, boolean, null, undefined
- Console logging
📅 Session 18: Operators and Conditional Statements
- Arithmetic and assignment operators
- Comparison and logical operators
- Conditional structures: if, else, else if
- prompt() and alert()
📅 Session 19: Loops and Arrays
- for, while, and do…while loops
- Arrays: declaration, accessing items, .push(), .pop(), .length
- Iterating over arrays
📅 Session 20: Functions
- Function declaration and calling
- Parameters and return values
- Scope: local vs global
📅 Session 21: Events and Event Handling
- Inline events: onclick, onmouseover, onchange
- addEventListener method
- Triggering functions with button clicks
📅 Session 22: DOM Manipulation
- getElementById(), querySelector()
- Changing text and styles: innerText, innerHTML, style
- Reading input values
- Activity: Build a form that shows input in a paragraph
📅 Session 23: Form Validation
- Preventing default behavior
- Validating empty fields
- Email format checking with RegEx (intro)
- Showing custom error messages
- Activity: Validate a login form (email & password)
📅 Session 24: Final Project – Interactive Portfolio Website
- Combine HTML, CSS, Bootstrap, and JavaScript
- Personal info
- Skills section with table
- Contact form with validation
- Activity: Work on project live with guidance
📚 React.js– 17 Sessions
📅 Session 1: Introduction to React & Environment Setup
- What is React? Benefits & real-world usage
- React vs traditional JS frameworks
- Installing Node.js, npm
- Creating a React App (create-react-app)
- React folder structure overview
📅 Session 2: JSX and Functional Components
- JSX syntax & rules
- Embedding expressions in JSX
- Functional components
- Rendering multiple components
📅 Session 3: Props and Reusable Components
- Passing props to components
- Props destructuring
- Children props
- Reusable UI component example: Card/Profile Box
📅 Session 4: useState and Handling Events
- State in React with useState
- Updating and reading state
- Event handling: onClick, onChange
📅 Session 5: Conditional Rendering & Basic Interactivity
- if, &&, ternary rendering in JSX
- Show/hide elements
- Dynamic button behavior
📅 Session 6: Lists, Keys, and map()
- Rendering lists with map()
- key prop and best practices
- Arrays of objects (looping)
📅 Session 7: Forms and Controlled Components
- Controlled form inputs
- Form submission and onSubmit
- Input validation basics
📅 Session 8: useEffect Hook (Basic Usage)
- What is useEffect?
- Side effects: logging, title change, timer
- Dependency array: when useEffect runs
📅 Session 9: useEffect with API (Data Fetching)
- Fetching from an API using fetch() or axios
- Displaying loading and error messages
- Rendering fetched data in components
📅 Session 10: React Router (Multi-page Navigation)
- Installing react-router-dom
- Setting up BrowserRouter, Route, Link, NavLink
- Creating Home, About, Contact routes
📅 Session 11: Component Communication & Lifting State
- Passing data from child to parent
- Callback props
- Lifting state up for shared components
📅 Session 12: useRef Hook (DOM Access)
- Introduction to useRef
- Managing focus/input fields
- Preserving values without re-render
📅 Session 13: Context API for Global State
- Problem of prop drilling
- Creating and using Context
- Provider and useContext
📅 Session 14: Conditional UI and Loading States
- UI states: loading, error, empty
- Showing different UIs based on state
- Skeleton loader or spinner concept
📅 Session 15: Styling in React
- CSS file imports & CSS Modules
- Inline styles vs className
- Dynamic styling using state
📅 Session 16: Deploying React App
- Building React App for production
- Pushing to GitHub
- Deploying using Netlify or Vercel
📅 Session 17: Final Project – Interactive Portfolio
- Build a mini portfolio site that includes:
- Multiple routes (About, Projects, Contact)
- Project cards using map()
- Contact form using useState
- Theme toggle using Context
- API usage (e.g., GitHub projects or blogs)
📚 Introduction to Node.js & Environment Setup
📅 Session 1: Introduction to Node.js & Setup
- What is Node.js? Overview and uses
- Installing Node.js, npm (Node package manager)
- Basic Node.js setup and structure
- Writing a simple “Hello, World!” Node.js server
📅 Session 2: Understanding Node.js Modules
- What are modules in Node.js?
- Built-in modules: http, fs, path, url
- Creating your own modules
📅 Session 3: The Event Loop and Asynchronous Programming
- Event-driven programming
- Callback functions and events.
- Understanding the event loop in Node.js
📅 Session 4: Working with npm and Managing Dependencies
- Understanding package.json and dependencies
- Installing and managing npm packages
- Using popular Node.js packages like express, dotenv
📅 Session 5: File System and Directories in Node.js
- Working with the file system (fs) in Node.js
- Reading and writing files, directories, and streams
- Asynchronous vs. synchronous file operations
📅 Session 6: Mini Project – Simple HTTP Server
- Build a simple HTTP server using the http module
- Respond to different routes (GET, POST, PUT)
📚 Introduction to Express.js & Building APIs
📅 Session 7: Introduction to Express.js
- What is Express.js? Benefits and usage
- Setting up Express and creating a server
- Understanding middleware in Express
📅 Session 8: Routing in Express.js
- Using app.get(), app.post(), and other HTTP methods
- Creating routes and handling requests
- Dynamic route parameters
📅 Session 9: Middleware in Express
- What is middleware in Express?
- Using built-in middleware (express.json(), express.static())
- Creating custom middleware for logging and authentication
📅 Session 10: Handling Requests and Responses
- Understanding request (req) and response (res) objects
- Sending JSON responses
- Handling query parameters and form data
📅 Session 11: Error Handling and Validation in Express
- Error handling using try-catch and middleware
- Validating request data using express-validator or custom methods
- Sending proper HTTP status codes
📅 Session 12: Mini Project – Basic Blog API
- Create a simple CRUD API for managing blog posts
- Use express.json() and handle errors
📚 Introduction to MySQL and Working with Databases
📅 Session 13: Introduction to SQL Databases (MySQL)
- What is MySQL? SQL vs NoSQL databases
- Setting up MySQL locally and connecting to MySQL database
- Using MySQL Workbench or CLI for database management
📅 Session 14: Connecting Node.js with MySQL
- Installing mysql2 or sequelize npm package
- Connecting Node.js to MySQL
- Basic MySQL queries (SELECT, INSERT, UPDATE, DELETE)
📅 Session 15: CRUD Operations with MySQL
- Writing SQL queries for Create, Read, Update, and Delete (CRUD)
- Using parameterized queries to prevent SQL injection
📅 Session 16: Working with MySQL Joins
- Introduction to SQL joins (INNER JOIN, LEFT JOIN, RIGHT JOIN)
- Querying related tables in MySQL (e.g., Users and Posts)
📅 Session 17: Using Sequelize ORM
- Introduction to Sequelize ORM for MySQL
- Setting up Sequelize with Express
- Defining models, relationships, and writing queries with Sequelize
📚 Authentication, Security, and File Handling
📅 Session 18: Introduction to Authentication
- What is authentication and authorization?
- Using JWT (JSON Web Tokens) for authentication
- Setting up routes for login and signup
📅 Session 19: Hashing Passwords with bcrypt
- Why hash passwords?
- Installing and using bcrypt to hash and compare passwords
- Homework: Integrate password hashing in the authentication process.
📅 Session 20: Setting Up User Authorization
- Role-based authorization: Admin, User
- Protecting routes with JWT authentication middleware
📅 Session 21: Secure Your API (Basic Security)
- Basic security concepts: rate limiting, input validation, etc.
- Using helmet.js for HTTP header security
- CORS and setting up security for cross-origin requests
📅 Session 22: File Uploads with Multer
- What is Multer? Handling file uploads in Express
- Setting up file uploads (e.g., images)
- Saving files to a local directory or cloud storage
📅 Session 23: Mini Project – Full Blog API with Authentication
- Combine authentication, bcrypt, and file upload in a full app
📚 Final Projects and Deployment
📅Session 24: Introduction to Deployment
- Preparing your app for deployment (production vs. development)
- Environment variables and dotenv
- Deploying to Heroku
📅 Session 25: Deploying the App to Heroku
- Steps to deploy an Express app on Heroku
- Connecting the app to a cloud database (MySQL via ClearDB or other providers)
📅 Session 26: Logging and Monitoring in Production
- Using tools like morgan for logging
- Monitoring errors and logs in production
📅 Session 27: Final Project Work – Build Your Own API
- Plan and design a simple web application or API
- Implement authentication, data storage, and routing
📅 Session 28: Final Project Work – Continue Development
- Continue working on the final project
- Incorporate advanced features, authentication, and security
📅 Session 29: Final Project Presentation & Review
- Present your final project to the class
- Review of key concepts learned in the course
💻 Capstone Project: One Month of Development Practice
