Responsive Card-QR-View

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  ¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.

  • El atributo alt debería 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. 📘.

  • Establecer el ancho del componente con un porcentaje o una unidad de vw se comportará de manera extraña en dispositivos móviles o pantallas grandes. Debe usar un max-width de 320px o 20rem para asegurarse de que el componente tendrá un ancho máximo de 320px en cualquier dispositivo, también elimine la propiedad width con un valor porcentual.

  • ¿Por qué has utilizado etiquetas en español? <enlace rel="preconectar" href="https://fonts.googleapis.com">.

  Espero que te sea útil! 😄 Por encima de todo, ¡la solución que has presentado es genial!

  Saludos

  05

  Marked as helpful
• 

  Sandro•1,150

  @sandro21-glitch

  Posted over 2 years ago

  Hi Ower

  Here are some suggestions for your code

  Use semantic HTML tags: Instead of using div tags, you can use appropriate semantic HTML tags like header, section, and footer for the different sections of your code.

  Consider using a CSS reset to ensure that all browsers display the elements in a consistent way.

  Use rem units for font-sizes instead of px, so that your text resizes proportionally with the user's browser font-size setting.

  Use class names that are more descriptive, for example, instead of "general", you can name it "card-container".

  Use CSS shorthands for multiple properties with the same value, for example, instead of "margin-top: 5%; margin-bottom: 15%", you can use "margin: 5% 0 15%".

  Happy Coding

  01

  Marked as helpful