EONRaider/Order-Summary-Component

Solution for the Order Summary Component challenge on frontendmentor.io

Frontend Mentor - Order Summary Component solution

This is a solution to the Order Summary Component. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

A simple project using HTML5 and CSS3 that displays an order summary component consisting of an image, order description, pricing and buttons to proceed to checkout.

Screenshot

Links

• My Solution on Frontend Mentor
• Check the Live Site

My process

1. I started with the markup on index.html, complying with HTML5 semantic tags and standards as much as possible.
2. The styling provided by the project briefing was implemented first, followed by the classes I came up with on the markup.
3. I used Figma to acquire all the right dimensions involved in the layout and implemented them in the appropriate CSS classes.
4. The CSS Cube methodology was used when coding the stylesheet and some of the conventions from BEM were used when naming classes.

Built with

• Semantic HTML5 markup
• Cube CSS methodology

What I learned

• I've increased my familiarity with CSS Flexbox.
• I was able to navigate pretty easily through the miriad small changes that the responsive mobile version of this project required. Using Cube CSS to structure my styling definitely payed off when it came to this.