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

Order-Summary-Component

@vanimittal1304

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Tharun Raj 1,250

@Code-Beaker

Posted

Hi there, congratulations on completing this challenge. You've done a great work! 🎉

I would like to put forward some of my suggestions regarding your solution that might help you improve it.

  • use proper tags for the elements. for example, the "Change" is a link. You have used a <p> tag in your HTML to create that element. But, as it is a link, it should be an anchor tag.
<a href="#" class="change">Change</a>

this will also help you minimise the HTML you're writing. Instead of a p wrapped in a div, simply use an a tag.

Do the same for the "Cancel Order". It is also a link.

  • instead of using
body {
height: 100vh;
}

use:

body {
min-height: 100vh;
}
  • use rem instead of px. While using px is certainly not wrong, rem values are better when building responsive layouts and is easier to handle. If you wish to learn more about this topic, refer to this article

Overall, your solution looks impressive.

Hope this helps you learn something new! 😃

Marked as helpful

0

@vanimittal1304

Posted

@Code-Beaker Okay thankyou so much for feedback, this will help me in brushing up my skills.

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