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

PREVIEW CARD COMPONENT MAIN

@Mar1362

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


waiting for your feedback! if you have some suggestion, i am open to that too . Thank you!

Community feedback

Anna 545

@NitaLewska

Posted

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

1

@Mar1362

Posted

Hi @NitaLewska, thank you for your feedback! i didn't know about <picture> tag, i'll go learn about it right now. i used the css background property in order to be able to change the image depending on the screen size(using media queries conditions) without having to use javascript but if the <picture> tag allows that then i'll go for it event if not too, because your remark is really important. thank you again!

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