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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

This is the solution of FAQ Accordian Card based on Vanilla JS, CSS and HTML.

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

• Solution URL: GitHub Solution
• Live Site URL: Netlify Live

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vanilla JS for Interactions

The main thing that I learned is image manipulation. Using the different images together and adjusting them in proper way. It also provided me with more practice on responsive designs with just CSS. I also used JS to handle the changing states of elements.

• Muhammad Saad
• Frontend Mentor - @Arman001