50% OFF Plus
--:--:--
¡Obtener!

Proyecto blog de artículos con Tailwind CSS

Proyecto de programación
Experto
TailwindCSS
Curso de TailwindCSS
50 min
500 XP
Actualizado: 13/09/2024

¡Programa y certifícate!

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

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

⭐⭐⭐⭐⭐
4.9/5 valoración