Learning CSS can be a frustrating experience sometimes. Here are some games that will assist you in mastering CSS. 😉
1. Flexbox Defense
Link: flexboxdefense.com
Tower defense with a twist: all towers must use CSS Flexbox to position themselves. To shift the towers about, use the justify-content attribute in the main flexbox container. There are 12 levels in total, with the last one being the most difficult.
2. Flexbox Froggy
Link: flexboxfroggy.com
Flexbox froggy is about total flexbox properties. It uses most of flexbox properties(justify-content, align-content, flex-wrap, align-self ) unlike Flexbox Defense. There are 24 levels in total.
3. Grid Garden
Link: cssgridgarden.com
A game to help you learn how to use CSS Grid Layout. There are a total of 28 levels in the game, ranging from beginner to difficult. To grow your garden, use various CSS grid attributes. It, like other games, features a fun interactive editor. This game will help you to learn CSS in a fun way.
Read our other blogs
4. CSS Diner
Link: flukeout.github.io/
CSS Diner is a fun and informative game for CSS enthusiasts of all levels. Core CSS topics are covered in the first level, which is followed by Intermediate CSS game levels.
5. CSS Battle
LInk: cssbattle.dev/
The goal of this game is to code HTML and CSS in such a way that the supplied image is replicated. New tasks are added to the game on a regular basis. It also features a global ranking system.
Follow us on Instagram
