I like the idea but I stumbled on a classical CSS problem: wasn't able to center an icon. There were few alignment options, but I might have missed them, maybe they were in another place than I looked.
Confession time: if I'm doing something quick and disposable in raw HTML I still just throw in a <center> tag, because I can't be bothered to screw with CSS centering when I need something to just work, and right now.
Because I learned <center> like 20 years ago and it still works, while some of that I've only been exposed to in the last couple years (multiple "this is the right way to center" notions have come and gone since trusty ol' <center> became "bad") and I'd have much lower confidence it'd look the same in my browser as another.
[EDIT] I'm talking about situations like "we need an ugly informational page here for an hour" and all or some part of it would look better centered, or if I'm throwing up a placeholder page on a personal site. Those kinds of things, I'm not gonna google "what's the correct 2020 CSS to do what <center> does" and end up with a bunch of caveats and gotchas when I could just <center> and move on with my life.
And the latest browsers have finally finished implementing the 3D parallaxing layout system which has finally overtaken the other 6 layout systems. It takes a few more lines but it guarantees the compositing for AR is consistent regardless of surface. Meanwhile the center tag actually still just works.
The tutorial project uses a limited number of components. The purpose of the tutorial was to show how to work with the components, as well as Webcodesk features. But you can create components and add properties only in the local version of Webcodesk.
CSS is a set of concepts. CSS contains a set of layout models, such as flexbox. You need to learn a layout model. There is no other way. I like Flexbox. It's easy to center in Flexbox.