HTML Essentials (Days 1-3)
Day 1: HTML Basics & Structure
- Introduction to web development
- Setting up VS Code and live server
- HTML document structure
- Headings, paragraphs, line breaks
- Lists, links, images
Day 2: HTML Layout & Forms
- Grouping elements: <div>, <span>
- Tables: structure and use
- Form elements: <input>, <label>, <button>, <textarea>, <select>
Day 3: Semantic HTML & Accessibility
- Semantic tags: <header>, <nav>, <main>, <footer>
- Accessibility principles: alt text, labels, proper structure
- HTML validation and formatting best practices
CSS Foundations (Days 4-6)
Day 4: CSS Basics
- Syntax, selectors, comments
- Color, font, and text styling
- Applying CSS (inline, internal, external)
Day 5: Box Model & Visual Styling
- Box model: padding, margin, border
- Display types: block, inline, inline-block, none
- Width, height, background properties
Day 6: Flexbox, Grid & Animations
- Flexbox layout: display: flex, justify-content, align-items
- CSS Grid basics: grid-template-columns, grid-gap, grid-area
- CSS transitions and keyframe animations
JavaScript Fundamentals (Days 7-15)
Day 7: JavaScript Introduction
- Script tag, console, debugging
- Variables (let, const), data types
Day 8: Operators & Conditionals
- Arithmetic, comparison, logical operators
- if, else, switch statements
Day 9: Loops & Control Flow
- for, while, do…while
- Loop control: break, continue
Day 10: Functions
- Declaring and calling functions
- Parameters, return values
- Function scope
Day 11: Arrays & Objects
- Creating and accessing arrays/objects
- Basic array methods (push, pop, length)
- Object properties and access
Day 12: DOM Manipulation
- Selecting elements (getElementById, querySelector)
- Modifying content and styles
Day 13: Event Handling
- addEventListener
- Handling form input, clicks, and user interactions
Day 14: JavaScript Destructuring
- Array and object destructuring
- Nested destructuring
- Function parameter destructuring
Day 15: JavaScript Modules (ES6)