loading...
Cover image for 💪 Train your CSS skills with online games 👾

💪 Train your CSS skills with online games 👾

paco_ita profile image Francesco Leardini Updated on ・4 min read

As frontend developers we are often called to design a neat and appealing UI for our web app.

Nowadays there are plenty of concepts and technologies to be aware of: SCSS, responsive design, Grid Layout and Flexbox, just to cite some. Even when we use them daily at work, we typically remember only the most common rules.

Therefore why not practicing these concepts while playing and making the learning process fun?

fungames

There are several online games that allows us to train our design skills and keep them up to date in an entertaining way. Let's have a look at some of them together.


Basic CSS

 

CSS Diner

CSS Diner

The goal is to use CSS statements to select specific UI elements on the screen. If the entered rules are correct, we can pass to the following level. There are 32 levels in total.
Free Let's play
 

CSS Grid Garden

cssgridgarden

In this game, we must water carrot crops by mastering CSS grid. To reach our goal we need to define columns, rows, and grid template areas.
Free Let's play
 

Gridcritters

gridcritters

This game is a little design masterpiece.
We need to use our CSS Grid skills to save alien critters from extinction! At each level more challenging requirements must be fulfilled to succeed and proceed to the following stage.

The game has been developed by Dave Geddes, ex IT architect, now fully converted into educational platforms developer. You can read here the story behind the project and also the CSS Grid rules used for the game home page. The blog post is already very informative by itself!
Cost: 179$ Let's play
 

CSS Battle

CSSBattle

In CSS Battle we have to replicate a target layout with the smallest possible code and we can compete against other players to get the highest score on the leaderboard.

CSSBattle

Free Let's play
👉 Thanks @ Nick Taylor for suggesting it in the comments!
 


 

Flexbox Layout

 

Flexbox froggy

flexboxfroggy

Help Froggy and friends by writing CSS code!

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively.

We must bring the frogs home to their lilypads by using CSS flexbox instructions. We need to control alignment, spacing, and wrapping of elements on the webpage to achieve our goal.
Free Let's play
 

Flexbox defense

flexboxdefense

Flexbox defense is based on the classic tower defence games, but to place our items we write CSS instructions. We use the justify-content property on the main container to move the single towers into effective positions.
Free Let's play
 

Flexbox zombies

flexboxzombies

Also this game has been designed by Dave Geddes (as Gridcritters above). Here we use Flexbox to position the hero's crossbow and hit the zombies and survive along the game.

Have a look at the video below used by Dave for the game launch. Also in this case the graphics and the story are really amazing!

Each section unravels part of the plot, gives you expertise over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.

Free Let's play
 


 

Do you know other CSS/Design games?
Write it in the comments below and I will add them to the above list.

 

Useful references

Below a collection of resources we can access if we need to learn from the basics or simply to have a look from time to time for a reference.
 

CSS Selectors

An overview about all Css selectors and how to apply them.
 

Grid CSS

gridbyexample

A comprehensive collection of resources (videos and examples) to learn CSS Grid Layout.
 

Flexbox Layout

css-tricks

A visual guide to CSS flexbox layout (one of the best in my opinion). The guide focuses on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Link

Discussion

pic
Editor guide
Collapse
devencourt profile image
Brian Bethencourt

Thank you for this, I love when my learning is gamified.

Collapse
paco_ita profile image
Francesco Leardini Author

Welcome!

It is a win win: having fun playing videogames and at the same time practicing CSS

Collapse
karataev profile image
Eugene Karataev

A great example how you should not design and code user interfaces.

Collapse
jlouzado profile image
Joel Louzado

If you're looking for a fun way to test your eye, I'd recommend this game. Basically 'spot the difference' but with UI elements. :)

cantunsee.space/

Collapse
paco_ita profile image
Francesco Leardini Author

Thanks Joel for the link. It is also an interesting game!

Collapse
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Awesome!

Thank you for sharing this amazing resources, nobody will ever say again that CSS is boring!

Collapse
paco_ita profile image
Collapse
hnnx profile image
Nejc

I only knew about flex frogy, glad to see there's more.

brb, gaming time

Collapse
Collapse
paco_ita profile image
Francesco Leardini Author

Many thanks Nick for the suggestion. I added it to the list.

Collapse
thebouv profile image
Anthony Bouvier

I'll be sharing this around, thanks. I knew about several of these and always recommend them to juniors or even seniors who aren't so hot on front end stuff.

Collapse
paco_ita profile image
Francesco Leardini Author

I think these resources are extremely valuable, because they provide a much more appealing way to learn CSS than just reading the specs.

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦

I have never seen so many games just for CSS.

Collapse
rodick profile image
Milos Rodic

Thank you for this. This will help me greatly as begginer. But I have question are there more games like this for HTML and Javascript?

Collapse
paco_ita profile image
Francesco Leardini Author

I am sure there are, but I cannot recall them by heart. But maybe I will make a research and create a list similar for the CSS resources.

Collapse
paco_ita profile image
Francesco Leardini Author

Hi Milos, I created a new list of games for learning Javascript

Collapse
ajsharp profile image
Alex Sharp 🛠sharesecret.co

Wow this is extremely rad and useful -- thanks for putting this together 🙏

Collapse
rafael_aquino profile image
Rafael Aquino

Great tips!

Collapse
thelogicwarlock profile image
Kaemon Lovendahl

Thanks for sharing!

Collapse
paco_ita profile image
Francesco Leardini Author

Welcome Kaemon, glad it is helpful!

Collapse
zenzenzen profile image
ohmyzense

This is so fun and helpful for practice! Thank you for sharing!

Collapse
paco_ita profile image
Collapse
crumdev profile image
Nathan Crum

I had no idea games like this existed! Thank you so much for sharing.

Collapse
paco_ita profile image
Francesco Leardini Author

Yes, they are really cool! Simple as a concept but very helpful to learn in a lighter way :)

Collapse
monfernape profile image
Usman Khalil

Where did you find such gold? Amazing

Collapse
paco_ita profile image
Francesco Leardini Author

It all started when a colleague of mine showed me flexbox froggy. I liked it so much, that I started searching for further similar games. Indeed they are all great!!

Collapse
garrett profile image
Garrett

I got to meet and hang out with Dave Geddes at a conference a couple years ago. Brilliant dude. Really knows what he’s doing.

Collapse
tkmanga profile image
Tkmanga

thanks you for this, learning is more fun whith games.

Collapse
anirudh99 profile image
anirudh-99

Thank you so much. I am glad that I found this dev community.

Collapse
aneeqakhan profile image
Aneeqa Khan ✨

Thanks for sharing these games - It'll surely help to make learning more interesting

Collapse
paco_ita profile image
Francesco Leardini Author

Thank you very much Aneeqa!!