Crea tu primer sitio web con HTML, CSS y JavaScript | Danny Connell | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Crea tu primer sitio web con HTML, CSS y JavaScript

teacher avatar Danny Connell, Teacher & Indie App Developer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      ¡Hola!

      1:13

    • 2.

      Instalar y configurar VSCode

      1:40

    • 3.

      Crear página y lanzamiento

      2:46

    • 4.

      ¿Qué es HTML?

      2:26

    • 5.

      Cabeza (HTML)

      1:17

    • 6.

      Etiquetas y elementos corporales (HTML)

      3:46

    • 7.

      Elementos semánticos y estructurales (HTML)

      1:26

    • 8.

      Encabezado (HTML)

      4:08

    • 9.

      Producto (HTML)

      6:29

    • 10.

      Pie de página (HTML)

      0:44

    • 11.

      ¿Qué es CSS?

      0:43

    • 12.

      Estilos básicos y fuentes

      7:44

    • 13.

      Cabecera - color de fondo (CSS)

      2:49

    • 14.

      Encabezado - Posicionamiento de logotipo y marrón (CSS)

      1:15

    • 15.

      encabezado - estilos de texto

      1:43

    • 16.

      Cabecera - efectos y animación

      1:44

    • 17.

      Cabecera - estilos marinos

      1:07

    • 18.

      Encabezado - margen y relleno

      3:45

    • 19.

      Encabezado - restringir el contenido

      3:37

    • 20.

      Encabezado - Añadir un logotipo

      3:42

    • 21.

      Producto - texto y imagen lado a lado (CSS)

      3:12

    • 22.

      Producto - borde, acolchado y colocación (CSS)

      2:38

    • 23.

      Producto - estilos de texto (CSS)

      3:06

    • 24.

      Botones (CSS)

      5:30

    • 25.

      Añade más productos (HTML y CSSS)

      4:22

    • 26.

      Pie (CSS)

      1:45

    • 27.

      Mover CSS a un archivo separado

      2:34

    • 28.

      ¿Qué es JavaScript?

      1:07

    • 29.

      Agregar etiqueta de comandos (JS)

      0:46

    • 30.

      Esperar hasta la página

      2:16

    • 31.

      Banner de galletas - HTML

      1:16

    • 32.

      Bandera de galletas

      5:11

    • 33.

      Ocultar bandera de galletas con CSS

      1:18

    • 34.

      Crea una clase para mostrar banners

      1:59

    • 35.

      Ponga bandera en una variable de JavaScript

      3:11

    • 36.

      Muestra banners de galletas después de 2 segundos

      3:29

    • 37.

      Cómo mejorar nuestra lógica en funciones

      1:38

    • 38.

      Cómo colocar un botón en una variable de JavaScript

      1:44

    • 39.

      Ocultar banner de galletas en un clic (JS)

      3:47

    • 40.

      Mover JS a un archivo separado

      1:41

    • 41.

      CSS receptivo (CSS)

      1:33

    • 42.

      Consultas de medios explicadas

      2:17

    • 43.

      Cómo agregar una consulta multimedia y estilos móviles

      4:31

    • 44.

      Agregar sobre página (HTML y CSSS)

      3:24

    • 45.

      Agregar un tipo de documento (HTML)

      1:27

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

309

Estudiantes

9

Proyectos

Acerca de esta clase

En esta clase para principiantes absolutos, aprenderás cómo comenzar con HTML, CSS y JavaScript creando un sitio web sencillo y receptivo de productos.

No te preocupes si no tienes experiencia en el desarrollo web, porque en esta clase empezarás desde un principio.

  • Primero instalarás y configurarás el editor de texto que vas a usar: el código de Visual Studio increíble (y gratuito).
  • Luego aprenderás los conceptos básicos de HTML y crearás tu primera página HTML: agregando encabezados, párrafos, listas, enlaces e imágenes.
  • A continuación aprenderás los conceptos básicos de CSS y luego usarás CSS para que tu página web se vea hermosa. Incluso usarás CSS para que tu página web sea receptiva, lo que significa que se adaptará para tener un aspecto genial en dispositivos de escritorio, tableta y móviles.
  • Terminarás aprendiendo los conceptos básicos de JavaScript, y usando JavaScript para hacer que un banner de cookies animado aparezca en la parte inferior de la página y luego hacerlo desaparecer cuando se hace clic en el botón Cerrar

Esta clase corta te enseñará rápidamente los conceptos básicos de HTML, CSS y diseño sensible.

No es necesario experiencia. Todo lo que necesitas es un ordenador con Windows o Mac y una sed de aprender.

Conoce a tu profesor(a)

Teacher Profile Image

Danny Connell

Teacher & Indie App Developer

Profesor(a)

I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.

After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.

I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 1.5 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.

I have a young but successful YouTube channel where I also share coding tutorials.

