Skip to content
Submitted 6 months ago

Product Preview Card Component

#sass/scss
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.

Please log in to post a comment

Log in with GitHub

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    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
  • Bruno514•100
    @Bruno514

    looks good!

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