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

React and Styled Components

@Yanfelipe9

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


Ensuring that the project looks and functions well on various screen sizes and devices was a bit challenging.

What are the best practices for securing user data when handling submissions in a production environment?

When it comes to responsive design, what are some of the best practices for ensuring that a web application is accessible and user-friendly on a wide range of devices and screen sizes?

Community feedback

@avinno

Posted

Hello!

First and foremost, nice job!

A few suggestions I have:

  • I would set a "min-height" of 100vh on your form element instead of "height" because if you look when the screen becomes small, you get a white space at the bottom of your page. I see it when I open the dev tools and the screen becomes smaller height wise. Maybe add some padding as well so the card has space at all times even if the window is small/resized. Just a personal preference on the padding.
  • Your star icon is a little wider than it is tall. Try retooling that to be exact 1:1 ratio in dimension so it is a perfect circle.
  • As with mine initially, you can just hit submit and get a blank number out of 5. I challenge you to add a catch if the user tries to hit submit before making a number selection.

Solid work! I hope my feedback is helpful! Keep it up!

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