Introduction to Front-End Development Tools needed, project folder structure, VS Code setup, Live Server

HTML Basics – Tags, structure, headings, paragraphs, lists, formatting

HTML Elements – Links, images, buttons, iframes, tables

HTML Forms – Input types, labels, checkboxes, radio buttons, textarea, submit

HTML5 Semantic Tags – (header), (nav), (main), (section), (article), (footer)

HTML Project – Resume Page / Restaurant Menu

CSS Basics – Inline, internal, external CSS, colors, units (px, %, rem), developer tools

Selectors & Properties – Element, class, ID selectors, background, borders, text styles

Model & Display – Margin, padding, border, content, block, inline, inline-block

CSS Positioning – static, relative, absolute, fixed, sticky with real layout example

CSS Flexbox Deep Dive – Container & item properties with step-by-step layout examples

CSS Grid – Grid layout, rows, columns, gaps, template areas

CSS Project – Blog Layout / Pricing Table using Flexbox & Grid

Responsive Design – Media queries, mobile-first design, breakpoints

CSS Units & Best Practices – em, rem, vh, vw, consistency, reset

CSS Transitions & Animations – Hover effects, keyframes, animation delay/duration

CSS Mini Project – Responsive Landing Page

Intro to JavaScript – Console, variables (let, const), data types

Operators & Conditional Statements – if, else, switch with form validations

Loops & Iteration – for, while, array loops (forEach, map)

Functions in JS – Declaration, parameters, return, arrow functions

Arrays & Objects in JS – CRUD operations, nesting, real use-cases

DOM Manipulation – getElementById, querySelector, innerText, value, events

Form Event Handling in JavaScript – Click, Change, Keyup

Form Validations – Required fields, email format, password length, custom errors

JS Project

Intro to Browser Storage – localStorage, sessionStorage with use-case

JSON Basics – Creating, parsing, stringifying, use in APIs

Fetch API – Get/Post requests using JSONPlaceholder

JavaScript Project