Stats Preview Card - SCSS, Grid, CSS Animations

@ApplePieGiraffe Thanks - and credit where credit is due! Your "Autumn is Here" animations were so fun and ~smooth~, I knew I had to try my hand at some of them. 😄 Using the "-nth child" selector for the staggered animations was really useful, as in previous projects I'd only used a JS loop.

@brasspetals

Oh, that's cool (I didn't know you saw that)! 😊 And credit where credit is due: I didn't actually come up with that design and interaction themselves—I saw a preview of a powerpoint presentation template that I liked and decided to steal it and create it with HTML and CSS instead. 😎 (But it was a fun little exercise.) 😅 And yeah, nth-child is pretty awesome (especially since you can get pretty crazy with the combinations of items that you can select with it)!

I don't think you need the paragraphs inside the lis by the way, but they're doing no harm so I wouldn't change them ☺

@grace-snow Thank you very much! 😊 I was actually unsure if I should even use an unordered list in this case, or just go for plain, old divs instead. I think I kept the paragraph tags because I hadn't originally used a ul.

For the lis, since the styling is different for the number and label, what would be best to use here?

Thanks for bringing this up as I'd totally forgotten about it once I started working on the animations.

@brasspetals I would use an unordered list with spans inside (one span wrapping either the number or word) , or 3 paragraphs with a span in the same way. The number and word are designed to be read together so it makes sense to keep them in the same meaningful element I think

@grace-snow You're absolutely right that the number and word should be in the same element. Removing the paragraph tags, applying the number styles to the li, and wrapping the word in a span sounds like way to go. Probably save me some lines of code too! 👍

Thanks again, Grace! I love getting into the "nitty gritty" or "nitpicky" (no negative connotation meant) stuff like this. The devil is always in the details. 😄

@brasspetals exactly ☺

Tiny details are what drive standards up and really make you stand out to employers

@RayaneBengaoui Thank you for the kind feedback, and you're welcome - happy to share my learning! 😊

@nirtamir2 Thank you so much for the kind feedback. 😊 I wish I had known about picture elements when I first started coding - they're so useful!