Submitted over 1 year ago

QR code using basic HTML & CSS

#accessibility

Mshadows1991• 40

@Mshadows1991

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

Mark Roberts• 30

@mrkrbrts

Posted over 1 year 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

Melvin Aguilar 🧑🏻‍💻• 61,460

@MelvinAguilar

Posted over 1 year 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

Melvin Aguilar 🧑🏻‍💻• 61,460

@MelvinAguilar

Posted over 1 year 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

Hassia Issah• 50,810

@Hassiai

Posted over 1 year 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

Danilo• 200

@OneBitMance

Posted over 1 year 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!

Mshadows1991• 40

@Mshadows1991

Posted over 1 year 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.

Please log in to post a comment

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