Category · Basics
Appearance is rules, not a pile of random pixels
Selectors and the cascade, the box, text, flex, grid, position, responsive design, variables. Eight lessons so the page doesn't fall apart when you add a third block.
To the first lessonCheatsheet nowTopics, each as its own lesson
01Selectors and the cascadeDemoCSS doesn't "paint a tag". It finds nodes with a rule and argues with other rules.
10 min
02The box: margin, border, paddingEvery element is a rectangle. A "300px" width without border-box lies.
11 min
03Text, color, fontcolor is inherited. Font size isn't "magic 16". Contrast isn't a matter of taste.
10 min
04Flex: row and columnThe parent gets display:flex. Children line up. gap instead of margin crutches.
11 min
05Grid: columns and rowsA two-dimensional grid. repeat and minmax so you don't count pixels by hand.
11 min
06position and layersstatic is in the flow. relative anchors absolute. fixed is relative to the window. z-index doesn't work without a stacking context.
11 min
07Responsive: @mediaFirst a proper narrow column, then you widen it. Not the other way round — "hide it on mobile".
11 min
08Variables and layers--color on :root. Change the theme without hunting for 40 hex codes in the file.
10 min0/8 topics open. This is the course intro, not the whole course on one page.