Flexbox Froggy
Flexbox Froggy
A frog sits on one edge of the pond, a lily pad on the other. You cannot build a bridge with your fingers, but one line of code does it: justify-content: flex-end;. The pond is a flex container and you are its only architect. 24 levels teach the main weapons of layout: justify-content, align-items, flex-direction, order, flex-flow.
Every task is a live CSS exercise: type a property into the editor and the frogs move at once. Match the pads and the Next button flashes; miss and click the underlined word in the text — a cheat-sheet of every value opens with an explanation. Progress is saved, and colorblind mode keeps the frogs distinguishable without a shade of doubt.
This is the legendary flexboxfroggy (MIT) — the game frontend developers worldwide learn from — now with a Russian interface, translated tasks and a touch palette of properties: on a phone you tap a property, then a value, like a real crib sheet. Stuck? The light bulb solves the level and shows you the answer.