FAQ Accordion for Frontend Mentor
Posted on by Bob Matyas
One of my favorite ways to practice CSS and keep my skills sharp is to use the excellent layout challenges from Frontend Mentor. This is my solution to the FAQ Accordion Card challenge.
My solution is embedded in this pen from CodePen:
And is live online at https://bobmatyas.github.io/fm-faq-accordion/
Notes
There isn't anything too signifcant to report on this challenge. As always I approrched it mobile first and made use of Normalize.css, CSS Custom Properties, and modern layout techniques (Flexbox in this case). One thing that was an a bit of an unexpected challenge was the illustration, which uses two background images and an absolutely positioned element on desktop. It is also worth noting that I made use of the Details element for a solution that doesn't require JavaScript.