Amanokami Kai

RSS

Web: Learning Flexbox with games

Flexbox Defense

So I was scrolling down Twitter when I noticed this game: Flexbox Defense! It's a tower defense game where you use flexbox CSS rules to position the defense towers.

flexboxdefense-screenshot.png

flexboxdefense-control.png

Of course, one could simply read the documentation for flexbox rules, but I feel like this game is a really good way to learn, since it's fun and you get practice!

It covers justify-content, align-items, flex-direction, order, and align-self.

Flexbox Froggy

flexboxfroggy-screenshot.png

flexboxfroggy-control.png

A bit of reading and I found out that this was based on Flexbox Froggy, which it quite good too. It has slightly less flashy graphics, but it has more levels and covers more properties: flex-wrap, flex-flow, and align-content (in addition to the ones Flexbox Defense overs).

I hope there are more games to learn CSS with.

Links

Extra

I realize this is a short post but I wanted to share this finding. I also wanted to test out uploading images through org-page. And I need to do something about Disqus not working...

UPDATE: (2016-03-09) I got the images working! Also realized I forgot to add links so I'm going to do that now. I realize this is a short post but I wanted to share this finding. I also wanted to test out uploading images through org-page. And I need to do something about Disqus not working...


2016-03-08 Paul Elder

Comments

comments powered by Disqus