Descripción
Crear una landing page responsive utilizando CSS moderno con flexbox y grid para mostrar información sobre un producto ficticio.
-
Configura la estructura del proyecto Crea los archivos necesarios:
index.html
para la estructura,styles.css
para los estilos y una carpetaimages
para las imágenes que utilizarás. Enlaza el archivo CSS al HTML y establece el viewport para dispositivos móviles. -
Diseña la estructura HTML base Crea la estructura HTML semántica con las siguientes secciones: header (con nav), hero, características, testimonios, formulario de contacto y footer. Asegúrate de usar etiquetas semánticas como
<header>
,<section>
,<footer>
, etc. -
Implementa las variables CSS y estilos base Define variables CSS para los colores principales, secundarios, fuentes y espaciados. Establece los estilos base para el documento como box-sizing, fuentes, reset de márgenes y rellenos, etc. Implementa también los estilos para el body y contenedor principal.
-
Desarrolla la barra de navegación Crea una barra de navegación fija en la parte superior que permanezca visible al hacer scroll. Debe contener el logo (puede ser texto) y enlaces a las diferentes secciones de la página. Asegúrate de que sea responsive y se transforme en un menú hamburguesa en dispositivos móviles.
-
Diseña la sección hero Implementa una sección hero atractiva con una imagen de fondo, un título llamativo, un subtítulo y un botón de llamada a la acción. Utiliza posicionamiento para superponer el texto sobre la imagen y asegúrate de que el texto sea legible.
-
Crea la sección de características con Grid Desarrolla una sección que muestre al menos 3-4 características del producto utilizando CSS Grid. Cada característica debe incluir un icono o imagen, un título y una breve descripción. La disposición debe cambiar según el tamaño de la pantalla.
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
-
Implementa la sección de testimonios con Flexbox Diseña una sección de testimonios utilizando Flexbox para organizar al menos 3 tarjetas de testimonios. Cada tarjeta debe contener una foto del cliente (puede ser un placeholder), una cita testimonial y el nombre del cliente.
-
Desarrolla el formulario de contacto Crea un formulario de contacto estilizado con campos para nombre, email, asunto y mensaje. Personaliza los estilos de los inputs, labels y el botón de envío. Implementa estados hover y focus para mejorar la interactividad.
-
Diseña el footer Implementa un footer con enlaces a redes sociales, información de contacto, enlaces a páginas adicionales y un aviso de copyright. Organiza estos elementos de forma responsive utilizando Flexbox o Grid.
-
Finaliza con media queries y animaciones Implementa media queries para asegurar que la página sea responsive en todos los dispositivos. Añade al menos una animación o transición CSS (por ejemplo, en botones, en el despliegue del menú móvil o al hacer hover sobre elementos).
Solución al ejercicio de programación en CSS
¡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.
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
Únete a miles de desarrolladores mejorando sus habilidades en CSS