This was more watching him figure out how to do something than a prepped video. No big deal, but I prefer the prepped ones so there's less back tracking (not thta he did that much)

Best example I've seen of `body { min-height: 100vh; display: grid; place-content: center; }`css` for centing text

I didn't things inside a section instead of an entirely black page so I could write these notes.

This approach is using subgrid

It doesn't look the same for me in firefox as chrome. Firefox is what he was using so that's what I'm looking at during dev.

Saw `padding-block`css` for the first time. Need to look into that

I'm not sure I'd seen `box-shadow`css` before either. But, maybe I have? EIther way, something to play around with

Use a `border-radius: 50%;`css` to make an image a circle

If you don't do a reset on a page you can do `.example < * { margin: 0;}`css` to reset everything inside specific elements

Can do `border-radius: 100vw;` on a div with a 1px border to add a pill shape around it. (Don't use %, it'll turn into an oval). See the _Active__ text in the example.

`1ex`css` is for the height of a lowercase letter (not sure which one but probably _e__ or _x__?)

The `status::before`css` combined with the flex box in `.status`css` is a very cool way to add the little dots in front of text.

Very cool technique of using the data attribute to define a variable that other things use.

This is pretty good box shadow `box-shadow: 0 0 1rem rgb(0 0 0 / .3);`css`