sorengrey / faq-accordion-card

A challenge from Frontend Mentor.

Frontend Mentor - FAQ accordion card

A coding challenge from Frontend Mentor

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: solution url
• Live Site URL: live site url

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Google Fonts
• JavaScript
• jQuery
• Mobile-first workflow

What I learned

This challenge was great practice for CSS positioning, particularly getting better about using position: absolute and z-index. I had to implement them both to keep the box and hero images from moving downward when the dropdown menu was opened.

It also gave me the opportunity to brush up on my jQuery skills. I spent a while researching on w3schools and Stack Overflow to get the dropdown menu's functionality just right.

Continued development

While this project is done, I may come back and tweak the margins and padding a little here and there. If you have any suggestions for anything else, I'd love to hear them!

Author

• Website - Heather Smith
• Frontend Mentor - @sorengrey
• LinkedIn - Heather Smith