Frontend Mentor - FAQ accordion solution

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.

Table of contents

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

Overview

The challenge

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vanilla JavaScript
• SASS - For styles

What I learned

I was able to directly implement using SASS, using this simple FAQ accordion. I was able to make use of the modules and inheritance/extends the functionality of SASS, also the nested structure made it easy to implement CSS.

Continued development

I am also working on the accessibility of this project in the aspect of adding keyboard navigation to the project.

Useful resources

• SASS - This helped me with figuring out how SASS works and how to configure it to be converted to Vanilla CSS so that it can be integrated into the HTML code.

Author

• Website - Perpetual Meninwa
• Frontend Mentor - @Perpy-del
• Twitter - @pominspirational

Thank you for reading!