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
- Live Site URL: Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
- Website - Jake Godsall
- Frontend Mentor - @jakegodsall
- LinkedIn - @godsalljake
This project was originally completed on 24th August 2022.
This repository is part of a series of repositories that have recently been cleaned and updated as part of an overhaul of my GitHub profile. The purpose of this overhaul was to ensure that each repository reflects my current development standards and practices, and to provide a cleaner, more professional appearance.
The project is updated as of 2nd January 2024.
The recent enhancements to the project include:
- Transformation into a Node.js-based project, featuring a development server and the ability to compile SASS into CSS using npm run commands.
- Transition from pixel (px) units to relative units (rem), with a baseline font size set at 10px.
- Adoption of a mobile-first design approach for better responsiveness and user experience.
- Introduction of smooth transitions for the expansion and collapse of FAQ sections, complemented by a rotating caret icon for visual feedback.
- Corrected the overflow of images in mobile and desktop viewports.
This project is open source and available under the MIT License.