8 Games to learn CSS the fun way
1. Flexbox Defense
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.
2. Flexbox Froggy
This game is also about 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 😅.
3.Grid Garden
In 28 different levels you can learn 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.
4. CSS Diner
This is a little game about all kinds of CSS selectors. Try to master all 32 levels to call yourself a CSS selector expert — and hungry 😋.
5. Unfold
This isn’t exactly a game but more an interactive presentation about CSS 3D Transforms. You may think this is boring but trust me: The animations are 🔥 and you wouldn’t think this is possible with pure CSS.
6. Roadmap
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! 😅
7. Carnival
You only have 8 seconds to hit all targets! A nice little CSS game using checkboxes and CSS animations.
8. Tic-Tac-Toe
And at last a classic. Tic-Tac-Toe as pure CSS game with 2 levels of difficulty also using checkboxes and CSS animations.
9. Flexbox Zombies
This is a storyline driven training course where you learn to use Flexbox and a crossbow to hunt zombies. A registration is required.
10. Service Workies
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.
11. Grid Critters
Your journey to master CSS Grid begins on the mysterious planet Gridirons. 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
12. CSS Battle
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
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.
