Learning CSS can be very challenging because the journey to master CSS is very long and time-consuming, there are no shortcuts but still, we can make this journey interesting so that we don’t get bored of it and leave it halfway.
There are lots of amazing developers who are consistently trying to make CSS easy, some do it by making videos, and some by creating interactive courses and games.
In this post, I am going to introduce you to 10 amazing games that can help you understand the concepts of CSS without getting bored.
#1. CSS Dinner
CSS Dinner helps you understand how CSS selectors work, with simple tasks given to type the correct selectors to target the given elements with astounding animations.
It has 32 lessons that cover all the selector types and nestings of selectors.
#2. Flexbox Defense
This game teaches you flexbox by positioning the tower to shoot at enemies and prevent them from passing your defense line.
It is very cool and if you like to play tower games then you definitely gonna enjoy it.
#3. Flexbox Froggy
Flexbox Froggy too teaches about flexbox, how positioning works, and how to arrange elements.
Basically, you have to position the frogs in such a way that they reach their respective lilypads.
It has 24 lessons and as you progress the lesson gets harder and more interesting to solve.
#4. Flex Box Adventure
In this game, you have to utilize flexbox features to help Arthur reach fruits and enemies.
This is developed by Coding Fantasy, which is a platform dedicated to building creative tools to learn technical concepts by enjoying them.
It also has 24 challenges and each challenge gets harder as you progress.
#5. Grid Attack
Grid Attack is also a fantastic game to master CSS grid, also developed by the Coding Fantasy team.
in this game, you have to position the land in a way such that the demons die and help Ray stay safe and at last save his brother from Valcorian.
#6. Flex Box Zombies
This game has the best visuals among all the games I saw, it comes from the mastery games also a platform with lots of games.
In flexbox zombies, you have to kill zombies by positon bow towards the zombies, pretty amazing game.
#7. Grid Garden
Grid Garden is another awesome game to practice grid layouts.
In this game, we have to position the water perfectly so that all the plants get water.
It has 28 levels and all of them are very creative and interesting.
#8. CSS Speedrun
CSS Speed run is a rapid game in which you have to write the correct selector for the elements highlighted or indicated with ➡️ arrow emoji.
The clock starts after solving the first challenge.
It is very beneficial if you like speed games and it has 10 levels but you can play it often to improve your speed.
#9. CSS Cascade
CSS Cascade is also a rapid CSS microgame covering many CSS properties like flexbox, grid, transform, direction, filter, counter, nth-child, calc and more.
It is from codepip which makes games like this on varous topics like Javascript and CSS, and has both free and pro plans.
#10. CSS Battle
CSS Battle is very popular, I personally have practiced a lot on this platform.
Basically, you are given an Image and all the colors used in that image and you have to design that image with the help of CSS, it helps to practice a variety of CSS topics.
It has an image comparing a system that helps to visually compare our design with the given one by dragging the line.
#Conclusion
So we can learn CSS in multiple ways but it becomes very easy when we practice our skills with the help of a given platform or games.
There are many more games like this like
- You you are enjoying Tailwind CSS the Knights of the Flexbox Table can become your favorite one.
- CSS Challenges have many challenges to solve.
I hope you will like some of these games and don’t forget to bookmark this article and share it with others.
