Design comparison
Solution retrospective
PT-BR
- Este é o meu primeiro desafio do projeto, e estou muito feliz por concluí-lo. Estou aprendendo muito com este primeiro passo que dei. Na próxima vez, incluirei mais comentários e me esforçarei para fazer um código mais limpo.
EN
- This is my first project challenge, and I'm very happy to conclude it. I am learning a lot with this initial step that I've taken. Next time, I will include more comments and strive for cleaner code.
PT-BR
- Tive que aprender sobre 'display: flex' e alguns atributos para concluí-lo.
EN
- I had to learn about 'display: flex' and some attributes to conclude it.
PT-BR
- Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.
EN
- Any feedback is welcome so that I can improve my skills.
Community feedback
- @R3ygoskiPosted 7 months ago
Olá Andressa, seu projeto ficou muito bem feito, estando muito semelhante ao design proposto.
Tenho algumas dicas quanto ao seu projeto, a primeira está relacionada a parte de semântica do seu HTML, notei que você utilizou muitas
<div>
o que não está errado se formos olhar pelo lado estrutural do HTML, mas isso faz com que ele fique sem semântica, então é recomendável que você utilize tags semânticas como<article>
para o.card
e<figure>
para o.imagem
.Outra coisa seria a respeito da acessibilidade, você utilizou a
<h2>
, acredito que você utilizou ela devido a se parecer mais com o design, mas o correto era se ter usado uma<h1>
, pois no html existe uma hierarquia dos headings, sempre começamos pelo<h1>
.Outra dica seria relacionado ao seu CSS, notei que você utilizou no
font-size
valores em px, o que também não está errado, mas é mais recomendável utilizar rem para fontes, pois o rem se adapta ao tamanho de fonte escolhida pelo usuário nas configurações do navegador. Outra coisa, que é apenas um pequeno detalhe, seria no seu.texto p
, que possui uma redundância, que seria ofont-weight: 400;
por padrão ofont-weight
já é 400.Abaixo alguns links a respeito do que foi mencionado:
E novamente, parabéns pelo seu projeto, pelo que entendi esse foi o primeiro projeto que você realizou de todos, correto? Se sim, parabéns você iniciou muito bem, continue se aprimorando cada vez mais. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.
Marked as helpful0@andressakarenPosted 7 months agoOi, @R3ygoski !! Espero que esteja tudo bem com você. Eu li seu comentário e fiquei muito feliz por estar me ajudando. Entendi de imediato a questão da hierarquia para usar o <h1>.
Sobre os outros pontos, vou estar lendo a documentação que me mandou para entender melhor sobre semântica. Além de procurar saber mais sobre essas duas tags <article> e <figure>, pois conhecia elas mas não pensei em usar. Muito obrigada pelo comentário, incentiva bastante para que eu continue me aprimorando.
1 - @xtirianPosted 7 months ago
Parabéns, Andressa, seu código beirando a perfeição. Parabéns. continue assim
0@andressakarenPosted 7 months agoMuito obrigada pelo incentivo, @xtirian. Fiquei bastante feliz com seu comentário.
0
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