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.
More in Learning Resources
Other learning resources you might not have heard of.
- BrilliantInteractive courses in math, science, and computer science through problem-solving.
- OverTheWireFree security wargames that teach hacking and Linux concepts through levelled challenges you solve over SSH, starting with the beginner-friendly Bandit game.
- VisuAlgoAnimated, step-by-step visualisations of data structures and algorithms, from sorting and linked lists to graphs and dynamic programming, with the ability to run each on your own input.
- Build ItMinecraft build catalog with searchable structures, style collections, material lists, hacks, and community posts covering houses, farms, statues, and themed designs.
- AnimagraffsEducational site publishing animated technical explainers on engines, aircraft, electronics, infrastructure, vehicles, watches, and other mechanical or scientific systems.
- Learn Git BranchingAn interactive visual sandbox that teaches Git operations by animating repository trees in real time as you type commands.