Responsive ratings component using HTML/CSS media queries + JavaScript

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 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!🎄🎁

  Marked as helpful

  1
• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted almost 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

  Marked as helpful

  1

  ---

  

  Elizabeth Sotomayor•230

  @elizabethrsotomayorPosted almost 2 years ago

  @dylan-dot-c Thanks, I should have been more clear with my question. I already know that stuff about grid/flexbox but didn’t know if relative/absolute positioning to center my card would be considered a bad practice or not. I guess your response answered that question too! Thanks again.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @elizabethrsotomayor

  It’s an outdated method, and for the purpose you’re using it for. It is still useful for other things, like positioning a nav hamburger button, placing an illustration in a certain unique manner, etc…

  Marked as helpful

  1