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

Frontend Mentor | Blog preview card

@giamimino

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@krushnasinnarkar

Posted

Hi @giamimino

  1. Wrapper Centering:

    • The body uses display: flex; justify-content: center; align-items: center; for centering, but an additional height property is needed to ensure perfect vertical centering.
    • Suggestion: Add min-height: 100vh; to the body to ensure the wrapper is centered both horizontally and vertically.
  2. Semantic Tags:

    • The current implementation lacks semantic HTML tags.
    • Suggestion: Replace the <div class="wrapper"> with a <main> tag and structure the content with semantic tags like <header>, <section>, <article>, and <footer>.

Summary: The solution follows the color and typography guidelines well and ensures responsiveness for mobile devices. However, the .wrapper class is not fully centered, and the HTML lacks semantic tags, affecting accessibility and structure. Improvements can be made by adjusting the centering technique and using semantic HTML tags.

Feel free to reach out if you have more questions or need further assistance.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!

Marked as helpful

1

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