Frontend Mentor - Order Summary Component Solution
Tags: beginners, webdev, html, css
Published: 2022-10-09 20:53:20

This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help new and experience developers improve their coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)
  - [The challenge](#the-challenge)
  - [Screenshots](#screenshots)
  - [Links](#links)
- [My process](#my-process)
  - [Workflow](#workflow)
  - [Built with](#built-with)
  - [What I learned](#what-i-learned)
  - [Continued development](#continued-development)
  - [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)

## Overview

In this challenge I am to build out an order summary component (see [screenshots](#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6i9mnaoit8v7nc1z2jr.jpg)

#### Desktop Design - Active State

![Desktop design - active state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnh5det8e93u50cja9av.jpg)

### Links

- GitHub Repo: [https://github.com/jdfdoyley/order-summary-component](https://github.com/jdfdoyley/order-summary-component)
- Live Site: [https://order-summary-component-ten-ashen.vercel.app/](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](https://www.figma.com/) 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:

```css
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](https://spec.fm/specifics/8-pt-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](https://www.frontendmentor.io/profile/jdfdoyley)
- Twitter - [@jdfdoyley](https://www.twitter.com/jdfdoyley)
- LinkedIn- [@jdfdoyley](https://www.linkedin.com/in/jdfdoyley/)
- GitHub- [@jdfdoyley](https://github.com/jdfdoyley)

## Acknowledgments

I would like to thank [Madison Kanna](https://www.youtube.com/c/MadisonKanna) 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.