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 Components / HTML5 + CSS ( flexbox used )

ricardodccβ€’ 110

@ricardodcc

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


I tried to create this component using Flexbox, but I could not get the cart image and can't see why... Can someone help me out? Another thing is the button that is not clickable and I can't figure out why...

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • Your button is clickable; however, there's an issue. To fix it, you should use cursor: pointer on the button and utilize a pseudo-selector :hover to change its background color to another color. This will provide a visual indication to users that the button is interactive when hovered over.
  • Use <del> for discounted prices.
  • Avoid redundant words in alt attributes (e.g., "image", "photo", "picture").
  • For decorative images like the cart-icon, use an empty alt attribute. Learn more here πŸ“˜. Additional insights on the alt attribute in this article πŸ“˜.

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

1

ricardodccβ€’ 110

@ricardodcc

Posted

Hey, @MelvinAguilar :) , thanks for the suggestions. Going to take those to improve the next ones.

0

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