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 with hover effect and responsive design

@CamilleClinchamp

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


What are you most proud of, and what would you do differently next time?

I guess I'm happy with how I handled the responsive aspect of the challenge since I usually struggle with that.

What challenges did you encounter, and how did you overcome them?

I struggle the most with the font weights, defining them, and using them. It kept putting all the text in bold, not sure why.

What specific areas of your project would you like help with?

How to handle the font size without media queries (it probably has to do with relative units like em, rem, etc... but I still need to learn more about it).

Community feedback

@mmandziuk

Posted

  1. The HTML structure is relatively semantic, with appropriate use of <article>, <img>, <p>, and <h1> tags to represent different types of content. However, adding <header>, <footer>, and <time> elements for the publication date could enhance semantic clarity.

  2. The solution appears to be reasonably accessible, with alt text provided for images and readable text content. Improvements could include ensuring proper contrast ratios for text and background colors, as well as adding ARIA attributes for screen reader users, such as aria-label for the tag and date.

  3. The layout seems to adapt reasonably well to different screen sizes, as demonstrated by the media queries adjusting the width of the article and image for smaller devices. However, further testing on a wider range of screen sizes and devices may be beneficial to ensure consistent display.

  4. The CSS is relatively well-structured and readable, with clear selectors and comments provided for different sections of the stylesheet. However, some properties could be grouped more logically, and redundant declarations (e.g., font-weight: 800; repeated) could be consolidated for improved maintainability. Design Consistency:

  5. The solution closely resembles the provided design, with similar colors, typography, and layout. However, minor adjustments may be needed to achieve pixel-perfect fidelity, such as refining spacing or alignment for optimal visual appeal.

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