Frontend Development Workflow for FAQ Accordion

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  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! 🚀💻

  Marked as helpful

  2

  ---

  

  Roksana•330

  @tloxiuPosted 10 months ago

  @petritnuredini Thanks for your suggestion. I will keep that in mind! :)

  0
• 

  Raza Abbas•790

  @RazaAbbas62Posted 10 months ago

  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 :)

  Marked as helpful

  1

  ---

  

  Roksana•330

  @tloxiuPosted 10 months ago

  @FazeenIjaz Thank you very much! :)

  1