Community feedback

• 

  P

  Kyle Mulqueen•400

  @kmulqueen

  Posted 3 months ago

  Feedback on Blog Preview Card Challenge

  Strengths

  First, congratulations on your solution! You've successfully implemented:

  • The correct overall layout
  • All the main elements required in the challenge
  • A visually appealing design that closely matches the requirements

  Opportunities for Improvement

  Typography

  While the font appears correctly in the Frontend Mentor preview, I noticed that the deployed version doesn't match the specified font in the design. Ensuring consistent typography across all environments would enhance the fidelity to the original design.

  Interactive Elements

  Regarding the hover and focus states:

  • Currently, the card title only changes color when hovering directly over the title itself
  • According to the design specifications, this effect should trigger when hovering anywhere on the card
  • Additionally, the box-shadow should expand slightly on hover to create a subtle elevation effect

  These interactions can be verified in the Figma file's presentation mode for reference.

  Semantic HTML

  I noticed an interesting choice in the author section, where you've used a <ul> (unordered list) with <li> elements containing both the author image and name. While creative, this approach might not be the most semantically appropriate for this content type.

  Consider using a pattern like <figure> with <figcaption> or a simple <div> with appropriate ARIA attributes if needed, which might better represent the relationship between the author's image and name.

  Next Steps

  These are relatively minor adjustments that would bring your implementation even closer to the design specifications. I'd be happy to discuss any of these points further if you'd like additional clarification!

  00