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

Product preview card component

Ali_Jn 200

@alijenzri

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

Kitalphar 150

@Kitalphar

Posted

Great job!

I like your solution of hiding the unneeded images. I believe in this challenge one goal is to get challengers to use/learn about the srcset attribute for img/picture elements, however as i had a little trouble with that as well, i appreciate the simple solution.

My one critique is that the button doesn't work (mainly because it's not a button) and it also doesn't change color on :hover. While your div can be made to work as a button it's simpler to just use a button element and style it according to your need.

0

Ali_Jn 200

@alijenzri

Posted

Thank you for your feedback; I truly appreciate it! I'm glad you liked the solution of hiding the unnecessary images. I agree that using the srcset attribute is a valuable approach for handling responsive images, and it's great to see others experimenting with it.

Regarding your critique about the button, I completely understand. It would indeed be simpler and more effective to use a proper <button> element for that functionality, allowing for better accessibility and built-in styling options like :hover. Thanks for pointing that out! I'll make sure to incorporate your suggestion to improve the design@Kitalphar

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