Learn CSS by Playing Games - No Nightmares

#css #beginners #webdev #showdev

Every frontend developers nightmare is not able to positioning or align an element where it needs to be and when you try to do something UI starts to break.

Flexbox and CSS Grid Layout are really good and easy way to solve the issues related to aligning, position and bringing responsiveness to the webpage.

But the problem is we humans can't remember all the properties of Flexbox and Grid, but we can train ourselves to remember by doing it again and again. But it is no fun and we often get bored and google each and every time to figure out how a text is aligned.

What if there is a way to master CSS in a fun way, what if it was a game. Most of the developers faced same issue when it comes to tutorials, they are no fun. So some of the smart developers came up with some of the following Games to master CSS.

Here is the list:

Flexbox Froggy - Game to master Flexbox
Flexbox Defense - Game to master Flexbox
CSS Diner - Game to master CSS selectors
Flexbox Zombies - Game to master Flexbox (Must Try)
Grid Garden - Game to master CSS Grid Layout

There is one more game to master CSS Grid but I didn't try since was little bit priced high

Grid Critters - Game to master CSS Grid

These are some of the quick list of CSS games, there are lot of such games to master many of the technology.
Let me know if I missed any.

Photo by Pankaj Patel on Unsplash

Top comments (9)

Attoumane • Aug 13 '21

“ Everyone frontend developers nightmare is not able to positioning or align an element..” That sentence summarizes my thoughts of the frontend. That’s why I choose to be a backend developer. I found that it was too complicated for me to learn CSS, there are too many properties and several ways to do the same thing. I gave up but I would like to learn it because being a backend developer is no more enough, I am unable to build a full application by myself, so thank you for your links I hope it will help.