Frontend Mentor - Order summary card solution

This is a solution to the Order summary card 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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements
• See focus states for interactive elements for accessability

Screenshot

Links

• Solution URL: My Solution Page at Frontend Mentor
• Live Site URL: Live Site

My process

With the HTML basic content provided, worked on:

• assigning CSS class names using the BEM method
• creating variables in CSS for color schemes
• adding Google Font provided
• a quick CSS reset with a couple lines of CSS

Next worked on:

• built mobile first
• Adding background image for header in the card
• Figuring out where to use Flex vs Grid (used both)
• Worked on media query for desktop

Finally worked on:

• Hover states, matching the screenshot provided
• Additionally worked on Focus states for accessability, making them more noticeable.
• Creating a Table of Contents for my CSS file.
• Minifying my CSS file.

Built with

• Semantic HTML5 markup
• CSS custom properties and variables
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

A lot of this was review and putting in the work. I did learn some interesting bits of CSS like using the focus state effectively and differently then the hover state. Here is an example.

Using the box-shadow I was able to create an outline around a button that was pleasing to the eye and even more noticeable then just using the hover state for people who have accessability needs.

/* * Primary Button Focus Styles */
.card__prim-btn:focus {
	background-color: var(--primary__alt);
	box-shadow: 
		0 0 0 5px #FFF,
		0 0 0 10px var(--primary__alt)
	;
}

Continued development

From this exercise I see multiple cards and using CSS Grid to make them responsive to mobile, tablet, and desktop views would be fun.

Also making sure my BEM method is sound with having multiple cards to see if there would be any cases where I would need to refine them.

Useful resources

• Kevin Powell Youtube Channel - I watch this guys stuff constantly. He has one of the best consistent channels mostly concentrating on CSS. Wonderful resource.
• DesignCourse Youtube Channel - Another great resource with design tips and tricks and more CSS knowledge.

Author

• Website - Trevor Merrick
• LinkedIn - @trevormerrick
• GitHub - @tmerrick17
• Frontend Mentor - @tmerrick17
• Twitter - @tcmerrick