Responsive interactive rating component

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  First of all, congratulations on completing your Frontend Mentor project! It's a significant achievement to build a project from scratch, especially when it includes both front-end and scripting aspects. Here are some best practices and suggestions to refine your project further:

  HTML & CSS Best Practices:

  • Semantic HTML: Your use of semantic elements like <main> and <div> is good. Consider using <section> for grouping related content, which can improve the structure and accessibility.
  • Responsive Design: Good job implementing a responsive design. Ensure that your website looks good and functions well on a variety of devices.
  • CSS Organization: Your CSS is well-organized. As your stylesheets grow, consider organizing them further by separating styles into different files based on their purpose, like layout, typography, etc.
  • Alt Text for Images: Always provide descriptive alt text for images. This is crucial for accessibility as it helps screen readers understand the content of the images.

  JavaScript Best Practices:

  • Use of var: The use of var for variable declaration is outdated. Prefer const for variables that won't change and let for variables that will.
  • Event Delegation: Instead of adding an event listener to each rating button, consider using event delegation. This approach involves setting a single listener on the parent element and using the event target to determine which child was clicked.
  • DRY Principle: Your JavaScript code has some repetitive logic. Consider creating functions to handle these repetitive tasks to adhere to the DRY (Don't Repeat Yourself) principle.

  Accessibility:

  • Focus States: Ensure that all interactive elements like buttons have visible focus states. This is important for users who navigate using a keyboard.
  • Contrast Ratios: Make sure that the text colors and background colors have sufficient contrast to be easily readable, especially for users with visual impairments.

  Performance:

  • Optimize Image Loading: If you have images of various sizes, consider using different image files for different screen sizes to improve page load times.

  Learning Resources:

  • For more on semantic HTML, MDN Web Docs is a great resource.
  • To better understand modern JavaScript practices, JavaScript.info is highly recommended.
  • For CSS organization techniques, Smashing Magazine offers useful articles and guides.

  Keep up the fantastic work! Remember, each project is a stepping stone in your journey as a developer. Your progress is commendable, and by continually applying best practices, you'll grow your skills and create even more impressive projects in the future!

  0