material-web VS flexboxfroggy

For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.

Guess there was a 1.0 3 weeks ago: https://github.com/material-components/material-web/discussi...

There is a new “official” one in the works here [1] that uses lots of the “latest and greatest stuff” and should be very fast when it’s finished (later this year). As far as I know it’s set to become the new default company wide implementation of Material on web.

[1] https://github.com/material-components/material-web

I'm using material-web web components inside a form with felte.dev

If you're going for full SSR and don't want to have to worry about JavaScript, I'd just grab the MDC web components library from Google. That's going to be the easiest time you'll have without implementing a front end framework.

Ultimately, I'd like to be able to write reasonably complex client/server web apps in Rust, so the next medium term thing on my list is web components (as a consumer). That'll allow a lot of existing Javascript components to be reused. For example: Microsoft Fast, Material Web Components and UI5.

Material Design (Google)

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.