FAQ accordion card

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

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

Screenshots

My process

Built with

• React - JS library
• Styled Components - For styles
• CSS custom properties
• Flexbox
• CSS Grid

Continued development

Mobile version of site is still in the development.

Useful resources

• Styled Compnents Docs - This helped me with understanding how styled components work.
• CSS Grid Generator - Useful tool for genreating CSS Grid markup.

Author

• Telegram - Nikita