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

CSS Diner game
CSS Diner game

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.

https://flukeout.github.io/

2. Flexbox Zombies

Flexbox Zombies game
Flexbox Zombies game

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.

https://mastery.games/flexboxzombies/

3. Grid Garden

Gridgarden game
Gridgarden game

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.

https://cssgridgarden.com/

4. Flexbox Defense

Flexbox Defence game
Flexbox Defence game

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.

http://www.flexboxdefense.com/

5. Flexbox Froggy

Flexbox Froggy game
Flexbox Froggy game

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.

http://flexboxfroggy.com/

6. Knights of the Flexbox table

Knights of the Flexbox table
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.

https://knightsoftheflexboxtable.com/

7. Guess CSS

Guess CSS
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.

https://www.guess-css.app/

8. CSS Battle

CSS Battle game
CSS Battle game

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.

https://cssbattle.dev/

Tags: