En esta clase, aprenderemos a crear el footer de nuestra página web utilizando Tailwind CSS. Trabajaremos en la estructura y diseño del footer, aplicando buenas prácticas y trucos útiles para mejorar la experiencia de desarrollo.

¿Por qué comenzamos con el footer?

Al diseñar una página web, es útil contar con una cabecera lista y un footer funcional desde el principio. Esto nos permite tener la sensación de estar trabajando en una página completa al hacer scroll y observar cómo los elementos se organizan en pantalla.

Pasos realizados:

1. Estructura básica del Footer:

   • Creamos un archivo llamado footer.
   • Añadimos un contenedor principal para organizar los elementos.
   • Dentro del contenedor, incluimos una sección superior con el logo y enlaces a redes sociales.
   • Creamos otra sección para las columnas con enlaces adicionales.

2. Uso de Tailwind CSS:

   • Aplicamos clases como max-w-7xl, mx-auto, y py-4 para definir el tamaño del contenedor y su posicionamiento.
   • Organizamos las columnas utilizando grid con clases como grid-cols-4 para dividir el footer en cuatro secciones de igual tamaño.

3. Redes sociales:

   • Añadimos íconos de redes sociales como Facebook y YouTube.
   • Usamos clases como flex, items-center, y gap-4 para alinearlos horizontalmente con el espacio adecuado.
   • Implementamos un efecto hover con saturación personalizada (hover:saturate-[1000%]) y añadimos un cursor interactivo (hover:cursor-pointer).

4. Enlaces y estilo de texto:

   • Organizamos los enlaces del footer en columnas.
   • Ajustamos el espaciado entre columnas y enlaces utilizando space-y-2 y gap-4.
   • Aplicamos clases de estilo como text-gray-400 para enlaces secundarios y font-medium para destacar títulos.

5. Optimización de diseño:

   • Ajustamos el tamaño del logo (w-5) y el espaciado entre íconos de redes sociales (gap-8) para lograr un diseño equilibrado.
   • Probamos diferentes configuraciones de espacio (space-y-8, space-y-4) para mantener un diseño limpio y ordenado.

Trucos destacados:

• Efecto hover personalizado: En lugar de usar las clases predeterminadas de Tailwind CSS, puedes definir valores específicos como saturate-[1000%] dentro de corchetes para lograr resultados más precisos.
• Separación de contenedores: Es buena práctica dividir el diseño en diferentes secciones (div) para mantener el código organizado y facilitar futuros cambios.
• Uso de inspección: Al analizar cómo otros sitios organizan sus elementos, puedes adaptar estas ideas y optimizar tu propio diseño.

Resultado final:

Hemos creado un footer funcional y bien organizado con Tailwind CSS, incluyendo:

• Logo y redes sociales en la parte superior.
• Columnas con enlaces claramente definidos.
• Efectos interactivos como cambios de saturación y cursores dinámicos.

En la próxima clase, continuaremos con el menú inferior, donde aplicaremos conceptos similares para completar el diseño de nuestra página web.

¡Nos vemos en la siguiente lección!