Savio Martin
Savio Martin

Savio Martin

Learn CSS by Playing Games

Learn CSS by Playing Games

Savio Martin
Β·Dec 2, 2021Β·

2 min read

Table of contents

  • Hello Folks πŸ‘‹
  • 1. CSS Garden
  • 2. FlexBoxZombies
  • 3. Flexbox Froggy
  • 4. CSS Dinner
  • 5. FlexBox Defence
  • 6. CSS Battle
  • πŸ‘€ Wrapping Up

Hello Folks πŸ‘‹

This is Savio here. 14 year old, building useful products. Helping people with tweets and blogs on web development, frotend tips, and interesting resources.

Today, I'd like to share 6 amazing games to learn CSS. Let's goooo πŸš€


1. CSS Garden

image.png Learn CSS Grid Layout by planting trees and growing your garden with 28 different levels.

2. FlexBoxZombies

image.png

Flexbox Zombies is a fun game where we use Flexbox to position hero’s crossbow and hit the zombies and survive.

3. Flexbox Froggy

image.png Learn Flexbox by guiding the frog to the lilypad using diffent Flexbox properties you have learnt

4. CSS Dinner

image.png

CSS Dinner is a game to learn different selectors in CSS and organising them in a way to prepare a good looking meal.

5. FlexBox Defence

image.png

In this game, we use the CSS Flexbox properties in building a strong tower and stopping enemies.

6. CSS Battle

image.png CSS Battle is a online interactive playing platform where you can invite your friends and make use of CSS properties to build certain shapes and battle against them.


πŸ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! πŸ’―

Feedbacks are greatly appreciated! πŸ™Œ Have an amazing day!

🌎 Lets connect

Did you find this article valuable?

Support Savio Martin by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this