8 ms·

Flexbox Froggy – A game for learning CSS flexbox

317 points by mrzool 5y ago

Karsteski 5y ago
Honestly gonna try this out because I've been rewriting my personal website in plain HTML/CSS and I have a bit of trouble positioning things. Thanks!
- klabb3 5y ago
  Flexbox is much easier to grok than the old ways of floats and clearfix. Hot tip: Use different background colors when you play around so you can see each of the elements.
  - chrismorgan 5y ago
    Firefox dev tools have some useful stuff for identifying such things in flex and grid, handy for flexbox and extremely useful in grid. In the DOM tree in the Inspector tab, you click on the “flex” or “grid” label and it enables it, or enable it in the Layout subtab on an element. I think Chromium has decent tooling along these lines now too.
thoughtpalette 5y ago
Remember this when it first came out. Was a great resource.
cpmsmith 5y ago
This game definitely helped me to wrap my head around the changes Flexbox allows with inline/block axes, but looking back, it really glosses over the actual "flexible box" part, i.e. child elements growing and shrinking, intrinsic sizing, etc. Are there any similar resources that touch on that aspect more?
- telagraphic 5y ago
  I made https://www.flexulator.com https://www.flexulator.com to visually explain the spacing algorithm for the grow and shrink properties. You can add/remove children to see how the algorithm calculates the width as the viewport size changes. Hope this is useful!
- dylan604 5y ago
  yeah, the 'flex: 1' or 'align-self:stretch' types of things really are what gets the typical website column and rows type layout to work.
- Apotheos 5y ago
  Flexbox Zombies is what you're looking for I think.
ogazitt 5y ago
When this came out, I spent a couple of hours positioning frogs. I think I even learned some CSS. It's as addictive as Wordle :)
- sugaroverflow 5y ago
  Agree :) it's got that fun and memorable quality. I spent hours on this game when I was working in web dev and had a project using flexbox.
warning26 5y ago
Hands down, the best Flexbox tutorial I've ever done.
otras 5y ago
Also highly recommend the sibling game Grid Garden for working with CSS grid layout: https://cssgridgarden.com/ https://cssgridgarden.com/
memish 5y ago
svat 5y ago
Sometime last year, I started doing these 24 exercises in TeX/LaTeX -- when I started, my idea was to show how TeX's very simple box-glue-penalty model (its "glue" is like springs with specified stretch and shrink) is yet general enough to do all the many things that Flexbox can do. I never got around to finishing it, and in the process I realized that much of what Flexbox focuses on are purely user-conveniences (e.g. allowing the user to specify "boxes" in a different order), and some of it (e.g. vertical typesetting) is actually nontrivial with TeX, though doable (and used by many in practice, wrapped into packages, which I was hoping not to use). So my project is abandoned for now and the existing document is in a very unpolished state, but in the meantime if anyone is interested, take a look -- (it has spoilers for the CSS exercises, and most of it only makes sense if you look at the (La)TeX source code, of which I'm definitely not an expert): https://www.overleaf.com/read/ssmrvhpwrmpn https://www.overleaf.com/read/ssmrvhpwrmpn
- eloeffler 5y ago
  Thisbis so very cool, thanks!
40four 5y ago
This and Grid Garden have been around for a while and seem to come up at least once a year. Great resources no doubt, always fun! The best past threads from both -> Froggy https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909 Garden https://news.ycombinator.com/item?id=18753358 https://news.ycombinator.com/item?id=18753358 https://news.ycombinator.com/item?id=14041367 https://news.ycombinator.com/item?id=14041367
lelandfe 5y ago
I had my entire team of FE engs take this when it came out! It’s really a lovely tool and it helped a lot of our folks grok how to start transitioning to a flex model.
webmobdev 5y ago
For those already familiar with CSS, Css Tricks also has very useful guides on: - Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Grids - https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
dfabulich 5y ago
Flexbox Froggy is good, but I prefer Flexbox Zombies. It's got a better hint system, better graphics, and a story. https://mastery.games/flexboxzombies/ https://mastery.games/flexboxzombies/
jdkjs 5y ago
Is it worth it to use flexbox now that grid exists? I’m not sure if they solve the same kind of problems.
- frosted-flakes 5y ago
  Different problems, 1D vs 2D. There's some overlap, but they attack the problem from different directions. Flex child elements determine their own size, while the parent grid determines the size of the child grid elements.
- chrismorgan 5y ago
  There’s a lot of overlap between the two, but there are also various problems that one can solve that the other can’t. Grid is 2D with limited 1D-like auto placement, whereas Flex is 1D with limited 2D-like wrapping.
