Frontend Development Workflow for FAQ Accordion

Great job on completing the Frontend Mentor challenge for the FAQ accordion! Your project showcases a good understanding of HTML, CSS, and JavaScript. Here are a few suggestions to further refine your code:

1. Improve Accessibility and Semantic HTML:

   • Use <button> elements for interactive elements like the FAQ toggles instead of <img>. This enhances accessibility as buttons are more semantically appropriate for interactive elements.
   • Example:

     <button class="toggle-btn" aria-expanded="false">
       <img src="assets/icon-plus.svg" alt="Expand">
     </button>
     

2. Avoid Redundant IDs and Inline Event Handlers:

   • Instead of using multiple IDs and inline event handlers, consider using classes and adding event listeners in your JavaScript. This approach reduces redundancy and makes your code cleaner.
   • Example:

     document.querySelectorAll('.question').forEach(question => {
       question.addEventListener('click', toggleFAQ);
     });
     function toggleFAQ(event) {
       // Toggle logic here
     }
     

3. CSS Optimization:

   • Consolidate your media queries and CSS files. Having separate files for media queries (media-query.css) isn't necessary and can be combined into your main stylesheet for better organization.
   • Utilize CSS variables for repeated values like colors, fonts, etc., to make your stylesheet easier to maintain.

Additional Resources:

• For accessibility best practices, visit Web Accessibility Initiative (WAI).
• Check out MDN Web Docs on CSS Variables for more on CSS custom properties.

Keep pushing the boundaries of your coding skills, and don't hesitate to explore new challenges. Each project you build is a stepping stone to becoming a proficient developer! 🚀💻

Hi, @tloxiu in your question p in CSS you can use

transition: height 0.3s linear;

it would make a smooth transition between hiding and showing your answer

I hope it would help

Enjoy coding :)