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

Challenge specific to Trevor Merrick

• Created accordion with just CSS

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

With the HTML basic content provided, worked on:

• assigning CSS class names using the BEM method
• used SASS (7-1 file structure, I only needed to use 4 modular folders in tis project)
• creating variables in SASS for color schemes, fonts, font-sizes, etc
• adding Google Fonts provided
• reset CSS to give all browsers a common starting point

Next worked on:

• building mobile first
• Figuring out where to use Flex vs Grid (used both)
• Worked on media query for smaller-mobile/tablet/desktop

Finally worked on:

• Worked on accessibility features for the accordion and footer links

Built with

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

What I learned

Using Sass more and more has been great. I've been really learning how to write as little code possible by using Sass. It's very gratifying when I can see where I would have had to write more if I wrote in just CSS.

Working on the accordion was fun. I really showed the power of CSS/Sass alone. I found a video online where someone created a different accordion and went from there. It wasn't too hard really.

Continued development

I need to continue developing my skills in CSS. It is easy to learn and hard to master. I think that sums up CSS. But I love it so that helps.

Useful resources

• Julio Codes: Responsive FAQ Accordion - This one helped me create a responsive accordion with just CSS. Great video!
• Kevin Powell - I watch his videos over and over again for great CSS/Sass tips and tricks.

Author

• Website - Trevor Merrick
• LinkedIn - @trevormerrick
• GitHub - @tmerrick17
• Frontend Mentor - @tmerrick17
• Twitter - @tcmerrick