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 with HTML and CSS.

Carlos 310

@CarlosAlfredo1707

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


All feedback is well received, that will help me to improve my skills.

Community feedback

Anna 545

@NitaLewska

Posted

Hi!

you can try and use <picture> tag to display different images instead of changing background. I'm a beginner,too, but I've read that it's okay to use background method with images that aren't really necessary for a user, like different design elements and so on, but those that ARE to be seen no matter what, like product photos, should be definitely put into an <img> or <picture> tags.

If for some reason CSS file fails to upload, our clients will get the image wrapped in <img> anyways, and those in the background won't load =(

So, i recommend you to read about <picture> and srcset property for <img>!

Marked as helpful

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