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

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

• Live Site URL: Hosted on Github Pages

My process

Built with

• HTML
• CSS
• Sass
• Flexbox
• Mobile-first workflow
• JavaScript
• jQuery - JS library

What I learned

1. How to use css to rotate images: Initially I was looking for the "up arrow" icon in the challenges resource (I'm use to icon packs like font awesome so I was spoiled). I eventually found out that I would have to figure out how to flip the provided image based on the accordion state. During this challenge I discovered the "transform" css rule which I used to rotate the the icon. Very cool trick which I will definitely use in the future.

2. How to have images extend beyond their parent element: It was good getting familiar with this design style. I've never worked on a design like this and it was good practice handling overflows and working with negative margins.

3. Positioning background images of elements: It was a bit tricky figuring out how to get the background image to line up with the main images above. During this project I became more familiar with the background-position css rule.

4. Sass: I have been continuing to become more familiar with adding Sass to my workflow. Using Sass has been helping me in my journey to use responsive units mainly in my projects.

Continued development

In the future I want to continue to use Sass and explore more of the advanced functionality.

Useful resources

• Displaying Gradient Background Correctly - Helped me to understand how to display a background gradient that doesn't repeat.
• Online Gradient Generator - Useful tool that helped me easily generate a good looking gradient.
• Sass pixel to Rems - Used to create a Sass function that helped me convert pixels to Rem units easily.
• Background Position - Helped me to position background images on applied elements.
• Flip An Image - This showed me how to use css to flip images along their axis.
• Maintaining Position of Elements with Absolute - Helped me in figuring out how to have a position absolute element (the box in this case) and keep it in the proper relative position when the screen resizes.

Author

• Website - Rashid Wilson
• Frontend Mentor - @shangum