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 Code challenge - Vanilla CSS and HTML

@seanryderjr

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


WELCOMING FEEDBACK, just starting out. Took about an hour to figure out the flex properties and how to position things.

Community feedback

Gio Cura 650

@GioCura

Posted

Hi! 👋 Good work on your first project. I noticed that you set your container to position: absolute so that it will be centered. In a way, this works. But it's better practice to center items via the <body> like so:

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
}

With that, you can take out the position: absolute, and transform attribute you set in your container.

Hope this helps!

Marked as helpful

0

@seanryderjr

Posted

@GioCura That would have saved me some headaches! Thank you.

0
Eliabe 200

@eliabedasilva

Posted

O atributo "alt" é importante para usuários com deficiência visual que usam leitores de tela para acessar o conteúdo da web. Quando o leitor de tela encontra uma imagem com um atributo "alt", ele lerá essa descrição alternativa em vez de exibir a imagem em si, permitindo que o usuário entenda o conteúdo da página.

No código fornecido, o atributo "alt" já está sendo usado na tag <img>, mas apenas com o texto "qr code". Para melhorar a acessibilidade do site, é importante fornecer uma descrição mais detalhada da imagem para os usuários que não podem visualizá-la. Por exemplo, uma boa descrição alternativa para a imagem pode ser "qr code - scan the code to visit Frontend Mentor and take your coding skills to the next level", que inclui informações adicionais sobre o propósito da imagem e o que o usuário pode fazer com ela.

Marked as helpful

0

@seanryderjr

Posted

@eliabedasilva ¡Gran idea!

0

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