Saltar al contenido

Ensambla Tu Dashboard Listo para Desplegar

Intermedio~15 min0/4 pasos

Ensambla Tu Dashboard Listo para Desplegar

Este es el proyecto final. Has construido tarjetas KPI, un gráfico y un diseño de reporte — ahora unirás todas las piezas en una página de dashboard completa y lista para desplegar, que podrías publicar en una URL real.

Ensamblarás una página completa: un encabezado con marca, una fila de tarjetas KPI, una sección de gráfico y una tabla de datos — todo en una sola pantalla cohesiva. Este es el artefacto que le entregas a un cliente y dices «aquí está el dashboard en vivo».

Piensa de principio a fin. Una app lista para desplegar no solo es bonita; está organizada, es legible y se explica sola. Cuando termines esta lección, tendrás una app de datos lista para tu portafolio. ¡Vamos a publicarla.

Instrucciones

1

Agrega un encabezado de página con un título h1 «Sales Analytics».

Pista: Usa: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Sales Analytics</h1></header>`.

¿Dónde va esto?

<!-- Assemble your full dashboard here -->

Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.

2

Agrega una fila de KPI usando un contenedor de cuadrícula responsivo.

3

Agrega una sección de gráfico usando divs de barras estilizadas con el color bg-purple-500.

4

Agrega una tabla de datos para los pedidos recientes y completa el dashboard.

Tu código

html
13 líneas
1
2
3
4
5
6
7
8
9
10
11
12
13

Vista previa en vivo

Vista previa en vivo