Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card (HTML, CSS, Flexbox, JS)

Bayoura 105

@Bayoura

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello there!

This is the first project on frontend mentor where I used JS (not a lot, though). The most difficult thing for me was definitely the positioning of the images... I am rather happy with how it turned out in the end, but please let me know your thoughts! I am happy about any piece of advice or feedback you're willing to give!

Thank you in advance! :)

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @Bayoura, Great job on this challenge. Here are some of my suggestions...

  • You could add an overflow-y: scroll; to the accordion-text. This will prevent the whole accordion from expanding when multiple questions are opened.

  • Good job on the JS code, but you could have achieved the revealing effect by using the details tag. You can learn more about it here

Hope this helps :)

Marked as helpful

1

@igor-ostojic

Posted

Amazing job done !

I love what you did with JavaScript !

1

Bayoura 105

@Bayoura

Posted

@igor-ostojic Thank you!! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord