Full terms + a quick-tips bank in every section, and a clickable Index at the back. Tick a box when a term clicks — progress saves on this machine.
%,flex:1,vw). Fixed is hard pixels. Adaptive = fixed layouts that jump between set sizes.clamp(), instead of jumping at breakpoints.@media (max-width:900px){…}.@media(max-width:900px) collapses the shell to one column.min-width = mobile-first (add as it grows); max-width = desktop-first (override as it shrinks). Pick one direction and stay consistent.container-type on the parent.respond() runs on one to reveal the queue from the box's own height.matchMedia('(max-width:600px)').orientation, prefers-color-scheme, hover, pointer:coarse (finger vs mouse), prefers-reduced-motion.<meta name="viewport" content="width=device-width,initial-scale=1"> — without it, phones fake a desktop width.@media (min-width:600px) and (max-width:900px).pointer:coarse = touch device — bump target sizes.prefers-color-scheme:dark auto-themes for dark-mode users.flex:grow shrink basis — basis=start size, grow=greed for spare space, shrink=willingness to give it up.flex:3 1 290px beats seek flex:1 1 150px for the extra room.space-between, center, stretch…gap:8px 11px (row col).grid-template-columns:minmax(0,1fr) 300px.1fr column.repeat(auto-fit,minmax(240px,1fr)) flows columns by available width.fr = a fraction of free space. Named areas let you draw the layout as ASCII and re-arrange it per breakpoint.min-width:0 frees them so ellipsis works.columns:2 flows text/items into newspaper columns; break-inside:avoid stops items splitting.columns:2.flex:1 = flex:1 1 0 = "share space equally."flex-basis:auto respects content size; 0 ignores it.place-items:center = one-line perfect centering in Grid.margin-left:auto in flex pushes an item to the far end.gap beats margins for even spacing every time.50vw = half window width; vmin/vmax = smaller/larger side.max-width:96vw keeps it on-screen.100dvh.clamp(min,ideal,max) = fluid, never past the ends. The modern fluid-type/space one-liner.calc(100% - 48px). Everyday for "full width minus a fixed thing."ch ≈ width of a "0" — great for capping line length (max-width:65ch = readable measure).line-height:1.5 (no unit) scales with each element's font size — always prefer it over px.fit-content,min-content). Extrinsic = container-sized (100%,flex:1).aspect-ratio:16/9 keeps shape while scaling — video, posters, thumbnails.font-size in rem, spacing in rem, borders in px.max-width:65ch keeps paragraphs readable.font-size:clamp(1rem,2.5vw,1.5rem).100vh → 100dvh on mobile full-screens.ch/fit-content.cqw/cqi size to the container.overflow:hidden|auto|scroll — cut off, or allow scrolling, when content exceeds the box.overflow:hidden is what "clips down to the song + ▶".scroll-snap-type + scroll-snap-align = carousels/pagers that snap to each item. Pure CSS.overscroll-behavior:contain stops a scroll inside a panel from scrolling the page behind it.scrollbar-width:none + ::-webkit-scrollbar{display:none} scroll without a visible bar.fixed; the × is absolute in the corner.z-index sits on top — but only within its stacking context (a positioned/opacity/transform ancestor makes a new one).box-sizing:border-box makes width include padding+border. Set globally, forget the pain.mask:linear-gradient(...) feathers overflow prettily.content-visibility:auto skips rendering off-screen chunks — big wins on long pages.*{box-sizing:border-box} is line one of every project.min-height:0 lets a flex child actually scroll inside.z-index sparingly; fix stacking context first.position:fixed breaks inside transformed parents — gotcha.overscroll-behavior:contain on modals/drawers.mask instead of hard clips.srcset offers multiple resolutions; sizes tells the browser how big it'll render, so it downloads the right one.loading="lazy" defers off-screen images/iframes until they're near the viewport.aspect-ratio) so nothing pops.env(safe-area-inset-*) keeps content clear of notches and home bars.pointer-events:none lets clicks pass through decorative overlays to what's beneath.pointer-events:none so the native handle underneath still works.<picture>.loading="lazy" on below-the-fold media.prefers-reduced-motion for every animation.100vh under mobile URL bars — use dvh.