[Projeto] Desafio currículo | HTML e CSS: cabeçalho, footer e variáveis CSS

HTML:

<body>

    <head>

    </head>

    <main class="corpo">


        <section class="corpo">

            <div class="corpo1">

                <div>

                    <h1 class="corpo1Titulo">Sobre Mim</h1>

                    <p class="corpo1Conteudo">Meu nome é Tairone Rocha, sou um estudante de programação. Escolhi esta área de trabalho porque, desde criança, fico encantado pelos personagens de HQ que entendiam tudo de tecnologia. Estou estudando agora na Alura, front-end e back-end.</p>

                </div>                

                <img class="corpoImg" src="assets/tairone - com fundo.png.jpg" alt="Foto de Tairone Rocha">

            </div>

            <div class="corpo2">
                
                <div class="corpo2Links">

                    <h2 class="corpo2Titulo">Minhas redes</h2> 

                    <a class="corpo2Links2SemBorda" href="https://www.instagram.com/silvarume/" target="_blank" rel="noopener noreferrer"><img src="assets/instagram.png" alt="Icone do Instagram">Instagram</a>

                    <a class="corpo2Links2SemBorda" href="https://www.threads.net/@silvarume" target="_blank" rel="noopener noreferrer"> <img src="assets/threads.png" alt="Icone do Threads">Threads</a>

                    <a class="corpo2Links2SemBorda" href="https://www.linkedin.com/in/tairone-rocha-21a1b9331/" target="_blank" rel="noopener noreferrer"> <img src="assets/linkedin.png" alt="Icone do Linkedin"> Linkedin</a>

                    <a class="corpo2Links2SemBorda" href="https://github.com/TrSilvao" target="_blank" rel="noopener noreferrer"> <img src="assets/github.png" alt="Icone do Github">Github</a>

                </div>
                
                <div class="corpo2Links">

                    <h2 class="corpo2Titulo">Meus Certificados</h2>

                    <ul class="corpo2Lista" title="Alura">

                        <li><a href="https://cursos.alura.com.br/certificate/1d435f68-690f-4072-b307-9aed47c86f8d?lang=pt_BR">HTML e CSS: Classes</a></li>

                        <li><a href="https://cursos.alura.com.br/certificate/8181b81d-d685-40d0-94bb-8ed8a0550b9d?lang=pt_BR">HTML e CSS: ambientes de desenvolvimento</a></li> 

                        <li><a href="https://cursos.alura.com.br/certificate/85c7874c-f1f4-4ab7-9385-980ea45ecd3c?lang=pt_BR">Pipeline de dados: Python e orientação a objeto</a></li>

                    </ul>                    

                </div>

        </div>    

        </section>

       

    </main>

    <footer>

        <p>Feito por Tairone Rocha</p>
        
    </footer>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {    
    background-color: #000000;    
    color: #F6F6F6;
}

a {
    text-decoration: none;
    color: #F6F6F6;
}

.corpo {
    display: flex;    
    flex-direction: column;
    align-items: center;
    padding: 5% 15%;
    justify-content: baseline;
    gap: 100px;
}

.corpo1 {
    display: flex;
    gap: 40px;
}

.corpo1Titulo {
    font-size: 36px;
    padding: 21.5px 0;
    font-family: "Krona One", sans-serif;
    color: #22D4FD;
}

.corpo1Conteudo {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

/* .corpo1Links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
} */

.corpoImg {
    width: 400px;
}

.corpo2 {
    display: flex;
    gap: 40px;
}

.corpo2Links {    
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    color: #fff;
    border-radius: 18px;
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding: 21.5px 0;
}

.corpo2Titulo {
    font-size: 25px;
    padding: 21.5px 0;
    font-family: "Krona One", sans-serif;
    color: #22D4FD;
}

.corpo2Links2SemBorda {
    display: flex;
    justify-content: center;    
    text-align: center;
    font-size: 20px;
    color: #fff;
    gap: 16px;
}

.corpo2Lista {
    display: flex;    
    flex-direction: column;
    text-align: left;
    font-size: 20px;
    color: #fff;
    gap: 16px;
    padding:  0px 50px;
}

Como Ficou: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Tairone, como vai?

Parabéns pelo projeto do currículo! Vou te passar algumas dicas para otimizar o seu código e deixá-lo mais semântico.

No seu código, a tag <head> está dentro da tag <body>, mas o correto seria colocá-la antes do <body>, por exemplo:

<head>
  <!-- meta tags, link de fontes, etc -->
</head>
<body>
  <!-- conteúdo -->
</body>

Isso é importante para garantir que o navegador carregue corretamente as informações sobre seu documento.

Considere nomear as classes para refletirem melhor o conteúdo de cada uma, como main-content para o <main> e section-about para a <section>.
E uma dica para melhorar a acessibilidade seria adicionar textos alternativos mais descritivos nas imagens. Por exemplo, ao invés de "Foto de Tairone Rocha", você pode usar algo mais detalhado, como, "Foto de Tairone Rocha sorrindo, ao fundo há árvores, barcos e o mar". Isso melhora a navegação para usuários com deficiência visual.

Espero que essas dicas ajudem a aprimorar o seu projeto! O fórum está à disposição para qualquer dúvida que surgir.

Siga firme nos estudos!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado