Blog Preview Card of Frontend Mentor

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  This needs a lot of the same changes as I fed back on your social links solution just now.

  A few different ones for this though:

  • all content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
  • if using inline svgs you must decide if the image is meaningful or decorative just like you would with an img element and deciding how to treat the alt attribute. The way you handle that difference is different with inline svgs though as they don't accept the alt attribute. If it's decorative, you can add aria-hidden set to true. If it's meaningful content look up how to accessibly label/name svgs.
  • you've missed out the link inside the heading element that should be wrapping the blog title. This means there would be no way for users to access this blog, making the component useless.
  • the picture element code is invalid html. Change that picture element to a div. And change the span inside it to a paragraph.
  • never style the html element or add hover effects to it! The hover style must be attached to the link (currently missing).
  • to make the whole card clickable you would then need to: add position relative to the card, add a pseudo element to the link sized to fill the card and positioned absolutely over it. That will make the link area cover the card.
  • most other css changes are the same as in the other challenge so apply them all here (note this challenge also does not need a media query).

  Marked as helpful

  0
• 

  Julius Macharia•100

  @MashaKE254Posted 8 months ago

  This actually looks really good. For the learning encased in a yellow background, what tag did you use there.

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  @Jumanji-21 that should be a paragraph.

  Marked as helpful

  1