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

• Frontend Mentor - Order summary card solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Mobile 375px
      • Desktop 1440px
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Mobile 375px

Desktop 1440px

Links

• Solution URL: Order Summary Challenge

My process

1. Analysed the design and put together list of elements that need to be coded.
2. Ordered the list working on the assumption that some items needed to be worked before others as it affected how other elements needed to be coded. A main consideration here was the needed to design for mobile first.
3. The coding work consisted of:
   1. Initializing the github repo.
   2. Creating the base folder/file structure link.
   3. Linking to any fonts/css libraries/css stylesheets as needed.
   4. Structured the index.html based on the different elements.
   5. Style the project working section/element by section/element.
   6. Ensuring I checked in my code consistently.
   7. Once the coding was complete I looked for any issues and carried any necessary adjustments.
4. I completed the README.md and pushed my solution live.

Built with

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

What I learned

1. Look to use CSS variables on bigger projects.

Continued development

I used CSS Variables for this project. I will look to use SASS in an upcoming project.

Author

• Website - kchettiar.com
• Frontend Mentor - @kchettiar1
• Twitter - @codingkc