Flexbox Froggy – A game for learning CSS flexbox | Hacker News Reader

Flexbox Froggy – A game for learning CSS flexbox

flexboxfroggy.com

317 pointsmrzool31 comments

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

Garden

https://news.ycombinator.com/item?id=18753358

https://news.ycombinator.com/item?id=14041367

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

Thisbis so very cool, thanks!

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?

I made 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!

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.

Flexbox Zombies is what you're looking for I think.

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.

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

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/

- Grids - https://css-tricks.com/snippets/css/complete-guide-grid/

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!

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.

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.

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.

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

I've found that interactive tutorials/courses, like those that KataCoda seems to offer are a pretty interesting approach: 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/

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/

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/

[2]: https://cryptozombies.io/en/course/

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 :)

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.

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

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.

Any other tools you recommend for learning frontend?

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.

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.

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/

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

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

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

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

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.

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.

Reply on news.ycombinator.com