a responsive FAQ section with html, CSS and JavaScript

What are you most proud of, and what would you do differently next time?

I'm really proud of how I combined HTML, CSS, and JavaScript to build a working FAQ section. Seeing the toggle feature come to life and respond smoothly to clicks was a great moment. It helped me understand how these core web technologies fit together and boosted my confidence in handling things like DOM manipulation and user interaction.

If I were to do it again, I’d pay more attention to making it accessible and mobile-friendly. I’d add support for keyboard navigation, include ARIA labels, and start with a mobile-first design to ensure it looks and works well on all devices. I’d also work on making the JavaScript more organized and reusable.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was getting the toggle functionality to work smoothly with JavaScript. At first, the answers either wouldn’t show or all opened at once, which made the experience feel clunky. I realized I needed to better understand how event listeners and class toggling work, so I took some time to review those concepts and experiment with simpler examples. After that, I was able to write cleaner, more targeted code that controlled each FAQ item individually.

What specific areas of your project would you like help with?

One part I’d really like to improve is how I use media queries to make the layout fully responsive. I managed to get things working okay on desktop and mobile, but it felt a bit like trial and error. Choosing breakpoints and getting the layout to look good on all screen sizes was more challenging than I expected. Sometimes things would shift or not align properly on smaller screens. I’d love some tips on how to write cleaner, more organized media queries and structure my CSS so it’s easier to manage as the project grows.