[Projeto] Layouts e tags semânticas - lista de exercícios | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="header-container">
            <span class="header-logo">Aline Watanabe</span></span>
            <nav class="header-menu">
                <a href="#sobre">Sobre</a>
                <a href="#contato">Contato</a>
            </nav>
        </div>
    </header>
    <main>
        <h1>Quem sou eu?</h1>
        <img src="minhafoto.PNG" alt="Foto de Aline">
        <h3>Desenvolvedora Full Stack em formação | Transição de Carreira de Administração para Tecnologia | Java Back-End</h3>
        <p>Profissional em transição de carreira da área Administrativa para o Desenvolvimento de Software, unindo a visão estratégica e organizacional de anos de experiência com a paixão pela resolução de problemas por meio do código. Atualmente, foco meus estudos no ecossistema Java através da formação Back-End na Alura, com o objetivo de me tornar uma Desenvolvedora Full Stack. Busco aplicar minha capacidade analítica em projetos que gerem impacto real e eficiência tecnológica.</p>
    </main>
    <footer>
        <div class="footer-links">
            <a href="https://www.instagram.com/aline.wtnb?utm_source=qr" target="_blank">Instagram</a>
            <a href="https://github.com/AlineWatanabeDev" target="_blank">GitHub</a>
        </div>
        <p class="copyright">© 2026 Aline Watanabe. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

CSS:

.header-logo{
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
}

.header-menu{
    display: flex;
    flex-direction:row;
    justify-content: end;
    align-items: end;
    gap: 40px;
}

body{
    background-color: #44444E;
    color: #DFD0B8;
}

img{
    width: 200px;
    height: 200px;
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid #ffcc33; 
    box-shadow: 0 0 25px rgba(255, 204, 51, 0.5); 
}

footer{
    background-color: #44444E;
    border-top: 1px solid #e0e0e0;
    padding: 30px 0;

    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 40px; 
}

.footer-links{
    display: flex;
    gap: 30px;
}

.copyright{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
}

Resultado

Oi, Aline! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.

Com base no que você explicou, chamou atenção o uso correto de tags semânticas como header, main e footer, o que deixa a estrutura bem organizada e facilita a leitura do código. Um ponto importante de ajuste é um fechamento extra de </span> no logo do header, que pode gerar comportamento inesperado no HTML.

Uma dica interessante para o futuro é usar section para separar melhor os conteúdos do main, deixando o layout mais semântico e acessível. Veja este exemplo:

<main>
  <section id="sobre">
    <h1>Quem sou eu?</h1>
    <p>Texto de apresentação</p>
  </section>
</main>

Esse código organiza o conteúdo principal em seções, facilitando manutenção, estilos e acessibilidade.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

[Projeto] Layouts e tags semânticas - lista de exercícios

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema