Design comparison
Solution retrospective
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.
Community feedback
- @R3ygoskiPosted 6 months ago
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 para1.275rem
ou20px
, 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 helpful0 - @AkoToSiJeromeEhPosted 6 months ago
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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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