HTML & CSS — In‑Depth Master Guide
Complete, beautifully organized deep dive from fundamentals to advanced techniques. This
canvas is your single-source reference: semantics, accessibility, modern layout systems,
performance, debugging, architecture, and practical patterns — all with masterkeys and
exam-ready tips. Save, print, and iterate.
📚 How to use this guide
• Practice‑first: after each section, build a tiny example (5–15 minutes).
• Mobile‑first: design for small screens first, then scale up.
• Semantic → Style → Enhance: structure with HTML, style with CSS, add progressive enhancements.
• Refactor often: avoid specificity wars—refactor to simpler selectors.
🔑 Masterkeys (High‑level)
• Semantics matter: use the right element for meaning and accessibility.
• One `` per page: use headings to form a logical outline.
• Box‑sizing: border‑box globally.
• Design tokens: centralize colors, spacing, type in CSS variables.
• Mobile & component first: prefer container queries over global breakpoints where possible.
• Measure, don’t guess: DevTools + Lighthouse for performance & accessibility.
PART A — HTML (Deep)
1. Document Essentials
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Short & Unique</title>
<meta name="description" content="One‑line description for SEO (≤160 chars)">
<link rel="icon" href="/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<!-- content -->
1
</body>
</html>
Masterkey: Title + meta description are critical for SEO and sharing.
2. Semantic Elements & Document Outline
• Landmarks: <header> , <nav> , <main> , <aside> , <footer>
• Grouping: <section> (thematic), <article> (self‑contained), <figure>/<figcaption>
(media + caption)
• Inline semantics: <strong> , <em> , <mark> , <time datetime="2025-08-17"> .
• ARIA: use only when native semantics are insufficient. Prefer native HTML first.
Tip: Screen readers rely on landmarks — use aria-label when a site has multiple navs.
3. Media & Responsive Images
<picture>
<source srcset="hero.avif 1x, hero@2x.avif 2x" type="image/avif">
<img src="hero.jpg" alt="Students studying together" loading="lazy"
decoding="async">
</picture>
• Use srcset + sizes for responsive images.
• loading="lazy" for below‑the‑fold images.
• decoding="async" to avoid blocking painting.
4. Forms — Accessibility & UX
• Connect labels: <label for="email">Email</label> .
• Use appropriate input types: email , tel , url , date , number .
• Autocomplete tokens: autocomplete="email" etc.
• Group related controls with <fieldset> + <legend> .
• Error messages: expose via aria-describedby and role="alert" for live announcement.
Example: validation hookup
<input id="email" name="email" type="email" required aria-describedby="email-
err">
<p id="email-err" aria-live="polite"></p>
5. Accessibility Checklist (HTML side)
• Skip link present and visible when focused.
2
• Landmarks in logical order.
• All form controls have labels.
• Images: meaningful alt or empty alt="" for decorative.
• Color not sole information channel; contrast ≥4.5:1 for normal text.
PART B — CSS (Deep)
6. Fundamentals: Cascade, Specificity, Inheritance
• Source order matters: later rules override earlier ones.
• Specificity levels: element (1) < class (10) < id (100) < inline (1000).
• Use @layer to create predictable order in large codebases.
@layer reset, base, components, utilities;
Tip: Prefer .component classes and small utility classes over deep selector chains.
7. Global Reset & Tokens
:root {
--bg: #0f1115;
--fg: #e7e9ee;
--brand: #7C3AED;
--space-1: .25rem; --space-2: .5rem; --space-3: 1rem;
--radius: .6rem;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--
bg);color:var(--fg)}
Masterkey: Tokens make theming and refactor safe.
8. Box Model & Layout Flow (Practical)
• display determines formatting context: block/inline/flex/grid/flow-root.
• Margins collapse vertically between adjacent block elements unless a new BFC is created.
• overflow: auto or display: flow-root creates BFC and contains floats/margins.
3
9. Flexbox (Advanced usage)
.row{display:flex;flex-wrap:wrap;gap:1rem}
.row > *{flex:1 1 220px;min-width:12rem}
• Use gap for consistent spacing.
• align-items controls cross axis; justify-content controls main axis distribution.
• flex-basis + flex-grow balance layout— flex: 1 1 0 for equal columns.
10. Grid (Advanced usage)
.grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: clamp(.5rem, .8vw, 1rem);
}
• Use named grid areas for complex page layouts.
• subgrid (where available) aligns nested elements to parent tracks.
11. Responsive Techniques
• Mobile first: base styles for mobile; @media(min-width:...) for enhancements.
• Fluid typography: font-size: clamp(1rem, 1vw + .5rem, 1.25rem) .
• Container Queries: container-type: size + @container for component‑level
responsiveness.
Example:
.card{container-type:inline-size}
@container (min-width:30rem){ .card{grid-template-columns:1fr 2fr} }
12. Modern CSS Features & Tricks
• Variables + calc: width: calc(100% - var(--space-3)) .
• Logical properties: margin-inline-start , padding-block-end for writing-mode safe layouts.
• aspect-ratio to lock media and card ratios.
• :has() for parent queries (progressive enhancement).
• color-mix() and oklch() for perceptually consistent colors where supported.
13. Animations & Performance
• Prefer transform and opacity for GPU-accelerated animations.
4
• Avoid animating layout properties ( width , height , left ) frequently.
• Use will-change sparingly.
Example easing pattern:
transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
PART C — Patterns, Components & Recipes
14. Component: Responsive Card
<article class="card">
<img src="thumb.webp" alt="Preview" />
<h3>Title</h3>
<p>Short description</p>
<a class="btn" href="#">Read</a>
</article>
.card{display:grid;gap:.75rem;padding:1rem;border-radius:var(--
radius);background:var(--surface)}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-
radius:.6rem}
15. Pattern: Sticky Header with Safe Area
header{position:sticky;top:env(safe-area-inset-top);backdrop-filter:blur(6px);z-
index:50}
16. Accessible Modal (structure & a11y)
• Use role="dialog" , aria-modal="true" , trap focus, restore focus on close.
• Keep markup simple: overlay + dialog element with aria-labelledby .
5
PART D — Architecture, Tooling & Delivery
17. CSS Architecture
• Use @layer (reset, base, components, utilities).
• Naming: BEM or utility‑first—be consistent.
• Small, composable components; avoid page‑level overrides.
18. Build & Performance Tips
• Critical CSS inline for above‑the‑fold content; defer rest.
• Use modern image formats (AVIF/WebP) + srcset .
• Minify CSS and enable caching with long cache headers.
• Audit with Lighthouse and fix top 3 issues first (perf, a11y, SEO).
19. Debugging Checklist
• Reproduce layout in DevTools with device toolbar.
• Inspect computed styles to find the winning rule and origin.
• Use Grid/Flex overlays to visualize tracks and alignment.
• Check accessibility tree in Accessibility panel.
PART E — Advanced Practices & Interview Qs
20. Advanced Topics to Study
• CSS Houdini basics (paint & layout worklets).
• Container queries across components.
• CSS-in-JS tradeoffs and when to use them.
• Progressive Web App basics: service worker impact on CSS delivery.
21. Interview & Self‑Test Prompts
• Explain the cascade, specificity, and how @layer changes ordering.
• Show how margin collapse works and 3 ways to prevent it.
• Compare Flexbox vs Grid with example use cases.
• Demonstrate building an accessible modal (keyboard trap, ARIA, focus management).
Quick Reference — Copy/Paste Snippets
• Global reset + tokens
6
:root{--brand:#7C3AED;--bg:#0f1115;--fg:#e7e9ee}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui; background:var(--bg); color:var(--fg)}
• Centering
.center{display:grid;place-items:center;min-height:100dvh}
• Fluid grid
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,
1fr))}
Final Masterkeys (Pin this)
1. Semantics first.
2. Mobile & component first.
3. Tokenize colors/spacing.
4. Prefer composition over specificity.
5. Measure and iterate with DevTools + Lighthouse.
If you want, I can now:
• Expand any single section into multiple subpages in the canvas (e.g., full Forms guide).
• Generate PNG diagrams for Box Model and Flexbox and attach them to this canvas.
• Export this document as a downloadable PDF.
Tell me which one and I’ll do it right away.
