Design comparison
Solution retrospective
Feedback bem-vindo.
Community feedback
- @irenanrodriguesPosted 12 months ago
Oi Pamella, tudo bem? Parabéns por completar o desafio. Tenho algumas dicas que você pode estar usando no seu código.
No lugar da sua div.verde, para a imagem do produto, você pode usar a tag semântica
<picture>
. Melhorando a acessibilidade, pro pessoal que usa leitores de tela.Comece a desenvolver seus projetos usado HTML semântico. Assim você melhorar a acessibilidade e a organização da sua página, deixando ele um pouco mais limpo, sem o uso de muitas tags divs.
0@PamellaMoraesPosted 11 months agoOi, @irenanrodrigues! Obrigada por suas dicas. Isso me ajuda muito a evoluir nos estudos!
0 - @barcacaPosted 12 months ago
Parabéns por concluir o desafio!
Aqui estão algumas sugestões:
-
Você tem código repetido no
responsive.css
para a regra demedia query (max-width: 768px)
. O bloco de estilo dentro desse bloco de mídia está repetido duas vezes. -
Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de
verde
ebranco
, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo comoimagem-fundo
econteudo
. -
Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.
-
Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:
@media screen and (max-width: 768px) { #container { flex-direction: column; } .verde, .branco { width: 100%; border-radius: 10px; } .verde { height: 250px; } .branco { height: 400px; } .btn-compras { margin-top: 5px; } }
Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.
Mandou bem, continue assim!
0@PamellaMoraesPosted 11 months agoOi,@Barcaca ! Muito obrigada por suas dicas. Isso me ajuda muito a evoluir nos estudos!
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