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-main.

@gomes-leonardo

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


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

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

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
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