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

@sarahbeirigo

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@R3ygoski

Posted

Olá Sarah, parabéns pela conclusão do projeto.

Tenho algumas dicas para dar quanto ao seu projeto. Começando pelo HTML, notei que você utilizou duas formas de trabalhar com CSS, que foi Inline e External. É mais recomendável utilizar apenas a forma External, isso é, ter um arquivo separado para o seu CSS, isso porque quando se utiliza o Inline você dificulta a manutenção do projeto, pois as vezes um estilo pode estar sendo sobrescrito por uma estilização Inline.

Outra coisa que notei, é que parece que você não enviou o seu media-queries.css. Digo isso porque eu não o vi no seu Github.

Ainda sobre o CSS notei que você utilizou esse trecho no sua div.container: margin: 100px 550px 100px 550px; mas esse trecho não era necessário, tanto que aparentemente ele não está fazendo nada. E se você remover ele, vai deixar seu projeto mais responsivo.

Agora quanto ao seu HTML, a estrutura dele está correta, mas ele está pouco semântico, e manter um HTML semântico é importante no quesito de acessibilidade. Algumas tags que você poderia alterar para HTML semântico e o motivo:

  • <div class="div-pai"> poderia ser alterada para uma <main>, isso porque sempre depois da tag <body> o mais correto é vir uma <main> que serve para indicar o conteúdo principal da página.
  • <div class="container"> poderia ser alterada para uma <article> devido ao conteúdo aqui presente ser autoexplicativo e independente do contexto da página.
  • <div class="infos"> poderia ser alterada para uma <section> pois o conteúdo aqui presente tem uma temática semelhante entre si, que se refere a dados de uma pessoa, que no caso do seu projeto seria você.
  • <h3 style="font-weight: 400;"> poderia ser alterada para uma <address>, isso porque esse trecho contêm um endereço.
  • <div class="links"> poderia ser alterada para uma <ul> e as <span> para <li> que assim ficaria mais semântico e também porque esse trecho representa uma lista.

E é isso, novamente parabéns pela conclusão do projeto, ele ficou muito bem-feito. Continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que eu disse, 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