The engine, then the API — opinionated CSS for Python devs

Specificity (counted not vibed), inheritance, !important is a smell, the box model interactively, box-sizing: border-box and why every project enables it.

1. 1.Where styles come from: the three origins6m · 50xpFREE
2. 2.Specificity: counted, not vibed9m · 100xpFREE
3. 3.Inheritance: which properties trickle down7m · 75xpFREE
4. 4.!important: when it's a smell, when it's right6m · 75xpFREE
5. 5.The box model: content + padding + border + margin8m · 100xpFREE
6. 6.box-sizing: border-box (and why every project enables it)8m · 100xpFREE
7. 7.Margin collapse (and how to avoid surprise)7m · 75xpFREE
8. 8.display: block, inline, inline-block7m · 75xpFREE
9. 9.Custom properties (CSS variables) — the new constants8m · 100xpFREE
10. 10.Module capstone: cascade + box + variables in one card14m · 200xpFREE

Normal flow → inline-block → float (briefly) → flexbox (8 lessons) → grid (only AFTER flexbox is muscle memory).

1. 1.Normal flow: how the browser stacks elements by default5m · 60xp🔒
2. 2.Float: what it was for, why we don't use it anymore6m · 60xp🔒
3. 3.Flexbox: display: flex on the parent8m · 100xp🔒
4. 4.flex-direction: row vs column6m · 75xp🔒
5. 5.justify-content: main-axis distribution8m · 100xp🔒
6. 6.align-items: cross-axis alignment6m · 75xp🔒
7. 7.flex-wrap: when items overflow6m · 75xp🔒
8. 8.gap: clean spacing without margin hacks5m · 75xp🔒
9. 9.flex-grow, flex-shrink, flex-basis (on children)8m · 100xp🔒
10. 10.order: visual reordering without DOM changes5m · 75xp🔒
11. 11.align-self: per-child override5m · 75xp🔒
12. 12.Pattern: margin-left auto for 'push to the right'5m · 75xp🔒
13. 13.Flexbox patterns: sidebar + main + card row8m · 100xp🔒
14. 14.Module capstone: full responsive layout14m · 200xp🔒

grid-template-areas, auto-fit + minmax, subgrid, place-items, intrinsic sizing. Recreates dashboard layouts in 20 lines vs 200 lines of Bootstrap.

1. 1.Why Grid: 2D layout vs flex's 1D7m · 75xp🔒
2. 2.grid-template-columns / rows: explicit grid7m · 75xp🔒
3. 3.The fr unit: fractional space6m · 75xp🔒
4. 4.repeat(): clean shorthand for repeated tracks6m · 75xp🔒
5. 5.Placing items: grid-column / grid-row + span8m · 100xp🔒
6. 6.grid-template-areas: named regions9m · 100xp🔒
7. 7.minmax(): floors and ceilings for tracks6m · 75xp🔒
8. 8.auto-fit + minmax: responsive grids, zero media queries9m · 125xp🔒
9. 9.place-items: centering, shorthand5m · 75xp🔒
10. 10.subgrid: child grids that align with parent7m · 100xp🔒
11. 11.Intrinsic sizing: min-content, max-content, auto6m · 75xp🔒
12. 12.Module capstone: dashboard in 20 lines14m · 200xp🔒

font-family stacks, variable fonts, clamp() for fluid type, line-height rhythm, text-wrap: balance, modular scales, font-display, subsetting.

1. 1.font-family stacks: system-ui first6m · 75xp🔒
2. 2.Sizing units: px vs em vs rem6m · 75xp🔒
3. 3.clamp(): fluid type without breakpoints7m · 100xp🔒
4. 4.line-height rhythm: the number that fixes 80% of bad type6m · 75xp🔒
5. 5.Variable fonts: one file, infinite weights7m · 100xp🔒
6. 6.text-wrap: balance / pretty (the 2024 game-changers)6m · 100xp🔒
7. 7.Modular scale: typography that feels designed7m · 100xp🔒
8. 8.letter-spacing & word-spacing (tracking)5m · 60xp🔒
9. 9.Measure: max-width for readable line lengths5m · 75xp🔒
10. 10.Module capstone: typography-first article page14m · 200xp🔒

OKLCH (the color space modern designers ship), color-mix(), custom properties as a design-token API, dark mode without flicker, high-contrast mode. Plus the 2024 stack: display-p3 wide-gamut, light-dark(), color-gamut progressive enhancement.

1. 1.Color formats: hex, rgb, hsl, oklch7m · 75xp🔒
2. 2.Building a color palette with OKLCH8m · 100xp🔒
3. 3.color-mix(): derive shades from one source7m · 100xp🔒
4. 4.Design tokens: --primary, --bg, --text, --border6m · 75xp🔒
5. 5.Dark mode via prefers-color-scheme7m · 100xp🔒
6. 6.Manual theme switch via data-attribute7m · 100xp🔒
7. 7.Contrast for accessibility (WCAG AA recap)6m · 75xp🔒
8. 8.Gradients in 2026: oklch interpolation6m · 75xp🔒
9. 9.Box-shadow as a theme primitive6m · 75xp🔒
10. 10.color-scheme + scrollbar colors5m · 60xp🔒
11. 11.Wide-gamut color: P3 displays + @media5m · 75xp🔒
12. 12.Module capstone: tokenized themed component14m · 200xp🔒
13. 13.display-p3: wide-gamut color for the screen that can show it8m · 100xp🔒
14. 14.light-dark(): one color, two themes, zero @media8m · 100xp🔒
15. 15.@media (color-gamut): progressive enhancement for vivid screens7m · 75xp🔒

