Social Proof Section

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  ¡Te quedo muy bueno!

  Te comento algunos detalles que me encontré:

  • Cuando estoy con un ancho de pantalla entre 900px y 1100px es como que el header-right se superpone sobre el header-left. Podes solucionarlo quitándole la propiedad right al div con el id="reviews" y al id="report-guru"
  • No estoy seguro si es correcto usar el header de esa forma, yo encerraría todo en un main y luego lo separaría por section. Aunque estoy es muy relativo y no se realmente qué opción sería la correcta.
  • Todos los section deben tener una etiqueta de cabecera como h1, h2 o h3.
  • Si no usaste algún framework o librería, te recomiendo pasar tu HTML por este validador, va a mostrarte errores y advertencias de sintaxis, accesibilidad y otras. También podes usar lighthouse desde el inspector de elementos.

  Marked as helpful

  2

  ---

  

  Juan Martín Rivas•190

  @JuanMartinRivasPosted 11 months ago

  @Blackpachamame Muchas gracias por tu feedback Marcos! Te comento lo que hice:

  • El problema de la superposición lo arreglé cambiando el breakpoint de los divs con id="reviews" e id="report-guru" de 900px a 1100px.
  • Encerré todo el contenido de la página en un main y metí el contenido superior en un section
  • Muchas gracias por la data sobre el validador y lighthouse. No conocía estas herramientas y de ahora en adelante pienso usarlas para futuros proyectos. De nuevo, muchas gracias por tu comentario, me fue de gran ayuda!

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 11 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  DECORATIVE SVG'S ♨️:

  • The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

  ---

  • Now, when it comes to decorative SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

  ---

  • Since these images do not convey any important information or functionality, there is no need for an alt attribute.

  ---

  • So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

  ---

  Example:

  <img src="images/decorative.svg" alt="">
  
  

  <img src="./icon-star.svg" alt="Star icon">
    👇
  <img src="./icon-star.svg" alt="">
  
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Juan Martín Rivas•190

  @JuanMartinRivasPosted 11 months ago

  @0xAbdulKhalid Hey! Thank you very much for your feedback. I didn't know that about decorative SVG's. I already changed it. I'll definitely take it into account for future projects. Once again thank you very much!

  1

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 11 months ago

  You're welcome @JuanMartinRivas.

  0