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

79 problems

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
31	A float-only parent has no height	The famous WTFs	Explain the wtf	Medium
32	Block formatting contexts	The famous WTFs	Explain the wtf	Hard
33	z-index: 9999 doesn't work	The famous WTFs	Explain the wtf	Hard
34	Vertical centring before flexbox	The famous WTFs	Explain the wtf	Medium
35	The box does not grow for you	The famous WTFs	Explain the wtf	Medium
36	Percentage padding resolves against width — even vertically	The famous WTFs	Explain the wtf	Hard
37	The mystery gap under an image	The famous WTFs	Explain the wtf	Easy
38	The whitespace between inline-block elements	The famous WTFs	Explain the wtf	Easy
39	line-height: 1.5 vs 150%	The famous WTFs	Explain the wtf	Medium
40	em compounds; rem doesn't	The famous WTFs	Explain the wtf	Medium
41	!important is not a specificity boost	The famous WTFs	Explain the wtf	Medium
42	display: contents removes the box	The famous WTFs	Explain the wtf	Hard
43	Centre the brand mark in the masthead	Alignment	Build it	Easy
44	Centre the hero card — in a container that runs downwards	Main axis vs cross axis	Build it	Easy
45	Centre the unread count inside its pill	Alignment	Build it	Easy
46	Centre the empty-state message in the results panel	Alignment	Build it	Easy
47	Centre the glyph in the round action button	Alignment	Build it	Easy
48	Sit the editor tools in the middle of the rail	Alignment	Build it	Easy
49	Float the pinned tag to the front of the list	Order	Build it	Easy
50	Hold the terminal output at the bottom — in the order it was written	Distributing space	Build it	Easy
51	Newest activity at the top, list still hugging the top	Main axis vs cross axis	Build it	Easy
52	Flip your own chat messages to the right	Main axis vs cross axis	Build it	Easy
53	Reverse the wizard steps — and keep them on the left	Main axis vs cross axis	Build it	Easy
54	Drop the chips so they stack up from the floor	Main axis vs cross axis	Build it	Easy
55	The same dialog footer, and now they have to sit at the bottom	Alignment	Build it	Easy
56	Send the destructive button to the far end of the toolbar	Distributing space	Build it	Easy
57	Pin both team badges to the edges and centre the clock	Distributing space	Build it	Easy
58	Push the close button to the far edge of the modal header	Distributing space	Build it	Easy
59	Move the whole dialog button row to the trailing edge	Distributing space	Build it	Easy
60	Render Cancel before Save without touching the markup	Order	Build it	Easy

← Prev 1 2 3 Next →

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.