Exercício: crie uma página currículo! | HTML e CSS: cabeçalho, footer e variáveis CSS

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/style.css" />
    <title>Currículo - Kauã Fernandes</title>
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Meu <strong class="titulo_destaque">Currículo</strong></h1>
            
            <p class="apresentacao__conteudo__texto">
                Sou Kauã Fernandes, profissional da área de desenvolvimento web, estou sempre me atulizando quanto a linguagens novas e outras já consolidades no mercado. Busco oportunidades para aplicar e expandir minhas habilidades. Hoje meu foco é desenvolver minhas habilidades como front-end e back-end, posteriormente me tornando um full-stacker.
            </p>
            
            <h2 class="apresentacao__conteudo__titulo">Experiência Profissional</h2>
            <ul class="apresentacao__conteudo__texto">
                <li>Especialista em manutenção de sistemas de refrigeração e ar-condicionado.</li>
                <li>Atuação com planejamento e organização de processos técnicos.</li>
                <li>Foco em desenvolvimento web com conhecimentos em HTML, CSS, JavaScript, Bootstrap e React.</li>
            </ul>
            
            <h2 class="apresentacao__conteudo__titulo">Formação Acadêmica</h2>
            <ul class="apresentacao__conteudo__texto">
                <li>Curso em Desenvolvimento Web - Em andamento.</li>
                <li>Formação em Manutenção e Refrigeração.</li>
            </ul>
        </section>
        
        <img src="./assets/image.png" alt="Foto Kauã Fernandes" />
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Kauã Fernandes</p>
    </footer>
</body>

</html>

Cheguei a essa estrutura seguindo uma lógica baseada nos requisitos fornecidos e na identidade visual já existente no seu portfólio. Aqui está o resumo do processo:

1. Mantendo a Identidade Visual

Reaproveitei o CSS do seu site para garantir um estilo consistente.
As cores, fontes e espaçamentos foram mantidos para uma experiência visual uniforme.

2. Adicionando o Link no Menu

Incluí um novo item no menu dentro do <header>:

<a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>

Isso facilita a navegação para a página do currículo.

3. Estruturando o Conteúdo

O <main> segue o layout da página principal, com texto e imagem.

O título destaca o currículo de forma chamativa:

<h1 class="apresentacao__conteudo__titulo">Meu <strong class="titulo_destaque">Currículo</strong></h1>

Logo abaixo, há uma breve introdução sobre você.

4. Utilizando Listas HTML

Para organizar experiências e formação, usei listas <ul> para tornar a leitura mais clara:

<ul class="apresentacao__conteudo__texto">
    <li>Especialista em manutenção de sistemas de refrigeração e ar-condicionado.</li>
    <li>Experiência com planejamento e organização de processos técnicos.</li>
    <li>Conhecimentos em HTML, CSS, JavaScript, Bootstrap e React.</li>
</ul>

5. Mantendo a Imagem de Perfil

A imagem foi mantida ao lado do conteúdo para reforçar a identidade visual.

6. Rodapé Padronizado

O rodapé segue o mesmo estilo das outras páginas para manter a coesão.

Olá, Kauã, como vai?

Seu exercício está ótimo, a estrutura do currículo está bem organizada e segue as boas práticas. O uso das listas para apresentar a experiência e formação ficou bem adequado, facilitando a leitura.

Além disso, o reaproveitamento do CSS para manter a identidade visual é uma excelente escolha, garantindo consistência em seu portfólio. A adição do link no menu também ajuda a melhorar a navegação entre as páginas.

Como sugestão, você pode adicionar uma pequena descrição ou título à sua imagem, para que o conteúdo fique mais acessível. Por exemplo, em vez de simplesmente <img src="./assets/image.png" alt="Foto Kauã Fernandes" />, você pode adicionar mais detalhes sobre a imagem para melhorar a acessibilidade, como:

<img src="./assets/image.png" alt="Foto profissional de Kauã Fernandes, desenvolvedor web" />

Isso ajuda leitores de tela e usuários com deficiências visuais.

Parabéns pela dedicação e pelo ótimo trabalho!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)