Desktop version with CSS grid

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

I used CSS grid for the first time in this project. It definitely made the layout really convenient. The mobile version also becomes a piece of cake thanks to CSS grid.

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

The biggest challenge was trying to get the top border trim colour to look like what's in the mockup. Initially I used a border, with a solid line. But the problem is that if I set the border thickness to anything less than the border-radius, the border would sort of curve down at the edges. I solved this by using a ::before pseudo-element. I haven't yet had many opportunities to use these pseudo-elements but I can appreciate the power they offer a little more now.

I still struggled a bit because I had to tweak a few settings on both the card class and the card::before class, such as overflow. But eventually I found something that works.

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

I tried using REM for this project instead of pixels. I used a margin top for the spacing between the header and the top of the viewport. I also used a margin top for the cards wrapper. I'm not sure if there is a better way.

One improvement I should make is to use variables for the colors and spacing.

I need more practice with the BEM naming convention.