Visual game to learn Flexbox

#1

Post by thesergie » Wed, Apr 13, 2016, 4:36 PM UTC

Visual game to learn Flexbox
preview.webflow.com

Re: Visual game to learn Flexbox

#2

Post by Vekz » Wed, Apr 13, 2016, 6:00 PM UTC

I prefer http://flexboxfroggy.com/

Re: Visual game to learn Flexbox

#3

Post by callmevlad » Wed, Apr 13, 2016, 6:03 PM UTC

Vekz wrote: post #2

I prefer http://flexboxfroggy.com/

Hey Kev, we actually worked with Tom Park (the creator of Flexbox Froggy) to apply the same exact concept to a more visual paradigm - so they're meant to serve the same purpose, but the visual version is meant to be more approachable to people who don't have as much experience with raw CSS. I hope that makes sense.

Re: Visual game to learn Flexbox

#4

Post by devrelm » Wed, Apr 13, 2016, 6:08 PM UTC

This is great! I enjoyed flexboxfroggy.com, but this seems to go into a bit more depth in terms of the number of flexbox properties being shown off. It takes a bit to work out what the actual css being used is, but it's otherwise a great way to play and learn what flexbox can do.

Re: Visual game to learn Flexbox

#5

Post by NDizzle » Wed, Apr 13, 2016, 6:21 PM UTC

I don't normally use these kind of things, but this one was really well done. Nice work! I actually completed it.

Re: Visual game to learn Flexbox

#6

Post by throwaway2016a » Wed, Apr 13, 2016, 6:42 PM UTC

Also, http://www.flexboxdefense.com/ is more like an actual game.

It did get me to check out webflow though, which I'm guessing was part of the goal.

Re: Visual game to learn Flexbox

#7

Post by virgil_disgr4ce » Wed, Apr 13, 2016, 6:58 PM UTC

throwaway2016a wrote: post #6

Also, http://www.flexboxdefense.com/ is more like an actual game. It did get me to check out webflow though, which I'm guessing was part of the goal.

Haha yeah. Seems to be a pretty effective technique!

Re: Visual game to learn Flexbox

#8

Post by tsumnia » Wed, Apr 13, 2016, 7:05 PM UTC

Very cool, though I'd love to have an option to reset if possible

Re: Visual game to learn Flexbox

#9

Post by pcl » Wed, Apr 13, 2016, 7:06 PM UTC

I love the tool itself... have you guys thought about some way to integrate it into Chrome or FF as a development / debugging tool?

Re: Visual game to learn Flexbox

#10

Post by callmevlad » Wed, Apr 13, 2016, 7:32 PM UTC

pcl wrote: post #9

I love the tool itself... have you guys thought about some way to integrate it into Chrome or FF as a development / debugging tool?

We've been advocating moving our visual implementation (or something similar) to dev tools in both FF and Chrome. Here are some before/after examples to show you how a more abstract input method can really speed up development: http://things-that-web-inspectors-should-have.webflow.io/