FAQ Accordian Card

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi David,

  Congratulations 🎉 for completing this challenge, your FAQ component looks great, and it is great that you used flex to center the card. There are some issues/suggestions I want to address:

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. To fix the background issue, you can change the value of height to 100vh so that it covers everything. Also, it is not good to give the body tag, a fixed width property such as 365px or 1440px as this will affect the inner content as well.
  3. I noticed that you took a desktop-first approach however I would strongly encourage you to use the mobile-first approach as it will help with responsiveness and rearranging/changing elements within your body. Also, it is best practice to do so.
  4. In the section tag, you need to use at least 1 header (any between h2 to h6) therefore, you should not nest your img tags within this semantic. You could use the picture tag instead.
  5. Regarding the functionality of your JS, it works however when you click on the same arrow again after it has already been clicked, the Q and A won't close.

  Overall, great work and project and wish you the best for your future projects so keep coding 👍.

  0

  ---

  

  David•670

  @cutch14Posted about 2 years ago

  @romila2003

  Hi Romila, thanks for your suggestions! I have updated the functionality so now clicking an already open Q&A closes it.

  1