FAQ accordion card

Community feedback

• 

  bunee•2,020

  @buneeIsSloPosted about 2 years ago

  Hey! @tltd0807, I think you did your best on this challenge, but there are definitely things you can improve upon. Firstly, to answer your questions:

  1. There really isn't a better way, you'll have to mess around with the values until it responds as expected.

  2. The solution for this is very simple, set an overflow: hidden; on the .card element.

  Here are my suggestions:

  • Use ::after or ::before selectors for adding the image content rather than creating dedicated containers and elements for them.
  • It's good to use semantic elements in your markup, but you've sort of gone overboard with it(all good, I do this too XD). The usage of multiple sections and headers(for this challenge) is unnecessary and only makes the code harder to read.
  • Good job on implementing the dropdown with JS, but you could have gotten away with using just HTML & CSS. How? use the <details> and <summary> tags. Learn about them here
  • Use the <footer> tag to add your attribution instead of <div>.
  • Make sure to add a short description for the images in an alt attribute, this helps improve UX.

  Keep coding. Hope this helps :)

  Marked as helpful

  0

  ---

  

  To Dat•290

  @tltd0807Posted about 2 years ago

  @buneeIsSlo Thank you very much, your advice is super useful to me, I'll try it right away.

  1