One of the best ways to learn something new is by playing. The same principle can be applied when learning CSS.
Playing games is fun and you can constantly re-play them. Also, by playing games you:
- practice writing code;
- experiment on the spot;
- and see the results of your work.
The list of CSS games below is available to play online and is completely free. By constantly playing these games you’ll improve your coding skills and learn CSS with ease.
1. CSS Diner
It’s a fun game to practice and learn CSS selectors. The game has 32 levels with a visual representation for aid and understanding and a code editor for input. This is a nice CSS game for all levels, no matter whether you’re a beginner or a seasoned developer.
2. Flexbox Zombies
This CSS game will help you master flexboxes. Fight zombies while learning the
flexbox property usage. The game has some nice visuals and a storyline. The storyline is split into 12 chapters each has up to 25 levels.
NOTE: Game requires registration.
3. Grid Garden
A nice and simple CSS practice game to learn the
grid property. This game features 28 levels, starting with easy difficulty and gradually increasing it. Use the various
grid properties to water and grow your carrot garden. Grid Garden has a code editor and visual area so you instantly see your result.
4. Flexbox Defense
If you like tower defense-like games, you’ll love this one. The object of this game is to write flexbox rules to properly position towers and stop waves of enemies. The game has 12 levels, a code editor, and an interactive visual part that acts like an actual game level.
5. Flexbox Froggy
From the creator of Grid Garden, this game will help you practice your CSS
flexbox skills. Write code to help get Froggy to the lilypad. The game has 24 levels with a code editor and a visual area to see the results.
6. Knights of the Flexbox table
A game that that teach you flexboxes and Tailwind CSS at the same time. The objective of the game is to move the knight and his friends around the dungeons to uncover hidden treasures. Game has 18 levels with a code editor and visual area to see the result.
7. Guess CSS
This is a quiz type game designed to test your CSS knowledge. You are given the result output and three CSS snippets along with the HTML markup. You have to pick which of the three CSS snippets produces the result. This game will test your knowledge in Grid templates, Grid items, Selectors, Flexbox, Position, and Display.
8. CSS Battle
Lastly the CSS Battle. This is more of an online challenge than an actual CSS practice game, the objective is to write HTML and CSS code to replicate the given target image in the least code possible. This game is constantly updated with new challenges. It has a global ranking system and the ability to re-play each challenge so you can improve your own results.