Skip to content
Submitted almost 2 years ago

order-summary-component-main.

Leonardo Rodrigues Gomes•160
@gomes-leonardo
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

Feel free to leave your opinion. I'm a beginner looking for evolution day by day

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Leonardo!

    Here are a few ways you can do to improve this solution.

    • The music icon is a decorative image. So, leave the alternative text blank, (alt="").
    • "Annual Plan" should be <h2>. Next time, remember to not skip heading levels. Or in other words, heading levels must always be in order to give structure to a page.
    • Learn more — How-to: Accessible heading structure - The A11Y Project
    • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
    • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
      • They mess up specificity because they are too high (the most important reason).
      • They are unique identifiers. So, they are not reusable on the same page.
    • Use single-class selectors whenever possible. This can help you produce a low-specificity stylesheet. As a result, it prevents you from having specificity issues.

    I hope my feedback helps.

    Marked as helpful
    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