In this challenge, you'll be building out an FAQ accordion. This is an extremely common front-end pattern, so it's a great opportunity to get some practice in! The challenge is to build out this FAQ accordion card and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Users should be able to:
1. View the optimal layout depending on their device's screen size.
2. See hover states for all interactive elements on the page.
3. Hide/Show the answer to a question when the question is clicked.
4. Bonus: Complete the challenge without using JavaScript.
I do not have access to the Figma sketch so the design is not pixel perfect.
- Semantic HTML5 markup
- CSS custom properties
- Flex
- Grid
- Desktop-first workflow
- JavaScript
This project helped to improve the undertstanding of images and how they work in CSS. For some reason I am still struggling with it especially when it comes to responsiveness. Something I need to practice more!
- Figma - Paste your design image to check the size of containers, width, etc.
- Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!