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 project

P

@danyela2000

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


Any feedback for code improvements is welcome!

Community feedback

Loubnakb 70

@Loubnakb

Posted

Hello, I've read your comment about too many lines of code in your css file. Have yoou overwritten your css? Also, your container is a bit smaller than the original and you shoould definitely get a linear-gradient to your container.

Thank you <3

Marked as helpful

1

P

@danyela2000

Posted

Hello, @Loubnakb. I used the css reset code, which is a large one, and I decided to organise it in a different file. Then, I imported it in the main CSS file. For better organization and readability. I think just the screenshot is a bit smaller than the original one. I don't know if the container from my solution is smaller than the original one, too. On my devices (on mobile and on desktop) it looks ok. Now I observed that I should use a line gradient as a background color for the container. Thanks.

0
Loubnakb 70

@Loubnakb

Posted

@danyela2000 you can use this css reset code down here: https://www.joshwcomeau.com/css/custom-css-reset/

I think it's more consise. Correct me if i'm wrong regarding the length

1
P

@danyela2000

Posted

@Loubnakb Thank you very much. I read all the documentation from that page. And yes, it's more concise!

1
Joachim 840

@Thewatcher13

Posted

a few things:

  • Why do you have 2 css files? It's better to have it all in one file, otherwise the browser has to do two requests..
  • Actually it is a project where they ask your feedback, so that feedback should be send to the server. Better is to use a form field on your html with an input type of radio buttons, instead of ul. note:if you're using an ul and set his list-style to none, add a role on the ul of role:list and on the list-items:listitem.
  • Don't set a height, the content should provide the height.
  • The button has no type attribute (type=submit will do)

If you have questions, just ask.

Marked as helpful

1

P

@danyela2000

Posted

@Thewatcher13 I used two different css files because there was too much code in one single file. Thanks for feedback.

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