Interactive rating component

Community feedback

• 

  Luiza Uszacki•250

  @LuizaUszackiPosted over 2 years ago

  I think it's a good thing to make the website responsive to different screen sizes, even if it's just a challenge. I usually like to make it responsive and treat the challenge as a real project to improve my skills as a personal challenge (and also because I'm a perfectionist lol).

  I just saw the challenge and it sees like it's necessary to style the other resolutions. In the "readme-template" there is a part that says:

  The challenge

  Users should be able to:

  - View the optimal layout for the app depending on their device's screen size

  • See hover states for all interactive elements on the page
  • Select and submit a number rating
  • See the "Thank you" card state after submitting a rating

  And just one last thing... If you didn't make it responsive because you didn't know if it was mandatory, you can just skip it but if you got stuck, I can help you:

  • You can use something like 400px instead of 1440px in your @media at the main and put the width to something like 360px;
  • Another way to do it (and what I would do) is to set your card's width as width: min(360px, 100% - 64px). In this way, your card's width would always be the smallest value (a fixed value of 360px on big screens or the screen's width minus 32px (2rem) on each side for the margin on small screens).

  3
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Alexeira, nice work on the challenge, and I like how clean your JS is :) I think you did a really good job overall in getting the design as close as possible. It's only a tad smaller than the original one; if you want to make it looking even closer to the design, you can try increasing the font size or some of the padding.

  To answer your question, even though the screenshot is only for the desktop view, it is generally good to make the design responsive since each challenge has both a mobile and desktop view, and this also reflects real-world frontend dev practices as the site could be viewed on different-sized devices. I'd say that most people I know (including myself) use the mobile-first approach, as in work on the mobile view first and then desktop. Depending on the challenge, I normally just cater to the two design sizes given, and at times I'd go a step further to make sure my design could still look good on more screen sizes. I encourage you to try your next challenge with the mobile design first, and then add media queries after that for the desktop view.

  Happy coding, and once again, great job :)

  1
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  You should approach a project with a mindset of making it responsive. When you resize it, it should look good on both smaller screen devices and larger screen devices and what comes in-between them.

  The way you achieve that is using media queries, fluid typography, responsive images, grids, etc. You can go through this small course to understand how to make a site responsive. https://web.dev/learn/design/

  1