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

Responsive faq accordion using grid & flexbox

ccbdp 315

@ccbdp

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


Any kind of feedback is highly appreciated thank you!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi there! 👋

Good effort on this challenge! Your solution is responsive and looks great! 👍 It's great that there's a functionality where you only allow the user to open one accordion panel at a time. Well done! 👏

There are two things that can be done better.

  • Firstly, I would recommend using the native HTML element to create the accordion, details and summary. They are pronounced correctly by the screen readers by default.
  • Secondly, I would suggest removing the console.log from the script.js.

Overall. great work! All the images are decorative and you have done the right thing by leaving the alt empty. The only major problem is the accordion that is not accessible by the screen reader users.

So, I hope this helps! Keep up the good work! 👍

Marked as helpful

0

ccbdp 315

@ccbdp

Posted

@vanzasetia thank you for your comment! Figured i'm a little weak with regards to accessibility and I hope to work on that, thank you again for the advise!

0
Vanza Setia 27,795

@vanzasetia

Posted

@ccbdp You're welcome! 👍

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