Frontend Mentor - Order Summary Component Solution

Jason D'Oyley — Sun, 09 Oct 2022 20:53:20 +0000

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.

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

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.

DEV Community: Jason D'Oyley