Roadmap › 4. Frontend › Step 42
H5
HTML5 & CSS3 — Semantic Markup to Responsive Layouts
Document structure, semantic HTML, forms and accessibility, the CSS cascade and specificity, the box model, Flexbox and Grid, responsive design with media and container queries, CSS variables, Bootstrap/Tailwind and the HTML/CSS interview questions.
Quick revision for interview day. Print it or save it as a PDF.
Semantic skeleton
header > nav · main > article > section · aside · footer · one h1, headings in order · button for actions, a for navigation · labels for every input.
Specificity
inline > id (1,0,0) > class/attr/pseudo-class (0,1,0) > element (0,0,1); equal → last wins; !important overrides; @layer order before specificity.
Layout picks
| Need | Use |
|---|---|
| Row of items, centring | Flexbox |
| Page layout, card grid | Grid |
| Auto-responsive grid | repeat(auto-fill, minmax(220px, 1fr)) |
| Sticky header | position: sticky; top: 0 |
| Fluid font | clamp(min, preferred, max) |
Responsive checklist
Viewport meta · mobile-first min-width queries · no fixed widths · max-width:100% images · min-width:0 on grid/flex children · overflow wrappers for tables/code · container queries for components · test 320 → 1920 px.
Accessibility checklist
Alt text · labels · keyboard + visible focus · contrast 4.5:1 · lang · landmarks · ARIA only when needed · prefers-reduced-motion.