Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor.

Table of contents

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

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: frontendmentor.io

• Live Site: netlify.app

My process

Workflow

• Preparing workflow (Installing Reactjs, Adding assets, Preparing README.md)

• Identifying components

  • FAQ, FancyImage, List, Item

• Adding CSS Preflight

• Creating components

• Working on mobile design based on design folder

• Working on desktop design based on design folder

• Working on React functionality for accordion faq

• Completing README.md

• Publish on Github.com | netligy.app | frontendmentor.io

Built with

• React
• CSS Module - For styles
• Mobile-first workflow
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid

What I learned

Image position and smooth toggling was the tricky part of this challenge. Finally I've solved this challenge by using useRef, useState, and useEffect to achieve smooth animation on toggling description section

Continued development

Reading and using animation libraries in my upcoming solution

Useful resources

• 5 ways to animte a React app

Author

• Frontend Mentor - @siavhnz

• Gihtub - siavhnz

• Codepen - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension