Frontend Mentor - Order Summary Component Solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help new and experience developers improve their coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Workflow
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

In this challenge I am to build out an order summary component (see screenshots below) and get it look as close to the design as possible.

I am able to use any tools I would like to help complete this challenge. The reason for doing this challenge was so that I can practice my frontend dev skills. I have been learning HTML, CSS and JavaScript for a while now but I have not created anything without guidance. That's what led me to Frontend Mentor.

The Challenge

Users should be able to:

• See hover states for interactive elements

Screenshots

Desktop Design

Desktop Design - Active State

Links

• GitHub Repo: https://github.com/jdfdoyley/order-summary-component
• Live Site: https://order-summary-component-ten-ashen.vercel.app/

My process

Workflow

• Step 1: Initialize project directory using Git
• Step 2: Configure local repository to push to remote repository
• Step 3: Examine project design and come up with a plan on how to tackle the project
• Step 4: Start by creating the layout using only HTML
• Step 5: Start adding styles to the project. Style will be added in the following order using the top-down approach:
  • General content style
  • Sectional styles
• Step 6: Test the completeness of the project agains the design

Built with

• Semantic HTML5 markup
• CSS custom properties
• 8pt-Grid System
• Figma help with design

What I learned

While building this project I got the opportunity to learn about the following:

The 8pt Grid System

The 8-pt grid system is basically using multiples of 8 to define dimensions, padding, and margin of both block and inline elements.

The Box Model

The box model is a way to describe an element's dimensions and spacing. This model consist of four (4) parts: the border, the margins, the padding, and the content.
Content: The content of the box, where text and images appear.
Border: The thickness of the line/stroke that surrounds the padding and the content
Margins: The extra space surrounding the element
Padding: The space around the content; between the content and the content's borders

CSS Grid

I learned how to vertically and horizontally center content using place-items. The code is as follows:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

Continued development

In future projects, I would like to keep utilizing HTML 5 semantics, Flexbox and Grids. At the moment, I don't feel comfortable using them. I will keep using them until I've gain mastery over deciding when and where to use them. I will accomplish this by doing more and more Frontend Mentor projects.

Useful resources

• The 8-Point Grid - This is an amazing article which helped me finally understand the 8-pt grid system. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @jdfdoyley
• Twitter - @jdfdoyley
• LinkedIn- @jdfdoyley
• GitHub- @jdfdoyley

Acknowledgments

I would like to thank Madison Kanna who has a video on completing this challenge. She helped in filling in the gaps in my knowledge and whenever I was a bit stuck.