Course 02 · Foundation
CSS
Everything you can see.
Selectors, the box model, layout with flexbox and grid, and motion that has a reason to move.
0 of 26 lessons finished — nothing yet
The syllabus
26 lessons,
in the order they build on each other.
How CSS is applied
Rules, declarations, where stylesheets go, and the order the browser resolves them in.
Selectors
Type, class, id, attribute, combinators, and the ones worth knowing beyond the basics.
The cascade and specificity
Why your rule lost: origin, layers, specificity, order, inheritance and !important.
The box model
Content, padding, border, margin, box-sizing, and why two margins become one.
Display and flow
block, inline, inline-block, flow-root, and what normal document flow actually does.
Units
px, rem, em, %, vh, vw, ch, fr — which one to reach for and why.
Colour
hex, rgb, hsl, oklch, alpha, colour-mix, currentColor and contrast that passes.
Typography
Families and fallbacks, loading webfonts, size, line height, measure and the shorthand.
Flexbox
One axis: direction, justify, align, wrap, gap, grow, shrink and basis.
Grid
Two axes: template columns, fr, repeat, minmax, auto-fit, areas and placement.
Layout patterns
Centring, holy grail, sidebar, card deck, sticky footer — solved once, correctly.
Position and stacking
relative, absolute, fixed, sticky, containing blocks, z-index and stacking contexts.
Overflow and scrolling
Clipping, scroll containers, scroll snap, and stopping the page scrolling sideways.
Backgrounds and borders
Gradients, multiple backgrounds, radius, outline, shadow and when to use each.
Responsive design
Mobile first, media queries, fluid type with clamp, and images that fit.
Container queries
Components that respond to their own width instead of the window.
Custom properties
Defining, scoping, theming, fallbacks and reading or writing them from JavaScript.
Transitions
What is animatable, duration, delay, easing and the properties that are cheap to move.
Keyframe animation
Keyframes, iteration, fill modes, and reduced motion as a first-class case.
Transforms
translate, scale, rotate, origin, 3D, perspective and preserve-3d.
Filters, blending and masks
blur, backdrop-filter, mix-blend-mode, clip-path and mask-image.
Pseudo-classes and elements
:hover, :focus-visible, :has, :is, :where, ::before, ::after and ::selection.
Styling forms
Inputs, selects, checkboxes, accent-color, validity states and focus that is visible.
Organising CSS
Naming, layers, resets, tokens, and keeping a stylesheet you can still change in a year.
Performance
What triggers layout, paint and composite, and the properties that stay off the main thread.
Debugging CSS
Computed styles, the box model panel, and finding the rule that actually won.
Keep going
The other courses.
HTML
The document, the elements and the meaning behind them. Everything else on the web is layered on top of this.
JavaScript
Values, functions, the DOM, events and asynchronous work — written so you can debug it later.
React
Components, state and effects — the model behind most interfaces built today.