Social proof section with only html and css. Feedback welcome. ❤

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hi, Cris Augusto! 👋

  Nice effort on this challenge! 👏

  A few things I'd like to suggest are,

  • Adding some padding to the body or the main container so that there is always a bit of space between the content of the page and the edges of the screen (even when the width of the viewport decreases).
  • Getting rid of flex-wrap: wrap on the container that holds the testimonial cards so that those cards can decrease in width and remain on the same line even when the width of the screen decreases in the desktop layout. Currently when those cards wrap the layout looks a little unbalanced. 😅
  • Using an article tag for the testimonial card components to make your HTML a little more semantic! 😉

  Hope you find this helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  0

  ---

  

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  Hello, @ApplePieGiraffe. Thanks for the feedback, this is very important for my. Happy Coding!

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The profile images are not decorative. Their alt tag should not be blank. It should state the following; “Headshot of -person’s full name-“

  More Info:📚

  Headshot Alt Text

  • For the testimonials, it is best ✅ to to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

  Code:

  <figure>
     <blockquote></blockquote>
     <figcaption></figcaption>
  </figure>
  

  More Info:📚

  MDN Figure Element

  • Implement a Mobile First approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web. Making it critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  0

  ---

  

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  Hello, @vcarames. Your advice is always accurate and complete, I really appreciate the help, and for being part of this journey of code in my life. Happy coding.

  0