Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Fala César, tudo bem? Parabéns pelo desafio!
O seu componente já está com o design prontoum bom exercício pra melhorar seu código, seria criar a estrutura mais limpa o possível e reduzir seu código ao máximo. Por exemplo, você poode segurar todo conteúdo em um bloco só usando (
<maain>
ou<div>
) nesse caso vamos usar<main>
por que é uma tag semântica. Outra coisa é colocar o h3 como h1 já que se trata do título principal da pagina. Se você notar, nem precisa adicionar nenhum div além da principal pra segurar o conteúdo (img, h1 e p).👋 Espero ter ajudado e continue no foco!
0 - @felipejesus-frontPosted about 2 years ago
Fala Cesar! blz? Muito legal seu código! Cara, tenho uma dica bem simples, porém muito importante pra te dar. Sua pagina começa a quebrar quando fica abaixo do tamanho do container com classe "principal", nela vc esta usando um "width: 300px", quando vc define um width ele vai seguir esse width até o fim do mundo, pelo componente ser pequeno acaba passando despercebido, porém num componente maior você veria isso com mais facilidade. Aconselho, sempre que possível usar "max-width" ao invés de width, pois como vc está definindo uma "largura máxima" o seu componente sempre vai ser mais responsivo conforme a tela diminui.
Outra coisa importante no html é a semântica das tags. As tags html tem seus significados, normalmente interpretado por motores de busca como o google, ou por softwares de leitura de tela, usado por deficientes visuais, então usar as tags corretas ajuda demais na acessibilidade do seu codigo, fazendo por exemplo que seu site/conteudo seja encontrado pelo google mais facilmente.
como corrigir isso? No seu conteúdo principal, ao invés de usar uma div, tente usar a tag <main>, pois ela indica que aquele é seu conteúdo principal nesta pagina.
Colocar o titulo da pagina em um <h1> também ajuda nisso.
Vou deixar um link para o caso de você querer entender melhor sobre isso: https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065
lembre-se não é preciso gravar tudo isso, só entender já basta, na hora de codar, quando esquecer é só pesquisar no google que ta de boa! abração, meu mano! tbm estou iniciando! então tenhamos um bom aprendizado!
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