Skip to content
Submitted 10 months ago

Blog preview card

Muhammed•60
@Muhammed61699
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

All feedback is welcome.

Community feedback

  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @Muhammed61699

    Congratulations on completing the challenge. Your solution looks great.

    Here are some feedbacks I have to improve your code.

    First Always include your <div> inside an HTML landmark. for your solution, have all <div> inside of your <body>, enclosed in the landmark <main>. You can read about HTML landmarks, and their importance in this article

    Second

    When it comes to media queries, I recommend using the unit of measurement rem instead of px. You can read more in this article by FreeCodeCamp.

    Third

    To have your solution at the centre of the page, I recommend you add this.

    body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    I hope this is useful.

    Marked as helpful
    1
    Muhammed•60
    @Muhammed61699Posted 10 months ago

    @Singraft Thank you so much for your feedback I really appreciate it; It is very useful I will apply all your recommendations. Thanks again.

    0

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