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

1. Frontend Mentor - Product preview card component solution
   1. Table of contents
   2. Overview
      1. The challenge
      2. Screenshot
      3. Links
   3. My process
      1. Built with
      2. What I learned
      3. Useful resources
   4. Author

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

Screenshot

Links

• Solution URL here
• Live site URL here

My process

Built with

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

What I learned

I learned how to use <picture> element for displaying different images based on different screen sizes.

And use of <picture> element reduces the work amount, complexity and use of media queries (@media)

example :

example 1

<picture>
  <source media="(min-width: 600px)" srcset="./image/desktop-view.png" />
  <img src="./image/mobile-view.png" alt="Perfume product picture" />
</picture>

example 2

<picture>
  <source media="(min-width: 768px)" srcset="./image/desktop-view.png" />
  <source media="(min-width: 375px)" srcset="./image/tablet-view.png" />
  <img src="./image/mobile-view.png" alt="Perfume product picture" />
</picture>

In above example 2,

• if the screen is a mobile screen (375px wide or less), then you see the mobile-view.png
• if the screen is a tablet screen (768px wide or less), then you see the tablet-view.png
• and if it is large screen (greater than 768px), then you can see the desktop-view.png

Useful resources

• CSS custom properties
• Flexbox
• BEM methodology
• <picture> element

Author

• Frontend Mentor - @Des2Dev