If you are learning #CSS then this thread for you.

It might be hard in the beginning to get a good grasp of #flexbox, grid or even CSS selectors.

Here are some games that will make learning CSS fun and easy: 🧵
👾 CSS DInner

In this #CSS game you learn #CSSselectors by picking the food from the table.

Go to flukeout.github.io the game is free.
👾 Flexbox Froggy

Here you learn how to work with #flexbox. You use flexbox rules to put a froggy on a lillypad.

Go to codepip.com/games/flexbox-… the game is free, but requires you to register. There is also a pro version with more advanced levels
👾 Grid Garden

This game is similar to #Flexbox Froggy but teaches you the basics of the #CSS grid layout.

Go to codepip.com/games/grid-gar… the game is free but requires you to register
👾 Flexbox Defence

Another game teaching you #flexbox. Unlike Flexbox Froggy it is a tower defence, where you need to protect the base placing the towers using flexbox layout.

The game is free, link: flexboxdefense.com
👾 CSS Battle

Here you need replicate the target layout with the smallest amount of code. Compete with others to get the highest score on the leaderboard.

The game is free: cssbattle.dev
👾 Flexbox Zombies

This is a beautiful game by @geddski that will teach you #flexbox layout.

Here you kill hordes of zombies with your trusty flexbox-crossbow.

The game looks amazing and is fun to play: mastery.games/flexboxzombies
👾 Grid Critters

Another amazing looking game by @geddski Here you use your ship's #CSSGrid tool to save alien critters from extinction.

Here is the link: gridcritters.com, the game is paid.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Maksim Ivanov

Maksim Ivanov Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(