Vamos a trabajar en la sección de "Más Cursos" o "Más Cursos de Pago" reutilizando código y siguiendo buenas prácticas para mantener la consistencia en el diseño.

1. Introducción

La sección "Más Cursos" es similar a la de "Cursos Destacados", por lo que gran parte del código será reutilizable. Nos enfocaremos en:

• Duplicar y adaptar la estructura existente.
• Hacer ajustes mínimos para personalizar el contenido.
• Explicar cómo podríamos hacerlo dinámico en un entorno más avanzado.

2. Duplicación de la Estructura Existente

1. Reutilizar el código base:

   • Vamos a la sección de "Cursos Destacados" en el archivo principal.
   • Copiamos y duplicamos el bloque correspondiente.
   • Cambiamos el texto y las clases necesarias para diferenciarlo.

2. Creación de un nuevo contenedor:

   • Creamos un nuevo contenedor para "Más Cursos":

     <div class="container mx-auto">
       <!-- Bloque de cursos duplicado -->
     </div>
     

   • Actualizamos el título a "Más Cursos de Pago" y añadimos una descripción breve.

3. Ajustes básicos:

   • Cambiamos el texto dentro de las etiquetas <p> y <h2> según sea necesario.
   • Añadimos márgenes y espaciado consistente con mb-6 o clases similares:

     class="mb-6"
     

3. Personalización del Diseño

• Tipografía: Cambiamos el tipo de fuente o el estilo del texto para mantener consistencia:

  text-base font-normal
  

• Márgenes y padding: Aseguramos que haya un espaciado uniforme:

  my-6 mx-4
  

• Tooltips: Reutilizamos el tooltip existente:

  tooltip tooltip-primary
  

4. Consideraciones Dinámicas

En un entorno más avanzado, podríamos convertir esta sección en dinámica:

• Datos desde una base de datos:

  • Cada curso tendría variables como:
    • Título del curso.
    • Fecha de última actualización.
    • Nivel del curso.
    • Descripción breve.
    • ID único para manejar tooltips o interacciones.
  • Ejemplo:

    const curso = {
      titulo: "Curso Avanzado de Tailwind",
      fecha: "2025-01-20",
      nivel: "Avanzado",
      descripcion: "Aprende Tailwind en profundidad",
      id: 1
    };
    

• Uso de plantillas dinámicas: Usamos estas variables para generar dinámicamente el contenido:

  <div>
    <h2>{curso.titulo}</h2>
    <p>{curso.descripcion}</p>
  </div>
  

Ventajas de hacerlo dinámico:

• Escalabilidad: Más fácil de mantener y actualizar.
• Reutilización: Podemos aplicar los mismos estilos a múltiples elementos con datos distintos.

5. Por qué no hacerlo ahora

Este curso está enfocado en iniciación a Tailwind CSS, por lo que implementar un sistema dinámico estaría fuera del alcance actual. Sin embargo, en futuros cursos avanzados podríamos abordar:

• Uso de bases de datos.
• Creación de componentes dinámicos con frameworks como React o Vue.

6. Resumen y Conclusión

Hemos:

• Reutilizado código de la sección "Cursos Destacados" para crear "Más Cursos".
• Personalizado el contenido manteniendo consistencia en el diseño.
• Discutido cómo podríamos hacerlo dinámico en proyectos más avanzados.

La reutilización de código es una práctica fundamental para optimizar el desarrollo y mantener la estructura del proyecto. Nos vemos en la próxima clase, donde continuaremos avanzando con más ejemplos prácticos.