CSS, with the layout showing
Forty steps through flexbox, twenty-two builds that fail unless several concepts are right at once, and the famous wtfs underneath — margin collapsing, stacking contexts, and the invisible wall inside every flex item. This is the one subject where the output IS the picture, so every problem is rendered rather than described.
Problems
14 problemsAll topicsAdvancedAlignmentDistributing spaceGapMain axis vs cross axisMaking a flex containerOrderSizingThe famous WTFsThe min-width:auto floorWrapping and the align-content trap
| # | title | topic | type | difficulty |
|---|---|---|---|---|
| 1 | height: 100% does nothing | The famous WTFs | Explain the wtf | Medium |
| 2 | Margin collapsing, and the margin that escapes | The famous WTFs | Explain the wtf | Hard |
| 3 | A float-only parent has no height | The famous WTFs | Explain the wtf | Medium |
| 4 | Block formatting contexts | The famous WTFs | Explain the wtf | Hard |
| 5 | z-index: 9999 doesn't work | The famous WTFs | Explain the wtf | Hard |
| 6 | Vertical centring before flexbox | The famous WTFs | Explain the wtf | Medium |
| 7 | The box does not grow for you | The famous WTFs | Explain the wtf | Medium |
| 8 | Percentage padding resolves against width — even vertically | The famous WTFs | Explain the wtf | Hard |
| 9 | The mystery gap under an image | The famous WTFs | Explain the wtf | Easy |
| 10 | The whitespace between inline-block elements | The famous WTFs | Explain the wtf | Easy |
| 11 | line-height: 1.5 vs 150% | The famous WTFs | Explain the wtf | Medium |
| 12 | em compounds; rem doesn't | The famous WTFs | Explain the wtf | Medium |
| 13 | !important is not a specificity boost | The famous WTFs | Explain the wtf | Medium |
| 14 | display: contents removes the box | The famous WTFs | Explain the wtf | Hard |
44 of 87 catalogue topics are authored, with 37 drills rehearsing them. Every one of them is judged: each carries a starter that has been shown to fail, at least two different correct answers that have been shown to pass, and a set of near-misses and cheats that have been shown to be caught. Nothing reaches this list until all of that holds.