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 page -react

Raza Abbas 790

@RazaAbbas62

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Theunis 210

@theYuun

Posted

There are a few things to fix here:

  • The top part of the page background is repeating, you can use background-repeat: no-repeat; to fix that, but also be sure that the container of the background is, at most, the intended size of the image in the page.
  • The page and section background colors should be swapped
  • The section size is mismatched
  • The box-shadow on the section is missing
  • I'm not seeing much in the way of aria properties for accessibility. Add these and add a screen reader extension to your browser. It's quite fun.
  • The keyboard arrow keys to navigate the questions are missing. This did take up a fair bit of my own time, given the conflicts with the Tab key conflicting with which question was last highlighted by the arrow keys.

Marked as helpful

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