Interactive Rating Component

Community feedback

• 

  Kamran Kiani•1,840

  @kaamiikPosted 1 day ago

  Hi,

  I noticed some serious problems in your code. I strongly suggest reviewing this code and previous challenges you’ve done before starting a new one. If you do not solve these problems, it is likely you will repeat the same mistakes.

  1. The main tag is a semantic tag that defines the main content of a document. There is no need to add a role attribute inside it.

  2. Decorative images do not need an alt text. The alt attribute in your img tag should be empty like this: alt="". The top icon here is decorative.

  3. The HTML structure is very important in this challenge. Inside your cards, you have a form element that contains a group of radio buttons with a question linked to these radio buttons. The best element for this is a fieldset with a legend inside it. Then, you have a submit button to submit your form.

  4. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have good ones. You can easily find them by searching online.

  5. You do not need to set a height like min-height: 22rem; for your card.

  6. The hover effect should be on interactive elements like links, buttons, or inputs. Also, your button does not have a hover effect.

  7. Add padding to your button instead of setting a height like height: 3rem;.

  0