I Discovered a Lot of Things on this Blog Preview Card Challenge

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

I tried not to add unnecessary semantic on this challenge as this is only a card component, and I will remember this on the future challenges.

Also I discovered a lot of things related with how to make HTML result looks closely with the design. I hope that my discoveries put me on the right track.

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

🔷 How to Setup Local Fonts

I use this code to setup local variable font:

@font-face {
  font-family: 'Figtree';
  font-weight: 500, 800;
  src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
}

I also used this code to setup static fonts:

@font-face {
  font-family: 'Figtree';
  font-weight: 500;
  src: url('./assets/fonts/static/Figtree-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-weight: 800;
  src: url('./assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
}

I found that the challenge provides the wrong static font asset (thanks to @Darkstar). If anyone faced the same issue, you can just download Figtree-Medium.ttf directly from the Google Fonts and replace the Figtree-SemiBold.ttf, or use variable font altogether.

🔷 How to Make HTML Result as Closely as Possible with The Design

This challenge made me discover a lot of things: How the Figma strokes behave differently with CSS Borders, why the line-height didn't correctly calculated using the element's font size, and why the inspector tab showed decimal numbers. The details of this can be read here.

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

• Usually when I saw a card component, it didn't have interactive elements inside the card. But the card element itself as a whole is interactive (can get focus, hover, has animation, etc). So this challenge is a bit confusing to me. But nevertheless, I did the challenge by adding the anchor element inside the heading, wrapping the text.
• I used figure element to wrap the image, but I removed it. As this is only a component, and the blog page will list many of this components so the image won't relate with the main content of the page. What is you opinion?
• Is wrapping the published date with the time element a best practice?
• I'm using BEM together with nested CSS. Do you recommend this method for more complex challenge?

Feels free to give suggestions if you see some of my code needs improvements. And also I would greatly appreciate if you could review and give feedback (or comments) to my process and discoveries on this challenge.