Descripción
Crea un blog desde cero utilizando HTML y Tailwind CSS. Diseña una página principal con navegación, hero y un grid interactivo de artículos. Desarrolla páginas de artículos detalladas con contenido, comentarios y enlaces a otros artículos.
Configurar el entorno:
- Abre Visual Studio Code.
Crear index.html
:
- Crea la estructura HTML 5 y añade Tailwind CSS desde CDN.
- Añade una barra de navegación con un logo en la parte superior.
- Incluye un hero debajo de la barra de navegación.
- Implementa un grid de 3 columnas para mostrar los artículos:
- Cada tarjeta de artículo debe contener una imagen, título y breve descripción.
- Aplica un efecto de hover usando clases de Tailwind CSS.
- Asegura que al hacer clic en toda la tarjeta se navega a la página del artículo correspondiente.
- Añade un footer con un logo y tres columnas de enlaces ficticios.
Crear las páginas de artículos (articulo1.html
, articulo2.html
, articulo3.html
):
- Crea la estructura HTML 5 y añade Tailwind CSS desde CDN.
- Cada página debe tener un hero con un h1 que muestre el título del artículo.
- Añade el contenido textual del artículo debajo del hero.
- A la derecha, incluye un aside con una lista de los otros dos artículos:
- Cada elemento debe ser una tarjeta pequeña con imagen y título.
- Los enlaces deben dirigir a las otras páginas de artículos.
- Agrega una lista de comentarios predefinidos al final del artículo.
Estilizar con Tailwind CSS:
- Utiliza clases de Tailwind CSS para dar estilo a todos los elementos.
- Asegura la consistencia del diseño entre todas las páginas.
- No utilices CSS personalizado ni estilos inline.
Hacer el diseño responsive:
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
- Aplica utilidades responsive de Tailwind CSS para que el sitio se vea bien en dispositivos móviles, tabletas y ordenadores.
- Verifica que el grid de artículos y el layout se ajusten correctamente en diferentes tamaños de pantalla.
Enlazar y probar:
- Verifica que todos los enlaces de navegación y de los artículos funcionan correctamente.
- Prueba el efecto hover en las tarjetas de artículos.
- Abre cada página en un navegador y comprueba que el diseño y la funcionalidad cumplen con los requisitos.
Optimizar y finalizar:
- Revisa el código para eliminar cualquier elemento innecesario.
- Asegúrate de que todo el contenido está correctamente estructurado y semánticamente correcto.
Solución al ejercicio de programación en TailwindCSS
¡Desbloquea la solución completa!
Completa el ejercicio de programación en TailwindCSS para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
Practica con ejercicios de programación en TailwindCSS
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 TailwindCSS