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

pbgo2โ€ข 60

@pbgo2

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


Hi all, please take a look on my Order summary component project completed , feel more then welcome to leave comment or suggestion )

Community feedback

@MelvinAguilar

Posted

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

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

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 400px or 25rem to make sure that the component will have a maximum width of 400px on any device, also remove the width property with a percentage value.
  • The music icon and the hero-image are for decoration purposes only, so they could be hidden from screen readers by leaving its alt attribute empty.
  • In this challenge, it's preferable to represent the "change" element as a button rather than an anchor tag. Buttons are designed for action initiation, and in this case, the action involves altering the order's plan. This makes a button a more suitable choice than an anchor tag typically used for linking.

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

0

pbgo2โ€ข 60

@pbgo2

Posted

hi @MelvinAguilar Thank you so much for such tips) really helping, Have you good day!

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