Perfil de links sociais, usando HTML e CSS.

Solution retrospective
Gostaria dos feedback de vocês me orientando em que eu poderia está melhorando para poder ter um código mais limpo.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @R3ygoski
Olá Israel, parabéns pela conclusão desse desafio, ele ficou muito bom.
Uma observação, você passou a URL errada para a parte de Repositoy URL, a correta seria: https://github.com/israelsobral/links-sociais. Que dessa forma até apareceria o seu repositório aqui no FEM, facilitando na busca, e também ao clicar em View Code.
Sobre o que você citou, de deixar o código mais limpo, não vi muitas áreas que estavam verbosas ou com algum exagero. O único trecho que eu poderia sugerir um aprimoramento seria no CSS, que seria relacionado a evitar o uso de especificidade caso não seja necessário. Alguns desses casos:
p#descricao
poderia ser só um#descricao
, sem a necessidade dessep
poisdescricao
é apenas utilizado em uma parte, sem ter repetiçõs, o que faz a especificade não necessária.input.quadrado
poderia ser só um.quadrado
, por mais que ele seja reutilizado, toda reutilização dele é da mesma estilização, o que faz com que não seja necessário esseinput
antes.
Agora algumas dicas quanto ao HTML. Sobre semântica, há algumas partes que poderiam ficar semânticas, como:
section
poderia ser alterada para uma<article>
pois é um conteúdo autoexplicativo, ou seja, faz sentido por si próprio.p.destaque
poderia ser alterada para uma<address>
pois se trata de uma localidade.div>a>input
cada uma dessas, que nesse caso seriam os botões de link, poderiam ser substituídos pela tag<a>
sozinha, sem nenhum outro HTML dentro dela.- Extra: Você também pode colocar esses links dentro de uma
<ul>
, que assim fica mais semântico ainda, um exemplo:
<ul> <li> <a href="URL-para-meu-gh">Guthub</a> </li> <li> <a href="URL-para-meu-fem">Frontend Mentor</a> </li> </ul>
Essa alteração que eu mencionei dos links também tem um motivo de acessibilidade e otimização de estrutura.
Sobre a estrutura, essas
<div>
são redundantes, elas não estão sendo de fato necessárias, você conseguiria atingir o mesmo resultado apenas estilizando as tags<a>
.Sobre a acessibilidade, não é recomendado colocar botões dentro de uma
<a>
, pois botões como<button>
são utilizados para indicar uma interatividade no site, como por exemplo, mudar o tema da página, criar uma tarefa, abrir/fechar um modal, e por aí vai, já as tags<a>
servem para indicar um hiperlink, e não uma interatividade.Ainda sobre acessibilidade, quando for utilizar um botão, recomendo o
<button>
ao invés de<input type="button">
pois ele tem mais vantagens como acessibilidade e flexibilidade de conteúdo (como colocar ícones ao invés de texto).E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Marked as helpful
Join 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