Proyecto CSS Landing page simple

Proyecto de programación
Intermedio
CSS
Curso de CSS
180 min
200 XP
Actualizado: 02/05/2025

¡Programa y certifícate!

Asistente de IA
Solución de código
Certificado
Empezar ejercicio

Descripción

Crear una landing page responsive utilizando CSS moderno con flexbox y grid para mostrar información sobre un producto ficticio.

  1. Configura la estructura del proyecto Crea los archivos necesarios: index.html para la estructura, styles.css para los estilos y una carpeta images para las imágenes que utilizarás. Enlaza el archivo CSS al HTML y establece el viewport para dispositivos móviles.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

    Progreso guardado
    Asistente IA
    Ejercicios
    Iniciar sesión gratis

    Más de 25.000 desarrolladores ya confían en CertiDevs

  7. 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.

  8. 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.

  9. 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.

  10. 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

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 );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
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 }
21
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

Únete a miles de desarrolladores mejorando sus habilidades en CSS

⭐⭐⭐⭐⭐
4.9/5 valoración