Blog Card

Hi there! First off, I want to say that you’ve done a really great job with this project—it’s very close to the original design, and the structure of your HTML is solid. Your use of CSS variables is a smart move, and it shows a good understanding of maintainable code. Nice work! 👍

I do have a few suggestions that could help refine things further:

Visual Feedback:

1. It looks like the title is a bit too bold. Be careful not to mix up ExtraBold and Black weights—double-check the Figma file to ensure the correct weight is applied.
2. There are a few areas where vertical spacing feels a little tight. Adding some more space between elements will improve readability and help your design breathe.

About your index.html :

1. Some of your class names, like span for a div, aren’t quite descriptive enough. I’d recommend checking out the BEM method for naming conventions. It’s a simple, consistent way to make your class names clearer and more meaningful.
2. While it’s not a requirement, I’d suggest looking into a CSS reset. It helps reset default browser styles, giving you more control over your design and making the styling more consistent across different browsers.

• css reset

On the CSS:

1. For small projects, using px is okay, but for more scalable and accessible designs, I’d recommend switching to relative units like rem for font sizes and em for spacing (padding, margins). Pixels are fine for small things like border-radius, but they shouldn't be used for larger layout elements or typography.

That being said, your work is impressive! You’re very close to nailing the original design, and your approach shows good attention to detail. Keep up the great work, and best of luck with your next project!

Some Resources :

• Difference BEM/REM
• Why you shouldn't use pixels for font-size
• css reset
• BEM naming convention

I hope this feedback helps, wish you the best for your next projects ! :)