How CSS decides the winner — origin, importance, layers, specificity, and order — in human terms.

beginner

Flex container vs items, main vs cross axis, grow/shrink/basis, alignment, wrapping, and the bugs that show up in real layouts.

beginner

Content, padding, border, margin, box-sizing, and how the math actually works for layout and overflow.

beginner

Why border-box makes width include padding and border, the global reset pattern, and the layout bugs content-box still causes.

beginner

How display changes layout participation — block vs inline vs inline-block, and when flex/grid formatting contexts take over.

beginner

justify-content, align-items, align-self, align-content — main vs cross axis, wrapping lines, and absolute positioning inside flex.

intermediate

How flex items resolve size — flex-basis first, then grow into free space and shrink on deficit, plus min-width:auto overflow fixes.

intermediate

Two-dimensional layout with tracks, gaps, placement, fr units, and when grid beats flex for page scaffolding.

beginner

Name grid regions with grid-template-areas — ascii layouts, grid-area placement, responsive rearrangements without absolute positioning.

intermediate

auto-fit collapses empty tracks; auto-fill keeps them. Use both with minmax for responsive card grids without media-query soup.

intermediate

Grid track sizing with fr free space and minmax() floors/ceilings — equal columns, fluid sidebars, and overflow-safe patterns.

intermediate

Containing blocks, stacking, sticky constraints, and when position is the right tool vs flex/grid.

beginner

Why z-index:9999 fails — stacking contexts from opacity, transform, position, and isolation, and how to debug overlay fights.

intermediate

Count IDs, classes, and elements correctly — :is/:where/:not, inline styles, !important, and how layers change who actually wins.

beginner

Use @layer to order reset, base, components, and utilities so specificity wars lose — layer priority, unlayered CSS, and !important.

intermediate

CSS variables that cascade and inherit — define tokens, theme at runtime, fall back safely, and avoid the invalid-at-computed-value trap.

beginner

Build light/dark and brand themes with CSS variables — token layers, data-theme switches, component contracts, and FOUC avoidance.

intermediate

Modern @media — mobile-first ranges, range syntax, preference queries, and when container queries replace viewport breakpoints.

beginner

Style components from their container size with @container — name containment, units like cqi, and when media queries still win.

intermediate

Use clamp(min, preferred, max) for fluid type and spacing — viewport units, the linear equation pattern, and accessibility floors.

intermediate

CSS techniques for responsive images — max-width, object-fit, art-direction hooks, and how CSS pairs with srcset and sizes.

intermediate

Crop and scale media with object-fit, lock boxes with aspect-ratio, and stop layout shift when images load.

beginner

Animate property changes with transition — timing, delay, which properties to animate, and how transitions differ from keyframe animations.

beginner

Define @keyframes, control duration, easing, iteration, and fill-mode — when to animate, what to animate, and reduced-motion defaults.

intermediate

Why transform and opacity animate smoothly — compositor layers, paint vs layout, and when filters and will-change reverse the win.

intermediate

will-change hints the browser to prepare layers — use sparingly, set only before animation, and remove after to avoid memory bloat.

advanced

Interactive pseudo-classes — :hover, :focus, :focus-visible, :active, :focus-within — with keyboard-safe patterns and touch caveats.

beginner

::before and ::after generate children for decoration — required content/display, accessibility limits, and practical UI patterns.

beginner

Selector engines that cut repetition — :is and :where for lists, specificity traps, and :has for parent/sibling state without JS.

intermediate

Attribute selectors, combinators, and sibling selectors — match states and structure without extra classes when the DOM already has the signal.

beginner

overflow, scroll containers, and scroll-snap for carousels and section snaps — touch behavior, accessibility, and nested scroll traps.

intermediate

position: sticky for headers and side rails — containing blocks, overflow traps, top offsets, and stacking with page chrome.

intermediate

margin-inline, padding-block, inset-inline-start — write layouts that flip with writing-mode and direction instead of hard-coded left/right.

intermediate

direction, writing-mode, and text-orientation — vertical text, RTL layout, and why logical properties beat left/right hardcoding.

advanced

One-dimensional flex vs two-dimensional grid — decision rules for navs, card grids, page shells, and nested layouts.

beginner

Prefer gap in flex/grid for inter-item spacing — no collapse surprises, no last-child hacks, and when margin is still the right tool.

beginner

Center with flex, grid, margin auto, and inset — horizontal, vertical, and both — plus the absolute-position and text-align traps.

beginner

CSS multi-column (columns, column-gap, break-inside) for article flows — not card grids — and how to avoid awkward splits.

intermediate

filter vs backdrop-filter — blur, saturate, and glass effects, stacking costs, and accessibility pitfalls for frosted UI.

intermediate

mix-blend-mode vs background-blend-mode — how pixels combine, isolation, and the stacking/readability traps in product UI.

advanced

clip-path for shapes and mask-image for alpha/luminance cutouts — differences, animation notes, and accessibility caveats.

advanced

Design @media print — hide chrome, expand links, control page breaks, and force ink-friendly colors for usable paper and PDF output.

intermediate

Honor prefers-reduced-motion — cut decorative animation, keep essential feedback, and wire CSS and JS motion to one preference.

beginner

Respect light/dark OS preferences with prefers-color-scheme, token overrides, color-scheme, and manual theme toggles that stay in sync.

beginner

Build tints, shades, and alpha variants with color-mix() and relative color syntax — tokens that stay in sync without preprocessors.

advanced

Native CSS nesting — & parent selector, nested rules and media queries, specificity behavior, and when not to nest five levels deep.

intermediate

Progressively enhance with @supports — detect properties, selectors, and font tech, and structure fallbacks that still look intentional.

intermediate

Reset wipes UA styles, normalize preserves useful defaults consistently, layers order both — pick a base strategy without fighting components.

intermediate

Block, Element, Modifier naming for CSS — how it limits specificity wars, what to name, and when utility or CSS modules beat strict BEM.

beginner

Utility-first (Tailwind-style) pros and cons — speed, consistency, HTML noise, design-token discipline, and when components still win.

intermediate

ITCSS inverted triangle — settings through utilities — how layer order reduces specificity wars in large stylesheets.

advanced

grid-template-rows/columns: subgrid — inherit parent tracks so nested cards and forms share one alignment system.

advanced

CSS scroll-driven animations — animation-timeline with scroll() and view(), progress-linked effects, support caveats, and reduced motion.

advanced

CSS view transitions — ::view-transition pseudo-tree, view-transition-name, default crossfades, and reduced-motion-safe page morphs.

advanced

Use accent-color to theme native checkboxes, radios, ranges, and progress — what it paints, what it skips, and when to custom-style instead.

beginner

Keep focus visible with outline or box-shadow — why border shifts layout, :focus-visible patterns, and never outline: none alone.

beginner