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 By Navid Dev

Navid Devā€¢ 140

@navidabdi

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


I'd love to hear your thoughts and suggestions on how I can improve my code.

Community feedback

Vanza Setiaā€¢ 27,795

@vanzasetia

Posted

Hi, David! šŸ‘‹

Good effort on this challenge! šŸ‘ It's great that you are using the landmark elements correctly! šŸ‘

Some suggestions.

  • The b tag has been deprecated, instead I would recommend using strong instead. Note that not all bold text needs to be wrapped with strong.
  • Always use a meaningful element to wrap text content. I notice that you wrap the $59.99/year with a span, so I would suggest using the p tag instead.
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • Also, alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.

I hope this information is useful! Happy coding! šŸ˜

Marked as helpful

1

Navid Devā€¢ 140

@navidabdi

Posted

@vanzasetia Thank you Vanza, I appreciate your effort to write this helpful comment. I'll decently consider this factors the next time :)

0
Vanza Setiaā€¢ 27,795

@vanzasetia

Posted

@navidabdi No problem! Glad to help you! šŸ˜„

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