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 with CSS and Vanilla Javascript

#accessibility
Hania B. 1,360

@techanthere

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


This challenge was a bit harder for me than the previous one. In particular, the placement of illustration image was hard but at the end I managed to do it nicely. Took some help from @ApplePieGiraffe solution to this challenge like what images should be placed in HTML and hence decided the placement of main desktop and mobile images in the HTML only. Have started to believe that it's a good approach to place the background images or decorative image-based content in CSS instead of HTML. I am glad I have completed another frontend mentor challenge. I will really appreciate any positive feedback on my code.

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @techanthere, Great job on this challenge, your webpage responds very well.

I noticed that you're using <button> to show and hide the answers. In case you didn't know, you could use the <details> and <summary> tags to achieve the same result. This also makes the webpage more accessible.

Hope this helps :)

1

Hania B. 1,360

@techanthere

Posted

Hey @buneeIsSlo thanks for the feedback! Actually I know about details and summary, but since I am more into practicing Javascript on the JS challenges so I preferred this way :)

1
bunee 2,060

@buneeIsSlo

Posted

@techanthere I see. Happy Coding!

1

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