Frontend Mentor - FAQ accordion

This is a solution to the FAQ accordion coding challenge on Frontend Mentor.

Frontend Mentor challenges help improve skills by building realistic projects.

Table of contents:

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments
• Personal Notes

Overview:

The challenge:

To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Preview of initial design:

Screenshots:

Fullscreen View (Desktop)

Animated Preview

**Note: This is a Mobile-First Approach & Wait for the GIF to load **

All viewports were included (except for the 4k view), in case the observer wishes to see the minor changes.

Desktop View (1440px)	Laptop View (1024px)	Tablet View (768px)

Mobile L (430px)	Mobile M (375px)	Mobile S (320px)

Links:

• Live Site URL: Website Link - Click Me
• Solution URL: FrontEndMentor - Click Me

My process:

Built with:

• HTML5, CSS3, Vanila Javascript
• Responsive Web Design Approach

What I learned:

Recap over some of the major learnings while working through this project:

General things I've learned:

• Review of using some advance CSS features, and CSS positioning
• Writing DRY code by combining similar styles
• Box Model & Responsive Design
• Review of using JavaScript

---

Author:

• Github - @Iron-Mark
• Github - @Mark-Siazon
• Frontend Mentor - @Iron-Mark
  • (The Assets used in this project is originally from FrontendMentor)

Acknowledgments:

• I would like to acknowledge the hard work and dedication I put into this project while injured, yet I'm building this project with a right wrist sprain.
• I am grateful for my friends and those who motivate me to push through and not settle for relaxation.
• Also to tutorial i watched on youtube that helped me solve the background styling.
• I hope that this website serves its intended purpose. Thank you!

Notes:

• I would be happy to receive comments, criticism, and such that could improve the website:
  • Cleaner Code
  • Better Practice/Approach to making this website.
• Feel free to approach and contact me :>
  • Jul 6, 2024 (Initial Coding)
  • Jul 7, 2024 (Finalize Styles + Documentation)