Faq Component using Flexbox, HTML, CSS, JavaScript

What are you most proud of, and what would you do differently next time?

Being able to learn why my content was shifting up instead of only going down when opening a question section, definitely use Grid next time and potentially make my life easier.

What challenges did you encounter, and how did you overcome them?

1. background image, there are different ways to do it but my approach was using this property, it can get tricky when you go to smaller sizes but fixed it by moving my article or container up in specific screen sizes.

2. Content shifting up due to how centering and some units work, to give more information when you set transform: translate 50% or top:50% to center content vertically it will affect how your content works meaning it will try to center suddenly when button is pressed creating this effect of shifting up, the way I solved it was using margin 0 auto and using top to a specific unit (in my case 13rem) then when it comes to queries just decrease this same unit so content still looks "centered" vertically.

3. When viewport was too small when opening any question the content would be cut, this problems is due to my max height approach (to hide and show elements) since I just apply the class open-item with max-height:200px; then logically it will be 200px, guess what when viewport gets smaller paragraph will push down probably occupying more than 200px.

4. Sometimes I hate javascript lol

What specific areas of your project would you like help with?

Ways to approach background image and avoid content shifting up when opening questions as well as potential improvements for my JavasScript code.