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-tailwind
• Live Site URL: https://Tripex48.github.io/FEM_Product-preview-card-component-tailwind

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS
• Grid & 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

• Tailwind CSS Cheatsheet - A convenient cheatsheet showing the different Tailwind CSS utility classes.
• Tailwind CSS Plugin for Prettier - A Prettier plugin that automatically sorts utility classes based on the Tailwind CSS recommended class order.
• 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.