What is Flexbox Froggy?
Flexbox Froggy is a small coding game for learning CSS flexbox, the part of CSS that lines up and spaces items on a web page. Each level shows a pond with frogs and lily pads, and you type one or two lines of CSS to move every frog onto the lily pad of its own colour. When the code is right, the frogs hop home and you move on.
There are 24 levels that cover justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow and align-content. Each level explains the property it uses, and later levels mix them together. The game is made by Codepip, which released it in 2015 as its first game, and the code is open source on GitHub. It is translated into dozens of languages.
Main Features
- 24 short levels that teach CSS flexbox step by step
- Type real CSS and see the frogs move right away
- Covers justify-content, align-items, flex-direction, order, flex-wrap, align-content and more
- A short explanation of each property on every level
- Beginner, Intermediate and Expert difficulty settings
- A colourblind mode
- Available in dozens of languages
- Open source code on GitHub
How to Get Started with Flexbox Froggy
- Open flexboxfroggy.com in your browser.
- Read the instructions for level 1 on the left.
- Type the CSS property and value into the code box.
- Watch the frogs move, then press Next when they reach their lily pads.
- Work through all 24 levels, or pick any level from the level menu.
Flexbox Froggy Pricing
Flexbox Froggy is free to play in the browser with no account. Its maker Codepip also sells a Pro membership for other games on codepip.com, including a separate game called Flexbox Froggy Pro, but the original Flexbox Froggy stays free.
Who Should Use It?
- Beginners learning CSS layout
- Students in web design and coding classes
- Teachers who want a fun flexbox exercise
- Developers who want a quick flexbox refresher
- Puzzle fans curious about coding
Flexbox Froggy Alternatives
- freeCodeCamp is a free coding course with lessons on HTML, CSS and JavaScript.
- The Odin Project is a free web development course that walks you through building real projects.
- CodePen lets you try out CSS layouts in your browser and see the result live.
Frequently Asked Questions
Is Flexbox Froggy free?
Yes. Flexbox Froggy is free to play in your browser and does not need an account.
How many levels does Flexbox Froggy have?
It has 24 levels, and you can jump to any of them from the level menu.
Do I need to know CSS to play?
No. It is made for beginners. Knowing the basics of CSS helps, but each level explains what you need.
Who made Flexbox Froggy?
It was made by Codepip, a company that makes games for learning to code. It was their first game, released in 2015.
What is Flexbox Froggy Pro?
It is a separate paid game on codepip.com with endless practice levels for people who have already finished Flexbox Froggy.