Learn CSS with games
Whether you want to learn or practice CSS (Cascading Style Sheets), it can sometimes be a frustrating experience. This is not something present only for CSS, it also applies to everything else in the world of web development. That is why the term “Gamification” is appearing more and more often. Gamification is the application of game-design elements and game principles in a non-game context to simplify the learning or practice process. In this article, we will focus only on CSS.
Below we will present the best free games that will help you while learning or practicing CSS. Keep in mind that not all CSS concepts are processed through these games, but only some.
1. Flexbox Froggy
The best and most popular game that focuses on CSS flexbox layout. It consists of 24 levels and this game covers flex properties such as justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content. The game is short, interesting, and well designed.
Game: Flexbox Froggy
Difficulty: Easy
Registration: Not required
2. Flexbox Zombies
This is an amazing game, especially for those who like zombie survival games. Your task is to use the CSS flexbox to position the hero’s crossbow in such a way that the hero can kill zombies. Each section reveals a new part of the story and introduces you to a new part of the flexbox layout concept.
Flexbox Zombies covers flex properties such as flex-direction, justify-content, align-items, align-self, flex-grow, flex-shrink, flex-basis, order, flex-wrap, align-content and flex shorthand.
Game: Flexbox Zombies
Difficulty: Hard
Registration: Required
3. Flexbox Defense
Flexbox Defense is a classic tower defense game. What makes it useful is that it requires tower positioning using CSS. This game also focuses on the CSS flexbox layout and covers the following flex properties: justify-content, align-items, flex-direction, align-self, and order through 12 levels.
Game: Flexbox Defense
Difficulty: Medium
Registration: Not required
4. Grid Garden
Like Flexbox Froggy this game comes from the Codepip platform. These two games are completely free while others are paid. You can take a closer look at Codepip. Just as Flexbox Froggy is for the CSS flexbox layout concept, so is Grid Garden for the CSS grid layout concept. This game has 28 levels that start from easy to hard.
The point of the game is to continually water the carrots using the CSS grid layout concept to position the water where our carrots are in the garden. The game 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: Grid Garden
Difficulty: Easy
Registration: Not required
5. CSS Diner
This game is interesting and educational. There are 32 different levels, from easy to hard. It focuses on CSS selectors like element selector and class selector and is adapted for developers of all levels of knowledge.
Game: CSS Diner
Difficulty: Medium
Registration: Not required
6. CSS Battle
CSS Battle is not a game but is more like an online challenge. The goal is for users to visually replicate a given target image using as little HTML and CSS code as possible to collect points and fight for first place on the leaderboard. It is regularly updated with new challenges and each challenge can be replayed to improve the result.
Game: CSS Battle
Difficulty: Hard
Registration: Required
7. Unfold
If you aim to learn something about CSS 3D transforms. Unfold is an interactive educational presentation that contains amazing animations made only using CSS where different concepts are explained with each animation.
Interactive presentation: Unfold
Registration: Not required
Conclusion
The question that arises here is, how effective is gamification? Is it enough to play the game and learn the appropriate concepts?
Of course, it is not enough to just play the game to master the concept, however, gamification is very effective as learning is not frustrating but fun and interesting. This type of learning can be used for some introductory steps to get a picture of the concept and then through additional practice to determine the material on specific examples. It can also be useful for practicing or repeating material.
Since we did not arrange the games in any specific order, in what order would it be best to learn CSS through these games?
We recommend the following order:
1. CSS Dinner
Since CSS consists of selectors this game has the best background to start with.
2. Flexbox Froggy
Flexbox Froggy Since flexbox is a slightly more complicated layout concept than a grid, it is better to learn from a more complicated to a simpler one. Flexbox Froggy is best organized, to begin with, and later the material can be determined via Flexbox Zombies and Flexbox Defense.
3. Grid Garden
After flexbox, the grid layout concept will be more fun and easier to learn. These are layout concepts that are popular and used regularly so it is recommended to know both.
4. Unfold
3D CSS transforms and animations are a bit more complex things so we leave them for last.
5. CSS Battle
For further training, when we have already gathered a little experience and we can do something concrete, CSS Battle can come as a good option for training.
In addition to these games, there are many others, these are just some that we have singled out as the best and most popular. It all depends on the personal goal. You can check other games like Grid Critters, Service Workies, CodePip, CodeMonkey, CodeinGame, CodeCombat
We invite you to follow us on social networks so you can keep up with all our latest projects and news.