Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See hover states for all interactive elements on the page
• Hide/Show the answer to a question when the question is clicked

Screenshot

Links

• Solution URL

My process

Built with

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

What I learned

This was my first project from Front End Mentor and I chose what I thought would be a pretty simple one, but I ended up learning so much from it!

First, I realized I didn't know how to deal properly with SVG, so I had to study how to manipulate them - how to insert them in my code, how to resize them and how to overlap them. I chose to use CSS grid to overlap the images and I was very happy ewith the result.

Another challenge was to make the accordion Q&A using only CSS. I ended up using checkboxes and although I like the result, I couln't find a way to leave only one answer open at the time. I could've done it with radio buttons, but them I wouldn't be able to hide the answers when clicking on the arrows.

  //hide answers
    .accordion-content {
        color: $text-neutral-dark;        
        max-height: 0px;
        overflow: hidden;
        transition: all .25s ease-in-out;
    }

    //show answers
    .toggle:checked + .lbl-toggle + .accordion-content {
        padding-bottom: 1rem;
        max-height: 3rem;
    }

Finally, it was my first time using SASS in a project and I loved it :) So much easier to organize the styling.

Continued development

I wanted to make only one answer visible at a time, but I couldn't find a way to achieve this using CSS only. I might do some extra digging later or finally add some JS to fix this and make the accordion prettier.

Useful resources

• Scaling SVG on CSS Tricks and How to use SVG (in portuguese) from Willian Justen- These helped me to understand how to scale my SVG!
• How to overlap images in CSS on Bricampgomez - Interesting way to overlap images using CSS grid.
• How to create a responsive SVG (in portuguese) from Willian Justen - This article helped me to understand how to make my svg responsive (although I ended up using two different image compositions for desktop and mobile)
• Checkbox hack - this is where I got the checkbox hack from to build reaveling answers :) very interesting!

Author

• Portfolio
• LinkedIn