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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• 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

Screenshots

Desktop	Mobile

Links

• Solution URL: github.com/albina0104/product-preview-card-component
• Live Site URL: albina0104.github.io/product-preview-card-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• How to make an image cover all of the parent element:

.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Also if a parent element has rounded corners, we have to use overflow: hidden; on the parent element in order to hide sharp corners of the image.

• When we add a hover effect to an element in CSS, it sticks on touch devices. This article (How to prevent sticky hover effects for buttons on touch devices?) helped me to solve the issue with a CSS media query. This adds a hover effect only on devices that support hover; no hover effect is applied on touch devices:

@media (hover: hover) {
    .btn:hover {
        background-color: var(--darker-cyan);
    }
}

Useful resources

• How to name css classes - This article helped me to choose names for my classes. I really liked some pieces of advice from this article and will use them going forward. Especially these:
  • "Put the class name at the lowest possible level" is really useful advice, and the linked article explaining why.
  • BEM naming convention is a good idea: "double dash" means variation of the element, "double underscore" means children of the element.

Author

• Frontend Mentor - @albina0104
• GitHub - albina0104