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

12 problems in Alignment

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	Centre the brand mark in the masthead	Alignment	Build it	Easy
2	Centre the unread count inside its pill	Alignment	Build it	Easy
3	Centre the empty-state message in the results panel	Alignment	Build it	Easy
4	Centre the glyph in the round action button	Alignment	Build it	Easy
5	Sit the editor tools in the middle of the rail	Alignment	Build it	Easy
6	The same dialog footer, and now they have to sit at the bottom	Alignment	Build it	Easy
7	Centre the avatar while everything beside it stretches	Alignment	Build it	Easy
8	Drop the unread badge to the bottom of the mail row	Alignment	Build it	Easy
9	Let one card opt out of the stretching	Alignment	Build it	Easy
10	The same three tiers, now standing on the bottom edge	Alignment	Build it	Easy
11	Line the price up with its unit label on the text baseline	Alignment	Build it	Easy
12	Give the three pricing tiers the same height	Alignment	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.