mbdelarosa / order-summary-component-main

Solution for the Order Summary Card challenge on Frontend Mentor

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Order Summary Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

Through this challenge, I was able to learn the following:

• When to use anchors vs buttons
• Media queries
• How to add background images

This challenge was also very helpful in understanding how Flexbox works. I was also able to use it in this challenge to add spacing between flex items using the gap property instead of adding margins to individual components.

Continued development

For future challenges, I'd like to be able to learn and utilize the following:

• Use of clamp()
• Follow better CSS naming conventions (ex. BEM)

Useful resources

A lot of community members recommended watching videos by Kevin Powell, and for this challenge the following proved to be very useful:

• "Learn flexbox the easy way" - This was a really good introduction to Flexbox, its behavior and properties and the different scenarios on how to use it
• "You can do that with margins?"" - While not Flexbox-related, this helped me understand the behavior of the margin property. I was able to apply the margin-left: auto property in this challenge

Author

• Frontend Mentor - @mbdelarosa