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
Enthroned07โ€ข 40

@Enthroned07

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


Feedbacks are welcomed. Thank you.

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML ๐Ÿท๏ธ:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source ๐Ÿ“˜

CSS ๐ŸŽจ:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource ๐Ÿ“˜.

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

1

Enthroned07โ€ข 40

@Enthroned07

Posted

Thank you very much for your suggestion, i'll make improvement. @MelvinAguilar

0
Daniel ๐Ÿ›ธโ€ข 36,180

@danielmrz-dev

Posted

Hello @Enthroned07!

Your project looks great!

I noticed that you used margin to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

Enthroned07โ€ข 40

@Enthroned07

Posted

Thanks so much for the advice, i'll definitely put it to use next time. @danielmrz-dev

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