Lista de Exercício | HTML e CSS: cabeçalho, footer e variáveis CSS

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Site pessoal com informações profissionais e portfolio">
    <title>DevWeb - Página Inicial</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <header class="cabecalho">
        <nav aria-label="Navegação principal">
            <ul class="menu">
                <li><a href="index.html" class="menu__link menu__link--ativo">Início</a></li>
                <li><a href="about.html" class="menu__link">Sobre mim</a></li>
                <li><a href="portfolio.html" class="menu__link">Portfólio</a></li>
                <li><a href="contato.html" class="menu__link">Contato</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="conteudo-principal">
        <article class="destaque">
            <h1 class="destaque__titulo">Desenvolvedor Web Full Stack</h1>
            <p class="destaque__texto">Transformando ideias em soluções digitais eficientes</p>
        </article>

        <section class="servicos" aria-labelledby="servicos-titulo">
            <h2 id="servicos-titulo" class="servicos__titulo">Serviços</h2>
            <div class="servicos__grade">
                <article class="servico">
                    <h3>Desenvolvimento Front-end</h3>
                    <p>Criação de interfaces modernas e responsivas</p>
                </article>
                <article class="servico">
                    <h3>Desenvolvimento Back-end</h3>
                    <p>Sistemas robustos e APIs eficientes</p>
                </article>
            </div>
        </section>
    </main>

    <footer class="rodape">
        <p class="rodape__texto">&copy; 2024 DevWeb. Todos direitos reservados.</p>
        <p class="rodape__creditos">Desenvolvido com ♥ por João Silva</p>
    </footer>
</body>
</html>

/* styles/styles.css */
:root {
    --cor-primaria: #2c3e50;
    --cor-secundaria: #ecf0f1;
    --cor-destaque: #e67e22;
    --espacamento-medio: 2rem;
    --fonte-titulo: 'Segoe UI', system-ui, sans-serif;
    --fonte-texto: 'Open Sans', sans-serif;
    --sombra-padrao: 0 2px 10px rgba(0,0,0,0.1);
}

body {
    font-family: var(--fonte-texto);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--cor-primaria);
}

.cabecalho {
    background: var(--cor-primaria);
    padding: 1rem;
    box-shadow: var(--sombra-padrao);
}

.menu {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__link {
    color: var(--cor-secundaria);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.menu__link:hover {
    background: rgba(255,255,255,0.1);
}

.menu__link--ativo {
    background: var(--cor-destaque);
}

.conteudo-principal {
    flex: 1;
    padding: var(--espacamento-medio);
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}

.destaque {
    text-align: center;
    margin: 4rem 0;
    padding: 2rem;
    background: var(--cor-secundaria);
    border-radius: 8px;
}

.destaque__titulo {
    font-family: var(--fonte-titulo);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.servicos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--espacamento-medio);
    margin-top: 2rem;
}

.servico {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--sombra-padrao);
}

.rodape {
    background: var(--cor-primaria);
    color: var(--cor-secundaria);
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
}

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .destaque__titulo {
        font-size: 2rem;
    }
}

Olá, Kauã, como vai?

Seu exercício está muito bem estruturado e organizado. O uso de variáveis CSS para definir cores, fontes e espaçamentos é uma prática excelente, pois facilita a manutenção e a consistência do design. O cabeçalho e o rodapé estão bem definidos, e a navegação entre as páginas está corretamente configurada. A estilização do menu, com destaque para o link ativo e a remoção do sublinhado, também está muito bem aplicada.

Uma dica que posso dar é sobre a responsividade. Você já fez um bom trabalho ajustando o layout para dispositivos móveis, mas pode considerar adicionar mais breakpoints ou ajustes específicos para telas ainda menores, como smartphones em modo retrato, para garantir que a experiência do usuário seja a melhor possível em todos os dispositivos.

Continue compartilhando seus exercícios e dúvidas. O fórum está à disposição para ajudar no que for necessário.

Siga firme nos seus estudos!

Abraços :)