Learn CSS with these Games

#webdev #css #beginners #learning

CSS can be frustrating to learn, but what is better than learning by playing fun and enjoyable games? That's why I want to share games that helped me in my CSS journey and others that you might find useful.

CSS Diner

CSS Diner will help you master every CSS selector by selecting various items on the table. The game provides multiple use cases for each selector, allowing you to experiment and understand where to apply them. Additionally, it includes helpful hints if you get stuck.

Flexbox Zombies

In Flexbox Zombies, you activate your crossbow using the power of Flexbox to kill zombies. Following the instructions of your teacher, you'll learn Flexbox properties and techniques. This game combines engaging storytelling with practical Flexbox exercises to enhance your learning experience.

Flexbox Froggy

Flexbox Froggy teaches Flexbox by having you help Froggy and his friends reach the lilypad using only flex properties. Each level presents a new challenge, requiring you to apply different Flexbox concepts. The game's progressive difficulty ensures that you build a solid understanding of Flexbox as you advance.

Knights of the Flexbox Table

Knights of the Flexbox Table helps you learn Flexbox layout and Tailwind CSS by writing Tailwind classes to move knights to their proper chests from the dungeon. The game presents a medieval fantasy theme, making learning both Flexbox and Tailwind CSS enjoyable and immersive.

CSS Grid Garden

CSS Grid Garden is similar to Flexbox Froggy but focuses on CSS Grid. In this game, you help water the garden by using CSS Grid properties. Each level introduces new grid concepts, gradually increasing in complexity, ensuring that you gain a comprehensive understanding of CSS Grid layout.

Don't forget to share with us the games you know in the comment section 🙂