Skip to content
Submitted over 2 years ago

Order Summary Component Using React and Tailwind CSS

Patrick Snowden•50
@snowsneakers
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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

  • Fluffy Kas•7,715
    @FluffyKasPosted over 2 years ago

    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
    Patrick Snowden•50
    @snowsneakersPosted over 2 years ago

    @FluffyKas Thank you for the feedback!

    0

Please log in to post a comment

Log in with GitHub

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