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

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

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Starting with the mobile version to keep in line with mobile first development.

Built with

• Semantic HTML5 markup

• CSS custom properties

• Flexbox

• Mobile-first workflow

What I learned

Trying to stick to semantic HTML for anything except 100% style required divs.

Using hgroup for the first time.

          <hgroup>
            <h4>PERFUME</h4>
            <h1 class="fraunces">Gabrielle Essence Eau De Parfum</h1>
          </hgroup>

Learning about css variables

:root {
  --primary-background: hsl(30, 38%, 92%);
  --soft-green: hsl(158, 36%, 37%);
  --hover: hsl(156, 42%, 18%, 100%);
  --dark-blue: hsl(212, 21%, 14%);
  --dark-grey: hsl(228, 12%, 48%);
  --white: hsl(0, 0%, 100%);
}

and getting more familiar with importing fonts.

@font-face {
  font-family: 'MonserratBold';
  src: url(Fonts/Montserrat-Bold.ttf);
  font-weight: 700;
}

a nifty trick for most browsers:

check if you can use it

using dev tools to check :hov

Continued development

With more time I would add at least one more media screen query as its an abrasive leapt at the moment from mobile to desktop. I would also consider tablets and orientations. I would love to fix the problem with overflowing text at very narrow screen sizes, the imperfect ratios in desktop view and the convoluted code in the same!

Useful resources

• freeCodeCamp - gave me the inspiration to try transitioning the button pseudoclasses.
• SheCodes - Clear how to for colour variables.
• customFonts - good video on font customisation.

Author

Holly4444

Acknowledgments

"https://www.frontendmentor.io?ref=challenge"