Creando la navbar

¿Cómo crear una NavBar eficaz para tu proyecto web?

Al construir un sitio web, la NavBar es uno de los elementos más importantes que garantiza una experiencia de usuario óptima. En esta clase, aprenderemos a implementar una NavBar funcional y agradable estéticamente, que no solo mejora la navegación, sino que también complementa el diseño de la página.

¿Cómo estructurar la NavBar?

La estructura de la NavBar se divide en tres partes esenciales para asegurar su funcionalidad:

1. Div de Logo: Este es el espacio destinado al logo de tu sitio web, en este caso, "Platzi Travel", que se introduce usando un tag <p>.

   <div class="height-auto width-auto">
       <p class="text-xl text-primary font-black">Platzi Travel</p>
   </div>
   

2. Div de Navegación: Aquí colocamos los enlaces que dirigirán a los usuarios a las diferentes secciones de la página.

   <div class="flex space-x-8">
       <a href="#home" class="font-bold text-medium text-primary">Inicio</a>
       <a href="#recomendados" class="font-bold text-medium text-primary">Recomendados</a>
       <a href="#rentas" class="font-bold text-medium text-primary">Rentas</a>
       <a href="#faqs" class="font-bold text-medium text-primary">FAQs</a>
       <a href="#sobre-nosotros" class="font-bold text-medium text-primary">Sobre Nosotros</a>
   </div>
   

3. Div de Iconos: Aquí se colocan los iconos interactivos, como la búsqueda, el Dark Mode y el perfil del usuario.

   <div class="flex space-x-4">
       <!-- Icono de búsqueda -->
       <svg class="fill-current text-primary" ...></svg>
       <!-- Icono de Dark Mode -->
       <svg class="fill-current text-primary" ...></svg>
       <!-- Icono de usuario -->
       <svg class="fill-current text-grey-300" ...></svg>
   </div>
   

¿Cómo darle estilo a la NavBar?

Para lograr que la NavBar se vea profesional y se ajuste a la estética de la página, es importante aplicar estilos como display: flex, espaciados, y colores coherentes que se alineen con la marca:

• Flex y Espaciado: Utiliza display: flex para organizar los elementos de la NavBar. Agrega espaciado con space-x-* para separar los íconos adecuadamente.
• Colores y Tamaños: Adapta colores con clases de Tailwind, por ejemplo, text-primary y text-grey-300, y cambia los tamaños con clases como text-xl y font-bold.

¿Cómo asegurar que la NavBar sea responsiva y funcional?

Para garantizar que la NavBar funcione correctamente en diferentes tamaños de pantalla, se recomienda:

1. Desaparecer en versión móvil: Esconde la NavBar en dispositivos móviles y úsala solo para escritorio.

   .navbar {
       display: none; /* hidden por defecto */
   }
   
   @media (min-width: 1024px) {
       .navbar {
           display: flex; /* visible en pantallas grandes */
       }
   }
   

2. Posición fija: Utiliza position: fixed para que la NavBar se desplace con el usuario al hacer scroll.

   .navbar {
       position: fixed;
   }
   

3. Navegación fluida: Asegúrate de que los enlaces se dirijan correctamente a las secciones correspondientes mediante IDs en el HTML.

¿Qué ajustes finales deben realizarse?

No olvides los detalles. Ajustar tamaño de imágenes y paddings, como cambiar el padding-top para centrar el contenido, puede hacer una gran diferencia en la apariencia final del proyecto. Además, los ajustes de tamaño y espacio en imágenes pueden mejorar significativamente la experiencia visual del usuario.

Con estos pasos bien definidos, no solo tendrás una NavBar eficiente, sino también un diseño completo y responsivo que satisfaga las expectativas de navegación de tus usuarios. Sigue explorando e implementa siempre nuevas herramientas y conceptos para mantener tu sitio web a la vanguardia. ¡Mantente motivado y sigue aprendiendo! La próxima clase exploraremos la implementación del Dark Mode.