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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/bem-sass-html5-mobilefirstworkflow-flexbox-parcel-ePVWuT8vJ#comment-615e050c0f48541b104c3509
• Live Site URL: https://mrgeminus.github.io/order-summary-component-main/

My process

Built with

• Semantic HTML5 markup
• CSS Preprocessor (SCSS)
• Flexbox
• Mobile-first workflow
• Parcel

What I learned

I have used this project as an opportunity to try out Parcel.

Continued development

Besides getting better in the area of accessibility and SEO, I would also like to try out Webpack.

Useful resources

• BEM Cheat Sheet - A nice BEM cheat sheet.
• Accessibility Developer Guide - Here can be found some great tips on how to improve the website's accessibility.
• Figure and figcaption – extended alternate text for screen readers? - This article explores if and how figure and figcaption elements affect accessibility.

Author

• Website - MrGeminus
• Frontend Mentor - @MrGeminus
• Twitter - @MrGeminus