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

#bootstrap

@Horv-Kitty

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first challenge. It wasn't hard, but I spent a lot of time polishing it. If you have any suggestions on how to do it better, especially the responsive part then that would be great to hear about it. :)

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hi! Horv-Kitty, Congratulations on completing your first challenge! Your solution looks clean and responds quite well!

I noticed that you're switching the images with JavaScript, which does get the job done. However, a more appropriate way to do this would be to use the <picture/> tag. You can learn about it here.

I would also add : focus styles to the "Add to Cart" button to make it more accessible.

Hope this helps :)

Marked as helpful

1

@Horv-Kitty

Posted

@buneeIsSlo Hi bunee, I changed the code and this is a lot easier and works very well! Thank you for the advice and for taking the time to look through it! :)

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