FAQ Accordion – HTML & CSS Only

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

While building this FAQ accordion component, I deepened my understanding of HTML5 semantic elements like <details> and <summary>. I also practiced using custom fonts, CSS variables, and responsive design techniques. One specific challenge I overcame was removing the default triangle marker from <summary>, which required browser-specific styling (like ::-webkit-details-marker and list-style: none for Firefox). It also helped reinforce the importance of CSS specificity and debugging styles with developer tools.

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

The most challenging part was customizing the appearance of the <summary> element. At first, changes like color and hiding the marker didn't apply, and it took a while to realize that other class selectors were overriding my styles. Understanding how to target elements properly and dealing with browser compatibility issues were key learning points. I also had to carefully structure my CSS to avoid conflicting styles.

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

My main focus right now is improving how I write clean and organized CSS. If anyone can point out ways to improve the structure of my code or how I apply styles, I’d really appreciate it!