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 and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS
- Flexbox
- Mobile-first workflow
- Vue.js - JS library
- Radix Vue - Unstyled, accessible components for building high‑quality web apps in Vue.
- TailwindCSS - For styles
In this project, I got to know and learned how to use the Radix Vue library, which is similar to Radix UI in React.js, and it helped me a lot in creating the keyboard-accessible and navigable accordion.
- Vue Style Guide - This helped me with its rules. I really liked the patterns and will use it going forward on my Vue projects.
- Radix Vue - This is an amazing component library which helped me create accessible components. I'd recommend it to anyone still use this library.
- GitHub - @rodrigoqueiroz12
- Frontend Mentor - @rodrigoqueiroz12
- LinkedIn - @rodrigoqueiroz