Hola a todos. Bienvenido de nuevo. Ya que es la cuarta semana y estás trabajando en tu proyecto final, lo que quiero hacer es mostrarte algunas de las diferentes opciones que puedes usar al diseñar tus páginas. Y en este video, quiero mostrarte lo que sucede cuando intentas hacer una barra de navegación vertical. Así que aquí en mi navegador, tengo como se verá la página cuando terminemos. Pero vamos a seguir adelante y presionaré refrescar y ver primero cómo se vería si tratara de hacer una barra de navegación usando cuatro enlaces simples. Una vez más, los enlaces están en línea, por lo que van uno al lado del otro. No hay color. No pasa nada. Y es realmente horrible. Así que déjame volver a poner ese estilo. Actualice la página. Y voy a mostrarte cómo creé esta barra de navegación. Empecemos hablando del cuerpo. Acabo de poner un poco de color de fondo, relleno y margen. Eso no es realmente importante aquí. Lo importante es hablar de nuestra sección de navegación. Una de las cosas que quería hacer es mostrarte la idea de usar esa caja de bordes de tamaño de caja. Lo que esto va a hacer es quitarle la necesidad de contar cuánto ancho, cuánto relleno, cuánto borde. No tienes que hacer las cuentas. El navegador lo hará por usted. Puse un borde simple, color, color de fondo, etc. Lo primero que hice, sin embargo, es que lo hice en bloque en línea, porque quiero que mi navegación esté al lado de las otras partes de mi página. Y como el navegador es bloque, no sucederá a menos que lo tire ahí. Así que dije que quería que fuera alrededor del 20% de la página y luego agregué un margen. Ahora, algo nuevo que puede no haber visto antes es que esta idea de altura es igual a 100vh. Esa es la altura de tu ventana. Así que esto significa que quiero que la navegación ocupe toda la altura de su página. No lo estoy recubriendo duro a 400 píxeles o 200 píxeles, porque no sé cuán grande es la pantalla que estás viendo. A continuación, hablemos de las longitudes reales en sí mismos. Lo que he entrado y hecho es que he quitado los enlaces aburridos regulares y realmente los he diseñado para hacerlos algo un poco más original. Así que puse en una altura de lo alto que quiero que sea cada uno de mis enlaces. Y luego puse un poco de un truco y dije que quiero que la altura de la línea sea de 45 píxeles. Entonces, ¿por qué haría eso? La razón sería que quiero centrar las fotos de casa o quiero centrar las palabras dentro de ella y así es como puedo hacerlo. El siguiente tipo de cosa genial que he hecho es que he agregado una imagen de fondo. Añadí estas flechas. Y lo bueno que tuve que hacer que realmente quiero señalarte es que no podía simplemente enlazar a la carpeta y luego al archivo. Debido a la forma en que configuro mi código, primero necesito decir, oh, sé que estoy en la carpeta CSS en este momento, así que voy a volver a mi carpeta principal y luego encontrar imágenes. Si esto es confuso para ti, no te preocupes. Es un concepto completamente nuevo, pero es algo con lo que muchos de ustedes se van a encontrar cuando intentan vincular imágenes de su hoja de estilo. Muy bien. Lo último que hice fue agregar un poco de relleno, así que hay espacio para la foto, y luego agregar un poco de margen. Así que usando estas cosas diferentes de las que ya hemos hablado, posición, disculpa , visualización, altura de línea, URL de fondo, pudimos hacer algo que creo que parece realmente genial para una barra de navegación simple y vertical. Adelante y pruébalo. Buena suerte.