Responsive ratings component using HTML/CSS media queries + JavaScript

Community feedback

• Account deletedPosted over 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The “icons/illustrations” in this component serve no other purpose than to be decorative; Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Your form is lacking a visually hidden legend for accessibility and a fieldset to prevent users from selecting more than one rating.

  More Info:📚

  MDN <input type="radio">

  MDN <fieldset>: The Field Set element

  • Do not forget to update your code with the errors the FEM report found.

  • A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  10

  Marked as helpful
• 

  Dylan Heslop•2,460

  @dylan-dot-c

  Posted over 2 years ago

  Here are 2 easy ways to center anything without using relative/absolute

  1. CSS Flex .container { display: flex; align-items: center;/vertivally/ justify-content: center;/horizontally/ }

  2. CSS GRID

  .container { display: grid; place-items: center; }

  I saw that you used flexbox already so this should be clear to you. XD

  12

  Marked as helpful