Flexbox Froggy
flexboxfroggy.com
A free browser game that teaches CSS Flexbox by having you write real CSS properties to position frogs onto lily pads — covering all 24 flexbox properties across progressively harder levels.
Why it is useful
Converts flexbox from abstract MDN documentation into muscle memory. The game format means you write actual CSS and see the result immediately, which is a better learning loop than reading docs. Most developers learn flexbox by copying Stack Overflow — this gives you the underlying mental model so you can write it from scratch. Takes about 30 minutes to complete and covers everything.