Social proof section challenge

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @mdaifi1337, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Med Daifi•20

  @mdaifi1337Posted about 2 years ago

  @correlucas Thanks for the advices. I'm not that good with using the "right" HTML tags so I just use <div>s and style them. I'll try from now on to use the most suitable tags.

  0
• 

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  Hello Med Daifi.

  For my solution i used CSS variables and the CSS calc function to align the cards.

  my CSS

  .card{
      margin-right: calc(var(--mr) * 50px);
  }
  

  my HTML

  <div class="card" style="--mr: 2;">...</div>
  <div class="card" style="--mr: 1;">...</div>
  <div class="card" style="--mr: 0;">...</div>
  

  for example if "--mr" is 2, then margin-right: calc(2 * 50px);

  Hope this was helpful

  0