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

Vedant Thoratโ€ข 60

@vedant027

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


Any Suggestions for Improvement ?

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • For icons, you should still use the alt attribute, but it should be empty (alt=""). This indicates to screen readers and other assistive technologies that the icon is decorative and that they should skip over it
  • When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the " Change" element in an <button> tag. This way, users can click on it, expecting some action.
  • Prefer min-height: 100vh over height to avoid cutting off components on smaller screens.

I hope you find it useful! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

1

Vedant Thoratโ€ข 60

@vedant027

Posted

@MelvinAguilar Hey the only reason i didn't wrap the "Change" element inside a button tag was that while looking at the design prototype i didn't thought it is a button rather than a text ...but if i would have been adding some hyperlink to redirect the user on any other page i would have definitely used the button tag. BTW, Thankyou for taking out time and going through my code, really appreciate it. I would definitely keep in mind the things you have mentioned above while making my future projects.

0

@Call4julius

Posted

Nice overall code.

Learn how to use utility class and rely on inheritance so that you don't keep repeating yourself.

Nice work.

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