3 Helpful Websites for Learning Modern CSS

CSS has come a long way from floats and tables. We now have things like CSS Variables, Flexbox, and Grid.

Here are a few websites that can help you level up your understanding of CSS, no frameworks required.

Flexbox

Flexbox Froggy This is a fun game where you help a frog and its friends navigate a pond with the help of flexbox.

It introduces the properties and directions of flexbox: justify-content, align-items, flex-direction.

The difficulty quickly ramps up by introducing more frogs to position and colored lily pads to match frogs.

Flexbox Zombies Dave Geddes has created multiple games, but the first I played of his was Flexbox Zombies. A free* game that teaches both basic and advanced concepts of flexbox.

While some of the lessons are similar to Flexbox Froggy in that you’re positioning characters, Flexbox Zombies is a more advanced lesson with 12 levels that build upon each other.

Dave also has some great articles and other games on his site, Mastery Games.

*as of the time of writing

Grid

Grid Garden By the same maker as Flexbox Froggy comes Grid Garden, where the goal is to take care of your garden of vegetables by using the powers of CSS Grid.

This game is very similar in play style and structure to Flexbox Froggy.

Alternatively, one could play Grid Critters to have a more interactive and deep dive into Grid, but the garden is free. (I believe Grid Garden to be worth the price, but I wanted to share a list of primarily free games)

Bonus

CSS Diner This is a good refresher on the basics of selectors and positioning in CSS. This was the first game I played when learning HTML and CSS. I found it online one day and spent a fair amount of time trying to beat it.

I hope you give some of these games a shot and see how fun they are and how powerful modern CSS can be.