Design comparison
Solution retrospective
This time i was way more fast and confident in the changes that i have made during the process.
What challenges did you encounter, and how did you overcome them?Without the figma file, i had a hard timing trying to figure out what dimensions use, but in the end it was not difficult.
What specific areas of your project would you like help with?Not to confident when we speak about responsive code.
Community feedback
- @danielmrz-devPosted 5 months ago
Fala, Pedro!
Parabéns por completar o desafio! ✅
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:
Após a 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 você ache isso útil!
Continue com o excelente trabalho!
0 - @R3ygoskiPosted 5 months ago
Olá Pedro, parabéns pela conclusão do projeto e por ter feito ele ficar próximo do design proposto.
Gostaria de dar algumas dicas quanto ao seu projeto. Evite de usar o seu CSS dentro dos arquivos HTML, pois usar o CSS dessa forma pode dificultar na manutenção do seu código. Claro, em projetos pequenos não dá pra notar uma real diferença, mas isso em projetos grandes pode ser bem problemático. Então minha recomendação é utilizar CSS External.
Sobre a dificuldade de fazer semelhante devido a falta do Figma, recomendo que utilize uma extensão de navegador chamada PerfectPixel, que dessa forma não será necessário utilizar o Figma, e essa extensão ajuda muito.
Sobre as tags semânticas, estão corretas, com exceção de uma, que seria a
<nav>
. Nós utilizamos<nav>
para navegação interna, como por exemplo um link para uma rota de Sobre, Contato, Login, e por aí vai. Já nesse caso, o link direciona para uma rota externa do nosso site, então o mais correto para isso é utilizar mesmo a<ul>
sem utilizar a<nav>
.Edit: Havia esquecido de mencionar, quando utilizar o
font-size
, é mais recomendável utilizar a unidade de medida rem ao invés de px, isso devido a rem ser capaz de se adaptar ao tamanho de fonte escolhida pelo usuário, o que aumenta a acessibilidade da sua página.E novamente parabéns pela conclusão do projeto, caso tenha ficado alguma duvida, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
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