Frontend Mentor - FAQ accordion card solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

This is to practice positioning elements by CSS and semantic HTML. All interactive elements are focusable. I used

widjet for the accordion and try not to use javaScript to expand/shrink them and rotate the arrows.

The challenge

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

Screenshot

• Mobile View (at 375px)

• Desktop View (at 1440px)

• Expanded Accordion on Desktop View

Links

• Solution URL: Frontend Mentor
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

It was first time using

tag on html and css selectors to enable the accordion fully working. The bonus challenge on this project was that only use HTML and CSS to achieve the accordion.

I spent a quite long time to positioning the images of woman and the background especially for desktop view. To hide the part of base structure in woman's illustration, I used

overflow: hidden;

Continued development

On the desktop view, I wanted to vertically center the card (white card) by using CSS grid, however the text inside the accordion can change the width when it's expanded. In the future, I would like to improve more on positioning illustrations.

Useful resources

• MDN -
  : The Details disclosure element - This helped me to understand how to customise the defaul style and effects.
• MDN - CSS selectors

Author

• Frontend Mentor - @sloth247

Acknowledgments