QR code component using flexbox

Community feedback

• 

  Zeyad Mohamed•320

  @ZeyadMohamed1805Posted almost 2 years ago

  Hello there! 🤗 Awesome job on your project! 🔝🔝

  • Responding to your question, to center a div vertically you simply set its parent's display to flex, then you set its align-items to center; if you want to center it horizontally, set the justify-content to center. -You already used this method on your project, which is awesome!; however, there is a shorter way to center a div horizontally and vertically! Simply set its parent's display to grid, then add the (place-items: center) property to the parent! This leads to the same result with one less line of code!

  Keep up the great work! Hope you find this helpful! 😎

  Marked as helpful

  2

  ---

  

  Abelardo Gomez Rodriguez•30

  @abelgmzPosted almost 2 years ago

  @ZeyadMohamed1805 thanks a lot, I will learn css grid :)

  1

  

  Zeyad Mohamed•320

  @ZeyadMohamed1805Posted almost 2 years ago

  @abelgmz Awesome! Best of luck with the upcoming projects! 😁

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hola 👋. ¡Buen trabajo al completar el desafío!

  Tengo algunos comentarios que puede considerar.

  • En mi opinión, ha centrado el componente de la manera estándar, solamente intenta usar "min-height" en lugar de "height" en el elemento main para permitir que su pagina se haga más grande más allá de la altura de la ventana gráfica

  • El atributo alt no debe contener las palabras "image", "photo" o "picture", porque la etiqueta de la imagen <img> ya transmite esa información.

  • El atributo alt debe explicar el propósito de la imagen. Al escanear el código QR, el usuario será redirigido al sitio web frontendmentor.io, por lo que un mejor atributo 'alt' sería 'QR code to frontendmentor.io`

  Si desea obtener más información sobre el atributo alt, puede leer este artículo.

  • En lugar de usar píxeles en tamaño de fuente, use unidades relativas como em o rem. El tamaño de fuente en unidades absolutas como píxeles no se escala con la configuración del navegador del usuario. Esto puede causar problemas de accesibilidad para los usuarios que han configurado su navegador para usar un tamaño de fuente más grande. Puedes leer más sobre esto aquí.

  En general el proyecto está muy bien hecho, solo son detalles, pero una muy buena solución, saludos cordiales

  Marked as helpful

  1

  ---

  

  Abelardo Gomez Rodriguez•30

  @abelgmzPosted almost 2 years ago

  @MelvinAguilar muchas gracias por los comentarios, leeré los artículos recomendados, saludos! :)

  1