DEV Community

Cover image for 8 Games to learn CSS the fun way
Andreas
Andreas

Posted on • Updated on

CSS Game 8 Games to learn CSS the fun way

I must admit, I have trouble remembering things. Especially when it comes to CSS. The Flexbox Layout for example. The property justify-content of a flex container can have more than 12 different values where many can be combined with the keywords safe or unsafe. To read the complete guide to flexbox on CSS Tricks, you have to scroll through a two column page with a height of more than 20k pixels - and although the title implies it, they are not covering everything.

I recently stumbled upon a tower defense game teaching flexbox, which really...
Wait, a what?
Yes, it turned out, that there are quite a lot of games out there, helping to teach CSS. I collected some free CSS games that were useful for me and maybe can help you have some fun with CSS again!

1. Flexbox Defense

CSS Game Flexbox Defense

I was just mentioning this game. It covers the flex properties align-items, justify-content, flex-direction, align-self and order in 12 different levels. Especially the last 4 levels are really fun and a little bit tricky.

2. Flexbox Froggy

CSS Game Flexbox Froggy

This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and order in 24 different levels. Drop a comment, if you solved the last level 😅.

3. Grid Garden

CSS Game Grid Garden

In 28 different levels you can learn CSS Grid Layout. It covers the following grid properties: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows and grid-template.

4. CSS Diner

CSS Game CSS Diner

This is a little game about all kinds of CSS selectors. Try to master all 32 levels to call yourself a CSS selector expert - and hungry 😋.

5. Unfold

CSS Interactive Presentation Unfold

This isn't exactly a game but more an interactive presentation about CSS 3D Transforms. You may think this is boring but trust me: The animations are 🔥 and you wouldn't think this is possible with pure CSS.

6. Roadmap

CSS Game Roadmap

Skill and speed are required to solve this little game, only made with CSS and HTML. It is not directly teaching CSS, but looking into the source code teaches a lot about clip-path, transform and animation with @keyframes!
Drop a comment how many attempts you needed to win - I needed 8! 😅

7. Carnival

CSS Game Carnival

You only have 8 seconds to hit all targets! A nice little CSS game using checkboxes and CSS animations.

8. Tic-Tac-Toe

CSS Game Tic-Tac-Toe

And at last a classic. Tic-Tac-Toe as pure CSS game with 2 levels of difficulty also using checkboxes and CSS animations.

Bonus

And here comes the bonus part with recommendations from the comments:

9. Flexbox Zombies

CSS Game Flexbox Zombies

This is a storyline driven training course where you learn to use Flexbox and a crossbow to hunt zombies. A registration is required.

10. Service Workies

CSS Game Service Workies

In this adventure you'll learn how to avoid the PWA pitfalls. You'll level up your skills and thrive with Service Workers. Perhaps even slay the savage beasts that have plagued the poor village workies for centuries! A registration is required.

11. Grid Critters

CSS Game Grid Critters

Your journey to master CSS Grid begins on the mysterious planet Grideros. Your mission is to use your ship's powerful Grid tool to save alien critters from extinction. A registration is required.

12. CSSBattle

CSS Game CSSBattle

In this online CSS Code Golfing game players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

Wrapping it up

Doesn't matter if you're a beginner or an expert - I hope you had fun playing some games and at the same time learning something about CSS! Especially on Codepen you can find a lot of awesome games people created just using HTML and CSS.

If you know other great CSS learning games, let everyone know in the comments below.


Edited: 2nd July 2021 (fix flexbox zombies link, add cssbattle)
Edited: 29th October 2019 (add 3 bonus games from Dave Geddes recommended in a comment)
Edited: 28th October 2019 (switch from wrong flexbox example justify-items to justify-content)
Originally published: 24th October 2019 on Medium

Discussion (60)

Collapse
tomlienard profile image
Tom Lienard

Yop, solved the last level of Flexbox Froggy, very interesting game !

Here is the solution I found if you want to try :

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: center;
Enter fullscreen mode Exit fullscreen mode
Collapse
devmount profile image
Andreas Author

Awesome, congrats! 👏🏻

Can you recheck your solution? I think you have a small mistake - align-content needs to have the value space-between for me 😇

Collapse
tomlienard profile image
Tom Lienard

Oh yup you're right, mistake while copying, sorry for this ^

Collapse
elijahlynn profile image
Elijah Lynn

Might want to prefix your post with SPOILER:.

Collapse
tretuna profile image
Tre Tuna

How could a list of CSS games be complete without Dave Geddes's creations?

Flexbox Zombies (free) - mastery.games/p/flexbox-zombies
Grid Critters ($179 and worth it) - gridcritters.com/

He also has another free game on Service Workers that's partly available as he's developing it. serviceworkies.com/

Collapse
esteecodes profile image
Esther White • Edited

$179 or even the reduced price of $99 is way too expensive for a game of this type... It is supposed to be fun and educational, this price wipes out both those qualities at the same time...

Collapse
devmount profile image
Andreas Author

Yes, agree with you here. At the time of writing this article, those games were free.

Collapse
devmount profile image
Andreas Author

Thank you for these recommendations! Didn't know about Dave Geddes's games until now! I added a bonus section with these games to this post ✔️

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
alvaromontoro profile image
Alvaro Montoro

Yay! I did one of those! :D

Collapse
devmount profile image
Andreas Author

Yes! How awesome that you're on dev.to too! Thank you for building inspiring things 💪🏻!

Collapse
alvaromontoro profile image
Alvaro Montoro

If you liked the Tic-Tac-Toe, there some more CSS games here.

Collapse
invot profile image
invot

I love each and every one of these. Having an instinctual understanding of "the grid" is what will ultimately ensure your sanity.

