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

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

Screenshot

Desktop

Mobile

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-product-preview-card-using-css-grid-VHa9lno4Au
• Live Site URL: https://ananfito.github.io/product-preview-card

My process

I started with the HTML file and built out the sections of the page starting with a div container for both the image and product text. Then I created a div containers for the product text and the price. After that I moved on to styling starting with the desktop version before moving on to the mobile version.

Built with

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

What I learned

This project introduced me to the HTML picture. This allows you to have multiple image files of different sizes that can be used to correspond to different screen sizes. This was particularly useful for having two different images -- one for desktop and one for mobile -- that need to be displayed on different screen sizes without having to use extra bandwidth or storage.

Here's the excerpt for the HTML in this project that makes use of this element:

<picture>
  <source media="(min-width: 600px)" srcset="./images/image-product-desktop.jpg">
  <source media="(max-width: 600px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="perfume bottle resting on a table top">

</picture>

Useful resources

• The HTML picture element explained (YouTube Tutorial by Kevin Powell) - This helped me understand how to implement the HTML picture element.
• How To Add SVG Image Animation on HTML CSS Website Tutorial (YouTube Tutorial by Easy Tutorials) - This help me figure out how to properly implement the SVG element for the button on this page.

Author

• Website - Anthony Nanfito
• Frontend Mentor - @ananfito
• Twitter - @wordsbyfifi

Acknowledgments

Special thanks to Alex Marshall for answer my call for help on the Frontend Mentor Slack channel and introducing me to the picture element. Thanks Alex!