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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Links

• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• font-size: 62.5% trick

What I learned

I learned about using different images depending on the size of the viewport. This article breaks down a few options. I first tried using img srcset but this approach is only good if the image is the same at different sizes, just different resolutions. Since in this project, the image is cropped differently for the different sizes, it doesn't work. The image doesn't change to the correct crop as you resize in a chromium browser.

<section class="hero">
  <img 
    src="./images/image-product-mobile.jpg" 
    alt="Flat lay of perfume surrounded by leaves" 
    sizes="(min-width: 600px) 300px, (max-width: 599px) 343px"
    srcset="./images/image-product-desktop.jpg 300w, ./images/image-product-mobile.jpg 343w"
  />
</section>

A better option is using the <picture> tag since this gives finer control of which photo to use for different screen size.

<section class="hero">
  <picture>
    <source srcset="images/image-product-desktop.jpg" media="(min-width: 600px)" />
    <img src="images/image-product-mobile.jpg" alt="Flat lay of perfume surrounded by leaves" />
  </picture>
</section>

Note that the CSS is selecting on img rather than picture to apply styles:

.hero img {
  border-radius: 10px 10px 0 0;
  width: 100%;
}

Other handy trick to center the component on the screen which I've used multiple times now:

body {
 display: grid;
 height: 100vh;
 justify-content: center;
 align-items: center;
 align-content: center;
}

Continued development

I want to continue to evolve my process, and start adding in additional tools like trying out css pre-compilers, etc.

I also want to add accessibility into the process as well. Coming up I'm going to do an accessibility pass on all past projects, get familiar with the tools and rules so I can be thinking about accessibility thoroughly throughout development.

Useful resources

• This article on responsive images helped me understand the different options and in what instance you'd want to use each technique.

Author

• Website - cassibrenci.dev
• Frontend Mentor - @cnbrenci

Acknowledgments

I would like to acknowledge my accountability buddy in life @mlooper5 for working on this project together with me in parallel :-D