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.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I am still not comfortable with background image positioning, but still want do more practices to master it. I am good at flexbox but I still need to practice my grid skills. I also faced a problem with transitioning the height which was weird. But this amazing post helped me. Using CSS Transitions on Auto Dimensions
- CSS Diner - I'd recommend it to anyone because it is an interactive game to practice CSS Selectors.
- Flexbox Froggy - This is an amazing website which helped me review my flexbox skills. I'd recommend it to anyone because it is an interactive game to practice flexbox.
- Grid Garden - This is an amazing website which helped me review my Grid skills. I'd recommend it to anyone because it is an interactive game to practice Grid.
- Frontend Mentor - @najeeb-anwari
- Github - @najeeb-anwari
- Twitter - @yourusername