🌐 Capítulo 20: Projeto Integrado Capstone — Dashboard Responsivo em HTML5 e CSS3

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

Integrar todos os conceitos da Fase 03 (HTML5 Semântico, Formatação de Texto, CSS3 Box Model, Flexbox e CSS Grid).
Construir uma Interface de Usuário (UI) corporativa responsiva e moderna para navegadores desktop e dispositivos móveis.
Aplicar boas práticas de acessibilidade (ARIA), resets globais de CSS (border-box) e arquitetura limpa de arquivos (index.html e styles.css).
Criar um layout em grade com cabeçalho fixo, barra lateral de navegação e área de conteúdo principal.

🧠 1. Arquitetura da Interface Web do Projeto Capstone

A página de Dashboard do Portal Escolar divide-se em 4 blocos semânticos organizados via CSS Grid e Flexbox:

flowchart TD
    subgraph HTML_Layout ["Layout Semantico HTML5"]
        Header["<header class='header-app'>\nLogo + User Profile"]
        Sidebar["<aside class='sidebar-menu'>\nLinks de Navegação Vertical"]
        Main["<main class='content-area'>\nCards de Estatísticas + Tabela de Alunos"]
        Footer["<footer class='footer-app'>\nDireitos Reservados & Versão"]
    end
    
    Header --> Sidebar & Main
    Sidebar & Main --> Footer

💻 2. Código Completo do Projeto Integrado (`index.html` e `styles.css`)

Arquivo HTML: `index.html`

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal Acadêmico - Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
 
    <!-- CONTAINER PRINCIPAL GRID -->
    <div class="grid-app">
        
        <!-- 1. CABEÇALHO -->
        <header class="header-app">
            <div class="logo">
                <h2>Portal Acadêmico</h2>
            </div>
            <div class="user-profile">
                <span>Administrador</span>
            </div>
        </header>
 
        <!-- 2. BARRA LATERAL -->
        <aside class="sidebar-menu">
            <nav>
                <ul>
                    <li><a href="#" class="active">📊 Dashboard</a></li>
                    <li><a href="#">👨‍🎓 Alunos</a></li>
                    <li><a href="#">📚 Cursos</a></li>
                    <li><a href="#">📝 Notas</a></li>
                    <li><a href="#">⚙️ Configurações</a></li>
                </ul>
            </nav>
        </aside>
 
        <!-- 3. ÁREA PRINCIPAL -->
        <main class="content-area">
            
            <section class="metrics-grid">
                <div class="card-metric">
                    <h3>Total de Alunos</h3>
                    <p class="number">1.250</p>
                </div>
                <div class="card-metric">
                    <h3>Cursos Ativos</h3>
                    <p class="number">18</p>
                </div>
                <div class="card-metric">
                    <h3>Média Geral</h3>
                    <p class="number">8.4</p>
                </div>
            </section>
 
            <section class="table-section">
                <h2>Alunos Recentes</h2>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Matrícula</th>
                            <th>Nome</th>
                            <th>Curso</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>20261001</td>
                            <td>Carlos Silva</td>
                            <td>Engenharia de Software</td>
                            <td><span class="badge badge-success">Ativo</span></td>
                        </tr>
                        <tr>
                            <td>20261002</td>
                            <td>Ana Souza</td>
                            <td>Ciência da Computação</td>
                            <td><span class="badge badge-success">Ativo</span></td>
                        </tr>
                    </tbody>
                </table>
            </section>
 
        </main>
 
        <!-- 4. RODAPÉ -->
        <footer class="footer-app">
            <p>&copy; 2026 Portal de Desenvolvimento de Sistemas. Todos os direitos reservados.</p>
        </footer>
 
    </div>
 
</body>
</html>

Arquivo CSS: `styles.css`

/* RESET GLOBAL */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f6f8;
    color: #333333;
}
 
/* CONTAINER EM GRID */
.grid-app {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    min-height: 100vh;
}
 
/* HEADER FLEXBOX */
.header-app {
    grid-area: header;
    background-color: #0d47a1;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}
 
/* SIDEBAR */
.sidebar-menu {
    grid-area: sidebar;
    background-color: #1e88e5;
    padding: 24px 0;
}
 
.sidebar-menu ul {
    list-style: none;
}
 
.sidebar-menu a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    transition: background-color 0.2s;
}
 
.sidebar-menu a:hover,
.sidebar-menu a.active {
    background-color: #1565c0;
}
 
