Skip to content
Submitted over 2 years ago

Product Preview

sass/scss
Hamdi Kamel•180
@hamdi4-beep
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How would you recommend turning a mockup into HTML code?

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey @hamdi4-beep, some suggestions to improve you code:

    • For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images

    Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.

    Here is an example of how it works: EXAMPLE

    Syntax:

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    More Info:

    https://www.w3schools.com/html/html_images_picture.asp

    https://web.dev/learn/design/picture-element/

    Happy Coding! 👻🎃

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