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

9 problems in Distributing space

All topics Advanced Alignment Distributing space Gap Main axis vs cross axis Making a flex container Order Sizing The famous WTFs The min-width:auto floor Wrapping and the align-content trap

Easy Medium Hard|Teaching step Predict the render Build it Explain the wtf

#	title	topic	type	difficulty
1	Hold the terminal output at the bottom — in the order it was written	Distributing space	Build it	Easy
2	Send the destructive button to the far end of the toolbar	Distributing space	Build it	Easy
3	Pin both team badges to the edges and centre the clock	Distributing space	Build it	Easy
4	Push the close button to the far edge of the modal header	Distributing space	Build it	Easy
5	Move the whole dialog button row to the trailing edge	Distributing space	Build it	Easy
6	Give every toolbar button an equal share of space around it	Distributing space	Build it	Easy
7	The same bar, and now every gap has to be the same size	Distributing space	Build it	Easy
8	Spread the footer links from edge to edge	Distributing space	Build it	Easy
9	Spread the sidebar groups from top to bottom	Distributing space	Build it	Easy

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.