No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Ana María Díaz Solorio

Ana María Díaz Solorio

Footer

21/29
Recursos

¿Cómo construir el footer de una página web con Tailwind y Figma?

Crear el footer de tu página web puede mejorar significativamente la experiencia del usuario, proporcionando información relevante que puede ser crucial para tus visitantes. En este artículo, ahondaremos en cómo diseñar e implementar eficazmente el footer de tu proyecto utilizando Figma para el diseño y Tailwind CSS para la codificación.

¿Qué función cumple el footer en Figma?

Figma es una poderosa herramienta para el diseño UI/UX, permitiéndonos visualizar el aspecto final de nuestro proyecto antes de implementarlo. Al acudir al maquetado en Figma, primero debemos ubicar y explorar la sección del footer:

  • Versión móvil: La versión móvil del footer es sencilla pero informativa. Incluye secciones clave como "Acerca de nosotros" y otros datos relevantes sobre la empresa.
  • Versión web: En la versión web, el footer mantiene el mismo diseño y contenido en texto, asegurando consistencia visual a través de dispositivos.

¿Cómo inicializar el footer con Tailwind CSS?

Tailwind CSS es una herramienta eficiente para estilizar componentes con rapidez. Sigamos los pasos para crear un footer estructurado y estilizado:

  1. Inicio del Proyecto:

    • Usamos la palabra class en el archivo HTML para inicializar los estilos de Tailwind.
    • Configuramos el ancho (width) como full y la altura (height) en automático para que se adapte a su contenido.
  2. Estilos Básicos:

    • Aplicamos un fondo con un tono de gray-50 añadiendo la clase de Tailwind: bg-gray-50.
  3. Agregar contenido:

    <footer class="w-full h-auto bg-gray-50">
      <p class="text-lg text-gray-300">Acerca de</p>
      <p class="text-sm text-gray-300">Inversionistas</p>
      <p class="text-sm text-gray-300">Empleos</p>
      <p class="text-sm text-gray-300">Términos y condiciones</p>
      <p class="text-sm text-gray-300">Platzi Travel.inc</p>
    </footer>
    

¿Qué ajustamos en el diseño y formato del footer?

Asegurar que el footer sea estéticamente agradable y funcional es primordial. Algunos ajustes finales incluyen:

  • Espaciado y Padding:

    • Añadimos padding-6 para un margen global y space-y-2 para mejorar alineaciones verticales.
  • Comandos útiles:

    • Utilizamos herramientas como Alt + clic para editar rápidamente múltiples instancias de código.

Consejos para personalizar tu footer

Una vez que sigues los pasos básicos, puedes personalizar el footer según las necesidades de tu proyecto:

  • Agrega enlaces a redes sociales o blogs.
  • Incorpora logos o íconos adicionales.
  • Proporciona información de contacto o de atención al cliente.

Estos elementos no solo añaden valor, sino que también promueven la interacción continua de tus usuarios con tu página.

Recuerda que el footer es uno de los componentes más fáciles de personalizar, así que no dudes en experimentar. ¡La motivación es clave para seguir aprendiendo y mejorar tus habilidades de diseño y desarrollo!

Aportes 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Para no tener que meter el Footer dentro de la etiqueta de Section (Mala Practica), solo modifica la altura del section por:

section class="w-full h-auto"

en lugar de usar:

section class="w-full h-screen"

la propiedad text-gray-300 es mejor agregarla a todo el footer en vez de repetirla 6 veces en todos los elementos p.

Hay que evitar repetir código.

Si pueden poner el footer esos enlaces con un UL sería mejor, esto ayuda al posicionamiento SEO.

Para los que andan buscando el repositorio de este curso:

https://github.com/platzi/PlatziTravel

Para agregar los iconos pueden agregar la siguiente CDN en la cabezera del nuestro index.html:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
 />

Luego pueden agregar los iconos de twitter y instagram:

<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>

Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:

  • w-fullwidth: 100%;
  • h-autoheight: auto;
  • bg-gray-50background-color: #f9fafb;
  • p-6padding: 1.5rem;
  • space-y-2margin-top: 0.5rem;
  • text-lgfont-size: 1.125rem; line-height: 1.75rem;
  • text-smfont-size: 0.875rem; line-height: 1.25rem;
  • text-gray-300color: #6b7280;


Sección Footer en archivo index.html:

    <footer class="w-full h-auto bg-gray-50 px-6 space-y-2 mt-6 pt-4">
        <p class="text-lg">Acerca De</p>
        <p class="text-sm text-gray-300">Inversionistas</p>
        <p class="text-sm text-gray-300">Empleos</p>
        <p class="text-sm text-gray-300">Términos y condiciones</p>
        <p class="text-sm text-gray-300">Platzi Travel, Inc.</p>
    </footer>

ASI YA LES SALDRA EL FOOTER CON LOS ICONOS
En la parte del Head pongan

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
 />

Esto va en el footer

    <footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
        <p class="text-lg">Acerca de</p>
        <p class="text-sm text-gray-400">Investing</p>
        <p class="text-sm text-gray-400">Work with us</p>
        <p class="text-sm text-gray-400">Terms and conditions</p>
        <p class="text-sm text-gray-400">Platzi Travel Inc.</p>
        <i class="fa-brands fa-twitter text-cyan-400"></i>
        <i class="fa-brands fa-instagram text-purple-400"></i>
    </footer>

