Skip to content

The solution for product preview card component challenge on Frontend Mentor (HTML, CSS and Newbie).

Notifications You must be signed in to change notification settings

Des2Dev/product-preview-card-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Mobile view

Desktop view

Links

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

Author