Frontend Mentor | Solution to Blog preview card coding challenge solution

Solution retrospective

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

I have learned a lot from the last problem and i used all i know for this problem !

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

The box shadow, it was my first one ever. I used MDN web docs CSS reference to help me.

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

If you find something that can be finetuned let me know :) i know that my solution is not perfect !

Community feedback

@Stroudy

Posted 17 days ago

Hey great job getting it so close to the original, some things I noticed,

Your <html> tag does not have a lang attribute like this <html lang="en"> This will add accessibility to your site.
Missing a <meta> description tag for SEO purposes
It is best practice to have a <main> tag inside your body highlighting the main section.
For your .attribution selector using display: absolute is not a good idea as it moves unintended on different screen sizes.
Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
Another great resource for px to rem converter.

Marked as helpful

@CAF2801

Posted 15 days ago

@Stroudy

Thank you for the tips ! I will check this out for sure !

Solution to Blog preview card