Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card using Flexbox

@Utkarshrajmishra

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@rohitd99

Posted

Hi Utkarsh

Congrats on completing the challenge.

Enjoyed going through it, well structured, and responsive. But I have a few suggestions that will help you improve it.

  1. You've used div's for structuring but I'd suggest using main and section as they are semantic elements.
  2. For representing the deleted text use del instead of p.
  3. The spelling of Perfume is mistaken as Prefume.
  4. Also instead of having two images and changing them through media queries, I'd like to suggest using picture element with two different source's. Here's the MDN doc for the same picture.

Hope it helps

1

Please log in to post a comment

Log in with GitHub
Discord logo

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