Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

First Challenge - Using Flexbox

@PabloMClementeP

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I appreciate your feedback

Community feedback

Jason Heys 175

@heyitsgany

Posted

Looks good. Well done on getting it close to the design.

  • Couple of things to work on, you haven't implemented the hover/active states for the buttons and links (change, proceed and cancel). That's a pretty simple thing to add.
  • Try to move the background image from your HTML to your CSS, using the background property. This way you have greater control over how it displays. (Also tweak your background colours as they're off a little).
  • Make sure you're using semantic HTML (div and span are non-semantic), make use of elements like header, footer and main. As your card is the main content of the page, change it from <div class="order-card"> to <main class="order-card">.
  • Finally, (and this is a preference thing) you could remove the box-sizing from your html and just use it on your reset.
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Marked as helpful

1

@PabloMClementeP

Posted

Hi @heyitsgany - Thanks a lot for all these tips. They really are very useful, and i try to apply then. Thanks

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord