Skip to content
Submitted 7 months ago

QR code component with flexbox

MJ Marques•40
@laladrack
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

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    Olá @laladrack, parabéns pelo seu projeto, ele ficou semelhante ao design proposto.

    Gostaria de dar algumas dicas e recomendações, no seu HTML, notei que você utilizou a tag <body> como o card, isso não está errado, mas geralmente utilizamos a <body> como o fundo da nossa página e não um componente individual como nesse caso, o card. Para isso você pode usar alguma outra tag, como <div> ou as tags semânticas que pessoalmente eu recomendo muito, que nesse caso poderia ser <section> ou <article>.

    E também notei duas coisas relacionadas a acessibilidade, que a primeira é na sua tag <img/> que ela não possui um atributo alt, nesse caso, como o qr-code é uma imagem importante, é interessante que nela seja atribuído um alt com um texto descrevendo o que é a imagem. Agora em casos de ícones, como botão de + por exemplo, não é necessário passar um texto alt, mas é recomendável que se tenha pelo menos o atributo alt="" vazio.

    Outra coisa foi sobre a hierarquia dos headers, no seu projeto notei que você utilizou a <h2>, acredito que você fez isso pois a <h2> se assemelha muito ao design proposto, mas isso pode causar problemas de acessibilidade e semântica, o mais correto seria utilizar uma <h1>.

    Alguns Links sobre o que falei:

    E novamente, parabéns pelo seu projeto, ele ficou realmente muito semelhante ao design proposto, caso algo que eu tenha dito não tenha ficado claro, por favor, pergunte aqui embaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    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