Social Links Profile solution with HTMLL/CSS

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted about 2 months ago

  Hello Evelyn Fernandes!!!

  Your HTML structure looks solid for the "Social Links Profile" project. Here are a few recommendations to improve your code structure.

  • Accessibility ARIA Labels: Consider using ARIA labels on social links for better accessibility. E.g.

  <li><a href="#" aria-label="Visit Jessica Randall's GitHub profile">GitHub</a></li>
  

  • Always add meta descriptions on all your pages for SEO.

  <meta name="description" content = "Frontend mentor Social media links profile solution " />
  

  Implementing these improvements will boost your site's performance, SEO, and accessibility!

  Marked as helpful

  1

  ---

  

  Evelyn Fernandes•10

  @yoruwitchPosted about 2 months ago

  Hey@Aggressive-Mohammed ! Thank you so much for looking at my solution! I'm going to change the topics you spoke about!

  1
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted about 2 months ago

  Olá Evelyn, parabéns pela conclusão do seu projeto, ele ficou muito bem-feito e quase semelhante ao design proposto.

  Vou começar falando sobre áreas do projeto que você gostaria de ajuda, você citou ali sobre como fazer um sistema de dark e light mode. Bom, para isso temos duas formas, a primeira e não muito recomendada devido a ser limitada, é feita apenas com CSS, dessa forma:

  @media (prefers-color-scheme: dark) {
      html {
          background-color: red;
      }
  }
  

  Ao utilizar essa media, basta colocar dentro dela os elementos que você gostaria de mudar a cor quando estivesse no dark mode. Experimente colocar esse trecho no seu código que você verá a diferença.

  A segunda forma e mais recomendada, é utilizando JavaScript, pois dessa forma você pode ativar e desativar o dark mode. Eu vou atualizar seu código e colocar essa parte do Javascript para que eu possa te mostrar como isso pode ser feito, e enviar no Issues do seu Github. Você pode acessar o Issues aqui -> Github

  Agora uma pequena dica sobre seu HTML, ele está muito bem-feito, só que ao invés de utilizar uma <h3>, o mais correto seria utilizar uma <h1>, pois toda página deve conter pelo menos 1 <h1>.

  E sobre o CSS, tem um pequeno problema no seu seletor <a>, ele não está cobrindo o "botão" inteiro, o que obriga a clicar diretamente no texto para abrir o link, para corrigir isso você pode expandir a <a>, dessa forma:

  a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;
  }
  

  Outra dica de CSS, quando for estilizar, utilize "class" ao invés de "id" para criar os seletores. Geralmente utilizamos "id" para criar uma referência para o JavaScript, enquanto o class é mais recomendado para estilização.

  E uma pequena correção, as variáveis do seu CSS estão com nomes errados, você nomeou variáveis cinzas/pretas de "green" que significa verde e isso pode causar uma certa confusão.

  E é isso, caso tenha ficado alguma dúvida quanto ao que eu disse, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  1