sabujp 5y ago
I taught a web development/css course for google codenext, would love to have known about this
conartist 5y ago
Flexbox Froggy is a great starting point, but nothing helps you solidify this info better than building layouts and components.
Osiris 5y ago
I was forced into frontend development a few years due to a priority shift at my company (I was a backend dev) and these tools were extremely helpful. I highly recommend them to anyone getting into frontend development.
- mannymanman 5y ago
  Any other tools you recommend for learning frontend?
  - Osiris 5y ago
    I got thrown into an existing application. The best way to learn React was really just to work inside an existing code base so you can see existing patterns.
seer 5y ago
Honestly, the thing that made me “grok” flexbox, and actually start thinking in it, was figma’s auto layout. As a dev from the 2000s, I had tables and floats seared into my mind. Any design problem layout problem boiled down to that, and I just used flexbox to make it easier. But figma … that thing made me actually _think_ in responsive layouts. Not sure how they’ve implemented it, but auto layout just feels like an “interface to flexbox”. After a couple of projects, in my mind now everything is just auto layouts, and thus I’m now defaulting to using flexbox everywhere. Only more exotic design issues now need something different.
mannymanman 5y ago
Are people aware of similar gamified approaches to learn web dev/programming concepts? This game definitely helped me grok flexbox
- KronisLV 5y ago
  I've found that interactive tutorials/courses, like those that KataCoda seems to offer are a pretty interesting approach: https://www.katacoda.com/ https://www.katacoda.com/ (someone once linked one of their Kubernetes courses, it was pretty nice; seems to be locked behind a signup now) There was a site that also helps you learn Git in a really nice visual way: https://learngitbranching.js.org/ https://learngitbranching.js.org/ On a slightly unrelated note, i think that it's also important to figure out what to learn in the first place. Therefore, i think that this site is pretty useful for seeing some of the common technologies or practices: https://roadmap.sh/ https://roadmap.sh/
- leppr 5y ago
  There are many more games apart from the Flexbox and Grid ones from this creator[1]. CryptoZombies[2] is often the recommended start for anyone wanting to learn Ethereum's Solidity and associated front-end library. It's not as gamified though. [1]: https://codepip.com/ https://codepip.com/ [2]: https://cryptozombies.io/en/course/ https://cryptozombies.io/en/course/
jdefelice 5y ago
Would love to see a tailwind version of this. As I know the class names and what the properties do, I just forget the syntax without the help of an IDE.

317 points by mrzool 5y ago

Honestly gonna try this out because I've been rewriting my personal website in plain HTML/CSS and I have a bit of trouble positioning things. Thanks!

klabb3 5y ago
Flexbox is much easier to grok than the old ways of floats and clearfix. Hot tip: Use different background colors when you play around so you can see each of the elements.
- chrismorgan 5y ago
  Firefox dev tools have some useful stuff for identifying such things in flex and grid, handy for flexbox and extremely useful in grid. In the DOM tree in the Inspector tab, you click on the “flex” or “grid” label and it enables it, or enable it in the Layout subtab on an element. I think Chromium has decent tooling along these lines now too.

thoughtpalette 5y ago

Remember this when it first came out. Was a great resource.

cpmsmith 5y ago

This game definitely helped me to wrap my head around the changes Flexbox allows with inline/block axes, but looking back, it really glosses over the actual "flexible box" part, i.e. child elements growing and shrinking, intrinsic sizing, etc. Are there any similar resources that touch on that aspect more?

telagraphic 5y ago
I made https://www.flexulator.com https://www.flexulator.com to visually explain the spacing algorithm for the grow and shrink properties. You can add/remove children to see how the algorithm calculates the width as the viewport size changes. Hope this is useful!
dylan604 5y ago
yeah, the 'flex: 1' or 'align-self:stretch' types of things really are what gets the typical website column and rows type layout to work.
Apotheos 5y ago
Flexbox Zombies is what you're looking for I think.

ogazitt 5y ago

When this came out, I spent a couple of hours positioning frogs. I think I even learned some CSS. It's as addictive as Wordle :)

sugaroverflow 5y ago
Agree :) it's got that fun and memorable quality. I spent hours on this game when I was working in web dev and had a project using flexbox.

warning26 5y ago

Hands down, the best Flexbox tutorial I've ever done.

otras 5y ago

Also highly recommend the sibling game Grid Garden for working with CSS grid layout: https://cssgridgarden.com/ https://cssgridgarden.com/

memish 5y ago

svat 5y ago

