Skip to content
Submitted almost 2 years ago

QR code using basic HTML & CSS

Mshadows1991•40
@Mshadows1991
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

thank you to the community for your advices I have made some improvements.

Community feedback

  • Mark Roberts•30
    @mrkrbrtsPosted almost 2 years ago

    Hi Fernando, great job on the challenge!

    One thing I noticed is that at the top of the HTML, you have <html lang="en"> (this says that the document is in English)

    However, your class names and comments are in another language - I think it's Spanish.

    Maybe you could change the entire document to be in Spanish, and change the <HTML> tag to something like <html lang="es">

    This would also help with accessibility.

    Keep up the good work! :)

    Marked as helpful
    2
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    @mrkrbrts Hi! thank you for contributing your ideas to the solution

    I have a small suggestion: The language attribute in the html element is used to determine the language of the page's content, i.e., the text displayed on the page. For instance, if you are a foreigner and want to translate a page, the language will be detected automatically. In the current version, the text is in English, so a declaration of lang="en"> tells the browser that the entire page is in English. The classes are a world apart, greetings

    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hola @Mshadows1991 👋, ¡Buen trabajo al completar este desafío y bienvenido a la comunidad! 🎉

    Tengo algunas sugerencias que podría considerar para mejorar su código:

    • Use la etiqueta <main> para incluir todo el contenido principal en su solución. en lugar de usar <section class="contenedor sombra">.
    • Para que los textos alternativos valgan más la pena, agregue texto descriptivo al atributo alt de la imagen QR para explicar qué hace la imagen QR. Al escanear el código QR, será redirigido al sitio web frontendmentor.io, por lo que un ejemplo de texto alternativo sería "QR code to frontendmentor.io". Puede leer más sobre texto alternativo aquí.
    • Como mencionan en otro comentario, la imagen está centrada dentro del componente, pero el componente no está centrado en la pantalla, si deseas centrar el componente utiliza flexbox o grid layout.

    Puede leer más sobre como centrar aquí.

    • Con respecto sobre si las clases deben ir en inglés o en español como mencionan en otro comentario, no es obligatorio tener las clases en inglés, lo dicen porque la mayoría de las personas de esta plataforma son hablantes de inglés nativo y se les facilita entender los nombres, no es obligación, he visto soluciones escritas en portugués

    ¡Espero que esos consejos le ayuden! 👍

    ¡Buen trabajo! 😁

    Marked as helpful
    2
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <section class="contenedor sombra"> with the main tag and <p class="consejo"> with <h1></h1>. To center a content on a page, give the body the following: min-height:100vh; display: flex; align-items-center: justify-content: center; Give .qr width:100% or max-width:100%, instead of giving it a height and width value. Give .contenedor a width value , a padding value , a border-radius and background-color instead of giving these to .sombra There is no need for margin-top value in .contenedor. In your media query only have to increase the width of .contenedor the rest are not required.

    Hope am helpful

    HAPPY CODING

    Marked as helpful
    1
  • Danilo•200
    @OneBitMancePosted almost 2 years ago

    Hello there!

    I just wanted to say that you did an AWESOME job and that you should keep practicing to keep becoming better and better. Just one thing that I noticed was that you didn't name your classes and id's in English which you should in my opinion for readability reasons. Other than that, keep it up because you can achieve a lot!

    1
  • Mshadows1991•40
    @Mshadows1991Posted almost 2 years ago

    Hello all, I made some corrections to the code, but when I see my website on my web browser it looks fine, but when I upload my solution it does not look the same way I saw it on my browser, I used 1440 and 375 px for the adjusment of container´s size.

    when my solution its displayed here it just look thinner than I would expect.

    I tried so many time changing sizes but it doesn´t work

    and I can´t find out why

    hope anyone can helpme.

    0

Please log in to post a comment

Log in with GitHub

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