Skip to content
Submitted 29 days ago

Product Preview Card Component

Andre•50
@dreemanuel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Studying a new language (SASS) when I have just begun learning CSS and realize I still have a lot of ground to cover there, was really daunting at first. But after getting my feet wet in SASS, I realized that it is a more fully-encompassing version of CSS, and I can learn both languages and concepts at the same time.

What challenges did you encounter, and how did you overcome them?

Setting up SASS for the first time, then reading about mixins and functions was a bit much at the beginning, but eventually eased up as I started to write it.

What specific areas of your project would you like help with?

I need help learning to make more use of SASS in place of (and to create better) CSS.

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted 28 days ago

    Hey Andre, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

    Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    Everything else looks great.

    Hope this helps! 👍

    Marked as helpful
    0
    Andre•50
    @dreemanuelPosted 28 days ago

    @AdrianoEscarabote Hey, thanks for your comprehensive feedback! Yes, I will use the <picture> tag for future projects. I have only just learned about it, so the only reason why I used <img> was because of familiarity. If using <picture> has many benefits, what then is the use case for using <img> in today's best practices?

    0
    Andre•50
    @dreemanuelPosted 28 days ago

    @AdrianoEscarabote Done... I used the <picture> tag as you suggested, and will use this method from here on out. Thanks

    1
  • Bruno514•100
    @Bruno514Posted 29 days ago

    looks good!

    1
    Andre•50
    @dreemanuelPosted 28 days ago

    @Bruno514

    thank you!

    0

Please log in to post a comment

Log in with GitHub

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