Cómo crear sitios web desde cero con HTML, CSS y JavaScript (NO SE REQUIERE EXPERIENCIA DE PROGRAMACIÓN)

1. Epic Intro: ¿ Cómo hace alguien sin experiencia en programación y pasa de una página blanca vacía a un sitio web interactivo y estilizado usando código. Te lo diré, pero primero, déjame explicarte qué hace un sitio web. En la web se utilizan tres lenguajes fundamentales para trabajar. Estos lenguajes se llaman HTML, CSS y JavaScript. ¿ Qué hacen? Podrías preguntar, bueno, HTML se utiliza para estructurar el contenido de las páginas web. Sin él, su sitio web se vería así. No obstante, HTML solo lo convierte en un sitio web bastante aburrido. Ahí es donde entra CSS. Css es la línea de diseño. Hace que todo se vea bonito para que la gente vuelva a tu sitio web. Por último es JavaScript. Ayuda a que tu sitio web sea interactivo para que pueda hacer cosas como esta. Así que volvamos a nuestra primera pregunta. ¿ Cómo alguien sin experiencia en programación crea un sitio web estilizado usando código? Es simple. En menos de dos horas, ven un curso amistoso para principiantes que les da las habilidades necesarias para comenzar a convertirse en maestros de los lenguajes web fundamentales. Por suerte para ti, conozco sólo el curso. Se llama construir sitios web desde cero usando HTML, CSS y JavaScript. No se requiere experiencia de programación de llenado. En este curso, aprenderás a crear los bloques de construcción de un sitio web en HTML. Haz que parezca CSS impresionante, y ponte un poco extra genial con JavaScript. ¿ Quién será tu instructor? Bueno, ese soy yo. Hola, soy Taylor English y me gusta programar. Entonces, ¿a qué esperas? Haga clic en la siguiente lección para comenzar. 2. Cómo configurar su computadora para escribir código: Muy bien, lo primero que vamos a necesitar para empezar a escribir nuestro sitio web desde cero es un editor de código. Ahora, si quieres, puedes usar algo como Bloc de notas, pero realmente no lo recomendaría porque esto es solo un editor de texto básico. Hay herramientas mucho mejores que nos pueden ayudar a escribir código. El programa que te voy a mostrar hoy es bastante fácil de usar y te voy a mostrar todos los consejos y trucos que necesitarás. Es un programa llamado Visual Studio Code, también conocido como VS Code, y está hecho por Microsoft. Entonces si vas a tu navegador web, simplemente puedes buscar VS Code y simplemente haz clic en la primera página. Ahora estoy en Windows, así que voy a descargarlo para Windows. Si haces clic en esta flecha aquí, también puedes descargarla para Mac o Linux, o también hay otras descargas. Ahora, si estás en Windows 11 y tal vez incluso Windows diez, esto podría funcionar. Puedes ir a la Microsoft Store, que está integrada en tu computadora. Puedes descargarlo desde allí también. Si lo haces de esa manera, creo que automáticamente mantendrá actualizado el programa para ti, lo cual es bastante bonito. Sólo voy a descargarlo para Windows. Es una descarga bastante pequeña. Debería ser bastante rápido. Ahí está. Sólo puedes golpear abierto. Y los instaladores bastante sencillos. Simplemente acepte el acuerdo. No es necesario modificar nada en esta página a menos que lo desee, pero no necesitaremos hacerlo para este tutorial. Simplemente pulsa Siguiente y luego haz clic en Instalar. Ahora, ya lo tengo en mi computadora, así que no voy a volver a instalarlo, pero déjame mostrarte cómo funciona. Así que cuando inicies sesión, probablemente verás algo como esto. Ahora esto es solo un poco de página de Get Started algo para ayudarte a escribir tu código. Puedes usar esto si quieres o desmarca esta casilla para que no aparezca al inicio. Pero lo que vamos a necesitar hacer primero para iniciar nuestro proyecto es crear una carpeta donde podamos almacenar todos los archivos de nuestra página web. Haga clic en el archivo y haga clic en Abrir carpeta. Ahora tenemos que elegir un lugar para almacenar esto. Así que voy a, vamos a ver. Voy a crear una carpeta aquí. Sólo voy a llamarlo mi página web. Ahora, si yo fuera tú, lo haría todo una palabra sin espacios ni símbolos de lujo, solo porque eso podría hacer algo del proceso más fácil más adelante. Haga clic en este clic en Seleccionar carpeta. Ahora estamos dentro de esa carpeta. Así que déjame mostrarte algunas de las características de Visual Studio Code o código VS. Por aquí a la izquierda tenemos a nuestro explorador. Aquí es donde verás todos los archivos que hay en esta carpeta. Puedes hacer click en este icono aquí para hacer un nuevo archivo. Por ejemplo, si quisiera hacer un archivo de texto simple, podría decir algunos file.txt. Y cuando pongas esa extensión de archivo, el punto TXT, automáticamente reconoce lo que es y le dará un pequeño ícono. Ahora para ti, los iconos pueden ser diferentes. Yo uso algunas modificaciones especiales. Este programa para hacer. Algunas cosas se ven un poco diferentes, por lo que puede que no te parezca exactamente igual. Si cavas a través de los ajustes, puedes cambiar el esquema de color y cosas así. Pero no vamos a hacer eso en este tutorial. Puedes crear archivos. Este botón creará carpetas. Nuevamente, es posible que no tengas estos iconos. Puede que solo veas esta flecha y eso está bien. Este icono actualizará esta carpeta en caso de que se haya realizado algún cambio, que normalmente no lo necesitas realmente. Si tiene carpetas abiertas. Entonces, por ejemplo, si tuviera este archivo aquí, entonces presionar este botón colapsaría todos hacia arriba y cantos rodados. Vale, veamos algunas de las otras características. Sólo voy a eliminar esto. Esta es la búsqueda, la opción de búsqueda. Esto te permite buscar en todo tu proyecto, buscar en todas tus carpetas y archivos. Entonces eso es super nifty. No tendremos que preocuparnos por el control de fuentes. Podemos llegar a eso más adelante cuando empecemos a publicar un sitio web, pero no vamos a preocuparnos por eso en este momento. No nos preocuparemos por ejecutar d por remoto Explorer, pero vamos a echar un vistazo a las extensiones. Esta es una de las mejores características sobre Visual Studio Code. Visual Studio Code es muy modular, lo que significa que puedes agregarle mucha funcionalidad muy fácilmente y es gratis, cual es realmente genial. Aquí adentro. Hay todo tipo de extensiones que puedes conseguir esa voluntad, te ayudarán. Así que sólo voy a recomendar una pareja que podría ser útil para este curso. Si miras el envoltorio de etiquetas HTML, eso es algo que me puedes ver usando de vez en cuando. Es solo una forma de seleccionar algún texto y luego envolver todo ese texto en etiquetas HTML, que aprenderemos más adelante. No es necesario sino servicial, vive ahí. Querrá descargar esto, esto será muy útil. Simplemente nos va a ayudar, solo ayudará a que el proceso de edición sea mucho más fácil. Recomendaría encarecidamente descargar servidor en vivo. Entonces si quieres que tus iconos se vean como lo hacen los míos, puedes descargar este material, Icono, Tema y así sucesivamente. Entonces creo que eso son todas las extensiones que en realidad necesitarán para esto. Por supuesto. A menudo cuando estás editando en otros lenguajes de programación, puedes obtener extensiones para los diversos idiomas y esto ayudará a resaltar su sintaxis. El resaltado de sintaxis básicamente solo significa que partes del código están coloreadas de manera diferente. Por lo que te ayuda a ver las cosas mejor mientras estás editando. Esos son los principales aspectos del editor. En el siguiente video, nos pondremos en cómo poner en marcha tu proyecto y empezar a escribir código. 3. Cómo configurar su primera página web en HTML: En este video, vamos a empezar a crear nuestra primera, nuestra primera página web, sólo una página simple. Y te voy a mostrar la estructura del HTML y básicamente cómo estructurar un sitio web simple y ejecutarlo en tu propio equipo. Vamos a ir a nuestro editor de código VS Code y venir aquí y seguir adelante y crear un nuevo archivo. Y vamos a llamar a este archivo index.html. Ahora probablemente te estés preguntando, ¿por qué estamos llamando index. Eso es solo una especie de estándar con el desarrollo web y ayuda al proceso de publicación de tu sitio ir mucho más sin problemas. Ahora tenemos que poner punto HTML porque se trata de un archivo HTML. Así que permítanme explicar HTML. Estructura del sitio web. Esencialmente hay tres componentes para casi todos los sitios web. Html, CSS y JavaScript. Html es la estructura de la página. Todas las imágenes, todo el texto, de los botones, todo así. Css, que aprenderemos más adelante, lo hace lucir bonita, cierto. Hace que todo se vea bonito y ordenado, justo de la manera que lo quieras. Entonces JavaScript lo convierte en el sitio web interactivo. Hace que los botones hagan cosas. Hace que las cosas sucedan cuando haces clic en cosas o lo que sea. Vamos a aprender los tres idiomas hasta cierto punto. Pero vamos a empezar con HTML. Permítanme explicarle cómo funciona HTML. Utiliza un sistema de etiquetas. Déjame mostrarte solo alguna estructura básica. Entonces te explicaré cómo funciona todo esto. Todo está anidado dentro de estas etiquetas. Tendrás una etiqueta de apertura, que es simplemente estos dos corchetes con el nombre de la etiqueta dentro. Y luego tienes una etiqueta de cierre que tiene una barra inclinada hacia adelante, y luego el nombre de la etiqueta que siempre necesitas. Bueno, no debería decir eso. Casi siempre se necesitan las dos. Hay algunas etiquetas que no requieren una etiqueta de cierre, pero la mayoría de ellas sí. Cada página web va a tener estas tres etiquetas. Por tres, quiero decir, estas, estas tres etiquetas de apertura y ahí las etiquetas de cierre de compañero, se necesita una etiqueta HTML, una etiqueta de cabeza, y una etiqueta de cuerpo. Empecemos con HTML si quieres. Pero una cosa que es realmente agradable de VS Code es que no tienes que escribir el nombre completo de la etiqueta. No tienes que sacar los corchetes. Simplemente escribes este nombre rápido como HTML y presiona Tab y se lo autocompletará para ti. Y entonces sólo voy a presionar Enter. Y eso va a crear ese espacio justo ahí. La etiqueta HTML. No hace mucho, pero es una especie de estándar de crear la estructura de la página. Todo en la página HTML bits dentro los corchetes HTML para las etiquetas HTML. Ahora tenemos la etiqueta de cabeza. El tag head es importante porque especifica información importante sobre tu sitio web. Por ejemplo, el nombre de la página que se muestra en la pestaña en la parte superior. Entonces por ejemplo, si fuera a escribir aquí donde dice nueva pestaña, eso es algo que definimos en la etiqueta head. Es importante. Definiremos alguna otra información ahí dentro, pero probablemente no nos profundizemos en ella. No necesitaremos hacer demasiado con él. Ahora bajo eso está la etiqueta del cuerpo. Ahora ten cuidado de no poner la etiqueta del cuerpo dentro de la etiqueta de la cabeza. Tiene que estar por debajo de ella. Dentro de la etiqueta body es básicamente donde ponemos todo lo demás. Este es el resto de la página HTML. Es el cuerpo de la página. Para empezar con nuestro sencillo sitio web dentro de la etiqueta head, pon una etiqueta de título. El título es esa parte. En la parte superior de la página, la pestaña que ves. Sólo voy a decir mi página web. Puedes decir lo que quieras aquí. No importa. Sólo va a ser ese texto que se muestra ahí arriba. Porque esto es sólo una simple declaración de una línea. No voy a romperlo como hice los otros los otros. Eso es todo lo que vamos a poner en la cabeza por ahora. Entonces en cuerpo, Hagamos una etiqueta p, que significa párrafo. Y eso es sólo algún texto normal. Y acabas de poner cualquier texto en la etiqueta p. Y sólo vamos a decir, bienvenidos a mi página web. Presiona Guardar. Ahora tenemos que ejecutar la página. Esto es cuando esa extensión Live Server es útil. Si te darás cuenta aquí abajo en la parte inferior derecha hay un botón que dice Go Live y dice click para ejecutar servidor en vivo. Adelante y haz clic en eso. Si no ves ese botón, solo puedes hacer clic derecho en la página y hacer clic en Abrir con servidor en vivo. Eso va a abrir una página en tu navegador web que muestre tu sitio web. Sólo quiero felicitarte muy rápido. Ha creado un sitio web. Se trata de un sitio web para todos los efectos y intenciones. Es que aún no es muy interesante. Pero este es un sitio web que puedes hacer. Esto. La programación web es realmente divertida y no es terriblemente difícil. Podemos aprender esto. Esa es nuestra página web. Ahora lo que es realmente genial Live Server es que mientras estamos editando , cada vez que presionamos guardar, se actualiza automáticamente nuestra página y actualiza nuestros cambios. Si agrego otra etiqueta de párrafo y solo digo hola mundo, y la guardo, se actualiza automáticamente y aparece en la página. Ahora una cosa que notarás cuando dejé abajo ese hola mundo es que apareció a continuación. Bienvenido a mi página web en lugar de junto a ella. Y eso se debe a que las etiquetas de párrafo muestran las cosas como bloques. Significado. Se puede imaginar un bloque que va todo el camino a través de la página. Por esto bienvenidos a mi página web. De hecho, podemos visualizar esto así. Tienes que preocuparte por lo que es esto. Estas son solo algunas herramientas de desarrollo útiles en el navegador. Pero presta atención a esto. Todo lo que he destacado en azul es el cuerpo. Y se puede ver eso resaltado aquí mismo. Ahora si resalto sobre cada uno de estos, se puede ver que dice que es una etiqueta de párrafo justo ahí. Se puede ver la letra P y ocupa toda esta fila. Y eso es porque la etiqueta de párrafo es una etiqueta de bloque. Se necesita alrededor de toda la sección. Cualquier otra etiqueta que pongas a continuación va a ir debajo de ella automáticamente. Esto es algo que podremos cambiar más adelante usando CSS si nos gusta. Pero por ahora, solo reconozcas eso. Y déjame mostrarte un par de otras etiquetas útiles. Por lo que aprendimos la etiqueta p. Eso es para párrafos simples. Si quieres encabezados, hay un par de etiquetas para eso. Entonces ahí está H1, H2, H3, por H6. De acuerdo, entonces estos son los repentinos o lo lamentamos, los seis tamaños de cabeceras. Uno siendo el más grande, seis siendo el más pequeño. Nosotros. Es una etiqueta útil para tener. Entonces por ejemplo, si lo tenemos, si estás escribiendo un blog, por ejemplo, puedes tener un encabezado uno y bienvenido a mi blog. Entonces bajo eso puedes poner una etiqueta de párrafo y decir, pon un texto aquí. Así es como puedes usar esos encabezados. Esa es una etiqueta muy común y útil. Aprendamos algunas otras etiquetas. Vamos a aprender sobre las listas. Si quieres una lista numerada, entonces puedes decir l, lo que significa lista ordenada, lo que significa que se ordenará 12345. Entonces, dentro de la lista ordenada, es necesario poner elementos de lista que son etiquetas LI. Quiero decir el punto uno, punto dos, punto tres, etcétera. También notarás que los sangra automáticamente. Ahora si quieres una lista de viñetas, entonces eso es lo que llamamos una lista desordenada o una UL. Podemos hacer lo mismo, pero esos mismos elementos de lista ahí dentro. Pero en lugar de numerarlos, les da viñetas. De acuerdo, por lo que estas son solo algunas de las etiquetas que vamos a estar usando. Hay otros textos para cosas como imágenes, enlaces, botones, etcétera. Y nos meteremos en eso en videos posteriores. Pero por ahora, esto es lo básico de cómo configurar un sitio web HTML. Recuerda que creamos un index.html. El punto HTML es muy importante. Entonces tenemos etiquetas de apertura y etiquetas de cierre. Cada página HTML tiene una etiqueta HTML, una etiqueta de cabeza y una etiqueta de cuerpo. 4. Otras etiquetas HTML útiles (Parte 1): En este video, vamos a hablar algunas otras etiquetas HTML que probablemente te resulten útiles. El primero con el que vamos a empezar se llama la etiqueta a. Y lo vamos a utilizar para hacer enlaces. Y por qué se llama la etiqueta a. Es un poco confuso. Es sinónimo de ancla, pero no tenemos que preocuparnos por eso para este video. Por lo que solo sigue adelante y escribe la letra a y pulsa Tab. Verás que crea una etiqueta con un atributo llamado auricular. H ref es esencialmente donde ponemos el enlace para lo que vamos a poner aquí. Ups hacen una nota rápida sobre los atributos. Y atributo en HTML es una especie de algo que pones dentro de la etiqueta de apertura de un elemento. Estos son todos elementos para ponerlo dentro de la etiqueta de apertura. Y vamos a aprender un poco más sobre atributos más adelante, pero te permiten cambiar el estilo y otras cosas por el estilo. Pero para éste necesitamos poner el enlace en ella. Así que sólo voy a ir a Google. Sólo voy a agarrar ese eslabón, tirarlo aquí. Ahora si pego a Save, notarás que no pasó nada. Y eso es porque en realidad necesitamos adjuntar el enlace a algún texto. Sólo voy a poner entre la etiqueta de apertura y cierre. Simplemente escribiré Google. Verás que lo tenemos dice Google aquí mismo y está subrayado mostrándonos que es un enlace. Si sigues adelante y haces clic en eso, y te llevará a Google. Nota rápida sobre un tags y enlaces. Es muy importante que tengas el HTTP o HTTPS. Estoy bastante seguro de que no funcionará sin ella. Podría equivocarme, pero por lo general estaría a salvo e incluiría eso. La siguiente etiqueta de la que vamos a hablar es de la etiqueta b. Esto es bastante sencillo. Simplemente significa negrita. Si tengo una etiqueta p, tengo algo de texto y acabo de decir, hola mundo. Si quiero hacer que World audaz, entonces lo voy a rodear en una etiqueta b. De acuerdo, entonces hace que eso audaz. Ahora voy a hacer una nota rápida sobre lo que acabo de hacer. Viste que seleccioné mundo y presioné Alt W en mi teclado, lo cual no, aún no funcionará para ti. Te voy a mostrar cómo hacer que esto funcione. Esta es la extensión de etiqueta wrap que hablé anteriormente en el video. Si vas a Extensiones y encuentres envoltura de etiquetas HTML, sigue adelante e instala eso si quieres. Esto es sólo un truco útil. La forma en que lo usas mientras seleccionas la palabra y presiona Alt W. Y luego puedes escribir lo que quieras. Y lo pondrá tanto en las etiquetas de apertura como de cierre. Entonces si pongo la b aquí, entonces pone sus entradas tanto ahí mismo. Es bastante guay. Ahora si quieres que el espaciado sea un poco menos confuso, en realidad puedes anidar la etiqueta del párrafo como esta, y eso está bien. Ahora te voy a mostrar otra etiqueta. Esa es la etiqueta o italicize. Así que digámoslo de nuevo. Vamos a poner eso adentro. Se puede ver ahí mismo, se italiciza eso. Ahora probablemente te estés preguntando qué acaba de pasar aquí, donde pone ambas frases una al ladode ambas frases una al lado otra en lugar de una encima, una en la parte inferior. Porque en el editor de código, uno estaba en la parte superior y otra en la parte inferior. Bueno, si volvemos a lo que hablamos con elementos de bloque, etiqueta de párrafo es un elemento de bloque, lo que significa que va a ser un solo bloque. Todo dentro de ella será una cuadra. Si quieres poner algo debajo de él, necesitas poner otro bloque debajo de él. De la forma en que se está leyendo este texto, bien podría estar directamente adjunto a él. No tenernos presionando Entrar aquí mismo y haciendo ese descanso. Es. No nos ayuda aquí. Lo que tendríamos que hacer es. Crear una etiqueta de segundo párrafo, por lo que un segundo bloque y ponerlo ahí y de esa manera lo pondría debajo. Ahora, de nuevo, no tienes que anidar estos, pero puede ayudar si tienes múltiples etiquetas que pueden hacer las cosas un poco menos confusas. Hablemos ahora de la etiqueta de imagen. Adelante y escribe IMG y pulsa Tab. Esto es simplemente para mostrar imágenes en su sitio web. Tiene dos atributos. Uno es el atributo fuente y cuál es el atributo alt? Fuente es donde se encuentra tu foto en tu computadora. Te contaré sobre ALT en un minuto. Déjame ir a buscar tengo una foto aquí en mi computadora, así que iré a agarrar eso y simplemente arrastrarlo a mis archivos. Esto es sólo una foto de mí tocando el piano. Si no lo sabes, realmente disfruto tocar el piano. Pero de todos modos, tengo esa foto ahí mismo. Para hacer las cosas simples. Voy a ir a renombrar y me voy a pegar. Voy a deshacerme de todos los espacios que sólo harán nuestra vida más fácil. En la etiqueta fuente, necesitamos teclear este tocando el piano dot JPG, JPEG. Esa es la fuente. Ahora si le pegamos a Save, va a aparecer. Realmente, realmente grande. Wow. Es una imagen enorme. Te voy a mostrar cómo ajustar eso en tan solo un minuto. Pero hablemos de esta etiqueta alt muy rápido. La etiqueta alt se utiliza para mostrar una descripción de una imagen. Si no se carga. Si estuviéramos a poner tocando el piano aquí mismo. Vamos a estropear el enlace de tiendas muy rápido. Deshazte de una carta y presiona Guardar. No puede encontrar la imagen porque no sabe cómo se llama correctamente. Y así obtenemos este pequeño error y una descripción tocando el piano que puede ser útil. Ahora si alguna vez has desplazado el ratón sobre una imagen o algo más, y te muestra el pequeño cuadro de texto flotante. Eso es lo que llamamos el atributo title. Y déjame mostrarte cómo funciona eso. Podemos agregar un atributo aquí y decir título. Y si decimos tocar el piano justo aquí, entonces cuando pasemos el puntero , la imagen, obtendrá ese pequeño blurb de texto donde dice tocar el piano. Ahora, esta imagen no es de muy buen tamaño, es enorme. Entonces, ¿cómo podemos arreglar eso? Podemos añadir un ancho, atributo, la etiqueta. Si decimos anchura, podemos ingresar una medida. Lo vamos a hacer en pixeles. Si no estás familiarizado con los píxeles, esencialmente tu pantalla está compuesta por millones y millones de píxeles, y eso es lo que crea toda la imagen en tu pantalla. Una imagen como esta, yo tocando el piano, se compone de un cierto ancho en píxeles y una cierta altura en píxeles. Podemos comprobar qué es para esta imagen entrando en nuestro explorador de archivos. Hacemos clic derecho en la imagen. Entonces di Reveal en el Explorador de archivos. Entonces podemos hacer clic derecho sobre esto e ir a las propiedades. Y luego ir a los detalles. Aquí mismo verás las dimensiones. Son 4 mil por 6 mil, y verás que el ancho es de 4 mil píxeles, altura es de 6 mil píxeles. Voy a tratar de redimensionarlo a algo bastante pequeño. Voy a encogerlo un poco y solo decir 300 pixeles. Escribes eso por 300 px y te aseguras de que no haya espacio entre el número y el px. Y golpeó Save. Ahí está la imagen. Ahora, probablemente te estés preguntando, ¿tengo que revisar el tamaño de cada imagen que pongo? Absolutamente no. Definitivamente puedes meterte con esto como quieras. Sólo puedes adivinar números. Y si no es del todo lo que te gustaría, hazlo un poco más grande. Ahora, la razón por la que sólo estamos poniendo en el ancho es porque si solo ponemos en esta medida, esta unidimensión, automáticamente mantendrá la escala de la altura para que se mantenga igual. Si quisiéramos, podríamos añadir unos atributos de altura y podríamos elegir lo que queramos. Puedo convertirlo en un cuadrado y decir 300 pixeles. Eso aplazaría nuestra imagen en un cuadrado. Ahora eso probablemente no sea ideal para la mayoría de los casos. Es por eso que simplemente mantendrías mantener la unidimensión. O podrías mantener el ancho, la altura. Se escalaría automáticamente al otro. Mantendría intacta tu imagen. Esa es la etiqueta de imagen. En el siguiente video, hablaremos de unas etiquetas más. 5. Otras etiquetas HTML útiles (Parte 2): Vamos a hablar de tres etiquetas más y luego vamos a pasar al estilo. Así que estoy emocionado por eso. Anteriormente te hablé la etiqueta de párrafo y cómo es un elemento de bloque. Si te acuerdas, te mostramos un ejemplo donde si pones algún texto dentro de este párrafo, en realidad solo va a anexarlo directamente al último bit. ¿ Y si quieres replicar ese comportamiento pero tener etiquetas separadas? Bueno, hay una etiqueta para eso. Se llama la etiqueta span. La etiqueta span no es un elemento de bloque, es un elemento en línea, lo que significa que se pondrá al lado de lo que sea, lo que sea que esté tratando de crear. Ahora lo que pasa con inline es que no podemos ponerlo al lado la etiqueta de párrafo porque el párrafo es un tipo de bloque. Todo lo que pongas debajo de ella va a ser un nuevo bloque. No obstante, podemos adjuntar un par de etiquetas span juntas. Estas etiquetas de lapso se sentarán uno al lado del otro. Pero si pusiéramos otra etiqueta de párrafo, eso sería un nuevo bloque. Ok. Déjame mostrarte algo. Si yo, voy a destacar estos de una manera que se puedan ver cada uno de los elementos. Se puede ver que hola es su propio bloque. Entonces estos son elementos en línea, están separados. Se puede ver el hola de nuevo se adjunta el uno al otro. Están separados el uno del otro, pero están en la misma línea. Y luego la etiqueta del párrafo se separa de esas. Esa es la etiqueta span. A continuación, hablaremos del break tag. El break tag simplemente significa que quieres algo de espacio entre diferentes objetos. Entonces si tengo aquí mi etiqueta de párrafo y luego quiero poner una imagen, digamos, ¿ Todavía tengo esa imagen por ahí? Lo es, sí. Digamos que tengo esta imagen con un ancho de 100. Digamos que quiero más espacio entre esta imagen. Diré tocar el piano. Simplemente puedo poner una etiqueta de ruptura que es solo BR. Ahora te darás cuenta de que solo creó la única etiqueta de apertura. El break tag es una de esas etiquetas que no necesita una etiqueta de cierre. Simplemente es su propia cosita. Se puede ver poner ese espacio ahí mismo. Ahora, puedo copiar y pegar esto un par de veces. Y pone un montón de espacio. Esa es la etiqueta de ruptura. Ahora la tercera etiqueta de la que vamos a hablar es la etiqueta de botón, que no vamos a hacer mucho con ella ahora mismo, pero vamos a hacer mucho con ella después. El botón de etiqueta es divertido, es bastante sencillo. Acabas de poner algo de texto dentro de lo que quieres que diga el botón. Puedo decir empujarme. Ahora hay un botón. Ahora este es un hecho divertido. Notarás que el botón fue al lado de la imagen y eso es porque el botón es un elementos en línea como es la imagen. Esos ambos están en línea, así que ambos están a mi lado. Entonces, por ejemplo, si quisiera poner el botón debajo de él, si sólo pudiera poner una etiqueta de descanso, tal vez una pareja. Ahora se puede ver el botón Empujar Me. Puedo hacer clic en él, y es bastante básico, pero no hace nada. Es un poco complicado obtener mucha funcionalidad con botones usando solo HTML. Vamos a necesitar algo de JavaScript para eso. Entonces mantente atento. Vamos a hacer algunas cosas interesantes más adelante con JavaScript y ancho, los botones. 6. ¡Construya un sitio web impresionante!: En esta sección del curso, te voy a mostrar cómo replicar el sitio web que estás viendo usando HTML, CSS, y un poco de JavaScript. Así que déjame darte un rápido recorrido por esta página web para que sepas en qué es lo que estamos trabajando. Es bastante básico y su funcionalidad, es una presentación sencilla. No se mueve automáticamente, pero podemos cambiar las imágenes aquí haciendo clic en estas imágenes a continuación. Verás que hay un poco de efecto de burbuja. Entonces cuando resalto sobre cada una de las imágenes, salen un poco. puede ver que están uniformemente separados y están centrados en la página como esta. También puedes ver este logotipo de Explorer en la parte superior. Solo una fuente elegante que se vuelve azul cuando me pongo el ratón sobre ella. Y los botones de navegación ponen rojos cuando me pongo el ratón sobre ellos. También te voy a mostrar una navegación de página. Entonces si hacemos click en esta página de galería, es sólo una página sencilla que creé que muestra las cuatro imágenes que están disponibles, pero te voy a mostrar cómo hacer esa navegación de la página. Ahora bien, aunque este sitio web es bastante simple, quiero impresionar en sus mentes la importancia del CSS en este proyecto. Y en realidad puedo seguir adelante y desactivar el CSS aquí y mostrarte cómo se ve sin. Déjame seguir adelante y hacer eso. Este es el HTML sin procesar de la página. Tenemos enormes imágenes que no caben en la pantalla. Entonces solo tenemos unos botones de navegación raros que no son tan buenos. Excepto que el CSS todavía estaba en esa otra página. Pero se puede ver que el CSS juega un papel enorme, enorme en cómo se ve una página web. Y no queremos que solo esté hecho de HTML. En el siguiente par de videos, te voy a mostrar cómo estructurar este sitio en HTML. Y ahí aprenderemos un par de cosas nuevas. También estoy, y luego los videos posteriores, aprenderemos todo el CSS requerido para esto así como el JavaScript para ello. No hay mucho JavaScript, pero solo hay un poquito para hacer que la imagen cambie en la presentación de diapositivas funcione. Te veré en el siguiente video. 7. Estilismo de tu encabezado y imagen principal (CSS Parte 1): Muy bien, vamos a construir este sitio web. Para empezar. Empecé con una carpeta fresca. Te invitamos a hacer lo mismo o modificar los archivos en los que trabajamos antes. Si lo desea, recomendaría comenzar con solo una carpeta fresca aunque. Lo que vamos a hacer primero es crear nuestro archivo index.html. Sólo vamos a crear un archivo a la vez. Voy a crear ese nuevo archivo, index.html. Empezaremos con lo básico, la etiqueta HTML y dentro de la etiqueta head, y dentro de eso, el tipo de título. El título para esto. El objetivo aquí es replicar esta página. Aquí arriba en la pestaña dice explorado. Y así es lo que es la etiqueta del título. Cuatro. Vamos a explorar. Entonces en realidad podemos alinear estos aquí. Ahí vamos. Entonces bajo la etiqueta de la cabeza, voy a crear una etiqueta de cuerpo. Vamos a poner un H1. Solo di explora eso. Conseguimos ese gran encabezado ahí arriba. Veamos cómo se ve esto hasta ahora. Voy a guardarlo y hacer clic con el botón derecho y presionar Abrir con servidor en vivo. Esto va a abrir otra pestaña aquí. Podemos ver cómo se ve nuestra página. Esto es lo que tenemos hasta ahora, solo el H1 y también dice Explorer aquí arriba en la parte superior. Eso es impresionante. A continuación, voy a saltarme la navegación por ahora, pero vamos a poner las imágenes. ¿ De acuerdo? Entonces lo que queremos es una imagen principal con cuatro imágenes debajo. Sólo voy a poner una etiqueta de imagen. Ahora necesitamos las imágenes reales. Voy a incluir un enlace en R. Voy a incluir enlaces de descarga para las imágenes y cualquier otro, como enlaces o cosas de las que hablé en el curso, eso estará todo en la descripción del curso. Voy a incluir enlaces para descargar las imágenes, pero déjame seguir adelante y agarrar esos realmente rápido. Tengo esas cuatro imágenes. Pongámoslo aquí mismo. Ahora ya verás, es posible que veas esta carpeta de código dot VS. No necesitas preocuparte por esto. Es solo algo que es creado automáticamente por VS Code y parece ciertos ajustes en él, pero no lo tocaremos. No afectará a nuestro proyecto de ninguna manera realmente. Tengo mis cuatro imágenes y en realidad puedo verlas aquí en VS Code. Son imágenes realmente grandes, por lo que sí tardan un segundo en cargarse. Pero tengo mis cuatro imágenes. Entonces lo que queremos hacer es que queremos que nuestra imagen principal empiece ya que queremos tomar una de las imágenes para empezar, solo voy a elegir Imagen uno, que he nombrado como para esto, esta imagen en la fuente, sólo vamos a decir inmediato un punto JPEG. Lo que podemos hacer en el texto alt, que si recuerdas, el alt-text es que apareceremos si una imagen no puede mostrarse. Aquí, sólo voy a decir montañas. O veamos, voy a decir una ciudad en la montaña. Creo que esa es una descripción decente. Sin embargo, no hace justicia a la imagen. De acuerdo, así que lo guardaré y veremos nuestra página ahora. Tenemos Explora aquí arriba y luego una imagen enorme. Vamos a tener que trabajar en re-dimensionar eso, que se hará con el CSS. Tenemos nuestra imagen principal. Empecemos con eso. Empecemos a trabajar en nuestro CSS. Necesitamos crear un nuevo archivo. Lo llamaremos style.css. Necesitamos vincular ese archivo en nuestro HTML dentro de la etiqueta head. Bajo la etiqueta de título, vamos a decir link. A continuación, puede ratón hacia abajo, flecha hacia abajo a CSS. Y va a crear todo esto para ti. Digamos que es una hoja de estilo, que es lo que es CSS. Y luego el enlace al archivo real por defecto es style.css. Ahí somos bastante afortunados con nuestro nomenclatura. Ahora, necesitamos probar para asegurarnos de que el archivo CSS funcione. Así que intentemos retocar algo simple. Queremos que la página sea negra. Una forma en que podemos hacer eso es que en realidad podemos. Podemos adjuntar algunos estilos a todo el cuerpo de la página, a la etiqueta del cuerpo en sí, y hacer que la página sea negra. Déjame mostrarte cómo hacer esto en nuestras hojas de estilo, en nuestro CSS. Puedes nombrar una etiqueta. Voy a decir el nombre del cuerpo de la etiqueta. Y entonces vas a poner estos corchetes rizados aquí. Y una vez que creas, una vez que golpeas el corchete de apertura , crea un par automáticamente, entonces solo puedes presionar Enter y lo hará por ti. Ahora, podemos poner justo, podemos poner nuestras propiedades CSS ahí, que son los elementos individuales de estilo que agregamos a la página. Lo que queremos aquí es color de fondo, negro. Es bastante sencillo ya que trabajamos en más CSS, verás que mucho es muy legible, de fácil comprensión. Ahora, SSS no siempre es fácil. Puede volverse muy complejo. Pero espero que lo que te mostré tenga sentido. Y espero que no estés asustado lejos de CSS porque realmente es un gran lenguaje y es bastante intuitivo la mayor parte del tiempo, en mi opinión. Así que adelante y pega Save. Entonces lo que hemos hecho aquí es que le dijimos la etiqueta del cuerpo y hacemos que sea color de fondo negro, lo que significa que todo el fondo de la página debe ser negro. Si vamos a nuestra página, se puede ver que técnicamente es cierto. Pero solo tenemos esta imagen que se saca la mayor parte de la página para que realmente no se pueda decir que es el fondo es negro. De acuerdo, entonces vamos a trabajar con eso. Vamos, vamos a encoger la imagen. Te voy a mostrar algo llamado DNI. En CSS, tenemos esencialmente tres formas principales de unir estilos a elementos. Podemos seleccionar un elemento por su nombre de etiqueta, que acaba de ver con la etiqueta body. O podemos usar una identificación o clase. Una clase es cuando se quiere adjuntar un estilo a múltiples cosas. Das la misma clase a cada una de las etiquetas. Y entonces puedes dar el mismo estilo, todos ellos. Y ID es donde sólo queremos darle un estilo a uno. Déjame mostrarte cómo hacer esto. En una etiqueta de imagen. Queremos encoger un poco el ancho. Entonces lo que voy a hacer es dentro de la etiqueta, voy a añadir otro atributo, fuentes, un atributo, alt como atributo. Vamos a agregar otro atributo y lo vamos a llamar ID. Si solo presionas ID y pulsa pestaña, debería crear este pequeño igual y luego la cotización funciona. Ahora dentro de esto es lo que llamamos el ID. Esto puede ser lo que quieras. Voy a llamarla imagen principal. ¿ De acuerdo? Ahora, típicamente, si quieres varias palabras en el nombre de un ID o clase, querrás poner un guión entre las palabras. Eso es solo el estándar que normalmente se sigue. Vamos a poner la imagen principal ahí. Ahora lo que podemos hacer es que podamos seleccionar eso en nuestro style.css. Ahora para decirle al CSS que se trata de un ID en lugar de una etiqueta, es que necesitamos poner un signo de libra, digamos imagen principal. Si es una clase, pondríamos un punto y deciríamos imagen principal como esta. Pero es una identificación, así que pondremos un letrero de libra. Y ahora queremos cambiar su propiedad de ancho. Veamos aquí. Vamos a darle un ancho, 100%. Ahora, esto significa que el ancho va a ocupar 100% del contenedor. Esencialmente. El contenedor para esta imagen es el cuerpo. Así es como se sienta en la jerarquía. Dentro del cuerpo. Se va a llevar un 100% del ancho. Entonces veamos cómo se ve eso. Impresionante. Podemos ver que ahora la imagen no se extiende más allá del ancho de la visualización de la pantalla. Se extiende más allá de la altura. Pero se ajusta a la anchura sabia en la pantalla porque ocupa un 100% del ancho. Ahora, lo que queremos hacer es que si cambiamos el tamaño de esto, verás que la cantidad de la imagen cambia dependiendo de cuál sea el ancho. Queremos que esto se mantenga bastante constante. Vamos a darle una altura de 400 pixeles. Ahora se puede ver que aplazó un poco la imagen. Pero esto es esencialmente del mismo tamaño que aquí. Echamos un vistazo. Es aproximadamente del mismo tamaño, pero todo es borroso. Ahora vamos a usar una propiedad CSS llamada bit objeto. Y no sé todo sobre esta propiedad. Pero lo que puedo decirte es que como dice el nombre, cambia cómo el objeto en la página, el valor que le vamos a dar es portada. Ahora lo que eso hizo es que lo hizo para que la imagen no se apague más pero se corta. Es decir, si cambias el tamaño de la misma, verás diferentes piezas de la imagen. Esencialmente es mantener la misma relación de aspecto. Pero dependiendo del tamaño de la pantalla, vas a ver una parte diferente de la imagen. Ahora para nuestros propósitos, eso está bien. Se puede ver en la página principal, ya que lo redimensiono, obtenemos ese efecto también. Tenemos nuestra imagen. Ahora, lo que queremos hacer es que no podemos ver ninguno de nuestros textos. No podemos ver al Explorador aquí arriba. Está ahí, en algún lugar. Ahí vamos. Se esconde porque es negro. Vamos a seguir adelante y cambiar el color de eso. Veamos. Tenemos nuestra aquí. Entonces voy a sumar 81 porque es el nombre de la etiqueta. Sólo voy a decir color, blanco. Se puede ver CSS, no está tan mal. Ahora cosas como el ajuste de objetos pueden ser un poco confusas. Pondré enlaces a una referencia CSS y una referencia HTML que te mostrará todas las propiedades HTML y CSS y etiquetadas que posiblemente podrías querer usar. Y te da gran detalle sobre cómo usarlo correctamente. Muy servicial. Cuando estás haciendo desarrollo web. No es necesario memorizar todo. Ni siquiera necesitas memorizar exactamente cómo funciona todo. Lo importante es que sepas investigar y averiguar la información que necesitas. Y eso es realmente bastante común en la mayoría de la programación. Antes de terminar este video, hagamos una cosa más. Cambiemos el estilo de este Explorer para que tenga esas fuentes de lujo y para que esté centrada en la página. De la forma en que hice esto ya que utilicé un sitio web llamado fuentes de Google. Si vas a fonts.google.com, serás traído a esta página. Probablemente no sabías que esto existía, pero es bastante impresionante. Déjame mostrarte cómo funciona. Puedo escribir algo aquí. Podría decir Explorador. Nos va a mostrar todos estos diferentes bonos que podríamos elegir. Un montón de cosas diferentes que podríamos usar que podemos incorporar de forma gratuita a nuestra página web. El tipo de letra que queremos usar se llama pincel de agua. Ese es este de aquí mismo. Se puede seguir adelante y dar click en él. Y la mayoría de las fuentes tendrán varios pesos, lo que significa básicamente lo negrita que es. Y así se pueden ver esos. También puedes simplemente teclear y ver cómo se vería en diferentes tamaños y ese tipo de cosa. Lo que queremos hacer es hacer click en seleccionar este estilo. Ahora sube aquí y haz clic en ver familias seleccionadas. Ahora tengo algunas otras cosas, así que déjame quitarlo. Sólo tengo este pincel de agua. Ahora dice usar en la web. Todo lo que necesitas hacer es incrustar esta etiqueta, esta pieza de código en HTML, y luego usar esto para usar esta familia de fuentes en el CSS. Vamos a copiar esto, vendrá a nuestro HTML. Y lo pegaremos debajo de nuestro enlace al style.css. Sólo pegaré ahí arriba. Podría parecer realmente aquí. Si hace clic al principio de una línea y presiona Tab, entonces puedes alinear todo correctamente. Ahora si le pegamos a Save, no hace de inmediato que parezca que queramos. La otra parte es muy importante a donde dice las reglas CSS. Vamos a seguir adelante y copiar eso. Y en nuestro H1 en el CSS, solo sigue adelante y pega eso. Esta propiedad se llama font-family. Y como se puede imaginar, cambia cuál es la fuente. Esta fuente se llama pincel de agua, que tiene acceso a utilizar Google Fonts. Y dice que es cursiva. Presionará Guardar. Puedes seguir adelante y mirar la página. Y luego vamos, Ahora es elegante. Todo es cursivo. Así que eso es bastante guay. Ahora lo que tenemos que hacer es centrarlo en la parte superior de la página. Lo que podemos hacer por eso es que vamos a cambiar el tamaño de la fuente ahora escribiendo el tamaño de la fuente. Si te desplazas hacia abajo, verás que hay muchos símbolos extraños diferentes. Básicamente, se trata de diferentes unidades de medida. Vamos a usar uno llamado EMS, EM deletreado. Déjame mostrarte cómo se ve uno. Se ve así. M es esencialmente el tamaño de fuente predeterminado de su navegador. Creo que se basa en la altura de la letra M. Esta es una m, y esto puede ser diferente dependiendo de la configuración de su navegador. Pero lo que queremos hacer es si lo cambias, esto es dos veces eso. Lo que queremos son cinco amperios, que tiene cinco veces el tamaño de fuente predeterminado. Hay otras formas en que puedes hacer tamaños de bloque. Puedes hacerlas en pixeles. En realidad puedes hacerlas en pulgadas, centímetros, todo tipo de cosas. Puedes experimentar con esos o buscar en línea para aprender a usarlos. Eso, debido a que hay muchas formas interesantes de hacer las cosas, también puedes usar porcentajes como hicimos aquí arriba. Pero vamos a usar ems. Ahora lo tenemos. Tenemos el tamaño de la fuente en marcha. Lo que necesitamos ahora es alinearlo en medio de la página. Añado otra propiedad y digo text-align center. Y como se puede imaginar, eso alinea el texto en el centro de la imagen, tal como queríamos. Estaban acercándose. Se puede ver que aún no estamos del todo ahí, pero nos estamos haciendo mucho. En el siguiente video, vamos a hacer aún más estilo. 8. Especificidad del selector y efectos de Hover (CSS Parte 2): Muy bien, hagamos un poco más de CSS. Vale, entonces lo primero que quiero que mires, cuando comparemos estos sitios web, casi se puede ver una diferencia en el lado de la imagen. Verás aquí esta imagen se extiende hasta los bordes de la pantalla. tanto que aquí lo hace. ¿ Por qué es eso? Bueno, los navegadores automáticamente pondrán una especie de relleno o esencialmente una capa de espacio en la página. Simplemente lo hacen por defecto, en realidad necesitamos hacer algo para deshacernos de eso para que podamos darle estilo como queremos que se vea exactamente igual en cada dispositivo. De acuerdo, así que sigamos adelante y miremos nuestro código. Así es como podemos hacer esto. En la parte superior de nuestro CSS. Haz algo de espacio y pon una estrella, un asterisco. El asterisco es un símbolo que significa todo. Significado. En lugar de seleccionar una etiqueta o una clase o un ID, esto se aplica a todo lo que hay en la página. ¿ De acuerdo? Ahora debo mencionar que cada uno de estos es lo que llamamos selector, un selector CSS. Entonces este es solo otro selector de CSS y significa que estamos seleccionando todo. Entonces lo que tenemos que hacer es deshacernos de los impagos. Y así vamos a sumar dos inmuebles. Uno se llama margen y uno se llama relleno. Entonces, ¿cuál es la diferencia? Bueno, el margen es esencialmente cuánto espacio hay en el exterior de un objeto. Entonces si tienes dos objetos aquí y aquí mismo, el margen es el espacio entre ellos. El relleno es, por ejemplo, si tienes un objeto aquí y luego un objeto dentro de él, como algunos textos, el relleno es cuánto espacio hay entre los bordes del objeto y lo que hay dentro. De acuerdo, entonces probablemente hablaremos de eso un poco más. A medida que avanzamos. Agregaremos algún margen y relleno a las cosas. Pero lo que queremos hacer es que queremos establecer esas propiedades a 0 por defecto, queremos un margen de 0, relleno de 0. Entonces mira lo que va a pasar. Golpeamos Guardar y al instante verás que la imagen subió contra los lados de la pantalla. Y eso es porque nos deshacemos de esas propiedades predeterminadas. Entonces tal vez te estés preguntando, bueno, si aplicamos un margen de 0 y un relleno de 0, todo, ¿qué pasa si queremos cambiar esas propiedades más adelante? Bueno, lo ordenado de CSS es que la propiedad que se aplica a un objeto es depende de cuán específico seas. Ok. Eso suena un poco confuso. Déjame explicarte. Por ejemplo, si tenemos esta etiqueta de cuerpo, tener un color de fondo de negro. Bueno, digamos que queremos poner una caja en algún lugar de la página que tenga un color de fondo de azul. Ok. Lo que podemos hacer es que podríamos dar la caja, soy selector más específico como una identificación o una clase. Y digamos que tiene un color de fondo diferente. Y entonces el que es más vago, estamos más lejos se cancela fuera. Entonces si miramos, por lo que la forma en que funciona la especificidad es las etiquetas son las más generales, luego las clases y luego los identificadores. Por lo que un ID va a ser tribado todo. Va a lograrlo. Así que lo que digas en el DNI descarta todo lo demás que hayas dicho antes. ¿Está bien? Espero que eso tenga un poco de sentido. No vamos a tener que preocuparnos demasiado por especificidad en CSS en esta clase. Si quieres saber más al respecto, puedes encontrar toneladas de cosas al respecto en línea. Pero solo pensé que debería hacerte saber qué tipo de cómo funciona eso. Si no entendiste de lo que acabo de hablar, déjame resumirlo diciendo, podemos aplicar este margen de 0 y este relleno de 0 a todo. Pero este selector es muy general ya que sólo se aplica generalmente a todo. Si hacemos algo más específico, como seleccionamos la etiqueta o la clase o el ID. Sea cual sea el margen o relleno que nos hayamos puesto que triunfa todo y fuera las reglas. Esto. ¿ De acuerdo? Esto acaba de establecer el escenario para dejarnos hacer lo que queramos. Adelante y salva eso. ¿ Qué es diferente? Bueno, aquí hay un espaciado diferente entre el encabezado aquí y el nav. También tenemos estas imágenes aquí abajo. Y también tenemos estos efectos de hover aseados. Entonces empecemos con eso. ¿ Cómo hacer el fresco hover? Muy bien, es bastante simple. Lo que tenemos que hacer es crear otro selector. Y vamos a decir que es H1, pero ponemos un colon y decimos hover, lo que significa que estamos, estamos seleccionando la etiqueta H1, pero estamos siendo específicos y diciendo si estamos rondando sobre ella, como esto, volando el ratón. Ok. Entonces lo que podemos hacer es que podamos poner un color de azul. Y más específicamente, vamos a usar este color. ¿Está bien? Ahora, lo que puedes hacer es que puedas copiar esta palabra por palabra si quieres. Pero déjame mostrarte cómo funciona esto. Entonces cuando creé esto, originalmente empecé con el azul. Lo genial de VS Code es que si pasas el ratón sobre un color, te permite cambiarlo. Tienes este selector de color. Ok. Encontré el color que quería. Y se puede ver que tiene este código RGB en la parte superior. Y entonces eso es esencialmente lo que es esto. El código RGB básicamente significa que esta es la cantidad de rojo, esta es la cantidad de verde, y esta es la cantidad de azul para obtener este color. Y así la sintaxis para eso es RGB. Y luego entre paréntesis, solo separas los valores de Aqaba. Y asegúrate de que haya un punto y coma después de eso. Entonces si le pegamos a Guardar y vamos a nuestra página, si resalto sobre ella, ahora se vuelve de color negro. Notarás sin embargo, que mi cursor no es del todo lo que lo queremos. Si miras por aquí, tiene más del dedo señalador. Es algo que identifica que se puede hacer clic en él, que se puede. Pero no tenemos eso aquí. Entonces, ¿cómo podemos conseguir eso? Bueno, en este mismo selector de hover agregará otra propiedad llamada cursor. Hay una variedad de cursores que puedes obtener. Todo, desde cargar hasta básicamente cada cursor que hayas visto en la web se puede definir aquí en su mayor parte. Por ejemplo, si ponemos agarrar y le pegamos a Save, nos da esa pequeña mano agarradora, como podríamos moverla. De acuerdo, entonces el que estamos buscando se llama puntero. Eso es sólo este simple tipo de clic. Por lo que queremos eso. También queremos poner una transición aquí ese tipo de desvanece, desvanece en el globo para que se vea un poco más natural. Como aquí mismo. Se puede ver que se desvanece un poco más lentamente. Entonces vamos a poner aquí una propiedad llamada transición. Vamos a usar una transición llamada facilidad de entrada, salida. Ahora, lo que eso significa es que la transición tiene, básicamente tiene un comienzo lento y un final lento. Facilidad de entrada y salida. ¿ De acuerdo? Y así la salida es un poco difícil de ver con esto aquí, pero también se puede decir sencillamente facilidad en. Hay una variedad de transiciones que puedes usar. Junto a facilitar adentro hacia fuera, vamos a poner un espacio y poner 0.2 S cuatro segundos. Entonces eso esencialmente lo hace para que la animación ocurra en un plazo de 0.2 segundos. Se ahorra. Y ahora lo pasamos por encima. Y se puede ver a pesar de que son solo 0.2 segundos hace la diferencia. Se siente más natural. Es sólo que, sólo se siente más agradable. ¿ De acuerdo? Así que tenemos nuestro encabezado básicamente hecho. Por qué no ponemos aquí las cuatro imágenes debajo de la imagen principal. Lo que queremos hacer en nuestro código, vamos a crear una lista desordenada. Entonces la lista desordenada es básicamente una lista de viñetas. No está numerada. Se numeraría una lista ordenada. Así que esencialmente estamos haciendo una lista de viñetas y te mostraré por qué en tan solo un minuto. Pero dentro de este punto de bala. Listas, queremos poner cada una de las imágenes. Entonces vamos a decir LI para el elemento de lista. Y vamos a crear una etiqueta de imagen. Imagen y la fuente. Queremos imagen 1234. Queremos exhibirlas todas. Dirán imagen un punto JPEG, JPEG. Y podemos poner en las montañas justo ahí mismo. Vale, ahora, voy a copiar esto y pegarlo tres veces para que tengamos cuatro de estos. Entonces solo cambia la imagen a la imagen tres y la imagen para. Ahora, para los fines de esta clase, no me voy a preocupar por las otras etiquetas alt, pero eso es algo que probablemente quieras ponerlo. Vas a elegir. Veamos cómo se ve esto. De acuerdo, para que podamos ver que muestra las imágenes. Sin embargo, son enormes. Parece que necesitamos cambiar el tamaño de esos. ¿ De acuerdo? Entonces lo que vamos a hacer es que vamos a crear una clase para estas imágenes. Porque si solo dijera select, lo siento, si solo tuviera que usar la etiqueta de imagen, también modificaría esto. Y no queremos que esto se vea igual que las imágenes más pequeñas. Así que déjame mostrarte cómo crear una clase. Vamos a agregar un atributo HTML llamado class. Solo puedes golpear pestaña ahí. Y vamos a llamar a esta pequeña imagen o IMG. Ahora la razón por la que estamos creando una clase es porque queremos aplicar las mismas propiedades a las cuatro de estas imágenes. Entonces vamos a añadir esta clase, cada etiqueta en la lista. Guardaré que en nuestro style.css va a escribir dot para la clase y diremos imagen pequeña. Y queremos darle a cada uno de estos un ancho de 100 pixeles. Está bien, es sólo hacerlos realmente, cualquiera realmente pequeño. Y veamos cómo se ve eso. ¿De acuerdo? Entonces tenemos las cuatro imágenes ahí mismo. ¿ De acuerdo? Ahora necesitamos que estén centrados. Así que vamos a seguir adelante. Vamos, en realidad sólo vamos a dar estilo primero a las imágenes y luego te mostraré cómo hacemos el espaciado. ¿De acuerdo? Entonces vamos a darle a cada uno de ellos un borde de, vamos a decir un borde de tres píxeles, lo que significa que tiene tres píxeles de espesor. Voy a decir blanco sólido. Ahora para redondear las esquinas, vamos a usar una propiedad llamada radio fronteriza, que es sólo una manera elegante de decir que vamos a dar vueltas las esquinas y vamos a ahorrar diez píxeles. Para que pueda meterse con la medición aquí. Pero esencialmente, cuanto mayor sea el recuento de píxeles, mayor es la corriente hasta que casi se vuelve circular. Así que vamos a decir diez píxeles para conseguir un rectángulo redondeado. Mira. ¿ De acuerdo? Y sí, así que dejemos esos ahí por ahora. En el siguiente video, te explicaré cómo alinearlos horizontalmente bajo esta imagen. 9. Aprendizaje de Flexbox y espaciado de margen (CSS Parte 3): En este video, vamos a aprender sobre una impresionante propiedad CSS llamada Flexbox. Suena aterrador, pero prometo que es impresionante. Déjame sacar lo es para que puedas entenderlo un poco mejor. Imaginemos que tenemos esta caja, este contenedor, ¿de acuerdo? Y en realidad, vamos a dimensionarlo así. Ahora mismo. Nuestras imágenes se apilan así. ¿ De acuerdo? Entonces eso se ve así. Entonces eso es una especie de lo que tenemos pasando. Ahora cuando aplicamos Flexbox. Esto es lo que va a cambiar. Todo se va a convertir en horizontal. Y entonces de repente todo se va a alinear así, ¿verdad? Oh, no viste que no soy muy hábil en pizarra. Pero se obtiene la idea, todo estará dentro de ella. Y la flexbox nos da algunas otras propiedades interesantes. Voy a poner un enlace a una referencia específicamente a una flexbox en la descripción de la clase. Yo lo haría altamente, recomiendo encarecidamente mirarlo. Es bellamente diagrama, solo realmente explica las cosas mucho mejor de lo que puedo aquí. Pero te voy a mostrar cómo vamos a usar esto en nuestro sitio. Entonces lo que queremos hacer es aplicar la propiedad flexbox a la lista desordenada porque eso es lo que contiene Todos los elementos del elemento de lista. Entonces si te olvidaste, estos son técnicamente todos los artículos de punto de viñeta. Simplemente no se pueden ver realmente los puntos de bala. Porque todo es negro y puré juntos. Y en realidad vamos a deshacernos de los puntos de bala más adelante, te mostraré cómo hacer eso. Pero lo que tenemos que hacer es convertir esto en una flexbox para que pueda ser horizontal. Entonces voy a escribir UL para la etiqueta de lista desordenada y decir display flex box. Ahora, si miras, aquí hay otras cosas. Cuando hablamos de HTML y del inicio de la clase, hablamos un poco sobre elementos de bloque y en línea. Entonces otro tipo de visualización para un objeto es una flexbox. Y en realidad puedes simplemente escribir negros para usar el flexbox. Ok. Veamos qué pasa cuando hacemos eso. De acuerdo, al instante lo dio la vuelta de lado. Ahora necesitamos algo de espacio entre ella. Entonces vamos a utilizar una propiedad específica a Flexbox llamada justificar contenido. Entonces básicamente, eso significa justificar es el espaciado. Entonces cómo vamos a espaciar el contenido dentro de la caja o la lista desordenada. Entonces vamos a decir espacio. Entonces lo que hace es dejarme mostrarte algunos clips. Lo siento, allí no. Déjame mostrarte algo limpio aquí. Esta caja morada es nuestra lista desordenada. Por lo que se puede ver cuando usamos espacio entre los elementos están tocando los lados en los extremos, pero hay espacio entre todos ellos. Si dijeras espacio alrededor, también habría espaciado en el exterior de ella. Ok. Entonces eso definitivamente es un paso mejor, pero no del todo lo que estamos buscando. De acuerdo, entonces ahora tenemos que agregar otra propiedad. Queremos darle a este un ancho restringido para que se pueda cortar y no retomar todo el ancho de la pantalla. Y vamos a darle un ancho de 500 pixeles. Ahora. Aplastado juntos, está empezando a parecerse más la página web original. ¿ De acuerdo? Ahora lo que queremos hacer es que queremos poner algo de espacio entre la imagen principal y estos chicos. Entonces vamos a utilizar la propiedad margen aquí. Ahora la forma en que funciona la propiedad margen es que puedes darle en cualquier lugar de una a cuatro entradas. ¿ De acuerdo? Entonces si dijéramos diez píxeles, eso pondría un margen o un espacio de diez píxeles en la parte superior. El fondo y los lados, sólo se puede decir realmente que está en la parte superior y en el lateral. Si pusiéramos una segunda propiedad, como cinco píxeles, esto significa que habría diez píxeles de espacio en la parte superior e inferior, y luego cinco píxeles a la izquierda. Y la tarifa. Si ponemos otro como cinco píxeles aquí, entonces esto es diez píxeles en la parte superior, cinco píxeles a la izquierda y a la derecha, y cinco píxeles en la parte inferior. Y luego la cuarta propiedad, si ponemos algo más como tres píxeles, entonces serían diez píxeles en la parte superior, cinco píxeles a la derecha, cinco píxeles en la parte inferior del pulmón de tres píxeles. Entonces eso suena realmente confuso, pero permítanme explicarlo de una manera, de una manera bastante sencilla. Ok. Déjame volver a levantar mi pizarra para poder explicar esto un poco mejor. Entonces tenemos una caja aquí, y luego tenemos algo de espacio aquí arriba. Algún espacio aquí, aquí, y aquí. Cuando estás introduciendo mediciones. O veamos. Cuando estamos entrando. Poniendo insumos en la propiedad margen, así es como funciona. Siempre empieza por la parte superior e ir en sentido contrario a las agujas del reloj. Entonces si decimos diez píxeles, empezamos por la parte superior. Y porque sólo hay un valor, se aplica a todo. ¿ De acuerdo? Si ponemos otro que el primero es de diez píxeles. El segundo es de cinco píxeles. Y eso se aplica a ambas partes. Y entonces la parte inferior es de diez píxeles puede básicamente arriba e inferior son nuestro este primer valor y luego los lados del mismo valor. Si agregamos otro valor, entonces la parte superior es de diez píxeles. Eso es lados son cinco píxeles, y la parte inferior es de tres píxeles. Así que nunca puedes simplemente moverte en el sentido de las agujas del reloj. ¿ De acuerdo? Entonces si ponemos uno más que el top es diez, la derecha es cinco, abajo es tres, izquierda es uno. Espero que eso ayude algo con esto. Sin embargo, para nuestros propósitos, vamos a estar usando algo un poco diferente. Entonces vamos a empezar con un margen de 20 píxeles. Déjame mostrarte lo que pasó ahí. Pone los 20 píxeles a cada lado, pero queremos que se centre. Entonces por nuestro valor izquierdo y derecho, en realidad vamos a decir auto. Y lo que eso significa es que la altura es de 20 píxeles, y luego los lados se dividen básicamente para ser automáticamente el mismo espacio. Lo que eso significa en la práctica es que si redimensionamos esto, el espacio de la izquierda y grandes cambios, pero los espacios son los mismos, ¿verdad? Entonces el espacio total cambia, pero estos lados son equivalentes. Lo que yo, lo que quiero decir que auto nos va a ayudar Centro que están bien. Y ahora pongamos esa propiedad de hover en ella. ¿De acuerdo? Entonces con éste, queremos hacerlo en nuestras pequeñas imágenes. Entonces lo que vamos a hacer es en realidad lo primero que queremos hacer es deshacernos de cualquier bala que pueda estar ahí. En realidad no puedes verlos por culpa del negro. Pero si esto, si todo era blanco, ahí vas. Si la página es blanca, se puede ver que hay viñetas, por lo que necesitamos deshacernos de esos. Entonces lo que vamos a hacer antes de agregar las pequeñas imágenes íntimas es que sólo vamos a decir para todos los elementos de la lista, queremos que el estilo de lista sea ninguno. Lo que significa que puedes dar estilo tus viñetas de diferentes maneras a tus viñetas de diferentes maneras y queremos que no haya estilo, así que simplemente no muestra nada. Ok. Ahora volvemos a nuestras pequeñas imágenes. Vamos a crear imagen pequeña. Colón, superior, derecha, igual que hicimos con el H1. Y cuando pasemos sobre él, para obtener ese efecto de burbuja, en realidad vamos a hacer algo que es bastante simple. Se pueden ver las imágenes apenas se hacen un poco más grandes. Y eso es porque todo lo que es es que está aumentando el ancho. Podemos cambiar el ancho a ser, vamos a hacer 110 pixeles, porque normalmente es sólo un 100. Y así se puede ver que es muy picante. Cuando resaltar sobre él cambia instantáneamente. Entonces lo que queremos hacer para que eso sea un poco más suave es otra transición. Y para éste sólo vamos a decir facilidad en y hacer 0.2 segundos. ¿De acuerdo? Entonces es un poco mejor. Pero parece que todavía hay algo, algún trabajo que tiene que suceder. Así que es suave cuando nos ratón sobre él, pero cuando lo arrancamos el ratón, es un poco demasiado ágil. No es muy suave. Por lo que queremos poner la facilidad fuera propiedad sobre las pequeñas imágenes. Está en la pequeña imagen en sí y no en el flotador. Te mostraré por qué. Entonces si fuéramos a ponerlo, poner transición sobre transformar, lo siento, transicionar y decimos Ease Out Tal vez 0.3 segundos. Lo que sucede es que se facilita cuando se resalta sobre él, pero luego cuando el ratón o se usa hacia fuera. Entonces, ¿por qué lo pusimos en la pequeña imagen y no flotar? Bueno, porque cuando pasamos el cursor, queremos que se facilite. Pero cuando es simplemente normal, como simplemente sin el flotador, queremos que se alivia. Ahora te darás cuenta cuando refresquemos la página, vamos a ver. Es un poco difícil de contar. Pero a veces las imágenes lo son. Ahí vas. Se puede ver que la imagen es hacer un poco aliviar efecto cuando se carga la página. Y eso es resultado de que pongamos esto aquí. Pero creo que es, creo que está bien. Ahora, hay dos propiedades más que voy a añadir en este video. El primero es que cuando pasamos el ratón sobre estas imágenes, queremos que parezca que podemos hacer clic en ellas. De acuerdo, entonces voy a poner mi cursor y decir puntero. De acuerdo, de esa manera parece que puedo hacer clic en ellos. Ahora una cosa más notarás, cuando el ancho de las imágenes se expanda, no están centradas juntas. Se puede ver todos los tops están alineados aquí, pero los fondos no están alineados. Para que podamos arreglarlo yendo a nuestra UL y agregando una propiedad llamada align items. Ahora, a diferencia de justificar, el contenido, justificar es una especie de alineación izquierda y derecha y alinear elementos. O cuando dices una línea, es una alineación vertical. Entonces cuando decimos centro aquí, se va a realinear todas las imágenes para que siempre estén centradas para que el centro de las imágenes esté siempre en línea entre sí. Y de esa manera no es demasiado grande en la parte inferior ni en la parte superior derecha. Hasta que podamos conseguir ese efecto burbuja. En el siguiente video, vamos a empezar a crear nuestra barra de navegación. Y así que eso va a ser realmente emocionante. Entonces te veré en la siguiente. 10. Crear un menú de navegación: Vale, hablemos de navegación. Esta es nuestra barra de navegación aquí arriba. Permítanme explicarte algunas de las características. Aquí tenemos una fuente diferente a la fuente predeterminada, aunque puede ser difícil decir que esta no es la fuente predeterminada. Por lo que hay que añadir eso. Vamos a conseguir eso de fuentes de Google. Tenemos que hacer un efecto de hover con los colores. Tenemos que hacer el margen, conseguir un poco de espaciado ahí. Vamos a usar algunos elementos de Flexbox con él y las cosas de UL, la lista desordenada, cosas que hicimos con las imágenes de aquí abajo. Y tenemos que hacer que realmente navegue a otras páginas. Así que empecemos. Lo primero que tenemos que hacer en nuestro código HTML es agregar un elemento nav. Ahora, la etiqueta nav realmente no hace tanto. Es más una separación en nuestro código para que la persona que crea el sitio web pueda diferenciar las diferentes partes. Es uno de esos estándares HTML extraños que es sólo una cosa. Pero lo vamos a utilizar aquí para asegurarnos de que podamos mantener las cosas en línea para que no nos confundamos acerca de dónde está la navegación. Y dentro aquí necesitamos otra lista desordenada. Y necesitamos elementos de lista, ¿verdad? Entonces tenemos las cuatro páginas. Queremos galería de casa sobre y contacto. Obviamente, puedes hacerlo como quieras. Pero esto es justo lo que vamos a hacer por éste. Entonces vamos a crear unas etiquetas para nuestros enlaces. Vamos a crear una etiqueta aquí. Y para la H ref, no vamos a poner nada bastante todavía. Te mostraré lo que vamos a hacer con eso en un segundo. Pero entre la etiqueta de apertura y cierre, vamos a poner a casa. Y ahora necesitamos copiar esto un par de veces para que podamos tener Galería y rebotar y contactos. Ahora si echas un vistazo a lo que esto ha creado, se puede ver que en realidad apareció aquí abajo. Vale, entonces eso es, eso es interesante, eso me muestra que nuestro código está probablemente en el orden equivocado, es decir, puedes ver nuestra etiqueta de imagen aquí está por encima de ellos. Por lo que tenemos que mover eso ahí abajo. Y yo ahorraré. Y bien, ahora está aquí arriba. Se puede ver que todo está perfectamente. Creo que eso significa que el enlace ha sido visitado. Entonces si ves un parpadeo sin estilo, a menudo está subrayado y cambia color dependiendo de si has hecho clic o no en él. Esa cosa de la cadera, queremos deshacernos de todo eso para que podamos hacerlo nuestra propia cosa única. Vale, ahora notarás algo muy interesante. Ya está espaciado. Básicamente cómo lo queremos. ¿Por qué es eso? Bueno, vamos a echar un vistazo a nuestro código. ¿ De acuerdo? Anteriormente, especificamos que si tenemos una lista desordenada, queremos que sea una flexbox. Queremos tener espacio entre. Contamos con un ancho específico, margen específico, y alineación de objetos. Y debido a que la navegación también es una lista desordenada, todo eso también aplica. No sólo eso, sino porque tenemos el LI aquí con el estilo de lista de ninguno, eso también aplica. Por lo que no tenemos que preocuparnos por deshacernos de los puntos de bala. Entonces la mitad de nuestro trabajo ya está hecho y no tuvimos que hacer nada extra, lo cual es bastante épico. Lo principal que tenemos que hacer es cambiar la fuente, deshacernos de los subrayados y hacer que los enlaces funcionen. Empecemos con esa fuente. Vamos a dirigirnos a Google Fonts. Y vamos a conseguir una fuente llamada densidad del bote de remos. Voy a buscar aquí por verdadero chocado alrededor de bote de remos. Sí, no sé que está en pero vamos a hacer clic en eso. Ok. Para que puedas ver, a diferencia del otro, aquí hay muchos estilos diferentes, muchos grosores diferentes. Y así tendríamos que decidir qué queremos porque no necesitamos nada elegante. Sólo vamos a ir con 400 regulares. Apenas el tipo de fuente básica estándar. Puede seleccionar múltiples bonos que le permitirán cambiar el peso de la fuente, o esencialmente la audacia en el CSS. Pero realmente no necesitamos eso. No estamos usando tantas palabras en la página. Por lo que vamos a seleccionar este estilo aquí y subir y ustedes son familias seleccionadas. Y ahora necesitamos incluir este enlace en nuestro código. Entonces vamos a seguir adelante y sumar. Ahora notarás algo interesante. Parte del código que conectó es paso donde tienes. Por lo que tenemos estas dos líneas para la fuente anterior que usamos, pero luego las volvió a incluir. Por lo que en realidad no necesitamos los duplicados y nos deshacemos de esos. Todo lo que necesitamos es este especial, disculpe, este especial que especifica Roboto. Está bien, eso es genial. Una o dos menos, menos líneas de código. Y ahora necesitamos copiar las reglas CSS o las propiedades que copiarán esto aquí. Y vamos a ver. Entonces la forma en que quiero hacer esto es creo que sería bueno tener una clase en cada uno de los elementos de la lista. Entonces lo que vamos a hacer es poner una clase de elemento nav. Voy a copiar eso. Cada uno de estos. Genial. Ahora vamos a ir a hacer un punto o periodo para nuestra clase y decir nav Item. Y copia esto de nuevo. Genial. Entonces déjame mostrarte lo que está pasando aquí. La familia de granjas que elegimos es Roboto. Pero tiene la segunda propiedad que es San Serif. Sans-serif es una fuente bastante básica. Y la razón por la que lo incluye es porque si no puede, por cualquier razón no puede conseguir roberto, por defecto manda a Sarah. Así que como si el sitio web de Google se estrellara y no pudiéramos encontrar la fuente, entonces no rompería todo. Se ve un poco más feo, pero omitiría esta respuesta. Entonces eso es lo que eso significa. Vamos a seguir adelante y pegaremos a Save. Y veamos los resultados. Vale, entonces la fuente, creo que eso es diferente. Vamos a probar eso. Voy a presionar Control Slash en mi teclado aquí y comenta esta línea para que no lo haga, no sea un efecto. Vale, sí, Así que hay una pequeña diferencia en las fuentes. Me gusta, pero vamos a hacerlo, vamos a tener eso. ¿De acuerdo? Y ahora lo que tenemos que hacer es deshacernos del morado y de los subrayados y todo. Entonces voy a añadir otro selector aquí abajo, y vamos a llamar a esto un gouache de colon. Por lo que esto se refiere, refiriéndose a la una etiqueta y de igual manera al hover que hicimos aquí arriba, esta es propiedad de la una etiqueta llamada link. Y podemos darle estilo a esto específicamente. Vamos a decir decoración de texto. Ninguno. Lo que significa que no lo subraya. Similar a cómo teníamos estilo list-none. Se deshicieron de los puntos de bala. Así es como se decora el texto. Por un enlace. No queremos que esté decorado en absoluto. Ponemos eso ahí. Ahora agregamos uno llamado colon visitado, lo que significa con esto es lo visitado, que significa que el enlace fue visitado previamente. Y por eso es morado. Y no queremos que haga nada. Así que de nuevo, vamos a decir decoración de texto. No. Eso no hizo nada. Ok. A lo mejor no se necesitaba esa propiedad. Pero voy a dejarlo ahí por si acaso. Pero lo que realmente puede cambiar esto es agregar un color de blanco. Bien, genial. Ahora, cuando visitamos el enlace, no funciona. No va púrpura, lo cual es genial. Sólo necesitamos que se ponga rojo cuando resaltemos sobre él. Entonces lo que podemos hacer por eso es crear nav, ítem colon hover. Ya hemos hecho esto antes y solo decimos color rojo. Y de nuevo, queremos hacer una agradable transición para que luzca suave. Así que pongamos transición. Y éste dirá facilidad dentro, fuera. Y rocío 0.2 segundos. Ahora si lo destacamos, es poco agradable. Bonitos efectos. Genial. Ok. Y así básicamente cubrimos todo. Cuando destacamos sobre el elemento nav. Tenemos el puntero. Creo que es un puntero por defecto porque es un enlace. Y luego se inclinó. Cuando pasamos el cursor sobre él, se lee. Todo lo que tenemos que hacer ahora además de que los enlaces funcionen es conseguir el espaciado correcto. Entonces voy a venir aquí mismo y a la derecha el tag nav, para que podamos estilo eso específicamente. Ahora te darás cuenta que sigo saltando alrededor este archivo y agrego cosas en diferentes lugares. El motivo es que me gusta estar organizado y puedo agrupar las cosas juntas. Para que puedas ver que todos los elementos relacionados con nav están juntos, todos los A están juntos. Y los ULs, a los aliados como todo, trabajan juntos. Grupo I lo agrupa juntos. Entonces eso es lo que estoy haciendo. De acuerdo, Así que en realidad el debo mencionar que no importa dónde en el expediente coloques esto. Siempre va a funcionar. Para que pudiera cortar esto y ponerlo aquí abajo. Y no marcaría la diferencia, ¿verdad? Simplemente importa que esté en este expediente. Entonces lo último que tenemos que hacer aquí es el margen. ¿ De acuerdo? Así que voy a poner margen. Ahora el espaciado en la parte superior ya se ve bastante bien. Así que vamos con 0 por la cima. Ahora a la izquierda y a la derecha, realmente no necesitamos cambiar nada porque ya tenemos ese bonito margen. Entonces, whoops. Probemos otro 0. Entonces para el fondo, bueno, para la parte inferior, solo haremos diez pixeles. Y luego otra vez, oh sí, sí. Por lo que este será el top 0, izquierda 0, inferior diez píxeles. ¿ De acuerdo? Entonces verás que se ve bien ahora porque tenemos ceros aquí y solo estamos usando el fondo, en realidad hay una propiedad diferente que podemos usar. Y se llama margen, fondo y todo lo que podemos decir sólo diez píxeles. Entonces en realidad no necesitamos tener todo esto aquí. Así que voy a decir en margen inferior diez píxeles. Y veamos cómo viene. Veamos qué tan similar se ve a nuestro otro sitio web. De acuerdo, se puede ver que son idénticos. Lo único que queda es la funcionalidad. Entonces empecemos a hacer esos enlaces. ¿ De acuerdo? Por lo que tenemos nuestros elementos H ref aquí. Tenemos que vincularlo a algo. Anteriormente, hablamos de vincularlo a un sitio web, pero necesitamos vincularlo a un archivo que tenemos en nuestra carpeta con nosotros. Por lo que en realidad vamos a crear otra página llamada galería dot HTML. Esta es la página de galería que solo muestra las otras cuatro imágenes. Y la razón por la que tengo esa página es sólo para demostrar los enlaces a, discúlpeme para darle estilo a esta. En realidad vamos a simplemente presionar Control a y copiar todo sobre él y simplemente deshacernos de lo que no necesitamos. De esa manera no tenemos que reescribir la mayoría de las cosas. ¿ De acuerdo? Entonces veamos aquí, podemos deshacernos de la principal. Bueno, vamos a deshacernos de todo esto por ahora y simplemente dejar la cima. De esa manera las fuentes y todo todavía funcionan. ¿ De acuerdo? Ahora, lo que queremos hacer aquí es vamos a ver, queremos hacer una imagen principal, es decir, esta es la imagen principal. Y en la página de la galería, queremos mostrarla así una y otra vez. Entonces vamos a usar la imagen principal como clase aquí. Y así hagamos eso. Crearemos una etiqueta de imagen. Y sólo vamos a decir que la fuente es imagen uno. Y entonces voy a copiar esto. Cambiemos esto a tres a cuatro. Ahora, tenemos que darle una clase de imagen principal. Aquí está el problema. Ya usamos. Imagen principal por aquí como ID. Así que en realidad sólo cambiemos esto a una clase. Y luego en nuestro archivo CSS, encontraremos imagen principal. Y en lugar de tener un signo de libra pondrá un periodo. Y ahora es una clase. Así que veamos, todo se rompe, está bien, está bien, está bien. De acuerdo, entonces ahora vamos a añadir esa clase de imagen. Y voy a copiar y pegar eso a cada uno. De acuerdo, ahora no podemos ver cómo se ve la página todavía porque no tenemos forma de llegar a ella. Entonces en nuestro index.html en la galería H ref, vamos a simplemente poner galería dot HTML. Es tan simple como eso. Golpeamos a Save. Puedo seguir adelante y dar click aquí ahora. Y me lleva a la página de la galería. Ahora se puede ver que no es exactamente como queremos. Necesitamos algo de espacio entre las cosas y todavía necesitamos la barra de navegación en la parte superior. Vale, esto es lo que vamos a hacer. Te voy a mostrar cómo crear estilos en línea. Entonces un estilo en línea es cuando incluimos CSS directamente en el archivo HTML. En lugar de crear un archivo externo como lo hicimos aquí. El motivo por el que tal vez quieras hacer esto es si solo tienes una o dos cosas que necesitan estilo y no un montón. Por lo general, no recomiendo usar estilos en línea. Si tienes muchos estilos que están pasando, simplemente abarrota el archivo HTML. Pero aquí puede ser útil. Entonces dentro de la etiqueta body, voy a crear una etiqueta de estilo. Cualquier cosa dentro de la etiqueta de estilo se trata como CSS. Entonces vamos a decir IMG por imagen porque queremos poner espaciado entre todas estas imágenes. Sólo voy a poner un margen inferior 50 pixeles. De esa manera hay un poco de espacio debajo de cada uno. Bien, eso nos da ese bonito y bonito efecto, ¿verdad? Entonces así es como se hace un estilo en línea. Ahora lo que tenemos que hacer es terminar nuestra barra de navegación. Por lo que sólo vamos a hacer enlaces a dos de las páginas. inicio adicional. Lo vamos a enlazar con index.html. Para que no importa en qué página estés, si haces clic en Inicio, te lleva a esa página principal. Ahora en estos, ya que no estamos poniendo nada, sólo vamos a poner un signo de libra. Y eso es una especie de marcapasos. Si haces clic en esos botones, realidad solo te redirigirá al index.html. Entonces ahora que tenemos esto, vamos a copiarlo y pegarlo en nuestra galería bajo el Explorador. Vale, y ahora tenemos nuestra barra de navegación. Ahora, puede que noten que tenemos dos problemas aquí donde estos tipos no están haciendo lo que se supone que deben. Son azules cuando deben ser blancos. Entonces veamos qué podemos hacer para arreglarlo. Voy a ir a nuestro elemento de navegación aquí en nuestro CSS y decirle que siempre sea blanco. Así que sólo le voy a dar un color de blanco. Entonces por defecto, siempre es blanco, no importa si lo hicimos clic o no. Pero eso debería solucionar ese problema. Ahora lo último que quiero hacer la navegación sabia es hacerlo para que podamos hacer click en este icono de explore y que vaya a la página de inicio. En este momento, es sólo un 81. Y así tenemos que hacer un poco de modificación. Para ello, vamos a poner el H1 dentro de una etiqueta. Así que vamos a seguir adelante y crear eso una etiqueta. Y queremos el H ref al index.html. Entonces esa es nuestra página de inicio. Ahora sólo podemos cortar este texto y pegarlo dentro de nuestra una etiqueta. Puedes anidar etiquetas como esta, y solo tendremos nuestro H1 dentro de la etiqueta a. Ahora, si hacemos clic en él, nos lleva a la página de inicio. Entonces si vamos a la galería, en realidad necesitaremos copiar esto y pegarlo en nuestra galería también. Ahora si hago clic en esto, nos lleva de vuelta a nuestra página de inicio. ¿De acuerdo? Ahora se puede ver que estamos tan cerca de que se haga. Los sitios web parecen idénticos. Creo que no hay diferencias estilísticamente entre los dos lados. Lo único que tenemos que hacer es agregar algo de JavaScript para que sea interactivo para que al hacer clic en estas imágenes, esta parte del sitio cambie. Y lo haremos en el siguiente video. 11. ¡Cómo Interactive Su Presentación De Diapositivas! (JavaScript): Para terminar, solo vamos a añadir algo de JavaScript para hacerlo para que al hacer clic en estas imágenes, cambie lo que se muestra como la imagen principal. No vamos a usar mucho JavaScript. Por lo que definitivamente este no es un curso integral sobre JavaScript. Este fue un curso enfocado principalmente en HTML y CSS. Pero te voy a mostrar un poco de JavaScript para que esto funcione. Entonces en nuestro código en VS, necesitamos crear un nuevo archivo. Y lo vamos a llamar app. En realidad, no, lo siento, no aplicación. Lo vamos a llamar diapositivas. Dot js. Json significa JavaScript. Entonces si recuerdas, JavaScript es el lenguaje que hace que las cosas sean interactivas. Ahora, para poder utilizar nuestro JavaScript, necesitamos insertar una etiqueta de script en nuestro HTML. En realidad lo haremos debajo del elemento body, pero aún dentro del elemento HTML. Entonces diremos guión. Y puedes bajar a la fuente. Y diremos slideshow dot js, y eso es todo lo que tienes que incluir aquí. Ahora, ¿por qué debajo de la etiqueta del cuerpo? Es porque cuando todo, bueno, cuando cargamos el sitio web, necesitamos cargar todo el HTML y cargar el script en última instancia. De esa manera, todo funciona en conjunto correctamente. Realmente no sería un problema en este sitio web. No creo que si tuviéramos la etiqueta de guión antes, pero en muchos casos sí quieres que quede justo debajo de la etiqueta body. Entonces tenemos eso ahí dentro. Ahora. Déjame mostrarte los fundamentos de JavaScript. No te mostraré mucho lo suficiente para descubrir cómo hacer que esto funcione. Javascript es Uno de un lenguaje de programación real. Html y CSS a menudo son considerados lenguajes no programáticos por las personas porque no tienen muchas de las mismas características que la mayoría de los lenguajes. Me gusta llamarlos lenguajes de programación porque me hace sentir mejor y creo que son geniales. Pero JavaScript es más un lenguaje de programación tradicional, lo que significa que podemos crear variables. Una variable es sólo un poco, se puede pensar en ella como una caja. Y podemos decir, vamos a dar esta caja y nombre y vamos a poner cosas dentro de ella. Y luego, cuando estamos en una parte diferente de nuestro programa, podemos decir, Oh, ve a buscar esa caja que tenía este nombre en ella que tenía algo escrito en el lateral. Vamos a buscarlo y obtenemos lo que hay dentro de ella. Entonces espero que eso tenga sentido. Te mostraré cómo funciona un poco eso. Para hacer una variable en JavaScript, necesitamos usar la palabra clave let. Deja que solo indica que estás creando una nueva variable. Entonces le damos un nombre. Lo que queremos hacer esencialmente es que queremos crear una variable que contenga esta imagen principal. Y luego vamos a cambiar cuál es la fuente de las imágenes para que lo cambiemos a las otras imágenes. Vamos a llamar a esta imagen principal. Ahora la razón por la que hice DM minúsculas y el capital ocular es porque esto es lo que llamamos CamelCase. Es un estándar en muchos programadores, donde si tienes varias palabras en un nombre de variable, la primera letra es minúscula, y todas las demás palabras están en mayúscula en la primera letra. Entonces si dijera imagen principal, genial, capitalizaríamos eso. Ahora voy a ponerlo igual a algo. Esta es la parte donde ponemos algo en la caja. Tenemos que poner la imagen en la caja. De acuerdo, la forma en que lo hacemos en HTML es que vamos a llamar al objeto del documento. El documento simplemente significa que es un archivo HTML. Entonces vamos a decir documento. Vamos a acceder a una parte del documento. Entonces la forma en que hacemos eso en JavaScript es poniendo un punto. Y ahora vamos a, una de las propiedades que tiene el documento es que tiene la capacidad de ir a conseguir un elemento basado en la información, darle, darle. Entonces vamos a decir documento dot, obtener elemento por ID. Eso es un inglés lo suficientemente normal como para obtener elemento por ID. Lo que significa es que le vamos a dar una identificación y va a ir a conseguir el elemento que coincida con ese ID. ¿De acuerdo? Ahora, si lo recuerdas antes, cambiamos la imagen principal a una clase. Entonces para que esto funcione, en realidad vamos a agregar un ID. Para que puedas tener múltiples clases e identificaciones para una imagen o un objeto. Entonces le vamos a dar una identificación especial sólo para que no entre en conflicto con la clase de imagen principal. Y así para esta idea, solo vamos a decir la imagen principal dash JS. Eso sólo nos va a indicar que esto es para el propósito del JavaScript. Por eso necesitamos esta identificación Así que tenemos esta idea. Voy a copiar esto aquí. Y en nuestro código dijimos obtener elemento por ID. Ahora entre paréntesis, vamos a poner cotizaciones simples y el nombre de la id, luego poner un punto y coma al final. Entonces lo que esto dice es, dice que tenemos una caja y se llama imagen principal. Ahora tenemos que poner algo dentro de la caja. Entonces vamos a ir al documento, que es sólo el HTML. Y vamos a decir, Hey, HTML, necesito conseguir el elemento que tiene un ID de la imagen principal js. Y los HTML sí, está bien. El id image main js se aplica a esta imagen específica indicando la imagen principal en la página. Éste. ¿ De acuerdo? Y así dijimos, está bien, tenemos esa imagen ahora cuando la jugamos en bloques. Entonces espero, espero que eso tenga sentido. Tenemos la imagen y está dentro de nuestra caja. ¿ Ahora qué? Ahora vamos a crear lo que se llama función. Una función es algo que se puede llamar una y otra vez cuando haces algo. En este caso, cada vez que hacemos clic en una de las imágenes, vamos a tratarla como un botón. Y vamos a llamar a esta función. Y lo que va a hacer es que dice, oh, has hecho clic en esta imagen. Bueno, hagamos que esa imagen se convierta en la principal que mostramos. Para ello, escribimos función y le damos un nombre a la función. Por lo que sólo diremos cambiar imagen. Ok. Ahora después de cambiar imagen, vamos a poner estos paréntesis. Esa es sólo la sintaxis de una función. Sintaxis que significa justo la forma en que lo escribes. Y luego vamos a poner los corchetes rizados. Entonces así es como se ve una función en JavaScript. Así que vamos a poner desde el interior de ella. Lo que tenemos que hacer es que necesitamos conseguir la imagen principal que ahora hemos guardado como variable. Entonces dijimos: Vale, ve por esa caja. Y vamos a hacer algo con lo que hay dentro de la caja. Y lo hacemos presionando periodo, igual que lo hicimos con get element by ID. Por lo que decimos imagen principal. Ahora vamos a decir set atributo a algo. Si recuerdas, un atributo en HTML, es que hay estas cosas como clase H, ref, ID, Alt, todas esas cosas que caben dentro de las etiquetas de apertura y tienen algunas propiedades Eso se llama un atributo. Por lo que queremos establecer el atributo fuente, la imagen principal aquí mismo. Queremos establecer el atributo source para que sea el mismo que la imagen en la que hicimos clic. ¿ De acuerdo? ¿ Cómo hacemos eso? Bueno, dentro de establecer un atributo, podemos poner dos cosas. Uno, tenemos que poner el atributo que queremos establecer. Aunque entre cotizaciones, vamos a poner SRC para fuente. Y después de eso, ponemos una coma. Y ahora tenemos que poner la nueva imagen, pero aún no tenemos forma de conseguirla. Entonces vamos a averiguarlo. En nuestro index.html, necesitamos encontrar alguna manera para que cuando hacemos clic en una imagen, llame a la función y le diga cuál es esa imagen fuente. Entonces vamos a agregar un nuevo atributos y esto se relaciona con JavaScript. Esto se llama onClick. Entonces es bastante simple. Cuando haces clic en algo, lo hace, ejecuta una función. Decimos onclick. Necesitamos ejecutar la función Cambiar imagen. Ahora, algo genial que podemos hacer en JavaScript es cuando llamamos a una función, podemos pasarle un argumento, es decir que podemos decir, aquí, voy a cambiar la imagen, y aquí está la imagen que quiero para cambiar. Le damos algo más, algo con lo que trabajar. Entonces vamos a darle algo con lo que trabajar. Entonces dentro de cambio de imagen, vamos a poner cotizaciones y vamos a decir Image one dot JPEG. Entonces, cuando decimos cambiar la imagen, vamos a decir, Ok, esto es lo que vamos a darte. Te vamos a dar image1 dot jpeg. Eso va a ser lo que usa la función. Por lo que voy a copiar esto a cada uno de estos elementos de la lista. Y vamos a cambiar éste a, para cambiar éste a tres. Y éste también. Entonces cada vez que decimos hacemos clic en la imagen tres, dice, Ok, cambia la ejecución la función de cambio de imagen. Y le vamos a dar imagen de tres puntos JPG para trabajar. Entonces ahora, ¿cómo implementamos eso en el propio JavaScript? Entonces lo que podemos hacer es dentro de la función Cambiar imagen en estos paréntesis, sólo podemos darle un nombre a una variable. Entonces sólo vamos a decir imagen. Esto significa esencialmente que vamos a pasar a la función algo y vamos a llamar a esa imagen. Entonces no es como una variable normal como estas. Es más como que podemos llamar a la función y darle lo que queramos. Y sólo va a llamar a esa cosa una imagen. Ahora podemos meter esa imagen aquí y asegurarnos de que consigas eso, ese punto y coma. Entonces lo que esto hizo es decir, bien, bueno si estamos eligiendo Imagen tres, entonces decimos, vale, Cambiar Imagen y darle esta cadena de texto, imagen tres puntos JPG. Y dice, está bien, esa cadena de texto, vamos a llamar a esa imagen. Y ahora cuando llamemos set atributo, vamos a pegar esa cadena de texto ahí, reemplazar imagen con esa cadena de texto. Lo que hace es establecer este atributo fuente igual a esa cadena de texto. Y eso es todo lo que tenemos que hacer para seguir adelante y golpear Save. Ahora si vamos a la página web, donde sea que esté, verás que cada vez que hacemos clic en una imagen, cambia qué imagen hay ahí. Porque dice conseguir la imagen, lo siento, dice hacer una caja llamada imagen principal. Ve a buscar el elemento que tiene la imagen principal dot js, que es este panorama grande. Y dice, está bien, cada vez que hacemos clic en una pequeña imagen, luego cambiamos la imagen grande, establecemos su atributo de fuente para que sea la nueva fuente de imagen. Entonces si hacemos clic en la imagen para, envía la imagen a la fuente de la imagen a la imagen. Eso es todo el JavaScript que vamos a utilizar en este curso. Como dije, no vamos a meternos en la complejidad de hacer una presentación automática de tiempo en este curso. Pero eso definitivamente es algo que usted sería capaz de encontrar en línea. Y así este es el producto terminado. Ahora, en el siguiente video vamos a hablar sobre el proyecto de clase y una especie de envolver las cosas. Te veré en esa. 12. Proyecto final y conclusión: Antes de terminar este curso, quiero que hagas una última cosa para tu proyecto final. Quiero que utilices las habilidades que has aprendido en esta clase para crear algo propio. Por qué crear algo, tal vez un sitio web de cartera o algo para su negocio, o simplemente algo por diversión. No tiene por qué ser complicado. Puede ser muy simple, pero puede ser tuyo. Puedes crearlo desde cero con las habilidades que aprendiste en este curso. Una forma en la que me gusta acercarme a divertidos proyectos creativos divertidos proyectos creativos propios es que escribo lo que quiero crear. O lo dibujaré en una pizarra o en un trozo de papel. Sólo voy a pensar un poco cómo quiero que se vea el sitio web. Entonces encuentro, averigua qué habilidades necesito aprender para que se vea así. Así que iré a aprender qué etiquetas HTML necesitaré, qué CSS necesitaré para darle estilo correctamente de la manera que quiero. Y luego iré a aprender qué JavaScript necesito para obtener la funcionalidad que quería. Y así recomendaría hacer eso. Usa los recursos que he vinculado en la descripción del curso para aprender más HTML, CSS y JavaScript. Ahora, tengo dos cosas más para ti. Entonces si te gustó este curso, por favor ve a ver mis otras clases de Skillshare a partir de ahora mismo, tengo otras dos. Uno está en la manipulación DOM de JavaScript, que es esencialmente lo que hicimos en este curso. Un poco donde manipulas el HTML y el CSS con JavaScript, es una habilidad muy útil. El segundo curso es aprender Angular, que es un framework JavaScript. Un framework es básicamente una versión ampliada de JavaScript que te da más características, más funcionalidad, y facilita las cosas complicadas. Por lo que te recomendaría encarecidamente que vayas a echar un vistazo a esos si quieres hacer que tu sitio web sea más expresivo, más dinámico, son realmente grandes habilidades para tener. Lo segundo es que si quieres ver más tutoriales de tecnología de forma gratuita, si quieres aprender más sobre programación gratis, ve a ver mi canal de YouTube en youtube.com slash Taylor English. Ahí puedes ver una gran cantidad de videos que he planteado para todo tipo de preguntas que puedas tener o cosas que te puedan interesar aprender. ¿ De acuerdo? Ahora aparte de eso, si te interesa la música por cualquier motivo, puedes ir a echarme un vistazo en Spotify. Voy a enlazar eso hacia abajo en la descripción del curso también. Hago solos de piano y espero hacer más piano y tal vez música techno en el futuro. Entonces si quieres ir a ver eso, Eso es impresionante. Pero solo quería darte las gracias por ver este curso hasta el final y por aprender estas increíbles habilidades. Porque sé que lo que has aprendido realmente va a bendecir tu vida y las vidas de los que ayudas. Así que gracias por tomar este curso y espero volver a verte pronto. Te deseo lo mejor.