kendo-demo VS flexboxfroggy

Last week, I was complaining to a coworker about how difficult it was for folks to explore a demo app I had built for KendoReact, since I didn’t have it hosted anywhere. I was debating whether to go through all the hoops of buying a domain name and everything when he asked: “Why not just use Github Pages?”

frame.scss in the Kendo demo app – a great real-world example of a complex grid to learn from

And if you're looking for a real-world example of a more complex grid, check out the frame.scss file in the kendo-demo app, where CSS grid was used extensively to create the menu frame that's used on every page.

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.