Responsive, functional FAQ Accordion HTML/CSS only !

Solution retrospective
My 5th challenge done on Frontend Mentor!
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 really appreciated !
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@makogeboris
There seems to be an issue with the live site url
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