Skip to content
Submitted over 1 year ago

QR Code card

accessibility
João Gomes•40
@joaoeduardogomes
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think the code is somewhat well organized. Maybe next time I would try to make this project by using Bootstrap or Tailwind.

What challenges did you encounter, and how did you overcome them?

It was mostly coding and testing. Not much.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Bernardo Poggioni•7,030
    @R3ygoski

    Olá João, parabéns pela conclusão do seu projeto, ele ficou muito bom e quase semelhante ao design proposto.

    Gostaria de fazer algumas observações e dar algumas dicas. Começando pelas observações, eu notei que tanto o título quanto o paragrafo do card estão alinhados a esquerda, mas no design eles ficam alinhados ao centro, para fazer isso, você pode utilizar text-align: center; que dessa forma você irá alinhar ambos ao centro, e também o título está um pouco maior do que o design, mudar o tamanho para 1.275rem ou 20px, irá fazer ele ficar mais semelhante.

    Agora algumas dicas, vou começar pela parte do CSS. No início do seu CSS você está usando um @charset "UTF-8";, isso não é necessário, pois você já definiu isso no seu HTML, nessa linha: <meta charset="UTF-8">. Então acaba sendo redundante.

    Agora sobre o HTML. Sua estrutura está correta, mas tem alguns problemas no quesito de acessibilidade, começando pelo heading, você utilizou um <h2>, mas o mais correto é começar sempre utilizando um <h1>, e também não é recomendado pular os headings, por exemplo ter <h1> e <h3> e pular o <h2>.

    Ainda sobre acessibilidade, seu HTML está pouco semântico, e manter um HTML semântico é importante não só para otimização de SEO, um trecho que pode ser alterado.

    • <div class="card">, esse trecho pode e deve ser substituído por uma <main>, isso porque sempre quando vamos começar um projeto HTML, sempre depois da tag <body> nós usamos uma tag <main>, e também porque é nela que está contido o conteúdo principal da página.

    E sobre a organização, sim, seu projeto está bem organizado, mas tem alguns arquivos no seu Github que não era necessário enviar, como por exemplo README-template.md, mas isso é só detalhe. E sobre usar Tailwind e Bootstrap, ambos são boas ferramentas, eu particularmente recomendo muito o Tailwind devido a ser mais "customizável", mas experimente ambos e veja qual mais se adequa a você.

    Novamente parabéns pela conclusão do seu projeto, ele ficou de verdade muito bem feito. Caso algo que eu tenha dito, não tenha ficado claro, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
  • Jeje•2,050
    @AkoToSiJeromeEh

    Hey ! Great work out there i just notice that the text in the qr component card is not position center that the original design has , i suggest to add text-align : center in .card to center the qr code component . that's all happy coding !!

    .card {
  width: 330px;
  background-color: #FEFFFE;
  margin: auto;
  padding: 1rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center; // add this
}
    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