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: GitHub Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Bootstrap 5 - CSS Framework
- Vanilla JavaScript
This one really tested my understanding of CSS positions and display properties. I had fun working out how to use the @media queries to size and display different elements.
Next step is to fine-tune the desktop layout so thatthe images on the left are displayed correctly.
- Bootstrap 5 - This CSS framework is amazing. It virtually does all the styling and grid work for you. Check it out!
- W3Schools - This is an amazing article which helped me throughout with helpful CSS tips, best practices, and examples.
- Google Fonts - This font collection really helped me spped up my workflow. I simply copied the @import code generated and I was good to go.
- Stack Overflow - This is a very helpful technical and developer solution base. I found a lot of the answers to my issues here.
- Frontend Mentor - @KharlAbban
- Github - KharlAbban
- LinkedIn - KharlAbban