Responsive Blog preview card using html and css flexbox

Community feedback

• 

  Mohammad-Moneer•120

  @Mohammad-MoneerPosted 6 months ago

  Hello there, You made a good solution 👍 Your HTML structure is clear and well-organized. However, I noticed that the img elements do not have alternative text. Including descriptive alt text is important for accessibility, as it helps users who rely on screen readers understand the content and purpose of the images. in my solution I have provided an alternative text as follows: HTML: <img decoding="async" src="images/illustration-article.svg" alt="Illustration Article">

  <img src="images/image-avatar.webp" alt="Image Avatar"> (also can be improved to be: alt="Avatar of Greg Hooper")

  Your CSS is well-structured and easy to read. I noticed that you applied the border-radius directly to the image element rather than its wrapper. While this works fine, applying the border-radius to the wrapper can sometimes offer more control, especially if you need to manage overflow or apply additional styling to the container. Here's an example of how you could adjust your CSS:

  CSS: .blog-img { overflow: hidden; border-radius: 10px; }

  .blog-img img { width: 100%; }

  This approach ensures that any overflow from the image is hidden and that the border-radius is consistently applied, which can be particularly useful for maintaining design integrity across different browsers.

  Again, great job on your project! I hope you find this suggestion helpful.

  1
• 

  Nick Dexter•60

  @nickdexterPosted 6 months ago

  Looks great, just a little bigger than the design possibly due to the image size. Maybe try setting a pixel size for the image width instead of 100%.

  Good work!

  1