Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 5 months ago

Rating component with basic front-end best practices

accessibility, pure-css, semantic-ui
Caio Aquino•20
@caioaquino
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of being able to build a component with a 100% accessibility score according to the Lighthouse test. If I were to do it again, I would try to use a CSS pre-processor like Sass to reuse the styles I applied.

What challenges did you encounter, and how did you overcome them?

When building this component, I realized I did not know how to build applications without frameworks and was ignoring most front-end best practices at my work, such as using semantic and accessibility tags. After building the application following the recommendations, I also used AI to identify possible practices I was missing.

What specific areas of your project would you like help with?

I would like help with modularizing the components. I don't know if I could have built the rating component separately from the index.html, as I did with the thank-you page.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Caio Aquino's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License