Ejercicio de programación con TailwindCSS: Proyecto blog de artículos con Tailwind CSS

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:

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