Flexbox Froggy
Learn CSS flexbox by guiding frogs to their lily pads.
Open-source project "Flexbox Froggy" by Thomas Park (Codepip), used under the MIT license. Source code
Runs in your browser. Nothing you enter is sent or stored.
How to use Flexbox Froggy
- Read the level's instructions.
- Type CSS in the editor to move the frogs onto matching lily pads.
- Clear all 24 levels to master flexbox.
Frequently asked questions
Do I need to know CSS?
No. Each level explains the property you need.
Who made it?
Thomas Park of Codepip, open source under the MIT License.
Is Flexbox Froggy free?
Yes. Flexbox Froggy is free to use with no sign-up and no watermark.
Is my information saved or sent anywhere?
No. Everything is calculated in your browser. Nothing you enter is sent to a server or stored.
Does it work on my phone?
Yes. It works in any modern browser on Windows, Mac, Linux, Android and iPhone. Very large files may be slow on older phones.