Sometime last year, I started doing these 24 exercises in TeX/LaTeX -- when I started, my idea was to show how TeX's very simple box-glue-penalty model (its "glue" is like springs with specified stretch and shrink) is yet general enough to do all the many things that Flexbox can do. I never got around to finishing it, and in the process I realized that much of what Flexbox focuses on are purely user-conveniences (e.g. allowing the user to specify "boxes" in a different order), and some of it (e.g. vertical typesetting) is actually nontrivial with TeX, though doable (and used by many in practice, wrapped into packages, which I was hoping not to use). So my project is abandoned for now and the existing document is in a very unpolished state, but in the meantime if anyone is interested, take a look -- (it has spoilers for the CSS exercises, and most of it only makes sense if you look at the (La)TeX source code, of which I'm definitely not an expert): https://www.overleaf.com/read/ssmrvhpwrmpn https://www.overleaf.com/read/ssmrvhpwrmpn

eloeffler 5y ago
Thisbis so very cool, thanks!

40four 5y ago

This and Grid Garden have been around for a while and seem to come up at least once a year. Great resources no doubt, always fun! The best past threads from both -> Froggy https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909 Garden https://news.ycombinator.com/item?id=18753358 https://news.ycombinator.com/item?id=18753358 https://news.ycombinator.com/item?id=14041367 https://news.ycombinator.com/item?id=14041367

lelandfe 5y ago

I had my entire team of FE engs take this when it came out! It’s really a lovely tool and it helped a lot of our folks grok how to start transitioning to a flex model.

webmobdev 5y ago

For those already familiar with CSS, Css Tricks also has very useful guides on: - Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Grids - https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/

dfabulich 5y ago

Flexbox Froggy is good, but I prefer Flexbox Zombies. It's got a better hint system, better graphics, and a story. https://mastery.games/flexboxzombies/ https://mastery.games/flexboxzombies/

jdkjs 5y ago

Is it worth it to use flexbox now that grid exists? I’m not sure if they solve the same kind of problems.

frosted-flakes 5y ago
Different problems, 1D vs 2D. There's some overlap, but they attack the problem from different directions. Flex child elements determine their own size, while the parent grid determines the size of the child grid elements.
chrismorgan 5y ago
There’s a lot of overlap between the two, but there are also various problems that one can solve that the other can’t. Grid is 2D with limited 1D-like auto placement, whereas Flex is 1D with limited 2D-like wrapping.

sabujp 5y ago

I taught a web development/css course for google codenext, would love to have known about this

conartist 5y ago

Flexbox Froggy is a great starting point, but nothing helps you solidify this info better than building layouts and components.

Osiris 5y ago

I was forced into frontend development a few years due to a priority shift at my company (I was a backend dev) and these tools were extremely helpful. I highly recommend them to anyone getting into frontend development.

mannymanman 5y ago
Any other tools you recommend for learning frontend?
- Osiris 5y ago
  I got thrown into an existing application. The best way to learn React was really just to work inside an existing code base so you can see existing patterns.

seer 5y ago

Honestly, the thing that made me “grok” flexbox, and actually start thinking in it, was figma’s auto layout. As a dev from the 2000s, I had tables and floats seared into my mind. Any design problem layout problem boiled down to that, and I just used flexbox to make it easier. But figma … that thing made me actually _think_ in responsive layouts. Not sure how they’ve implemented it, but auto layout just feels like an “interface to flexbox”. After a couple of projects, in my mind now everything is just auto layouts, and thus I’m now defaulting to using flexbox everywhere. Only more exotic design issues now need something different.

mannymanman 5y ago

Are people aware of similar gamified approaches to learn web dev/programming concepts? This game definitely helped me grok flexbox

KronisLV 5y ago
I've found that interactive tutorials/courses, like those that KataCoda seems to offer are a pretty interesting approach: https://www.katacoda.com/ https://www.katacoda.com/ (someone once linked one of their Kubernetes courses, it was pretty nice; seems to be locked behind a signup now) There was a site that also helps you learn Git in a really nice visual way: https://learngitbranching.js.org/ https://learngitbranching.js.org/ On a slightly unrelated note, i think that it's also important to figure out what to learn in the first place. Therefore, i think that this site is pretty useful for seeing some of the common technologies or practices: https://roadmap.sh/ https://roadmap.sh/
leppr 5y ago
There are many more games apart from the Flexbox and Grid ones from this creator[1]. CryptoZombies[2] is often the recommended start for anyone wanting to learn Ethereum's Solidity and associated front-end library. It's not as gamified though. [1]: https://codepip.com/ https://codepip.com/ [2]: https://cryptozombies.io/en/course/ https://cryptozombies.io/en/course/

jdefelice 5y ago

Would love to see a tailwind version of this. As I know the class names and what the properties do, I just forget the syntax without the help of an IDE.