Submitted over 2 years ago

QR Code challenge - Vanilla CSS and HTML

Sean Ryder•10

@seanryderjr

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Gio Cura•650
@GioCura
Posted over 2 years ago
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
Eliabe•200
@eliabedasilva
Posted over 2 years ago
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

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