Learning CSS can be quite a challenge. There are no shortcuts, and you will have to get your hands dirty and dive into the magical world of CSS.
But! There are some fun ways to learn this monster called CSS. This article will highlight ten amazing games you can play to learn CSS.
1. Flexbox froggy
Flexbox froggy was one of the first CSS-solving games I've played, and I love it.
It's a super fun way to learn flexbox positions across the board.
You use CSS flex to place the frog on the correct Lilly.
It has 24 levels, and you can quickly see the results.
2. Flexbox defense
Another super cool CSS game to learn flex is flexbox defense. In this game, you have to move around towers to defend a road from being attacked.
It has 12 levels, and it's pretty cool to see multiple answers can be correct.
3. Knights of the Flexbox Table
If you love Tailwind, this one is amazing!
It uses tailwind classes to teach you to flex options.
A super combination if you ask me, and it's well set up.
There are a total of 18 levels that you can clear.
Play Knights of the Flexbox table
4. Flex Box adventure
Another game much like Flexbox froggy, but with a different setup.
It also has some other challenges and hints from which you might learn a lot.
It has a total of 24 levels you can clear.
5. Flexbox zombies
This game is super well set up in graphics!
I am blown away by how cool the storyline is.
It has 12 chapters, with each up to 25 levels. It usually costs money to play this one, but it seems free forever.
6. Grid garden
Grid garden is a super fun way to learn CSS Grid. You have to use grid layouts to ensure all the carrots get water.
It has 28 levels to practice a lot of CSS grid options!
7. Grid attack
This game is by the same creator as Flexbox adventure and super well-executed like the other game!
You have to use CSS Grid to change the land so the demons will not survive.
It comes with 80 levels, which gives you many options and time to learn CSS grid in a super fun way.
8. CSS Diner
This game is actually really interesting!
It's a game to learn about CSS selectors and some modern ones.
The game has 32 levels and entertaining animations to showcase what selector you should target.
9. Guess CSS
This game is very similar to CSS Diner, but you have to guess which selector matches the result you see.
This is an excellent concept as you always get to see the perfect result.
It's also not limited to specific CSS parts and includes many different ones.
10. CSS Speedrun
In this game, you have to write specific CSS Selectors to target5 the highlighted elements.
However, you have to do it as quickly as possible, making this a great challenge for those who like an extra level of hardness to their games.
The game comes with ten levels, but you can play more often and improve your speed.
Bonus
Once you've mastered these games, you can enter some CSS challenges and battles to showcase all you learned.
Some great website for that are:
All these websites have a particular example you have to recreate most efficiently most of the time.
There are some excellent communities around these websites, and you'll have fun solving them.
Let me know what your favorite CSS game is 🙌.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (31)
Well I was zipping through flexbox froggy all proud of myself...then level 24 and honestly, it took my like 5 minutes lol!
Thanks for the annoying reminder that I need to spend more time practicing my CSS skills! 🤣
Lol I think that level is famous for doing that 😂
There are whole reddit posts about it
This games are awesome no dought but real learning is very different. Games can't replace it :)
peace.
atulcodex
Not sure I agree, it's a different way of learning and it really depends on what works for a person.
Oh man, you are a knowledgeable person :)
Hey DEV, nice 💡content, thanks for sharing it🙏🏻!
Glad you liked it 💖
Yes, I loved it!
Awesome 💯
Happy you enjoyed this 💖
These look really cool!
They are, and super fun
This was really fun, had a nice afternoon playing some guilt-free games!
Nice! Glad you enjoyed them
Thanks for sharing these amazing websites 💖🙏🏻
Super happy you like the article, did you get a chance to try some of them?
would it be possible to get the code for some of these games as I enjoy rebuilding things to practise typing my code
Not sure, some are build as a paid system but you might be able to find some of the smaller ones.
That would be great if you could thanks
I know Ania does a lot of games, you might find it interesting to follow these.
youtube.com/watch?v=lhNdUVh3qCc
Good day! Very interesting. Thank you.
So interesting to learn CSS. Thanks for sharing.
It's a fun way of learning it, glad you enjoyed it 🙌
Some are fairly new, even if you know these concepts they are fun to play one evening 🙌
Thank you Chris Bongers. It's awesome
Thanks, glad you enjoyed it
Thumbs up
I think these layout games are really fun - as games.
But I've talked to hundreds of developers who have played them a lot, but haven't had enough real-world experience to really get how to use the concepts in their own projects. I'm sure it works for some people - like any gamified system. CSS Speedrun was pretty fun. But again, I've rarely used selectors like that in real life.
Nothing helps you learn CSS like finding a site that excites you - and rebuilding it (probably also making it more responsive too). I'd consider these to be distractions that will ultimiatly slow down the learning process for most people. (just my opinion of course)
Nice! Thanks for sharing.
Glad you enjoyed this