Blog Preview Card

Community feedback

• 

  Shanxx191919•60

  @Shanxx191919Posted 15 days ago

  The HTML structure is good overall, using semantic elements like <header>, <main>, and <footer>. However, you could improve accessibility by adding more descriptive alt attributes to the images and using aria-labels or role attributes for better screen reader support. Consider adding more semantic tags like <article> or <section> for improved SEO and readability.

  For responsiveness, the layout is flexible due to the use of flexbox, but you might want to add media queries to fine-tune the layout on smaller screens, especially adjusting the card width and text size. The code is clean and readable, but splitting the CSS into a separate file could improve maintainability, particularly for larger projects.

  Marked as helpful

  1
• 

  Felipe Mata•250

  @BoxyPipesnakePosted 13 days ago

  Hi! Great job on your project!. I did notice a small issue when viewing it on mobile: there’s a bit of horizontal overflow, which causes a slight scroll.

  One way to fix this would be to adjust the .card class. Instead of using width: 384px, try using max-width: 384px. This allows the card to shrink appropriately on smaller screens. Additionally, adding margin will give it some breathing room on the sides, keeping it from touching the edge of the screen.

  1
• 

  Rodolfo C•80

  @rodolfohgcPosted 14 days ago

  Hello, Emanuel!

  Your solution was nearly there, but I recommend some enhancements:

  The border radius and shadows on the card are significantly smaller in your rendition. Please refer to the Figma file, which contains a comprehensive design system; it will provide you with additional details such as colors and font styles. Rather than using the <h2> tag, it would be more semantic and appropriate to use <h1>.

  1