Skip to content
Submitted about 3 years ago

Solution with ReactJs and styled component

Dark-Lover•735
@Dark-Lover
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

Hey guys ;) this is my first time submitting a solution using React and styled Component, im really in need of your feedbacks, this is my first practice for both React and Styled Component, any feedbacks are welcome.

Community feedback

  • Ken•4,915
    @kens-visualsPosted about 3 years ago

    Hey @Dark-Lover 👋🏻

    I have some suggestions to help you fix the accessibility issues and some other things.

    • In your markup, <div class="sc-gsTEea fnXaxo">...</div> should be <main class="sc-gsTEea fnXaxo">...</main>.
    • And instead of <h3>, you should either use <h2> or <p>, because in HTML heading have to increase gradually, such as h1, h2, h3..., you get the point. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
    • One last thing, try to avoid fixed widths, such as width: 450px;. Pixels are not responsive at all, so try to set widths with percentages, and max-widths with pixels. This way you'll make the layout more responsive even without writing any media queries.

    I hope this was helpful 👨🏻‍💻 other than that, you did a great job for the first React project, well done. Cheers 👾

    Marked as helpful
    1

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