- 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 [TODO: Code shorthand span ] for the first time. Need to look into that

- I'm not sure I'd seen ` box - shadow [TODO: Code shorthand span ] before either. But, maybe I have? EIther way, something to play around with

- Use a ` border - radius : 50%; [TODO: Code shorthand span ] to make an image a circle

- If you don't do a reset on a page you can do ` .example > * { margin : 0;} [TODO: Code shorthand span ] to reset everything inside specific elements

- Can do [TODO: Code shorthand span ] 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 [TODO: Code shorthand span ] is for the height of a lowercase letter (not sure which one but probably e or x ?)

- The ` status : : before [TODO: Code shorthand span ] combined with the flex box in ` .status [TODO: Code shorthand span ] 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 `

Hi George

You can contact us whenever you need help

Start Chatting

Essie Walton

Active

Send a message