Design comparison
Community feedback
- @R3ygoskiPosted 3 months ago
Olá Kelvin, parabéns pela conclusão do seu projeto.
Uma dica, sempre quando for fazer um projeto faça um reset antes, que dessa forma você remove algumas estilizações por padrão. Tanto que seu projeto está com overflow, isso é, ele está passando do tamanho da tela, por isso tem um scroll horizontal e vertical. Para corrigir isso você pode utilizar esse trecho no seu CSS:
* { padding: 0; margin: 0; box-sizing: border-box; }
Outra dica, dentro da pasta de Design, quando você baixa o desafio, tem uma imagem que geralmente vem com o nome "state", por exemplo, "card-state", essas imagens mostram o que deve acontecer por exemplo quando você passar o mouse sobre um elemento. E digo isso porque faltou fazer essa parte do
:hover
noh1
e nop.nome
, ambos ficam amarelo ao passar o mouse em cima, e também a sombra do card aumenta quando o mouse entra dentro dele.Sobre o HTML, a estrutura está correta, mas ele está pouco semântico, e a semântica é importante para trazer mais acessibilidade a sua página, vou mostrar algumas tags que podem ser alteradas para ficar mais semântico:
<div>
essa tag está logo após a<body>
, geralmente após a<body>
nós utilizamos a<main>
, pois é ali que estará contido o conteúdo principal da página.<div class="container">
pode ser alterado para um<article>
pois o conteúdo presente dentro do container é autoexplicativo e independente do resto da página.<div class="img-quadro">
pode ser alterado para um<figure>
pois é a imagem principal do componente.<div class="imagem">
pode ser alterado para um<footer>
pois faz o papel de rodapé do card, e também porque é ali que finaliza todo o conteúdo anterior do card.
Notei também que nas imagens, você utilizou um
alt=""
pouco descritivo. Na primeira imagem, você poderia utilizar umalt
que se assemelha ao título da página, como por exemplo:alt="HTML & CSS foundations"
. e naalt="cara"
você poderia escrever algo como:alt="Avatar of Greg Hooper"
. É sempre importante manter um texto mais descritivo nosalt
, isso porque se a imagem não for carregada, ou se o usuário tiver alguma deficiência visual, ele ainda conseguira saber o que aquela área representa.E é isso, parabéns pela conclusão do projeto, ele ficou muito bem-feito, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
0 - @Davidty143Posted 3 months ago
Don't have feedback as of the moment, might edit soon :)
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