Hadil Ben Abdallah

Posted on Dec 3, 2023 • Edited on Dec 10

11 amazing games to master CSS in a fun way 🎮🔥

#webdev #programming #beginners #css

Learning CSS can be a challenge. We know that some properties can get many different values and its a bit had to memorise all of them, actually you don’t need to memorise everything but there are some fun ways to learn more easily the monster called CSS.
In this article I will highlight 11 amazing games you can play. Either you are a beginner or an expert, you will enjoy playing these games.

1. Flexbox froggy

Flexbox froggy has a super fun way to learn flexbox positions across the board. It has 24 levels, in each level, you will find a short paragraph explaining the property that you need it to solve that level.
The purpose of the game is to place the frog on the correct Lilly.

Game: Flexbox froggy

2. Flexbox defense

Another super cool CSS game to learn flex is flexbox defense. It has 12 levels, in each level you will find a short paragraph explaining the property that you need it to solve that level.
The purpose of the game is to stop the incoming enemies from getting past your defenses.

Game: Flexbox defense

3. Flex Box adventure

Another game much like Flexbox froggy, It also has some other challenges and hints from which you might learn a lot. It has a total of 24 levels.
In this game you must help Arthur defeat the three evil brothers and return stolen gold!
Before you start the game you can choose your difficulty depending on your familiarity with flexbox.

Game: Flex Box adventure

4. Knights of the Flexbox Table

This game speed up your workflow with “Windy”, It uses tailwind classes to teach you to flex options. So if you like tailwind, you will love this game. It has a total of 18 levels.
In this game you have to help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the Tailwind CSS dungeons.

Game: Knights of the Flexbox Table

5. Flexbox zombies

We finish with flexbox by Flexbox zombies. This game is super well set up in graphics! It will make you feel like you are plying one of the biggest amazing games like “valorant”, moreover the story of the game is also amazing. This is one of the best CSS game I’ve ever played.
Unlike the other game I’ve mentioned, Flexbox zombies needs more time to finish it. It has 12 chapters, with each up to 25 levels.
The purpose is to kill zombies and goos.

Game: Flexbox zombies

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!

Game: Grid garden

7. Grid attack

This game is by the same creator as Flexbox adventure.
Here, you have to help Rey fight her way through an army of monsters and save her brother from Valcorian.
This game has 80 levels, giving you many options and time to learn CSS grid super fun.
Before you start the game you can choose your difficulty depending on your familiarity with grid.

Game: Grid attack

8. 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.
Unlike all the other games, this game is not free.
Price: At the time of this writing It has a discount to become $89 instead of $149.

Game: Grid Critters

9. CSS Diner

This game helps you to learn about CSS selectors and some modern ones. It’s really interesting.
It has 32 levels, in each level some elements will be animated to showcase what selector you should target.

Game: CSS Diner

10. Guess CSS

In this game 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.
These are the different puzzlers in the game, You can select any one(s) you want.

Game: Guess CSS

11. CSS Speedrun

This game is very similar to CSS Diner, you must write specific CSS Selectors to target 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 has ten levels, but you can play more often and improve your speed.

Game: CSS Speedrun

Bonus ❤

12. CSS Battle

It’s a website where you can find challenges. The are daily targets and battles.
About daily targets, each target could be played only for 24 hours and then you will be able to see other people solutions but you will not be able to send you solution.
About battles are always available but you can not see others solutions.
Before you start playing you must read very well “Tips & tricks” and “FAQs” to understand how is the best method to write a code and to be able to get to the top of the leaderboard.
The objective of the game is to write HTML/CSS to replicate the given target image in the least code possible.

Website: CSS Battle

13. Codepip

In this website you can find many games of HTML, CSS, JS and SQL but unfortunately most of them are not free.

Website: Codepip

14. 100 days of CSS

All you need to get started with the challenge is a CodePen account and a passion for programming.
The homepage shows every day a different challenge which you can complete. Use the provided template, be creative and recreate the example in your own way.
You can check your progress at any time and if you are dedicated, you might even make it to the leaderboard.

Website: 100 days of CSS

15. CSS challenges

It’s an amazing website where you can find CSS challenges, CSS quizzes, CSS generators and CSS tips.
There are 5 different levels from easy to insane, so you can filter the challenges depending on your level in CSS.

Website: CSS challenges

16. Frontend mentor

In this website you can find challenges not only by HTML and CSS but you also there are some challenges needs JavaScript code.
If you want to see only CSS challenges you can filter them: