Proyecto CSS dashboard responsive con grid y flexbox

Ejercicio de programación: Proyecto: layout de dashboard con CSS Grid

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en CSS. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Proyecto 40 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Proyecto práctico en el que se construye el layout de un panel de administración (dashboard) utilizando CSS Grid como sistema de maquetación principal. Se aplican areas de grid, sidebar, cabecera, contenido principal y tarjetas de resumen con diseno responsive.

Contenido del ejercicio

Desarrolla el layout de un dashboard administrativo usando HTML y CSS puro con CSS Grid como herramienta principal de maquetación.

1. Estructura HTML

Crea un archivo index.html con la siguiente estructura:

Un contenedor principal (div con clase dashboard) que englobe todo el layout.
Dentro del contenedor: un aside para el sidebar, un header para la cabecera y un main para el contenido principal.
El sidebar debe contener una lista de enlaces de navegación (ul > li > a) que simulen secciones del panel (Inicio, Usuarios, Estadisticas, Configuración).
La cabecera debe incluir el titulo del dashboard y, opcionalmente, un campo de busqueda o un avatar de usuario.

2. Layout con CSS Grid

Crea un archivo estilos.css y configura el layout global:

Aplica display: grid al contenedor .dashboard.
Define las areas del grid con grid-template-areas:
```
"sidebar header"
"sidebar main"
```
Configura las columnas con grid-template-columns: 250px 1fr para dar un ancho fijo al sidebar y el resto al contenido.
Configura las filas con grid-template-rows: 60px 1fr para dar una altura fija a la cabecera.
Asigna grid-area: sidebar, grid-area: header y grid-area: main a los elementos correspondientes.
Aplica min-height: 100vh al contenedor para que el dashboard ocupe toda la ventana.

3. Tarjetas de resumen

Dentro del main, crea una sección con al menos cuatro tarjetas de resumen:

Cada tarjeta muestra un titulo (por ejemplo, "Usuarios", "Ventas", "Pedidos", "Ingresos") y un valor numérico destacado.
Distribuye las tarjetas con CSS Grid (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) o Flexbox para que se adapten al espacio disponible.
Aplica bordes, sombras (box-shadow) y padding para dar aspecto de tarjeta.

4. Estilos visuales

Aplica un fondo oscuro al sidebar y texto claro para los enlaces.
Aplica un fondo neutro al area de contenido.
Utiliza variables CSS (--color-sidebar, --color-bg, --color-card) para los colores principales.
Anade efectos :hover a los enlaces del sidebar.

5. Diseno responsive

Anade una media query para pantallas con ancho máximo de 768px.
Oculta el sidebar (display: none) o transformalo en una barra horizontal superior.
Ajusta el grid para que solo quede una columna: grid-template-columns: 1fr y grid-template-areas: "header" "main".

Más ejercicios de CSS

Explora más ejercicios de programación en CSS para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de CSS

Explora el curso completo de CSS

Descubre más contenido de CSS con lecciones, ejercicios y módulos organizados para tu aprendizaje.

Lecciones de CSS

Aprende los conceptos fundamentales con tutoriales detallados

Ejercicios de CSS

Practica con más ejercicios de programación

Módulos de CSS

Explora todos los módulos del curso organizados por temas

Curso completo de CSS

Ver el temario completo con todos los contenidos del curso

Todas las tecnologías

Explora todos los cursos de programación disponibles

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, CSS es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear ejercicios prácticos y contenido educativo de calidad para desarrolladores de todos los niveles.

Solución al ejercicio de programación en CSS

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en CSS para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en CSS

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Ver curso completo

Ejercicios de programación en CSS: Práctica y Certificación

Los ejercicios de programación son fundamentales para dominar CSS. Este ejercicio está diseñado para poner a prueba tus conocimientos prácticos y ayudarte a consolidar lo aprendido en las lecciones teóricas. La práctica constante con ejercicios de programación es la clave para convertirte en un desarrollador experto.

¿Por qué resolver ejercicios de programación?

Resolver ejercicios de programación en CSS te permite:

Aplicar conocimientos teóricos: Poner en práctica los conceptos aprendidos en las lecciones de CSS.
Identificar áreas de mejora: Descubrir qué conceptos necesitas reforzar en tu aprendizaje de CSS.
Prepararte para certificaciones: Los ejercicios te preparan para obtener certificados profesionales en CSS.
Mejorar tu perfil profesional: Demostrar tus habilidades prácticas en CSS.

Metodología de aprendizaje

Nuestros ejercicios de programación están diseñados siguiendo una metodología probada de aprendizaje progresivo. Cada ejercicio en CSS está cuidadosamente estructurado para llevar tus habilidades al siguiente nivel. Comenzamos con conceptos fundamentales y avanzamos gradualmente hacia desafíos más complejos que reflejan situaciones reales del desarrollo de software profesional.

Certificación y validación de conocimientos

Al completar ejercicios de programación, no solo mejoras tus habilidades técnicas, sino que también puedes obtener certificados que validan tu expertise en CSS. Estos certificados son reconocidos por empresas y pueden ser una gran adición a tu perfil profesional de LinkedIn o tu CV como desarrollador.

Los ejercicios están alineados con los estándares de la industria y cubren desde conceptos básicos hasta técnicas avanzadas de programación en CSS. Cada ejercicio incluye casos de prueba y ejemplos prácticos que te ayudarán a comprender mejor cómo aplicar lo aprendido en proyectos reales.