Submitted 4 months ago

Social Links Profile - HTML, CSS

Caio Lopes Silva•70

@CaioLopes5556

A solution to the Social links profile challenge

Preview Code

Solution retrospective

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

Tenho orgulho de fazer isso sozinho, sem usar nenhuma IA ou vídeo tutorial para me ajudar. A única coisa que fiz foi verificar o site do MDN para aprender como algumas propriedades funcionam e uma rápida busca no Google sobre @font-face{}.
Eu usaria um <ul> em vez de uma <div> para conter os links. Eu tentei enquanto estava fazendo o código, mas não funcionou como eu esperava.

What challenges did you encounter, and how did you overcome them?

Um desafio foi usar o arquivo de fonte na pasta assets, nos desafios anteriores no Front-End Mentor eu apenas importei a fonte pelo Google Fonts utilizando o @import, mas dessa vez eu tentei algo diferente com @font-face{} (não sei se da melhor forma)
Eu pesquisei na internet uma maneira fazer isso e descobri que não era tão difícil.

What specific areas of your project would you like help with?

Talvez alterar a div .link-list em uma <ul> para tornar o código mais semântico. Mas vou tentar achar uma forma de fazer isso sem comprometer a área de hover do link.

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,740
@danielmrz-dev
Posted 4 months ago
Olá @CaioLopes5556 !

Parabéns por completar o desafio! ✅

Sua solução está ótima!

📌 Sa linha de pensamento ao usar tags de lista está correto. É 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!
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