Submitted about 1 month ago

Responsive product preview card component using flexbox

accessibility

Rupali•890

@rupali317

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

I am happy that my estimation for completing this challenge was accurate. I would like to improve the metrics of Largest Contentful Paint

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

The image did not scale according to the height of the card. I approached this issue by assigning a 100% height to the image. However, I am open to better ideas on how this can be handled.

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

Can I improve how I handle image aspect ratios since PageSpeed Insights marked this as a problem?

Code

Please log in to post a comment

Community feedback

Harsh Kumar•3,410
@thisisharsh7
Posted about 1 month ago
Great job on this! 🎉 It's awesome that your time estimation was on point — that's a valuable skill that only gets better with experience. And it’s great to see you're paying attention to performance metrics like Largest Contentful Paint (LCP).

Regarding your image scaling and aspect ratio concerns: Fixed height vs. Aspect Ratio Box: Instead of hardcoding the height (e.g., height: 245px), you might consider using aspect-ratio (e.g., aspect-ratio: 4 / 3) — it helps the image scale responsively while maintaining its intended shape. For example:
```
picture img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}
```
This can also help reduce layout shift, which improves LCP scores.

Lazy-loading: You’ve used loading="eager" which is great for LCP if the image is above the fold — just be sure it's genuinely the hero image (which it is here). If not, consider switching to loading="lazy".

Preload typo: Small thing — in the <head>, there's a typo in one of the <link> tags: rel="prepload" should be rel="preload".

Overall: Your semantic HTML is solid, and the attention to accessibility with aria-labels and visually-hidden text is excellent. 🙌 If you're experimenting with performance optimization and accessibility, you're definitely on the right track.
Marked as helpful

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