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

Responsive Order Summary Component using Flexbox

sydpeay 40

@sydpeay

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 know this isn't perfect (for example I completely omitted the active states), but this is the most complex thing I've ever coded! My main question right now is how to keep your code organized. I think my classes and ids are a bit inefficient, and I think I would be able to do a better job if that was more efficient.

Community feedback

@benjoquilario

Posted

Hi Sydpeay, Great job on finishing this one. Everything looks good and response rather well.

As for your question You must study the CSS Specificity. Here is the source CSS Specifity. This way you will not be confused on what selector you will going to use.

Some Suggestion:

  • You must change the <div="container"> into <main> -I've also been at this place where you want to use the <img> tags instead of using a background image.(feels like it would be more flexible)

But I realized, the custom changes you can make with background images are way more than <img> tags...so I would suggest you to use them.

  • If you want to use the <img> tag you do not forget add the alt attribute, so the image have a alternative text for an area.

  • Since the proceed to payment is some kind of action you must use the button on proceed and cancel.

Keep coding and happy coding too!

1

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