Interactive rating component

Community feedback

• 

  P

  Kamran Kiani•2,780

  @kaamiik

  Posted 6 months ago

  سلام. تبریک میگم بابت انجام این پروژه! کارتون خوبه، ولی چند نکته هست که می‌تونن به بهبود کدتون کمک کنن. نکات رو به انگلیسی مینویسم تا دقیق‌تر بیان بشن:

  ---

  HTML Structure

  • Form Structure: The structure of your HTML is crucial for this challenge. You should wrap the question and numbers inside a <form> tag, which includes a submit button. This ensures proper functionality and accessibility.
  • Fieldset and Legend: To group the question and numbers semantically, use <fieldset> and <legend>. The question can be placed inside the <legend> tag. This improves accessibility and structure. You can learn more about these elements on MDN.
  • Radio Buttons and Labels: The numbers should be a group of radio buttons, each with a corresponding <label>. This makes the interface more user-friendly and accessible. The current button implementation is incorrect and should be replaced.

  ---

  Accessibility and Images

  • Decorative Images: For decorative images, the alt attribute should be empty (alt=""). This ensures screen readers skip over them, improving accessibility.

  ---

  Fonts and Styling

  • Font Importing: It’s recommended to host fonts locally or include them directly in your HTML. The current method of importing fonts isn’t ideal for performance and reliability.
  • CSS Reset: Consider using a CSS reset at the beginning of your stylesheet. Both Andy Bell and Josh Comeau provide excellent CSS resets, which you can easily find online. This helps ensure consistent styling across different browsers.

  ---

  Layout and Sizing

  • Text Container Sizing: The use of width: 25rem; and height: 24rem; for text containers is incorrect. Instead, use max-width with rem units to allow the content to flow naturally while maintaining a reasonable maximum size.
  • Button Sizing: For buttons, avoid fixed dimensions like width: 50px; height: 50px;. Instead, use padding to control the size, which makes the button more flexible and responsive.
  • General Width Usage: All instances of fixed width in your code are unnecessary. Replace them with max-width where needed, using rem units for better scalability.

  ---

  Final Suggestion

  I strongly recommend refactoring the code based on these suggestions before moving on to the next challenge. This will help you build a stronger foundation and improve the overall quality of your work.

  01

  Marked as helpful