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

#accessibility
Ana Vela 20

@ana-vela

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


This is was another fun challenge that helped me solidify my process. Let me know if you have any suggestions or comments. Thanks!

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

Hi, Ana! 👋

It's been a while since you submitted the last solution, it's great to see you submit another solution! Good effort on this one! 👍

Some suggestions.

  • In this case, all images are decorative images. So, leave all the alt empty so that the screen reader users won't have to listen to the non-related content.
  • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly (like submitting).
  • Next time, try to write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including your future self). You could install a code formatter extension in your code editor to help you with this.

That's it! I hope this information is useful! 😁

Marked as helpful

1

Ana Vela 20

@ana-vela

Posted

@vanzasetia Thanks so much for remembering me, Vanza! This feedback helps a lot and I've made the changes you suggested. And I'm already planning my next challenge which will be one level up from these first two I've completed. :) Best wishes to you!

0
Vanza Setia 27,855

@vanzasetia

Posted

@ana-vela I took a look at your code and good job with the updates!

That's a spirit, Ana! Looking forward to your next solution! Good luck! 👍

1
Old 6,240

@Old1337

Posted

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

  • add to the body background-size:contain;
  • add tranistion:1s; to the button so that when you hover on the button the background changes smoothly

i hope this is helpful and goodluck!

1

Ana Vela 20

@ana-vela

Posted

@Old1337 Thanks so much for your feedback! I implemented these changes.

1
Old 6,240

@Old1337

Posted

@ana-vela good job!!

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