This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Hide/Show the answer to a question when the question is clicked.
- Navigate the questions and hide/show answers using keyboard navigation alone.
- View the optimal layout for the interface depending on their device's screen size.
- See hover states for all interactive elements on the page.
- Solution URL: Frontend Mentor
- Live Site URL: Live
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript for interactive functionality
- Google Fonts - For font styling
During this project, I focused on creating an accessible and user-friendly FAQ accordion. Key learnings include:
- Implementing JavaScript to manage accordion state while ensuring accessibility.
- Using CSS transitions to smoothly animate accordion content.
- Ensuring semantic HTML5 structure and ARIA roles for accessibility.
For future projects, I aim to:
- Enhance my understanding of advanced CSS techniques and animations.
- Explore more accessibility features and best practices.
- Continue refining JavaScript for better performance and usability.
- MDN Web Docs - ARIA - Valuable for understanding accessibility roles and properties.
- CSS Tricks - Flexbox - A comprehensive guide to using Flexbox effectively.
- Frontend Mentor - @Yashi-Singh-1
- GitLab - Yashi-Singh-9
- LinkedIn - Yashi Singh
Thank you to the Frontend Mentor community for providing such engaging challenges. Special thanks to those who offered guidance and feedback throughout the project.