FAQ Accordion Solution ❓

Community feedback

• 

  Marzia Jalili•3,970

  @MarziaJaliliPosted 3 months ago

  Well done buddy,

  Adjusments you could apply:

  • set the lines below in the body selector to centerize the card:

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  

  This ensures that the card will be centerize even when the answers are expanded.

  Get rid of two lines in style.css:

  1. line 29: margin: 10% 50px;
  2. line 36: margin-bottom: 15px;

  • Also, avoid using px for the font-size. It happens to cause some issues. You could use rem instead.

  Other than this your solution is spot on, man😎

  Marked as helpful

  0

  ---

  

  Marco Musiol 🧑🏻•50

  @musiolmarcoPosted 3 months ago

  @MarziaJalili 🤝 Thank you for these useful tips.

  I actually did not even realize that the card is centered. I just thought it's a big padding from the top and it's just centered horizontally... 😄

  But I will use this tips for my future projects! 🚀

  1
• 

  Teodor Jenkler•4,040

  @TedJenklerPosted 2 months ago

  Hi @musiolmarco,

  I have some suggestions to help improve your project:

  Semantic Elements: I noticed you're using <div> elements. Consider replacing these with <footer> and <main> to align with HTML5 best practices. The <header> can be removed as it's semantically incorrect for this project. Typically, <header> should be used for elements like <nav> or a logo, at the top of a page.

  Animations: To make your project stand out more, consider adding animations. I recommend watching a YouTube tutorial on "accordion with animation" and then refactoring your code without external help. This will enhance the user experience and give your project a polished look.

  SEO Enhancements: Add SEO title and description tags to all your projects. Try sharing your project on Discord before and after implementing these changes to observe the differences in visibility and engagement. This practice will significantly improve SEO and click-through rates on real projects.

  Keep up the great work!

  0