Responsive ratings component using HTML/CSS media queries + JavaScript

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!🎄🎁

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