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
  • 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

Screenshot

Desktop Version

Mobile Version

Links

• Solution URL: https://github.com/Tripex48/FEM_Product-preview-card-component
• Live Site URL: https://Tripex48.github.io/FEM_Product-preview-card-component

My process

Built with

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

What I learned

I learned about the HTML <picture> tag and how it gives web developers flexibility in specfying image resources. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

<picture>
  <source media="(max-width:650px)" srcset="image-product-mobile.jpg" />
  <img src="image-product-desktop.jpg" alt="Gabrielle Parfum" />
</picture>

Useful resources

• CSS reset - A great modern CSS reset that ensures a clean (default) start to any web development project.
• Learn flexbox the easy way - A video from Kevin Powell discussing the properties and workings of CSS Flexbox.

Author

• Frontend Mentor - @Tripex48
• Twitter - @jcoertze

Acknowledgments

Thank you to FrontEnd Mentor for providing this challenge.