Skip to content
Submitted over 1 year ago

QR Code challenge - Vanilla CSS and HTML

Sean Ryder•10
@seanryderjr
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

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
    @GioCuraPosted over 1 year 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
    0
    Sean Ryder•10
    @seanryderjrPosted over 1 year ago

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

    0
  • Eliabe•200
    @eliabedasilvaPosted over 1 year 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
    0
    Sean Ryder•10
    @seanryderjrPosted over 1 year ago

    @eliabedasilva ¡Gran idea!

    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