4 Games to Level Up Your CSS Skills

4 Games to Level Up Your CSS Skills


3 min read

Featured on daily.dev

Learning CSS can be a frustrating experience when starting out, at least it was for me. I have some trouble remembering things, especially when it comes to CSS layout techniques.

In this article, I have collected some free CSS games which I found genuinely helpful and will be extremely valuable for someone starting out with CSS.

So, Let's Get Started ๐Ÿ

# 1. Flexbox Froggy

Flexbox Froggy.png

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.

In this game, you have to help your frogs to get their lilypads using different flexbox properties! It's a fun game and at the same time helping you to learn and understand flexbox.

It covers all the basics of CSS flexbox properties like align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and order in 24 different levels.

Play Flexbox Froggy

# 2. Grid Garden

Grid Garden.png

Grid Garden was developed by Codepip to help you learn about the CSS grid layout. In this game, you have to take care of your garden i.e. watering the carrot plants and poisoning the weeds using different grid properties.

It covers the CSS grid properties like grid-column-start, grid-column-end, grid-colun, grid-row-start, grid-row-end, grid-row, grid-area, grid-template-columns, grid-template-rows, grid-template and order in 28 different levels with increasing difficulty.

๐Ÿ‘‰ Play Grid Garden

# 3. Flexbox Defense

Flexbox Defense.png

Flexbox Defense is a great game where you'll learn CSS Flexbox by playing a tower defense game. In this game, you have to position your turrets using flexbox code and stop the incoming enemies from getting past your defenses.

It covers the flexbox CSS properties like align-items, justify-content, flex-direction, align-self, order and many more in 12 different levels.

๐Ÿ‘‰ Play Flexbox Defense

# 4. CSS Diner

CSS Diner.png

CSS Diner is a web game that helps you to learn about almost all kinds of CSS selectors. In this game, you have to write correct selector codes that would pick specific items from the diner table.

๐Ÿ‘‰ Play CSS Diner

Bonus:- Additional Learning References

Yay! I know, these are not Games but rather great references to learn CSS concepts like Flexbox, Grid and Selectors.

Wrapping Up

I hope you find these games helpful to practice and level up your CSS skills while having fun on the side.

If I missed something? If you know a learning game or two that is not included above, you can share them here in the comments below.