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 Code: This repo, check out the code!
• Live Site URL: View project live

My process

I approach projects like this with an critical eye for detail because it's the small things that affect the user most. I don't want any of my UI's to feel janky or unreliable so I spend a lot of time honing the look and feel.

At one point I had the design looking great across desktop and various mobile devices, except Safari on iOS was giving me a terrible bug that has to do with applying flexbox to a <section> tag. It just didn't look quite right so I spent a number of hours debugging and testing until I had figured out the issue. I think I uncovered a Safari rendering bug in the process! I was able to fix the issue and get the design looking perfect on iOS.

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• SCSS mixins, variables and partials for oragnized, reuseable SASS
• Flexbox

What I learned

I took a mobile first approach in laying out this design. I wanted to also incorporate SCSS as I haven't had a chance to use it much in prior projects. I also wanted to play around with SVG filters and animations so I went ahead and added some movement to the page.

One thing I was really happy with was the HTML5 implementation of <details> and <summary>, using these tags I was able to get the accordions opening and closing without any javascript Here's an example:

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on
    team members for the Premium plan.
  </p>
</details>

I thought this was a nifty way to modify my animtion without having to repeat code. Btw, mixins with params are awesome right? :)

@mixin shadow($throw: 32px) {
  filter: drop-shadow(0px $throw rgba(240, 240, 252, .8))
}

@keyframes hero-mobile-animation {
  from {
    @include shadow;
    transform: translateY(0px);
  }

  50% {
    @include shadow(12px);
    transform: translateY(10px);
  }

  to {
    @include shadow;
    transform: translateY(0px);
  }
}

No JavaScript was used for this project, I'm happy about that because HTML5 is awesome :)

JavaScript? null

Continued development

I will continue to dive into SCSS after this project. I solidified a lot of my understanding around mobile-first layouts and incorporated some pixel-perfect responsive design and I'm excited to continue this in future projects.

Useful resources

I found a ton of good articles while working on this project. Here are a few you may want to check out if you want to learn more about SVGs, HTML5 'accordions' and more cool stuff used in this project.

• MDN doc on the HTML5 details 'aka accordion' tag - This helped me a ton! This is how you complete this challenge without javascript
• Adding shadows to SVGs - Taught me a lot about adding shadows and filters to SVGs
• Clipping and masking in CSS - This was helpful to get that look where the box is coming off the page.
• Clippy clip-path maker - Super helpful for quickly making clipping masks on the fly.
• CSS Annimations Spec - This is the official spec for CSS animations, helpful!

Author

• Website - Michael Carr
• Frontend Mentor - @xyeres
• Twitter - @xyeres