Interview study guide
HTML & CSS, seen working.
From semantic HTML to grid, container queries and accessibility. Every example renders live on the page, and every claim about what it does was checked in a real browser before it went in.
- Chapters
- 13
- Topics
- 118
- Code samples
- 943
- Added beyond the doc
- 118
Learned
0 / 118
Study streak
0 days
This week
- 0 topics learned
- 0 highlights
- 0 of 7 days studied
Recent highlights See all →
Install HTML & CSS Notes as an appOpens full screen from your home screen and works offline.
01HTML Foundations & SemanticsHow the browser parses markup into a DOM, the document skeleton, semantic elements and landmarks, headings, the content model, links, images and media, tables, global attributes, and the interactive elements that work without JavaScript: details, dialog and popover.02FormsWhat a form actually sends, labels and accessible names, input types, the browser's built-in validation and its JavaScript API, styling valid and invalid fields, buttons, fieldsets, and select, datalist and textarea.03The Box Model & SizingEvery element is drawn as a rectangle made of four nested areas; this chapter is how the browser sizes those rectangles, why their margins sometimes merge, how they are hidden, how they handle content that doesn't fit, and which units they are measured in.04Selectors, Specificity & the CascadeHow CSS picks the elements a rule applies to, and how the browser decides which declaration wins when several rules set the same property on the same element.05Positioning & StackingWhere the browser puts a box when you leave it alone (normal flow), how each
position value nudges a box or lifts it out of that flow, which box ends up on top and why, plus floats, every way to centre something, and the new anchor positioning.06FlexboxOne-dimensional layout: how a flex container lays its items along a main axis, how justify-content and the align-* properties share out space, the exact arithmetic of flex-grow, flex-shrink and flex-basis, what flex: 1 really means, wrapping, the min-width: auto overflow trap, and the layouts you'll build with it every week.07GridCSS Grid as a two-dimensional layout system: lines, tracks and areas, the fr unit, repeat() and minmax(), placing items, template areas, the implicit grid, alignment, subgrid, and when to pick grid over flexbox.08Responsive DesignMaking one page work on every screen: mobile-first CSS, the viewport meta tag, media queries and their range syntax, fluid layouts and type without breakpoints, container queries, responsive images, and the viewport units that behave on phones.09Modern CSSCustom properties and theming, native nesting, logical properties, math and colour functions, better line wrapping, feature detection, and a round-up of what CSS gained since 2023 with its Baseline status as of October 2026.10Animation & Rendering PerformanceTransitions, keyframe animations and transforms; what the browser does to draw a frame and what makes it redo work; animating cheaply and accessibly; entry animations and view transitions; and how CSS and fonts affect page load.11CSS Architecture & ToolingWhy CSS gets harder as a codebase grows, and the conventions and tools teams use to keep it in check: BEM, CSS Modules, Sass and Less, Tailwind, CSS-in-JS, PostCSS and resets, each shown with the real CSS it produces.12AccessibilityBuilding pages everyone can use: WCAG 2.2 and the law, native HTML before ARIA, roles and accessible names, keyboard focus, contrast, hiding content correctly, accessible forms, live regions and how to test, each checked against Chrome's own accessibility tree.13Review QuestionsTest yourself: interview-style questions across the whole site, with worked answers and live, tested results.Added marks topics that weren’t in my original doc. Tick Learned on a topic to track what you’ve revised.