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
  • Links
  • Screenshot
    • Mobile design
    • Design design
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

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

Links

• Solution URL: Frontend Mentor
• Live Site URL: GitHub Page

Screenshot

Mobile design

Desktop design

My process

Built with

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

Continued development

The last projects I took I styled the elements mainly using either classes or ids, so it was good to practice again styling elements using CSS selectors, to refresh my memory.

details[open] > .question {
  color: hsl(238, 29%, 16%);
  font-weight: 700;
}
details[open] > .question::after {
  transform: rotate(0.5turn);
}
details[open] summary ~ * {
  animation: opened 0.5s ease-in-out;
}

Useful resources

• "Responsive FAQ Accordion Dropdown In HTML and CSS" by WEBCODEFLOW - The title is explicit; this article helped me in particular with CSS selectors.

Author

• Website - Ax-coding
• Frontend Mentor - @Ax-cd
• Instagram - @ax.coding