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 Using React and Tailwind CSS

#react#tailwind-css#accessibility

@snowsneakers

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 my third completed challenge and second using react. I want to continue using these challenge to familiarize myself with react.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heyo,

Your solution looks really great! Only have some small suggestions here:

  1. Background patterns should be added with css.

  2. You could perhaps wrap the attribution in a <footer>, that would get rid of the issue in the accessibility report.

  3. I'd not use the same heading for the Annual Plan text and for the price. The price itself could just be a paragraph and the Annual Plan an <h2> if you follow heading levels in the correct order.

  4. You could remove the alt texts from the images. They're arguably decorative only (the music icon is, for sure) so their alts can be left empty.

Marked as helpful

0

@snowsneakers

Posted

@FluffyKas Thank you for the feedback!

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