I'm super excited to ... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. ¡Hola!: En este curso para principiantes absolutos, te voy a mostrar cómo empezar con HTML, CSS, y JavaScript creando esta sencilla, hermosa y receptiva página de producto, sitio web. No te preocupes si no tienes experiencia con el desarrollo web, porque vamos a pasar por absolutamente todo paso. Entonces vamos a empezar instalando el editor de texto que vamos a estar usando para crear nuestro sitio web, que es VS Code, que se ve aquí a la izquierda. Y luego sólo vamos a trabajar en HTML. Vamos a crear esta página web con sólo usar HTML. Y en este punto se va a ver algo así. No muy bonita. Y luego vamos a pasar a CSS. Vamos a usar la magia del CSS y a transformar esta página en algo así. También vamos a usar CSS para que sea sensible para que el diseño cambie en el móvil. Por lo que esta página web se ve bien para cualquiera que esté viendo get independientemente de su dispositivo. Una vez que hayamos terminado con CSS, vamos a pasar a JavaScript, y sólo vamos a añadir un poco de JavaScript para que este banner de cookies aparezca después de unos dos segundos y que desaparezca cuando el usuario haga clic en este botón de cierre. Y luego al final vamos a agregar algunos toques finales, como agregar una segunda página. Esto Acerca de la página que ves aquí. 2. Instalación y configuración de VSCode: Empecemos instalando el editor de texto que vamos a utilizar para crear este sitio web, que es Visual Studio Code o código VS, como se conoce en general. Por lo que solo quieres ir a Google y buscar VS Code. Y quieres saltar a este código punto web de Visual Studio.com. Y quieres descargar esto para tu plataforma e instalarlo. De acuerdo, entonces se terminó de descargar el zip. Entonces sólo voy a abrir eso en un simulacro. Solo necesito arrastrar esto a mi carpeta de aplicaciones. O si estás en Windows y es posible que necesites ejecutar realmente un instalador. Bueno, solo voy a arrastrar este código de Visual Studio hacia arriba a mi carpeta de aplicaciones. Ahora debería poder lanzar esto. Entonces sólo voy a ir a Aplicaciones. Inicia Visual Studio Code, click en Abrir y deberías ver algo como esto. Ahora con VS Code, podemos instalar extensiones que nos ayuden con nuestro desarrollo. Hay una extensión que vamos a necesitar en este video, que es la extensión Live Server, que nos ayudará a lanzar nuestro sitio web en el navegador y también a ver cualquier cambio que realicemos en nuestro sitio web en tiempo real. Por lo que solo quieres dar click en este botón de extensiones sobre a la izquierda aquí. O si no ves eso, entonces puedes ir a Ver extensiones. Simplemente voy a dar clic en este botón. Y quieres buscar Live Server. Oye, contesta el primer punto de los comunistas. Y solo quieres dar click en este botón Instalar. Y eso ahora está instalado. Y si te pide que reinicies VS Code, entonces simplemente cierra que se reinician de nuevo. 3. Crea página y lanzamiento en Browser: De acuerdo, leí que está instalado en sets up, así que vamos a crear nuestra primera página HTML. Por lo que vamos a necesitar algún lugar para almacenar este sitio web. Entonces vamos a necesitar una carpeta. Entonces voy a crear una carpeta en mi escritorio. Y puedes crear una carpeta donde quieras. No necesita estar en el escritorio o lo voy a crear en el escritorio. Y lo voy a nombrar HTML, CSS, JavaScript, dash basic. Y no necesitas usar ese nombre. Puedes usar cualquier nombre que quieras. Y ahora solo queremos arrastrar esta carpeta al código VS. Así que solo voy a volver a subir el código VS y luego arrastrar esta carpeta a ella. Y ahora está abierto ahora pliegue virus. Y este cabello es donde se verán todos nuestros archivos. Entonces vamos a crear nuestro primer archivo HTML. Por lo que solo quieres hacer clic derecho en este espacio aquí. Por cierto, si no ves este panel de explorador y solo tienes que ir a View Explorer y debería mostrarlo por ti. Queremos hacer clic derecho y dar clic en Nuevo archivo. Y vamos a llamar a este archivo index.html. Y este nombre de archivo no necesita terminar con HTML dot porque eso le dice al navegador que se trata de un archivo HTML. Y te recomendaría que uses el nombre index.html porque cuando visites un sitio web como co dot Visual Studio.com slash, entonces la primera página web que va a buscar, index.html, ok, así podemos ver que ya está abierta este archivo bosque index.html. Podemos verlo aquí. Podemos ver index.html en este top. Simplemente voy a cerrar esta pestaña de bienvenida. Nuestro Código VS hace que sea realmente fácil para nosotros andamiar página HTML inicial y agregar todas las etiquetas básicas que necesitamos. Por lo que solo quieres escribir Doc y deberías ver esta abreviatura Emmet pop-up en ADA es una extensión que está incorporada en VS Code, que nos ayuda a escribir HTML y CSS más rápidamente. Bueno, una vez que veas ese pequeño popup acaba de golpear Enter. Se andamiará una página HTML inicial seguidores. Te explicaré qué pasa aquí en un minuto. Pero por ahora solo queremos guardar esto yendo a Archivo Guardar, o puedes usar el atajo de teclado que ves aquí. Entonces solo voy a usar ese atajo de teclado para guardar esto. Y ahora lanzemos esta página web usando la extensión Live Server que habíamos instalado antes. Para ello, solo quieres ir a la paleta de comandos Ver. O puedes usar este atajo de teclado que ves aquí. Y esto lanzará la paleta de comandos donde podremos lanzar todos los comandos disponibles dentro del código VS, incluyendo cualquier comando de cualquier extensión que hayamos instalado. Y solo quieres buscar la vida. Y puedes ver esta opción aquí abierta con servidor en vivo. Entonces solo voy a dar clic en eso y ahora se ha abierto nuestra página HTML en el navegador. No vemos nada en la página. Te explicaré por qué eso es en un poquito. 4. ¿Qué es HTML?: Bueno, en primer lugar, ¿qué es HTML? Html significa Lenguaje de marcado de hipertexto. Html no es un lenguaje de programación como JavaScript, por lo que no podemos usar lógica en HTML como si esto es cierto, entonces haz esto, o si esta otra cosa es cierta, entonces haz eso es puramente un lenguaje de presentación que dice el navegador qué elementos deben mostrarse en la página. Y por elementos, me refiero a cosas como encabezamientos, párrafos, tablas, imágenes, listas, todavía vuelan ese HTML tampoco le dice al navegador cómo deben verse estos elementos. Eso es lo que CSS es caída, al que llegaremos más adelante al final de esta sección HTML del video, nuestra página web va a verse algo así. Y se puede decir, es bastante feo. Entonces todo lo que el HTML está haciendo es decirle al navegador qué elementos deben estar en la página, como estos encabezados en este párrafo, en esta imagen. Pero no le dice al navegador cómo deben verse estos elementos. Simplemente los escupe en la página usando el estilo predeterminado del navegador para estos elementos. Por lo que HTML se compone de etiquetas, y ya podemos ver algunas etiquetas en la página aquí. Yo sólo voy a hacer esto un poco más pequeño. Y de hecho, sólo voy a ocultar esta barra lateral. Por lo que solo tienes que ir a Ver apariencia, hacer clic en Mostrar barra lateral, o usar el atajo de teclado. Entonces ocultará la barra lateral para que tengamos más espacio. Por lo que la mayoría de las etiquetas están conformadas por una palmadita de una etiqueta de apertura y una etiqueta de cierre como esta etiqueta de título que podemos ver aquí. Por lo que la etiqueta de apertura sólo se compone de un corchete de ángulo izquierdo, luego el nombre de la etiqueta que un corchete de ángulo recto. Y luego la etiqueta de cierre se compone de corchete de ángulo izquierdo y luego barra inclinada hacia adelante, luego el nombre de la etiqueta, y luego un corchete de ángulo recto de cierre. También contamos con etiquetas de autocierre, como este metatag que puedes ver aquí. Se puede ver que esta etiqueta no tiene etiqueta de cierre. Simplemente te explicaré cuáles son estas etiquetas. Y solo para que quede un poco más claro lo que está pasando, solo voy a colocar mi cursor después de esta etiqueta de cuerpo de cierre aquí. Haga clic con el botón izquierdo del ratón y arrastre hasta el inicio de esta etiqueta de cabeza, presione Tab para sangrar eso. Por lo que esta etiqueta HTML básicamente solo le dice al navegador que esta es una página HTML. Podemos ver la etiqueta de cierre para esa duda, Hey, en esta etiqueta HTML necesita ser la etiqueta raíz en nuestra página. Todas las demás etiquetas deben entrar dentro de estas dos etiquetas. 5. Cabeza (HTML): Esta etiqueta de cabeza es para agregar etiquetas que dan al navegador información sobre nuestra página. Por ejemplo, esta etiqueta de título le dice al navegador qué título debe mostrarse en la parte superior del navegador aquí. Para que puedas ver dentro de esta etiqueta de título, podemos ver el documento de Word, y eso es lo que vemos aquí en este documento de pestaña. Y así si cambiamos este texto dentro de esta etiqueta a, digamos naranja, y lo guardamos, podemos verlo cambiar a naranja en el navegador. No obstante, las etiquetas que están dentro de esta etiqueta de cabeza y que no se muestran en la página, sólo dan al navegador información como el título de la página. Este metatag aquí, solo le dice al navegador qué juego de caracteres usar, y realmente no necesitamos preocuparnos demasiado por eso. Este otro metatag básicamente está diciéndole al navegador cómo renderizar esta página en el navegador. Y no tenemos que preocuparnos demasiado por esto. Pero esto básicamente es simplemente decirle al navegador que establezca el ancho de nuestra página al ancho del dispositivo, y también que no acerque o aleje la página. Basta con establecer el zoom inicial o la escala inicial en uno. También podemos añadir otras etiquetas Meta aquí, como un metatag para proporcionar una descripción de nuestra página web para motores de búsqueda. O un metatag para proporcionar una lista de palabras clave para motores de búsqueda también. 6. Etiquetas y elementos del cuerpo (HTML): Bueno, si queremos crear una etiqueta o un elemento que realmente aparezca en la página, entonces necesitamos ponerla dentro de las etiquetas del cuerpo. Por lo que todos los elementos que realmente decimos en la página irán dentro de estas etiquetas de cuerpo. Por lo que voy a cubrir rápidamente algunas de las etiquetas que no podemos escuchar. Por lo que el primer tipo de etiquetas en las que podemos agregar nuestras etiquetas de encabezamiento, el encabezamiento más importante es la etiqueta H1. Entonces si solo tuviéramos un soporte de ángulo izquierdo y luego uno y luego un soporte de ángulo recto de cierre. Y se puede ver que automáticamente se agrega la etiqueta de cierre, pero si tiene una auditoría que entonces simplemente escriba esto. Así soporte de ángulo izquierdo, barra inclinada hacia adelante uno, soporte de ángulo recto. Y así podemos jugar algún texto de encabezamiento dentro de esta etiqueta. Entonces este es un rubro. Guarda eso. Y podemos ver ese encabezamiento en la página. También contamos con H2, H3, H4, H5, y H6. Por lo que sólo voy a sumar esos también. Y por cierto, un atajo para agregar etiquetas HTML es solo para escribir el nombre de la etiqueta como H2. Y deberías ver esta cosa de la abreviatura aparecer y solo puedes golpear Tab o Enter on the top virus. Entonces voy a poner algo de texto ahí dentro. Mucho H3 y H4, H5, y H6. Guarda eso. Y podemos decir todos estos encabezamientos en la página. Y se puede ver que por defecto, el texto se hace más pequeño para cada nivel de encabezado. También tenemos una etiqueta de párrafo para agregar párrafos. Entonces esto es solo una etiqueta p, así que solo escribes PE, golpeas Tab mucho, una etiqueta de párrafo en una forma rápida de agregar algún texto ficticio en VS Code es solo escribir en lorem. Y se puede ver que soy una abreviatura. Simplemente le pegaré entrar un montón de textos. Entonces guardaré eso. Digamos que aquí tenemos un párrafo y también tenemos un par de elementos de lista diferentes para mostrar listas. Entonces, en primer lugar, tenemos una lista desordenada. Y si solo escribes UL para listas desordenadas y pulsas Enter y dentro de eso quieres agregar un elemento de lista de elementos LI y puedes poner algo de texto ahí. Simplemente añadiré otro aliado en algún texto y luego otro aliado, guarde eso. Y se puede ver una lista con puntos de bala. Detener. También tenemos una lista ordenada la cual numerará los ítems empezando por uno. Entonces solo voy a agregar una nueva línea aquí y seleccionar este elemento UL y copiarlo con Command y decir, o podría ser controlado y decir en su dispositivo y luego pegarlo aquí abajo. Simplemente voy a cambiar esta etiqueta de apertura y cierre a OL en lugar de UL y guardar eso. Y se puede ver esta lista tiene artículos numerados. Estos elementos son todos lo que se conoce como elementos de nivel de bloque. Los elementos de nivel de bloque siempre se colocarán en una nueva línea. Por lo que se puede ver que todos estos elementos se están colocando en una nueva línea, luego no se colocan uno al lado del otro de izquierda a derecha, solo se están apilando uno tras otro. Por lo que estos son elementos de bloque, pero también tenemos elementos en línea que no se colocarán en una nueva línea, como la etiqueta fuerte, que hará que el texto sea negrita. Entonces si solo rodeo esta palabra aquí en algunas etiquetas fuertes, esto, solo voy a hacer doble clic en esta palabra y luego arrastrarla a la mitad de estas etiquetas y guardar eso. Y podemos ver que esta palabra es audaz. Qué no coloca este texto en una nueva línea porque se trata de una etiqueta en línea o de un elemento en línea. Y también tenemos la etiqueta E M, que es un elemento en línea. Entonces si solo arrastro esta palabra a estas etiquetas AN y guardo eso, ves que esto le da al texto estilo cursiva. También hay un montón de otros elementos que podemos usar, como mesas sobre insumos en no voy a entrar al centro comercial ahora. Bueno, estos son algunos de los principales. 7. Elementos semantic /estructural (HTML): Por lo que estos son algunos de los elementos que realmente vemos en la página. Pero también tenemos elementos semánticos o estructurales que en realidad no vemos en la página, pero que dan las diferentes secciones de nuestra página. Por lo que significa que también ayudan a los motores de búsqueda a entender la estructura de nuestra página también. Entonces solo voy a eliminar todas estas etiquetas que hemos agregado en la etiqueta de cuerpo. Entonces solo para demostrar algunos de estos elementos semánticos o estructurales, tenemos un elemento de cabecera, que es donde podrías colocar tus sitios web tenían un, tenemos un elemento de pie de página donde podrías colocar la foto. Tenemos un elemento de sección que podría usar para rodear una sección de blog. Por ejemplo, dentro de esa sección, charla, podría tener una etiqueta de artículo donde mostraría cada artículo de blog dentro de uno de esos. También tenemos suficiente elemento donde podría agregar algo de navegación. Tenemos un elemento aparte donde podría colocar una barra lateral. Y si tenemos una sección de nuestra página que realmente no encaja en ninguna de estas etiquetas semánticas. Y solo podemos usar una etiqueta div. Yo sólo voy a salvar esto. Y se puede ver ahora no vemos absolutamente nada en la página porque estas etiquetas en realidad no agregan nada a la página. Simplemente nos permiten estructurar nuestra página de una manera lógica que nos ayuda como desarrolladores a entender lo que está pasando, en la página, y también ayudar a los motores de búsqueda en SEO, optimización de motores de búsqueda también. También hay un montón de otras etiquetas para las que podemos usar. Yo sólo voy a cubrir estos por ahora. 8. Header (HTML): Empecemos a calificar el HTML para nuestro encabezado. Y si acabo de saltar a la página terminada, así que sólo vamos a tener un encabezado realmente sencillo con un gran fondo, un logotipo a la izquierda, y un par de elementos de navegación a la derecha, que enlazaremos con los dos diferentes páginas. Por lo que tiene sentido poner un encabezado dentro de un elemento de cabecera. Entonces sólo voy a saltar de nuevo a nuestra página web. Voy a eliminar todos estos elementos. Aparte del elemento de cabecera. Simplemente voy a colocar mi cursor entre estas dos etiquetas aquí. Y así colocaré aquí todos nuestros elementos de cabecera. Y por ahora no vamos a añadir este logotipo. Simplemente vamos a añadir una etiqueta H1, una etiqueta de encabezado con el nombre de nuestra página web dentro de ella. Es buena idea tener el nombre de su sitio web o empresa dentro de uno dentro del encabezado, porque los motores de búsqueda asumirán que este es el nombre de su sitio web o el nombre de su empresa. Por lo que sólo vamos a añadir la etiqueta H1 escribiendo H uno y golpeando Enter o tab. Y acabaremos de poner nombre de nuestra página web. Y sólo voy a llamar naranja a este sitio web. Y eso lo guardaré. Y ahora podemos ver este encabezamiento en la página. Ahora vamos a añadir estos elementos de navegación. Normalmente ponemos elementos de navegación dentro de una etiqueta de navegación. Entonces después de esta etiqueta H1, voy a añadir una nueva línea y añadir un elemento nav. Por lo que escribiremos suficiente entrar en una nueva línea y colocaremos aquí nuestros elementos de navegación. Normalmente estoy haciendo esto dentro de una lista desordenada. Entonces voy a añadir una etiqueta UL dentro de eso. Voy a añadir algunas etiquetas LI. Solo vamos a copiar estas etiquetas LI, pegarlas en la siguiente diapositiva. Por lo que tenemos que, podemos agregar enlaces a nuestra página mediante el uso de la etiqueta a o leucocitos. Entonces voy a colocar mi cursor dentro de estas primeras etiquetas LI, escribir un hit Enter, y se agrega a un virus arquetipo. Ponemos el texto que queremos mostrar en este enlace dentro de estos arquitectos. Entonces solo voy a poner a casa dentro de esas etiquetas y golpear Save. Y ahí podemos ver un enlace. Entonces solo voy a copiar esta etiqueta ancla, pegarla dentro del segundo aliado, cambiar el texto a sobre porque este será un enlace a nuestra página sobre, y lo guardaré. Y también voy a rodear estos textos anaranjados en una etiqueta de ancla también. Una forma en que podemos rodear rápidamente algunos textos y una etiqueta es seleccionar los textos, iniciar la paleta de comandos eligiendo Ver y paleta comandos o usando el tipo de atajo de teclado en envoltura. Y podemos usar esta envoltura con comando de abreviatura que voy a disparar que por hits una respuesta y luego teclear el nombre de la etiqueta que queremos envolver, que es una etiqueta en hit Entrar de nuevo. Y ahora está envuelto este texto en un arquetipo. Muchas etiquetas tienen atributos, y este es un atributo aquí, este atributo href odio. La estructura de un atributo es generalmente el nombre del atributo y luego es igual y luego algunas marcas de habla. Pero generalmente coloca el valor dentro de estas marcas de habla. Y este atributo href de odio le dice al navegador a qué camino debe ir este enlace. Y por ahora solo voy a establecer todos estos atributos H ref para ir a la raíz de nuestra app. Por lo que a la página de inicio en la raíz de nuestro sitio web siempre está hacia arriba barra hacia adelante. Entonces solo voy a presentar barra en cada uno de estos y guardar eso. Y si ahora hacemos clic en estos enlaces, todos llevan va a la página de inicio. Y también se puede ver en la barra de direcciones, ya no vemos slash index.html aquí. Porque como mencioné anteriormente, cuando golpeas el sitio web sin especificar una página en particular como slash sobre dot HTML, siempre buscará primero index.html, razón por la cual está cargando esta página en el navegador. De acuerdo, Por último, solo agreguemos otra etiqueta después de nuestro encabezado, que agregará una línea horizontal a través de la página solo para dividir un poco las cosas para nosotros. Entonces después de este encabezado, voy a agregar una nueva línea en otra nueva línea. Y vamos a sumar una regla tipo R de odio u horizontal. Voy a golpear respuesta en Guardar eso. Ahora podemos ver una línea a través de la página y solo voy a usar estos RH's para dividir las diferentes secciones de nuestra página para que podamos ver qué está pasando antes de empezar a hacer que nuestra página web se vea bonita con CSS, pero nosotros van a ocultar estas reglas horizontales más adelante usando CSS. 9. Producto (HTML): De acuerdo, vamos a añadir un poco de HTML para nuestro producto ahora. Entonces sólo voy a ir a la página terminada. Por lo que tenemos una lista de productos aquí. Por lo que probablemente tiene sentido tirar de todos estos productos dentro un elemento de sección y luego verter cada producto individual dentro de un elemento de artículo. Dentro de esos elementos del artículo, podemos colocar todos estos elementos. Entonces probablemente tendré sentido usar el encabezado H1 para este rubro aquí, H2 para este rubro de precio, y luego un párrafo para este texto aquí, y luego un elemento de navegación para estos ítems de navegación aquí con un elemento UL dentro de eso, con algunos aliados en algunos enlaces, igual que hicimos para nuestra navegación de encabezados. Y luego vamos a necesitar un elemento de imagen para esta imagen. Entonces voy a saltar de nuevo a la página. Después de esto, hey Char, vamos a añadir un elemento de sección. Voy a colocar todos estos productos dentro del elemento de sección, y voy a colocar cada producto individual dentro en elemento de artículo. Entonces mucho eso, por lo que para este texto aquí, probablemente podríamos usar el encabezado H1. Entonces vamos a añadir un H1 aquí y sólo voy a detener estos textos. El nuevo Olmeca. Increíble. Nos detendremos y pondré este precio dentro de H2. Por lo que voy a añadir una nueva línea en H2. Tirará de 20069 $9, mucha nueva línea y agregará una etiqueta de párrafo para estos textos. Tan solo para agregar algo de Lorem Ipsum, solo voy a teclear lorem y pegaré Enter, y eso lo guardaré. A ver cómo se ve eso. De acuerdo, esto se ve bien, así que agreguemos nuestros elementos de navegación. Entonces en realidad solo voy a copiar este elemento nav de nuestro encabezado, pegarlo después de este párrafo. Y por cierto, si necesitas cambiar la sangría en algo, solo puedes seleccionar algún HTML y presionar Tab para sangrarlo a la derecha, Shift y Tab para moverlo de nuevo a la izquierda. Simplemente voy a cambiar el texto en estos enlaces para comprar. Conoce más. Entonces lo que este pequeño símbolo de corchete de ángulo recto, no podemos simplemente escribir a la luz que porque esto confundirá al navegador porque nuestras etiquetas están formadas por corchetes de ángulo izquierdo y derecho. Por lo que podemos usar entidades HTML para escupir símbolos como este en escupir esto mayor que símbolo podemos empezar y, y luego GT para mayor que y luego un punto y coma. Entonces guardaré eso. A ver cómo se ve eso. Sí, eso se ve bastante bien. Y probablemente no queremos que estos enlaces vayan a nuestra página de inicio. No sé a dónde voy enlaces van a ir todavía. Son solo temporalmente, podemos simplemente poner un hash en este atributo H ref, cual solo haremos que se vinculen a cualquier página en la que se encuentre actualmente el usuario. Por lo que sólo guardaré eso. Ahora solo necesitamos esta imagen de producto aquí. Por lo que para conseguir una imagen gratis, voy a ir a un sitio llamado pixabay.com. No quiero buscar iMac. Desplácese hacia abajo. Esta es la imagen que uso aquí, así que voy a dar click en eso. Haga clic en Descargar, volver a descargar. Tomaré esta caja y pincharé Descargar. Y se descarga nuestra imagen. Por lo que queremos agregar esto en algún lugar a la carpeta donde está nuestro proyecto. Vuelvo a VS Code. Vuelve a mostrar la barra lateral yendo a Ver y los padres muestran la barra lateral. O puede usar el atajo de teclado. Y te recomendaría encarecidamente que conozcas todos los atajos de teclado para tu plataforma porque solo podrás trabajar mucho más rápido. Bueno, sólo voy a mostrar esa barra lateral. Esta es nuestra carpeta aquí. Por lo que en realidad solo voy a hacer clic derecho y crear una nueva carpeta eligiendo este nuevo elemento de carpeta, y llamaré a esta carpeta activos. Colocaré todos nuestros activos, como imágenes, CSS, y JavaScript dentro de esta carpeta. Entonces voy a hacer clic derecho en esta carpeta de activos. Crearé otra carpeta. Y voy a llamar a esta carpeta IMG para imagen. Colocaremos nuestra carpeta dentro de la carpeta de imágenes. Por lo que solo voy a arrastrar la imagen se descarga y soltarla en esta carpeta de imágenes. Por defecto, el código VS hace este tipo de cosas molestas donde une tus carpetas juntas, lo que me está haciendo difícil colocar esta imagen dentro de la carpeta de imágenes está actualmente justo dentro de la carpeta de activos. Entonces si vamos a la página de configuración yendo a Configuración de Preferencias o usando el atajo de teclado. Y buscamos compactos o carpetas compactas. Podemos ver esta opción de carpetas compactas por tu propio bien que entonces ahora separará todas nuestras carpetas en carpetas infantiles, lo cual es mucho mejor. Entonces cerraremos eso y parece que lo ha colocado dentro de esta carpeta de imágenes. Entonces eso está bien. Entonces voy a cerrar esto. Voy a esconder la barra lateral. Y coloquemos esta imagen después de este elemento nav. Y lo hacemos usando la etiqueta de imagen o la etiqueta IMG. Entonces voy a escribir IMG, pulsa Entrar en este atributo fuente aquí solo colocamos el camino a la imagen que queremos mostrar, ninguno. Si tan sólo abro la barra lateral de nuevo, nuestra imagen va a estar en el camino slash assets imagen slash. Y luego el nombre del archivo sobre zorro. Sólo voy a renombrar este archivo aquí. Voy a hacer clic derecho en él y renombrarlo a Olmeca, tengo PNG, pego Enter, y estoy de vuelta a esta etiqueta de imagen y este atributo fuente. Podemos simplemente configurar esto para slash activos slash IMG slash oem, OK, dot PNG. Voy a guardar eso y ver la imagen en la página es bastante grande en este momento, pero vamos a resolver en un segundo este atributo todo. Podemos reproducir algún texto alternativo aquí, si acaso el navegador no pueda cargar la imagen, digamos que la imagen se borra o algo así, entonces podremos mostrar algún texto como copia de seguridad. Entonces solo voy a escribir o MAC y este atributo, guarde eso. Entonces si cambio este atributo fuente a una ruta incorrecta, cambiando esto a todo MUX dot PNG. Podemos decir textos alternativos aquí. En lugar de la imagen. Simplemente cambiaré esto de nuevo al camino correcto. Guarda eso. Y normalmente lo mejor es darle estilo a las cosas usando CSS. Solo por ahora solo para dejar de que esta imagen sea tan ridículamente enorme, solo voy a agregar un atributo de ancho a esta imagen, que nos permitirá especificar un ancho para ella. Voy a poner eso en 400, lo que significa 400 píxeles. Entonces guardaré eso. Eso se ve un poco mejor ahora. De acuerdo, Entonces esto es todo de la maqueta de nuestros productos. Simplemente voy a dejar los productos uno ahí por ahora, aunque agregaremos algunos productos más más adelante. 10. Footer (HTML): Por lo que ahora sólo necesitamos añadir esta fosa. Entonces acabamos de conseguir una foto realmente simple aquí con un borde en la parte superior, un poco de texto. Por lo que tiene sentido poner esto dentro de un elemento de pie de página. Entonces después de este elemento de sección, vamos a agregar una nueva línea, vamos a agregar otra página son solo dos cosas separadas un poco. Agregaremos un cuarto elemento. Y sólo voy a poner algo de texto aquí, sólo voy a poner mi nombre, Dani Connell en eso, un símbolo de derechos de autor. Y un poco como lo hicimos con el símbolo mayor que antes, para agregar un símbolo de copyright podemos hacer y copiar y luego punto y coma. Y luego voy a poner el año en curso 2021 y guardar eso. Ahora tenemos una fosa simple. 11. ¿Qué es CSS?: De acuerdo, así que estamos bastante terminados con HTML por ahora. Hemos agregado nuestro encabezado. Los productos son fossa. Esto no se ve muy bonito. Entonces vamos a añadir algo de CSS para que esta página se vea hermosa y cambiarla de esto a esto. Bueno, en primer lugar, ¿qué es CSS? Bueno, CSS significa Hojas de Estilo en Cascading y no te preocupes demasiado por el nombre por ahora. Pero básicamente, CSS nos permite seleccionar un elemento que está en la página o un montón de elementos que están en la página. Y darle algunas propiedades de estilo, como color de fondo, texto, color, ancho, altura, tamaño de fuente, etc. 12. Estilos básicos y fuentes (CSS): La forma más fácil de empezar a agregar CSS es simplemente estudiando una etiqueta de estilo a nuestra cabeza. Entonces sólo voy a hacer eso ahora después de la etiqueta del título. Por lo que solo quieres agregar una etiqueta de estilo de apertura y cierre así. Podemos poner todo nuestro CSS. Por lo que CSS está conformado por una lista de reglas. En cada regla se compone de un selector que le dice al navegador qué elementos queremos seleccionar, a qué elementos queremos añadir estilos. Una serie de propiedades que le dicen al navegador qué tal elemento o cómo debe verse el manojo de elementos. Entonces no seamos un real que le agrega algo de estilo a nuestra etiqueta de cuerpo, que es básicamente la etiqueta que rodea toda la página. Entonces para esta regla, el selector sólo va a ser cuerpo, por lo que esa sierra seleccionada. Y luego solo queremos añadir tirantes dobles como este aquí. Podemos colocar nuestras propiedades en el cabello. Tenemos toneladas de diferentes propiedades como cola, fondo, color, tamaño de fuente, ancho, altura. No los voy a cubrir todos en este video, pero vamos a cubrir bastantes de los más importantes. Por lo que el color del texto en una página actualmente es negro en todas partes, lo que se ve un poco demasiado oscuro. Entonces hagamos de todo este texto un color gris oscuro en su lugar. Y podemos usar la propiedad de color para hacer esto. Por lo que dentro de estos tirantes rizados, solo podemos empezar a colorear. Ahora podemos asignar una cola. Y hay una serie de formas en las que podemos hacer esto. Podemos añadir el nombre de un color como el azul. Por cierto, queremos terminar cada propiedad con un punto y coma como este. Entonces guardaré eso. Ya puedes ver todo el texto es azul. Y entonces por qué todo el texto de la página se pone azul cuando sólo agregamos un estilo a la etiqueta body. Bueno, eso se debe a que los estilos que agregamos dos elementos bajarán en cascada a los elementos hijos. Porque cada elemento de nuestra página es hijo de cuerpo, entonces cada elemento también ha heredado esta propiedad de cola. No obstante, si uno de estos elementos hijo tiene su propia propiedad de color, que es diferente a ésta, entonces esa propiedad anulará este estilo que está bajando en cascada. Entonces, por ejemplo, si peinamos las etiquetas p agregando paganos el selector y configuramos el color en rojo. Voy a guardar eso. Nosotros decimos que el párrafo ahora es rojo, mientras que los encabezamientos siguen siendo azules, porque esos estilos están bajando de la etiqueta del cuerpo bajando en cascada a esos encabezamientos. Y también están bajando en cascada a este párrafo, pero acabamos de sobrescribir eso agregando una propiedad de color al elemento de párrafo. Específicamente, solo voy a eliminar por ahora esta regla de párrafo. Guarda eso y vuelve a esta propiedad de color. Por lo que podemos usar el nombre de un color como el azul o el rojo. Hay un montón de nombres de columnas diferentes que podemos usar, y también podemos usar el código de color hexadecimal, como áspero 000, 000 , 0, que es el código de color hexadecimal para negro o que tenía duras FF, FF, FF, FF, FF. Y este es el color para el blanco. Para que puedas ver nuestro texto desaparece porque nuestro fondo es blanco. Y también podemos usar códigos de color RGB. Entonces si elimino esto y agrego RGB y luego paréntesis, entonces podemos agregar un número para el componente rojo, seguido de una coma, luego un número para el componente verde seguido de una coma, y luego un número para el azul componente. Entonces estamos ajustando esto a 0 rojo, 0 verde, y 0 azul, que básicamente es negro en estos números van al 55. Entonces si cambio todos estos a 55, guarde eso. El texto es ahora ¿por qué? Bueno, voy a usar un código de color hexadecimal para esto. Entonces voy a quitar esto. Voy a poner esto demasiado duro. Y luego seis 3s, que es de un bonito color gris oscuro, que no es del todo negro. Por lo que eso se ve bastante bonito ahora, en nuestro cuerpo también tiene algo de espacio en todo el camino alrededor del borde. Se puede ver esta regla horizontal que agregamos no va bastante al borde de la página, son tampoco lo hace ninguno de este texto. Y eso se debe a que el navegador en algún estilo predeterminado para la mayoría de los elementos, podemos usar Chrome DevTools para ver qué está pasando aquí. Por lo que abre Chrome DevTools, solo quieres ir a View Developer Developer Tools o puedes usar el atajo de teclado aquí. Y esto abrirá herramientas para desarrolladores. Una cosa que podemos hacer en las herramientas de desarrollo es inspeccionar todos los diferentes elementos de la página. Podemos ver qué estilo se les está agregando y también podemos ajustar el estilo. Entonces si hago click en la etiqueta body, podemos ver nuestra propiedad de color que agregamos antes. Podemos cambiar eso desde aquí si queremos ver cómo se ve. Oops, hay demasiados 6. Para que podamos jugar con nuestro estilo dentro de esto también. Pero de todos modos, se puede ver aquí dice hoja de estilo de agente de usuario y podemos ver es agregar un margen de ocho píxeles al cuerpo. Por lo que este estilo viene del propio navegador, de Chrome. En cada navegador tiene estilos por defecto ligeramente diferentes para diferentes elementos. Pero de todos modos, quiero deshacerme de este margen que se está agregando. Y si pasamos sobre el elemento del cuerpo, podemos ver este borde naranja alrededor de la página. No soy frontera naranja es el margen que se está agregando. Por lo que quiero establecer el margen en 0. Entonces si hacemos clic aquí abajo después de esta propiedad de color, podemos agregar una propiedad de margen y establecer eso en 0. Y vemos desaparecer todo ese margen. Y así ahora necesitamos agregar este estilo a nuestra hoja de estilo. Entonces voy a copiar esta propiedad de margen, pegarla después de esta propiedad de color, y guardar eso. Y ese margen ahora se elimina de forma permanente. Esta fórmula que estamos usando no es muy agradable. Entonces voy a reemplazar esto por una forma de fantasía. Y podemos encontrar toneladas de fuentes de lujo gratuitas en la página web de Google Fonts. Entonces sólo voy a Google. Fuentes de Google. No veas la página web de Google Fonts. Voy a usar esta fuente Roboto, que es una de las fuentes más populares. Entonces el momento, así que voy a dar click en eso. Tenemos que elegir estos archivos que queremos y sólo vamos a necesitar regular. Entonces voy a dar clic a comunistas cuellos de botella al normal. Y vamos a necesitar audaz también. Entonces, ¿y si se nos ocurre estilo junto a la fuente negrita? Y si miramos hacia la derecha, nos da algún código para implementar esta fuente en nuestra página web. Por lo que nos da un par de etiquetas de enlace aquí. Estos necesitan entrar. Entonces cuando una copia estas etiquetas de enlace, y las pegaré encima de esta etiqueta de estilo en nuestra cabeza en guardar eso. Y también nos da una regla CSS también, pero tenemos que añadir, y esto va a ir en nuestro CSS. Entonces voy a copiar esto y lo agregaremos al cuerpo seleccionado aquí. Entonces lo pegaré ahí dentro. Y si guardamos esto, ahora tenemos una diversión mucho mejor parecida. Y también quiero ocultar estas RR.HH., estas reglas horizontales. Para seleccionar esos solo podemos teclear jarra de odio o llaves dobles para que los ocultes. Podemos utilizar la propiedad display. Queremos establecer esto para no guardar eso. Esas reglas horizontales ya han desaparecido. Lo que hemos hecho aquí es establecer algún tipo de estilos base para toda la página. Entonces voy a añadir un comentario por encima de estos para etiquetar estos estilos como nuestros estilos base. Y así agrega un comentario, simplemente vamos a agregar una nueva línea en la parte superior para agregar un comentario en CSS, acabamos de empezar barra y asterisco hacia adelante, y luego lo cerramos con un asterisco, barra hacia adelante. Podemos poner todo lo que queramos dentro de este común. Entonces solo voy a poner estilos de base. Esto es solo un comentario, así que esto no está haciendo que nuestro CSS haga nada. Es sólo un comentario que será completamente ignorado por el navegador. Solo estamos usando esto para etiquetar nuestro CSS en, dividirlo en una serie de secciones diferentes. 13. Header color de fondo (CSS): Añadamos algunos estilos para nuestro encabezado ahora. Por lo que queremos que se vea así. Por lo que queríamos tener un fondo gris oscuro y queremos que un título o un logotipo esté encima a la izquierda. Elementos de navegación para estar sobre a la derecha. Entonces después de nuestros estilos base aquí, voy a Otro comentario que en realidad es un atajo que podemos usar para agregar un comentario que en un Mac es Command forward slash en un laboratorio que comenta foros en Windows, creo que el atajo es Control y corte hacia delante. Y si quieres ver todos los atajos de teclado, ahora solo dame ir los atajos de teclado VS Code. Y voy a hacer clic en este enlace de enlaces clave de Visual Studio Code. Y luego a la derecha aquí saltó hacia abajo a los atajos de teclado referencia. Y puedes ver todas las diferentes plataformas aquí. Entonces si quieres ver los códigos cortos de la ventana haz click en Windows, y puedes ver una bonita hoja de trucos aquí. Entonces si alguno de los atajos que uso está trabajando en Windows y estás en Windows y luego solo encuentra aquí el atajo de teclado correcto. De acuerdo, entonces vamos a agregar algunos estilos para el encabezado. Entonces voy a poner la palabra cabecera en este comentario una nueva línea. Y así queremos darle estilo a este elemento de cabecera el cual tiene esta corbata naranja, todos estos enlaces de navegación. Podríamos simplemente usar el encabezado para nuestro selector así y empezar a agregar algunos estilos. No obstante, más adelante podríamos tener otros elementos de encabezado en nuestra página o en nuestro sitio. Por ejemplo, podría tener un encabezado de producto o algo así. Y si solo usamos el elemento de cabecera selecciona así, dará estilo a cada elemento de encabezado único que está en nuestro sitio web. Y ahora mismo, sólo queremos darle estilo a este encabezado. Entonces lo que podemos hacer para ser más específicos con nuestros selectores es agregando una clase a un elemento y luego usando esa clase como nuestro selector. Entonces voy a ir a este elemento de cabecera aquí, justo antes del soporte de ángulo de cierre. Voy a agregar un espacio, y luego voy a agregar un atributo llamado clase. Voy a establecer el valor de este encabezado de dos para usar un selector de clases. En nuestro CSS, solo podemos hacer punto y luego el nombre de la clase y el nombre de la cabecera de clases. Entonces solo queremos hacer cabecera, y ahora solo estamos seleccionando este elemento específico. De acuerdo, así que queremos que esto tuviera un bonito color de fondo oscuro como este. Y podríamos hacer esto con la propiedad de color de fondo. Entonces dentro de este selecto, así que solo voy a añadir un color de fondo. Por cierto, en VS Code, puedes ver este IntelliSense, que te ayuda a ver qué propiedades están disponibles, son rápidamente, agregarlas a la página, y también agrega el colon, el bosque de punto y coma. Voy a poner esto en el mismo color que usamos en nuestro texto corporal. Tan duro. 3, 3, 3, 3, 3, 3, porque todos estos números son iguales, realidad podríamos mostrarlo en esto a tres, la ligereza de 3. También lo cambiaré aquí. Voy a guardar eso. Y ahora podemos ver este color de fondo gris en nuestro encabezado. 14. Header: Logo y posicionamiento de nav (CSS): Actualmente estoy dirigiendo elementos de navegación en consecuencia apilados uno encima del otro, pero queremos que el encabezado esté sobre a la izquierda, la navegación esté sobre a la derecha, como se puede ver en la página terminada aquí. Y podemos hacerlo mediante el uso de la propiedad display en un encabezado. Entonces voy a agregar una propiedad llamada display, y queremos establecer esto en flex. Esta propiedad flex convertirá este elemento en una fila con todos sus elementos secundarios directos. Por lo que éste y este elemento nav se mostraban uno al lado del otro dentro de esa fila. Para que puedas ver este título y estos artículos de navegación. Y ahora lado a lado, sin embargo, no queremos estos artículos uno al lado del otro así. Queremos que los artículos de navegación estén justo por aquí. Entonces para ello, podemos usar la propiedad justify content y podemos establecer esto en un montón de cosas diferentes como centro para colocar esos elementos en el centro de la cuerda. O podemos decirlo para flexionarse y forzar a todos los elementos secundarios sobre la derecha. Bueno, lo que queremos hacer es difundir nuestros artículos por toda esta fila. Por lo que esencialmente queremos poner espacio entre los elementos. Para ello, podemos establecer esto en el espacio entre, y lo guardaré. Y ahora podemos ver nuestro título ha terminado a la izquierda, en nuestro nav artículos están más a la derecha. 15. Header: estilos de texto: Entonces agreguemos algo de estilo a estos enlaces en nuestro encabezado porque actualmente tienen este horrible color morado. Y de nuevo, ese es el estilo predeterminado que viene del navegador. Y si tienes abiertas tus DevTools de Chrome y das click en este pequeño botón de aquí arriba. Podemos hacer click en un elemento para ver qué está pasando. Entonces si nos desplazamos por aquí, en realidad no podemos ver este color púrpura en ninguna parte, pero está siendo agregado por el navegador. Y si vamos a esta pestaña computada, lo podemos ver aquí, este color morado. Por lo que voy a poner el color estas piernas a un bonito color gris claro. Por lo que queremos seleccionar todas estas unas etiquetas que están dentro de este encabezado. Para hacer eso podemos simplemente de nuevo nuestro encabezado. Y luego después de eso un, porque queremos seleccionar las etiquetas a que están dentro del encabezado. Entonces esto es básicamente solo decir seleccionar todas las etiquetas a que están dentro de este padre con una clase de encabezado. Entonces voy a establecer la propiedad del color en un color gris claro. Entonces voy a usar hush CCC. Voy a guardar eso. Y eso se ve un poco mejor. Y también quiero deshacerme de estos subrayados. Y podríamos hacer eso con la propiedad text-decoración. Por lo que voy a poner la decoración del texto a NADH. Vemos que desaparecen los de las líneas. Vamos a reducir el tamaño de fuente en estos también. Podría hacer eso con la propiedad font dash size. Hay una serie de tipos diferentes de valores que no podemos, no podemos píxeles valores como 14 píxeles, lo que básicamente establecerá la altura del texto en 14 píxeles. También podemos usar rems en EMs. No voy a meterme demasiado en esos ahora mismo. Entonces tenemos rems, tenemos átomos. Pero el más simple de entender son los píxeles. Entonces solo voy a estar usando pixeles en este video. Voy a establecer el tamaño de fuente en 14 píxeles, y lo guardaré. 16. Header: efectos y animación de moda: También me gustaría que estos enlaces cambiaran de color cuando pasemos el cursor sobre ellos, ahora mismo, simplemente se quedan igual. Y es mejor si el color cambia para que el usuario sepa que se puede hacer clic en estos para darle estilo a un elemento que se está colocando sobre él. Podemos usar un pseudo selector. Entonces lo que podemos hacer es otra vez, tuve un, a, pero ahora queremos agregar un colon y luego pasar el rato como nuestro selector. Entonces esto es básicamente decir en estos estilos a todos unas etiquetas que están dentro del elemento que tiene una clase de encabezado que actualmente se están colocando. Entonces estos estilos que agregamos, Hey, solo nos agregaremos cuando realmente pasemos el cursor sobre un elemento. Entonces cuando sí colocamos el cursor sobre el elemento, quiero cambiar el color. Entonces voy a cambiar el color a blanco, y voy a guardar eso. Y si me cierro sobre estos elementos, podemos verlos cambiar a blanco cuando nos colocamos sobre ellos. También podemos agregar un poco de animación a esto, para que el color no cambie repentinamente. Libro cambia gradualmente del gris claro al blanco mediante el uso de la propiedad de transición. Y queremos agregar esta propiedad de transición al elemento en sí en lugar del pseudo selector. Por lo que vamos a añadir que aquí donde estamos seleccionando la etiqueta a dentro del encabezado. Por lo que queremos agregar una propiedad de transición. Podemos especificar una propiedad CSS la cual queremos animar. Y queremos animar la propiedad de color. Por lo que solo podemos empezar a colorear aquí. Y luego podemos agregar una duración para esta animación. Entonces si configuro esto en uno en 1 segundo, lo guardaré y pasaré por encima de uno de estos enlaces. Podemos decir que cambia muy lentamente de gris a blanco cuando pasamos sobre él. Bueno, esto es un poco demasiado largo. Entonces voy a cambiar esto a nada 0.3 segundos. Voy a guardar eso. Ahora obtenemos una bonita animación sutil cuando pasamos el cursor sobre estos enlaces. 17. Header: estilos navales: De acuerdo, vamos a mejorar el estilo de esta lista de navegación por aquí. Actualmente estos artículos están apilados uno encima del otro. Debe porque los elementos LI bloquean elementos por defecto, lo que va a acumular lo que queremos que vayan de lado a lado así. Y de nuevo, podemos usar la propiedad display flex para hacer esto. Entonces voy a saltar de nuevo a esa página. Voy a añadir un nuevo selector. Lo que queremos hacer es configurar esta URL para que muestre flex para que los elementos dentro de ella se coloquen uno al lado del otro en una fila en lugar de stock. Entonces el selector, así de nuevo, queremos agregar encabezado. Queremos seleccionar el elemento nav y luego el elemento UL dentro de eso. Queremos configurar esto para mostrar, flex. Guarda eso. Y podemos ver ahora estos artículos están apilados de lado a lado. Todavía tenemos algunos puntos de bala en estos ítems de la lista como estas balas, se puede ver ahí, podemos ver una bala cubriendo la palabra casa ahí. Y para deshacernos de eso, podemos establecer una propiedad llamada liststyle para no. Voy a guardar eso y vemos que esa pequeña bala desaparece ahora. 18. Header: Margin y acolchado: Por defecto, las URL tienen algún margen y relleno agregado a ellas. Si pasamos el cursor sobre el elemento aquí, podemos ver el margen en naranja en la parte superior e inferior. Y podemos ver el relleno de la izquierda en ese color verde. Por lo que también voy a establecer el margen a 0 y el relleno a 0 también. Por cierto, el margen es básicamente el espaciado que va alrededor del exterior de un elemento. Y el relleno es el espaciado que va dentro del elemento. Sólo para demostrar que sólo voy a agregar una propiedad de borde a las etiquetas a en el encabezado. Entonces pondré el borde dos píxeles, blanco sólido. Guarda eso. Y podemos ver un pequeño borde alrededor de cada una de estas a etiquetas ahora, así que si pongo un relleno de 10 píxeles, se puede ver que se añaden 10 píxeles alrededor del interior del elemento porque el borde que agregamos está en el extremo exterior del elemento. Y podemos ver que el espacio se ha agregado dentro del elemento. Pero si cambio esta regla al margen de diez píxeles, en lugar de relleno y guardo eso, se puede ver que ahora se agrega ese espacio alrededor del exterior del elemento. Entonces esa es la diferencia entre margen y relleno. Yo sólo voy a deshacerme de esta regla de margen y de esta regla fronteriza y guardar eso. Esta etiqueta de encabezado que estamos usando aquí también va a tener algún margen por defecto. Y podemos ver el margen en naranja en la parte superior e inferior del elemento ahí. Por lo que también voy a apuntar a esto y establecer el margen y el relleno en 0. Entonces pondré esta regla aquí. Entonces encabezado H1, debido a que este título está en un elemento H1, vamos a establecer esto en el margen 0, relleno 0. Ahora que hemos quitado todo el relleno y margen alrededor de estos elementos, voy encabezado se ve un poco pequeño. No teníamos relleno alrededor del borde. Entonces agreguemos algo de relleno al encabezado. Entonces voy a apuntar al elemento de cabecera en una propiedad de relleno. Y si queremos establecer el relleno en todas las direcciones alrededor del elemento, solo podemos agregar un valor de píxel único como este. Entonces diez pixeles, lo guardaré. Por lo que esto va a sumar 10 píxeles de relleno a la izquierda, 10 píxeles en la parte superior, 10 píxeles en la derecha, y diez píxeles en la parte inferior. Pero también podemos especificar todas esas direcciones de relleno individualmente. Entonces si configuro esto en 10 píxeles, 20 píxeles, 30 píxeles, y 40 píxeles, bueno esto va a hacer son nuestros 10 píxeles de relleno a la parte superior, 20 píxeles a la derecha, los píxeles para la parte inferior y 40 píxeles a la izquierda. Por lo que va en el sentido de las agujas del reloj empezando por la parte superior. Por lo que arriba, derecha, abajo e izquierda en Margin funciona de la misma manera también. O si solo queremos establecer el margen vertical con un valor sobre el margen horizontal o relleno con un valor, entonces solo podemos especificar dos valores. Entonces si establecemos esto en 10 píxeles y 20 píxeles, esto va a agregar grasas. Simplemente guardaré eso. Esto va a sumar 10 píxeles en la parte superior e inferior y 20 píxeles a la izquierda y a la derecha. Estoy contento con esta cantidad de relleno ahora, por cierto, estoy acercado a la página aquí. Por lo que en un Mac, si quieres acercar o alejar, puedes usar comando plus para acercar o Comando menos para alejar. Entonces sólo voy a alejarme a un 100 por ciento que podamos ver cómo va a quedar esto en realidad. De acuerdo, Esto se ve bastante bien. Necesitamos un poco de espacio entre estos elementos de navegación. Entonces solo voy a desplazarme hacia abajo a estos estilos UL. Después de éste, voy a apuntar a las etiquetas a que están dentro de esta UL, esta lista desordenada. Por lo que dot header nav UL. Y sólo voy a sumar un margen a la izquierda. Y para ello podemos usar la propiedad margin dash left. Y estableceremos esto en 50 píxeles. Guarda eso. Y podemos decir que se suman 50 píxeles a la izquierda de cada uno de estos enlaces. Por lo que ahora tenemos un buen poco de espacio entre nuestros enlaces. 19. Header reduce el contenido: De acuerdo, Entonces este encabezado se ve bastante bonito ahora a este tamaño, si cierro las DevTools y estiro esto, se puede decir en una pantalla realmente amplia, tenemos nuestro título justo por aquí, en nuestros enlaces justo por ahí, que no se ve demasiado bien. Por lo que necesitamos constreñir el contenido de este encabezado a un ancho particular en medio de la pantalla. De acuerdo, entonces voy a arreglar una clase reutilizable por esto. Entonces voy a añadir otra sección de estilos entre nuestros estilos base y nuestros estilos de encabezado. Entonces cuando agrego un comentario aquí, y llamaré a esto reutilizables. O podrías llamarlo genérico o algo así. Voy a configurar una clase llamada restricción para restricción de contenido. Al medio de la página. Voy a darle a esta clase un ancho máximo con la propiedad max width. Y vamos a establecer esto en 960 píxeles, que es una especie de ancho máximo estándar para páginas web o para el contenido de páginas web. Entonces voy a guardar eso. Voy a saltar a nuestro encabezado en el HTML. Voy a rodear todo lo que hay dentro del encabezado con un div, con una clase de restricción. El div es solo un elemento que podemos usar cuando algo que estamos agregando a la página, no encaja perfectamente en algo como encabezado, sección o artículo o algo así. Por lo que sí ves montones de dibs en páginas web. Por lo que vamos a reemplazar todo lo que hay dentro del encabezado, dentro de este div. Por cierto, acabo de seleccionar todo lo que no se utiliza Alt al abrir hacia abajo para moverlo hacia arriba a ese div para que su atajo podría ser diferente en Windows. Entonces guardaré eso. Esto ha ido un poco mal de masa porque teníamos estos elementos de cabecera para mostrar flex, lo que estaba cambiando esto en una fila y haciendo que todos sus elementos secundarios directos se mostraran lado a lado a lo largo de la cuerda. Pero ahora que hemos agregado este div, este es ahora el elemento secundario directo del encabezado. Entonces ahora en realidad necesitas agregar la regla de flex de visualización a este div en lugar del encabezado, porque este es ahora el elemento que queremos ser una fila. Estos son los elementos que queremos mostrar lado a lado. Entonces solo voy a saltar de nuevo a nuestros estilos. Después de que este punto tenía una regla, sólo voy a punto restricción. Vamos a mover esta regla de display flex y esto justifica regla de contenido hacia abajo a eso. Entonces llamaremos a estos, pegarlos aquí. Voy a guardar que los elementos ahora se muestran correctamente de nuevo, aunque debido a esta clase de restricción, hemos agregado este contenido en nuestro encabezado ahora tiene un ancho máximo de 960 píxeles. Entonces si solo hago clic con el botón derecho en esto y hago clic en Inspeccionar, estirar un poco el navegador y pasar el cursor sobre los elementos constreñidos. Se puede ver esta pequeña cosa desplegable que hay ahí, que dice que esto tiene 960 píxeles de ancho. No obstante, queremos que esto esté en el centro de la cabecera y no en la izquierda así. Entonces para hacer esto, sólo podemos saltar de nuevo a esta clase de restricción. Podemos establecer la propiedad margin. Voy a poner esto en 0 arriba y abajo. Bueno entonces lo vamos a poner también a izquierda y derecha y poner esto a auto, forzará a este elemento, estos elementos de restricción a estar en el centro. Entonces guardaré eso. Ahora si estiro esto, se puede ver todo el contenido de nuestro encabezado está en el centro de la página. De acuerdo, así que solo voy a ajustar un poco nuestro CSS aquí. Vamos a estar reutilizando esta clase de restricción más adelante para mantener todo el contenido de nuestro producto aquí en el centro también. Entonces este relleno que hemos agregado al encabezado aquí, lo voy a mover a esta clase de restricción, porque lo que sea que uses estos elementos de restricción en las clases, generalmente necesitas un poco de relleno en esos elementos. Entonces, ¿qué hacemos esto poniendo para arriba en este selector de restricciones, y voy a guardar eso. Todo sigue pareciendo exactamente igual. 20. Header: añade un logotipo: De acuerdo, así que ahora solo quiero reemplazar este título naranja por un logo como este naranja que se puede ver ahí. Entonces voy a saltar a un sitio llamado Icon finder.com. Voy a buscar naranja. Nos desplazaremos hacia abajo para que pueda encontrar algo que se vea bien artefactos. Voy a desplazarme de vuelta a la parte superior. Cambia esta opción aquí a gratis, que solo veamos los iconos gratuitos. Esta naranja se ve bastante bonita. Entonces voy a dar click en eso. Voy a elegir 64 píxeles porque no necesitamos que esto sea demasiado grande. Vamos a descargar eso. Voy a abrir la barra lateral en VS Code, arrastra este icono a nuestra carpeta de imágenes. Voy a renombrar esto a naranja dot PNG. Por lo que haré clic derecho Cambiar nombre y punto naranja PNG. Colocemos esta imagen en nuestro encabezado en lugar de este título. Entonces sólo voy a esconder otra vez la barra lateral. Salta a este encabezamiento que tiene el texto naranja en él. Deja aquí este texto. Este impuesto naranja porque ese es el título de nuestra página web. Entonces es una buena idea para fines SEO dejar ese texto aquí, pero podemos ocultarlo más adelante con CSS. Entonces solo voy a romper estos elementos en dos nuevas líneas como esta. Y voy a romper el texto dentro de esto, una etiqueta en nuevas líneas también. Lo que voy a hacer es envolver este texto en una etiqueta span, que es sólo una especie de elemento genérico en línea que podemos usar. Entonces solo voy a disparar la envoltura con abreviatura comandada. Envuelve eso en un lapso y lo guardaré. Y se puede decir que no lo hice, esta etiqueta span no ha cambiado nada aquí porque este es un elemento en línea, es básicamente como la versión en línea de un div. No agrega ningún estilo en particular ni nada, solo nos da una manera de apuntar a parte particular de nuestro contenido y luego darle estilo. Entonces saltaré a estilos. Y después de este encabezado H1, estilo out dot header H1. Y luego voy a apuntar a este lugar. Entonces, vamos a engendrar aquí. Simplemente configura eso para que no se muestre ninguno. Guarda eso. Podemos decir que el texto ahora está desaparecido, aunque todavía está en la página para SEO, para motores de búsqueda y cosas así. Entonces después de esto, voy a agregar una etiqueta de imagen escribiendo en IMG hit tab on. Nuestra imagen va a ser slash assets slash image slash orange dot PNG. Por lo que en el atributo fuente se agregará barra inclinada activos IMG slash naranja dot PNG en el atributo alt o simplemente agregar naranja. Guarda eso. Ya podemos ver el naranja en la página. No obstante, se ve un poco grande. Entonces solo voy a agregar un atributo width a esta imagen. Y de hecho, usemos CSS para hacer eso. Esa es la forma más correcta de hacer esto. Entonces aquí es donde estamos apuntando ese spot está en el H1. Entonces agreguemos una regla después de ese encabezado de punto H1 y luego yo y j estableceré el ancho a, digamos 30 píxeles, y lo guardaré. Esta imagen es ahora de 30 píxeles. Esta imagen ha hecho que nuestro encabezado sea un poco más alto. Y aunque la imagen es el centro vertical de este encabezado, estos elementos de la izquierda, no estoy del todo en el centro. Podemos arreglar esto agregando una propiedad flex a nuestro elemento flex, que es este elemento de restricción que está aquí, que está dentro del encabezado. Por lo que en este selector de restricciones de encabezado, podemos agregar una nueva propiedad llamada alinear elementos. Y si ponemos eso para censurar, salvo eso, ahora podemos ver que todos estos elementos en nuestra cabecera ahora en el centro vertical. De acuerdo, entonces creo que hemos terminado con este encabezado por ahora en términos de CSS. 21. Producto: texto e imagen Side a Side (CSS): Añadamos un poco de estilo a la lista de productos ahora, si solo salto de vuelta a ti la página terminada, lo que queremos hacer es mejorar los estilos de todos los encabezados. Párrafo hacia fuera algunos estilos para los botones. Y queremos volver a usar display flex para mostrar todas estas cosas tecnológicas sobre la izquierda, sobre la imagen, sobre la derecha. Y también queremos constreñir el contenido a la mitad de la página, que como hicimos con nuestros elementos de cabecera. Por lo que sólo saltaré de nuevo a nuestra página. Y lo primero que queremos hacer es contentarnos. Y podemos usar esa clase de restricción que agregamos antes. Sección reutilizable. Podemos usar esa clase en este elemento de sección porque todos nuestros artículos de productos van a estar dentro de ese elemento. Por lo que sólo podemos hablar de clase a esta sección. Por lo que la clase es igual a restricción. Guarda eso. Y ahora todo el contenido del producto está limitado a la mitad de la página a un ancho máximo de 960 píxeles. Y por cierto, la razón por la que usamos max-width en esta clase en lugar de solo width, es porque si la ventana se vuelve más pequeña que 960 píxeles, que el div se escala hacia abajo, pero no se hará más grande, una más ancha, yo debería decir, 960 píxeles. De acuerdo, entonces hemos limitado nuestro contenido. Ahora queremos usar display flex para mostrar todo este texto apagado a la izquierda, en la imagen a la derecha. Entonces voy a saltar a la maqueta para este artículo. Y si establecemos este artículo para mostrar flex, que hará que todos sus hijos directos se muestren uno al lado del otro en una fila. Y no queremos que los H1 y H2 y la etiqueta de párrafo todos de lado a lado yendo de izquierda a derecha, sólo queremos todos los textos de estos botones a la izquierda, la imagen, a la derecha. Entonces dentro de este artículo, voy a agregar un div y le daremos una clase de productos dignos, textos de guión, tina. Colocaré todo el contenido de texto en estos enlaces de navegación dentro de ese div. Y entonces también rodearé esta imagen dentro de un div. Y le daremos a esto una clase de productos, imagen de guión, mover la imagen hacia arriba a ese div. Voy a guardar eso. Y ahora queremos configurar este elemento de artículo para mostrar flex, lo que convertirá este elemento en una fila y mostrará este div con nuestro texto en este div con nuestra imagen lado a lado. Entonces primero solo voy a añadir una clase a este artículo. Simplemente lo llamaré producto. Y agregaremos algo de CSS a este elemento. Entonces agreguemos una nueva sección de CSS con un comentario, y solo pondré producto ahí. Por lo que queremos apuntar a la clase de producto. Si lo tenemos a este elemento de artículo, queremos configurar esto para mostrar, flex, guardar eso. Y ahora podemos ver todo el material tecnológico ha terminado a la izquierda y la imagen ha terminado a la derecha. Solo para asegurarnos tanto el concepto de textos en la imagen verticalmente centrado, podemos volver a utilizar la propiedad align items. Por lo tanto, establecer que a sensor deben estar alineados elementos. Entonces tengo que centrarme. Y podemos ver que el texto en la imagen están ambos centrados verticalmente. 22. Producto: Borde y posicionamiento (CSS): No quiero mostrar un pequeño borde entre cada producto. Entonces voy a agregar una propiedad de fondo de borde, que agregará un borde justo en la parte inferior de este elemento de producto. Voy a establecer esto en un píxel, lo que básicamente significa que el borde tendrá un píxel de espesor. Entonces dos sólidos, lo que significa que habrá un borde sólido porque también podemos establecer esto a discontinua. Un par de otros diferentes. De lo que usualmente usamos sólido. Entonces un píxel sólido y luego especificamos el color. Y voy a ponerlo a CCC. Guarda eso. Ahora tenemos esta pequeña frontera. Y creo que podríamos hacerlo un poco de relleno en la parte superior e inferior de cada producto o que tengamos una bonita brecha entre el contenido en la frontera. Por lo que también añadiré una propiedad de relleno aquí, casi en el relleno superior e inferior, digamos un 100 pixels y el relleno izquierdo y derecho a solo 0. Entonces guardaré eso. Ahora tenemos un poco de espacio en la parte superior y la parte inferior están ahora mismo este texto de la izquierda, en esta imagen de la derecha, no soy 5050. El TextContent es un poco más ancho que el concepto de imagen. Lo que necesita ser 5050. Entonces lo que podemos hacer es dirigir tanto el texto del producto div en el div imagen del producto como otra propiedad a esos. Y si queremos apuntar a diferentes selectores a la vez, sólo podemos hacer eso así. Por lo que queremos apuntar a los textos de producto DIV, Déjame solo añadir una coma y luego añadir nuestro segundo selector para el producto image div. Por lo que punto-producto texto coma luego adoptar productos dash image. Podemos usar la propiedad flex para decirle a estos elementos cómo, por qué deben estar en esta cuerda de flujo y si deben crecer o encogerse. Por lo que la propiedad flex tiene tres valores. El primer inmueble determina el ancho base del elemento y queremos establecerlo en 50 por ciento. El segundo valor determina si este elemento debe crecer. Y tampoco quiero que estos elementos crezcan en ellos para quedarse 5050. Entonces voy a poner 0. Y entonces el tercer valor determina si este elemento debe encogerse, y no quiero que se encoja. Entonces de nuevo, pondremos eso a 0 en el punto y coma, salvo que estos sean ahora 5050. No quiero asegurarme de que esta imagen ocupe el espacio completo de este 50% de esta fila. Por lo que sólo voy a apuntar a esta imagen. Por lo que un montón de otro selector aquí. Entonces quiero apuntar al div imagen del producto de punto, y luego quiero apuntar a la imagen dentro de ella, que es esta imagen de aquí. Queremos establecer el ancho en un 100 y luego guardarlo para asegurarnos de que esta imagen siempre llene el espacio disponible en este 50% de la fila que este div está ocupado. 23. Producto: estilos de texto (CSS): De acuerdo, entonces ahora vamos a mejorar los estilos de nuestros textos aquí, estos dos encabezamientos de este párrafo. Entonces después de este selector, voy a apuntar a esta página etiqueta warm. Entonces voy a adoptar texto de producto, uno porque queremos apuntar a uno que está en este div con una clase de texto de producto. Voy a establecer el tamaño de la fuente en 48 píxeles. Hagamos esto bonito y grande. Guarda eso. Vamos a reducir el margen por debajo de este rubro del abeto. Entonces voy a establecer el margen inferior a 25 píxeles. Guarda eso. Y eso acerca un poco este rumbo al primer escenario. Ahora voy a cambiar el tamaño de fuente de este segundo encabezamiento. Entonces muchos nuevos productos selectivos, textos holandeses que H2, porque esto es un H2 y vamos a ajustar el tamaño de la fuente a 21 píxeles y guardar ese último poquito más pequeño. Ahora bien, no quiero establecer el tamaño de fuente de este párrafo al mismo tamaño que el segundo encabezado. Por lo que permitieron los textos de guión de producto y luego pagar causa esta es una etiqueta de párrafo, etiqueta p. Vuelve a establecer el tamaño de la fuente en 21 píxeles y guárdalo. Y lo podemos hacer con un poco más de espacio entre las líneas de este párrafo. Y lo podemos hacer con la propiedad de altura de línea. Entonces si ponemos esto a uno, guárdalo, esto lo haré básicamente no hay espacio entre líneas. Entonces voy a aumentar esto a 1.4 y ahorrar eso. Y vamos a ver un poco más fácil de leer con ese poco de altura de línea. De acuerdo, vamos a marcar un poco estos enlaces de navegación. Nos desplazaremos hacia abajo hasta la clase de postgrado maqueta a este elemento nav. A este producto le llamamos guión suficiente. Guarda eso. Usaré esta clase para darle estilo a estos enlaces un poco. Por lo que mucho el selecto tanto la imagen del producto. Porque en general intentas mantener tus estilos en el orden de los elementos que están en tu página. Por lo que permitió el selector aquí. Entonces vamos a apuntar a los productos. Voy a apuntar a la UL dentro de eso, la lista desordenada. Deshacernos de estas balas. Voy a establecer la propiedad de estilo de lista en NADH y guardar eso. Voy a eliminar el margen predeterminado y el relleno y el margen y el relleno a 0 para que estos aliados dentro de la pantalla UL uno al lado del otro, voy a configurar esta URL para que muestre flex también. Así que mucho. Display flex y decir que estos artículos ahora están uno al lado del otro. Acabo de tener un poco de margen a la derecha de cada uno de estos lagos. Entonces vamos a apuntar al elemento de navegación del producto, la URL, y luego a la etiqueta a dentro de eso. Porque se puede ver que tenemos estas a etiquetas dentro de cada uno de estos aliados. También podrías agregar el margen al elemento LI si quieres. Yo lo voy a agregar a la etiqueta a. Sólo vamos a poner esto al margen ¿verdad? Establezca eso en 20 píxeles, guarde eso. Ahora tenemos un poco de espacio entre estos enlaces. 24. Botones (CSS): De acuerdo, vamos a añadir un poco de estilo para nuestras cajas ahora hacer que estas se vean bonitas. Por lo que salté a la página terminada. Tenemos estos bonitos estilos de botones. Tenemos una caja naranja alrededor de un botón blanco con algunos efectos bonitos hover, animaciones. Y tiene sentido agregar estas clases de una manera reutilizable porque simplemente vuelve a cargar la página más adelante. Vamos a estar agregando estas cookies con j, y tenemos el mismo botón de estilo aquí también. Entonces voy a saltar de nuevo a nuestra página. Agregaremos una clase a cada una de estas a tags, estas etiquetas de anclaje de botón. Y por cierto, hice una selección múltiple ahí colocando mi cursor y manteniendo presionada la tecla Alt y volviendo a hacer clic. Esto nos permite escribir en dos lugares al mismo tiempo. Y la cotización corta podría ser diferente en tu plataforma. Entonces solo revisa la hoja de trucos. De acuerdo, Así que agreguemos algo de estilo para esta clase de Boltzmann. Esto va a ser reutilizable, así que lo ponemos en nuestra sección de reutilizables. Botón Así punto. Por ahora sólo voy a hacer estos dos botones naranja por este, pero crearemos uno naranja sobre uno blanco más adelante. Por lo que queremos establecer un color de fondo. Entonces voy a agregar una propiedad de color de fondo, y voy a poner esto en áspero E F6 900. Voy a guardar eso. Y por cierto, puedes usar este pequeño selector de color si quieres escoger un color diferente. Yo quiero que el color del texto en estas botellas sea blanco. Entonces voy a establecer la propiedad de color en blanco, guarde eso. Y no quiero quitar estos subrayados. Entonces como lo hicimos antes, voy a poner decoración de texto para que no elimine esos subrayados. Va a añadir un poco de relleno a estos botones. Por lo que mucha propiedad de relleno y permitió ocho píxeles de relleno a la parte superior e inferior, 16 píxeles de relleno a la izquierda y a la derecha, ahora tenemos un relleno iceberg. No quiero agregar algunos bordes redondeados. Estos botones, puedes ver aquí. Y lo podemos hacer con la propiedad de radio fronterizo. Por lo que queremos establecer el radio fronterizo. Vamos a ponerlo en 20 píxeles. Guarda eso. Y ahora tenemos estos lindos bordes redondeados. Yo quiero tener botones naranja y botones blancos, no solo botones naranjas. Entonces tenemos uno naranja, el blanco. Entonces lo que podríamos hacer es que podríamos tener nuestros estilos básicos de botones en esta clase de botones. Y luego podríamos tener algunas clases adicionales para cambiar los colores de los diferentes botones. Por lo que además de esta clase de hueso sin un espacio en la parte inferior, otra clase a ella, le añadiré una clase de botón de color naranja discontinua, y añadiré en este botón Aprender más el cual queremos ser blanco. Mucha clase de botón dash, blanco. Guarda eso, y volveré mucho a los estilos de botones. El selector naranja Watson, y moveremos nuestras propiedades de color de fondo, color hacia abajo a este selector. Y si guardo eso, ahora sólo vemos esos colores en este botón de la izquierda, que tiene botón clase naranja. Agregaremos un selectivo para el Watson blanco. Watson corrió mancha blanca y sólo va a ser blanca. Entonces pondré el color de fondo en blanco. Pondré el color al mismo color naranja que tenemos en el fondo de este botón. Entonces copiaré este código de color y pegaré eso ahí. Y esto se ve bastante bien ahora. Por lo que ahora solo necesitamos algunos efectos de flotar en estos botones. Por lo que después del selector naranja Watson, vamos a añadir un pseudo selector hover. Por lo que pone industria colon naranja flotar, colóquela. Vamos a cambiar ligeramente el color de fondo. Sólo voy a copiar este código de color, pegarlo aquí. Y luego veré si puedo usar este selector para seleccionar un color naranja más claro. Entonces solo moveré la cosa, la lista de gastos generales, una especie de naranja claro y veamos cómo se ve eso. Sí, eso se ve bastante bien. Añadamos un color flotante para nuestra pizarra blanca pronto también. Por lo que después del botón selector blanco agregará botón dash y, colon flotar. Voy a establecer el color de fondo. Simplemente le daré un color gris claro. Entonces solo usaré un código de color críticas antes, que son tres e's. Es casi blanca pero no del todo. Y eso se ve bastante bien. Queremos agregar transiciones a estos flotadores como hicimos en nuestros enlaces en el encabezado. Por lo que podemos simplemente usar esta clase de botón, que está en ambos botones en la propiedad de transición. Y queremos transitar la propiedad de color de fondo. Entonces con ese color de fondo. Y de nuevo, haremos que esa transición no dure 0.3 segundos. Guarda eso. Ahora tenemos un bonito efecto hover en cada uno de estos botones. Estos botones se ven un poco cerca del párrafo de ahí. Entonces solo voy a añadir un poco de margen a la parte superior de este elemento nav. Entonces vamos a encontrar el selector CSS para eso. Por lo que no tenemos un selector para el producto nav directamente. Entonces añadiré eso aquí. Dash de producto suficiente, margen superior o se probó 20 píxeles, tal vez 30 píxeles. Sí, eso se ve un poco mejor. Ahora tengo un poco de espacio entre los elementos de navegación, Este texto, y tenemos bastantes textos aquí en este párrafo. Entonces sólo voy a quitar un poquito de ese texto. Y por defecto, texto en tu editor en VSCode, solo seguiremos moviéndonos hacia la derecha así en una línea. Pero podemos hacer que el texto se envuelva en varias líneas si vamos a Ver y luego alternamos el envoltorio de palabras, o puedes usar el atajo de teclado. Y el impuesto en este párrafo ahora es todo envoltorio. Entonces sólo voy a deshacerme de un poquito de este texto, tal vez tanto. Voy a guardar eso. Eso se ve un poco mejor ahora. 25. Añade más productos (HTML y CSS): De acuerdo, Nuestro producto, este entonces se ve bastante bonito ahora. Por lo tanto, agreguemos algunos productos más a nuestra página. Entonces voy a seleccionar todo el elemento del artículo y copiar eso. Pega otro después, y luego otro. Otra vez. Voy a guardar eso. Y ahora podemos ver tres productos en la página. Voy a cambiar este segundo producto, dos productos diferentes con una imagen diferente. Entonces voy a saltar de nuevo al sitio pixabay y buscaré un MacBook. A ver, podemos encontrar una bonita foto de un MacBook. Este se ve bastante bien. Entonces cuando haga clic en eso, descarga que voy a abrir mi barra lateral, arrastra esta imagen a nuestra carpeta de imágenes. En la carpeta de activos. Voy a cambiar el nombre de este archivo a overbook dot PNG. Entonces cerraré esta imagen y ocultaré la página de la barra lateral de nuevo en la pantalla. Entonces voy a cambiar el producto medio. Entonces el artículo medio, voy a cambiar el atributo fuente en esta imagen a la imagen que acabamos de descargar, que es barra barra de activos 0 book dot PNG. Y cambiaré el texto antiguo a 0 libro también. Diga que ahí podemos ver esa imagen. Y voy a cambiar el texto aquí por el nuevo OH, libro. Y este, me voy a cambiar increíble a increíble. Voy a guardar eso. Por lo que ahora tenemos dos productos diferentes fuera para ser buenos si pudiéramos revertir el orden en algunos de estos productos para que la imagen esté a la izquierda y el texto esté a la derecha. Una forma en que podríamos hacer eso es simplemente intercambiando alrededor de estos dos divs. Entonces intercambiando la imagen del producto y el texto div así, y podríamos hacerlo de esa manera. lo que en realidad podríamos hacer esto con CSS. Entonces sólo vamos a deshacer eso y ponerlos de vuelta donde estaban. Guarda eso. Y usamos CSS para hacer esto en su lugar. Entonces lo que vamos a hacer es en este medio productos, en esta etiqueta de artículo con una clase adicional llamada productos reversa. Y vamos a usar esta clase para revertir los elementos de esta fila flex. Por lo que la imagen está a la izquierda, en el texto está a la derecha. Entonces saltaré de nuevo a nuestro CSS. Después de este selector de producto, voy a agregar productos de punto inverso para revertir el orden de los artículos. Esta fila flex, sólo podemos agregar una propiedad de dirección flex y establecer esto en fila dash reverse. Y eso lo guardaré. Podemos decir que estos dos elementos en esta fila flex de ahora cambiaron. El espaciado entre estos productos se ve bastante bonito. Creo que tenemos un poco demasiado espacio en la parte superior del primer producto aquí, hay un poco demasiado espacio entre el concepto aquí en el encabezado, pero todavía quiero mantener el relleno que está en la parte superior de todos los demás artículos. Entonces, ¿cómo podemos hacer eso? Bueno, podemos usar otro pseudo selector, que es el primer selector infantil. Por lo que este artículo aquí es el primer hijo de este elemento de sección. Podemos utilizar el primer pseudo-selector infantil para seleccionar sólo este artículo, este primer artículo. Entonces volveré a saltar a los estilos. Después de este selector de producto, voy a adoptar productos y luego un colon y luego primero dash child. Por lo que esto sólo seleccionará al primer hijo, que tiene una clase de producto. Entonces justo este producto aquí. En este primer producto, solo voy a reducir el acolchado superior. Por lo que voy a poner escritorio. Probemos 20 píxeles, guarde eso. Y eso se ve un poco mejor ahora. Y también quiero leer esta frontera del último producto de la lista. Entonces el último hijo, y también tenemos un último pseudo-selector hijo que podemos usar hacer eso. Entonces solo voy a duplicar este primer selector infantil manteniendo presionadas Alt y Shift y presionando nuevamente hacia abajo en Windows, atajo podría ser diferente. Voy a cambiar esto por último hijo y sólo voy a quitar la frontera a este último niño. Por lo que estableceré fondo de guión de borde para asentir. Voy a guardar eso. Y ahora podemos ver esa frontera desaparecer en el último producto, pero aún podemos ver la frontera en la parte inferior de los otros dos productos. De acuerdo, así que estoy contento con este anuncio de producto ahora. Piensa que se ve bastante bien. 26. Footer (CSS): Así que acabemos de terminar peinando esta fosa. Esto va a ser realmente sencillo. Si miro la página terminada, sólo tenemos un borde todo el camino al otro lado de la parte superior y un poco de relleno alrededor de ella. Entonces lo primero que queremos hacer es constreñir el concepto de las manchas una causa. Se puede ver este texto está justo sobre la izquierda aquí. Entonces lo que vamos a hacer es saltar al marcado para la fosa, que está aquí. Y quiero que esta foto tenga una frontera todo el camino al otro lado de la parte superior de la foto. Pero se puede ver aquí. Por lo que quiero que esta frontera vaya más allá nuestra zona constreñida todo el camino de izquierda a derecha. Por lo que no queremos agregar una restricción a la fosa. En cambio queremos agregar un div dentro de esta agua, poner este contenido dentro de ese div, y luego agregar la clase de restricción a ese div. Por lo que un montón de div con una clase de constreñido. Y vamos a mover este contenido abierto a eso y guardar eso. Saltar de nuevo a la página. Este contenido ahora está constreñido. Está en línea con el otro contenido. Añadamos un poco de estilo a esta agua. Y de nuevo, no queremos apuntar al elemento de pie de página porque podría tener otras fuerzas en nuestro sitio web. Entonces agreguemos una clase de agua a este pie de página, y usaremos esta clase en su lugar. Entonces saltaré a nuestros estilos. Mucho comentario nuevo que dice foto. Y vamos a apuntar al pie de página. Y sólo voy a añadir un borde de sólido de un píxel. Y usaremos ese color gris claro tan duro CCC. Y guarde eso, ya podemos ver esa frontera. Yo sólo necesitaría agregar un poco de relleno también. También lo son la propiedad de relleno. Se me permiten 20 píxeles de relleno en la parte superior e inferior y luego 0 en la izquierda y la derecha. Guarde eso. Esta foto ahora tiene un poco de relleno a su alrededor. 27. Mover CSS a archivo separado (CSS): De acuerdo, así que terminamos con CSS por ahora, aunque vamos a añadir un poco más más adelante. Pero básicamente terminamos de peinar nuestra página y se ve bastante bonita, pero tenemos mucho estilo. Aquí te presentamos nuestra página HTML. Esto es bastante largo y está haciendo que nuestra página HTML sea un poco desordenada. No suele ser así como agregamos estilos a una página web en una etiqueta de estilo como esa, lo que solemos hacer es poner nuestro CSS en un archivo separado. Y hay muchas razones para hacer esto. Mantiene organizado nuestro proyecto. Y también si mantenemos nuestro estilo en línea, la página HTML así, entonces cuando creemos más páginas, por ejemplo, más adelante vamos a crear una página sobre. Entonces cada vez que queremos cambiar los estilos, tendríamos que cambiar los estilos en esta etiqueta de estilo tanto en la página index.html como en la página sobre también, lo que sería una pesadilla. Entonces vamos a mover todos estos CSS a un archivo separado. Entonces voy a mostrar la barra lateral. Dentro de la carpeta de activos, crearé una nueva carpeta llamada CSS. Entonces dentro de eso, cuando creo un nuevo archivo llamado styles.css, y no necesitas usar este nombre. Este archivo sí necesita terminar en punto CSS. Voy a saltar atrás. Index.html copiará todo lo que hay dentro de esta etiqueta de estilo. Entonces seleccionaré todo eso manteniendo pulsada Mayús y haciendo clic en la parte inferior. Y en realidad voy a cotizar mucho, y voy a quitar esta etiqueta de estilo. Guarda eso. Nuestra página se ve terrible otra vez. Pero no te preocupes porque lo vamos a pegar en este archivo style.css. Simplemente voy a sangrar esto de vuelta a la izquierda manteniendo presionada Shift en la parte superior. Voy a guardar eso, vuelve a index.html. Ahora necesitamos tirar este archivo CSS a esta página HTML, que va a ocultar la barra lateral. Podemos hacerlo agregando una etiqueta de enlace a nuestra cabeza. Y si solo empiezo a escribir en link y presiono Enter, automáticamente agregará un bosque de enlace de hoja de estilo. Por lo que está tirando de un archivo CSS. Simplemente queremos agregar una etiqueta de enlace al encabezamiento de este atributo rel y configurarlo en hoja de estilo para que el navegador sepa que se trata de una hoja de estilos. Déjame solo querer establecer este atributo href odia a la ruta de nuestro archivo CSS. Y nuestro archivo CSS es dot slash assets slash css style.css. Y si guardo eso, deberíamos ver un peine de sitio web, hermoso de nuevo, que sí. 28. ¿Qué es JavaScript?: De acuerdo, pasemos a JavaScript ahora. Entonces si HTML le dice al navegador qué elementos mostrar en la página, y CSS le dice al navegador cómo deben verse esos elementos y cuál es el flip, ¿cae JavaScript? Bueno, javascript es un lenguaje de scripting que nos permite hacer que las cosas realmente sucedan en nuestra página, como mostrar un elemento u ocultar un elemento, o cargar algún contenido dentro de una parte particular de la página. Podemos usarlo para crear carruseles, galerías de imágenes animadas, y cosas así. Y también nos permite escuchar la entrada del usuario, responderla, como cuando el usuario hace clic en un botón o cuando el usuario se desplaza por la página, o si el usuario droga en elemento o algo así. Entonces una cosa simple que podemos hacer con JavaScript en esta página es mostrar un banner de cookies en la parte inferior de la página. Después de un par de segundos, podríamos añadir un botón a ese banner. Y luego cuando el usuario haga clic en ese botón, entonces podemos ocultar el banner con JavaScript. 29. Añade etiquetas de Script (JS): La forma más rápida de JavaScript a tu página es simplemente agregar una etiqueta de script a tu archivo HTML. Y podemos añadir una etiqueta de guión ya sea en la cabeza o en el cuerpo. No obstante, todo en tu página HTML se cargará de arriba a abajo. Entonces si tienes un archivo JavaScript realmente grande que se está cargando en tu cabeza, entonces el navegador esperará a que ese archivo JavaScript se cargue antes de que comience a cargar todos los elementos de tu página. Por lo que colocar JavaScripts en tu cabeza en realidad puede impedir que se carguen los elementos de tu página. Por lo que una práctica común es colocar tus etiquetas de guión en la parte inferior de tus etiquetas de cuerpo. Entonces agreguemos una etiqueta de guión justo en la parte inferior de nuestro cuerpo. Por lo que solo necesitamos agregar una etiqueta de script como esta, etiqueta de apertura y cierre. Y podemos colocar todo nuestro JavaScript aquí. 30. Espera a y cargado de página (JS): Antes de empezar a disparar JavaScript, mostrando cosas en la página, queremos asegurarnos de que toda nuestra página se haya cargado. Y podríamos hacerlo agregando un oyente de eventos a nuestro documento, a nuestra página. Entonces dentro de la etiqueta de guión, primero queremos llegar al documento, y simplemente lo hacemos escribiendo en documento. Y luego queremos agregar un oyente de eventos al documento. Y para ello, disparamos un método llamado oyente de eventos de Arte. Por este evento oyente sobre necesitas asegurarte de capitalizar la a y la L. Y luego añadimos paréntesis como este. Este método espera dos parámetros y separamos parámetros con comas. Y el primer parámetro es el evento que queremos escuchar. Tenemos que poner las mismas cotizaciones. Puedes utilizar las cotizaciones simples o las cotizaciones dobles en el evento que queremos escuchar es el contenido DOM cargado. Evento en DOM solo significa Document Object Model, que básicamente solo significa tu página HTML en todos los elementos. Por lo que queremos disparar algún código después de que este evento haya sido activado por el navegador. Por lo que agregamos un segundo parámetro aquí agregando una coma. Yo sólo voy a estirar un poco esto. Y lo que queremos hacer aquí es disparar una función. Entonces agregamos función y luego paréntesis, y luego un espacio, y luego dobles llaves alineadas. Y luego con tu cursor dentro de estas llaves dobles acaba de golpear editor. Ahora podemos activar algún código dentro de esta función después de que se haya activado este evento cargado de contenido DOM. Entonces básicamente, después de que todo en nuestra página se haya cargado, solo para asegurarme de que esto está funcionando, solo voy a encender un inicio de sesión de consola. Estos son registros de usuario no ve lo que podemos ver aunque en nuestro navegador, en nuestro DevTools. Y es solo una manera realmente útil para que descubramos si las cosas están funcionando y nuestro JavaScript. Entonces para apagar un log, solo a través de la consola dot log y solo vamos a cerrar sesión algún texto aquí. Por lo que queremos poner algunas citas dentro de estos paréntesis. Y puedes usar comillas simples o dobles. Y yo sólo voy a cerrar sesión. Dom está, estoy listo y eso lo guardaré. Y si volvemos al navegador y abrimos nuestras herramientas de desarrollo, recargamos la página. Podemos ver en nuestra consola aquí, DOM está listo. Y si no puedes ver esta consola cuando tal vez solo necesite presionar la tecla Escape. Puedes darle un círculo con la tecla Escape así. 31. Banner de galletas: HTML: De acuerdo, entonces antes de añadir algo más de JavaScript aquí para mostrar un banner de cookies, va a necesitar realmente crear un cookies estado usando HTML y CSS primero. Entonces vamos a añadir un poco de HTML para nuestras cookies sido, así que después de salir, qué, voy a añadir un elemento de sección con una clase de cookies, manera holandesa, colocaré nuestras cookies pero nuestro contenido aquí, y sólo voy a añadir el encabezado H1 en. Simplemente pondré los textos. Este sitio web utiliza cookies y luego mucho párrafo con algún texto dentro de él. Esto es realmente molesto, inútil. Banner de galletas. Guarde eso. Yo me desplazaré hacia abajo. Y podemos ver esto al fondo ahora. Y también vamos a necesitar un botón en el que el usuario pueda hacer clic para cerrar este banner. Ya montamos algunas clases para personas. Esta clase de botón en la parte inferior, clase naranja para un botón naranja. Entonces voy a bajar de nuevo a este banner, Ladd an, una etiqueta. Y pondré el borrador de odio a solo hash porque este botón no se va a enlazar a ningún lado. Simplemente va a desencadenar algo de JavaScript. Tenemos que sumar estas clases. Por lo que mucho vaso de agua y una clase de botón holandés, naranja. Simplemente pondremos los textos, ropa dentro de esta etiqueta. Y diré que ahí podemos ver ese botón de cierre. 32. Banner de galletas: CSS: Y lo primero que queremos hacer es constreñir el contenido que hay dentro de este panel porque va de la derecha a la izquierda así. Entonces vamos a meter un div dentro de estas cookies parte arriba con nuestra clase constreñida, que hemos estado usando para constreñir concepto. Y moveré todo lo demás dentro de ese div y guardaré eso. Este contenido ahora está constreñido. Entonces agreguemos algo de estilo a este banner de galletas. Por lo que podemos usar esta clase de banner de cookies para agregar algún estilo. Por lo que saltaré al fondo de style.css permitido una nueva sección aquí con un comentario que dice cookies banner se dirigirá a la clase de banner de cookies. Le daré un fondo gris oscuro como un encabezado. Por lo tanto, establece el color de fondo al mismo color. Ella 333. Diga que ahora tiene un fondo gris. No obstante, ahora no podemos ver el texto, así que vamos a darle al texto un color claro. Entonces mucha propiedad de color, y pondré esto en d, d, d, Entonces un color gris claro porque este encabezado en este párrafo dentro, estas cookies fueron un elemento, esta propiedad de color en la que nos hemos sentado esta sección de bonos de cookies está en cascada ahora a los elementos dentro de ella. De acuerdo, así que voy a añadir un poco de relleno de esta manera. Por lo que agregaremos una propiedad de relleno, una gran cantidad de 30 píxeles de relleno a la parte superior e inferior en 0, relleno a la izquierda y a la derecha. Guarda eso. Y ahora tenemos un poco de espacio en la parte superior y en la inferior. En este momento este banner está justo al final de nuestra página. Entonces si estamos justo en la parte superior de nuestra página, no lo vemos. Por lo que queremos que se fije al fondo de la página independientemente de dónde estemos en este documento. Entonces aunque estemos justo en la parte superior, deberíamos poder ver esta pancarta aquí abajo. Podemos hacer esto usando la propiedad de posición. Por lo que voy a agregar una propiedad de posición a la llana. Y queremos poner esto a arreglado. Y eso lo guardaré. Ahora contamos ver el banner en la página porque necesitamos decirle al navegador a dónde se debe fijar este elemento. Por lo que queremos que se fije al fondo. Por lo que podemos usar la propiedad inferior, establecer eso en 0 porque queremos arreglar este elemento a 0 píxeles desde abajo. Entonces básicamente justo en la parte inferior. Entonces guarde eso, ya podemos ver que este banner está fijo al fondo. No obstante, ahora ya no ocupa todo el ancho de la página. Porque cuando hacemos un elemento fijo, por defecto, sólo ocupará el tamaño del contenido que hay dentro de él. Por lo que ahora necesitamos establecer explícitamente el ancho de este elemento. Eso lo puedo hacer con la propiedad width. Queremos establecer el ancho en un 100 por ciento. Eso lo ahorraremos. Ahora ocupa todo el ancho de la página. Tenemos un poco más de espacio en la parte superior de este banner que en la parte inferior. Y eso probablemente sea porque este rumbo de aquí. Por lo que el margen superior en él. Por lo que sólo voy a hacer clic derecho en este rubro y podemos dar click en Inspeccionar. Por lo que saltas directamente a este elemento en nuestro inspector de elementos en el DevTools. Y podemos ver aquí que la hoja de estilo del agente de usuario está agregando algún margen superior e inferior a este encabezado. Entonces solo voy a agregar una nueva regla aquí para apuntar no a H1. Por lo que las cookies han sido un H1 y acabaremos de establecer el margen top 200. Ahora tenemos una cantidad igual de espacio en la parte superior e inferior. Y quiero que este botón termine a la derecha aquí en lugar de debajo de los textos. Y de nuevo, podemos usar display flex para hacer esto. Entonces solo voy a saltar a nuestro marcado en index.html. Entonces queremos este texto, este H1 y este P. Así que estarás más a la izquierda es una etiqueta para estar más a la derecha. Entonces lo que podríamos hacer es establecer esta restricción si para mostrar flex y luego colocar nuestros textos en un día y luego colocar este botón y un div. Y entonces deberíamos tener un div con el texto encima a la izquierda. Quiero div con el Watson por encima de la derecha. Entonces solo voy a rodear el texto en un div con una clase de cookies, sido un sext o mover el del stock P en selectivo y muchos otros div con una clase de cookies Dash button. Y colocaremos nuestro botón dentro de eso, y lo guardaré. Y ahora queremos establecer este div con la clase de restricción para mostrar flex, pero sólo cuando está dentro de esta sección con una clase de cookies madre. Así que salta de nuevo a style.css, desplácese hacia abajo hasta la parte inferior. Por lo que mucha nueva regla aquí. Entonces queremos hacer galletas, pintor holandés, y quizá quiera apuntar a esa clase de restricción. Entonces no constreñan. Y queremos configurar esto para mostrar flex. Guarda eso. Y ahora podemos ver el texto a la izquierda, los barcos y a la derecha. Pero queremos agregar espacio entre todos los elementos que están en esta fila flex. Entonces como lo hicimos antes, podemos usar la propiedad justifique contenido y acomodarse al espacio entre. Voy a guardar eso. Y ahora se acabó el botón a la derecha. Y ahora tenemos un poco más de espacio en la parte inferior de este binario que tenemos la parte superior. Y creo que eso es porque este párrafo está agregando algún margen inferior, sólo va a hacer clic derecho en ese párrafo, haga clic en Inspeccionar. Y sí, sí tiene algún margen en la parte inferior el cual está siendo agregado por la hoja de estilo del agente de usuario. Por lo que después de esta página, un estilo apuntará a la etiqueta de párrafo dentro esa sección de banner de cookies y establecerá el margen inferior en 0. Guarda eso. Y esto se ve bastante dulce ahora. 33. Oña banner de galletas con CSS: Entonces en este momento este banner siempre se muestra en la página, pero no queremos que siempre se muestre en la página. Queremos que se oculte por defecto y luego muestre en la página después de un par de segundos. Entonces lo que podríamos hacer es usar CSS para empujar este elemento de la parte inferior de la página para que no lo podamos ver. Y luego podríamos usar nuestro JavaScript para agregar una clase al elemento después de un par de segundos. Y podríamos usar esa clase CSS para tirar del banner de nuevo a la página. Entonces, en primer lugar, vamos a empujar este elemento de la parte inferior de la página usando CSS por defecto. Y podríamos hacer esto usando la propiedad transformada, que es una propiedad que nos permite mover elementos alrededor, cambiaron su ancho y altura y cosas así. Por lo que voy a agregar una propiedad llamada Transform y presionar Enter. Y podríamos hacer una serie de cosas diferentes con transform, podemos rotar elementos y escalar elementos aparte hacia abajo elementos sesgados, donde vamos a utilizar esta propiedad translate y, que nos permitirá cambiar la posición vertical, la posición y del elemento. Entonces vamos a usar este translate y propiedad. Y si solo meto el 50 por ciento aquí y guardo eso, se puede ver que ha empujado la pancarta a mitad de la parte inferior de la pantalla. Entonces ahora sólo podemos ver la mitad de la pancarta, pero vamos a empujarla todo el camino hacia fuera. Entonces vamos a cambiar esto a un 100 por ciento. Y eso lo guardaré. Y ahora ya no podemos ver el estandarte. 34. Crea una clase para mostrar la banner de cookies: Entonces lo que vamos a hacer ahora es configurar una clase CSS, que tira el banner de nuevo a la página. Y luego más adelante vamos a usar JavaScript para agregar de nuevo clase al elemento después de un par de segundos, los que muestran el banner en la página. Entonces después de este selector de balance de Cauchy, voy a añadir galletas dash, banner que voy a añadir sombra oscura. Por lo que básicamente estamos apuntando al elemento de banner de cookies cuando tiene agregada una clase de show, que no lo hace por defecto, pero vamos a agregar esa clase con JavaScript. Y lo que queremos hacer es cambiar de nuevo esta propiedad transformada. Entonces copiaré eso y lo pegaré aquí. Y queremos establecer este Traducir Y en 0%, lo que lo traerá de nuevo totalmente a la página. Entonces guardaré eso. Y si abro mis herramientas de dev, encuentra estas cookies elemento banner, que está aquí. Y luego si hago clic en esta cosa de CLS aquí, en realidad podemos agregar una clase y ver qué pasa. Por lo que nuestra clase se llama Show. Entonces vamos a teclear en show y ya podemos ver el banner en la página. Si quitamos esta clase. Y se puede ver que la clase se ha agregado aquí también. Si quitamos la clase, entonces el banner se vuelve a ocultar de abajo. Estaría bien si esto fuera animado como aparece y desaparece dentro y fuera de la página. Entonces, como lo hicimos antes, podemos usar la propiedad de transición para hacer esto. Por lo que en nuestro banner de cookies select, voy a añadir una propiedad de transición. El inmueble que queremos animar es la propiedad transformada. Entonces vamos a transformar eso. Queremos sumar una duración. Entonces voy a sumar 0.3 segundos y mi punto y coma, y voy a guardar eso. Entonces ahora si elegimos nuestras cookies por el elemento en la pestaña de elementos aquí, haga clic en clase. En la clase show, decimos, ahora tenemos una buena animación cuando aparece. Y si quitamos la clase, tenemos una buena animación de nuevo cuando desaparece. Entonces ahora todo lo que necesitamos hacer es usar JavaScript para agregar esta clase show a las cookies Banner después de un par de segundos. 35. Ponga banner en una variable de JavaScript (JS): De acuerdo, Vamos a usar JavaScript para subir esta clase de show a las cookies por el elemento después de un par de segundos. Entonces vamos a saltar de nuevo a nuestro JavaScript en index.html, que está aquí. Y nos desharemos de este registro de consola porque realmente no necesitamos eso. Antes de que podamos hacer algo con estas paletas de cookies, necesitamos tener acceso a ella. Y podemos hacer eso disparando la consulta selecciona un método en el documento. Entonces lo que podemos hacer es documentar punto, consulta, Seleccionar, y luego paréntesis, y luego citas. Y luego podemos pasar un selector a estas cotizaciones. De igual manera a los selectores que estamos usando en nuestro CSS. Entonces si queremos agarrar las cookies, que tiene una clase de cookies Power BI, solo podemos usar el balance de las cookies de punto. Por lo que en estas cotizaciones solo podemos empezar las galletas de punto, mantequilla de guion. Y esto agarrará las cookies elemento bona para que realmente podamos hacer algo con él. Pero primero necesitamos poner esto en una variable. Y yo soy ¿qué es una variable? Básicamente es solo un pequeño bloque de datos con un nombre. Y podemos estancar todo tipo de diferentes tipos de datos en una variable. El modo en que configuramos una variable es que solo usamos la palabra let y luego ingresamos un nombre para nuestra variable. Digamos que queríamos guardar la edad de alguien. Podríamos querer llamar a esa edad variable. Y podemos establecer eso igual a un número como el 30. Y también podríamos almacenar texto o cadena en una variable. Entonces digamos que queríamos guardar el nombre de alguien. Podríamos hacer Llamemos igual. Entonces queremos usar cotizaciones si estamos haciendo una cadena. Entonces Dani, y también podríamos almacenar valores booleanos, valores verdaderos y falsos en una variable. Entonces podríamos querer hacer algo como, vamos, está suscrito por el usuario. Y podemos establecer que eso es cierto o podríamos ponerlo en falso. Pero en este caso sólo queremos almacenar este elemento de documento en una variable. Entonces sólo voy a deshacerme de todos estos. Voy a estancar esto en una variable. Entonces llamaremos bada a esto galletas. Hola ahi, Esta galletas. Pero nuestro elemento ahora estará en esta cookie se trata de una variable donde podemos hacer algunas cosas con ella. Antes de hacer algunas cosas con ella, queremos asegurarnos de que exista. Porque si intentamos disparar algún código sobre este elemento y no existe en la página, entonces esto activará un error. Entonces podemos usar una declaración if para hacer eso. Entonces lo que podemos hacer es escribir en f y luego paréntesis. Y luego en los paréntesis podemos simplemente agregar cookies sido a. Entonces, en otras palabras, si hay algo en esta variable, entonces si este elemento se encontró en la página, entonces podríamos hacer algo. Por ahora solo voy a cerrar sesión. Entonces usaré console.log y simplemente cerraré la sesión Barna existe. Y si quisiéramos disparar algún código, si el banner no existe, podríamos agregar más después de esto si declaración doble llaves ahí dentro, simplemente podemos cerrar la sesión console.log, pero a no existe. Voy a guardar eso. Y ahora podemos ver en nuestra consola aquí, Banner existe o si solo elimino estas cookies elemento de sección banner de la página y luego lo guardo. Ahora vemos pero no existe estando bloqueado. Por lo que un lugar que las cookies encierran de nuevo en la página y guarde eso. En realidad no voy a necesitar esta declaración más. 36. Muestra la banner de cookies después de 2 segundos (JS): Entonces si las cookies, pero sí existe, entonces queremos agregar la clase de show a este elemento de manera cookies después de un par de segundos. Para poder pesar un par de segundos, podemos utilizar el método setTimeout. Entonces solo voy a quitar este registro de consola y solo escribiré en set. Podemos decir en nuestro IntelliSense aquí establecemos la función Timeout. Entonces voy a pegarle respuesta en eso, en él mucho. Esta función setTimeout sigue. Esta función espera dos parámetros. El primer parámetro es una función. Entonces esta es solo una forma diferente de escribir una función, que es un poco diferente a la forma en que hemos escrito esta función. Este tipo de función se llama función de flecha, pero también podríamos cambiar esto para funcionar llaves dobles y luego deshacernos de esta flecha. Entonces esto también funcionaría, bueno, solo voy a cambiar el spot a una función de flecha para que podamos encontrar algún código dentro de esta función después de que el tiempo de espera haya terminado. Este segundo parámetro aquí es un número que es la cantidad de tiempo que debemos esperar en milisegundos. Entonces si quisiéramos esperar cinco segundos, sólo podríamos poner 5000 aquí. Entonces cambiaré este tiempo de espera a 5000. Simplemente voy a sacar algunos textos por ahora. El temporizador ha terminado. Si guardamos esto y recargamos la página, espera unos segundos, entonces podemos decir que el temporizador ha terminado de bloquearse. Simplemente voy a reducir este tiempo a dos segundos. 2000, oye, Arafat, pongamos este 2000 en una variable. Entonces después de esta cookie es una variable, otra variable llamada cookies, pero un retraso, inicio o igual al 2000. Y ahora podemos simplemente usar esta variable aquí en lugar de codificar duro el número lo. Entonces copiaré este nombre de variable, pegaré eso aquí. Y ahora si volvemos a este código más adelante, va a ser realmente fácil para nosotros cambiar el retraso si queremos. Pero de todos modos, una vez terminado este tiempo de espera, queremos agregar la clase show, que configuramos, el banner de las cookies, los que muestran el bateador en la página. Y tenemos acceso al elemento banner de cookies aquí. Por lo que me desharé de este registro de consola. Y lo que podemos hacer es banner de cookies, y queremos acceder a la lista de clases en estos productos de cookies, podemos hacer lista de clases de punto. Y de hecho, solo voy a cerrar la sesión para que veas lo que está pasando aquí. Por lo que agregaré console.log y luego rodearé esta lista de clases de punto de banner cookies entre paréntesis y guardo eso. Y si esperamos un par de segundos, podemos ver que esta lista de tokens DOM se está cerrando la sesión. Y si hacemos click en esta pequeña flecha para abrirlo, lo que estamos viendo aquí es una matriz. Y una matriz básicamente nos permite almacenar múltiples variables en un solo elemento de datos. Entonces si salto de nuevo a este banner de cookies y teníamos otro lado de clase clase nueva clase discontinua. Y guardamos eso y recargamos. Se puede ver que esto se está cerrando de nuevo. Ahora tenemos dos artículos en esa matriz, las cookies de nuestra nueva clase. Entonces solo voy a leer esta nueva clase de clase y guardar eso. Vuelve a bajar a nuestro JavaScript. Y eliminaré este registro de consola. Por lo que tenemos acceso a la lista de clases de ese bateador de galletas. Ahora queremos agregarle una clase. Quiero agregar esa clase show que configuramos. Por lo que ahora podemos decidir punto, agregar y luego paréntesis. Y luego entre cotizaciones podemos agregar la clase que queremos agregar y queremos agregar el show de clases. Entonces guardaré esa recarga. Y si esperamos un par de segundos, podemos ver nuestro por emparejamiento. Y si miramos en el inspector de elementos aquí, podemos ver que se ha agregado show class. 37. Break up nuestra lógica en funciones (JS): No obstante, es buena idea descomponer nuestra lógica en funciones. Y una función es sólo un bloque de código que podemos dar un nombre. Y generalmente quieres que cada función solo tenga un propósito. Entonces después de esta declaración if aquí, voy a agregar una función. Hacemos esto simplemente escribiendo en función, y luego podemos darle un nombre a la función. Por lo que podríamos llamarlo show banner. Después agregamos paréntesis y luego doblamos llaves. Y entonces podríamos poner el código de nuestra función dentro de estas llaves. Entonces solo voy a cortar esta línea donde agregamos la clase. Lo pegaré en esta función en su lugar. Qué podemos hacer ahora en este tiempo de espera establecido, en este primer parámetro, podemos simplemente seleccionar toda esta función. Entonces las dos llaves dobles, la flecha y estos dos paréntesis. Y podemos simplemente eliminar eso, y podemos simplemente escribir el nombre de esta función en su lugar. Por lo que ahora activará esta función después de que termine el tiempo de espera. Por lo que solo podemos teclear en show banner. Oye, vamos a guardar que el NCBI siga trabajando, recargue la página. Y sin embargo sigue funcionando. Solo voy a agregar algunos comentarios aquí para romper un poco nuestro código. Podemos usar el mismo atajo de teclado para agregar un comentario en JavaScript, que en un Mac es comando y barra inclinada hacia adelante. Y solo etiquetaré estas cosas en la parte superior en ella porque aquí es donde tipo de inicializamos cosas y obtenemos acceso a nuestros elementos. Y luego mucho comentario por encima de nuestras funciones, que sólo dice funciones. Por cierto, también podemos agregar comentarios al HTML también. Por lo que queríamos agregar un comentario encima de este banner de cookies. Podemos simplemente usar el comando de acceso directo y barra inclinada hacia adelante o creo que es Control y barra inclinada hacia delante en Windows, entonces solo podemos escribir un comentario aquí, como banner de cookies. 38. Ponga un botón cerrado en una variable de JavaScript (JS): De acuerdo, entonces queremos ocultar este panel cuando el usuario haga clic en este botón de cerrar. Entonces cuando el usuario hace clic en esto cerrado, y básicamente queremos eliminar la clase show, que se puede ver aquí de estas cookies compradas, que luego se aparearán con la bio de vuelta fuera de la parte inferior de la página. Por lo que podemos hacer esto agregando un manejador de clics a este botón. En primer lugar, es necesario obtener acceso a este botón, igual que hicimos cuando obtuvimos acceso al banner de cookies usando la consulta selecciona un método. Entonces después de esta línea, voy a agregar, vamos, vamos a llamarlo cookies en botón Cerrar. Ley igual al selector de consulta de documentos y entre paréntesis y comillas dentro de ahí. Y así necesitamos un selector para seleccionar este botón de cierre. Y no podemos simplemente usar estos barcos o la clase porque este selector de consultas sólo seleccionará el primer elemento que tanto como el selector que ponemos aquí. Entonces si solo pusiéramos punto Watson aquí, entonces en realidad seleccionaría este fondo, que es el primer elemento Watson en nuestra página, esta Biblia. Por lo que necesitamos ser más específicos que eso. Y sí tenemos este div rodeando clase charter Appleton de galletas, Barbara Watson. Entonces lo que podríamos hacer por nuestro selector son las cookies de punto, manera Watson y luego un espacio, y luego Watson. Entonces, en otras palabras, va a seleccionar el elemento que tiene una clase de botón que está dentro del elemento el cual tiene una clase de cookies pero un botón. Entonces guardaré eso. Y vamos a configurar un manejador de clics en esta botella. Entonces voy a añadir una nueva sección después de esta declaración if, y sólo llamaré a estos eventos. Y yo primero queremos comprobar que este botón de cierre existe como lo hicimos con la manera de las cookies. Entonces si las galletas han sido un cercano Watson. 39. Osta banner de galletas en botón (JS): Y si existe y queremos agregarle un manejador de clics. Y podemos hacerlo agregando un oyente de eventos al botón cerrar mediante el uso de este método AdDeventListener que utilizamos antes. Entonces lo que podemos hacer es que las cookies sean un botón de cierre punto agregar oyente de eventos, luego paréntesis. Ahora en esta ocasión queremos agregar el escucha de eventos click. Por lo que vamos a añadir cotizaciones ahí y luego dar click en Seguir el segundo parámetro. Necesitamos una función. Por lo que podríamos agregar función como esta directamente aquí y agregar algún código aquí. Pero probablemente sea malo activar una función separada para que podamos mantener toda nuestra lógica bien separada en diferentes funciones. Por lo que quiero seleccionar toda esta función lo compré y en su lugar activará una función llamada cerrar Watson clicked. Y yo de hecho, llamémoslo cookies, sido un botón de cierre clicado para hacerlo un poco más específico. Y luego copiaré eso y crearemos esta función aquí abajo. Mucha de esta función. Entonces cuando inicias la función, luego pega en cookies por mi botón Cerrar clica paréntesis. Por ahora sólo cerremos la sesión de algunos textos. Por lo que se hizo clic en el botón de cierre console.log para asegurarse de que esto está funcionando. Entonces guardaré eso. Esperar a que aparezca la boleta electoral. Haga clic en el botón Cerrar. Y podemos decir que se hizo clic en el botón Cerrar. Entonces eso está funcionando. Si estamos abajo en la parte inferior de la página y hacemos click en este botón de cerrar está saltando nariz a la parte superior. Y eso es porque cuando hacemos click en esto, lo que es un H ref se pone demasiado duro. Podemos usar el hash para saltar a diversos anclajes en nuestra página. No voy a meterme en eso ahora. ¿ Y si no especificamos un nombre para una ANCA, entonces simplemente saltará pose al principio de la página. Entonces lo que tenemos que hacer en este manejador de clics es evitar el comportamiento por defecto de este botón al hacer clic en él, que es seguir el enlace que se le asigna a esta agua. En este caso es hash. Entonces cuando nos sentamos así EventListener así, como un escucha de eventos click, esto devolverá lo que se conoce como un objeto de evento, cual podemos pasar a la función que disparamos. No voy a meterme demasiado en el objeto de evento. Ahora bien, qué podemos pasar eso solo poniendo un nombre de variable en estos paréntesis y puedes llamarlo como quieras. Por lo que podrías llamarlo evento o solo podrías llamarlo a. Solo voy a llamarlo a.Y ahora que tenemos acceso a este objeto de evento que fue devuelto por este AdDeventListener cuando se hizo clic en el botón, podemos disparar un método sobre eso para evitar el comportamiento predeterminado del clic de este botón. Por lo que sólo necesitamos agregar un punto prevenir predeterminado, y luego paréntesis. Y eso lo guardaré. Esperemos que ahora si hacemos clic en este botón, ya no salta a la parte superior de la página, pero aún vemos que nuestro registro se está cerrando la sesión. Se hizo clic en el botón Cerrar. De acuerdo, Entonces una vez que se ha hecho clic en el botón de cerrar, entonces queremos disparar otra función que luego ocultará el banner de las cookies. Entonces vamos a disparar una función llamada ocultar anuncios de banner para disparar una función desde otro lugar, podemos simplemente escribir el nombre de la función y luego paréntesis así. Entonces vamos a crear esa función aquí abajo. Por lo que función ocultar banner, paréntesis, llaves dobles. Entonces, ¿qué tenemos que hacer para ocultar esta pancarta? Bueno, sólo tenemos que quitar esta clase de show de ella. Tanto como lo hicimos en este show fue una función. Simplemente podemos hacer cookies banner porque recuerda que tenemos acceso a las cookies por el elemento con esta cookie spot una variable. Y luego queremos acceder a la lista de clases. Y esta vez queremos disparar el método remove en lugar del add. Por lo que sólo queremos hacer eliminar paréntesis y comillas dentro los paréntesis y luego mostrar porque queremos eliminar la clase llamada show. Entonces guardaré eso. Entonces decimos el vínculo que reparo. Después de un par de segundos, click en el botón y vemos desaparecer el banner. 40. Mover JS a archivo separado (JS): De acuerdo, Así que ya hemos terminado con JavaScript. Y yo soy igual que movimos nuestro CSS a un archivo separado. Es una buena idea mover nuestro JavaScript a un archivo separado también. Porque si nos vamos, voy a JavaScripts en esta etiqueta de script y creamos algunas páginas nuevas, cual vamos a hacer en un poco que si queremos hacer cambios a nuestro JavaScript, tendríamos que hacer cambios a múltiples archivos HTML diferentes. Por lo que tiene sentido tener todo sobre JavaScript en un solo archivo para que solo tengamos que cambiarlo una vez. Entonces voy a abrir la barra lateral en el Explorador. Y dentro de la carpeta de activos, voy a crear una nueva carpeta llamada JS para JavaScript. Voy a hacer clic derecho para crear un nuevo archivo ahí dentro. Y podríamos llamar a esto doc js globales. Y puedes llamarlo como quieras, pero sí necesita terminar en dot js. Y está abierto archivo para filas. Entonces voy a saltar de nuevo a index.html. Y voy a llamar a todo el código que hay dentro de esta etiqueta de guión. Guarda eso, salta a este archivo global dot js que hemos creado. Lo pegaré aquí. Guardaré eso y luego saltaré de nuevo a index.html. Simplemente voy a eliminar la nueva línea de esta etiqueta de script. Por lo que acabamos de detener las etiquetas de guión de apertura y cierre así. Y lo que podemos hacer es simplemente agregar un atributo fuente a los scripts y luego responder la ruta a nuestro archivo JavaScript. Entonces esto va a ser slash assets slash js slash global ab.js. Entonces guardaré eso y veamos si sigue funcionando. Entonces recargaré la página. Todavía vemos un banner pay y si hacemos clic, él, aún desaparece. 41. CSS responsivo (CSS): De acuerdo, Entonces esta página web se ve genial ahora en el escritorio, pero hay un par de toques finales. Por lo que quiero agregar una segunda página, una sobre página, que podemos llegar haciendo clic en este enlace en el encabezado. Bueno, en primer lugar, quiero hacer que esta página web sea receptiva. Hago que se vea bien en el móvil. Porque si abrimos nuestras DevTools de Chrome, haga clic en este pequeño icono de dispositivos aquí. Podemos elegir de este desplegable, un dispositivo móvil. Acabo de elegir el iPhone 6, 7, 8 plus. Esto nos mostrará cómo se ve esta página en el móvil. En la cabeza, se ve bien en el banner de las galletas, se ve bien. La cuarta celda se ve bien. Bueno, estos productos no se ven muy bien porque el texto es demasiado grande para el móvil. Y tenemos todo el texto apaciguado a la izquierda así. Y tenemos esta diminuta imagen empapada a la derecha. Por lo que será mejor si pudiéramos reducir el tamaño del texto para móvil en stock, la sección de texto en la parte superior de la imagen y estirar los textos todo el camino a través del ancho del dispositivo. Y también estira la imagen a través del ancho del dispositivo también. Y también podríamos hacer con reducir un poco el espacio entre los productos también. Por lo que solo te mostraré aquí la página terminada. Y puedes ver he reducido todos los textos y ahora tenemos la sección de texto apilada encima de la imagen, estirando la imagen para que sea mucho más grande y hemos reducido el espaciado por encima y por debajo de cada producto también. Esto se ve mucho mejor en el móvil. 42. Las preguntas de medios (CSS): Entonces, ¿cómo podemos agregar diferentes estilos para dispositivos móviles? De qué podemos hacer esto con consultas de medios. Entonces saltaré de nuevo a la página. Simplemente saldré de la vista móvil por ahora. Y saltaremos al archivo CSS style.css. Y luego al fondo de esto, voy a agregar una consulta de medios. Por lo que un montón de comentarios aquí que sólo dice consultas de medios. Y voy a añadir una consulta de medios. En una consulta de medios solo nos permite agregar algunas reglas CSS. Sólo para dispositivos son los browses de un ancho particular. Por lo que tuvimos una consulta de medios agregando medios. Después agregamos algunos paréntesis, llaves dobles. Y dentro de estos paréntesis, podemos poner una regla que le diga al navegador qué tamaño de pantalla se deben aplicar las reglas que ponemos aquí. Y podemos usar ya sea min-width o max width. Entonces si solo pensara hombre, ancho de guión, y luego un dos puntos, y puedo especificar un valor de píxel. Entonces si configuro esto en, digamos, 500 píxeles que cualquier regla que pongamos aquí solo se aplicará a la página si el navegador es más ancho de 500 píxeles. Por lo que dentro de estas llaves dobles, solo podemos agregar reglas CSS como de costumbre. Entonces si queríamos apuntar a la etiqueta de cuerpo, si solo agregas un selector de cuerpo, vamos a establecer el color de fondo en rojo. Voy a guardar eso. Y podemos ver que el fondo se vuelve rojo. Si reduzco el tamaño del navegador a por debajo de 500 píxeles, entonces cambia de nuevo al por qué Otra vez, porque sólo se va a agregar esta regla si el navegador es de 500 píxeles o más ancho. También podemos usar max-width en lugar de min-width. Entonces si cambio esto a ancho máximo y guardo eso, entonces ahora las reglas que especificamos dentro de esta consulta de medios solo se aplicarán a la página si el navegador es de 500 píxeles o menos. Por lo que actualmente estamos más anchos de 500 píxeles. Ahora, se puede decir que abre la parte superior, somos unos 130 píxeles. Si bajamos, veamos abajo 500 píxeles, entonces vemos el color de fondo rojo. 43. Añade una consulta de medios y estilos móviles (CSS): Entonces voy a agregar una consulta de medios que apunta dispositivos que son tan amplios como una tableta típica en modo retrato. Por lo que un ancho típico para una tableta en modo retrato, como el iPad es de 768 píxeles. Entonces voy a establecer esto en ancho máximo 768 píxeles. Guarda eso. Sólo voy a estirar un poco esto. Entonces si hacemos clic en el botón del dispositivo, elegimos iPad. Podemos decir que se está aplicando esta regla. Entonces vamos a agregar algunas reglas aquí las cuales se aplicarán en dispositivos que son así de ancho o menos. Pero no queremos poner el cuerpo a un color de fondo rojo. Entonces, deshacernos de esa regla y guardárnosla. En realidad este diseño se ve bastante bien en un iPod por eso. Entonces en realidad sólo voy a apuntar a cualquier dispositivo que sea más pequeño que este. Entonces voy a cambiar este MUX con 2767 píxeles. Guarda eso. Cambiaremos a uno de los dispositivos móviles como el iPhone 6, 7, 8 Plus. Entonces vamos a agregar algunas reglas para mejorar este diseño. Entonces, así cada uno de nuestros productos está en una etiqueta de artículo con una clase de productos. Y si nos fijamos en el CSS para la clase de productos, que es Hey, tenemos ese set para mostrar flex, que es lo que está haciendo que sus elementos secundarios directos se muestren en una fila lado a lado. Por lo que califica queremos apuntar al div producto y establecer la propiedad display a otra persona. Y vamos a ponerlo en bloque, evitará que el elemento del producto sea fila y simplemente lo convertiremos en un elemento de bloque normal. Entonces voy a saltar hacia abajo a la consulta de medios. Y queremos apuntar a los elementos del producto. Y solo queremos establecer display para bloquear. Y eso lo guardaré. Y ahora podemos ver el texto en la imagen están apilados uno encima del otro. Y también quiero reducir un poco el tamaño del texto de estos encabezamientos de este párrafo. Entonces después de este producto lo hará nuestro punto-producto H1, porque este rubro está en uno alto, reduciremos el tamaño de fuente. Así que establece el tamaño de fuente en 34 píxeles y guarda eso, y eso se ve mejor. También reduciré el tamaño de fuente de este H2 también. Entonces mucho punto-producto. H2 establecerá el tamaño de fuente en 16 píxeles. Guarda eso, y también reduciré el párrafo a 16 píxeles. Entonces haremos productos de punto, pagaremos tamaño de fuente 16 píxeles, guardemos eso. Y tenemos un pequeño problema con nuestros barcos y decimos que siendo coautor el fondo. Y eso es porque son ocho abrazos. Y por defecto, a etiquetas son elementos en línea. Y los elementos en línea a veces serán clips como este si están rodeando elementos o esos elementos principales demasiado pequeños. Y podemos arreglar esto simplemente estableciendo estos dos bloques en línea en lugar de iluminados. Entonces voy a saltar de nuevo a nuestro producto CSS. Contamos con nuestros productos nav. Aquí. Estamos apuntando a estos enlaces aquí, producto ahora VLA. Entonces sólo voy a fijar estos dos. De hecho, sólo cambiemos la clase de botón para que no veamos este tema en ningún otro lugar sin contaminantes. Por lo que iré a nuestra sección reutilizable en nuestro botón. Y solo estableceremos esto para mostrar inline-block, Guarda que estos botones ya no están siendo. Los clips son los Basu. De acuerdo, Así que también quiero reducir el relleno en estos productos porque este espacio es un poco demasiado grande para el soldado móvil. Volver a nuestra consulta de medios. En nuestro producto selecciona mucha propiedad putting y el relleno está actualmente establecido en un 100 pixels en la parte superior y 0 en el lateral. Entonces reduzcamos esto a 30 píxeles en la parte superior y 0 en el lateral. Y ahora tenemos una cantidad más razonable de espacio entre cada producto, pero aún tenemos bastante espacio en la parte superior del primer producto. Porque si saltamos de nuevo a nuestro CSS inicial, usamos este primer pseudo-selector infantil para agregar algo de relleno al primer producto de la lista, y que actualmente está configurado en 20 píxeles. Entonces sólo voy a copiar esta regla. Lo pegará a continuación, son productivos en la consulta de medios. Y reduciremos esto a 0. Y eso lo guardaré. Y ahora tenemos un poco menos de espacio en la parte superior de los productos de oficina. De acuerdo, entonces estoy contento con esto ahora creo que esto se ve bastante bien en el móvil. Todavía se ve bien en el escritorio también. 44. Añade sobre la página (HTML y CSS): De acuerdo, Lo último que quiero hacer es agregar una segunda página a este sitio web. Entonces una página Acerca de la que podemos llegar haciendo clic en este enlace en el encabezado. Entonces voy a saltar a index.html, saltar a la cabecera. Aquí está nuestro enlace Acerca de que está en el encabezado. Quiero cambiar el borrador de odio a aguanieve sobre dot HTML. Y esta va a ser nuestra página sobre. Entonces voy a guardar eso. Vamos a abrir la barra lateral. Entonces voy a hacer clic derecho en el archivo index.html. Haga clic en Copiar. Y hago clic derecho y hago clic en Pegar. Y luego voy a renombrar este archivo se acaba de crear a sobre punto HTML. Si hacemos click en el enlace sobre, podemos ver en la barra del navegador, ahora estamos en Sobre punto HTML. Actualmente estamos esta página es exactamente la misma que nuestra página de inicio. Entonces vamos a saltar a sobre punto HTML. Se va a ocultar la barra lateral. Simplemente voy a eliminar todo dentro de este elemento de sección con una clase de restricción que actualmente tiene todos estos productos. Entonces solo voy a seleccionar todo lo que hay dentro, borrar eso. Y en cambio, voy a agregar un artículo con una clase de concepto costo. Esta va a ser una página de contenido. Voy a meter algún contenido ahí dentro. Entonces otra, y me pondré algo de naranja ahí dentro. Mucho montón de etiquetas de párrafo con algo de Lorem Ipsum. Simplemente va a habilitar el envoltorio de palabras yendo a Ver toggle word wrap. Simplemente voy a copiar este párrafo. Pega unos cuantos más en. A lo mejor en la parte inferior podríamos tener uno de estos botones blancos que enlaza de vuelta a la página de inicio. Por lo que mucho, una, una etiqueta con una clase de botón, una clase de Watson, blanco discontinua entrar en el atributo href calor. Nosotros sólo queremos ir a casa. Entonces para hacer eso, sólo podemos ir a la barra hacia adelante del camino. Y luego por los textos en el libro y voy a poner volver a casa. Y eso lo guardaré. Y ahora tenemos Acerca de la página puede saltar de nuevo a la página de inicio. No obstante, este texto es un poco demasiado pequeño y así que podría simplemente secuestrar los textiles de productos arriba. Entonces voy a saltar de nuevo a style.css, saltar a nuestros productos, textiles. Entonces aquí estamos los textos de producto H1, H2, y pagar. Acabamos de crear un artículo con una clase de contenido aquí. Entonces lo que podríamos hacer aquí es agregar un selector adicional a cada una de estas reglas. Entonces así como textos de producto h, Bueno podríamos agregar contenido uno. Y luego en este podríamos hacer contenido de punto página dos. Y luego coma dot concepto para robar estos estilos o saltar de nuevo a la página Acerca. Guarda esto. Y ahora tenemos un buen texto grande. No obstante, también vamos a necesitar actualizar nuestras consultas de medios porque este texto es un poco demasiado grande para un móvil. Entonces voy a saltar a nuestra consulta de medios. Y otra vez secuestrará estos estilos aquí. Entonces después de este producto H1, vamos a iniciar el contenido de punto H1. Y luego en esta consola de puntos página dos. Y luego en este solo punto el contenido pagará dirá que el texto se ve bonito y pequeño y móvil. Agradable y grande en el escritorio. 45. Añade un doctype (HTML): Hay una cosa importante que me olvidé de hacer justo al inicio de este video, que es agregar una declaración DOCTYPE al principio de nuestras páginas HTML. Por lo que si acaba de abrir index.html justo en la parte superior de este archivo, necesitamos agregar un doctype. Doctype le dice al navegador qué tipo de página HTML es esta, donde usar HTML5 aquí. Por lo que necesitamos agregar doctype HTML5 a la parte superior de cada una de nuestras páginas. Entonces para ello, solo agregamos corchete de ángulo izquierdo y luego signo de exclamación y el DOCTYPE en mayúsculas, luego un espacio y luego HTML en minúsculas, y luego un corchete de ángulo de cierre. Y eso lo guardaré. También copiaré esto y abriré sobre ningún HTML y lo agregaré a la parte superior de este archivo también y guardaré eso. Y esto ha provocado un ligero problema con nuestro encabezado. Tenemos más espacio en la parte inferior de nuestra cabeza y fuera. Y eso es porque aquí tenemos esta imagen. Por defecto en HTML5, las imágenes son elementos en línea que tienen un poco de espacio en la parte inferior de ellas. Por lo que podemos arreglar esto estableciendo esta imagen en un elemento de bloque con la propiedad display. Entonces si solo vas a Activos, css, style.css, desplázate hacia abajo hasta los estilos de encabezado y puedes ver hacia dónde se orienta esta imagen aquí, donde establecemos su ancho. Y solo queremos agregar una nueva regla aquí, mostrar inicio no para bloquear, y eso lo guardaré. El encabezado ahora está fijo.