DEV Community

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

💪 Train your CSS skills with online games 👾

Francesco Leardini on November 15, 2019

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 technologi...
Collapse
 
devencourt profile image
Brian Bethencourt

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

Collapse
 
paco_ita profile image
Francesco Leardini • Edited

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

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

Collapse
 
stanley12qs profile image
stanley12qs • Edited

Awesome article, thanks for that. But don't you agree, that sometimes, especially when you make a development of some serious game projects, you should provide and implement more powerful solutions? When I've been working in game dev agency, and we had some problems with creating some new game art details in our locations, we've simply contacted guys from game art development outsourcing iLogos agency, and they have helped, in the shortest terms. Because they have enough of qualified dev professionals for such situations.

Collapse
 
paco_ita profile image
Francesco Leardini

Thanks Stanley, glad you liked it

Collapse
 
nickytonline profile image
Nick Taylor
Collapse
 
paco_ita profile image
Francesco Leardini

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

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
Francesco Leardini

Ah ah, indeed :)

Collapse
 
hnnx profile image
Nejc

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

brb, gaming time

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

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

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

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

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

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

I have never seen so many games just for CSS.

Collapse
 
monfernape profile image
Usman Khalil

Where did you find such gold? Amazing

Collapse
 
paco_ita profile image
Francesco Leardini

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
 
rafael_aquino profile image
Rafael Aquino

Great tips!

Collapse
 
ajsharp profile image
Alex Sharp 🛠sharesecret.co

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

Collapse
 
thelogicwarlock profile image
Kaemon Lovendahl

Thanks for sharing!

Collapse
 
paco_ita profile image
Francesco Leardini

Welcome Kaemon, glad it is helpful!

Collapse
 
patsyjmoore1 profile image
Patsy J. Moore • Edited

I look forward to more practical skills for gaming style. Google

Collapse
 
garrett profile image
Garrett / G66 / megabyteGhost

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
 
zenzenzen profile image
ohmyzense

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

Collapse
 
paco_ita profile image
Francesco Leardini

Thanks Johnson :)

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

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

Collapse
 
gass profile image
Gass

super useful links! thanks!

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

Thank you very much Aneeqa!!