FAQ Accordion for Frontend Mentor || My solution to the Frontend Mentor FAQ Accordion layout challenge and some lessons learned.

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:

https://codepen.io/bobmatyas/pen/NWRWVeK

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.