Design comparison
Solution retrospective
I'm proud that my CSS is improving little by little.
What challenges did you encounter, and how did you overcome them?The challenge was without a figma file to base myself on the measurements on the social network card.
What specific areas of your project would you like help with?I always believe that CSS can improve, so any suggestions are welcome
Community feedback
- @danielmrz-devPosted 7 months ago
Olá @adonesguerreiro!
Sua solução está ótima!
📌 É recomendado usar elementos HTML semânticos como
<ul>
e<li>
para criar listas. Isso garante que seu código seja mais acessível, mais fácil de manter e semanticamente significativo.Aqui está um exemplo de como você pode refatorar seu código:
Depois da Refatoração:
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>
Ao usar
<ul>
e<li>
, você transmite a estrutura do seu conteúdo de forma mais clara, facilitando para leitores de tela e mecanismos de busca entenderem. Além disso, isso está alinhado com as melhores práticas para semântica HTML.Espero que seja útil!
Continue com o excelente trabalho!
Marked as helpful1@adonesguerreiroPosted 7 months ago@danielmrz-dev muito obrigado pela recomendação irei fazer correção em breve.
0 - @R3ygoskiPosted 7 months ago
Olá Adones, o seu projeto está muito bom e também está bem resposnivo, parabéns.
Gostaria de te dar uma dica a respeito de CSS, notei que você utilizou fontes com o tamanho em px, isso não é errado, mas é mais recomendável usar rem, devido a ela se adaptar as configurações de fonte do usuário, assim dando mais acessibilidade a sua página.
Complementando o comentário acima (ou abaixo), além de você poder usar uma
<ul>
que estaria sim correto já que é uma lista de botões, que são correlacionados entre si, também estaria correto utilizar eles dentro de uma<nav>
, já que esses botões seguindo a ideia do projeto, é de que sejam utilizados para navegar até um determinado local. Ficando algo assim:<nav> <ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul> </nav>
E é isso, seu projeto está muito bom, continue se aprimorando cada vez mais, e novamente, parabéns. Caso tenha surgido alguma duvida, sinta-se a vontade para perguntar aqui nos comentários.
Marked as helpful0@adonesguerreiroPosted 7 months ago@R3ygoski muito obrigado vou sim fazer os ajustes que sugeriram e em breve atualizo projeto.
1
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