I’m a huge proponent of books, courses, videos, and tutorials to learn something new.
But sometimes it’s much easier to remember a new concept, especially when it comes to CSS or flexbox, through an online game.
Which is why I created this collection of fun online games to help you learn flexbox and CSS.
No more having to bookmark a cheatsheet or wasting your time searching for the correct syntax.
In no particular order, here are some of the free online sites I found.
1. Flexbox Froggy
Created by CodePip, Flexbox Froggy is one of the more popular games for learning CSS flexbox.
Your task is to bring all the frogs home to their lilypads by writing CSS code, with prompts and descriptions for different properties. With 24 levels, you’ll have a lot of fun challenging your flexbox knowledge.
2. Flexbox Defense
Get ready to battle with Flexbox Defense by moving your towers to prevent enemies from attacking.
Created by Channing Allen, Flexbox Defense has 12 levels to help you learn flexbox, with a helpful ? icon in the stylesheet to remind you how the property works.
3. Flexbox Zombies
A fun story-driven game, Flexbox Zombies with its delightful illustrations and surprisingly true-to-life sound affects will turn you into a flexbox expert with a crossbow.
Did I say crossbow? Yes.
It’s a fun game, free, but requires registration.
4. Grid Garden
Get started growing carrots by writing code in Grid Garden. Want your carrots to grow? Add water or get rid of weeds in your garden.
With 28 levels, you’ll soon become an expert at CSS grid.
5. CSS Diner
Get to know your CSS selectors with the 32 levels of CSS Diner. To advance to the next level, enter a CSS selector in the editor to select the items on the table.
Note: I had issues trying to read CSS Diner due to the low color contrast of gray text on black background and gray text on light gray background.
Wrapping Up
Have some fun learning CSS and flexbox with the online games I’ve recommended. If you know of others, share them in the comments.
And if you’re interested in more fun games, , check out CodePip for their JavaScript, HTML, and other CSS games (some require payment).
