FAQ Accordion Card built with Pure CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala Natasha, tudo bem? Parabéns pelo desafio!

  Eu acabei de olhar sua solução e achei tudo mto bom, só tenho uma ressalva em relação ao id que vc usou para estilizar o componente, não é uma boa ideia porque id é um seletor muito específico usado para forms e chamar blocos com Javascript. Em vez disso, use class para estilizar e deixe o id para coisas muito específicas.

  Não é aconselhável usar IDs como seletores de CSS porque se outro elemento na página usar o mesmo estilo/semelhante, você terá que escrever o mesmo CSS novamente. Mesmo que você não tenha mais de um elemento com esse estilo agora, ele pode vir mais tarde.

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Oi Lucas! Muito obrigado pelo feedback. Na verdade, eu não falo português e tive que usar o Google translate. Decidi responder em português porque, por que não?

  Você está absolutamente correto sobre não usar uma id para estilo. Normalmente não, mas me acostumei a ver uma div raiz com uma id desde que tenho trabalhado muito com a React ultimamente. No futuro, usarei um nome de classe. Obrigado de novo!

  Além disso, deixe-me saber o quão bem o Google traduziu meu comentário. :)

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @natashapl Sorry Natasha! I was wondering if you were brazilian by your name that's really common here. My bad! Next time I write for you in english. I hope you don't get offended.

  0

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  @correlucas No worries and not offended at all. My son and I had fun using Google Translate and he even attempted to read it. He thinks he's fluent now lol!

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @natashapl hahahahah well done! He's ready to talk with Neymar!

  1
• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Natasha,

  Congratulations 🎉 for completing this challenge, your card looks great. The FAQ is responsive and it is incredible how you only used CSS. I do have some suggestions for your code:

  1. It is great that you wrapped the footer within the footer tag however you should also wrap the main content within the main tag for accessibility issues and better semantics e.g. <main class="container"></main>
  2. To center the card in the middle, you forgot the justify-content property which you will need to set it to center, you can then remove the padding if you wish to do so.
  3. Also, I noticed that you took the desktop-first approach, usually it is best practice to follow the mobile-first approach for responsiveness and it will be easier to rearrange/change the elements as you increase the screen size. There are also many resources that explain the benefits of this concept too.

  Overall, your card looks great, and I wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  @romila2003 Thank so much for the feedback! I am using the main tag but it's inside of the div with the "root" id. I'm sorta new to using main tag so I'm still learning about it. Not sure if it's best practice to put that tag inside of a div. I will look more into it though.

  As for the justify-content, I did use that at first to center the container, but unfortunately when I expanded all of the answers, the top got cut off. So, I instead opted for padding to accommodate a dynamically growing container. If you have any insight on how to better vertically align a container that can grow tall or long, that would be awesome. Thanks again!

  1