This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
FAQs accordion challenge/ created with just HTML & CSS. Able to be navigated with keyboard too because of the use of details/summary tags.
- Solution URL: https://github.com/ofthewildfire/FEM-faqs-accordion
- Live Site URL: https://fem-faqs-accordion-kc.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
I first set up the html/css - right off the bat I knew I was going to use the
details and summary tags -- however I went down a bit of a rabbit hole with
position: absolute -- soon though I scrapped that because I remember a Kevin
Powell video where he mentioned that beginners often have an unhealthy reliance
on position: absolute and so in the end I landed up using Grid and a simple
background image set to no-repeat, which works fine for me.
More use of Grid and being more aware of my jump to positioning, I should always be aware not to use it as a bandaid. Continued practice of the BEM naming method. I used/tried to use it in this project and I am getting it, but, more practice is needed.
- MDN - This helped me with the details/summary html.
- Frontend Mentor - @ofthewildfire
- Twitter - @km_fsdev