Responsive card page using Flexbox/CSS Grid tandem

What are you most proud of, and what would you do differently next time?

I'm proud of myself for sticking with it. I had to step away from this challenge a couple of times because CSS Grid was testing my patience. It was a lot of trial and error to get the two larger layouts just right, but alas, I had to reference documentation and a video to figure out how to do it. It's a normal thing to do, but frustration got the better of me. I think next time I want to do a lot of reading before finding a video, actually look into the documentation, and figure it out on my own.

I didn't estimate the amount of time this challenge would take per the challenges ideas, but I definitely thing I should have. I think from here on out I'm going to keep a written or digital log of the minutes/hours I put in to each project.

I also didn't try a preprocessor simply because I don't think I'm ready. Sass definitely looks attractive, but it's something I want to learn further down the road once I have a bit more CSS experience under my belt. I'm just more comfortable with native right now.

What challenges did you encounter, and how did you overcome them?

CSS Grid was really challenging. I had an idea of how it worked, but it had been a while since I had used it; I was used to using Flexbox up until this point. I tried using rem units to get the grid layout right, but it just wasn't working. Eventually, I found videos by David Cross and Kevin Powell that helped big time.

What specific areas of your project would you like help with?

Which sources of documentation do people use most? I like Mozilla MDN and use it, but for some reason, this time digging into CSS Grid felt more like a maze than anything. I didn't find grid-areas on the first time through. Is there documentation that's laid out a little better/has better flow? Open to suggestions.