Ejercicio CSS para crear una navbar responsive con flexbox

Ejercicio de programación: Proyecto CSS crear una navbar

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 90 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Desarrollar una barra de navegación (navbar) responsive utilizando CSS moderno, incluyendo funcionalidades de adaptación a diferentes dispositivos y efectos visuales.

Contenido del ejercicio

Crea un archivo HTML básico con la estructura necesaria para la navbar. Incluye un contenedor principal con clase navbar, un logo (puede ser texto o imagen), una lista no ordenada para los enlaces de navegación y un botón de contacto.
Configura las variables CSS en el archivo de estilos para definir la paleta de colores (color principal, secundario, de fondo, de texto), tamaños de fuente y espaciados que utilizarás en toda la navbar.
Implementa el diseño base de la navbar utilizando flexbox para distribuir los elementos horizontalmente. El logo debe estar a la izquierda, los enlaces de navegación centrados y el botón de contacto a la derecha.
Añade estilos para los enlaces de navegación, incluyendo efectos hover que cambien suavemente el color o añadan un subrayado. Implementa también un estilo específico para indicar la página activa.
Configura la navbar para que permanezca fija en la parte superior de la ventana cuando el usuario haga scroll, utilizando la propiedad position: fixed.
Implementa transiciones CSS para todos los efectos interactivos, asegurando que los cambios de estado (como hover) sean suaves y no abruptos.
Crea una media query para dispositivos con un ancho máximo de 768px. Dentro de esta regla, modifica el diseño de la navbar para que el menú de navegación se oculte y aparezca un icono de hamburguesa (puedes usar un elemento con tres líneas horizontales estilizado con CSS).
Implementa la funcionalidad del menú hamburguesa utilizando solo CSS (sin JavaScript). Puedes usar un checkbox oculto y el selector :checked para mostrar/ocultar el menú al hacer clic en el icono.
Asegúrate de que el menú desplegable en la versión móvil tenga una animación suave al abrirse y cerrarse, utilizando propiedades como transform y transition.
Realiza pruebas en diferentes tamaños de pantalla para verificar que la navbar se adapta correctamente y mantiene su funcionalidad y apariencia en todos los dispositivos.

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

Cursos que incluyen este ejercicio

Este ejercicio forma parte de los siguientes cursos estructurados con rutas de aprendizaje

CSS Avanzado

Ruta de aprendizaje completa con lecciones y ejercicios

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.