bccpadge/faq-accordion-card-main

Frontend Mentor - FAQ Accordion Card using HTML, CSS & JavaScript

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

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

Links

• Solution URL: Frontend Mentor
• Live Site URL: Github Pages

My process

Built with

What I learned

I learned you can load CSS in JavaScript using insertAdjacentHTML on the body element.

document.body.insertAdjacentHTML(
  "beforeend",
  `
  <style></style>
  `
);

Continued development

I want to learn more how to implement keyboard accessibility within the website.

Useful resources

• Web code tools - Web code tools website has HTML and CSS snippets. I used the box shadow generator.
• Cubic Bezier - Cubic Beizer Generator website generator
• ARIA Authoring Pratices Guide (APG) - An Accessibile Accordion example for HTML markup
• Bootstrap 5 Accordion - Accordion example

Author

Acknowledgments

• YouTube Tutorial