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

• Solution URL: (https://github.com/MegatHilmi/faq-accordion-card-main)
• Live Site URL: (https://megathilmi.github.io/faq-accordion-card-main/)

My process

Built with

-HTML -CSS -JavaScript

What I learned

Throughout this challenge, I had learnt on how to hide and show the text by clicking the other text by changing the CSS properties by using Jvascript. I also improved from my previous challenge about pseudoelement skills in CSS.

Continued development

For the future I will try more challenge that can improve my skills in building the website.

Useful resources

• resource 1 - This forum really help me to solve problem on how to make gradient background to stretch instead of repeating.
• resource 2 - tips on why z-index is noy functioning
• resource 3 - tutorial on how to make horizontal and vertical align
• resource 4 - Tutorial on how to make images responsive with css
• resource 5 - list of all position property
• resource 6 - to force a text to stay in one line
• resource 7 - horizontal tag tutorial
• resource 8 - Tutorial on how to hide and show content by using JavaScript
• resource 9 - Display property for CSS
• resource 10 - Tutorial on how to change CSS property by using JavaScript
• resource 11 - Tutorial onhow to pass a parameter into a function in Javascript
• resource 12 - tutorial on how to change display properties in css by using Javascript
• resource 13 - Javasript array tutorial
• resource 14 - JavaScript For loop tutorial
• resource 15 - Tutorial on how to use switch in Javascript
• resource 16 - Tutorial on how to use continue and break in javascript loop
• resource 17 - This website really help me too rotate an HTML div element 90 degreed using Javascript
• resource 18 - Tutorial on using flexbox
• resource 19 - This forum really help me on how to make a text and image to not displaying outside of the div.

Author

• Frontend Mentor - @MegatHilmi