FAQ accordion

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing your FAQ accordion project! 🎉 It's a fantastic achievement, and your implementation of the design and functionality shows great skill. Let's go over some best practices to enhance your project further.

  • Use Semantic HTML: Incorporate more semantic HTML elements. For instance, each FAQ item could be wrapped in an <article> tag, and the questions themselves could be <button> elements for better accessibility. This will make your page more accessible and improve SEO. 🌐

  • Accessibility in Accordions: To improve accessibility, use aria-expanded attributes in your accordion buttons (questions). Screen readers use these attributes to convey whether sections are expanded or collapsed. 📖

  • Efficient Event Handling: Instead of attaching event listeners to each plus and minus icon, consider event delegation. Attach a single event listener to a common parent and use the event's target property to handle clicks. This reduces the number of event listeners and improves performance. 👨‍💻

  • CSS Class Names: Aim for more descriptive class names. For instance, instead of .plus or .minus, use .accordion-toggle-open and .accordion-toggle-close. Clear class names make your code easier to understand and maintain. ✍️

  • DRY (Don't Repeat Yourself) Principle in JavaScript: You have two separate for loops for plus and minus icons. These could be combined into one to follow the DRY principle, making your code more efficient and easier to maintain. 🔁

  • Image Optimization: Ensure that your images are optimized for the web. This helps to improve the loading times of your page, especially on mobile devices. 🖼️

  • Responsive Design: Great job on implementing a media query! Consider testing on various devices to ensure the best user experience across all screen sizes. 📱💻

  References for further learning:

  • For semantic HTML and accessibility: MDN Web Docs
  • For JavaScript performance and event delegation: JavaScript.info
  • For CSS best practices: CSS-Tricks
  • For image optimization: Google Web Fundamentals

  Keep up the great work, and continue exploring and improving. Every project is a stepping stone to becoming an even better developer. Can't wait to see what you create next! 👍💻

  Marked as helpful

  1

  ---

  

  Priyanka Tamhankar•60

  @PriyankaTamhankar01Posted 9 months ago

  @petritnuredini

  Thank you for the detailed feedback and resources! I really appreciate your insights and suggestions for enhancing my FAQ accordion project.

  0