Semantic FAQ Accordion Card with Pug + SCSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Ahmad, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • remove all margin from .container class because with flex they are superfluous
  • add transition in the FAQ when it opens
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1

  ---

  

  Ahmad Muwaffaq•60

  @mupinnnPosted over 2 years ago

  @denielden Hi Deniel, thanks for the feedback. I really appreciate it!

  Thanks again for reminding me to remove the margin when using flex, I really forgot about it 😂

  Btw, any reference for animating when opening the accordions using <details> element? It's easy to do it when using <div> or another meaningless/non-semantic element.

  I use px for the sake of simplicity for this solution since the card doesn't shift that hard. I never use it in real-life projects.

  Thank you so much for the advice and feedback! It's really helpful 😊

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @mupinnn You are welcome! Animating using the details element is done in the same way as any other non-semantic element. Keep it up :)

  0

  

  Ahmad Muwaffaq•60

  @mupinnnPosted over 2 years ago

  @denielden Thank you! I'll try it on and update it later

  1