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

Note: Delete this note and update the table of contents based on what sections you keep.

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 Version

Desktop Version

Links

• Solution URL: Frontend Mentor solution
• Live Site URL: dz-product-preview-card-component

My process

Built with

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

What I learned

In this challenge, I learned how to work with fluid space and how to build a responsive grid layout without using media queries. I also revisited how I used custom properties, this time I used only primitives without tokens to keep it easier to maintain, but for the next challenge, I'll combine primitives and tokens with this approach.

.proud-of-this-css {
  /* Single column on small device become two columns layout on large device */
  grid-template-columns: repeat(auto-fit, minmax( 18rem, 1fr));

  /* Fluid margin 1rem on small device growing up to 1.5rem on large device */
  margin-block-start: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
}

Continued development

While awaiting JavaScript challenges, I'll be focused on CSS Grid, Flexbox, Fluid typography, Fluid spacing, Custom properties and how to build responsive layouts without using media queries.

Useful resources

• Responsive grid - Short article about responsive grid layout.

• Responsive grid - Another article on how to create responsive grid layout.

• Responsive grid - Last usefull article on how to make responsive grid layout without using media queries.

• How to make responsive image - In this article we can understand how to use <picture> to display images based on screen device.

• CSS Reset by Andy Bell - One of the best CSS around the web.

Author

• Frontend Mentor - @dedo-dev
• Linkedin - @daniele-zeppieri