Skip to content
Submitted 3 months ago

Solution to Blog preview card

CAF2801•30
@CAF2801
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Steven Stroud•11,910
    @StroudyPosted 3 months 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
    0
    CAF2801•30
    @CAF2801Posted 3 months ago

    @Stroudy

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

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord