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

Overview

In this challenge, I will be continuing my focus on semantically correct HTML, accessibility, responsive Less CSS, and BEM. In the design files, while I'm measuring, I'll run by small inconsistencies in spacing between elements, So I'll also be focusing on using consistent layout settings.

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: Product Preview Card Component

My process

• Copied over starter files from project folder
• Initialized Git and GitHub
• Analyzed Figma design file
• Initialized Git and Github
• Added semantic HTML tags
• Set up Less
• Set up CSS Reset
• Set up typography config
• Set up colors config
• Add base styling mobile
• Add base styling desktop
• a11y check: zoom (scale content if user sets font-size to 200%, 300%, etc)
• a11y check: interactive elements (tooltips with mouse & keyboard)
• a11y check: Semantic HTML and screen readers (not yet done)
• Refactor for dev readibility
• Deploy

Built with

• Semantic HTML5 markup
• Less
• BEM
• Flexbox
• Grid
• Mobile-first workflow

What I learned

• I learned how to use Less
• I learned how to add a tooltip on an element when it's focus from the keyboard

Useful resources

• Less Documentation
• CSS Reset

Author

• Website - Steve Xero - under construction
• Old Website
• GitHub - Steve Xero
• Frontend Mentor - @stevexero
• X - @steve_xero