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

Challenge - Order Summary

Henrique 110

@henmachuca

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


Struggled a bit with the position in the pricing table. Any feedback would be much appreciated.

Community feedback

Heli0s 670

@zeerobit

Posted

Well done on completing this challenge, few things i noticed:

  • for the pricing table you don't really need grid, you can use flexbox to space and center your elements
  • "change" should be wrapped in an anchor tag since it's supposed to be an interactive element
  • Annual plan and $59.99/year don't necessarily have to be in a separate div, you can have them in one tag, and wrap annual plan in a span then add display: block
  • use rem instead of px since it's not scalable
  • Proceed to payment and cancel order should be wrapped in anchor tags since they're supposed to be interactive. I also notice you styled cancel order differently from the design

Happy coding!!!

Marked as helpful

1

Henrique 110

@henmachuca

Posted

Hello @zeerobit! Thank you for all your tips. They were really helpfull.

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