Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

#accessibility#airtable#backbone#web-components#emotion
Muhammed• 60

@Muhammed61699

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is welcome.

Community feedback

Dongmo Shu• 280

@dongmo-shu

Posted

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

@Muhammed61699

Posted

@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
Discord logo

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