Flexbox Froggy
Practice CSS flexbox by moving frogs onto lily pads.
Community find. Not personally tested by Ash.
Open official siteWhat it does
Flexbox Froggy teaches CSS flexbox through a game: write layout rules to move frogs onto lily pads. The visual feedback connects a property to its effect immediately.
When to use it
You understand basic CSS and want to practice aligning and distributing items in one dimension.
What you need: A browser. A small HTML and CSS sandbox helps you transfer what you learn.
Try a small build
A suggested exercise to help you evaluate the resource.
- Play the early levels and change one property at a time. Notice which axis each alignment rule affects.
- Recreate a row of three navigation links in your own page using the same ideas.
- Change the available width and the text lengths. Explain which rules control alignment and which control wrapping.
You should end up with: A real flex layout you can adjust deliberately instead of by trial and error.
Keep in mind
The game simplifies the environment. Real interfaces also need content sizing, responsive behavior, and accessible markup.
Go to the source
Follow the official instructions for current setup steps and supported features.