DEV Community 👩‍💻👨‍💻

Cover image for Frontend Mentor - Order Summary Component Solution
Jason D'Oyley
Jason D'Oyley

Posted on

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


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


Desktop Design

Desktop design

Desktop Design - Active State

Desktop design - active state


My process


  • 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;
Enter fullscreen mode Exit fullscreen mode

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.



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.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.