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

Interactive rating component

@DanielKremes

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi people, i would like hear about yours, how is my project,and also i'd like hear about feedbacks.

Community feedback

Arne 1,110

@Dudeldups

Posted

Hello! Some things I can see:

Let's start off with the scrollbar. It's nice that you know how to change its style, but this card component is so small, there shouldn't even be a scrollbar in the first place. Maybe keep your focus on the actual project and not overcomplicate it - there are many projects on Frontend Mentor where you can use this 😋

Also, you don't really need any media queries for this component. Just give it a max-width and let padding and margin handle the rest. You're giving the container a percentage width, which ends up in weird behaviour.

Furthermore, you only need to declare a fixed height on elements in very few cases. The regular way to go is using margin and padding inside your container or surrounding element, so all the stuff inside can just take up the width or height they need.

You're setting font-size in rem which is best practice for people who don't use the browser's default fonts. Also you got a <header>, <main> and <footer> inside the <body> 👍

In the HTML is one major flaw though, the 5 circles to choose the rating are supposed to be radio-inputs inside a <form> Radio inputs have default behavior to only allow one selection if you set the same name attribute on all 5 of them.

Hope that helps, keep practicing and happy coding 😀

0

@DanielKremes

Posted

Thanks @Dudeldups for the tipes. a huge hug and sucess.

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