Allocate space, align components, and contain long content. Each lesson makes one concrete CSS decision and names its verification cost.
Lessons
- CSS display and normal flow: choose a formatting context deliberately
- CSS flexbox sizing: make control rows wrap without clipping
- CSS grid tracks: reserve a sidebar without letting content widen the page
- CSS positioning: keep sticky controls inside their scroll boundary
- CSS overflow: contain long data without losing controls
- CSS stacking contexts: debug overlays without arbitrary z-index inflation
Continue
Common Mistakes
- Do not carry a sample rule into production without checking its containing markup.
- Do not skip keyboard, zoom, or long-content checks when a visual result looks correct.
More applied lessons
- CSS subgrid: align nested card content to shared tracks
- CSS alignment and gap: distribute space inside the correct box
- CSS intrinsic sizing: let content set limits without forcing overflow
- CSS scroll snap: align cards without trapping the reader
- CSS content-visibility: skip offscreen rendering carefully
- CSS multi-column layout: fragment long text without breaking meaning
- CSS overscroll behavior: stop unwanted scroll chaining