List of 12 FREE CSS practice games to improve your skills

Published: · Reading time: 6 min

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 following list of CSS games 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.

Website: 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 having up to 25 levels.

NOTE: The game requires registration.

Website: https://mastery.games/flexboxzombies/

3. Grid Garden

Grid garden game
Grid garden 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.

Website: 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.

Website: 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.

Website: http://flexboxfroggy.com/

6. Knights of the Flexbox table

Knights of the Flexbox table game
Knights of the Flexbox table game

A game that teaches 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. The game has 18 levels with a code editor and visual area to see the result.

Website: https://knightsoftheflexboxtable.com/

7. Guess CSS

Guess CSS game
Guess CSS game

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.

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

8. CSS Challenges

CSS Challenges
CSS Challenges

CSS Challenges is a resource that offers fun and playful ways to practice your CSS skills. You can do that by playing CSS challenges/riddles or by taking quizzes. For challenges, you’ll find 5 different difficulty levels starting from easy ranging all the way up to insane. For each challenge, you have a preview image and a set of rules to match it, the main rule for all challenges is to use CSS code only.

Website: https://css-challenges.com/

9. Flex Box Adventure

Flex Box Adventure game
Flex Box Adventure game

Start a mysterious adventure and help King Arthur defeat three evil brothers using CSS Flex Box. Game has three game modes (easy, medium, hard) to choose from and 24 coding levels.

Website: https://codingfantasy.com/games/flexboxadventure

10. Grid Attack

Grid Attack game
Grid Attack game

From the creators of Flex Box Adventure, is the Grid Attack game. Demons kidnapped a powerful elf to steal his power. Go on an incredibly dangerous quest and save the world using a secret weapon – CSS Grid. Game has three game modes (easy, medium, hard) to choose from and 80 coding levels.

Website: https://codingfantasy.com/games/css-grid-attack

11. CSS Speedrun

CSS Speedrun game
CSS Speedrun

A nice little game to practice your CSS selectors knowledge. Game has 10 levels. You have to input a selector to match elements marked on the example. All this while time is ticking.

Website: https://css-speedrun.netlify.app

12. CSS Battle

CSS Battle game
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.

Website: https://cssbattle.dev/

Like this article? Share it on:

Top online courses in Web Development
Top online courses in Web Development