Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social links profile challenge

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

Daniel 🛸 44,230

@danielmrz-dev

Posted

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

@R3ygoski

Posted

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 GitHub
Discord logo

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