Context: Full-Stack Roadmap Chapters 1–5 in one place — HTML structure (Ch 1–3) → CSS styling (Ch 4) → layout & responsive (Ch 5) · covers everything needed to build a styled, responsive, multi-page static site before JavaScript begins.
Read protocol: scan tables → attempt the practice blank → re-read only the section where you failed.
Quick Revision
🎯 Objective: build a complete, responsive, multi-page website from scratch ➔ semantic HTML structure + CSS styling + Flexbox/Grid layout + mobile-first media queries.
⚡ Key Constraint: the box model is the root of 80% of CSS confusion — width means content width by default (padding + border added on top); always start with * { box-sizing: border-box; }. Second biggest source of bugs: specificity — an ID beats a class beats an element selector, and the browser silently picks the winner with no error.
🌐 How the web works (mental model)
Concept
One-liner
Gotcha
Client / Server
browser asks (request) → server answers (response)
your HTML/CSS/JS runs on the client (browser)
HTTP
the protocol for requests; methods: GET / POST / PUT / DELETE
status codes: 200 OK · 404 Not Found · 401 ≠ 403
DNS
turns example.com → IP address 93.184.216.34
the internet’s phone book
Frontend / Backend
code in the browser / code on the server
full-stack = both
Rendering
browser reads HTML top→down, builds a tree (DOM), paints pixels
CSS loads in <head> so styles apply before the page paints
🏗️ HTML page skeleton (every page starts here)
<!DOCTYPE html> <!-- 1. declaration: "this is modern HTML" --><html> <head> <!-- 2. metadata — NOT visible on page --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tab Title</title> <!-- browser tab + search results --> <link rel="stylesheet" href="styles.css"> <!-- external CSS --> </head> <body> <!-- 3. everything the user SEES --> ... </body></html>
<!DOCTYPE html> — always first line; no closing tag.
<meta viewport> — required for mobile; without it, phones render at 980px and zoom out.
<link> loads an external stylesheet — the standard for all real projects.
📝 HTML elements — content structure
Element
Micro-syntax
Job / gotcha
Headings
<h1> – <h6>
hierarchy, not size; never skip levels (h1→h3 is wrong); one <h1> per page
Practice 1: Build a responsive card grid — 6 cards with a title, image, and description. 1 column on mobile, 2 on tablet, 3 on desktop. Cards have rounded borders, padding, and a subtle shadow. Include viewport meta tag. (uses: semantic HTML + Grid auto-fit or media queries + box model + responsive images)
Key move:repeat(auto-fit, minmax(280px, 1fr)) handles all breakpoints in one line — no media queries needed. box-shadow adds depth without a heavier border.
Practice 2: Build a page with a Flexbox navbar (logo left, links right), a Grid main area (content + 250px sidebar), and a footer. Style the nav links to highlight on hover. Mobile: nav stacks vertically, sidebar disappears. (uses: Flexbox nav + Grid page layout + semantic elements + media query + pseudo-class)
Key move: outer body Grid handles vertical stacking (header/nav/content/footer with 1fr on the content row to push the footer down); inner .page Grid handles the horizontal content + sidebar split. display: none + media query for the sidebar keeps mobile clean.
Practice 3: Build a styled registration form — name (required), email (required), password (required), age (number, min 13), country (dropdown, 4 options), terms checkbox (required), submit button. Style inputs with consistent width, focus glow, and a coloured button that darkens on hover. Wrap in semantic elements. (uses: form elements + validation attributes + label linking + CSS selectors + pseudo-classes + box model)
💡 Forgot viewport meta tag ➔ page looks perfect on laptop, tiny text on phones.
💡 Styles don’t apply — no error shown ➔ check in order: (1) typo in class name, (2) missing <link> to stylesheet, (3) specificity conflict (ID beats class), (4) browser cache (Ctrl+Shift+R to hard refresh).
💡 margin: 0 auto doesn’t center ➔ the element has no width or max-width set — auto needs a constraint.
💡 Images overflow their container ➔ add global rule img { max-width: 100%; height: auto; }.
💡 Headings used for size, not structure ➔ <h3> after <h1> because you want smaller text → wrong; use CSS font-size to control appearance, headings define document outline.
💡 justify-content vs align-items confusion ➔ justify = main axis, align = cross axis. If flex-direction: column, main axis is vertical (swapped).
💡 Radio buttons not grouped ➔ each radio has a different name → they behave as independent checkboxes.
💡 Missing <label for="id"> ➔ clicking the text doesn’t focus the input; screen readers can’t announce the field.
💡 Desktop-first media queries ➔ writing max-width queries that undo complexity → harder to maintain. Write mobile-first with min-width instead.