
Flexbox Froggy: A game for learning CSS flexbox - jtwebman
http://flexboxfroggy.com/
======
metasean
Love it!

Reminds me of CSS Diner -
[https://flukeout.github.io/](https://flukeout.github.io/)

~~~
andreiv
I was just the other day searching for a flexbox "game", inspired by CSS
Diner. It seams my "googleing" techniques need some improvement.

~~~
metasean
Or there needs to be more cross-linking and meta tagging, so Google can find
it.

That said, try "flexbox game learning" in duckduckgo ;-) -
[https://duckduckgo.com/?q=flexbox+game+learning&t=ffhp](https://duckduckgo.com/?q=flexbox+game+learning&t=ffhp)

FWIW: _DuckDuckGo ROCKS!_ _DuckDuckGo bang syntax ROCKS!_ Even when DuckDuckGo
itself doesn't rock, it let's you easily, and slightly more privately, search
other search engines
[https://duckduckgo.com/bang](https://duckduckgo.com/bang) so _It ROCKS even
when it doesn 't ROCK!_

------
Carrok
The possible values for justify-content are only displayed on Levels 1 and 2.
By Level 3 you're supposed to have all 5 values memorized even though you've
only used 2 of them? I had to keep flipping back to Level 2 just to get a list
of the possible values. For a game built for someone who has never used flex
before, I think you're assuming too much familiarity with it.

~~~
crisnoble
Just hover over the 'justify-content' displayed in the instructions for level
3+ and you get a nice tooltip showing you the possible values.

~~~
pimlottc
I discovered this myself but it's not immediately obvious. I also found the
final level to be overly difficult without a reference to all the css property
names and values.

~~~
jrapdx3
I agree with you about the last level. I definitely needed the "cheat sheets"
as the options for properties are difficult to remember (names kind of blend
together). Finally I opened another browser window on the site I could refer
to. Then I was able to glean the right options and solve it without too much
difficulty.

------
fvargas
It's a pretty neat way to visualize what the properties do. Learning how
Flexbox works visually, as opposed to referring to a certain popular (and
excellent) guide 10 times a day, is a pretty nice technique.

~~~
Eric_WVGG
I’ve had the scotch.io guide in a browser tab for months now.
[https://scotch.io/tutorials/a-visual-guide-to-
css3-flexbox-p...](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-
properties)

But this game was great! Ten minutes and I think I’m almost ready to ditch the
crutch.

------
pfooti
Thoroughly enjoyed it. I think I just need to run through it about a dozen
more times to keep the difference between align-content, justify-content, and
align-items separate in my head. So many words, so close in meaning.

------
andy_ppp
The final solution was pretty fun.

Here is a gist if you can't get it :-)

[https://gist.github.com/aphillipo/59ab3b54419c97d96687](https://gist.github.com/aphillipo/59ab3b54419c97d96687)

~~~
Keithamus
FYI the site's source also provides the solution:

[https://github.com/thomaspark/flexboxfroggy/blob/gh-
pages/le...](https://github.com/thomaspark/flexboxfroggy/blob/gh-
pages/levels.js#L199)

------
LargeCompanies
So, flex looks to be a better way to create/handle responsive design; rely
less on bootstrap and stuff?

On a similar note Im curious if there is a responsive typography framework
that's out there and people are using? A framework where the text
automatically shrinks down without having to change the font-size in various
media queries?

~~~
Eric_WVGG
yeah look into vw, vh, vmin, and vmax measurements. They’re fantastic and
surprisingly well-supported.

[https://web-design-weekly.com/2014/11/18/viewport-units-vw-v...](https://web-
design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)

~~~
talmand
Or, another option, using rem for font-sizes that bases the size off the font-
size of the html element.

~~~
Eric_WVGG
That solves a different problem. REM is useful for making the value relative
to a master value; v-units make the value relative to the viewport.

I actually use the two in conjunction. I set some my html {font-size: 1.2vw;}
(or whatever), and all type in the document to 1rem (or whatever measurement).
Then I finally step out the html size to major browser breakpoints using old-
fashioned media queries.

~~~
LargeCompanies
cool, do you have any examples of yours you can share?

~~~
Eric_WVGG
I can’t share my recent stuff because it’s still under private development,
but here’s the results of my first experiments in this method, a little rough
around the edges but etc.

[http://midcenturymay.nyc](http://midcenturymay.nyc)

The "master" type size is set to a vh unit, everything else is rem’d off that,
and stepped via media query.

~~~
hanniabu
Masterful, I love it. I can see how you broke this down and it simplifies
things a great deal.

------
brianzelip
Cool js app[0]! I often have to look up flexbox properties. After level 4 of
this game, align and justify are definitely more clear in my mind now. It also
helps to see over and over in each level that these properties are for the
flex parent.

Edit: later levels (~10) begin to help with the discerning the difference
between the flexbox main and cross axes.

[0]
[https://github.com/thomaspark/flexboxfroggy/](https://github.com/thomaspark/flexboxfroggy/)

------
gohrt
The flex command suite seems rather arbitary chosen and named. Doesn't seem to
reflect a decade of experience learning from the pain of CSS.

~~~
drcode
design by committee

~~~
foldor
You know, I'm starting to feel that there is no pleasing everyone. When a
company decides to do a design without consulting a committee, people get all
upset that they broke the standardization process. But when a feature does go
through the process, people will complain about how it was designed and then
blame it for being designed by a committee. What's the solution?

~~~
drcode
Well, the problem is that CSS is a monolithic mess at this point, like many
other standards... If it was made of a selection of loosely-coupled parts,
everyone would be fine with a strong guiding individual streamlining each
individual part, and if you don't like part of the design you can just use
another solution. Eventually CSS will be replaced by something like this (but
it will take many more years, and it will require some rethinking about web
code versioning, sandboxing, how low level web browser reflow algos work,
etc.)

------
estava
Oh man, best game ever. I really wanted to learn it having putting it off for
so long. I can see how I could use it in a framework of mine. Gives me an
excuse to use open web technologies again.

I was revamping some old code of mine, removing outdated technologies of third
parties like YUI... But I noticed that I needed them for layout. But flexbox
can provide an alternative for me.

Thanks a bunch!

------
gohrt
Since the game doesn't show you the effect of "wrong" answers, you're left
haphazardly guessing answers until one is correct, instead of incrementally
learning by exploring.

Game designers, take note: design open-world games that let the player explore
the controls, instead of simply refusing all unwanted actions.

~~~
thomaspark
The game does (should) show you the wrong answers. And if a level requires
multiple properties, you can add one at a time and check them incrementally
clicking the "Submit" button.

~~~
tutts
It does if you hit the submit button, but not if you just hit Enter.

------
Zekio
Damn, this is a great learning tool for teaching people flexbox

------
cfreeman
This is great, but I wish it was longer. The first 23 levels are pretty easy
and it tells you what properties to use, then it drops you into a really
difficult level with no hints. It would be nice if it built up to that with
some medium difficulty levels.

~~~
Sakes
His code is pretty damn awesome. Open the site in chrome. Open web inspector.

Paste this into the console:

levels.push({ name: 'super secret-1', instructions: 'This is a secret level
you get no instructions.', board: 'rggggyyyyy', style: {'flex-direction':
'column-reverse', 'flex-wrap': 'wrap-reverse', 'align-content': 'space-
between', 'justify-content': 'center'}, before: "#pond {\n display: flex;\n",
after: "}", });

Proceed to the secret 25th level! You can create your own levels, and make a
pull request to his git repository if you really want to add some interesting
practice levels. Just modify levels.js.

~~~
kearneyandy
I tried out your secret level, surprisingly easy after level 24 :)

~~~
Sakes
haha, yup, you'd have to modify 'style' attribute in the new level definition.
I didn't test but i'm assuming it determines the position of the lily pads.

You can reference his levels here when trying to create your own.

[https://github.com/thomaspark/flexboxfroggy/blob/gh-
pages/le...](https://github.com/thomaspark/flexboxfroggy/blob/gh-
pages/levels.js)

------
rev087
This was incredibly educational for me. My only feedback/request would be to
reinforce the difference between `align-content` and `align-items`. I still
don't quite get when to use which.

~~~
Keithamus
I agree, the site wasn't so clear.

My understanding is that it seems `align-items` is to do with the children of
the element, while `align-content` is to do with the spacing with regards to
the parent container. In some ways, `align-content` will always imply a
certain "bunching" to the children (they are either stuck to the start, end,
center or spaced evenly in some manner - but never changing order, wrap or
size), whereas `align-items` changes how lone-items behave in the flow, be it
start, end, center or some stretching).

These two URLs provide some decent visual demos & distinction:

[https://css-tricks.com/almanac/properties/a/align-content/](https://css-
tricks.com/almanac/properties/a/align-content/) [https://css-
tricks.com/almanac/properties/a/align-items/](https://css-
tricks.com/almanac/properties/a/align-items/)

------
hanniabu
I've been telling myself to learn flexbox for a while now. Went to check this
game out, got hooked, and learned it in about 10 minutes. Tooooo good, thanks
webman!

------
dismal2
Avoided using flexbox up to now and overall it seems pretty great for some
layout tasks.

I do wonder about the point of the `order` property, would anyone ever want to
mess with this? It seems like something that should absolutely be in your
application code, either client-side javascript or server-side. Using it seems
like it would make a project harder to maintain and understand.

~~~
jewbacca
re `order`: for a usage you probably hadn't considered, that I'm sure you
would agree is purely presentational and not application logic, check out:

[https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexibl...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Holy_Grail_Layout_example)

tldr:

desktop viewport:

    
    
        _header____
        nav|article
    

mobile viewport:

    
    
        header
        article
        nav
    

can be done really easily with flexbox and `order`.

~~~
dismal2
Ah, makes sense

------
amelius
So "display: flex" affects how items within an element are positioned, while
e.g. "display: inline-block" affects how an element itself is positioned. It
seems to me that this is in conflict. Am I overlooking something? Or are the
creators of CSS still not able to figure these kinds of problem out?

~~~
Eric_WVGG
The creators (contributors, really) of CSS very much did figure this problem
out.

Their solution was creating a new paradigm. You need to regard it as different
from display:block and display:inline in the same way that those are
fundamentally different than display:table.

CSS is capable of supporting all sorts of display models… just wait until
display:grid rolls around.

~~~
lukasb
Why not use something like display-contents:flex instead?

~~~
talmand
Because that implies you could have the display and display-contents
properties have values at the same time that can conflict with each other.

The thing is, display: flex does control some aspects of the element it is
applied to. Because there is display: inline-flex. It is roughly the
equivalent of block and inline-block. It's just an added bonus that display:
flex also affects the immediate children, making them flex items to be
manipulated. For instance, make a div display: table and imagine its immediate
children are automatically display: table-row, or something of that nature.

~~~
jewbacca
Doesn't that redundancy kinda suggest that there are two orthogonal things
going on here?

ie,

    
    
        block | inline
          ---------
        flex  | inline-flex
    

What could you label the axes here? Or is this not a valid way to frame the
relationship between these things?

~~~
DiThi
inline and inline-block are not the same thing. inline-flex behaves like
inline-block

~~~
jewbacca
Brainfart. You're right, thank you.

------
ZenoArrow
This is one of the best tutorials I've ever seen. Great idea, great execution.

------
such_a_casual
I think that this is great and I just want to make a suggestion. I see a lot
of these "learn to code/css" run into the same problem where they don't feel
like real games. Give the player a dilemma such as dying if they don't type
the right command fast enough. Resetting the level if they fail.

edit: lvl 15 makes colorblind kids sad :(

edit2: almost, almost
[http://i.imgur.com/egndPZ8.png](http://i.imgur.com/egndPZ8.png)

edit3: champion!

~~~
oneeyedpigeon
I think, maybe, you're taking "game" too literally. First and foremost, it's a
teaching tool, and throwing you back to the start would actually be
counterproductive. It's more of a "fun, imaginary use-case" but "game" sounds
better :-)

~~~
such_a_casual
The levels are small enough that it makes no difference. And as far as
teaching goes, repetition is the name of the game. Resetting on failures just
means typing the same thing multiple times, reinforcing the things you are
having difficulty with. A timer also allows for such things as scoring.

~~~
oneeyedpigeon
Hmmm... now you've got me wondering. Thing is, on the later levels, I found
myself working one property at a time, understanding the effect of that one
property, and building up the complete 'answer'. I'm not sure that handling
the 'wrong answer' as a special case works for this type of approach. The
repetition should (and is, to an extent) be provided by subsequent questions
reusing just-learned knowledge.

There's nothing to stop you starting from the beginning at any point, or
starting from scratch at any point in future. It makes it less of a 'game'
but, like I said, I think you're overplaying the game element.

------
PlzSnow
Just another comment to say the same thing as the others: great idea and
really well done. Congratulations!

------
pistle
Anyone else have to use align-content instead of the "taught" align-items for
24?

------
roneesh
This is an amazing follow up to the greatly missed FlexBoxIn5. Kudos to the
creator!

------
whoiskevin
Being picky here but when the first paragraph says "Guide this frog to the
lilypad on the right" it should probably specify that you are moving all
content in the pond. Just seems that it should start with moving the frog as a
selector or reword that to be a bit more clear.

------
bipin_nag
Awesome. Clears lot of properties from flexbox display. Thanks a ton.

------
Technomaniacz
This is the best way ever to learn!! You sir deserve a cookie...

------
lai
Wow, I think I finally get flexbox now.

------
superjisan
excellent game. thoroughly enjoyed it

