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 | Responsive | HMTL CSS JS

Jarrian 150

@godkingjay

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


Anything I should fix or improve?

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi there! 👋

Congratulations on finishing this challenge! 🎉

Here are some suggestions for improvements.

  • I would recommend using the native HTML elements to create the accordion, summary and details. By default, they are accessible to screenreaders and keyboard users. Currently, the accordions are not accessible by those tools, and also, the users should not have to click the image to expand the accordion. It is a small hit target which can be difficult for some people.
  • Remove the max-width: 100vw. It is recommended to treat the body element as the page which means that the width of the body element should not be limited.
  • I would recommend moving all the styling inside the html element to body element. html element is dealing with the user's setting. So, it's best to not touch it whenever possible.

That's it! I hope you find this useful!

Marked as helpful

1

Jarrian 150

@godkingjay

Posted

@vanzasetia Thank you for the advice, will take note of it.

0
Vanza Setia 27,795

@vanzasetia

Posted

@godkingjay You are 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