Creando la navbar

Curso Básico de Tailwind 2 y 3

Conociendo Tailwind CSS

Bienvenida al desarrollo con Tailwind

Tailwind 3.0: ¿qué hay de nuevo?

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mobile First y Utility First

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind

Utilidades

Nueva paleta de colores extendida

Medidas y Breakpoints

Flexbox

Maquetación del proyecto

Plugins

Forms, Typography y Aspect ratio

Personalización

Tailwind como API para la creación de un Design System

Proyecto: Platzi Travel

Construyendo el cuerpo del proyecto

Creando la sección de Home

Diseñando nuestras cards

Extracción de componentes a clases para nuestra card

Creando la sección de Recomendados

Agregando animaciones al proyecto

Creando la sección de Rentas destacadas

Sección de FAQS

Footer

TabBar funcional

Haciendo responsivo nuestro proyecto

Haciendo responsivo nuestro proyecto: rentas destacadas

Creando la navbar

Agregando el Dark Mode

Optimización de nuestro proyecto

Purge CSS

Cómo hacer la migración de tu proyecto a Tailwind 3.0

Conclusiones

Conclusiones y siguientes pasos

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿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:

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>
```

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>

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:

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 */
    }
}

Posición fija: Utiliza position: fixed para que la NavBar se desplace con el usuario al hacer scroll.
```
.navbar {
    position: fixed;
}
```
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.

Aportes 12

Preguntas 3

Ordenar por:

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

Platzinauta

hace 3 años

Código de mi navbar junto con la sección home:

    <nav class="w-full h-14 hidden bg-white lg:flex p-4 justify-between">
        <div class="h-auto w-auto">
            <p class="text-xl text-primary font-black">Platzi Travel</p>
        </div>
        <div class="flex space-x-8">
            <a class="font-bold text-base text-primary" href="#home">Inicio</a>
            <a class="font-bold text-base text-primary" href="#recomendados">Recomendados</a>
            <a class="font-bold text-base text-primary" href="#rentas_destacadas">Rentas</a>
            <a class="font-bold text-base text-primary" href="#faqs">FAQs</a>
            <a class="font-bold text-base text-primary" href="#sobre_nosotros">Sobre nosotros</a>
        </div>
        <div class="flex space-x-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-primary" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/></svg>
            <svg width="20" height="20" viewBox="0 0 29 29" fill="none" xmlns="https://www.w3.org/2000/svg"><path d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/></svg>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-gray-300" fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/></svg>
        </div>
    </nav>
    
    <section class="w-full lg:h-screen">
        <div class="lg:w-full lg:h-3/4" id="home">
            <div class="w-full lg:h-full">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:pt-48 lg:justify-start">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
                    <div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
                        <p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
                    </div>
                    <button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
                </div>
                <div class="w-full h-full lg:h-full lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
                    <img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>

César Andrés Aguilar Párraga

hace 3 años

Si utilizaste fontawesome, aqui esta el navbar listico 😄

        <nav class="w-full h-14 hidden bg-white lg:flex lg:fixed lg:z-10 p-4 justify-between border-b-4 border-cyan-600">
            <div class="h-auto w-auto">
                <p class="text-xl text-primary font-black">Platzi Travel</p>
            </div>

            <div class="flex space-x-8">
                <a class="nav-items" href="#home">Inicio</a>
                <a class="nav-items" href="#recomendadas">Recomendados</a>
                <a class="nav-items" href="#rentas_destacadas">Rentas</a>
                <a class="nav-items" href="#faqs">FAQs</a>
                <a class="nav-items" href="#sobre_nosotros">Sobre nosotros</a>
            </div>
            <div class="flex space-x-4">
                <a href="">
                    <i class="nav-icons fa-search fa-solid"></i>
                </a>
                <a href="">
                    <i class="nav-icons fa-moon fa-solid"></i>
                </a>
                <a href="./registrationForm.html">
                    <i class="nav-icons fa-user fa-solid"></i>
                </a>
            </div>
        </nav>

la clases son

    .nav-items {
        @apply font-bold text-base text-primary
    }

    .nav-icons{
        @apply text-base text-primary
    }

Orlando Alonso Gonzales Paz

hace un año

Para los que tienen problemas con el nav, agreguen un "z-10" que es el z-index y pongame un bg-white a "nav" `

Raymondi Alejandro Ramos Vásquez

hace 2 años

Uy el navbar con fixed da problemas 😦

Julian Franco

hace 3 años

A mi por alguna razón no me toma el h-3/5 si le pongo h-96 funcioan sin problema

Any Omaña

hace un mes

Así se ve mi navbar 💚 ![](https://static.platzi.com/media/user_upload/image-41ee88e9-990b-471d-a8b8-ed40f9a5fdc1.jpg) Aquí dejo mi repositorio con el proyecto en Github por si necesitan guiarse en algo: <https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS>

Joan Alexander Valerio Rodríguez

hace un año

Sugerencia.. para aquellos que terminaron esta implementación y utilizaron la propiedad h-screen en un tag 🤨.. Les recomiendo ver lo que le paso al footer en modo desktop 🧐 Hay un choque de clases... cuidado con eso

Pablo Alejandro Figueroa

hace un año

<https://play.tailwindcss.com/AfEs4IEPxD?size=1150x1355>

CLAUDIA ANDREA CAMPO GRIJALBA

hace un año

```html <section class="w-full h-auto">

Encuentra más ubicaciones como esta

<button class=" w-48 text-lg text-primary font-semibold p-4 bg-white rounded-full shadow-sm lg:ml-16 transition duration-500 ease-in-out hover:bg-primary hover:text-white hover:translate-y-1 hover:scale-110" > Explorar </button>

```Lo solucione asi, porque no me funcionaba lo de cambiar el h-96 por h-full en lg version. Si le ocurrio a alguien más aqui esta mi solución