Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Original Design:

My Solution:

Links

• Live Site URL: Order Summary Component

My process

My process improved drastically with this project. It took me almost 3 times less than my previous and less complex project. I believe it came down to systematic approach that saved me lots of time.

• I started bringing in the main elements, images and text.
• then I created the shapes and defined the correct spacing using margin and padding and positioned elements with flexbox
• finally adding button functionality

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• I learned background-image property which I'm sure will be my go-to solution for the next projects.

Continued development

My next project will be much more complex, which will allow me to test my flexbox knowledge and elements' hierarchy.

Useful resources

• Mdn Web Docs > CSS - This is extremely helpful with real time examples.

Author

• Iva