rmcg.dev/projects/FrontendMentor/newbie/faq-accordion-card/README.md

3.3 KiB

Frontend Mentor - FAQ Accordion Card

This is a solution to the FAQ Accordion Card. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

These are the design references Mobile Design Desktop Design

Screenshot

Screen shots of the finished Mobile & Desktop versions with and without the active state

Mobile Inactive Mobile Active

Desktop Inactive Desktop Active

My process

I built out the mobile version first, with the full intention of making it a responsive design that would scale the mobile version till it got to the desktop size and then flip to the desktop version. Unfortunately I couldn't get the placement and scaling to work as I wanted; particularly with regards to the desktop version.

In the end I sought out a someone else's solution to get an idea of how to do the desktop images. This was the first time I had worked with using 3 images layered on top of each other, and I found it difficult.

As I used a disclosure animation I made sure to use @media (prefers-reduced-motion) {} to disable the animation for those that need it.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

That I could use Detail / Summary to handle the questions in HTML & CSS rather than use JavaScript.

Continued development

Need to spend some more time practicing placement of images when there are multiple images that are supposed to be layer.

Useful resources

  • MDN Detail - Provided how to do the summary and detail without having to use JavaScript.

Author

Acknowledgments

I want to thank Bob Matyas for his codepen, which gave the tip that I needed for handling the placement of the desktop images.