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

Less, BEM, Flexbox and Jquery

#bem#less#jquery
Rodrigo 50

@aevim

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@YariMorcus

Posted

I took a look at your result, and it looks good.

However, I do have some feedback points, which I want to share with you (it is up to you what you do with it):

Critical feedback

  1. I can submit your form without selecting a number. This action brings me to the rated.html page, which gives me the following message: You selected null out of 5. This shouldn't happen in a real system, so this is something I would definitely change (like disabling the button if the user did not select a number. In this case, don't forget to enable it again haha).

Other feedback according to the design

  1. The padding on the top, right and left should be a little larger.
  2. The padding on the bottom should be a little less (if I am seeing this right in the design).

Other tips

  1. I see you created a hover state for your links in your footer, but not a visited and activated state (which should exist as well according to Web Accessibility).
  2. I personally would place <small> within <footer>, to better indicate to assistive technologies (such as screen readers) that the text belongs to a footer (unless there is a reason why you don't want to convey it as footer text).
  3. I always learned to use CSS background images for decorative images (in this case, the icon-star.svg). There is a side note here, and that is the following: if you do want to use HTML images for decorative images, then leave the alt attribute empty. Screen readers will otherwise read this out to their users, and this might confuse them because it doesn't offer any real value for these people.
  4. Always supply a raster image as a fallback for your vector graphics, in the case the user disabled images, or the browser does not support an SVG. Otherwise, nothing will be shown to the user.

I hope you can do something with the feedback points and tips I gave you, but don't see it as something you need to do, but rather something for later (you are always free to correct your solution if you want).

If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things :D.

Marked as helpful

1

Rodrigo 50

@aevim

Posted

@YariMorcus Thank you very much for thoses tips. I don't know how I forgot that the button could be clicked without any number being selected... I did fix it by doing a preventDefault if there's no number selected. I'll be using more css background images in my next projects. I did fix all the issues, at least I think I did..

1

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