Interactive Rating Component using HTML, Tailwind CSS and JavaScript
Design comparison
Solution retrospective
Hey Everyone,
I just wrapped up my latest challenge, building a project using HTML, Tailwind CSS, and JavaScript. This marks my first venture into JavaScript, and I'm eager to receive feedback. Any suggestions for enhancing the solution would be greatly appreciated.
Thank you!
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing the interactive rating component challenge from Frontend Mentor! Your commitment to building this project and making it functional is commendable. Here are some best practices and recommendations to further enhance your project:
HTML & CSS Best Practices:
- Semantic HTML: Great use of semantic HTML elements. Consider using
<button>
instead of<a>
for the rating buttons, as they are more semantically correct for actions. - Responsive Design: Ensure your design looks good and functions well on all devices. Using relative units like
em
orrem
instead of pixels can help enhance responsiveness. - CSS Organization: Your CSS is well-organized. Keep using comments and consistent formatting for better readability.
- Use of Custom Styles: The custom style block in the HTML head is fine for small adjustments, but for larger projects, consider moving all CSS to external stylesheets.
JavaScript Best Practices:
- Use of
const
andlet
: Replacevar
withconst
orlet
for variable declarations to make your code more robust and modern. - Event Delegation: Consider using event delegation for handling events on the rating buttons. This approach is more efficient and scalable.
- DRY Principle: You've done a good job following the DRY (Don't Repeat Yourself) principle. Keep this practice for maintainable and readable code.
Accessibility:
- Keyboard Accessibility: Ensure that all interactive elements, like your rating buttons, are accessible via keyboard navigation.
- Screen Reader Accessibility: Use
aria-label
oraria-labelledby
attributes to provide descriptive labels for interactive elements, which are helpful for screen reader users.
Performance:
- Optimize Image Loading: Check if your images can be optimized further to reduce the load time, especially for users on slower internet connections.
Learning Resources:
- To dive deeper into semantic HTML and accessibility, MDN Web Docs is an excellent resource.
- For CSS best practices, CSS-Tricks offers a wealth of information.
- To strengthen your JavaScript skills, JavaScript.info is highly recommended.
Keep up the excellent work! Every project you build enhances your skills and brings new learning opportunities. Your progress is impressive, and by continually applying best practices, your development skills will grow even stronger. Happy coding!
0 - Semantic HTML: Great use of semantic HTML elements. Consider using
Please log in to post a comment
Log in with GitHubJoin 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