Social Links Profile solution with HTMLL/CSS

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!

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.