8 Games to learn CSS the fun way
Tags: css, html, beginners, games
Published: 2019-10-24 12:29:27

I must admit, I have trouble remembering things. Especially when it comes to CSS. The Flexbox Layout for example. The property `justify-content` of a flex container can have [more than **12** different values](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) where many can be combined with the keywords *safe* or *unsafe*. To read the [complete guide to flexbox on CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), you have to scroll through a two column page with a height of more than 20k pixels - and although the title implies it, they are not covering everything.

I recently stumbled upon a tower defense game teaching flexbox, which really...
**Wait, a what?**
Yes, it turned out, that there are quite a lot of games out there, helping to teach CSS. I collected some free CSS games that were useful for me and maybe can help you have some fun with CSS again!


## 1. Flexbox Defense

![CSS Game Flexbox Defense](https://thepracticaldev.s3.amazonaws.com/i/2vnb6l1fqlqk73z3afyh.jpg)

I was just mentioning this game. It covers the flex properties `align-items`, `justify-content`, `flex-direction`, `align-self` and `order` in 12 different levels. Especially the last 4 levels are really fun and a little bit tricky.

- Game: http://www.flexboxdefense.com
- Contributions: https://github.com/channingallen/tower-defense
- Creator: [Channing Allen](https://github.com/channingallen)


## 2. Flexbox Froggy

![CSS Game Flexbox Froggy](https://thepracticaldev.s3.amazonaws.com/i/lziu8dcnkgm86mtc1683.jpg)

This game is also about [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and it covers even more flex properties: `align-items`, `justify-content`, `align-content`, `flex-direction`, `align-self`, `flex-wrap`, `flex-flow` and `order` in 24 different levels. Drop a comment, if you solved the last level 😅.

- Game: https://flexboxfroggy.com
- Contributions: https://github.com/thomaspark/flexboxfroggy
- Creator: [Codepip](https://codepip.com)


## 3. Grid Garden

![CSS Game Grid Garden](https://thepracticaldev.s3.amazonaws.com/i/ju1bq6ht2zs4fqb88yov.jpg)

In 28 different levels you can learn [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). It covers the following grid properties: `grid-column-start`, `grid-column-end`, `grid-column`, `grid-row-start`, `grid-row-end`, `grid-row`, `grid-area`, `order`, `grid-template-columns`, `grid-template-rows` and `grid-template`.

- Game: https://cssgridgarden.com
- Contributions: https://github.com/thomaspark/gridgarden
- Creator: [Codepip](https://codepip.com)


## 4. CSS Diner

![CSS Game CSS Diner](https://thepracticaldev.s3.amazonaws.com/i/ibbrkia8ogt6xbrigfpu.jpg)

This is a little game about all kinds of [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). Try to master all 32 levels to call yourself a CSS selector expert - and hungry 😋.

- Game: http://flukeout.github.io
- Contributions: https://github.com/flukeout/css-diner
- Creator: [Luke Pacholski](https://github.com/flukeout)


## 5. Unfold

![CSS Interactive Presentation Unfold](https://thepracticaldev.s3.amazonaws.com/i/kvr5id64j0lv5a0glgun.jpg)

This isn't exactly a game but more an interactive presentation about [CSS 3D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). You may think this is boring but trust me: The animations are 🔥 and you wouldn't think this is possible with pure CSS.

- Game: https://rupl.github.io/unfold
- Contributions: https://github.com/rupl/unfold
- Creator: [Chris Ruppel](https://chrisruppel.com)


## 6. Roadmap

![CSS Game Roadmap](https://thepracticaldev.s3.amazonaws.com/i/naexo9csmav1g7i6aq7z.jpg)

Skill and speed are required to solve this little game, only made with CSS and HTML. It is not directly teaching CSS, but looking into the source code teaches a lot about `clip-path`, `transform` and `animation` with `@keyframes`!
Drop a comment how many attempts you needed to win - I needed 8! 😅

- Game: http://victordarras.fr/cssgame
- Creator: [Victor Darras](https://twitter.com/victordarras)


## 7. Carnival

![CSS Game Carnival](https://thepracticaldev.s3.amazonaws.com/i/p3f4wq9svwcqrq4blscb.jpg)

You only have 8 seconds to hit all targets! A nice little CSS game using checkboxes and CSS animations.

- Game: https://codepen.io/una/pen/NxZaNr
- Creator: [Una Kravets](https://github.com/una)


## 8. Tic-Tac-Toe

![CSS Game Tic-Tac-Toe](https://thepracticaldev.s3.amazonaws.com/i/emap9r60aek4bh1hv3pi.jpg)

And at last a classic. Tic-Tac-Toe as pure CSS game with 2 levels of difficulty also using checkboxes and CSS animations.

- Game: https://codepen.io/alvaromontoro/pen/BexWOw
- Creator: [Alvaro Montoro](https://github.com/alvaromontoro)


## Bonus

And here comes the bonus part with recommendations from the comments:

### 9. Flexbox Zombies

![CSS Game Flexbox Zombies](https://thepracticaldev.s3.amazonaws.com/i/s5u3myogm364poa7ei4i.jpg)

This is a storyline driven training course where you learn to use Flexbox and a crossbow to hunt zombies. *A registration is required.*

- Game: https://mastery.games/flexboxzombies/
- Price: $179 (but **free** at the time of this writing)
- Creator: [Dave Geddes](https://twitter.com/geddski)

### 10. Service Workies

![CSS Game Service Workies](https://thepracticaldev.s3.amazonaws.com/i/o4y5rgj3mupmdwyadvx6.jpg)

In this adventure you'll learn how to avoid the PWA pitfalls. You'll level up your skills and thrive with Service Workers. Perhaps even slay the savage beasts that have plagued the poor village workies for centuries! *A registration is required.*

- Game: https://serviceworkies.com
- Price: $179 (but **free** at the time of this writing)
- Creator: [Dave Geddes](https://twitter.com/geddski)

### 11. Grid Critters

![CSS Game Grid Critters](https://thepracticaldev.s3.amazonaws.com/i/530ltd6ab4azvxqwqkh9.jpg)

Your journey to master CSS Grid begins on the mysterious planet Grideros. Your mission is to use your ship's powerful Grid tool to save alien critters from extinction. *A registration is required.*

- Game: https://gridcritters.com
- Price: $179
- Creator: [Dave Geddes](https://twitter.com/geddski)

### 12. CSSBattle

![CSS Game CSSBattle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4ivx0vr8ipc9blugnij.png)

In this online CSS Code Golfing game players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

- Game: https://cssbattle.dev
- Creators: [Kushagra Gour](https://twitter.com/chinchang457) and [Kushagra Agarwal](https://twitter.com/kushsolitary)

## Wrapping it up

Doesn't matter if you're a beginner or an expert - I hope you had fun playing some games and at the same time learning something about CSS! Especially on Codepen you can find a lot of awesome games people created just using HTML and CSS.

If you know other great CSS learning games, let everyone know in the comments below.

---

*Edited: 2nd July 2021* (fix flexbox zombies link, add cssbattle)
*Edited: 29th October 2019* (add 3 bonus games from Dave Geddes recommended in a comment)
*Edited: 28th October 2019* (switch from wrong flexbox example `justify-items` to `justify-content`)
*Originally published: 24th October 2019 on [Medium](https://medium.com/@devmount/8-games-to-learn-css-the-fun-way-9b0b8b581d91)*