DEV Community

Cover image for Learn CSS by Playing Games - No Nightmares
Akshay R
Akshay R

Posted on • Updated on

Learn CSS by Playing Games - No Nightmares

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:

  1. Flexbox Froggy - Game to master Flexbox
  2. Flexbox Defense - Game to master Flexbox
  3. CSS Diner - Game to master CSS selectors
  4. Flexbox Zombies - Game to master Flexbox (Must Try)
  5. 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

  1. 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)

Collapse
 
akuma8 profile image
Attoumane

β€œ 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.

Collapse
 
akshayrak profile image
Akshay R

πŸ™‚ Go ahead and complete all the challenges in those websites, you will no longer think the same

Collapse
 
menomanabdulla profile image
menomanabdulla

Some cool stuff listed, awesome for learn flexbox and grid system.

Collapse
 
akshayrak profile image
Akshay R

Thanks

Collapse
 
davegreen profile image
Dave Green

Love it :) Learning stuff by interactive way really works for me personally

Collapse
 
akshayrak profile image
Akshay R

I think the same, Thanks

Collapse
 
safi28 profile image
safi28

This is awesome!

Collapse
 
akshayrak profile image
Akshay R

Thanks

Collapse
 
cherishirish profile image
cherishirish

Awesome! Thanks!!

Some comments have been hidden by the post's author - find out more