× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Learn CSS Flexbox by playing a game

Christoph Wagner
Mar 04, 2016
<p>Having trouble learning how to use the new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">CSS Flexbox</a> system? Why not learn it by playing a tower defense instead of reading <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">long, boring articles</a>? Here are two awesome games that teach you Flexbox playfully. </p> <p><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></p> <p>In Flexbox Froggy, each level consists of a "pond" with frogs and lilypads. Your goal is to align each frog with the lilypad of the same color by writing the correct Flexbox CSS.</p> <p><img alt="Flexbox Froggy" src="http://i.imgur.com/BxJCtTo.png"></p> <p><a href="http://www.flexboxdefense.com/">Flexbox Defense</a></p> <p>Flexbox Defense is a game in the "tower defense" tradition. In other words, there's a road on which enemies travel, and you have to position your towers strategically (using Flexbox, of course!) to annihilate all incoming enemies. I found this game a bit harder than the previous one, but still enjoyable.</p> <p><img alt="" src="http://i.imgur.com/hw2iXJq.png"></p> <p>Good luck!</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus