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
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Project URL: Coming Soon
• Live Site URL: The Live Site
• Repository URL: GitHub Repository

My process

I began by designing the mobile version first. I used Adobe Illustrator to measure distances for the layout. Then I moved to the desktop version. For QA, I viewed the site in Chrome and Firefox. I used Illustrator to compare the coded version with the design image.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Love

What I learned

I learned that it's much better to go slow and complete a section or chunk instead of jumping around. I dug into selectors and combinators a little more deeply. I learned some tips for creating drop shadows.

Continued development

I would like to review flexbox.

Useful resources

• Designing Beautiful Shadows in CSS - I had little experience creating drop shadows in CSS. This provided some great tips such as creating shadows using one single light source for the entire page.

Author

• Frontend Mentor - @yourusername
• Twitter - @yourusername

Acknowledgments

Josh W. Comeau's website appears to be a treasure trove of useful CSS information. I look forward to exploring it more.