Design comparison
Solution retrospective
The only thing im missing is the focus state, casue it didnt work when i added it, is there any help i can get on that?
Community feedback
- @anishamurthyPosted over 1 year ago
Hi Ola, I have some feedback that may be useful for you. For setting colors, don't use color names because different browsers may not agree with what certain color names mean. Instead of div tags for the rating selection, you should use a form tag for all the rating selections and the submit button. You can create radio buttons for all of the rating selections, and use the javascript onfocus event for each rating to set the focus state.
Also, for scalability don't set a height for the main container and use em or rem for font size, margins, and padding. Don't set fixed heights and widths in px.
For line height, make sure you do not use px for line height and use a unitless measure like 1.5. Unitless line heights are recommended due to the fact that child elements will inherit the raw number value like 1.5, rather than the computed value of the parent's line height. The child element can compute its line height using its font-size, rather than a random inherited value from a parent that might need overriding.
You can use a CSS reset like https://andy-bell.co.uk/a-modern-css-reset/. You can also use a code formatter like Prettier.
If you use a linear gradient, you should set a regular background color before in case the linear gradient does not work.
Overall good job!
Marked as helpful0@Great-kiolaPosted over 1 year ago@anishamurthy Thank you so much for your time, and constructive feedback. I would try and make changes based on what you have said, Thank you once again.
0@anishamurthyPosted over 1 year ago@Great-kiola you're welcome! Also, I don't think you can set a focus state for divs that is why yours wasn't working. However, you can set it for radio button inputs.
0
Please log in to post a comment
Log in with GitHubJoin 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