Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order-Summary

#bootstrap#sass/scss
Harsh Patelβ€’ 30

@HarshP64896

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

P
Dave Quahβ€’ 670

@Milleus

Posted

Hi there πŸ‘‹,

Congratulations on completing this challenge πŸ₯³πŸ‘πŸŽ‰.

I have a couple of suggestions on top of what Abdul has mentioned:

  1. I would strongly recommend to use the right semantic elements, either <a> or <button>, for the "Proceed to Payment" and "Cancel Order" button instead of a <div>. At its current state, a keyboard user would not be able to interact with those elements.

  2. For decorative images, you can leave the alt tag as an empty string. For example, <img src="images/icon-music.svg" alt="">.

Happy coding~

Marked as helpful

1
Abdulβ€’ 8,560

@Samadeen

Posted

Hey Harsh Patel!! Cheers πŸ₯‚ on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="table"> instead of <div class="table">.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

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