This is my solution to the FAQ accordion card challenge on Frontend Mentor.
👩🏻💻 Frontend Mentor challenges help you improve your coding skills by building realistic projects.
⚡ This challenge was to build a responsive FAQ card, using HTML and CSS, with accordion interactivity applied to make the questions drop down on click, using JS.
🚀 I built this while following @TheCoderCoder's free live code video on YouTube. Check it out here: Part 1, Part 2. I noticed some differences afterwards between what was completed in the video and the design images, so I made some modifications, as well as fixed some accessibility issues. This gave me great practice!
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: https://www.frontendmentor.io/solutions/faq-accordion-card-EaJ_perFKU
- Live Site URL: https://nix7amcm.github.io/FEM-faq-accordion-card/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- JavaScript
Massive shoutout to @TheCoderCoder! I learned so much doing this project with her free live code course on YouTube. 😃