Pular para o conteúdo

Monte Seu Dashboard Pronto para Deploy

Intermediário~15 min0/4 etapas

Monte Seu Dashboard Pronto para Deploy

Este é o projeto final. Você já construiu cards de KPI, um gráfico e um layout de relatório — agora vai juntar as peças em uma página de dashboard completa e pronta para deploy, que você poderia publicar em uma URL de verdade.

Você vai montar uma página inteira: um cabeçalho com identidade, uma fileira de cards de KPI, uma seção de gráfico e uma tabela de dados — tudo em uma única tela coesa. Este é o artefato que você entrega a um stakeholder dizendo "aqui está o dashboard ao vivo".

Pense de ponta a ponta. Um app pronto para deploy não é só bonito; é organizado, legível e autoexplicativo. Ao terminar esta lição, você terá um app de dados digno de portfólio. Vamos colocá-lo no ar.

Instruções

1

Adicione um cabeçalho de página com um título h1 do app: "Análise de Vendas".

Dica: Use: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Análise de Vendas</h1></header>`.

Onde é que isto entra?

<!-- Monte aqui o seu dashboard completo -->

Escreva na linha 11 — abaixo desse comentário, depois do código que já adicionou.

2

Adicione uma fileira de KPIs usando um contêiner de grade responsiva.

3

Adicione uma seção de gráfico usando divs de barra estilizadas com a cor bg-purple-500.

4

Adicione uma tabela de dados com os pedidos recentes para completar o dashboard.

Seu Código

html
13 linhas
1
2
3
4
5
6
7
8
9
10
11
12
13

Pré-visualização ao Vivo

Pré-visualização ao Vivo