Fun games for learning CSS

For me CSS is hard. I know I need to learn more about HTML, CSS, Javascript to use them effectively combined, but for learning? They are definitely not equal for me:

What to do? What to do…

As I’ve written before, the best learning comes from sources that are: easy to read and understand, are short/have small split sections and are interactive.

But what if you reeeeeeealy don’t like learning that particular thing (CSS 👀)? Here comes procrastination! But we can use it, and bend it our way.

I’m talking about playing games.

Yes, sometimes instead of cleaning the apartment all I can think about is that I’d love to play a video game right now. And in my opinion, the same mindset and strategy can be used to learn hard things.

Here I’m going to list some fun games to help you learn CSS that you can play in your browser:

CSS Diner

A visually appealing way to learn the basics of CSS selectors. Works smoothly and beating each level feels great. It’s so clever what Luke Pacholski (GitHub) has done, and I think it’s a prime example of what can be done to make learning more fun.

Now go and clear out some plates! 🍽️

Flexbox Defence

A tower defense game with a twist: all towers must be positioned with CSS flexbox.

Now that’s a proper game! Who doesn’t like to play a tower defense game? I’m trully amazed by the fact that you can teach CSS things like: justify-content, align-items, flex-direction, order and align-self in such a way.

There is no stopping in learning CSS when you can stop the incoming enemies from getting past your defenses!

Flexbox Froggy and Grid Garden

Codepip has a few educational games up its sleeve. The two mentioned here are free to play: Flexbox Froggy is another game for learning CSS flexbox and Grid Garden teaches about watering crops CSS grid.

Instructions are clear, gameplay is smooth and so is the learning process involved. I really enjoyed going through all the levels of both of these games.


Since today is Children’s Day in Poland, I hope you’ll have fun and feel like a kid (not by getting angry about having to learn, but) playing the games listed above. Happy coding! 🥳