Ejercicios Tailwind CSS proyecto blog con grid y efectos

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.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

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

Contenido bloqueado

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

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

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en TailwindCSS

⭐⭐⭐⭐⭐

4.9/5 valoración