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

CSS, HTML & JS

samir-Deve 350

@samir-Deve

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

...

What challenges did you encounter, and how did you overcome them?

...

What specific areas of your project would you like help with?

...

Community feedback

P

@srijanss

Posted

  • The solution doesn't include semantic HTML. There is no h1 tag for the page. For all the headings h2 is used. I liked the way you have used header and main element which will separate the content and header elements.
  • your solution is not keyboard accessible. You have used div to create each faq accordion item. You can used <details> element instead which is keyboard accessible by default. And if you use that element you don't need javascript to open or close the accordion.
  • Layout is little bit different than the design. You are missing some of the paddings and background styles
  • Code is well structured, readable. But it can be better structured for reusability
  • solution doesn't differ that much from the design. If you add the missing styles, then it will perfectly match the design
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