Simple component using html, css and Javascript.

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey,

  It looks great! Your html is really neat and easy to read, well done on that ^^ The functionality of the component seems to work well too, although it would be nice to add a function to prevent users from submitting the thing without selecting any rating. Overall your css seems fine too, but there's a few bits you could improve on:

  1. Avoid setting fixed heights on things. You don't need it, most of the time. Every element has their own height, if you wanna increase this, do so by adding padding to it. This goes to your card component itself as well as all the buttons.

  2. In this challenge you could actually skip adding media queries I believe. Just swap your width to max-width.

  3. Set your font-sizes in rem. Pixels aren't accessible: they won't scale if a user were to change their settings in the browser.

  4. For some reason the font-family doesn't seem to work at the moment, it's just the browser's default sans serif font I can see.

  5. You could try to use relative units instead of pixels not just for the fonts but for paddings, margins, widths as well. Using rem is an easy way to start out. I'd only use px for small things like border-radius or box-shadow.

  Just to clear some confusion up regarding your 2nd point: when using just vanilla css, all your styles can go in one stylesheet, there's no need for separate sheets for desktop/mobile view. In fact, for easiness sake it's the best to keep media queries on the same stylesheet, always. Later on, when you start building bigger projects and you try out Sass/Less you can break your css into smaller modules, but even then css is usually broken into smaller bits based on the different sections of the websites and not media queries. But you'll see this yourself, as you get more experience in this ^^

  As a recommendation, I'd say you should start working with the mobile view first though. It's usually a lot easier to adjust styles for the desktop with media queries than the other way around.

  I hope I was able to help a bit! Good luck!

  Marked as helpful

  1

  ---

  

  Joe Dev•10

  @iAmJoeDeveloperPosted over 2 years ago

  @FluffyKas

  Thank you very much for taking the time to review my code, I am very grateful, I will work on those recommendations and update the repository, I will let you know when I do.

  Thank you again!.

  0