Now if only we can go about gamifying SASS/LESS concepts. I wish there were more functions/mixins in my stylesheets.

Collapse
devmount profile image
Andreas Author

Awesome idea! It was the same for me with SASS. Make sure to look at this SASS in 15 minutes tutorial - it shows all core concepts with examples and with a little bit of practice, mixins will quickly become demystified :)

Collapse
maurisioluccef profile image
Mauritsio Luffer

Very interesting! I start practicing CSS for my gaming sites. Now I am doing it for Play Ojo games at my site online. Actually, I am surprised how many new options it can open.

Collapse
devmount profile image
Andreas Author

Totally true! CSS is by now much more powerful than it seems. Great work, keep it up!

Collapse
esteecodes profile image
Esther White

Yes I just solved Flexbox Froggy lvl 24, I ended up using 3 lines and that's how I learned that properties can be grouped in flex-flow. Really fun game can't wait to try thew rest :)

Collapse
devmount profile image
Andreas Author

Well done! 👏🏻
(and sorry for the late reply - didn't see any notification of your comment)

Collapse
vagoel profile image
Varun

Wonderful.Fun way to learn CSS

Collapse
pypaut profile image
Geoffrey

This post spawned just when I needed it. Will totally start learning CSS with this.
Thank you!

Collapse
devmount profile image
Andreas Author • Edited

I'm so glad to hear this! If you're starting with CSS, game 4 (the CSS Diner) would be a good choice, for selectors are one of the most basic things. I hope you enjoy your CSS journey!

Collapse
juliannicholls profile image
Julian Nicholls

I'd already played the Flexbox Froggy and Grid Garden, both excellent.
I just played Flexbox Defense and managed to score 100 on every level, albeit on a second attempt on one of them.

Collapse
devmount profile image
Andreas Author

Nice work, congrats! 🎉

Collapse
chinchang profile image
Kushagra Gour • Edited

Hey Andreas! You might want to include CSSBattle in this amazing list - cssbattle.dev
Do check it out!

Collapse
devmount profile image
Andreas Author

Awesome ressource! Thanks for this addition 👏🏻

Collapse
chinchang profile image
Kushagra Gour

Thanks for adding CSSBAttle! One small thing - the link of the website is wrong :) It should be cssbattle.dev

Thread Thread
devmount profile image
Andreas Author

My fault, should be fixed now! Thanks.

Collapse
molecula451 profile image
Paul

CSS Diner Great Resource to test some skills.

Collapse
devmount profile image
Andreas Author

That's true - especially for the [attribute...] selectors! A very good exercise to distinguish between [attribute^="value"], [attribute$="value"] and [attribute*="value"] 😅

Collapse
gamedvacom profile image
GameDVA

These css games really remind me of childhood even though it came into being later and practically based on iframe. Currently, android games are much more popular, there are many websites that offer free games such as gamedva.com

Collapse
biswaviraj profile image
Biswajeet Das

I've played the first 3 games.
The carnival one seems interesting I will give it a try

Collapse
devmount profile image
Andreas Author

Awesome! Took me quite some time to finish the Grid Garden 😅

Collapse
glod999 profile image
Galante

Fun stuff! I kinda lost connection with CSS but looks like you awakened my interest. I'll need it at this BetWinner project soon anyway.

Collapse
devmount profile image
Andreas Author

Glad I could bring some interest in CSS back. Good luck with your project!

Collapse
elijahlynn profile image
Elijah Lynn • Edited

Flexbox Zombies link is broken/404. Here is working link, and it is still free fwiw > flexboxzombies.com/ > mastery.games/flexboxzombies/.

Collapse
devmount profile image
Andreas Author

Good catch, thank you for this hint! I fixed it 🔨👍🏻

Collapse
ikmrgrv profile image
Kumar Gaurav

CSS diner is the most useful game for me as I am in-charge of training new batch at our company... I will use it to teach CSS to the new batch now-onwards.

Collapse
devmount profile image
Andreas Author

So glad it's useful for you! And thanks for sharing knowledge with newcomers - keep it up!

Collapse
haris_virk_2aa9f18a04921b profile image
Haris Virk • Edited

Thanks for sharing a beautiful piece of information. All CCS games are great and lots of fun, Feel free to check thexploretech.com/free-sports-stre...

Collapse
devmount profile image
Andreas Author

You're welcome.

Collapse
stephanie profile image
Stephanie Handsteiner • Edited

I first-tried the Roadmap thingy, using the MBPs touchpad might've helped a little with that. 😁

Collapse
devmount profile image
Andreas Author

Haha nice one! It surely depends on the input device 🕹️

Collapse
unodwicho profile image
UnoDwicho

Just in case, in the first paragraph you're talking about justify-items which is ignored when used on a Flexbox container (as per the MDN doc). Maybe you were talking about justify-content?

Collapse
devmount profile image
Andreas Author

My fault, you're totally right! Updated it with justify-content - thanks for pointing out!

Collapse
trafalgarlaw profile image
Roshan Khausiya

Great article I played them and enjoyed started coding too anyway
and dont forget to check Thehimalayantime

Collapse
adnantanveer10 profile image
Adnan Tanveer

Check out this this android game: dapks.com/afk-arena-mod-apk/
I would like someone to let me know how this game would be created on kotlin.
Would really appreciate the help!

Collapse
pratik11939 profile image
Pratik11939

Dont forget to check Techtrickers

Collapse
karinliegmann profile image
Karin Liegmann

Thank you for the great article!
I noticed that the link to Flexbox Zombies is outdated. The new link is as follows:
mastery.games/flexboxzombies/

Collapse
devmount profile image
Andreas Author

You're right, thank you for this hint! I fixed it 🔨👍🏻

Collapse
pratik11939 profile image
Pratik11939

don't forget to check techtrickers.com