Frontend Mentor - FAQ accordion card solution

This is my 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

FAQ Webpage with accordion card. We are provided with the mobile and desktop design of the webpage and we have to build it according to the design. This is a cool project that we can use in the future incase we need to add a FAQ section to any of our websites.

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: https://github.com/UbaidRussell/FAQ-accordion-card
• Live Site URL: https://ubaidrussell.com/FAQ-accordion-card/

My process

On this project I sorta just went straight in and started doing it, I think it can be a lot better and will continue to improve on making this website better

Built with

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

What I learned

This code snippet shows how I used the contain property to make the image not overflow the container. This is a very useful property and I will be using it in the future when it comes to keeping elements contained inside their containers.

   body{
    contain:strict;
   }

Continued development

To make this better we're going to add some javascript to make the accordion work. We're also going to add some more styling to make it look better. We're also going to add some more content to the page to make it look more like the design.

Useful resources

• Example resource 1 - This helped me for aligning items in a flex container. I really liked this pattern and will use it going forward.

• Example resource 2 - This is an amazing article which helped me finally understand how to remove an element from the flow of our document. I'd recommend it to anyone still learning this concept.

Author

• Website - UbaidRussell
• Frontend Mentor - UbaidRussell
• X - UbaidRussell

Acknowledgments

Shout out to the guys at frontendmentor.io for creating such a great platform for us to practice our skills.