Submitted about 1 year ago

Semantic HTML and CSS

adonesguerreiro•50

@adonesguerreiro

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?

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

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,810
@danielmrz-dev
Posted about 1 year 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 helpful
Bernardo Poggioni•6,990
@R3ygoski
Posted about 1 year 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 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