Para no poner el footer dentro de la section, solamente se cambia el valor de la propiedad de altura en el section, de h-screen a h-auto.

Comentario amistoso 🫶🏻 Entiendo perfectamente que estoy tomando este curso con dos años de antigüedad, por lo que es normal que me iba a tocar investigar algunas cosas ya que Tailwind se ha seguido actualizando. Sin embargo, una cosa no tiene que ver con la otra. En este capitulo se cometieron algunos errores que no tienen nada que ver con las versiones de Tailwind. Quiero dejar este consejo para toda la comunidad, ya que también de errores se aprenden. Voy a tomar como ejemplo el error que la instructora cometió en el footer, ese es un error básico en la programación. Como developers, tenemos que tener la capacidad de entender y analizar los errores antes de dar una solución, porque cuando no lo hacemos, podemos llegar a implantar malas practicas como lo fue el caso de este video y lo dejamos pasar por alto porque entendemos que "funciona". Ojo, el comentario lo hago dentro de un marco de respecto. La verdad me ha encantado el curso y pienso que catalogar de mala manera el curso por un error, no es justo. 🤘🏻Éxito a todos!

Es un Curso que no esta Actualizado (versiones antiguas), y he tenido muchísimas dificultades a lo largo de este, me ha tocado investigar y gracias a la ayuda de los compañeros, que han mitigado las falencias de este.

Al finalizar el Curso, pondré mi inconformidad.

Para los que deseen añadir iconos al proyecto, pueden hacerlo con HeroIcons, hecho por los mismos creadores de Tailwind.

Solo tienen que copiar el codigo SVG y ponerlo donde deseen.

Ejemplo 💙

Resultado 🚀

Al final así hice mi footer jeje fuera del section principal, usando listas y poniendo los iconos como el figma. Use un cdn de fontawesome para agregar los iconos de twitter e instagram

<footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
        <h2 class="text-lg">
            About us
        </h2>
        <ul>
            <li class="text-sm text-gray-300">
                Investors
            </li>
            <li class="text-sm text-gray-300">
                Jobs
            </li>
            <li class="text-sm text-gray-300">
                Terms and Conditions
            </li>
            <li class="text-sm text-gray-300">
                Platzi Travel, Inc.
            </li>
            <li class="text-sm text-gray-300">
                Follow Us
                <ul class="text-xl text-gray-300 flex space-x-2">
                    <li>
                        <a href="#">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </footer>

Estaba pensando en como evitar reguero de estilos en los párrafos de nuestra sección footer, ya que estamos usando los mismos estilos en la mayoría de nuestros <P>, podríamos hacer uso de nuestro
src/ tailwind.css, usando el @apply de la siguiente forma.

//HTML
    <footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
      <p class="text-lg text-gray-500 font-ligt">Acerca de</p>
      <p class="TextFooter">Siguenos</p>
      <p class="TextFooter">Inversiones</p>
      <p class="TextFooter">Empleos</p>
      <p class="TextFooter">Terminos y Condiciones</p>
      <p class="TextFooter">Platzi Travel</p>
    </footer>

//SRC/TAILWIND.CSS
.TextFooter {
    @apply text-sm text-gray-300
}

De esta forma evitamos escribir la misma linea de codigo varias veces.
Espero les sirva.

Mejor puse un text-gray-500, el 300 es muy díficl de leer en fondo blanco

Listooo de nuevo, amo Tailwind cada vez más. Aquí mi resultado: ![](https://static.platzi.com/media/user_upload/image-5cdc07b1-fc30-48e0-977d-4f31a2c43a37.jpg) Y como siempre, les dejo también el link del repo: <https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS>
Comentario amistoso :) ... Honestamente me ha gustado mucho el curso. Entiendo perfectamente que a la fecha ya tine 2 años, por lo que me parece normal que algunas cosas tuve que investigarlas porque Tailwind se ha seguido actualizando. Me parece muy normal y lo acepto :D ! Sin embargo, es este capitulo se cometieron muchos errores. Uno de ellos fue el error sencillo del footer, se presento una solución que al final fue una mala practica. Tomen esto como experiencia querida comunidad, esto es un error básico en la programación. Cuando no buscamos y analizamos bien los errores, buscamos soluciones rápidas que no necesariamente son las mejores :) Ojo el comentario es con mucho respeto, la verdad he disfrutado mucho el curso 🤓
<https://play.tailwindcss.com/9bCVrPrpCx?size=656x955>
Para agregar iconos al footer 😎😎 1- agregamos este link dentro del head ```html <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> ```   2- el footer se veria asi: ```js <footer class="w-full h-auto bg-gray-50 p-6 space-y-2 text-gray-300">

Acerca de

Politica de privacidad

Inversionistas

Empleos

Términos y condiciones

Platzi Travel, Inc.

</footer> ```
Para agregar iconos en el footer 1- pegar este link en el head     \<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 2- el footer quedaria asi: \<footer class="w-full h-auto bg-gray-50 p-6 space-y-2 text-gray-300">        \

Acerca de\

        \

Politica de privacidad\

        \

Inversionistas\

        \

Empleos\

        \

Términos y condiciones\

        \

Platzi Travel, Inc.\

        \
            \
\\\
             \
\\\
             \
\\\
        \
    \</footer>