Container queries (@container), intrinsic layouts, clamp() everywhere, aspect-ratio, min()/max(), why 1-2 breakpoints not 6 in 2026. Ends with the first 2-step 'Repro the Bug Report' lesson.

1. 1.Why @media falls short in 20266m · 75xp🔒
2. 2.@container: query the parent, not the viewport8m · 100xp🔒
3. 3.clamp() everywhere: fluid sizing without media queries6m · 75xp🔒
4. 4.aspect-ratio: stop the height calculations6m · 75xp🔒
5. 5.min() and max(): bounds in one line5m · 75xp🔒
6. 6.Modern viewport units: dvh, svh, lvh6m · 75xp🔒
7. 7.@media (hover: hover): only hover on devices that hover6m · 75xp🔒
8. 8.Auto-fit grid: the responsive card row without breakpoints7m · 100xp🔒
9. 9.Logical properties: margin-inline, padding-block6m · 75xp🔒
10. 10.RTL support: dir='rtl' + minimal CSS6m · 75xp🔒
11. 11.The one-breakpoint approach6m · 75xp🔒
12. 12.Module capstone: dashboard responsive without breakpoint hell14m · 200xp🔒
13. 13.Repro the bug report: long URLs blowing out a card12m · 150xp🔒

transition vs animation, easing, transform/opacity for compositor-only redraws, scroll-driven animations, view-transitions API, prefers-reduced-motion enforcement.

1. 1.transition vs animation: when to use each6m · 75xp🔒
2. 2.Easing functions: ease-out, cubic-bezier, spring6m · 75xp🔒
3. 3.Compositor-only properties: transform, opacity, filter7m · 100xp🔒
4. 4.@keyframes: declaring multi-step animations6m · 75xp🔒
5. 5.Page entrance animations: fade + slide6m · 75xp🔒
6. 6.Loading spinners and skeletons6m · 75xp🔒
7. 7.Scroll-driven animations (2024+)8m · 100xp🔒
8. 8.View transitions: cross-page motion8m · 100xp🔒
9. 9.@starting-style: animate from initial6m · 75xp🔒
10. 10.Hover and focus polish5m · 60xp🔒
11. 11.prefers-reduced-motion enforcement5m · 75xp🔒
12. 12.Module capstone: animated landing card14m · 200xp🔒

Cascade layers (@layer), nesting, :has(), logical properties (margin-inline-start), CSS custom properties as a component API, @scope, the case against CSS-in-JS.

1. 1.@layer: explicit cascade priority7m · 100xp🔒
2. 2.CSS nesting: SCSS-like but native (2023+)6m · 75xp🔒
3. 3.:has() — the parent selector finally arrives7m · 100xp🔒
4. 4.:is() and :where() — selector list helpers6m · 75xp🔒
5. 5.Custom properties as a component API8m · 100xp🔒
6. 6.@scope — declarative local styling7m · 100xp🔒
7. 7.Utility-first (Tailwind primer revisited)6m · 75xp🔒
8. 8.BEM and the post-BEM era6m · 75xp🔒
9. 9.CSS-in-JS: the case against (for a Python dev)6m · 75xp🔒
10. 10.Component file structure for 20265m · 75xp🔒
11. 11.Migrating legacy CSS without breaking things6m · 75xp🔒
12. 12.Module capstone: design system primitive (Button + Card)14m · 200xp🔒

(1) Pixel-match Stripe pricing from screenshot. (2) Build a 20-component design-token library reused by Track C. (3) Audit + refactor a Bootstrap 3 era page into 2026 CSS.

1. 1.Capstone 1: Design-token library14m · 200xp🔒
2. 2.Capstone 2: Button component with 6 variants14m · 200xp🔒
3. 3.Capstone 3: Card component (default, featured, with image)14m · 200xp🔒
4. 4.Capstone 4: Form component (input + label + error)14m · 200xp🔒
5. 5.Capstone 5: Navigation header (responsive)14m · 200xp🔒
6. 6.Capstone 6: Modal/Dialog component14m · 200xp🔒
7. 7.Capstone 7: Pricing page (Stripe-style)16m · 250xp🔒
8. 8.Capstone 8: Hero section with entrance animation14m · 200xp🔒
9. 9.Capstone 9: Footer (4-column responsive)10m · 150xp🔒
10. 10.Capstone 10: Legacy → modern CSS refactor14m · 200xp🔒
11. 11.Capstone 11: Full landing page — combine everything20m · 300xp🔒