/* CONTENT AREA */
.content-area {
    grid-area: content;
    padding: 32px;
}
 
.metrics-grid {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}
 
.card-metric {
    flex: 1;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0d47a1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
.card-metric h3 {
    font-size: 0.9rem;
    color: #666666;
    margin-bottom: 8px;
}
 
.card-metric .number {
    font-size: 1.8rem;
    font-weight: bold;
    color: #0d47a1;
}
 
/* TABELA DE DADOS */
.table-section {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
.table-section h2 {
    margin-bottom: 16px;
    color: #0d47a1;
}
 
.data-table {
    width: 100%;
    border-collapse: collapse;
}
 
.data-table th, .data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
}
 
.data-table th {
    background-color: #f8f9fa;
    color: #555555;
}
 
.badge-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}
 
/* FOOTER */
.footer-app {
    grid-area: footer;
    background-color: #e0e0e0;
    text-align: center;
    padding: 10px;
    font-size: 0.85rem;
    color: #666666;
}

⚔️ 3. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

Qual a vantagem de utilizar grid-template-areas no layout principal da aplicação em comparação com tabelas HTML antigas?
Para que serve o seletor * { box-sizing: border-box; } aplicado no início do arquivo CSS?

🥈 Nível Prata (Aplicação)

Adicione uma nova métrica no grid .metrics-grid exibindo a contagem “Professores Cadastrados: 35”, estilizando a borda lateral esquerda em cor verde (#2e7d32).

🥇 Nível Ouro (Desafio)

Escreva uma regra @media (max-width: 768px) no arquivo styles.css para transformar o layout do Dashboard em uma única coluna fluida para celulares (Sidebar e Content empilhados em sentido vertical).

💡 Gabaritos Sanfonados de Resposta

💡 Ver Gabarito do Nível Bronze

As grid-template-areas oferecem um mapa visual e declarativo da estrutura da página no CSS, facilitando alterações de layout e reordenações responsivas sem alterar o código HTML.
Garante que padding e border sejam calculados dentro da largura e altura totais declaradas para o elemento, evitando quebras inesperadas de layout.

💡 Ver Gabarito do Nível Prata & Ouro (Código CSS Media Query)

@media (max-width: 768px) {
    .grid-app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
    }
 
    .metrics-grid {
        flex-direction: column;
    }
}

📚 Referências Teóricas Oficiais

W3C RECOMMENDATION. CSS Grid Layout Module Level 1 (https://www.w3.org/TR/css-grid-1/).
W3C RECOMMENDATION. HTML5 Specification — Semantic Elements.

⬅️ Capítulo Anterior (Estruturação HTML) | Voltar ao Sumário da Fase 03 | Avançar para a Fase 04 (JavaScript & DOM) ➡️

Explorador

Computação & Engenharia de Software

🌐 Capítulo 20: Projeto Integrado Capstone — Dashboard Responsivo em HTML5 e CSS3

🌐 Capítulo 20: Projeto Integrado Capstone — Dashboard Responsivo em HTML5 e CSS3

🎯 Objetivos da Aula

🧠 1. Arquitetura da Interface Web do Projeto Capstone

💻 2. Código Completo do Projeto Integrado (`index.html` e `styles.css`)

Arquivo HTML: `index.html`

Arquivo CSS: `styles.css`

⚔️ 3. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

🥈 Nível Prata (Aplicação)

🥇 Nível Ouro (Desafio)

💡 Gabaritos Sanfonados de Resposta

📚 Referências Teóricas Oficiais

Visão de gráfico

Sumário

Backlinks

Explorador

🌐 Capítulo 20: Projeto Integrado Capstone — Dashboard Responsivo em HTML5 e CSS3

🌐 Capítulo 20: Projeto Integrado Capstone — Dashboard Responsivo em HTML5 e CSS3

🎯 Objetivos da Aula

🧠 1. Arquitetura da Interface Web do Projeto Capstone

💻 2. Código Completo do Projeto Integrado (index.html e styles.css)

Arquivo HTML: index.html

Arquivo CSS: styles.css

⚔️ 3. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

🥈 Nível Prata (Aplicação)

🥇 Nível Ouro (Desafio)

💡 Gabaritos Sanfonados de Resposta

📚 Referências Teóricas Oficiais

Visão de gráfico

Sumário

Backlinks

💻 2. Código Completo do Projeto Integrado (`index.html` e `styles.css`)

Arquivo HTML: `index.html`

Arquivo CSS: `styles.css`