Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Card usando css

@LuisMariscalDev

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I quickly understood how to create the html structure to make it easier to style it with css.

What challenges did you encounter, and how did you overcome them?

center the container vertically and horizontally, it took me a few hours to search on my own and learn how to solve this problem.

What specific areas of your project would you like help with?

throughout

Community feedback

@MelvinAguilar

Posted

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

Tengo algunos comentarios para usted que podría considerar

HTML📄:

  • Debes usar un encabezado de nivel uno (h1) aunque este no es un desafío de página completa. Tiene dos alternativas:

    1. Cambiar la etiqueta <h3> por un <h1>

    2. Puede crear un elemento '<h1>' dentro de su elemento 'principal' que estará oculto visualmente pero visible y legible por lectores de pantalla.. La clase "sr-only" oculta el contenido visualmente y aquí son los estilos para copiar. por ejemplo: <h1 class="sr-only">QR code component</h1>

  • Evite siempre saltar niveles de títulos; Comience siempre desde <h1>, seguido de <h2>, y así sucesivamente hasta <h6> (<h1>,<h2>,...,<h6>). Cambie la etiqueta <h3> por <h2>

Texto alternativo 📷:

  • El atributo alt no debe contener las palabras "imagen" o "foto", porque la etiqueta de la imagen 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 'código QR para frontendmentor.io' o QR code to frontendmentor.io

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

CSS🎨:

¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!

Saludos cordiales

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord