Frontend Mentor - FAQ Accordion

This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

🚀 Live Site

🔗 View Live Website
📁 View Repository

📸 Screenshot

Desktop view

!Desktop Screenshot(./assets/images/screenshot.png)

🛠️ Built With

• Semantic HTML5
• Modern CSS (Flexbox, media queries)
• JavaScript (DOM manipulation + accessibility)
• Mobile-first workflow
• Frontend Mentor Starter Files

💡 Features

• Responsive layout for mobile and desktop
• Accessible FAQ interaction using:
  • aria-expanded
  • aria-controls
  • role="region"
• Smooth toggle animation (optional enhancement)
• Keyboard navigable
• Custom hover and focus states

🤓 What I Learned

• How to structure HTML with accessibility in mind
• The importance of aria-* attributes in building inclusive UI
• Efficiently toggling UI states using JavaScript
• Writing clean, reusable styles using BEM / utility-first approach

⏭️ Future Improvements

• Add animations for open/close effect
• Store active FAQ state in localStorage
• Add dark mode

📚 Useful Resources

• MDN Web Docs on ARIA roles
• Frontend Mentor community
• CSS Tricks – Accordion component

🙋‍♂️ Author

• Frontend Mentor – @Piyush-Rajput7

🧠 Challenge by

This challenge was created by Frontend Mentor. Thank you for providing amazing real-world practice challenges!