container-query-polyfill VS flexboxfroggy

https://github.com/GoogleChromeLabs/container-query-polyfill There is a polyfill that should make this simple, but I haven't tried it.

For now, there are no polyfills available for style queries. The only polyfill that exists for container queries only covers container size queries, but nothing has been done yet for container style queries at the time of writing.

Google Chrome Labs has produced a polyfill for container queries. Only supports px-based queries. No support yet for container-relative units.

Here I am two years later with reworked solution, which is pure CSS based. For now, it requires Container queries polyfill. Fortunately, there has been one, done by Surma (Google dev)

And also it's related polyfill: https://github.com/GoogleChromeLabs/container-query-polyfill

Flexbox Froggy: A game that teaches Flexbox concepts by positioning frogs on lily pads.

Flexbox Froggy: Learn CSS Flexbox by playing this game.

Flexbox is an important topic of CSS and you can learn it by playing a game called Flexbox Froggy. You can easily learn the properties of Flexbox while having some fun.

See https://flexboxfroggy.com/ https://cssgridgarden.com/ and maybe also https://flukeout.github.io/

Flexbox Froggy - An interactive game to learn and practice CSS Flexbox. Website: https://flexboxfroggy.com/

Flexbox Froggy

This started improving for me recently when I spent more time really learning flexbox and flexgrid. They are part of CSS so no installs needed. It’s a different way of thinking but I’m finally good enough with flexbox that I can tell when I need it and make productive use of it. Knowing these patterns makes a difference for me, since now I can assemble the blocks better than before when I’d just try mostly random css without any guiding principles.

Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.

https://flexboxfroggy.com/

There are other games like this that I haven’t gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy I’m going to try the flexgrid game.

Then after that I’m going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.

Flexbox Froggy is an excellent resource for interactive learning.