Order Summary Card Component

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

Objective

The challenge is to build out the order summary card component and get it looking as close to the design as possible.
Create both the desktop and mobile layouts.
Users should be able to see hover states for interactive elements.

Links

• Live Site Link
• Solution Link

My process

What I built with

• Semantic HTML5 markup
• CSS custom properties
• CSS logical properties
• Flexbox
• Minimal reliance on media queries

What I Learned

I used the semantic HTML button element for the first time:

<button>Proceed to Payment</button>

I created CSS custom properties at the top of my file for the first time, giving me easy access to all my colours:

:root {
    --very-pale-blue: hsl(225, 100%, 98%);
    --pale-blue: hsl(225, 100%, 94%);
    --desaturated-blue: hsl(224, 23%, 55%);
    --bright-blue: hsl(245, 75%, 52%);
    --dark-blue: hsl(223, 47%, 23%);
}

I've begun using min() to set widths, to minimize reliance on media queries and create more responsive layouts:

.card {
    width: min(450px, 90%);
}

Continued development

Some areas I'd like to continue to develop are:

1. Better use of semantic HTML elements, not relying on divs for all sectioning
2. Continuing to minimize reliance on media queries, experiment with mobile-first development
3. Ensuring to check browser compatibility before using newer CSS properties
4. Lower specificity of CSS, more reusable components

Useful resources

• Conquering Responsive Layouts course by Kevin Powell - This course has helped me really understand how to create elegant responsive layouts with minimal fuss. I'd highly recommend this free course to anyone who may be struggling or just wants to refine their knowledge of creating responsive layouts. His YouTube channel is also a great resource with loads of amazing CSS content.

Author

• Website - emmaclarem.github.io
• Frontend Mentor - @emmaclarem
• LinkedIn - Emma Miller