1. Introducción

En esta clase aprenderemos a:

• Reutilizar componentes existentes.
• Ajustar el diseño para mostrar tres elementos por fila en lugar de cinco.
• Optimizar el diseño eliminando elementos innecesarios.
• Explicar cómo lograr consistencia visual con ajustes de estilo.

2. Duplicando la Estructura Base

1. Creamos un nuevo archivo llamado otros-cursos-autor.php.
2. Copiamos la estructura de la sección "Otros Cursos" y la adaptamos:
   • Reducimos la cantidad de elementos por fila de cinco a tres.
   • Eliminamos el tooltip (tooltip) ya que no es necesario.

Cambios iniciales en la estructura:

• Ajustamos el grid para que tenga tres elementos:

  grid-cols-3
  

• Eliminamos la lógica innecesaria y simplificamos la estructura para reflejar la nueva sección.

3. Personalización del Contenido

1. Encabezado y descripción:

   • Cambiamos el título de la sección a "Más cursos de Marco Mendoza".
   • Ajustamos el subtítulo para reflejar la descripción de los cursos.

2. Estilo del enlace:

   • Añadimos clases para estilizar el enlace del autor:

     class="hover:text-blue-500 dark:text-white underline"
     

3. Márgenes y espaciado:

   • Aplicamos mb-4 para espaciado vertical consistente:

     class="mb-4"
     

4. Tamaño de las imágenes:

   • Actualizamos las imágenes para que sean más grandes y de mejor calidad. Si es necesario, reemplazamos las imágenes borrosas con versiones de mayor resolución.

5. Detalles adicionales:

   • Añadimos información adicional para cada curso:
     • Horas de contenido: 4.5 horas en total.
     • Número de clases: 50 clases.
     • Precio actual y precio anterior:

       <span class="font-normal line-through text-gray-400 ml-2">84.99</span>
       <span class="text-lg font-bold">9.99</span>
       

4. Resolviendo Problemas Comunes

1. Ajuste de ancho y diseño:

   • Para asegurar que los elementos no se desborden, aplicamos una clase de ancho fijo:

     class="w-75"
     

2. Cambio de layout de Grid a Flex:

   • Si el diseño requiere más control, cambiamos de grid a flex para gestionar mejor los anchos:

     class="flex"
     

3. Espaciado entre elementos:

   • Aplicamos márgenes laterales uniformes con ml-2 y espaciado vertical con mb-4 para consistencia visual.

5. Comparación de Opciones

Opción 1: Mantener el diseño original

• Limitamos la sección a tres elementos por fila, dejando espacios si es necesario.
• Esto se logra configurando el grid con columnas fijas.

Opción 2: Extender la sección hasta el final

• Usamos flex para distribuir dinámicamente los elementos y ajustar su tamaño según el espacio disponible.

Ambas opciones son válidas dependiendo del diseño general del sitio.

6. Conclusión

En esta clase, hemos:

• Reutilizado componentes existentes para construir una nueva sección.
• Personalizado el contenido y diseño para reflejar los cursos de Marco Mendoza.
• Abordado problemas comunes relacionados con el diseño y la distribución de elementos.