Social Proof Section Master

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi Malik,

  You've smashed it - well done!

  • you could consider using transform: translate x/y to achieve the staggered card affect instead of margin. I think it might be a little more eloquent and simpler from a responsive design perspective.
  • also it's worth learning about semantic html it's really important for SEO and accessibility
  • your <div class="container"> should be <main class="container"> and your <div class="attribution"> should be <footer class="attribution">. And your design should include one <h1>. This should clear your accessibility report!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Malik Suleman Aslam•115

  @maliksulemanaslamPosted about 3 years ago

  @darryncodes Thank you so much I am very happy to learn these concepts from you which as a newbie I did'nt knew about, next time I will try to implement these concepts to avoid some issues and these are best concepts thanks again mate! :)

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Malik!

  I noticed that you removed the meta viewport. You should never remove it, since it is important for responsive website.

  More feedback:

  • Try to use your own CSS, in my opinion this is too overkill to use Bootstrap.
  • For the person photo, just use their name as the value of the alt attribute. You don't to put dash between each word. It's should human readable.
  • You don't need to use br tag, just make the span as a block element. Also, this should not be a heading. I recommend to use p tag instead.

  <h5 class="card-title smaller-h5">Colton Smith<br><span>Verified Buyer</span></h5>
  

  • Also, heading order is important. You need to use h1, h2, h3, etc. Don't use heading tag to make the text smaller or bold. This is important for accessibility and SEO.
  • Don't use % for margin in this case, since on large screen the space become too big. Use rem instead.
  • If you set the width of the elements using % unit, consider adding max-width to prevent them getting so large on bigger screen. For the max-width, I recommend to use rem unit too.
  • It's best practice to use rem or sometimes em for everything that's usually can be used with px. Using px will prevent the user from controlling the size of your page.

  That's it! Hopefully this is helpful!

  0