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

Interactive Rating Component

P
vcollins1 410

@vcollins1

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Making the component accessible

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

Any feedback would be helpful

Community feedback

geomydas 1,060

@geomydas

Posted

Hi, your solution looks really good and here is my feedback to it

Other

  1. It isn't reccomend to put all of your projects / file in one github repository as it will make your code less maintanable and less organized. Instead, make a new repository for each project you have. In doing so, your code is much
  • more maintanable
  • more organized
  • easier to browse

HTML & Accesibility

  1. Remove tab-index="-1 on lines 28 to 51. Doing so will make your website more accesible to keyboard users. Also, setting tabindex rarely occurs and we often rely on natural focusable elements such as <button>, <a> and `<input>
  1. Replace line 27 with a <form> tag. This will make your website more accesible and semantic. A <div> does not give any meaning on its own while a <form> gives meaning on its own to blind people using screen readers therefore making it accesible. <div class="ratings" role="radiogroup" tabindex="0" aria-label="select a rating">

  2. You can add a <fieldset> tag inside the form. A fieldset is often used to signify to screen readers that those are elements grouped together & relative to each other inside a form. This will make your HTML more semantic.

CSS

  1. Use a CSS reset. It will make your life much more easier and your site visitors will appreciate it. What it does is that it makes your CSS look the same in all browsers. Most browsers usually add their own style to an element causing your website to look differently. Most people use either the first or second CSS reset, but it doesn't really matter. First CSS reset, i use this one or Second CSS Reset. You should use the CSS reset in all of your projects.
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