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.
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.
