coding-bootcamp-testimonials-slider-master-webpage
Design comparison
Solution retrospective
any comment specially on js
Community feedback
- @petritnurediniPosted 10 months ago
First off, congratulations on completing the Coding Bootcamp Testimonials Slider project from Frontend Mentor! It's a fantastic achievement to turn a design into a fully functioning web component. Here are some best practices and recommendations to enhance your project further:
HTML & CSS Best Practices:
- Semantic HTML: Your use of semantic elements like
<section>
and<main>
is good. Consider using<figure>
and<figcaption>
for the images and their captions to add more semantic meaning. - CSS Organization: Your CSS is well-organized. As your projects grow, consider separating your CSS into multiple files, like one for layout, one for typography, etc.
- Responsive Design: Ensure your design is fully responsive. Consider using media queries to adjust layout and font sizes for different screen widths.
- Use of Animations: Nice use of animations for the slider. Ensure they enhance the user experience and aren't too distracting.
JavaScript Best Practices:
- Use of
const
andlet
: Great use of modern JavaScript features. Continue to useconst
andlet
for variable declarations. - Event Delegation: Instead of attaching an event listener to each button, consider using event delegation on their parent container.
- Code Refactoring: Your JavaScript code is clear and functional. As you progress, look for opportunities to refactor and simplify your code.
Accessibility:
- Keyboard Navigation: Ensure that the slider can be fully operated using a keyboard for accessibility purposes.
- Image Alt Text: Always provide descriptive alt text for images. This is important for screen reader users and SEO.
Performance:
- Optimize Images: Ensure your images are optimized for the web. This helps in faster loading times, especially for users with slower internet connections.
Learning Resources:
- For advanced HTML and CSS techniques, MDN Web Docs is a valuable resource.
- To learn more about JavaScript best practices, JavaScript.info is highly recommended.
- For accessibility guidelines, refer to WebAIM.
Keep up the amazing work! Every project is an opportunity to refine your skills and learn something new. Your dedication to learning and applying best practices is commendable. Keep pushing yourself, and you'll continue to grow as a developer. Happy coding!
Marked as helpful0 - Semantic HTML: Your use of semantic elements like
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