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
- Solution URL: Github
- Live Site URL: Live Website
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
I learned to tweak the checkbox input to hide and show elements
I'm planning to create more complex flex and grid layouts. Things to learn from feedback:
- add alt=" " for decorative images and not remove it from img elements. No h1-h6 inside a label tag.
- learn abouth
<detail>and<summary>tags. Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details - styling of detail tag: https://freefrontend.com/html-details-summary-css/
- CSS Tricks - This helped me hack a checkbox to create a dropdown menu. I really liked this pattern and will use it going forward.
- Website - Nilanshu V Rajmane
- Frontend Mentor - @nilanshu96
- Twitter - @nilanshu96
- feedback provided to me for the previous submission of this challenge - feedback