Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

html css js

@ArnoldasKolo

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@CoconutDev13

Posted

Hey really great job!

I don't know if you realized that but checked number doesn't change at all (firefox browser). Also why you let the background white? Kinda one more css line and it will feel same as the design. You didn't set any hover effect on button.

One suggestion to improve your code is adding css variables. Not hard to use and it gives you the freedom to make adjustments easily and fast in your project. For example you might need make the orange a little bit brighter in bigger project with multiple files. It will be annoying to navigate through all the files and searching for your old color and replacing it with the new one. In case of variables you will have all the colors defined in main.css and use them whenever you want. When you get bored or your designer decide to make some changes you just edit one value in your main.css.

Also class could have the more abstract meaning than just naming tags. For example if you have a huge project and your orange capsule shaped button is your main button component that would make more sense naming the class button instead of submit.

NIce job, keep coding and good luck in your next projects :-)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord