Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

The challenge was to build out a product preview card component and get it looking as close to the design as possible. Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Desktop Screenshot

Mobile Screenshot

Links

• Solution URL: FEM Product Preview Card

My process

Built with

• Semantic HTML5 markup
• SASS
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

This was the first time I used the srcset property for an image. It helps the site load faster on mobile sites, but I did find that when resizing the site to check responsiveness I had to reload the site to make sure the right image was being loaded.

<img class="card__image" srcset="images\image-product-mobile.jpg 375w, images\image-product-desktop.jpg, 686w"
      sizes="(max-width: 600px) 375px, 686px" alt="CHANEL Gabrielle Essence Eau De Parfum"
      src="images\image-product-desktop.jpg">

I also used SASS class concatenation to create classes with a high degree of specificity while maintaining readable and logical code.

.card {
  &__image {}

  &__content {
    &__headers {}
  }
}

Continued development

This was a fun project, and having a prebuilt card that I can include in future projects will surely be useful. I've built it in a way that by changing a few parameters, it could easily be used in another project.

Useful resources

• Responsive Images - MDN Is alway a great resource, and this helped me figure out how to use srcset while working on this project..
• SCSS "&" explained - This is a great article which which explains how to use the ampersand in SCSS.

Author

• Twitter - @Mich_Codes
• Frontend Mentor - @mich-codes-sa