Responsive, functional FAQ Accordion HTML/CSS

Solution retrospective
This FAQ Accordion challenge was a small and rather simple one, in the sense that it didn't require as much CSS and layouts, like some of the other full landing pages I've done. However, I was tempted to try it out anyways, as I knew it would be a test of my HTML and functional CSS skills ! This challenge was meant to be done with Javascript, but I knew it could be done with only HTML and CSS, and I gave it a go ! This was also a free challenge, meaning I did not have access to a Figma file this time around, and had to practice eye-balling the dimensions !
What challenges did you encounter, and how did you overcome them?-
Functional CSS As I mentioned, this challenge was meant to be done with Javascript, but I knew it could be accomplished with just HTML and CSS, with a few tricks. I was aware that I could use the 'checkbox method' in order to accomplish this, utilising
input type="checkbox"
,label for
, and the:checked:
pseudo-class, in order to simulate click events ! That being said, it's my first time actually using this trick on my own, so I had to take my time with it, and I'm happy with the end result ! -
Background Positioning: I had some issues trying to get the background image to properly scale with with the viewport as I tested for responsiveness, in the end, with a few tweaks using
background-size
, I managed to get it done.
All feedback are welcome and appreciated !
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Luqman (Luke)'s solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord