Curso de HTML y CSS desde CERO (Completo)

Hola a todos Yo soy dalto y les doy la bienvenida al mejor curso de html y css que van a encontrar en YouTube el objetivo de este curso es que aprendas desde cero las dos tecnologías más importantes del mundo del desarrollo web e incluso del mundo de la programación estoy hablando de html y css durante el curso vamos a ver la estructura de una web etiquetas para listas enlaces multimedia formularios menús vamos a ver De semántica accesibilidad vamos a ver todos los selectores SS todas las propiedades todos los valores todo el box model grid subgrid

flexbox animaciones herencias pseudoclases metodología Ben positions m Vamos a aprender responsive design como va First ido Cómo subir tu página web internet y 423 523 proyectos que haremos a lo largo de todo el curso eso Y muchísimas cosas más No pero esto es chino básico te juro que no entiendo nada tranquilo no te Preocupes ese es mi trabajo Estás viendo el canal de programación y desarrollo más grande de Argentina y posiblemente de todo lo hispana anteriormente ya hice cursos de html y css los primeros para allá en el 2018 y otros por ahí en el

2019 2020 que por cierto fueron los cursos más vistos de html y css de toda B hispana y el de cs es el más visto del mundo a la y aún así en todos estos años aprendido lo suficiente para afirmar que sin dudas este va a ser el Mejor curso de todo internet y lo mejor es que sí es gratis se contactaron conmigo de un montón de empresas Para pedirme que haga un curso como este y de paga y obviamente dije que no yo no hago cursos de paga jamás hice un curso de paga y

jamás lo voy a hacer y tampoco te voy a vender ningún curso avanzado ni nada después no muchos creadores dan cursos más cortos o minise secciones para después llevarte un curso avanzado de paga entonces nunca sabes cuándo Estás viendo un curso que se queda a la mitad o no te enseñan todo porque tien un curso más avanzado este no es el caso todo lo que necesitas saber está en este video este curso de html css es completo Mi objetivo es que salgas de acá con todos los conocimientos necesarios para aplicar todo el contenido del curso

a tu vida profesional Te voy a enseñar de una forma en la que lo vas a poder entender incluso aunque no hayas tocado una línea de código en tu vida y tampoco importa Si queres ganar 1000 2000 10,000 o 20,000 por mes este curso te viene increíble para empezar bien De hecho durante todo el curso vamos a hacer eso proyectos que van a ser que ustedes adquieran todas las habilidades para salir con todos los conocimientos necesarios para aplicarlos profesionalmente este curso tiene aproximadamente 95 horas de video grabadas de las cuales después de horas y horas

de editar pude convertir en 24 Horas tn pulidas y super bien editadas y con lo más importante sí 4 meses de trabajo así que créanme cuando les digo que el curso es completo de verdad A pesar de ser educativo es muy didáctico y entretenido y te lo digo yo que a pesar de haberlo creado ya me lo vi dos veces Mi nombre es Lucas dalto soy desarrollador hace más de un lustro o sea más de 5 años y te doy la bienvenida al mejor curso de html y ccs de todo internet estás listo sí Obvio

obvio que Sí esa es la actitud [Música] Comencemos las explicaciones que verás durante todo del curso son explicaciones que fueron previamente ladas y probadas en grupos más pequeños para probar su efectividad Ah y suscríbite es gratis bueno para comenzar quiero decirles que hay un dato que nos muestra cómo las personas que se adentran en cursos de html y css suelen terminar los cursos okay sin entender mucho Cómo Aplicar eso a la vida real es decir no entienden mucho la base los trasfondos cuando aparece una nueva tecnología tampoco la terminan de entender bien y cuando tienen

que hacer una modificación en un código o construir los suyos propios tampoco terminan de comprender los cimientos incluso tienen problemas por ejemplo errores en el código y demás y tampoco saben cómo solucionarlos porque realmente no entienden lo que están haciendo solamente están Escribiendo un código que saben que es lo que hace ese código Pero no entienden cómo funciona realmente Entonces cuando surjan problemas o cosas no lo pueden hacer entonces para eso que fue De hecho mi más grande error en el curso de html y css pasado lo que voy a hacer es darles una pequeña

introducción de Cómo funciona la web y después de cómo funciona html y css parece aburrido pero créanme que no es super interesante y si entienden esto van a ver que todo el Resto del curs uso les va a ser completamente fácil okay es una sección cortita Pero con esto ya basta para que cuando arranquen a ver código ustedes digan Ah o sea que esto hace esto Ah o sea que esta otra cosa hace esto otro Ah o sea que hacem entonces va a ser muchísimo fácil porque no van a parar de decir ah saben por

qué porque van a estar entendiendo lo que hacen y no hay nada más hermoso que entender lo que uno hace y para eso yo no puedo arrancar a Escribir código directo como dice los anteriores cursos o como hace todo el mundo para eso tengo que explicarles qué es lo que están haciendo Qué problemas solucionan y Por qué están haciendo lo que están haciendo okay Así que créanme que esta sección cortitas estas dos que vamos a hacer de entendiendo la web entendiendo html y css va a ser más que suficiente para que durante todo el curso

no tengan ni una sola duda Y si la tienen se la puedan responder ustedes Mismos porque va a ser muy intuitivo y van a desarrollar su capacidad lógica que es muy importante en el mundo del desarrollo y la programación que ustedes tengan la capacidad de desarrollar su lógica y ya con estas dos secciones lo van a poder hacer así que arranquemos para comenzar Imagínate que abrí un archivo de video Okay un video cualquiera lo que va a suceder es que Windows va a detectar que estás intentando abrir un archivo de video y Va a abrír

Telo con un reproductor de video El que tenés predeterminado y lo vas a poder reproducir en tu computadora es decir doble clic a un video se abre se reproduce en tu computadora pero volvamos sobre esta frase solo en tu computadora La pregunta es qué pasaría si ahora yo quisiera que mi video lo pueda ver todo el mundo bueno Esta es la misma pregunta que se hicieron las personas que desarrollaron la web querían compartir información para que Lo que nosotros tenemos en nuestra computadora no solo la podemos ver nosotros sino que también puede verse desde cualquier

lugar del mundo y sí nació la idea de la www o la World wide web hoy en día para que tu video sea accesible desde cualquier parte del mundo tendríamos que configurar la computadora en la que tenemos el video para enviar datos a otras computadoras a través de internet una vez que lo hicimos vamos a obtener un enlace ese Enlace es la forma en la que todo el mundo puede encontrar mi video es una especie de llave ya que al utilizar ese enlace en un navegador podemos Acceder al contenido asociado a ese enlace que en

este caso es el video bueno así es exactamente có funciona en realidad una página web es como si tuviéramos un hotel en cada habitación tenés cosas diferentes en una habitación Tenés una imagen en otra Tenés una página en otra habitación tenés un video pero si querés Saber dónde está cada cosa tenés que fijarte Cuál es el número de la habitación para que cuando quieras ver lo que tiene esa habitación puedas encontrarla y entrar ese número sería nuestro enlace nuestra forma de acceder al contenido así como necesitas el número correcto de habitación para poder encontrarla en

la web necesitas la URL correcta para poder ver lo que tiene el servidor que te dio esa URL básicamente si nosotros queremos que algo que está En nuestra computadora sea accesible para todo el el mundo tenemos que cargarlo a un servidor Y darles una forma a todo el mundo de que si lo busca en La Barrita de navegación puedan entrar Bueno esa forma se llama enlace es la url okay Y es la forma en la que cuando nosotros escribimos por ejemplo facebook.com eso va a las computadoras que tiene Facebook que están programadas para estar conectadas

a internet y de que todo el mundo las pueda acceder nos Den la página web Entonces ustedes ahora mismo van y buscan instagram.com mosquitos de hijos de mil cansado me tienen cuando ustedes por ejemplo van a instagram.com si lo hacen desde una página web lo que hace es que eso entra en realidad no son computadoras son servidores Pero bueno vamos a hacer de cuenta que son computadoras que es casi lo mismo son servidores que lo que hacen esos servidores detectan que alguien más quiere entrar y les devuelve el Contenido dice ey Esto es lo que

yo tengo alojado Okay esta es mi computadora Esta es mi computadora guardo un video acá si quiero que todo el mundo acceda a ese video configuro Este esta computador cita para que todo el mundo la pueda acceder me dan un enlace ese enlace lo agarro y se lo doy a todo el mundo Entonces cuando alguien quiere Ver mi video Solo pone el enlace y ya puede ver mi video porque el enlace lo que hace es pedirle a mi computador It que les muestre el video Eso es todo ahora acá es donde aparece el rol de

los navegadores Google mochila eh Explorer Bueno ya en el pasado quedó Amén que en paz descanse opera eh brave todos los navegadores porque la forma en la que nuestra computadora se conecta a un servidor como bien dijimos es pidiéndole por favorcito que le pase lo que tiene adentro Es decir desde mi computadora Okay yo lo que hago es acceder a un enlace por ejemplo y ahí la otra Computadora va a saber que yo estoy intentando acceder a lo que tiene adentro y después va a saber si me lo da o no no me lo da

viste después se puede configurar como sea para darme el contenido o para no dármelo es decir nuestra computadora manda una petición al servidor a través de la URL el servidor que aloja el archivo recibe esa solicitud y decide Qué hacer con ella en la mayoría de los casos el servidor responde a algo Como por ejemplo el Archivo que tenía alojado básicamente ahora ustedes que se van a empezar a meter al mundo del desarrollo por eso también esto curso o para actualizar sus conocimientos algo muy importante de lo que es la lógica de la programación o

del mundo del desarrollo en general todo funciona con solicitud respuesta solicitud respuesta solicitud respuesta todos los sistemas que existen en la actualidad desde los más simples Hasta los más complejos todos funcionan bajo Este mismo principio solicitud respuesta solicitud respuesta cuando yo me conecto a una página web mi computadora está solicitándole al servidor que tiene almacenada la página web que por favor me la muestre entienden Eso es todo supongamos que subimos un archivo de texto simple para eso Bueno creamos un archivo llamado hola.txt que es un archivo muy simple es simplemente un archivo que abrimos con

el bloc de notas es un archivo de texto común y lo Subimos a un servidor web ese servidor web nos da un enlace para que el archivo hola. pueda ser accedido desde cualquier parte del mundo nosotros para acceder a ese archivo enviamos desde nuestra computadora una solicitud para acceder lo y ahí es cuando el servidor responde con el contenido del archivo hasta acá está todo bien porque nosotros podemos leer el contenido de ese archivo es decir el contenido que tiene el archivo lo podemos leer porque es texto es muy Simple es un texto que se

puede leer de tal forma que si nuestro servidor también tiene almacenado un video también lo podemos ver porque se abre con un reproductor de video de tal forma que si el servidor también tiene almacenado una imagen Simplemente nos muestra la imagen porque es una imagen es fácil se hable con un reproductor de imágenes pero si un servidor tiene una página web que justamente eso es un servidor web no es un servidor que tiene Alojado páginas web si el servidor tiene una página web cuando me mande el contenido de la página web qué es lo que

voy a ver en realidad el aspecto que tiene una página web Okay en realidad es algo así esto es html pero verlo así lo vuelve ilegible nadie quiere leer una página web así si lo tuviéramos que hacer sin navegadores la única forma de hacerlo es a través de protocolos de conexión podemos por ejemplo ir a una terminal hacer un curl a la página web y Ahí la página web nos va a devolver todo el texto que tiene sin navegadores Esta es la única forma que tenemos de acceder a una página web esto mismo es lo

que nos va a mostrar un código que para la persona que no entiende es feo pero en realidad este código está hecho así a propósito porque las páginas web no son más que esto un conjunto de códigos raros que está hecho para que un navegador reciba este código y acá aparece la magia de los navegadores así Como antes pusimos el ejemplo de que un video lo abrimos con un reproductor de video Okay hay un archivo de Excel lo abrimos con Excel un archivo de Photoshop lo abrimos con Photoshop eh una imagen lo abrimos con un

reproductor de imágenes o un visor de imágenes es decir cada archivo tiene que abrirse con un programa que sepa leer ese archivo Bueno una página web no es la diferencia así como todos los archivos los abrimos como corresponde con programas que Reproduzcan esos archivos o el contenido que tienen adentro las páginas web se tienen que abrir con navegadores es decir la forma en la que nosotros podemos abrir una página web es abriéndola a través de navegadores porque sí las páginas web también son archivos no es nada de otro mundo es un archivo de de texto

pero que tiene un código escrito pero la diferencia es que estos archivos este código es leído por el navegador porque justamente esos Códigos raros no están así porque sí O sea no es que es un código raro porque es un código raro no son códigos hechos especialmente para que el navegador los entienda y justamente muestre lo que el desarrollador quería Mostrar al escribir ese código esto por ejemplo le dice al navegador que muestre un párrafo simple esto por ejemplo le dice que muestre un botón esto le dice que muestre una imagen que se llama per

png y así tenemos miles de ejemplos más Entonces todos esos códigos raros que vemos cuando básicamente corremos una página web en un servidor están hechos justamente para abrirlos con un navegador Como por ejemplo Google Chrome porque ahí está los navegadores también están hechos para leer esos códigos Esa es la funcionalidad principal que tiene un navegador es leer esos códigos raros e interpretarlos que son en realidad códigos escritos en html y css principalmente tambén También tenemos Javascript pero no lo vamos a ver ahora enfoquémonos en html y css que es principalmente la parte visual más importante

de hecho html y css son los dos lenguaje sobre lo que está construido toda la parte visual de de todas las páginas web del mundo del 99.9 por podríamos decir entonces haciendo un repaso muy rápido acabamos de darnos cuenta de dos cosas muy importantes esos códigos raros están hechos para que un navegador los entienda y un navegador Está hecho para entender esos códigos raros o sea se complementan entonces haciendo un repaso rápido abrimos nuestro navegador por ejemplo Chrome escribimos la URL del servidor al que queremos pedirle que nos muestre lo que tiene adentro ese servidor

recibe la solicitud del navegador Y responde con todo el código del archivo el navegador recibe todo el código Y en lugar de mostrarnos el código así no más todo raro lo interpreta lo entiende y lo Transforma en lo que el código dice Y de esa forma nosotros podemos ver la página web final todo ese es el proceso oculto que nosotros no vemos cuando entramos a una página web porque la página web repito es solamente esos códigos r que vemos pero nosotros la podemos ver así toda linda y usarla Y todo porque el navegador agarra ese

código y lo que lo que hace es convertirlo en eso que nosotros después podemos ver De hecho si ustedes quieren ver cuál es todo ese Código raro que el navegador interpreta por nosotros para que no veamos todos esos códigos feos y veamos la página web final pueden dar botón derecho a cualquier página web y apretar en inspeccionar en inspect o inspeccionar elemento dependiendo de su sistema operativo o el navegador que tengan ahí van a poder ver todo este código que parece relacionarse de alguna forma con el contenido de la página no Bueno ese es código

html y css las dos tecnologías Principales detrás de toda la estructura y la estética de la web justamente lo que vamos a aprender en este curso Vamos a aprender a hacer páginas web con html y css que es la base de todo lo que es la web hoy en día ahora sí con esto entendido entendiendo más o menos Cómo funcionan los navegadores que sabemos que los navegadores están hechos especialmente para leer esos códigos y convertirlos en una página web tenemos que darnos cuenta cómo crear esos Códigos Cómo escribir esos códigos o qué hacen internamente Bueno

vamos a ver un una breve Introducción a html y css y acá viene la parte de la lógica esto Era una pequeña introducción ahora viene la parte lógica en serio Así que vamos con la siguiente sección Bueno ahora que llegaste hasta acá es porque evidentemente algo te interesó y te puedo decir algo simple lo que acabaste de ver antes no era muy divertido Esa era la única parte Aburrida que iba a tener todo el curso porque desde acá empieza lo relativamente interesante porque acá parece todo lo nuevo lo que posiblemente no sabías y que va

a empezar a desarrollar tu lógica Así que ahora sí Comencemos con esta sección que es hermosa en la que vamos a ver cómo funciona html y css y para qué sirven y qué hacen cada uno y cómo actúan No qué es lo que le dicen al navegador primero de todo Qué es html bueno html significa Hypertext markup Language o lenguaje de marcado de hipertexto vamos a desglosar un poco porque en sus siglas podemos encontrar un significado primero dice lenguaje de marcado Okay Qué es un lenguaje de marcado bueno acá hay otro concepto lo que hace

un lenguaje de marcado Okay es agarrar texto y presentarlo de una forma diferente Es decir necesitan un programa o algo que interprete qué es lo que están queriendo decir y mostrarlo hay lenguaje de Marcado muy difíciles como por ejemplo html y lenguajes más fáciles Como por ejemplo markdown que es el lenguaje por ejemplo sobre el que se construye documentación para que podamos leer y entender funcionalidades de tecnologías por ejemplo de hecho markdown es lenguaje de marcado ligero es de los más fáciles que hay el más fácil por no decir de alguna forma en markdown Por

ejemplo si escribimos un texto simple ese texto simple lo puede interpretar un Procesador de markdown para mostrarlo de una manera estructurada y conform por ejemplo en markdown si escribís texto con estos dos asteriscos el procesador de markdown lo va a interpretar como texto en negrita entonces podríamos usarlo para Resaltar palabras o conceptos en un texto por ejemplo si escribís el signo de la almohadilla y a continuación una palabra Como por ejemplo texto se va a interpretar como un encabezado grande entonces lo podemos Usar para títulos por ejemplo en cambio en html Si queremos Resaltar un

texto en negrita lo hacemos de esta forma Si queremos crear un encabezado grande lo hacemos de esta otra Como ven es un poquito más complejo Este es el objetivo de los lenguajes de marcado que nosotros podamos escribir texto y que ese texto sea interpretado por un programa que entienda qué es lo que queremos decir y lo muestre en el formato que queremos básicamente para mostrarnos un resultado Que es más lindo que es más agradable yo pongo 30 signos y un texto y ese texto me lo hace todo hermoso bello Esa es la funcionalidad de los

lenguajes de marcado Ahora sí volviendo a html podemos decir que justamente es un lenguaje interpretado y acá aparece la primera característica de Este lenguaje es interpretado Por qué Y porque para que pueda funcionar tiene que ser interpretado por otro programa es decir hay algo que lee ese código que nosotros Escribimos y lo convierte en el resultado final eso es el intérprete es decir línea por línea va leyendo lo que escribimos y va convirtiéndolo en lo que es el resultado final si nosotros abrimos un juego una imagen o un video Incluso en el blog de notas

vamos a ver que tiene todo un código super raro bueno eso es porque no está interpretado es un archivo final que está compilado y lo que hacemos Es ejecutarlo y listo no necesita nada que lo interprete en Cambio un lenguaje interpretado tiene el código ejecutándose en tiempo real línea por línea así que bueno ya conocemos la primer característica de html es interpretado Okay Okay ahora que entendí html más o menos no qué es lo que hace es decir Para qué sirve para Qué solemos usar html bueno ahora sí comienza la explicación de verdad con html

lo que hacemos Es armar la estructura de nuestra página web así como suena literalmente armamos la estructura Esa Es la palabra clave de hecho para html si me dijeran que html tengo que definirlo con una sola palabra diría estructura literalmente cada elemento Okay es o un bloque o algo que le da información extra al bloque o sea cualquiera de esas dos cosas nada más por ejemplo un elemento html puede ser todo un bloque entero y adentro puede haber un textio un enlace una imagen son cosas para decorar ese blo cada componente de html cada una

de las cada Cada uno de de esas de esos códigos que escribimos Son elementos si ponemos una imagen tenemos un elemento ponemos un video tenemos otro elemento ponemos un texto tenemos otro elemento cada cosa que ponemos es un elemento y cada elemento forma parte de esta estructura por ejemplo podemos escribir un código que le diga al navegador e tiene que haber tres secciones y en una va a tener cuatro enlaces para que puedas Navegar entre otras pá pgas es decir una sección De navegación después en la otra va a tener un título un subtítulo y

un párrafo grande y en la última sección va a tener cuatro campos de texto cuatro párrafos y un botón es decir un formulario de contacto digamos y ahí tenemos nuestra web escribimos un código html que el navegador lo interpretó y nos mostró un resultado final con html lo que hicimos fue estructurar completamente cómo va a ser nuestra página Cuáles son los elementos que va a Tener Y eso es todo lo que hace html se crean elementos estos elementos se llaman tags o etiquetas porque lo que hacen es literalmente eso etiqueta el contenido Por ejemplo si

yo uso la etiqueta B Le estoy diciendo al navegador que todo lo que escriba después de B va a ser en negrita El problema es que si yo no Cierro la etiqueta es decir si no le doy un fin todo sería negrita es por eso que también tenemos que cerrar las etiquetas Las etiquetas se cierran de la misma forma que se abren Solo que se le debe agregar una barra entre el nombre y el primer signo de apertura de esa forma el navegador entiende que todo lo que continúe después de esta etiqueta ya no pertenece

a negrita Entonces si se fijan literalmente estamos etiquetando un texto especial como negrita si de repente queremos hacer un título para una sección tenemos que usar un encabezado el encabezado más grande es H1 así se llama y significa heer one entonces con h1 abrimos etiqueta y cerramos etiqueta y todo lo que pongamos adentro va a ser interpretado como un encabezado Esta es la funcionalidad de html literalmente definimos todos los elementos de una página es decir etiquetamos texto y ese texto etiquetado conforma lo que conocemos como Bueno un tag o un elemento html o una etiqueta

tag es etiqueta y no no hay etiquetas para definir el tamaño del color los Bordes etcétera porque esas son características y ahora vamos a verlo bien eso cuando nosotros creamos un elemento de html ese elemento tiene propiedades las propiedades son sus características sus cualidades un párrafo por ejemplo tiene un tamaño una tipografía también tiene un borde o por ahí no lo tiene tiene un color un color de fondo puede tener sombras La pregunta es todas esas propiedades Quién las Define cómo hacemos para hacerlo en html Bueno normalmente las propiedades de ese elemento son declaradas por

el navegador es decir el navegador básicamente dice este elemento que está acá va a tener todas estas propiedades y además le voy a establecer un valor para cada propiedad Entonces nosotros por ejemplo si creamos un párrafo este se define con la etiqueta p este párrafo tiene sus propiedades el campo color no puede quedar vacío Entonces el color del texto que le va a dar el navegador es negro el Campo de tamaño Tampoco puede quedar vacío Entonces el navegador determina un tamaño base que suele ser 16 píxeles ahora creamos un h1 que es un encabezado el

color de un h1 que normalmente Chrome pone por defecto es negro el tamaño de letra por defecto en Google Chrome para un h1 suele ser del doble del tamaño base o sea sería el doble de 16 o sea 32 píxeles entonces para cada elemento que creamos en html el navegador trae configurado Cuáles van a ser las Propiedades de cada elemento y cuál va a ser el valor de esa propiedad por suerte con el tiempo apareció otro lenguaje llamado css que básicamente Este lenguaje lo que hace es decirle a todos los navegadores Cuáles son las propiedades

estándar que cada elemento html tiene que tener sirve como una guía para que todos los navegadores tengan propiedades similares y para qué queremos esto simple Porque si nosotros tenemos 30 navegadores diferentes hace Muchísimo tiempo teníamos por ejemplo a Google Chrome teníamos al al Explorer a mochila teníamos 30,000 operadores y cada uno interpretaba las cosas como quería Entonces por ahí uno tenía una propiedad que era sombras y otro no tenía sombras uno tenía una propiedad que era para ver no sé eh un color de fondo y otro no tenía color de fondo Entonces ustedes escriben un

código y ese código tiene que ser diferente para cada navegador si el usuario abre con Chrome le cargamos un código si el usuario abre con no sé con mochila le cargamos otro código y esto es inviable entonces lo que queremos nosotros es que nosotros escribamos el código una vez y todos los navegadores lo entiendan de la misma forma para que no importa desde dónde se abra siempre cargue el mismo contenido la página se vea igual porque nosotros todas las propiedades que sabemos que existen las definimos eso es lo que hace css establece como un un

Estándar que todos los navegadores tienen que cumplir para que nosotros lo que hagamos con ccs sea decirle Cuáles van a ser las propiedades de ese elemento porque sí el navegador le da a los elementos las propiedades que el navegador quiere las propiedades por defecto el navegador puede agarrar el h1 y decirle vas a tener este color este borde este texto este fondo esto esto esto le Define todo lo que tiene pero acá aparece la magia de ccs ccs lo que Hace es permitirnos a nosotros agarrar esos elementos y modificarlos por qué Porque si todos los

navegadores tienen propiedades que son todas similares lo que podemos hacer como desarrolladores es decirle he navegador esta propiedad del modificas Ela esta propiedad del tamaño ciasa a lo que yo te pido las sombras sácasela y le podemos decir al navegador cómo queremos nosotros que sea cada elemento Y sí eso es lo que hace css css De hecho significa cascading Style sheets u hojas de estilo en cascada y justamente se encarga de definir Cómo se tienen que Mostrar los elementos en una página web Entonces html se centra en crear la estructura y crear elementos y ccs

haar esos elementos que se crearon con html y les modifica todas sus propiedades css funciona mediante reglas de estilo por ejemplo podés definir el color el tamaño el espaciado los bordes y muchos otros aspectos de los elementos la estructura De una regla de estilo de css consta de un selector y un bloque de declaraciones el selector hace referencia al elemento html que le querés modificar sus propiedades y el bloque de declaraciones tiene todas las propiedades que queremos modificar y cuál va a ser el valor que queremos que tengan por ejemplo si yo tengo varios párrafos

en mi página y quiero que todos los párrafos tengan un color azul y un tamaño de 18 píxeles voy a mi sección de css escribo un p de esa Forma ya tengo seleccionados a todos los párrafos y después lo que hago es abrir un bloque de declaraciones que se abre con llaves y adentro de ese bloque tenemos que escribir todas las propiedades que queremos modificar y cuál va a ser el valor que queremos que tengan esas propiedades entonces si yo quiero Modificar el color pondría color Blue ya con esto acabo de hacer una declaración acabo

de declarar que todos los párrafos van a tener un color azul Si queremos escribir otra declaración Antes tenemos que poner un punto y coma que se usa para separar declaraciones entre sí Ahora sí ponemos font size que significa el tamaño la letra y le damos por ejemplo 18 píxeles y ahí AC vamos hacer la segunda declaración que es queremos que el tamaño de todos los párrafos sea de 18 píxeles esto es básicamente css Entonces ahora que comprendimos todo esto tenemos que saber que entender bien html significa Entender bien cómo escribir cada elemento También tenemos que

ver ciertas configuraciones Como por ejemplo que son los atributos tenemos que también conocer las etiquetas aut cerra o las self closing tags tenemos que ver los tipos de etiquetas porque tenemos etiquetas de texto tenemos semánticas tenemos estructuras tenemos las metatags También tenemos un tema eh de seo tenemos que ver cómo cómo escribir todo para que la los navegadores lo muestren Más arriba la página en Google cuando se busque Bueno entonces eso es lo que vamos a ver en este curso en html vamos a ver todas las posibilidades que nos brinda esta tecnología para que podamos

definir y dominar por completo la creación de la estructura de una página web eso con html y paralelamente vamos a aprender también css pero qué es lo que vamos a aprender con css vamos a ver todas las formas que tenemos de seleccionar elementos porque podemos Seleccionar un elemento puntual varios elementos un grupo de elementos podemos separarlo por clases por ids aparecen también los pseudo elementos las pseudoclases y además de eso tenemos 30,000 propiedades 30,000 formas de modificar y combinar los elementos para que estéticamente queden hermosos y sea navegable y sea todo link tenemos que ver

cosas como por ejemplo responsive design que es por ejemplo que esté adaptado para que los quieran ver desde El celular desde una tablet o desde una computadora que se pueda ver desde todo los dispositivos Porque si dejamos la resolución fija se ve solamente en uno tenemos que ver que se adapte a todas y también la forma en la que se le suele hacer esto con una página web porque una cosa son las herramientas y otra cosa es en la vida real y en la práctica cómo es que los desarrolladores de verdad utilizan esas tecnologías y

Cómo escriben los elementos y cómo definen Sus propiedades bueno Hay muchísimas cosas que tenemos que ver para dominar estas dos grandes tecnologías y salir hechos unos expertos haciendo páginas web todo esto es lo que vamos a estar aprendiendo en este curso va a ser un curso super completo hice un research en en internet y en YouTube y en un montón de lugares para ver cuáles eran todas las cosas que daban los cursos de html y css tanto los que son solo de html solo de css y los que están juntos busquen Cursos de pago busquen

cursos gratis busquen todo lo que hay disponible lo que Puedo imaginarme los mejores los que están catalogados como top Incluyendo los de Hardware que también pude ver y créanme que con todo lo mejor de cada uno armé el mejor temario construí las mejores clases me armé las mejores explicaciones Y esto es lo que va a resultar les puedo asegurar que es un curso completísimo y que tiene todo realmente no van a necesitar nada más Que este curso incluso les voy a dejar tarea para que hagan les voy a dejar tareas para que puedan seguir mejorando

al terminarlo y para que puedan ir mientras van avanzando bueno es una locura vamos de poquito pero créanme que es un curso que tiene todo Ahora sí después de esta breve pero super importante introducción vamos a comenzar Así que sí ya es momento de prender la computadora y sentarse frente a un teclado porque lo van a necesitar porque Ahora comenzamos con la parte técnica La mejor de todas Así que vamos a la primer sección de todas que no vamos a ver código Todavía nos falta la última que es elegir un editor de texto Así que

vamos a ver cómo es esto porque vamos a configurarlo vamos a ver que es un editor de texto y demás Así que vamos bueno en esta sección lo que vamos a hacer es una de las cosas principales más importantes de todas que es optar por una herramienta para desarrollar Esta herramienta se llama editor de código que es En definitiva un programa que literalmente nos ayuda a escribir más rápido el código Bueno también nos ayuda a evitar errores entre muchas otras cosas más O sea imagínense que tuviéramos que hacer una página web en un blog de

notas solo miren miren esto miren lo que es escribir una página acá No tendríamos quec unos enfermos de mi desarrolladores utilizamos editores de código o id para programar como que Editor de código o ID Bueno un ID los ID son como editores de código pero más completos básicamente los ID son programas enteros Okay que tienen un editor de código integrado Pero además tien muchas otras cosas más otras herramientas pero para html y css estamos sobrados con un editor de código el más común del mundo el más el el más usado del universo hasta ahora por

todos los desarrolladores es visual Studio code a ver está desarrollado por Microsoft tampoco hay que hablar mucho más Microsoft compró Open Ai tiene github que es la fuente de repositorios más grande del mundo Open Ai es la empresa que hace sistemas Como por ejemplo chat gpt que utiliza los modelos de Inteligencia artificial más avanzados en la actualidad Entonces nada las herramientas que nos brindan Son increíbles además con todas las cosas que trae y las extensiones que podemos agregarles se puede convertir en un ide Sin problemas así que es como un editor híbrido porque puede ser

un ID o puede ser un editor lo que nosotros querramos esta flexibilidad hace que sea espectacular de hecho hice un curso completo para utilizar visual Studio code que lo pueden ver el curso es este que está acá está espectacular el curso o sea tocamos un montón de temas desde lo las cosas que no se imaginan en fin Bueno vamos a descargarlo ahora bueno para arrancar venimos a Google y Buscamos visual Studio code o bsc como sea bsc es la Aviación que tiene y acá ya nos salta este que es code.visualstudio.com entramos acá se nos va

a abrir esto y esto va a adaptarse a su sistema operativo si ustedes tienen Mac se va a cargar para Mac si ustedes tienen eh Linux se va a cargar por Linux en este caso le damos download for Windows acá se nos va a abrir esta pestaña ponemos en dónde descargarlo lo voy a ejecutar acá Todos Los cursos dicen yo no lo descargo porque ya lo tengo no no no ustedes no saben el lío que es desinstalarse y reiniciar visual Studio code acabo de desinstalar meelo todo para volvérmelo instalar con ustedes soy un capo Bueno

le doy acá en abrir acepto el acuerdo le damos en siguiente siguiente siguiente acá le voy a dar en crear un acceso directo en el escritorio y ahora sí le damos todo siguiente siguiente siguiente esperamos a que se instale es bastante Rápida la instalación ahí se terminó y lo abrimos le damos ejecutar y le damos finalizar esto la verdad que es bastante simple Este es el editor de código lo primero que tenemos que hacer es elegir el tema tenemos estos cuatro temas Okay pero estos tres es gente para gente con problemitas Okay le vamos a

dar en el Dark Modern porque es el más afable que tiene vamos a venir acá abajo y le vamos a dar en Mark done le damos acá y ahí se nos Abre Esto bueno Esta es la interfaz Inicial Okay que tiene visual Studio code mi consejo Ahora sí es un consejo nada más véanse este curso o sea está subido pero no está publicado se publica ahora ya en breve este fin de semana pero cuando ustedes vean este curso ya va a estar recontra publicado si ustedes jamás en su vida tocaron una línea de código jamás

escribieron su primer línea de código véanse el curso hasta la sección de Explorer Okay hasta esta sección de acá nada Es solamente una Recomendación pero básicamente tenemos una opción que es Open folder yo le voy a dar clic acá en Open folder vamos a venir a escritorio voy a dar botón derecho nuevo voy a ponerle cursito html le doy enter y se va a crear esta carpeta Okay le doy acá la selecciono Y le doy en seleccionar carpeta como ven me va a abrir esta pestaña que me dice eh si Confío en los autores le

vamos a dar en sí y acá como ven me sale la carpeta esto que está acá vamos a darle Voy a hacer un pequeño zoom Acá tengo la carpeta ya yo puedo acá crear archivos ven puedo escribir un archivo por ejemplo un archivo texto y ya acá tengo mi archivo de texto y acá comienzo a escribir Okay ahora ahora vamos a ver de configurarlo porque tiene varias cosas que son interesantes y voy a eliminar este archivo esto que está acá le voy a dar en hide y acá también le voy a dar el botón derecho

hide porque quiero que nos enfoquemos ahora en esto botón Derecho estas dos pestañas y hide para comenzar vamos a crear un primer archivo que se va a llamar Index html ahora vamos a ver tranquilos ustedes háganme caso y crenlo pongan primer archivo html Okay acá tenemos las extensiones Okay si se fijan nos va se nos va a desplazar este menú Okay se puede desplazar este que dice recomendadas mi consejo es ciérrelo puede estar este de popular ciérrelo con este botoncito de acá se suben los menús Y acá tenemos esto que dice Search extensions Nosotros le

vamos a dar clic acá y vamos a buscar prer esto que está acá es un formateador de código fíjense que tiene 39.8 millones de descargas le damos en install básicamente nos ayuda a identar mejor el código la palabra identar es como una forma de decir ordenar pero ayuda por ejemplo a agregar de línea cuando son necesarios acomodar todo el código correctamente en su lugar nos da un buen formato para el código Mantiene como un un una forma del código que nos sirve después vamos a instalar otra que se llama indent Rainbow Okay que esta para

aprender va a ser Va a ser importante que básicamente lo que hace es me agrega Estos espacios como pueden ver acá que básicamente me dicen cuándo estamos entando correctamente no quiero explicarles mucho okay pero básicamente ven esto que está acá estas linitas bueno Esto lo que hace esto me lo agrega esta extensión esto esto este color que Me da fíjense que si yo de repente hago esto Estos espacios que están como separados Me lo me lo agrega esta extensión que más adelante vamos a ver para qué los necesitamos okay Porque los vamos a necesitar pero

por ahora no se preocupen ni siquiera de lo que acabo de hacer es lo más lógico que no entiendan un joraca que solamente para que vayan entendiendo un poquito También tenemos que instalar image preview okay Que básicamente es para que podamos Visualizar las imágenes que tenemos referenciadas okay O sea cuando pasemos el mouse por encima de una ruta de imagen se muestre Cuál es la imagen que está enlazando esto es importante porque cuando veamos cómo crear imágenes y demás vamos a tener que poner el nombre de la imagen o la ruta de la imagen y

tenemos que pasar el mouse por encima Para ver si lo hicimos bien y si lo hicimos bien nos va a saltar la imagen y nos lo va a mostrar si no no nos va a Mostrar nada Ahora vamos a instalar algo que se llama Live server si yo por ejemplo hago una página web Okay no se olviden que las páginas web como dijimos desde que comenzó el curso si nosotros escribimos un código ese código se lo damos al navegador y el navegador lo interpreta pero si modificamos el archivo y lo guardamos tenemos que también actualizar

y recargar la página para que los cambios también vuelvan a cargar en cambio esto que está acá que Es Live server lo que hace es nos levanta un servidor local en el que nosotros podemos hacer cambios y esos cambios se muestran en tiempo real Entonces le vamos a dar en instal acá abajo nos va a aparecer algo que dice Go Live Acá está y esto que dice Go Live básicamente lo que nos va a permitir es hacer esto observen lo para que lo entiendan bien si ustedes por ejemplo le dan escriben cualquier cosa okay Y

le dan en Go Live van a ver qué es lo que Pasa voy a hacer algo para que ustedes se entiendan mejor Hola cómo va control S y se actualizó en tiempo real todo bien control S para guardar y se actualiza en tiempo real Entonces yo puedo escribir acá y con control S lo guardo si aprietan la tecla control o en Mac command más ese se guarda la página o sea ven que acá arriba hay un puntito este puntito significa que la página o sea no está guardada si yo por ejemplo la guardo control S

acá se recarga la Página si yo escribo de vuelta fíjense que arriba me aparece el puntito que significa Ey hay un cambio en la página que todavía no guardaste entonces dale control S y se guarda y ahí desaparece el punto y acá se me hace el cambio se borran todo actualizan y ahí se acaba de actualizar el cambio Bueno eso es lo que hace la extensión Live server es poder ver todos los cambios que trabajamos en tiempo real vamos a abrir extensiones de vuelta y ahora vamos a instalar un tema Porque no me gusta que

se vean así los colores o sea fíjense poner html 2.5 Y esto es un plugin que me carga toda una estructura completa fíjense los colores que tienen a mí los colores la verdad que no me llaman mucho la tensión lo voy a dejar en mínimo Entonces yo lo que voy a hacer va a ser instalar un color dem que esto lo que hace es cambiarme y modificarme el aspecto del editor para eso voy a buscar pal night y me va a cargar este que está acá yo lo voy a Instalar y fíjense que ni bien

se instala me va a saltar todas las opciones que tiene Yo le doy en la primera que es Midnight ahora los colores que me puso a mí me gustan más lo voy a dejar hay otro muy común también que se llama Dark One que es muy util ADO este de dark One el de Atom y también tenemos Dark One Pro lo pueden usar pueden usar el que quieran fíjense que si le dan instalar lo mismo se va a instalar y les va a preguntar cuál de Todas las versiones de El el Dark Pro quieren usar

supónganse que ustedes le dan acá en mix fíjense Cómo cambian los colores si se mandan una y lo escriben mal pueden darle en settings donde dice tems y acá tienen color them y acá Estos son todos los temas que están disponibles van se van moviendo con la fita para arriba y para abajo y acá pueden ver todos los disponibles que hay yo le voy a dejar en parite porque me gusta este sobre todo para explicar Además es una aspecto que no es tan tan fuerte Porque no nos mata a la vista no nos no nos

encandila ni por mucho brillo blanco ni tampoco nos genera un contraste que nos hace mal a la vista entre un fondo negro y letras claras para mí es el es perfecto para una buena visualización del código y si no tienen otra opción más fácil que es apretan control shift p y escriben color espacio them y acá le dan a donde dice preference color them y aprietan ahí y Se les va a abrir de vuelta esto donde pueden deslizar y elegir o tienen otra opción que es control kt o sea aprietan la el control mientras apretan

control apretan k y t esas tres al mismo tiempo en ese orden y se los va a abrir también cualquiera de estas está bien yo lo voy a dejar de vuelta en este lugar y ya quedamos voy a poner 20 esto solamente para que ustedes vean más grande la letra no hace falta que aprendan a hacer esto esto lo explico en el curso de Visual Studio code así que bueno ya está ya tenemos configurado nuestro editor de código Ahora sí gente vamos directo a la sección de html vamos a comenzar con la base de todo

vamos a arrancar con el código voy a borrar esto de acá lo voy a dejar vacío en blanco así voy a hacer De hecho voy a hacer un pequeño un pequeño zoom y ahora sí vamos a ver bien cómo funciona esto Comencemos con una pequeña sección de html vamos Bueno antes de comenzar con la Sección de html quiero dejar en clarito dos cosas primero ustedes se pueden quedar tranquilos de que todo les va a salir bien y todo les va a funcionar primero porque todo el código que yo escriba va a quedar en pequeñas carpetitas

que yo voy a subir a un enlace que van a tener en la descripción Ese es mi repositorio de github donde ustedes van a poder ir ver lo que yo tengo lo que ustedes tienen y comparar Incluso se van a poder descargar los Archivos para que ustedes también los puedan probar así que quédense tranquilos de que aprender y entender van a entender y van a aprender de hecho por algo estás hasta acá no Espero que todo lo anterior lo hayas entendido es decir ya algo pudiste ver como explico y lo segundo es que vamos a

volver a las tradiciones antiguas y ahora mismo como estamos explicando html el color de fondo es bueno lógicamente naranja porque el logo de html es naranja cuando Expliquemos SS el color predominante va a ser el Celeste Celeste azulado Y de esa forma también a ustedes también van a sentir una especie de sensación extraña cuando me vean azul y cuando me vean naranja no que son los dos colores de html Y css eso es un detalle menor la verdad que no aporta nada técnico técnico pero bueno a muchos de ustedes les gustaba en otros cursos que

hacía lo mismo que me decían por favor hacelo Es más si ahora tienen luces Pónganse las Naranjas porque vamos a arrancar con html para arrancar no se olviden que en html cada elemento está definido por etiquetas acá tenemos esto que está acá y lo primero que tienen que hacer es crearse este archivo que tiene que terminar en punto html una recomendación ahora que ustedes van a estar trabajando como desarrolladores es vengan a donde dice carpetas y acá arriba donde dice vista Okay Tienen que darle en este tilde que dice elementos ocultos y Extensiones de nombre

de archivo porque nosotros trabajamos con carpetas ocultas Como por ejemplo las que comienzan con punto y además ustedes ya saben que todos los archivos tienen un extensión por ejemplo una imágenes pun jpg un videoos pun mp4 puede ser punto mov también las imágenes pueden ser png jpg.jpg los audios pueden ser punto wab MP3 bueno para ver ese formato tienen que tener activada esta opción porque muchas veces van a querer cambiarles el Formato algunos archivos o crearlos directamente desde desde su explorador de archivos y no van a poder porque Nunca van a estar modificando el formato

siempre van a estar modificando solamente el nombre entonces por eso es importante tenerla activa aunque no se preocupen porque visual Studio code Si nos deja modificar directamente el formato y vamos a trabajar desde visual Studio code pero digo para que no se mareen que sepan que nada lo necesitan Y Por qué bueno ahora porque vamos a trabajar con el Index y en su Index escriben todo su código el servidor al que ustedes suban la página va a buscar dónde está el archivo Index html que va a tener el código que tienen que mostrar en este

caso por eso se llama Index que significa índice por eso es un Index es un índice y el punto html porque ese es el formato Okay como dijimos antes yo por ejemplo Acá tengo una imagen Default.jpg si la abro se me abre porque sua una imagen Acá tengo por ejemplo otra imagen logo.png si lo ejecuto se me abre una imagen png Acá tengo el chrom log.txt si lo ejecuto se me abre una archivo.txt que ahora se me abrí un visual Studio c porque lo tengo así configurado pero si no es a ustedes se les abrira

el blog de notas bueno las páginas web si se fijan terminan en punto html entonces si yo ahora por ejemplo le doy doble clic acá todas las Páginas se van a abrir de esta forma Así es como abrimos una página web con doble clic y se abre la página web pero si no tuviera este punto html no la podemos abrir y si nosotros no tenemos activada esta opción ven no vemos el punto html por eso es importante que la tengan activada para poder ver el formato Así que nada solamente es un pequeño detalle ese bueno

ahora sí podemos arrancar al fin bueno para arrancar sabemos que el formato de un archivo en el que vamos a Escribir código html tiene que tener punto html Ya está ya lo hicimos creamos un archivo pun html de hecho acá abajo nuestro editor de código nos dice ey estás escribiendo código html entonces las ayudas que nos va a dar los colores que nos va a poner y todo van a a ser en html para arrancar no se olviden que todo funciona por etiquetas para abrir una etiqueta se utiliza este signo que está acá el signo

de menor que y acá ponemos el nombre de la etiqueta por Ejemplo nombre No acá tiene que estar la etiqueta Así que yo voy a poner tag porque una etiqueta en inglés se llama Tag y para no escribir etiqueta escribo tag pero es lo mismo acá va el nombre de la etiqueta no se olviden que tenemos muchas etiquetas puede ser cualquier etiqueta y acá va el nombre y fíjense que cuando yo pongo el otro signito que es este signo que está acá que básicamente lo que hace es cerrarme el archivo una cosa que quiero hacer

antes Es darle clic acá en el Explorer para que se me cierre voy a hacer un pequeño zoom de vuelta Ahora sí lo que quiero demostrar es que ustedes Acá lo que están viendo Es que se cerró solo bueno este autoc Close el cerrado automático Ya lo vamos a ver pero básicamente las etiquetas se abren así con un menor que el el nombre de la etiqueta y acá un mayor que de esta forma estamos encerrando una apertura Así es como abrimos una etiqueta todo lo que siga de Ahora en más va a ser parte de

la etiqueta si yo acá por ejemplo tuviera un negrita esto lo que hace es ponerte el texto en negrita si yo lo que tuviera acá todo lo que siga después de acá todo lo que continúe de acá en adelante va a formar parte de negrita si yo quiero que por ejemplo voy a escribir algo acá no voy a escribir esto yo quiero que esto que está acá ya no esté negrita qué hago Tengo que cerrar la etiqueta para eso lo hago de esta forma y se cierra la Etiqueta es igual que para abrirla Solo que

se utiliza este signito acá est esta barra que le está diciendo Ey la etiqueta llegó hasta acá entonces todo lo que esté entre esto y esto va a formar parte de este elemento completo todo lo que esté por fuera ya va a ser simplemente texto simple entonces esa es la estructura de una etiqueta Okay volvamos es tag contenido tag es decir abrimos etiqueta adentro va el contenido que queremos etiquetar y cerramos el tag Así funcionan la mayoría de elementos html yo por ejemplo Quiero poner un encabezado pongo encabezado texto del encabezado cierro el encabezado Quiero

poner un párrafo pongo párrafo contenido del párrafo cierro el párrafo así como si ustedes van a WhatsApp y ponen así texto esto que está acá en WhatsApp se muestra en negrita Bueno es lo mismo solamente que acá en vez de poner esto ustedes ponen un tal nada Siento que estoy siendo super básico Pero hay Muchísima gente que aunque ustedes no lo crean no entiende y le cuesta entender intento hacerlo lo más abarcativo posible créanme que cuando nos metamos en cosas más avanzadas les va a encantar que sea así Ahora parece una boludez y parece que

estoy siendo muy muy flojito sobre todo para los ya vieron alguna vez algo de código Pero los que recién están arrancando me lo van a agradecer y cuando nos metamos en temas más avanzados también me lo van a agradecer Incluso los que ya saben una cosa que tenemos que tener en cuenta también que esto es a nivel semántico y Es que todas las etiquetas siempre tienen una función lo que vamos a ver en este curso son las etiquetas que uno realmente utiliza para desarrollar en la vida real Hay muchísimas que están obsoletas O sea no

se usan más Hay muchísimas que directamente son nefastas que no es buen no es recomendado utilizar por ejemplo esta etiqueta la de poner texto en Negrita digamos no se suele hacer porque lo que hacemos con html no es dar estilo Okay el estilo se da después con css normalmente cuando uno Crea una página en html la página queda horrenda queda asquerosa y después con ccs se le da la magia uno no puede crear una página en html con todo estilo y que la página se vea bien con html Porque después con css va a ser

complicado modificarlo pero nada eso con el tiempo lo vamos a ir viendo lo que quiero que entiendan Es Que todas las etiquetas tienen un uso todas es más cada una cumple una función muy específica por ahí van a ha etiquetas que son exactamente iguales pero a nivel semántico no Y esto es importante porque cuando nosotros presentamos nuestra página ante los motores de búsqueda Como por ejemplo Google hablo de esto del buscador Okay este esto es un buscador que tiene incorporado un motor de búsqueda Y si nosotros buscamos algo por ejemplo soy Dalto yo busco soy

dalto acá esto que están viendo acá Okay esto que al Buscar soy dalto hay páginas que aparecen primero porque están bien posicionadas Es decir tienen seo bueno todas estas cosas que Google entiende que cuando buscamos en Google aparecen aparecen porque Google entiende el contenido si ustedes le dan un significado correspondiente Google cuando lea su página los va a posicionar más arriba o sea son son formas de hacer páginas web No solamente para que se vea estética sino que para que también aparezcan mejor posicionadas cuando ustedes las buscan en Google que muchas veces eso es lo

importante de una página web si estamos vendiendo algo acá aparezcan resultados de tu tienda Online para hacer eso tenés que saber usar las etiquetas Entonces ustedes van a ver que en realidad en el fondo las etiquetas funcionan bastante similar o sea de hecho casi todas las etiquetas son Iguales porque no se olviden con una etiqueta en html Okay es literalmente como un bloquecito podemos hacer que esta que está acá y esta etiqueta sean exactamente iguales Por qué Porque agarramos con css y a css hacem la hacemos que tengan las mismas propiedades o si tenemos un

elemento html y otro elemento html que son distintos pero ambos tienen las mismas propiedades y los mismos valores entonces son exactamente iguales si tien Mismo color mismo tamaño mismo texto son el mismo elemento bueno acá viene la magia Cuando digo que cada etiqueta es para algo diferente no es porque nosotros después cuando escribamos el código se van a ver diferente no necesariamente es por eso algunas etiquetas Sí son diferentes pero lo que digo es que normalmente casi todas las etiquetas por ejemplo de texto o que arman bloques o que arman estructuras funcionan igual a nivel

código pero no a Nivel semántico o sea nosotros cuando creamos una página tenemos que hacer que cuando otro desarrollador venga y lea lo que escribimos sepa que estamos escribiendo Ah acaba una sección Ah okay acaba una sección secundaria Ah perfecto Ah esta palabra es una palabra destacada es una forma es una una forma correcta de trabajar escribir html que sea semántico y que cada etiqueta cumpla el rol que tiene que cumplir esto que está acá por ejemplo son dos tipos de Encabezado diferente este que está acá es para títulos los más importantes de la página

y este que está acá es para por ejemplo subtítulos importantes si yo pongo subtítulos importantes en el lugar en donde tiene que estar el título se va a ver igual porque si lo editamos con css podemos hacer que se vean a nivel aspecto visual que sean idénticos Pero qué pasa cuando Google lo lea le va a dar más importancia al h1 que al h2 Cuando quiera recomendar nuestra página No la va a poder recomendar porque no hay estructura cuando un desarrollador quiera editar va a estar buscando el h1 y no lo va a encontrar entonces

son cosas que hacemos simplemente para que nuestra página quede mejor posicionada en los navegadores y cuando nosotros podamos hacer otras cosas tengamos más beneficio Eso es todo lo que tienen que saber sobre la estructura de una etiqueta httl tag contenido y se cierra de hecho fíjense que si yo hago así y Escribo tag y hago así se me termina de cerrar la etiqueta automáticamente y el cursor se me posiciona acá Entonces yo por ejemplo Quiero poner un h1 escribo h1 okay Y acá ya me puedo poner a escribir el contenido estas son una de las

ayudas que nos dan el editor de código además de fíjense de poner esto de un color esto de de otro color en realidad es texto plano solamente que el navegador el perdón el editor de código reconoce Qué estamos intentando escribir Reconoce que es una etiqueta y por eso me pone el nombre de la etiqueta de rojo eh estos signos me los pone más azulcito y el contenido me lo deja blanco pero nada la verdad que hasta ahora Estamos muy simple esto es muy sencillo Ya vimos la estructura de una etiqueta entendimos que cada etiqueta tiene

un uso diferente o sea cada etiqueta es en realidad un elemento que el navegador trae por defecto configurado con ciertas propiedades que tiene un uso específico Y que también a nivel semántico cada elemento está creado para solucionar un problema o para construir algo muy puntual lo que vamos a ir viendo ahora es justamente cómo son cada uno de esos elementos Para qué se usan cada uno de esos elementos y Cómo podemos construir cosas en base a estos elementos Así que vamos Ahora sí a arrancar con la base de todo y estoy hablando de párrafos y

encabezados vamos Ahora sí a ver lo más básico de lo más básico que son los Párrafos y los encabezados vamos bueno para empezar como yo tengo el navegador predeterminado que no es Google Chrome y yo quiero usar Google Chrome es decir yo tengo opera y yo doy en Go Live si se fijan me va a abrir ópera yo no quiero esto yo quiero que me abra Chrome para eso tengo que venir acá y poner navegador y acá me dice elige un explorador predeterminado le damos acá y acá fíjense que esto que está acá dice navegador

web buen Yo le doy clic acá y Le doy en Google Chrome entonces esa forma Ahora sí mi navegador web predeterminado va a ser Google Chrome esto es más fácil ustedes pueden buscar También acá aplicaciones predeterminadas y también les va a saltar ven abren esto y acá se les Abre Esto entonces ahora cada vez que ustedes abran una página web o lo que sea siempre se les va a abrir con Google Chrome esto es buenísimo y es lo que recomiendo Pero si ustedes no llegan a saber hacerlo son Medio tontos están medio gagas no se

preocupen que igual con opera funciona todo Exactamente igual así que no van a tener ningún problema de hecho opera y casi todos los navegadores de hoy en día están basados en chromium que es la tecnología detrás del motor de Google Pero bueno si me siguieron los pasos y les salió bien van a poder cerrar el puerto Okay ahora sí ya está cerrado lo vuelven a correr y ahora se debería Abrir Google Chrome acá tenemos Google Chrome perfecto Pero fíjense que acá me va a decir algo fíjense que me está diciendo que el Live reload no

se puede abrir sin un una etiqueta Head o una etiqueta Body esto es porque todas las páginas web tienen una estructura Okay esto es importante Vamos a darle en I understand Don't show Again please y básicamente esto que está acá me está diciendo Ey tenés que crear la estructura de una página web porque toda página web tiene una estructura si Nosotros escribimos en visual Studio code html5 html 2.5 y se nos va a cargar todo esto todo esto es la estructura de una página web Okay esto que está acá lo vamos a borrar porque no

nos interesa todavía qué joraca es esto Bueno vamos a verlo paso a paso Esta que está acá es una etiqueta dog type que Define el la versión de html que estamos utilizando en este caso es la última Así que esto que está acá Tiene que estar siempre es una etiqueta que no necesita cerrarse ni Nada o sea es como es así tal cual lo copian la pegan Y ya está no es que tenemos que cerrarla así poner html Y cerrar Esto no se hace No necesitamos hacer eso la que continúa es una etiqueta que se

abre acá y cierra acá Okay de hecho vamos a dejarlo así esto que está acá es una etiqueta que se abre acá y cierra acá esto es un atributo que significa in o english lo vamos a sacar después vamos vamos a ver bien quiero que ustedes aprendan de la forma más Tranquila y entendible posible después vamos a ir agregándole cositas esto que está acá lo que hace es definir que la estructura todo lo que va a estar acá dentro va a ser parte de la página web Okay esto solamente para decirle al navegador Qué versión

de html usamos Pero esto ya es para hablarle directamente y decirle todo lo que esté acá dentro va a ser nuestra página web es decir todo lo que pongamos dentro de esta etiqueta y esta etiqueta ya va a Tratarse de página web si nosotros borramos este espacio de acá y le damos enter fíjense que ya me va a posicionar el cursor acá me está posicionando el cursor unos 1 2 3 cuatro espacios más adelante porque esto que está acá Define Cuántos espacios deja de entado en este caso toda estructura de html está compuesta por dos

cosas primero tenemos el hadad Okay que es esto que está acá que básicamente le dice a la página web un montón de cosas de información de la Página es la parte de la información de la página lo que no podemos ver por ejemplo ponemos el title y esto que está acá es otra etiqueta que lo que está haciendo es definir el título de la pestaña ven acá arriba que acá dice 127 70.0.15 cambiamos esto le ponemos primera Y actualizamos fíjense que ahora ya me está cambiando porque ya ya funciona en tiempo real si nosotros acá

Venimos dejamos espacio y ponemos cursito dal Alto actualizamos acá va decir cursito de alto aprendiendo html y ahí está acá tenemos el título Este título básicamente tiene que ser una descripción de la página básicamente los títulos siempre describen todo en este caso si yo por ejemplo esta página web se trata de no sé recetas de cocina las tres mejores recetas de cocina por ejemplo voy a darle un menos acá y ahora sí yo tengo este texto que dice las tres mejores recetas de cocina acá me va a Decir las tres mejores recetas de cocina gis

Ahí va la mejor receta de gis ahí nos queda más cortito y puedo hacer un zoom acá tenemos una página que nos está diciendo la mejor receta de okis bueno Además del Head tenemos otra sección acá Además del Head van otras cosas va por ejemplo el meta meta description va el meta keyword va el utf8 Hay un montón de cosas que ya vamos ir viendo con el curso pero acá básicamente es toda la parte de información que no es visible Esto no es visible fíjense que ustedes lo pueden ver acá arriba pero no es información

visible que el navegador tenga que poner acá dentro de esta parte blanca No eso va en una sección llamada Body el body básicamente acá va a estar toda la parte visual de nuestra página web adentro del Body vamos a contener todo lo visible de la web de hecho si yo acá escribo cualquier cosa y actualizo fíjense que acá ya me aparece el cambio Esta es la estructura de una página web Okay así como lo están viendo hay un doc type que Define el tipo de versión que estamos usando esto que está acá le dice al

navegador De hecho si ponen el mouse por encima acá van a ver la definición ven el elemento html representa la raíz de un documento html y la parte visible está en el el body De hecho si ponemos el mouse encima de Body acá nos va a decir una especie de definición de mdn que es básicamente el developer mochilla que es una de las estandarizaciones Oficiales en las que nos podemos basar para escribir el elemento Body representa el contenido del documento y fíjense acá que el Head si ponemos el mouse encima dice el elemento Head representa

una colección de metadatos para el documento ahora vamos a ver lo que son los metadatos esperen pero como decimos son todas cosas que no necesariamente son visibles y normalmente toda la página web la construimos adentro de Body Así que Ahora sí ya con la estructura lista estamos listos para comenzar acá para que ustedes puedan verlo mejor voy a sacarlo y ponerle otra cosa Esto que está acá es un mini map que si se fijan básicamente el mini map es como una especie de scroll pero que nos lleva a una parte del código que esto sabe

que podemos ver así que lo que voy a hacer es darle botón derecho y le voy a dar en este esto que dice mini map Ahí está y ahora fíjense que tengo más espacio para Escribir a mí nunca me gustó el minimap Así que lo voy a sacar ahora sí vamos a arrancar con lo que son los párrafos y los encabezados Porque al fin y al cabo íbamos a ver eh párrafos y encabezados y terminamos viendo la estructura básica de una página Pero bueno nada No se preocupen porque igual era necesario vamos a comenzar con

los párrafos los párrafos son esta etiqueta p okay Que básicamente se utilizan para eso para describir párrafos acá dentro Vamos a poner el contenido y acá escribimos todo el contenido de la página yo voy a darle lorem y le voy a dar en la tecla Tab para que me salte todo este texto y además voy a apretar alt Z o voy a apretar control shift p Word wrap y acá le voy a dar enter de esa forma fíjense que el texto se adapta a la resolución de mi editor ven si el editor se hace más

grande el texto se va adaptando a la ventana ahí por eso es importante que tengamos esa opción Activada le voy a dar en control S para guardar Ahí está y acá ya me salta el contenido ahora Cuál es la diferencia entre escribir un párrafo por ejemplo y directamente no escribirlo si actualizamos parece que es lo mismo hay un cambio mínimo si se fijan hay un cambiecito mínimo esto que est p no me lo muestre más no TR decir nunca en latín si venimos acá y lo hacemos de vuelta ven apretamos control S van a ver

como que me sube un poquito porque este Esta etiqueta tiene una propiedad por efecto que nos hace que haya un poquito más de espacio entre arriba y el siguiente elemento y abajo pero bueno eso ya lo vamos a ver más adelante cuando veamos SS parece que no hay nada pero está mal los párrafos se utilizan para eso específicamente para escribir párrafos lo importante de los párrafos es que siempre tengan una idea y un punto específico cada párrafo que nosotros escribamos tiene que tener un Concepto una idea algo por ejemplo puede describir eh una sección puede

describir un elemento puede ser un mensaje en el chat Esto está bueno porque tiene que describir a algo supónganse que están hablando sobre los beneficios del ejercicio un párrafo podría tratarse de mejorar la salud cardiovascular y otro párrafo podría tratarse por ejemplo de beneficios para de Salud Mental por ejemplo entonces cada párrafo tiene que abarcar algo diferente tiene que abrir y Cerrar con la misma idea con algo tiene que haber un motivo para que exista un párrafo y después tenemos los encabezados que los encabezados son los h1 voy a dejar un espacio acá y acá

arriba voy a poner un h1 y fíjense que acá tengo mi h1 y voy a escribir algo por ejemplo Hola Lucas actualizo y acá me salta este texto que es enorme porque es un encabezado justamente encabeza tenemos seis tipos de encabezado tenemos h1 hasta el h6 yo acab escribir H el Signo del dólar el signito del asterisco y el seis esto le está diciendo a emet que es un plugin que me cree seis elementos de h en ordenados del uno al seis le doy enter y ahí me los crea esto que está acá olvídense no

vamos a ver emet ahora lo vamos a ver después de hecho si quieren entender Bien emet también en el curso de visual Studio code tengo un apartado especial para enseñarles a usar emet Pero esto ignoren ustedes por ahora yo esto lo hago Simplemente para ahorrarme tiempo pero ustedes escriban h1 y copien h1 escriban h2 háganlo así se los aclaro ahora porque me van a ver a lo largo del curso utilizar bastante estos atajos Okay pero ustedes escriban los completo desde cero esto son cosas para la gente que ya sabe como yo que ya ya hacemos

esto y ya lo lo manejamos con mucha naturalidad Okay entonces son atajos para hacerlo Pero ahora que ustedes están aprendiendo Está bueno que los escriban para equivocarse Y cagarla y aprender y entender y comprender no está bueno que utilice los mismos atajos que yo yo uso los atajo pero ustedes Está bueno que lo escriban este que está acá es el texto más grande yo acá voy a poner por ejemplo título Okay y le damos enter se me actualiza dice título acá voy a poner subtítulo y acá voy a hacer lo mismo y los voy a

pegar acá todos y fíjense la diferencia entre el h1 y el h6 Mientras más chiquito es el número más chiquito es el Encabezado el h1 Okay se utiliza para definir se utiliza una sola vez por página web se utiliza solo un h1 esto es porque el h1 básicamente tiene una importancia muy grande en el seo seo significa search engine optimization es posicionamiento web y es esto que les decía Google le da mucha importancia al h1 es decir el h1 es el indicador más importante del contenido de la página si tuviéramos que decir cuál es la

etiqueta más importante que le dice a Google De Qué trata la página bueno esa etiqueta es el h1 por eso tiene que haber solamente un h1 por página Porque si hay más de uno Google va a decir vos te estás pasando de vivo estás intentando poner muchos h1 para aparecer muchas veces en Google Y eso te lo penalizó y ahora si pones más de un h1 cagaste no te voy a mostrar Entonces por cuestiones de seo y posicionamiento el h1 se usa Solamente una vez y ese uso tiene que ser lo más descriptivo posible además

Esto le da más Claridad hay algunas tecnologías de asistencia por ejemplo la gente que es ciega y no puede ver que utiliza páginas web utilizan un aparatito que lo que hace ese aparatito es decirles a esas personas los los contenidos entonces las tecnologías de asistencia por ejemplo el h1 lo leen y entienden De qué trata la página por el h1 entonces Si una persona sigga está viendo la página y tiene 3 h1 se va a confundir porque las en la tecnología de Asistencia se lo va a leer mal entonces también por tema de accesibilidad web

es importante que Ustedes pongan un h1 por página después están todos los demás que esto sí los pueden usar las veces que quieran Okay pero vamos a ver un ejemplo voy venir a Paint supónganse que nosotros tenemos acá una página no la página está compuesta por varios bloques tenemos acá un título principal tenemos acá dos secciones chiquititas básicamente acá nuestra página va a Tener un título sería el h1 porque es el título principal de nuestra página porque es lo que va a describir De qué trata nuestra página ahora si acá por ejemplo estuviéramos hablando de

dos cosas diferentes acá tenemos un artículo sobre algo y acá sobre otra cosa este que está acá ya sería un subtítulo y acá también habría otro subtítulo tendríamos dos subtítulos El de acá y el de acá y acá podemos tener un párrafo por ejemplo y ahí tenemos el contenido de la página Y acá también tenemos un montón de párrafos el h1 es lo más importante y después el h2 lo utilizamos para subtítulos pero si a su vez esta sección que tiene subtítulos fuera todavía más chiquitita acá podemos poner otro subtítulo no sé por ejemplo punto

uno acá vamos a poner punto dos y acá vamos a poner por ejemplo punto TR por ejemplo y acá dentro ponemos todo el contenido Entonces en este caso ahora sí tenemos la página web completa Uh Miren lo que Se pegó acá arriba XD Bueno lo soluciono y ahora vuelvo Ahora sí Bueno entonces acá tenemos por un lado el título principal es decir esto que está acá sería el título principal Entonces es un h1 porque esto es lo más importante de la web Así que lo hacemos con un h1 acá habría un h2 o sea este

subtítulo sería un h2 como lo que describe secciones completas Entonces por nivel jerárquico iría como primera opción de un subtítulo un h2 ven Serían como subsecciones de la Sección principal que es esta Y en este caso acá tendríamos un párrafo en este caso y acá tendríamos otros tres párrafos chiquititos y esto que está en rojo no sería ni un h1 ni un h2 a ver si adivinan Qué sería si dijiste h3 Te felicito porque esto verde de acá también lo deberíamos hacer con un h3 porque los encabezados son justamente eso títulos que le vamos poniendo

a las diferentes secciones voy a entrar por ejemplo acá Okay receta de gis si Nosotros le damos a esta página le damos botón derecho inspeccionar elemento acá abajo inspeccionar van a ver que esto que está acá es un h1 ven es un h1 Sí con 30,000 cosas más esto que está acá todo esto ignoren lo lo importante es que acá voy a darle en control más para que ustedes ust lo puedan ver bien Esto es un h1 acá ven el elemento Ven h1 y fíjense que es el título más importante de la página si seguimos

bajando vamos a encontrar esto que está acá que parece Ser como otro subtítulo Ese es el título de una sección aparte le damos en botón derecho inspeccionar Acá está es un h2 este elemento es un h2 porque es como un subtítulo es otra sección venimos acá abajo Este es otro subtítulo Vamos a darle botón derecho inspeccionar y acá tenemos otro h2 efectivamente esto es otro h2 y acá tenemos un un subtítulo del subtítulo le damos botón derecho infeccionar bueno en este caso es otra cosa que es una lista ordenada porque en Este caso lo que

estamos haciendo es definir algo que después vamos a ver vamos a llegar a eso pero nada a nivel estilo si solamente lo hacemos con html lo único que hace es cambiarnos el tamaño el h1 es el más grande el h6 es el más chiquito y básicamente el h1 se usa Solamente una vez y es la parte más importante que Define el contenido de la página El h2 se usa para poner de subtítulos en otras secciones Y si tuviéramos secciones dentro de otras Secciones ese titulo va con h3 y mientras más abajo nos vamos metiendo más

chiquito es lo que ten tenemos que usar si nuestra página principal tiene subsecciones esas secciones tienen que usar h2 de títulos y si esas esas subsecciones a su vez tienen otra secciones más chiquititas de títulos usamos h3 y mientras más nos vamos metiendo adentro más vamos metiéndonos en la cantidad de encabezados que vamos a utilizar es por un tema de semántica Pero ustedes tranquilamente podían usar h1 para todas y a la pero no es lo recomendado bueno gente vieron que antes habíamos visto eso que decía o listas que es una lista y no sé qué

bueno ahora lo que vamos a ver justamente son listas porque es una de las grandes partes y otro de los componentes es más importantes de una página web que son las listas que no solamente se usan para listar elementos todas las páginas web tienen menú de Navegación Bueno ese menú se construye con listas normalmente de hecho las listas se usan para todo así que vamos a ver qué son las listas y cómo aplicarlas Porque nada tenemos que conocerlas vamos Bueno vamos a ver ahora el apartado de listas y vamos a entender Qué son las listas

para arrancar tenemos dos tipos de listas las ordenadas o las order list y por otro lado las listas desordenadas o las inorder list voy a entrar en Explorer de vuelta voy a Cambiar el nombre como párrafos gu bajo o piso y gu bajo piso encabezados lo guardo y ahora esto les va a quedar a ustedes para que ustedes si quieren comparar lo que hicieron ustedes con lo que hice yo lo puedan hacer y voy a crear un nuevo archivo que va a llamarse listas html y acá me va a cargar esto voy a cerrar este

voy a cerrar el puerto y volverlo a abrir acá se me acaba de abrir el nuevo okay Porque si no me va a funcionar y acá voy A hacer lo mismo voy a escribir html 2.5 o yo los reto a escribir la estructura desde cero doc type html html adad título listas ponen el body y acá estamos ahora sí estamos listos para continuar esto que está acá lo vamos a de vuelta a cerrar para comenzar las listas ordenadas se escriben así ordered list no se olviden que cada etiqueta tiene un significado y esto que está

acá ol significa ordered list entonces todo lo que esté acá dentro va a ser parte de Una lista y la lista tiene a su vez mini elemenos esos elemenos se llaman list o list item l significa list y significa item list item cerramos y acá tenemos esto que está acá que son los list items acá básicamente vamos a poner algo por ejemplo elemento uno y si actualizamos bueno tenemos que cerrar el servidor o recargarlo ahí está ahora sí ya funciona en tiempo real vamos a actualizar y esto que está acá decirle que no traduzca nunca

este sitio así no se me muestra Más esto que es rep pesado y ahora fíjense que me cargó con un uno adelante es decir yo acá por más que lo deje vacío Esto me va a cargar con un punto y un uno si yo creo más listas voy a pegar un par más me van a cargar así pero los elementos están vacíos pero la etiqueta está creada esto que está acá es una forma que tiene el navegador de mostrarnos las listas por defecto la muestra así 1 2 3 ahora si en vez de ol vamos

a poner una cosa vamos a poner Elemento 1 2 3 Ahí está y acá está esto por ejemplo lo podemos utilizar si estamos creando por ejemplo una receta de cocina como antes vimos vieron que antes entramos a una página de cocina Bueno si entramos a una página de cocina podemos utilizar esto por ejemplo una lista ordenada para crear por ejemplo una lista de pasos a seguir primero preparar no sé una clara de huevo y la batí bien bien bien bien después lo integras leche y batí batí bueno el Listado de pasos a seguir lo podemos

hacer con esto con listas ordenadas después obviamente en ccs se les dan 30.000 estilos y se hace lindo de hecho la página a la que entramos acá si se fijan tenía acá una sección de ingredientes y acá nos explicaba todo paso uno paso dos paso tres si le damos botón derecho y le damos en inspeccionar acá tenemos los le ven estos le son los list item Y esto es una ol ven dice ol porque es una lista ordenada entonces Comienza acá porque esto va a ser el contenido de la lista va a ser una lista

ordenada y Acá hay cada elemento Este es un elemento Este es otro elemento Este es otro elemento Este es otro elemento y así si se fijan cada uno de estos elementos que dice Li es algo diferente en la lista todo esto se hace Así de lindo con css podemos agarrar todo lo que hicimos Y hacerlo más lindo vamos a cerrar esto Incluso se le puede sacar este número por adelante yo por ejemplo Vo botón derecho inspeccionar acá puedo ver el código de mi página Ven tengo el doc type el html el Head Ahí está Yo

por ejemplo acabo de hacer algo ráp en ccs no hace falta que lo entiendan a todos los le le di un list Style known que básicamente lo que hace es le saca el numerito que tienen adelante así como le di este estilo le puedo dar 30.000 estilos más para que termine como la página de Oki que vimos recién Pero eso sí con css a lo que voy es que quiero Que no se preocupen por eso ahora ustedes cuando les cargue les va a cargar así pero después con c se saca y se retoca y se

modifica pero esta es la forma correcta de decirle al navegador Ey esto es una lista ordenada el orden sí importa supónganse que tienen una página de Tops no Si tienen una página de Tops Tops 10 mejores videojuegos de habla hispana par de cuatro Qué hacen bueno ponen una lista ordenada por qué porque cada juego va a ser mejor que el Anterior desde el top 10 hasta el top 1 el uno es el mejor entonces ahí se les van a ir enumerando bla bla bla y después tenemos las listas que son desordenadas que son un ordered

list que se ponen con la u las listas desordenadas son listas que son iguales son listas pero que el orden no importa si Nosotros sabemos que estamos trabajando en una lista en la que el orden no importa por ejemplo una barra de navegación esto que está acá es mi Repositorio de github que quer para el curso de G que dice que lo pueden ir a ver después de este curso es muy interesante acá por ejemplo tengo un menú Okay esto es un menú si se fijan es un menú desplegable si yo le doy botón derecho

a cualquiera de estos elementos a ver si se fijan esto es literalmente una lista es una lista de menú es un menú que tiene dentro una lista de opciones para elegir Hacia dónde ir le do botón derecho inspeccionar y acá Efectivamente es un l dice que es un li porque es un elemento de la lista es un list item y arriba Vamos a ver que dice H Por qué dice huele y porque acá Qué importa el orden no home issues no es como que es algo que está relacionado entre sí y sigue un orden primero

tenés que hacer esto después poner la papa después poner los huevos poner vir el coso no es algo que tiene un orden como una receta o por ejemplo el top 10 mejores juegos no no no va por orden es Algo desordenado toma tenes una lista de opciones para navegar en mi página acá no importa el orden por eso es una lista desordenada cuando nosotros hacemos listas desordenadas cuando actualizamos la página control S se ponen puntitos Esta es la forma de saber que estamos creando listas desordenadas no que tienen puntitos yo creo un cuarto elemento por

ejemplo elemento cuatro le doy en control S y se crea el elemento cuatro obviamente también se pueden Sacar los puntitos todo se puede modificar es más con ccs y javascript podría modificar este elemento para que se convierta en un juego si quiero en un Tetris completo a ese nivel se puede personalizar Por eso digo que no se preocupen por la apariencia les voy a mostrar algo muy interesante si ustedes van a una página cualquiera yo por ejemplo acá estoy en la mi en mi canal de YouTube si yo le doy en botón derecho inspeccionar y

voy al header que está Arriba de todo y borro el Head normalmente los estilos de css se escriben en el Head si yo borro el Head Así es como se vería la página de YouTube Si no tuviera css así como lo están viendo ahora Así se ve se ve miren así eh así como lo ven es YouTube sin css sin css Así se ve la página de YouTube Por qué se ve así bueno porque a YouTube no le importa cómo se ve a la página sin css porque la página final uno no la ve sin

css uno la ve con css Por eso digo ustedes ni se preocupen por cómo se ve la página web con solo html porque eso no importa Después el estilo que le dan con css hace el efecto Miren actualizo la página y así es la página web con css si se ve así y no les gusta esto no importa Después pueden agarrar un elemento cambiarlo de lugar ponerlo más arriba ponerlo más aparte sacarlo de la caja en la que está todo eso se hace con ccs por eso no se preocupen nunca por la estética de los

elementos solo Preocúpense por la estructura si es correcto semánticamente estoy haciendo una receta de cocina debería poner un ul o un ul Bueno un ol estoy creando una barra de navegación importa el orden no entonces pongo un ul estoy creando un subtítulo Okay pones un h2 eso es lo que importa además también es importante por temas de accesibilidad como siempre así que nada básicamente así se hacen las listas si les cuesta un poco eso de meter una etiqueta adentro de otra Etiqueta imagínense cada etiqueta html como una caja esto es una etiqueta html así tal

cual esta etiqueta es html es la más importante de todas adentro de la etiqueta html tenemos dos etiquetas importantes la etiqueta Head okay Y tenemos la etiqueta Body adentro del Head por ejemplo tenemos otra ajita más chiquitita todavía que sería el título y adentro del Body en este caso teníamos una lista desordenada en este caso y teníamos Bueno vamos a sacar este le Porque teníamos tres elementos le y adentro teníamos tres le pequeñitos tres ahí está así más o menos es como se como podríamos llegar a interpretar esto como cajitas no esta etiqueta es la

caja mayor adentro tenemos el Head que a su vez tiene otra cajita que es la de title y después tenemos Body que a su vez tiene otra cajita que es sul que a su vez tiene tres cajitas más chiquititas que son los l imagínense Elo todo como cajitas dentro de cajitas y después Tenemos otra forma de verlo que es como si fuera un árbol raíz no tenemos html que es la etiqueta principal y de esta etiqueta salen dos la primera es Head la segunda es Body adentro del Head tenemos la etiqueta title por ejemplo adentro

de del Body tenemos un ul es decir una lista eh desordenada y adentro de esta lista desordenada tenemos tres pequeños elementos l así también es como podemos verlo por un lado tenemos la etiqueta principal que es html que tiene Head y Tiene Body Head tiene title y Body tiene un ul y ese ul a su vez tiene tres l Y si nosotros quisiéramos podríamos seguir metiendo cosas pero así básicamente es como funciona la estructura del árbol no de html Si queremos que es como un elemento adentro de otro adentro de otro es más incluso hasta

podemos verlo de esta forma la etiqueta hadad es el padre de title porque hadad contiene a title la etiqueta Body es el padre de ul porque Body contiene a ul O sea la Etiqueta H está dentro del Body la etiqueta le a su vez está dentro de h o sea que u es padre de le entonces Body es padre de helele H es padre de Lee O sea que lee es hija de helele y helele es hija de Body title es hija de hadad y hadad y Body son hijas de la etiqueta mayor que es

html etiqueta raíz O sea que html es la etiqueta padre de estas dos que están acá es una forma de verlo no Porque después cuando trabajen con javascript o con css Hay un montón de Cosas que se le da a las etiquetas padre y hay un montón de cosas que se le da a las etiquetas hijas entonces es importante que entiendan esta diferencia entre padres e hijos que igual tranqui porque cuando veamos SS Ya lo vamos a entender Pero básicamente las etiquetas que contienen otras etiquetas son los padres de esas etiquetas que contienen y las

etiquetas que son contenidas como esta por ejemplo que está siendo contenida por ul O sea la etiqueta Li Está adentro de ul Entonces le es la hija que está adentro de huele está adentro del padre así que nada esto sería todo por ahora ahora sí ya estamos dispuestos y listos para avanzar con el próximo tema y estoy hablando de enlaces Vamos a aprender a utilizar enlaces para crear si quieren varios archivos y tener un sitio web completo porque una cosa es tener una página web otra cosa es tener un sitio una página web es un

archivo un archivo es una página si tenemos un Archivo punto html este archivo esto que estamos viendo acá ya es una página web pero un sitio web es un conjunto de páginas web son muchos archivos juntos que se conectan entre sí Y para eso tenemos que enlazarlos para eso utilizamos una etiqueta puntual que es la del enlace Así que vamos a ver cómo funcionan los enlaces y hay todda una teoría entera de rutas y demás Así que ahora comienza dar poquito la parte Hardcore pero tranquilos estos cursos no Son para verlos una sola vez son

para verlos una o dos veces así como cuando ves una película y hay muchas veces que cuando la ves por segunda vez entendés un montón de cosas que antes no entendías O como cuando ves series esto es igual con los cursos mi consejo siempre es verlos dos veces una de entrada y aprender todo y llevar todo a la práctica y otra segunda vez cuando ya se lo vieron completo por primera vez para repasar conceptos y entender cosas Que antes por ahí no les quedaron claras Pero bueno nada eso ya decisión completamente de ustedes aún así

voy a intentar hacer el mejor curso posible De hecho si está en YouTube ahora mismo es porque me salió bien Así que ni se preocupen por eso basta de hablar vamos con la sección de enlaces Bueno vamos a arrancar primero el principal esta sección de elemento a o enlaces dándole de vuelta acá en Explorer y dándole New file y vamos a Crear enlaces pun html le damos enter y se nos va a abrir acá esto que está acá lo vamos a copiar tal cual vamos a cerrar este enlace con control W esta pestaña Perdón le

vamos a dar en control V corta para pegar esto o pueden hacerlo manual no hay problema y esto que está acá lo vamos a eliminar esto para tener ya la estructura Clara es decir tenemos la estructura de una página web para que nos pueda abrir esto Ahora sí cerramos esto volvemos a abrir el servidor se nos Va a abrir esta pestaña cerramos la anterior acá ya estamos trabajando en el enlace y acá en vez de ponerle listas le vamos a poner enlaces guardamos y ahora sí ya está estamos con nuestro entorno de trabajo preparado bueno

para arrancar como ya sabemos los enlaces también se pueden llegar a llamar hipervínculos De hecho la a viene de la palabra ancle o ancla es una la palabra clave ancla pero básicamente es una metáfora que así como por ejemplo un ancla en un Barco te mantiene en una ubicación específica lo mismo sirve acá un ancla justamente para que el usuario sepa Hacia dónde ir a buscar un recurso nada en fin la verdad es una definición asquerosa no me gusta nada pud una haberle puesto e o L la etiqueta que vamos a ver ahora es a

es esta etiqueta de los enlaces se nos va a crear una etiqueta completamente común Pero si acá ponemos cualquier cosa cuando actualicemos vamos a ver que solamente Se va a actualizar texto solamente texto ustedes van a ver que en mi computadora el texto se ve más grande de lo normal y eso es porque yo tengo el zoom en ciento y pico para que ustedes puedan leer y ver bien todo lo mío pero si no el código se vería así y la verdad que para algunos es ilegible entonces por eso lo subo a 200 por para

que se vea un poco más grande solamente por eso bueno en fin a lo que voy es que acá tenemos un enlace Pero yo lo que quieroo hacer es Poder cliquear okay cliquear Y que me vaya a una página web bueno para eso vamos a ver el primer atributo los atributos justamente son características de los elementos vieron las propiedades en ccs bueno algo parecido pero esta vez se ponen directamente en html es decir a ver usemos la cabeza si estamos creando una etiqueta la etiqueta lo que tiene que hacer es redirigir a un enlace a

un lugar supónganse que vamos a hacer que me redirijan a mi canal de YouTube este Que está acá es mi canal es youtube.com baroid alto si yo quiero que mi canal de YouTube se muestre tengo que crear una ferencia de hipertexto básicamente significa crear un enlace para eso se utiliza la etiqueta el atributo perdón href tamb bien Por ejemplo es un ejemplo eh se puede definir por ejemplo el color el tamaño las sombras solamente que no lo hacemos desde acá lo hacemos desde css Pero esto como es una funcionalidad si lo tenemos que hacer desde

acá porque Es algo que vuelve funcional a la etiqueta no tiene que ver con el estilo tiene que ver con hacerlo funcional Porque si yo le doy click no me manda ningún lado pero si yo quiero que me mande a un lugar en este caso voy a decirle Ey quiero que me mandes a a otra cosa las comillas dobles son importantes pueden ser comillas dobles o comillas simples es lo mismo y acá dentro ponemos la dirección si yo pongo youtube.com barsy dealto vamos a hacer un espacio Hacia abajo de vuelta Aunque parezca que sí y

que esto me va a mostrar algo en realidad no funciona si yo le doy enter van a ver que ahora sí aparece que está enlazado pero si yo le doy clic acá esto lo que va a buscar es directamente una ruta local va a buscar en mi en mi en mi propia carpeta donde tengo alojado esto a ver si Existe alguna carpeta que se llame youtube.com Y eso no sucede no existe ahora vamos a ver esto de los Si queremos poner un enlace externo tenemos Que poner el https do barra barra Ahora sí actualizamos Y

si le damos enter esto ya me está mandando a mi cuenta de YouTube volvemos para atrás y si ahora vengo acá a esto que está acá y pongo por ejemplo canal de YouTube Ahora vengo acá está actualizado ven le doy enter y acá está entonces de alguna forma lo que está acá dentro lo que hace es definir este texto que se va a ver Mientras que el enlace O sea a dónde lo vamos a mandar es esto Que está acá seguramente ahora estás viendo y diciendo Ah Mirá Qué interesante Te recontra felicito todos sentimos esa

emoción alguna vez pero todavía falta más hoy en día ya no es necesario poner el https sobre todo si estamos trabajando desde acá por lo menos desde un servidor local para eso componer esto es suficiente de tal forma que si yo ahora vengo acá y le doy clic acá Esto me manda YouTube Ven y no necesité poner el https pero aún así hoy Por hoy se recomienda poner esto primero por motivos de seguridad después por motivos de posicionamiento Hay muchísimas cosas así además aseguramos que el enlace va a terminar acá y definimos el protocolo o

sea aunque ya no sea necesario en html moderno poner el https es una buena práctica dejar esto O sea utilícelo de esta forma Hay muchas formas de enlazar Okay páginas web más adelante vamos a ver una sección de rutas para que aprendan a ir hacia Donde quieran pueden moverse una carpeta atrás una carpeta adelante eh ir a archivos que están más atrás por ahora lo que vamos a hacer es darle pantalla completa y vamos a abrir el Explorer vamos a copiar esto y pegarlo varias veces apretamos control c y control b y se pegan Okay

vamos a cambiar el nombre enlaces do y acá damos enlaces TR esto que está acá vamos a crear Okay algo para que podamos Navegar entre las mismas páginas ya van a ver a que voy Vamos a venir al enlaces uno que es el original y vamos a crear acá tres enlaces para eso si quieren pueden escribir la tecla a y darle enter y ya esto se hace automáticamente por emet así que ya se les posiciona el cursor directamente acá para que escriban el enlace en este caso voy a poner el nombre del archivo enlaces acá

me aparecen varias opciones yo le voy a dar acá segundo enlace okay Y acá abajo voy a poner el tres y acá poner tercer Enlace qué jor es esto y para qué sirve Bueno muy simple esto lo sacamos si venimos acá vamos a ver que esto tiene dos enlaces segundo enlace y tercer enlace lo que está haciendo esto es mandarme a las páginas web diferentes yo por ejemplo acá Este es el enlaces html el original me manda si le damos acá a este otro archivo ven me acaba de mandar enlaces 2. html y si le

doy En tercer enlace me acaba de mandar a la otra página enlaces 3. html Entonces de esa Forma puedo moverme entre mis propias páginas para eso voy a copiar esto también tal cual y voy a venir a enlaces 2. html voy a pegarlo y voy a poner acá enlace uno voy a poner primer enlace Porque si yo ya estoy en el enlace dos o sea esto que está acá es enlaces dos si yo estoy entrando en enlaces dos no quiero que tenga una opción para ir al enlace dos Ya estoy en el enlace 2 tiene

que haber una opción para ir al enlace uno y voy a venir enlace 3 y hacer lo Mismo voy a pegar esto segundo enlace y voy a poner acá primer enlace y voy a poner acá también enlaces normales entonces de esta forma tengo todas las páginas enlazadas entre sí si venimos al navegador vamos a ver que ahora podemos Navegar entre todos los enlaces ven este que está acá es el original enlaces pun html le damos clic acá y ahora Estamos en otra página enlaces 2. html y ahora le damos en tercer enlace y podemos estar

en en el enlace 3 y hacer Cualquiera de estas dos cosas es más les voy a mostrar esto en el enlaces original voy a cerrar el de listas Ahí está en el de enlaces original acá voy a escribir un h1 voy a poner esta es la primer página AC voy a poner un p voy a poner un Loren no no voy a poner ningún Loren voy a poner Cómo se siente saber lo básico de html Y si venimos acá y actualizamos bien y si venimos al primer enlace ya tenemos Esto bueno Esta es la página

ven que es Cómo se siente saber Lo básico de html esto es un párrafo y esto es un enlace ahora voy a venir a la página esto lo voy a copiar voy a venir a la página dos enlaces dos y voy a pegar esto y voy a poner esta es la segunda página Felicidades estás en la página dos y voy a copiar esto y pegarlo en el enlace tres y voy a pegar esto que está acá esta es la tercer página y acá voy a poner felicidades esta es en la página tres y esto lo

voy a poner abajo no Arriba voy a hacer Que aparezca abajo Acá abajo voy a hacer lo mismo acá cortar esto y pegarlo abajo voy a esto acomodarlo y esto pegarlo abajo y acá también lo mismo pegarlo acá abajo y ahora fíjense si entramos a la página completa ya tenemos esto listo Esta es la primer página Cómo se siente sabor lo básico de html venimos acá esta es la segunda página Felicidades estás en la página dos y podemos Volver al primer enlace ven primer enlace y de esta forma nos movemos entre el primero y el

Segundo y también tenemos el tercero tercer enlace Felicidades está es en la página tres Esta es la tercer página y desde el tercer enlace podemos ver al segundo o al primero entendés y de esta forma podemos movernos entre páginas esto es excelente Felicidades yast hasta acá estás aprendiendo mucho Y esta es la primer felicitación que les tengo que hacer porque la realidad es que de las cinco veces que los voy a felicitar Esta es la primera es un super logro que Hayan llegado hasta este punto que entiendan todo esto y que estén haciendo lo que

yo voy ha Endo a medida que lo vamos haciendo no se olviden que la programación y el desarrollo es importante que todo lo que yo haga y realice ustedes lo hagan también si yo creo una página ustedes creen la página porque la programación es un proceso activo no pasivo ustedes pueden intentar comprender lo que sucede cuando leen y cuando ven lo que yo hago y cuando miran Cómo enseño Pero la única forma de aprender realmente es probando ustedes haciéndolo ustedes escribiéndolo ustedes y demás Así que muchachos los felicito si acaban de crear su propio menú

de hecho esto que está acá vamos a darle pantalla completa y abrir acá y vamos Vamos a darle en New folder o sea nueva carpeta y vamos a poner enlaces y esto que está acá vamos a meter vamos a arrastrar estos archivos estos tres archivos a la carpeta enlace los tres Move también movemos todos de esa forma enlaces es una carpeta completa yo puedo venir acá Ahora sí voy a darle de vuelta en Close server y lo voy a volver a abrir porque fíjense que ahora me va a tirar error porque no estamos en la

misma ruta cambiamos los archivos de lugar Entonces tenemos que abrirlo de vuelta ahora supónganse que ustedes lo que quieren hacer es hacer que el enlace se abra en otra pestaña Cómo pueden hacer para eso bueno muy simple para eso Vamos a cerrar el enlace tres y el enlace dos vamos a quedarnos con el enlace uno vamos a crear un enlace abajo y el enlace de abajo vamos a poner vamos a poner una a y acá vamos a hacer que haya un enlace que se abra en otra pestaña enlace dos vamos a abrir el mismo enlace

el enlace 2. html y acá ponemos segundo enlace pero se abre en otra pestaña lo que acá lo vamos a sacar ahora sí Lamentablemente voy a tener que empezar a achicar un poco esto porque si No no se llega a ver todo así que acostúmbrate a ver la letra un poquito más chica pero básicamente acá tengo a segundo enlace a tercer enlace y acá tenemos el segundo enlace pero que se abre en otra pestaña una cosa que tenemos que hacer para que esto no nos pase como ya saben es darle en control shift p Word

wrap y le damos enter y ahí se actualiza y se adapta al al tamaño de mi pantalla si ustedes quieren que el enlace se abra en otra pestaña lo que Tienen que hacer es agregarle la propiedad llamada Target este atributo Perdón dice ey dónde quieren abrir la pestaña quieren abrirlo en la misma página Este es el atributo que trae por defecto se acuerdan que yo les dije que todos los navegadores todas las propiedades que le le dan a los elementos html las autodefinen bueno el valor por defecto de este atributo el atributo target es self

que lo que hace ya o sea si ponemos esto así o si no lo Ponemos o si lo sacamos en el código funciona Exactamente igual porque internamente esto funciona con esto Qué significa esto significa que los enlaces se van a abrir en la misma página Yo abro esto y no es que se me abre una nueva pestaña no hace esto no hace eso se abren y se mueven en la misma página yo para hacer que no suceda eso en vez de self en vez de guion bajo o sea piso self tengo que poner Blank Y

si actualizo ahora si abro la pestaña hizo Que se nos abra la página en otra pestaña Entonces si si nos movemos en estos enlaces lo que hace es quedarse acá pero si ahora le damos al tercero de acá se abre en otra pestaña de hecho para separarlos vamos a poner acá otra cosa que es h2 enlaces Target Blank ahí queda mucho más prolijo un h2 acá que va a llamarse enlaces Ahí está Entonces tenemos Esta es la primer página y vamos a poner una web con enlaces no este es nuestro h1 es una web con

enlaces este Es nuestro h2 Cómo se siente saber lo básico de html tenemos un párrafo y acá tenemos dos enlaces que hace que se muevan entre sí okay Y acá tenemos este que está acá que es enlaces Target Blank es un h2 Y tenemos otro enlace que se abre en otra pestaña bueno así es como funciona esta propiedad después tenemos otras propiedades que acá si se fijan nos tiran que son parent y self pero por ahora no las vamos a ver Target Blank se abre en otra pestaña y si no usan nada Es como si

dijeran Target self que hace que se abra en la misma pestaña un último atributo que quiero que veamos en cualquier elemento html ya que estamos con atributos es title Okay si ponemos este atributo el atributo title lo que nos pide este atributo es información sobre este elemento en este caso yo puedo poner acá por ejemplo es subtítulo de la página no Entonces cuando actualizo vamos a ir al primer enlace Acá está en este caso tengo que pasar el Mouse por encima de el segundo enlace si paso el mouse por encima me dice subtítulo de la

página ven que se me abre como este cuadradito con información bueno eso lo hacemos con title De hecho no solamente funciona en los enlaces funciona en cualquier elemento si yo por ejemplo vengo acá y al h2 le pongo lo mismo en el h2 Cuando paso el mod por encima me muestra subtítulo de la página al h1 le puedo poner un title que sea título de la Página paso el mouse por encima y título de la página normalmente el title se suele poner en las imágenes para que por ejemplo si tenemos una imagen cuando pasamos el

mouse por encima de la imagen la imagen nos diga De qué trata esa imagen también los enlaces para que si yo por ejemplo tengo un enlace yo le puedo poner un title y digo enlace a la segunda página Entonces cuando el el usuario pase el mouse por encima le va a decir Ey esto es un enlace a la segunda Página es como estamos dando información de Hacia dónde va a ir cuando le dé clic acá también lo solemos utilizar en los formularios en algún que otro campo y a veces en algunos botones por ejemplo un

botón de enviar formulario pero fuera de eso son contadas las ocasiones en las que se utiliza Más allá de eso es muy bueno utilizar el atributo title Porque por ejemplo las personas que son ciegas cuando utiliza lectores de pantalla porque no pueden ver la pantalla si Estamos por ejemplo en una imagen o en un enlace va a leer esa etiqueta title o sea estas tecnologías de asistencia leen esta etiqueta title para que la gente que no lo pueda ver no tenga problemas al utilizarlo entonces la persona ciega no solamente va a leer que dice segundo

enlace sino que va a saber que ese enlace te manda por ejemplo la segunda página otra cosa que tienen que saber es que es una buena práctica por lo menos en diseño hacer que cada elemento sea Reconocible por lo que es los enlaces si se ven van a parecer subrayados por eso cuando trabajen ustedes en css siempre intenten que los enlaces se destaquen de alguna forma porque si por ejemplo ustedes en cc se hacen esto por ejemplo este tercer enlace se va a ver completamente negro no hay nada que diferencie este enlace que está acá

de un texto como este sin embargo cuando le damos clic acá nos manda al tercer enlace por eso es importante que cada Elemento se pueda diferenciar entre Sí por eso una forma muy común de diferenciar enlaces es o por el subrayado o por este colorcito Violeta que tienen los enlaces o el azul también puede ser es como separarlos de alguna forma más adelante también vamos a ver otros atributos Como por ejemplo el atributo rel que ya son cosas más avanzadas Pero por ahora quédense con que esta es la forma de trabajar con enlaces Okay esta

es la forma en la que Ponemos una ruta local directamente ponemos el nombre del archivo y cuando queremos poner una página web de otro lugar se pone https do bar barra y acá el enlace por ejemplo instagram.com y esto nos manda a Instagram pero nada eso sería todo más adelante vamos a tener un apartado especial okay en el que vamos a ver las rutas porque es muy importante ver las rutas pero ahora vamos con otra sección chiquitita que es el tema de elementos de bloque o sus elementos de Línea porque por ejemplo ustedes no se

pusieron a pensar porque eh felicidades está por debajo de página Por qué Felicidades estás en la página 3es aparece acá y no aparece acá Por qué si hay lugar Por qué no aparece acá Bueno La pregunta es por qué Este sí aparece acá o sea fíjense que segundo enlace aparece al lado de primer enlace o sea este que está acá no debería estar abajo Por qué este enlace sí aparece al lado en lugar de aparecer abajo pero por Ejemplo este que está acá no aparece acá al lado porque Cuál es la explicación de esto bueno

esto tiene una explicación y lo vamos a ver justamente cuando veamos esta diferencia entre etiquetas de bloque y etiquetas de línea porque ahora vamos a necesitar ver esta diferencia sobre todo cuando trabajemos con css pero básicamente Es una diferencia que es chiquitita de hecho va a durar muy poquito la sección que vamos a ver a continuación pero es importante para Después cuando veamos SS entender varias cositas más vamos ahora mismo a ver esos etiquetas de bloque versus etiquetas de línea Bueno ahora lo que vamos a ver justamente es el tema de las imágenes en html

voy a darle en esta pestañita y acá voy a darle botón derecho New file img html acá me carga esto lo mismo copio todo esto lo pego acá imágenes tengo que correr en realidad del servidor local Ahí está y ahora sí Bueno básicamente las imágenes se hacen con un tipo de Etiqueta que ahora vamos a ver el primer tipo de etiqueta que se autocierre Okay vieron que yo les dije que hay dos formas de clasificar las etiquetas Más allá de esto de etiquetas de blo y etiquetas de línea porque en realidad yo les dije que

hay dos tipos de etiqueta que son etiquetas de bloque y etiquetas de línea pero también tenemos inline block tenemos grid flexbox tenemos muchas pero después tenemos otra forma real de separarlas por lo menos en Cuanto a código Qué son las etiquetas que necesitan tener un cont tenido adentro por ejemplo la etiqueta párrafo necesita que escribamos el párrafo la etiqueta B necesita que escribamos qué va a estar en negrita el título necesita que escribamos Cuál es el título Pero si yo les dijera la etiqueta imagen por ejemplo necesitamos cerrarla img no cerrarla y acá si ponemos

algo qué se vería se vería esto porque la etiqueta imagen no la necesitamos cerrar entonces Cómo podemos cargar una imagen bueno Esto es fácil yo voy a descargar una imagen como yo me voy a descargar esta imagen que está acá esta no esta guardar imagen como voy a entrar en el escritorio tenemos el curso html y voy a guardarla como dalto png bueno acá tenemos Esto entonces La pregunta es cómo puedo yo hacer para Mostrar la imagen que me descargué que de hecho aparece acá como ven Esta es la imagen si queremos la podemos chequear

la Podemos ver pueden ver este tipo que es super fachero y extremadamente importante en la industria de la programación y el desarrollo y de hecho este tipo casualmente tiene un canal al que a ustedes están suscritos Dale baja suscríbete acabo de decir que están suscritos si yo me equivocara estaría enseñándoles mal o sea bueno cerramos esto yo para cargar las imágenes tengo que utilizar Ahora sí otro atributo que es el atributo source Se escribe src igual comillas y acá ponemos Adivinen que ponemos Sí el nombre de la imagen ponemos en realidad la ruta de la

imagen pero todavía como no estamos viendo rutas nada en este caso es lo mismo que poner el nombre de la imagen así que ponemos dalto De hecho acá ya nos salta ve dalto png vieron la extensión esta extensión que está acá que es la extensión de image preview si le damos acá y le damos en Desactivar Yo vengo acá Bueno ahora debería actualizar La página ver vamos a darle en reload Ahí está si yo pongo el mouse por en encima no me muestra la imagen no me está mostrando la imagen en cambio Si yo esta

la tengo activada Dónde está voy a activar de vuelta enable Ah está activada Ahí está activa Perdón van a ver que si yo ahora paso el mouse por encima ahora me está mostrando la imagen bueno Esto es por el plugin que tenemos justamente por eso le dije que nos lo instalemos porque cuando trabajamos con Imágenes ponemos el mous por encima y podemos ver cuál es la imagen que está cargando por eso es importante ahora sabemos que estamos accediendo correctamente a la imagen si le damos en control S y se guarda nada no nos va a

cargar ni porque no estamos corriendo el servidor le damos en Go Live y debería acá cargarnos a Acá está si ponemos mal la ruta ustedes ponen mal el nombre de la imagen no les va a cargar y les va a cargar esto ya sabemos Que si queremos poner una imagen tenemos que poner esto que está acá pero qué pasaría si por ejemplo no carga la imagen por algún motivo o porque se borró del servidor o porque un error o por algún motivo bueno el usuario tiene que saber de qué trata la imagen incluso para los

asistentes de de los lectores de pantalla no para la gente que no puede ver en fin cómo hacemos para que esto pueda verse cómo hacemos para que alguien sepa De qué trata la imagen si Se nos rompió si pusimos mal el enlace que no debería pasar pero bueno pero qué pasa cuando no se puede ver la por x motivo para eso tenemos que utilizar dos cosas primero es la etiqueta alt que es una etiqueta que básicamente es eh se llama acá tenemos la descripción ves Pero básicamente alt viene de alternative Por qué Porque nos permite

escribir un texto en caso de que la imagen no cargue si yo acá por ejemplo le pongo dalto hablando refero actualizo Y acá me va a decir esto y esto es un texto que solamente va a cargar voy a cerrar esto Ahí está es un texto que solamente va a cargar si la imagen no carga correctamente si yo a esto le doy o y actualizo ahora vamos a darle en control menos para que lo puedan ver bien Ahora el texto ya no aparece el texto alt no necesita aparecer porque es un es un texto que

nosotros le decimos al navegador Ey este texto mostrámelo en caso de que no cargue la imagen si la Imagen carga no me lo mostrás De hecho también nos sirve para posicionar la página web si ustedes van a Google y buscan una imagen este atributo que está acá que es alt describe completamente De qué trata la imagen es importante Por ese motivo también hasta para el seo porque es una buena práctica para que nuestra página posicione mejor en los motores de búsqueda que nosotros la definamos porque cuando busquemos en Google dalto hablando refachera esta Imagen es

la imagen que va a salir y de hecho otra más que podemos poner es la etiqueta title en este caso podemos poner title y esto nada ya saben es cuando ponos el mouse por encima nos dice algo por ejemplo el dalto ent ahora pasamos el mous por encima y ahí nos dice el dalto Ven y si la imagen no carga y tenemos el título y la imagen ponemos el m por encima y nos dice el dalto Entonces nada esto en este caso la voy a sacar la etiqueta titles porque no Me sirve voy a poner

esto correctamente así más o menos es como uno trabaja con imágenes son etiquetas que se abren una sola vez y no necesitan cerrarse porque se auto cierran este texto se muestra en negrita Por qué Porque es un negrita adentro de un párrafo y abajo se muestra esto que es lo que pusimos acá que está suelto sin sin etiquetar de ninguna forma pero qué pasa si nosotros No cerramos la etiqueta el navegador no la va a cerrar por nosotros esta es la Diferencia también entre este tipo de etiqueta porque la etiqueta imagen por ejemplo nosotros no

necesitamos cerrarla por eso se llaman self closing tags porque se autocierre a sí mismas ahora la pregunta es cómo podríamos hacer si por ejemplo nosotros tuviéramos que colocar una imagen okay que en vez de estar acá la imagen en vez de estar acá esté adentro de una carpeta voy a crear una carpeta llamada imágenes nosotros cuando tenemos 300,000 archivos le vamos A dar en mover Ahí está van a ver que ahora sí ya la imagen me va a dejar de cargar Okay si ahora le voy a dar en alto ya la imagen me deja de

cargar ya no se muestra porque ahora no está en la misma carpeta ahora está en otra dirección está en otro lugar y esto es normal porque nosotros cuando creamos páginas web tenemos muchísimos archivos Si todos los archivos los tuviéramos ad dentro de una misma carpeta es una mala práctica rompe un montón de formas de Trabajo es es nefasto no se puede buscar tenés 30,000 archivos te puedes mandar un montón de no se hace en cambio nosotros lo que hacemos Es crear carpetas y separar todo por diferentes carpetas y con diferentes estrategias ahora no vamos a

hablar de esas estrategias pero lo que solemos hacer es separarlo una forma muy común por ejemplo es poner las páginas html a la en la ruta principal y después tenemos una carpeta con imágenes y ahí van todas Las imágenes una carpeta con javascript y ahí va todo el javascript una carpeta con css y ahí van todos los que son archivos css en realidad se hace más profundo si Incluso se se usan muchas más carpetas pero solamente para que lo entiendan no a nivel muy básico suele hacer mucho esto no de Separar en carpeta por tipos

de contenido Entonces eso es lo que se hace entonces Cómo podemos acceder por ejemplo a una imagen o una ruta o o no solamente esto también Funciona con el laces que ahora lo vamos a ver en el próximo capítulo y es cómo accedo a elementos en este caso a a imágenes pueden ser audios también pueden ser videos pueden ser enlaces o páginas que están en otros lugares en otras rutas en otras direcciones están una carpeta atrás una carpeta delante están en otro servidor Cómo hago para acceder a estos contenidos bueno eso lo vamos a ver

en la siguiente sección rutas en html y no solamente en html Porque son rutas que aplican en html en css en javascript una forma de trabajar con rutas Así que vamos a ver Bueno ahora lo que vamos a ver va a ser el tema de las rutas es bastante más simple lo que parece pero sí es importante dedicarle una sección específica porque siento que ocupa lo mismo que lo que podría ocupar otra sección o sea es muy fácil también pero es o sea por ahí si me pongo a hablar de no sé imágenes y me

explico me pongo a Explicarles sobre rutas va a ocupar lo mismo hablando de rutas que lo que lo que voy a hablar de imágenes entonces termina siendo como una sección de imágenes pero hablas de rutas entonces por eso preferí separarle en otra sección ap parte eh Porque aún así Considero que se la merece para comenzar tenemos dos tipos de rutas las absolutas y las relativas las rutas absolutas son esas rutas donde ponemos algo y es absoluto desde donde se lo mire es un Recurso que está ahí Y está ahí si yo por ejemplo tengo un

enlace No yo quiero ir a Instagram a dónde voy voy a Instagram com si yo estoy des un celular des una computadora va a ser lo mismo voy a entrar a Instagram Quiero entrar por ejemplo a un video mío de YouTube quiero verme este curso de python que es literalmente un completo desquicio es creo que de los mejores cursos que tengo en el canal es una locura este curso le doy en botón derecho copiar URL del Video y se lo comparto a todos mis amigos Pero bueno ese es otro tema y esto que estamos viendo

acá esto ya es una URL pero es absoluta Esta es una dirección absoluta Por qué Porque no importa desde dónde entremos no importa En dónde estemos siempre haciendo referencia de a esto vamos a obtener esta página con mi video de python Entonces vamos a hacer un ejemplo vamos a venir acá y poner Open file vamos a poner rutas html yo pongo un enlace Okay Y pego esto yo sé que este este enlace me va a llevar a curso de python entonces vengo acá lo voy a correr en el puerto 5500 de vuelta en el servidor

y yo sé que si le doy click acá Esto me va a mandar a mi curso de python porque es un enlace absoluto es una ruta absoluta Esa es la definición correcta ruta absoluta ahora si yo por ejemplo quiero mandar a el enlace que está en listas qué pasa con el enlace acá si yo estoy acá o sea si mi si mi si este elemento Llamado listas quiero redirigir lo Qué hago yo vengo acá y voy a poner otro enlace que va a ser a voy a poner listas html voy a poner apartado de listas

Acá está el apartado de listas le doy acá click y me carga esto hasta acá está perfecto pero qué pasa si ahora este archivo rutas en vez de estar acá lo vamos a meter ad dentro de la carpeta imágenes Este es el documento acá lo tenemos a este archivo ahora vamos a probarlo de vuelta vamos a correr el Servidor local porque lo movimos de lugar yo entro al curso de python y entra al curso de python pero si de repente entro al apartado de listas Ah ya no está encontrando el archivo Por qué no lo

está encontrando porque esto es una ruta relativa no es una ruta absoluta Por qué Porque dependiendo de donde estoy lo puedo acceder de una forma u otra el archivo este llamado rutas html está dentro de la carpeta imágenes o sea que solamente va a poder Acceder a los archivos o a las carpetas o a las imágenes que también estén adentro de imágenes Porque si quiere acceder archivos que estén por fuera tiene que escribirlos de otra forma entonces dependiendo de dónde se encuentre mi página tengo que llamar a imágenes archivos etcétera de otra forma porque si

mi página se encuentra la misma carpeta lo llamo así nom más si se encuentra una carpeta más adelante tengo que llamarlo de otra forma si se Encuentra una carpeta más atrás tengo que llamarlo de otra forma entonces son rutas relativas por eso porque dependiendo de dónde esté cada elemento tenemos que hacer formas diferentes de llamarlo en cambio la ruta absoluta no importa dónde tengamos la página no importa en qué carpeta esté mi archivo siempre va a ser lo mismo nosotros cuando trabajamos eh redireccionando a otras páginas Okay lo solemos hacer con rutas absolutas Por qué

Porque hay una Forma de acceder a la ruta absoluta de un archivo desde nuestra computadora pero no es una buena práctica y no es correcto todo Siempre se suele acceder de forma relativa tenemos que saber dónde está cada cosa y saber acceder la en programación después se trabajan con variables y muchas cosas más Pero ese no es el tema lo que tenemos que hacer acá en realidad es trabajar con rutas relativas ahora la pregunta es Okay okay Ya está ya entendí lo que es una ruta Absoluta entendí lo que es una ruta relativa La pregunta

es Yo sé que dependiendo de dónde estoy tengo que llamar a un archivo de una forma o tengo que llamarlo de otra bueno tenemos tres escenarios está más arriba o sea más carpetas adelante o está más atrás más carpetas atrás por ejemplo tenemos listas html si entramos a imágenes tenemos rutas html O sea que si desde rutas queremos Llamar al archivo listas tenemos que retroceder una carpeta para Atrás cómo hacemos eso bueno para eso ponemos punto punto barra y lo que hacemos con esto es decirle Ey volve una carpeta para atrás ven en este caso

si estamos acá haciendo punto punto barra estamos diciendo esto tuc y volvimos para atrás una carpeta Entonces ahora lo que hicimos es vamos de vuelta punto punto barra y volvimos una carpeta atrás Ahora podemos hacer más cosas podemos seleccionar el archivo imagen el de listas o el de párrafos y encabezados yo Le voy a dar en listas actualizo y si ahora vengo acá y le doy enter ahora sí me mandó al apartado de listas porque ahora sí tenemos enlazado esto correctamente ahora qué pasaría si fuera al revés supónganse que yo estoy acá el archivo lo

voy a poner acá okay fíjense que si ahora ahora este archivo lo voy a correr de vuelta en el servidor porque de vuelta lo cambié de posición vamos a correrlo si yo quiero entrar Ya Bueno ahora Cómo podemos hacer si por ejemplo Tenemos rutas acá pero ahora la la eh listas está adentro de imágenes si nosotros corremos esto no nos va a cargar porque nos va a tirar error si hacemos lo de antes dos puntos barra barra y corremos tampoco nos va a cargar lo que tenemos que hacer es decirle En qué carpeta queremos entrar

en este caso fíjense que acá ya nos tiran un par de opciones tenemos que entrar a la carpeta imágenes le damos clic y tenemos que entrar a la a las listas pun html le Damos clic ya pusimos correctamente la ruta de hecho si pasamos el mous por encima Ah ya no lo estamos viendo porque no es ninguna imagen no es ninguna imagen es un archivo html qué boludo que soy De hecho acá tenemos esto okay Si venimos acá Okay ahora sí y entramos al enlace ahora me está volviendo a mandar al archivo listas html Esa

es la forma de acceder a los archivos de forma relativa de esta forma retrocedemos una carpeta si estuviera dos carpetas atrás Retrocedemos dos carpetas una dos ahora si está dos carpetas adelantes ponemos el nombre de la primer carpeta si hubiera otra carpeta ponemos el nombre de la carpeta dos y si el archivo estuviera ahí adentro ahí escribimos el nombre del archivo pero si no esta es la forma de movernos cuando está en la misma carpeta solamente ponemos el nombre del archivo cuando está una carpeta atrás lo ponemos así si estuviera dos carpetas atrás lo ponemos

Así si estuviera una carpeta adelante lo ponemos así si estuviera dos carpetas adelante lo ponemos así Esta es la forma en la que normalmente nosotros trabajamos con rutas de archivos y también sirve para todo También sirve para imágenes si yo por ejemplo ahora en vez de hacer esto quisiera llamar a una imagen yo acá voy a tener la imagen okay Y me preguntar Dónde está si yo de vuelta le doy en dalto png la imagen no me va a cargar voy vol para atrás la Imagen no me va a cargar voy a darle en Word

wrap rap así de vuelta me baja la imagen no me va a cargar pero si yo de repente ahora sí me meto en la carpeta imágenes y me meto en dalto png ahora actualizo y ahí sí me debe cargar porque la carp la imagen dal alto. png está dentro de la carpeta imágenes entonces to que decirle al programa Ey Métete a la carpeta imágenes y después accedé al archivo de alto.png eso es todo ahora mi consejo es prueben ustedes yo siempre lo Que digo a toda la gente que sigue mis cursos entonces prueben agarren imágenes

agreguen agreguen imágenes por todos lados agreguen carpetas agreguen muchas carpetas métanse en jerarquía Pónganse una carpeta detrás y prueben creen un archivo y ese archivo tiene que acceder a múltiples recursos puede ser un enlace pueden ser imágenes pero las imágenes no tienen que estar en la misma carpeta tien que estar una carpeta arriba dos carpetas arriba tres puede estar una Carpeta abajo una carpeta atrás Es más también lo que puede hacer es podemos salirnos de una carpeta y entrar a otra carpeta por ejemplo es más fácil si desde la carpeta enlaces voy venir a laa

a la carpeta enlaces y voy a darle new file enlaces 5. html acá la estructura si yo quisiera acceder a la imagen esta imágenes de alto Cómo puedo hacer para acceder la Bueno fíjense qué fácil si yo acá le doy enter si Yo corro el servidor vamos a correrlo de vuelta Van a ver que Me está tirando un error porque la imagen no me carga Cómo tenemos que hacer Bueno a ver estamos en la carpeta enlaces este archivo está dentro de la carpeta enlaces y la imagen la tenemos adentro de la carpeta imágenes Entonces qué

tenemos que hacer primero tenemos que salirnos una carpeta para atrás Después tenemos que meternos en la carpeta imágenes y ahí podemos agarrar la imagen primero nos salimos para atrás Después nos metemos en la carpeta Imágenes y ahora agarramos la imagen actualizamos y ahí nos cargó perfectamente la imagen prueben con esto jueguen con más ejemplos diviértanse muchachos y ahora sí vamos con la siguiente sección porque rutas evidentemente ya Lo acabamos de dominar ahora lo que tenemos que continuar viendo es formularios normalmente en este punto yo les enseñaría sobre tablas si bien todavía se siguen utilizando a

nivel semántico para mostrar datos que Lo vamos a ver más adelante no es un no es el mejor momento del curso en el que les puede enseñar tablas entonces creo que es un elemento que deberíamos agarrar y tirar para la sección de html avanzado Por más que no sea avanzado como tal la vamos a tirar para html avanzado y la vamos a trabajar bien después bien trabajada y ahora vamos al apartado de formularios que es el último apartado de todos de esta sección de html básico después ya arrancamos con Css básico así que bueno vamos

ahora sí con la sección de formularios bueno ahora vamos a ver formularios que son creo que de las cosas más importantes de desarrollo web y estamos hablando de formularios recuerdan que al principio del curso yo les dije que todo estaba hecho a base de de solicitud y respuesta es decir petición respuesta o acción y respuesta como acción y reacción acción y reacción ahora vamos a ir todavía una capa de Extracción más arriba los formularios Qué son eh básicamente la forma en la que tenemos nosotros de pedirle datos al usuario es una forma en la que

tenemos para decirle e Dame tu nombre Dame tu apellido Dame un mail Dame un color Dependiendo el tipo de dato que querramos recopilar del usuario utilizamos un tipo de input diferente si queremos por ejemplo un input que nos diga acepta los términos y condiciones ponemos un tipo de input que es la Casilla esa si le decimos Dame tu nombre le ponemos un campo de texto para que escriba el nombre Si queremos decirle Che Dame el color ponemos un campo para que nos dé un color si le decimos de repente decime un Rango del un al

100 y le ponemos una Barrita para que nos diga un Rango son ejemplos todos estos son tipos de inputs son tipos de datos que se le piden al usuario Por más que en el fondo no dejan de ser siempre el mismo dato que es un texto una cadena de texto Nada es como que en html te lo formatea para que parezcan tipos de datos diferentes porque a que todos sean textos todos sean textos entre comillas dobles o simples tod sean cadenas de texto después lo van a ver cómo trabajan en javascript lo que hace esto

es formatear selo de una forma muy específica es decir las fechas se las ponen como fechas el texto se los pone como texto los mails se les da un formato mail el color se usa el formato Del color entonces son cosas que por más que no veamos nos sirve para facilitar la interfaz No porque si tuviéramos nosotros que andar creando y personalizando los inputs para cada dato nos volvemos locos html trae como unos presets por defecto que son los que podemos usar para pedirles diferentes datos Así que vamos a crear unev archivo que se va

a llamar forms. html voy a cerrar absolutamente todos acá Acá tengo la estructura básica acá voy a ponerle Forms o formularios ahí está y para arrancar se utiliza la etiqueta form esto es un bloque es decir es una etiqueta de bloque Construye un formulario yo voy a darle en Go Live a ver qué pasa y acá me acaba de cargar parece que no cargó nada parece que no sucedió nada pero si venimos al código le damos en inspeccionar elemento acá vemos que ya nos está tomando el formulario ahora no hay nada porque nosotros lo que

tenemos que hacer con Este formulario es definir Cuáles son los campos de texto que van a tener qué es lo que le vamos a pedir a usuario bueno ahora sí Acabo de cerrar esto para que podamos de vuelta ver todo de forma más amplia y lo que tengo acá es otra etiqueta que vamos a ver ahora que es la etiqueta input que esta es la forma en la que vamos a decirle Ey Por favor dame un dato Este es el input y después tenemos que decir Ey qué tipo de input vas a ser type en

este caso type es para De tipear no de tipo qué tipo queres poner botón checkbox color day dat Time estas son todas las opciones que nos tira visual Studio code por defecto Okay que las ordena de forma alfabética fíjense que arranca con la b e f g y así no a orden de forma alfabética el más común de todos es el input input es el input type text Este es el más común de todos Okay si yo actualizo esto vamos a ver que me acaba de cargar esto que está acá y ahora sí podemos escribir

texto Acá a ustedes ahora mismo habrán dicho Ah se habrán puesto refic se habrán puesto rec contentos yo sé que sí yo sé que sí no dejaste tu like todavía no te suscribiste Y estás Estás sonriendo y no te suscribiste si te suscribiste te vas a sentir bien con vos mismo te lo puedo asegurar pero si no te suscribiste sos del demonio deberías hacerlo ahora mismo a lo que voy que acabamos de crear una etiqueta Okay que lo que va a permitirle al usuario es tipear texto por eso está Este type porque le vamos a

decir okay el usuario qué es lo que va a tipear bueno va a tipear texto Si venimos acá y creamos otro input podemos decirle al usuario Ahora no quiero que tipe es texto quiero que tipes por ejemplo color entonces actualizamos y me va a cargar esto que está acá esto que está acá por ejemplo nos pide que seleccionemos un color Entonces al a mí cuando yo reciba la información del usuario me va a aparecer un color en vez de color También puede ser un vamos a checarlo un poquito porque está muy grande Ahí está también

por ejemplo lo que puedo pedirle es que me dé submit submit es el botón de enviar que por defecto viene en enviar pero nosotros lo podemos cambiar y le podemos poner por ejemplo value y le podemos poner por ejemplo mandar form Ven y se actualiza y acá dice mandar form value es la propiedad que en submit aparece acá pero en otros en otros input por ejemplo es lo que tiene adentro V Que después lo podemos borrar Si queremos ahora vamos a ver a llegar a eso Porque es importante este atributo vamos a borrarlo en ambos

casos Okay pero yo les voy a mostrar los más comunes el primero es text que es el más común de todos otro es email Okay que es igual que un text solamente que en lugar de hacer texto nosotros cuando intentemos enviar el formulario nos va a decir que no lo podemos enviar hasta que esto no tenga un formato de email yo por Ejemplo vengo acá escribo y si yo acá escribo esto y le doy en enviar fíjense que me va a decir tenés que incluir un signo de arroba incluo un aroba me va a decir

incluye texto detrás del signo aroba incluso texto le doy en enviar y ahora sí se pudo enviar por qué Porque ahora sí tenía el formato de email básicamente es lo mismo que el input type text Solo que me está intentando verificar que yo ponga texto no que ponga eh un formato de email También Tenemos el password el password Okay es eh básicamente lo mismo que los dos anteriores Solo que este el password cuando nosotros escribimos algo se va a ver de esta forma que de hecho uno de los trucos que yo enseñé en el curso

Cuando hice trucos que solamente los programadores sabemos hacer es si ustedes quieren ver la contraseña Qué hacen ponen botón derecho le dan en inspeccionar y hacen que esto pase de ser password a text entonces ahí Automáticamente esto puede revelar la contraseña no Entonces es bastante icónico tenemos entonces texto email y password bueno Y submit tenemos también otro que se llama checkbox que básicamente esto es esto es para tildar o destildar Okay por ejemplo aceptas los términos y condiciones después tenemos el radio que es parecido al checkbox solamente que el radio lo que hace es permitirnos

seleccionar una de varias opciones es decir yo por ejemplo agrego Dos radio y le puedo dar en una o en otra ahora porque no lo tengo configurado así pero después esto se configura para elegir una opción de entre varias estos son los tipos de inputs más comunes que hay después tienen otro que también es muy común que lo vamos a agregar acá abajo del radio file que esto es lo que nos permite seleccionar un archivo le damos en seleccionar archivo acá por ejemplo tengo un archivo de codigo. pik que Utilicé para para el curso de

git le damos acá y se acaba de seleccionar este archivo si yo le doy en enviar se acaba de enviar el formulario con todos los datos fíjense pongo esto acá pongo el mail Okay pongo acá la contraseña hago lo que toca hacer selecciono una archivo por ejemplo Y le doy en enviar y ahora lo que acaba de pasar bueno justo ahora no pero lo que tenemos que configurar es que cuando nosotros le demos en enviar fíjense que todos los datos que están Adentro de este formulario es decir todos estos Campos van a recopilar todos los

campos que teníamos guardados y se van a enviar a un servidor o algo que lo procese y haga algo Porque si yo quiero recibir los datos del usuario es para hacer algo por ejemplo voy a querer verificar que tengo una cuenta en mi plataforma entonces después lo logueo y y dejo que inicie sesión o por ejemplo si de repente está estamos trabajando con mensajes voy a recibir el mensaje Guardarlo en mi base de datos para que después otra persona pueda ver el mensaje Por ejemplo entonces con esto lo que hacemos Es definir Cuáles son los

datos que nos tiene que dar el usuario para que con esos datos después podamos hacer algo y después tenemos el otro que es el último que es más importante porque después Tenemos un montón Tenemos un montón pero el otro que es importante y es Útil es el de date nos pide la fecha fíjense que acá me dice fecha Entonces le damos acá y por ejemplo selecciono a ver cuándo es tu fecha de cumpleaños entonces s en mi caso el 23 de mayo por ejemplo no Entonces esta es la fecha en la que yo cumplo años

enviar y se envían los datos después como ya saben cada uno se puede agarrar y personalizar por ejemplo vamos a venir a YouTube esto que están viendo acá es un input Pero qué pasa YouTube lo personaliza y lo hace recont contralo esto que está acá es un botón le damos y Es como está buscando le damos en acceder y esto también es un input del tipo texto porque nos está pidiendo que tipem texto ahí está ahí me cargó ven me pidieron los datos para qué me pidió el dato me pidió un un dato para procesarlo

verificar si existía ese correo y cuando existe ahora me dice ingresa tu contraseña y acá tengo esto es un input type password y acá podemos verificar es un input type password si le cambiamos a text vamos a ver nuestra contraseña pero Lo vamos a dejar en password pero nada ese básicamente es el funcionamiento de los inputs y por arriba Cómo se crean formularios y campos de texto etcétera hay cuatro Okay cuatro atributos Además del type de un input que son muy importantes que los conozcan uno es el required el required lo que hace es obligar

al usuario a escribir algo si yo por ejemplo no le pongo el requir y esto le doy en enviar el archivo se envía todo lo que tengo lo envía yo le pongo Required cuando envíe esto me va a decir Ey este campo lo tenés que completar y si no lo completo no me va a dejar enviar el formulario escribo algo y Ups se acaba de mandar Entonces yo por ejemplo le doy en required a este y a este le estoy diciendo Ey este campo y este campo son obligatorios le damos en enviar y me va

a decir completé este campo lo completamos y ahora me va a decir No tampoco lo puedes enviar tenés que enviarlo como si fuera un mail a que Le completemos el campo con el formato que tiene que tener en este caso es un mail tiene que tener formato de email es una fecha tenemos que escribirlo yo por ejemplo le doy en required escribo el mail ta ta ta le doy en Enviar no me deja me dice que complete este campo le damos acá seleccionamos esto ponel enviar y ahora sí se envió porque ahora me seleccionó la

fecha después tenemos otro campo otra otro atributo Perdón una cosa que no sé si sabían eh es que jamás En mi vida Me drogué Jamás en mi vida fumé un cigarrillo Y jamás en mi vida tomé una gota de alcohol si lo hacés una vez está mal igual No no va a estar mejor porque lo haces una vez no porque lo hago una vez cada tanto claro o sea le peg un tiro en la piel a una persona pero no le le pegué un tiro una vez cada tanto Entonces qué importa no le metí un

cabezazo en la nariz a mi mamá pero la verdad que lo hice una vez cada tanto Entonces no está mal si algo está mal Está mal siempre okay No no va a estar menos mal ahora que la sociedad considere que es aceptable tomar cada tanto a tema suyo que la sociedad considere que es aable drogarse o ya tema suyo pero que está mal o sea si está mal está mal igual no nos vayamos de tema porque yo me pongo a hablar en los primeros cursos de html y css yo no paraba de hablar aprendí porque

me me insultaron mucho por eso viste hay mucha gente que le encantaba pero a muchos me Decían dalto cerrar el Quiero aprender enfocate en enseñarme pa Y eso hacía me enfocaba en enseñar después así que eso estoy haciendo ahora Perdón ya vimos Estos tipos de de inputs vimos el atributo required y ahora tenemos dos atributos más tenemos tres pero vamos a ver dos un atributo es el atributo name que este es importante porque este es como un identificador de los inputs nosotros cuando le mandamos un campo al servidor porque Qué pasa ya sabemos que Los

datos lo que hacemos Es procesarlos algo va a recibir estos datos y los va a procesar entonces lo que solemos hacer es definir Cómo se va a llamar este campo En este caso por ejemplo acá va a ser el username Entonces cuando el servidor reciba los datos de este input si yo escribo acá cuando yo le envío esto al servidor le va a llegar que este campo se llama username entonces va a poder decir Ey vamos a verificar si el campo username es correcto pero para eso Tenemos que asignarle un nombre porque si no no

tienen nombre y no es correcto la forma de identificar inputs es con esto con el name no no podemos tener más de un input con el mismo name porque no porque son identificadores es la forma en la que el servidor va a decir cómo se llama este campo el nombre de este campo es username el name de este campo es email por ejemplo Entonces cuando yo vaya al un lenguaje de programación voy a agarrar y decir voy a agarrar el campo Llamado username y lo voy a mandar al servidor para verificar que haga tal cosa

voy a agarrar el campo de email lo voy a validar y después voy a hacer una comprobación para poder para poder tomar la referencia de esos Campos le ponemos esto es decir si queremos acceder a lo que el usuario escribe tenemos que acceder por su nombre el nombre lo ponemos acá después con javascript lo más común Igualmente es por ejemplo hacerlo en la clase o por el ID o por Otras referencias pero es una buena práctica hacerlo por name porque es el identificador natural en html de cada input después tenemos otro atributo que este es

un atributo visual es decir es visible los otros dos no porque el require es un atributo de funcionalidad Okay que este que está acá ven es un tema de que me no me deja enviar el campo hasta que algo esté completado Entonces es un tema de funcionalidad el name es un tema de configuración interna No para mí para el desarrollador Pero tenemos el Place holder Okay que el Place holder vamos a abrar este campo acá el Place holder lo que hace es escribirnos un pequeño texto que desaparece cuando el usuario arranca escribir escribe tu nombre

Entonces en este campo dice escribe tu nombre arranco escribir y se desaparece el Play holder ahora borro todo Ahí me vuelve a aparecer el Play holder eso es el Play holder es un texto que normalmente se Usa para dar un ejemplo de lo que hay que escribir por ejemplo acá se puede poner escribe tu nombre se puede poner your name por ejemplo que es más cortito o se puede poner un ejemplo e John por ejemplo el gran nombre John do esto es un ejemplo no entonces acá ponemos algo que dice e acá tenés que poner

tu nombre Okay dame un ejemplo el ejemplo es John d bueno y después tenemos el último que es value pero por ahora no lo vamos a ver okay pero básicamente value es lo Que va a recibir el servidor si después en un lenguaje de programación queremos acceder a lo que el usuario escribió eso es el value yo por ejemplo acá le doy en value Hola cuando carguemos el formulario acá me va a decir ica vamos a poner al costado ven si yo por ejemplo acá pongo tat Esto me va a cargar con esto Porque si

nosotros queremos decir por ejemplo Ey pone tu nombre Lucas dalto y le damos en enviar el servidor lo que va a recibir va a ser ese Lucas Dalto que escribimos ese Lucas dalto se va a guardar en value porque el value se almacena acá pero es algo que no se tienen que enroscar es algo que cuando vean javascript lo pueden chequear Okay no es el momento Así que después eso se lo dejo ustedes para que lo vean pero nada los anteriores sí son más importantes por lo menos para que entiendan ahora el name que es

el identificador el required que es para darle funcionalidad de que se tia que Completar Sí o sí de la forma en la que se especifica en html el Play holder para escribir como un texto que cuando arrancamos escribir se desaparece obviamente no todos tienen Play Hold holder o sea por ejemplo en el file si ponemos Play holder y no me va a cargar nada porque no puede haber un play holder no todos los inputs tienen Play holder pero sí eh los que son por ejemplo así que tenemos que completar con texto otra cosa que también

se puede Hacer que yo directamente no la recomiendo Es poner un mínimo y un máximo si yo por ejemplo quiero decir Ey acá por ejemplo tengo required no required esto que está acá no me deja enviar el archivo pero pongo a y lo envío pero seamos sinceros Yo acá estoy pidiendo un nombre quiero que una persona me de su nombre Qué persona se llama a nadie yo sé que el nombre un nombre tiene por lo menos tres letras entonces yo voy a poner el atributo Minan leng y voy a poner tres Entonces de esa forma

yo vengo acá y pongo a y no me lo envía pongo B no me lo envía De hecho acá me dice aumentar la longitud del texto a tres caracteres como mínimo no es como algo que pondría siempre Es depende el caso depende de la situación y demás acá en form por ejemplo También tenemos que poner action o tenemos que poner un meod por ejemplo method post para que se envíe a través del método post pero son cosas que si Les explico Ahora cre que no van a entender porque es al pedo esto ya es para

trabajar con por ejemplo con lenguaje como javascript que reciben esta información hacen algo o la preparan para enviarla a otro servidor backend pero son cosas que Repito no van a entender mucho y se lo puedo explicar con manzanitas porque hay muchas cosas avanzadas que les expliqué que igual se tenían que ver más adelante y aún así la entendieron porque explico muy bien Yo soy una bestia explicando Pero me parece innecesario aún así ya lo veremos más adelante a su Debido tiempo así que nada esta fue la sección de formularios Así es como solemos trabajar o

crear formularios y terminamos con la sección básica de html Ahora sí voy a callarme la boca y arrancar con el apartado de css que ahora sí Ahora vamos a aprender a darle estilo a estos elementos de bueno gente Felicidades por completar esta sección completa de html dije que los iba a Felicitar cco veces vamos con la siguiente sección que es la primera de todas las secciones de css bueno en este caso vamos a ver la forma de enlazar ccs arranquemos bueno gente Bienvenidos a esta sección inicial de css acá lo que vamos vamos a ver

básicamente de hecho ya podrán notar los colores son los mismos que los colores de css Y es que me ambient un poquito para arrancar explicar css Bueno como ya sabemos De hecho está explicado Al comienzo del curso css significa cascading Style sheets y básicamente significa hojas de estilo en cascada Por qué en cascada bueno eso no le expliqué pero básicamente significa cascada Porque después cuando nosotros demos estilos a los elementos Okay lo que va a pasar va a ser que vamos a seleccionar varios elementos no y cuando nosotros seleccionemos varios elementos esto de hojas de

estil enc cascad principalmente por que normalmente tenemos varias Formas de seleccionar un elemento y dependiendo de en qué momento le demos la propiedad o de qué forma lo seleccionemos y demás esa hoja de estilo podría reescribirse entonces hace una analogía al agua viste si viene desde más arriba o sea si tiene más importancia estar en un nivel más alto se reescribe todo el otro código porque es como el mismo ejemplo del agua que cae Ahora parece que no tiene ningún sentido y parece que es complicado De entender pero cuando entiendan que hay muchas formas de

seleccionar elementos y que una es más poderosa que otra porque puede sobreescribir de propiedades y demás lo entender Pero qué importa eso ahora nada porque para la introducción de css no tiene nada que ver ya que este es un tema un poquito más avanzado pero dalto yo quiero que vos me expliques css bu Está bien te voy a explicar css pero relajate vamos a comenzar por lo básico como ya saben css Lo utilizamos para agarrar cada componente de html y darle un estilo para que el conjunto de estilos que le damos a cada elemento nos

dé como resultado final una página web estática funcional navegable etcétera es decir no se trata solamente de agarrar elemento por elemento y modificarle cada una de sus propiedades ya que eso es lo que hacemos sino que a nivel más Macro se trata de entender cómo funciona cada propiedad y cómo funcionan las Combinaciones porque nosotros no hacemos un estilo que va a ir aplicado a una caja o a un elemento y después lo demás lo dejamos de lado no no a nosotros nos importa la forma en la que se relacionan las cajas entre sí no se

trata de como creen muchos modificar todos los elementos y cada uno por separado esos son solamente herramientas lo que importa también es entender la relación entre los elementos por ejemplo un elemento padre un elemento hijo un Element elemento hermano un elemento Nieto Entonces ese tipo de cosas que son importantes que con el curso vamos a ir viendo pero lo que vamos a aprender ahora básicamente a lo largo de este curso de html y css en css vamos a ver todo sobre las propiedades más importantes de css la que un desarrollador utiliza en la vida cotidiana

es decir en esta sección de css que vamos a tener una sección básica y una sección avanzada en ambas Secciones vamos a ver no solamente las propiedades que un desarrollador utiliza en la vida real para desarrollar una página web sino que también vamos a ver la forma en la que utilizarlas y todas las combinaciones posibles que nos dan como resultado páginas hermosas porque a veces hay propiedades que solamente funcionan cuando pones las dos juntas o sea cuando a un elemento le das una y a otro elemento le das otra esos elementos juntos crean algo más

o se trata de Saber combinarlos también así que bueno vamos a comenzar con el principio de todo y es cómo integrar css como ya saben este fue el último código html que hicimos yo lo que les voy a recomendar que hagan es Open folder en cursito de html vamos a crear otra carpeta una nueva carpeta y vamos a llamarla css le vamos a dar en enter y vamos a darle en seleccionar carpeta De hecho yo modificaría todo completo acá dice cursito html Okay pero yo le voy a Cambiar el nombre por cursito html y css

voy a cerrar el vis Studio cod porque si no me va a dejar modificarlo Ahora sí ahí se acaba de modificar le voy a dar enter y voy a meter acá en una carpeta que se llame clases html y todo lo que hicimos antes meterlo adentro de clases html y a esta caja le voy a poner clases css de esta forma tenemos todo el cursito htm1 sss acá dentro cuando hagamos en un futuro ejercicio vamos a crear una carpeta nueva que se va a Llamar ejercicios y acabamos a hacer los ejercicios pero por ahora vamos

a quedarnos con estas dos ya tenemos esto de html que esto es html básico y ahora vamos a continuar con css vamos a arrancar con css básico para eso lo que yo voy a hacer es agarrar esta carpeta arrastrarla al editor de Ah bueno está cerrado vamos a abrirlo qué máquinas que somos visual Studio code para eso ya estamos acá ni arrastramos directamente le damos en Open folder entramos a Clases css y seleccionar carpeta ahora sí ya estamos posicionados en la carpeta primero voy a crear un nuevo archivo que se va a llamar un index.htm

Por qué Y porque lógicamente css no existe sin html html es la base sobre la que vamos a trabajar con css porque ccs sirve para modificar elementos html y si no tenemos elementos html qué joraca vamos a modificar Bueno vamos a crear primero principal una estructura básica Ahí está voy a eliminar las cosas que todavía no Vimos para No confundirlos acá le voy a poner enlazando ccs y acá voy a crear un h1 muy simple título esto Solo título y acá abajo voy voy a venir y poner un párrafo que va a tener un contenido

AC voy darle control shift p Word wrap y ya tenemos el Word wrap hasta acá Nada nuevo todo lo que vimos y demás La pregunta es no De qué forma podemos escribir css para modificar un elemento como ya vimos es parecido a cuando venimos acá y ponemos la propiedad y la Modificamos por ejemplo en imágenes no tenemos source y acá escribimos la ruta de la imagen porque esto es un atributo pero la diferencia es que las propiedades de css Al fin y al cabo son idades que contienen los elementos html pero no son atributos como

tal tenemos que separar la diferencia entre atributo y propiedad yo normalmente a veces cuando estoy hablando de atributos hablo de propiedades y me confundo medio tonto y mientras estoy grabando no me doy Cuenta que digo propiedad pero en realidad esto que está acá Okay es un atributo si yo pongo el hrf el hrf es un atributo si acá pongo color o pongo Max min o min leng por ejemplo o lo que sea Estos son atributos Por más que afecten al estilo incluso del elemento son atributos las propiedades de css acceden de otra forma y como

tiene una sintaxis diferente de html la forma de escribir css es muy distinta a la forma en la que escribimos html vimos un poquito en la Introducción del curso pero vamos a verlo bien ahora tenemos Tres formas que son las más importantes de enlazar css es decir Tres formas de escribir css de tal forma que realmente podamos afectar a los elementos una la primer forma de todas es algo que se llama estilos en línea Por qué se llama en línea y porque normalmente se da estilos en una sola línea de código acá por ejemplo le

damos Style la etiqueta Style le dice ey vamos vamos acceder a las propiedades de css y Quiero modificarlas y acá me dice Qué propiedad queres modificar yo voy a mostrarles una muy básica que va a ser color red esto lo que hace es cambiar el color del texto entonces pongo Style igual comillas y pongo color dos puntos red Entonces yo le voy a dar en gol ahí se abrió esto ya lo vamos a minimizar y acá tenemos esto que bueno es bastante obvio lo que sucede Y es que es un estilo que le dimos en

línea Por qué se llama estilos en línea lo vuelvo a Repetir porque se le suele dar en una sola línea acá también podemos dar más estilos yo por ejemplo puedo mir acá y decirle font size que significa tamaño de letra le puedo dar 20 píxeles por ejemplo y me aumenta Pero cuál es la limitación de esto primero tenemos dos cosas que son dos malas prácticas el primer motivo Okay es porque tenemos que tener un lenguaje por un lado otro lenguaje por el otro no podemos mezclar código html con código css con código Javascript cada lenguaje

tiene que estar en una sección específica para que si yo quiero ir a buscar algún lugar alguna propiedad de css yo voy a ese lugar donde Quiero encontrar el lugar en cambio de esta forma tengo todo separado y no puedo darle Grand lecturas al código sin que se me obstruya algo que por ahí no tiene nada que ver con lo que yo quiero leer Entonces esto no es correcto de hacer por eso tenemos la segunda forma de hacerlo que es Utilizando Style no como atributo sino que como etiqueta tenemos la etiqueta Style que lo que

nos permite es ahora sí darle estilo css yo puedo por ejemplo ahora agarrar el p y decir mira quiero que todos los p abro llaves y acá está la declaración en este caso voy a poner van a tener un color red ahora vamos a ver bien esto y la estructura y cómo funciona y cómo es la sintaxis ahora estoy dándoles un pequeño spoiler de lo que es Pero fíjense que acá ya me acaba De cambiar el color del texto a rojo y acá puedo darle más estilo también puedo poner el h1 y decirle vas a

tener un color Blue por ejemplo y se me pone el título de color azul y de esta forma es mejor porque si yo quiero agregar más propiedades simplemente las voy agregando acá abajo Ven y voy agregando propiedad tras propiedad y de esta forma tengo todo más separado es muchísimo Mejor aún así tampoco se recomienda hacer esto de esta forma lo que se Recomienda es tener todo en archivos separados porque cuando nosotros tenemos un archivo normalmente las propiedades que les damos no son tan poquitas como estas un archivo puede llegar a ser mucho más largo que

esto O sea así como lo ven gigantesco así de grande como lo ven bueno Esto se queda incluso corto para una el código de una página web real entonces para que esto no suceda lo que hacemos es utilizar la tercer forma y la más recomendada y la práctica y la Que todas las páginas web que están bien hechas utilizan es una etiqueta especial que se llama link que justamente linka una hoja de estilos en este caso vamos a sacar esto y esta hoja de estilos se suele poner en el Head okay entonces acá lo que

hacemos es utilizar la etiqueta link tiene un atributo que se llama rel que en este caso le tenemos que decir Style sheet en este caso esto significa hojas de estilo Okay Por qué se usa Esto bueno rel viene de relationship y le Está diciendo Ey el archivo que vas a vincular Qué relación tiene con esta página actual es decir con todo este archivo html Qué relación tiene el archivo que vas a vincular en este caso le voy a decir mira voy a vincular una hoja de estilos para darle estilo a esta página es decir voy

a incluir un archivo que va a decir y va a definir cada una de las propiedades de esta de este de este archivo html y después tenemos otra propiedad que es el href en este caso no Es source y acá ponemos el enlace en este caso por ejemplo el archivo se va a llamar styles.css y ahora tenemos que crear ese archivo para eso voy a venir acá arriba y voy a darle en styles.css lo creo voy a reducir el zoom para que volvamos a donde estábamos antes para verificar que esté todo correcto funcionando todo bien

y demás voy a hacer lo mismo que hice antes voy a seleccionar el p y le voy a dar un color red y si esto se cambia de color Como acaba de hacer recién significa que la hoja de estilos ya está vinculada correctamente Esta es la forma recomendada de enlazar una hoja de estilos decirle al navegador Cuál es la relación que tiene el archivo que vamos a vincular con la página actual en este caso es Styles sheet y después ponerle la ruta de donde se encuentra el archivo de css en este caso como el archivo

está en la misma carpeta con poner el nombre Ya basta y acá estamos ya con el archivo Listo para comenzar a modificar todas y cada una de las propiedades de estos elementos que creamos en html Así que ahora sí tenemos esto enlazado lo que vamos a ver ahora muy rápidamente es repasar hacer un repaso rápido de esto vamos a minimizar esto un repaso rápido de esto que son justamente eh la forma en la que tenemos no de modificar propiedades ya lo vimos antes pero vamos a verlo una vez más primero y principal lo que se

hace es poner un selector es Decir Hay muchas formas de seleccionar elementos lo vamos a ir viendo ahora en la próxima sección posiblemente pero eh la forma más normal de seleccionar elementos es por el nombre del elemento en este caso estoy seleccionando todos los elementos p entonces para seleccionarlo los elementos p le doy la letra p esto que está acá se llama selector lo primero que ponemos para cambiar la propiedad de uno o varios elementos es el selector tenemos que Seleccionar de alguna forma los elementos o el elemento que queremos modificar Entonces en este caso

la forma que tengo de seleccionarlo es la más básica y tradicional de toda la historia que es por el nombre del elemento se llama p lo selecciono así perfecto después se abren las llaves que en este caso las llaves significa que estamos abriendo un bloque las llaves inician y terminan el bloque un bloque de Qué bueno un bloque de declaraciones ahora Le damos enter y fíjense que ya se nos posicionó el cursor acá porque ahora es momento de comenzar a declarar decir Qué propiedad queremos modificar y cuál va a ser el valor que vamos a

a darle a esa propiedad yo por ejemplo tengo color y le doy Blue lo que acabo de hacer es decir que la propiedad que voy a modificar se llama color le damos dos puntos y después decimos el valor que va a tener esa propiedad es azul Entonces el color de los elementos p va a ser Azul Eso es todo lo que hicimos ahora lo que vamos a ver en la próxima sección eh vamos a ver justamente los selectores son las formas de seleccionar uno o varios elementos Así que vamos con la sección de selectores bueno

ahora vamos a ver justamente los selectores que los selectores hacen referencia como dije antes a la forma que tenemos de seleccionar uno o varios elementos dentro de un documento html no Pero esta Vez en css para poder modificarlo porque teníamos un problema y es que si nosotros normalmente eh queremos seleccionar un archivo de varios no lo podemos hacer y lo que estamos viendo acá justamente es una de las Tres formas que les voy a explicar ahora que son importantes de seleccionar elementos esta se llama selector elements o selección por elemento esto lo que hace es

Buscar el nombre del elemento html que se llama así y modificarlo Incluso Si nosotros creamos un elemento nuevo nuevo elemento Jajaja va a cargar esto que está acá que es un nuevo elemento y si venimos acá y ponemos nuevo elemento y hacemos lo mismo ponemos color red se va a Modificar el nuevo elemento porque literalmente hace eso esto es la peor práctica del universo por favor No hagan esto no lo hagan no creen sus propios elementos porque no se hace pero solo que sepan que literalmente lo que está haciendo este selector es ir a buscar

Todos los elementos que se llaman así Y darles las propiedades que definimos en el bloque de declaraciones vamos a eliminar esto y vamos a eliminar el nuevo elemento Pero tenemos otra forma voy a poner pantalla completa y voy a guardar esto en diferentes carpetas y la carpeta que voy a crear se va a llamar selectores y voy a meter estas dos acá dentro mo Ahí está porque si no vamos a tener que siempre andar modificando los mismos archivos y no va a quedar para Ustedes un historial con todos los archivos que tenemos y nada no

no lo vamos a poder hacer así que yo que ustedes hago lo mismo y separo todos los ejercicios en carpetas diferentes también lo podríamos hacer con git pero este no es un curso de git y no quiero que se mezclen mucho el curso de git ya salió lo pueden ver en YouTube Está increíble y después de este curso sí por qué no les recomendaría ver el curso de git antes el de javascript por lo menos El básico y después el deit bueno acá voy a checar un poquito esto Ahora sí voy a entrar acá Acá

tengo los dos archivos voy a cerrar el Explorer vamos a correr en tiempo real esto porque no nos va a cargar ahora sí este que está acá lo sacamos ahora sí estamos bien Vamos a crear listas por ejemplo vamos a poner algo que se llame ingredientes vamos a hacer de cuenta que estamos justo en una minise sección que se encarga de definir los ingredientes de Una receta creamos un L y adentro del l vamos a crear cinco Li vamos a borar el último quiero cuatro nada más el primer elemento es por ejemplo harina el segundo

es aceite leche y sal ya está acá tenemos todos los ingredientes de no sé estamos inventándose una receta si yo por ejemplo vengo acá y escribo le abro el bloque de propiedades y acá pongo color red ya más adelante vamos a ver miles de propiedades para modificar elementos ahora por ahora quedémonos con Que como esta es una clase de selectores vamos a usar solamente esta prop durante toda la clase para mostrar que estamos seleccionando lo que queremos seleccionar Pero después vamos a ver 35,000 propiedades para cada elemento y ahí va a aparecer la magia pero

por ahora tenemos que aprender a seleccionar elementos de hecho fíjense que acá nos aparecen voy a darle un control más así lo podemos ver más grande nos aparecen varios elementos en este caso tenemos Harina aceite leche y sal Enton que acá es un problema porque si yo por ejemplo quisiera seleccionar solamente un elemento no lo podría hacer porque voy a estar seleccionando solamente a los le qué debería hacer en ese caso utilizar por ejemplo la etiqueta span que esta Es solamente una etiqueta que utilizamos para seleccionar algo muy puntual entonces venimos acá ponemos span y

ya está Le acabamos de dar un color a esto pero a su vez el puntito este se quedó Negro y encima esto que estamos haciendo ni siquiera está tan bien lo podemos hacer todavía mejor vamos a borrar el elemento spam el elemento spam igual es muy utilizado Okay para hacer este tipo de cosas es muy usado pero en este caso no lo necesitamos Porque queremos modificar todo el lad no es que tenemos acá varias cosas como por ejemplo una taza de y acá acá sí ponemos harina Entonces encerramos el harina en el span en este

caso Sí está bien porque es una Taza de y encerramos en el spam el harina Entonces estamos diciendo Che todo lo que esté adentro del spam hacelo rojo Entonces en este caso Está bien usado pero si vamos a querer modificar todo el le completo mejor encontremos una forma de seleccionar puntualmente este lead para modificarlo Cómo podemos hacer Bueno hay algo que se llama clase básicamente lo que nos permiten las clases es asignarle a los elementos un nombrecito muy puntual que ese nombre se Llama clase y es la forma que tenemos de separar a los elementos

por clases supónganse que yo digo Bueno mira quiero que este elemento sea una caja no una caja giratoria qué hacemos seleccionamos todos los elementos que queremos que se conviertan en cajas giratorias y les asignamos la clase caja giratoria Entonces cuando nosotros queremos modificar todos esos elementos los modificamos una vez y es como un preset una plantilla Porque después cada vez Que hagamos cajas giratoria se van a modificar todos los elementos como cajas giratorias ahora vamos a ver para eso tenemos que utilizar el atributo Class y acá poner el nombre de la clase en este caso

le quiero poner por ejemplo faltante la clase faltante por qué Porque si yo no tengo un elemento lo voy a poner de color rojo Entonces si de repente faltante no no está le doy en color red todos los elementos de la clase faltantes se van a llamar rojos Pero de esta forma estamos Llamando al elemento faltante ven acá nos muestra acá nos muestra lo que estamos llamando estamos Llamando a una etiqueta llamada faltante si queremos Llamar a un elemento que tenga la clase faltante lo mismo que antes solo que ahora con un punto por delante

un puntito Ahí está de hecho fíjense que se nos pone de otro color Esta es la forma que tiene visual Studio code de decirnos entiendo que esto es una clase y si actualizamos ahí Como podrán ver ahora se nos marca harina en rojo y encima se nos pone este puntito y no solamente eso Si quisiéramos encima decir Bueno ahora también nos falta sal tengo que ir a comprar sal Bueno vamos a sal darle la clase faltante actualizamos y ahora sal también va a estar en rojo de esta forma podemos a varios elementos agregarles una misma

clase entonces modif amos acá todas las propiedades que queremos que tengan estos elementos con esta clase y Todos estos elementos van a estar modificados como nosotros queremos las clases las podemos utilizar para muchos elementos está bien utilizar clases para muchos elementos Si queremos que varios elementos sean de una clase lo podemos hacer esa es la practicidad del uso de clases hay un montón de estrategias Okay que tenemos que más adelante ver para entender cuál es la mejor forma de elegir el nombre de una clase Porque cuando un desarrollador viene y lee esto Tiene que entender

Qué significa esta clase con ver la clase más o menos tiene que darse cuenta de qué hace Por qué le puso esta clase Porque si ustedes van y le ponen este nombre Jaja XD y ahora vienen acá y le ponen Jaja XD y funciona Mira funciona pero cualquier desarrollador que venga acá le esto decir che No entiendo qué quiso decir acá Qué joraca quiso decir con esto no entiendo por qué le puso hack XD por qué lo puso de color rojo en cambio Si yo acá le pongo por ejemplo ingrediente faltante ingrediente faltante vengo acá

y pongo ingrediente faltante lo que está pasando acá es que cuando un desarrollador venga y vea Ah okay A este elemento tiene la clase ingrediente faltante y en Styles está configurado de color rojo Qué significa que todos los elementos que tengan la clase ingrediente faltante se les va a dar un color rojo Y eso significa que el ingrediente falta Entonces yo por Ejemplo puedo venir acá y decirle Okay este Li como me falta sal también va a tener la clase ingrediente faltante le damos enter y ahora ahora tenemos dos ingredientes faltantes dos elementos de clase

ingrediente faltante después tenemos otra forma de seleccionar elementos que se llaman ids los selectores por ID que el selector ID es un selector que se le puede dar a un elemento en toda la página supónganse que yo quiero determinar un elemento Clave voy a crear otro Li Okay vo decir este elemento tiene que ser un elemento clave por ejemplo ingrediente secreto ahí está el ID se selecciona con el signo de la almohadilla O el hashtag este signo es para el ID así como el punto para la clase el hashtag para el ID y acá ponemos

ingrediente secreto y acá por ejemplo le damos en color Blue y fíjense que esto que está AC se me puso azul yo ahora por ejemplo puedo escribir levadura que es un elemento que un un Ingrediente de cocina que literalmente eleva la masa la hace más esponjosa todo ahora esto funciona Exactamente igual por lo menos en css es decir si yo vengo acá y a este elemento le doy ingrediente secreto también se va a poner de este color Vamos a ponerle ID Ahí está sí también se va a poner de color azul No es que no

se puede pero la realidad es que esto no es una buena práctica es decir no se recomienda hacer esto Incluso en javascript van a tener Problema si lo hacen así cuando trabajen con javascript pero más allá de eso no es recomendado esto porque esto le dice al navegador Ey este va a ser un identificador único para cada elemento es decir va a haber solamente un elemento que sea ingrediente secreto de hecho acá pueden ver y acá te explica ves que solamente se tiene que identificar un solo elemento para después utilizar o seleccionar en javascript o

en css Son elementos únicos Que necesitamos identificar de alguna forma para después darle un estilo especial o algo la mientras que la clase se utiliza para definir varios elementos de un mismo tipo podemos hacer que muchos elementos tengan la misma clase no podemos hacer que más de un elemento tenga el mismo ID porque el ID es esa forma de decir al navegador e este este elemento va a tener este identificador único para este elemento que después con javascript voy a agarrar y voy a hacer Algo muy específico por ejemplo voy a hacer que cuando se

le dé clic a este elemento se me abre una pestaña mágica por ejemplo Entonces hasta ahora ya vimos las Tres formas que tenemos de seleccionar por elemento que es por ejemplo a los le se selecciona por elemento color Grey por ejemplo se les da un color gris Esta es la forma que tenemos de seleccionar por elementos de esta forma estamos seleccionando por clases todos los elementos con esta Clase van a tener este color y de esta forma seleccionamos por ID acá le voy a agregar faltante así lo dejamos lindo y no me da ningún Toc

ahora que ya más o menos sabemos cómo seleccionar elementos puntuales sin volvernos locos lo que podemos hacer es ver algunas propiedades de texto para que tampoco tengamos que ver siempre la misma tipografía el mismo tamaño el mismo espaciado entre textos lo basta de ver siempre lo mismo Vamos a aprender a darle alguna que otra Propiedad al texto hay muchos tipos de propiedades tenemos propiedades para darles a las cajas tenemos para agregar sombras tenemos para cambiar las posiciones iones Tenemos un montón de cosas okay Y lo que vamos a ver ahora es una de esas cosas

que son las propiedades de texto son propiedades que afectan directamente al texto y a la forma en la que el navegador nos presenta el texto Así que vamos a ver propiedades de texto a que no tengamos Tanta fald acá vamos Bueno ahora lo que vamos a ver son algunas propiedades de texto muy simple no voy a explicar mucho más propiedades de texto son propiedades que le vamos a dar al texto para que de alguna forma se modifican la primera de Bueno de hecho no esto lo vamos a guardar Okay pero vamos a cerrar esto y

vamos a crear una nueva carpeta Sí una nueva carpeta porque con esto no nos basta es más Vamos a darle clic a la carpeta Okay Cerrada tiene que aparec noos en Violeta si tiene el mismo tema que yo que es palenik le dan control c control b y debería aparecerle la misma carpeta pero copiada le van a cambiar el nombre rename propiedades de texto y a la que lo recontra remil le agarraba la locura se pu insultar Vamos a entrar okay Y acá tenemos esto que está acá que es lo mismo que antes voy a

checarlo un poquito pero ahora voy a abrir voy a cerrar esto que está acá Así nos queda Estos dos archivos abiertos que son los dos archivos que teníamos en esta carpeta voy a darle enter acá y ahora sí voy a abrir el otro porque si no no se me abren esto en el curso de vis estudio có explico cómo solucionarlo le doy acá para que se oculte y ahora tenemos exactamente el mismo código Cuál es la diferencia bueno acá vamos a borrar todo esto así nos queda limpito y acá también vamos a borrar todo esto

así también nos queda limpito Vamos a darle Ahora sí en Go Live para que nos cargue esta pestaña debería abrirse acá al costadito en vez de enlazando css le vamos a poner propiedades de texto en el otro archivo le habíamos puesto un nombre malo no le habíamos puesto ingrediente le habíamos puesto enlazando css no no no esto que está acá debería llamarse selectores Ahora sí Cerramos porque si no bueno para este ejercicio voy a agarrar primero un h1 el mismo que teníamos antes y poner título y voy a poner un Párrafo y el párrafo va

a tener un lorem Ahí está control shift p Word wrap y ahora sí ya tenemos esto que está acá bueno para comenzar yo Esto sí lo voy a checar un poquito y un poquito más ahí está y voy a venir acá bueno acá ya tengo todas mis propiedades vamos a arrancar con la primera primero vamos a seleccionar el párrafo y vamos a Modificar el color esto que está acá modifica color es una propiedad directa que podemos incluso poner font color Pero ya no se usa color es la propiedad que vimos recién desde que comenzó el

curso que literalmente lo único que hace es Modificar el color del texto Esta es la propiedad que ya todos conocemos muy simple la diferencia es que hasta ahora venimos escribiendo red y quiero que sepan que en un futuro vamos a ver directamente describir y trabajar con colores fijos Y absolutos por qué porque esto que está acá Este red es una palabra clave que en inglés significa Rojo Sí ya lo sabemos pero el navegador agarra este color Y le da el color que quiere para Google Chrome red puede significar este rojo pero para mochilla por suerte

para mochilla y para Chrome son lo mismo pero por ejemplo hay navegadores que se ven afectados por el el color que se les da no en todos los navegadores Red va a ser exactamente el mismo rojo en cambio más adelante vamos a aprender a trabajar bien con colores rgb hexadecimal y demás para que puedan Darle un color fijo y sea igual en todas las webs pero nada por ahora vamos a ponerle Red porque no es algo que nos interese ahora Así que con red es más que suficiente ya que lo que queremos Mostrar no es

un color absoluto ni colorizar sino que entender algunas propiedades de texto la primera es esta que es color red la que le sigue Okay se llama font family acá fíjense toda la cantidad de cosas que no saltan Exacto acá como podemos ver son tipografías Diferentes acá va la tipografía y otra cosa que no les mostré fíjense que acá hay un punto y coma Por qué está este punto y coma Bueno este punto y coma lo que hace es separarnos propiedades O sea la última propiedad que defina no necesita tener el punto y coma Pero todas

las demás sí porque es la forma que tenemos de separar propiedades entre sí acá por ejemplo voy a poner San serif fíjense que acá me cambió la tipografía antes estaba así cuando Le agregué la Propiedad se puso así esto literalmente me cambia la tipografía si yo no le doy el punto y coma y guardo fíjense que además de que el color me lo muestra mal acá tampoco se cambia la tipografía Y encima Este color no funciona por eso es importante darle el punto y coma porque entre afirmaciones hay que separarlas porque esto es como si

yo dijera esto se puede poner todo en un mismo párrafo no habría problema pero en vez de ponerlo todo en un mismo en una misma línea lo Separamos con espacios en línea así nos queda más lindo y modificamos propiedad tras propiedad por eso incluso es una buena práctica siempre terminar con un punto y coma Aunque terminar con un punto y coma no sea necesario que nosotros no sabemos cuánd vamos a ir a ese elemento y modificarlo o agregarle más propiedades Así que siempre está bueno tener esto para que si el día de mañana queremos venir

y seguir editándolo le damos enter y ya podemos Trabajar en otra propiedad bueno como vimos font family nos da nos permite elegir la tipografía una forma de poner el font family es cco millas que es así Simplemente escriben la tipografía por ejemplo pongo taoma y acá me ya me lo marca en azul entonces me pone color taoma pongo sans serif guardo y se me pone San serif pongo Georgia y se me pone Georgia y después tengo la otra que es la de con comillas podemos poner comillas y acá escribimos la tipografía Por ejemplo taoma no

que nos va a funcionar Exactamente igual esto es cuando la la tipografía tiene más de una letra por ejemplo nosotros tenemos sans serif Okay pero si en lugar de tener sans serif la tipografía se llamara así esto nos va a tirar un error acá tenemos lucida sans Si nosotros quisiéramos poner lucida sans sí o sí tenemos que usar comillas simples vamos a actualizar Y en este caso nuestro nuestro sistema operativo no tiene esta tipografía pero Si la tuviera la mostraría solo para que entiendan que cuando la el nombre de la tipografía tiene más de una

palabra si no lo ponemos entre comillas nos va a tirar un error así que tenemos que ponerla entre dos palabras las que son de una palabra se pueden poner simplemente por el nombre de la palabra taoma y ahí ya está o si son dos palabras y la tipografía por defecto viene configurada para separarse por un guion medio también sans serif pero como Les dije antes Si sans serif no tuviera configurado en su nombre de tipografía este guion medio y estuviera así tendríamos que dársela con comillas porque si no no funcionaría lo vamos a dejar acá

la tipografía va a ser sanif Hola les habla la versión dalto minita de Google una cosa que el boludo de dalto se olvidó decir es que también pueden usar la coma y agregar otra tipografía para que si la primer tipografía no carga ya que está mal Escrita no es soportada por el navegador o por algún motivo intente cargar la segunda que pusimos si la segunda no carga pueden poner una tercera una cuarta y las que quieran de esa forma va a ir probando de una en una de izquierda a derecha hasta que alguna tipografía agarre

eso fue todo hijos de p si te gustó esta sección de dalto versión minita de Google deja tu like y si no también boludas después tenemos font size que es el tamaño del texto Normalmente por defecto como dijimos antes font size suele ser de 16 píxeles de hecho si le damos font size 16 pixeles van a ver que no va a cambiar absolutamente nada porque 16 píxeles es el tamaño por defecto en la mayoría de los navegadores pero si le damos por ejemplo 13 píxeles Ahí vamos a ver que se nos achicó un poquito la

el la tipografía por qué porque esto que está acá lo que hace es literalmente cambiar el tamaño de la letra muy simple y Podemos medirlo en píxeles enem en rems en porcentajes más adelante también vamos a a ver unidades de medida no es el momento no importa que nos enfoquemos en eso ahora no queremos aprender a medir o a definir medidas correctamente eso lo vamos a ver más adelante ahora queremos ver propiedades de texto por eso cosas como colorizar correctamente o aprender a a definir medidas con eh correctas para que se adapten a todo dispositivo

para que sean absolutas o Relativas o lo que sea eso en otra sección por ahora Lo importante es que sepan que esta es la propiedad que nos permite Modificar el tamaño del texto le sigue font weight que font weight básicamente lo que hace es poner la la tipografía eh más o menos ancha literalmente Define el grosor de la tipografía ancha no gruesa Perdón nosotros lo que haríamos normalmente para poner esto en negrita sería poner la etiqueta B poner así y esto se pone Todo en negrita pero si en vez de hacer esto con la etiqueta

B venimos acá y ponemos font weight Blood Blood no perdón bold el efecto es exactamente el mismo solamente que ahora lo estamos haciendo desde css y nos estamos ahorrando escribir la etiqueta b De hecho se recomienda hacer esto si ustedes van a poner algo en negrita no lo hagan con la etiqueta B háganlo con esta etiqueta hoy por hoy ya no se usa más la etiqueta B si por ejemplo tienen Que Resaltar la palabra Esta que está acá porque de repente ipsum es una palabra muy importante están hablando por ejemplo Qué significa a una variable

en css y tienen que resaltarla el texto variable en css esto que está acá es la forma tenemos que resaltarlo Pero esto tan mal No necesitamos hacer esto puntualmente lo podemos hacer con un spam y Modificar el spam o podemos utilizar la etiqueta strong Esto es algo de html no de css pero que sepan que la Propiedad strong funciona Exactamente igual que B igual eh solamente que la diferencia que tiene strong es que el navegador le va a dar más importancia en el seo o sea Google se va a fijar en la etiqueta strong pero

no se va a fijar en la etiqueta B ent Si queremos Resaltar a nivel semántico una palabra lo tenemos que hacer con strong para que Google le dé importancia la etiqueta B solamente es para algo de estilos por eso ya que ni se recomienda usar o son contadas las Veces en las que se puede utilizar bien en este caso nada no quiero ver más nada html ya veremos más adelante la sección avanzada bueno font weight igual No no es Blood la única que tiene de hecho fíjense que cuando escribimos font weight le damos en dos

puntos y nos saltan varias eh varios números bueno tenemos del 100 a el 900 pero tenemos que entender cómo funcionan las tipografías normalmente las personas que se encargan de crear tipografías lo que Hacen es definir un grosor para cada tipografía si yo por ejemplo de alto Quiero crear una tipografía qué hago defino una tipografía con 100 de grosor una tipografía con 200 de grosor una tipografía con 300 de grosor y defino nueve grosores diferentes para una misma tipografía Entonces yo de esta forma accedo a cualquiera de los nueve lo ideal es que mientras más chiquito

sea el número más finito sea y mientras más grande sea el número más más grueso sea Yo por ejemplo le doy F weight 100 y actualizo van a ver que el número se mantiene igual le doy 300 y actualizo y sigue completamente igual le doy 50000 y actualizo y sigue completamente igual le doy 700 Y ahí sí hay un cambio por qué Porque el creador de la tipografía San serif Esta que está acá No definió ni la 100 ni la 200 ni la 300 ni la 400 Entonces definió dos una que está por debajo de

600 y la de 600 definió las tipografías 100 200 300 400 y 500 como Finitas del 600 al 700 Esta tipografía es como si le pusiéramos un Blood o en negrita ese tiene este grosor el 800 tiene este grosor super grueso y el 900 el mismo Entonces ya sabemos que del 100 al 500 es finita 700 y 600 es eh gruesa y 800 y 900 es super gruesa Pero eso cambia con cada tipografía yo por ejemplo pongo taoma Okay y van a ver que si yo acá le pongo 100 me dice que está super finita

le pongo 400 y sigue igual 500 y sigue igual 600 y ahí también me La cambia le doy en 9900 y me la hace igual de gruesa porque taoma no tiene tres taoma tiene Solo dos de 100 a 500 y de 500 a 900 pero hay tipografías que tienen todo el rango entero 100 es Ultra finito 200 es un poquito más grueso 300 es un poquito más grueso que 200 400 es un poquito más grueso que 300 y siempre los siguientes son un poquito más gruesos que el anterior eso A nosotros no nos importa solamente

tenemos que saber que la tipografía que descarguemos Tiene que tener varias capacidades de anchos y a veces hay tipografías que tienen uno solo un solo tamaño Entonces por más que le demos 100 por más que le demos 900 siempre va a tener el mismo pero la mayoría de tipografías que uno descarga tiene varios rangos Pero bueno que sepan que eso es lo que pueden hacer del 100 al 900 dependiendo cómo lo haya definido el creador ojo acá porque ahora que entendimos esto tenemos que entender Cómo funciona el valor vol que Básicamente nos pone negrita y

bolder son Exactamente lo mismo Solo que vol establece un peso de 700 o sea escribir 700 y escribir es lo mismo es decir estar escribiendo volt es como si escribiéramos 700 por eso quería primero explicar esto de 700 la diferencia entre bt Y bolder es que lo que hace bolder es ir un escalón más arriba o sea detecta Cuál es el siguiente paso si yo por ejemplo vengo acá y le doy en sanif si yo acá por Ejemplo le doy en b b me lo va a dejar en 700 700 es esto es lo mismo

pero ya 900 por ejemplo es más grueso todavía bueno si yo le doy en bolder lo que hace bolder es ir un pas paso más adelante o sea si la tipografía natural es finita la hace gruesa y si la tipografía natural es gruesa la hace todavía más gruesa O sea que si el valor por defecto de San serif fuera 700 por ejemplo ven 700 cuando nosotros aplicáramos bolder sería el siguiente escalón o sea 800 Porque ahí ya comienza a ser más gorda y si el tamaño por defecto es 400 cuando le diéramos en bolder iría

al siguiente escalón que es 600 pero escribir bt no importa el contexto no importa nada siempre va a ser 700 esta propiedad es un poco complicada parece parece difícil pero la verdad que es s simple solamente Define el grosor si no entendieron un lo que acabo de explicar nada vayan probando 100 200 300 400 hasta que tenga el grosor que ustedes quieren que Tenga y si ponen volt se pone Sí o sí en negrita si la tipografía tiene disponible la versión negrita vamos a ver otra propiedad después tenemos font Style esta propiedad fíjense que acá

tenemos varios valores nos vamos a preocupar por estos los tres primeros el primero es italic italic lo que hace es ponernos la en cursiva o sea cursiva o cursive o italic o itálica es cuando tenemos la letra inclinada si no me equivoco ocho entre ocho y 12 gr en Lugar de italic tenemos normal que este es el valor por defecto o sea el navegador va a configurar font Style normal si tenemos Cualquier párrafo excepto negrita y strong va a configurarlo como normal y después tenemos oblic que básicamente también inclina la tipografía pero no tanto O

sea no la hace tan inclinada va a parecer que son exacta exactamente iguales porque sí en algunos casos italic y oblique son exactamente el Mismo valor pero en tipografía así como tenemos tipografías que te permiten tener la letra finita la letra gruesa y la letra super gruesa hay tipografías que te permiten tener la letra derecha doblada y super doblada en este caso sans serif no nos deja por eso italic y oblic son lo mismo pero si se pudiera italic es bastante inclinada Y oblic es menos inclinada y después tenemos una propiedad experimental que salió los

navegadores modernos en las últimas Actualizaciones que llama oblicuo y acá definimos cuán inclinado tiene que estar por ejemplo 40 deg o 40 gr no en este caso a mí no se me actualiza porque esta es una función experimental que yo no tengo habilitada pero en el futuro esto se va a poder hacer vamos a poder definir Cuánto se va a poder inclinar la letra pero nada esto por ahora olvídense solo sepan que en el futuro van a poder inclinar la letra a lo que ustedes quieran lo más normal cuando utilizamos La tipografía font Style es

utilizar italic porque el valor por defecto es normal literalmente es así es normal y si nosotros vamos a definir normal para eso ni lo definimos y no ponemos una pero si queremos cambiarlo a cursiva o itálica ponemos italic y ahí se modifica después tenemos la propiedad text align que básicamente lo que hace es alinea texto dentro de su contenedor si yo por ejemplo le doy en text align vamos a ver que tenemos varias Propiedades Center and justify left right Start para comenzar vamos con los dos más básicos tenemos left que es el valor que viene

por defecto que dice e la letra tiene que arrancar a la izquierda porque nosotros vamos a escribir de izquierda a derecha pero si escribiéramos de derecha a izquier izquierda sería right y fíjense que haí la letra se pone de acá así por ejemplo escriben los árabes en Arabia Saudita o en los Países Árabes se escribe de Derecha a izquierda es el famoso right to left en este caso como estamos en Argentina y hablamos español nosotros escribimos left to right o sea de izquierda a derecha no escribimos de derecha a izquierda entonces acá tenemos que definir

right Por qué Porque el texto se tiene que alinear hacia la derecha Si queremos que ser bien argentinos Y no y hablar español ponemos left después tenemos Center Center lo que hace es nos la centra ni a la Izquierda ni a la derecha la deja centrada de hecho vamos a probarlo con el título si yo al título por ejemplo le pongo text align left se queda ahí si le pongo right Okay se alínea a la derecha y si le pongo Center se centra como el título es un elemento de bloque ocupa todo el ancho disponible

entonces estas propiedades sirven estas propiedades lo que hace es moverse en el rango disponible O sea si yo por ejemplo tengo una y tengo un texto acá a la izquierda Si ponemos right se va hacia acá okay Y si ponemos Center se queda centrado pero si la caja del elemento es igual de grande que el elemento O sea si los bordes del elemento son iguales Como por ejemplo los elementos de línea ponemos right ponemos left ponemos Center y le va a chupar un huevo porque va a ser Exactamente igual porque lo que hace right left

y Center es alinear el texto dentro de un contenedor Y si el contenedor tiene el mismo tamaño que Ocupa el texto no vamos a poder alinear un entonces solamente Aplica para elementos que que tienen su tamaño o Su contenido más grande que el texto o elementos de bloque por ejemplo como por ejemplo si le damos botón derecho inspeccionar acá podemos ver que el título es largo acá le damos en left y le modificamos la propiedad sigue siendo igual de largo Pero si por ejemplo el h1 fuera Play inline esto lo vamos a ver después ni

se preocupen por lo que acabo De hacer pero si fuera un elemento en línea y yo por ejemplo acá le dira right No se va a alinear a la derecha porque la alineación es dentro del contenido Yo acá le dira Center no se va a alinear al centro porque ya está alineado al centro porque el total de todo el contenido es este lo que hace es alinear Dentro de este fondito azul yo por ejemplo le sacar a esto ven lo que hace es me lo centra dentro de todo el recorrido azul que tiene bueno acá

estamos de vuelta Solamente era para mostrarles Bueno eso es lo que hace el Center y después tenemos el justify el justify lo que hace es intentar hacer que más o lo que hace Word o Google docs básicamente intenta que nos quede todo igual o sea que esto nos quede así parejito que todas las letras comiencen al principio de la línea y que terminen acá fíjense que si yo le saco el justify Esto está mal porque esto que está acá termina tera antes de que termine la línea esto Que está acá termina antes esto que está

acá termina Este es el único que termina bien y este que está acá termina mal pero si le damos en justify es como que te lo justifica vamos a verlo de vuelta en Paint lo que hace es intenta que todos los elementos lleguen al final de la línea porque si no una línea puedes terminar acá una línea puede terminar acá otra línea puede terminar acá otra puede terminar acá Entonces cuando vamos a leer el texto tenemos esto que es más O menos lo que tenemos acá voy a sacarle la propiedad justify de vuelta para que

lo vean esta línea termina acá y todo esto lo deja libre acá esta dejó todo esto libre entonces lo que hace justify es hacer que esto no suceda lo que hace es intentar hacer que todas más o menos mientras se pueda terminen siempre al final de la línea eso es lo que hace justify entonces para eso lo que hace es más o menos Le cambia el tamaño de los espacios para que más o menos lleguen Bien al final de la línea eso es lo que hace Esas son las cuatro más importantes después tenemos una que

es Start que esta es como si dijéramos left Y tenemos end que esta es como si dijéramos right Cuál es la diferencia bueno que si estamos en Arabia Saudita end va a ser como si pusiéramos right y Start va a ser como si pusiéramos end Por qué Porque lo que hace Start dice quiero que la letra se alinee hacia donde comenzá a escribir yo le pongo Start nosotros en Argentina escribimos de izquierda a derecha Entonces el texto se alinea a la izquierda porque comenzamos en la izquierda pero en Arabia Saudita por ejemplo la gente escribe

de derecha a izquierda entonces comienzan desde la derecha entonces Start en habla hispana va a ser izquierda pero si esto lo aplicamos a un país de Arabia Saudita va a ser derecha cuando estamos creando una página web que queremos que entre gente de todo el mundo esto es recontra útil Si escribí de izquierda a derecha te lo pongo a la izquierda si escribís de derecha a izquierda te lo pongo a la derecha y end hace lo contrario Si escribes de derecha a izquierda te lo pongo a la izquierda Si escribes de izquierda a derecha te

lo pongo a la derecha hasta donde termina la dirección final Pero nada yo en este caso le voy a dejar en left creo que el valor por defecto es Start de esta propiedad después tenemos text decoration text Decoration que esto lo que hace fíjense esto tiene varias propiedades tenemos underline que nos pone esto que está acá que hace que parezca un enlace ven es el sub nos subraya por abajo Tenemos también el subrayado overline que esto en vez de subrayar la parte de abajo del texto nos subraya el el techito Y tenemos Line trout que

esto lo que hace es tachar noos el texto o sea básicamente dice Che Quieres que te ponga una línea la línea te la pongo Abajo te la pongo arriba o te la pongo en el medio de hecho ustedes dicen Bueno quiero que sea en dos quiero por arriba y por abajo ponemos overline y además podemos poner underline ven o sea se pueden mezclar las propiedades no es que son ex no hace falta que pongamos solamente una si yo quiero que tenga un subrayado por debajo es underline si quiero que tenga por arriba overline y si

quiero que tenga ambas es overline Underline y ahí está y si quiero que tenga las tres es overline underline Line trout y ahí se pone todo pero normalmente es utilizar dos la más común es Line thr que la utilizamos para tachar texto Okay es como tachamos algo por ejemplo creamos acá un spam no un spam que está acá un spam Ahí va ponemos esto acá y acá lo que hacemos Es darle esta propiedad por ejemplo al spam y le damos esta propiedad y lo que hacemos Es tachar este pedacito de acá y le podemos Dar

por ejemplo color Brown Vamos a darle otro color también entonces Lo acabamos de tachar y le dimos otro color después tenemos una otra más que se llama blink pero esta ya no se recomienda lo que hace es titila ya quedó obsoleto no se usa Así que si en algún lado lo ven descártalo es none por lo menos para la mayoría de los elementos es none esto significa que nada none es nada quiero que no tenga no tenga decoración de Texto en este caso en este elemento sí se la voy a dejar de hecho si se

dan cuenta nosotros cuando creamos un elemento a por ejemplo vamos a crear un elemento a vamos a hacer que vaya a mi canal de YouTube https.youtube.com barsy dalto Okay acá vamos a poner canal de dalto ahí está este es el canal de alto fíjense que por defecto lo que hace el navegador es ponerle un subrayado yo puedo venir acá y sacárselo por ejemplo poner a y a los Elementos a le voy a sacar el subrayado text decoration No Y ahí acabo de eliminarle El subrayado al a y sigue funcionando Yo le doy enter y va

a mi canal de YouTube de hecho cuando nosotros trabajemos con enlaces por ejemplo cuando creemos barras de navegación si ustedes por ejemplo le dan clic acá esto que está acá es un enlace fíjense que no tienen el subrayado solo lo tienen cuando le ponemos el mouse arriba Entonces lo lo que se suele hacer Después vamos a sa ver cómo hacerlo pero cuando se le pone el mouse por encima se le agrega el subrayado es una forma en la que tenemos de modificar esta propiedad No yo en este caso lo voy a sacar porque no me

interesa tener el a ahí solamente quería que vean el ejemplo después tenemos Line hate que es básicamente Line hate Okay lo que Define es el el espaciado de la letra si yo por ejemplo vengo acá y pongo Line hte si le doy en normal Este es el valor que tiene Por defecto es como dejale al navegador que el navegador decida por vos si le das en uno Este es el tamaño que tiene es como un tamaño normal si le damos dos va a tener el doble de espacio si le damos tres básicamente es eso lo

que Define es el tamaño que va a haber Okay 1.5 por ejemplo la distancia que hay entre línea y línea fíjense que si yo selecciono esto voy a seleccionar una sola línea por ejemplo la del medio si yo acá le pongo 2.5 ahora tengo Seleccionado más si le pongo 5.5 la distancia todavía es mayor Bueno eso es lo que hace esta propiedad literalmente Define Cuál va a ser el tamaño fíjense que si le damos de hecho uno va a ser del mismo tamaño de la tipografía Entonces eso es lo que Define el Line height el

tamaño de la línea no es una propiedad del texto pero s es una propiedad que normalmente uno utiliza cuando escribe código No porque nosotros no queremos que por ejemplo esto se vea Todo junto Entonces qué hacemos la ponemos en 1.6 por ejemplo 1.4 es una un valor muy común 1.4 1.3 y ahí ya más o menos sabemos que el texto está un poquito más espaciado eso es lo que hace esta propiedad de hecho puede tener hasta porcentajes puede tener por ejemplo 10% y fíjense lo que hace tiene el 10% de una línea tenemos el 200

% Y esto es como si pusiéramos un Line height de dos después lo vamos a ver cuando veamos medidas pero nada acepta Acepta de todo dice he porque es la altura de la línea es cuánto de alto va a tener la línea bueno eso lo definimos acá pero también tenemos el espacio entre letras bueno eso lo hacemos con letter spacing de esta forma decimos Che quiero que la letra tenga por ejemplo 10 píxeles y ahí hace que todas las letras estén separadas las unas de las otras 10 píxeles yo por ejemplo acá le doy dos

píxeles y las letras se separan dos píxeles pero esto lo que hace es definir Cuán separadas van a estar las letras entre Sí de hecho hace parecer más grande a la tipografía pero no no es que la letra sea más grande parece más grande pero en realidad solamente estamos separando las letras normalmente para botones es muy usada si yo tengo un botón Button después vamos a ver cómo hacer esto pongo Hola por ejemplo ven acá tengo el botón Hola agarro el botón pongo Button letter spacing dos píxeles entonces ahí las letras están separadas Dos píxeles

después tenemos otra más que es text transform lo que hace es noone ese valor que trae por defecto no convierte ni transforma nada porque a ver si yo digo que la si yo estoy diciendo que la l de Loren va a ser mayúscula y todo lo demás va a estar en minúscula Esto va a estar en mayúscula y demás por qué vos vas a decir a mí cómo tiene que estar mi texto no entonces el valor por defecto es none Pero si yo quiero decir por ejemplo quiero que todo El texto sea mayúscula le doy

en uppercase actualizo y ahora de repente todo el texto se convirtió en mayúscula Por más que si venimos acá y vemos el código esto sigue estando en minúscula porque yo lo escribí en minúscula pero como tiene la propiedad text transform uppercase literalmente me transforma todo el texto en mayúscula y así como lo tenemos en Upper Case también lo tenemos en lower Case transformamos todo el texto en minúscula si no ponemos nada Nos va a quedar como antes que yo por ejemplo le puse la l mayúscula y la d en mayúscula pero si se lo agregamos

Ahora ni siquiera la d ni la l van a estar porque se transforma todo el texto en minúscula después tenemos una bastante curiosa que es capitalice que este es un efecto muy común que lo que hace es me pone la primer eh letra de cada palabra en mayúscula ven La l mayúscula la d mayúscula la Q en mayúscula K o sea cada vez que iniciamos una nueva palabra cada Palabra nueva le agrega una mayúscula ves Busca un espacio y al que sigue lo convierte en mayúscula Busca un espacio y al que sigue lo convierte en

mayúscula eso es una forma de verlo Yo tengo un terrible problemita si no lo habría visto de esa forma y después para los Países Árabes tenemos esto que es full withd que esto se hace en los Países Árabes que lo que hace literalmente es transforma el texto en un ancho completo pero repito no nos interesa ver eso Ahora Así que lo vamos a dejar así de hecho a nosotros ni nos afecta porque no somos de Arabia Saudita después hay una propiedad más que la vamos a ver cuando veamos sombras pero se las muestro les voy

haciendo un pequeño spoiler Le acabo de hacer un efecto de brillo Ahí está un efecto de brillo a la letra este tipo de cosas se puede hacer Igual Tex para mí queda como el queda como el culo Tex Shadow lo voy a sacar porque no me gusta nada nada pero que sepan que Cuando veamos sombras vamos a ver todo sobre sombras es una propiedad que se aplica al texto pero me parece muy pronto para verl De hecho hay otras más que me parecen bastante pronto para verlas tenemos por ejemplo Word wrap break Word que esto

lo que hace es me corta las palabras tenemos Word break break all que literalmente agarra las palabras y me las corta a la mitad ven esto lo corta con prioridad de cortarlo en una sílaba esto no Esto me lo corta Así no le no le cabe una me lo corta incluso Por más que no tenga sentido ven me lo corta así no más no me tira la palabra completa para abajo me la corta yo voy a escribir un texto para que tenga más sentido Ahí está ven pone mi queridísimo Rey si yo le sacara esto

esto que está acá me pondría todo en una sola línea mi queridísimo Rey me lo tira para abajo pero con esta propiedad me lo corta no le importa nada voy a dejar el texto de antes y vamos a borrar estas Porque por ahora tampoco vamos a ver el tema de de de esta ruptura porque hay algunos efectos especiales que se pueden hacer imagínense que están creando una red social y de repente tienen eh tienen que crear un chat no el chat se vuelve demasiado largo Entonces qué hacen cuando van a a la notificación del mensaje

usted no le pueden mostrar todo el texto al usuario qué hacen lo que hacen es agregar los tres puntitos como que es un texto largo el usuario entra Al mensaje y ahí lo puedo ver completo pero esos efectos se pueden hacer con esto pero todavía no es momento para ver Estas son las propiedades básicas de texto esto normalmente es son algunas de las cosas que le solemos dar al texto exceptuando Line hate Esto no es una propiedad de texto esto es una propiedad de la línea estamos afectando dando el tamaño de la línea porque también

es válido para cosas que tampoco son texto Pero bueno nada sacando esto todo esto Es el son propiedades que le solemos dar al Bueno ahora lo que vamos a ver justamente es Cómo crear o o traer tipografías que no están directamente en nuestro sistema integradas a nuestra hoja de estilos para poder bueno darle la tipografía que se nos dé la gana a nuestro documento html no hay dos formas la primer forma se las voy a enseñar Okay es la más fácil y muy simple y la segunda ya es un poquito más avanzada la verdad mi

consejo sería que ustedes la Vean después de ver otras cosas en el curso pero aún así la voy a enseñar si tienen los huevos así para verla buenísimo tema suyo pero voy a enseñar ambas en esta sección para arrancar una de las formas es viniendo a Google fonts buscan Google fonts entran y acá básicamente tienen un montón de tipografías para elegir supónganse que van a elegir Monserrat a mí Monserrat me encanta es una tipografía que me gusta mucho a ver si la encuentro Monserrat Acá está es una tipografía que la verdad que me gusta bastante

Entonces yo la selecciono No acá está seleccionada y yo acá lo que tengo que hacer es seleccionar la versión que quiero aunque no aparezca esto que está acá son todas Fuentes diferentes solamente que son versiones distintas de moncerrat esto es lo que yo les decía esto que está acá es el el weight esto es el grosor de 100 grosor de 200 grosor de 300 grosor 400 Esta es una tipografía que ya viene con Diferentes tipos de grosor por ejemplo También tienen por ejemplo la itálica tienen la versión italic de 400 tienen la versión italic de

600 tienen la 700 normal y la 700 con it italic 80000 normal y 800 con italic así tienen con todo la verdad que está muy bueno así que es una tipografía bastante completa supónganse que yo por ejemplo me quiero descargar esta que está acá la regular la normal le doy en Select y ahí se me va a desplegar este menú que básicamente Me va a permitir vincular a mi hoja de estilos todas las tipografías que yo quiera yo por ejemplo Quiero la regular y además quiero no una volt le doy en esta que está acá

que es extra bt le doy en Select extra volt y fíjense que acá me está diciendo e tenés la regular 4 y la extra B 800 Entonces yo qué hago con esto copio todo así le doy en lo copio es más tengo acá el botoncito de copiar vengo acá y lo pego acá arriba en html lo pego Ya tengo la tipografía que yo Quería Cómo accedo a esto porque ya está cóm tengo que escribir moncerrat o cómo hago Bueno ya la pueden usar fíjense que acá dice por ejemplo que la tipografía se llama mon Serrat

Yo vengo acá y pongo font family en vez de darle s serif le doy Mont Serrat actualizo y ya tengo la tipografía que quería Monserrat Incluso si saco esta la saco van a ver que realmente cambió la tipografía O sea la tipografía que yo quería era Monserrat Aunque no nos aparezca marcada ya Tenemos instalada La tipografía Montserrat es más la tenemos en Tenemos también la versión B si yo lo saco Ven tengo la la versión natural que es la versión que yo instalé pero después tenemos otra forma de instalar tipografías también que es una forma

por ahí un tanto más eh correcta diría yo Igualmente esto que está acá no está mal se puede hacer de esta forma pero yo recomiendo hacer la otra forma que va vamos a ver ahora que es configurar Nuestras propias tipografías lo podríamos hacer en este archivo Pero yo lo que voy a hacer es crear otro archivo para configurarlas porque si no se nos hace muy denso esto que está acá lo voy a borrar no me gusta nada voy a crear un nuevo archivo tal cual va a ser un archivo tal cual Igualito a este solo

que en vez de llamarse styles.css lo voy a llamar fonts.css por qué y porque va a almacenar tipografías voy a crear un nuevo archivo fonts pun css Acá está Para esto ojo que es un tema avanzado Okay pero básicamente esto lo que va a hacer va a ser permitirnos definir un nuevo valor para una nueva propiedad en este caso voy a escribir font Face acá me va a saltar toda la estructura Okay lo primero que me pide es que escriba en font family el nombre que voy a crear en este caso voy a hacer que

el nombre de la nueva tipografía se llame Monserrat es más Solamente para que vean que funciona le voy a poner dalto pero Podría llamarse Montserrat solo le estoy poniendo de alto Para que vean que puede llamarse como se nos de la gana para eso se lo pongo Pero lo correcto es poner el nombre de la tipografía la Ur nos pide que escribamos en dónde está almacenada la tipografía bueno nosotros lo que vamos a hacer va a ser descargarla Así que vamos a venir a Google fonts yo Esta que está acá literalmente le voy a dar

en Download family y ahí se me va a descargar completa le voy a dar en botón Derecho extraer aquí Acá tengo esto que está acá si a ustedes no les aparece la carpeta con las tipografías es porque no están prueben con otra tipografía control x para cortar vengo acá vengo acá vengo acá y las pego acá voy a reemplazar esto por fonts ahí está fonts ese el la carpeta que tiene todas las tipografías y acá si se fijan tengo todas las tipografías tengo las Black que son las más oscuras de todas tengo la extra B

tengo la light que las light Son las más finitas tengo las light italic pero yo puedo configurar todas y cada una de estas para eso tengo que venir acá y para arrancar vamos a configurar una tranquila que va a ser Monserrat regular Esta que está acá esta regular es la normal para eso voy a decirle que está en la carpeta fonts Acá está y la que voy a configurar es la Acá está voy a configurar la regular también me suele pedir el formato porque Qué pasa si yo por ejemplo acá escribo dalto Van a ver

que la tipografía de alto existe igual podría ser incluso de alto sin las comillas y me va a cargar igual pero el problema no es este el problema es que el navegador carga más rápido un archivo si sabe de entrada de qué formato es y no solamente eso esto puede hacer que navegadores que no son compatibles también nos permitan cargar la tipografía para esto dejamos un espacio y ponemos format y format va a tener el nombre del formato en este caso Ttf significa true type ahí guardamos y ahora me va a cargar de vuelta ttf

significa true type Ahora sí de esta forma acabamos de Definir la tipografía y yo lo que voy a decir como esta es regular voy a decirle que el font weg de esta tipografía Va a ser de 400 Qué significa que si yo vengo acá esta es la regular Sí y le digo que la tipografía va a ser dalto pero el font weight va a ser 400 me va a mandar a esta tipografía yo puedo seguir definiendo voy a venir Acá abajo y ahora voy a definir Otra ahora voy a definir dalto Pero esta vez no

voy a definir esta tipografía en este caso la que acabamos de definir es esta que está acá la regular pero qué pasa si yo quisiera definir una versión en negrita voy a definir esta que es la Black es la más negrita de todas Yo sé que es la Monster rat Black vengo acá y escribo Monster rat Black y acá en vez de darle F way 400 le doy en 900 porque sé que es la más gruesa Entonces ahora Sí si yo vengo acá y le digo que el fway va a ser de 90000 Adivinen me

va a poner la tipografía que establecí en 900 si le doy 800 también porque va a estar más cerca o sea esto funciona por cercanías 800 está más cerca de 900 que de 400 entonces por eso Si yo pongo eso me va a dar la tipografía que yo definí en 900 si yo pongo por ejemplo 500 se va a poner blandita por qué Porque 500 está más cerca de 400 que de 900 si pongo 700 Bueno lo mismo se va a ir para 900 Porque está más cerca de 900 que de 400 si esto Lo

sacara y actualizara no existiría pero lo tengo que dejar porque si no lo dejo fíjense que el negrita de verdad no me carga ahora si yo quiero definir otra negrita por ejemplo quiero definir otra negrita que esté intermedio Cómo hago Bueno yo voy a definir un punto medio acá en vez de la Black voy a definir extra Blood extra Blood la voy a definir y esto que está acá va a ser por ejemplo 700 Ahí está entonces si yo Ahora vengo acá y le di 700 fíjense que hay una pequeña diferencia entre 900 y 700

no se nota mucho pero si lo ven bien de cerca creo que se puede notar mejor la diferencia a ver le voy a dar en nueve ven que es un poquito más gruesa esta letra Yo le doy en siete es un poquito más finita No mucho pero es un poquito más finita después también tengo la Blood por ejemplo vamos a ver si hay otra que está Blood en vez de extra Blood debe haber otra que sea Blood sí Acá hay una que es bold yo le digo Blood pero es bold no Blood no sé por

qué le digo Blood pero B es en negrita y esta va a ser en 500 Por ejemplo ent si yo ahora vengo acá y a esto le pongo 500 está la otra tipografía que es negrita pero no tan negrita Entonces yo ya tengo varias versiones tengo la versión de F weight 400 que es esta la de F weight 500 que es esta la de font weight 700 que es esta y la de fontweight 900 que es esta que es la más gorda de todas me Falta definir una que sea finita porque si yo hasta le

pongo 100 no se me pone finita Yo quiero que sea la más finita de todas para eso definimos la light vengo acá y acá voy a poner extra light y esta le pongo 100 Entonces ahora fíjense qué finita que es extal es la tipografía más finita de todas las tipografías Entonces como es la más finita le voy a poner 100 entonces fíjense que ahora ya tengo definido Acabo de crear la tipografía dalto que Tiene el tamaño de 100 400 700 500 y 900 voy a poner la de 500 antes así vamos en orden progresivo 100

400 500 700 y 900 y ahora sí muchachos ya tengo una tipografía externa configurada puede ser de 100 400 900 500 y va cambiando dependiendo del weight que le dé acabo de configurar mi propia tipografía en este caso el nombre correcto no es dalto es Monserrat por eso mi consejo Es que le den el nombre correspondiente pero esta es la forma de hacerlo nada hasta Acá llegó esta sección la verdad que si entendieron esta sección tiren unos huevos Así de grandes porque esta es una sección avanzada que no sé por qué metí acá la verdad

no debería haberla metido pero aún así dije Bueno no está mal la voy a meter dejen de sacar de contexto lo que digo me tien El lapiz infra Bueno ahora font family puede ser dalto y cada propiedad es un archivo diferente integramos la Black la bold la extra Bold la regular y la italic configuramos cuál iba a ser el tamaño con el que íbamos a llamar a cada una de esta forma ven los tamaños y ya está tenemos listo esto de las tipografías los recontra felicito si lo entendieron si esta parte no la entendieron quédense

tranquilos de que no es necesario todavía que hagan esto es algo un poquito más avanzado por eso si no lo entendieron mi consejo es hagan simplemente esto mira hagan así cierren guarden Y olvídense de lo que Les acabo de enseñar más adelante cuando estén más avanzados en html y css vuelvan a esta sección y les prometo que la van a entender Pero si de entrada ya la entendieron porque son terribles prodigi los recontra felicito porque ya están listos para ir a la siguiente sección y estamos hablando de box model es una de las cosas más

importantes que tenemos que ver porque sobre el box model está construido todo ccs básicamente Porque todos son cajas y Tenemos que entender cómo funcion una caja que tiene cuatro propiedades principales cuando sepamos cómo dominar esas cuatro propiedades principales vamos a poder hacer magia con ccs esa sección sí que es necesaria la de recién no tanto pero ahora empieza lo importante Así que si esto no lo entendiste repito despreocupate podés continuar continuar no es algo para que te estanques no es algo excluyente lo de ahora sí así que esto hay que prestar la Atención vamos Bueno

ahora lo que vamos a ver es el box model Qué es el box model muy simple Box model significa modelo de caja en español y en realidad es un concepto no es que es una propiedad es un concepto y este concepto lo que hace es describir Cómo se diseñan y cómo se deberían poner los elementos de html en una página web es decir un elemento en una página se considera una caja rectangular de hecho lo que yo les dije Cuando arrancamos en la partecita html es que todo era un bloque no en html todo era

como si fuera una cajita Bueno eso es porque en html todo se considera una caja rectangular todo y este modelo lo que hace es definir Cómo esas cajas se dimensionan cambian sus tamaños cambian sus propiedades y demás y también Cómo interactúan entre sí imagina que cada elemento html en una página web es una caja esta caja incluye varias propiedades que definen Cómo se Muestra el elemento en la página estas propiedades son uno contenido o content el contenido es el ncle del box model básicamente es el área donde se muestra el texto Bueno también pueden ser

imágenes o cualquier otro contenido del elemento después tenemos el padding o el relleno pero todos le decimos padding que es el espacio entre el contenido y el borde del elemento este espacio aumenta el área alrededor del contenido dentro del elemento pero bajo el borde Literalmente lo que hace es separar más el contenido del borde por eso es relleno literalmente es relleno el tercero es el borde o Border es una línea que rodea tanto al contenido como el padding se puede controlar el estilo el grosor y el color del borde el borde puede ser por ejemplo

punteado puede ser un borde lineado puede ser un borde común puede ser más grueso más finito puede ser rojo verde azul y por último tenemos el margen o el margin que bueno Es el espacio alrededor de la caja que está fuera del borde este espacio separa el elemento de otros elementos en la página A diferencia de todos los anteriores el margin no forma parte de la caja lo único que hace es separar ese elemento de otras cajas Eso es todo lo que hace Okay uno se encarga de el contenido otro se encarga de la distancia

entre el contenido y los bordes el otro son los bordes y el otro es ya con toda esa cajita tenemos el Margen que es cuánto separamos esa caja de otras cajas Eso es todo bueno acá yo lo que tengo es una pequeña animación para que veamos bien cómo funciona cada cosa okay Quién me mandó un mensaje por WhatsApp la que lo recontar remil par realmente no paraba de insultar bueno acá básicamente tenemos un ejemplo de cómo cada propiedad afecta al contenido en este caso por ejemplo Así es una caja normal Okay la caja normal con

más padding con bordes y ahora con Margin y después tenemos la caja normal y ahí tenemos todo separado el contenido está en azul El padding está en en celestito y los bordes están negros V entonces este es el contenido estos son los el padding los negro es el borde y después el margin te muestra cómo se separa la caja esa de las otras cajas y al que me está mandando mensaje le voy a ir a buscar a la caja y le Met un balazo cces nada esto es una animación rápida que hice simplemente para mostrarles

y También hice otra De hecho acá también lo que se pueden fijar es fíjense que como cuando el margen aumenta ahí fíjense que cuando acaba de aumentar el margen el contenido se hizo más chiquitito bueno eso por alguna de las propiedades que vamos a ver vamos a ver todo esto porque todo esto es la forma que tenemos de crear una caja además de ese también me creé este para que podamos ver todas las propiedades que tiene tenemos por un lado el padding ven Que lo que hace es aumentar y disminuir la distancia entre el contenido

y los bordes literalmente hace eso rellena es esto que está acá esto que está acá esto que está acá y esto que está acá es Cuánta distancia hay entre este contenido y los bordes de la caja después tenemos el margin que ves lo que hace es te separa la caja de otros elementos ven eso hace el margen el margen te separa una caja de otras Esto igual lógicamente le está dando en todas Las direcciones o sea le está dando un padding hacia arriba hacia los costados y hacia abajo pero tranquilamente podría darle solamente un relleno

hacia arriba y hacia Ninguno de los otros lugares el margen podría separar la caja con lo que está más abajo o sea podría dejar Más margen hacia abajo o solo más margen hacia arriba pero en este caso lo configuré para que se pare para todos los lados iguales O sea si esto aumenta lo mismo hay más margen arriba y a todos Los costados si el padding aumenta es padding hacia arriba hacia los costados y hacia abajo acá tenemos el Border ven esto es el borde los bordes de la caja los configuramos de esta forma También

tenemos bordes radius que literalmente lo que hace es ven redondea los bordes Mientras más bordes radius hay más se redondea y esto igual des preocúpense que lo que acabo de hacer es yo creé una página que básicamente lo que hace es modifica las propiedades de css en Tiempo real esto lo hice con javascript olvídense Pero esto que está acá es como si vinieramos y escribiéramos padding dos puntos y pusiéramos un valor pero en vez de eso lo hacemos directamente desde acá y después estas dos las puse en rojo porque son propiedades rojas porque tocarlas y

tocarlas mal nos puede todo fíjense que pasa si yo por ejemplo aumento esto aumento esto y reduzco el padding fíjense ya ven como ahí está descentrado el contenido le aumento los Bordes pongo Border Box en vez de content box pongo Border Box fíjense que ahí ya veo que puede que se empiece a romper un poco ven Entonces nada estas son las propiedades de el box model que son el wid y el hate para el contenido el padding para el padding el margin para el margin el Border para el Border en este caso igual solamente es

el Border width Pero tenemos otras dos propiedades de Border que ya vamos a ver el Border radius para para el redondeo De los bordes y esto que está acá que es el box sizing que Define básicamente Cómo se van a afectar entre sí las propiedades o sea Define el ancho total el alto total etcétera esto ya lo vamos a ver también más adelante Pero esto solamente una pequeña demo que les hice para que entiendan qué es lo que vamos a ver a continuación que básicamente es esto que nos va a permitir crear todo separaciones entre

elementos más relleno hacer cajas más grandes más pequeñas Cambiar tamaño de todos la predisposición de elementos un montón de cosas que son increíblemente importantes porque son la base de todo css okay Así que tenemos que ver bien esto y lo que vamos a comenzar haciendo lo vamos a actualizar Ahí está lo que vamos a comenzar haciendo es entendiendo el Wi y el he qu va a ser muy rápido esto lo voy a cerrar y voy a volver a donde estaba antes que es esto que está acá voy a crear una nueva carpeta que se va

a Llamar wid y hate Ahí está voy a copiar los dos archivos que tengo acá y los voy a pegar acá dentro y acá le voy a reemplazar selectores por with y hate Ahí está AC voy a poner esto lo voy a borrar todo y voy a crear un elemento que este es este elemento div básicamente es un elemento que es un elemento de bloque que no tiene ningún tipo de funcionalidad solo es un elemento que divide nada más es un divisor es como crear una cajita vacía Sin nada Es solamente eso o sea si

yo por ejemplo escribo algo acá es exactamente lo mismo que si escribirá acá dentro solamente que esto es como una división un bloquecito y lo que voy a hacer va a ser esto que está acá enlazarlo con este estilo que ya tenemos acá dentro vamos a borrar todo esto y vamos a dejar solamente abierto lo que queremos que esté abierto que son estos dos archivos esto que está acá lo cerramos vo venir al costadito así puedo Visualizar esto voy a correr un servidor de vuelta acá estamos vamos a darle en Wi y he que es

lo que teníamos recién acá Está bueno yo primero voy a agarrar la caja okay Y le voy a dar una propiedad del fondo que vamos a ver más adelante no se preocupen pero se llama background voy a hacer que el fondo sea rojo para arrancar el fondo va a ser rojo por qué no estamos viendo el color rojo del fondo simple porque la caja no tiene ni ancho ni alto si le damos un Width de por ejemplo 200 píxeles tampoco vamos a ver nada Por qué Porque falta el height que es el alto Vamos a

darle un hate o sea un alto 200 píxeles actualizamos Ah qué boludo estábamos modificando el otro bueno primero voy a borrar Esto bueno ahora sí tengo el estilos de acá Bueno yo voy a darle background red esto lo que hace es agregar un fondo Ahora cuando yo escriba hte 200 píxeles ahí ya se va a tener un tamaño la caja voy a minimizarlo para Que lo puedan ver bien acabamos de crear una caja yo le puedo dar que la caja sea más ancha por ejemplo ven le puedo hacer que sea más ancha Ahí va y

la caja Ahora tiene 400 píxeles de ancho y 200 píxeles de alto yo puedo hacer que tenga 100 píxeles de alto o que tenga 10 píxeles o que tenga cinco nada más Acabo de crear una línea esto que está acá es le doy en dos ya literalmente tengo una línea acabo a crear una línea con css increíble Bueno vamos a dejar en 300 por 100 acá le voy a poner un contenido por ejemplo le voy a escribir esto y acá tenemos esto yo por ejemplo voy a poner un h1 acá Ahí va y al h1

le voy a poner un texto que se llame título básicamente lo que hace esto es permitirnos definir los tamaños yo por ejemplo al h1 ahora le voy a dar un background Blue Okay voy a hacer que el fondo sea así Pero va a tener un hate de 300 píxeles y fíjense que se lo comió completo El hate ahora es más grande entonces nada son estas Cosas que podemos modificar que de hecho De nada nos sirven si no sabemos aplicar el resto de propiedades pero nada básicamente eso es lo que hace W y hate nos definen

el ancho y el alto de los elementos yo por ejemplo puedo crear un input Okay fíjense esto un input type text acá tenemos un input que tipea texto lo ven yo por ejemplo a este input Vamos a darle input puedo venir y darle un wid de 200 píxeles y fíjense que me crece un poquito 500 píxeles y crece un Poquito 400 píxeles y lo que se suele hacer por ejemplo para crear formularios que estén adaptados a a celulares no es dar un input que tenga un wid del 100% por ejemplo ven entonces de esta forma

el tamaño va a ser siempre del total que tenga esto por ejemplo del 80% por ejemplo Entonces ustedes agrandan la pantalla la ven desde un celular siempre va a tener una resolución bastante amplia le voy dar 90 por para que quede más prolijo entonces creamos varios Inputs por ejemplo ven hasta creamos un botón Vamos a ponerle submit Ahí está hasta el botón incluso tiene esto que el botón tiene otra propiedad que vamos a ver más adelante que es box sizing Border Box que por eso justamente no tiene el mismo ancho pero lo vamos a ocultar

porque lo vamos a ver más adelante Entonces esto se suele utilizar mucho el wid y el hate para definir la medida de los elementos yo por ejemplo vengo acá y voy a poner un placeholder Contraseña no eh email acá le voy a poner del tipo email acá le voy a poner password Play holder contraseña por ejemplo entonces acá Tiene que ingresar el mail y acá Tiene que ingresar la contraseña y acá Esto va a tener un value Iniciar sesión Entonces yo lo que puedo hacer acá con todos estos input por ejemplo es meterlos ad dentro

de un formulario no vamos a poner un form y vamos a meterlos adentro de un formulario vamos a checar un poquito la Letra porque está muy grande ahí está ahí tenemos todo adentro de un formulario si yo al formulario por ejemplo le doy un wid de 300 píxeles también se achica el input por qué porque el input va a tener un 90 por de la caja contenedora si la caja contenedora tiene 300 píxeles el 90 por como input está adentro esto que está acá es definir un porcentaje de la caja que la contiene el form

por ejemplo tiene este ancho y el input tiene el 90 Por de esto el 90 por de esto es esto que está acá si el el formulario fuera más ancho por ejemplo tuviera este ancho ahora el input va a ser más grande por qué Porque el formulario ahora es más alto Entonces el 90 por de todo esto es esto que está acá esto es el 90 por de esto se entiende Entonces esto es relativo Porque si la caja que contiene a input mide 1000 píxeles y yo le pongo 90 va a ser el 90 por

de 1000 o sea 900 píxeles Pero bueno nada eso quería Mostrárselos que básicamente Wi y hate lo que hacen es determinan el ancho y el alto del elemento y si están adentro de otro elemento Y vos le das un valor en porcentajes el porcentaje es respecto a la caja que lo contiene vo decir with 50% 50% de Qué bueno quiero que tenga el 50% de ancho de la caja que lo contiene la caja que lo contiene tiene 500 píxeles Quiero la mitad la mitad es 250 Per bueno no nos vamos a enrolar tanto con esto

más adelante lo vamos a ver Mejor pero ahora tenemos que ir a ver otras propiedades que por ahora son más importantes para el box model es el modelo de caja Qué son padding margin y Border y después Box sizing que Define Cómo interactúan esas entre sí pero esas tres que son importantísimas margin padding y Border Así que vamos con la siguiente sección en la que vamos a ver juntas padding y margin y después vamos a ver Border aparte pero vamos a ver padding y margin en la próxima sección Vamos Bueno ahora nos toca hablar de

dos temas importantes que son básicamente dos de las cosas que más importan a la hora de trabajar con una caja en html y css y estoy hablando de dos propiedades que funcionan bastante parecido Solo que afectan a cosas distintas todo a la caja no estamos hablando del marching y el padding vamos a arrancar con el padding Okay que es algo Bastante interesante y ya lo hemos visto cuando vimos el ejemplo de prueba básicamente el padding Es ese espacio que hay entre el contenido y el borde de una caja es decir lo que hace es aumentar

el tamaño que hay alrededor del contenido pero adentro de los bordes es decir si yo por ejemplo escribo un texto podemos decir que Esto es lo que ocupa el contenido si yo a esto le agrego bordes así se vería la caja tenemos un contenido y bordes rojos esto no tiene nada de padding porque no hay relleno entre el contenido y los bordes no hay nada en el medio Pero si yo esto le agrego padding supónganse le voy a agregar un poco de padding así veríamos la diferencia en el elemento final es decir en un elemento

básicamente que tenemos padding como ven hay una distancia que es todo esto que está acá que es literalmente lo que les decía antes es el relleno así como los capítulos de Naruto bueno esto pero ahora en elementos html ahora fíjense que la caja que no tiene padding no tiene ningún relleno o sea no hay nada De relleno es el contenido y los bordes están pegaditos están literalmente bordeando el contenido de la caja si nosotros agregamos más padding el contenido de la caja va a estar más separado de los bordes porque realmente el contenido sigue sigue

midiendo lo mismo es decir el contenido siempre va a medir igual Solo que nosotros no lo vemos porque no lo estamos definiendo se acuerdan de este ejercicio que hice fíjense voy a hacer un pequeño margin Ahí está fíjense qué pasa cuando yo por ejemplo Tengo este sería el contenido y yo aumento el padding lo que pasa ven Es que la distancia entre los bordes y el contenido aumenta y voy a agregar más borde para que lo notemos más ven aumenta eso es lo que está pasando estamos aumentando nosotros no lo vemos pero en realidad el

contenido va a medir lo mismo No es que cambia si lo pudiéramos separar se lo mostraría pero el contenido mide lo mismo lo que está Cambiando es el padding que es el relleno Entonces el contenido mide lo mismo mide Exactamente igual que acá solo que no lo notamos porque tenemos un padding que es un relleno que hace que bueno se vea algo más estético el padding es algo muy común para cualquier cosa y es superimportante Los invito a mi primera sección de un mundo sin padding Así es la barra de búsqueda de Google con padding

Así es la barra de búsqueda de Google sin padding Así es Instagram con padding Así es Instagram sin padding y así se ve una página web linda con padding y así se ve una página web linda sin padding como ven el padding es completamente necesario porque si no tuviéramos padding la verdad que hay muchas cosas que serían una por eso es importante que cada elemento tenga su respectivo padding para que podamos hacer una web más hermosa yo para eso voy a darle en Open folder clases css y voy a crear una Nueva carpeta que se

va a llamar padding y margin le damos en seleccionar carpeta y acá estamos creamos un archivo index.html.com armamos la estructura básica como siempre borramos lo que por ahora no entendemos para que no se mareen como siempre creamos la etiqueta link para enlazar el styles.css como siempre minimizamos el explorador para que no estorbe cerramos esto como siempre y dejan like a este video no no digas como siempre sabes que no lo Hiciste nunca hacelo por primera vez Dale dale Bueno lo que vamos a hacer es crear un simple elemento div que es una división es más

vamos a mostrar y chequear el ejemplo de padding con algunos elementos Como por ejemplo un formulario y un par de input yo voy a crear un formulario Okay voy a crear un input text Place holder y acá le voy a poner email contraseña voy a hacer este password acá voy a poner seña Y por último voy a crear un input submit y Esto ya por defecto tiene el valor de enviar perfecto hasta acá estamos todo bien A este form le vamos a poner una clase formulario vamos a hacer una selección múltiple control alt y la

flechita para abajo y de vuelta la flechita para abajo y ahora podemos escribir con tres cursores al mismo tiempo vamos a darle la Class formulario gu B input Ahí estamos esto porque se me ocurrió a mí nada más ni siquiera es necesario pero lo vamos a hacer porque Está bueno que arranquemos a trabajar con clases y está bueno que dejemos de trabajar con selección por elementos ya deberíamos dejar de seleccionar elementos Así que vamos a trabajar con prácticas reales por eso lo hago si es más lindo si no le pongo clase es más lindo si

no lo hago es algo Bastante sencillo y simple de hacer pero lo voy a hacer porque está bueno que empecemos a aplicar otra forma de seleccionar elementos que es lo que tendremos que Hacer en el futuro esto que está acá utiliza la metodología bem Okay que después también la vamos a ver un poquito más adelante es bastante simple es una de las tantas metodologías que hay hoy en día existen muchas por suerte antes era la más común pero no es momento de explicarlo para eso voy a venir a Styles ahora lo que voy a hacer

es darle en Go Live para que se me cargue el servidor acá me cargó Perfecto Bueno lo que vamos a hacer ahora probar Y chequear qué es lo que sucede si le damos padding a el formulario vamos a agrandar un poquito esto así lo podemos ver mejor si yo por ejemplo selecciono el formulario punto formulario Okay Vamos a darle un background en este caso va a ser red solamente para que podamos ver el fondo como ven prácticamente el fondo no lo podemos apreciar porque como esto el contenido es todo lo que vemos que está ocupando

casi que no vemos un fondo este es un elemento en bloque O Sea que va a ocupar toda la línea y el contenido o sea el el alto del del div O sea no te olviden que estamos en un form Okay el form es un elemento en bloque y si no tuviera ningún input ni siquiera se vería el fondo porque el fondo lo podemos ver porque ahora tiene una altura lo que va a tener de alto este este elemento de bloque es lo que midan estos elementos el form el input y demás si yo por

ejemplo ahora a estos Campos les asigno un padding formulario input Padding 20 píxeles y fíjense que lo que acaba de pasar es que el elemento es como que aumentó su tamaño de una forma extraña bueno básicamente aumentamos el relleno yo le voy a dar más chiquitito le voy a dar 10 píxeles y ahí tenemos un input que es un poco más agradable y fíjense que lo que acaba de pasar es que también puedo ver más fondo porque el padding lo que hace es aumentar el tamaño de la caja Es decir me está aumentando el lugar

que ocupa la caja en La etiqueta si no tuviéramos esto fíjense que el rojo que se ve es esto pero si tenemos esto hay más rojo eso lo que hace justamente es separar el contenido de los bordes en este caso cas estamos separando el contenido de de esto que está acá el contenido sería esto de los bordes que el borde lo podemos ver Acá está bordeado en un un borde negro si yo vengo acá por ejemplo y al formulario le doy un padding de 10 píxeles Ahora podemos ver lo que está Pasando lo que está

pasando con esto es que el formulario está separando el contenido de sus bordes 10 píxeles Y ahora cuál es el contenido del formulario y son estos tres elementos estos tres elementos son parte del contenido de formulario entonces lo que estoy haciendo es hacer que se separe todo el contenido de formulario que en este caso son estos tres elementos 10 píxeles de cada lado cuando nosotros estamos poniendo 10 píxeles estamos Diciendo que va a ver 10 píxeles arriba 10 píxeles al costado 10 píxeles abajo y 10 píxeles hacia allá esto de hecho es un short hand

porque en realidad es una forma de abreviar varias propiedades yo lo que hago con el padding Yo podría decir padding top y acá le doy por ejemplo 20 píxeles y lo que va a hacer es que solamente va va a separarme el contenido del borde de arriba 20 píxeles Yo también puedo hacer por ejemplo padding bottom bottom es la dirección Hacia abajo lo que está haciendo ahora es separarme 20 píxeles el contenido con el borde de arriba y separarme 20 píxeles el contenido con el borde de abajo también puedo venir y decirle padding left dos

puntos y acá pongo 20 píxeles y ahora me está separando el contenido 20 píxeles respecto al borde de la izquierda y si ahora hago lo mismo con padding right van a ver que si yo pongo 20 píxeles ahora no lo estamos apreciando pero si tuviéramos otro Elemento ento acá lo podríamos apreciar ahora no lo podemos apreciar porque Bueno nada no tenemos nada que nos permita ver lo que está sucediendo pero lo que acabamos de hacer es separar el contenido 20 píxeles respecto al borde de la derecha entonces lo que estamos haciendo si nos damos cuenta

es darle 20 píxeles a cada lado 20 píxeles arriba 20 píxeles abajo y 20 píxeles a los costados los sh properties son propiedades acortadas por eso llaman sh Hand porque es una forma de escribir todo esto pero en vez de perder cuatro líneas de código repitiendo lo mismo qué hacemos decimos e que el padding Okay sea todo 20 píxeles y fíjense que actualizo y es exactamente lo mismo no cambió nada esto todo esto lo ahorramos y lo reducimos en solamente una línea de código muy simple que es 20 píxeles y ahí está de hecho es

bastante interesante porque el orden en el que esto va es en el sentido de las agujas Del reloj de tal forma que si yo quisiera definir un padding hacia arriba de un tamaño hacia la derecha de un tamaño hacia abajo de un tamaño y hacia la izquierda de otro tamaño fíjense lo que tengo que hacer voy a poner padding 10 píxeles hacia arriba y también puedo seguir escribiendo ahora le puedo decir hacia el costado quiero que tenga cero píxeles hacia abajo quiero que tenga 40 píxeles y hacia la izquierda 20 píxeles qué acabamos de hacer

y esto como va en El sentido de las agujas del reloj es como si dijéramos padding top 10 píxeles padding right cer píxeles en este caso no pongo píxeles porque es es bastante no se hace cuando nosotros escribimos cer0 no hace falta que escribamos la unidad de medida Por qué Porque si tenemos cer0 cer0 va a ser siempre cero cer píxeles va a ser cero 0 em va a ser cer 0% Va a ser cer 0 ex va a ser cer 0 Rem va a ser cero no importa Qué unidad de medida le demos cer0

por cualquier Cosa siempre cer0 0 * 40 es 0 0 por 10,000 es 0 0 por kilómetros es 0 0 por metros es 0 Esto es algo que matemáticamente tiene sentido y es si vamos a hacer que un valor sea cero de algo es cero absoluto Entonces es nada el cero representa la nada entonces por eso no hace falta que escribamos píxeles con cero es suficiente si cambiaría si quisiéramos poner 10 píxeles o 10 em o 10 Rem que vamos a ver más adelante las unidades de medida pero si vamos a poner Cero no importa

Qué unidad de medida sea es lo mismo así que por eso se pone cero entonces lo que estamos haciendo acá es diciéndole un padding top 10 píxeles un padding right cero también le estamos diciendo el padding bottom 40 píxeles y un padding left 20 píxeles escribir todo esto es lo mismo que escribirlo Así es decir si nosotros escribimos un solo valor le damos eso a todos Si nosotros pusiéramos solo ente esto Estamos dándole 10 píxeles a todos los lados 10 Arriba 10 a los costados y 10 abajo y si escribimos los cuatro el primer valor

es el de arriba el segundo valor es el de la derecha el tercer valor es el de abajo y el cuarto valor es el de la izquierda justamente piénsenlo en sentido de las agujas del reloj tenemos a las 12 a las 3 a las 6 y a las 9 Entonces ya sabemos que podemos utilizar esta propiedad acortada para hacer dos cosas Una para escribir todos los paddings arriba a los costados y abajo De una sola forma con un solo solo valor y ya de esta forma nos ahorramos escribir estas cuatro propiedades y darles el mismo

valor a todas la segunda forma es esta que estamos ahorrándonos darle un valor diferente a cada una es decir ahora no tienen todas 10 píxeles ahora esta tiene 10 est c está 40 y está 20 y lo podemos modificar Yo acá puedo poner 100 Ven y el de arriba el padding bueno acá lo acabo de modificar Así que lo voy a sacar y el padding de arriba me Va a aumentar a 100 pixeles le puedo poner cero y esto se queda en cero le pongo 30 y esto se me quedan 30 entonces Esto es lo

pueden probar acá Tengo 40 pero le puedo poner y abajo tiene 10 le pongo cer0 y de repente abajo tiene cer0 Entonces esto ya es como nada lo pueden ir tanteando ustedes pero que sepan que funciona así y tenemos una tercera forma de usar padding Okay que es no le damos Ni uno ni cuatro le damos solamente dos el padding vertical y el padding Horizontal básicamente así funciona css nos permite eh este short hand definir tres valores diferentes Si definimos un valor significa que eso que pusimos va para todos los lados si ponemos cuatro valores

podemos especificar cuánto va a tener cada lado y si ponemos dos estamos definiendo el horizontal derecha izquierda y el vertical arriba y abajo si yo por ejemplo acá pongo 10 píxeles 50 píxeles esto lo voy a sacar para que vean es como si pusiera padding top y Padding bottom van a tener 10 píxeles y padding left y padding right van a tener 50 píxeles de vuelta en el sentido de las agujas del reloj primero definimos el padding vertical y después definimos el padding horizontal arriba y abajo esto y a los dos dos costados esto eso

es lo que estamos definiendo ven le doy en 30 y ahí me queda cero y ahí me queda lo que tienen que saber del padding Okay es que afecta visualmente al a lo que va a ocupar la caja en el espacio total Pero lo que no cambia es el tamaño del contenido como ya sabemos el contenido va a medir siempre lo mismo lo que hace el padding es crear un espacio por sobre los bordes esto dependiendo de la propiedad que tengamos de box sizing pero ya lo vamos a ver pero nada Está interesante Esto es

lo que hace el padding Yo acá por ejemplo podría dividir los inputs y hacer un formulario estético ahora vamos a intentar hacer algo Bastante rápido con padding vamos a Agarrar este formulario y vamos a hacer que cada input tenga un W de 100% por ejemplo fíjense que ahí me está ocupando el total vamos a hacer que el padding total sea de 30 píxeles arriba y abajo me queda demasiado grande quiero que arriba y abajo tenga seis píxeles y a los costados tenga 10 entonces actualizo y ahora sí tengo un input mucho más lindo para mí

por lo menos este botón de enviar por ejemplo Me parece que queda muy feo Vamos a darle una clase especial Si yo quiero darle Dos clases a un elemento se lo voy a mostrar ahora si yo le Quisiera dar doble clase a un elemento qué hago lo separo espacio y el nombre de la otra clase formulario submit y de esta forma el elemento tiene dos clases tiene la clase input Pero además tiene la clase la clase formulario submit entonces si yo quisiera darle estilo especialmente a este input pongo formulario submit y ahora sí puedo modificarlo

sin problema Le puedo dar por ejemplo un letter pacing de dos píxeles y ahí se acaba de separar le puedo dar un text transform en este caso le quiero dar un oper Case Ahí va y se puso mayúscula por ejemplo le quiero dar un background por ejemplo red y le voy voy a dar un wid de 50% por ejemplo y ahí tengo un formulario de esta forma a los inputs lo mismo les voy a dar un background Red background y background color es lo mismo pero no no le voy a dar red le voy a

dar background Black y color red todo el color va a ser red acá también y el color del botón va a ser color White Ahí está tenemos un campo que es una porquería Pero bueno nada acá tenemos por ejemplo para enviar esto y acá le damos enviar el campo más feo y asqueroso que hay por qué y porque todavía no vimos Cómo funciona el margen todavía no entendimos de fondo no entendimos de colores Hay un montón de cosas que todavía no vimos Entonces no puedo explicárselas tampoco vimos de Colores estéticos no vimos Cómo funciona el

borde por ejemplo Porque si supiéramos manejar los bordes y el box sizing podríamos hacer que este formulario se convierta en algo muy bello tranquilos que al final estas limitaciones que tenemos ahora Porque llegamos solamente a este contenido css vamos a dejar de tenerlo Pero bueno por lo menos ya acabamos de Aprender a usar el padding que básicamente Define esto no acá le voy a dar en nueve y acá le Voy a dar en por ejemplo 12 Esto es lo que me interesa a mí me interesa entender Cómo funcionan los bordes en este caso como verán

el formulario le dimos un padding de 30 píxeles y aún así el padding que tiene acá no es de 30 píxeles vamos a darle un Wi del 90 por a esto Ahí está más fácil vamos a dejarlo ahí quiero que vean Qué pasa si yo ahora esto le agrego margen si yo vengo acá y le pongo margin y voy a ponerle margin 10 píxeles lo que estoy haciendo es Hacer que las cajas se separen 10 píxeles entre sí es decir 10 píxeles hacia arriba 10 píxeles hacia abajo hacia los costados de de hecho de esa

forma podemos evitarnos usar padding a veces si yo saco el padding fíjense que igual estamos viendo esto y si yo por ejemplo saco Esto me queda Así vamos a ver este ejemplo de otra forma Okay esto que está acá lo voy a borrar completo y esto que está acá voy a borrar el contenido completo yo acá voy a hacer Cuatro divs okay Ahí está y a todos control alt y flechita para abajo a todos le voy a poner la clase Box significa caja a todos los elementos de la clase box le vamos a dar un

background por ejemplo emplo red Okay y vamos a hacer que tengan un padding de 50 píxeles fíjense que lo que hace esto es hacerme un cuadrado solo gigante pero tranquilos pasa más que esto voye hacer que tengan un he alto 50 píxeles y un wid un ancho de 50 píxeles Vamos a darle De 150 por 150 acá como vemos tenemos cuatro cajas yo voy a cerrar voy a borrar la última porque no me interesa voy a borrar solamente la última y voy a quedarme con estas tres aunque no lo crean esto parece solamente un rectángulo

pero acá hay tres elementos si le damos en inspeccionar vamos a ver que tenemos el elemento uno el elemento dos y el elemento tres solo que al tener un fondo y no estar separados entre sí no se notan Pero fíjense qué pasa si yo Por ejemplo ahora agarro esto y le digo vas a tener un margen es decir vas a separarte del resto de elementos de la página unos 10 píxeles acá podemos notar como está sucediendo lo que les comentaba Y esto es lo que hace el margen es una propiedad que nos permite separar los

elementos lo que nosotros le indiquemos yo por ejemplo le doy 30 píxeles fíjense que los elementos se separan 30 píxeles de todo lo demás 30 píxeles hacia arriba 30 hacia abajo y Demás Lo único que hay un efecto muy común que se llama margin collapse o en este caso colapso de márgenes que si ustedes se ponen a pensar vamos a venir a Paint para mostrarlo si yo por ejemplo tengo una caja roja otra caja roja si yo por ejemplo dejo un margen de este tamaño Qué pasa la caja de abajo también debería tener un margen

de este tamaño No eso es lo que pensamos es decir si la caja tiene 10 píxeles a todos lados deberíamos tener 10 píxeles hacia arriba O sea acá acá esto que está acá es el margen acá deberíamos tener 10 píxeles esto es el doble porque tiene 10 píxeles de abajo de la roja uno y 10 píxeles de abajo de la roja dos Entonces debería tener 20 píxeles y abajo lo mismo tenemos de vuelta otros 10 píxeles no Entonces tenemos 10 píxeles acá 20 píxeles acá y 10 píxeles acá bueno Esto lamentablemente no funciona así el

margin los márgenes en el sentido vertical hacia arriba y hacia abajo se Superponen o sea el margen más grande es el que predomina es decir esto que está acá en realidad sería así entonces acá en vez de tener 20 píxeles tendría 10 píxeles no es como que los márgenes se suman entre sí sino que el margen más grande se queda acá por ejemplo si se fijan vamos a verlo en pantalla completa a cada una de estas tres cajas si se fijan yo le di un margen de 30 píxeles pero qué está pasando acá esta esto

es literalmente un cuadrado no Debería ser Así O sea acá tenemos 30 píxeles de margen y acá tenemos 30 píxeles también de margen cómo puede ser esto se llama margin collapse Qué pasa cuando Pon tenemos varios elementos los márgenes van a colapsar entre sí esto es un efecto que nos permite hacer mucho y no tener que andar calculando cosas que no nos gustan porque si esto fuera así y nosotros quisiéramos separar todos los elementos entre sí a más o menos 30 píxeles no lo podríamos hacer por qué Porque tendríamos que decirle Okay el elemento este

va a tener 10 píxeles a todos lados pero abajo va a tener cinco Porque el elemento de abajo tiene que tener cinco hacia arriba y entre los dos se suman y quedan 10 y hay que hacer cálculos matemáticos todo el tiempo entonces el margin collaps nos ahorra esta tarea y no es que se suman si una caja tiene 10 píxeles en todos lados y otra caja también tiene 10 píxeles en todos lados no es como que se superponen Y ahora la de arriba más la de abajo suman 20 ambas van a valer 10 de hecho

la caja con el margen más alto es la que cuenta es decir yo por ejemplo a esta caja que está acá no vamos a ponerle otra clase Box grande si ahora Box grande tiene un margin de 60 píxeles lo que va a pasar es que el margen de 60 píxeles es el que queda O sea no es que se van a sumar y va a ser 60 más los 30 de esta sino que va a quedar el 60 porque el 60 es el número más grande sé Que es un poco complicado de entender pero necesito

que lo vean de esta forma vamos a separarlo en dos cajas tenemos Box un Box 2 el body tiene un margin por defecto si le damos margin cero van a ver que ahora de repente ya el cuadradito se pone exactamente al borde fíjense y lo que acabo de hacer es darle a la caja uno un margen de 20 píxeles ven acá le doy de 10 acá le doy de cer0 si yo le doy de 10 aumento un poquito Si le doy 30 aumenta un poquito yo a esta Por ejemplo le saco el margin bottom de

vuelta queda así pero a la caja de abajo le puedo agarrar y decir y poner margin top o sea el margen de arriba de 30 píxeles y también se separa 30 píxeles entonces es como antes lo que podemos pensar lo que les explicaba antes era esto lo que podemos pensar es Okay si si yo le doy margen top 30 píxeles se separa de la caja de arriba 30 píxeles y si a esta le doy un margen bottom se separa de la caja de abajo 30 píxeles si A esta le doy un margin top Y a

esta le doy un margin bottom 30 píxeles deberían separarse 60 en total no porque tenemos los 30 de acá y los 30 de acá Bueno probemos actualizo y se queda exactamente igual este es el efecto que les decía del margin collapse va a tomar el margen más grande o sea si los dos son iguales se queda con el mismo pero si este le pongo 40 ahora el margen va a ser de 40 si ahora le pongo 50 El margen va a ser de 50 si a este lo igualo va a Seguir 150 ahora si este

se convierte en un margen de 60 ahora el margen más grande va a ser el de 60 la separación Total no es la suma del margen de abajo de una y el margen de arriba de otra No la separación Total que van a tener va a ser del margen más grande el navegador agarra y dice a ver esta se para hacia abajo esto y esta se para hacia arriba esto con cuál me quedo bueno me quedo con la más grande la más grande es 60 píxeles Entonces el margen total la Separación va a ser de

60 eso es lo que está pasando acá esto pasa normalmente cuando tenemos dos hijos hermanos que queremos separarlos entre sí cuando tenemos dos elementos hermanos Es decir hermanos significa que están uno consecutivo al otro Es decir son están en la misma en el mismo Rango jerárquico por ejemplo tenemos un elemento div y adentro de del div tenemos dos elementos esos dos elementos son hermanos entre sí porque tienen el mismo padre o sea están Adentro de la misma caja que los contiene en este caso es así tenemos al el body que es la caja padre Y

estos dos elementos que son elementos hermanos Pero uno de los casos más comunes es este es cuando tenemos un elemento padre dos elementos hermanos entre sí ahí es cuando sí ocurre pero para eso se le suele hacer esto venimos al Body y le damos un display Flex y un Flex Direction column y si venimos acá ahora ya dejó de funcionar el problema de Esto Justamente es que ahora tenemos a los elementos como cajas flotantes esto Ya lo vamos a ver más adelante cuando trabajemos con justamente Flex y grid Pero bueno nada no son cosas de

las que nos preocupemos Ahora solo que sepan que lo pueden hacer pero después van a verse afectado por el resto de propiedades de flexbox no Entonces eso justamente es un problema otra forma muy común que se hacía antes por ejemplo era agregarle a esto se le agregaba un padding botton Por ejemplo de un Pixel o de un padding top Entonces de esa forma como que lo afectaba o agregaba un padding a los elementos y también funcionaba un mínimo padding a los a los elementos y si tenía l padín ya no colapsaba o también se les

agregaba un borde y tampoco colapsaba pero ahora ya esto no funciona y colapsa Igual también se solía agarrar el body y al Body darle un hiden un Perdón un overflow hidden pero como ven tampoco funciona otra forma que tienen de Hacerlo es agregando un separador entre medio de las cajas que quieren separar y acá le agregan una propiedad vamos a sacarlo ahí está en vez de agregarle un overflow hidden acá esto lo agregan en el separador separador overflow hidden actualizamos y ahí se acaban de separar estos son las dos formas que hoy funcionan para separar

en este caso muy puntual los elementos yo no lo recomiendo hacer de esta forma pero tampoco recomiendo trabajar sin grid o Sin cajas flexibles Entonces al fin y al cabo Así que hay que trabajar con esto teniéndolo en cuenta que el margen colapsa y tienen que ver la forma en la que aplicar esto y utilizarlo a favor que normalmente lo utilizamos para sacarle provecho entonces nada el marching y el padding son dos propiedades muy simples literalmente agregan un espacio okay Y en el caso del padding agregan un relleno Eso es todo en el caso del

padding estamos agregando Todo este relleno que está por fuera del contenido y en caso del margin estamos agregando todo este espacio que hace que la caja ocupe más espacio pero no afecta el tamaño total O sea si la caja es de 100 píxeles la caja va a seguir midiendo 100 píxeles por qué Porque la caja mide esto esto mide 100 píxeles pero le dijimos que Tengo un margen de 10 píxeles a cada lado Entonces al tener 10 izquierda y 10 derecha ya tenés 120 porque tenés es decir tenés los 10 Píxeles de acá los 100

píxeles de acá y los otros 10 píxeles acá ahí ya tenés 120 entonces la caja mide 100 píxeles pero el tamaño que ocupa en en el la página es de 12 20 píxeles pero nada de eso básicamente el margen no muestra el color del fondo porque el margen no forma parte de la caja eso sépanlo el borde forma parte de la caja el padding forma parte de la caja el contenido forma parte de la caja Son tres propiedades que forman parte del box Model justamente que afectan al contenido si le damos un fondo y aumentamos

el padding Okay padding 100 píxeles vamos a ver que la la caja va a contener ese padding y el fondo va a verse también afectado por ese padding pero si le damos un margin de 500 por ejemplo margin general de 500 le da igual le damos un margin de 200 para que sea mejor no cambia nada el tamaño no cambia solamente cambia el borde la separación entre otros elementos y este Nada más ahora lo que tenemos que ver justamente son bordes así que bueno nada voy a dejar de hablar y vamos con la sección de

bordes tranquilos como dije que al final de esta sección de css vamos a ver cómo crear una tarjetita personalizada igual como ya saben se pueden quedar tranquilos porque al final de este curso tenemos un apartado para hacer un montón de ejercicios esto simplemente para reforzar conocimientos y para ir afianzándose para que cuando Lleguemos a la el ejercicio a todos los ejercicios finales no nos comamos el bajón de no entender mucho vamos a ir teniendo práctica porque ya habremos hecho ejercicios en el medio entonces por eso quería hacer un ejercicio cuando terminemos esta sección de css

y otros ejercicios a medida que vayamos avanzando en el curso Así que seguramente nada les va a gustar eso porque van a salir incluso antes de llegar a apartado avanzado ya sabiendo Cómo hacer muchas cosas entonces por eso me gusta hacer ejercicio pero bueno nada no voy a hablar más vamos con la sección de bordes bueno Ahora quiero la verdad antes de continuar se me ocurrió yb vamos a ver bordes pero se me ocurrió hacer un mini mini ejercicio para que después cuando terminemos el apartado de css básico hagamos dos cosas Una es agarrar lo

que hagamos ahora y mejorarlo con lo que aprendimos y otra es hacer Otro ejercicio pero por lo menos para que sientan que algo podemos ir haciendo y ya que estamos en marching quiero mostrarles otra forma también de centrar elementos que es muy poderosa que es usando margin auto Así que ahora vamos a ver lo voy a abrir completo Voy a entrar y crear una nueva carpetita que va a ser e ejercicio Okay es una carpeta adentro de la carpeta voy a crear Index html voy a cerrar todo lo anterior lo cierro a la y acá

dentro también creo un Styles.css voy a dejarle el styles.css Ahí está cierro esto y ahora sí ya tenemos esto perfecto voy a correr el servid el servidor así podemos ver los cambios en tiempo real ahora lo que voy a hacer es crear justamente un div la clase Card Así que lo que voy a hacer es crear una tarjeta voy a crear un h1 por ejemplo Lucas dalto vamos a venir acá abajo poner un h2 que va a ser un subtítulo por ejemplo programador y desarrollador web y acá voy a poner un Párrafo que va justamente

tener lo que hago Vamos a darle un lorem en este caso Vamos a darle control shift p Word wrap y hasta acá quedamos perfecto vamos a agarrar esto y hacerlo muy estético para eso voy a seleccionar la tarjeta Card y le voy a dar un fondo Vamos a darle un background le vamos a poner color coral al Body Te juro que así no se da color las cosas pero no quiero utilizar el rgb para no asustarlos vamos a darle un background Black a esto Entonces ya nos Queda esto así hasta acá Venimos bien Vamos a

darle al Body un font family sanif Por qué no acá tenemos esto bastante simple y vamos a hacer que todo tenga un color White Vamos a darle al Card text align Center Ahí está estamos con todo centrado fíjense Qué pasa si a la tarjeta Vamos a darle un vamos a hacerlo más chiquito porque está muy grande vamos a ver qué pasa si yo por ejemplo a esto le doy un wid de 400 píxeles porque no quiero que tenga más Que 400 píxeles perfecto lo tenemos acá la vamos a trabajar acá en 400 píxeles ahora al

h1 le quiero dar un padding top de unos 10 píxeles así estamos un lo tenemos un poquito más para abajo perfecto y al h2 le quiero dar un font size de unos 20 píxeles no 18 píxeles Ahí está de hecho me sigue quedando grande deberíamos hacer más chiquitito todo vamos a hacer que esto tenga 300 píxeles Ahí está vamos a agrar un poquito esto Ahora sí vamos a hacer que Esto tenga menos menos 14 píxeles hacer esto que sea un poquito más grande todavía ahí está voy a poner programador y youtuber así me entra Ahí

va programador y youtuber y al h1 le vamos a dar un font size de unos 22 píxeles Ahí está al h2 lo vamos a hacer finito font weight le vamos a dar 100 Porque queremos que sea finito nos parece malo si no y un letter spacing de dos píxeles ahí me quedó un poquito más separado bien al párrafo le vamos a dar un font Size de 11 píxeles Por qué no es más más chiquitito 10 píxeles más chiquitito 9 píxeles Ahí está pero quiero que todavía esto sea más alto Me parece muy ancho todo para

eso voy a todavía encoger más esto ahí está el h2 lo encogi un poquito más al h1 Vamos a darle un margin cero Ahí está no No necesitamos margin en el h1 y al párrafo le vamos a dar un padding de 20 píxeles a ver qué pasa y ahí se nos acaba de crear esto que está acá le vamos a dar un background Background light coral que es un diferente se diferencia bastante de esto y acá básicamente el dalti te cuenta un poco sobre el dalti vamos a duplicar el texto esto le vamos a poner

justify text Alin justify vamos a agregarle más texto Ahora sí fíjense okay que acabamos de crear una tarjeta personalizada esto que está acá es una tarjetita de presentación Quién es Lucas dalto no es programador y youtuber y acá lo tenemos al dalti describiéndose a sí mismo para Sentrar esta tarjeta fíjense Qué buena técnica podemos usar usamos un margin y escribimos auto actualizamos y se centra se acaba de centrar esto el margin auto lo solemos utilizar mucho para centrar horizontalmente los elementos Por qué Porque el margin auto lo que hace es centrar horizontalmente a lo ancho

del total a ver si el body tuviera un wid del 80% fíjense que se nos va a centrar hasta acá por qué Porque el wid el body tiene un wid más chiquitito pero Nosotros normalmente tenemos el body que ocupa el total del ancho Entonces eso ni se preocupa es lo mismo vieron el textal in que como ya vimos el textal ling lo que hace es centrar dentro de todo Su contenido o sea dentro de todo el ancho disponible que tiene el contenido el Center es al centro el left es al a la izquierda y el

right es a la derecha bueno el margin auto funciona igual si tenemos un contenedor que es así el margin auto lo centra a la mitad Exactamente ahí si el contenedor fuese un poquito más chico básicamente Lo pone a la mitad del contenedor siempre si el contenedor todavía es más chiquito es así por ejemplo de vuelta lo va a centrar a la mitad siempre lo centra a la mitad y ahora por ejemplo lo que voy a hacer es a esta Card darle un margin top solo el margin top de 20 píxeles y ahora sí tengo mi

tarjeta de presentación terminada entonces acabo de presentarme de una forma bastante linda Y estética esto es recontra mega remil hiper básico Pero lo podemos hacer mejor si tuviéramos por ejemplo una imagen más adelante vamos a ver cómo trabajar con imágenes porque en ccs se utiliza mucho para dar estilos de ciertas formas Pero esto es lo que después vamos a personalizar y nos va a quedar muy estético pero primero necesitamos hacer otras cosas necesitamos aprender sobre bordes necesitamos aprender sobre sombras necesitamos aprender también Sobre colores para poder darle buenos colores a esto y de unidades de

medida y ya con eso gente no nos vamos a preocupar más vamos a venir a esto y hacerlo mucho más lindo y este va a ser nuestro primer elemento que construyamos con html una especie de tarjeta de presentación Así que ahora sí vamos a ver bordes Bueno lo que vamos a ver ahora es la propiedad Border esta propiedad básicamente nos permite modificar tres Aspectos fundamentales de los bordes el primero es el tamaño Sí todo los bordes tienen un tamaño Bueno este tamaño es el que nos permite modificar la propiedad Border wid después también podemos Modificar

el estilo puede ser un bordeado de líneas puede ser un bordeado de puntos puede ser un doble borde es decir el estilo del borde esto se define con la propiedad Border Style Y por último podemos Modificar el color pues naranja azul verde o del color que Querramos todo eso de la propiedad Border Okay después tenemos otra propiedad aparte que también nos permite Modificar un aspecto muy puntual del borde que son los redondeos Border radius es una propiedad que nos permite redondear las esquinas de un elemento todo esto es lo que podemos hacer cuando trabajamos con

bordes para comenzar yo voy a venir acá y ya lo hice por ustedes no les voy a romper los huevos para que ustedes vean cómo ando creando todo el Tiempo nuevos elementos de hecho ni siquiera se lo voy a decir esto lo voy a hacer yo internamente siempre cada vez que inicio una clase ya voy a tener creada la carpeta con el índex y la hoja de estilos en este caso creé la carpeta bordes y adentro de bordes Tengo estos dos esto háganlo ustedes también yo ya no se lo voy a comentar más Solamente lo

voy a hacer y así va a quedar en este caso tenemos justamente ya todo preparado tenemos el título bordes y lo Que voy a hacer va a ha ser crear un simple divisor que va a tener un contenido va a decir hola en estilo vamos a agarrar ese divisor y ponerle un background Red si lo corremos vamos a tener esto le voy a dar un wid de 200 píxeles Ahí está un margin auto Ahí está y un text align Center bien acá tenemos nuestro super Hola Voy a hacer un pequeño zoom un poquito más y

le voy a dar un wid de 150 píxeles mejor acá tenemos lo que queremos tener la Propiedad Border lo que nos permite definir voy a volver a modificar este div más que nada para que lo tengamos separado Esto no se hace se suele dar todo dentro del mismo selector dentro de la misma regla pero aún así vamos a dárselo aparte solo para que nos enfoquemos en Border esto que está AC lo voy a minimizar y ahora sí ya podemos concentrarnos voy a venir más para abajo lo que voy a hacer es utilizar la propiedad Border

with okay Y acá le voy A dar por ejemplo cinco píxeles actualizo y parece que en realidad nada cambió Pero por qué nada cambió y porque no tiene un color el bord todavía no definimos Cuál va a ser su color Entonces yo acá voy a poner Border color y le voy a dar por ejemplo black actualizo y ahora aunque no aparezca el elemento tiene un Border Black Por qué no lo estamos viendo simple todavía tampoco definimos el estilo del elemento para eso tenemos que decir Border Style El estilo del elemento va a ser solid un

borde Sólido y ahora que tenemos estas propiedades definidas ya vamos a ver correctamente los bordes Yo acá por ejemplo si modifico el wid van a ver que puedo modificar el tamaño ven Mientras más le sumo más aumenta el borde del elemento Entonces eso es lo que sucede Yo utilizo un borde y se bord el elemento lo voy a dejar en tres píxeles después tenemos el color Yo acá le puedo dar por ejemplo en Blue le puedo dar en Red también y parece que forma parte del elemento pero en realidad es un borde le puedo dar

White y pasa lo mismo pero a la inversa parece que ahora la caja es más chica le puedo dar en Orange por ejemplo y me quedó naranjita le puedo dar en Green me queda verde y después tenemos solid en solid la realidad es que la mayoría de veces que usamos la propiedad bord Style directamente lo dejamos en solid porque los demás son todos un asco pero Se los voy a mostrar Para que los vean No usted tienen que entender que muchas de las cosas que vamos a ver en css existen pero no se usan como

muchos tipos de sombra solamente hay un tipo de sombra que se suele usar las demás por ejemplo casi no se usan hay un tipo de Border que se suele usar que es este los demás casi no se usan pero Se los voy a mostrar tenemos el daset por ejemplo que ven hace este efecto pero díganme qué página web vieron con este efecto ninguna Ni Tampoco la van a ver tienen la otra que es Double e tiene como un doble borde tenemos Grove que lo que hace básicamente es es el que tienen los inputs por decir

de alguna forma pero tiene esto que está acá tiene este efecto bastante extraño le voy a dar de C para que lo puedan ver Esto es lo que hace Este es el efecto del Group lo voy a checar un poquito nos faltó dotted que dotted es de puntitos ven es un fondo de puntitos y el otro es hidden que hidden Nos oculta el borde Pero sigue existiendo hay borde pero está oculto para cuando decidamos llamarlo pero es diferente poner hiden que básicamente el borde deja de afectar al flujo del elemento ya O sea no no

forma parte del tamaño mientras que si por ejemplo acá ponemos solid por ejemplo o lo que pongamos acá ponemos transparente ahora el borde ya no va a estar afectando a la aspecto visual Pero va a seguir existiendo porque si esto lo reducimos El borde Sigue estando ahí solamente que ahora ven el borde es transparente no tiene color vamos a dejarlo de vuelta esto en cuatro en Black y después tenemos otra propiedad que se llama Border radius que Border radius es una propiedad que nos permite decidir cuánto queremos redondearlo lo más común es darlo o en

porcentajes o en píxeles yo por ejemplo quiero que esto se redondee cinco píxeles fíjense como se me acaban de redondear los bordes quiero que se Redondee ocho píxeles se acaban de redondear los bordes esto es muy común por ejemplo para redondear bordecitos y que no queden tan brutos por ejemplo cuando estábamos haciendo la tarjeta de presentación tranquilamente podríamos haber redondeado esto lo voy a poner en transparent podríamos haber redondeado por ejemplo unos seis píxeles los bordes de las esquinas para que la carta de presentación no se vea tan bruta y se podría haber hecho sin

ningún tipo de Problema otra cosa que se suele hacer por ejemplo es si le dan un 25% de redondeo pasa esto si le dan un 50% de redondeo pasa esto y yo le dira 1000 píxeles pasa esto la diferencia cuando ustedes dan porcentajes es que el estilo de redondeo es Dif diferente porque no solamente están redondeando los bordes sino que están yendo más allá ven Yo acá por ejemplo pongo 20 píxeles y no pasa nada pongo 200 píxeles No pasa nada pero si pongo 10% ven Lo que pasa es que se Redondea de otra forma

bastante particular la forma en la que se redondea son dos formas diferentes Si nosotros tenemos una caja okay Si usamos una forma común de redondear la caja lo que hace es un redondeo de forma cuadrado lo que hace la propiedad Border es como partir el elemento a la mitad lo parte a la mitad crea cuadrados en las esquinas cuadrados que son perfectos cuadrados Ven cuadraditos y lo que hace es redondear esos cuadrados Entonces nos Quedaría así el borde Y esto es lo que tenemos Cuando tenemos un elemento que tiene un borde radius en píxeles pero

si nosotros lo que hacemos Es darle un Border radius en porcentajes el cuadrado no está acá la pancita se va a formar hasta acá así funciona cuando le damos en porcentajes ven si por ejemplo Yo acá le doy 50% fíjense que lo que está haciendo acá es se redondeó acá porque es como si la cajita la tuviéramos así y de la parte de arriba se redondeó así de Esta parte se redondeó así y de esta esta partecita se redondeó así pero si le damos con píxeles 100 píxeles acá se crean como cuadraditos ven un cuadradito

acá y se redondea en este cuadradito otro cuadradito acá y se redondea en este otro cuadradito otro cuadradito acá y se redondea en el cuadradito y otro acá y se redondea el cuadradito básicamente es Dónde está el principio del redondeo Y dónde está el final cuando nosotros usamos píxeles el Principio del redondeo es acá y el fin es acá Entonces estos son los principios y estos son los finales estos son los vértices sobre las que se redondea mientras que cuando usamos porcentajes es este que es la mitad del elemento son los vértices donde se redondean

Okay entonces uno redondea de acá a acá otro redondea de acá hasta acá Esa es la diferencia buen ya está creo que quedó bastante claro soy demasiado rebuscado en fin acá el borde radius lo vamos a Dejar de seis píxeles Es muy normal dejar cuatro píxeles en los bordes para que tenga un mínimo bordeado Ahora yo les expliqué otra cosa yo dije que les iba a enseñar usar la propiedad Border no Border Wi Border color Border Style y Border radius Border radius funciona aparte Pero hay una propiedad que nos permite reemplazar estas tres así como

padding reemplaza padding top padding right padding bottom y padding left cuatro propiedades en una la propiedad Border así Border reemplaza estas tres de acá lo primero es el Border wid en este caso es tres píxeles lo segundo es el estilo en este caso es solid y lo último es el color en este caso es black si yo borro esto de acá arriba tengo exactamente lo mismo Border es una propiedad que el primer parámetro que le tenemos que pasar el primer argumento que le pasamos el primer valor es el tamaño el wid el segundo valor es

el estilo el Style y el tercero es el color Entonces borde tamaño estilo y color y ya de esa forma nos ahorramos todo lo otro y si queremos modificar solamente una de esas tres lo hacemos en el futuro agarramos bajamos y decimos Bueno quiero modificar ahora el tamaño Border wid quiero que tenga 10 píxeles y es lo mismo nos queda con el estilo Sólido y con el color Black pero estaríamos modificando solo el tamaño o también podemos modificar solamente el estilo dejamos el tamaño pero decimos Border Style dashed por ejemplo y nos queda este estilo

o también podemos modificar por ejemplo el color y ahora de repente el borde es no sé Blue y de repente se pone el borde azul entonces podemos modificar cualquiera de estas borde radius sí es aparte es decir es una propiedad que funciona aparte de hecho supónganse que yo solamente quisiera que exista un borde arriba por ejemplo arriba solamente Esto es algo muy usado yo lo uso mucho le digo nada más en vez De Border digo Border top y de esta forma fíjense que hay solamente un borde arriba voy a hacer un pequeño zoom acá para

que lo vean el borde ahora está arriba puedo decir Border left y solamente el borde está de costado puedo decir Border bottom Y tenemos el borde abajo o puedo decir Border right Y tenemos el borde a la derecha Esta es otra forma de definir bordes Por qué Lamentablemente con la propiedad Border solamente no podemos hacer esto así Miren no podemos venir y poner así y que de repente Yellow y que se definan todos los bordes no no se puede así como lo hacemos con padding esto no se puede porque estaríamos definiendo tres propiedades coma otras

tres propiedades no se puede entonces para hacerlo si queremos definir solamente el borde de uno de los lados Bueno lo mismo Border top y Border top es un shh también para que no tengamos que escribir Border top with cinco píxeles Border Style solid Border color Blue por ejemplo Ah perdón Border Style quise decir Border top Border top color Ahí va y fíjense que esto que está acá me está definiendo Solamente el tamaño o sea el ancho del borde de arriba el estilo del borde de arriba pero también puedo venir acá y decirle ahora el Border

bottom que es el borde de abajo va a tener un wid de dos píxeles el Border botton va a tener un Style dashed y el Border color va a ser shellow por ejemplo ven pero bottom Color Ahora sí entonces de esta forma estamos modificando estas tres propiedades de Border top estas tres propiedades de Border bottom cómo lo puedo simplificar esta la simplifico así Border top 5 píxeles solid Blue y esto lo borro y me queda exactamente igual y esta la puedo simplificar Border bottom dos píxeles dashed shellow esto que está acá lo borro y me

queda exactamente igual y de esta forma con estas dos líneas me ahorré todo lo otro ahora si Nosotros queremos que el borde sea Exactamente igual el de arriba el de abajo y el de los costados ahí sí usamos Border y ahí todos los bordes son exactamente iguales Ah otra cosa lógicamente también podemos Modificar el Border radius de un lugar por ejemplo Border radius tenemos por ejemplo el Border top left radius No acá le podemos dar por ejemplo 20 píxeles y lo que hace es crea el borde de arriba a la derecha tenemos el Border top

right que esto lo Que hace es el borde de arriba a la derecha o sea este es el borde de arriba a la izquierda Este es el borde de iba a la derecha acá por ejemplo le puedo dar 10 píxeles y ahí se me redondea menos después tengo el Border bottom left radius AC por ejemplo le pongo dos píxeles y este es el borde de abajo a la izquierda y después tengo el mismo pero el de la derecha Ahí está y ahora lo voy a poner por ejemplo de 10 píxeles Entonces ya tengo con estilo

el borde de Arriba a la derecha el borde de arriba a la izquierda el borde de abajo a la izquierda y el borde de abajo a la derecha si quisiéramos simplificar todas estas propiedades por de radius ya saben esto funciona en el en el sentido del reloj el primero si hacemos así es como padding se le da a todos los lados si ponemos solamente dos por ejemplo esto funciona en diagonal o sea el primer valor les afecta así en diagonal o sea el que está arriba a la izquierda y Abajo a la derecha y el

segundo valor les afecta en la otra diagonal o sea el que está abajo a la izquierda y arriba a la derecha Entonces el primer valor está en la propiedad verde y el segundo valor está en la propiedad rosa es decir este 10 píxeles es este que está acá y este que está acá y el 50 píxeles es para este que está acá y este que está acá y si quisiéramos darle uno a cada uno hacemos lo mismo yo por ejemplo AC voy a poner Cero píxeles en este caso queda Mejor poner cero y acá voy

a poner dos píxeles y fíjense que es lo que acaba de hacer esto el primer borde que modifica es el de arriba este de acá el segundo borde que modifica 50 píxeles es este grande que está acá el tercer borde que modifica cero es este que está acá y el borde dos que modifica el más el otro chiquitito es este que está acá que apenas lo vemos pero está modificado Vamos a darle cuatro para que se note un poquito más ahí está entonces también Funciona en el sentido de las agujas del reloj mi consejo como

les dije es que ahora prueben terminen este video terminen esta sección no el curso como tal porque es como mamá voy a ver un video antes de irme a dormir Está bien hijo anda ver el último video pero después anda la cama el último video no no cuando me refiero a terminar el video me refiero a terminar esta sección ahora yo ya terminamos Y eso es lo que las tareas que les dejo prueben con Border Radio prueben con Border top con Border bottom o sea se puede hacer magia los bordes tienen un montón de propiedades

pero las más importantes que simplifican todo son Border y Border radius en estas englobamos todas las demás y si queremos personalizar algo puntual con Border radio ya lo podemos hacer desde acá no hace falta que pongamos Border left color Lo acabamos de ver recién y con Border podemos poner Border top por ejemplo Border Button por ejemplo que Estas sí son propiedades diferentes Aunque afecten a lo mismo son se escriben diferente una cosa que yo suele hacer mucho es poner bordes arriba Okay y bordes acá esto es muy bueno lo uso mucho ya vamos a ver

más adelante Pero bueno De hecho si ustedes Ven por ejemplo y creeran un input V vamos a crear un input acá estamos vamos a sacar el div fíjense que el input por defecto trae sus propios bordes yo escribo acá y el input tiene bordes yo al input le Puedo sacar por ejemplo Border none si yo no quiero que tenga bordes escribo none bueno acá porque es un div vamos a sacar todo esto y vamos a poner input ahora sí Border n y fíjense que le acabo de sacar los borders al input Por más que cuando

pongamos el mouse encima haga un una especie de efecto que tiene bordes esto no tiene bordes ahora podemos personalizar el input de una forma muy linda miren Cómo podemos personalizar el input ahora que Aprendimos a hacerlo dos inputs l holder email password esto es solamente un ejemplo ahora ya lo vamos a ver mejor voy a poner un margin de cinco píxeles por ejemplo ahí se separaron los inputs entre sí voy a darles un padding de seis píxeles 9 píxeles Ahí está voy a darles un Border n para ocultar el borde y después voy a hacer

que solamente se pueda ver el borde de arriba Border top un Pixel solid y Black por ejemplo y ahí tenemos solamente el borde de arriba y a Esto le vamos a dar un background por ejemplo background fíjense que ahí tenemos el input personalizado escribimos y acá lo tenemos de hecho Quiero un color más clarito todavía Ghost White ahora sí no se nota mucho pero el input no es del todo blanco no no me gusta mucho vamos a hacerlo de vuelta White Smoke ah a mí me gusta mucho más fíjense ahí tenemos dos input que son

muy lindos de hecho fíjense este efecto vamos a venir acá y vamos a darle Al Body un background color Black al input le vamos a dar un background transparente Ahora sí un Border top White blanco también un Border left Border left un Pixel solid White ahí tenemos borde de arriba y de abajo por ejemplo o también se le puede poner solamente un borde de abajo por ejemplo Border bottom y ahí tenemos un borde abajo esto también se suele hacer mucho y le damos un color por ejemplo un Green Yellow y escribimos acá y fíjense este

Input es un efecto muy lindo este de hecho fíjense esto podemos poner el borde de este color también Green Yellow Green Yellow tenemos el el formulario de esta forma ven así tal cual y cuando venimos y escribimos Ahí está y ahí nos queda esto es un efecto bastante copado que solamente lo hacemos con borde fíjense Qué interesante o Es más yo puedo a esto darle un bord radius de cinco píxeles y fíjense como el input tiene este efecto que están viendo acá Tiene como un mini relieve el input esto también lo podemos ver a mí

esto ya no me gusta pero se puede hacer ahora vamos con la siguiente sección que es una sección muy importante y estoy hablando de Box sizing que básicamente nos va a permitir determinar la forma en la que cada elemento cada cada componente de la caja el padding el borde el contenido y el margin van a interactuar entre sí esto es importante porque vamos a ver cambios en la forma de trabajar con la Estructura o darle propiedades al elemento porque ya vamos a ver no voy a hablar más así que vamos ahora sí con Box iing

que es la propiedad que nos permite definir muchas cosas sobre el modelo de la caja tiene dos valores nada más Pero tenemos que entenderlos así que vamos bueno a ver el box sizing Okay es una propiedad de ccs que normalmente la utilizamos para afectar Cómo funciona el modelo de caja predeterminado en este Caso a ver básicamente el modelo de caja es como los navegadores calculan el total del tamaño de un elemento est ya sabemos que incluye el padding el bord el contenido etcétera ahora nosotros nos preguntamos para cómo es esto de calcular el total del

tamaño de un elemento bueno simple imagina que tenés una caja en este caso es un elemento en tu página web esa caja está compuesta por varias capas el contenido el padding el borde y el margen hasta acá ya Sabemos todo Ahora imagínate que le pedes al navegador que te calcule el tamaño total de tu caja tenés dos opciones principales la primera es el content box Este es el modelo de haa tradicional y es el que viene por defecto en todos los navegadores en este caso el tamaño que le das a la caja solo se aplica

al contenido si decís que por ejemplo tu caja va a tener 100 píxeles a lo alto y a lo ancho eso significa que solo para el contenido va a tener esas Medidas si añadís relleno borde y margen la caja crece más de esos 100 píxeles es como si añadiese capas adicionales a la caja original a haciéndola todavía más grande después apareció una nueva forma de medirlo que es no nos vamos a posicionar ni en la segunda capa que sería la del padding ni tampoco en la del margen nos vamos a posicionar en la capa del

borde cuando elegís la propiedad Border Box estás diciendo he navegador el tamaño que te doy para la Caja incluye el contenido el relleno y el borde pero no el margen esto es como tener una caja de tamaño fijo si la caja es de 100 píxeles se va a mantener 100 píxeles sin importar cuánto relleno o borde le pongas el contenido se va a ajustar dentro de esta caja fija es Como si tuvieras una caja con un tamaño externo definido y todo lo que metas adentro en este caso el relleno y el borde tiene que entrar

dentro de ese espacio fijo pero básicamente es eso Si Nosotros definimos el alto y el ancho por como viene por defecto o sea en content Box cuando agreguemos padding bordes y demás la caja va a seguir aumentando el tamaño cuando lo hacemos con Border Box Esto no es así tieneen que ajustarse ahora vamos a ir viendo bien con un ejemplo claro yo acá por ejemplo voy a crear un div voy a poner la clase Box o caja y acá voy a poner Wi 100 píxeles 100 píxeles background red vamos a hacer dos cajas más fácil

vamos A crear dos y esta vamos a poner dos eh clases la primera va a tener Box Box default y el segundo va a tener Box Box New o en este caso sería New Box Pero bueno vamos a dejarle Box New porque sí ahora tenemos dos clases en este caso cada caja tiene esto esto ya lo sabemos Vamos a darle un pequeño margen de 10 píxeles así por lo menos están separadas un poquito al Body Vamos a darle un margen cero para que no intervenga y ahí sí ya tenemos todo perfecto si yo por Ejemplo

agarro la caja default y le doy un padding por ejemplo de 30 píxeles fíjense que la caja acaba de aumentar su tamaño si le doy un Border 5 píxeles solid Black sigue aumentando el tamaño acá le vamos a dar un pading de 25 para que no se nos vaya tanto y acá un Border de 10 fíjense que el tamaño aumenta es decir en el primer caso tenemos el contenido más esto y si yo le dije Che yo quiero que tenga un largo y un alto de 100 píxeles Pero esto claramente no Mide 100 píxeles la

primer caja mide 169 píxeles casi 170 píxeles por casi 170 píxeles mientras que la caja dos mide lo que le dijimos 100 píxeles por 100 píxeles lo que vamos a hacer ahora es agarrar a la caja nueva y vamos a decirle que va a tener un Box sizing Border Box esto lo que está haciendo es decirle Ahora quiero que te estires en el padding y después te tires hasta el Border o sea ahora el padding y el Border forman parte del tamaño total Qué Significa esto que si le doy exactamente las mismas propiedades que acá

fíjense que es la misma propiedad pero Miren lo que está pasando acá acá lo que sucede es que le di las mismas propiedades solamente que como esta propiedad es nueva vamos a achicarla un poquito para que se vea mejor si yo le sacara Border Box la caja se hace más grande si lo achicar No qué está pasando acá Bueno muy simple yo por ejemplo le vo a dar botón derecho inspeccionar para que lo Entendamos y lo que está pasando Es que en este caso la primer caja que usa el tamaño tradicional para definir el tamaño

de la cajas tiene 169 a pesar de que le dijimos que queríamos que tenga 100% mientras que la segunda caja mantiene el 100% Esto es lo que hace Border boox esta nueva forma No no no es nueva revieja pero digo esta forma esta forma moderna de utilizar el cálculo del tamaño de caja no De hecho si venimos para acá bajemos un poquito acá estamos Diciéndole Ey el contenido lo vamos a ajustar antes cuando nosotros decíamos que va a ser 100% nosotros qué hacíamos decíamos solo el contenido va a ser 100% por eso Si venimos acá

vamos a ver que acá Cuando definimos esto estamos definiendo esto O sea que si la caja tiene 25 píxeles se va a seguir sumando si los bordes tienen más se va a seguir sumando esa la picardía que tenemos cuando estamos utilizando Este modelo antiguo que por defecto es como si Pusiéramos Box sizing con content Box lo que hace es eso es decirle Ey cuando yo defina el ancho y el alto solamente lo voy a definir para esta sección para el contenido todo lo que siga después el padding el Border y el margin van a seguir

sumando bueno el margin no forma parte del del del espacio que ocupa la caja pero no forma parte de la caja como tal siguen ocupando espacio o sea el total de la caja va a ser más fíjense que la caja como dije mide 169 mientras Que la otra el Border Box lo que hace es decirle Ey Por favorcito si yo te pedí que tengas 100% 100 podrías hacer que el contenido se adapte para que funcione y de esta forma en lugar de que el contenido sea 100 fíjense que si yo le saco esto vamos a

sacarle esto Ahí está en acá en Box New ahora va a seguir siendo de 100 Pero por qué porque no tiene nada no tiene nada entonces no le afecta porque el tamaño total del contenido es de 100% todavía pero si yo A esto de repente le agrego el padding 5 píxeles fíjense que ahora me acaba de cambiar de repente el contenido se tuvo que adaptar hizo un cálculo automático ahora sabe que si el padding es de 25 en cada lado para que el tamaño total de la caja ha sea de 100 que es lo que

le pedimos acá va a tener que hacer que el contenido sea de 50 por 50 Border 5 píxeles en este caso 10 píxeles sera solid Black fíjense que ahora se adapta a esta medida porque dice ey si yo Quiero que el tamaño total de la caja incluyendo Border padding y contenido sea de 100 tengo que hacer que el contenido mida Esto entonces lo que hace es ajusta el contenido para que si le sumamos el padding y el Border el total sea lo que definimos acá esto no facilita un montón de problemas incluyendo por ejemplo tener

que andar calculando a cada rato las cajas Porque si nosotros decimos Che esta caja tiene que medir tanto le vamos a agregar un Margin un Border y demás es incalculable no podemos calcular cuánto va a medir tenemos que sumarle por ejemplo okay O sea que si yo quiero que tenga 100 píxeles y le estoy agregando 25 de margen tengo que dejarlo en 50 porque 50 + 50 es 100 entonces tengo 25 de un lado 25 del otro más 50 o sea Ahí me da 100 Ah pero tengo tengo de bord de 10 o sea que

tengo que dejarle 30 30 y 30 porque si son 10 de un lado y 10 del otro son 20 entonces Y es imposible y así fíjense Qué pasa así si yo hago esto voy a sacárselo y dárselo específicamente a la caja por default ahí fíjense que más o menos tien las mismas medidas por qué Porque yo salto tuve que calcular más o menos cuánto debería tener esta caja de W y he para que el total sea de 100 píxeles esto ya hace que no necesitemos hacer más nada directamente le ponemos Border Box Okay en vez

de en vez de esto le decimos Border ponete en Border Okay maestro y fíjense que ahora tenemos el Mismo resultado y encima está mejor calculado que no vamos a fallar va a ser exactitud total Esto es lo que hace Box sizing sepan que vamos a utilizar muchísimo Box sizing Border Box así que acostúmbrate Ahora sí vamos a ir con el apartado de colores Vamos a aprender a dar color es hermoso pero al fin vamos a poder colorear Sí vamos a poder usar rgb hsl hexadecimal vamos a poder utilizar rgba vamos a poder utilizar el nuevo

que salió occh occh parece ruso pero lo Mejor es que no es raro ustedes van a decir chto quiero que el color de la caja sea bordó yo agarro y digo bueno Vamos a ponerle a 2 1 por ejemplo ahí tenemos un bordó que es lindo dalto Cómo hiciste eso Yo no voy a aprender si es fácil hacer esto lo vas a quiero que me des un azul bueno pongo el 48 yo que me gusta mucho es un azulcito que me gusta mucho Ven y ahora tengo este color Y van a poder darle el color

exactamente el color que ustedes quieran van a decir ch Alto cómo voy a aprender Y si te hubiera mostrado hace un tiempito que ibas a aprender todo esto te lo hubieras creído entender todo este código que estás entendiendo ahora no te haba parecido chino básico Entonces esto que es más fácil todavía lo vas a poder aprender en menos de 30 minutos te lo puedo asegurar y vas a aprender a dar exactamente el color que quieras vas a decir Che Ah o sea que este Define el rojo O sea que si le pongo más por ahí

puedo lograr un Violetita Ah esto es un Rosa Ah entonces tengo que bajarle la fuerza le pongo nueve acá le pongo por ahí una a Y quizá ahí sí logre un Violeta Ah Más o menos Ah pero está muy fuerte Claro pero esta cama no la necesito Entonces qué hago pongo por ahí un dos y ahí sí me quedó mieta más fuerte y esas cosas eso que estoy haciendo ahora lo van a poder calcular solos porque va a ser muy fácil y no solamente con hexadecimal lo van a poder hacer con rgb lo van a

poder hacer Con hsl así que bueno nada voy a dejarlo en Red Esta es la última vez que vamos a usar el color de esta forma Pónganse contentos vamos a la sección de colorización vamos bueno acá lo que hice básicamente lo mismo fue crearme estos dos archivos para ponerme a trabajar acá y principalmente creé un div que es el único elemento que tengo en la en la página que tiene la clase Box que después traje acá en css y le di estos Estilos que pueden ver acá que básicamente es un ancho y un alto un

color y un margen para que se separe de los demás y lo podamos diferenciar lo que vamos a hacer ahora es ver tres tipos de colores diferentes pero las tres más comunes son rgb rgba hcl hsla y hexadecimal y hexadecimal y Alfa son las Tres formas más comunes que tenemos de dar color cada unao tiene sus ventajas pero en realidad realmente en el fondo es lo mismo Solo que se hace de una Forma diferente y bueno lo que sí hsl tiene menos colores que rgb y hexadecimal pero ahora vamos a ir viendo a poquito para

arrancar tenemos que entender voy a venir a Paint Y es que vamos a ver el más básico y el más simple de todos que es rgb y de hecho la gente que ya viene del diseño lo van a ver y de hecho las personas que ya tienen un poquito de conocimiento en el tema Ya sabrán que rgb básicamente significa Red Green and blue o sea son Los tres colores primarios de la luz y va a ser más fácil cuando quiere intentar hacer combinaciones rgb básicamente tiene 255 posibles combinaciones para cada uno 256 combinaciones posibles para

cada uno de estos valores es decir 256 tipos de rojo 256 tipos de verde y 256 tipos de azul de tal forma que si multiplicamos 256 * 256 * 256 me va a dar como resultado esto que está acá que es básicamente la cantidad de colores Que tiene rgb 16,77 7,216 Así que estas son todas las posibilidades que tenemos con rgb y después tenemos otro más que es el alfa que básicamente lo vamos a ver después pero básicamente el a del rgba significa como dije recién Alfa y habla de la transparencia crea otro canal de

iluminación que se llama canal Alfa que es un canal que se encarga de controlar la opacidad entre otras palabras de el Conjunto de estas tres capas es decir es como si tuviéramos una capa que se encarga de decir cuánto rojo le vamos a dar al color otra capa que tuviéramos que decir cuánto verde le vamos a dar al color y otra capa que nos va a pedir cuánto azul le queremos dar al color y otra capa que es la última que nos va a decir Cuánta opacidad le querés dar al total de todo vamos a

arrancar con rgb que es simple y rgb justamente nos pide tres valores cuando nosotros acá Escribimos un un valor el valor tiene que estar entre 0 Y 255 acá tenemos 200 56 valores del 1 al 255 y el cer entonces son 256 porque el cero cuenta como un número Entonces tenemos que definir cuánto rojo va a tener cuánto verde va a tener Y cuánto azul Es que va a tener si yo por ejemplo vamos a ver un ejemplo muy básico vamos a agarrar un pincelito de acá si yo le digo Mira Quiero poner un poquito

de rojo y también quiero poner un poquito De Azul Por ejemplo no sé que ven ustedes Acá pero yo acá ya puedo apreciar una especie de Violeta no lo que tenemos que hacer acá justamente es Definir la cantidad de cada uno que le vamos a echar al baldecito digamos Esto va a ser supónganse un color ustedes tienen que decir Che Mira de los 255 colores del rojo que hay yo le voy a echar un poquito de rojo nada más y de verde de verde le voy a echar menos y de azul le voy a echar

mucho entonces la Suma de todo esto nos da como resultado un color final es eso es como tener diferentes baldecitos e ir tirándolos para poner la cantidad que queremos de cada uno yo por ejemplo Acá tengo el rojo no Si de repente digo rgb Okay acá me vo a pedir cuánto de red le quiero poner yo le voy a decir 255 cuánto de verde no le voy a poner nada de verde y cuánto de azul nada de azul Entonces actualizo no me carga porque soy tan que puse un cero en vez de una o Por

Dios Ahora sí bu Bueno lo que acabamos de ver es exactamente lo mismo que escribir red actualizamos y no cambia es lo mismo por qué Porque lo que hicimos fue permitir que la capa del rojo esté al máximo cargada es decir va a tener un máximo rojo ahora si yo de repente esto lo dejo en cero pero acá pongo 255 va a haber un máximo verde lo que es igual que escribir si yo de repente escribo 255 en la capa del azul va a tener 255 que es lo máximo en este caso es azul puro

lo mismo que escribir Blue Ahora qué pasa si yo de repente mezclo colores Bueno voy a mezclar el máximo del rojo con el máximo del azul obtengo un Violeta si le pongo un poquito más de verde obtengo un Violeta más clarito de esta forma obtengo un rosa si de repente le bajo acá obtengo un azulcito no que es un Celeste bastante lindo si yo de repente quiero formar por ejemplo un gris Qué hago si tuviéramos todos los Valores iguales es como si tuviéramos una sola capa de luminosidad entonces fíjense que si ponemos todos en 200

obtenemos grises por ejemplo Entonces esto es un gris normal Este que está acá es un gris más oscuro porque es menos color este que está acá por ejemplo sería un gris casi blanco porque estamos casi al borde del cero O sea si ponemos todos los ceros es como si tuviéramos un negro si ponemos todos los 255 es como si tuviéramos un blanco si Sacamos un color absolutamente es como si tuviéramos la mezcla de otro otros colores ven eso es exactamente lo que obtenemos si ustedes por ejemplo quieren formar colores que sean estéticos Tienen varias posibilidades

una es ir probando de esta forma o si buscan rgba picker o rgb vienen acá rgba color picker y acá básicamente ustedes pueden elegir el color que quieren ven básicamente van aumentando o disminuyendo y acá pueden elegir un buen color para lo que ustedes Quieran entonces de esta forma ven Qué pasa si le ponen más verde por ejemplo a un elemento si le sacan rojo si le sacan azul pueden ver qué es lo que está sucediendo si le sacan opacidad si le aumentan porque el a es justamente el otro factor si ustedes por ejemplo vienen

acá y le ponen a Ahora les va a pedir un cuarto valor que va a ser la opacidad es decir cuán transparente es es la transparencia aún así lo que quiero hacer no es explicarles este es Explicarles el otro que es mi favorito que es hexadecimal para eso se utiliza este signo de la almohadilla voy a hacer un pequeño zoom para que lo puedan ver mejor y hexadecimal también nos permite tener 16,77 7212 posibles combinaciones de colores y hasta una más porque tenemos justa Met también la capa de opacidad Así que nos permite tener como

4000 millones de colores para esto básicamente voy a poner un punto y coma Tenemos lo mismo es r g B Red Green blue pero Ahora nos movemos en el rango hexadecimal hexadecimal es un sistema que tiene 16 posibilidades por eso exa de 16 0 1 2 3 4 5 6 7 8 9 y acá no viene el 10 viene el a el B el c d e f acá tenemos seis acá tenemos otros seis O sea que ya van 12 y acá tenemos cuatro o sea que En total son 16 justamente hexadecimal es un sistema

de base 16 así como el decimal es de base 10 y el binario es de base 2 Este es un sistema De base 16 por qué porque tiene 16 números básicamente lo que hacemos de esta forma con rgb es utilizar vamos a sacar esto es utilizar un hashtag y decirle cuánto queremos de rojo cuánto queremos de verde y cuánto queremos de azul Si yo por ejemplo digo de rojo quiero cero esto significa cero absoluto cero cero si yo por ejemplo digo de verde quiero todo verde tengo que poner f f porque el F es totalmente

verde y de repente de azul Quiero poner nada cer Ahora vamos a ver parece el más complicado de todos pero para mí es el más fácil entiendo que puede ser igual más intuitivo rgb lo acepto pero este me gusta mucho más 00 por ejemplo ff 00 esz es verde absoluto Perdón por qué Porque le estamos diciendo quiero que tengas cero rojo todo verde y cero azul yo por ejemplo quisiera todo azul diría así por ejemplo de esta forma si yo por ejemplo quisiera un azul más clarito le pondría a más oscuro Perdón le pondría Ah

yo Quisiera un Azul casi negro le pondría tres todos tres esto es azul aunque no aparezca pero es un azul muy oscuro 55 es un poquito más claro 77 es otro azulcito y acá básicamente tengo que salirme un poco del azul para mezclarlo para que se haga más verdoso por ejemplo Entonces qué hago digo Bueno le voy a dar un poquito de verde voy a poner 40 y ahí por ejemplo ya es un poquito más verde lo voy a hacer más claro le pongo 2 a ahora es más clarito le quiero dar Un poquito más

de verde todavía vamos a ponerle 6 se Ahí va ahí se pone más verde lo quiero un azul todavía más claro voy a aumentar la gama del azul entonces voy a decir cc por ejemplo y ahí no salta este azul acá lo quiero un poco más gris y ya sabemos que si queremos que un color sea más gris o que tenga menos saturación lo que tenemos que hacer es hacer que se parezca más al color de base sabemos que por ejemplo si tenemos todo c Okay tenemos un gris ya Sabemos si tenemos todos a tenemos

un gris también lo sabemos Entonces yo sé que si me acerco al seis yo por ejemplo tengo un azul pero si me acerco al al c por ejemplo voy a poner 666 si yo el azul lo voy bajando por ej 88 es casi un gris esto es más azul pero es casi un gris Entonces esta es la magia de saber combinar los colores la forma en la que yo los combino no es así es con solamente tres para mí es mejor combinar así Hola de vuelta acá la adto versión Minita de Google quería explicarles algo

normalmente podemos decir que el hexadecimal se separa en tres partes rojo y tenemos el valor uno y el valor dos verde y tenemos el valor uno y el valor dos y lo mismo con el azul lo que quiero que entiendan es que si hacemos un pequeño zoom al rojo en este caso cuando ustedes definen el primer valor están definiendo entre los 16 posibles rojos que hay pero si se fijan a detalle hay una diferencia entre un rojo y otro Rojo entre cada tono hay otros 16 tonos diferentes para eso está el segundo valor elegimos cuál

de los 16 tonos intermedios queremos de entre los 16 tonos que hay O sea que sigue habiendo 16 combinaciones posibles para cada uno de los 16 valores o sea son 256 colores posibles igual que con rgb esto es lo mismo para el verde y para el azul el primer valor elige uno de los 16 tonos que hay y el segundo es todavía más específico pero como estos segundos Tonos no son tan importantes como el primero pueden utilizar una versión abreviada si ustedes quieren darle un rojo oscuro no necesitan poner a a porque ese segundo a

es para elegir un rojo todavía más exacto pero si eso no les importa y quieren hacer más rápido pueden poner Ah y poner a es igual a poner a si ponen B es igual a poner BB si ponen cer es como poner 00 O sea que si blanco es fff F pueden ponerlo con fff si negro es 00 pueden ponerlo con 00 de esa forma se puede abreviar el color los dejo adalto para que se los explique mejor cómo Bueno en vez de poner así pongo a fd por ejemplo y esto significa esto para rojo

esto para verde esto para azul puedo poner por ejemplo f00 es rojo 0 f0 es verde y 00 F es azul entonces ahí ya saben que pueden combinar f0 F es el mismo Violeta que teníamos cuando usamos el rgb y pusimos 255 es más acá nos dice cuánto es en rgb por ejemplo ven De Hecho acá justamente podemos ver cuál color tenemos Y si queremos Modificar un color lo podemos hacer desde uso estudio code ven venimos acá y decimos bueno Yo quiero tener estos colores y lo podemos ir modificando solo que esto lo que hace

es darnos el color en rgb esa es la no lo tenemos en hexadecimal pero lo tenemos en rgb ahí por ejemplo con lo que les mostré que me gustaba mucho era 48e ven porque es clarito es un azul clarito tiene un poco de rojo y bastante De verde y más o menos me da este resultado otro que usaba para bordeo por ejemplo es a22 entonces tenés es como esto que es un bordo un rojo si se fijan le pongo cer es un rojo máximo es así si quiero que sea un rojo más oscuro qué hago

le bajo la fuerza pongo fd c v a y a por ejemplo es más bajito cinco es casi un negro le pongo un nueve es bastante oscuro le pongo un a me gusta más yo quiero que se note menos fuerte qué hago le pongo por ejemplo 44 y se Hace un poco más gris Entonces se hace un poco más claro menos opaco como que bajas la saturación del bordón poniendo dos más arriba y ahí me queda un bordo Yo por eso lo pongo en a do dos y ahí me queda este bordo imaginemos un color

no sé por ejemplo yo quiero hacer un naranja cómo lo puedo hacer y el naranja es básicamente tiene un poquito de rojo un poquito de amarillo podemos intentar llegar al naranja sabemos que el naranja de azul no tiene nada así que le sacamos Todo el azul probamos poner a Ah y ahí tenemos un amarillo Okay pero qué pasa esto tiene mucho de verde para mí el naranja tiene un poquito más de rojo o no Entonces le vamos a aumentar el B aumentamos el rojo aumentamos más el rojo y ahí tenemos un naranja y Qué pasa

si queremos seguir reduciendo seguimos reduciendo voy a reducir un poquito más el verde le pongo un ocho por ejemplo ahí tenemos un naranja más fuerte y de esta forma hacemos naranjas estamos Usando el máximo del rojo y mezclándolo un poquito con verde y ahí obtenemos naranja dicen bueno Quiero obtener un Celeste el Celeste no tiene nada de rojo entonces ponemos cero rojo tiene bastante azul y bastante de verde acá tenemos Celeste qui hacer un Celeste más lindo Bueno le saco un poco de verde porque por ahí es demasiado verde le pongo nueve ahí tenemos demasiado

azul Bueno le voy a poner un c ahí tenemos un poquito más celestito aumentamos el Verde un poquito ponerle a a a b y ahí tenem tenemos este celestito ven es más es mucho Celeste aumentamos esto a no sé d por ejemplo y ahí tenemos un Celeste un poco más lindo así es como se suelen trabajar los colores o sea hacer esto esto que está acá es lo mismo que hacer esto solamente que esto es abreviado hacer esto es para darle mucho detalle por ejemplo en vez de poner 00 ponen 0 e y cambia un

poquito no es mucho pero algo cambia es un cambio mínimo pero Está en vez de ponerle 0 e le pongo 02 3 por ejemplo y me cambia mínimamente Pero algo me cambia es como para ser más detallista a mí me da igual Yo por eso lo dejo cero porque sé que cuando pongo 0 es 00 si pongo B es BB Y si pongo d es dd entonces Acá tengo otra capa que es la capa Alfa si yo por ejemplo quiero que tenga el máximo de opacidad le doy F se queda así si quiero que tenga

el mínimo de opacidad le doy cero y desaparece si quiero que tenga un Poquito más de opacidad le doy tres un poquito más de opacidad le doy seis un poquito más de opacidad le doy nueve y máxima opacidad de vuelta le doy F entonces con este último podemos manejar la opacidad del cero vamos por el 1 2 3 4 5 6 7 8 9 a b c d e f y ahí termina entonces pu elegir la opacidad y esta combinación si usamos esta capa tenemos digitalmente hablando no a nivel de datos tenemos más de 4000

mill es más es este número El que teníamos antes es 256 cuad por 256 nos dan los 16,000 y pico que teníamos antes esto de vuelta por 256000 estos son exactamente la cantidad de colores que tenemos 4294967296 O sea que tenemos una cantidad de colores increíbles y con esto pueden armar su sus propias paletas de colores esto pl forma por ejemplo es muy utilizada no sé para programas como Adobe premiere Hay un montón de cosas son es recontra utilizado muchísimos Programas ustedes van a poder venir y darle este color Y lo va a entender ahora

no tengo instalado Premier no tengo instalado Nada para mostrárselos Pero sí tengo instalado gimp el programa más que hay pero está voy a agarrar este color Y voy a usar el color Ah y acá tenemos la anotación html fíjense que dice notación html unos hijos de mil ni siquiera se llama notación html sabemos que esto es blanco por ejemplo Pero sabemos que esto También por ejemplo es rojo entonces fíjense que ahí nos va a mostrar un rojo ff00 ff y se va a hacer Violeta queremos hacer un un azulcito ponemos 44 de rojo 88 de

verde y le damos cc de azul le damos ent y se hizo un azulcito esto agarramos y ya podemos pintar Esto del color que queríamos así sirve para todo literal sirve para programas de diseño para lo que hagamos aprender rgb y hexadecimal les va a recontra servir después tenemos la última forma de Colorear que les voy a enseñar ahora que es hsl la vamos a ver rápida porque la verdad que a mí nunca me gustó e hsl y hsla ya saben que hsla es lo mismo pero con una capa de de alfa el básicamente es

una rueda que nos permite seleccionar la Matiz si ustedes ponen el hue color picker acá van a tener básicamente un montón de paletas para ver cómo es esta que está acá acá tienen Esta es la paleta genuina y la real Acá está esta que está acá 0 gr es rojo O sea que si Ponemos 0 gr es rojo después acá sigue la saturación que en este caso se usan porcentajes yo por ejemplo voy a decir 100% saturado Y esta es la iluminación en este caso 100% iluminado iluminación o luminancia en realidad el término correcto es

luminancia Entonces si venimos acá nos va a aparecer blanco Por qué Porque le dimos toda la luminancia Así que si la bajamos por ejemplo 20 vamos a tener esto Vamos a darle por ejemplo en cero vamos a tener esto le Damos en 50 que es como el punto medio y vamos a tener el rojo que queríamos antes o sea los colores al 50% son los colores la versión más fuerte del color esto que está acá es rojo y acá podemos empezar a movernos 120 por ejemplo es verde y 240 es azul Esos son los puntos

que ya tienen que tener acá pueden ver ves 240 es el azul acá tenemos el 240 que es el azul tenemos el verde que es el 120 y acá ya pueden arrancar a medir ya saben que por ejemplo si 120 es verde Y 240 es azul El sian está en un punto medio ven acá Acá hay como un verde un poco más clarito más azulado acá tenemos como una mezcla entre el xan y el azul el verde y ahí estamos mezclando los colores no entonces ponemos acá por ejemplo y estamos obteniendo un Celeste acá ya

obtenemos un verde venimos acá y obtenemos una especie de verde más azulcito acá obtenemos un Celeste por decir de alguna forma y acá Le bajamos la saturación vamos a volver al color Por ejemplo rojo también le podemos bajar la saturación para hacerlo un pastel los colores pastel se caracterizan por tener poca saturación y mucha iluminación Entonces si por ejemplo le damos en 40% de saturación tenemos este color Y nos falta darle luminancia entonces venimos acá y ponemos 80 por ejemplo y ahí tenemos un color pastel le vamos a dar en 70 porque por ahí es

muy fuerte Ah va tenemos un color pastel acabamos de crear un color Pastel este sería como una especie de rojito pastel yo por ejemplo Ahora quiero poner 30 y tengo estea especie de amarillito pastel quiero por ejemplo un azul pastel voy al azul que es 240 y acá ya estoy en el azul pastel voy a ir más por el lado del Celeste porque creo que es un azul que siento que se inclina hacia el Violeta entonces voy a 200 y ahí obtengo un azul que es más celestito puedo encontrar un punto medio y llegar a

200 ahí está ahí encontré el azul que Quería y ahí tengo un azul pastel puedo dejar esto por ejemplo en 65 ven ahí se vuelve de repente un poco más oscuro y los colores que son para usar de fondo siempre tienen que contrastar si yo por ejemplo tengo una letra Clara tengo que tener un fondo oscuro porque si no no se van a ver yo por ejemplo esto le agrego un texto voy a poner texto Si yo quiero que este texto se vea le voy a dar un text align text al Center Ahí va y

a esto le voy a poner padding para que Esté super centrado padding 50 píxeles es lo mismo que darle lo de recién Ahí lo vamos a poder ver perfecto yo Por ejemplo si acá le doy un color más oscurito vamos a hacer que sea por ejemplo que tenga 30% de del fondo qué pasa no se termina de ver bien el texto Qué hago entonces Bueno le voy a dar por ejemplo un color blanco y ahí ya sé que este color es blanco tengo un texto blanco Vamos a darle un font family sanif Ahí va y

ya tengo el texto blanco Si yo sé que por ejemplo le voy a dar un fondo más ito por ejemplo va a tener 85 por esto el blanco no se ve Entonces qué hago por ahí le doy el mismo color pero más oscuro vamos a venir acá y vamos a hacer que esto tenga un 25 ahí fíjense que es el mismo color pero más oscuro Entonces es un poco más estético acá le doy 35 Ahí está y agarro y le pongo un Border top dos píxeles solid y le pego este mismo acá y ahí fíjense

que tengo este color le voy a dar en 45 porque por Ahí es muy bajito y ahora sí más o menos estamos combinando colores vamos a hacer que tenga un padding arriba y abajo de 20 píxeles y a los costados de 50 y ahí tenemos este texto que es como una especie de cartelito que nos salta vamos a hacer que sea font W blad y ahí se nos hizo un poco más gordo el texto ya sabemos que si tenemos un elemento que tiene un fondo claro tenemos que hacer que el elemento sea más oscuro en

este caso el elemento sería el texto Si el Texto tuviera un fondo más oscuro el color de texto Debería ser más clarito porque si no no lo podemos ver sobre todo las personas que son daltónicas les recontra jode esto también entonces es importante que fondos claros texto oscuro fondo oscuro texto Claro así que bueno ahora mi consejo de vuelta es jueguen prueben recontra caguen la con esto de los colores investiguen agárrense sus colores favoritos y si no Y si no les importa esto ya saben Siempre tienen sus color pickers hexadecimal picker y acá también tienen

el hexadecimal este d html color code es muy bueno entonces por ejemplo ustedes elijen un color van a venir acá y van a elegir un azulcito y le van a poner este azul y tienen este azul en hexadecimal en rgb y en hsl los tres que Les acabo de enseñar lo pueden ver y ahora tenemos este rojo en hexadecimal en rgb y en hsl cualquier forma que querramos cualquier de las Tres formas que querramos Utilizar para colorizar el elemento el fondo o lo que sea tenemos acá el color html color code es el mejor picker

de todos los que yo conozco por lo menos sí está recargado de publicidad pero la verdad que es muy bueno dalto acá habla tu versión minita de Google no digas idiotes Es imbécil la mejor página para colores es ayudam loko.com búsquenla y ussen es genial este otro no es tan bueno Nunca me gustó tanto pero si es verdad que tiene un montón de color Converter rgb x hcl tiene más incluso tiene el el cmk este por ejemplo es magenta y Yellow que sería amarillo ven que es una porquería no me gusta mucho pero bueno nada

vamos a volver a este yo me quedaría con este el que yo de alto uso es este así que yo recomiendo Este mira no hace falta que se rompan la cabeza encontrando la combinación perfecta para dar con el color que quieran pueden venir acá y lo tienen Pero saben que si quieren colorizar Rápido y si ustedes quieren porque a ver cuando uno Crea una página web uno Crea una página web a nombre de algo puede ser una empresa algo propio para eso ustedes tienen que ya saber cuáles son los colores que van a utilizar o

sea esto se lo digo ahora esto es un curso no de diseño es un curso htm pero ya que le damos les doy el consejo ustedes Está bueno que sepan los colores rgb y demás porque ustedes pueden ir probando e inventando Pero la realidad Cuando uno Tiene un diseño uno va a seguir una paleta de colores que le va a dar la marca que van a trabajar si yo por ejemplo quiero trabajar con No lo sé Ada 13 Yo quiero trabajar en Ada 13 Ada 13 tiene una paleta de colores entonces la paleta de colores

que tengo en a 13 es la que utilizo para desarrollar la página pongo Google paleta de colores no entonces acá por ejemplo Tengo la paleta de colores que usa Google o sea uno No necesariamente tiene por qué elegir Qué Colores son los que va a usar la empresa el diseñador o quien sea se los da y uno los usa o uno puede venir acá y Buscar generador de paleta de colores entonces vos venís acá y venís acá paleta de colores punto no sé qué Y acá tienen cada uno de los colores tienen los colores en

hexadecimal Y ustedes los copian los pegan Y ya tienen esto listo entonces acá ya tienen esto así por ejemplo no vamos a poner el costado y acá vienen acá y por ejemplo dice quiero Que el fondo tenga otro color sería este color Ahí va y les queda este texto dicen bueno Che es un texto que para mí es muy fuerte bueno ya saben que estos dos primeros son para el rojo estos dos son para el verde y estos dos son para el azul Entonces los próximos dos que siguen son para la opacidad yo voy a

ponerle por ejemplo 44 y ahí se me hizo mucho más clarito el color y ya está ya tengo el texto personalizado nada en fin a lo que voy es a que ustedes no siempre Van a elegir los colores que tienen que utilizar pero sí está bueno que conozcan de la teoría para poder hacer pruebas test y demás normalmente los colores se los da la empresa y ustedes simplemente los ponen Pero si son desarrolladores o diseñadores si los quieren probar Esta es toda la teoría de colores así que es importante que la sepan sobre todo por

ejemplo cuando trabajamos con proyectos o queremos aprender queremos hacer cosas lindas y no nos importa tener una buena Paleta de colores así que nuevamente lo hacemos a ojo pero bueno es una buena práctica buscar y encontrar paletas que gener ten buenos diseños así que bueno hasta acá llegó esta sección me voy despidiendo la realidad es que tenemos más formas de colorizar tenemos las versiones relativas de estas formas de coloreo pero lo vamos a ver más adelante porque este apartado la verdad que no nos interesa no queremos profundizar tanto en colores ya tenemos lo que usa

El 99% de desarrolladores web para utilizar o para darle color a cualquier cosa puede ser a un borde a un fondo a un texto o a lo que sea y esta es la forma que yo normalmente uso así que hasta acá llegamos ahora sí lo que vamos a ver ahora son unidades de medida que es la forma que tenemos de medir cualquier cosa puede ser por ejemplo medida del viewport pueden ser porcentajes pueden ser pixeles pueden ser em pueden ser Rem etcétera y no todo Se mide con pixeles ese es un error que si no

lo corrigen desde ahora la van a mucho en el futuro el margen 20 píxeles el tamaño de acá van a ser de no sé qué Esto va a tener un padding de 20 píxeles todo todo con píxeles y no es correcto dependiendo de la medida del proyecto o de lo que tengamos que hacer o de la propiedad que estemos dando se puede usar pixeles se puede usar rems se puede usar em se puede usar porcentajes entonces todo Es depende y es variable Así que lo que vamos a hacer es ver esto de las unidades de

medida Cómo aplicarlas Qué propiedad depende de cada cosa y y Cuándo usar cada una así que vamos ahora sí con unidades de medida vamos Bueno lo que vamos a ver ahora son todos los tipos de medidas que hay las absolutas las relativas queé usar en cada caso hay hasta centímetros disponibles para que utilicemos acá Así que es mágico vamos a verlo bueno acá tenemos el html y acá el estilo css voy A enlazarlo está el punto cs Ya está ya está enlazado antes de arrancar no se olviden que para ver esta pantalla apretan control shift

Pay le dan en Open user settings json que es un formato archivo y acá están todas nuestras configuraciones Okay ustedes si quieren eh estar al día que con los atajos de teclado para que no tengan un problema para que se les abra algo para tener el L de editing W wp y demás pueden copiar exactamente esto en el settings json que Ustedes tienen que pueden acceder así ya saben con control shif p Open user settings ahí lo deberían abrir el Jason modifiquen así y ahora sí ya estamos listos para arrancar bueno para arrancar yo acá

voy a crear un div que va a tener un h1 Vamos a ponerle título y este vamos a poner un p y al p le vamos a poner un lorem vamos a visualizar esto acá y acá tenemos el contenido cargado perfecto yo ahora voy a venir al estilos pun css voy a seleccionar voy a Seleccionar el div le voy a dar un background Ed Ed Ed y de esta forma está como un fondo gris Okay le voy a dar un pequeño padding de 20 píxeles Esto está demasiado grande Así que lo voy a checar un

poquito ahí está al h1 le voy a dar un margin cero Ahí está y ahora más o menos tenemos algo Bastante más lindo esto le voy a dar un font family San serif así Bueno más o menos se puede apreciar siento que esta es una tipografía que un cambio se aprecia bien Porque acá vamos a poder notar bien el cambio en las medidas y demás voy a darle por último un Border left dos píxeles solid y se lo voy a dar en 999 c píxeles esto se va a llamar notificación Acabo de crear como una

especie de notificación Okay acá al lado Voy a poner un spam y el spam va a tener un hace un momento voy a agarrar el spam y al spam le voy a dar el mismo que le dimos al borde y un font size de 16 píxeles y un font weight de 100 porque Está bastante amplio ah y al título le vamos a dar un font size de 20 píxeles así está un poquito más no de 22 24 y vamos a poner un título por ejemplo a recibido un mensaje y así de fácil Bueno al texto

le vamos a poner un un color un poquito más clarito vamos a agarrar el p y al p le vamos a dar un color 555 bueno gente lo que tengo acá básicamente es un div Okay que adentro tiene un h1 que tiene un título que es este has recibido un mensaje y acá dice hace un momento Esto está mal acá no debería haber un h1 incluso ni siquiera Debería ser un encabezado Pero bueno nada en este caso lo vamos a pasar porque no estamos preocupándonos por la semántica Así que lo vamos a pasar por ahora

tenemos un párrafo y acá tenemos los estilos tenmos un fondo un padding una tipografía y un Border left a esta caja del fondo al h1 le dimos un tamaño un poquito más chico y un margen cero al spam que es este elemento que está acá le dimos un color Grise secit intermedio entre blanco y negro como un gris medio un gris común le achicamos la tipografía y le dimos un f White 100 para que sea una tipografía finita y al párrafo le dimos un color un poquito más clarito porque estaba en negro y en vez

de que sea negro es decir en vez de ser 00 quedó en 555 esto principalmente lo estoy Armando para que podamos Ahora sí ver y entender un poquito Cómo funcionan las unidades de medida Okay por un lado básicamente Tenemos la medida más básica de todas que son los píxeles obviamente Aunque ni siquiera sea necesario aclararlo los píxeles son medidas absolutas básicamente son un pequeñísimo área de luz que tenemos en nuestra pantalla una la parte más mínima de área de luz disponible que tenemos en la pantalla es el Pixel lo usamos normalmente para definir por ejemplo

el tamaño de algunos elementos ejemplo no sé como el alto y el ancho de las imágenes por ejemplo También el tamaño de los textos O sea la tipografía también se suele utilizar mucho para los márgenes y en los paddings o sea para definir el margin y el padding Bueno hay otras tantas propiedades más existen una medida bastante raros que son eh PT que cre son puntos y picas que básicamente provienen del mundo de la impresión es decir cuando nosotros vamos a crear un diseño para imprimir lo podemos hacer de esta forma Por ejemplo si este

esto que está Acá lo fuéramos a imprimir qué haríamos acá le pondríamos por ejemplo 12 PT 12 puntos no Entonces estamos definiendo el tamaño de esto acá también 12 PT por ejemplo o PC por ejemplo que en este caso es otra cosa que el PC gigante Estos son medidas absolutas ni vamos a adentrarnos en los puntos y las picas Porque nada no se usan para absolutamente nada por lo menos no los desarrolladores promedio o el 99% deos no lo usan y los uso nunca pero que Sepan que está son medidas después tenemos otras muy similares

que estas sí se usan un poquito más que son los milímetros los centímetros y las pulgadas yo por ejemplo digo que la caja de fondo no vamos a hacer de cuenta que esta es una notifica apliación yo digo Ey Mira Quiero que el tamaño de letra o que el padding por ejemplo sea de 4 cm en este caso en vez de píxeles son cím actualizamos Y fíjense que ahora el padding es de 4 cm lógicamente en Nuestras pantallas va a cambiar el padding dependiendo del tamaño que tenga puede ser más o menos lógicamente es imposible

que la pantalla calcule 4 cm exactos pero cuando nosotros Hagamos una impresión e imprimamos el diseño esto debería salirnos de 4 cm si le damos acá botón derecho imprimir por ejemplo esto que está acá ven nos permite imprimir nos permite imprimir esto no Entonces vamos a imprimir lo que acabamos de crear Qué pasa la impresión que vamos a Hacer nos va a generar el padding que pedimos de 4 cm esto se usa principalmente para esto como dije para medidas que después en la vida real tienen un significado también podemos en vez de decirle 4 cm

por ejemplo decimos 20 mm que este es mucho más parecido al que teníamos antes teníamos antes por ejemplo 20 píxeles no 20 píxeles de padding y era esto ahora le podemos decir por ejemplo 20 mm por ejemplo o 2 pulgadas las pulgadas se escribe in Ahí Está in viene de inch que son pulgadas actualizamos y ahí bueno es bastante 2 pulgadas pues ser 0.2 pulgadas ahí lo tenemos más o menos en fin estas son formas de medir como dije que normalmente las utilizamos okay Para más que nada más que nada las utilizaríamos para definir y

cosas que van a ser aplicadas a la vida real estamos Armando el diseño de un banner por ejemplo que se va a imprimir perfecto teneremos armar la portada de algo que vamos a Pegar en un mural lo hacemos de esta forma con cosas que sabemos que van a ser impresas o aplicadas de forma física en algún momento utilizamos medidas que son reales y físicas se llaman medidas físicas son absolutas pero son físicas porque tienen un significado real físico en cambio el Pixel no porque un Pixel en mi celular no es lo mismo que un Pixel

en una televisión que en un monitor que en una tablet por ejemplo Okay y dependiendo de cuál Entonces los píxeles Físicamente sí cambian los píxeles son diferentes 1 cím es 1 cm no importa eh Si estás en la china en Narnia en la luna es de acá de allá Es un cím un c es una medida física y también otra cosa que no les dije es también se utiliza para maquetar interfaces táctiles si por ejemplo estamos desarrollando una aplicación que la gente va una página web que la gente va a tener que tocar en tiempo

real lo podemos definir con milímetros centímetros Pues estamos una App táctil Okay que se puede tocar etcétera ahora las medidas absolutas como tal vamos a englobar todas las que mencionamos antes Incluyendo los píxeles y demás son ideales cuando necesitamos tener control y ser precisos por ejemplo maquetación de elementos muy específicos o cuando trabajas por ejemplo con imágenes que tienen que tener un tamaño fijo lo único malo es que tenemos la limitación de que no es la mejor opción para diseños responsive ya vamos a ver Lo que significa esto pero básicamente es que pueda verse en

cualquier dispositivo si yo por ejemplo todo lo defino con medidas absolutas cuando entre del celular lo más probable es que no se vea lindo no se va a poder ver lindo incluso Aunque lo adaptemos es decir hay toda una teoría del diseño que es del responsive design que es adaptar una página web a muchos dispositivos y muchas resoluciones pero aún así estamos obligados a trabajar con medidas que no Son absolutas Porque cuando trabajamos con medidas absolutas Aunque adaptemos nuestra página al celular no se va a ver bien porque vamos a estar limitado porque es una

medida absoluta ahora no vamos a hacer ningún ejercicio porque lógicamente ya trabajamos todo el curso con píxeles Así que no hace falta ni pensarlo por eso vamos a pasar al apartado de unidades relativas las unidades relativas el la forma de definirlo es simple es una unidad que Depende de otro valor el valor de la unidad depende de otro valor más por ejemplo el contenedor de por ejemplo otro contenedor o el tamaño fuente etcétera son importantísimas para el responsive design Okay por ejemplo dependen de no sé cuál sea la medida que el navegador por defecto le

da a los elementos o dependiendo de qué tamaño tenga el body Esto va a tener tres veces el tamaño del Body eso es una meda relativa La más común y que ya vimos es el porcentaje cuando nosotros definimos un porcentaje significa que el porcentaje es respecto a su contenedor esto siempre es así es decir si yo por ejemplo a un elemento defino ese elemento con porcentajes ese porcentaje repito es respecto al tamaño que lo contiene si yo por ejemplo digo que quiero que una tipografía vamos a hacerlo más fácil yo por ejemplo voy a agarrar

el p y le voy a dar un background Red solo para que lo Podamos ver vamos a sacarle también el margin por defecto arriba y abajo cero Ahí está y vamos a sacarle el padding okay Para que se pueda apreciar mejor si se fijan ahora que están bien pegados los elementos lo que yo estoy haciendo acá Okay es el p tiene un wid del 100% hasta acá ya lo sabemos poner Esto es lo mismo que no ponerlo porque el wid por defecto tiene un wid del 100% el p ya lo sabemos si yo por ejemplo

le doy un wid del 50% lo que va a estar ocupando es el 50% respecto al tamaño que lo contiene la caja contenedora es el div si yo por ejemplo al di le doy un wid de 200 píxeles por ejemplo ahora de repente el p va a tener 100 píxeles Bueno entonces ahora que ya entendimos más o menos Cómo funciona esto okay el tema de las medidas sabemos que si por ejemplo le damos un 10% va a tener un 10% de la caja que lo contiene O sea que si esta tiene 400 píxeles Esto va

a tener un un 10% o sea va a tener 40 píxeles poner un p de 10% es lo mismo que poner un p de 40 píxeles sí es lo mismo si le damos en 50% significa la mitad o sea que la mitad de de 400 píxeles es 200 o sea que debería ser lo mismo que poner acá 200 píxeles sí es exactamente lo mismo no cambió nada A qué voy con esto a que así se usan los porcentajes los porcentajes lo que hacen es definen algo respecto al tamaño contenedor pero en el texto funciona bastante

diferente si nosotros Quisiéramos dar una medida de texto en porcentajes Eso no se hace eso está mal pero yo por ejemplo sé que el h1 tiene 23 píxeles yo digo bueno el h1 está dentro del div O sea que si yo de repente le pongo 10% significa que font size sería de 40 píxeles porque wid es 400 píxeles O sea que el 10% es 40 píxeles o sea que si yo hago así Esto me va a tener este tamaño y si le doy el 10% debería funcionar igual no no porque el font size cuando Nosotros

ponemos porcentajes en el font size lo que estamos haciendo en realidad es definir el 10% del tamaño del font size de la caja contenedora o sea si esta tiene un font size de 400 píxeles recién ahí Esto va a valer 400 40 píxeles por qué Porque lo que hacemos acá es darle un 10% del font size de arriba o sea que si el font size del div es de 16 píxeles acá Estamos dándole un 10% de 16 si acá tenemos vamos a vamos a darle a al p Okay un font size de 14 Píxeles es

el valor por defecto acá le doy un font size font size de 400 píxeles fíjense que ahora sí Acabo de aumentar este tamaño y esto es lo mismo que poner 40 píxeles es exactamente lo mismo por qué Porque 40 píxeles es el 10% de 400 píxeles y acá estoy diciéndole el font size del h1 va a ser de un 10% del font size de la caja que lo contiene O sea div que es 400 píxeles si acá pusiera 200 Me quedaría este tamaño que significa que ahora el h1 Mide 20 píxeles que es lo mismo

que poner el 20% es una medida relativa no se trata de tamaños se trata de propiedades el h1 va a tener un margen top del 50% Qué significa esto que va a tener un 50% de qué además el h1 está dentro del div O sea que el margin Lo debería tener acá No acá está haciendo un colapso de márgenes es decir está colapsando el margen Y en vez de hacer un margin hacia arriba el margin lo está teniendo el div Pero bueno eso es otro Tema yo lo hago para abajo por ejemplo vamos a hacerlo

para abajo porque si no no nos va a funcionar margin bottom bueno acá lo que está pasando tiene que ver con la altura del elemento padre es decir estamos hablando del he si yo por ejemplo le estoy dando un margin top d Vamos a darle que el margin sea de 100% este 100% es la altura total y por ejemplo lo voy a sacar si venimos acá y le damos en inspeccionar vamos a ver que acá el di tiene 405 con 91 píxeles SI Yo Acá le doy margin Bot de 405 píxeles me va a bajar

hasta acá y si le doy un margen de 100% me baja Exactamente lo mismo o sea es respecto al padre si le damos botón derecho y le damos en inspeccionar acá cuando pasamos el mouse por div div es el padre div tiene de altura de he tiene 405 con 91 píxeles de alto o sea 496 Perdón 406 repito si yo le doy un margin bottom 406 Esto me lo debería dejar acá o sea que cuando yo de repente le digo Marin Bottom 100% deberían ser más o menos los mismos Así es como funciona el mar

en los márgenes y lo mismo para la derecha si yo por ejemplo le doy un margin left por ejemplo del 50% voy a obtener que esto se va a mover un 50% pero ojo del tamaño total de la caja padre a la derecha a la izquierda eso es lo que hace el margin left en porcentajes aún así el margen el los porcentajes no se suelen usar en márgenes ni en paddings ni en tamaños de letra Así que eso des Preocúpense o sea se suele usar cada muy tanto por ejemplo para dar un margen del 10%

o hacer que un elemento tenga un wit del 50% pero no para mucho más realmente Así que vamos a retroceder mucho y vamos a dejar todo esto como estaba que la verdad que estaba muy lindo antes del background Red Ahí está un poquito antes del background Red y del 23 píxeles en font size actualizo y ahora sí me quedó esto lindo después tenemos dos medidas más tenemos em y Rem básicamente el em Okay es la mejor forma para mí de definir e muchas cosas ahora vamos a ver pero tenemos justamente esta nueva medida relativa que

son los em y los Rem pero vamos a ver lo que es un Rem primero vamos a ver lo que es un m un em va a valer lo mismo que el font size del tamaño del elemento padre fíjense Qué interesante esto si yo por ejemplo digo el div Okay va a tener un font size de 30 píxeles acá le voy a dar al p un font size de 14 píxeles para que se queden Tranquilos si yo digo que el div va a tener un font size de 30 píxeles y yo por ejemplo ahora a

p le doy un em un em va a ser igual a 30 píxeles Si yo al div ahora digo que el font si va a ser de 20 y actualizo un em va a ser igual a 20 píxeles y si yo por ejemplo acá pongo 2 em Exacto significa que es el doble de un m y si un m son 20 píxeles dos em van a ser 40 píxeles o sea que si yo por ejemplo tengo el div en 14 píxeles que es el tamaño que me trae por defecto el Navegador voy a tener al

párrafo de 28 píxeles pieles porque el doble de 14 es 28 entonces si yo le saco esto y pongo 2m obtengo esto pero bueno a lo que voy es a que justamente eso es lo que hace el em el em lo que hace es ir al elemento padre preguntar cuál es el font size que tiene el elemento padre y multiplicarlo por el numerito que tenemos acá entonces la fórmula es esto m se reemplaza por un por y el numerito del font size que tenemos acá que sería Este entonces 2 * 14 píxeles es 28 píxeles

y tenemos Exactamente lo mismo si acá por ejemplo tuviéramos 20 píxeles y acá ponemos por ejemplo 3 em vamos a tener esta letra gigante sería lo mismo que poner 3 * 20 píxeles 3 * 20 es 60 nos queda 60 píxeles actualizo y es exactamente lo mismo porque así es como funciona esto los cem son estas medidas que nos dicen agarrá el tamaño del font size del contenedor padre y multiplicalo por el número que te voy a dar acá si es Por 1.5 esto serían 30 por ejemplo si es por 1 pun no sé 25

esto serían 25 y así es un cálculo bastante fácil y bastante simple pero la verdad que es una unidad muy útil después tenemos el Rem el Rem básicamente lo que hace es lo mismo que Elm solo que en lugar de ir a buscar al elemento padre va a buscar al elemento raíz el elemento raíz es html yo por ejemplo acá le pongo un Rem esto le doy font size Y le doy 30 píxeles esto fíjense que va a tener 30 píxeles si yo En vez de Rem le doy em actualizo y me queda de 20

porque la caja padre tiene 20 pero si le doy Rem no va a buscar a la caja padre vo a buscar el elemento raíz el elemento raíz es html entonces va a darme 30 píxeles Si yo le pongo 40 me va a dar 40 si le pongo 10 me va a dar 10 así funciona Rem es exactamente lo mismo que m solamente que m Busca en la caja padre y Rem Busca el elemento raíz que es html vamos a sacar esto que está acá y vamos a sacarle el tema del Rem Ahí está si no

definimos el font size para el Rem lo Define el navegador el tamaño por defecto de 16 píxeles es exactamente lo mismo y otra cosa que no les dije es que si el elemento padre no tiene definido un font size va a buscar al elemento más padre por ejemplo el p está dentro del div pero el div está dentro del P O sea que si a a p le decimos Ey Vas a tener un em Qué significa eso que va a ver cuál es el font size de div y se lo va a dar a p

Pero si div no tiene definido el font size lo que va a hacer es ir más arriba todavía va a ir a buscar a la etiqueta que con tiene a su padre o sabe ir a buscar a su abuelo p está dentro de div y div no tiene div está dentro de Body Entonces vamos a buscar en Body si Body por ejemplo tuviera un font size de 40 píxeles ahora un em de p va a ser 40 píxeles porque como este no tiene definido el font size se va más arriba en la jerarquía de elementos

en vez de Buscar a su padre va a buscar a su abuelo y si hubiera otra etiqueta por afuera de Body si Body no la tiene definida va a buscar a la que está por afuera de Body o sea es eso cómo va escalando va a buscar en la etiqueta padre del padre del padre del padre del padre hasta que encuentre un font size y si no encuentra en ningún lado el font size pone el valor que le trae el navegador por defecto que es 16 píxeles y por ejemplo Acá no está me trae 16

Píxeles pero así funciona siempre va el elemento padre fíjense que por ejemplo vamos a hacer la prueba con esto acá tenemos el spam el elemento eh spam es hijo del elemento h1 porque está adentro del h1 y h1 tiene 23 píxeles O sea que si al spam le damos un font size de un em debería medir lo mismo que el h1 y si h1 no tuviera definido 40 píxeles por qué Porque el dim no tiene definida su medida pero si al div le diéramos un font size de 20 píxeles mediría 20 Píxeles Es más si

al h1 le pudiéramos la medida de antes font size 23 píxeles mediría como el font size pero si el h1 no tiene va a buscar al padre de h1 que es div Y si el div tampoco tiene va a buscar al padre del div que es Body Y si el body tampoco tuviera font size y el body tuviera otro padre iría a buscar al padre de Body que en este caso como no hay accede al elemento al valor defecto que le Define el navegador por eso Si de repente sacamos acá el font size Normalmente p

tiene un m que dirían 40 píxeles bueno eso también para que lo sepan después tenemos algo Bastante interesante que son las medidas del viewport a hecho no le vamos a dar un fondo background red ahí el Red si yo quiero que el h1 tenga la mitad de alto de lo que tiene toda la ventana entera yo qué hago voy y le voy a dar un he de 50% Pero eso no me va a generar lo que yo estoy buscando para eso tengo que darle un hate de 50 viewport hate Actualizo y ahora fíjense que me

está ocupando la mitad de lo que mide la altura total del View por disponible si esto fíjense que si lo achico por ejemplo se va a achicar por qué porque esto lo que hace es medir la mitad del alto total es el view por disponible Igualmente funciona así también para lo lo ancho si yo por ejemplo le doy wid de 50 View por with que en vez de View por hate es View por with W ahora va a medir esto y si yo lo agrando fíjense que Siempre va a medir la mitad de la pantalla

el viewport es eso el viewport es el ancho disponible que tenemos en la vista esto que está acá es el viewport esto es muy común por ejemplo para hacer ventanas modales yo esto lo voy a sacar y voy a sacar el fondo rojo es muy común para hacer ventanas modales si yo por ejemplo vamos a hacer de cuenta que esta Esto no es una notificación es una ventana modal que se nos abrió qué hacemos le damos un Wi de 100 View por He Ahí está y perdón 100 View por wid ahí está y un hate

de 100 View por hate Ahora sí Y esto tiene un ancho tendríamos que darle un margen Cero en realidad margin cero Ahí está y al Body también margin cero porque tiene márgenes por defecto Vamos a darle también el box sizing Border Box Ahí está ahora sí y fíjense que está ocupando exactamente el fíjense que no me no me genera La Barrita de scroll si yo le sacara el box icing Border Box me Genera como esta barra de scroll que significa que el elemento es más grande que el viewport entonces esto que darle así para que

el el ancho sea exactamente de lo que yo le pida yo le estoy diciendo que que la altura sea igual a la altura total y que el width sea igual al ancho total al wid total entonces de esta forma fíjense que me está quedando este elemento de alto como le digamos y de ancho como le digamos esto es muy útil por ejemplo para abrir ventanas Modales que son esas ventanitas que si te abren por ejemplo cuando querés cargar una notificación o algo entonces yo por ejemplo agarro y le digo vas a tener un 90 por

de View por eh Wi y un 90 por de View por he y se nos Abre así 80 por 80 Ahí está y ahí tenemos esto y lo centramos le damos margin auto y ahí está lo tenemos centrado es más le damos por ejemplo un margin top de 10 View por hate por qué porque sabemos que si le damos un margin top de 10 View por hate Se va a separar 10 View por hate entonces va a tener arriba 10 View por he de espacio abajo 10 View por he de espacio y como tenemos 80

de alto sumamos 100 que es el total de todo y ahora tenemos una ventanita centrada por ejemplo lo podemos usar para lo que hace YouTube esto que está acá que es una especie de modal que yo si quiero puedo cerrar vengo acá y lo cierro esto que está acá hace que se adapte sin importar el tamaño ven se adapta Y esto es Buenísimo después tenemos otra medida que le voy a poner para el costado que se llama V Max y v min qué jorque es esto Esto es simple si yo digo un vmax le estoy

diciendo hacé una comparación entre el hate y el wid y dame el más grande si el más grande es hate entonces un V Max va a ser igual a un View por hate y un View por me va a ser igual a un View por weight Entonces eso es lo que hace el Max va a ser igual al más grande y el min va a ser igual al más Chiquito Eso es todo un View por min es igual a un View por wid cuando el wid es más chiquito que el he y un View por

Max es igual a un View por wid cuando el wid es más grande que el view por he Eso es todo después tenemos ex y ch que no lo vamos a ver porque son como están aplicadas a la tipografía entonces normalmente por ejemplo lo usamos para dárselo al Line hate O sea si yo por ejemplo vengo acá y hago así si se fijan el Line height es un poquito más grande Que el tamaño de la letra si yo por ejemplo le doy un Line he de una x van a ver que ahora sí no hay

espacio básicamente lo que hace es que el la medida esta Va a medir lo mismo que tiene la altura de la letra X acá exact es así de loco pero lo que hace el X es agarrar la x medir Cuánto mide la x y es es un x y ch es algo parecido agarra al cero mide el ancho del cero y cuanto ese ancho del cero es un ch por eso super raro no lo vamos a ver es bastante usado Para otras cosas muy puntuales pero realmente nada es es bastante extraño así que no lo

vamos a ver por ahora pero que sepan que existe ahora Cuándo usamos cada uno bueno para tamaño fuente espaciado la tipografía en general em y Rem son ideales para armar el layout o armar las dimensiones de los elementos se suelen usar por ejemplo porcentaje G em o o Rem o View por wid View por he esto para diseño responsive pero no es que siempre se usan píxeles o siempre se Usan rems si por ejemplo no nosotros queremos que haya algo preciso y que algo siempre mide igual podemos usar pixeles si por ejemplo sabemos que una

imagen queremos que tenga esa resolución sin importar En dónde se vea o el dispositivo o lo que sea usamos pixeles Por ejemplo si queremos que un elemento tenga una resolución exacta usamos píxeles si por ejemplo queremos hacer que una caja tenga un borde de tres píxeles usamos píxeles para los bordes Por ejemplo usamos píxeles ahora para dar eh lo el font size podemos usar m mi consejo ahora es entren a páginas web que ustedes usen todo el tiempo o a páginas web conocidas como YouTube Google y demás y fíjense cómo usan las medidas cuándo usan

pixeles cuándo usan porcentajes cuándo usan rems cuándo usan MS Entonces fíjense eso para agarrar un poquito más de cancha y entender el funcionamiento que le dan normalmente los desarrolladores a las páginas que Hoy en día son Gigantes y que son empresas multimillonarias Por ende deberían hacer las cosas bien Entonces nada fíjense Cómo se usan estas medidas en proyectos grandes para ver si pueden aprender algo y aparte prueben hagan sus proyectos como digo siempre y jueguen con las medidas para ver cómo le queda más cómodo Ahora sí vamos con la siguiente sección y estoy hablando de

fondos tenemos mucho que ver sobre los fondos así que no me voy a alargar mucho Más Vamos a ver fondos bueno gente ahora vamos a ver los fondos parece que fondos Es raro no porque voy decir Qué propiedad le podemos dar a un fondo lo podemos hacer rojo verde o azul y nada más no Bueno en realidad hay mucho para hacerle a los fondos bueno acá vamos a crear un elemento div muy simple le vamos a poner la clase Box es una porquería porque a veces trabajamos con clase y a veces no hacemos una del

trabajo con clase Vamos a agarrar y vamos a darle a el box 200 píxeles G 200 píxeles margin 20 píxeles y un background Rosita Por qué Por qué un hombre no puede usar el color rosa bueno en fin lo que vamos a hacer con esto es ver esta propiedad background vamos a ver sobre fondos como tal como ya sabemos yo puedo agarrar y decir la propiedad más básica de todas que es background color y en este caso ponemos f3e por ejemplo Y tenemos este colorcito Okay yo antes vine usando la Propiedad background pero la propiedad

background es un shh que engloba todas las posibilidades bueno no todas Pero casi todas las posibilidades que tiene background Así que lo que vamos a ver ahora son esas otras cosas que podemos hacer con los fondos para comenzar yo al fondo le puedo dar una transparencia vamos a hacer de cuenta que yo por ejemplo tengo el body y el body va a tener un color completamente verde ahí está Ahora sí yo a esto le puedo dar una Transparencia para eso ya saben que sobre el cuarto parámetro del hexadecimal pongo por ejemplo un nueve y ahí

fíjense que de repente parece que se me hizo gris puedo poner un ocho que sería un gris más real y ahora está como más verde le pongo un uno y es como que casi hubiera desaparecido ven entonces con esto yo lo que hago es controlar la opacidad que tiene no con este no Entonces yo con esto lo que hago es controlar puedo hacer que el fondo sea Más o menos opaco Para qué joraca me sirve esto y simple yo por ejemplo en el Bot tengo un texto enorme la caja tiene un position absolute un top

cero que esto es lo que suelo hacer cuando trabajo con con modales y le damos un 9 fíjense que ahora la caja es más transparente entonces me permite ver lo que tiene afuera me permite ver el fondo es el mismo efecto que veíamos cuando subíamos algo a YouTube ven esto que está acá todo esto negro que pueden ver De fondo es otra capa que en realidad es negra pero tiene la transparencia a la mitad un poquito menos Y de esa forma podemos ver todo el fondo que es lo mismo que esto que está acá pero

sería básicamente una capa negra de esa forma por ejemplo la dejamos en seis y podemos ver el fondo Entonces yo Por ejemplo si toco acá yo desde acá No puedo seleccionar el texto Pero si yo vengo acá lo estoy seleccionando pero no puedo hacer lo mismo acá No puedo seleccionar El texto porque hay un elemento encima No parece porque es transparente Pero hay un elemento encima en fin no vamos a ver esto todavía lo del position absolute y demás pero que sepan que normalmente trabajar con fondos con transparencia existente o que tengan algo de transparencia

Es muy normal esto para no lo vamos a ver tranquilo ya llegaremos a ese momento pero eh Nada es una una forma de de entenderlo creoo lo que sí vamos a ver que ya es otra Propiedad es el background imagee o image que esto lo que nos dice es Ey podés poner una URL y esta URL va a ser una imagen Busco soy de alto en internet acá aparece dalto refero que por cierto nunca más pude acceder a mi Twitch perdí mi contraseña los de auti jamás me respondieron los de Twitch jamás me respondieron Jamás

nadie me dio pelota en Twitch encima había streame cuatro o cinco veces nada más no Stream nunca pero aún así levantamos 12,000 Seguidores voy Agar imagen mía cualquiera Como por ejemplo Esta que está acá voy a darle botón derecho y copiar dirección de imagen Entonces yo vengo acá y la pego debería saltarme la imagen y lo que hago acá es abrir comillas y pegar la imagen acá y ahora sí me acaba de cargar la imagen no aparece pero les juro que me cargó la imagen de fondo si lo esto lo achicamos un poquito y agrandamos

esto por ejemplo 10000 por 1200 Ahí vamos a ver un Poquito más la imagen más o menos 8812 por 8812 840 Perdón soy muy exacto no importa no importa lo que tenga lo que acabamos de hacer es hacer que Y esto no es una imagen eh ojo no no no no es un div es decir esto es una caja no es una imagen es una caja Solo que el fondo es una imagen hicimos que el fondo de este elemento se convierte en una imagen Ahora qué pasa si yo por ejemplo tengo una caja contenedora que

mide lo mismo que dijimos antes por ejemplo mide 400 Píxeles por 600 supongamos Qué le pasa a la imagen fíjense lo que está pasando se corta bueno tenemos otra propiedad que se llama background size y podemos darle en porcentajes si yo le doy en auto se queda igual si le doy en 100 100% fíjense que lo que hace es adaptarse al ancho total el ancho de la Im hace que la imagen básicamente entre por lo menos en ancho si yo acá le doy 200 píxeles no va a entrar totalmente ven lo que hace 100% es

hacer que el tamaño del fondo Sea del 100% del wid del tamaño del elemento si yo esto le pongo 400 la imagen crece como mi si yo acá le pongo por ejemplo 500 ven sigue creciendo la imagen también como mi entonces a lo que voy con esto es que background size lo que hace es eso solamente Recuerden que crece como el tamaño del elemento también podemos darle píxeles por ejemplo yo puedo decirle que va a medir 100 píxeles entonces lo que hace es mide 100 píxeles Y se repite después podemos controlar esta propiedad para que

no se repita pero en este caso se repite puede ser que mida 200 píxeles o que por ejemplo mida 500 como el tamaño y darle 500 píxeles es lo mismo que darle 100% Sí también puedo poner 2 em 20m lo puedo hacer también pero Quién hace esto con imagen nadie pero tenemos tres propiedades que son muy comunes dos sobre todo la primera es contain que contain básicamente es una propiedad que Lo que hace es obliga al contenedor a hacer que la imagen entre si yo por ejemplo acá le doy 600 píxeles hace que la imagen

entre se ajusta lo más posible para que la imagen entre si le damos 100% solo se ajusta lo ancho pero si le damos contain obliga a la imagen a adaptarse eso es lo que hace contain literalmente intenta hacer que en el espacio que le dimos la imagen entre al menos una vez V yo lo voy a agrandar de vuelta entonces eso es lo que hace esto Fuerza al navegador a Mostrar la imagen al menos una vez entera acá fíjense que en este en esta resolución me la muestra dos veces en esta resolución me la muestra

una en esta me la muestra una y siempre va a ser lo posible para por lo menos Mostrarme una vez la imagen después la repite lo que lo tiene que repetir y después tenemos el otro vamos a hacer 400 y acá vamos a dejar 200 tenemos la otra propiedad que se llama cover cover lo que hace es muy buena Ahora ustedes pueden decir Che dalto si vos le das en cover es lo mismo que darle 100% ves es lo mismo No cambia nada pero qué pasa si yo acá por ejemplo tengo 200 por 400 así

lo vemos mejor fíjense que acá la imagen se está repitiendo Pero si yo de repente acá le pongo cover lo que hace es adaptarse 100% no se adapta en cambio cover Sí se adapta hace que la imagen no importa la dimensión que se ajuste a la resolución que tiene de tener ven eso es lo que Hace que no importa la resolución que la imagen entre completa en la pantalla y si V alto la verdad que esto está muy lindo pero observa esto alto es un asco no se te ve ni siquiera la cara bueno yo

puedo venir acá y poner background position Center y ahí acabo de centrar la imagen también le puedo decir left también le puedo decir right yo normalment uso Center porque uno normalment tiene el foco del contenido en el centro pero por ejemplo si la Resolución es esta que está acá vamos a hacer de cuenta que la resolución es esta y acá ya no nos sirve Center tampoco tampoc nos sirve left tampoco nos sirve right Entonces qué hacemos Bueno podemos usar bottom o podemos usar que en este caso es la ideal top y ahí se nos agarra

la cara literalmente top es arriba bottom es abajo left es izquierda right es derecha y centro es el centro entonces dependiendo de lo que tengamos podemos tener por ejemplo Incluso podemos tener esto entonces dependiendo de lo que tengamos tenemos que llevar la imagen para donde queremos de eso se trata Y eso lo hacemos con background position es bastante copada la verdad Esta propiedad o también podemos darle coordenadas específicas por ejemplo queremos que que esté 10 píxeles y esto lo que va a hacer es la va a mover 10 píxeles hacia la derecha queremos que te

muevas 100 píxeles hacia la derecha V se mueve 100 píxeles hacia La derecha y después podemos darle otra que esto es para arriba y hacia abajo le damos 100 píxeles más y se mueve hacia abajo esta cantidad de píxeles o le puedo dar menos 100 píxeles y se mueve para arriba Esto entonces yo agarro y digo Bueno vamos a probar a ver hasta que nos dejemos hasta que podamos ver la cara a ver cuándo podemos ver la cara Ahí va ahí estamos viendo la cara perfecto y acá en vez de darle 100 tampoco le quiero

dar cer0 le quiero dar Menos 50 quiero que la cara esté al principio Ahí está listo y ahí tenemos todo esto entonces de esto se trata no trabajar con background position pero nada est esto es raro Normalmente se usa se usa las direcciones Center right left top bottom Esto es lo que se suele usar en realidad pero también podemos decirle e posicionate arriba y muévete primero 50 píxeles hacia la derecha por ejemplo 50 hacia la derecha 50 hacia acá y después top por ejemplo pero nada También lo que podemos hacer por ejemplo es si nosotros

tenemos la propiedad de cover no y de repente decm e Quiero poner contain por ejemplo no me gusta que se repita me parece una bosta que la imagen se repita qué hago bueno utilizo background repeat Y le doy en no repeat y no se repite y de hecho fíjense que el color de fondo es negro todavía sigue funcionando yo el color de fondo puedo darle transparente y ahí me queda el color de fondo transparente o le puedo Decir que el color de fondo sea red y se pone rojo o por ejemplo le puedo dar un

verdecito azulado le puedo dar un Vamos a darle más Verde más verde y vamos a bajarle un poco el azul Y tenemos este fondo para el elemento o también podemos hacer otra cosa que es bastante interesante fíjense esto nosotros podemos hacer que por ejemplo background size sea de 40 píxeles y no repeat lo que hace es hace que no se repita en ninguna dirección Pero podemos poner Repeat en x y se va a repetir solo en el eje x o podemos poner repeat I y se va a repetir solo en el eje I Entonces nada

esto también que sepa que existe esta posibilidad es rara la verdad nunca la usé hasta ahora pero existe se puede bueno la que trae por defecto es esta que es repeat yo lo que suelo hacer directamente es utilizar cover y ya cuando utilizamos cover No necesitamos eh trabajar con repeat porque directamente no se muestra A menos que La posición la trabajemos con coordenadas por ejemplo ahí sí se va a repetir tenemos que darle background repeat por ejemplo ahí le damos en No repeat Y ahí no se repite estas cosas muy puntuales sí podemos hacer así

pero nada yo no lo recomendaría y directamente solo trabajar con posiciones por ejemplo en este caso sería top y ahí quedó después tenemos otra propiedad que es bastante extraña Qué pasaría si nosotros dijéramos Ey Quiero que la imagen se pueda ir yendo con el scroll yo voy a hacer esto voy a agarrar la caja esta voy a darle un wid de El 100% Ahí está voy a darle a esta caja un margin cero porque sabemos que acá tenemos un scroll porque el body tiene un margin pero si le sacamos el margin del Body y le

sacamos el margin del div ahí tenemos este elemento Qué pasaría si de repente yo esto lo voy a aumentar un poquito ahí está acá voy a poner un he de solamente 100 pixeles y Voy a poner más texto voy a venir acá y voy a poner más texto lorem otro lorem actualizo y tengo un scroll una barra para hacer scroll vamos a poner el doble de este texto vamos a llenar todo de texto porque el ejercicio que vamos a hacer ahora vamos a trabajar con el scroll miren lo curioso de esta propiedad vamos a ponérselo

arriba esto así no no afectamos esto vamos a hacerlo un poquito más linda Porque la verdad que no me gusta nada esto el font family Lo vamos a hacer sanif de vuelta y el color lo vamos a dar blanco fíjense qu curioso este efecto que nos permite hacer la propiedad background attachment que es este que está acá si yo le doy en fixed actualizo la página y fíjense Qué pasa cuando bajo literalmente me me permite hacer este movimiento loco voy a agarrar la imagen y ponerla abajo de todo voy a ponerla por ejemplo por acá

y fíjense que yo tengo la imagen acá ahora entonces me veo y esto está muy bueno Porque es un efecto muy útil para por ejemplo cuando estamos trabajando con una página web hacer un efecto de scroll cuando Estamos bajando que se muestre algo es es un efecto bastante copado lo mejor es que acá también podemos tener un elemento yo por ejemplo Ahora puedo agarrar y crear otro div acá dentro okay Y hacer que este div sea tenga la clase por ejemplo opaco y vengo acá y y edito este div y vo a decir que va

a tener un he del 100% un wid del 100% y un Background por ejemplo que va a ser negro pero con una transparencia y fíjense lo que acaba de pasar es más le voy a dar todavía más más eh oscuro ahí está se me hizo Acabo de crear una capa oscura que podría ser hasta roja podría ser una capa roja podría ser una capa azul yo le voy a dejar en neg una capa negra y arriba pongo texto blanco por ejemplo pongo no sé un h2 hola Y esto es un subtítulo lo centro voy agarrar

al h2 y le voy a dar un padding de 20 píxeles Por ejemplo y un text align Center Ahí está Está bueno porque es un efecto en el que uno está con la página trabajando Entonces uno ve una página muy linda no estás viendo la página es hermosa la página tuki tuki vas bajando y de repente Ah mira qué efecto muy lindo Entonces est es un efecto muy común que se suele hacer se suele crear un elemento como cualquier otro elemento pero la diferencia es que cuando movés el scroll el fondo queda muy fijo pero

Nada La verdad es que después Tenemos también local que es lo mismo lo único que cambia es igual que la propiedad por defecto esto que se llama scroll lo que viene por defecto es scroll es por defecto y es igual que local Okay solamente que hace que la imagen cuando desplacemos no se salga del contenedor pero no es nada más que eso se Cab pedazo para eso se usa scroll o fixer yo por ejemplo en la página de a 13 utilicé eh attachment que la verdad que es una Propiedad muy linda acá por ejemplo tienen

eh varios ejemplos ven esto es una página web que está hecha con el fondo fijo y después pasan el más por encima y medio que cambia y hay otros efectos Pero esto principalmente es estético y está hecho con el fondo fijo acá tienen otra esto es muy común hacer esto dejar el fondo fijo de esta forma es muy estético Y por último tenemos este efecto ven que básicamente es como si Queremos ver los diferentes colores Que tiene el iPhone Bueno Este es verde Así se ve azul Así se ve rosa así se ve rojo la

verdad que es un efecto bastante copado después Les explico si quieren cómo hacerlo porque lo único que hace es cambiar el hiu Pero bueno después después se los explicaré a lo que voy es que es un efecto bastante utilizado y que es un recurso muy piola s más lejos ven O sea yo mi propia página de al 13 también lo aplico literalmente queda queda estético acá para hacer esto Puntual bueno acá lo aplico bueno ahora lo que vamos a ver es el el próximo paso de los fondos que es utilizar la propiedad background si yo

por ejemplo sé que voy a darle una imagen un color un size un position y un attachment uso directamente background y a la background nos pide los parámetros de esta forma primero nos pide la imagen en este caso la URL este parámetro Ya lo descartamos tenemos la URL después nos pide la posición en este caso es top Dejamos un espacio y escribimos top nos descartamos esta después nos pide el size cover después si tenemos un repeat acá viene el repeat en este caso sería no repeat pero no lo voy a poner porque no no me

interesa después viene el attachment que en este caso es fixed vamos a poner fixed Y por último el color que en este caso es 6fa en este caso sería 6fa y acá acabamos de definir una 2 3 4 c propiedades background que eran lo mismo que decir esto versus esto Hay una diferencia entre esto y esto bastante es la diferencia con background URL podemos Si queremos solamente poner un color Por eso yo lo había hecho porque podemos poner un color podemos de hecho podemos solamente poner una imagen y poner por ejemplo cover y a la

y fixed o sacarle el fixed y ahí ya está Entonces es como una forma de hacerlo yo Les recomiendo que lo prueben que lo investiguen voy a dejar todo lo que tenía antes pero entre el top y el cover O sea después del background position y el background size siempre va esta barra que está acá es para dividirlo y ahora sí voy a mostrarles la página y acá funciona ven sigue funcionando Exactamente igual si no le ponemos esto Esta Barrita no funciona así que es importante que pongan esa Barrita y ahora sí la página funciona

Exactamente igual que con est esto fíjense que es Exactamente igual pero en lugar de esto me queda así bueno gente hasta acá Dejamos esto vamos a ir con la siguiente propiedad que en realidad no es una propiedad como tal sino que es un concepto y estoy hablando de los gradientes porque una cosa que nos faltó de ver de fondos Es el uso de gradientes esto es un gradiente por ejemplo ven es un color que comienza siendo uno y se va transformando a otro es un gradiente bueno tenemos que ver de gradientes ahora y ya con

gradientes terminamos todo lo que son los fondos y y los Gradientes Y todao esa bosta Así que vamos a ver gradientes porque al fin y al cabo es un tipo de fondo pero no sé si si es un fondo vamos a ver gradientes vamos Bueno ahora vamos a ver lo que son los gradientes Okay no se olviden que los gradientes son eh una especie de transición entre colores A ver matemáticamente es un aumento o disminución de no sé una magnitud física en función de su distancia Entonces es eso o sea tener un gradiente significa Tener

dos valores acá y que esa magnitud se combine y haya una variación que sería una una transición de un valor a otro valor y Mostrar cómo los valores se van convirtiendo en el transcurso parece parece extraño pero permítanme mostrárselos bueno voy a crear un div que va a tener la clase box de vuelta with 400 píxeles hte 400 píxeles background red por ahora Bueno nos queda muy grande vamos a dejarlo al 100% bien bueno lo que vamos a hacer ahora es Darle un gradiente a este fondo para darle ti un gradiente utilizamos la propiedad background

o la propiedad background image que sería background image cualquiera de las dos es suficiente a mí me gusta dar el gradiente con background directamente en este caso podemos tener varios tipos de gradientes tenemos los gradientes lineales para arrancar que se llama linear gradient que esto es una función la gente que venga de programación sabrá Lo que es una función en este caso nos pide un parámetro para hacer algo con ello pero básicamente Esto está diciendo que va a convertir el fondo en un gradiente lineal y me está pidiendo dos parámetros el primer color que en

este caso yo voy a poner red más fácil y el segundo que yo voy a poner Green actualizo y ahí tenemos el primer gradiente Esto está bueno Y es muy interesante para hacer gradientes por ejemplo transparentes por ejemplo tengo Un gradiente negro no vamos a dejar así y vamos a transicionar a un gradiente White en este caso funciona Pero sería mejor incluso poner un gradiente transparente Ahí va y parece que es blanco pero no es blanco realmente es transparente si en este caso ponemos un Body al Body le damos un background color red por ejemplo

esto se se adhiere al fondo mientras que si ponemos White esto queda literalmente blanco Solo que como no tenemos un color de fondo parece Que es transparente y que no hay variación pero en este este caso Esta es la realidad acá le vamos a dar un margen margin cero acá también Vamos a darle margin cero y un wid del 100% y ahí más o menos podemos ver un efecto que es bastante utilizado por ejemplo para venir y decir acá vamos a poner por ejemplo un h1 título y esto nos sirve para tener un contraste al

h1 acá le vamos a dar un margin cero también porque suele tener un margin top por Defecto y un color blanco en este caso le vamos a dar en textal Center y ahí lo tenemos centrado va a tener un padding de 20 píxeles y un font sanif por ejemplo y ahí tenemos esto que fíjense que si no tuviéramos el gradiente no se vería tan lindo en cambio con el gradiente tiene otro efecto de hecho podemos hacer que ya arranque transparente por ejemplo arranque semitransparente Entonces es como una especie de gradiente mínimo que repito Parece una

tontería pero fíjense que sin esto hay un cambio y esto es como algo que lo hace más sutil Este es el principal uso de los gradientes no es para agarrar y hacer que de repente tengamos un fondo que pase de rojo a Yellow así no no no este no es el uso de los gradientes no no no el uso de los gradientes suele ser este principalmente como les dije que es simplemente para Bueno este no era así suele ser justamente para permitirnos tener una Especie de variación del color que tenemos o más claro o más

oscuro si por ejemplo vamos a a Box lo vamos a volver una cajita vamos a venir a Box y a box le vamos a dar un el wid va a ser de 200 píxeles no de 100% 200 píxeles 300 mejor esto lo vamos a poner al revés como segundo valor el negro y como primero el transparente Ahí está vamos a hacer que tenga un Border radius de cinco píxeles Por qué no y un margin auto así está centrado Vamos a darle un margin top de 20 píxeles arriba Ahí está y vamos a darle un Border

top tres píxeles solid y del mismo color que al principio 00 a y que tenga un poquito más que tenga seis píxeles caso el borde va a ser eh 9 900 Ahí está un borde mucho más llamativo ahí si se fijan es como que tenemos una especie de tarjetita no el borde radio sea de ocho píxeles siete píxeles por ejemplo y acá tenemos justamente Un diseño que repito suele ser bastante estético como digo para para para Separar un fondo claro de un elemento claro entonces pones una capa de oscuridad y lo logras Pero esto principalmente

es para poner más abajo a ver por ejemplo yo acá tengo una imagen no voy de vuelta a copiar la dirección de mi imagen pegarla acá acá nos aparece la imagen va a tener un wid de 300 píxeles como el coso y acá tenemos este efectio que se ve bastante lindo esto es un efecto muy común que se suele dar para después por ejemplo poner algún Elemento supónganse que ustedes tienen un elemento que es un paisaje hermoso de un árbol si ustedes quieren poner un texto con blanco por ejemplo porque as es el color de

lo que tiene los que están haciendo no se va a ver el color y la realidad es que ponerle un fondo y bajarle la opacidad hace que se vea un poco feo o no se ve feo entonces con el gradiente en vez de hacer eso hacemos un efecto como este Entonces qué pasa el gradiente en realidad tiene la función De separar el texto que se note que es otra capa aparte y separarlo de un color en el que no contrasta Entonces si no tuviéramos esto se vería así y con el gradiente se ve así y

es mucho más estético que poner una capa arriba toda negra y ble la opacidad Este es el efecto más común que solemos darle a los gradientes cuando trabajamos en en html y css de hecho en diseño en general no De hecho por ejemplo si ustedes vienen acá a cualquiera de mis miniaturas si Hacen un buen zoom van a ver que yo lo que hago justamente es un gradiente le pongo como un fondo un poquito negro que se va degradando a negro para poder poner texto blanco y que se vea bien este estos fondos que están

acá suelen ser más claros yo los oscurezco Con gradientes que no se notan ven acá aunque no aparezca hay un gradiente que va de negro a el color original para qué Para poder Poner este texto y que quede muy fachero qué bien le han richo se ve Todo mi video ven acá hago lo mismo quería poner este texto Claro en un fondo que era más claro que era azul qué hice le hice un gradiente y se vio perfecto lo mismo con esto que está acá el fondo era muy claro Y qué hice le puse un

gradiente de negro a más clarito y se vio perfecto esto también nos permite elegir la dirección porque si en lugar de hacer que un elemento sea así qué hacemos tenemos que hacer un transform rotate 90d para que se rote y Hacer después todo un menjunje raro no tranquilos tranquilos si ustedes quieren que el la dirección de El degradado sea de izquierda a derecha hacen lo siguiente ponen to right y y dejar un espacio voy a minimizarlo un poco más hacen esto to right tenes que ir hacia la derecha entonces actualizamos y ahora lo que hace

es el gradiente arranca transparente va hacia la derecha en negro o al revés vas a arrancar a la derecha y vas a ir a la izquierda Entonces el transparente que es el color uno arrancó a la izquierda y terminó a la derecha también podemos hacer bottom o también podemos hacer tu top y estas son todas las posibilidades que tenemos después también podemos darle más de un color yo puedo darle por ejemplo transparente negro transparente y fíjense lo que pasa me hace este efecto yo puedo darle transparente negro y red por ejemplo transparente negro y Green

ven me hace este efecto o sea acá por Ejemplo también agarro y vengo Y le doy eh Blue también podemos darle más de dos colores O sea no hace falta que le demos solamente dos le podemos dar lo que querramos es más Si tenemos solamente por ejemplo supongan que tenemos dos colores yo puedo por ejemplo decirle que seas transparente al 30% y que sea y el resto que sea esto Entonces el 30% es transparente o puede ser que sea el 80 y el 80% del total es transparente o el 10% nada más entonces estas son

cosas Que las definimos yo norment Esto ni lo toco mucho pero se puede hacer También además de los gradientes lineales que es este el más común También tenemos el radial que acá no hace falta decirle tu top porque no no funciona pero básicamente es un es una especie de viñeta la gente que trabaja en diseño conocerá las viñetas esto es muy para efectos muy puntuales Okay si yo por ejemplo Estoy jugando un juego y en el juego tengo que hacer una Mira la puedo Hacer con esto se encargaba de armar una Mira para un juego

esto lo que hace es hacerme voy a poner Green para que se note más me lo hace hacia el centro o sea es un gradiente que no es lineal es radial porque hace lo hace a partir de un radio se entiende el radiante linear lo que hace es arranca siendo negra sigue con un color un poquito más claro y termina con el color final y lo que hace es agarrar esa línea y hacerla gigante entonces les queda el degradé de Color ven acá solamente puse tres colores pero en el medio tiene que estar todo el

degradé en cambio el radial lo que hace es crea la línea pero lo que hace con la línea en lugar de extenderla así la línea lo que hace es definir un radio y gira sobre el radio en la parte del medio tenemos un color y en la parte del borde tenemos otro color entonces gira Y estás pintando todo como el gradiente no sé cómo explicarlo la verdad Dejad alto que sos malísimo acá Tu versión editor me llamó a mí tu versión mini de Google para hacer unas animaciones para que entiendan mejor cómo funciona Gracias y

Sigan viendo pero creo que se entendió no básicamente nos hace un círculo y más a los bordes es de un color más al centro es de otro color Eso es todo y después tenemos el otro que es el conic gradient que este es un efecto bastante raro pero está piola por qué no por ejemplo acá le voy a poner el color de antes que es Transparent Ahí está y me genera este efecto es como un cono arranca va girando y lo que hace es hacer todo un movimiento circular que se va convirtiendo de a poquito

hasta hasta convertir en el otro color Nada igual no hace falta que yo soy muy técnico porque intento explicarles hasta el origen de Cómo se forma pero es innecesario tienen que ver los efectos finales y así queda gente así queda después bueno gente se puede crear gradientes sobre imágenes Que en realidad no es un gradiente como tal pero no nos vamos a meter muy en fondo porque lo que un desarrollador realmente utiliza en la vida diaria es específicamente lo que les acabo de mostrar recién y ni siquiera usa el conic ni tampoco usa el radial

se usa principalmente el linear para el efecto que les comentaba de separar un poco un elemento que es claro de un fondo claro o un elemento que es oscuro de un fondo oscuro bueno gente eso fue todo sobre Gradientes ahora vamos a ir con la última sección antes de terminar con la sección básica de css porque estaríamos terminando la parte básica y estoy hablando de que vayamos a ver el apartado de sombras esto que está acá cuando estaba viendo esto la verdad que me hizo acordar un poquito a las sombras que nos permitiría crear efectos

como estos por ejemplo que es interesante lo ven más si le sacamos el gradiente se va a apreciar más la sombra esto es la Sombra Bueno no es momento de ver sombras vamos a dejarlo así para que la carpeta después cuando se las muestre quede bien y ahora sí vamos al apartado de sombras hay bastante por ver Ah mentira no es bastante es bastante poquito de hecho vamos Bueno no sé si se dan cuenta pero si se ponen a pensar la verdad que venimos trabajando con bastantes estilos últimamente es decir no solamente estamos viendo propiedades

puntuales ya Estamos trabajando con el conjunto de propiedades que venimos Aprendiendo a lo largo del curso es decir este por ejemplo es todo el código css que teníamos en el archivo que trabajamos recién Este es el código html que teníamos en el código que trabajamos también reciente ahora arrancamos un nuevo archivo pero lo que voy es como que logramos lograron de hecho entender un conjunto de cosas que hace un tiempo ni se imaginaban que iban a entender y Están entendiendo las bases eso es lo mejor sé que todavía tienen muchas dudas pero tranquilos que le

prometo resolverlas todas y hacer que todas esas dudas cuando ven una página deben decir y cómo se debe hacer esto Che y cómo joraca harán para lograr Esto bueno tranquilos porque no se van a ir a este curso hasta que no respondan esas dudas que seguro tienen acá tenemos un elemento Okay que es simplemente una caja que tiene 300 por 400 píxeles y Demás vamos a ver cómo aplicarle una sombra a esta caja para comenzar las sombra son muy importantes en el diseño web primero porque agregan profundidad y realismo a cualquiera de los elementos hacen

los hacen ver más realistas y hasta tridimensionales después crean como una especie de jerarquía visual porque es como que te ayudan a destacar un elemento y además mejor la legibilidad a veces cuando tienen que andar separando contenido del fondo para Eso hay tres tipos de sombras la sombra que le damos a la a una caja que es el box Shadow la sombra que le damos al texto que es el text Shadow y la sombra que le damos a un componente x que se llama Drop Shadow pero enfoquémonos primero en los primeros dos Tex Shadow y

Box Shadow si yo quiero darle por ejemplo una sombra a esta caja voy a poner Box Shadow así y el primer parámetro que me pide es Cuántos píxeles quiero que se corra la sombra Horizontalmente o sea hacia la derecha yo le puedo decir 20 píxeles por ejemplo después me pide Cuántos píxeles o cuánto se corre no hace falta que sean píxeles no Cuánto se corre la sombra hacia abajo sea de forma vertical yo también le voy a dar otros 20 píxeles después me pregunta cuánto queres que sea el desenfoque de la sombra es como un

difuminado voy a darle 50 píxeles y después me dice cuánto queres que la sombra se expanda le voy a dar 10 Píxeles y después me va a pedir el color qué color bueno negro puro Esta es la sombra más bruta que van a ver ahora vamos a ir perfeccionándose que vieron esta botella Cómo se pensaron que iba a vivir sin agua con gas imposible muchachos yo tomo agua con gas si los veo en el próximo a 13 no sabes lo que es Ada 13 muchachos yo organizo un evento por el día del programador ustedes vien

al Canal secundario es decir adalto emprende que Posiblemente cuando Vean este video este canal ya tenga muchísimos más suscriptores y si no estás suscrito anda suscribirte porque es un canal donde tengo un curso de trading completo que es una fantástica locura tranquilos no es de trading cripto es de trading en general pues operar activos de acciones de empresas todo tipo de activo está pegadisimo el curso si ven el banner de mi de esto tiene una imagen esta imagen soy yo dando una charla si buscan a 13 En Google les va a saltar a 13 es

un evento gratuito que se celebra el Día del programador la primera edición del evento tuvo lugar el 13 de septiembre 2023 la ucina del arte de Buenos Aires el evento tiene como objetivo reunir a los entusiastas de la programación con los talleres bueno acá les dice lo que es Ada 13 pero acá tienen lo que fue el año pasado miren lo que fue la presentación de bry por ejemplo al Señor br [Música] de Muchas gracias miren esto el tipo regaló libros y todo el mundo se paraba agarrar el libro fue una locura no fue una

locura también vio Nico de Hola mundo fue una locura él la pasó también la pasó reb Nico lo conocía Nico vino el fundador de coderhouse también uno de nael lema que es uno de los funders De coderhouse nada después hicimos acá hicimos acá entrevistas acá con Nico Después estuvo acá lean lean richo que me ayudó a conducir el evento acá le estaba haciendo una entrevista al el pelado nerd justamente que también de una charla por cierto acá lean bajó y se puso a entrevistar gente se puso a pasear Por el lugar y se puso a

ver cuáles eran los Stand que había nada gente la verdad que este es un evento espectacular realmente es terrible evento vayan a inscribirse que el de septiembre de cada año los quiero ver Ahí eh quiero que estén ahí y si ahora mismo estás enterado del evento Andá urgente a inscribirte que encima los lugares son limitados el año pasado llenaron todo ahora imagino que unos 5000 podríamos llegar a ha en total ahí van a conocer a otros desarrolladores van a poder hacer amigos muchísimas gente que fue al evento me agradeció porque en el evento en las

actividades que había terminaban conociendo a otros programadores y se hacían amigos entre Ellos así que nada vayan que vamos a estar conociéndonos en ese evento todos los años pero que la comunidad se haga más grande eso por un lado No sé por qué me desvíe tanto del tema lo que quería decir qué quería decir qué quería decir yo Por qué me metí en todo este lío de qué estaba hablando No importa De qué estaba hablando vamos a ajustar las sombras que es lo que nos compete como ya sabemos el primer parámetro es justamente el movimiento

horizontal es Decir hacia Cuánto se va a mover la sombra fíjense que también le puedo dar valores negativos ven Pero esto es lo que nos permite tener el primer parámetro justamente la dirección horizontal de la sombra esto lo voy a dejar en cero siempre yo lo suelo dejar en cero porque no me gusta nada esto también es la vertical así y hacia arriba también podemos ponerla eso es justamente lo que nos permite este parámetro Yo también lo suelo dejar Siempre en cero porque nunca tengo que andar dándole sombras a estos lados esto que está acá

es el desenfoque ven si yo por ejemplo le pongo 10 casi que no hay desenfoque le pongo cero no hay nada y esto que está acá es el la extensión yo le puedo poner cer0 le puedo poner 10 le puedo poner 40 y no no es como un borde ojo porque este no es el borde si yo a este fondo le doy una opacidad por ejemplo 9 y acá le pongo -4 Hola cami te llamo después estoy grabando hola Después me contá Qué pasó No Dale sí chao estás bien Sí estoy perfecto hijo de deja

de grabar No qué decís que no si vos ibas mucho más temprano y ya tendrías que estar ya tendrías que haber terminado encima boludo porque literal respeta put no está grabando vos estás en tu casa es un bueno esto a lo que voy es que no es un borde ojo no funciona como los bordes esto simplemente es la extensión de la sombra que se va a difuminar que yo Por cierto Suelo dejar en cero y ahora sí Este es el parámetro que que más me importa Este es el parámetro que suelo usar y acá le

suelo dar un tamaño bastante grande normalmente por ejemplo 55 45 30 y pico yo por ejemplo con 40 estoy perfecto y esto le suele agregar una transparencia no la suelo hacer del todo negra ni tampoco la hago de colores porque la verdad que las sombras de colores son todas feas no se salva ni una sola se salva No importa que sea un 48e que es Un color bastante lindo No importa que sea un bordó No importa que sea un amarillo No importa que sea una especie de que es una especie de naranja vamos a hacerlo

así que sea una especie de naranja no se salva ninguno oj ojo Porque estos son solamente una opinión mía eh eso es una opinión mía y eh le pongo en siete para que se le baje la opacidad y así como lo ven es un efecto suave no es muy bruto y es muy utilizado en diseño como dije nos queda como una Especie de sensación de Resaltar el elemento le da otro efecto más realista lo separa del fondo Por cierto y si ahora arrancamos a por ejemplo trabajar vamos a poner un h2 para hacer de cuenta

que estamos trabajando en una sección subtítulo XD y ahí tenemos el sub t XD y ahora podemos venir acá y trabajar acá vamos a agarrar el h2 vamos a dar un padding de 20 pixeles por ejemplo y San serif un color 444 porque los colores nunca suelen ser negros del todo a mí Por lo menos no me gusta nunca que los colores sean todos negros siempre me gusta que sea un poquito no casi negro o sea en este caso es esto es un gris que lo pueden ver acá es este gris y por ejemplo acá

vamos a clavar un párrafo y el famoso lorem mip zoom Es más no le voy a dar un padding al h2 le voy a dar un padding a la caja Ahí está pero le voy a dar un box sizing Border Box porque aumentó su tamaño yo lo quiero en el tamaño real que definí que es 300 por 400 y el font family también se lo voy a dar a la caja Ahí está de hecho el Line he del párrafo lo voy a poner Line he es más el color también del texto voy a hacer que

todo el color sea de este color padding top cer no de 10 píxeles de 10 píxeles está bien y acá vamos a darle textal justify Ahí está texto justificado y vamos a darle un Line hte de 1.5 porque no y acá tenemos un texto de m es una tarjetita que creamos a base de igual el justify no me gusta mucho la Verdad font size 14 píxeles y le voy a dar otra resolución le voy a dar 360 píxeles de alto acá tenemos nuestra tarjetita que para mí es bastante más linda que antes la verdad 280

Ahí está bueno para qué hago esto realmente todo lo que acabamos de aplicar ya lo vimos dalto pero todo lo que estás enseñando ya lo vimos a lo largo del curso enseñame sombras zaco la mejor forma de aprender Okay es aplicando todo lo que ya sabes una y otra y otra y otra vez Para redescubrir lo que ya sabías y sobre esa base trabajar la las nuevas propiedades que vas aprendiendo así aprendes en serio no aprendiendo cada propiedad por separado y después así no funciona vos tenés que ver el conjunto de todo tu trabajo no

todo por separado y después unirlo porque cuando lo unas te vas a perder Entonces tienes que acostumbrarte a trabajar así bueno dalto tenés razón no no no no no esta ví l mela l mela completa se ponía returbio Bueno Esto es lo que es el box Shadow supónganse que ahora ustedes tienen alguna especie de problema en la cabeza y dicen queremos darle una sombra al texto Por qué nadie sabe pero quieren darle sombra al texto Bueno se lo voy a permitir para eso utilizamos una propiedad llamada text Shadow el text Shadow funciona igual el vertical

el movimiento horizontal el movimiento vertical el desenfoque 40 píxeles pero el Tex Shadow no tiene expansión O sea No nos pide la expansión este parámetro el cuarto que es la expansión no nos pide porque no lo permite pero si nos pide el color en este caso le vamos a dar un color red para que se aprecie bien y ahí la sombra tiene un texto vamos a dejarlo en cuatro píxeles para que se note porque hay que tener un problema en la cabeza para hacer una sombra al texto y ahí lo pueden ver Ah no queda

tan mal igual eh es el primer ejemplo de sombra en el texto que veo Que no queda tan mal a ver si la ponemos un poco más Clarita Che resulta que no queda tan mal eh Me la metieron entero a ver si le damos cinco píxeles ahí che No puedo creer que diga que esto me gusta a ver si le doy F 88 88 Acá está este es el color definitivo no pued creer que me gusta no pued creer que me gusta al subtítulo sí que le Quedaría muy fea A ver vamos a probar h2

y se lo vamos a poner Aunque entiendo que debería ser del doble puede ser la sombra Che Resulta que tampoco le quedaba tan mal al subtítulo Uy bueno Bueno hasta acá llegamos En este apartado Vamos a hacer todo un poquito más chiquito Okay vamos a hacer que el tamaño de esto sea de 13 píxeles vamos a hacer que esto tenga 340 El margen arriba sea de 30 que el h2 tenga un font size de 16 píxeles tan chiquito 20 píxeles está bien y esto va a tener 320 Ahora sí para qué queremos tenerlo así bueno

330 está bien para qué queremos 324 Perdón soy muy estricto para qué queremos tener esto así lo queremos tener así porque abajo vamos a poner una una imagen para aplicar la última propiedad de la yo voy a crear abajo una imagen y mg y le voy a poner un source voy a poner mi carita toda hermosa esta cara que está acá de Famous bir days copiar dirección de imagen y acá la pego acá dentro perfecto acá me aparece a la imagen le voy a dar un wid de 200 píxeles Border radius 100% sin duda se

Me redondea completamente la imagen quiero que sea más chiquito Igualmente Quiero meterla adentro del div Ah se me pone afuera del div por el tamaño vamos a sacarle el he que normalmente los elementos no necesitan que que nosotros determinemos el alto se autodetermina solo el alto ven yo hago así y se adapta Entonces ahora sí yo por ejemplo tengo esta imagen acá y lo que voy a hacer con esta imagen le voy a hacer más chiquitita porque siento que está Bastante grande la imagen voy a hacer de 160 píxeles Ahí está y le voy a

dar en margin auto así se centra la imagen no se centró le chupó un huevo completamente le recontra chupa un huevo no se alinea porque tendríamos que darle al Box un text Alin Center y ahí también se va a alar el subtítulo Yo podría venir a la imagen y a la imagen darle un Box Shadow y el mismo que le di a la caja voy a copiar esto que está acá y lo voy a pegar actualizo sizing dice no Box Shadow maestro Ah va y si se fijan efectivamente generó una sombra la voy a hacer

más chiquita para que para que la vean y le voy a poner bien bruta ven que tiene una sombra O sea la sombra existe y está pero el problema no viene en este tipo de imágenes el problema viene cuando de repente nosotros tenemos que usar una imagen transparente por ejemplo ustedes buscan el logo de Ada 13 por ejemplo Aunque tranquilos porque vamos a cambiar el logo no va a quedar este este Logo que está acá no sé porque qu est no importa voy a copiar este logo Vamos a darle en copiar dirección de imagen y

vamos a ver qué pasa si pegamos este logo en vez de esta imagen voy a pegar esta imagen acá aparece esto es realmente un asco si yo le doy a sombra a esto es realmente un asco si le saco el borde radius la sombra es un asco y tampoco puedo darle un text Shadow le voy a sacar esta propiedad Ahí va y voy a ponerle text a ver si me lo toma nada Porque no es texto es imagen Cómo puedo hacer para darle a este fondo transparente un color bueno para eso utilizo la propiedad filter

escribo Drop Shadow y acá escribo como si fuera una sombra cer píxeles cer píxeles 15 píxeles y el el color en este caso el color sería negro y ahí acabo de generar una sombra Es más voy a dar una sombra de tres píxeles para que lo noten funciona esto solamente funciona con imágenes que tienen un canal Alfa Como Por ejemplo las que son png y lo podemos hacer con una png que tiene fondo no funciona y esto también nos sirve porque por ejemplo podemos agarrar y darle un color parecido f9 por ejemplo no sé cuál

era el color la verdad Pero nos permite hacer este efecto le voy a dar cinco píxeles Le acabo de dar un efecto Neón si esto no estuviera quedaría así entonces es mínimo el efecto pero algo Se nota a lo que voy con esto es que podemos hacer este tipo de sombra que Tranquilos ya vamos a ver la propiedad filter pero como es un tipo de sombra tenía que explicárselo entonces para las cajas tenemos el box Shadow para el texto tenemos el text Shadow y para elementos como imágenes que tienen un canal Alfa o un fondo

transparente Drop Shadow lo que hace es agarrar el elemento bordear y darle una sombra a los bordes en este caso al h2 le voy a dar un margin top cinco píxeles nada más solo de cinco píxeles le voy a sacar el Tex Shadow le voy a dar un color 777 le voy a dar un letter spacing tres píxeles esto ya lo lo conocíamos quiero que esto sea más oscurito ahora ahora me parece bien que tenga este fondo Ahora sí font weight 100 el font size se va a caer a 18 Esto va a aumentar a

cco Ah no me gusta nada como quedó la verdad voy a darle el mismo efecto a acá y funciona igual solamente que en este caso no es óptimo usar esto sino que es mejor usar el text Shadow Y en vez del paréntesis Ponemos los dos puntos Bueno ahí tenemos este resultado que hicimos a base de sombras Vamos a darle un color más rojito porque Perdón una una sombra más linda porque resulta que si estamos trabajando con naranja vamos a hacer que por lo menos todo sea naranja Ahora sí Bueno ahora por lo menos un poco

más estético me salió récord bueno gente Estos son todos los efectos con sombras qué aprendimos de de esta sección de sombras primero no hay que exagerar con Las sombras que son excesivamente pronunciadas segundo hay que intentar mantener una coherencia en todo el diseño del estilo para que quede más profesional si las sombras son transparen tias y demás y normalmente son negras lo mantenemos en todo el estilo Y también tienen que probar en varios navegadores para garantizar compatibilidad para las cajas es Box Shadow para el texto es Tech Shadow y para las imágenes es filter Drop

Shadow Y por último aprendimos que tienen que inscribirse en la 13 y nos vemos en el próximo año No pará pará pará todavía no todavía no pará relajad par ahora lo que tenemos que hacer es agarrar la tarjeta de porquería que teníamos y modificarla para dejarla hermosa Así que antes de volver a la sección de html para ir a la sección avanzada de html vamos Ahora sí a ver cómo agarrar la tarjetita de html que creamos hace unos capítulos atrás y dejarla bellísima lógicamente aplicando Todas las propiedades que vimos hasta ahora no porque no podemos

aplicar más de lo que no vimos todavía Así que lo que vimos lo vamos a aplicar Ahora sí vamos Bueno lo que hice Por si acaso los que no están al tanto creé una carpeta llamada ejercicios adentro crea la carpeta eh tarjeta de presentación y adentro tengo el mismo código que teníamos antes para la tarjeta esta que es una asquerosidad y vamos a readaptar la completamente vamos a hacerlo bien Primero el principal le vamos a asignar clases a todo Card title Card description y acá vamos a poner Card content entonces este es el título de

la tarjeta Esta es la descripción de la tarjeta y este es el contenido de la tarjeta ahora vamos a poder hacer como corresponde Card title Card description o subtitle mejor subtitle y acá Card content acá vamos a poner en vez de description subtitle ahora sí lo tenemos bien clasificado todo separado por Clases antes de esto vamos a crear una imagen source y vamos a poner una foto mía Esta es una foto mía era la vamos a copiar dirección de imagen vamos a pegarla acá tenemos mi imagen Vamos a ponerle una clase Card img y vamos

a agarrar la caída darle estilo Card y mg Vamos a darle un wid de 200 píxeles y acá tenemos esto Vamos a darle un Border radius 50% y ahí se redondeó completamente por ahora venimos bien Esto vamos a hacerlo mucho más chiquito Porque está como que muy grande ahora sí Esto no se hace de esta forma después vamos a ver cómo aplicar las demás propiedades como los tipos de display y demás que nos van a permitir hacer de todo con esto pero bueno acá vamos a sacarle lo que tiene porque acá por ejemplo tenemos un

padding top acá tenemos un margin top bueno el margin top está bien que se de es más el margin top puede ser de hasta de 50 píxeles Vamos a darle un padding de 20 píxeles Para arrancar acá estamos perfecto este fondo lo vamos a sacar que no me gusta nada este padding también lo vamos a sacar tampoco me gusta mucho lo que sí le podemos llegar a dar un padding que arriba y abajo sea de 20 píxeles pero los costados sea de Cero y ahora queda más no no no queda más lindo un padding de

20 píxeles a todo mejor pero que padding bottom cero Ah queda mucho más lindo y el padding a los costados de la tarjeta va a ser solo de 10 píxeles Ay Mucho más lindo el fondo lo vamos a poner de vuelta en blanco pero bien un blanco bien Ahí está Y en vez de coral vamos a escribir nosotros un buen color el coral es este pero yo voy a poner por ejemplo en rgb le voy a dar este color no está mal por qué no dejar este color no la verdad que es un asco Ahí

está mucho mejor lo que voy a hacer para que destaque un poquito es ponerle una sombra Vamos a darle un Box Shadow c píxeles 0 píxeles 45 píxeles y un negro Con esta opacidad y nos quedó una sombra bastante linda voy a darle en 35 píxeles Ahí está 25 píxeles acá tenemos la sombra bien hecha le vamos a dar un Border radius de s 8 píxeles por qué no ahí tenemos la tarjetita redondeada siento que por otro lado el subtítulo tiene mucho margin así que le vamos a dar un margin cero Ahí está y un

margin top de cinco píxeles por qué no ay quedó bastante lindo por otro lado el Card content tiene un padding bastante La verdad Así que yo diría que arriba y abajo Solo tengo un padding de 10 píxeles Ahí está mucho mejor y un margin a ver a ver qué pasa si le damos margin cero no margin bottom cero Ay mucho mejor y ahí tenemos la carta completamente personalizada es más creo que acá podría la carta Podría tener un padding de 10 píxeles en total de todo mucho mejor vamos a sacarle un poco de contenido ahí

tenemos la carta personalizada a esto Si queremos lo Podemos poner un poco más clarito la verdad que no no me gustó mucho este color así que vamos a hacer un poco más claro a ver acá y acá le vamos a aumentar un poco más a 116 por ahí deberíamos cambiarle el color porque es azul Así que vamos a hacerlo de otro color vamos a hacerlo 4 o a ver qué color me tira no es feo este color me gusta porque destaca bien la letra destaca bien todo pero lo quiero más pastel más fácil acá pongo

seis acá Pongo a y acá pongo c estoy probando yo colores a lo loco acá pongo c si el c me gusta más este es mucho más lindo con 35 de sombra Pero esto va a tener un nueve acá porque siento que si no es una sombra muy o un seis un seis en 35 perfecto y ahí es leve el efecto de la sombra pero está el efecto de la sombra es muy chiquito pero algo se puede apreciar Y eso es lo importante que algo se aprecie algo se separe 30 sí 30 y voy a

ponerle un poco más de texto el doble De hecho para que por lo menos parezca que hay más relleno más contenido ahora si ustedes quieren crear el mismo elemento Qué hacen vienen al html copian esto no le ponen a la clase Card y la van pegando y van teniendo varias tarjetitas no entonces ya tienen el elemento de tarjeta es más a esta le pueden poner por ejemplo red Card y esta le pueden poner Green Card vienen el estilo pun css al segundo elemento le puse red Card y a este le puse Green Card y voy

a venir abajo de todo bueno abajo de todo No acá abajo de Card por orden jerárquico voy a poner red Card y a la redc le voy a dar un background diferente quiero que sea c A6 Ahí va Esto no es red 64 86 mucho mejor ahí está este color me gusta y abajo la verde Green Card ocho y acá ponemos 5 b7 Ahí me quedó este color Perfecto Bueno gente y acá básicamente creé una plataforma un ejemplo que tiene tres cartas de presentación diferentes y si Se fijan ven cada una con un color diferente

aún así todas son estéticas y muy lindas Bueno Este es el ejercicio que hicimos Pero antes que nos pongamos hacer ejercicios la realidad es que para qué les voy a enseñar a hacer algo que realmente no se hace así es decir para qué Por ejemplo me voy a poner a enseñar a hacer una barra de navegación si todavía no tenemos las herramientas que uno utiliza realmente para hacerla para qué me voy a poner a enseñar a hacerles Un componente de una página web si realmente con lo que aprendimos ningún desarrollador hace un componente verdadero bueno

y que sea de buena calidad y funcional y óptimo no hay que aprender varias cosas más y cuando hagamos prácticas les voy a mostrar prácticas reales una tarjeta de presentación Sí la podríamos llegar a hacer así yo quizás la haría de otra for forma pero la verdad que no es una fea tarjeta puede estar aplicada en una Página web sería algo quizás agradable de ver quizás modificando algunas cositas más pero dentro de todo está bastante bien Yo por ejemplo ahora hago que todas las cards sean display inline block observen cómo las pongo todas un al

lado de las otras y les doy a todas un margen de 40 píxeles 44 píxeles fíjense como todas más o menos se ven lindas realmente es un componente agradable para una web por eso estamos haciendo esto vense el display Line Block y el margin Esto no se ve lo vamos a dejar así por ahora que por cierto tengan en cuenta que esto es adaptado a a dispositivos móviles Así que desde un c se ve Perfecto Bueno en realidad no porque nos falta una etiqueta que la vamos a ver en el html avanzado que es la

de meta View para que esté adaptado a dispositivos móviles y se vea realmente así pero a lo que voy es que la verdad que lo que estamos haciendo acá sí es realista hacer otras cosas no así que lo Que vamos a hacer ahora es ir a la sección de html avanzado y después a la de css avanzado para que al final del curso hagamos un montón de proyectos yo lo que les estoy explicando es las herramientas y cómo aplicarlas a la vida real para que después cuando terminemos el curso hagamos muchos proyectos muy buenos muy

útiles y que se vayan de este curso cas as que con un portafolio de html y css Y no van a dominar una tecnología Si pierden tiempo al pedo Haciendo proyectos que después cuando avancen en la tecnología lo hagan de una forma muy diferente y quedó inútil lo que aprendieron no eso no va a pasar conmigo van a quedar muy profesionales todas las cosas que hagan me cansé de hablar vamos con la sección de vuelta de html avanzado despedimos la de ccs y bienvenidos a todos a la parte avanzada del curso Así que vamos allá

bueno volvimos a la sección de html ahora comienza una sección de html Intermedio avanzado pasa que html realmente no hay mucho como en ccs por eso principalmente el curso va a ser de entender html comprenderlo al máximo lo máximo que podamos y después css va a predominar la mayor parte del curso de hecho los cursos anteriores que hicimos tenían menos de 3 horas de html y digamos casi 10 horas de css entonces una diferencia hay teniendo en cuenta que encima me quedó un montón por ver de css si lo que podemos hacer es Combinarlos para

entender cómo estructurar por ejemplo páginas web para que después al darle estilo que de bien Eso sí es importante en html y por eso lo vamos a ver pero ahora vamos a entrar en un apartado como dije intermedio avanzado y lo primero que tenemos que ver ahora son tres cositas Okay que no están relacionadas entre sí pero son muy importantes estamos hablando de los comentarios de los metatags y del favicon Por qué no para arrancar vamos a Definir lo que es un comentario un comentario es un código que escribimos que solamente es legible para el

desarrollador es decir el navegador también lo puede leer pero no lo va a interpretar O sea no va a hacer nada con ello si yo por ejemplo pongo h1 escribo algo Por cierto ya creé la carpeta y los archivos bueno acá abrirlo como siempre y acá como siempre tenemos esto que está acá que es básicamente el resultado de la visualización del encabezado h1 Pero Qué pasa si yo por ejemplo hago lo siguiente esto es un título esto que está acá se interpreta como como un texto simple Pero lo que yo quiero es dejarle un mensaje

al desarrollador para que entienda que esto es un título si se lo pongo arriba pasará algo y no claramente No si nosotros queremos dejarle un comentario a los desarrolladores para que cuando lean este código sepan qué es lo que estamos haciendo porque a veces aunque un código Legible se entienda como tal existen niveles en los que realmente se vuelve tan complejo el código que necesitamos especificar qué es lo que hace una sección para que entendamos o para que sepamos Cuál es la funcionalidad de ese elemento o componente que estamos desarrollando Por ejemplo yo ahora voy

a hacer un comentario qué lo hacemos con el signito eh con el que aperturamos una etiqueta dos guiones medio okay Y para cerrarlo hacemos lo mismo otros dos Guiones medio y este signito pero la diferencia es que acá va el signo de exclamación cerrándose es así tal cual y todo lo que escribamos en el medio de esto okay vendría siendo un un comentario ven que acá básicamente se me comentó todo yo lo cierro acá y esto es un comentario es decir así como abrimos una etiqueta Okay tenemos que poner este signito el nombre de la

etiqueta y cerrarlo y después ponemos el contenido de la etiqueta y después también la Cerramos los comentarios son iguales tenemos que abrir los comentarios con esta de esta forma que esta sería como la etiqueta de comentario escribimos el contenido que no va a ser leído por el navegador y cerramos el comentario de esta forma lo guardamos y fíjense que ya el navegador no lo lee Obviamente si vengo acá y le doy inspección al elemento vamos a ver que el texto está acá dice esto es un título y esto es un comentario es algo para que

los Desarrolladores cuando en un futuro lo lean lo entiendan eso por un lado esto sería como ya sabemos un comentario después tenemos lo que son los favicons los favicons es el iconito que aparece arriba de una página si ustedes entran a YouTube van a ver que acá arriba aparece este loguito que está acá que es el loguito de YouTube lógicamente si entramos a Google a buscar algo vamos a ver el loguito de Google acá arriba en cambio en nuestra página el logo que Aparece es el logo por defecto es este signo del mundo Cómo puedo

hacer para cambiar Esto bueno para eso usamos un favicon para eso venimos acá y ponemos link acá ponemos rel en rel ponemos icon que como ya saben rel significa relationship y le estamos diciendo e la relación que va a tener lo que vamos a enlazar con la página es que es un icono es el icono de la página después nos va a decir Okay Eh esta imagen que va a representar a la pestañita dónde la Tenés vamos a cerrarlo primero ahí está normalmente los iconos suelen tener dos características que las diferencian de las imágenes comunes

primero como sabemos que el icono se va a cargar muy chiquitito acá arriba es decir se cargan acá acá arriba sabemos que no tiene que ser una imagen imagen muy grande entonces lo que solemos hacer es tener una imagen de 32 píxeles por 32 píxeles o en su defecto de 64 por 64 pero es más que suficiente tiene que ser una imagen Que no sea pesada para que no solamente cargue más rápido la página sino que encima se visualice bien De nada no sirve tener una imagen 4k si se va a cargar recontra chiquitito se

va a ver Exactamente igual que si tuviéramos una imagen que no llega ni siquiera a 480 Entonces mejor nos encargamos de poner una imagen chiquitita y es mejor yo por ejemplo Busco el logo de 13 acá seguramente vamos a encontrar esto que está acá que es como el loguito voy a Venir a la carpeta donde tengo alojado esto que sería acá y lo pego voy a guardarlo como icono.png acá lo tengo abierto lo voy a abrir con gim básicamente tengo que abrirlo en un programa de edición para poder dimensionar lo es decir le voy a

dar la dimensión que necesitamos vengo acá arrastro hasta acá y acá me carga la imagen perfecto voy a seleccionar que el tamaño del Lienzo de la imagen sea de 64 píxeles por 64 píxeles redimensionar y Ahí está qué hago ahora Bueno lo escalo para que el logo me entre acá Ahí está lo ideal es que la imagen ocupe toda la pantalla Entonces yo en vez de ponerle adaa voy a dejar que se vea completa La para que se vea más grande y en mejor calidad todo lo otro lo borro a la ahí estamos la voy

a sobreescribir Ahora vuelvo al código y voy a poner acá el href y voy a poner el icono.png acá me carga y esto acá si se fijan ya me estaría cargando el icono Pero por un tema de compatibilidad se recomienda poner el tipo en este caso va a ser una imagen image png esto se recomienda poner para determinar y establecer le al navegador queé es esto Esto va a hacer que cargue más rápido va a ser un tema más más interno que que sirve ayuda y suma Ahora hay mucha gente que pone diferentes tipos de

iconos y por ejemplo en vez de ser pun png utiliza punto ico para que haya mucha más compatibilidad en Windows por Ejemplo o en otros dispositivos a veces no carga si ponemos el punto ico Entonces es muy variable yo suelo ponerle una imagen png que tiene un fondo transparente y así me queda ya para mí con esto suele ser más que suficiente Y acá arriba visualizar yamos el icono esto que está acá justamente vendría siendo lo que yo les decía que era el favicon esto así como lo ven se llama favicon básicamente el iconito que

nos aparece acá arriba en la pestaña y Después tenemos los metadatos Okay acá vamos a prestar atención porque vamos a ver lo que son las los metatags los metatags o metaetiquetas son como etiquetas que tienen la única finalidad Okay de describir ciertos aspectos de nuestra página web Eso es todo proporci información sobre nuestra web en el G van las metaetiquetas y como ya sabemos no son visibles para el usuario por medio es decir quien visita nuestra página no puede ver las metaetiquetas Pero son importantes para el seo es decir el posicionamiento web de nuestra página

los motores de búsca es importante también para definir Cómo se va a mostrar nuestra página cuando un enlace la llame en una red social ahora vamos a ver cómo es esto y también a veces para la accesibilidad Pero bueno hasta acá llegue el primero es el meta charset utf8 que de hecho si ustedes se fijan cuando nosotros ponemos html5 acá con el plugin de este que está Acá ya viene configurado por defecto es decir voy a copiar esto que está acá que es el icono voy a volver acá y lo voy a pegar acá abajo

así puedo explicarles todo esto bueno básicamente Bueno este atributo que está acá ya es hora de que lo conozcamos es una buena práctica porque básicamente le ahorra el trabajo al navegador de intentar entender en Qué lenguaje se encuentra el contenido de nuestra página en este caso le decimos Che el lenguaje está en español es es de Español así que ya con esto nos ahorramos que la página ya tenga que andar pensando qué lenguaje es ya está un punto a favor el meta charset utf8 básicamente es una etiqueta es un metatag que le está diciendo al

documento Cuál va a ser la codificación que va a utilizar utf8 es un tipo de codificación que utiliza caracteres unicode que básicamente serían en este caso este tipo de codificación permite todos los caracteres utilizados por Todos los idiomas del mundo es decir nosotros antes por ejemplo cuando no teníamos esta codificación que por suerte ahora viene en la mayoría de los navegadores configurada por defecto nosotros escribíamos algo y poníamos por ejemplo un acento y el acento no se mostraba Así es decir no se mostraba así el acento se mostraba toda una letra rara todo un código

raro porque el navegador no entendía los acentos porque no lo interpretaba es decir no era capaz De entender un acento utilizamos esto para decirle y terminar de asegurar que la codificación universal permita todo todo tipo de caracteres acentos todo todo ahora si no es necesario para qué la ponemos Y esto no es para nosotros posiblemente ustedes sin esto puedan poner acentos y demás ahora si no lo pueden poner posiblemente porque tengan una compu muy vieja o un navegador muy viejo o algo antiguo deben tener entonces por eso están intentando Utilizar una codificación que no que

no es compatible con ustedes pero al poner esto que está acá ya se elimina todo y ya pueden ver los acentos las señas etcétera Esto está bueno porque si hay un porcentaje de visitantes de su página que utiliza navegadores antiguos esto les va a salvar la vida Bueno y por otro lado tenemos esta otra etiqueta que está acá que es otro meta que es un meta viewport ya de ahora en más nos vamos a olvidar de este atributo porque todas Las demás etiquetas tienen name name y content nada más todas las metatags van a tener

el name que es el nombre de lo que están declarando o definiendo de la página Qué información estás declarando y el contenido que va a ser qué queres decirnos Okay este caso vamos a trabajar con el viewport y vamos a decir que el wid va a ser igual al wid del dispositivo es decir el ancho total de la página va a ser igual al ancho total del dispositivo Esto está bueno porque Cuando tenemos por ejemplo tablets o celulares y demás automáticamente hace que todos los dispositivos estén adaptados a a nuestra página al revés que nuestra

página está adaptada a todo dispositivo Entonces ahora vamos a ver Por qué es importante eso y después tenemos esto que dice initial scale que esto es para el tema del zoom si nosotros por ejemplo venimos acá y ponemos un zoom de 300 cuando vayamos a una página que tiene el uno básicamente Va a volver a restablecer el zoom en uno cuando cargas la página por primera vez Este es el zoom que va a tener eso es lo que hace esto básicamente se encarga de que el dispositivo entre con un zoom normal sin zoom y es

interesante Porque si yo por ejemplo esta etiqueta la saco y esto le doy en inspeccionar elemento y agrando un poquito van a ver que si yo acá sí se ve perfectamente pero si yo hago una prueba y veo cómo se ve por ejemplo en un iPhone 14 Pro Max van a Ver que así es como se ve realmente se vería así eh Y para leer el texto tendría tendrían que hacer un zoom Y eso está mal para eso utilizando esta etiqueta cuando actualizamos fíjense como ahora está un poquito más adaptado es decir pongo un párrafo

pongo un lorem actualizo acá arriba voy a poner un h1 Okay título y fíjense cómo está mucho más adaptado al contenido es decir esto es lo que vería un usuario de iPhone 14 Pro Max mientras que si nosotros Sacáramos esto quiero mostrarles bien la diferencia Así se ve en una en un iPhone 14 Pro Max pero si le pongo la etiqueta Así es como se ve esto literalmente lo que hace es eso es es adaptar lo que nosotros escribimos a los demás dispositivos Esto va a ser clave cuando trabajemos con responsive design que es justamente

esta forma de trabajar con el desarrollo de tal forma que lo que hagamos esté adaptado a todos los dispositivos no importa si un tramos de Tablet de un cellu de otro de una compu etcétera Esto va a ser importantísimo si le damos en meta acá tenemos un par de meta Okay normalmente tenemos el meta description que esto Estaría bueno poner un una descripción de más o menos unos 100 caracteres esta página web se trata de bla bla Bla y también se trata de bla bla bla no sé si son 100 caracteres o no pero más

o menos esta podría ser una descripción de una página Entonces el contenido es De qué trata la página Después tenemos otro meta que es el meta keyword que de hecho si quieren ahorrarse todo esto ponen meta dos puntos K W y le dan enter y ya carga todo es meta keywords y acá está el content acá van todas las palabras claves separadas por coma Por ejemplo si tu página web se trata de no lo sé vender frutas y verduras tus palabras clave van a ser frutas fruta banana manzan 1 kg de papa estas van a

ser tus palabras clave es decir cuando alguien Busque en Google no sé eh 1 kg de papa tu página va a tener más chance de salir porque Google va a tener en cuenta que tu página se trata de 1 kg de papa lógicamente va a leer tu página Y va a ver si es apta o no pero va a darle más prioridad que si no lo tuviera ahí sería todo Vamos a ponerle un título que por ejemplo sería página de venta de fruta después tenemos la etiqueta meta autor que esta es una etiqueta que básicamente

Define Quién es el autor de la página y En este caso va a ser Lucas dalto porque yo soy el desarrollador que la creó el autor el creador es Lucas dalto después tenemos la etiqueta meta name robots Okay Esta es una básicamente etiqueta creada solamente para que los motores de búsqueda la lean y sepan Qué hacer si el contenido es no follow le estamos diciendo Ey No indexes mi página es decir no muestres mi página en los resultados de búsqueda tenemos no sniped que no sniped es para esto no para que No se muestre un

fragmento de nuestra página en un navegador yo por ejemplo Busco top mejores comidas del mundo el resultado que me salta es un fragmento de esta página traveler.es si yo pusiera el No snipe no va a permitir que Google ni ningún motor de búsqueda agarre un fragmento de nuestra página y lo muestre yo por ejemplo Busco Translate Okay es un snippet del traductor de Google pero si nosotros lo abrimos se abre en traductor es un fragmento de código que Google extrae con el no snippet hacemos que eso no suceda después tenemos el no archive okay Que

Esto hace que Google no pueda almacenar una copia de nuestra página web en en caché básicamente no puede almacenar información en caché Para qué nos sirve esto simple si el usuario tarda 3 segundos en hacer que toda la página le cargue Qué hace Google esa página la guarda en caché Para qué para que cuando el usuario vuelva a entrar no tarde 3 segundos en mostrarla Tarde menos de un segundo Entonces de esa forma el usuario cada vez que quiera entrar a leer algo o a ver algo Todo lo va a tener cargado en cach entonces

la página le va a cargar más rápido porque ya es como que la guardó Entonces esto lo que hacemos es impedir que no la guarden caché Está bueno cuando por ejemplo necesitamos que nuestra página web tenga cambios constantes siempre tiene cambios y de hecho nuestra página web depende de cambios Como por ejemplo Tenemos una página que se encarga demostrar la diferencia entre el dólar argentino y el peso el dólar o entre el dólar y el bitcoin Cuántos dólares vale un bitcoin necesitamos que la página esté en constante actualización Entonces no nos sirve de nada que

eh el número ese se guarde en caché Porque si pasan dos horas el valor va a cambiar necesitamos que no se archivo en cach después tenemos el no image Index para que no se indexen las imágenes es decir Si yo por ejemplo pongo una imagen en mi página web si vamos a Google imágenes y La buscamos puede aparecer la imagen pero si le damos no image Index las imágenes no de exam que es como algo antio no de todas las que les estoy diciendo normalmente no se recomienda usar ninguna excepto para casos puntuales pero que

sepan que si quieren lo pueden hacer También tenemos el meta name title que esto en realidad es el título de la página casi que ni se usa Este ya pero se puede usar venta de frutas va a ser el título por ejemplo esto serían las etiquetas meta comunes Hay un montón más también hay más valores para robots hay más valores para todo pero ustedes cuando vayan a tener que desarrollar sus páginas web su necesidad que tengan la pueden Google y la van a encontrar estos son los meta eh los meta Met tags más comunes y

después tenemos los Open grap Met tags o los meta name Open grap dos puntos y el Metatag para qué jorak es esto simple ustedes por ejemplo entran a Facebook fíjense que acá cuando yo est posteé el curso sql esto se puso automáticamente yo solamente puse el enlace ven acá puse el enlace y Facebook automáticamente cargó el título del video algo de la descripción el enlace que sería youtube.com y una imagen que es la imagen de la miniatura que yo usé si yo por ejemplo pongo youtube.com barsy dealto Okay es decir esto es un enlace Fíjense

que acá en Twitter lo que salta es esto que está acá esto que está acá es lo que YouTube configuró que se vea YouTube configuró que cuando alguien ponga mi enlace en Twitter aparezca este enlace que está acá esto que dice soy alto y un poquito de la descripción yo voy a youtube.com soy de alto vengo acá y le doy en inspeccionar vamos arriba de todo y vemos un poco en el Gea de las etiquetas meta que tiene Vamos a darle meta meta vamos a ver que acá Tiene meta Name og vamos a poner og

dos puntos Acá está acá fíjense el o title dice soy dalto entonces Twitter acá pone soy dalto el o. image pone esta imagen buscamos esto acá debería saltarnos esto Perfecto es lo que nos salta y el description determina esto Mi nombre es Lucas dalto soy un prador Argentina y es exactamente esto Mi nombre es Lucas dalto PR Argentina Entonces nada eso hace esta etiqueta tenemos og title y acá ponemos el content y así tenemos un Montón tenemos el og image y el og description estos son los más comunes bueno y después tenemos el otro que

es metatag URL que este también es muy importante pero acá por ejemplo básicamente apareció la URL real a la que se tiene que redirigir a la persona que accede de esta forma ahora si ustedes quieren ver una previsualización de esto es fácil por un lado tienen el de bagger de Facebook el de bager de Facebook es este que está acá le dan Clic y se debería abrir esto y acá nos va a pedir que iniciemos sesión Yo lamentablemente no tengo forma de chequear porque no tengo mi celular acá para confirmar Así que no puedo entrar

pero esto que están viendo ahora en pantalla es básicamente ente soy yo haciéndolo desde mi propia casa y acá es como realmente pueden ver y chequear que así es como se ve si se publica desde Facebook También tenemos el post inspector de linkedin que si entramos Acá al post Inspector ven acá les va a pedir una URL si yo por ejemplo pongo youtube.com barsy alto acá van a ver cómo se muestra esta página El linkedin Cuando alguien la publica Cuando alguien lo publica el linked mi mi YouTube Así es como se muestra ahora si ustedes

quieren ver también hay uno de Twitter que bueno Lamentablemente el preview del Twitter car ya quedó obsoleto pero Bueno hay un montón y si realmente quieren ver cómo se muestran cada red social Metatags.io Esto es lo que tienen que buscar y acá les va a funcionar Realmente si ustedes buscan youtube.com barsy d'alto por ejemplo esto les va a mostrar de verdad qué es lo que se muestra vamos a ver la pantalla completa esto que está acá por ahora lo vamos a pasar acá a la derecha tenemos todo así se muestra en Google acá arriba nos

dice ven Google así se muestra con el enlace y todo así se muestra en Twitter ya lo vimos se muestra así así se muestra en Facebook Así se muestra en linkedin que esto ya también lo vimos así se muestra en Pain V así se muestra en slack y de esta forma nos ahorramos tener que chequear red por red Cómo se ve esto igual es para cuando tenemos nuestra página web ya subida a internet que por cierto si quieren saber cómo subir una página web a internet hace un mes subí un super curso de Hosting para

que sepan todo acá tienen todo sobre el alojamiento web todo la mejor plataforma De Hosting todo sobre configuración todo todo lo que necesitan saber es increíble está en este curso Así que si quieren subir su página web a internet el siguiente paso que tienen que hacer es verse este curso y dura repoquito 2 horas nada más ahora si ustedes quieren ahorrarse todo esto directamente y no quieren andar probando Y ustedes quieren generarlo directamente desde acá esto les genera las tres meta attacks más importantes que son justamente la imagen El título y la descripción acá por

ejemplo si ustedes ponen no sé tienen una página de frutas fruta y verdura por ejemplo y quieren que se vea fruta y verdura la descripción va a ser fruta y verdura para todo el mundo tengan frutitas gratis manzana lechuga y 1 kg de papa y ya está Entonces qué hacemos generamos esto le damos en Head code y acá tenemos todo el código para copiar y pegar en nuestra página web para que se vea así tal cual como estamos viéndolo Acá en todas las demás plataformas la verdad que está bueno es importante no nos cuesta nada

Está bueno cuando ustedes realmente creen su página web esto Ahora no pero cuando la creen y cuando la trabajen si no la van a hacer dinámica encárgate de chequear y ver esto cómo hacerlo de forma nativa si la van a hacer dinámica ya lo van a tener que resolver con otra tecnología pero nada investígalo que la verdad que es un tema bastante interesante y es muy lindo Porque hace que nuestra página esté mucho mejor posicionada encima Pero básicamente Hasta pueden jugar bromas o sea ustedes tranquilamente podrían hacer que cada vez que se llame a la

imagen se muestre un pen enorme Por más que cuando entren hay un contenido recontra educativo o sea pueden hacer de todo lógicamente No hagan esa estupidez que acabo de decir pero nada que sepan que se puede hacer de todo bueno ahora sí terminamos esta sección de metatags Comentarios y Fabi comimos tres de las cosas que más se usan cotidianamente en un toque Así que ahora vamos a pasar a ver cómo funcionan los textarea que son importantes entender el funcionamiento de los textarea porque básicamente son como una especie de input pero más grande para escribir más

cantidad de texto y tiene otra propiedad bastante importante que podemos aprender a trabajar así que bueno vamos a la sección para entender Cómo funcionan los Text área Che al repedo me qued este archivo de estilos Eh no lo usamos ni un poquito Bueno ahora lo que vamos a ver es el uso de los text Area qué J AC son los text Area Bueno muy simple es básicamente como un input Solamente que te permite escribir más cantidad de texto o sea texto en varias líneas pero lógicamente tiene sus características sus particularidades como que tiene algunas cositas

que tenemos que retocar para que se vea como un input más yo voy A crear un un formulario y adentro de cada formulario voy a poner este elemento div que va a dividir y vamos a poner adentro un input Esto sí va a suceder acá voy a poner un name por ejemplo tu nombre Play holder nombre completo vamos a crear otro input bueno Igual acá no va a name Vamos a ponerle type nombre completo acá va a ser type email vamos a olvidarnos del name por ahora y vamos a separarlo en divs distintos no se

olviden que div es un Divisor es una etiqueta que no tiene ningún tipo de rol más adelante lo vamos a ver pero es una etiqueta que no es semántica para nada Es decir es simplemente un bloque común no tiene ningún tipo de uso específico para algo podemos usar la cantidad de divs que querramos siempre lo importante es utilizar la etiqueta que tengamos que utilizar por ejemplo en lugar de un form no utilizamos un div Por más que estructuralmente funcionen Exactamente Igual no usamos un form porque es la etiqueta para formularios justo form sí funciona un

poco distinto pero lo que vo es que tenemos un montón de etiquetas que no como footer como asai como header como nav y aún así no vamos a usar di vamos a usar etiqueta correspondiente este caso Sí porque solamente es para separar yo tengo esto acá vamos a venir a estilos vamos a abrir una pantalla al lado vamos a correr el servidor para que nos cargue lo nuevo Acá está tenemos Esto yo lo que voy a hacer es voy a darle al Body un margin cero y voy a venir a los inputs y darle Z

Wi del 100% en este caso como vemos tenemos un desbordamiento por qué porque los inputs tienen un padding y un margin mínimo si yo por ejemplo le saco el padding en este caso el padding va a ser cero y el margin va a ser cero ahí se ajustaría pero aún así tenemos el problema de los bordes tenemos un Border y le damos none Y ahí sí tenemos esto bien el problema De esto es que la verdad que no se suele trabajar así solamente para no tener La Barrita de scroll para esto ya sabemos qu es

lo que tenemos que hacer y es trabajar con la propiedad Box sizing Border Box y de esta forma ya se adapta y no tenemos que andar haciendo todo lo anterior esto lo vamos a minimizar lo que yo quiero hacer ahora es tener un margin de unos 20 píxeles Esto va a tener un un mar un margen de 20 píxeles Perdón lo que yo quiero hacer ahora es Hacer que los div en este caso vamos a ponerles nombres correctos vamos a poner la clase form input Ahí está vamos a hacerlo un poquito más chiquito para que

se entienda más y a estos divisores Les estamos poniendo esta clase Entonces ahora estiz la clase form input Ahí está y ahora podemos venir acá y decirle Por ejemplo que van a tener un padding de 20 píxeles y arriba y abajo van a tener un padding de 10 píxeles perfecto yo al formulario le voy a dar un background Ed Ed Ed que es este gris que podemos apreciar aún así arriba y abajo voy a darle No si 10 está bien yo voy a agarrar a los inputs y voy a darles un padding de unos se

píxeles por 12 píxeles y ahora sí tenemos unos inputs lindos esto que está acá en vez de darle 10 le voy a dar también seis ahí estamos y borde le voy a dar solamente un borde left dos píxeles solid y le vamos a dar que sea un color 666 ahí está el problema de esto es que se nos pone un Borde en todas las direcciones para evitar esto antes del Border left le damos un Border none para que el borde no exista por defecto y todas las propiedades se configuran en cero todo nulo y acá

especificamos el Border left lo ponemos antes porque si lo ponemos después se sobreescribe y no tenemos borde Entonces lo ponemos antes ya vamos a ver más adelante en el apartado de css intermedio Cómo funciona esto de reescribir propiedades el Qué significa La cascada la herencia y un par de cosas más como la especificidad son cosas super importantes pero por ahora no De hecho acá le voy a dar el borde de tres píxeles y Esto va a ser un poquito más oscuro voy a tener nueve acá no va a ver nombre completo sino que va a

ser email Ahí va nombre completo email voy a poner un h2 que va a ser formulario de contacto y voy a agarrar el h2 y le voy a dar un textal in Center Ahí estamos y voy a decir que el font family va a ser San serif como me gusta a mí ahora al formulario le voy a dar un padding 40 píxeles arriba y abajo y unos cero píxeles a los costados y ahí tenemos esto no me gusta voy a darle solamente 20 lo tenemos adaptado a dispositivos móviles como ven esto en dispositivos móviles se

adapta Así que está lindo por eso de hecho al form le vamos a usar una propiedad llamada Max withd que Esto hace que lo máximo que se pueda estirar sea un número en este caso el Max withd Va a ser de 600 píxeles por ejemplo entonces más que esto no se estira Y si queremos que esté centrado qué hacemos le damos un margin auto y ahí se centra siempre entonces si esto se agranda siempre va a estar el formulario centrado yo por ejemplo le doy en inspeccionar Y lo damos acá si tiene tiene que achicar

se achica pero si se tiene que agrandar de más se centra correctamente De hecho acá el Max wid va a ser de 500 porque no lo necesitamos de Más de 500 tenemos el formulario de contacto el color por defecto que le vamos a dar al Body va a ser un Hash 444 porque no queremos que sea del todo opaco es decir del todo negro Aunque bueno es del todo opaco técnicamente pero bueno y al formulario le voy a dar una sombra le vamos a dar un Box Shadow cer píxeles cero píxeles 45 píxeles y vamos

a hacer que tenga un color este que es como una sombra muy leve voy a dejarlo en siete y acá le voy a bajar a 25 lo dejo en seis y le doy en 35 y vamos a hacer lo mismo con los inputs le vamos a dar un Box Shadow c píxeles C píxeles 15 píxeles le vamos a dar y un 00 un porque con esto es suficiente Y ahora sí tenemos un formulario de contacto ni lindo ni feo es un formulario de contacto de hecho el h2 en este caso no estaría mal ponerlo adentro

Así que lo vamos a dejar adentro por qué no vamos a agarrar y darle un margin cero y vamos a darle un margin bottom 10 Píxeles para que se separe un poquito de esto y al form sí le vamos a dar un margin top de unos 50 píxeles para que no esté tan arriba no tenemos nuestro formulario de contacto Ahora yo lo que quiero hacer es bueno crear un campo más para que el usuario me pueda rellenar por ejemplo No lo sé un campo de texto no no me gusta mucho blanco creo que a ustedes

tampoco les gusta el color blanco así que lo único que voy a hacer va a ser cambiarle los colores vamos a Hacer que el color de fondo del Body sea este oscurito Vamos a darle en dos do dos y a este le vamos a dar un background color transparent para que sea transparente tranquilos ya aquí van a ver cómo vamos a hacer se me acaba una idea linda para un diseño el color acá arriba lo vamos a dejar en no blanco sino que en e e e es un casi blanco los inputs van a tener

un background transparente también fíjense que feo No está se nos fue el margin top igual no Sé por qué ah margin top acá la sombra la tiene igual Ahora sí la sombra la podemos hacer más pronunciada y de 55 píxeles ahora la sombra queda mucho mejor le voy a dar una opacidad de nueve así tampoco están exagerada Ahí está Esto para mí es mucho más lindo para mí De hecho una cosa que podemos llegar a hacer es en vez del Border left darle directamente un borde de un Pixel solid a todo y redondeamos cuatro píxeles

pero en este caso el borde sería de un color Más oscurito sería por ejemplo de 666 nada y acá tendríamos esto esto lo hago principalmente por ustedes para que no tengan que andar viendo todo un texto así esto que está acá lo vamos a poner también vamos a bajar la intensidad al h2 le vamos a poner un text transform uppercase así se pone todo en mayúscula pero también le vamos a dar un font weight de 100 así se pone más chiquitito y un font size 22 píxeles Ahora sí y va a tener un padding de

sí por qué no unos 10 píxeles me gusta mucho más Este formulario de contacto si ahora hago un zoom ven que se va adaptando a la diferente resolución que tiene ahora podemos escribir y fíjense que el color va a estar en negro Así que a los inputs tenemos que darle un color e e e Ahí está y ahora si escribimos va a estar en este color ahora sí me siento preparado acá vamos también a aumentar esto vamos a ponerlo en cuatro tres en tres está bien Ahora sí Perdón Le juro no le saco Más tiempo

la único vamos a redondear Border radio ocho píxeles de borde Ahora sí Che si en vez de negro le ponemos blanco pero con dos queda un poquito mejor en blanco No sí queda mejor en blanco eh mucho mejor Bueno ahí está Perdón perdón bueno mírenlo como algo positivo estamos haciendo un ejercicio como se lo dije antes no es que estamos haciendo todo esto al pedo y Estamos perdiendo horas de curso Porque después vamos a ver solamente una propiedad No Gente hicimos un formulario de contacto gente por más que no funcione una hicimos el diseño de

un formulario de contacto Entonces esto es super valioso para mí que tengan la capacidad de hacer esto es super valioso entonces que lo puedan desarrollar conmigo es más valioso todavía lo que les quiero mostrar es justamente Cómo funcionaría una de las de los nuevos elementos que llama textar para eso vamos a crear otro div que también va a ser un form input Okay y vamos a agregarle a este from input un text Area el text Area no es como los inputs que funcionan así y tenemos que poner el type no no el text área es

como un elemento más es un elemento que podemos rellenar adentro Ven actualizo y acá tenemos el elemento Solo que la diferencia es que podemos escribir en este elemento y tiene esto que a mi gusto es una porquería que básicamente ven se trabaja de esta forma que es eh cambiando las dimensiones de Este elemento yo lo que voy a hacer es darle las mismas propiedades que tiene el input para eso esto lo vamos a ver más adelante la sección de selectores avanzados pero una forma de seleccionar dos elementos al mismo tiempo es con una coma si

yo pongo coma Y le doy text área lo que acabo de hacer es darle el mismo estilo al text arrea y al input es decir todo este este bloque que tengo acá No se lo di solo al input se lo doy al input coma y al text área estos dos Elementos van a estar siendo a los que se les va a estar aplicando estas propiedades Entonces es útil cuando quieren seleccionar más de un elemento Che en este caso Esto es algo muy común porque normalmente el text arrea tiene casi las mismas propiedades que input Solo

que algunas específicas que los inputs no necesitan y es lo que vamos a ver ahora ahora el textarea tiene todo lo que necesitamos una cosa importante que no les mencioné es que el text arrea Fíjense tiene por defecto configurado para que si le damos un wid de 100% no se ponga al wid de 100% esto es por sus propiedades iniciales las que trae configuradas por defecto que tranquilos que ahora las vamos a ver si ustedes quisieran que el text ara tenga un Wi mínimo del 100% ahí deberían poner min withd 100% y el textarea Ahí

está teniendo un Mining wh del 100% el lo bueno de esto es que van a evitar que se risee hacia los costados pero solamente Hacia dentro porque para afuera se puede cambiar la dimensión y Esto hace que se nos cague todo o sea es decir si nosotros podemos hacer esto de Modificar el tamaño no sé estamos arruinando el layout entonces para evitar esto fíjense que yo hago esto un poquito más grande estamos arruinando el layout Esto está rompiendo el componente que desarrollamos para eso usamos la propiedad resize tenemos varios valores el primero que viene es

Boot Boot lo que Nos permite es hacer que pueda resicar tanto en el eje x tanto en horizontal como en el eje I que es en el eje vertical si yo solamente quisiera que se pueda desplazar en el eje vertical le escribo vertical entonces de esta forma solamente el scroll se puede hacer así ven solamente hacia arriba y hacia abajo el problema que tenemos con esto es que de vuelta puede romperse esto de hecho si actualizo la página esto se va a cargar así y si yo hago esto fíjense Qué Pasa ven tenemos como que

el texto se nos oculta y se nos genera esta Barrita de scroll que no es tan linda lo que podemos hacer es venir acá y poner un min hate por ejemplo 200 píxeles Uy Perdón esto no esto tampoco para eso vamos a agarrar el text arrea y modificar específicamente el text arrea Para no afectar a los demás elementos Vamos a darle un wid 100% a estos y al text aras a quien le vamos a dar un min wid del 100% un resize vertical un min Hate 100 píxeles por ejemplo ven ahí tiene un mínimo y

un Max hate de 200 píxeles Entonces esto lo que hace es hacer que como mínimo tenga este alto y como máximo tenga este alto entonces más que este Rango no nos podemos mover Esto está bueno porque por defecto va a cargar con el que tiene como valor mínimo que es este esto también funciona con placeholder o sea podemos ponerle un placeholder deja tu mensaje y acá dejas tu mensaje lo único que si están viendo La tipografía que trae por defecto no va a ser la que nosotros le pongamos el text área trae otra tipografía aparte

Si queremos que el textarea tenga la misma tipografía la tenemos que poner específicamente en el text área y ahí se pone porque si no el textarea te da de su propia tipografía por defecto acá voy a sacarle el padding que de 12 píxeles a los lados voy a darle ocho y seis y de esta forma podemos crear un elemento de text área ahora directamente si no Queremos que se deslice ni en vertical ni en ningún lado le damos en resize none y ya está ya se quedó así no le podemos cambiar el tamaño y va

a quedar ahí por más que esto crezca ya está el tamaño no se cambia se nos va a hacer esta Barrita de scroll y vamos a tener que aprender a manejarla pero el tamaño no va a cambiar a mí esto no me gusta mucho por suerte ahora se está por implementar una nueva funcionalidad para que el textar se vaya adaptando al Contenido la propiedad sería form sizing y sería content esta es una propiedad que va a permitir que nosotros vayamos escribiendo y que mientras escribimos el contenido se ajusta automáticamente al tamaño Entonces si escribimos y

se hace más grande se agranda si no se achica por ahora no está disponible pero por ahí cuando ustedes estén viendo este curso ya esté disponible Así que pruébenla si el texto se adapta funciona si no no Esta es una nueva Característica que están implementando ahora así que bueno ahora están viendo en pantalla cómo funciona form sizing content cuando el contenido crece la caja también crece Y si el contenido se hace más chiquito la caja también se hace más chiquita es una propiedad nueva para mí va a ser la mejor forma de utilizarla porque si

no tenemos que utilizar javascript después tenemos que utilizar javascript para que el contenido se adapte automáticamente Entonces eso a mí no me gusta mucho que se adapte yo normalmente lo que suelo hacer es el resize lo dejo en none y no le pongo un Max hate le pongo el min hate y ahí queda así fijo si el usuario quiere escribir más de lo normal sigue escribiendo abajo personalizo la barra de scroll que después más adelante en otro apartado van a ver cómo se puede personalizar también La Barrita de scroll para que sea más linda Bueno

y después Obviamente el botón que acá no Pusimos ningún botón pero también se pondría un botón obvio no después tenemos una propiedad para el textarea que es rara pero se usa el read only que esta es una propiedad para que solamente se pueda leer si yo por ejemplo acá escribo un texto Okay este texto no se puede modificar Es solamente una propiedad que es solo de lectura Esto hace que el text área solo se pueda leer y nada más que leerlo no voy a poder hacer otra cosa que no sea leerlo Aunque Lo quiera modificar

no puedo si lo saco ven ya puedo modificarlo y demás es una propiedad que es bastante Útil para por ejemplo cuando nosotros estamos trabajando eh mostrarle información al usuario que no se puede modificar se lo mostramos así después tenemos otra propiedad que llama dice Ah otra cosa si ustedes ven que los atributos los pongo así require como que ya saben que es un atributo que no necesita valores disable como read only por ejemplo Estos son Atributos que no necesitan valor justamente se llaman atributos booleanos porque no necesitan valor solamente componerlos es suficiente de hecho sus

valores son true o false si lo ponemos es como si fuera true Entonces si si no lo tiene puesto no cuenta si lo activamos cuenta Por eso no necesitan ningún valor porque son atributos que solamente componerlos es como si ya les dijéramos que sí son valores que solamente funcionan por sí o por no y si No están puestos es como si no Y si los escribimos es como que sí Entonces no hace falta que le escribamos acá y pongamos así on y ahí está no así ya no solamente componer redo es suficiente bueno También tenemos

el disable Okay que esto básicamente lo que hace es desactivar el campo de texto si venimos acá y escribimos es parecido al read only la diferencia entre disable y read only es que cuando nosotros tenemos la propiedad read only es importante porque Es algo que no puede podemos modificar pero fíjense que si le doy clic elemento hace un Focus si yo hago Focus acá arranco escribir hago Focus acá arranco escribir acá puedo hacer Focus Solo que no puedo escribir y cuando este formulario se envíe a un servidor los datos que estén acá dentro también van

a ser enviados solamente que lo único que no podemos hacer es escribir encima Solo que si le damos disable acá ya directamente no podemos hacer Focus ven Yo le doy clic acá se hace Focus clic acá se hace Focus acá ya no nos aparece ese bordecito blanco porque no podemos enfocarlo y no solamente eso cuando mandemos el formulario este campo no se va a enviar Esas son las dos principales diferencias con read only solamente no lo podemos modificar pero se puede enfocar el campo y se puede y ese ese dato se envía en cambio con

disable no se envía el dato y no se puede enfocar después tenemos Max length que esto Básicamente nos dice Che cuánto podemos escribir como máximo de texto en Twitter por ejemplo en su momento podríamos llegar a decir que eran 140 caracteres bueno 140 Entonces hasta ahora solamente podemos escribir 140 caracteres ven si escribimos más de 140 caracteres no podemos escribir no nos deja Por más que est escribiendo no me deja ven borro escribo y no me deja por qué Porque no me deja escribir más de 140 caracteres como si fuera Twitter ven es más lo

que Solemos hacer acá es cuando detectamos que escribió más de 140 le ponemos un mensajito no puedes escribir más de 140 caracteres Twitter no hace esto Twitter te deja Y si te pasas te está avisando que te estás pasando yo no la uso esta pero la pueden usar ustedes Entonces lo voy a sacar también Ahí está otra cosa es que el Play holder no se van a ver si el textarea tiene este espacio que está acá esto que está acá cuenta como un espacio si ustedes quieren que el Play Holder se vea no dejan el

espacio y ahí se va a ver y después tenemos otra propiedad que es WAP que no la vamos a ver ahora la deberían ver cuando vean javascript pero básicamente WAP básicamente es una propiedad que controla Cómo funcionan los saltos de línea si es soft no incluye los altos de línea en el texto y si es hard sí lo hace pero olvídense ignoren lo no vamos a trabajar con javes Entonces no lo vamos a ver es irrelevante en este caso Así que olvidémonos de eso con el que viene por defecto ya es más que suficiente porque

la mayoría de los casos lo usamos así y si nosotros no lo vamos a usar normalmente es porque le vamos a dar una funcionalidad puntual que dependa de esos espacios en línea y para eso tenemos que saber mucho más de programación Y si sabemos más programación vamos a ver esta propiedad tan básica y como manejarla así que no hace falta ni que las explique ahora Porque es estúpido entonces bueno básicamente acabamos de ver otra forma de o otra forma de pedir datos no los inputs ya sabemos que nos piden diferentes tipos de datos Y en

este caso El problema es que no podíamos tener ningún input que sea largo grande para escribir muchas líneas bueno acá lo tenemos es lo mismo que un mail venimos acá mi nombre es Lucas dalto mi mail es [email protected] y el mensaje es Hola Mi nombre es Alto quería acercarle mi mensaje para poder informarle que y arranco escrib un texto termino y lo envío Punto Final listo en este caso justo esto es bastante chiquito Así que podría llegar a dejar un min he de 140 píxeles por ejemplo y ahí lo hacemos o también pueden hacer que

el ancho sea por líneas en vez de darle un min hate acá lo que pueden hacer por ejemplo es hacer que tengo min hate irrelevante Como por ejemplo 100 píxeles para que no se vea Más chiquitito pero acá en en el Play holder hay una propiedad que se llama columnas o rows que básicamente es la cantidad de líneas que puede tener si yo acá por ejemplo pongo cinco voy a sacarle el min he Ahí está si yo pongo seis por ejemplo siete ven cómo va cambiando Esto bueno Esto es la cantidad de líneas que le

vamos a permitir al usuario escribir yo por ejemplo escribo acá y si pongo enter me tira scroll no porque solamente se puede escribir una Línea yo le pongo dos es para que el usuario escriba hasta dos líneas si yo le pongo tres es para que el usuario escriba hasta tres líneas ven cuatro Ya me tira La Barrita esta de scroll me mantengo tres y me mantengo Entonces yo acá lo que hago es ponerle por ejemplo seis para que escriba hasta seis líneas y me ahorro el min hate porque el min heate lo que hace es

yo por ejemplo le pongo un minh de 200 píxeles Qué pasa Yo por ahí estoy escribiendo acá y lo que Pasa es que justo el texto se me corta ahí y me sale esta barra Entonces yo tengo que calcularlo Cuánto hago pongo 202 no 203 ahí me desapareció el scroll ahí me queda justito no pero qué pasa si de repente hago un mini zoom o lo saco o lo o de repente cambiamos el navegador o cambiamos una propiedad bueno para evitar tener que calcularlo tan exactamente en vez del min he qué hacemos venimos acá y

ponemos la cantidad de columnas le damos ocho bueno Que se mantenga en ocho y ahora podemos escribir hasta ocho líneas una dos 3 4 5 6 7 8 y si escribimos una más ahí se nos pone La Barrita de scroll pero si no hasta ocho líneas podemos escribir yo el Rose la verdad que lo uso está piola así que ya esto es a lección propia a pesar del Rose siempre está bueno tener también un min hate que en este caso le voy a dar el min hate 101 píxeles por ejemplo en este caso Vamos a

darle 102 pues ya sabemos que funciona con 203 Así Que la mitad de 101,5 vamos a tirarle uno más por las dudas y Esto va a ser el mínimo Entonces si estamos en un dispositivo móvil en donde los píxeles miden mucho más chiquitito Esto va a cambiar aún así le podemos dar esto con ems por ejemplo Entonces por ejemplo acá formulario puede tener un font family un font size por ejemplo de 16 píxeles por ejemplo y el form el h2 por ejemplo que está adentro de form en vez de darle un font size 22 píxeles

le damos un font Size 1.4em por ejemplo entonces cambio un poquito esto Sí ahí está 1.4m es parecido a 1,13m a mí me gusta está bien porque si de repente esto se adapta a dispositivos móviles va a permitir hacer que también el campo este se adapte lógicamente en el iPhone yo directamente le sacaría el margin top que tiene eso lo hacemos después después le enseño cómo hacerlo para que en dispositivos móviles tenga un estilo y en página tenga otro pero por ahora con esto Estamos bien es suficiente porque ya lo tenemos adaptado a móviles ven

la realidad es que está bueno porque ahora podemos directamente trabajar con los tamaños completos Entonces yo por ejemplo puedo en dispositivos móviles hacer que la tipografía sea un poquito más chica Entonces cuando yo sé que la tipografía es un poquito más chica porque por ejemplo esto no me entra en mi celular qué hago hago para que en dispositivos móviles un campo tenga otro Font size Entonces todos los elementos se van a hacer más chiquitos y no va a tener dándole uno a otro otro es decir si yo por ejemplo acá en este formulario solamente usara

píxeles si esto fuera muy grande para dispositivos móviles qué hago la próxima vez vengo a este elemento y esto lo cambio a 14 por ejemplo entonces automáticamente todo me cambia me cambia el texto del formulario me cambia me cambia todo se me adapta entonces esa es la ventaja de usar em lo Que vamos a hacer ahora es terminar acá vamos a ir directamente a otro más es decir vamos a ir a ver la siguiente sección estoy hablando de labels la sección de Label va a ser cortita Pero creo que es importante que consideremos los labels

a la hora de desarrollar cotidianamente Así que vamos a ver esto de los labels bueno básicamente lo que vamos a ver ahora son los labels y los labels es una forma que tenemos de etiquetar Individualmente un elemento de de de input es decir un campo que en el mismos datos al usuario tiene que estar etiquetado por un Label Está bueno porque hace que por ejemplo cuando apretemos en el Label automáticamente se nos haga Focus en el input no solamente eso también mejoran la accesibilidad la usabilidad para la gente que usa tecnologías de accesibilidad Ah y

también a veces queda mucho más lindo este es el formulario que teníamos Recién que lo trabajamos recién Qué pasaría si yo a esto por ejemplo le quisiera agregar un Label Cómo hago simple una forma interesante es venir acá dentro y poner Label y acá por ejemplo pongo nombre completo acá pongo esto y acá pongo esto en vez de nombre completo acá puedo poner por ejemplo email y acá mensaje entonces acá tenemos algo que queda bastante estético pero lo que yo voy a hacer es agarrar a estos elementos que serían labels vamos a abar Los labels

y vamos a darle directamente un font size 0.9em Ahí estamos ahí me gusta mucho más y vamos a darle un pequeño margin bottom de unos cuatro pixeles para que se separe un poco del espacio hacia abajo bueno justamente si acá le damos un margin Button de 40 píxeles no va a funcionar porque los labels Son elementos en línea y los elementos en línea no podemos modificar les el margin así tan fácilmente entonces para esto Voy a darles un padding directamente de cuatro píxeles pero acá tenemos otro problema tampoco podemos darles un padding Entonces cómo hacemos

esto tenemos varias formas una es venir acá y darles un margin top a estos elementos de cuatro píxeles por ejemplo entonces ahí se separó lo que queríamos o podemos venir acá y darle por ejemplo un Line h 2 por ejemplo y ahí tenemos el esto lo tenemos más separado acá le voy a dar 88 porque siento que es muy está muy grande El texto y acá estamos ahora sí tenemos un formulario como la gente y como se debe lo único de esto es que tenemos una redundancia por qué porque tenemos lo mismo que tenemos acá

lo tenemos en el Play holder Y eso no está bien cómo hacemos en este caso para que no parezca redundante bueno acá ponemos un ejemplo John email y acá ponemos ejemplo @gmail.com por ejemplo y acá en mensaje podemos poner deja tu mensaje y tres puntitos suspensivos entonces de esta Forma veo que le estamos dando una idea al usuario de qué cómo tiene que completar cada campo también podemos Modificar el Play holder ven que el Play holder tiene un color como gris bueno eso también lo podemos modificar así que preocúpense de hecho algo que podemos hacer

por ejemplo es hacer que los bordes sean de otro color por ejemplo vamos a hacer que sean de un verde Neón y al texto que está dentro le voy a poner el mismo color Entonces cuando yo Escribo ven esto no está mal pero la verdad que a mí no me gusta hacerlo así ahora por qué Porque al no poder Modificar el Play holder no entender Cómo funciona el outline y demás yo no no lo haría de esta forma pero nada que sepan que lo pueden hacer también y el texto está muy blanquito así que hasta

le podemos dar ddd darle acá también ddd y ahí estamos Sí ahí está con ddd para mí es mucho mejor que el e e e bueno gente Ya está ya tenemos un formulario Ahora una cosa que no les dije que yo les había dicho a principio del curso que se podía hacer es que cuando nosotros clique un Label Okay el Label debería poder focusear el elemento para eso tenemos que hacer que el input tenga un ID por ejemplo ID nombre Entonces yo en el Label pongo for y escribo nombre vamos a checarlo un poquito más

le pongo ID nombre y al for le pongo for nombre Entonces yo cuando cliqueo el Label ya está está enlazado es una forma de Enlazar el elemento vamos a hacer lo mismo acá le vamos a poner un for email y acá le vamos a poner un ID email acá le vamos a poner un for mensaje y acá le vamos a poner un ID mensaje ahora sí clique acá y se posiciona acá clique vamos acá se posiciona acá clique acá y se posiciona acá todo perfecto otra forma de enlazarlo si no lo quieren hacer con el

for y con el ID es en lugar de hacerlo así pueden ahorrarse los ID Okay se los ahorran Pero lo que sí están Obligados a hacer es abrir el Label y abarcar todo el input y terminarlo ahí básicamente ahora el input estaría como adentro del Label es una forma también muy usada ven el Tex estaría lo mismo y hacemos lo mismo con este Entonces nos quedaría Así que sacar el for y acá también tengo que sacar el for Ahora sí apretamos email y ahora sí focuse sea el elemento que tiene envuelto ven como digo también

para los lectores de pantalla sirve no solamente eso también Es bueno por ejemplo para darle clic en acepto los términos y condiciones Si yo por ejemplo acá pongo otro div vamos a crear otro elemento div y acá vamos a poner en vez de esto vamos a poner un input checkbox ven acá tenemos este cuadradito que está acá acepto los términos Y conciones entonces ahí está A este input le voy a dar una clase muy puntual checkbox y voy a venir acá y voy a poner checkbox y acá le voy a dar por ejemplo Que el

wid sea Auto entonces ahí se posiciona acá que es donde lo necesitábamos acá por ejemplo voy a hacer que el hate sea de 10 píxeles nada más y fíjense que a veces es complicado darle clic acá o sea realmente se vuelve difícil darle clic al botoncito Este Entonces qué hacemos apretamos el Label y es como si automáticamente diéramos clic Esto es algo Bastante piola porque básicamente nos ahorra tener que darle a este botoncito de acá y si el usuario le Pifia no hay problema porque Igualmente lo podemos hacer con el Label ven es una forma

acopada de hacerlo normalmente a los input type checkbox no se les eh da estilo así se les da estilo por atributo pero no llegamos a eso no lo vamos a ver todavía aún así lo vamos a dejar todavía así así lo pueden ver bien bueno así funcionan los labels es importante que los conozcan Lo único malo de utilizar esta forma de asociar los Label con el input es que cuando queremos que el Label esté separado del input Ya no lo vamos a poder hacer o sea si queremos que el Label esté por un lado y

el input por el otro no podemos Porque ahora el Label y el input van a estar siempre de la mano entonces cuando no queremos esto nada utilizamos el Label y lo asociamos por un for O sea si por ejemplo tenemos el Label acá arriba email y tenemos el input acá abajo por ejemplo acá sí ponemos for email y al input le damos ID email el email está acá y el input está Acá abajo pero qué hacemos clique acá y automáticamente se posiciona abajo entonces en estos casos está bien poner el for y el ID pero

si no también está bien pero yo prefiero ponerlo de esta forma que es ponerlo adentro Bueno nada ya sabemos cómo funcionan los labels no se olviden que siempre tienen que ser textos claros y precisos y ahora sí vamos con la siguiente sección que vamos a seguir viendo cosas sobre formularios vamos a ver cómo funcionan los selects y Los options y Cómo usar los datalist con los que son dos cosas muy interesantes pero básicamente es como un menú desplegable para elegir una opción es bastante copado es como otra forma de input pero no es un input

O sea si es un input pero no es la etiqueta input como tal son justamente Select option y datalist así que bueno vamos a verlos Bueno ahora lo que vamos a ver son los Select y los datalist y adentro bueno cada una de estos dos tienen otro 1 elementi que son los option básicamente los los Select son un tipo de campo de entrada que lo que nos permite es como seleccionar Okay una opción de entre varias opciones es como esa listita que se te despliega para que elijas una de todas eso es una y los

datalist es básicamente un input en que nosotros escribimos algo y se autocompleta con opciones que predefin imos es una mezcla entre un input y un Select algo así vamos a arrancar con el Select Yo acá por ejemplo tengo el acepto los términos y condiciones Acá tengo el mensaje y yo voy a crear acá otro div esto es el código que teníamos antes acá voy a crear otro div también este div como ya sabemos va a tener la clase form input y acá vamos a poner un Select el Select es esto que está acá que es

esta Barrita desplegable como vemos en este caso esta Barrita desplegable no tiene opciones no tiene nada para elegir para eso tenemos que Agregarlas es decir venimos acá y ponemos un option y acá ponemos el la opción uno y ahí tenemos una opción y así podemos hacerlo varias opciones opción dos y opción tres por ejemplo acá tenemos tres opciones diferentes es importante destacar que el Select también tiene que tener un name que en este caso por ejemplo el Select podría llegar a ser type of user por ejemplo es como esto sería tipo de usuario y acá

el valor va a ser este en este caso el Value por ejemplo podría llegar a ser value user One value user two value user 3 esto esto no lo vemos Nosotros Esto es algo interno para cuando nosotros recibimos este código por ejemplo con javascript saber leer este dato pero básicamente es es el value pero lo que el usuario ve es esto que puede elegir estas opciones repito lo value es importante porque va a ser el valor que el servidor va a recibir O sea si el usuario selecciona opción uno y envía el Formulario el servidor

no va a recibir opción uno este texto va a recibir este texto user One es lo que el servidor va a recibir lo podemos configurar Esto está bueno porque es cortito y no se olviden que no tenemos que hacer que el servidor reciba con acentos con espacios No todo en una sola frase todo en minúscula y de esta forma lo identificamos con el uno el dos y el tres y ya está lo que hacemos después con javascript es agarrar ese valor y Hacer algo con ese valor y si tenemos espacios comas tildes y demás es

más difícil entonces al dope y voy a venir acá y además de a darle al textarea y el input esto le voy a dar a los Select y ahora si se fijan el Select ya está pado Exactamente igual que esto pero nos falta el option Entonces vamos a venir acá y vamos a hacer que el option ahora option tenga también un background transparent pero no podemos hacer eso tenemos que darle un background si le Damos un background negro si se fijan va a tener el fondo negro Entonces tenemos que darle el mismo color que tenemos

acá por eso el color que le vamos a dar va a ser este así que lo copiamos lo pegamos y ahí está y si le podemos dar un padding por ejemplo de 10 píxeles y ahí tenemos las opciones más separadas No le podemos dar un margin de 10 píxeles y tenemos las opciones más separadas tampoco por qué Porque los navegadores por defecto vienen configurados para Bueno no eh retocar mucho esto guw Me falta una cosita importante que es el Label voy a copiar esto pegar el Select acá porque me olvidé el Label Y cerrar el

Label Ahí está y acá el Label va a tener tipo de usuario por ejemplo Esto va a ser tipo de usuario y acá la opción uno va a ser por ejemplo seguidor empresa otros de esta forma el mensaje te lo puede dejar un seguidor vamos a poner seguidor barra a empresa otro un seguidor seg or una empresa u otros Entonces de esta forma yo lo puedo seleccionar y no no se puede dar ni padding ni margin para eso tenemos que utilizar una librería de javascript que reemplazan el option o el Select por una estructura html

más personalizable pero directamente yo normalmente ni lo dejo porque no se suele hacer se personaliza el Select y el option recibe color y background es decir podemos cambiar el color y podemos cambiar el background en este caso el color viene el color que Tienen los padres que en este caso es este que está acá Así que no hace falta ni que lo retoques pero el background sí porque por defecto esto ya viene con un background y no puede ser transparente entonces nada básicamente nos lo metió por el y después tenemos otra opción es decir en

vez del Select podemos hacer voy a copiar voy a hacer otro más otro d voy a poner un comentario para separarlos acá voy a poner Select y option ahí está acá abajo voy a poner Text área acá voy a poner datalist Y option entonces ahí tengo separado todo simple inputs Entonces esta forma Acá tengo los simple inputs y ahí está acá tengo los simple inputs Acá tengo el Select y el option Acá tengo el talist y el option y acá tengo el textarea esto es hermoso para usar el datalist Okay tenemos que reemplazar el Select

por datalist en este caso le vamos a poner un list acá sería por ejemplo list igual referente por ejemplo referente Significa la persona que te refirió acá tenemos los options Pero tiene que haber un input la diferencia es que acá sí debe haber un input con el ID referente Pero esto es al revés el ID lo debe tener el datalist y el list lo debe tener el input es bastante raro esto pero así es acá ponemos name por ejemplo nombre name referente esto es innecesario pero básicamente lo que estamos haciendo con esto es tipo usuario

no vamos a poner referente el Referente es la persona que hizo que conozcas la página quién te refirió Bueno me refirió por ejemplo soy dalto una empresa un amigo una cosa interesante es que normalmente No necesitamos cerrar los options Es raro pero sí No necesitamos cerrar los options acá no lo podemos notar porque tengo el linked editing activado si yo borro esto se me borra todo completo Entonces lo borro de esta forma si quiero hacer Que se borre esto html le Dice a los navegadores básicamente que cuando la etiqueta option no se cierra la puede

cerrar el navegador automáticamente si yo por ejemplo vengo acá y le doy en inspeccionar ven acá tenemos el Select y adentro los options están cerrados O sea no es que el option no se cierra el option sí se cierra solo que si nosotros no lo cerramos lo cierra el navegador cuál es el problema de esto nada si si hacemos páginas web normales las personas que tengan navegadores Antiguos no lo van a poder ver entonces por eso es mejor intentar hacer cosas que los navegadores antiguos sí soportan como por ejemplo cerrar el option yo por ahora

lo voy a seguir cerrando y ahora fíjense les quiero mostrar como funciona el referente Yo acá arriba tengo el Select y el option y acá abajo tengo el datalist y el option si yo por ejemplo acá escribo algo fíjense que acá me salta user 1 es el valor en este caso sería soy dalto user 2 es el valor en Este caso sería una empresa y user 3 es el valor en este caso sería un amigo yo acá por ejemplo estoy escribiendo algo ven soy y acá ya me salta esta opción para poder escribirla Entonces yo

la próxima vez no voy a tener que andar escribiendo mucho Quién te refirió y me refirió ah soy alto le doy acá y se pone user 1 en este caso lo podemos hacer al revés podemos ahorrarnos el valor ven ahorramos el value Y si nos ahorramos el value visualmente este campo de input se Va a autocompletar con esto Entonces cuando nosotros mandamos este formulario este value el value de este input automáticamente se va a convertir en el contenido del option ahora si ustedes no les interesa esta forma lo pueden poner al revés en vez de

escribir el contenido en option lo hacen así escriben el contenido ahí adentro entonces en vez de tenerlo como contenido lo tienen como valor del atributo value entonces acá escriben algo Ven y lo tienen acá pero Estas son las opciones que nosotros definimos Entonces buscamos soy de alto y aparece acá No necesitamos ponerlo como opción sino que lo escribimos como value no está mal cualquiera de las dos es válidas pero lo pueden usar como descripción acá por ejemplo tienen soy alto y ponen un creador de contenido ustedes tienen acá y acá dice referente soy de alto

y acá abajo aparece más chiquitito ven un creador de contenido Entonces es como la descripción que Ustedes le dan a esta opción pero lo que se va a enviar al servidor es soy alto no se va a enviar contenido eso es lo que lo vuelve mejor es decir esta es una mejor opción por eso porque lo que se envía al servidor va a ser esto porque es lo que se va a poner en el campo Al fin y al cabo Y esta es como una mini descripción para que el usuario entienda porque por ahí es

soy de alto referente un creador de contenido Quién era soy alto un creador de contenido Ah okay No Me acordaba el nombre de dalto pero me acordaba que era un creador de contenido Entonces ahora entiendo que era él Entonces le doy ahí y ya está Así que nada Así es como se usaría los datalist y option y Select y option Select es como un menú que se despliega para que elijamos una de las opciones y eh en los datalist son como un punto medio entre un Select y un input Serían como un 75 por input

y 25% Select más o menos pero generan este efecto de darnos varias Opciones en una empresa voy a poner una empresa del rubro it un amigo me recomendó un amigo Ahora sí listo entonces ahí tenemos varias opciones ven un creador de contenido una empresa un amigo me recomenda un amigo le damos acá y se pone Esto entonces Esta es la opción de datalist y option y ahora nos falta ver el último de todos los últimos dos en realidad que serían fiel setet y Legend que son dos que están muy buenos es interesante que los veamos

y los Vamos a agregar Por qué no a esta a este formulario lindo que estamos Armando así que bueno y después cuando lo terminemos le vamos a agregar un botoncito así que bueno vamos a ver fiel setet y eh Legend Bueno ahora lo que vamos a hacer es ver dataset No qué estoy diciendo alto comportate no que me quedé pensando porque estaba acá leyendo los comentarios de mis videos de la nada Cuando veo este comentario que el tipo me dice alto cuándo te lanzas al standup Sos un máquina del Sarcasmo y tienes buenos remates Dale

animate Entonces yo agarro me quedé pensando viste digo el tipo está viendo un curso de python me imagino que entró para ver el curso de python porque el tipo le interesa la informática o el análisis de datos pero no no el tipo eso le chupaba completamente un huevo qué me importa el bleet Wild deja de hablar de eso cuando te lanzas ha ser estándar dalto yo pensando que hay elementos madre es Buenísima buenísima No veo la hora gente de que lleguemos al millón cuando ustedes estén viendo este curso y todavía no llegué al humilde millón

de Seguidores Dame una manito si lo que viste hasta ahora en el curso sabes que te sirvió ahora estoy haciendo un curso por mes o sea que cursos como este que estás viendo Ahora vas a tener un montón de cursos así y todo gratis no te cobro un peso estos cursos los cobran como 20000 yo no te cobro 00 te cobro cero Solamente un lcito un comentario lindo y una suscripción entonces tírate un sub Dame una manito pedazo de drogad bueno ahora lo que vamos a ver va a ser fset y el Legend el elemento

fset y su compañero Legend básicamente se usan para agrupar y etiquetar lo que viene siendo como los elementos dentro de un formulario no por ejemplo tenemos un grupo de elementos que piden datos de contacto los etiquetamos con un fel setet y un Legend tenemos un conjunto de Elementos que te piden información sobre no sé métodos de pago los etiquetamos también es más que nada para tener todo más estructurado bueno acá tenemos el formulario que veníamos trabajando este tiempito vamos a abrir el estilo Acá está sacar esto y tenemos lo que hicimos recién no lo que

venimos haciendo desde que arrancamos a ver el textarea esto es como un ejercicio progresivo porque vamos enseñándolo a medida que vamos progresando por eso la persona que Solamente entró a este video a este curso entero para ver fiel set se va a tener que morfar desde el apartado de textar perdóname No mentira Si estás entrando este video solamente para ver este apartado des preocupate lo vas a entender igual pero si queres ver el resto bienvenido seas bueno en fin acá lo que vamos a hacer va a ser encasillar todos estos elementos en un fiel set

vamos primero a hacer un ejercicio muy básico y muy simple vamos a crear un New File vamos a crear la estructura básica html 2.5 y ya ahora sí podemos dejar todo y esto Es hermoso porque ya no tenemos que cambiar nada porque entendemos Todo minimizamos esto le damos Tab Tab y acá escribimos fset y Legend simple para que se entienda que es simple y acá vamos a correr Esto bueno si yo por ejemplo vamos a redondearlo si yo tengo un input Okay text no play holder nombre Esto me va a pedir el nombre Esto me

va a pedir el Apellido Esto me va a pedir mi edad por ejemplo Esto va a ser un input type number no sé por qué no expliqué los input tye number no lo puedo creer todavía básicamente el input tye number lo que hace es esto ven nos permite tener esto y si escribimos algo nos va a dejar escribir solo números o la letra e para que lo tengan en cuenta a esto le voy a dar el link fieldset css esto Vamos a darle en file save as fieldset css y ahí parece que lo tenemos todo

Super estilizado pero tranquilos que vamos a borrar bastantes cositas vamos a borrar todo esto que no lo necesitamos los form input lo vamos a borrar el h2 también en este caso no tenemos un form deberíamos crear un form no me di cuenta ya me fui demasiado básico y pegarlo acá dentro Ahora sí ahí entamos un poco y vamos a darle al form Bueno ya le habíamos dado un padding pero el padding Ahora va a ser de 20 píxeles a todos los lados Ahora sí y a esto le vamos a dar En general un margin seis

píxeles para que todos los elementos se separen entre sí y solamente hacia arriba y hacia abajo porque hacia los costados no van a tener margen cómo hacemos para utilizar fieldset y Legend acá Bueno básicamente para utilizarlo lo que hacemos Es encasillar o agrupar por tipo de dato que se pide Yo acá por ejemplo voy a crear otro tipo de dato que va a ser email acá me va a pedir el email y le voy a pedir por ejemplo el número Teléfono entonces por eso va a ser un número c si se fijan bueno tiene que

estar en mayúscula y en mayúscula si se fijan le estamos pidiendo tipos de datos diferentes acá estamos pidiendo información básica y acá de contacto Cómo podemos hacer para separar esto los enc casill los etiquetamos dentro de un Field set esto que está acá lo metemos acá y elegimos donde termina y lo cerramos entamos bien actualizamos y se acaban de encerrar en un cuadrado se Encerraron en un cuadrado Pero eso no es todo si yo acá escribo Legend okay Y escribo un texto por ejemplo información básica y actualizo miren lo que acaba de pasar acabo como

de seccionar Dentro de este cuadradito voy a hacer lo mismo acá abajo y voy a poner un fi setet y acá voy a también encerrarlo voy a de vuelta identar esto y acá voy a poner otro Legend información de contacto Ahí está y vamos a los fs separado los entre sí vamos a cada fiel set set Vamos a darle Un margin 10 píxeles y cero píxeles a los costados y ahí se separan entre sí esto el problema de esto es que no se separan tanto por eso lo que voy a hacer yo es darles 20

píxeles a los fset y a los forms en vez de darle tanto le voy a dar al campo form arriba y abajo un padding de solo 10 píxeles para que que se equilibre un poquito y ahí está lo que también puedo hacer es darle un borde al fiels yo le puedo cambiar este borde todo feo que trae por defecto ven Que es medo feo se lo puedo pued cambiar y por ejemplo le puedo dar un Border dos pixeles solid y le puedo dar un borde por ejemplo 666 Ahí está que es el mismo del color

de este y ahí está separado ven el tema es que esto nos crea como muchas líneas no les parece Para eso para que no no sentamos una diferencia visual tan fuerte lo podemos poner o todo blanco ven como lo tenemos acá separado o podemos hacer que el borde sea de un píxel Ahí está ven Ah lo Tenemos bien separado esto también podemos hacer que sea más suave por ejemplo acá le vamos a dar un nueve y medo que pierde opacidad le voy a dar un un seis para que quede mejor y ahí a mi forma

de ver queda mucho mejor así como lo tenemos ahora y después al Legend le vamos a dar un padding de cero píxeles arriba y abajo pero si le vamos a dar cinco píxeles a los costados para que se separe un poquito de la línea esta yo por ejemplo le doy 50 píxeles acá se Separa bastante de la línea yo no quiero eso tampoco quiero 10 píxeles con seis píxeles estoy conforme y ahí para mí está perfecto Así que ahí me gusta de hecho fíjense qu interesante si yo a esto le pongo un Border de un

Pixel solid igual que al anterior fíjense que es como se es como que se encierra todo acá es más acá le puedo dar un background del mismo color d d de seis y le puedo dar un color 2 22 que es el color de fondo Y fíjense qué efecto más Extraño que sucede no Aunque bueno en este caso el borde fíjense que nos queda más clarito con esto ahí entonces deberíamos darle un color más fijo pero bueno nada se entiende el punto creo así particularmente a mí no me gusta Así que no lo voy a

dejar así yo lo que voy a hacer es sacarle todo específicamente a mí lo que me gusta es sacar todo quedaría sin el borde también ahí está pero si le daría al Field setet un borde radius de seis píxeles y ahí se me Redondea ven el fi setet no de cinco lo mismo que el input Ahí está entonces de esta forma es como que podemos seccionar esto y para qué les dije que lo hagamos en un en esto aparte simple porque ahora vamos a volver al original es decir al que veníamos trabajando durante lo que

va del curso y vamos a intentar aplicar lo que aprendimos a los Field set además de crear los ejercicios de recién vamos además a trabajar los fieldset y vamos a intentar agregárselo acá a ver cómo nos Sale a ver a ver qué tal nos va Vamos a encasillar todo esto en información básica esto también lo vamos a hacer un poquito más chiquito perdón pero vamos a tener que empezar a chicar esto ya voy a seleccionar todos estos que están acá sin contar el Select el Select no es necesario y agrandamos un poquito ahí está para

ahora poder venir acá y poner un Field set y cerrarlo acá abajo y ahí nos queda bien entado acá vamos a poner un Legend Ahí está esto que está acá lo Voy a correr ahí actualicé y me queda esto que a mí particularmente no me estaría gustando mucho así que ahora vamos a ver cómo lo ajustamos y al Legend le voy a poner información básica ahí tenemos esto que está acá repito esto no me gusta mucho así que yo lo voy a retocar un poco para eso voy a venir acá al Field setet y vamos

a darle un borde radius de 5 píxeles para arrancar Border un pixxel solid y el borde si lo vamos a dejar como antes de 666 creo que El mismo color Ahí está y vamos a hacer que el Legend tenga padding de cero arriba y abajo y seis a los costados y fíjense ahora bastante curioso es como que hay una distancia bastante grande entre estos bordes a mí la verdad que no me interesa Así que lo que voy a hacer es a esto le voy a dar un padding cero y vamos a pensar que lo podría

llegar a adaptar sí lo adapta el problema de esto es que vamos a tener que separarlo ahora para eso vamos a venir acá y vamos a Darle un margin 20 píxeles entonces lo que yo sí voy a dejar es el padding arriba y abajo entonces dejaría arriba cero píxeles a los costados a la derecha 20 píxeles abajo 20 píxeles y a la izquierda 20 píxeles y de esta forma tenemos exactamente lo que queríamos Ahora sí es más también podríamos llegar a encasillar esto pero no vamos a agregar otro campo más para que parezca un poquito

más rellenito el formulario asunto ahí está text el asunto de tu Mensaje esta es la información básica el nombre de la persona el mail de la persona y lo que quiere enviar y acá ya pasamos a la siguiente sección lo único que el padding que tiene a los costados Me parece muy fuerte así que en vez de darle de 20 le voy a dar de 10 pero voy a darle también 10 píxeles arriba y abajo por qué no Aunque 10 me sigue pareciendo bastante No podíamos darle ocho y a los costados darle seis e ahí

me gusta más acá lo tenemos Entonces lo Único a información básica por ahí sí podría ser que sea un poquito más oculto para que no esté tan fuerte Así que al Legend le pondría le podría dar un color 666 por ejemplo así no me queda tan invasivo 777 ahí no me dig gusta la información básica se resalta que es información básica se entiende y se lee y ya le dimos un buen uso y fíjense en pantalla completa Cómo nos quedó este formulario muy lindo abajo termina ahí pero también le podemos dar un margen Abajo vamos

a hacer que el formulario abajo tenga un margin bottom de otros 50 píxeles así por lo menos podemos ver un poquito cómo termina no 40 por lo menos 40 Está bien est es el formulario completo que acabamos de desarrollar fíjense hasta ahora a dónde llegamos y todavía de curso fíjense si ustedes ya este curso lo están viendo en YouTube fíjense todavía Cuántas horas nos quedan esto lo hicimos sin ver lo más importante todavía que es grid y flexbox Grid y flexbox son las dos cosas que nos van a permitir hacer todos los diseños que hoy

conocemos en la web los mejores diseños que existen los hacemos con grid y con flexbox y aún así logramos hacer esto O sea imagínense lo que vamos a hacer cuando conozcamos muchas mejores propiedades de css cuando aprendamos a desarrollar elementos en serio y cuando hagamos proyectos Estos son solamente mini cosas prácticas que estamos haciendo en la idea de querer aprender Más pero imagínense cuando aprendamos en serio o cuando nos pongamos el objetivo de hacer un buen proyecto esto se va a descontrolar encima se adapta diferentes resoluciones Así se ve el formulario que acabamos de desarrollar

en un iPhone Pro Max O sea si ustedes desarrollan esto lo suben por ejemplo a un a un alojamiento web y lo intentan acceder con su celular Así se ve lo ven con una tablet se va a ver más o menos así lo ven con una computadora y se va a ver así es más voy A agarrar el fondo y miren lo que voy a hacer par que el background de Body sea un linear gradient va a arrancar con esto y va a terminar con esto tu bottom pero no es background color es background si

no no nos funciona ahí quedó fíjense lo que acabo de hacer esto es interesante no se nota mucho Voy a darle en 333 para que se aprecie mejor y acá tenemos un hermoso formulario muchachos los felicito si llegaron hasta acá ahora vamos a aprender a crear otro Elemento muy importante de ahora sí ya vamos basta de Los formularios basta de hacer elementos para un formulario basta de campos de texto basta de valores basta vamos a hacer otra cosa por favor Bueno sí vamos a hacer otra cosa vamos a ver cómo funciona details y summary Okay

que son dos eh etiquetas que nos sirven para crear justamente secciones de Fack Es decir de de preguntas frecuentes o menús desplegables que sean útiles si ustedes buscan soy alto en Google ven Les va a preguntar esto si buscan Quién es soy de alto va a saltar esto en el canal de YouTube dedicado a enseñar programación de mayor audiencia de la Argentina a la y este efectio que hace Google acá ven que podemos deslizar esto y se abre y se cierra Ahora html tiene personalizada una opción para hacerlo automáticamente entonces este efecto lo vamos a

poder hacer sin lío y sin javascript así que bueno vamos a ver cómo es esto de details y sumary porque Nos van a permitir hacer bastantes cosas así que vamos Bueno ahora vamos a ver todo sobre details y summary summary se per no summary summary summary summary details and summary details y summary bueno básicamente los elementos details and summary en html proporcionan una funcionalidad nativa para poder crear esta este menú desplegable no es un menú desplegable si es un contenido desplegable bueno acá tenemos la Estructura con el título de Tails and summary y está enlazado

al estilo acá tenemos el estilo cerramos hacemos un pequeño su y arrancamos básicamente funciona así details y acá el summary summary es el el lo que se va a ver por ejemplo a tu mamá le encanta y ahí tenemos a tu mamá le encanta qué le encanta a tu mamá Bueno vamos a definirlo le encanta ver videos de dalto eh qué pensaste mal pensado Cuando hacemos esto se nos despliega el menú Parece una boludez pero es interesante porque básicamente podemos venir acá y poner un h2 por ejemplo o podemos por ejemplo hacer una lista desordenada

y acá es que tengo que traer supónganse que están haciendo una lista para decirle a la gente Che gente qué tengo que traer al evento y le vamos a decir bueno tenés que traer tu laptop y ganas de codear por ejemplo entonces venimos acá tu laptop y ganas de codear ahora también le podemos dar estilo a esto es Decir podemos agarrar el details y darle un background por ejemplo no sé no un Gris para ver Cómo afecta Entonces ven como que se va agrandando también podemos agarrar el summary y a esto modificarlo por ejemplo le

podemos dar un background Blue solamente ven lo que se pone azul es esto entonces solamente que sepan que lo pueden modificar no voy a explicarles mucho más pero está bueno por ejemplo para hacer un efecto que ahora vamos a ver esto no lo hagan pero Como les estoyo este elemento lo tengo que explicar supónganse que a este le vamos a dar vamos a hacer que el body tenga un fondo negro no de vuelta Body el B con color va a ser este el color de la página va a ser ddd de vuelta acá tenemos Y

esto no va a ser Azul va a ser transparent de vuelta transparent Esto va a ser transparent ambas van a ser transparent Ahí está y el details va a tener un bord un Pixel solid por ejemplo del mismo color que tiene del coso ahí Le damos un padding de por ejemplo nu píxeles y ahí se nos pone Esto entonces ahí se despliega completo esto es más incluso podemos acá hacer que esto tenga un Border bottom de un Pixel solid ddd por ejemplo ven Entonces tenemos este esta especie de subrayado a mí no me gusta esto

porque implica separarlo del resto y para eso Debería ser algo así el padding se lo debería dar acá entonces ahí es como que ven se crea este efecto extraño pero voy a decir Che alto la Verdad que no me gusta esto Bueno si quieren darle un estilo diferente por ejemplo que cuando esté cerrado no tenga Border bottom por ejemplo acá si le damos en Border bottom n me desaparece pero cuando yo le doy clic acá se va el de abajo también entonces cómo puedo hacer por ejemplo para que cuando esté abierto tenga el borde de

abajo y cuando esté cerrado No lo tenga bueno para eso trabajamos con details ponemos así y le damos en Open Esta es una forma de Seleccionar cuando está abierto después vamos a ver esta forma de seleccionar pero no se apresur y acá vamos a aplicarle esto Entonces cuando se abre ven tiene el borde de abajo es más podemos hacer otra cosa que por ejemplo el details cuando se abra tenga No lo sé un background un poquito más claro 5 55 por ejemplo Entonces cuando está cerrado tiene este color cuando está abierto tiene este color vamos

a hacerlo un poco más suave y funciona así Es más podemos Hacer otra cosa que en vez del background a mí lo que me gusta hacer es hacer que tenga un font weight de eh Por ejemplo Vamos a darle un bt Entonces cuando está abierto se se pone la letra negrita le vamos a dar al Body un font family San serif y ahí está ven está cerrado Se queda así está abierto se pone en negrita pero no me gusta porque esto también termina afectando al contenido que está dentro entonces la forma en la que puedo

hacerlo es agarro El ul Y le doy el font weight de 100 Entonces de esa forma solamente es como que se pone en weight la tipografía de arriba Ven y esto lo de abajo no en fin Es solamente una forma de hacer esto Esto es muy útil por ejemplo para hacer una sección de Fack Es decir de preguntas frecuentes Ah para mostrar ocultar información adicional también está bastante bueno Esto no lo hagan esto puntualmente porque todavía no lo vimos Así que como no lo vimos no lo Pueden hacer pero sepan que se puede dar estilos

a cada estado por ejemplo vamos a sacarle ahora el borde Ahí está y vamos a darle directamente el borde al details y listo Ahora sí pero básicamente tengan en cuenta que esto funciona de una forma en la que ccs me refiero a ccs en la que nosotros podemos darle estilo dependiendo del estado Por ejemplo si un elemento está clique que tenga un estilo si pasamos por el Mouse encima de un elemento que tenga otro Estilo todas esas cosas las podemos hacer con cc Así que tranquilos porque ya vamos a llegar a eso a las transiciones

a las animaciones a los efectos Hay un montón de cosas que son importantes que ya lo vamos a hacer y no todo se hace con javascript casi todo lo más simple y lo más normal se suele hacer con css Así que vamos a verlo pero este que está acá es un buen efecto por ejemplo creamos otro details Ven y ahí tenemos otro más tengo que ser mayor de Edad le respondemos con un párrafo por ejemplo sí de debés ser mayor de edad o de loco contrario estar acompañado por un adulto entonces ahí ves tengo el

primero tengo el segundo le puedo dar un padding por ejemplo puedo darle Ahora sí el padding se lo debería dar a el details en realidad no al summary y ahora sí ves y por ejemplo al contenido de details le puedo dar un font size de 0.8 em más chiquito y al summary le puedo dar un font size un em Entonces Entonces me queda como un texto un poquito más grande le voy dar 0.7 Ahí está y le voy a dar en color ccc pero el summary el color va a ser claro e eh eh Y

las respuestas sí van a ser un poquito más claritas Entonces es como que tenemos el contenido y de otro color esto también podríamos darle estilo al l le podemos dar podemos hacer de todo realmente créanme que podemos hacer de todo simplemente es eso es como un menú desplegable o es es una opción que nos Permite desplegar un contenido que se nos de la gana acá podemos poner lo que querramos así que bueno Ya más o menos entendieron cómo funciona details y summary así que ahora vamos a ir a la siguiente sección para que aprendamos un

po un poquito más de cosas de los enlaces porque hay cosas que ya que estamos en esta instancia es posible que ustedes ya arranquen a hacer páginas web estáticas porque es mi consejo de hecho el que les di que arranquen a hacer webs Para que las tengan de práctica para que las puedan usar para para ustedes mismos y para practicar porque el diseño créanme que es algo que al principio no lo captas tenés que hacer muchos diseños para hacer cosas más lindas después si no es complicado diseñar bien en la primera tenés que hacer bastantes

cosas Pero aún así como van a hac estos proyectos y van a hacer estas cosas seguramente algo quieran subir a internet si algo lo van a querer subir a Internet vamos a necesitar saber varias cosas más de los enlaces podemos hacer que un enlace te mande a diferentes secciones de nuestra misma página podemos hacer que un enlace al cliquear lo se nos descargue un archivo podemos hacer que un enlace nos abra una pestaña para mandar un mail podemos hacer que un enlace nos llame a un número podemos hacer un montón de cosas hay un apartado

de seguridad y rendimiento que también está bueno que conozcamos y privacidad Los enasis tienen como bastantes cosas por detrás que no explique porque estábamos en una sección básica pero ahora que tenemos que ir a una sección un poquito más intermedio avanzada Está bueno que lo expliquemos Así que vamos a ver un par de cositas que no sabíamos de los enlaces así que Bueno vamos a conocer estas propiedades Bueno ahora lo que vamos a hacer es ver un poquito más sobre enlce porque vimos lo básico en la sección de Enlaces que vimos al principio del curso

Pero como estamos un poquito más avanzados creo que llegó el momento vamos a agarar el ejercicio que teníamos antes ustedes Igualmente ya saben que incluso si no tienen hecho este ejercicio lo pueden hacer desde cero es irrelevante Yo lo único que voy a hacer va a ser esto que dice términos y condiciones envolverlo en un enlace Ah Ahí está para que podamos trabajarlo si se fijan acá me debería estar Apareciendo ya para enlazar como no me aparece le voy a dar en href y ahora sí me salta esto que está acá yo voy a venir

a trabajar con los enlaces voy a venir y poner a y ahora le voy a dar un color 48 e Vamos a darle 69f que me gusta más para los fondos claros Ahí está mucho mejor Incluso si hacemos text decoration n creo que sí queda bien Podemos darle click y se nota que es un enlace es un Label pero aún así se nota que es el tema de aceptar Los términos y condiciones hasta acá ya lo sabemos voy a crear un terms html y acá vamos a crear una nueva página New file vamos a guardar

como terms html como ya sabíamos gename unos términos y condiciones para una página web de venta de frutas que vende frutas por internet y no recopila ningún dato esto es innecesario es un paso que estoy haciendo yo solamente para para poder tener un término Sin condiciones Nada más dame el código html así copio y pego Revago El dalto dale más rápido dale Lo bueno es que ahora ustedes pueden entender todo fíjense lo que está haciendo Acá está usando estilos en línea dándole estilo al Body al container al h1 lo entienden esto que está haciendo lo

entienden todo perfectamente todo lo que hace este código lo entienden eso es buenísimo que espectacular que lo entiendan todo le vamos a dar en copy code lo pegamos acá y vamos a poner control h y vamos a Reemplazar nombre de lapra vamos a reemplazar por tu madre damos acá que reemplaza todos guardamos y ahora esto nos debería llevar acá si le damos clic acá nos lleva acá perfecto a tu madre nos lleva buenísimo es más lo vamos a abrir en un Target blanco hasta acá está todo bien No voc chalto la verdad que está fácil

creaste un enlace se abre en otra pestaña perfecto pero qué pasaría si de repente el enlace que nosotros tuviéramos que crear estamos creando un Enlace nuevo y el enlace que tenemos que crear no está alojado en nuestra página está alojado en otro lugar un enlace que está alojado en otro lugar Qué pasa bueno tenemos varios problemas ahí pero ya vamos a llegar a eso vamos a arrancar con el uso de ids Okay vamos a crear vamos a venir a terms a la página terms que creamos Qué pasa si yo por ejemplo Bueno vamos a abrirlo

los términos y condiciones así se nos carga Qué pasa si yo por ejemplo quiero ir directamente a La sección de introducción o servicios ofrecidos etcétera fíjense que si yo por ejemplo acá pongo una a un enlace vamos a abrir una y yo acá por ejemplo pongo ir a proceso de compra por ejemplo y yo acá pongo un hashtag Cómo jor hago para apretar acá y que automáticamente me lleve al vamos a meter todo dentro del container Cómo hago para apretar acá y que automáticamente me lleve acá que dice proceso de compra para eso acá al

proceso de compra tengo que darle el ID Proceso o bu process para que nos quede claro Ah ver Va qué hago acá bueno acá le pongo el signito hashtag igual que como cuando en css seleccionamos un elemento por ID el mismo signo la almohadilla y pegamos el ID y fíjense que si ahora le damos clic acá nos manda acá nos manda el comienzo del elemento proceso de compra si quisiéramos que por ejemplo vaya a la al no sé a la política de privacidad decimos Bueno voy a crear otro enlace para ir a ir a política

Política de priva acá tenemos otro enlace vamos a separarlo por divs cerrarlo y abrir un di nuevo política de privacidad es más acá no le voy a dar en ir a le voy a dar en solo proceso de compra y acá le voy a dar en política de privacidad Ahí está mucho mejor pero en vez de We process acá le voy a dar en privacy política de privacidad acá le voy a dar en ID privacy Ahí está entonces qué pasa Yo apreto en proceso de compra y me lleva a Proceso de compra apreto en política

privacidad y me lleva a política de privacidad eso es lo que hace justamente esta forma de utilizar el href nos permite decidir a Qué elemento vamos a ir es decir es un enlace que en lugar de ir a otra página o de cargar algo y demás es un enlace que nos manda a otro elemento ahora supónganse que ustedes quieren descargar un archivo con todo este texto no porque de repente les pinta tener el archivo descargado cómo Lo pueden descargar vamos a crear un enlace vamos a poner un enlace que el enlace lo que va a

permitirnos es Descargar todo vamos a poner Descargar términos y condiciones Ahí está estamos descargando términos y condiciones Cómo puedo hacer para que se lo descargue bueno primero ponemos el archivo que queremos descargar en este caso es terms html este es el archivo que vamos a descargar y le vamos a dar el atributo que dice Download Entonces si le damos Clic acá tucon se nos acaba de Descargar esto si entramos es el archivo de hecho fíjense que es curioso Yo también puedo descargar el estilos.css por ejemplo styles.css vengo acá le doy en Descargar y que se

me descargó el estilos.css en este caso yo lo que quiero es Descargar el terms Descargar el términos y condiciones cualquier usuario que quiera descargarse esta página le dan Descargar ahora Okay hasta acá está todo bien pero qué pasa si nosotros por ejemplo Tuviéramos que mandar al usuario a una página web que desconocemos por ejemplo términos y condiciones generados en bita.com por ejemplo qué sé yo Ahí está y esto nos manda a la página https. bebita.net de compra puedes venir acá queres venir a la política de privacidad puedes venir acá queres Descargar el términos y condiciones

ya está te lo acabas de descargar ahora queres saber en dónde Se Generó Se generó en bita.com Entonces ustedes dicen Che quiero ir a esta página el problema de esto es que ustedes van a querer que se abra en Target Blank y acá empiezan los problemas cuando nosotros abrimos un elemento en Target Blank la página a la que estamos yendo tiene la posibilidad de acceder a nuestro window.to opener que no no vo meter en muchos detalles técnicos pero es básicamente un objeto esa ventana que le va a permitir hacer Muchas cosas al usuario puede por

ejemplo redirigir la página original a una página web por ejemplo por ejemplo maliciosa sin permiso entonces vos por ejemplo estás en Facebook si Facebook Abre tu página en Target Blank vos podrías redirigir a la persona a una página que se parece a Facebook pero no es Facebook con eso se puede hacer de hecho muchas páginas no por hacen esto Ahora van a asociar ustedes son unos pajeros de ahora van a suar lo Que les digo ustedes abren una página nopor si por ejemplo entran a un enlace ese enlace se abre en otra pestaña y esa

publicidad que se abrió cuando vuelven a la página original esa página original cambió y se fue a otra página Por qué hace eso bueno porque la la pestaña que se abrió tuvo acceso a la a la posibilidad de modificar lo que vos estabas viendo y te mandó otra página entonces vos estás viendo un video no por se te Abre una pestañita que es Publicidad y como esa esa página no hizo algo que te voy a enseñar a hacer ahora la página que abrió pudo Acceder al elemento window opener y modificó la página Entonces te redirigió

a otro lugar y vos perdiste tu video y no lo pudiste terminar de ver bueno eso te voy a explicar cómo evitarlo para Eso Tienen que poner acá el rel no opener esto que están diciendo al coso es Che no permitas que tenga acceso al objeto windows.to opener no va a tener acceso a Este objeto entonces de esta forma no puede redirigir a ningún lado si estamos mostrando el usuario un video No por ese video se va a reproducir y la página que se abrió No nos lo va a poder cambiar además esto indirectamente también

mejora el rendimiento porque cuando usamos no opener la nueva página se abre en separado Entonces hasta puede mejorar el rendimiento y hasta podemos evitar ataques de fishing con esto es excelente Ahora hay una mejor que es no referer Que no referer básicamente es igual que no opener pero no sol m no permite que tenga acceso al elemento al objeto Perdón Windows opener sino que hace que tampoco tenga los encabezados O sea que nunca van a saber de qué página vino Si yo por ejemplo tengo mi página web Y le doy clic a un enlace la

página web a la que acabo de llegar va a decir Ey Esta esta este visitante vino de la página de dalto Pero si yo uso esto no solamente no va a ser como antes como como el No Opener porque no va a tener acceso a modificar mi página sino que encima no va a saber de dónde vino o sea es buenísimo porque solamente con el no opener no puede modificar noos ni redireccionar noos a ninguna otra página pero con el no referer no puede hacer eso y tampoco puede saber de dónde vengo si yo por

ejemplo desde una página voy a otra la página a la que fui sabe de dónde vine sabe que vine de la página de ad alto pero cuando yo pongo Esto ya no sabe de dónde estoy viniendo hace que su visita sea anónima los datos suyos los pueden tener igual pero lo que no tienen es De dónde vinieron Eso está bueno porque si ustedes por ejemplo no sé tienen están haciendo una página para hackers y están indexando una página que es secreta es una página pirata y demás ustedes no quieren que el dueño de esa página

eh de la Deep web por ejemplo sepa que los usuarios vienen de su página web porque les pueden hacer cosas A ustedes Entonces ustedes ponen esta propiedad y ya no saben de dónde salió el usuario simplemente apareció a esto evita justamente el robo de datos y un par de cosas más y después tenemos el no follow que el no follow básicamente le dice al a los motores de búsqueda Ey esta página no la sigas no la indexes Por qué Porque justamente la web es un conjunto de enlaces interconectados Eso es todo entonces cuando por ejemplo

nosotros tenemos una página web Supónganse que Facebook tiene una página web no O es más fácil yo dalto tengo una página web tengo una red social para programadores si uno de mis usuarios pone un enlace y yo no pongo el no follow Google va a decir Ey la página de dalto está poniendo un enlace a una página rara Por qué me está pidiendo a mí a Google que indexe la página rara Es raro entonces para nosotros desligar de lo que hacen nuestros usuarios qué hacemos le damos en no follow para Decirle a Google que esa

página no importa no sigas ni tampoco la indexes porque no nos interesa que la indexes entonces yo por ejemplo tengo en mi Twitter este enlace que está acá si yo por ejemplo le doy botón derecho inspeccionar van a ver que esto es un enlace a que tiene el no opener no referer y no follow y primero no opener para que la página a la que yo los mando no tenga acceso al navegador porque esto es fácil si Twitter no tuviera no opener Y no referer yo tranquilamente puedo enlazar mi página Entonces por ejemplo me creo

soid alti.com y me lo pongo en Twitter y cada persona que entra a soyd alti.com desde Twitter puede hacer que la gente que estaba en Twitter se vaya y se sal de Twitter y se vaya a otro lugar y lo puedo hackear desde ahí y de esta forma no lo hago y no follow hace que Twitter se desligue y no pierda posicionamiento web cada vez con una empresa conocida que tiene buen Posicionamiento en Google le da a otro enlace una etiqueta follow O sea que no tiene esto que está acá Google dice ey Twitter está

enlazando esta página Entonces esta página es más fuerte la vamos a posicionar mejor porque si una empresa tan grande como Twitter La enlaza bueno igual no es Twitter es x Pero bueno si una empresa eh tan grande como x enlaza esta página Entonces esta página debe ser poderosa Así que la voy a indexar pero Twitter no hace eso Porque si hiciera eso Google no le daría ni pelota a las recomendaciones de Twitter porque tiene 300,000 enlaces y la mayoría son irrelevantes Entonces qué hac Twitter para hacer que su seo sea más poderoso y ponen no

follow pero básicamente es para que nosotros no perdamos posicionamiento y para no darle entidad a los enlaces que no sabemos de qué son Cuando tenemos un sistema de usuarios o demás siempre se suele poner no follow y también no opener y no Referer para todos los enlaces no opener y no referer sobre todo cuando le estamos dando libre albedrío a nuestros usuarios Así que nada eso para que para que estén al tanto bueno y después hay otras boludeces Como por ejemplo también ustedes pueden venir acá y hacer que también eh No sé voy a poner

otro div y voy a hacer mandar un mail entonces acá ponen Mi mail ponen mail do. [email protected] por ejemplo entonces mandar un mail se les va a abrir el Correo entonces Che quiero entrada con outlock por ejemplo cran y ahí se les va a abrir para que ustedes manden un correo ahora yo no tengo la sesión iniciada pero si la tuvieran iniciada los mandaría a su cuenta para que ustedes ya manden un correo Es más hasta podemos poner un sub podemos hacer de todo investiguen la que es bastante interesante y Es más hasta podemos también

poner un teléfono por ejemplo tel y vamos a poner ya está el famoso Escalerita de números actualizamos y esto me va a mandar un número para qué si ustedes ya están desde el celular y le dan clic a este elemento en un navegador web se les va a abrir para que ustedes llamen a este número No no es lo mejor que pueden hacer la verdad pero nada también es una opción siempre no y ahí me estaría quedando esta paginita de enlaces avanzados Bueno como ya saben esto que acabamos de ver es simplemente un apartado cortito

para darle más Seguridad a nuestra página para hacer que se posicione mejor para que tenga por qué no un poquito de de mejor rendimiento y que sepamos una que otra funcionalidad interesante de los enlaces Ahora sí la sabemos podemos avanzar porque no podemos decir que sabemos el sistema el avanzado si no sabemos algo tan básico como esto Así que ahora sí podemos continuar con lo siguiente son las tablas Sí vamos a ver lo que son las tablas en html que ya no se usan para Casi nada de las cosas que antes se usaban porque antes

usaban tablas para todo las páginas web completas armaban a base de tablas hoy ya no solamente las utilizamos para presentar datos tabulares que son como datos bien estructurados y demás Entonces vamos a ver el uso de las tablas Cuál es el único caso en el que todavía se sigue utilizando Y cómo estructurar una buena tabla que esté bien semánticamente y que podamos aprovechar su funcionalidad Bueno No hablemos más vamos a verlo bueno gente ahora vamos a ver sobre tablas básicamente las tablas son una forma de organizar datos en filas y columnas es básicamente algo muy

parecido a la forma en la que trabajan las hojas de cálculo por ejemplo de Excel o de Word etcétera como dije antes las tablas hace un tiempo atrás hace un par de años décadas incluso las tablas se utilizaban para todo estamos hablando de estructurar las páginas web de Definir contenido de armar bloes todo lo hacíamos con tablas hoy en día el único motivo que tenemos para usar tablas es principalmente Mostrar datos tabulares donde básicamente cada celda forma parte de una fila y de una columna y tenemos la necesidad de hacer algo por ejemplo tenemos un

sistema de comisiones no entonces acá por ejemplo tenemos una tabla nivel comisión acá me acabo crear una especie de tabla supónganse que ustedes por ejemplo son empleados de una Empresa y la empresa le dice ey por cada producto mío Que vendas además voy a pagarte un salario fijo te voy a pagar una comisión Por ejemplo si ustedes son personas que venden muchísimo ustedes pueden llevarse de como máximo 10 ventas que hagan un 10% Y si consiguen las 10 se llevan además 5 de Premio extra por ejemplo si sos VIP nivel 2 puedes vender hasta 12

y de cada 12 Te llevas el 12 Por Y si logras vender las 12 te llevas 5 extra si sos VIP 3 puedes vender hasta 20 de nuestro producto te llevas un 15% de cada venta y tenés premio de $0 cuando vendiste los 20 y en el último VIP más alto este que está acá puedes vender hasta 50 eh de nuestras unidades de producto y en este vip en el VIP 4 puedes vender hasta 50 productos cada uno te va a dar un 20% de comisión y el premio cuando vendas todos es de $ Entonces

estos son datos tabulares son datos que están estructurados por filas por columnas cada dato por ejemplo este Pertenece a una fila y a una columna es decir vamos a verlo de otra forma a una fila y a una columna se entiende así si vamos por ejemplo con el otro dato con este dato pertenece a la misma fila pero a otro ra columna Entonces ese es el objetivo no de de los datos tabulares que tengan una interrelación entre sí que hagan algo por ejemplo si están haciendo una compra ustedes van a un supermercado a comprar lo

pueden presentar con una tabla cada producto Compró y abajo de todo el resumen total por ejemplo bueno acá tengo mi código inicial lo que es mi estructura de mi página enlazada al estilos pun css para arrancar una tabla se define con la etiqueta Table Esta es la etiqueta semántica correcta para definir una tabla no solamente semántica sino que funcional yo pongo código actualizamos vamos a ver que para parce que no sucedió nada Es simplemente una etiqueta de bloque más efectivamente pero la Magia viene acá Okay las tablas se separan en podemos decir varias etiquetas Pero

tenemos tres que son las más importantes por un lado tenemos TR que básicamente TR arma una fila y TD Define celdas para esas filas si yo por ejemplo acá esto lo saco Okay y pongo algo fíjense que esto se me pone así pero si adentro pongo un TD y acá pongo un dato por ejemplo dato uno esto que está acá ya cuenta como tabla ahora vamos a ver relájense voy a agregar por Ejemplo esto que está acá vamos a presentarlo así como dato uno dato dos y dato tres hasta acá está todo bien yo esto

que está acá lo voy a copiar y lo voy a pegar y ahora tengo otra fila más entonces este es el dato uno fila dos Este es el dato de la fila dos en dato uno de la fila dos Este es el dato de la fila dos y también es el dato de la fila dos este que está acá es el de la fila uno fila uno fila uno y ahí tenemos esto que está así no parece muy loco vamos a Sacarle el fila porque no nos gusta mucho có queda pero aunque no lo crean

Te estamos creando una tabla Cómo puedo yo notar esta tabla bueno tenemos principalmente una propiedad acá que la vamos a modificar con Styles que va a ser el borde vamos a agarrar a TD y a TD le vamos a dar un Border un Pixel solid negro vamos a dar un borde negro y ahí ya podemos observar como la Data la tabla ya va tomando forma entonces lo que vamos a hacer ahora va a ser darle Al Table un wid 100% Y ahí se va adaptar al ancho Total fíjense qué interesante esto que tenemos por un

lado las filas que las filas están recostadas las Fil siempre se midan de forma acostada es como los datos acostados y las columnas que son los datos así como a lo a lo alto las filas son básicamente el eje de x o en horizontal y las columnas son sobre el eje i o en vertical no para crear filas lo hacemos con TR como ya vimos antes pero acá esto es interesante Porque TR viene de table Row es decir la t viene de table y la r la r viene de Row que significa fila entonces No

podemos crear columnas porque las columnas básicamente las tenemos cuando apil filas pero básicamente una columna es la forma de leer datos de forma vertical y la filas es de forma horizontal O sea si tenemos muchas columnas podemos crear filas o Podemos tener muchas filas y se crean columnas Esa es la magia no con TR estamos Diciéndole vas a crear una nueva fila la fila va a tener tres datos Pero qué pasa si por ejemplo en la fila de abajo ponemos dos qué va a pasar y vamos a perder el tercer dato Esta es la magia

de las filas acá podemos poner por ejemplo cuatro datos Y ahora toda la tabla entera se adapta para tener cuatro datos podemos poner cinco datos toda la tabla entera se adapta para tener cinco datos en este caso vamos a dejarlo de tres datos entonces acá por ejemplo lo Que vamos a tener es una tabla con los datos de un usuario no que en realidad después vamos a ver cómo trabajar bien con esto porque No necesariamente usamos las tablas para esto pero yo acá por ejemplo puedo poner Lucas dalto y acá puedo poner crack Entonces tengo

el nombre el apellido y un objetivo y así lo vamos a hacer con todos Horacio vergio injunable no sabemos Quién joraca es elon Mask rico ent tenemos a Lucas dalto un crack Horacio vergolio no Sabemos quién Concha es y elon Mask es un hombre rico entonces esto que está acá así como están son datos sueltos son datos que no nos dicen nada Qué tenemos que hacer Bueno ya sabemos que por un lado tenemos filas esto que está acá la TR crea filas Y estos los TD son cada una de las celdas chiquititas estas ya lo

sabemos ahora También tenemos que crear un encabezado es decir fíjense que esto no tiene nombre es decir estas estas tablas por defecto no tienen Ningún tipo de de Lucas Horacio yelo estos Qué son nombres bueno Necesito algo que me diga que son nombres esto que son apellidos Qué joraca es son apellidos bueno Necesito que me digan que son apellidos esto que dice injunable rico Qué es qué es su apodo su Bueno es un adjetivo bueno que me diga adjetivo para eso utilizamos un TR Okay pero en lugar o sea vamos a crear otra fila pero

en lugar de usar TD usamos th fíjense que si acá le cambio la H se me Cambia porque tenemos el link de editing th y th y fíjense que lo que acaba de pasar es que se nos desenvolvió O sea ya no está envuelto en los bordes que le habíamos dicho primero y principal porque se lo estamos dando a los TD nada más así que vamos a dárselo también a los th Ahora sí va a estar envuelto pero la diferencia es que ahora sí se fijan esto por defecto trae un textalign Center Entonces se centra

bueno Esto que está acá significa Table Cader en realidad Porque son encabezados son los encabezados de una columna entonces Acá tengo que poner nombre Acá tengo que poner apellido y acá tengo que poner adjetivo Yo sé que esto lo podría hacer todo a base de TR y TD es más esto que están viendo ahora lo puedo hacer solamente con divs si quiero pued agarrar divs y hacer esto con divs Pero cuál es el objetivo de las tablas bueno el objetivo de las tablas es poder presentar datos tabulares como digo en Este caso no tenemos que

usar esto no tenemos que usar tablas para esto pero podemos hacerlo como les dije antes por ejemplo para mostrar No lo sé los gastos que hicimos en algo por ejemplo entonces acá por ejemplo ponemos producto costo unidades por ejemplo no entonces acá tenemos un producto cuánto cuesta y sus unidades tenemos banana cuesta No sé 2 el kilo 3 el kilo no sé cuánto cuesta la banana no tengo ni idea y 1 kg porque 1 kg cuesta 3 a esto también lo podemos Centrar Así que yo lo que voy a hacer va a ser darle a

todo un texta in Center para que todo esté centrado después Tenemos también la manzana que cuesta No sé $ el kilogramo y después tenemos por ejemplo el melón que cuesta $ la unidad por ejemplo un melón cuesta esta cantidad cuesta la unidad una unidad no Entonces esto es una compra que hicimos compro banana y le costó esto compro manzana y le costó esto compro melón y le costó Esto entonces de esta forma Estamos presentando correctamente una tabla yo repito en vez de AC th podría poner TD le doy a todas estas y a todas estas

le doy la clase vol por ejemplo y vengo acá y pongo vol font weight vol y ya está es exactamente lo mismo que antes pero qué cambia bueno Esto no es la forma correcta de hacerlo para eso utilizamos th porque encima el navegador entiende que estos son los encabezados y nos ayuda a a tener mejor el seo es decir nos va a posicionar mejor la Página porque cuando Google da nuest otra página va a decir ah estos son los encabezados Entonces no lo voy a tener en cuenta como un dato más voy a entender que

todo lo que esté en esta columna van a ser productos porque así me lo dice el encabezado no voy a considerar a productos simplemente como un o un dato más de una tabla que no sé qué joraca tiene No producto es un encabezado de un conjunto de datos que son banana manzana y melón esto que está Acá son costos TR dos y cuatro Entonces eso es lo que nos permite hacer esto ustedes tienen que hacerlo todo de forma semántica como ya les expliqué antes Bueno las secciones más que vamos a ver un poquito más más

adelante vamos a ver bien cómo es esto de de la semántica y Por qué es importante el uso y un poco de accesibilidad web que creo que es super importante pero que sepan de entrada que cada etiqueta como dije desde el momento uno tiene su uso Entonces si hay una etiqueta que ya trae esa funcionalidad lo podemos hacer De hecho acá lo podemos ver la etiqueta th representa un encabezado de una celda encabezado en una tabla Eso es todo si pasamos el mouse por encima de TD me va a decir el elemento TD representa un

una una celda de dato o sea básicamente es un dato una celda quees enta un dato Mientras que el th es una celda que representa un encabezado por eso es importante pasamos por TR y acá dice TR Representa una fila de celdas en una tabla esto es una celda de datos esto es una celda de encabezados ent esto es una fila justamente de encabezados Y esto es una fila de datos y después por ejemplo yo puedo venir acá abajo y Mostrar un subtotal subtotal lo pongo con th porque es un encabezado más y acá voy

a poner esto que está acá Igualmente esto se trabaja de forma un poquito más compleja pero no lo vamos a ver ahora su total n vamos a poner total 3 + 2 + 4 es 9 y acá Lo vamos a sacar o se Acá está diciendo que el total de todo es de nu acá le podemos dar th porque es un encabezado y el valor es este en este caso el problema de esto es que esta celda que está acá estaría ocupando justamente un eh un solo campo y para que sea semánticamente correcto debería ocupar

dos espacios para eso venimos abajo y le damos acá span 2s para que ocupe dos y en este caso ven ya tenemos que esto nos refleja el total y el total es nu ahora Otra cosa que también tenemos que tener en cuenta es que así como lo ven esto podemos llegar a separarlo como una página web vamos a checarlo un poquito esto podemos llegar a separarlo por lo que viene siendo el encabezado de una tabla que sería t gead así como por ejemplo el Head de una página web esto puede tener un table Head que

básicamente el gas ira la parte en este caso que Define Cuáles van a ser los campos y después el T Body Okay que en El T Body irían justamente todos los datos Y acá metemos el T Body acá dentro Ahí está y vamos a identar bien 1 2 3 4 y este que está acá un poquito para atrás y esto que está acá sería el T fot que es como el pie el pie de la tabla que es como el resumen de lo que viene siendo la tabla va acá dentro en el tf map para

abajo qué J que acabamos de hacer simple en el jead esalto Pero por qué te la rebusca tanto gente les juro yo no soy no soy yo es html No me Pregunten Por qué html es así de qué sé yo html para decirle al navegador que está creando el encabe no el encabezado la cabeza de una tabla que es como normalmente cuando trabajamos en python si ustedes vieron mi cursito de python que está espectacular entenderán a qué me refiero pero básicamente son cuando llamamos a un archivo csb y demás vieron que no le da importancia

al primer campo porque sabe que es el encabezado bueno algo así solo que para Definirlo usamos esto para definir el header de una columna Pero esto para definir toda una sección entera que no van a ser datos van a ser solamente el nombre que se le va a dar a todo ese conjunto de datos es como una forma de darle más poder a esto después tenemos el body que acá van estar todos los datos O sea sí sí sí una columna va a ser de producto otra de costo y una de unidades y acá van

a estar en el en el T Body van a estar todos los productos Todos los costos y todas las unidades separados por filas fila uno fila dos fila tres entonces cuando venimos acá por más que sea Exactamente lo mismo ahora tenemos una estructura más legible y esto es mucho mejor también porque a nivel seo funciona mucho mejor a las tablas normalmente les podemos dar de estilo por ejemplo a los TD y los th por ejemplo un padding de se seis píxeles más o menos y ahí por lo menos tenemos algo un poquito más lindo le

vamos a dar Un font family sans serif me gusta bastante el saneri para para enseñar yo uso otro me gusta mucho Monserrat tengo muchas varias tipografías la verdad que a veces ni se me viene a la mente porque cuando creo páginas web directamente Busco yo en Google fonts alguna que sea linda si va a ser un proyecto mío y y la uso pero para enseñar me gusta mucho esta porque siento que es super Clara acá puedo observar sin problema esto y de hecho acá por ejemplo a los TD les Voy a dar un color 666

Ahí está por qué esto fácil porque de esta forma represento los productos más oscuros y los más claros si yo por ejemplo le sacara esto ven que esto se vería como muy fuerte en un negro muy fuerte si acá le pongo esto voy a dejárselo en 444 porque por ahí es muy fuerte muy muy suavecito es leve es un efecto mínimo eh pero aún así Ahí está también podemos darle por ejemplo a esto un bord radius que va a ser un borde radius de 5 Píxeles por ejemplo Pero esto a mí ya no me me

gusta porque le da un borde radius a todo ni siquiera le daría un borde radius de cuatro píxeles ni de dos no el borde radius para esto no me gusta nada lo que sí se puede hacer por ejemplo es hacer que tengan un Border n Ahí va es alto pero le acabas de dar un borde Bueno pero este borde se lo vamos a dar arriba Entonces ahí tenemos esto que está acá y si quieren también se lo pueden dar abajo esto ya a mí no me Gusta pero también se lo pueden dar abajo y tienen

esto que acaban de ver acá prefiero solamente darle uno que suele ser o el de arriba o solo el de abajo para para hacer que se separen más a los costados el efecto que podemos venir acá y darle es directamente en Table que es sell spacing pero se lo vamos a dar al Table Entonces es Border spacing y acá por ejemplo damos 10 píxeles entonces ahí las tablas se separan entre sí O sea cada uno de los Campos estos ven que acá tenemos un espacio un poquito más grande entre estos y acá por ejemplo doy

20 píxeles se separan más entre sí ven a mí me gusta cuando trabajo con las resoluciones nativas le suelo dar 12 píxeles Ven y más o menos queda así la última no va a tener porque ya es una completa Entonces nos queda estética y qué s yo no sé está lindo también podemos agarrar el Table y darle un Border eh dos pixeles Solid negro a la tabla entera ustedes por ejemplo agarran y le dan un wid no sé un Max wid para que no se les de resolucion mucho le dan 500 pixeles por ejemplo entonces

ahí ya les queda ahí le dan un margin auto que ya sabemos que nos encanta centrar con margin auto por ahora y tenemos la tabla final así entonces en este caso por ejemplo deberíamos sacarle a este y a este la columna de abajo no qué Dame medio rara o qué hacemos se la sacamos Bueno lo Seleccionamos a estos puntualmente le damos la clase total y a este le damos la clase monto total y acá le damos por ejemplo header total a este le damos dato total se venimos acá y le damos dato total coma header

total y venimos acá y le damos un Border no Entonces ahí nos queda la tablita bastante más linda ven e incluso yo a esta tabla si no le pusiera bordes por ejemplo a la tabla le podría poner un Box Shadow c píxeles C píxeles 15 píxeles negro con un dos ahí Por ejemplo Ven y ahí tenemos una tablita quizá un poquito más estética Voy a darle un tres Y en vez de 15 le voy a dar 25 ahí está el Border bottom se lo voy a dar también con un cuatro por qué no cuatro cuatro

está perfecto y ahí así por lo menos me gusta un poquito más el tema de las tablas de hecho fíjense que curioso es si le damos por ejemplo después de darle un padding de seis píxeles le damos un padding bottom de 9 píxeles es como que se separa un Poquito más de abajo y queda un poco más lindo a este le podemos dar Incluso un poco más que el resto para que se connote la separación le damos un padding total de 12 píxeles y ahí está como que estás más separaditos del resto y Es más

hasta le vamos a dar un font size 1.2 em para que sean un poquito más grandes y le vamos a dar un margin top de 20 píxeles 30 30 píxeles ya está muchachos tenemos acá una tablita creada con html y css no lo usamos para poner Por ejemplo datos del usuario no sé nombre apellido edad e email no no lo usamos para tablas en donde los datos noces necesiten estar tabulados estar bien relacionados entre sí eh donde podemos trabajarlo con cosas como grido flexbox cuando veamos Más adelante las tablas las podemos utilizar para organizar información

de forma Clara como dije Mostrar datos que estén organizados en filas y columnas y sea necesario esto algunas tablas algunas Páginas muy viejas lo usan también para maquetar formularios esto tampoco se hace si lo ven intenten sacarlo también se suele utilizar mucho por ejemplo para hacer correos cuando uno desarrolla un correo se sí se pueden hacer correos con html fíjense este dato que les voy a tirar ahora si ustedes por ejemplo esta tabla así como está la copian la seleccionan todas le dan control c así vienen a una página cualquiera como esta que acaban de

crear la copian completa y Le dan control c vienen al mail acá como este van a crear un mensaje nuevo y le dan control b y se acaba de pegar su tablita Exacto acaban de pegar la tabla que acaban de crear y esto se puede enviar por mail eh Yo acá puedo poner Hola te adjunto los datos que me pediste con los productos que compraste y sus respectivos valores costo unidad y el total listo Acá está y le mandan la tablita con todo esto casi bien lindo acá tenés maestro puse mi mail le doy en

Enviar acá me llegó y acá puedo ver como la persona que lo recibe lo ve en este caso la persona que lo recibe lo va a ver sin las sombras ven no no no me aparecen las sombras pero lo más importante que es la tabla con su estilo y sus sus valores y todo lo tiene perfectamente hasta la tipografía me conservó Así que esta es la magia justamente de de htm css no también podemos hasta armar mails con esto seguramente muchos de ustedes ahora Deben estar como no qué piol Hola esto voy a mandar los

mejores mails Sí con esto también pueden construir su firma vieron las firmas personalizadas pueden armar una cajita con su firma que tiene su fotito su correo su número lo que quieran y eso lo copian y lo configuran para que todos los mails se manden con su firma y es buenísimo se puede hacer de todo así que nada espero que se hayan emocionado un poquito y si no lo van a hacer con la siguiente sección porque lo Que vamos a ver en la siguiente sección va a ser audio y video en html Así que vamos hace

unos 5 años todavía se seguía hablando de Flash de tal forma que si yo les mencionaba hace 5 años que había páginas web hechas con Flash ustedes iban a decir Ah sí más o menos me acuerdo de qué trataban o juegos que se desarrollaban con Flash todo decían Uh hace 10 años ni descuento era lo más normal del mundo hoy nuevamente Si uno menciona la tecnología de Flash para Desarrollar webs se acuerdan de Flash El signito ese el rojito Bueno hoy ese eso ya ya prácticamente no existe se tornó recontra inseguro no lo soporta ningún

navegador y no va no No funciona más esto okay era lo que eh html 5 dijo Ey no puedo depender de flash para hacer que el contenido de video y de audio el contenido multimedia como tal sea cargado a través de tecnología no puedo depender de Flash para cargar contenido multimedia entonces en html 5 Aparecieron dos etiquetas nuevas la etiqueta de video y la etiqueta de audio Ah se ponía historiador el tipo y la verdad que me salió bien no me salió no me lo van a negar estas dos etiquetas básicamente nos permiten Reproducir la

de video a ver si alguien Adivina qué nos permite Reproducir la etiqueta de video bueno Es raro pero la etiqueta de video nos permite Reproducir audio no video No mentira Si te lo creíste te mereces un cachetazo eh la etiqueta de Video nos permite perite Reproducir video y la etiqueta de audio nos permite Reproducir audio voy a venir a un video mío que dure poco para poder descargármelo a ver uno solo te pido Flaco Me cago en Jerusalén uno un solo video que dure menos de 20 minutos es chiste hermano uno un solo video Necesito

bueno encontré este que dura 14 minutos buen acá estoy en mi carpeta la de audio video le voy a pegar este enlace voy a cambiar el nombre le voy a Poner video es un punto M4 me lo descargué puede ser cualquiera voy a agarrar la carpeta y le voy a arrastrar vis Studio code bueno acá tenemos el estilos el video y html el video se reproduce perfectamente Este es un video que hice sobre páginas web ibles que se lo voy a recomendar más adelante No ahora es un video de prueba que vamos a tener que

utilizar para ver esto para crear un video es es bastante simple utilizamos la etiqueta video okay Ahí Está y utilizamos src que significa source es básicamente lo mismo que utilizamos cuando ponemos una imagen y acá ponemos el video en este caso tenemos video. mp4 actualizamos vamos a correr el servidor y acá lo tenemos ven Pero qué pasa con el video que no se reproduce bueno no se reproduce Porque no tenemos el autoplay tenemos el autoplay que básicamente es para que se reproduzca automáticamente y ahí está ahí se reproduce Esta es la forma en la Que

se reproduce el video El problema es que si yo actualizo la página desde acá por qué no se reproduce automáticamente qué es lo que pasa bueno el video no se puede reproducir A menos que el usuario haga clic o interactúe de alguna forma en la página nosotros cuando actualizamos el navegador le damos control S esa interacción ya sucede basta esa interacción ya sucede pero nosotros tenemos que hacer algo yo Por ejemplo si acá le doy Controls acá van a Ver que se me va a instalar esto que está acá que dice Controls Okay si yo

doy control autl y actualizo ven ya a mí me va a abrir que se autor Reproduce pero en realidad usuar como un no y Controls es el atributo que permite que el video se reproduzca sin problema pero el tema es que bueno además de darnos como esta Barrita que viene por defecto que es como una especie de controles por defecto que el navegador trae configurados para que podamos Reproducir El video ver el timeline Si queremos podemos descargarlo desde acá es algo muy simple pero si queremos que se reproduzca tenemos que ponerle el atributo muted porque

a nosotros sí se nos Reproduce cuando actualizamos la página pero cuando entramos por primera vez no entonces ahí fíjense que si actualizo la página Ahora sí se actualiza cuando el usuario entra la página el video Se puede reproducir automáticamente sin problema pero si no Le ponemos el muted cuando actualizamos la página el video no se va a reproducir tiene que estar en muted para que se reproduzca ven y que el usuario le suba el volumen Así es como funciona en realidad esto okay Entonces source para el video Controls para permitir tenernos esta Barrita para poder

controlar Reproducir adelantar etcétera autoplay muted para que se reproduzca automáticamente en silencio el atributo autoplay no sirve de nada si no viene Acompañado del muted no fue hace mucho pero hace unos años se modificó para que a menos que el usuario de un clic no pueda reproducirse automáticamente el video tiene que interactuar con la página al menos una vez ent estos son los cuatro atributos más importantes de un video El Controls el autoplay el muted Y el source sobre todo el source y el Controls estos son los dos más importantes y acá ponemos por ejemplo

un texto tu navegador No soporta video Y si Actualizamos no no va a aparecer Que aparezca el texto es como si no existiera pero si de repente al video no no carga el video porque no carga no es que nos va a aparecer no Este es un texto que ponemos en caso de que el navegador efectivamente no soporte el video si el navegador No soporta el video y no lo puede cargar este es el texto que va a aparecer al usuario tu navegador No soporta video lógicamente si el video no carga podemos darle un Alt

y acá le ponemos video de webs accesibles Entonces el video carga mal le vamos a poner video no efectivamente no no va a aparecer el alt Y si le ponemos title Tampoco tampoco va a aparecer el title si ponen mal un video nada Son unos boludos ustedes por poner mal el video en imágenes sí funciona pero en video no bueno y en audio es lo mismo esto lo pueden convertir en audio y reproduce si si actualizamos la página nos va a reproducir el audio Mi nombre Es Paula soy una persona ciega y te sigo en

tu canal cuál es el problema de esto y cuando ustedes cargan un video no pongan la etiqueta audio pongan la etiqueta video en video sí es requisito porque están mostrando un video entonces publican el video pero si ustedes quieren que esto sea un audio el archivo que le den tiene que ser un audio por qué Porque si no el navegador para poder utilizar el audio tiene que cargar todo el video completo Entonces el problema De esto es que ustedes están haciendo que el navegador cargue obligatoriamente el video en MP4 y solo muestre el audio mientras

que si ustedes convierten el video en un audio y lo convierten por ejemplo en un audio MP3 va a pasar que el navegador va a hacer que cargue más rápido no lo hagan así primero conviértalo en un audio y cuando ya tenga formato de audio como MP3 y demás van a ver que va a pesar no va a pesar casi nada puede llegar a pesar 1 mega 2 Megas 3 megas o dependiendo a ve si puede pesar más dependiendo de lo que tengan o pun wo punto ogog que es un formato de audio pesa muy

poquito y hace que cargue mucho más rápido en el navegador entonces Estas son las dos etiquetas que pueden utilizar de video y de audio lógicamente pueden hacer como por ejemplo hace Bueno ahora YouTube ya no lo hace más así pero en su momento lo que hacía era te agarraba el video por ejemplo y daba un W 100% no agarraba te Lo ponía al 100% para dispositivos móviles pero si no es Mobile qué hacía por ejemplo daado un Wi de no sé 100000 1280 por he 720 píxeles por ejemplo Entonces esta era la resolución que tenía

vamos a checarlo un poquito esto y suponiendo que el el navegador no lo soporte te jodías y te ponía un fondo negro vamos a hacerlo más largo solo para que lo puedan ver vamos a hacerlo de 100 1600 píxeles por ejemplo y vamos a chicar un poco Esto entonces vos Tenías el video de YouTube y el video de YouTube se veía así se veía más largo pero el fondo era negro Entonces YouTube funcionaba Así estaba los videos al costado Y si el video tenía la resolución que tenía que tener te lo ponía así y al

contrario si el video era menos alto de lo necesario Te ponía las barras arriba y abajo ven que en este caso vamos a mostrárselas te las ponía así ven La Barra arriba y abajo te ponía las famosas barritas de video porque la Resolución de los videos de YouTube siempre era igual entonces la resolución de YouTube era un formato fijo era el formato 169 No ese era la escala 169 incluso también se podían utilizar de grad por ejemplo utilizaban background y le daban el linear gradient o sea arrancaban en blanco y terminaban en negro quedaba algo

así así coma y F entonces arrancaba blanco y terminaba blanco pero parecía que tenía como una especie de sombra Entonces esto le daba La sensación al usuario que veía esto que ni arrancaba ni terminaba pero no todo un verso nada Solo solamente un par de propiedades que pueden aplicar a los videos yo lo voy a sacar es más le vamos a dejar e Vamos a darle 1480 ponele y vamos a ponerle el background color negro Ahí está así nos genera los bordes a los costados y pueden ver lo que yo les estaba comentando Pero puede

ser de cualquier color igual puede ser por ejemplo rojo pero es rojo rarito Así que Lo vamos a dejar en en en negro y a la bosta bueno así funciona el audio y así funciona el video hay que dar mucha más vuelta desde javascript se puede hacer mucho desde javascript podemos parar los videos aumentarlos cambiar un montón de cosas cambiar podemos hacer magia con javascript con los videos pero no es el video para eso no es el momento para eso lo que sí si quieren hacer que el video se reproduzca en bule porque es un

video que por ejemplo va a ser un video que lo Van a querer reproducir en ble y ni siquiera quieren que se vea el Controls Qué hacen ponen Loop y Loop significa ble entonces Esto hace que el video se reproduzca en bogle Entonces tenemos el source que nos pide la ruta de archivo el muted que arranca el video muteado lo mutea de entrada autoplay que estas dos van com nadas hoy por hoy el Loop que lo lo mete en bucle y el Controls que nos permite tener esta barra de control y todo eso acá y

este texto como contenido De la etiqueta que en caso de que el navegador no soporte el video se muestra navegadores viejos eh o para celus con navegadores de no sé del año del pedo también y después pueden utilizar la etiqueta Track Okay que la etiqueta Track es una etiqueta que nos permite poner subtítulos Esta es una etiqueta que no se abre ni se cierra solamente es una etiqueta una self closing tag Okay solamente la abrimos y ya está primero ponemos Okay el src que va a ser el el Subtítulo en este cas en este caso

tengo caps.ttf facto escribimos theou y ahí ya Aparecen por defecto y tenemos que ser nosotros quien los desactive también podemos darle en donde dice kind y acá vamos a poner que son captions o sub subtitles y fíjense que ya sabemos le damos a entender al navegador que son subtítulos y después en este caso son captions la min diferencia y le tenemos que decir el idioma porque fíjense que acá nos dice Pista uno ahora vamos a darle en src lang es de español y si ahora venimos acá y vemos va a decir que los subtítulos son

en español acá en la mdn web doogs tenemos justamente las posibilidades ven los subtítulos acá les dicen para cuándo usar subtítulos cuando usar captions etcétera sourc slang En realidad iría en eh justamente S como yo les mostré si ustedes quieren que se muestre español tienen que usar un Label español eh Latinoamérica por ejemplo Ahora sí les va a aparecer español latinoamérica pero s le está informando al navegador que el lenguaje es español e por ejemplo es inglés br es portugués o de Brasil y así okay Yo le pongo es de español pero si ustedes quieren

el texto se modifica en el Label no en el source L sino en el Label es correcto poner todas estas que les estoy mostrando ahora fíjense que curioso si yo por ejemplo vengo acá y hago que el video tenga un texto vamos a ponerlo más Adelante estamos mal entando Ahí está text al en Center fíjense que no pasa nada y el texto no se alinea para eso ponemos el Track y al Track le damos un texto al incenter y tampoco se alínea bueno Esto es porque no se puede esto los archivos de subtítulos ya traen

los web btt que en este caso al ser un archivo btt tiene unas configuraciones para hacer que estos subtítulos tengan color estén centrados esto es un subtítulo básico Si queremos centrarlo Tenemos que usar javascript o configurar el archivo de subtítulos para que se centren para que tengan otro color pero ahora no vamos a ver eso porque ya es demasiado ustedes con que sepan ponerlo ya es suficiente porque como es algo que se hace con otros lenguajes o se hace de otra forma ustedes cuando vayan a ver esas formma lo van a aprender por ahora que

es lo que nos compete a nosotros es saber cómo poner subtítulos y cómo hacerlo correctamente de hecho fíjense Que están Están bien hechos los subtítulos Mira observen esto Este es el archivo web btt que esto es lo que pueden modificar ustedes Acá le modifican las propiedades y lo pueden modificar trabaja con esto okay Que es una forma de hacer referencia a esto que está acá que se se se les define como clases a estas cositas y después se los estilan y demás ni ni les conviene hacerlo este es todo el archivo Okay que lo pueden

hacer lo pueden hacer Igual Solamente con modificando esto Y utilizando css pueden cambiar el color pero se hao un poquito más avanzado Por eso digo que todavía no lo vamos a ver ahora sí ya estamos listos para ver otra sección que va a ser también bastante cortita y bastante rápida est hablando de cómo funciona esto de Lazy load o Lazy loading que básicamente es un atributo llama loading que tenemos que aprender a usarlo con javascript después podemos utilizar algo llamado Intersection of server Okay que es para hacer que las cosas carguen a medida que aumenten

pero no voy a hablar mucho más vamos a ver para qué existo qué sirve cómo conceptualmente funciona y vamos a aprender a aplicarlo Así que está bueno es una de las últimas cosas que vamos a ver en esta sección intermedio avanzada de html pero está bueno que lo tengamos en cuenta porque cuando trabajamos con una web con muchas imágenes nos puede servir Así que Vamos bueno gente ahora lo que vamos a ver básicamente va a ser el Lazy load Okay con html css Qué es el Lazy load muy simple el Lazy load es un concepto

que habla de que el contenido tiene que ir cargándose mientras el usuario va llegando a esas secciones una página web es así más o menos tiene este largo por ejemplo lo que el usuario ve ni bien entra es este cuadradito Porque si estamos en una computadora Esto es lo primero que el usuario ve o sea la Pantalla es así tiene es es rectangular pero la página web sigue O sea si hacemos scroll vamos a poder seguir bajando a lo largo de toda la página Qué pasa Acá hay una sección en la página Acá hay otra

Acá hay otra y Acá hay otra el Lazy l dice si el usuario está viendo solamente esto lo que está en rojo es lo que el usuario todavía puede ver Okay si está en rojo el usuario lo puede ver entonces el usuario va a ir viendo el resto de contenido Cómo funciona el L Simple básicamente el Lazy load dice Mira si el usuario está acá está viendo esto no cargues las imágenes todavía si hay imágenes más abajo es decir si acá por ejemplo Tenés una imagen el usuario recién está viendo esto no hace falta que

cargues la imagen porque todavía el usuario no llegó hasta ese momento si vos cargas todos los elementos de una página de golpe puede hacer que la página se vuelva lenta porque va a tener que cargar todos los componentes de Golpe consume más datos etcétera entonces qué pasa primero cargar lo que el usuario va viendo entonces haces que sea todo más rápido Entonces cuando el usuario llega hasta este punto ahí cargas la imagen bueno y hice una página con algo básico de texto okay Lo único que voy a hacer es poner una imagen una imagen muy

simple la voy a abrir desde la carpeta vamos a volver para atrás vamos a entrar a imágenes y vamos a cargar la imagen de alto. png al párrafo Le vamos a dar un he 100 View por ha y un wiet 100 View por wiet ahí está y vamos a darle un font size 30 píxeles por qué no para que nos ocupe bien todo Ahí está overflow hidden para que no se sobresalga esto olvídense lo que acabo de hacer no lo vamos a ver ahora bueno la imagen no me carga fantástico vamos a enlazarla bien porque

se ve que no no no me la está tomando Ah claro porque la ruta fíjense la ruta no puede ser de un Rango inferior claro esto que está acá Es solamente porque estamos en visual Studio code porque lo que estamos corriendo es un servidor a partir de este archivo Si queremos que corra tenemos que correr el servidor desde antes o sea Open folder selecciono esta carpeta le doy en save y acá corro el servidor ahora entro a mi carpeta Lazy loading y entro a enlaces pun html no sé por qué se llama enlaces el archivo

olvídense eso es por un tema acá y acá ahora sí me carga Por qué Porque el Servidor está cargando desde un lugar en el que tiene as que contienen todo es solamente eso olvídense lo que acabo de hacer acá tenemos la imagen que agarra cuál es el problema de esto vengo a inspeccionar y vengo a el Network actualizamos esto okay fíjense que acá nos carga todo esto tenemos todo esto que nos cargó la imagen fíjense que cargó acá o sea abrimos la cosa y cargó la imagen Ya está ya sabemos la imagen le agregamos al

atributo loading y le Ponemos Lazy Cuando hacemos esto básicamente miren ahora a dónde me lo acaba de cargar me lo cargó bastante después O sea lo cargó después por qué Porque primero esto lo que hace es darle prioridad a que se cargue lo que se tiene que que cargar y cuando estamos lendo o llegando a la imagen ahí me la carga fíjense que yo voy a hacer voy a hacer esto que está acá son atributos que ya no se usan pero es para dejar saltos en línea actualizo y fíjense que Ahora se cargó rápido actualizo

pero ahora se cargó de vuelta más lento actualizo se cargó rápido actualizo se cargó pero si fíjense que siempre es lo último que se carga lo último que se carga es la imagen si yo le sacar el atributo Lazy el atributo loading perdón con la con el valor Lazy fíjense que siempre se va a estar cargando antes se va a estar cargando rápido acá es lo tercero que me carga Okay es lo tercero que me carga el problema de esto es que Cuando tenemos muchísimas imágenes y nuestra página está sobrecargada de imágenes o de archivos

y demás el problema de esto es que va a cargar siempre las imágenes antes de que termine de cargar toda la página o la sección que estamos viendo ahora eso puede hacer que no se carguen o estilos o que no se carguen scripts de javascript cuando pongamos hay muchas cosas que no se van a poder hacer entonces lo que hacemos es tranquilo Navegador vamos a poner loading Lazy y la imagen cárgala cuando puedas ven Entonces siempre es lo último que carga Por qué Porque primero le da prioridad al resto de cosas ahora me la está

cargando antes porque el fabcon punto icon no se encuentra Entonces eso carga super rápido pero la carga después básicamente es la prioridad que le estamos dando a la imagen en cuanto a tiempo de carga esto es muy bueno porque como repito si tenemos una galería Gigantesca y queremos que las cosas se vayan cargando mientras van mientras la persona va bajando por acá y va bajando en scroll puede hacer que las imágenes vayan apareciendo y se vayan cargando según vayamos bajando el scroll hay una una parte que hice el curso de javascript en el nivel Master

que es este que está acá acá justamente tenemos el Lazy load Okay acá muestro un poquito de que que va y fíjense que acá tenemos el ejercicio final eso es el Lazy load Es contenido que va cargando a medida que va ignoren todo este código javascript esto que está acá si quieren vean el curso van a aprender De hecho no sé por qué tiene se llama tablas el esto esto que está no es tablas esto que está acá es Lazy loading Ah Lazy loading y esto que está acá no se llama la se llama Index

motherfucker Ahora sí vamos a cargar el Index Bueno no es eso Okay tiene unos problemas esto de Lazy loading porque a veces cuando lo Utilizamos de forma peligrosa puede hacer que el usuario esté navegando y no le carguen los elementos es decir literalmente el tipo está navegando por la página y hay elementos que no le carga entonces puede ser un problema Yo por ahora les diría que no lo usen hasta que no sea necesario cuando lo use en el futuro les voy a explicar bien Cómo aplicarlo a un caso de la vida real Mientras tanto

solo Está bueno que sepan que existe pero no lo apliquemos Ahora Sí finalizamos la sección vamos ahora sí con las últimas tres secciones que estas son un poco más técnicas y no tan prácticas pero que es super importante que las tengamos en cuenta y ya con esto arrancamos con el apartado no El más lindo del curso porque el más lindo del curso va a ser el de los proyectos finales mientras vamos avanzando en el curso más nos va a ir gustando todo lo que vamos a ir haciendo a mí por lo menos así que se

va poniendo cada vez Más emocionante y cada vez las cosas son más lindas van a ver vamos con la siguiente sección que es de etiquetas obsoletas las que no tenemos que usar nunca y las que si ven mejor aléjense de ellas Bueno ahora vamos a ver lo que son las etiquetas obsoletas para arrancar Qué son las etiquetas obsoletas Qué joraca significa esto a ver no hay mucha ciencia Pero si te falla un toque algún área específica del cerebro que no te permita entenderlo yo lo voy a hacer por Vos des preocupate con etiquetas obsoletas nos

referimos a etiquetas obsoletas nada joda ahora Les explico en serio básicamente son etiquetas que queron literalmente obsoletas o que fueron descontinuadas no se recomiendan para uso en html de ninguna forma ahora por qué una etiqueta se vuelve obsoleta Y antes teníamos muchísimas etiquetas que se usaban todo el tiempo pero primero los estándares mejoran Y avanzan Entonces qué significa esto y que hay algunas etiquetas que se vuelven innecesarias y simplemente se dejan de usar porque se reemplazan por alternativas mejores después por su enfoque en ccs es decir hay etiquetas cuya funcionalidad se puede hacer directamente con

ccs y como el objetivo de html no es dar estilos ni modificar la estética de un elemento y eso se puede hacer con ccs hay etiquetas que especialmente tenían una única función Funcionalidad de dar estilo que se descartaron Como por ejemplo la etiqueta No lo sé DS etiqueta font la etiqueta Center que eso ya se hace directamente desde css ese no es obsoleta como tal Ya lo vamos a ver pero font y Center Sí y daban estilo y por eso no se usan más después tenemos el tema de la compatibilidad y el rendimiento es decir

algunas etiquetas obsoletas pueden causar problemas de compatibilidad estamos hablando entre navegadores no y Afecta negativamente la página y después accesibilidad web que eso justamente es lo que sigue es con lo que vamos a terminar este apartado de html intermedio avanzado pero básicamente es un concepto que habla de cómo hacer páginas web para que todo el mundo las pueda acceder no importa si sos ciego si te falla la vista si tenés ataques de epilepsia cuando ves imágenes raras si tienes daltonismo no importa okay vamos a decir que puedas entrar a una página Web igual y que

la puedas Navegar Cómo bueno parece magia pero no lo es y les voy a explicar cómo hacerlo de hecho creo que en Europa es una ley O sea no puede haber O sea si es es una página web tiene que ser sí o sí accesible porquees Si no estás Estás cometiendo un delito algunas etiquetas obsoletas por ejemplo son font si yo por ejemplo acá escribo algo ven directamente viso estudio code ni me lo toma porque la etiqueta ya no funciona esta etiqueta Nos permitía especificar acá como atributos el tamaño y el color de la fuente

y un montón de cosas más por eso ya ni se usa eso ahora todo con css Center que tampoco se usa si yo por ejemplo tengo un párrafo Ok tengo un texto fíjense que el texto queda acá si yo hacía esto y le daba Center Okay y hacía esto Esto se me centraba ven se me ponía acá y se me centraba eso ya no se hace no se usa fíjense que por eso me la marca como en Blanca porque es obsoleta Okay las etiquetas en blanco no van teníamos también blink okay Que ya la habíamos

visto blink pero básicamente esta etiqueta hacía que el texto titile ahora ya Fíjate que ni me funciona hacía que el texto titile esto era malísimo y no se hace no se usa tampoco teníamos por ejemplo Big que si yo por ejemplo tengo un texto cualquiera me hacía que el texto sea más grande ven yo por ejemplo pongo un párrafo común y me lo hace así si yo al párrafo le ponía el Big el texto era más grande Esa era la funcionalidad que tenía Big era agrandarme el texto ya esto tampoco se hace lo hacemos directamente

con css esto y no se hace desde vi está mal usábamos por ejemplo strike si queríamos hacer esto hacamos y escribíamos por ejemplo texto tachado y strike literalmente nos tachaba el texto esto tampoco poco se hace hoy por hoy se reemplazó por Dell Okay que por ejemplo decíamos esto no tenemos un precio nuevo Por ejemplo no sé esto tiene un precio de 9000 era el precio esto tiene un precio de 5999 Y antes costaba 9000 Entonces qué hacen agárrale al estilo a este que quede todo lindo y decíamos antes costaba 9000 ahora cuesta 5900 Enton

para eso se puede usar se puede utilizar para hacer referencia algo que antes sí era pero que ahora no es por ejemplo si yo quiero decir niño quiero decir no no no se pronuncia niño se pronuncia niño Como es una forma No creo que se entiende dónde voy este es el uso que se le da el del ya no se usa más strike se usa del pero tiene un significado semántico también se usa s Okay para indicar texto que ya no va en este caso si sería lo de por ejemplo niño por ejemplo V esto

ya no va es esas dos son El reemplazo de strike antes utilizábamos por ejemplo TT también que escribíamos un texto y fíjense que se nos ponía en monospace el texto normal Se ve así y el monospace era una tipografía especial Que la utilizábamos para escribir código hoy por hoy Esto tampoco se usa y lo que hacemos Es reemplazarlo por la etiqueta code Ven y funciona Exactamente igual Solo que estamos diciendo el navegador que vamos a escribir posiblemente código de algún PR algún lenguaje de programación entonces podemos hacer por ejemplo print Hola mundo no entonces ahí

por ejemplo ahí por ejemplo esto que está acá se Parece mucho más a un texto que podría escribir un editor de código que si yo por ejemplo lo pongo así sin el code se ve se ve raro se ve feo en cambio con el code se ve mucho más estético y se entiende que es código de hecho las etiquetas code por ejemplo suelen tener un fondo negro y un texto claro algo así background por ejemplo se le da este fondo y un color blanco Ahí un padding por ejemplo no sé seis píxeles o cinco píxeles

es como Okay esto que está acá Es una línea de código no entonces escribimos la forma de decir hola mundo en python es dos puntos y la mostramos la forma de decir hola mundo en python es Hola mundo Esta es la forma correcta de utilizar esta etiqueta se usa code ya no se usa más TT se usa code y también tenemos la etiqueta Okay la otra etiqueta que es la etiqueta u si yo por ejemplo tengo un texto no y tengo Hola máquina Cómo andas y actualizo tengo esto si yo por ejemplo quiero subrayar El

Máquina qué hago vengo acá y pongo la la u así la u Esta que está acá si bien no es obsoleta Es decir No es no es una etiqueta que está obsoleta fíjense que de hecho ni me la muestra en blanco No sé si se recomienda pero hoy en día lo más normal es hacer esto directamente desde css entonces venimos acá y esto lo reemplazamos por spam a esto le ponemos una clase un área lbel toda la demás bosta y lo subrayamos desde css No eso por lo menos la forma más común en la Que

hoy en día se hace Porque además después te permite modificar tener esa clase personalizada y si queres modificar máquina y darle otras propiedades lo vas a poder hacer diferente de si tienes la etiqueta u y tenés que agarrar la etiqueta u y ties que seleccionarla en css es mejor ya tener un selector preparado para modificarlo de vuelta cuando se nos de la gana bueno y después también hay un montón de atributos que queran obsoletos Pero básicamente les digo usen esto en su cabeza los atributos que suelen dar estilo a un elemento desde el atributo cosas

como por ejemplo a una tabla darle sales padding desde acá o algún atributo que se encargue de V ir algo del estilo directamente desde html no va y no se hace se hace desde css eso porque por ejemplo la etiqueta B si yo por ejemplo quiero Resaltar la palabra máquina la etiqueta B no es obsoleta Okay pero tampoco se recomienda usar B por qué Porque esto se hace desde css la etiqueta B en realidad no se debería usar porque lo único que hace es Resaltar un texto y si le queremos poner a un texto algo

en negrita realmente es porque lo queremos Resaltar Y si queremos Resaltar un texto tenemos que usar la etiqueta strong Porque además en seo sí tiene importancia Vamos a darle a todo esto un font family sanif no a esto no le vamos a dar a todo al p le vamos a dar esto y de esta forma estamos Resaltando olo el strong funciona igual que el B Solo que tiene un sentido semántico que significa quiero darle importancia a este Resaltar quiero resaltarlo porque es una palabra importante y después tenemos otra que es em Okay en vez de

ser strong es em que es igual Solo que nos la pone en cursiva la diferencia es que con em hacemos referencia a algo Perdón hacemos énfasis en algo si yo por ejemplo digo Hola máquina Cómo andas lo podemos hacer con M Pero si yo digo Hola máquina Cómo andas ahí va con strong porque strong es algo un poco más serio algo más importante yo por ejemplo digo el concepto que estás buscando es máquina Ahí va con strong Pero si yo digo Hola máquina Cómo andas estoy dándole énfasis a la palabra máquina Entonces en ese caso

se pone em Pero si yo por ejemplo dijera estamos hablando de una gran máquina ahí ese máquina va con strong okay Estamos hablando de una gran Máquina y ese máquina va con strong porque es como que a pesar de que le estamos dando énfasis le estamos dando una importancia superior es algo un poco más serio Mientras que el otro Es simplemente para Resaltar por ejemplo podemos venir acá y decir la verdad que em amo a tu mamá la verdad que amo a tu mamá le estamos dando el énfasis entendés ahora si yo pusiera por ejemplo

acá strong esto ya medio que queda raro Entendés la verdad que amo esto ya es el Esto es para algo un poco más serio Okay es casi igual pero diferencia que es mínima y en una es como darle énfasis a una palabra y en otra es como Resaltar que es importante en fin es importante que si quieren chequear Cuáles son las etiquetas obsoletas si ustedes buscan m mdn html acá tienen esto que esto es básicamente el estándar oficial Okay escriben html elements y este que acá tienen todos los elementos que hoy por Hoy se siguen

usando la etiqueta rtc no se usa rb no se usa Plain text no se usa vamos a buscar alguna que les haya mostrado antes marky no se usa font que les dije no se usa Es más si ustedes entran este signito que significa está obsoleta de preced Not For using New websites Okay está ya está se quedó antigua no no hay que usarla para sitios nuevos desp tenemos este otro icono que es el de que no es estándar Okay no solamente no es estándar sino que ya Está obsoleta y después tenemos este que significa es

experimental o sea posiblemente el comportamiento va a cambiar en el futuro o hay que ver si los los la aceptan los navegadores pero la forma de chequear que una etiqueta es o no es obsoleta es esta es más si ustedes buscan el listado de etiquetas estándar en html pueden bajar y acá por ejemplo vamos a encontrar la página a ver Déjenme que la encuentro bien esta esta página que dice referencia Elementos html Esta que está acá tieren un listado con todos los elementos html que son estándar y que se siguen utilizando si quieren entender bien

para qué es cada elemento y cómo se usa Esta es la clave para encontrarlo okay Así que con esto voy a cerrar un poco el tema de apartado de etiquetas porque quiero ir a la siguiente sección que voy a mostrarles Cómo escribir un código html semántico por ejemplo para hacer una página web completamente común y Básica porque todavía no vimos lo Cómo funciona un nav Cómo funciona un header tampoco vimos por ejemplo cómo Qué significa un footer Okay o qué es un es una Side y son de los elementos más comunes de una página web

no mismos lo que es un sex tenemos que entender por lo menos los componentes básicos de una página web para saber cómo escribir el código html semántico vamos a entender un poquito más lo que existe detrás del html semántico o la Semántica y después vamos a ver accesibilidad web Así que vamos bueno gente ahora vamos a ver un apartado bastante interesante que es el de El html semántico en este caso vamos a ver etiquetas semánticas qué jor que es el html semántico bueno básicamente el html semántico significa utilizar etiquetas específicamente que tienen un significado para

dar un significado a esas etiquetas a la sección que estamos creando en realidad es decir la página Web tiene texto o tiene información y esas etiquetas la utilizamos para dar información o darle un significado eso que estamos Armando porque la otra forma es utilizar divs y spans para todo el div es justamente una etiqueta genérica de bloque y el spam es una etiqueta genérica de línea entonces con esas dos etiquetas podemos armar casi todo lo que hoy conocemos en la web de hoy en día y sí no sería un problema pero eso hace que tengamos

300,000 desventajas primero Una falta de accesibilidad básicamente los lectores de pantalla que en la próxima sección es de accesibilidad Así que no le vamos a dar mucho énfasis a este punto pero hace que los lectores de pantalla entiendan De qué trata cada cosa también por temas de seo o search engine optimization mejora la comprensión del contenido por parte de los motores de búsqueda lo que hace que podamos aumentar nuestro ranking en posicionamiento aparezcamos más arriba y Mantenibilidad hace que el código sea más fácil de mantener y que otros desarrolladores lo entiendan cuando lo trabajen nosotros

tenemos varias etiquetas semánticas en este caso por ejemplo tenemos la estructura básica de html si yo por ejemplo quiero armar un encabezado completo qué hago vengo acá y pongo un header y el header básicamente hace referencia a un encabezado es decir es el encabezado de la página normalmente contiene no sé imágenes Logotipos eh alguna barra de navegación ahora por ejemplo vamos a poner La Barrita de navegación este que está acá es un elemento para navegar le vamos a decir al navegador que lo que va a estar acá dentro va a ser para navegar vamos a

crear un ul que es una lista desordenada y adentro list que son elementos de la lista Entonces estamos diciendo okay Que vamos a crear un gader adentro va a haber un lugar donde se puede Navegar va a haber una lista de opciones y cada una De esas opciones va a tener un enlace por ejemplo a algo un diferente lugar de la página ya después veremos cuál es y de esta forma estamos creando un menú de navegación XD y xd tenemos varias opciones Okay esto es la forma semánticamente correcta de hacer por ejemplo un menú de

navegación que va a estar en una página web y acá abajo también en el encabezado podemos tener también por ejemplo imágenes o más cosas que van a componer la parte principal de La página lo que nos va a recibir normalmente ojo que puede haber más de un encabezado eh podemos tener un encabezado más abajo si estamos por ejemplo haciendo una presentación de Powerpoint mir que las presentaciones de Powerpoint tienen secciones encabezado por ejemplo vamos a ver el apartado de esto Qué es la accesibil listo ahora vamos a ver el seo Qué es el seo Y

esa presentación que se preguntan Qué es el seo es un encabezado entonces la página Web funciona igual podemos tener por ejemplo una página web en el que hablamos de diferentes temas y puede haber varios encabezados eso no no es ningún problema puede suceder después tenemos justamente section vamos a acá por ejemplo crear un section que el section Okay suele hacer referencia a una sección del contenido es decir básicamente si nuestra página web se trata de no lo sé recetas esto que está acá podría contener el podría ser el Contenedor más grande de nuestra receta por

ejemplo un section puede ser para la noticia no Entonces esto le podemos poner Class notice container entonces tiene un es un contenedor de toda la noticia después abajo podemos tener otra sección que va a ser el comments Entonces esta Va a ser una sección que contiene comentarios vamos a poder crear una sección para poder interactuar o comentar la noticia por ejemplo o la receta en este casoo dice receta en Inglés contenedor de receta contenedor de comentarios y acá arrancamos si por ejemplo la página web principal trata específicamente de la receta usamos otra etiqueta entonces lo

que hacemos en este caso es poner por ejemplo un Main y adentro ponemos el section Por qué Porque el Main es el contenido principal Okay el contenido principal de eh nuestra página es decir si yo Por ejemplo si yo por ejemplo entro a Twitter podemos identificar que este que Está acá va a ser el de Twitter si le damos botón derecho inspeccionar y acá ponemos control F Main vamos a ver que esta que está acá es específicamente la sección Main la sección principal por qué porque esto que está acá es una es una barra de

navegación Esto no es la el contenido principal de Twitter esto que está acá son contenidos apartes es decir es un material aparte que tampoco nos interesa sí puede ser como algo secundario y no nos interesa pero el Contenido principal está acá dentro de la etiqueta Main lo que hacemos Es en globar todo el contenido que consideramos parte principal de nuestra web yo por ejemplo voy a poner una noticia vamos a poner acá por ejemplo mercado de pase de boca lo que sea fíjense que esto que está acá es una barra de navegación esto no es

para nada el contenido principal no entra dentro del Main esto tampoco debería entrar adentro del Main si yo voy a botón Derecho y Busco Main acá podemos ver que el Main de la página empieza desde acá ven desde acá empieza el Main de la página y fíjense que ya terminó acá esto que está acá es publicidad ya no es parte del contenido principal de la página Entonces es el objetivo del Main en el Main vamos a tener la sección principal o el apartado más importante de nuestra web después tenemos el aside que por ejemplo acá

podemos tener el Main y acá podemos tener por ejemplo el Aside que el aside sería básicamente como una sección secundaria que está relacionado con el contenido pero no tanto yo por ejemplo acá en Twitter tengo esto que está acá si damos botón derecho le damos inspeccionar y buscamos acá as Side no va a haber ninguna Side me la metió Twitter Bucar noticia vamos a ir a noticias y acá vamos a poner hoy noticia en España en infob si yo le doy acá botón derecho inspeccionar y busco aside acá está fíjense que en este caso Esto

es el aside Ven por qué esto es el aside porque es una sección secundaria pero que de alguna forma tiene que ver con el contenido principal la página web es de noticias esto que está acá va a ser el Main y va a ser una noticia y acá tenemos un contenido que No necesariamente tiene que ser lo principal pero es un apartado relacionado Entonces es como la Side si tuviéramos una forma de estructurarla si esta fuera nuestra página web tenemos Por un lado la sección principal de nuestro contenido por ejemplo después tenemos el aside que

es como un apartado secundario que no nos interesa mucho si somos más específicos acá arriba tenemos una barra de navegación okay Para poder Navegar Y si todavía quieren ser más específicos acá abajo por ejemplo solemos tener un footer o el pie de página que el footer suele ser esto que está acá abajo de todo ven esto que está acá esto que está acá es el footer es Como el pie de página básicamente incluye información de derechos de autor enlases a términos de condiciones ayuda F etcétera eso es el el el el footer Ahora si me

preguntan una recomendación a mí Les recomiendo no usen etiquetas solamente por usarlas primero fíjense que la etiqueta tenga un sentido qué jorque estoy haciendo Hay algún sentido para lo que estoy haciendo Busco sea una etiqueta parecida para hacer eso y la utilizo por ejemplo no vamos a utilizar Un h1 para hacer que nuestra letra sea más grande tampoco por qué Porque estamos haciendo las cosas mal el h1 tiene un sentido que es crear el encabezado más importante de la página Okay el h1 tiene que haber uno por página Entonces no puedo utilizarlo para hacer que

una letra sea grande para eso lo hago con ccs se entiende Lo hago de otra forma yo por ejemplo voy a escribir un párrafo lo hago con p no con SP ni con ninguna otra etiqueta ni con un con Un p si yo quiero que una lista lo hago con una lista ordenada o desordenada y su respectivo elemento de lista item Okay el L si yo voy a Resaltar una palabra Lu hao con strong o con m no con b porque B no tiene significado yo a creo una barra de navegación pongo el nav si

voy crear un encabezado uso un G un nav si si voy a poner un footer yo por ejemplo acá puedo poner abajo de todo después de la sección de comentarios acá abajo de todo voy a Poner un footer y este que está acá es mi footer acá por ejemplo voy a poner un párrafo que va a ser protegido por derechos de autor ahí pongo copyright 2024 igual no es el aroba es el signo del R el que tiene del copyright Pero bueno vamos a hacer cuenta que está esto que está acá va abajo de todo

Hay muchísimas formas de hacer que esto termine abajo de todo pero no lo vamos a ver ahora lo vamos a ver cuando desarrollamos una página web real porque Por ahora no nos interesa Por ahora tienen que saber que esto tiene que ir abajo de todo de nuestra página Le acabo de dar un par de propiedades Okay a esto pero ustedes ignoren lo que acabo de hacer pero básicamente Este es el footer ven el footer es el apartado que va abajo de todo acá abajo en el al final de la página ves es lo mismo que

esto abajo de todo entonces eso es lo que yo acabo de hacer ahora ven lo puse abajo de todo esto que está AC sera el jader o El nap porque tenemos para encabezar y así podemos hacer una página web gigantesca a lo largo del curso vamos a ir viendo cómo utilizar bien estas etiquetas porque vamos a construir cosas ya sabemos ahora Estamos viendo las herramientas y en el proceso También estamos construyendo algunas cosas pero de una forma medio así a la ligera cuando construyamos cosas en serio vamos a ver realmente esto pero para eso nos

falta lo último que necesitamos saber de Html para poder considerarnos listos para poder avanzar en Nuestro camino a la sección de ccs intermedia y ya de una vez por todas comenzar a construir cosas de verdad con grid y con Flex no así que vamos con lo último de todo que es la accesibilidad web vamos a ver este último concepto y esta última forma de trabajar para considerarnos listos para ir a la sección intermedia de css y comenzar con bueno la parte bonita no así que vamos a ver sobre accesibilidad Web Bueno ahora vamos a ver

el concepto de accesibilidad web Okay que muchos Pensarán de alto no necesitas una sección específica porque lo viniste explicando desde que comenzó el curso No si necesitamos una sección específica de accesibilidad web porque hay un montón de cosas que no dije que solamente son importantes si tenemos esta sección la accesibilidad web se refier a la práctica de hacer páginas web que sean adaptables para todos dalti pero qué me Importa si solamente el 2% de personas son ciegas o el 1% entonces a mí qué me importa no funciona así primero segundo no seas un hijo de

put y tercero hay leyes en Argentina no hay leyes tan estrictas porque por ejemplo las páginas web del estado o las que reciben plata del Estado son las únicas que necesitan ser accesibles pero las demás si no son accesibles No pasa nada pero en Europa justamente Hay un montón de problemas que tienen que básicamente tener en Cuenta porque cuando crean una página web si la hacen accesible nos cambia la forma de pensar créame que lo que yo desarrollé cuando arranqué a trabajar accesibilidad hace unos meses lo pensas desde un lado de verdadera inclusión y no

solamente eso sino que encima cuando desarrollas intentas darle mucho más sentido a todo y antes me pasaba que cuando intentaba crear elementos o construir cosas hay cosas que solamente por no tener la lógica de la Accesibilidad inculcada no me daba cuenta que podía estar haciendo mejor O podría encontrar otra cosa mejor para poder hacer lo mismo que estaba haciendo Entonces este concepto Está bueno porque no solamente nos ayuda a repensar la forma en la que construimos todos sino que además de rebote tenemos mucho impacto social porque estamos ayudando a la gente que pueda acceder impacto

económico porque si tenemos una página web y demás lo bueno también Es que este Este tipo de impacto nos impacten más ventas porque si estamos pensando que en un futuro en internet tiene que pasar Todo es decir todo el mundo no tiene que ir a la calle a comprar va a tener que comprar por internet va a tener que hacer todo por internet y demás como hoy ya sucede Mientras más personas puedan entrar y más personas pueden usar otra página significa Mag guita y después también a nivel legal de regulaciones de responsabilidad social empresarial Etcétera

entonces Está bueno porque encima nos mejora el seo o sea una página web más accesible es una página web con mejor posicionamiento en buscadores Así que buenísimo si se preguntan y cuál es el objetivo de la accesibilidad ofrecer una página con condiciones igualitarias que todos sin importar sus discapacidades o sus capacidades puedan utilizar para esto quiero que veamos el concepto de El dom Okay nosotros por ejemplo tenemos un Código html okay Todo muy lindo esto que estamos viendo acá es nuestro código html todo nuestro archivo así todo menjunje de html bla bla bla todo esto

es nuestro código html Okay sí este es nuestro código html ahora todo este código extraño nosotros podemos decir Ey nuestro código extraño lo interpreta el navegador Como por ejemplo Google Chrome esto debería ser del color de Google Chrome y debería estar acá porque esto se parece más a Google que a una página Web sin darnos cuenta hicimos el logo de Chrome y esto que está acá sería nuestro código html entonces decimos nosotros nuestra página web nuestro código html lo lee el navegador y nos da un resultado lindo y bello que todos podemos ver que es

la página web final bueno no Esto no es así voy a checarlo un poco porque así funciona para una persona completamente común y corriente pero ahora que estamos más avanzados les voy a explicar la realidad en realidad Okay esto que está acá sí pasa al navegador hasta acá está bien pero básicamente el navegador lo que hace después es crear algo que llamamos dom que es básicamente un árbol que ya lo vimos antes que es un objeto que contiene todas las propiedades de html no que es el famoso arbolito tenemos la etiqueta Head la etiqueta Body

adentro de Body tenemos varias etiquetas más no Entonces esto sería el arbolito El dom esto que está acá lo vamos a sacar y así Es como veríamos nosotros el resultado final Entonces tenemos el código pasa al Google Chrome el Google Chrome crea este árbol con toda la estructura y ese objeto completo el document object model que después en javascript utilizamos para hacer muchas cosas y eso es lo que termina haciendo que nosotros después veamos el la página web final hermosa pero para las tecnologías accesibles funciona diferente una persona que es Ciega por ejemplo no lo

utiliza así lo Que hace es básicamente el navegador no solamente crea este dom también crea otro dom que es exactamente una copia igual de el dom original pero que este dom lo que hace es pasa por tecnologías accesibles y después el usuario que con que utiliza tecnologías accesibles puede acceder al contenido entonces este es el flujo real de una página web el código html lo interpreta el navegador el navegador crea el dom Okay después Crea una copia del dom y este dom es el que Vemos Nosotros los comunes no sé si sea correcta la palabra

comunes Perdón me estoy metiendo en todo este mundo recién y después las personas con una discapacidad visual por ejemplo tienen la copia está hecha especialmente para ser leída por estos eh lectores de pantalla o tecnologías de accesibilidad y esas tecnologías de accesibilidad son la que le indica al usuario por ejemplo le dice estás en un lugar de navegación estás acá estás allá y esto es lo que Veen los usuarios finales Entonces nosotros una persona promedio utiliza esta forma pero la persona que tiene activad las opciones de accesibilidad utiliza esta otra forma entonces este es el

flujo para nosotros Este es el flujo para las personas con discapacidad entendiendo esto sabemos que si existe un doble dom y demás y una tecnología lo que tenemos que hacer es entender Cómo crear un buen código html para que lo puedan Navegar las personas que utilizan Esta versión que somos las versas PR medio que no tenemos ningún tipo de discapacidad y las personas que utilizan esta versión que es la versión para personas que les cuesta ver o tienen algún tipo de discapacidad lo que habla la accesibilidad es crear un html principalmente o Okay también algunas

cosas de SS pero es crear webs que se enfocan principalmente acá en las que cuando se cree este apartado para personas que tienen alguna discapacidad Se pueda entender porque los elementos tienen un nombre están descritos se define su funcionalidad y muchos cosas más que eso es lo que vamos a ver ahora para arrancar Voy a crear la carpeta de accesibilidad lo primero que voy a hacer es activar Ok la tecnología accesible El lector de pantalla el el voiceover para eso apretamos control Para activarlo tenemos que usar la teclita de Windows control y enter y ahí

se activa narrador diogo Aceptar botón narrador sendo del narrador se pone rep Pesado ya lo sé a veces vamos a instalar otro porque fíjense que yo le doy enter y escribo algo perdón pero necesito hacer esto b c Bueno yo lo voy a Desactivar Windows control enter de vuelta ya está se fue por qué lo Desactivar porque para Chrome hay una específica este narrador es bueno para usar Windows como tal Pero uno que es mejor es una extensión vamos A extensiones y visitar Chrome web Store abr pantalla completa y acá vamos a buscar el Chrome

box el Chrome Box básicamente este que está acá es una extensión de Google Chrome que es es parecida a esa pero es especial para Chrome accesibilidad web ven ahí está fíjense Qué pasa si yo por ejemplo vengo acá y escribo en esta página web pongo por ejemplo un enlace accesibilidad web esto que está acá dice menú si yo le doy click menú menú menú las personas que Son ciegas van a ver que dice menú Cómo hago si yo estuviera ciego Cómo puedo crear una página web para que este lector pueda ayudarme a mí que soy

ciego a navegar por la página Cómo jor aca lo puedo hacer Bueno yo voy a tener abierto esto que está acá que que es de extensiones para poder activar y desactivarla Entonces ven activamos y desactivamos porque si no nos vamos a volver locos a lo que voy es que primero texto alternativo si yo por ejemplo Tengo una imagen vamos a cargar una imagen acá imagen source copiar dirección de imagen la pego acá cierro Acá tengo mi imagen bien img 100% la imagen va a ser del tamaño total Vamos a darle un más chiquita 300 píxeles

y a la bosta voy a activar el lector accesibilidad we pestaña con barra image es una imagen con barra image o sea si una persona ve la imagen en realidad no la ve pero lo que digo es que cuando intente desplazarse hacia la Imagen es lo más importante que tenga una etiqueta alt y acá podríamos por ejemplo dalto posando rechero actualizamos cuando cliquen en la imagen fachero entendés entonces lo que está haciendo esto es permitir que la persona que es sorda sepa que hay una imagen te da alto posando refachera lo mismo por ejemplo con

los enlaces si yo por ejemplo pongo un enlace vamos a poner un a tengo un enlace a si yo acá por ejemplo voy a hacer que la a tenga Un H ref eh Index html por ejemplo y acá le voy a poner ir al menú accesibilidad web ir al menú ir al menú por eso es importante que ustedes lo tengan Y si el enlace no dice no no Describe qué es lo que hace en este caso por ejemplo dice ir al menú ir al menú Es lo que dice pero si el enlace dijera home home

eso diría home pero no sé que joraca significa home ahora si yo acá por ejemplo pongo le voy a poner un title y acá en el title voy a poner algo así Como ir a la página web principal No fíjense ahora qué pasa enlace nada pero si le pongo un alt fíjense Qué pasa ahora enlace tampoco pasa nada Cuál es el atributo que tengo que utilizar para hacer que me permita leerlo bueno se llama Area Label y acá en el área Label vamos a poner enlace que redirige a la web principal por ejemplo Entonces fíjense

esto enlace que redirige a la web principal es buenísimo si yo por Ejemplo creo una sección de navegación vamos a hacerlo vamos a crear una sección de navegación vamos a poner por ejemplo un li no más vamos a hacer una cosa vamos a poner un div y adentro va a tener ul que adentro va a tener un li por ejemplo no entonces venimos acá y ponemos así tal cual fíjense esto activo la extensión lista con cuatro elementos ahora no me la reconoció como una barra de navegación si yo quiero que me lo Reconozca como una

sección de navegación voy a ponerle nav y fíjense ahora navegación lista con cuatro elementos reconoce me reconoce que es una barra de navegación se entiende eso me lo reconoce si yo acá por ejemplo pongo un no sé s vamos a poner un párrafo y acá voy a poner un spam y este spam voy a poner un título no y acá simplemente esto lo pongo en grande fíjense esto pestaña título Pero esto tiene que ser un Encabezado voy a poner un h1 y voy a probar solo de vuelta título a ver qué pasa título título un

título uno si yo acá le pusiera un h2 título título dos título 1 es h1 título 2 es h2 esto se reconoce yo por ejemplo quiero a esto describirlo vamos de vuelta a Area Label título principal no entonces acá pongo por ejemplo dalto es crack y observen esto le doy cli acá tp otra cosa importante es el tema de los formularios si yo por ejemplo voy a Correr vamos a donde dice F set y Legends no vamos a correr clases html todo entero vamos a correr voy a abrir el texa primero voy a abrir esto

y quiero ver qué pasa Nombre nombre completo edita Tex escribimos entrada de coroico correo electrónico bien eso porque pusimos el type email le doy Tab área de texto área de texto escribo ya está vamos a venir a fset y Legends que estos son los últimos creo que utilizamos Este es mejor este Formulario vamos a ver qué pasa formulario de contacto nombre completo nombre completo es el Label me lo está mencionando acá puedo escribir le doy [email protected] entrada de correo electrónico acá pongo mi correo continúo as el asunto de tu mensaje el asunto de tu mensaje

porque pusimos unh holder continuamos tipo de usuario seguidor barra cuadro combinado uno de tres cuadro combinado uno de tres AC por ejemplo lo que tiene que hacer es seleccionar el tipo de usuario entonces acá vamos a poner área Label y vamos a poner selecciona el tipo de usuario y ahí si venimos acá y volvemos a activarla vamos a ver qué pasa cuando volvemos a apretar ahí selecciona el tipo de usuario y el el la persona se puede mover de esta forma ven miren un de TR empresa dos de TR otros tres de TR empresa dos

de TR listo dejo este continuo acá va datal no sé por qué sin Creerlo cerré mal acá lo mismo acá el usero no sabe qué escribir qué hacemos en este input vamos a poner otro área Label y vamos a definir escribe quién te refirió por ejemplo entonces volvemos escribe quién te refirió Ya está listo lo logramos otra cosa que es importante que si se fijan esto que está acá los botones tienen que ser botones los campos tienen que ser Campos etcétera Porque si yo por ejemplo acá hago que en vez de acá ha un botón

por ejemplo en Vez de que haya un buton no en vez de que haya un buton yo voy a poner Hola si yo por ejemplo acá le doy la tecla Tab va al elemento Hola Pero si yo acá por ejemplo pusiera una a y esto que está acá solamente fuera un botón Button y le diera el estilo de un botón si yo acá pongo la tecla Tab no va a ir acá y la persona que no ve nunca va a poder darle clic al botón este que está acá una página web debería poder ser navegable

solo con la tecla Tab es decir todo lo Que se puede hacer con el Mouse y con el click debería poder hacerse con la tecla Tab y con el enter ese es el principio principio más básico de todo así como todo lo que puedes hacer con el Mouse y con el botón de click en una página deberías poder hacerlo también con la tecla Tab y con la tecla enter Tenemos también las etiquetas role que son para dar un rol si yo por ejemplo no vamos a hacer un ejemplo muy básico voy a cerrar esto voy

a abrir de vuelta la Accesibilidad estamos vamos a correr Solamente vamos a correr solamente esta que está acá si yo por ejemplo acá supónganse que creo un div no nosotros tenemos un atributo nativo para hacer un acordeón por ejemplo details Okay y después tenemos el summary tienes alguna duda Acá está tu respuesta Pero qué pasa si yo por ejemplo tengo algo que no tiene porque esto ya el navegador entiende que esto es una especie de acordeón o es un menú desplegable Okay No es un menú como tal pero es básicamente un acordeón es algo que

se despliega Yo vengo acá y tengo esto subo y tengo esto ya el navegador sabe para qué Para qué se usa entiende la finalidad Pero qué pasa si de repente esto tuviera una esto no tuviera funcionalidad nativa cómo lo tendría que hacer y lo tendría que hacer por ejemplo con un div y acá con otro elemento con otro div Entonces esto con javascript lo programo para que se abre y se cierre se Abre y se cierre pero no hace falta porque esto ya trae ya trae Natividad Pero si yo por ejemplo Quisiera hacer un slider

yo tengo acá un slider ID slider Entonces yo lo que hago acá es tener imágenes voy a poner por ejemplo esta imagen y acá tengo un slider con imágenes qué va a pasar acá bueno acá tenemos que indicar que este ID va a tener un rol o sea cuál va a ser el rol de este ID en la página bueno el rol va a ser slider por qué Porque va a ser un Slider que te va a ir deslizando imágenes va a tener muchas imágenes y vas a poder deslizar si quieren ver cuáles son todos

los rols buscan role html tengo a la página de acá que es y ara rols acá vamos a poder ver todos los roles y cuáles son las etiquetas correspondientes Por ejemplo si tenemos cell cell significa célula O sea que el rol de Zelda lo podemos definir con esta etiqueta la etiqueta artículo tiene el rol article para eso no vamos a crear un Div y darle el role artículo le vamos a crear con esta etiqueta si por ejemplo queremos crear una definición usamos esta etiqueta FN que es para definiciones si yo por ejemplo tengo un heading

yo no puedo agarrar un div o un elemento y ponerle role heading Cuál va a ser tu rol vas a hacer un encabezado no porque estas etiquetas que están acá se encargan de definir encabezados entonces van primero si yo por ejemplo tengo un rol de lista y ya tengo Elementos como ul y ol que se encargan de construirnos esas listas para qué voy a crear un div y utilizar list no utilizo estos elementos entonces acá pueden ver Cuáles son los elementos justamente que no tienen ningún tipo de etiqueta especial no y acá tenemos por ejemplo

acá tenemos el rol slider cuándo debería utilizar un slider bueno entramos acá y acá les va a decir mira el slider define un input donde el usuario selecciona un valor de un Determinado Rango área función deslizante como el que tenemos recién es un área que le está diciendo a la página Okay al navegador que este elemento que creamos acá va a tener una función de slider va a tener una función deslizante porque Su contenido se va a deslizar tenemos un área de sugerencia ves el área sugestion Si yo por ejemplo creo ven acá tenemos un

spam y quiero sugerir algo voy a hacer una sugerencia utilizo el rol sugestion entonces todas estas Cosas son importantes de hacer por eso les voy a recomendar dos cosas primero véanse este video que es el que descargamos hace un rato y básicamente es un video acerca de cómo hacer páginas web inclusivas en realidad esto es un video que habla de páginas web accesibles y es una pequeña guía sobre Cómo construir webs accesibles falta un montón pero si quieren chequear que su web se accesible le dan botón derecho inspeccionar y acá van a tener un Apartado

que dice lighthouse si le dan en analizar page load acá básicamente la página va a estar haciendo un análisis interno que lo que va a hacer esto es definir todo en este caso tiene un 100% de performance acá me dice los tiempos de carga todo y más abajo hay un apartado de accesibilidad y este Esta es la puntuación que Google Chrome nos da a nuestra página acá nos dice por ejemplo acá tenemos un div que es un slider algunos Area Rolls Como por ejemplo Slide requieren atributos extra Area para poder definirlo porque por ejemplo esto

es un slider Bueno sí sé que es algo que se desliza Pero y cuál es el elemento actual bueno para eso ponemos un área value Now no entonces acá por ejemplo tengo imagen uno por ejemplo tenemos que definir el área value min que sería por ejemplo imagen ahora Estamos en la imagen tres la imagen mina es la imagen uno y el área value Max que sería la imagen s Por ejemplo si Actualizamos la página y volvemos a cargarla vamos a hacer exactamente lo mismo de vuelta ahora vamos acá la House analizar la página vamos a

ver qué pasa y ahora bajamos un poquito más y acá me dice que tiene valores No válidos por qué porque esto lo que me está pidiendo es que ponga elemento del uno al 10 qué es esto imagen un imagen dos imagen 7 No acá poneme solamente el número y a la Eso es lo que me está pidiendo Entonces esto una teoría ahora actualizo Vamos a ver de vuelta a ver vamos a probar Cómo está ahora vamos a analizarlo a ver si funciona bajo y ahora sí acaba de mejorar la accesibilidad pero ahora está en 84

puntos o sea Todavía siguen faltando cosas acá me dice que el elemento html no tiene un atributo lang el atributo lang como ya sabemos les dije que Define el idioma en este caso el idioma va a ser español después acá me dice también en este caso como me está diciendo que Coincide me está diciendo que Ey acá ya dice home ya no es necesario que pongas este área Label porque se entiende entonces podemos sacar esto por ejemplo y ya debería estar solucionado Entonces si ahora venimos y actualizamos chequear a ver cómo está Le damos el

lighthouse analizamos la página de vuelta vamos a ver qué pasa y ahora la accesibilidad es del 100% por qué porque tenemos todo perfecto Esta es la forma que tenemos de hacer página we Igualmente Hay un montón De cosas que acá tenemos fíjense las cosas manuales acá tenemos que ver por ejemplo que las cosas que son interactivas o sea con las que vamos a interactuar tienen que ser focusa bles esto que está acá también bueno Y acá básicamente nos muestra un montón de cosas okay Que básicamente el orden visual tiene que seguir el orden del dom

y estas son básicamente cosas que normalmente no son automáticas y que se viene heram heramientas para hacerlo eh Son cosas que tenemos que hacer de forma manual Entonces mi consejo es busquen accesibilidad web acá en internet y van a encontrar un montón de cosas o de contenido sobre accesibilidad web pero la verdad que lo importante es que entiendan el concepto y no importa si no lo hacen 100% perfecto lo importante es que al menos tengan las cosas básicas que por ejemplo es que todos los elementos que van a interactuar o en los que se puede

hacer clic tengan yo por Ejemplo puedo hacer clic en una debería también poder seleccionarlo y darle clic se entiende seleccionarlo y darle enter Tab enter Tab enter no hay problema pero por ejemplo este elemento no no necesito darle click ni nada en interactuar Entonces no necesito focusear lo ni hacer nada de eso entonces Esas son las cosas que tenemos que hacer tenemos que hacer que todos los elementos puedan ser navegables que todos los elementos puedan ser focusa bles si necesitan Focusear acá por ejemplo el usuario puede venir y darle acá y fíjense que ya se

le posiciona le da Tab y puede venir y escribir le da Tab y escribe le da Tab y continúa ven puede bajar arriba subir le da Tab escribe viene baja y acá ya no puede darle al botón porque Por más que agarremos una y lo personalicemos queda mal Qué tengo que hacer esto tiene que ser un boton o un input submit y acá le ponemos enviar por ejemplo Entonces está acá baja deja un mensaje baja y el tipo Le da enviar y el formulario se envía ven Esa es la clave la forma si el esto

no el usu la persona no pudiera hacer esto y no pudiera rellenar un simple formulario Entonces estamos al horno y la página deja de ser accesible que tenga las cosas básicas con el tiempo cuando arranquen a intentar hacerlo y utilicen esta extensión que venimos utilizando y lo prueben y hagan pruebas con esta extensión para ver si realmente su página funciona para personas que son Ciegas Y ustedes puedan agarrar ustedes puedan ponerse una venda hagan este ejercicio cuando desarrollan componentes hagan el ejercicio final de ponerse una venda en los ojos y activar esta extensión y ver

qué pasa si si pueden Navegar y pueden recorrer su página y usarla bien completamente a ciegas y si lo pueden hacer Felicidades su página es accesible si no muchachos no se preocupen que de a poquito lo van a ir aprendiendo yo estuve años enteros Escribiendo código que era cero accesible cero y estuve muy siempre lo que hacía era creaba webs y después las volvía accesibles ahora ya las construyo de entrada siendo accesibles pero por la práctica y experiencia ustedes primero enfóquense en lo más importante que es la funcionalidad la forma la estructura el estilo Y

mientras lo hacen de paso solitos se van a ir acordando de agregar una cosa agregar otra agregar los entren por ejemplo a Google a YouTube y vean Cómo usan por ejemplo los roles vean Cómo usan por ejemplo los Area labels los Area hidden etcétera vean aprendan Y de esa forma lo van a hacer bien si no repito ni se preocupen muchachos porque en la mayoría de los casos no es necesario tan en extremo con algo tan básico Como por ejemplo hacer que sea navegable con el Tab y con el enter hacer que todo pueda ser

clickable hacer que las imágenes tengan una descripción es decir un alt ya es más que suficiente Porque es más que lo que el 90 por de webs de hoy en día hacen pero nunca está adás seguir aprendiendo y seguir capacitándose así que ahora sí gente vamos a la sección de css intermedio vamos a olvidarnos un poquito Ahora de esto de la accesibilidad vamos a desarrollar componentes y crear cosas dejando de lado la accesibil exibilidad por un tiempito porque nos vamos a enfocar más en crear componentes en el estilo la lógica después cuando creemos Componentes de

verdad Ahí sí vamos a volver a la accesibilidad porque vamos a estar más curtidos no se van a estar preocupando por si funciona esto por si porque no entiendo esta propiedad Porque no entiendo esto y además por porque encima no entiendo cómo es esto del área Label no entiendo nada no no no vamos a enfocarnos primero en las funcionalidades Y a lo último cuando arranquemos a crear componentes Ahí vamos a enfocarnos en Cómo funcionan Esto de los áreas de los roles de los sal etcétera por ahora vamos a enfocarnos más en lo que venimos haciendo

desde el principio del curso que es enseñar elementos enseñar sus propiedades de estructura y demás Así que ahora sí vamos con el apartado de css que es muy importante Okay que es el de css intermedio es lo que viene antes de flexbox y antes de gr Así que gente Felicidades Si llegaron hasta acá ya están en un nivel intermedio del curso Por más que todavía falte mucho más de la mitad los felicito Ahora sí vamos con la sección intermedia de css arranquemos despreocupate igual si no entendiste esto de la accesibilidad te puedo asegurar que es

un tema super complejo Entonces si no lo entendiste relajate podés continuar con el curso no hace falta que te vuelvas loco ya lo entender bueno Bienvenidos a esta sección intermedia de css en esta sección vamos a ver selectores avanzados Herencia cascada especificidad pseudo elementos pseudoclases un montón de cosas Sí también vamos a ver object fit y position static relative fixed etcétera vamos a ver overflow y text overflow vamos a ver sobre scroll vamos a ver sobre text WAP sobre cursor sobre overline sobre m vamos a ver varias cosas interesantes vamos a ver todas esas esas

cosas que aportan un montón de valor y un montón de detalle a css para estar listos para ir al último apartado Y la última sección que son los apartados que son tres puntualmente que son los de flexbox los de grid y los de animaciones que son tres apartados que nos van a permitir estructurar y armar cualquier cosa que querramos ahora vamos a arrancar con el tema de los selectores avanzados ccs básicamente funciona a través de agarrar un elemento o seleccionar algo y darle una propiedad para cambiar o sobreescribir sus propiedades hasta está todo bien esto

ya Lo sabemos pero me gustaría que lo veamos de una forma más interesante todavía en ccs hay dos cosas que son las más importantes para hacer lo que querramos con ccs la primer cosa que tenemos que saber hacer es saber cómo darle estilo a un elemento es decir conocer sus propiedades el color el background eh las posiciones los tamaños las tipo todas las formas en las que tenemos de Modificar un elemento las tenemos que aprender ese es el apartado De propiedades las propiedades justamente nos permiten esto no agarrar y modificar cada una de las características

de un elemento las características que sobre todo son visibles pero el la otra parte de C s consiste en saber seleccionar eso que queremos modificar es decir quiero seleccionar por ejemplo a este elemento Pero tenemos muchísimas formas en las que podíamos tener problemas si no sabemos seleccionar Por ejemplo si yo Les dijera a ustedes quiero que seleccionen a un elemento hijo cómo harían eso quiero que seleccionen a un elemento solamente si contiene otro elemento por ejemplo quiero editar un div solamente si adentro tiene un elemento p o quiero editar un p que tenga de hermano

un h3 por ejemplo o quiero editar un elemento en un estado en específico por ejemplo quiero hacer que si yo paso el mouse por encima de un elemento el estilo de ese elemento Cambie esas son formas en las que podemos resolver un montón de problemas que nos pueden surgir cuando trabajamos con css que si lo hacemos de otra forma nos volvemos locos que antes decía con javascript pero ahora si sabemos seleccionar elementos correctamente podemos darle estilo a lo que querramos podemos poner condiciones para dar estilos podemos hacer que encontrar relaciones entre elementos y solamente darle

eh digamos un estilo si cumple una Condición Hay un montón de cosas que podemos hacer entonces esa es la otra parte de ccs es saber la mejor forma de seleccionar elementos cuándo De qué forma en qué contexto En qué estados seleccionar absolutamente todo para darle estilo a los elementos Entonces ahora vamos a empezar a introducirnos en esa en esa parte más de de seleccionar por estado seleccionar a los hermanos seleccionar con condiciones todo ese apartado lo vamos a ver ahora para eso Tenemos que ver principalmente selectores avanzados tenemos que entender de herencia de cascada y

de especificidad tenemos que conocer las pseudoclases y también los pseudo elementos ya con eso habremos abarcado todas las formas de seleccionar elementos y créanme que es super interesante Así que ahora lo que vamos a ver justamente es esto de los selectores avanzados Vamos a aprender a seleccionar de forma avanzada yo acá me creé esta Mini página que básicamente es eh la misma la misma H que habíamos hecho en el apartado anterior de selectores solo que ahora después del h1 agregué un párrafo después de la lista agregué un h2 y otro párrafo Entonces ahora vamos a

jugar un poquito con estos estilos por si no recuerdan acá solamente agarramos el L y le dimos color gris y a la clase ingrediente faltante le dimos red y al ID ingrediente secreto le dimos Blue Eso es todo lo que hicimos por ahora vamos a Sacar Todos los estilos y ahora sí vamos a arrancar de vuelta a trabajar para arrancar es interesante una cosa acopada y es que podemos dar estilo por atributo sí el primer selector que vamos a ver es el selector de atributos vamos a dar estilo a un elemento En caso de que

contenga un atributo o ese atributo tenga un valor definido Por ejemplo yo voy a poner un imagen source vamos a agarrar una imagen cualquiera me voy a descargar esta imagen alto. png la voy a Guardar en la misma carpeta que la puse avanzado pero en realidad Debería ser selectores avanzados no importa y le voy a llamar dalto png si guardo acá me aparece la imagen perfecto hasta acá está todo bien Esto que está acá vamos a sacarlo porque por ahora es innecesario Cómo puedo hacer para seleccionar y modificar una imagen en caso de que tenga

el source igual a alto.png bueno para eso vamos a seleccionar la imagen y si yo básicamente le doy un estilo Como Por ejemplo Wi 100% ahí la imagen ocupa todo el ancho No perfecto Cómo podemos darle un estilo solamente en caso de que tenga este atributo bueno para eso ponemos los corchetes Okay que esto que están acá es el signo de corchet voy a hacer un pequeño zoom este que está acá es el signo de corchetes y acá voy a poner el atributo en este caso el atributo es src de source y lo pongo igual

la misma sintaxis que en html en este caso es dal alto.png y ahí si yo Por ejemplo le doy un wiet 100% actualizo y funciona por qué porque estoy seleccionando a la imagen fíjense que acá me muestra qué es lo que estoy seleccionando estoy seleccionando a todas las imágenes que tengan exactamente el atributo source dal alto. png de hecho Cómo puedo hacer para seleccionar imágenes cuyo atributo source terminan en punto png bueno para eso le damos en el signo del dólar este que está acá actualizo y ahora me sigue Funcionando Por qué Porque el signo

del dólar le dice ey fíjense Acá está acá podemos ver exactamente lo que está pasando y está lo que está sucediendo es vamos a seleccionar a una imagen que tenga un source que arranque con algo y termine con png eso es lo que hace este signo del dólar básicamente le dice dice puede arrancar con algo Pero tiene que terminar con el signo dólar es eso termina con entonces acá estamos seleccionando las imágenes Okay que Tienen el atributo source y el valor del atributo termina con png puede ser dalto png Eduardo png Pepito png Entonces ahora

le estamos dando solamente un estilo a las imágenes png Eso es todo ahora si queremos darle un estilo a las imágenes que arrancan con algo cómo hacemos yo quiero hacer que arranque con dalto por ejemplo ahí ya no me lo da el estilo no porque este no es signo para arrancar para arrancar usamos el circunflejo lo pueden buscar en Google y Lo copian y lo pegan porque yo siempre hago eso nunca lo lo busco directamente actualizo y ahora me vuelve a funcionar porque este signo le está diciendo okay tiene que ser una imagen del atributo

source que arranca con dalto y después sigue con otra cosa fíjense que antes los tres puntos estaban al principio ah Están al final los tres puntos significan hay algo más entonces arranca con dalto y continúa con lo que sea y el signo del dólar es termina con Entonces En este caso es circunflejo es arranca con y el dólar o el signo del de peso es termina con esas son las funcionalidades o las selecciones por atributo ya actualizo no funciona porque esto tiene que ser un valor Exacto Ven ahora le do el valor exacto y ahí

funciona de vuelta acá Así se selecciona por atributo después tenemos otra forma muy interesante de seleccionar que es seleccionar de forma descendente Y esa forma tiene un nombre que se llaman Selectores descendientes Por ejemplo si yo acá fuera pongo un li suelto de la nada y le voy a decir Jaja XD ingrediente suelto este que está acá es literalmente un ingrediente suelto si yo vengo acá y le doy a los le un color red por ejemplo se me va a estilizar este también pero si yo quiero decirle no no no no no quiero darle un

color red solamente a los le que están adentro de un ul Cómo hago Bueno voy a decir ul Li de esta forma voy a buscar un li que Esté adentro de un ul fíjense acá me está mostrando justamente eso estamos dandole estilos a este Li que está adentro de unul ahora este no está de color rojo porque no cumple la condición el le tiene que estar adentro de un ul Esa es la condición vamos a esto que está acá chicar lo y adentro de esto que está acá vamos a poner un span Okay o más

fácil un strong que acá sea condensada este caso es leche condensada es uno de los ingredientes leche Condensada vamos a ponerlo en minúscula porque es medio raro leche condensada lo puse en un strong si yo quiero darle estilo a este strong qué hago vengo acá y pongo strong Entonces esto que está acá funciona por qué porque le estoy dando un estilo a un strong que esté adent adentro de un L y efectivamente este strong está adentro de un l Pero qué pasaría si yo quisiera decirle quiero darle un estilo a un hijo directo quiero que

el estilo lo tenga un hijo Que sea directamente un hijo porque strong es el nieto de huele no le estamos diciendo el strong tiene que ser hijo de helele le estamos diciendo el strong tiene que estar adentro de un huele es diferente o sea le estamos diciendo el strong tiene que estar adentro de helele puede ser cualquier lado el strong Mientras esté adentro de huele ya está mientras que tranquilamente podría ser un elemento acá otro acá otro acá Este que está acá Es el ul Okay el que está fuera de todo y acá dentro adentro

de tres elementos más está el strong y esto me va a funcionar pero yo quiero específicamente que el strong sea un hijo directo no un nieto ni un tataranieto yo quiero que esté adentro no adentro de otro elemento que está dentro no no adentro directamente bueno Esto no estaría cumpliendo la condición porque strong no es hijo directo de huele es hijo directo de le y le es hijo de w o sea que le sí Es un hijo directo de W pero strong es hijo directo de del I no es un hijo directo de huele porque

está adentro del I Okay y después está dentro de huele cómo hacemos para darle un estilo a un hijo directo bueno para eso usamos este signo que significa strong tiene que ser hijo de fíjense que acá de hecho estamos especificando que tiene que ser este el orden strong tiene que estar a dentro de ul si no no funciona mientras que de la otra forma había tres puntitos ven Fíjense que hay tres puntitos Por qué Porque puede haber algo más strong puede estar adentro de otro elemento que está dentro de otro elemento que está dentro de

huele Pero de esta forma no de esta esta forma es tiene que estar Sí o sí como hijo tiene que estar adentro de u y de ningún otro elemento más Solamente adentro del l esto que está acá lo actualizo deja de tener este color porque no funciona si yo al strong Lo sacara de acá okay fíjense Lo sacara de Acá y lo pusiera lo puedo poner arriba de todo no ahora strong está adentro de huele entonces por eso funciona Pero si yo de vuelta lo pusiera dentro de un div por ejemplo Ya deja de funcionar

porque ya no sería hijo directo de huele sería hijo directo de div sería como un nieto de huele Entonces nada es interesante Cómo funciona esto no de los hijos directos etcétera vamos a dejarlo acá en este caso Vamos a ponerle un em Ahora sí Y acá vamos a decir em pu tiene que ser Hijo directo de ul no en este caso le vamos a darli y ahora sí tiene que ser un hijo directo de Li que es lo que es es un hijo directo de Li Cómo ponemos comentarios en css simple ponemos dos barritas y

adentro ponemos este signo y todo lo que escribamos acá dentro va a ser un comentario ya ya vimos Cómo hacer un comentario en html pero por las dudas lo recuerdo y es básicamente un código que el navegador no le da importancia solamente es para nosotros los Desarrolladores que podamos leer en este caso vamos a poner selector por atributo para dejarlo bien marcado acá vamos a poner Select selector por hijo directo y ahí ya más o menos vamos teniendo como una noción no selector por hijo directo selector por atributo vamos a seguir viendo De qué forma

podemos seleccionar vamos a ver ahora el selector adyacente Cómo funciona esto de los selectores adyacentes bueno básicamente Quiero seleccionar el elemento que está a continuación mío no el elemento que está adentro o el que está por fuera no no el elemento que está está quiero seleccionar a mi hermano al próximo elemento si yo por ejemplo quiero seleccionar este Li que está acá eh lo vamos a sacar Ah no vamos a hacer una cosa Vamos a darle esto también así tenemos descendiente a los l que están adentro de un L y les vamos a dar un

color tienen un color gris 666 y ahora Sí Entonces tenemos tres detectores diferentes Bueno ahora vamos a seleccionar adyacentes Yo quiero seleccionar quiero seleccionar un p y voy a seleccionar a un p que le sigue a un h1 cómo puedo hacer eso Si yo por ejemplo acá pongo h1 y acá pongo más p vengo y acá voy a poner por ejemplo color Blue Y fíjense qué es lo que está estilizando c se está estilizando el p Por qué Porque estoy diciéndole voy a darle estilo a un p que Esté después de un h1 el estilo

se lo aplicamos al p pero solo se va a aplicar este estilo al p si viene después de un h1 yo ahora pongo al revés pongo p y acá pongo h1 esto que está acá no funciona porque el h1 no viene después del P primero viene el p y después viene el h1 y después tenemos el otro que es el selector de hermanos generales vamos a ver qué pasa si ponemos otro párrafo voy a venir acá y pegar y este que está acá lo voy a cortar Ahí está bueno si Nosotros estamos diciéndole que a

los párrafos que le sigan a un h1 se les va a dar un color Blu Este es un selector adyacente Por qué Porque este es el selector de de hermano adyacente Por qué Porque es el elemento que le sigue inmediatamente al anterior o sea solo se lo va a dar al primer p que viene después de un h1 en cambio con el selector de hermanos generales si actualizamos vamos a ver que a este también se le aplica el estilo por qué Porque acá le vamos a dar a todos los p que vengan después de un

h1 es decir en este caso acá Hay un h1 pero el selector de hermano adyacente le va a dar estilo solamente al primer p Por qué Porque es un p que sigue de un h1 pero este p no sigue inmediatamente después de un h1 sigue inmediatamente después de este otro p Entonces si queremos darle estilo a todos los p que vengan después de un h1 sin importar si viene un elemento después dos después tres después O sea Si Acá hay otro elemento ven se Acá hay cualquier otro elemento no importa Por qué Porque lo que

hacemos con el eh selector de hermanos generales seleccionamos a todos los p que vengan después O que tengan de hermano antes a un h1 o sea es lo mismo Solo que fíjense que de esta forma solo se le da al primero y de esta forma se le da a todos los que sigan porque en este caso le estamos diciendo Ey más atrás tuyo Tenés algún h1 que sea un hermano si la Respuesta es sí le damos color Blu mientras que este funciona con una lógica diferente este es he el elemento que viene exactamente antes que

el tuyo es un h1 sí Entonces te lo damos por eso uno es de hermano adyacente o sea le estamos dando el estilo a un elemento que sigue al instante Mientras que el otro es de hermanos generales le damos mientras sea tu hermano y venga después perfecto si p es hermano de h1 y p viene después de h1 ya está mientras que acá Es solamente si p le sigue instantáneamente al h1 Esa es la diferencia buos son los más comunes obviamente también podemos decirle podemos agarar y decir bueno Esto lo vamos a borrar no supongan

que esto lo borramos quiero darle estilo a a un p que le siga un h1 que le sigue a un p entonces actualizo y fíjense que se va a estilizar el otro por qué porque le estoy diciendo le quiero dar estilo solamente a un p que le va a seguir a un P que le va a seguir a un h1 Entonces estamos dando estilo a un p que le sigue a un p que le sigue a un h1 ven entonces así podemos hacer una cadena infinita si quiero puedo por ejemplo darle estilo al ul Entonces

ahora le voy a dar un estilo al ul Ven Bueno ahora no se aplicó Porque ya tiene eh un color acá los Li pero le puedo dar por ejemplo un background Red poner y se va a estilizar por qué porque le estoy dando un background Red a un l que le siga un p Que le siga un p que le siga un h1 ven un l que le siga un p que le siga un p que le sigue un h1 esa sería como la lógica no que de lo que estamos trabajando y lo mismo con

el selector de hijos podemos darle por ejemplo estilo a un spam que está dentro de un m que está dentro de un li entonces acá acá pueden ver la jerarquía ven Estamos dándole estilo justamente a esto a un spam que está dentro de un m que está dentro del l o sea es más a un spam que es hijo Directo de un m que a su vez es hijo directo de un l esto por ejemplo se puede usar para darle un vieron cuando tenemos un ul que adentro tiene los Li que adentro tiene los a

Bueno le damos estilo a un a que está es hijo directo de un li que es hijo directo de un ul O sea fíjense qué interesante Qué es lo que está pasando acá estamos seleccionando un p que sea el elemento que le sigue a h1 que está dentro de una a que es hijo directo de un li es hijo Directo de unl eh Nada medio un mareo pero la verdad que es bastante bastante gracioso y curioso Estas son las formas más comunes que tenemos de seleccionar elementos los tipos de selectores este es selector de atributos

perdón de hijo directo y sel vector descendiente Estas son las formas más comunes de seleccionar y después tenemos para seleccionar múltiples elementos como ya lo vimos Yo quiero darle estilo a un h1 y a un p ponemos una coma Entonces yo le Doy por ejemplo color Brown marrón le voy le voy a estar dando estilo a los p y a los h1 por ejemplo Pero bueno hasta acá nos quedamos porque tenemos que ver el siguiente concepto Porque acá si se fijan tenemos un problemita que le estamos dando estilo un p y le estamos diciendo que

sea Brown pero acá antes tenía un estilo azul Entonces por qué no funcionó Por qué no no le está dando estilo bueno acá hay un poquito de magia Así que no vamos a darle pelota a esto Porque es bastante interesante lo que sucede de trasfondo y para eso tenemos que entender Cómo funciona la herencia la cascada y la especificidad Así que ahora sí vamos a continuar con el siguiente apartado que va a ser cortito Pero va a ser eh bastante necesario que es el de herencia Así que vamos Bueno ahora vamos a ver la herencia

Qué es un concepto que si vieron el curso de python y después vieron el curso de programación Orientado objetos de python ahí hay un apartado que explicamos la herencia que es un concepto que viene a funcionar bastante igual solamente que para los que ya conocen del tema básicamente la herencia habla de que algunas propiedades pueden heredarse y otras no Eso es todo ahora si no sabes un joraca lo que acabo de explicar y no entendiste un forongor forongor con f forongor o soraca uh soraca Me gusta más no se entiende un soraca soraca Uh es

Buenísima soraca nada para los que No entendieron un soraca lo que acabo de explicar básicamente la herencia es un concepto Okay que habla de cómo si a veces ustedes se ponen a pensar seleccionamos un elemento le damos un estilo y o casualidad ese estilo se termina aplicando al hijo y no se termina aplicando al elemento como tal Yo acá por ejemplo tengo una estructura muy simple Okay es un html que tiene solamente un div y tiene un h1 y un p al H1 yo por ejemplo vengo Y le doy h1 color red color red se

pone red Yo vengo al párrafo y le doy color Blue y se pone blue pero qué pasa si yo por ejemplo agarro el body y al Body le doy un color Brown por ejemplo o casualidad los elementos que están dentro adquieren un color Brown le doy botón derecho inspeccionar el estilo está al Body Qué significa esto que si le damos un estilo al Body lo que está dentro también se pone de este color bueno Esto sucede por Una propiedad que eh tiene css que justamente habla de la herencia que es básicamente un concepto que nos

dice que muchas de las propiedades de css No a veces cuando le damos a un elemento sus hijos las heredan de tal forma que si yo por ejemplo al Body le doy un color Brown y un font family s serif por ejemplo todos los elementos que tengan Body no todos los elementos de Body van a tener las propiedades que definimos para Body porque se van a estar Ed dando Hasta que yo las cambie yo vengo al h1 por ejemplo y ahora al h1 le doy un color red Ahora sí el h1 va a tener un

color Red porque se lo estoy cambiando pero si se lo saco el h1 va a tener el color que le definía el body porque el h1 está heredando el color de Body también en el div yo por ejemplo se lo di al div okay fíjense Que si se lo doy al div también funciona Porque el div es padre de estos dos entonces acá si escribo un texto No pasa nada porque Este texto ya no está dentro del div Entonces ya no ya no tiene color Brown y font family s serif pero si de vuelta se

lo doy al Body Ahora sí porque todos los elementos pertenecen al Body vamos a cambiarlo para que se entienda de vuelta esta propiedad es bastante interesante y la podemos trabajar en css es decir hay muchas propiedades que lógicamente No se heredan si yo por ejemplo al div le doy un wid del 50% no significa que los elementos también tengan un wid del 50% El wid no se hereda Porque si sucediera así sería imposible trabajar con s es pero nosotros podemos modificar cómo funciona por defecto el comportamiento de la herencia una cosa igual que quiero aclarar

es que el color inicial de color en realidad es Canvas text no es initial pero bueno eso ya es algo Bastante complejo Así que no voy a meter ustedes hagan de cuenta que sí si yo vengo por ejemplo al h1 y le digo color yo puedo decirle vas a tener un color inherit que Significa vas a heredar el color init es como vas a heredarlo este es el valor por defecto que tiene la propiedad No si nosotros no definimos un color para el h1 el color por defecto va a ser inedit porque lo va a

estar heredando va a decir Ey voy a buscar un elemento padre que tenga un color Porque si yo por ejemplo al Body le doy un color Blue fíjense que el body adquiere un color Blue No pero en este caso está el div que tiene un color marrón yo le voy a Sacar entonces lo que hace el h1 es Okay vamos a heredar el color vamos a buscar una caja que esté arriba por ejemplo el div Y si el div que es mi padre tiene un color me pongo del color que tiene el div si el

div no tiene el color voy a buscar un color más arriba y así vamos buscando un div adentro de otro div Entonces el h1 por defecto dice vamos a heredar el color Okay el div tiene un color si la respuesta es sí Y tiene un color me pongo del color que dice mi Caja padre Entonces si div tiene un color h1 va a heredar el color de div ahora si div no tiene un color div va a decir okay div tiene un color no Okay voy a preguntar a un elemento que esté más arriba en

este caso es Body Body tiene un color si la respuesta es sí se va a poner del color del Body porque es la caja que está más arriba y si el body tampoco tiene color va a ponerse del color que el navegador diga que es negro Entonces el h1 va a heredar el color si Div tiene se pone lo que el div tenga si el div no tiene va a buscar un elemento superior en este caso es el body si hubiera un elemento que envuelva a este div lo buscaría en ese elemento que envuelva al

div Entonces eso básicamente es el el concepto de la herencia no va buscando elementos que estén cada vez más arriba y la propiedad inil lo que hace es eso intenta agarrarse de un elemento superior que tenga esa propiedad definida Y si la tiene a la pero por ejemplo en este caso le vamos a dar un wid del 50% pero el div tiene un wid de 50% pero si quisiéramos que el h1 herede esta propiedad a ahora la está heredando por qué porque wid no tiene por defecto la propiedad el valor inedit porque el sería una

locura Si fuera así no cada vez cada elemento que está dentro sería de la mitad de tamaño de los que no tiene sentido si el div tiene un wid definido y ese Wi desde 50% entonces el Wi del h1 va a ser de 50% Porque va a estar heredando de la caja que está más arriba si este no lo tuviera pero el body tuviera un wid así por ejemplo y en este caso no pasa nada Por qué Porque el div sí tiene un Wi definido el Wi aunque no le demos la propiedad directamente tiene un

wid definido que es el wid del navegador porque un wid al ser un elemento en línea tiene un wid del 100% que de hecho si le damos wid 100% No cambia nada porque los elementos en bloque por Defecto tienen un wid 100% eso eso es lo que yo quería que ustedes observen vamos a dar un color Blue y acá le vamos a dar en red para que se entienda lo que voy en este caso no vamos aar inedit como dije es la propiedad por defecto no que traen varios Element varias propiedades de css de muchos

eh muchos elementos y otros no como por ejemplo el como ya les dije que en este caso por ejemplo para los elementos de bloques el wid es del 100% y en los elementos en línea creo Que es fit content no sé pero creo que es auto o fit content ahora Cómo podemos hacer si yo por ejemplo quiero decir que el h1 no tiene que heredar el color no lo tiene que heredar cómo hago para decir esto tenemos otro valor que es justamente initial que en este caso lo que estamos haciendo es decirle que va a

tomar el valor inicial que tenía Okay básicamente es el el valor por defecto que carga si no lo va a estar heredando si yo por eemplo lo saco hereda si yo le Doy initial no lo hereda Por qué Porque initial lo que está haciendo es decirle Ey Si tuvieras un valor inicial si no heredaras nada y tuvieras un valor inicial Cuál es ese valor inicial Bueno ese valor inicial heredo font family en este caso también es inherit Okay si actualizamos ven que no pasa nada porque sin pero si de vuelta le damos initial se restablece

el valor que trae el navegador por defecto esto lo que hace es lo mismo va a buscar al valor que Tiene el navegador por defecto y lo restablece eso es lo que hace y después tenemos otra que es básicamente un set que lo que hace esta propiedad es restablecer al valor inicial se va a comportar como inedit y si no me lo hereda básicamente es eso realmente resetea el color y por último tenemos revert Si yo por ejemplo acá vengo y pongo revert lo que hace revert es muy parecido Solo que acá hay una pequeña

diferencia revert es parecido a un set Solamente que revert lo que hace primero es intentar encontrar el estilo del usuario si el usuario definió un estilo lo revierte a eso y si no lo revierte en este caso a inedit cuál es el estilo del usuario simple si el usuario se descarga un plugin una extensión de Chrome que le modifica el color va a ese valor si el usuario le modifica al navegador o hace modificaciones el usuario propio yo como adalto me pongo a Modificar el navegador eso es lo que va a dar eh tomar color

en Revert y si no tiene nada vuelve al valor del navegador mientras que unset directamente lo retorna al navegador al valor eh nativo en este caso sería iner pero nada esto realmente no tiene mucha parte teórica normalmente no se usa mucho la propiedad initial un Es raro por eso casi que ni hablamos de eso el único caso donde se suele utilizar incluso inedit por ejemplo es no sé si tenemos un textarea se lo damos al textarea porque vieron que el textarea Tiene un valor un font family Perdón por defecto si nosotros venimos por ejemplo al

textarea Vamos a darle en clases html y venimos a textarea lo vamos a abrir si se fijan acá lo vamos a correr También acá está si le sacábamos el font family en este caso el font family lo que hacía era ponía esta letra monoespaciada si nosotros queremos que herede la tipografía la va a heredar de Body que es ssif si acá le ponemos eh No sé le ponemos una cualquier otra tipografía Por ejemplo taoma fíjense que los inputs De hecho tampoco me toman este valor tienen su propia tipografía los inputs por defecto ya traen San

serif pero si nosotros queremos que el text ara también herede este sans serif vamos a venir acá y sacárselo le vamos a sacar esto esto que está acá no está heredando la propiedad Entonces si de repente tenemos dos problemas si acá le damos San serif si el día de mañana venimos acá y cambiamos por ejemplo la Tipografía a Impact por ejemplo fíjense que el formulario cambia y se vuelve Impact pero el input Y esto no nosotros podemos hacer que esto suceda Entonces al input y al text ara le vamos a dar un font family inedit

y ahora vuelven para arriba en este caso el ya le vamos a sacar el textar de acá Entonces ahora es adaptativo porque si a mí me pinta darle un font family sanif se adaptan al sans serif si me pinta darle un taoma se adaptan a taoma me pinta darle monospace Se adaptan a monospace entonces la tipografía que yo defina es la que esta este elemento va a adaptar por eso ya le voy a dar sanif y está bueno porque lo que acabo de hacer es hacer que yo defina la tipografía una vez y los elementos

hereden la tipografía por eso sí está bueno darle un font family inedit por ejemplo a los input y a los textar y algunos elementos muy puntuales que tienen una tipografía muy específica ese es uno de los usos que solemos hacer Y también al elemento a cuando tenemos un enlace también le solemos dar un color porque se acuerdan que los colores si nosotros a la etiqueta a no le damos un color y le damos color a la etiqueta que lo contiene no se cambia de color bu eso porque el color de a ya está definido por

el navegador en un color azulcito o un Violeta si ya está cliqueo si nosotros a a le damos sin edit va a ir para arriba y ver cuál es el color Entonces es interesante eso que en este Caso lo vamos a dejar así porque acabamos de aprender algo nuevo y un uso interesante no de esto así que de esta sección rescatamos esta esta habilidad copada de no tener que andar cambiando la tipografía si tenemos muchos textarea muchos input y demás no vamos a tener que andar viniendo a la propiedad y ponerle eh font family este

Y si cambiamos una vez la tipografía tené que cambiarla en todos lados no le damos a todos sin erit y la tipografía la Ponemos una sola vez y la página entera se va a ir adaptando a la tipografía que definamos en el body igual a veces sí utilizamos varias tipografías en una página pu en ese caso le dan solamente al contenedor no a los contenedores de esas clases le dan una clase especial y le Adan de esas clases ahora sí entendido este tema de herencia vamos con el siguiente tema y estoy hablando de la cascada

y la especificidad que de hecho la especificidad es un tema Puntual de la cascada no es como son dos conceptos diferentes pero es como que está dentro de cascada especificidad Así que vamos a ver esto porque es super importante porque no nos damos cuenta pero nos afectan en cada cosa que hacemos en css de hecho antes cuando les mostré como a un a un estilo se le dio un color y otro No A pesar de haberlo sobreescrito no se cambiaba de color es raro no porque tenemos estos problemas cuando no entendemos la cascada y la

Especificidad y es que vamos a tener este maldito problema de Por qué si le di un estilo a esto no cambió el estilo que yo le di ese problema lo resolvemos cuando aprendemos de estilos perdón de especificidad y cascada Así que vamos Bueno ahora vamos a ver el tema de la cascada y la especificidad ccs como ya sabemos significa cascading Style heits o hojas de estilo en cascada y acá viene la palabra es decir es la c de css Así que como entenderán es algo muy Importante es una de las cosas que componen justamente todos

es normalmente cuando ustedes están desarrollando una página web no están trabajando en un código escribiendo algo lo que va a pasar es que ustedes están aplicándole estilo a un elemento y van a ver que ese elemento no está tomando ese estilo Bueno eso es porque básicamente ese estilo responde a una puntuación podemos imaginar la especificidad como la puntuación de un estilo si yo por Ejemplo le digo a un a un elemento Che este elemento tiene que ser rojo y este elemento tiene que ser azul de qué color se va a volver azul o rojo bueno

la especificidad y la cascada se encargan de determinar esto de resolver estos conflictos que ocurren al sobreescribir una propiedad en cs es decir una forma de seleccionar u otra forma de seleccionar o un tipo de elemento y demás tiene más puntuación es decir más especificidad entonces se le va dar Importancia a esa eso es lo que vamos a ver ahora Cómo entender el tema de la especificidad la cascada y demás y que entiendan Cómo resolver estos conflictos o Cómo determinar el estilo final de un elemento entendiendo esto yo lo que voy a hacer para arrancar

va a ser agarrar el estilos pun sss y lo voy a arrastrar abajo Okay acá y ahí se me va a dividir la pantalla en dos porque quiero que veamos esto de forma más puntual voy a crear acá un h1 okay Para que se note Bien y al h1 le voy a dar un estilo primero le voy a poner título dos título no título uno principal título principal Ah va y le doy color red Nada lo de siempre se vuelve rojo Nada nuevo pero la cascada vamos a ver el el primer concepto ya la cacá

es un concepto que nos dice ey el orden en el que le damos las propiedades sí importa y si dos reglas una regla es esto Esto es una regla si dos reglas tienen la misma especificidad entonces lo que vamos a Hacer para determinar Cuál va a ser el estilo que queda va a ser el orden es decir cada propiedad supónganse que esto tiene un un nivel de especificidad que justamente acá como ven es esto que dice selector specificity que es esto que está acá que dice que la especificidad es c 0 1 Okay 00 1

ya vamos a entrarnos en eso pero para para empezar pueden ver que estamos viendo un aspecto que nunca nos habíamos fijado si yo vengo acá y vuelvo a agarrar ese estilo Y le doy un Color Blue por ejemplo el color que va a tomar es azul porque acá podemos entender Cómo funciona la cascada el orden sí importa si venimos acá también vamos a ver que este selector dice que la especificidad también es 0 1 Entonces cuando la especificidad es Exactamente igual en ambos casos es 001 el valor resultante es decir la propiedad que va a

quedar la regla que va a contar va a ser la última que apliquemos yo puedo venir acá abajo y decirle el h1 va a Tener un color transparente ahora y se vuelve transparente y puedo seguir bajando y seguir sobrescribiendo de vuelta una y otra vez las propiedades y Esto va a funcionar así con un mismo nivel de especificidad lo que importa es el orden de ahí viene la cascada no se van sobrescribiendo Pero qué pasa si un elemento tiene más especificidad bueno que tenga más especificidad significa que es un elemento más específico html y css

tien en configurados para que Podamos definir Cuáles elementos son más específicos o menos específicos para eso Si yo acá por ejemplo le doy una clase y le voy a poner por ejemplo título ahora no pasa nada porque la forma en la que lo estoy seleccionando es la misma no estoy siendo específico estoy simplemente diciendo al h1 se lo modifica y al h1 se lo modifica Pero si yo quisiera ser más específico acá voy a poner por ejemplo punto título y estoy seleccionando el mismo elemento eh el Elemento que selecciono es el mismo pero si actualizo

el color va a ser red y si pasamos el mod por encima vamos a ver que ahora la especificidad cambió ahora es 010 o sea 0 1 0 esto básicamente significa que tiene más especificidad el valor que menos importa es el tercero el cero de acá el segundo que más importa es este y el que más importa es este que está acá que está AC lo voy a subir y vamos a quedarnos acá en el h1 este que está acá si se fijan tienen diferente Nivel de especificidad Entonces ahora ya la la cascada no aplica

porque la cascada entra en juego cuando hay dos reglas con el mismo nivel de especificidad como esta tiene más especificidad le da da prioridad a esto Entonces si un elemento lo seleccionamos por clase estamos siendo más específicos y cuando somos más específicos css le da prioridad no importa el orden y después tenemos otra forma de ser más específicos todavía y es con un ID si yo Le pongo ID título Okay si yo ahora selecciono por el ID color Green por ejemplo el color va a ser verde porque el ID si se fijan es todavía más

específico el nivel de especificidad que va a tener acá es cer0 acá cer0 y acá uno y y este es el más importante o sea el primer número el primer número es el más importante el segundo es este y este es el menos importante este que está acá Tiene 00 1 este que está acá Tiene 0 1 0 y este que está acá tiene 1 mírenlo como que este tiene 100 este tiene 10 Y este tiene solo uno no es la forma correcta de verlo pero en este caso sí no es como entonces este elemento

es más específico y no importa si lo pongo acá si lo pongo acá siempre va a ser verde no importa en el orden en el que lo ponga como esta regla es la más específica Porque si estoy dando un elemento que html considera más que css Perdón considera más específico Entonces no importa dónde lo ponga Este es el Estilo que va a quedar el color Green va a sobreescribir todos estos porque estas ya no cuentan Y si queremos chequear algo más le damos botón derecho y le damos en inspeccionar y acá desde el navegador vamos

a ver si venimos al Body y ponemos eh foco en el h1 subimos y acá vamos a ver que el título tiene un color Blue tachado un color red tachado y un color Green que es el que se le da si yo tcho este ahora actúa al Green Por qué Porque es el segundo que más Especificidad tiene si tcho este accede el azul pu yo en este caso lo que les quiero mostrar es que si nosotros ponemos el cursor por encima acá también nos salta la especificidad por si ustedes tienen un editor de código en

el que no les salta son rancios si no hicieron lo que les dije de seguir haciendo esto con visual Studio code no importa lo pueden ver desde acá también especificidad de 1 00 acá la especificidad de 0 10 y acá la Especificidad de 001 Entonces eso es la especificidad Okay básicamente es el orden de de prioridad que van a tener los elementos Ahora hay un nivel más allá de especificidad es decir hay un nivel todavía superior al de los ids los ids nos meten en esta capa de especificidad la primera la más importante las clases

nos meten en esta capa de especificidad las segundas más importantes y los elementos comunes nos meten en la tercer capa de especificidad Ahora tenemos otra cosa más importante y es si al estilo se lo damos en línea si yo acá por ejemplo pongo Style y pongo color Violet ahora el color va a ser Violeta Y si pasamos el mouse por encima ya no vamos a ver la especificidad acá ya no pasa por especificidad Okay la la especificidad como dije es un concepto de cascada pero la cascada funciona así O sea la cascada lo último que

va a ser lo último de todo A lo que menos prioridad le va a dar va a ser a los Elementos definidos por el navegador eso es lo que va a hac la cascada en este caso son estos que están acá que ven que dice user agent esto que está acá el user agent sería Google Chrome en este caso es el navegador estos estilos del h1 se los está dando específicamente el navegador entonces Esto es lo que primero le va a dar prioridad a la cascada Pero si yo agarro y modifico el display o modifico

el font size y demás la cascada le va a dar prioridad a lo Que yo estoy modificando como desarrollador Pero además de eso hay otro más importante en la cascada tenemos varios niveles no como de lo más importante hasta lo menos importante en lavador ocupa este lugar que es el último es el menos importante de todos la cascada va a llegar como último acá la cascada en realidad no va así la cascada sería de arriba hacia abajo no de costado pero vamos a hacer de cuenta que se entiende Lo que menos importancia Va a tener

va a ser el Google Chrome entonces la cascada va a sobreescribir a Google Chrome si el usuario tiene estilos definidos Qué sería Esto bueno Esto es básicamente no es el usuario cualquiera es el usuario que está utilizando el navegador O sea si yo por ejemplo soy el usuario de Chrome yo puedo agarrar y decir quiero que el color de fondo sea este voy a agarrar y me voy a bajar una extensión todo eso es estilo que da el usuario ni Vos ni yo ni Nadie el usuario Entonces por un lado está la configuración que viene

por defecto en Chrome pero más importante va a ser lo que el usuario defina y después viene lo que nos nosotros definimos Okay nosotros en nuestra hoja de estilos creamos un archivo pun css Okay y lo definimos pero hay algo que todavía es más importante y estoy hablando de la etiqueta Style una forma que tenemos de entender cómo funciona la cascada pero aún así hay más capas todavía hay más Capas otra capa todavía más grande que esta es el atributo Style es más importante Ya vamos a llegar a eso tranquilos ahora vamos a ver bien

qué es esto pero lo más importante de todos y el Boss definitivo que se pasa por el oro todas las demás eh capas es esta palabra important con el signito este de cierre de exclamación ahora vamos a ver qué significa esto porque tiene mucha importancia la especificidad ya la vamos a entender una vez que entendamos esto Primero Qué pasa el navegador cuando carga el el navegador cuando carga dice ey Cuáles son las propiedades que el navegador tiene por defecto y carga las propiedades que el navegador tiene por defecto después va a la segunda capa que

es lo que el usuario tiene definido si tiene alguna extensión que le modifique algo vieron las extensiones de gocom bueno como as así como instalamos la de accesibilidad web la del chromebox bueno est es lo mismo todo lo que tenga estilo Eh lo que el usuario haya configurado Y si el usuario configuró un estilo que sobreescribe esta capa No importa la sobreescribe porque esta capa puede sobreescribir a esta o sea es más importante para la cascada que lo que el navegador defina entonces lo que este escriba sobreescribe es como una cascada no sobreescribe lo que

el navegador ya definió por defecto lo que nosotros como desarrolladores escribimos modifica lo que el usu ario tiene de extensiones es Decir nosotros como desarrolladores le damos todo un estilo a la página ese estilo que nosotros damos sobreescribe al que lo usuario definió es más importante Lo que el desarrollador dice y lo que el desarrollador Define que lo que el usuario Define y la etiqueta estilos como ya vimos antes okay Si no tenemos estilo el estilo que va a tener es el del navegador Es simple el navegador le da este color negro Entonces va a

ser el color negro después Va a buscar a la segunda capa que es esta capa que está acá si el usuario tuviera extensiones o algo que modificar en el color de esto se modificaría el color después viene lo que nosotros escribimos acá lo que nosotros escribimos en un archivo aparte que está linkeado en otra hoja es después lo otro más importante pero si Además de eso venimos acá y ponemos la etiqueta Style y vamos a decir que el h1 va a tener un color Aqua el color no va a ser Aqua Porque acá tenemos más

especificidad O sea tendríamos que seleccionarlo por título y ahora sí va a tener Aqua Ahora si la hoja de estilos la defini después va a estar esto porque en este caso es exactamente lo mismo la hoja de estilo la solemos poner arriba de todo entonces si esta hoja de estilo Define que el color va a ser Green pero después que el color va a ser Aqua Entonces el color queda Aqua pero si la hoja de estilo la ponemos después primero se define que el Color es Aqua y después se carga la hoja de estilos que

dice que el color va a ser Green Entonces se queda Green eso es lo que pasa entonces pero normalmente el estilo suele definir esto acá a menos que lo pongamos el estilo arriba de esto ahí sí tampoco funciona Pero bueno nada para que lo entiendan pero más importante que esta etiqueta que está acá Okay más importante aún que esta etiqueta ahora sí ya va por un tema de cascada es lo que tengamos en Style si Le damos Style color Violet justamente el atributo Style es más específico todavía más específico porque va directamente al elemento que

quiere modificar y lo modifica entonces lo que escribamos acá normalmente suele estar Al mismo nivel que esto estas dos sobreescribe pero este acá funciona aparte el atributo Style sobreescribe a las anteriores se entiende Style es más importante todavía pero ahora sí se viene el Boss de los Boss la más Importante de todas y la que el navegador dice si está esto puesto me chupan huevo todas las anteriores Vamos a darle prioridad a esta color Blue y acá escribimos important actualizamos y el color va a ser Blue porque hay un important el important es esta regla

que se pasa por los huevos todos si se fijan acá la especificidad es la misma eh No aumentó porque la especificidad sigue siendo 1 qué baj it es muy baja pero est important en la cascada Funciona diferente porque la cascada lo agarra y le pone prioridad por sobre todo el resto entonces básicamente lo que está más arriba modifica lo que está más abajo entonces vamos a modificarlo bien Esto así funcionaría la cascada en ccs ahora sí me sirve mucho más si solamente hay agua acá lo que importa son las propiedades que dice Chrome si hay

agua acá el agua cae y sobreescribe a todo este elemento Entonces se quedan con las propiedades de user si también Hay agua acá cualquier de estas dos sobreescribe también a todas las anteriores Entonces los estilos que van a contar son los de estas dos lo que definamos en nuestro código css o en nuestra página y si hay agua acá o sea agua me refiero a estilo no a una propiedad un valor va a sobreescribir a todas las anteriores pero más todavía más importante si hay agua en el important este agua va a sobreescribir absolutamente todo

el resto todo no Tiene Piedad con nada entonces así funciona la cascada es una cosa que va sobrescribiendo a la otra lo que Define el nave ador es lo menos importante y tenemos una cajita no y el navegador dice que la cajita va a ser de color negro El color es negro si el user dice que el color va a ser verde ahora el color es verde porque está este elemento que sobreescribi a este este ya no cuenta porque este está más arriba en la cascada si cualquiera de estas dos pone Un color rojo ahora

la cajita va a ser roja porque cualquiera de estas dos puede sobreescribir a esta porque está más arriba en la cajada si con el atributo Style definimos que el color va a ser rosa Entonces el color va a ser rosa pero si el important dice que el color va a ser azul entonces la caja va a ser de color azul este important con su agua sobreescribe con la cascada a todo lo demás O sea si todos estos tienen definidos un color A qué le va a Dar prioridad al navegador le va a dar prioridad al

al important porque el important es lo que la cascada Define que va a tener más importancia lo segundo que va a tener más importancia si no hay un important es el la etiqueta Esta que está acá el atributo este y si no t atributo ni le importan va a quedar el color rojo porque lo definimos desde nuestro estilo o de una etiqueta en la página y si no está ninguna de estas tres vamos a tener que utilizar los Colores que Define el usuario y si no hay nada Está todo sin nada se quedan los colores

del navegador así funciona la cascada en css ahora qué es la especificidad bueno la especificidad dice cuando tenemos conflictos a qué le damos prioridad es decir si yo por ejemplo tengo un important acá y ahora pongo que va a ser red y le doy otro important el color es red Qué pasó si le habíamos dado un important bueno la única forma de sobreescribir un Important es con otro important Pero esto a su vez tiene más especificidad porque si Este título lo selecciono desde una clase título título va a volver a ser Azul Por qué Porque

ahora tenemos que la cascada Define primero que ambos tienen important perfecto pero este viene después pero este es más específico Entonces primero Busca el rango de cascada importan perfecto estos dos entran en el mismo Rango Qué pasa este tiene más especificidad entonces el Color que se queda es el color con más especificidad más o menos eso por ahora Okay ahora vamos a ver otra forma de de entenderlo miron que acá justamente esto tiene un uno Y por qué tiene un uno Qué puede tener un dos un tres bueno Esto es fácil si yo por ejemplo

ahora selecciono al título que está adentro de la etiqueta Body fíjense que ahora hay doble especificidad porque ahora tengo uno acá y uno acá entonces lógicamente si yo acá pongo punto título va a valer Lo mismo o sea así se queda en rojo por qué Porque ambos tienen lo mismo pero qué pasa a este a Este título lo estoy siendo más específico porque ahora tiene 0 1 1 Mientras que el de abajo tiene solamente 10 entonces obviamente 11 es más específico que 10 tiene más puntaje Entonces es con el que se queda pero está bueno

porque también pueden utilizar un failback Okay que un failback básicamente es como eh un código que damos como segunda opción Supónganse que ustedes están trabajando en una nueva funcionalidad supónganse que yo estoy usando el color de una forma extraña Como por ejemplo ocul si yo le doy color con ocul puede ser que no funcione porque es una funcionalidad muy nueva Entonces qué hago digo bueno acá voy a poner un color y voy a poner un color parecido en rgb no como por ejemplo este Entonces le doy un color acá y en caso de que el

navegador todavía no soporte esta funcionalidad se Viene para acá pero como esto es más específico lo primero que se va a aplicar es esto que está acá pero si por algún motivo esto no funciona la regla que sigue es la que continúa que es esta que está acá pero si esto funcionara como es más específico se va a aplicar esta Entonces eso Serían como los filb bueno gente este fue el apartado de cascada y especificidad sé que es un poquito complejo pero despreocúpese no lo entendieron Yo siempre digo que se Despreocupa Porque seguramente desde que

comenzó el curso hay varias cosas o varios apartados que No entendieron o que se les complicó pero que a medida que fuimos avanzando en el curso se fueron dando cuenta de A qué me refería es decir hasta ahora llevamos más o menos 9 horas de curso Ya sé es un cálculo rápido que saqué al principio del curso hay varias cosas que no entendían pero mientras fueron avanzando las fueron entendiendo bueno Esto no va A ser la excepción Por qué sería la excepción si algo de esto no lo entendieron des preocúpense que más adelante cuando nos

veamos obligados a aplicar los conceptos de cascada y especificidad a un proyecto vamos a tener que entenderlos y ahí es cuando lo van a terminar de entender ahora si lo entendieron de entrada nada Son unos fucking genios ya voy a parar de hablar y vamos con la siguiente sección y para qué les voy a mentir si la siguiente Sección me encanta estoy hablando de la pseudoclases que es realmente Mágico y ahora van a ver cuando veamos pseudoclases van a ver cosas que van a decir Ah con razón así que vamos Ahora sí a entender las

pseudoclases que al fin y al cabo no deja de ser más de esto otra forma de seleccionar ciertos estados o momentos o algo puntual de un elemento Así que vamos a ver eso bueno ahora vamos a ver las pseudoclases básicamente una Pseudoclases lo que nos permite es seleccionar un estado específico de un elemento que seleccionamos es decir supónganse que yo acá por ejemplo tengo el elemento h1 y acá le vamos a poner título acá tenemos el h1 con el título yo puedo venir acá y Modificar el h1 Okay color le vamos a dar un color

48 que es el que nos gusta un f family Sun series pero ya está hasta acá puedo hacer más no margin le voy a dar en píxeles Bueno lo que nos permiten hacer Las pseudoclases es es como seleccionar un estado específico de un elemento es eso son palabras clave que nos permiten seleccionar un estado específico de un elemento es como algo así como si yo agrego esta palabra clave al elemento voy a poder modificar este elemento cuando esté en este estado Por ejemplo yo doy h1 y doy over Este es el la seoc clase más

común de todas y lo que estamos haciendo es seleccionando el h1 cuando esté el mouse encima si yo acá le Doy por ejemplo en color y le doy en negro yo pongo el mouse por encima y el color va a ser negro esto hacemos con over es una pseudoclases que literalmente es una palabrita clave que nos va a permitir seleccionar un estado específico Cuál es este estado y el estado de este elemento es Mouse over es el evento cuando el mouse está por encima del elemento se pone de este color también podemos decir el background

va a ser un poquito más Oscuro ponemos el mous por encima y el background es un poquito más oscuro a este color se lo vamos a vamos a dejarlo negro también color vamos a dejar ahí Entonces cuando pasamos el mouse por encima de este elemento se pone en color negro y el fondo es gris así funcionan las pseudoclases estamos seleccionando estados de un elemento en este caso el over es la pseudoclases creo diría yo la más utilizada de todas vamos a poner cuando pasamos el mouse por encima de h1 La otra seud clase es active

h1 active Esta es otra muy común que active básicamente lo que hace es definir el color de un elemento cuando le damos click 999 y va a tener blanco Acá pasamos el mod por encima adquiere las propiedades que le dimos en el hover Pero si clique pasa otra cosa de hecho si sacáramos el over se va a poder notar más cuando doy click básicamente es un estilo que se aplica al dar click Ahí está entonces estado común Mouse encima Cuando damos click Estas son las dos pseudoclases más utilizadas yo voy a venir acá yo acá

voy a pegar esto y voy a poner mientras se esté cliqueando h1 eso hace active da este estilo mientras el elemento h1 se esté cliqueando o esté activo que un elemento esté activo significa que está cliqueo y digo que click porque puede ser click izquierdo o clic derecho cualquiera la dos le doy clic derecho y funciona también se abre esto después pero funciona le doy clic Izquierdo y también c izquierdo y derecho cualquiera la dos después tenemos una seudo clase que No necesariamente selecciona un estado es una forma diferente de seleccionar si nosotros utilizamos por

ejemplo tenemos un ul y al ul le vamos a dar varios Li Li elemento espacio signo del dólar pegamos y ahí se pega bueno esto Yo después les voy a explicar cómo joraca hago esto pero básicamente esto es emed como se lo dije tranquilos que también Voy a enseñarlo ahora en este apartado de css intermedio actualizo y acá Tengo cuatro elementos ahora si yo utilizara dos pseudoclases podría seleccionar específicamente el primer elemento Li y el segundo elemento Li yo por ejemplo acá escribo le y doy color red se seleccionan todos los le seleccionando el primer

le seleccionando el último le vamos a ver cómo llevar de esto a seleccionar solo el primero y cómo llevar de esto a seleccionar solo el Último para seleccionar el primero vamos a poner dos puntos First Child y First Child literalmente selecciona el primer lead dice he vamos a seleccionar al primer le que encontremos a la o sea básicamente cuando nosotros ponemos le lo que hace css es ir a buscar todos los le y todos los elementos que encontró para modificar solo selecciona el primero así como si tenemos 30 elementos con la clase Beta de los

30 que van a tener la clase Beta solo Busca El primero eso es lo que hace encuentra dentro de la selección completa de lo que encontró acá solo el primer elemento y también tenemos el último si yo por ejemplo al último le quiero dar un color Blue vamos a hacerlo de vuelta 00 F y acá vamos a poner f00 esto que si se dan cuenta esto tiene un poquito más de especificidad porque ahora tenemos una especificidad de 1 1 mientras que este que está acá Tiene una especificidad de 10 entonces este que Está acá no

va a sobreescribir al rojo solo a los otros así que por eso lo dejamos ahora para seleccionar el último a ver si First selecciona al primero cuál selecciona el último Exacto Last Child igual sol lo que Last y ahí seleccionamos el último ahora lo que se van a preguntar es si yo quisiera seleccionar al segundo elemento Cómo podría seleccionar al segundo elemento seleccionando al segundo le que acá acá en vez de poner First qué hago pongo Second no solamente podemos seleccionar al primero y al último con pseudoclases la pseudoclases First selecciona al primero la pseudoclases

Last selecciona al último si quisiéramos seleccionar a un x hijo qué hacemos ponemos end okay Y esto selecciona a un enésimo elemento si venimos acá y ponemos dos Esto va a seleccionar al segundo elemento Vamos a darle color vamos a hacerlo verde esto seleccionó al segundo también podemos poner tres y selecciona el tercero Podemos poner cuatro y va por el cuatro bueno en este caso no porque se acaba de sobreescribir tiene la misma especificidad Entonces como este está último lo sobreescribi pero eso es lo que hacemos en este caso si podemos Modificar el primero porque

estamos más más adelante ven modificamos el elemento uno el dos el tres y así Eso es lo que hace un Child la forma correcta de Modificar el primer elemento es con fus ch la forma correcta de Modificar el Último es con las ch la forma correcta de modificar elementos que no sean ni el primero ni el último es con nth Child and Child O sea no no es correcto hacer esto ni tampoco hacer esto para seleccionar el último lo correcto es seleccionar alguno de entre el dos hasta el anteúltimo porque para eso ya tenemos el

fth y el Last también podemos hacer que se saltee algunos fíjense Qué interesante esto si yo acá por ejemplo pongo más elementos l 10 elemento Ah va Perfecto fíjense que lo que estoy haciendo acá de vuelta se modifica el primero y el último Pero además de poder hacer esto 3 cu 5 7 y así yo si acá pongo por ejemplo 1 n se van a seleccionar todos pero si yo pongo 2n estamos modificando un elemento sí un elemento no un elemento sí un elemento no un elemento sí un elemento no si pongo 3n se va

a estar modificando un elemento sí dos elementos no un elemento sí dos elementos No si solamente ponemos Un número por ejemplo tres Este es el número que vamos a seleccionar el elemento 3 el cu y el 5 pero si ponemos un número y acompañamos con una n ese número significa la cantidad de elementos elementos que va a seleccionar y n significa que solo un elemento de esos seis va a estar con el estilo Entonces vamos a ir de seis en seis en este caso estamos yendo de uno en uno ven uno Sí Uno no Uno

Sí Uno no en este caso sería de tres solo uno se va a Modificar o sea cada tres elementos Li vamos a modificar solo uno entonces de cada tres elementos solo uno cada tres elementos solo uno cada tres elementos solo uno entonces así seleccionamos el segundo Li así seleccionamos un li Sí y un li no y acá podemos hacer funciones matemáticas ha de todo un poco pero nada con esto quedemos noos esto es muy utilizado para tablas por ejemplo agarramos el ul y le damos un background 999 que podemos hacer a los le un li

Cada tanto le damos un background color por ejemplo fff entonces de esta forma al H le vamos a dar un pading cero Ahí está y fíjense ven un elemento tiene este fondo Uno no Uno tiene este fondo uno no Este es un ejemplo de de un caso muy usado para hacer cuadrículas de que un elemento sí un elemento no un elemento sí un elemento no vamos hacerlo un poquito más claro para que se entienda El ejemplo Vamos a darle ddd p por ejemplo cinco píxeles uno Sí Uno no Uno Sí Uno no después Tenemos uno

parecido que se puede hacer exactamente lo mismo que un Child Solo que un Child selecciona por tipo o sea Busca un li y solamente selecciona los le Pero si yo por ejemplo acá pongo tengo un li acá pongo un span y acá tengo esto no este va a quedar en negro Pero si yo vengo acá y acá abajo pongo le of type AC voy a poner por ejemplo dos le voy a dar en color br fíjense que acá me está seleccionando este yo acá pongo uno me Está seleccionando este o sea me saltea este elemento

del medio si yo busco Child acá pongo dos me lo olvida o sea si acá literalmente pongo dos es como que no me No no va a seleccionar me se entiende acá pongo uno y me lo selecciona si pongo dos como hay un elemento Que interfiere no me lo va a seleccionar le pongo tres y ahí me lo selecciona porque un Child tiene en cuenta a los hijos o sea este es el elemento uno Este es el dos Este es el Tres color blanco para que se desaparezca y se entienda si yo acá le doy

uno desaparece el primero le doy dos el segundo no no desaparece porque no es un L y el tercero sí es un Entonces lo puede modificar está teniendo en cuenta 1 dos 3 cu 5 si queremos modificar este este es el elemento cinco Ahí va se modificó el elemento 5 ahora si yo lo uso con off type y actualizo se me va a Modificar el otro elemento Por qué Porque ahora solo me cuenta los Li los Que no son Li no los cuenta entonces el elemento uno es este y el elemento dos ya no es

más este porque este no es un li Entonces no lo cuenta como elemento si lo hacemos con Child no pasa nada si lo hacemos con off type pasa esto Esa es la diferencia seleccionando el segundo l después tenemos not vamos a agarrar a todos los l vamos a agarrar ul L y a todos estos al ul le vamos a poner una clase clase lista y a esto le damos un color blanco no se va a modificar pero Si a esto le damos con lista ahí sí se va a modificar porque es más específico tiene más

especificidad Ven ahora el uso lo entienden como pasaron una hora de curso y todavía no vimos algo tan básico como la especificidad si yo digo Che quiero hacer que uno de estos ignore este color Cómo puedo hacer Entonces vamos a venir por ejemplo al elemento 4at y le vamos a dar al elemento cuatro la clase l cuat el en cuatro elemento cuatro qué hago ahora que ya le di la Clase elemento cuatro voy a decir Bueno vamos a dárselo a todos los elementos Li que no tengan la clase lm4 por ejemplo Vamos a ponerle excluido

a ver Va que no tengan la clase excluir y ahora sí fíjense que se modifican Todos menos el elemento cu a todos los elementos le dimos un color este que sería color Vamos a ponerle red a todos los elementos le dimos un color rojo menos al elemento cu a todos los que tienen la clase excluir los excluyo por Ejemplo al elemento s tamb y lo vamos a excluir ahora el elemento siete clase excluir y ahí también se excluye este caso tomó el verde que tenía antes lo damos a otra por ejemplo el elemento ocho y

ahí está el elemento ocho tampoco se incluye eso es lo que hace seleccionando los le dentro de lista pero que no tenga la clase excluir después tenemos otros Como por ejemplo empty Yo acá le voy a sacar un par de elementos si yo por ejemplo acá le vamos A dar solo para hacerme más espacio acá abajo yo acá voy a crear por ejemplo un elemento div si yo quiero agarrar este div voy a decirle que por ejemplo vamos a venir más para abajo los div van a tener un background color 0 f0 un verde y

van a tener un padding de 30 píxeles ahí está este elemento ya está así es fondo este y este padding perfecto ahora Cómo puedo seleccionar a los elementos vacíos Bueno si yo quisiera darle esto Solo al elemento En caso de que esté Vacío le pongo empty Entonces de esa forma solo lo hago con los elementos vacíos si tiene algo ya cambia en este caso tiene algo porque está abierto tiene espacio si yo le borro el espacio Ahí está vacío esto es un elemento vacío si le pongo algo adentro ya de dejo de estar vacío O

sea que la propiedad ya no la va a tener si está vacío tiene esto si no nada solamente se lo damos a los elementos vacíos seleccionando el div en caso de estar vacío y esto para que es Útil Agarramos al div y le damos por ejemplo un Border dos píxeles solid Black por ejemplo vamos a a ver este ejemplo vamos a sacarle esto si este div tiene por ejemplo un párrafo No lorem perfecto tiene un borde todo bien pero si el div está vacío para qué queremos que tenga este borde negro es un asco queda

feo en este caso vengo acá y se lo saco Border no entonces en caso de estar vacío no tiene borde en caso de que haya contenido adentro ahí tiene un borde si No tiene contenido no tiene borde si tiene algo de contenido ahí adquiere un borde eso Por ejemplo es algo que es útil eso es lo que hace esta propiedad seleccionando el div en caso de estar vacío después tenemos Root que Root sería arriba de todo si yo por ejemplo acá vengo y pongo Root Root básicamente es una una pseudoclases que se pone así a

secas selecciona al elemento raíz yo por ejemplo le doy un color así este color todo esto lo van a heredar porque El elemento raíz lo adquirió pero no importa yo ni la voy a usar después es útil Por ejemplo si tenemos un input Okay tenemos un input vamos a hacer cuenta que tenemos un input checkbox Si queremos verificar algo en caso de que esté chequeado yo por ejemplo esto le voy a dar input type check Box y le voy a dar a este input un por ejemplo margin de 50 píxeles por ejemplo lo que yo

voy a hacer es que en caso de que esté chequeado no tenga esto así que voy a Venir a poner y selecciono el mismo elemento y acá voy a poner checked que lo que hace checked es chequear que le hayamos dado clic acá acá le voy a dar margin cero Entonces si no está chequeado tiene margen de 50 si está chequeado tiene margen cero un segudo clase que selecciona un elemento chequeado después También tenemos uno muy interesante que es el de los a si yo por ejemplo voy a sacar el checkbox si yo por ejemplo

tengo una Https.youtube.com barto emprende acá tenemos un texto por ejemplo dalto emprende si yo este enlace lo quiero modificar Cómo hago seleccionando enlaces no visitados y acá vamos a dar en seleccionando enlaces visitados específicamente visitados y no visit yo le pongo a Y le doy dos puntos link acá voy a estar modificando el elemento que no fue visitado si yo acá por ejemplo le pongo color red ahí significa que no fue visitado o sea vieron que el navegador Detecta cuando un enlace es visitado y cuando no acá por ejemplo tengo el enlace soy alto y

este enlace sí está visitado soy de alto por qué porque yo ya varias veces utilicé el enlace a mi canal de YouTube ent es un enlace que ya está visitado es este ven es un enlace que ya visité entonces si yo quiero modificar los enlaces ya visitados en vez de link pongo visite y acá le voy a poner Green por ejemplo Entonces los enlaces ya visitados se ponen en verde y Los no visitados se ponen en rojo acá por ejemplo le voy a dar en Target Blank Y si yo ahora a este le doy click

Ah Me faltó la roba si yo por ejemplo ahora le doy click acá fíjense que ahora me marca como que está visitado porque lo acabo de visitar si yo le pongo un signito de pregunta por ejemplo el enlace es el mismo pero ahora no está visitado le doy click y vuelvo y ahora me lo marca de vuelta como visitado eso Es lo que hace el la pseudoclases link y la s clase visited Ahora si yo no le pongo un href directamente se va a quedar en color negro porque ya prácticamente no cuenta como a porque

no tiene el atributo hrf el hrf le da automáticamente ni bien se pone estos estados de visited y link o está visitado o está no visitado si está no visitado está en estado link si está en estado visitado está en visitad Así es como funciona y así gente tienen un Montón más de pseudoclases para ver si buscan mdn pseudoclases acá se van a encontrar con este apartado que está acá y acá tienen todas las pseudoclases que hoy por hoy funcionan De hecho acá fíjense que yo como visité este enlace de en Child me marca que

está en este color Qué interesante no que qué qué retórico todo acá tienen todas las clases Focus por ejemplo es si tenemos un input y apretamos en ese input vieron que el mouse se nos pone así ven que Aparece y desaparece Bueno eso es Focus enable es para cuando está activado y disable es para cuando está desactivado el input por ejemplo full screen es para cuando algo está en pantalla completa invalid es para cuando un input de repente vieron que si ponemos un un email Y esa email no funciona por ejemplo vamos a poner un

input acá type email escribimos acá algo que no es un email y venimos acá y ponemos input invalid acá vamos a darle en color red Cces ven el input que no es válido tiene color red si yo por ejemplo acá pongo gmail.com ahora como tiene formato de mail ahora me lo marca en negro pero si es inválido no es un formato decente me lo marca en rojo es una buena forma de verificar no un input si esto es válido me lo va a dejar en el color natural si no me lo va a poner en

rojo que es el color de inválido también está el valid el valid funciona igual si no es válido me lo deja así pero si si se vuelve Válido me lo pone rojo en este caso lo usaría para Red entonces usaría invalid para rojo y valid para Green por ejemplo Entonces si esto es inválido va a estar en rojo y si es válido va a estar en Green Y de esa forma le decimos al usuario cuando un input es válido y cuando no acá vamos a bajar y vamos a poner seleccionando inputs inválidos y acá le

damos en seleccionando inputs válidos Ahí está ya está todo bien comentado mi consejo es vayan de vuelta A este apartado exploren bien las pseudoclases que créanme que son mágicas así que bueno gente ahora vamos con el siguiente apartado que es parecido hay tres nuevas pseudoclases que salieron hace poquito que son is y has que son espectaculares y son super potentes quieren que veamos el uso de estas pseudoclases vamos a ver vamos a ver un apartado especial lo dejo solamente un apartado especial sobre todo has has es nueva las demás entre comillas nuevas Vamos a ver

where is y has vamos Bueno ahora vamos a ver sobre estas tres es has is y were pero voy a hacer lo más rápido posible supónganse Okay que yo tengo un elemento por ejemplo con la clase el un o elemento uno tengo otro elemento spam con la clase elemento dos y tengo este div con la clase elemento 3 Acá tengo mi estilo css si yo quisiera modificar estos tres elementos al mismo tiempo yo lo que haría sería poner vamos a cuenta de Hecho que todo esto está dentro de un section si vengo acá pego todo

todo está dentro de un section perfecto yo vendría y pondría section punto elemento 1 coma se punto elemento 2 coma se punto elemento 3 y ahí abriría corchetes y pondría Perdón llaves y pondría Che a veces si hablo y digo una cosa que no es por ejemplo digo propiedad en vez de atributo o digo llaves en vez de corchetes o corchetes en vez de llaves o digo cosas que a veces dec esto no tiene Sentido por favor intenten no matarme yo en edición lo intento corregir pero no siempre puedo Te juro que no me di

cuenta bueno acá por ejemplo pongo color red y automáticamente este elemento este vamos a cambiar el span en otro lugar porque me parece que no se va a notar la diferencia Ahora sí el elemento uno el spam y el div van a tener un color rojo Es lógico esto ya lo habíamos hecho lógicamente es como hacer esto O sea básicamente lo separamos por coma Solo Que es más ordenado si lo separamos por coma y lo tenemos así cómo puedo hacer para hacerlo más fácil bueno simple la forma para hacer lo más fácil es poner section

y utilizar is o Word cualquiera de las dos y acá dentro poner de hecho ponemos dos puntos is y acá decimos punto elemento uno elemento dos y elemento tres ahora venimos acá y le damos el estilo que queríamos en este caso un color Blue la diferencia es que acá no estamos aplicando esto este Elemento funciona por sí solo y básicamente lo que hace es agrupar agrupa este elemento este elemento y este elemento como tal o sea básicamente agarra el elemento uno de section el elemento dos de section y el elemento tres de section entonces actualizamos

y ahora sí se vuelve en color azul de hecho si sacamos el section funcionan igual ven hago así sacamos el section ponemos y también funciona o sea no cambia es lo mismo acá le ponemos Green Se vuelve Green entonces básicamente eso es lo que hacéis agrupa si nosotros por ejemplo a todos los encabezados no a todos los encabezados h1 h2 h3 h4 h5 h6 le queremos dar un estilo por ejemplo un color Green Esto no es problema lo podemos hacer el tema de esto es que Qué pasa cuando están adentro de algo esto no sucede

pero por ejemplo si queremos darle a eh Body h1 body h2 Body h3 Body h4 esto es más fácil sacar esto y poner Body y acá poner is h1 h2 h3 h4 h5 y Ya Está nos ahorramos todo los puntos entonces esa es más o menos la clave no para hacer eso porque nosotros no podemos poner section coma elemento 1 y acá poner coma elemento 2s no porque esto me seleccionaría si se fijan solo al elemento uno que está dentro de section y además me seleccionaría al elemento 3 y al elemento 2s aparte no me

está seleccionando el elemento dos que está adentro de section está seleccionando solo el elemento dos Entonces funciona de forma distinta por eso el is nos viene a salvar En estos casos usé el section para que entiendan que eh lo que nos abrevia es específicamente cuando estamos eh utilizando selectores descendientes o demás ahora si nosotros en vez de poner esto perdón si nosotros en vez de poner esto usáramos un Word por ejemplo fíjense que ahora no cambia Pero qué pasa si es lo mismo si yo te lo borro se queda azul Si acá pongo un is

se queda Azul Pero por qué con un Word no le da prioridad bueno fíjense es esto si pasamos el mod por encima la especificidad acá va a ser de 001 Y esta es de 01 1 Pero si acá ponemos is la especificidad acá va a ser 0 1 1 y acá 0 1 1 o sea que acá por cascada como lo pusimos después tienen la misma especificidad Esto va a sobreescribir a esto Esa es la diferencia entre is y were que is cambia la especificidad mientras que Word no la cambia es decir Es la misma

especificidad que si tuviéramos solo el elemento Vamos a darle Word Ven y ahí queda uno solo la mantiene Exactamente igual Esa es la diferencia principal y después tenemos has que has es un una seudo clase que se le da al elemento padre por ejemplo si tenemos section a el elemento section le vamos a dar el has en este caso sí lo ponemos junto porque es el has de section así como ponemos over en este caso es has y se pone así y Lo que vamos a verificar con has es que tenga algo por ejemplo Que

section tenga un elemento uno en caso de que section tenga un Element elemento un le vamos a dar un background negro por ejemplo ahora si el elemento uno desaparece Ya deja de tener un background negro lo que hace hasz es modificar este elemento o sea el elemento al que se está aplicando el has En caso de que adentro tenga este elemento de acá eso es lo que hace es decir Che section tiene el elemento uno En caso de que lo tenga le vamos a dar un fondo negro y un color blanco en caso de que

no lo tenga lo sacamos eso es lo que hace el has también podemos hacer cosas como estas si por ejemplo yo quiero agarrar el div que le sigue a un yo qué es lo que hago yo vengo acá y agarro así y pongo ul más div entonces acá por ejemplo le doy en background color negro y estoy modificando el div que le sigue a un si yo quisiera verificar que el div le siga al ul pero El estilo se lo voy a dar específicamente al ul Cómo hago no puedo si lo pongo al revés tampoco

me funciona como vimos porque en este caso estamos diciendo otra cosa estamos diciendo que vamos a Modificar el ul que le siga un div la lógica es diferente no no sirve bueno para eso usamos el has y decimos vamos a modicar el ul que continúe con un div O sea si el ul le continúa un div vamos a Modificar el ul así lo que hacemos Es Modificar el div pero con el Has decimos si ul más div existe vamos a Modificar el ul no el div porque así modificamos el div mientras que así modificamos el

ul la condición es la misma eh tiene que haber un div seguido de un ul pero en este caso modificamos al div Y en este caso modificamos al ul solo que antes esto no lo podíamos hacer o era un li hacerlo con c acá lo vamos a comentar para que quede bien claro y listo en caso de que a ul le siga un div modificamos el ul modificando el section En este caso vamos a poner un is ahí vaas se modifica de verdad esto que acá lo vamos a cambiar Vamos a darle color Blue esto

lo vamos a sacar directamente ahí está modificando los elementos 1 2s y tres que están dentro de algún se Si queremos que no cambie la especificidad usamos is y es es exactamente lo mismo usamos Perdón Word ya está tenemos todo comentado la verdad que es interesante Porque si se ponen a pensar yo por ejemplo con el has puedo agarrar el Input que tengo acá y vieron que al input utilizábamos el valid fíjense Qué interesante esto yo acá tengo un Label no yo voy a agarrar así y voy a poner un Label y al lado del

Label voy a poner el input no y acá voy a poner type email como antes esto lo vamos a meter dentro de un div Ahí está y acá vamos a poner el Label input type mail y el Label va a decir email dos puntos entonces ahí tenemos el email si nosotros utilizamos el por ejemplo input baid Esto va a Tener un color Green por ejemplo no entonces ahí ven si esto es válido tiene un color verde si esto es inválido tiene un color red Entonces hasta acá ya sabemos que esto funciona Pero si yo quisiera

que el lo tenga acá si yo quisiera que en vez del color lo tenga esto como joraca puedo hacer agarramos justamente al padre que en este caso por ejemplo es Label y decimos si el Label has input valid Vamos a darle al Label este color con invalid Venimos acá y damos invalid y ahí fíjense que el color en vez de tenerlo el hijo o sea el input lo tiene el Label Entonces ahora sí podemos modificar esto y en caso de que funcione el Label es quien va a darle el color ven Esa es la clave

en este caso Label font weight bt así más o menos se entiende bien al de lo vamos a agarrarle vamos a dar un padding 20 píxeles Ahora sí Bueno entonces acá tenemos el ejemplo del email si el input es válido me lo deja En verde si no es válido me lo va a dejar en rojo ent es una forma interesante de validarlo okay y queda más estético para mí tener esto así que darle estilo a esto también lo podemos hacer eh No hay problema acá podemos darle una coma y también darle input valid Entonces estamos

seleccionando esto y esto ambas Entonces si es válido se da a los dos no hace falta que se le de a uno solo ven acá lo mismo coma input invalid y ahí sí si es válido se Le da a los dos y si no se le da uno solo Esta es una forma interesante de darle uso a has está dentro de las recomendaciones que Google Chrome nos nos da que usemos en los las últimas cosas que se agregaron a css que es recomendado Así que úsenlos que las pseudoclases seleccionan como estados como vimos no como

un estado o una particularidad Mientras que el pseudo elemento selecciona como partecitas de algo por ejemplo nunca se Preguntaron Yo acá por ejemplo tengo un play holder esto que está acá es un play holder no escribimos y se va nunca se preguntaron Cómo modificar por ejemplo el color del Play holder o el tamaño o la tipografía nunca se preguntaron Cómo modificar eso cómo accedo a eso eso es un elemento no no es un elemento es un un pseudo elemento nunca se preguntaron Cómo modificar esto de los Li esto que está acá Este signito asqueroso cómo

lo puedo modificar lo puedo cambiar Bueno Se puede sí se puede Por qué Porque no es un elemento es un pseudo elemento esas son cosas puntuales que vamos a trabajar en la próxima sección de pseudo elementos Así que vamos a ver pseudo elementos Bueno ahora lo que vamos a ver es el tema de los pseudo elementos los pseudo elementos justamente lo que hacen es es una palabra clave que representa una parte específica de un elemento no se trata de un elemento como tal sino una parte de un elemento vamos a Trabajar ahora sobre la misma

página que antes solo que ahora le cambié el título y además le dejé solamente el estilo de padding 20 píxeles nada más y así tenemos esto que está acá los pseudo elementos se representan con dos puntos Por ejemplo yo quiero acceder a un pseudo elemento pongo dos puntos un pseudo elemento muy común es el pseudo elemento First letter este pseudo elemento ya creo que podemos darnos cuenta lo que hace Y sí selecciona la Primera letra okay Y si acá por ejemplo le damos en font eh No más fácil en color red lo que estamos haciendo

es haciendo que la primer letra se ponga en color rojo sí también le podemos cambiar el font size por ejemplo 36 Pixel o 3 em por ejemplo y se va a poner más grande podemos cambiarle el letter spacing cer por ejemplo o -1 píxeles o -1 pixeles ven ahí así está más unida voy dar os6 píxeles por ejemplo 8 Ahora sí Y fíjense que ahora tengo un título más extraño no Porque es eso el resultado final me da un título más extraño pero lo que estoy haciendo es acceder a la primer letra después tenemos otra

cosa First Line supónganse que yo por ejemplo acá voy a adentro de este div poner un lorem y el lorem es larguito no es bastante larguito el lorem y esto que está acá le voy a poner en otro div div otro lorem a estos de elementos le vamos a sacar el elemento si y el ocho porque ya es demasiado largo vamos a sacarle también El elemento tres y ahora sí es mucho mejor si yo quiero modificar por ejemplo solo la primer línea Cómo hago Bueno vamos a por ejemplo div y vamos a darle dos puntos

First Line y si yo por ejemplo le doy Ahora sí en un color red se va a modificar la primer línea del div en este caso Esto está dentro de un div entonces Y como el Label hereda el color se modifica Pero si acá por ejemplo damos fir Line se modifica solo la primer línea de tal forma que si esto Es más grande fíjense que todo lo que se va poniendo en la primer línea se vuelve de color rojo es más podemos poner un font we volt por ejemplo y también está en negrita todo lo

que está en la primer línea se va a poner en negrita eso es el selector de la primer línea acá viene algo interesante nunca se pusieron a pensar Che cuando yo selecciono un elemento este elemento que estoy seleccionando hace que el elemento se ponga de color blanco y tener un fondo Azul no se dieron cuenta Eso seleccionamos un elemento y literalmente esa selección nos genera el texto blanco y el fondo Azul Por qué pasa esto eso porque el pseudo elemento selected es selec Perdón selec se llama selection No selected yo acá por ejemplo pongo background

color red fíjense que ahora mi selección se vuelve de color rojo Entonces tenemos esto no porque esto ya está siendo afectado por el F letter si le sacamos el F letter Ahora sí ven es Completo pero bueno Esto se puede aplicar a todo yo se lo puedo dar por ejemplo al Body entero No no va a funcionar porque no es una propiedad que se herede tenemos que elegir el el momento exacto para eso podemos poner así y ahora sí pero esto no es una buena práctica Esto no es correcto de hacer este selector es el

selector e general o sea selecciona todos selector de todo y ahora todos los elementos cada vez que hagamos así ven se van a poner de color Rojo en vez de ponerse de color azul que se cae a pedazos Pero bueno en este caso lo vamos a hacer con el div por ejemplo Entonces todos los dip que seleccionemos se van a poner de color rojo y también si queremos podemos hacer que el color Okay dos puntos color sea blanco por ejemplo entonces colores blanco y el texto es rojo solamente acá porque acá No acá es el

original de toda la vida lógicamente los se elementos tienen sus dificultades No yo no puedo Por ejemplo venir acá y darle un padding de 20 píxeles porque no me va a funcionar No puedo darle display block padding 20 píxeles me va a sacar no funciona así también vamos a intentar Modificar el Play holder sí se puede modificar con un pudo elemento Vamos a darle input Place holder y podemos darle por ejemplo un color Green y se vuelve verde no Entonces es Interesante como el Play holder también puede cambiar de color y podemos darle un background

Color negro y si el background color se vuelve negro Entonces de hecho podemos darle un padding no No le podemos dar padding pero se lo voy a mostrar de hecho podemos darle hasta un padding acá padding 20 pixeles por ejemplo y fíjense como ahí juega un poquito el tema del padding o sea realmente e es una propiedad que bueno los paddings son laterales en este caso una prop es una forma bastante peculiar de afectar ciertas cosas de los elementos no Tenemos también el marker que modifica lo de acá arriba si yo por ejemplo vengo a

los le y quiero Modificar el marker y les doy un color red se me acaba de modificar esto de color rojo se modifica el color y con eso Ya pónganse contentos y listo y ahí pueden modificar el color sin necesidad de modificar más nada pero bueno nada tenemos dos dos pseudo elementos más que tenemos el spilling error y el grama error que uno es para un error ortográfico y otro es un error Gramatical y después tenemos el que se aplica a dialogo que por ahora no lo vamos a ver pero con estos que son los

más importantes ya tienen el conocimiento suficiente para entender los pseudo elementos que son solamente 10 si son 10 los pseudo elementos y acá vios siete no no vimos siete no vimos 1 2 3 cu cinco Ah faltan dos que son muy importantes que es before y after yo por ejemplo agarro el le no y le voy a dar un before lo que puedo hacer acá es Utilizar la propiedad content y acá por ejemplo darle un texto antes y fíjense lo que pasa Le estoy dando un texto antes que no lo puedo seleccionar no puedo seleccionarlo

ese texto antes y de hecho puedo darle un color red y ahí está fíjense Qué interesante por ejemplo elemento dos puntos y ahí está Esto es lo que hace el elemento bfor y fíjense que no aparece le damos en inspeccionar fíjense que el le adentro tiene un elemento y tiene el marker y tiene el Before el marker está igual Aunque nosotros no lo definamos es esto que está acá ven después tenemos el before que es eso que que continúa ahí y después tenemos el texto qué es esto fíjense Qué interesante como el navegador nos lo

muestra no por eso justamente Son pseudo elementos no son elementos como tal pero acá lo tenemos y así como tenemos el before tenemos el after que es lo que está después after y acá podemos poner por ejemplo después Blue por ejemplo ahí tenemos después Entonces tenemos antes después before elemento dos after eso son justamente los pseudo elementos más comunes ahí tenemos los siete más importantes esto es interesante porque acá justamente en un futuro vamos a ver como por ejemplo trabajarlo con display block y no no realmente estos dos seudo elementos son mágicos porque podemos agarrar

un elemento crearlo de la nada convertirlo en bloque y hacer más cosas ahora no lo Vamos a hacer Pero podemos hacer botones muy piolas con bfor podemos hacer animaciones muy lindas vamos a ver más adelante cuando hagamos al un proyecto que en el que lo requiramos pero está bueno que entiendan que se puede justamente crear estos pseudo elementos before y after que de hecho se amerit en una sección especial pero no lo voy a hacer todavía porque nos Faltan algunas cositas para darle un uso máximo a estos dos seudo elementos me despido por ahora Vamos

a ver eh justamente lo que es vem y una metodología interesante para eh aprender a trabajar de tal forma que cuando creemos proyectos No nos volvamos locos Porque nada la realidad es que como dije el tema de la especificidad de un lío a veces cuando creamos proyectos Está bueno que aprendamos alguna metodología y que la trabajemos a lo largo del curso para que cuando salan el curso al menos puedan manejar alguna metodología o forma de trabajar que sea Una buena práctica no así que vamos a aprender lo que es Ben y después vamos con off

fit y off position que también son son importantes que las veamos porque es para trabajar con imágenes y después de eso vamos a ver display que es una propiedad muy importante y después de eso vamos a ver la propiedad position que es importantísimo Cómo funciona el position absolute el relative es muy importante y después veremos un par de boludeces más que son Importantes para cerrar la sección intermedia mandarnos algún proyecto hacer algún proyectito y arrancar la sección de flexbox muchachos así que bueno vamos con bem Bueno ahora vamos a aprender a utilizar la metodología bem

bem viene de block Element modifier okay Que básicamente Eso es todo lo que compone la metodología vem se compone de bloques modificadores y elementos o mejor dicho bloques elementos y modificadores ahora Primero vamos a lo más básico Por qué usamos una metodología bueno en este caso una metodología es una forma específica de trabajar Eso es todo yo por ejemplo cuando grabo los cursos tengo una metodología para grabar se entiend es una forma de trabajar de tal forma que pueda hacer producciones cursos todo y todo salga bien más ordenado etcétera en este caso una metodología en

css se utiliza por varios motivos lo primero es que nos permite Reutilizar código Ese es el principal objetivo de esta metodología es decir tenemos una forma interesante de optimizar código si nosotros por ejemplo tenemos dos botones diferentes normalmente nosotros lo que hacemos Es le damos un estilo a un botón y le damos otro estilo a otro botón entonces lo que tenemos son dos botones diferentes Pero hay partes del código que se repiten Esto es lo que nos permite hacer esta propiedad es crear una base es una Especie de estilo predefinido para un componente que después

con los modificadores podemos ir modificando para no tener que andar escribiendo de vuelta todo el código y una y una y otra vez vamos de a poquito pero primero tienen que entender que la primera ventaja es reutilizar código ahora que arranquemos a escribir código vamos a ver esta ventaja bien más a fondo pero reutilizar código es el principal motivo por el que usamos benem segundo se Resuelven problemas de especificidad si ustedes van a un generador de especificidad o alguna de esas plataformas que ven en el gráfico de especificidad que tiene su código van a ver

que normalmente es complicada la forma en la que manejan la especificidad los proyectos que no trabajan con metodologías bem básicamente nos permite saber cómo escribir código Y cómo nombrar a las clases para solamente viéndolas saber qué hacen y Qué Significa Entonces no tenemos que ser tan específicos porque con clases estamos sobrados y eliminamos un montón de problemas que surgen de la falta de reconocimiento no de de lo que estamos viendo al leerlo Entonces es mucho más fácil trabajar de esta forma entonces resuelven problemas de especificidad y tiene código más legible yo sé que si por

ejemplo entro a un lugar tengo un elemento para modificar yo ya sé ese elemento De qué trata el elemento sea Dentro de dónde está y sé lo que quiero modificar ahora vamos a ir viendo de a poquito para empezar como ya sabemos la metodología vem separa de tres partes bloque elemento y modificador un bloque es básicamente un componente independiente que no depende de nadie para existir por ejemplo una barra de navegación es un bloque una tarjeta no como la que creamos hace un tiempo es un bloque un formulario es un bloque un bloque es esto

no es como un componente De una página que podemos reutilizar en cualquier otro lugar de la página por ejemplo acá tenemos un bloque justamente esto es un bloque no porque una publicación viene siendo un bloque Por qué Porque después reutilizamos la publicación Si yo fuera un desollador a mí me gustaría darle estilo una vez y que después esa pueda repetir y hacer una y otra y otra y hacer 30,000 publicaciones y que todas tengan el mismo estilo pero que si quiero Modificar a una en particular lo pueda hacer pero sin tener si tengo 35 publicaciones

35 veces repetido el código No eso es un bloque después tenemos un elemento que un elemento justamente es la e de vem block Element modifier la e de elemento hace referencia a una parte de un bloque un pedazo del bloque que por sí solo no tiene sentido pero adentro del bloque Sí por ejemplo si yo creo un menú de navegación un menú de navegación tiene Iconos por ejemplo acá tenemos un menú de navegación Por qué Porque le damos clic acá y accedemos a varios lugares si yo de repente pongo esto que está acá en otro

lugar de la página no tiene sentido esto es un elemento porque fuera de este lugar no tiene sentido pero acá dentro sí lo tiene por qué Porque básicamente es un elemento que forma parte de este bloque que es el menú de navegación y después tenemos a los modificadores que es una forma de Modificar un bloque o un Elemento O sea yo puedo tener muchos bloques y puedo tener muchos elementos pero a veces si yo quiero que un bloque sea distinto de otro o un elemento sea distinto de otro tengo que modificarlo para eso agregamos una

clase modificadora que se va a encargar de modificarlo ahora vamos a ver vamos a arrancar hacer una prueba vamos a crear por ejemplo un h1 que va a tener una lista de ingredientes no vamos a tener una lista de ingredientes y vamos vamos A poner un l Okay acá vamos a poner Li Y en este caso Vamos a ponerle sal papa harina y agua estos son los ingredientes de los gis sal papa harina y agua por ejemplo no solamente es un ejemplo Cómo puedo aplicar la metodología bem simple primero vamos a ver cómo sería si

no lo aplicáramos si no lo aplicáramos esto se vería así a esto le agregamos por ejemplo la clase lista acá le agregamos la clase ingrediente es más a todos los le le agregamos la clase ingrediente Entonces venimos acá y trabajamos y lo modificamos lista va a tener un Border dos pixeles solid negro bien hasta acá estamos bien los ingredientes van a tener un color Grey Okay van a tener un pading 10 píxeles van a tener un margin arriba y abajo 20 píxeles y a los costados nada esto es ingrediente no ingredientes Ahí está no solamente

de 10 píxeles y en vez de darle voy a darle l Style Y en vez de darle el dis le voy a dar en cuadrado comoo es sar ahí va y Ahí Ahora son cuadrados en vez de ser círculos pero le voy a poner la clase especial a un ingrediente y quiero que el ingrediente sea ingrediente importante no ent acá vengo y pongo ingrediente importante y le doy exactamente las mismas propiedades solamente que el color va a ser red por ejemplo y a la sal le voy a dar ingrediente danino por ejemplo por qué porque

hace mal nos hace daño voy a poner ingrediente danino vengo acá copio De vuelta y pongo ingrediente danino y va a tener lo mismo solamente que el color va a ser Yellow Ahí va Ahora sí perfecto Es más Vamos a ponerle a este al danino le vamos a poner rojo y al importante le vamos a poner Blue porque el Blue es importante y el rojo es danino tiene mucho más sentido y fíjense todo el código que tenemos para esto que está acá en este caso tenemos desde la línea cco hasta la línea 21 okay O

sea tenemos 16 líneas de código Pero tenemos Esta línea que se repite en todos o sea en todos los lugares esta línea se repite una de las cosas que viene a resolver la metodología vem es esto primero acá dice ingrediente importante pero la pregunta es estos ingredientes adentro de dónde están O sea no entiendo el contexto no entiendo no entiendo En dónde se sitúan si están en una lista si están en un párrafo esto también lo Resuelve la metodología bem vamos a ver que si ahora aplicamos la metodología Bem esto es un bloque la lista

completa es un bloque porque es independiente no necesita de nadie para existir es un bloque entero es una lista Entonces esto puede tener el nombre lista los bloques se tienen que nombrar con la funcionalidad que tienen es decir si la funcionalidad del bloque va a ser una lista le ponemos lista si tuviéramos un menú de navegación le ponemos nav o navbar o menú o menú por ejemplo puede ser Entonces eso es lo que vamos a hacer Y acá la forma de nombrar elementos no es ingrediente así no se hace se suele poner el nombre del

bloque en este caso lista tal cual el mismo nombre del bloque y se pone dos guiones bajo Por qué dos en vez de uno y porque a veces nos podemos llegar a confundir Si vemos que hay un solo guion bajo y no sabemos si es para separar palabras o no Entonces para quedarnos seguro de que estamos haciendo la metodología de forma correcta se pone dos guiones bajos y Además se pone el nombre del elemento Li es un elemento pero Qué elemento es le Bueno es un item Entonces tenemos el bloque lista y adentro del bloque

lista tenemos el elemento item y tenemos item que está dentro de lista Entonces ahora se lo damos a todos ahí está y de esta forma fíjense que interesante porque ahora yo vengo acá y pongo lista item y fíjense que ya le di a todos este estilo no lo vengo acá y lo pego acá Ahora sí Ahora yo ya incluso aunque no vea la Lista yo ya sé que este elemento si sigo la metodología vem es un ítem que pertenece a una lista o sea que es un list item entonces solamente viéndolo Ya resolví un problema

antes no sabía A qué pertenecían los ingredientes Okay no sabía Pero ahora sí sé entonces ahí ya tenemos un problema resuelto ya sabemos a qué pertenecen le doy esto para todo ya sabemos cómo escribir un bloque ya sabemos cómo escribir un elemento Qué pasa si yo quisiera modificar como antes Quiero hacer que la sal sea danina y el agua que perdón y que la harina sea en cantidad bueno dejo un espacio y agrego una segunda clase esta nueva clase que vamos a agregar es la clase modificadora para agregar una clase modificadora como vamos a modificar

al elemento se pone el nombre del elemento si el elemento es em tenemos que poner el nombre del elemento o sea em Y en vez de poner dos lones bajos ponemos dos lones medios que esto lo que significa es Okay Va vamos a Modificar al elemento item y acá ponemos el nombre de la modificación que le vamos a hacer en este caso es item danino Ahí está y la segunda era item que era como era item importante importante Ahí tenemos item y todas son items todas son items adentro de lista pero estas van a ser

clases que van a modificar estos elementos Ahí viene la m del modifier bloque que es la lista Element que son los list item Y estos son los modificadores para modificar Ahora venimos acá y ponemos em danino y le damos col red y acá abajo venimos y ponemos em importante y le damos color Blue y ya con esto fíjense cómo hicimos muchísimo mejor lo de antes no tuvimos que repetir el código porque no repetimos este código antes lo repetíamos en todas Entonces se nos hacía 21 líneas de código ahora en vez de esto tenemos esto fíjense

mucho mejor y si esto lo tenemos en algo tan simple como una lista que esto no es ni el 2% De una página web imagínense el problema que habríamos tenido si nosotros teníamos una página web completa Sin manejar una metodología Como por ejemplo metodología bem tendríamos el doble o hasta el triple de código de lo que deberíamos tener por eso es importante manejar esta metodología creamos un bloque un bloque puede ser como dije un formulario una barra de navegación lo que sea podemos crear bloques adentro de los bloques están los elementos que en Este caso

el elemento es em Y si queremos modificar algo se pone items danino ahora vamos a dar de cuenta que tenemos más de una lista vamos a crear varias listas de esta forma ya tenemos el estilo para cada una de esas listas y si queremos modificar una lista vamos a hacer de cuenta que queremos modificar esta lista lista vieja vamos a poner cómo hacemos para modificarlo bueno ponemos el nombre de lo que queremos modificar acá es el elemento entonces Ponemos el nombre del elemento que es item pero acá queremos modificar una lista Así que ponemos el

nombre de la lista lista guion guion y el nombre que le vamos a dar va a ser vieja Entonces qué hacemos Le bajamos la opacidad lista guion guion vieja y le bajamos la opacidad y ponemos por ejemplo un opacity 0.5 en la opacidad eh básicamente le cambia la transparencia es una propiedad que no se las había mostrado antes creo pero le cambia la Transparencia y le vamos a dar un background color csc básicamente de esta forma podemos demostrarle al usuario que es una lista vieja Vamos a darle ddd es como es como decirle Ey esto

ya es una una lista de ingredientes vieja y de esta forma fíjense que tenemos tres bloques pero si quisimos modificar uno solamente agregamos una clase modificadora y ya con eso tenemos todo resuelto lo mismo con los elementos tenemos elementos pero si queremos Modificar un elemento agregamos una clase modificadora que modifica el elemento acá agregamos una clase modificadora que modifica la lista y así funciona la metodología bem al principio cuesta entenderla cuesta terminar de comprender la idea o el concepto pero es muy fácil solamente consta de bloques y elementos que son elementos que están adentro de

los bloques y esos dos son los más importantes después están los otros que son los modificadores los Modificadores son clases especiales para modificar bloques o clases especiales para modificar elementos Eso es todo entonces un bloque es un componente un elemento está dentro de un bloque y un modificador modifica al bloque o al elemento para ser los diferente del resto y de esta forma reutilizamos código es un código mucho más legible y encima resolvemos problemas de especificidad Así que ahora en más vamos a trabajar con esta metodología vem para Crear páginas web que nos consuman muchísimo

menos recursos por utilizar menos cs por trabajar menos la especificidad y es una buena práctica utilizar bem Bienvenidos a una buena forma de trabajar y escribir código que es con la metodología bem ahora vamos a ver otra de las cosas que es importante que tengamos en cuenta que es el tema de la propiedad display vamos a ver cómo funciona display cómo funciona display inline block Cómo funciona inline cómo Funciona block Y cómo funcionan none esas cuatro propiedades de display y ya cuando veamos esto después vamos a ver otra cosa que es importante pero por ahora

con esto estamos bien Es una de las propiedades más importantes de hecho de sss Así que vamos a ver la propiedad display Bueno ahora vamos a ver justamente el uso de la propiedad display inline block block inl toda la yo por ejemplo voy a crear un div Okay y voy a crear una cualquiera a este A le voy a poner enlace Ahí está y voy a agarrar el div le voy a dar un 20 píxeles un background voy a dar un background color 999 Ahí va y voy a agarrar el body por no Body y

le voy a dar un margin cero Ahora sí perfecto yo tengo el enlace acá pero si yo vengo acá y pongo un enlace al costadito son dos enlaces aparecen uno al lado de otro yo voy a agarrar el a le voy a dar un background color red por ejemplo Entonces ahora es son eh enlaces que Tienen un background color red hasta acá está todo bien y le voy a dar un color blanco fíjense Qué pasa si yo ahora a la le doy la propiedad display block Bueno yo les voy a decir lo que acaba de

pasar lo que acaba de pasar es que ahora a se convirtió en un bloque Qué pasa cuando un elemento que no es bloque de hecho fíjense si le sacamos la propiedad display block la propiedad por defecto que traen los links es que son elementos en línea son etiquetas inline los a son Etiquetas in Line entonces si yo les agrego el display block se vuelven etiquetas de bloque cuando un elemento le damos display block estamos haciendo que ocupe todo el ancho disponible eso es lo primero que hacemos Es decirle que ocupe todo el ancho disponible por

eso en vez de ahora ponerme al lado el a ven que antes me lo ponía al lado bueno ahora me lo pone abajo ya ahí tenemos un problema Vamos a darle un Border Border dos pixeles solid y vamos a dar no un Pixel solo un un Pixel solid negro para que se vea bien la diferencia antes de display block aparecían así pero ahora que le dimos display block aparece uno abajo del otro entonces una de las características es que ocupa todo el ancho disponible otra de las características es que comienza una nueva línea Es decir

como ocupa todo el ancho disponible comienza una nueva línea que son dos cosas diferentes una cosa es que ocupa todo lo que está Disponible y otro es que si venía de un elemento que todavía le sobraba espacio me importa arranca abajo de vuelta los elementos en bloque aceptan márgenes yo a esto le puedo dar un margen de 20 píxeles y fíjense cómo se pone acepta paddings padding 20 píxeles por ejemplo esto le puedo dar un padding es interesante Pero fíjense qué pasa si yo ahora le saco el display block si le saco el display block

lo que pasa es que no me va a permitir esto lo que pasa es Que tenemos un enlace acá y el otro aunque no lo veamos porque está siendo tapado por el otro está acá si yo por ejemplo a esto le doy un opacity 0.6 acá vamos a ver que esto es como si no le diera ni marching ni padding eso justamente Sí porque es lo que ocupan pero a lo que voy es que básicamente es como si realmente no estuviera esto por qué es esto porque en realidad lo que está pasando cuando nosotros le

damos el margin y el padding a los elementos de Esta forma es que medo que se rompe porque los elementos en línea como a por ejemplo no aceptan ni permiten que funcione correctamente el marching y el padding Si queremos que lo acepte tendríamos que darle justamente fíjense que acá no no o sea es como que aceptan el margin y aceptan el padding pero no ocupa lugar en la página o sea si yo acá por ejemplo pongo un p no y escribo un loremipsum.net al tamaño del elemento en este caso el Margin y el padding efectivamente

están afectando la caja si la caja ocupaba 30 píxeles ahora la caja va a ocupar 100 píxeles porque le sumamos el margin y le sumamos el margin si lo tenemos en línea si el elemento es un elemento en línea Okay no va a cambiar nada va a ser lo mismo entonces esa es la diferencia principal no acepta marching no acepta padding para cambiar el tamaño y encima los elementos display block ocupan toda línea Esto es lo que vimos ya lo sabemos No hay nada nuevo al principio del curso vimos que hay elementos en línea y

elementos en bloque pero ahora acabamos de ver cómo hacer que un elemento de línea como a se converte un elemento de bloque Okay display block ya está convertimos a un elemento en línea a un elemento de bloque esto que está acá es como si fuera un div o sea ahora el a básicamente podría LG llegar a ser como un div tranquilamente le podemos dar borde el a podría ser un nav el a podría Ser un ul podemos hacer que se comporte como querramos ahora así que hasta acá Nada nuevo como también lo podemos hacer al

revés tenemos por ejemplo el div Okay que es esto que está acá Okay vamos a hacer que el div no tenga los enlaces y que el div tenga un poquito de texto no va a ser un p van a ser dos p vamos a poner dos p ahí está los p Son elementos en bloque porque componen un bloque si yo ahora agarro los p y les doy background negro y un color blanco para Que sea bien intenso Y le doy display inline acabamos de hacer que el texto sea inline Vamos a darle un margin 5

píxeles solamente el margin que acepta es vertical o sea los márgenes Okay de los elementos en línea y el padding solamente funcionan de forma vertical perdón de forma vertical no de forma horizontal si yo por ejemplo le doy un padding V si yo acá por ejemplo le doy un padding 20 píxeles solo funciona de forma horizontal porque de forma Vertical Por más que lo veamos y sea visible no está realmente teniendo un padding porque no estamos rellenando una porque no no afecta realmente al flujo del del documento puces el padding y el margin solo funcionan

horizontalmente Okay los elementos en línea además tampoco per permiten que le demos un alto y un ancho si yo por ejemplo esto le doy un hte 100 píxeles le chupa un huevo le chupa completamente un huevo pero si esto fuera un elemento En bloque como lo es p por defecto Ven ahora sí alto 100 píxeles ambos elementos Entonces los p tienen cada p 100 píxeles Ah pero le doy display Line y pierde porque no le importa ni el ancho ni el alto le doy un le doy un wiet 500 píxeles qué me importa a mí

qué me importa que vos me des un wiet el contenido de los elementos en línea va a ser solamente lo que nosotros escribamos o o lo que le demos adentro o sea el el tamaño se va a ajustar al contenido así Que bueno Esas son las propiedades de display tenemos block e inline podemos agarar elementos en línea y convertirlos en elementos de bloque o podemos agarrar elementos de bloque y convertirlos en elementos de línea pero también por ejemplo si creamos una tabla una tabla Y tenemos los TD Y tenemos los Perdón tenemos los TR tenemos

los TD fíjense que acá esto es una celda si le doy botón derecho y le doy inspeccionar fíjense que curioso que esto tiene un Display Table cell O sea no es ni display block ni display inline es display Table cell de hecho la tabla los Table también la propiedad Table O sea fíjense que Table tiene la propiedad display Table Entonces esto no es para nada casualidad no hay solamente dos tipos de display display block y display Line no hay más tipos de bloes tenemos tipos de tenemos tablas tenemos celdas tenemos list item tenemos bloques Y

tenemos bloques elementos en línea Entonces hay varios tipos y ahora vamos a ver uno muy curioso que es bastante usado también yo por ejemplo voy a tener un menú va a tener el menú va a tener un ul vamos a crear cinco list que cada uno dentro va a tener una a que la va a tener un contenido que va a decir link y va a ir aumentando progresivamente y ahí se acaba de crear esto lo vamos a aprender al final de esta sección de html intermedio se llama emet y van a ver cómo escribir

código Así de rápido Con estas abreviaciones yo tengo esto que está acá Okay que es un menú es un menú muy si yo por ejemplo voy a Google esto es un menú de verdad porque aparece uno al lado de otro voy a usar la metodología Ben vamos a aprovechar Class nav a Esto va a tener la clase nav acá vamos a darle un espacio y vamos a hacer que el a por un lado y los Li por el otro así queda más ordenado y a los Li le tenemos que dar la clase nav list o

nav item sería perdón nav item porque Es un ítem de navegación 2 3 4 5 perfecto hasta acá está todo bien Ahora vamos a agarrar a los a le vamos a dar la clase nav link porque son links ahí está ahí le di nav links a todos perfecto hasta acá está todo bien ya tenemos la estructura por lo menos la estructura ya la tenemos bien hecha vamos al código css venimos acá y le damos Bueno lo del Body se lo dejamos igual y vamos a agarrar nav y le damos a dar un background Como me

gusta a mí 48e Perfecto hasta acá está todo bien pero no le vamos a dar así le vamos a dar al nav porque ahora ya estamos trabajando una metodología Vamos a darle al nav ul que en este caso No deberíamos hacerlo así deberíamos dar una clase a esto clase nav list Así que vamos a darle nav list margin cero para que también se pegue más arriba y tenemos dos opciones una opción es agarrar los nav item Y darles un display inline y ya está pero qué pasa con esto bueno el problema que Pasa con esto

es que si le damos un padding por ejemplo de 10 píxeles medio que se pone medio feo no Porque primero no me toma el padding O sea que no puede tener un background si yo el background se lo doy también a esto background color 48e por ejemplo V tiene como un color feo no es la forma correcta de hacer una barra de navegación para eso utilizamos la propiedad inline block ahora fíjense lo que acaba de pasar inline block es una mezcla entre inline Y block pero básicamente funciona Exactamente igual que los elementos en bloque solamente

que ahora se pueden apilar O sea no ocupan todo el ancho disponible y no inician una nueva línea Esa es la única diferencia que ahora sí podemos trabajar con elementos en bloque pero Unidos Entonces ahora sí fíjense que tenemos toda esta barra de navegación y ahora sí puedo darles a los nav links le puedo dar un color blanco por ejemplo y les puedo sacar el text Decoration none que es el cosito de abajo y ya está tengo el link un el link 2 el link 3 tengo todos los links ya está hermoso es más le

voy a dar un font family San serif Ay terrible acabamos de crear un menú de navegación tan rápido la respuesta es que sí y ahora es más hasta le podemos dar un over Miren qué interesante podemos agarrar y poner nav item over background color y acá vamos a hacerlo más clarito 6 a f por ejemplo y ahora ponemos el mouse por encima y Fíjense ya está así de fácil y esto ser una e ahora es más sutil ahora me gusta más pu es más sutil bueno Y acá creamos un efecto de over acabamos de ver

cómo crear por ejemplo una barra de navegación de forma efectiva después obviamente adaptado dispositivos móviles y hace de otra forma pero ahora siguiendo la metodología vem si yo por ejemplo quiero que de repente un link se convierta en un botón qué hago en vez de un a por ejemplo acá le pongo link Button por ejemplo entonces vengo acá y pongo link Button y acá por ejemplo le voy a dar un borde del mismo color que el fondo un background blanco fíjense qué interesante esto que voy a hacer ahora voy a dar un padding de 10

píxeles Vamos a darle cuatro nada más ahí va Vamos a darle un color 48e que es el mismo que el texto Vamos a darle un hover diferente Es más en vez de darle el hover al le se le puede dar al link de hecho ahora van a ver por qué primero Porque es mejor porque debería eh solamente remarcar el área que se va a cliquear los links se les puede dar display inline block Ahí está Ven y se les pone las propiedades dir directamente a los a Entonces esto ven se los damos a esto Ahora

sí mucho mejor Entonces ahora el over lo tienen estos elementos y este que está acá fíjense que no porque es diferente acá viene la magia le vamos a dar un padding 12 pixeles Por ejemplo o un padding de seis Píxeles arriba y abajo y esto me gusta mucho hacer 12 pixeles a los costados darles un padding diferente o sea de un tamaño arriba y abajo y de otro tamaño a los costados es mucho mejor pero en hover va a tener un background transparent Ahora sí el borde va a ser blanco L pixxel solid blanco Ahí

está entonces queda esto acá acá va a ser de cuatro píxeles va quedando lindo no va quedando bueno no acá el color va a ser blanco Entonces ahí va eso y le vamos a dar un Border radius TR píxeles está bien Ven y ahí tenemos una barra de navegación que por ejemplo acá puede ser home about as contacto login para que se loguee listo entonces tiene una sección de abas contacto y loguearse lo único que por ejemplo el link Button podía tener un margin left 10 píxeles para separarse un poco que no quede tan pegadito

No ahora sí Entonces ven ahí tenemos La Barrita de navegación le vamos a dar a naist Text align Center y ahora sí ven lo ponemos en pantalla completa y ya tenemos este menú bellísimo que s Estaría bueno separarlo más va a tener este Vamos a darle 60 píxeles de diferencia de distancia Entonces home about Tas contact y el botón de login y ahí acabamos de hacer un menú literalmente a base de display inline block aprendimos esta forma también de hacer cosas con inline block Está buen bueno el Line block porque lo que nos Permite es

eso es agarrar dos elementos que están en bloques Y hacer que se pongan uno al lado de otro o sea acepta margen espada y todo literalmente es como un elemento en bloque tal cual Solo que no inicia una nueva línea y el contenido que ocupa es como inline porque el contenido que ocupa solamente es el contenido que tiene adentro o sea el tamaño total el ancho total es el tamaño que tiene adentro Igual igual que el ancho Pero esto está bueno porque sí Se puede configurar con un ancho y con un alto en inline no

pero el inline block sí le podemos dar un alto y un ancho es Útil para elementos que necesitan tener dimensiones pero que sí tienen que Mostrar un uno al lado del otro como todos en línea y ahí el nombre no inline block bloes en línea después tenemos una última propiedad que estamos hablando de la propiedad none display none última valor Perdón yo cuando digo propiedad a veces digo valor y a veces Digo propiedad pero en realidad es un valor esto es una propiedad y esto es un valor Así que si me ven diciendo propiedad a

estas cosas no es así es valor no es propiedad Pero bueno si yo por ejemplo le doy display none fíjense que el elemento acaba de desaparecer qué pasa con el elemento cuando le damos display none bueno primero no ocupa espacio en la página si se fijan yo si le saco el dis Non y acá está link Button Este es el elemento ven ocupa Espacio es decir si venimos abajo de todo podemos ver que efectivamente ocupa espacio si le damos en N ya no ocupa espacio fíjense que los demás se centran y a pesar de que

está todavía que parece tener dimensiones no ocupa espacio en la página fíjense Qué pasa cuando se lo saco se lo doy se lo saco se lo doy se lo saco ya es como si no estuviera no se representa visualmente tampoco O sea no solamente no ocupa espacio en la página sino que tampoco se representa Visualmente y los elementos adyacentes se comportan como si ese elemento no estuviera se acuerdan que cuando trabajamos con un Child y End of type que eso seleccionaba elementos y que si el segundo elemento no era un li no lo seleccionaba pero

el segundo Li por ahí era el tercer elemento bueno acá Este no cuenta ni como elemento es como si no existiera tal cual o sea los hermanos no lo van a tener en cuenta tampoco no funciona ya está chao no está disponible O sea es un elemento que no forma parte del flujo de la página no lo vamos a tener en cuenta ni en javascript ni cuando hagamos es es para hacer referencias a los hermanos a los hijos es un elemento que no está así que bueno ahora lo vamos a poner como vamos a sacar

el display Non lo vamos a dejar así Y esto es exactamente el uso de la propiedad display la vamos ir viendo a medida que vayamos trabajando sobre todo cuando trabajemos con display flexbox y Display grid que son dos de las grandes tipos de caja que tenemos en css que nos permiten como dije hacer todo pero ahora tenemos que ver otra cosa muy importante acerca del posicionamiento y estoy hablando de la propiedad position y es cómo posicionar diferentes cajas acá porque vamos a ver un montón de cosas incluyendo Cómo crear ventanas modales Ahora sí un apartado

interesante y que nos va a servir bastante así que bueno nada vamos a ver cómo esto cómo es el Uso de position vamos Bueno ahora vamos a ver dos valores de la propiedad position que básicamente es una propiedad que nos permite posicionar elementos que ahora vamos a ver qué significa posicionar un elemento y básicamente esta forma estas estos valores son relative y Absolut es decir vamos a posicionar elementos de forma relativa Y de forma absoluta vamos a ver qué significa estas dos formas de posicionar elementos pero básicamente Posicionar un elemento una forma de las tantas

que hay de crear un contexto de apilamiento que es una forma de tridimensional zar el html para separar una capa de otras capas no y poder hacer que se puedan apilar eso es el contexto de apilamiento imagínense una página web como esto literalmente es como una caja okay Que adentro tiene elementos imagínense los elementos como esto el contexto de apilamiento lo que hace es esto nos permite mover Okay hacia Delante o hacia atrás en el eje Z un elemento supónganse que ustedes tienen acá por ejemplo una tarjeta ustedes tienen un elemento acá y cuando ustedes

Crean un contexto de apilamiento están creando un contexto en el que van a poder desplazar en este eje los elementos entonces en el eje Z van a poder ponerlo acá y van a poder agarrar otro elemento Y hacer que el elemento esté arriba Entonces eso es lo que van a poder hacer van a poder como separar los Elementos por capas y cada elemento va a poder tener una capa por ejemplo va este elemento va a estar arriba porque nosotros la página web la vemos así entonces el elemento que más adelante esté en la capa Z

o sea en este en esta dirección es el que primero vamos a ver a lo que voy Es que esto es lo que hacemos Eh justamente nosotros las páginas web las vemos así okay de esta forma cuando nosotros modificamos sus propiedades qué hacemos la cambiamos Entonces eso es lo que está pasando cuando nosotros creamos un contexto de apilamiento podemos hacer que una capa aparezca detrás de la otra como esta Ven y es más podemos agarrar la otra capa la que está delante y volver a ponerla Atrás o podemos agarrar una capa y ponerla de vuelta

todavía más adelante Entonces eso es lo que podemos hacer podemos poner capas más adelante o más atrás pero si nosotros lo viéramos en un eje tridimensional lo que pasa en Realidad es que hay varias capas ven peleando por ver cuál es la que va a estar adelante lógicamente si nosotros creamos un elemento ponemos un elemento adentro lógicamente va a aparecer adelante o sea si yo por ejemplo creo un elemento no un bloque y creo un elemento para ese bloque ese bloque va a estar adentro del elemento entonces va a estar por delante Es lógico si

ustedes el famoso ejemplo de la caja si agarras un elemento azul y lo pones en una caja Blanca cuando mires vas a ver el elemento azul o no lo vas a ver obvio que lo vas a ver entonces por qué Porque está por arriba del piso de la caja Enton Esto es lo mismo si ustedes ponen un elemento lo van a ver Bueno qué tiene que ver esto con position Bueno ahora lo vamos a ver en breve vo a minimizarlo supónganse que yo por ejemplo tengo un div vamos a vamos me encanta el ejemplo del

div vamos a crear un div y vamos a ponerle la clase box de caja y acá vamos A venir y agarrar al Box y darle with 100 píxeles g 100 píxeles background color red Ahí estamos Esto es lo que tenemos una caja común y corriente y le vamos a poner un texto que va a ser caja Ah va y vamos a crear otra caja ahora tenemos dos cajas Solo que esta Va a ser Box Blue la cajas por defecto van a ser Orange van a ser naranjas las cajas por defecto pero a Box Blue la

vamos a hacer color Blue lógicamente Perdón background color Blue Ahí va y van a tener un color Blanco hasta acá está todo bien vamos a agarrar al Body darle un margin cero Ahí está y un background Ed Ed Ed para que sea un poquito gris vamos a hacer est un poco más grande Ahí está bueno hasta acá estamos bien Nada nuevo si yo por ejemplo a una caja le doy el Pos vamos a dar a la caja a Box a todas las cajas le vamos a dar un position relative esto es como si le dijéramos

al navegador he elemento mantené tu posición original en la página pero ahora ahora si quiero Puedo moverte hacia arriba hacia abajo o hacia los costados y no solamente eso sino que además vas a hacer un punto de referencia para los elementos que estén adentro tuyo vamos ese eso ese último punto vamos a olvidarnos pero literalmente vamos a poder desplazarlo si yo ahora por ejemplo agarro a la caja azul y voy a decirle que se mueva top cinco píxeles para abajo fíjense que se acaba de vamos a hacer un pequeño zoom para que se note más

50 píxeles se acaba De mover 50 píxeles para abajo y si le digo 10 se mueve 10 y si pongo left se va a mover hacia la derecha 30 píxeles eso lo estamos haciendo estamos desplazando la caja Es más si yo le digo top menos 20 píxeles se va a poner por encima va a estar encima de la otra caja lo que pasa si Incluso si le sacáramos el position relative esto ya no funciona porque literalmente la caja no está posicionada el position la propiedad por defecto que trae es static static no no Podemos considerar

que un elemento está posicionado cuando está estático eso no funciona Pero sí cuando está por ejemplo en relative que es una de las formas que tiene y es lo que les dije ahora acabamos de entender un poquito más okay creo que ahora entendimos lo que les dije recién lo primero que les dije es cuando posicionamos una caja sobre todo cuando le decimos position relative ojo cuando le decimos position relative le decimos al navegador voy a mantener mi Posición original en la caja o sea voy a ocupar este pedacito de acá pero puedo moverme visualmente hacia

donde quiera si ahora venimos y creamos una tercera caja div Class Box y ponemos caja dos AC ponemos caja tres fíjense que la caja TR no va a arrancar desde acá no no no no arrancó desde acá que casualmente es el lugar que también debería tener originalmente esta caja es decir si le damos un left 50 píxeles se mueve hacia la derecha pero si le damos un top 40 Píxeles se va 40 píxeles hacia abajo Okay el lugar se mantiene es como si reservá el lugar el lugar de la caja lo estamos reservando es este

no se va a Modificar el lugar que el navegador le asignó a la caja pero ahora la caja se va a poder desplazar hacia donde querramos se adquieren cuatro propiedades una es left una es top una es bottom que es cuánto te vas a mover de abajo hacia arriba y una es right si esta caja relativa por ejemplo le doy Right 50 píxeles desde la derecha se mueve 50 píxeles hacia la hacia la derecha Ahora hay dos propiedades que tienen prioridad sí podemos definir right y bottom si yo por ejemplo le doy bottom 50 píxeles

va a ir desde abajo hacia arriba 50 píxeles o sea estás a la derecha y muévete 50 píxeles hacia el otro lado desde abajo te vas a separar 50 píxeles hacia arriba es medio contradictorio Porque top no significa vas a ir hacia arriba significa vas a ir Hacia abajo bottom no significa vas a ir hacia abajo significa vas a ir hacia arriba pero bueno lo que les quería Mostrar no era esto lo que les quería Mostrar es que si nosotros tenemos la propiedad bottom tiene menos prioridad que la propiedad top si nosotros le damos por

ejemplo top 50 píxeles le va a dar prioridad a top Por más que yo venga acá y ponga bottom eh 150 píxeles 200 píxeles por más que le dé important No importa la propiedad top tiene prioridad Por sobre bottom O sea si las dos propiedades están definidas bottom y top le va a dar más importancia a a top lo mismo con right si tenemos left y right le va a dar prioridad a right siempre perdón a left siempre a left fíjense que si saco esto y lo pongo acá y le pongo 150 píxeles y le

pongo import no importa al navegador le chupa huevo right si estas dos están definidas No necesitamos definir las otras es lo mismo le va a chupar un huevo right y le va a chupar Un huevo left ahora si estas dos todavía no las definimos podemos usar right porque sí funciona Ven y también podemos usar bottom pero las que más importancia tienen son left y top entonces repasando rápidamente cuando a una caja le damos el position relative lo que está haciendo es la caja sigue posicionada en el mismo lugar o sea va a estar acá el

navegador va a pensar que la caja se mantiene siempre ahí solamente que ahora la caja la podemos mover como dijimos Antes ven 50 píxeles left 100 píxeles y la estamos moviendo pero para el navegador la caja todavía sigue en el lugar que asignó y la quinta propiedad que aparece Cuando tenemos las cajas en una posición relativa puede ser relativa absoluta Cuando tenemos una caja posicionada aparece esta otra propiedad que es el Z Index que básicamente es una propiedad que nos permite mover a la c en el eje Z Este es el eje Z lo que

les acabo de mostrar vamos a hacer un Gráfico Real de lo que tenemos hasta ahora las cajas son de color naranja no tenemos una caja otra caja y otra caja las cajas básicamente aparecen en el orden en el que las creamos nosotros la página web la vemos así okay Así fíjense ven La vemos Así vamos a sacarle esto la vemos así tienen que ser cuadradas Ahora son cuadradas Ahí está perfecto Ahora sí Ahora sí están iguales si yo agarro esta caja y la muevo hacia arriba va a estar por encima de esta caja pero si

la muevo Hacia abajo va a estar por debajo de esta caja Bueno eso es exactamente lo que pasa acá si yo a esta caja azul le doy top 200 píxeles se pone bueno justo Me F la le doy 70 píxeles se pone por debajo de esta caja fíjense que le voy a dar top y un left de 20 píxeles para que noten la diferencia esta caja está por debajo de la caja tres pero si le doy un top menos 70 píxeles se está poniendo por arriba de la caja uno porque básicamente las nuevas cajas que

Vamos creando ven que nosotros primero creamos esta caja o sea primero creamos vamos a ponerlo así primero creamos esta caja después creamos esta y después creamos esta entonces las cajas fíjense que como tenemos acá primero se van poniendo una delante de la otra no lo podemos notar bien pero si notamos en detalle ven Hay una que está atrás de la otra vamos para arriba así funciona las páginas web cada caja que creamos es como que se pone por delante de la caja Anterior se pone por delante Entonces cuando la movemos hacia arriba hacia arriba y

hacia el costado tenemos esto y si la movemos hacia abajo tenemos esto que es lo mismo que hicimos antes esto Así es como funciona ahora no existe ninguna propiedad para agarrar la caja y hacerle así y poder moverla para adante no existe una propiedad que esto tuc hay alguna propiedad que esto sí el Z Index el Z Index nos permite mover este elemento en la capa de eh Z en el eje Z Si venimos acá y le damos Z Index 10 fíjense que ahora la caja está por arriba está por arriba a esto le podemos

dar por ejemplo Que todos tengan un Z Index 2 Pon l Entonces qué pasa si todos tienen un Z Index 2 es como si fuera igual porque están todas apiladas de la misma forma entonces uno tiene que tener un Z Index más alto si este tiene un Z Index 3 ya está más adelante es como si tuviéramos un Z Index mayor ven si le damos Z Index 10 se pone acá adelante Como no hace falta darle Z Index tan altos cu darle Z índex chiquitito funciona una buena técnica es dar Z Index de 10 en

adelante Entonces por ejemplo el primer set Index es 10 y este set Index va a ser 20 Entonces lo hacemos de 20 en 20 Si queremos ir poniendo más cajas adelante vamos poniéndolas de 20 en 20 por ejemplo 30 40 50 entonces lo que acabo de hacer es eso Es más yo ahora puedo agarrar la primer caja Box First Child y le puedo Dar al fe Child top de 200 píxeles y fíjense que acaba de bajar Pero se puso por debajo voy a darle un top de 100 píxeles 150 y le voy a dar un

background Red para que se diferencie está por debajo esta caja o sea yo le voy a dar un left también de 40 píxeles para que se vaya más al costado es una caja que está por debajo de las otras dos Cómo puedo hacer para poner a esta caja roja por encima si le doy un Z Index 20 va a estar por arriba de la caja naranja Fíjense que sio lo va a estar por encima de la caja naranja y de la caja azul porque tiene un Z Index Más alto que las otras dos pero si

ahora la azul también tiene un Z índex de 20 la Azul va a estar por encima Entonces le tengo que dar un set índex más alto Bueno le doy 30 porque voy de 10 en 10 y ahora la roja está por encima de la azul y la azul está por encima de la naranja Así es como funciona esta propiedad Z Index Esto fue lo que logramos lo vemos de Frente y es lo que tenemos en la web tenemos esto que estamos viendo Ahora solo que si lo llegáramos a llevar a un eje tridimensional lo que

vamos a ver en realidad va a ser esto que estamos viendo ahora que en realidad una capa está superpuesta a la otra y lo que hace Z Index es modificar En qué posición va a estar cada una de estas capas esto sería lo natural si no le definamos un Z índex lo veríamos así ves qué es lo que veríamos acá ahora le asignamos un Z Index y es como si ya estuviéramos por delante eso es lo que está haciendo la estamos moviendo en el eje Z Qué buena forma de explicar que tengo soy una bestia

sin duda ya entendimos todo entendimos Cómo es el contexto de apilamiento entendimos que reservamos el lugar en el navegador entendimos que si ponemos una nueva caja va a aparecer después de la posición original entendimos también que podemos moverla hacia los costados todo lo entendimos de Hecho el Z Index tampoco funciona si una caja no está posicionada O sea si nosotros una caja si yo por ejemplo le saco el relative deja de funcionar y va a ser igual si nosotros en encontráramos alguna forma por ejemplo con márgenes márgenes negativos de apilar lo como lo hicimos recién

Igualmente el Z Index no sirve el Z Index solo sirve cuando tenemos posicionados los elementos Ven y ahí podemos diferenciarlos ahora vamos a ver cómo funciona la siguiente posición O el siguiente posicionamiento que es position absolute que es una forma diferente de posicionar elementos así que bueno vamos a ver position absolute Uh Bueno ahora vamos a ver justamente la posición a absoluta para arrancar Voy a darle Box red Ahora sí para no darle en fus Child y vamos a sacarle todo esto vamos a sacarle el position relative y todas estas propiedades de Z ind vamos

a sacarse toda la ahí está todo esto lo Sacamos nos olvidamos vamos a tener las propiedades más básicas que queríamos tener antes y lo dejamos chiquito como antes bien todo perfecto Qué pasa si a una caja le doy position absolute Bueno si yo a esto le doy position absolute Bueno vamos a hacer una cosa en vez de position absolute voy a hacer algo más interesante voy a poner esto adentro de otro div y le voy a voy a poner la clase contenedor contenedor Border 3 píxeles solid negro y vamos a ser que tengo un Margin

de 40 píxeles 10 píxeles Ahí está va a ser mejor de dos píxeles porque uno es mucho vamos a hacerlo un poquito más chiquito y el padding va a ser de 20 píxeles Ahí está tenemos estas cajas Okay azul rojo naranja me gustaría hacerlas más pastel vamos a darlas más pastel ahí le doy este color a una caja vamos a hacer que tenga todo un font family sanif no me gusta que no tengan el San serif ni el text Alin Center Ahora sí esto no va a ser un Azul va a Ser un 48e que

es el azulcito que me gusta a mí Y esto no va a ser un rojo va a ser un f64 Ahora son cajas más lindas Ahora sí listo están un poquito más oscuras si no era demasiado ya demasiado pastel bueno voy a agarrar esta caja y le voy a dar un position absolute a la no me importa nada Ahí está fíjense lo que acaba de pasar algo extraño acaba de pasar las cajas que están posicionadas como dije Crean un contexto de apilamiento y se posicionan Más adelante eso para arrancar no es que desapareció la caja

Roja de hecho sigue abajo la caja roja si esta le doy un padding de 50 píxeles Ahí está que todavía sigue abajo Lo que pasa es que cuando nosotros a un elemento le damos position absolute lo primero que hace es ya no ocupa lugar en la página si Le bajamos la opda a la caja azul 0.5 vamos a ver que de fondo ven Sigue estando ahí la caja roja no se trata de que la caja roja desapareció no se trata de que la Caja Azul Está encima de la caja roja Por qué Porque la caja

azul ya no ocupa lugar vieron que Pos relative sí ocupaba el lugar si acá le damos relative ocupaba el lugar y si yo le daba un left 50 píxeles y le daba un top 50 píxeles medo que el lugar lo mantenía que es este que está acá y se podía mover bueno position absolute no no mantiene el lugar o sea la diferencia es que chao es como si le dijéramos quiero que te salgas del flujo normal de la página o Sea como que no ocupes lugar en la página y ahora tus posiciones van a ser

absolutas al mismo tiempo por qué absolutas bueno porque antes si nosotros le dábamos position relative y le dábamos por ejemplo un top 40 píxeles los 40 píxeles los movía desde acá o sea eran relativas a su posición su posición es esta que está acá es decir son relativos a esto porque se mueven 40 píxeles desde acá desde acá hasta acá tenemos 40 píxeles Lo mismo para la Derecha si le damos left 40 píxeles se mueve desde acá desde esta derecha Entonces lo movimos 40 píxeles hacia abajo 40 píxeles a la derecha pero no se está

moviendo desde acá o desde acá o desde acá se mueve desde su posición eso es lo que en cambio comp position absolute se empieza a romper un poco todo si nosotros le damos top cero fíjense que la caja está arriba de todo se salió no le importó nada Vamos a darle al contenedor un background blanco Para que resalte más y este fondo lo vamos a hacer más oscuro para que también resalte más ccc ahí fíjense que lo que está pasando Es que la caja se está saliendo o sea nos está rompiendo el layout Es más

si le doy left cero también se está poniendo acá por qué bueno Esto es porque cuando nosotros a un elemento le damos en position absolute el punto de referencia que va a tener es la etiqueta html Esta que está acá y la etiqueta html comienza acá Entonces el left 0o es al principio de la página y el top cero también es al principio de la página pero acá viene la magia muchachos hasta acá funciona igual que relative yo le puedo dar por ejemplo 100 pixeles y se mueve 100 píxeles hacia abajo le puedo darle 100

píxeles y también se mueve 100 píxeles hacia al costado Entonces ya no forma parte del flujo de la página y la estamos mandando donde queremos es como que ya con la caja podemos jugar a lo que se nos dé la Gana la sacamos la movemos ya no tiene restricciones la podemos m donde se nos dé la gana pero 200 píxeles se mueve desde acá entonces supongamos que nosotros quisiéramos decirle a la caja no vamos a dejarla 100 píxeles y 50 píxeles supongamos que yo quisiera decirle a la caja que no quiero que tenga como punto

de referencia Vamos a ponerle acá cero y de vuelta acá cero vamos a dejarlo en los valores cero no quiero que el punto de referencia que Tenga sea esto quiero que el punto de referencia que tenga sea mi cajita que como dijimos tiene un margin a los costados de 40 píxeles y vamos a ir que a los costados sea de 40 de 50 mejor y arriba y abajo de 30 Quiero que mi punto de referencia sea este que está acá Cómo hago Bueno al contenedor le doy Pos relative y ahora el punto de referencia va

a ser este o sea se acuerdan Que cuando vimos el position relative yo le dije que las cajas que se posicionan Como relative son puntos de referencia que yo les dije que no se preocupen que después lo íbamos a entender bien Bueno ahora es el momento de entenderlo cuando le damos a position relative se mantiene la posición podemos desplazar los elementos se crean cinco propiedades para mover arriba abajo a los costados y adelante y atrás que es el Z Index y además se posiciona como un punto relativo bueno Esto es que se posiciona como un

punto relativo es que ahora si Nosotros le damos a la caja que tiene posición absoluta top 20 píxeles por ejemplo se va a mover 20 píxeles desde acá No desde acá ahora lo hace desde acá si le damos left 20 píxeles también se va a mover 20 píxeles desde acá no 20 píxeles desde acá no no no no no 20 píxeles desde acá Para qué joraca nos sirve esto y simple Porque si yo le quiero decir Ey Vas a estar 20 píxeles de arriba y 20 píxeles de abajo si yo no le pusiera a esta

a este contenedor el Relative se posiciona en cualquier lado cl si yo lo pongo como caja relativa ahí sí se posiciona donde Quiero una cosa interesante que pasa con el position absolute es que si yo le pongo bottom cero se posiciona abajo de todo si le pongo right cero se posiciona los bordes el position absolute básicamente lo que hace No no es interesante porque en relative la caja tiene una posición cuando le damos bottom le damos que se mueva hacia arriba pero desde ahí si le Damos top se mueve hacia abajo pero desde ahí en

cambio Si a una caja absoluta le damos bottom primero se va posicionar al borde de todo de acá porque una caja relativa tiene sus propios puntos de referencia una caja relativa tiene esto como el bottom esto como el top esto como el left y esto como el right pero una caja absoluta no una caja absoluta tiene a su punto de referencia con esas propiedades O sea que si el punto de referencia de su caja Es el contenedor en este caso si le decimos top se va a mover desde acá si le decimos bottom se va

a mover desde acá si le decimos right se va a mover desde acá y si le decimos left se va a mover desde acá si yo por ejemplo le digo bottom 30 píxeles se está moviendo 30 píxeles desde abajo de la caja relativa yo le digo top 30 píxeles se está moviendo 30 píxeles desde acá que son la que es el top de la caja relativa lo mismo si yo le digo r 30 píxeles se Está moviendo 30 píxeles de esta caja ahora si yo le doy right y también le doy left 30 píxeles pasa

lo mismo le va a dar prioridad al left Ahora hay algo de magia acá que es si nosotros le damos top cer right 0 left 0 y bottom c pero le le damos un margin auto la caja se centra se centra la caja literalmente si ahora por ejemplo la caja en vez de tener el contenedor por ejemplo le vamos a dar un he de 300 píxeles fíjense que siempre va a estar centrada la caja va a Tener 240 píxeles la caja va a estar siempre centrada por qué Porque detecta Cuál es el centro y se

centra le dijimos arriba vas a estar cero a los costados vas a estar cero abajo vas a estar cero y el margen va a ser auto entonces va a ser automático para que esté a la misma distancia de todos lados Esta es una forma muy común de centrar elementos que no la recomiendo más adelante vamos a ver una forma más fácil de centrar pero nada que sepan que así pueden centrar Elementos también pero cuando nosotros a una caja la damos como relativa vamos a agarrar por ejemplo la caja red y a red le vamos a

dar un position relative como dije si yo por ejemplo acá le doy top 20 píxeles se mueve 20 píxeles desde acá que es el top la posición top de su propia caja si yo le doy bottom 20 píxeles se mueve hacia arriba desde acá o sea el punto va a ser este es el punto original donde la caja estaría o sea es el bottom de la caja Este es el bottom De la caja Este es el top de la caja Este es el left de la caja y este es el right de la caja Entonces

yo por ejemplo le digo de vuelta vas a tener un left 30 píxeles se va a mover desde el left original de la caja 30 píxeles entonces la diferencia es que justamente una caja que está posicionada de forma absoluta se está moviendo de formas diferentes porque a pesar de que la caja esté ahí ahora por ejemplo le doy un top cero la caja evidentemente está acá la podemos Ver si yo como dije le doy un top 30 píxeles se está moviendo 30 píxeles desde acá y si se fijan ahora ya no está tapando a las

demás cajas Por qué no las está tapando bueno Esto es porque red es relative si a red le sacáramos el relative ya no funciona ven pero como la caja red la pusimos relative ahora red también está apilada en el contexto de apilamiento Entonces está más adelante que la caja absoluta Entonces si le sacamos el relative de vuelta vuelve a Aparecer o podemos hacer así Y a esta le damos un Z Index y aparece más arriba no y a las demás las vamos a dejar con bueno las demás no no necesitan Si queremos que esté más

arriba le damos Z Index 30 por ejemplo o lo dejamos sin Z Index yo se lo voy a sacar en este caso pero que sepan que se pone justamente porque le dimos relative pero si no absolute sería la única que está en un contexto de apilamiento diferente entonces Como creo este contexto está Más arriba que el resto entonces básicamente así funciona relative y absolute en resumidas cuentas relative reserva el espacio del navegador se mueve a partir de su propio top su propio bottom su propio left y su propio right con las cuatro propiedades que son

top bottom right y left y además crea un contexto de apilamiento en el que la podemos mover hacia adelante o hacia atrás o sea en el eje Z es decir un Z index y cuando le damos en position Absolute lo que hace es las posiciones ahora en las que se va a desplazar que son top bottom left y right No son sobre sí mismas son relativas si no hay ningún elemento relativo va a estar posicionado respecto al elemento raíz que es html o sea el top va a ser arriba de todo el left va a

ser al costado y el bottom va a ser abajo de todo va a ser en el el fondo del nodo raíz ahora serían básicamente todos los costados de toda la página pero si ponemos un elemento Como relativo obviamente tiene que ser su contenedor eh eso lo digo por las dudas o sea acá AC esto funciona Porque contenedor está conteniendo a la caja Blue y Blue es absoluta pero si Blue estuviera por fuera de contenedor no se va a posicionar respecto a contenedor tiene que ser un hijo para que funcione o sea básicamente lo que hace

la posición absoluta es Buscar a sus padres o abuelos o tatarabuelos a ver cuál de todos ellos tiene una posición absoluta Y cuando encuentra que tiene posición absoluta se posiciona respecto a él por eso no funciona si es un elemento hermano o si es un elemento hijo tiene Sí o sí que ser un elemento padre o sea o en una jerarquía superior pero que descienda de él y ahí se posiciona Entonces el absoluto cuando le damos en posición absolute sí pierde su espacio en la página A diferencia de con relative si se fijan pierde el

espacio Vamos a darle un opacity 0.3 Ahí va Pierde el espacio que tenía naturalmente lo pierde Entonces es como si no estuviera y se posiciona respecto a un elemento relativo o al elemento raíz Eso es todo Nada más que eso y además aprendimos Cómo centrarlo de esa forma interesante podemos centrar elementos poniendo todo todo por left bottom en cero y un margin auto Eso es todo ahora vamos a hacer un ejercicio con position absolute porque es muy útil position absolute para hacer ventanas modales por Ejemplo Aunque ahora apareció un elemento dialog Sí pero todavía se

sigue usando mucho para hacer cosas como por ejemplo las ventanas modales Cuando tenemos que agarrar un elemento y sacarlo del flujo natural okay Y hacer que destaque de alguna forma eso se hace con absolute Así que vamos a ver algo práctico algo útil que podemos hacer con position Absolut así que bueno vamos a ver Bueno ahora vamos a ver cómo crear una ventana modal con position absolute Después vamos a ver otra forma de crear una ventana modal con la etiqueta dialogo Okay que es importante aprender a utilizarla Pero primero quiero que veamos cómo hacerlo con

position absolute para que le saquemos práctica primero lo que hice fue darle un margin y un font family al Body para que ya establezcamos ese valor por defecto vamos a crear un div no vamos a hacer una cosa vamos a hacer que la página tenga un texto por defecto vamos a vamos A hacer que tenga bastante texto y ahora vamos a crear un div este div le vamos a poner la clase modal se va a llamar modal y va a tener un h2 el h1 lo vamos a poner después que va a ser ventana modal

y un p que va a tener un lorem Bueno ahora vamos a agarrar la ventana esta ventana modal modal Vamos a darle a esto Class modal title esto le vamos a darla vamos a darle clase modal content Ahí está de contenido a modal le vamos a dar Pos absolute y fíjense que aparece Todo esto que es bastante extraño Bueno lo que vamos a hacer okay Ahora va a ser crear otro div porque necesitamos meterlo adentro es decir van a ver que si nosotros por ejemplo queremos hacer que todo el fondo sea negro tenemos que hacer

que se cree una especie de overlay para eso vamos a crear acá dentro y acá vamos a ponerle modal a la clase modal content y ahora sí vamos a crear el modal title y el modal text más fácil ahora sí Entonces a modal le vamos a dar El position absolute Y fíjense qué interesante esto le vamos a dar a esto un background negro pero con una opacidad de esta forma Vamos a darle un wid de 100 View por widt para que ocupe todo el ancho y un he 100 View por hate para que ocupe todo

el alto Vamos a darle un color blanco por ejemplo no un texto blanco o mejor todavía vamos a hacer algo más lindo vamos a agarrar a modal content y vamos a darle un background blanco Ahí tenemos algo Mágico ya creo que va tomando forma lo que queremos hacer vamos a hacer esto un poco más chiquito Ahí está vamos a agregarle todavía más texto acá bien Ahora se aprecia bien Ahora Esta es la ventana modal de verdad el contenido del modal Vamos a darle un padding de 20 píxeles vamos a hacer que arriba y abajo tenga

solamente 10 píxeles que el padding sea 10 píxeles totales y vamos a hacer que en realidad el wid de 80% y margin auto ahí se centró perfecto el Margin top va a ser por ejemplo de 30 píxeles así se separa un poquito de arriba 50 50 píxeles está mejor bien acá tenemos la ventana modal vamos vamos a agarrar al modal title y sacarle el margin que tiene por defecto que tiene un margin bastante feo y vamos a definirlo nosotros bueno margin top 10 píxeles y acá vamos a hacer que el padding del content sea de

arriba 10 píxeles y a los costados 20 píxeles Ahí está mucho mejor es una ventana mucho Más linda Bueno y acá tenemos una ventana modal que después con javascript tenemos que programarla para que se abra y para que se cierre obviamente es decir tenemos que agarrar por ejemplo les voy a mostrar Cómo se haría aprovechamos que estamos diciendo cosas absolutas y a modal content Okay le ponemos un Pos relative Por qué bueno porque vamos a crear adentro de modal content un iconito que va a ser por ejemplo un span que va a tener una x

y Esto va a tener La clase modal Close Entonces vamos a agarrar esta clase y editarla modal Close Button y le vamos a dar un background negro por ejemplo un color blanco y le vamos a dar un pos absolute entonces ahora se está posicionando respecto a la ventana Así que si le damos top cero se va arriba de todo y si le damos right C se va para el costadito la tenemos acá ven acá el costadito la tenemos le vamos a dar un padding 20 píxeles y ahí tenemos este botón bu ser Que arriba y

abajo tengo un padding de cuatro píxeles nada más y a los costados tenga de 12 ahí y ahí tenemos esto para cerrarla ahora tenemos que agarrar a javascript y programarlo la verdad que esto no lo voy a hacer yo no sí lo voy a hacer ustedes no hace falta que lo hagan esto tampoco se hace así O sea no es la forma correcta de hacerlo Hay que crear un archivo javascript apart y se hace aparte pero lo hago solamente para que lo puedan ver Okay solo para que Entiendan el efecto que básicamente copio esto document

quer selector pego esto acá event listener click creo una función flecha esto lo pueden aprender en mi curso de javascript gente y acab va a ser document qu selector modal Style display ig none básicamente estoy accediendo ahora Les explico pero si entramos acá le damos click funciona Ven y se acaba de cerrar el modal actualizamos la página nos aparece esto click y se cierra Eso es todo lo que Hace este código nos carga el modal le da click y se cierra Cómo funciona esto bueno Esto está adás básicamente la forma en la que funciona esto

es la siguiente les voy a explicar lo que hacemos Es seleccionar al botón Y hacer que cuando se le dé clic ejecutemos este código qué hace este código selecciona la ventana modal completa que es este di que tiene todo el resto y lo que hace con la ventana modal es acceder a sus estilos a la propiedad display y le dan None básicamente nos la ponen n Ven y ahí tienen todo el código que es muy simple este código así quedaría si no se nos cortara por el coso ven en una en dos líneas es muy

simple este código es un código muy básico de javascript y con esto ya podemos cerrar la ventana Ven para eso usamos javascript ahora no necesitamos hacer esto para esto hoy por hoy fíjense Qué interesante que ya traemos una etiqueta hay una etiqueta nueva que se llama diálogo que si esto Lo reemplazamos por la etiqueta no hace falta esto nos ahorramos la ventana modal y ahora en vez de modal utilizamos otra etiqueta dialog actualizamos y fíjense lo que va a pasar ahora eh vamos a venir acá y la ventana dialog No se ve no se puede

apreciar No eso es porque le tenemos que dar en Open Y si le damos en Open ahí aparece y hace el mismo efecto que teníamos pero ahora no necesitamos darle la clase modal ahora se hace automático Literalmente se pone automáticamente así y a dialog acá esto lo reemplazamos por dialog ahí está lo que sí le vamos a dar es un hate del 100 View por he y le damos un Box sizing Border Box Ahí está y ya está así tal cual no necesitamos hacer más nada pero esperen porque la magia viene acá lo que cambia

con la etiqueta dialog además de no necesitar definir el ancho y demás lo que cambia con esta etiqueta de diálogo es que no hace falta que ustedes escriban el Código javascript ustedes le dan Open está abierto ustedes le sacan el open está cerrado Así que ustedes pueden jugar con esto ya no necesitan programar la función en javascript ahora esto que está acá esta x la tienen que encerrar en un formulario con el métod post pero tampoco tienen que tener el métod dialog solamente eso pegan esto que está acá Entonces el spam en vez de ser

Esto va a ser un botom Okay y ahí está el botón ustedes le dan click y se cierra y no Hace falta que escriban ningún código javascript literalmente no tiene javascript automáticamente es una etiqueta que viene por defecto para que cuando nosotros usemos el método dialog y tengamos un botón cualquier botón que apretemos que esté dentro de una etiqueta form con el método diálogo que esté dentro de un diálogo va a ser que se cierre ese diálogo automáticamente es un form metod dialog adentro metemos un botón cualquiera le damos estilo y le Damos click y

ahí va a ser que automáticamente se cierre esto O sea Pasa de ser Open a estar sin sin Open ven Open y cuando le damos clic al botón es como si se cerrara Es más si vamos a inspeccionar el elemento vamos a ver que la etiqueta dice bien clarito acá Open le damos clic acá y y el open desaparece porque funciona así dialog Es una etiqueta que ya viene con esa configuración así como el le viene con los puntitos así como el text ara viene Con el cuadro para escribir texto adentro así como las tablas

vienen configuradas bueno dialog viene configurado para que si tiene el atributo open esté abierto y si no lo tiene esté cerrado o sea no se muestre no solamente eso no necesitamos hacer que la posición sea absoluta ya es automático Así que no vamos a necesitar darle el position absolute fíjense se lo saco porque dialog ya viene configurado así porque se sabe que va a ser usado Para cosas como estas que son ventanas modales ya no necesitamos ni siquiera darle el position absoluto de hecho ahora que estamos usando dialog ni siquiera es necesario que le demos

el background color negro podemos utilizar una propiedad eh de dialogo que sería backdrop que esto se lo recomiendo que lo vean después ahora no no lo vamos a ver ahora se lo dejo de tarea investígalo por su cuenta Esto del backdrop pero es el único pseudo Elemento que no vimos que es backdrop que básicamente lo que hace es agarrar la capa que está por fuera de los diálogos y darle estilo para que pueda ser del color que querramos o que tenga las propiedades que querramos yo no la voy a ver ahora porque no me sirve

tengo que cambiar un poco de estructura además para eso pero eh básicamente así podemos usar backdrop Okay perdón eh los dialogos acabamos de hacer una ventana posición absoluta y entender cómo Funciona y ahora bueno Justo nos agaron porque apareció y ya html estandarizó la etiqueta diálogo que lo hace automáticamente Así que tranquilos que no aprendieron la posición absoluta al pedo la van a usar para muchas cosas pero bueno nada evidentemente para hacer modales como estos no porque ahora hay una forma mucho mejor y más más nativa de hacerlo sin necesidad de definirlo con dips no

así que bien no nos pongamos tristes pongámonos contentos ahora vamos A ver las últimas dos posiciones que nos quedan antes de avanzar y terminar del todo con la propiedad position estoy hablando de la Pos sticky y position fixed que son parecidas pero una es un poco diferente primero vamos a ver fixed y después sticky así que vamos a terminar de ver estas dos posibles posiciones que tenemos para cada uno de los elementos html y después de eso Bueno vamos a ver transiciones que acá cuando veamos transiciones se van a Volver locos porque la magia de

transiciones es hermosa Así que bueno vamos a ver fixed y sticky y después seguimos con transiciones Así que vamos Bueno ahora lo que vamos a ver va a ser position fixed y sticky yo creé una estructura básica Okay con el body con margin cero y un font family predefinido así que ya con esto ya es suficiente voy a crear una cajita y además de la cajita por abajo voy a poner puro texto Ahí está puse mucho Texto voy a hacer un pequeño zoom voy a poner más texto todavía para esto para notarlo necesitamos mucho scroll

acá arriba voy a hacer que esta caja de todo tenga esta caja de todo bien va a tener una clase Box y darle 100 píxeles with 100 píxeles y va a tener un background rojo Ahí está ya tenemos la caja acá perfecto vamos a ver qué pasa cuando le ponemos un position fixed primero parece que es como si le hubiéramos dado position absolute ven si le damos Absolute el efecto es el mismo para arrancar eso sucede sí se va del flujo natural del de la página o sea ya el espacio reservado se elimina en eso

se parece a fixel vamos a ver qué pasa si le damos bottom cero se p abajo o sea prácticamente es como un position absolute Porque si acá le diamos en absolute funciona Igual hasta ahora no hay ninguna ninguna diferencia vamos a probar Algo vamos a agarrar y ponerla dentro de otro div Okay y vamos a meter Este div adentro de otro div vamos a este div poner la clase contenedor y a contenedor contenedor le vamos a dar un padding de 50 píxeles Acá está y le vamos a dar un background color azul bueno para arrancar

si acá le damos absolute acá ya vemos que sigue siendo lo mismo Exactamente igual pero si a contenedor le damos position relative lo que pasa acá es que por lo menos con absolute la caja ahora se pone respecto al contenedor vamos a dar un padding de 150 píxeles y vamos a ver que bottom cero es bottom acá si le damos left Z es acá pero qué pasa si yo le pongo ahora el position fixed Ah le chupó un huevo porque el position fixed es como el absolute pero le chupa un huevo lo que digamos o

sea siempre se va a posicionar respecto a la ventana es decir esta Va a ser la caja el top siempre va a ser este el bottom siempre va a ser este el left siempre va a ser este y el right siempre va a ser este Entonces le chupan huevo La diferencia pero la principal característica no está ahí la principal característica está es que cuando nosotros bajamos la página la caja sigue fija Cuando hacemos scroll la caja se va a quedar siempre ahí o si no le damos dimensiones también se va a quedar ahí ven se

queda ahí si le damos un right cero ven se pone a la derecha y se va a quedar siempre ahí para qué es interesante esto Esto está bueno porque nosotros ahora podemos venir acá y hacer Que la caja por ejemplo vamos hacer que la caja tenga un un Wi de 200 píxeles un he de 80 por ejemplo no de 60 Ahí va de 60 va a tener un background color blanco va a tener un Border un Pixel solid negro va a tener un Border right cero ahí está el Border mejor va a ser de dos

píxeles Ahora sí y va a tener un Box Shadow o píxeles c píxeles 40 píxeles completamente negro Ahí está y acá le vamos a dar un Pixel Solamente vamos a dar en nueve para que no sea tan tan Oscuro acá dentro de la caja vamos a poner por ejemplo un h2 que va a decir notificación y acá vamos a poner un párrafo con un mini lorem vamos a dejarlo hasta acá lorem perfecto al h2 le vamos a dar un font size o píxeles ahí va margin cero y al párrafo le vamos a dar un font

size de 14 píxeles y un margin cero también ahí está solo es un ejemplo no ent básicamente acá tenemos una notificación que el usuario siempre va a ver algo así como por ejemplo Necesitas acceso para ver el contenido completo por favor regístrate y acá ponemos un enlace aquí entonces nos permite hacer eso necesitas acceso para ver el contenido completo por favor regístrate aquí Entonces nosotros vamos a ver el contenido de la página y vamos a ver que el contenido no podemos seguir viéndolo es más ahí está acá les mostré básicamente lo que quería mostrarles Okay

y ahora vamos a poner Z Index 30 así está por Encima Pero básicamente acá lo que hice fue crear una capa overlay Okay y a la capa overlay le di este estilo okay Para que básicamente genera este efecto ven como que se va desapareciendo el texto y a esto lo puse más encima entonces lo que estamos haciendo acá es un efecto de e necesitas acceso para ver el contenido completo por favor registrate aquí otro uso muy común de fixer también si por ejemplo nosotros tenemos un chat nosotros no queremos que el chat se nos Mueva

queremos que el chat siempre esté ahí Entonces esto lo usamos como una ventanita para tener un chat y podemos navegar por toda la página y usar el chat siempre porque el chat va a estar siempre ahí Entonces es otro uso también crear chats y después tenemos el otro position que sería position sticky ahora vamos a ver qué pasa si yo por ejemplo voy a crear o otra caja y este va a tener la clase Box fixed AC no estamos aplicando la metodología bem vamos a Poner Box fixed y le vamos a dar estas propiedades Ahí

está esto es interesante porque fixed es bastante raro pero cuando nosotros le damos Pos sticky fíjense que parece que se comporta como un position relative No pero lo que pasa con position Stick es lo siguiente el box fixer lo voy a poner por ejemplo por acá lo voy a poner ahí está la caja aparece ahí si yo lo dejo así se comporta como relativ o sea si lo meto en medio de la nada y lo estamos viendo Ahí ya está es una cajita normal que se comporta como position relative funciona igual pero si nosotros le

damos una posición le damos por ejemplo un top 20 píxeles le vamos a decir que cuando llegue al top 20 píxeles quede fija ven eso es lo que hace Vamos a darle un Z Index Z Index de 40 así queda más alto cuando el top es de 20 píxeles se comporta como fija o sea es relative hasta que alcanza lo que Nosotros le dijimos que en este caso le dijimos que Tiene que haber un top de 20 píxeles o sea cuando la distancia entre esta parte y esto es de 20 píxeles te vas a empezar

a comportar como fixed y ahí se queda fija es un efecto muy común para dejar elementos fijos de esta forma bastante interesante Entonces yo por ejemplo puedo crear más de una caja puedo tener Box fixed y acá vo a tener más abajo otra caja fixed y acá otra caja fixel Box sizing Border Box y vamos a hacer que el top sea de 100 100 píxeles pero Para box fixel First Child va a ser de 50 50 píxeles y para box fixel Last Child el top va a ser de acá el top tendría que ser de

30 píxeles y acá tendría que ser de 170 píxeles acá No no vamos a usar F vamos a usar First y acá vamos a usar Last vamos a poner punto First y acá vamos a poner punto Last Ahora sí actualizamos y fíjense qué interesante esto es como se van agrupando no es como que se va formando este efecto interesante lo podemos hacer Con esto es más Vamos a hacer una cosa vamos a hacer que en vez de ser 130 sea un top de 30 y acá que sea de 170 Ahora sí está bien esta de

100 y la primera de 30 acá le vamos a poner First le vamos a poner a esta no F tiene 30 píxeles y las demás tienen La otra tiene 100 que sería la segunda Ah Miren qué interesante el efecto este es como que se van acumulando elementos vieron y así se puede seguir haciendo Puedo ponerle Last 2 y sumarle 70 píxeles más sería 240 y Venimos acá y creamos el Last 2 lo ponemos por acá poner y acá ponemos Last 2 y ahí tenemos una tercera una cuarta perdón y así este tipo de efectos se

puede hacer con position fixed yo lo desafío Ahora sí a utilizar todas las posiciones fixed que es este que está acá y sticky que son estos que están acá Qué lindo no Qué buen efecto bueno gente esto es lo que se puede hacer con position fixed y position sticky ahora sí que ya vimos todos los tipos de Posiciones ya nos podemos quedar tranquilos sobre todo estas últimas dos que vimos que básicamente position fixed es como que se fixed hace que el elemento se quede como pegado en una parte fija del navegador y no le importa

el position relative de los demás solamente si le damos fixel se va a quedar fijo en algún momento y después tenemos sticky que que se comporta como relative hasta que alcanza lo que le dijimos y se empieza a comportar como Fixed es solamente eso el fixed es Útil para algunos encabezados Por ejemplo si nosotros usamos un un jader una un menú de navegación por ejemplo acá tenemos La Barrita de YouTube La Barrita de YouTube se va a quedar ahí fija sin importar cuánto bajemos y lo otro también el el sticky es bueno por ejemplo para

encabezados llegamos a un encabezado no y después empieza a bajar y todo ese es ese es el encabezado del del lugar actual Cuando llegamos a cierto momento Del scroll vamos a agrupar Está bueno es un efecto copado así que bueno basta de hablar vamos al apartado de transiciones que este apartado sí que les va a gustar así que bueno vamos a ver transiciones el apartado de transiciones va a ser un antes y un después para la visibilidad de nuestra web vamos a verlo bueno gente ahora vamos a ver transiciones básicamente las transiciones son ese ese

intervalo de cambio de una propiedad entre un valor y Otro por ejemplo si yo tengo un color que va de c a uno si nosotros por ejemplo hacemos un over acá básicamente creé una caja okay de 200 por 200 color rojo el margen es automático para que se Centre le puse un margin top para que se separe de la parte de arriba un tamaño de letra más grande y un texta al in Center para que el texto se alinee Okay y después en over hice que el color sea un poquito más oscuro pero el color

del texto sea blanco Entonces pasamos el mod Por encima y si se fijan ven se pone este color el problema de esto es que es muy brusco o sea es de un momento a otro no Existe alguna forma de hacer que sea más gradual no existe una forma de hacer que pase por todos los colores que hay en el medio en un plazo de tiempo para llegar de un estado a otro que vaya de a poquito recorriendo todos los valores hasta llegar a ese final Eso sí se puede hacer y se hace con transiciones supónganse

que yo quiero hacer que lo Que se anime sea el color vamos a sacar esto vamos a hacer que sea más grande para poder notarlo 60 píxeles y vamos a darle un font weight vol Ahí se nota mucho que cuando ponemos el mouse por encima de la caja el texto se hace blanco Cómo puedo hacer una transición con esto primero a la caja que vamos a transicionar le vamos a dar la propiedad No al hover porque el hover es cuando se ponga el mouse encima Pero el transition ya tiene que estar en la caja original

No en el estado de hover sino que en la original entonces ponemos transition y primero lo que definimos es la propiedad transition property Cuál va a ser la propiedad que querés transicionar Bueno vamos a cambiar el color Okay yo lo que quiero que se cambie va a ser el color queremos que el color cambie de un estado a otro y después tenemos la otra con la que ya podemos dejarlo funcional que es transition duration cuánto queremos que dure yo por ejemplo le voy A dar un segundo Un s significa un segundo Entonces yo paso el

nu por encima y la propiedad en un segundo va a transicionar de un estado a a otro es decir va a pasar de negro a rojo también podemos decirle que por ejemplo sea red color red no entonces va a estar en rojo el color por defecto y vamos a decirle vas a pasar de rojo a blanco ponemos el mous por encima y pasa de rojo a blanco Eso es lo que está haciendo parece que está desapareciendo pero en realidad no Es que justo tiene el mismo color del fondo y esto entonces da la casualidad que

da así pero así funcionan las transiciones solo con estas dos propiedades tenemos todo y después tenemos transition delay que transition delay es e cuánto va a tardar en hacerse la transición Vamos a darle por ejemplo 3 segundos yo pongo el má por encima después de 3 segundos ahí empieza a transicionar Ven vamos a hacerlo de 2 segundos y contar arranco y 0 1 2s y ahí Arranca transicionar le damos 3 segundos cuatro 1 2 3es cuat y ahí arranca transicionar entonces así es como funcionan las animaciones tienen estas tres propiedades que son la propiedad que

vamos a generar la transición la duración y el delay supónganse que yo quiero hacer que la transición esté en varios al mismo tiempo yo puedo darle esto que es all de esta forma todas las propiedades que cambien de un estado a otro van a transicionar esto es una mala Práctica porque va a serc que el navegador trabaje mucho yo por ejemplo acá le doy un background color y le doy que el background color va a ser Blue por ejemplo esto el transition Direct lo vamos a sacar primero yo ahora como acabo de darle que transition

all todas las propiedades de de la caja Box van a transicionar Entonces ven ahora transicion el el color de fondo el color del texto todo está transicionando Pero esto es una mala práctica por muchos Motivos lo que se recomienda hacer es poner solo las propiedades que van a transicionar yo quiero que transicion el background color okay Y además el color Yo le doy coma y ahora sí si paso el mouse por encima las únicas propiedades que van a transicionar son el background color y el color las propiedades se separan por coma nombre de la propiedad

uno coma nombre de la propiedad 2s si quieren agregar una más ponen coma y agregan otra propiedad y así van Agregando las que ustedes quieran ahora por qué cuando nosotros actualizamos la p página ves que cuando actualizamos la página medio que hay un efecto raro de transición bueno esto porque gente no nos olvidemos que el navegador tiene estilos por defecto el navegador dice el color de fondo de los divs va a ser blanco o transparente el color del texto es negro Entonces cuando nosotros cargamos la página Ahí hay una transición Cuál es la transición el

Estado definió un estilo y nosotros definimos otro entonces la transición es del estilo definido por el navegador al que nosotros definimos ahí tenés otra transición por eso carga de esta forma porque está pasando del Estado nativo del navegador al Estado que nosotros le dimos entonces básicamente así funcionan las transiciones es bastante interesante porque nos permite un efecto muy lindo y por ejemplo cuando tenemos un menú hace que no sea tan pesado todo y ojo con Esto porque si lo usan mal si yo por ejemplo acá le doy font size de no sé 80 píxeles fíjense

que si hacemos que transicion el font size yo cuando vengo acá en este caso funciona Pero qué pasaría por ejemplo con los márgenes vamos a reemplazar esto y vamos a hacerle que los márgenes margin esta por ejemplo tiene un margin top 50 píxeles pero ahora le voy a dar un margin de 20 píxeles fíjense Qué pasa tenemos este problema por eso hay que tener mucho Cuidado con esto Porque podríamos llegar a tener problemas tienen que aprender a manejarlas tienen que ser leves en este caso podríamos cambiar el margin top de esta forma ven el movimiento

es suave Respecto a los costados pero de auto a un número hay una diferencia Porque si ponemos cero y ponemos 20 es fácil el navegador tiene que tiene que entiende que tiene que ir de cer0 a 20 pero si ponemos auto y después ponemos 20 cómo hacemos la transición entre auto y 20 Tenemos un problema por eso tiene que tener cuidado cuando transicion entre valores que no son matemáticamente compatibles auto a 20 Cómo hace para transicionar Bueno en cambio de 0 a 20 sí pasa por 1 2 3 4 hasta llegar a 20 pasa por

todos los valores y transicion Pero cómo hacé para transicionar de auto a 20 no podés c lo que pasa es que cuando le damos solamente margin acá el margin es auto Entonces no puede y tiene este problema tiene este problema de que No sabe cómo transicionar de un estado a otro y la única forma es poner la mano en la intersección la intersección es esta que está acá esto de acá si pongo la mano afuera pasa esto si la pongo acá ahí ya aparece después tenemos otra cosa interesante que es el tema de las curvas

de besier ojo acá porque esto de las curvas de besier es interesante si yo por ejemplo vamos a sacarle esto de margins lo vamos a sacar y acá también le vamos a sacar margin Qué pasa si yo Por ejemplo tengo una vamos a esto voy a hacerlo muy leve voy a hacer que la caja no tenga un margin auto nos vamos a olvidar del margin auto vamos a hacer que las dimensiones sean de 120 por 120 así lo podemos observar vamos a sacarle el contenido que tiene dentro de la caja así no nos estorba le

vamos a sacar el color y le vamos a sacar el hover también vamos a sacar el hover vamos a hacer que cuando pongamos el mouse en el body el efecto lo va a sufrir la caja Entonces le vamos a dar el estilo a una caja que esté dentro de un Body en donde tenemos el mouse puesto Esto está bueno porque chequeamos que el hover está en el body pero le damos el estilo al Box quiero darle estilo a a un elemento que tenga la clase caja en un Body que esté en estado de hover es

decir que tenga el mouse encima si ahora acá por ejemplo damos que la caja va a tener un background Blue fíjense que ponemos el mouse en el body que el body es esto y La caja pasa eso para eso tenemos que decir que el he del Body va a ser de 100 View por he así sin importar donde pongamos el mouse el body tiene que ser 100 View porake Ahí va sin importar donde estemos cuando pongamos el mouse encima esta Va a ser la transición pero yo no quiero hacer que la transición sea de color

la transición va a ser de la propiedad left vamos a decir que la gaja tenga un position relative vamos a sacarle todo esto que son propiedades de Texto nos estorban un poco para esto tampoco queremos el background color Solamente vamos a animar la propiedad de Left bueno para eso okay Si yo por ejemplo acá le doy un left 0 no y acá le doy un left 200 píxeles fíjense que hace este movimiento no 400 está bien 500 es mucho Ahí va fíjense que se va de un lugar a otro perfecto cómo hacemos nosotros para determinar

la curva de animación es decir esto arranca fuerte y termina despacio no sé si lo notaron no Podemos cambiar Esto sí si le damos en transition timing function podemos darle por ejemplo en is que es el que tenemos acá que esta es la que viene por defecto tenemos eas in que si se fijan arranca lento y termina fuerte arranca lento y termina y termina brusco tenemos is in out arranca arranca lento y termina lento ven arranca lento y termina lento y después tenemos is out que is out es un movimiento casi lineal y termina casi

bruto pero yo acá puedo trabajar con Algo llamado curvas de besier las las curvas de besier básicamente son ecuaciones matemáticas Okay que lo que hacen es definir una curva paramétrica tiene cuatro puntos los puntos controlan la dirección y la intensidad de la animación pero no me voy a volver muy loco con esto podría explicarles toda la teoría detrás de las curvas de besier pero lo que vamos a hacer es Entrar a cubic beer.com y acá les va a saltar esto que está acá una página interesante Donde nosotros podemos ver esto si yo por ejemplo acá

le doy en Go van a ver cómo funcionan las animaciones ven esto que estamos haciendo nosotros ahora funciona lo que les estoy mostrando recién Cómo funciona la fíjense que un cuadrado se mueve de una forma y otro se mueve de otra yo por ejemplo ahora le pongo esta animación fíjense Cómo funciona el de abajo es lineal ven esto que está acá es como escribir linear que literalmente es lineal siempre se Mantiene igual bate no es que arranca y hace no no no no ni tampoco hace no va lineal va siempre a la misma velocidad pero

nosotros podemos modificar esto si yo por ejemplo quiero que arranque bruto y termine suave qué hago hago algo así y hago que termine así por ejemplo no Entonces fíjense que es lo le estoy diciendo acá le estoy diciendo Ey Vas a arrancar bruto o sea los primeros segundos son estos ven Esta es la curva De tiempo los primeros segundos son estos entonces en los primeros segundos vas a hacer que casi se complete la transición es decir la transición arranca acá y termina acá pero lo que estamos diciendo es en los primeros segundos vas a hacer

casi toda la transición se entiende si estamos dando una pacidad de 0 a uno este punto es el cer0 Y esto es el uno entonces si nosotros en los primeros segundos hacemos que la opacidad sea de siete por Ejemplo hicimos que si la transición va a durar 10 segundos en los primeros 3 segundos ya alcanza el valor de 0.7 y le quedan otros 7 segundos para hacer que alcance los otros 0.3 es complicado explicar al principio pero fíjense qué pasa si yo ahora le doy en Go mi caja arranca rápido y termina suave ven en

los primeros segundos hizo la mayor parte de la transición y el resto ya lo hace después O lo puedo hacer al revés puedo decirle arranca lento Okay y Termina rápido entonces ahí le doy y arranca lento y termina rápido ven arranca lento y termina rápido esto es simplemente una forma de ir la forma en la que van a transicionar los elementos esto es muy particular pero que sepan que si lo quieren hacer lo pueden hacer tienen este generador de curvas y nada pueden ir probando pueden poner esto acá esto acá y ver qué efecto genera

ven ven este no está mal por ejemplo este es muy Us este tipo de animación que acabo de Mostrar recién Ahí va Le damos Go es muy usado por ejemplo para hacer transición cuando uno está editando los Editores usan mucho esto o para aparecer elementos así de forma linda y estética Porque si aparecen de forma lineal es feo esto es es feo siempre van a la misma velocidad arrancan y terminan brusco cambio cuando nosotros empezamos a darle un poquito de estilo se empieza a ver algo de magia entonces con las curvas de besir en este

caso acá nos Tira la curva de besier que generamos la podemos copiar venimos acá la pegamos acá y ahora nuestra animación funciona de la misma del del mismo estilo que le dimos ven arranca suave y termina suave arranca suave y termina suave o podemos venir acá y decirle vas a arrancar recontra veloz y vas a terminar suave copiamos esto y lo pegamos de vuelta entonces ahora nuestra Entonces ahora nuestra animación ven arranca fuerte y termina suave arranca fuerte y termina Suave Entonces eso es lo que hace eso lo podemos controlar con las curvas de besier

que aparece por ejemplo en esta página que está acá y si no también ustedes pueden ir por ejemplo acá y van a inspeccionar acá van a tener el elemento por ejemplo este que si se fijan ya tiene acá sus curvas de besier esto que dice cubic besier ustedes le dan clic acá en este iconito y acá también pueden modificarlo directamente desde Chrome arranca suave y termina Suave el movimiento en el medio es super bruto pero arranca suave y termina suave o pueden hacer como les dije que arranque veloz y termine suave Ahí va ven arranca

veloz y termina suave o que arranque s suave y termine superveloz ven arranca suave y pum termina superveloz y lo único que tienen que hacer es copiar esto que está acá okay Y pegarlo acá y ahí ya tienen la modificación realizada Es una herramienta que Chrome y la mayoría de Los navales modernos hoy en día lo tienen Así que lo pueden hacer directo desde acá y se omiten Buscar páginas para eso y si ustedes quieren hacer que la transición solamente reúna todas las propiedades en una sola que es lo que yo suelo hacer le voy

a dar transition vamos a aplicárselo a la propiedad left vamos a hacer que la transición dure un segundo que no tenga delay O sea si nos ahorramos este parámetro no tiene delay y le damos un punto y com y ya está ven Ya tenemos la transición hecha en solamente acá ahora si le queremos agregar el cubic besier se lo Podemos agregar y ahí fíjense que el cubic besier es tal cual lo que nosotros quisimos Ven y si encima le queremos agregar un delay eso va al final y acá le ponemos por ejemplo que el delay

va a ser de 2 segundos Entonces tenemos la animación y después de 2 segundos es que empieza a animarse pongo el mouse espero 2 segundos y recién después de 2 Segundos se empieza a animar Entonces transition es un Shan porque es una propiedad que abrevia cuatro propiedades más transition alberca transition property que está acá alberga el la duración el estilo de animación y el delay si nosotros nos ahorramos esto podemos poner también el delay directamente Ven y funciona yo actualizo y ven funciona igual no hace falta que pongamos el el estilo de transición pero si

quieren ponerlo también lo pueden Poner pero las que son requisito obligatorio son estas dos es la duración que va a tener y la propiedad que vamos a animar por lo adás como dije es opcional pero en este caso lo voy a dejar Perfecto Bueno gente los felicito si llegaron hasta acá porque ahora vamos con el siguiente apartado y estoy hablando del apartado de overflow así que bueno vamos a ver cómo funciona overflow esto básicamente nos permite controlar el desbordamiento Así que no Voy a hablar más Vamos a ver overflow Bueno ahora lo que vamos a

ver va a ser la propiedad overflow overflow lo que hace es determinar Cómo se maneja el contenido que sobresale de su contenedor bueno primero le voy a sacar a esto la transición así no es un lío ustedes no no lo habrán notado seguramente no lo habrán notado yo esto le voy a poner un Border dos pixeles solid casi negro Ahí va y el background de la caja va a ser blanco totalmente Blanco pero el background del Body va a ser ccc sea un poquito más oscuro y la caja va a tener un margin auto el

top va a venir después del auto porque si no se sobreescribe y ahí le sacamos el hate bien bueno Esto es lo que tenemos ustedes nunca lo notaron esto yo voy a darle 220 por 220 Ahí está Ustedes nunca notaron esto pero si yo le doy por ejemplo un loremipsum.net de la caja la caja ya tiene medidas fijas tiene un alto de 220 no va a Seguir cambiando si yo no le definiera el alto el auto se se ajusta automáticamente ven si la caja mide Esto va a ser esto Entonces se va Ajustando automáticamente pero

si yo ya defino un alto que va a ser de 220 todo lo que venga después se va a estar desbordando eso lo podemos manejar con la propiedad overflow que es justamente Esta que está acá por defecto viene la propiedad visible Esta es la propiedad por defecto que lo que dice es lo que se sobresalga Del contenedor se va a ver va a ser visible pero nosotros tenemos otra las cuatro posibilidades en vez de decirle que sea visible tenemos una segunda posibilidad que es decirle que sea hidden y se va a ocultar Entonces de esa

forma todo lo que sobresalga del contenedor no se va a ver pero ojo porque esto es un problema porque si lo que está en el contenedor es texto no se llega a leer todo el texto Entonces qué pasa bueno tenemos otra opción otra Opción que es scroll con esta opción tenemos un scroll Okay que acá podemos ver que se mueve hacia arriba y hacia abajo el problema de esto tenemos varios el principio que tenemos este scroll de abajo que es un asco Okay este scroll de acá es un asco Cómo podemos hacer para sacarlo Bueno

también tenemos overflow I u overflow x que se mueven en el eje x o en el eje I si yo quiero sacar por ejemplo el del eje I le voy a dar en hiden Entonces de esa forma se oculta el Del eje i pero en este caso le quiero dar que se oculte el del eje x Entonces le doy overflow hiden o tenemos otra solución mucho mejor que es agarrar el overflow I y decirle que va a ser scroll por ejemplo Entonces de esa forma estamos solamente afectando al overflow en el eje y Y de

esa forma es scroll Pero qué pasa esto tiene un problema y es que cuando cuando el contenido no desborde al contenedor por ejemplo acá esto se va a seguir viendo igual esta Barrita de scroll no me la saca nadie Entonces es un problema porque va va a tener siempre Esto entonces qué hago se lo saco no porque cuando le volvés a poner el contenido se desborda Cómo puedo hacer para que se ajuste para eso le damos en overflow auto que este para mí es de los mejores valores que tiene esta propiedad Porque lo que nos

permite es hacer que el contenido se ajuste no en este caso fíjense que se lo di a los dos al I y al al x si yo por ejemplo acá Ya no tengo esto ya desaparece el scroll pero cuando el contenido pasa así no lo tiene esto es lo que tienen por ejemplo los textarea si yo creo un textarea yo esto que está acá escribo y cuando me sobrepaso fíjense que el textarea me permite hacer un scroll esto tiene un overflow auto por qué Porque una vez que me pasé del contenido me muestra la opción

para seguir bajando pero si no desaparece y esto es muy útil por ejemplo como dije para los textar Y en Este caso se lo estamos dando a esto Entonces si le sacamos contenido se adapta y no aparece el scroll pero si necesita el scroll automáticamente se pone al costadito Bueno si yo por ejemplo le doy overflow hidden van a ver que acá tenemos el tema de que el contenido se recorta la diferencia es que si yo le doy overflow clip clip no deja espacio para las barras de desplazamiento o sea overflow hidden y overflow clip

funcionan Exactamente Igual Solo que overflow hidden aunque las barras de desplazamiento no se vean el navegador Sí deja un pequeño espacio que en este caso es el que estaría acá abajo o el que estaría acá por más que no se vea es un espacio que ocupa las barras mientras que si le damos clip el elemento directamente se corta por eso en overflow visible y en overflow hidden si se fijan el contenido se altera o si yo solamente me enfoco en ver esto lo que pasa con hiden es que se mueve hiden Le reserva unos espacios

aunque no se vean a Las barritas de scroll Y eso hace que se vea un poco diferente a que si el contenido solamente se recortar así que bueno eso así es el funcionamiento de overflow scroll Está bueno porque si por ejemplo tenemos una imagen o tenemos otras cajas y demás no solo recortamos texto recortamos todo para el recorte del texto Es decir para ver cómo las palabras se cortan a la mitad o para definir la forma en la que va a estar Todo para eso se utilizan Okay varias propiedades que lo que hacemos Es definir

el control del flujo de texto Así que lo que vamos a ver ahora es eso vamos a ver las propiedades que se encargan de definir el control del flujo del texto Esto es para todo el contenido se aplica para imágenes se aplica para videos pero lo que vamos a ver ahora es específico a texto vamos a ver wh space text WAP y un montón de propiedades más que necesitamos ver porque realmente Manejan todo el control del flujo de texto Así que vamos a ver esto que es una de las últimas cosas que tenemos que ver

antes de avanzar Así que vamos Bueno ahora vamos a hacer algo muy parecido a lo que hicimos antes vamos a crear un disco la clase Box vamos a dar un wid de 200 píxeles un he de 200 píxeles un margin auto y un margin top un background blanco y al Body le vamos a dar un background ccc perfecto hasta acá todo bien a esto le vamos a dar un Border un Pixel solid 006 Bien listo ya lo tenemos bien definido lo que queremos ver más le vamos a dar B BB para que sea un poco

más bruto vamos a dar 240 por 240 ahora lo que vamos a hacer es poner un lorem acá dentro lorem y vamos a poner otro lorem Ahí está Y tenemos un leve desbordamiento voy a poner un poquito más para que se note bien esto que estamos teniendo acá es un pequeño desbordamiento de texto vamos a minimizar un poco esto Ahí está y vamos A aprender a controlar este texto y a manejar su flujo vamos a ver cómo funciona primero la propiedad White space White space Define Cómo se comportan los espacios en blanco Eso es todo

si le damos en normal es la propiedad por defecto Okay después le podemos dar no rap Okay que esta es una propiedad que le dice ey no va a haber saltos de línea eso es lo que dice esto es un salto de línea automático Por qué Porque cuando el texto detecta que tiene Que saltar una línea porque si no se va a desbordar del contenido le estamos diciendo Ey tranquilo que sea normal bajá si vos te das cuenta que esta palabra no entra acá porque se desborda tírala para abajo entonces eso es lo que hace

normal pero no wraap no hace así no dice no no no no quiero que haya saltos de línea automáticos eso lo voy a definir Yo cuando quiera que es algo que normalmente No deberíamos a usar después tenemos otro que es interesante que es Pre Qué joraca hace pre bueno fíjense que cuando nosotros le damos pre lo que hace es detectar los saltos de línea tal cual nosotros los ponemos si yo por ejemplo tengo lorem ipsum dolor le doy espacio y ahí baja y básicamente es lo mismo que lo que nosotros tenemos en nuestro editor de

código porque esto no son saltos de línea aunque ustedes crean que esto es un salto de línea no lo es si yo estiro ven no es un salto de línea esto simplemente se está Ajustando Automáticamente para entrar pero el Salto de línea verdadero no es ese el Salto de línea es este que le hice acá este que dice acá y este que dice acá para que sea un salto de línea tengo que venir acá y darle espacio o sea vengo acá y le doy espacio y vengo acá y le doy espacio y guardo y ahí

hay otro salto de línea y si quiero que esto no esté acá qué hago lo saco esto lo saco y los pongo más para atrás ven lo pongo más para atrás y ahí debería aparecer de Vuelta al principio y ahí aparecen al principio eso es lo que hace el pre pre lo que hace es detecta como el desarrollador escribió el html y lo ajusta lo que el desarrollador haya escrito que no está mal es bastante interesante si nuestro editor de texto tiene la misma tipografía que vamos a aplicar en la página mismo es utilizable es

utilizable yo por ejemplo acá le doy espacio acá espacio acá espacio acá espaci acá espacio acá acá acá y ahí Está y ahí más o menos se adapta porque es lo que yo quise yo normalmente lo dejaría en normal que de hecho no hace falta ni que lo hagamos porque ya viene configurado en normal que normal ignora esto Solamente le importa lo que vimos antes que es que se ajusta automáticamente y después tenemos otro que si queremos usar pre deberíamos hacer esto que es pre WAP que preap funciona igual solamente que permite saltos de línea

o sea si nosotros por Ejemplo decimos va a haber un salto de línea acá lo permite lo hace lo respeta Pero qué pasa si detecta que se está por desbordar la diferencia es que el pre no le importa con pre se desborda igual ahora vamos a venir para acá vamos a hacer que esto tenga todo como antes Ahí está con esto se desborda igual o sea no le importa pero con el preap lo que hace es no no no no no si yo detecto que la palabra no entra te la tiro abajo o sea es

parecido al normal es muy parecido al Normal solamente que lo que hace es respeta lo que yo quiero si en el normal Yo vengo acá y acá le digo Che en ipsum vas a tirarte para abajo no me lo respeta pero compré rap sí me lo respeta es como un normal Solo que si yo le digo Ey esto abajo y la s va a estar acá esto sí me lo respeta es como una mezcla entre normal y pre porque Respeta los saltos de línea que yo le doy en el código pero también se ajusta automáticamente

para no desbordar el Contenido Bueno después tenemos otra propiedad text overflow y supónganse que yo tengo un texto no que yo Che esto se me está por desbordar vamos a hacer una cosa yo esto le vamos a dar en no wraap se me está por desbordar es un texto que se está por desbordar Cómo puedo hacer si yo lo que quiero es Vamos a darle vamos a dejarle normal si yo lo que quiero es Mostrar los famosos esos tres puntitos suspensivos vamos a que la caja tiene 50 píxeles solo 50 Cómo puedo Hacer para mostrar

los tres puntitos suspensivos para eso utilizo text overflow y primero tenemos clip lo que hace es esto que está acá que es lo lo normal y es recorta las palabras viéndolas para abajo pero la otra que es la linda es ellipsis que lo que hace es ahora no no parece que hizo nada elipsis pero si nosotros le damos en no WAP parece que no se recorta pero si le damos en overflow hidden fíjense que aparecen tres puntitos Esta es la magia Del text overflow elipsis es interesante Estas son las propiedades con las que se usa

el wh space el nor o también lo puedemos usar compré con También compré se puede usar Pero sería raro Yo por ejemplo acá lo voy a dar para arriba Ahí va y esto que está acá por ejemplo voy a hacer que se desborde vamos a hacer que se desborde un poco y ahí por ejemplo ven me muestra esto yo si recorto un poco ven Esto es lo que me va a mostrar siempre me va a mostrar tres puntitos Que no son seleccionables pero eso es lo que hace elipsis es Che se está por desbordar el

texto bueno no mejor Mostrarme tres puntitos mientras que si lo dej amos en clip esto no pasa o sea se recorta porque le dimos en hiden pero la palabra sigue no le importa mientras que con elipsis se hace un elipsis que son estos tres puntitos que están acá y después tenemos Word break e qué queres hacer queres cortar las palabras que se pongan una abajo de la otra bueno si Hacemos esto en vez de darle hidden las palabras acá le vamos a dar en Normal y esto lo vamos a sacar las palabras si se fijan

lo que hacen es se recortan si yo no le doy en break all las palabras lo que hace es recortarse por las palabras O sea no me va si yo digo Hola Cómo estás No me va a recortar el abajo no yo voy a poner acá Digo e máquina el otro día pasé por tu hermosa casa fíjense que acá lo que está haciendo es la palabra tu no entra entonces me la pone abajo la Palabra Pero si yo acá le doy Word break Y le doy en break all me recorta la u Me pone pasé

por t u hermosa casa esto es un asco después tenemos otra que es Keep all que esto por ejemplo Es que para que en idiomas como el coreano evita la ruptura de palabras y después tenemos una que es buena que es auto ahí va lo que hace es detecta cuando una palabra se está por cortar y lo que hace es detectar frases inteligentes es experimental la van a ver en el futuro Todavía no salió pero cuando salga investiguen la porque está copada normalmente uno no toca esta propiedad y después tenemos una parecida que es Word

wrap que esta lo que hace es rompe las palabras Okay agarra una palabra y la rompe en sílabas Entonces yo por ejemplo Acá tengo hermosa casa detecta si la palabra r se puede romper y si se rompe la rompe y la tira para abajo y después tenemos el otro valor que es anyw Qué significa anyw básicamente significa que Las palabras largas se van a romper si se desborda si yo por ejemplo pongo esto ven lo que hace es la palabra me la rompe si se desborda del contenedor yo no le doy anyw si yo esto

lo saco esta propiedad la saco no se rompe porque es una palabra que no se puede romper se desborda Pero si yo le doy anyw las palabras que son largas se rompen ahora si es una palabra corta la palabra no se rompe jid si yo le pongo más palabras no se va a romper Ahora si la palabra es Muy larga okay Ahí sí me la rompe para evitar que se desborde justamente eso es lo que hace las palabras que son largas me las rompe las que no me las tira abajo y demás funciona como como

normal y después tenemos la que nos interesa a nosotros si yo por ejemplo Acá tengo un h1 vamos a poner un h1 que el h1 dice Este es un texto maravillosamente hermoso XD fíjense que esto es feo porque lo que está haciendo con el texto es poniéndome este texto Asqueroso Pero si yo agarro el h1 Y le doy text wrap balance fíjense que me tira este hermoso abajo entonces esto queda mucho más lindo porque lo que hace es balancearme el texto para que más o menos todas las palabras medio que encajen de una forma estética

que no sea de repente que no sea de repente esto así que me quede asqueroso no no no no no vamos a darte balance para que te balancees para que no te quedes una palabrita abajo esto lo que hace también Es evitar este huérfano no que queda ahí y después tenemos la otra que es Pretty Yo acá le doy Pretty fíjense que lo que pasa es parecido a lo mismo Okay pero funciona de una forma que es un poco diferente si yo acá le doy balance no parece que no notamos la diferencia pero si yo

por ejemplo utilizo esto en un párrafo yo voy a darle acá un Pretty si yo no le doy nada el texto por defecto queda así si yo le doy en Pretty fíjense que abajo lo que hace es esto Qué es lo Que está haciendo Pretty si yo le doy en balance Primero quiero que veamos balance si yo le doy en balance lo que hace es intentar ajustar todo para que más o menos haya un balance pero en textos que son tan largos no funciona mucho porque es aplicado al blo entero Entonces el balance sería cosas

como por ejemplo el h1 que ahí funciona Pero para esto no nos sirve ven que no nos tira para abajo esto no Para eso usamos el Pretty que la única funcionalidad de Pretty es hacer que se eviten las viudas y los huérfanos una viuda es una palabra al principio de de una viuda es si nosotros por ejemplo tuviéramos una línea de texto o una palabra que nos queda suelta y después se va para abajo eso es una viuda y abajo una viuda es una palabra o línea que nos queda suelta también si yo por ejemplo

le saco esto Esto es un huérfano ven porque es una palabra sola está aislada del resto y queda feo o sea es un texto lindo que Venimos leyendo y nos pone esta última Dale no podes ajustar el texto para que esta no est abajo bueno con eso eso lo usamos con Pretty lo que hace es elegir las últimas líneas y más o menos las balancea para que entre y nos no nos quede tan feo este este apartado final Y evitemos estos huérfanos y viudas No eso es lo que hace Pretty si quieren ahorrarse toda esta

explicación las dos cosas más importantes que podemos rescatar de acá es que si se nos está Por desbordar algo tenemos que darle en White space no rap nos olvidamos del Word wrap acá ponemos un text overflow ellipsis y le tenemos que dar también un overflow hidden Esto es lo que podemos rescatar que el texto puede funcionar de esta forma y lo otro que podemos rescatar Es que para balancear textos usamos el Tex balance y para balancear párrafos usamos el textra Pretty Eso es lo más importante de todo pero que sepan que las demás propiedades también

Existen y ya aprendieron a usarlas Ahora sí vamos con la siguiente sección que la verdad que es bastante simple porque la siguiente sección vamos a ver object fit okay Y también object position pero principalmente Ob hfit así que bueno vamos que es muy parecido a background eh imagen y todas sus propiedades background size y demás Pero esto aplicado a imágenes y videos Así que vamos Bueno ahora lo que vamos a ver va a ser la propiedad obet fit Para qué se Usa obet fit básicamente cuando nosotros definimos la altura y el ancho de un elemento

ese elemento aún sigue teniendo un contenido Qué pasa si por ejemplo tenemos un video si tenemos una etiqueta de video o una etiqueta de imagen si nosotros definimos el alto y el ancho la imagen Qué va a hacer se va a adaptar se va a estirar se va a ajustar qué va a hacer con este tipo de elementos bueno la propiedad ogf nos permite determinar eso cómo se va a comportar el contenido De un elemento de este tipo cuando definimos su alto y su ancho y voy a poner una imagen y va a tener un

source acabo de copiar el enlace de mi imagen de Google y acá me cargó perfecto a a la imagen le voy a dar un Win de 200 píxeles Acá está no te pases 300 400 píxeles Pero si yo le doy a esta de repente un hate de 100 píxeles fíjense que la imagen se vuelve media se vuelve media fea no media fea Vamos a darle un margin auto Ahí va entonces yo no quiero Que pase esto bueno para eso tenemos que aprender a manejar esta propiedad de obet fit acá no podemos darle background size y

darle en cover porque no funciona no nos va a servir esta propiedad para eso tenemos que usar object fit object fit es muy igual okay Si nosotros le damos en fill la propiedad por defecto es esta que es fill básicamente se adapta rellena el contenido si la imagen es de 100 por 100 y las resoluciones son de 100 por 50 no importa se adapta y se Tiene que ajustar la escala O sea no mantiene la relación de aspecto después tenemos contain contain lo que hace es hacemos lo que dijimos antes Vamos a darle un Border

dos píxeles solid negro y un margin top de 50 píxeles para anar bien Qué es lo que está pasando margin left también 50 píxel lo que hace contain ya es lo mismo que hace una imagen con background Eh contain ya lo vimos antes es lo mismo que lo que hace la imagen con el background y má lo Mismo hace que la imagen entre por lo menos una vez en la resolución que le dimos y alguna de las dos dimensiones esté al 100% en este caso si le damos por ejemplo 600 píxeles ven va a estar

a lo alto porque a lo ancho se deformaría entonces lo que hace es eso se va adaptando pero por lo menos tiene que entrar una vez bien después tenemos el cover que ya lo vimos también que es lo que hace es adaptarse solamente eso se adapta literalmente se empieza a adaptar Si acá por ejemplo le damos 600 se va a adaptar desde otra forma pero se adapta eso es lo que hace este tipo de imagen se adapta que facha ad alto y después tenemos otra que es object position que le podemos dar en Top para

que nos muestre la parte de arriba le podemos dar en bottom para que nos muestre la parte de abajo le podamos dar en Center le podemos dar pixeles le podemos dar 50 píxeles y 50 píxeles para que baje Así es lo literalmente es lo mismo que las Imágenes lo mismo es muy simple esta propiedad y después tenemos none qué pasa con none Bueno voy a hacer un pequeño zoom voy a darle en 33 por y le voy a dar en 400 si se nos va se nos va si no por 1000 y pico y le

voy a aumentar ahí lo que hace eh n es decirle Ey la resolución original de la imagen O sea si vos no le di las medidas la resolución es de 1000 por 1000 Entonces se va a mantener en 1000 por 1000 la imagen es de 500 por 500 mantienen 500 Por 500 o sea nosotros cuando nos descargamos una imagen tiene una resolución puede ser Full HD 4k o una resolución aparte extra lo que hace none es decirle no vas a ajustarte al contenido de ninguna forma o sea vas a ser tal cual Por más que

tengas un alto y un ancho si yo Esto se lo saco fíjense que la imagen mide esto Si yo no tuviera la propiedad n cuando le doy esto la imagen se ajusta si le damos none mantiene su relación original y después Tenemos la última que es scale down que scale down lo que hace es vamos a quedarnos con el valor más chico por ejemplo Yo acá le voy a dar en 400 píxeles si el valor más chico es contain me quedo con contain si el valor más chico es Eh none me quedo con none O

sea si la imagen es 1000 por 1000 y nosotros le damos una resolución que es mayor a 1000 por 1000 se va a quedar con la resolución original ahora si no si le damos por ejemplo 500 por 300 se va a Quedar con esta en este caso est lo mismo que decirle contain contain porque la resolución es mayor entonces detecta Cuál es más chica Che si yo le diera contain Cuál sería la resolución de la imagen y si yo le diera none Cuál sería la resolución de imagen Bueno me quedo con la más chica si

la más chica es contain me quedo con contain si la más chica es none me quedo con n depende de las medidas la más chica puede ser contain no puede ser n entonces va a Elegir según las medidas que le demos del ancho y alto Eso es todo resumido así que bueno no me vo a volver muy loco por esta propiedad Porque la verdad que es una propiedad que se las tenía que explicar sé que es muy cortita esta sección Es más si ya entendieron Cómo funciona la propiedad background imagen background size background position ya

prácticamente saben cómo usar esta Así que lean lag es bastante Interesante pero esto no se aplica a los fondos si Aplica a los elementos Como por ejemplo las imágenes o los videos Así que ahora sí adquirimos una nueva habilidad que sentí que tenía que estar en esta sección intermedio y después nos falta la última de todas outline yo quiero que veamos outline por un motivo muy específico no para aprender a darle estilo sino que por otro motivo que para mí es importante que no podemos pasar avanzado si no lo sabemos Así que vamos a ver

outline Vamos Bueno ahora vamos a ver la propiedad outline outline es bastante interesante porque lo pude haber explicado cuando vimos el box model pero creí que es el momento para explicarlo tenemos una caja simple Okay una caja que básicamente es un div muy simple y acá sus propiedades qué le dimos el mismo ancho y alto 150 por 150 un fondo rojo un margin auto y lo separamos de la parte de arriba 50 píxeles nada más ahora si yo por ejemplo esto le agrego Un Border okay fíjense Que Border lo que hace es 5 píxel solid

negro literalmente afecta el tamaño de la caja es decir ya sabemos que el borde afecta el tamaño pero ustedes se dieron cuenta que pasa cuando nosotros ponemos un input si nosotros ponemos un input no un input cualquiera cuando nosotros ponemos el mouse en el input voy a hacer un pequeño zoom para que se note si ponemos el mouse en el input hay de repente como un borde raro bueno yo voy a agarrar el Input y le voy a dar un Border dos pixeles solid negro y quiero que se quede ahí ahí está pu Yo le

doy clic Pero qué raro Sigue apareciendo es como algo raro que sucede cuando le doy click Y esto es en over bueno agarro Y le doy over le doy Focus y que se mantenga en Focus y que se mantenga en active Okay que se mantenga Ahí está en todas las formas posibles se lo di de todas las formas posibles de todas las formas posibles le di lo que quería darle en Focus y en estado base vamos a ver qué pasa Sigue apareciendo bueno eso que están viendo ahí es el outline o sea básicamente en el

modelo de caja primero tenemos el contenido después tenemos el padding después tenemos los bordes después tenemos el margin Pero entre el margin y los bordes hay otra propiedad y esa es el outline vamos a sacar el input vamos a borrarlo de la existencia si yo esta caja por ejemplo le doy un contenido lorem y vamos a sacarle su Alto vamos a solamente dejarle el ancho ahí este es el contenido de la caja si yo a esto le doy un padding 10 pes ahora la caja adquiere más tamaño porque se está separando 10 píxeles de todos

los lados si yo a esto le di un borde Okay el borde lo tenemos acá Este borde también ocupa espacio pero después tenemos la propiedad outline tenemos outline offset outline color outline Style y outline wid yo por ejemplo le doy en outline wid voy a decir que el Wid del outline va a ser de no sé 10 píxeles ahí no aparece nada me falta el color yo le digo outline color le voy a decir por ejemplo que va a ser color blue o sea 00 F tampoco pasa nada Bueno necesitamos decirle el estilo igual que

con el borde online Style y acá le damos por ejemplo que va a ser solid y ahí se acaba de crear esta pequeña capa por fuera pero esto es interesante porque esto no ocupa espacio tiene solamente la una utilidad visual si yo creo dos cajas Okay dos cajas No cambia nada fíjense que si yo le aumento el borde la caja cambia su tamaño y cambian sus posiciones porque estoy aumentando el borde pero si aumento el outline lo aumento a 100 No cambia nada porque no ocupa espacio solo ocupa aspecto visual lo pongo en 50 No

cambia nada pero si ahora pongo el borde en 50 ahí sí cambia fíjense que cambia hasta la posición Y dónde aparece cambia todo pero si yo cambio lline no cambia nada el outline Es solamente una guía para el usuario por eso cuando yo pongo el mouse encima de un input aparece este outline yo en vez de utilizar estas propiedades que también podemos utilizar el offset si yo por ejemplo acá le doy en en 50 píxeles Vamos a darle en cinco como antes tenemos la última que es outline offset que básicamente Define esto si le damos

10 píxeles Define Cuánto se va a separar del borde es lo que estamos diciendo estamos diendo Che el borde falso que Creaste que no ocupa lugar en la página que sería el outline el outline que creaste va a estar separado 10 cm de los bordes de la caja pero el outline no ocupa lugar solamente es un aspecto visual y le podemos dar también dashed tiene los mismos estilos que el borde tiene dotted tiene Double tiene lo mismo que el borde solamente que no es es literalmente un borde pero que está por fuera del borde y

no ocupa espacio y está bueno porque nos sirve para hacer Un Focus si yo quiero hacer todo esto en una propiedad también lo puedo hacer como si fuera Border pongo outline y voy a poner por ejemplo C píel es solid azul Es igual que el borde solamente que está por fuera del borde y que no ocupa espacio entonces si yo quiero hacer un over por ejemplo voy a poner vox over Está bueno porque se lo puedo dar puedo hacer que un elemento tenga un outline sin que cambie su tamaño por ejemplo el borde en vez

de ser de cco píxeles va a Ser de 10 píxeles eso es lo que voy a hacer fíjense yo hago esto cambia y me cambia todo porque como cambia el tamaño de la caja también me cambia el elemento que está abajo yo no quiero que pase esto porque es feo el movimiento utilizo un outline outline Ahora yo guardo y el efecto es este Entonces para eso es el outline no afecta el flujo es buenísimo para las transiciones es buenísimo para hacer cambios de estado es buenísimo para mostrarle Al usero que está Seleccionando un elemento Ahora

hay algo muy común que cuando nosotros usamos un input text por ejemplo tenemos un input como este vamos a borrar la segunda caja vamos a agarrar el input margin 50 píxeles Vamos a darle para que se separe acá lo tenemos Cuando tenemos un input ven que aparece este outline bueno muchas veces lo que vamos a hacer es querer ocultarlo porque vamos a tener un efecto lindo Esto va a tener un background ccc por ejemplo y nuestro Input va a tener un Border none y un Border top TR píxeles solid negro por ejemplo entonces a nosotros

nos gusta este estilo le damos un padding por ejemplo de seis píxeles ya está Yo quiero este input quiero escribirlo no quiero que cuando le dé click me aparezca este borde porque no me gusta no me interesa cuando le dé click esto es el input Ty Focus cuando el input esté focuse va a tener un Border top o un Border el Border color va a ser por Ejemplo Blue Entonces yo por ejemplo le doy click y mientras le dé click el borde va a ser así pero no quiero no quiero que borde yo ya le

di un estilo Ya lo sé y el color también va a ser Blue ya está esta es la forma que tengo para decir al usuario que el input está siendo focuse que se va a poner todo azul para eso vengo y pongo outline No Y ahí ven que ya los input no tienen borde y le sacamos ese efecto feo que tenía pero esto está mal si el outline no está Tenemos problemas de accesibilidad para hacer este efecto para sacarle el outline lo que tenemos que hacer es utilizar input Focus visible y ahí le vamos a

dar el lline Non Entonces cuando nosotros venimos con el teclado con el Mouse el input está en on pero cuando lo hacemos con el teclado las tecnologías accesibles lo detectan entonces para nosotros que somos usuarios promedio vamos a poder acceder a esto y no se va a ver el outline pero para el usuario Que use una tecnología accesible va a funcionar el outline y le va a decir que sirve Entonces nunca hay que darle un outline invisible a los elementos que tienen que estar focuse ados en el la la pseudoclases Focus se les da en

la seud clase Focus visible lo único que outline tiene otra propiedad que es el outline offset que es el tenemos que dar por fuera o sea si yo por ejemplo acá tengo a esta caja le doy un outline tres pixeles solid Blue si yo acá le Quiero Agregar el offset no puedo para agregar el offset se hace aparte online offset y acá le doy por ejemplo 10 pixeles y ahí sí se me separa más del Board etcétera Pero se tiene que usar el offset O sea no es como que acá le podemos dar 10 píxeles

y el cuarto parámetro es el offset no no funciona así Lamentablemente el offset se lo tenemos que dar aparte por ahora en un futuro seguramente para mí el offset se va a poder aplicar en la misma propiedad del Shun este vamos a dejarlo así por ahora y vamos a darle un out offset de 5 píxeles y cuando ponemos el mous por encima desaparece el outline es más Qué pasaría si le damos un transition outline un segundo interesante no pero esto es porque pusimos outline tiene que ser outline y outline offset outline offset un segundo un

segundo así se pone cuando ponemos más de una se pone outline un segundo coma outline offset un segundo y ahí está cosa más rara esto Ah y cuando ponemos el cer0 por delante 0.4 por ejemplo no hace falta que pongamos el cero con poner punto cu es suficiente el navegador entiende que hay un cero adelante 0.4 faltó la s listo ahí tenemos este efecto voy a ponerle dos nuevamente las transiciones no son de tantos segundos son de menos clique sacamos el Mouse y se vuelve a poner en su estado original bueno gente Así es como

funciona esta propiedad de outline me interesa que la aprendan y ahora Vamos a ver lo último antes de cerrar esta sección de html intermedio Perdón que estas últimas cuatro clases fui a los pedos y fui rapidísimo es que me tengo que ir a cortar el pelo y quiero que flexbox yo lo enseñe con el pelo cortado bien finito bien polenta Así que ya cuando arranquemos flexbox me van a ver bien peinadito así que bueno la próxima sección que van a ver ahora es sobre emet que es el plugin ese que yo usaba por ejemplo para

venir acá y poner Li por 4 y que se carguen cuatro Li y así bueno eso voy a explicar a usarlo en la próxima sección ojo porque voy a reutilizar un video el video que van a ver a continuación no lo voy a crear yo ahora sino que lo van a ver porque es el mismo video que está en el curso de visual Studio code Así que si seg vieron el curso de visual Studio code tranquilos porque voy a poner el mismo video del curso para no tener que crearlo de vuelta porque me quedó Perfecto

está la casualidad que el fondo igual era azul Así que va a ser parecer casi parte del curso pero si ven que digo algo o hago alguna mención o algo y les parece raro des preocúpense porque el video que van a ver ahora no fue grabado para este curso fue grabado para el curso de visual Studio code que ya está disponible en YouTube y lo pueden ir a ver y es buenísimo pero está bueno que lo apliquemos ahora porque emet es solamente para html y css así que Tenemos que verlo así que si ven algo

raro o que digo algo esto ya lo vimos en el curso y no lo vimos No se preocupen porque como dije es algo que es sucedió en el curso de code no fue creado para este curso Así que si vien algo raro des preocúpense pero lo importante es que aprendan a usarlo y en el video lo explico de madre así que vamos a ver emet que es lo último antes de ver flexbox Así que ahora sí vamos con emet Bueno ahora vamos a ver justamente lo que es emet emet es un plugin que básicamente nos

sirve para facilitar la creación de ciertas cosas en html y css o sea es algo que dice Che cuando desarrolles html y css okay instálame Porque voy a hacer que tu vida sea más fácil básicamente tiene un funcionamiento similar al de los snips es demasiado fácil primero obviamente vamos a necesitar un archivo html para para utilizarlo okay Porque es lo que Hace es específicamente para html y css okay Así que vamos a abrir el Index html y yo voy a poner html y puedo crear mi estructura o puedo borrar todo y solamente escribir html solo

escribo así no no pongo la apertura de etiqueta no no no solo escribo html y si se fijan Uh ya me adelanté y si se fijan acá me dice emet abbreviation bueno así es como funciona emet funciona con abreviaciones que lo que hace es convertir un abreviación en todo un código después en Este caso me está diciendo esta abreviación Okay html es una abreviación que si le damos enter básicamente lo que hace es crearnos este código que si se fijan es el mismo código que nos dice Acá está creándose este código y te va a

posicionar el cursor acá entonces vos ponés el contenido que quieras si bajamos le damos clic en la fechita de abajo van a ver que acá aparece html 2.5 o sea esta abreviación es una abreviación que cuando le damos enter Nos crea esto y nos pone el cursor acá vamos a chequearlo le damos enter y nos crea esto y fíjense que si nosotros primero ponemos Esto me da el device Wi le damos Tab pasa al inal scale le damos Tab pasa al document que acá ponemos el título por ejemplo página web Le damos en tab y

ya nos manda directamente al bod para que arranquemos a trabajar esto okay es una abreviación de em literalmente es parecido a un sniped pero tiene sus características que ahora Vamos a ver porque son muy interesantes para arrancar vamos a ver lo más básico de todo cualquier elemento en html puede ser creado a través de emet si yo por ejemplo escribo a Y le doy enter me acaba de crear una etiqueta a si yo por ejemplo le doy b y le doy enter me crea una etiqueta B escribo h1 y le doy enter me crea una

etiqueta h1 ya vemos que ahora no hace falta que hagamos esto Okay solamente con escribir a ya tenemos la etiqueta a que se acaba de crear y de Hecho nos posicion en el href pruébenlo ustedes son cosas que uno no se da cuenta hasta que las empieza a usar ponemos a y ya tenemos el elemento acá y nos posiciona el cursor para que por ejemplo la hacemos primero ya le podemos dar tilde acabamos de verlo primero con emet la abreviación después otra cosa que ya hicimos en este curso usando emet fue escribir lorem y si

se fijan cuando le damos enter acá nos va a aparecer todo este texto que a lo largo del curso Lo veníamos usando buen acá le doy en Word acá tenemos es con m acabamos de crear este contenido y acá viene el verdadero uso de si yo por ejemplo Okay le voy a dar en ul ya sabemos que se nos crea el ul pero fíjense qu pasa si yo hago así se acuerdan que es esta esta es la etiqueta que utilizamos en eh a nivel de selección para decir ahora Metete adentro del ul y le vamos

a decir una vez que estás adentro del ul créame una etiqueta l le damos enter y fíjense lo Que acaba de hacer creó el ul se metió adentro y adentro del l creó la etiqueta le fíjense Qué pasa si yo ahora hago lo mismo adentro de la etiqueta le te vas a meter y y ahora vas a crear un a le damos enter tenemos un L y adentro tenemos un li y adentro del Li tenemos un a hasta acá está todo bien dalto pero tendrías que cada vez todo el tiempo hacer esto tendrías que poner

Li a para que todo el tiempo se cree todo el tiempo tenés que estar haciendo Li a y Esto la verdad que es medio tedioso Bueno hay una forma más interesante de hacerlo una es crear solamente el ul vamos a hacerlo desde cero vamos a poner ul y adentro ponemos un li por tres por ejemplo y van a ver que se nos crean tres le se nos acaban de crear tres Li pero también puedo poner le por cuatro y se me crean cuatro Pero si yo pusiera Li por 4 y pusiera a por ejemplo qué

pasaría Bueno vamos a probar le damos enter y se acaban de crear cuatro Li con Un a adentro del Li esto es mágico entonces directamente entendiendo Cómo funciona esto podemos hacerlo todo desde cero podemos poner ul Li por 4 a le damos enter y ahora se está creando esto se creó toda la estructura salí de acá No me gusta poner el coso por arriba y que me salte esto poner el mouse por encima y que nos muestre esto es bastante molesto Así que yo voy a venir acá voy a poner esto que está acá y

voy a voy a modificar esta propiedad que va A ser editor hover enabled y le vamos a dar en false Ahí está ahora s ya no nos rompe más los huevos si ponemos por encima ya no nos muestra nada Ahora sí voy a poder explicar tranquilo básicamente lo que decía es que entonces haciendo ul Li por 4 a estamos generando lo mismo una estructura completa fíjense antes lo que hacíamos antes teníamos que crear nosotros el sniped y el snip se llamaba le y nosotros teníamos todo esto y adentro le poníamos el link name Poníamos le

link y acá hacíamos algo pero ahora fíjense qué interesante que solamente poniendo ul es más incluso poniendo Li a ya se crea lo mismo No necesitamos hacer un sniped es como que em ya tiene su propia forma de de hacer snippets pero son snippets dinámicos porque no son snip snippets estáticos no es que podemos poner un sniped y siempre es lo mismo es como que va variando se va adaptando a lo que nosotros queremos Bueno ahora vamos a ver otra cosita más Supónganse que ustedes dicen quiero hacerlo de otra forma bueno tenemos otra forma de

hacer esto ul Li a y esto lo que hace fíjense yo voy a seleccionar todo entre paréntesis y esto lo que hace es es como meter en un grupo esto por qué lo quiero meter en un grupo porque ahora lo voy a multiplicar por cuatro por ejemplo y esto hace Exactamente lo mismo a nivel interno sí funcionan de forma diferente uno lo que hace sería agrupar esto okay Entonces crea un li y Adentro Crea una a y básicamente se va a crear este elemento fíjense que está creando este elemento esto que está acá crea este

elemento entonces este elemento lo crea Y si le damos en por cuatro por ejemplo lo que hace es multiplicar esto por cuatro lo multiplica por cuatro eso es lo que hace a nivel interno en en cambio Si nosotros lo hacemos de esta forma que sería ul Li por 4 a lo que hace es primero crea cuatro Lis y después le agrega los a Adentro básicamente es lo mismo Solo que a nivel interno cambia Cómo se radica la construcción internamente de esto en una se repite una operación cuatro veces básicamente estamos diciéndole he crea uno L

y crea cuatro Li que cada uno adentro tenga un a pero lo que se va a repetir son solamente los cuatro Li mientras que acá le estamos diciendo Ey crea un ul que te tenga este patrón repetido cuatro veces Entonces es lo mismo yo lo suelo poner de esta forma la Verdad Pero el resultado es el mismo No cambia nada ahora fíjense que curioso esto vamos a abir para atrás que yo también puedo agregar clases al a le quiero dar una clase llamada link pongo punto link nosotros lo que hacemos con el punto es con

un punto nosotros lo que hacemos Es vamos a a checar un poquito esto Si nosotros por ejemplo ponemos a pun link fíjense que todos los a van a tener ahora la clase link Por qué pasa esto Bueno muy simple porque cuando Ponemos un punto estamos diciendo Ey quiero que este elemento que vas a crear tenga esta clase lo mismo si ponemos un hashtag le estamos diciendo creame a este elemento con este ID si le damos enter fíjense que ahora todos tienen este ID que esto es una mala práctica porque no tiene que haber más de

un elemento con un mismo ID en una página Así que lo vamos a sacar y lo vamos a dejar con el punto Ahora también yo podría agregarle por ejemplo una clase Al list le puedo poner punto list item y esto se va a multiplicar por cuatro le doy enter no porque le tengo que dar enter acá Ahora sí Y fíjense tenemos los l con la clase light item adentro tienen una que tiene la clase link Okay es buenísimo al ul también le vamos a dar una clase le vamos a poner punto gader ul por ejemplo

no Entonces ahora sí venimos acá de vuelta lo ejecutamos y ya tenemos esto con clase qué calidad es más vamos a hacer que esto esté dentro De un header que esté dentro de un nav y ahora sí muchachos tenemos una estructura semánticamente correcta de html solo escrito con una sola línea de código fíjense qué sencillo le damos enter y ya tenemos todo esto así es más al jar le debería amos dar una clase y al nav también al header le podemos dar la clase por ejemplo gader y al nav le podemos dar la clase header

nav Entonces ahora sí a esto le damos enter y ya tenemos Ahora sí la estructura completa Ahora vamos a seguir agregando cosas Porque todavía podemos seguir agregando cosas supónganse que yo qui yo todavía quiero que los a. link tengan un contenido para eso lo que se hace es utilizar las llaves las llaves le dicen al programa Ey ojo porque acá se va a escribir texto yo le puedo poner link okay Y ahora sí Y fíjense que ahora adentro de cada a me aparece un link todavía podemos ir más lejos fíjense que pasa Yo por ejemplo

Ahora vuelvo para Atrás okay Y acá pongo un espacio y el signo del dólar le damos enter y ahora me dice link 1 link 2 link 3 link 4 Vamos a repasar todo el punto es para las clases esto que está acá es para decirle adentro de este elemento créame este otro elemento también le estamos dando una clase adentro de este elemento estamos creando otro elemento y también le estamos dando una clase adentro estamos creando cuatro le con la clase list item y a cada uno de esos le va a Tener adentro un a con

una clase link que va a tener como contenido adentro de la etiqueta el texto link y este signito que básicamente lo que hacemos con este signo es crear un auto incrementable cada repetición va a valer uno más entonces vemos 1 2 3 4 5 si creamos nueve de estos vamos a tener que de repente acá va a tener nueve links y cada uno va a estar en numerado del uno al nueve Okay vamos a volver para atrás Solamente era para que lo vean voy a Seguir creando cuatro supónganse que yo tengo un elemento no tengo

un Script Yo vengo acá y se crea la etiqueta pero si le Quisiera poner la etiqueta source Cómo hago punto src No Esto me lo me crea la etiqueta con la clase source hao hashtag eh o almilla src no tampoco Esto me crea con un ID bueno para crear sus propios atributos pueden poner dos puntos en este caso src Bueno ahora lo que yo les pregunto a ustedes es muchachos vale la pena una estructura Así tan compleja porque imagínense para mí en vez de escribir todo texto por ahí Es más fácil crear el header crear

el ul adentro list item por 4 a pun link por ahí y ya tengo los cuatro y arranco acá digo me termina siendo más rápido hacerlo de esta forma que andar recordando o pensando cómo hacer esto Bueno si ustedes quieren hacerlo de forma más rápida también podemos crear un sniped de esto cómo hacemos esto fácil copiamos esto Vamos a darle Control shif p snippets y vamos a crear el snippet en html y ahora lo que yo voy a crear no se olviden que para separar los snippets tienen que poner una coma porque esto es un

archivo Jason entonces tienen que poner una coma abrir otro bloque Y ahora van de vuelta acá Tiene tiene que estar el nombre que en este caso el nombre sería estructura gader y acá dentro arrancamos el prefijo prefix va a ser full gader vamos a poner una coma Body dos puntos vamos a poner Corchetes comillas dobles y acá pegamos todo este código le damos coma ponemos descripción estructura gader completa entonces venimos acá al archivo html y ponemos No no Ah nos faltó el dos puntos acá Ahora sí si venimos acá y ponemos full header fíjense que

ya nos saltó el sniped le damos enter y acá tenemos esto listo Le damos enter de vuelta y ya se creó toda la estructura ahora ustedes dicen dalto pero para eso create un snippet de esto y listo y pero depende Porque crearme un snippet de esto es un snippet super largo en cambio crearme un snippet de emet es más rápido y aún así lo puedo hacer Dinámico Porque si yo por ejemplo acá le estoy diciendo Cuántos elementos quiero por eso acá aparecen cuatro pero yo podría ha que en vez de ser cuatro sea lo que

yo quiera por ejemplo cantidad esto una variable voy a hacerlo más chiquito para que se pueda ver mejor y fíjense lo que hago pongo vamos a ir para atrás de vuelta Ahora sí Voy a poner full header y ahora me está diciendo que le escriba la cantidad Yo quiero 10 elementos Okay Vengo al final le doy ahí y lo hace el tema de este snip es que es medio molesto por qué Porque fíjense que yo primero tengo que poner 10 acá darle clic acá borrar darle enter de vuelta y hacer esto Entonces es medio pesado

y es medio molesto entonces para optimizar este sniped voy a usarlo de los grupos que les expliqué antes porque a ver vamos vamos a a ver si lo Entendemos De vuelta yo le pongo full header Okay le pongo 10 Si yo le doy enter acá me deja de lado esta partecita del código y no se me cre crean los a porque el código se está ejecutando Okay de acá para acá yo quiero que se ejecute todo tengo que poner el cursor acá y no le tengo que dar en tab tengo que borrar el último caracter

escribirlo de vuelta y ahí darle enter entonces para evitarnos esta molestia yo lo voy a optimizar un poco yo lo que voy a hacer Es acá no voy a poner por cuatro acá lo que voy a hacer va a ser esto que está acá lo vamos a sacar y vamos a meter el a adentro del I y esto lo vamos a meter como hicimos antes en un grupo Okay ahora sí en un grupo y acá ponemos la cantidad del grupo Entonces si ahora venimos acá borramos y ponemos full header acá me está pidiendo la cantidad

Y si le digo 10 ahí me acaba de crear los 10 y eso eso no es lo mejor Yo puedo escribir acá le doy Tab y me va Cambiando esto pero acá tenemos un problema no me deja Modificar el texto de los links Bueno vamos a Modificar el texto de los links y para que se modifique el texto de los link esto lo voy a sacar y ahora ya con esto ya es suficiente ya está porque si nosotros le ponemos esto ya estamos definiendo el contenido nosotros tenemos que dejar que a nosotros nos deje definir

el contenido como nosotros querramos Entonces lo borramos y ahora sí ya ejecutamos esto Ponemos full chader y ahora le vamos a dar una cantidad como por ejemplo no sé dos y ahí se crea entonces acá ya tenemos la tabulación correcta ponemos ttp Ada 13.te okay Y acá ponemos Ada 13 web Le damos Tab y de vuelta va para abajo acá ponemos youtube.com soy dalto y acá voy a poner dalto YouTube y ya está acabamos de crear lo que queríamos como queríamos con la estructura que sabemos que vamos a trabajar y no fue tanto lío okay

Fue bastante simple Porque supimos entender cómo funciona m fíjense como fuimos optimizando todo de a poquito para llegar a este textio o sea imagínense ustedes antes de este curso ni en pedo se pensaban que iban a poder trabajar con un sniped específico Okay que se iba a encargar de crear un texto plano que era una especie de abreviación en emet para crear un hiad completo y tabular correctamente dependiendo de lo que ustedes necesiten no no increíble el nivel al que llegamos Muchachos y esto es solamente para html es decir esto solo es para html ahora

vamos a ver cómo funciona emet para css Aunque Bueno la verdad que para css es bastante fácil pero para css funciona diferente vamos a poner acá un link style.css vamos acá a crear ese archivo style.css y acá tenemos el archivo saben que en css funciona selector y acá el bloque de declaraciones se pone la propiedad y el valor supónganse que yo tengo seleccionado por ejemplo el Elemento header yo lo que quiero hacer con el header ahora es modificarlo Cómo puedo hacer para modificar el header bueno fíjense que si yo pongo por ejemplo la m ya

me está ofreciendo margin si yo le doy Tab ya me acaba de sugerir margin de hecho esto que está acá si se fijan es por m la M es de marching la p nos da un padding ya nos dice el padding por ejemplo eh bd nos da un Border y ya nos deja por defecto esto para que nosotros lo escribamos y lo Trabajemos ven Tab Tab Tab es excelente ahora vamos a arrancar con lo más básico que son las medidas supónganse que yo al hard le quiero dar un margin específico qué hago pongo margin 10

y esto me va a crear un margin de 10 píxeles le damos enter y se acaba de crear el margin de 10 píxeles Si yo al margin en vez de 10 le pongo 10p la p significa porcentaje con esto un margin de 10% si en vez de ponerle p le ponemos la e fíjense ahí como me está diciendo que me crea 10em Esto sería fácil entonces la M es margin esto O sea un número simple es Pixel el número con la p es por Cent el número con la e es eem Entonces si ponemos la

propiedad el número y la p estamos diciéndole que va a tener un margin de 10 píxeles Ahora si yo quisiera darle por ejemplo 10 y10 Cómo haría bueno pongo 10 10 entonces tengo margin 10 píxeles margin 10 píxeles los tengo que separar con un medio o también puedo separarlos con la p Pero de esta forma Voy a hacer un margin de 10% y un margin de 10 píxeles si le damos enter fíjense me creo un margin de 10% porque le dimos 10p y el otro es de 10 píxeles porque pusimos solamente un 10 mágico De

hecho acá podemos poner e por ejemplo y en vez de 10 píxeles tiene 10 cm o también podemos poner la p Y en vez de tener 10 píxeles o 10 em tiene 10% ent ya sabemos que si una propiedad se define con pixeles eh o con alguna medida lo podemos hacer de esta forma con el Número y la p para porcentajes o con el número y la e para e m También tenemos la x que es para poner e x Pero bueno nada O sea que también funciona con el padding Sí si ponemos p10 tenemos

un padding 10 píxeles p1p padding 10% p10 p1 padding 10% y 10 píxeles p10 p 10 p padding 10% 10% acá también podemos poner un 30 por ejemplo Y si ponemos un 30 ahí tenemos 30% y 10% pero nada esto es bastante interesante esto En cuanto a la forma de seleccionar propiedades a la Forma de de poner de definir las propiedades la W por ejemplo es with si yo pongo with 10 es with 10 píxeles Si yo pongo por ejemplo Wi 10 píxeles ahí ya tengo el wid de 10 píxeles también puedo poner por ejemplo

wid de 20% en costado y de 10 píxeles a los costados entonces ahí me quedó y ahí está hacia arriba y hacia abajo 20% y hace los costados 10% después por ejemplo si queremos definir el color se puede poner la c y ya me salta el color se puede Poner la c y el hashtag y ya también nos salta el color o si ponemos la almohadilla es para escribir algo a continuación si yo por ejemplo pongo el uno ya me tira el color este que es casi negro yo por ejemplo pongo 1 2 me lo

hace de seis en lugar de hacérmelo de tres y si por ejemplo pongo eh Ya los tres lo que hace es me hace una repetición por ejemplo pongo 4 3 2 y me hace 4 3 2 lo mismo con el background color eh En vez de poner así podemos Poner bgc y es background color o sea podemos poner bgc hh 2 3 1 y ya está ya así acabamos de escribir el background color la verdad que ahora ya con esto creo que ustedes ya tienen lo suficiente para más o menos utilizar emet Y expandir ustedes

después pueden ir a la documentación oficial y Buscar cómo escribir cada cosa en emet o hasta pueden ir a chat gpt y decirle me das un listad dito de abreviaciones de emet para utilizar en html y css y les va a Saltar todo el listado pero ya con esto creo que es más que suficiente para haber entendido el funcionamiento casi completo de emet poder trabajar con emet e integrarlo a nuestra vida cotidiana porque créanme que se integra todo el tiempo no hay nada más hermoso que arrancar un archivo html por ejemplo así y que ya

nos salte toda la estructura completa saber que venimos acá y ya ponemos el título y ya venimos acá y arrancamos a crear la estructura Entendés es más que la estructura ya la podemos crear directamente con con un snip que creamos que solamente nos pide la cantidad porque quiero cinco elementos y le doy enter y se crea la estructura y arranco con el enlace o sea es muy muy interesante y muy dinámica la forma que tenemos de trabajar si aplicamos emet Espero que hayan disfrutado esta sección de emet ahora mi consejo es el siguiente vístanse bien

preparense un cafecito así lo toman Conmigo y disfrutan de la siguiente sección porque ahora arranca lo bueno ahora gente se viene flexbox vamos al flexbox emociónes porque se lo merece Así que vamos gente a ver flexbox disfrútenlos lo único que les puedo decir bueno gente les voy a dar la bienvenida oficial al estreno del curso de nada se hací un curso nuevo viste no la realidad es que lo merece porque lo que vamos a ver ahora es justamente Flex o bueno Flexbox y Considero que es importante como ven hay dos cosas que ustedes quizás no

saben tanto de mí y una de esas es que bueno si bien me gusta cortarme el pelo y demás la bainita Esta es porque me gustó un estilo que vi de los pck blinders y dije Bueno por qué no podemos presentar el curso con esto y la otra característica Es que soy bueno a veces un como buen o cosas de como estas Así que bueno nada espero que me conozcan como Tal un además de ser programador por las noches soy Aunque bueno son las 10 de la mañana todavía arranqué el día siendo un a veces

me pinta ser de temprano Bueno otra cosa que les quería decir es que jamás hice una presentación en un curso es decir siempre lo expliqué todos con voz en off y demás Pero como andamos cortos de presupuesto los dos Editores que tenía me dejaron plantados un editor cuesta Más de lo que genera un curso y además no teníamos mucho tiempo se me ocurrió armar a mí una presentación Así que espero que les guste para explicar flexbox porque vamos a hacerlo a la antigua Qué es eso de Editores con voz en off como si lo necesitáramos

no Por qué me dejaron plantado Roman por qué hiciste eso bueno básicamente como no quería armarme una presentación espectacular en powerp porque prefería hacer un video Y explicarles cómo lo Hacía en un video mentira hice esto muy rápido que son imágenes videos y tiré algo rápido para explicarles En qué consiste flexbox para arrancar flexbox Okay es básicamente un modelo de caja algo así como el box model Bueno hay varios Box model tenemos el de las cajas que son en línea de las cajas en bloque lo que vamos a ver ahora ya vimos lo de cajas

en línea y cajas en bloque inline también inline block ahora vamos a ver otro tipo de modelo de caja que es el de Flexbox es decir flexbox es un módulo de css podos a decirle Flex o flexbox eso por las dudas es lo mismo Solo que a mí me gusta decir flexbox pero básicamente es un módulo que agregaron en css en 2009 si no me equivoco no quiero tirar fruta no quiero tirar fruta pero por esa fecha lo agregaron básicamente el objetivo que dijeron es e qué hacemos cuando los contenidos de las cajas o los

tamaños sean dinámicos o no los conozcamos o vayan cambiando Qué pasa en Esos casos Bueno necesitamos cajas con elementos que estén adentro que se adapten a los tamaños es decir si un tamaño es así que se adapte si otro es así que se adapte si tenemos tres elementos que uno se ponga por debajo de otro y que uno se vaya para arriba necesitamos literalmente que las cajas sean flexibles y el contenido también para que sin importar la resolución o los tamaños los contenidos y las páginas web se vayan adaptando bueno Esto es lo Que viene

a ser flexbox y sí es un módulo de css por las dudas les aclaro lo que estamos viendo Ahora son solamente algunos conceptos básicos para que cuando arr arranquemos a escribir código no nos compliquemos tanto por eso digo des preocúpense que esto es simplemente una introducción mínima que estoy haciendo para que cuando escribamos código sea mucho más simple Así que preocúpense que con el código todo esto lo vamos a ver pero primero Quiero que empiecen a entender un par de conceptos y cuando escribimos código dicen Ah eso es todo Bueno una de las cualidades es

esta que estamos viendo ahora que básicamente esto es una caja que está dada como flexbox y adentro tiene items Estos ems son flexibles Eso es todo Okay acá estoy repitiendo el video y es básicamente eso como ven se adapta los tamaños no importa el tamaño que tenga las cajas literalmente se van adaptando al contenido que tienen es Decir si su tamaño es de un tipo y las resoluciones que van a tener o la forma en la que se van a posicionar es una si vamos agrandando la resolución va cambiando bueno Esta es una de las

cosas que podemos hacer con las con las cajas flexibles para eso flexbox usa justamente esto que es principalmente una caja que ahí es donde vamos a crear este contexto así se Esos son los términos no a una caja le damos una propiedad llamada display Flex y esa Propiedad hace que las cajas que están adentro adquieran toda la magia porque la caja se va a comportar prácticamente como un bloque pero los elementos que están adentro van a tener un comportamiento flexible a ellos es a quienes se les van a aplicar las propiedades Porque si nosotros le

damos a una caja display Flex esa caja como tal es como si le diéramos display block De hecho hay otra propiedad que se llama inline Flex que es cuando queremos tener Dos cajas como si fueran inline block pero que los elementos de adentro sean flexibles entonces en vez de darle inline block le damos inline Flex o en vez de darle Flex le damos sin Line Flex pero como tal las cajas contenedoras son prácticamente display block Solo que cuando le decimos Flex Okay el contenido que está dentro pasa a ser flexible entonces no es a la

caja grande a quienes se le van a aplicar estas propiedades sino que es a las cajas que Están adentro pero para afectar estas cajas que están adentro tenemos que darle propiedades a la caja flexible y propiedades a los ems es decir a la caja flexible le podemos decir e los items que están adentro van a ser de una forma van a ser de otra forma van a tener esto y no van a tener esto y a los items de adentro le podemos dar un tamaño los podemos modificar los podemos estirar podemos definir cuánto espacio van

a ocupar etcétera entonces tenemos dos Cosas uno es la caja contenedora y otro esto que son los Flex items entonces la caja contenedora es el flexbox es decir la caja flexible la caja que contiene a los demás items son es el contenedor Esa es la caja flexbox okay Y los elementos que están adentro son esto son los Flex items y acá es cuando pasa la magia a los Flex items les podemos hacer de todo podemos por ejemplo como ahora darlos vuelta ven que antes estaba el Rosa adelante y el azul al final ahora los Intercambiamos

del lugar porque podemos cambiar la dirección podemos hacer que los ítems en vez de estar alineados de izquierda a derecha estén alineados de arriba hacia abajo por ejemplo o también podemos hacer que arranquen de abajo hacia arriba o sea podemos cambiar la dirección o sea si ponemos un elemento aparece primero un elemento y después otro elemento y después otro elemento pero nosotros podemos decir que en vez de que aparezca acá Que aparezca del Otro lado o Que aparezca abajo o Que aparezca arriba eso lo podemos definir podemos Definir la dirección en la que apunta okay

Porque una característica de flexbox es que es unidireccional es decir apunta en una dirección los elementos que vamos poniendo van en esa dirección si vamos poniendo un elemento nosotros definimos la dirección en la que van a estar apuntando los elementos acá por ejemplo el primer elemento se puso acá y el segundo se puso acá y el Otro se puso acá pero en este caso es al revés el primer elemento está abajo y la dirección es hacia arriba va hacia arriba y hacia arriba o también podemos tener este caso en el que tenemos un elemento y

todos los elementos van hacia la derecha hacia la derecha tener esto en el que el primer elemento está acá y vamos hacia la izquierda y hacia la izquierda cada elemento va cambiando su dirección Esa es la principal característica de flexbox que esa es la Diferencia principal con grid que grid es como bidimensional mientras que flexbox es unidimensional y unidireccional unidireccional porque va en una dirección y unidimensional porque tiene solamente una dimensión que es o el eje X o el eje I bidimensional sería que se mueve en el eje x y además en el eje I

que se mueven ambas entonces mientras con Flex podemos decir uno o lo movemos en el eje I que es de arriba hacia abajo o de abajo hacia arriba o lo Movemos en el eje x que es de izquierda derecha o de derecha izquierda tenemos Row justamente que estamos alineando los elementos en fila es decir puede llegar a considerarse de izquierda a derecha Aunque en realidad no es así porque cuando nuestro idioma cambia y hay idiomas que se leen de derecha a izquierda cambia Esto entonces por ejemplo sos de Arabia Saudita no lo vas a ver

de izquierda a derecha sino que lo vas a ver de derecha a izquierda pero Básicamente va en orden de la dirección del texto no en orden de la dirección nosotros podemos definir Cuál va a ser la dirección de nuestra página Pero olvídense de eso en este caso puntual para los que hablamos español Row hace que los elementos vayan de izquierda a derecha ven elemento uno el siguiente va a la derecha elemento dos el siguiente va a la derecha elemento tres el siguiente va a la derecha elemento cuatro después tenemos el rad reverse el Rad reverse

es Okay Vas a ir en vez de ir de izquierda a derecha vas a ir de derecha a izquierda o sea vas a ir en dirección opuesta no es correcto decir de derecha izquierda izquierda derecha sino que vas a ir en dirección contraria ahí es mejor si antes arrancárselo hacia la izquierda y no hacia la derecha si yo pongo un elemento el siguiente va a aparecer acá y el siguiente va a aparecer acá y el siguiente va a aparecer acá Esa es la Particularidad de Row reverse después tenemos column Define que la dirección va a

ser de arriba hacia abajo el primer elemento sería este y si ponemos otro va hacia abajo y si agregamos otro va hacia abajo y si agregamos otro va hacia abajo y sí después tenemos el otro que es column reverse también va en columnas o sea en el eje i pero en vez de ir de arriba hacia abajo va de abajo hacia arriba Sí reloco o sea el primer elemento va a estar abajo de todo y si Agregamos otro va a estar arriba y si agregamos otro se va a poner por encima y si agregamos otro

se va a poner por encima y si agregáramos un elemento cinco va a poner como dijimos más arriba así funciona cada una de las cuatro direcciones lo que ustedes no veían mientras estábamos definiendo esas propiedades era esto que en realidad tenemos dos ejes y no vamos a decirle el eje x y el eje I porque no Porque pueden cambiar de dirección porque el Main axis Por defecto en nuestro caso en español va de izquierda a derecha Ven por ejemplo en Row que fue el primer el caso que vimos este que está acá los elementos van

de izquierda a derecha Entonces el eje principal es decir el Main axis entiende que va de izquierda a derecha cuando el Main axis va de izquierda a derecha en este caso estamos hablando de Row el Cross axis va de arriba hacia abajo porque el Cross axis significa eje cruzado el Main axis Significa eje principal el eje principal es la dirección hacia donde van a apuntar Ya vimos que la dirección puede ser de izquierda a derecha de derecha a izquierda de arriba hacia abajo o de abajo hacia arriba puede apuntar hacia cualquiera de las cuatro direcciones

Ese es el eje principal pero después tenemos el Cross axis que va a ser un eje que va a cruzar al eje principal ya van a ver para qué lo va a cruzar pero básicamente va a cruzar al eje principal así como lo Estamos viendo Entonces si el Main axis está en el eje x el Cross axis como lo tiene que cruzar tiene que estar en el eje y o sea de arriba a abajo y viceversa si el Main axis es de arriba a abajo Como por ejemplo en el caso de colum que los elementos

arrancan arriba y terminan abajo o arrancan abajo y terminan arriba el Cross axis no va a estar apuntando de arriba a abajo como antes que era el eje cruzado no Para cruzarse si si el Main axis apunta de Arriba a abajo y el Cross axis apunta de arriba a abajo no se están cruzando no es un eje cruzado para que sea un eje cruzado siempre tien que estar en forma de cruz O sea ya aparece un paso de tiktok si est es el eje principal Este es el eje cruzado si este es el eje principal

Este es el eje cruzado Esa es la magia el eje cruzado es cruzado porque se cruza perpendicularmente con el eje Main con el Main axis entonces en el caso de Row el Cross axis va de Arriba a abajo y el Main axis de izquierda a derecha o derecha izquierda depende del lenguaje como digo pero ya vamos a ver eso no se preocupen en el caso de rad reverse es el el Cross axis se mantiene sigue cruzándose Pero el Main axis en vez de ir de izquierda a derecha va de derecha a izquierda o sea va

en dirección opuesta y acá por primera vez vamos a ver como ambos ejes cambian de dirección la dirección del Main axis o sea del eje principal en Column es de arriba a abajo Mientras que el Cross axis es de izquierda a derecha en este caso y en el caso del column reverse el Cross axis se mantiene sigue en la misma dirección Pero el Main axis en vez de ser de arriba a abajo ahora es de abajo hacia arriba Eso es todo ahora vamos a ver qué significa el Cross axis Para qué nos sirve un Cross

axis Pero principalmente es para alinear los elementos o para definir sus posiciones Porque si yo por ejemplo le digo quiero Alinear un un elemento en el Cross axis voy a poder hacer que un elemento esteé al principio del Cross axis al final del Cross axis o a la mitad entonces depende de la dirección del Cross axis si nosotros decimos que va a estar al principio del Cross axis lo ponemos acá si decimos que va a estar al final lo ponemos acá y si decimos que va a estar a la mitad lo ponemos acá ahora si

el Cross axis cambia de dirección el principio sería este no este entonces Por eso es importante que entendamos la dirección y hacia dónde apunta otra cosa que podemos hacer con flexbox es esto fíjense qué fácil lo movemos de izquierda a derecha de derecha a izquierda y arriba hacia abajo o sea lo movemos tanto en el eje vertical como en el eje horizontal fíjense qué fácil es Definir la posición de los elementos es superfácil fíjense como lo voy cambiando de todas las posiciones o sea tan simple como con dos líneas de código puedo Posicionar el elemento

puedo entrarlo puedo hacer lo que quiera Por qué Porque dentro de mi caja flexible voy a poder ubicar a los elementos que están adentro donde se me dé la gana y esto es magnífico porque ya no nos tenemos que preocupar por los márgenes por el margin auto nos olvidamos de todo eso hablando de margen margin acá tenemos otro ejemplo cómo ya se eliminan los márgenes En caso de que querramos una división Igual acá usamos una propiedad llamada Gap es muy simple porque solamente con Gap cambiamos las propiedades o sea le damos un Gap y el

Gap va a ser la separación de los elementos O sea si queremos que todos los elementos tengan un margen no les damos margen porque nos volvemos locos le damos Gap y Gap es e cada elemento va a estar separado entre sí okay 10 píxeles 12 píxeles 20 píxeles 30 píxeles o 38 píxeles Entonces eso es lo que hacemos acá Entonces es buenísimo eso y mucho más podemos hacer con Flexbox Así que lo que vamos a ver ahora van a ser las propiedades principales de flexbox vamos a ver un par de propiedades que le tenemos que

dar a la caja padre o sea la caja flexible y otras propiedades que les tenemos que dar a los hijos porque sí para que flexp exista tiene que haber una caja principal que es la que va a tener el display Flex y otras cajas que van a estar adentro de esa caja que van a ser los Flex items entonces a la caja Contenedora le decimos caja flexible o flexbox y a la caja de adentro le decimos items flexibles o Flex item entonces Esas son las dos cosas ahora algunas propiedades hay que dárselas a la caja

padre y otras propiedades hay que dárselas a la a las cajas que son más hijas a a los hijos pero tienen que ser hijos directos eso es importante O sea si tenemos por ejemplo un div y adentro de y ese de le ponemos una caja flexible y adentro ponemos un p ese p va A ser un Flex item pero si adentro del P ponemos un espan o cualquier ot etiqueta ya no es una caja flexible la caja los ítems flexibles son Solamente los que son hijos directos de la caja flexible ahora lo vamos a ver

basta de hablar vamos Ahora sí a dar nuestros primeros pasos en flexbox y para eso vamos a ver la propiedad display Flex y Flex Direction Así que vamos con esa sección Bueno ahora vamos a hacer un ejercicio muy simple que va a ser Agarrar una caja padre y a esa caja padre darle tres hijos Okay y a la caja padre le vamos a dar un display Flex para que se porte como una caja flexible y automáticamente los elementos que estén hijos sean ems flexibles o Flex items yo voy a crear una caja va a ser

un div muy simple y a esta le voy a poner flexbox okay Porque es una caja flexible y acá voy a crear dos divs y cada uno de estos di va a tener la clase Flex item Por qué flexbox se escribe Todo junto pero Flex item se escribe con un guion medio no tengo la más pálida idea si quieren podríamos usar bem y poner flexbox y acá poner Flex Flex item para hacer la metodología Ben pero en este caso no lo vamos a aplicar porque es un ejercicio simple que no requiere de metodología no y

tampoco vamos a ganar experiencia por andar entorpeciendo cada práctica que hagamos con una metodología que aplica para proyectos medianamente grandes no Entonces en este caso no lo vamos a usar lo que sí el body tiene un margin cero y ya le defin una tipografía porque no me gusta que no tenga tipografía y lo primero que vamos a hacer vamos a agarrar la caja flexible no vamos a agarrar los Flex items mejor y darle un Wi de 100% Vamos a darle un he de 100 no un Wi de 100% no de 100 píxeles Perdón un he

de 100 píxeles y le vamos a dar background color red Ah bueno le chupó completamente un huevo Qué lindo Ah Porque es sin la s Flex item y le vamos a dar un margin de 10 píxeles Ahí va para que estén separados 10 píxeles entre sí Además vamos a agarrar al Flex item y vamos a darle Child 2n para que cada dos elementos uno tenga un background color Vamos a darle D 3 cu así cambia un poco Acá hay una diferencia mínima pero pero la hay y este que está acá va a tener a do

dos es más vamos a hac que solamente el primero lo tenga First Child para que entendamos Cuál es el primer elemento y lo vamos a hacer un poquito más claro vamos a poner d56 ahí está ahí ya más o menos entendemos Cuál es más clarito y vamos a poner 9 11 qué icónico que el número de la policía sea un por dos No ya podemos definir Cuál es el primer elemento que es este que está acá igual no sé si los daltónicos lo podrían ver bien Ah no sí los daltónicos sí porque como no tienen

la misma intensidad de color se notaría la diferencia perfecto igual lo voy a Hacer más claro por las dudas 77 así se nota bien la diferencia bueno acá tenemos básicamente tres cajitas Okay una abajo de la otra y vamos a ver lo que pasa cuando agarramos a la caja flexible flexbox y le damos un display Flex automáticamente los elementos se alían Pero eso no es todo van a ver que ahora los elementos vamos a hacerlo un poco más grande van a ver que los elementos se ajustan observen esto Vamos a darle acá seis píxeles o

no vamos a Dejarle 10 pixeles pero acá vamos a poner 150 cada uno así cada uno tiene 150 y acá lo vamos a checar acá pueden observar como los elementos flexibles literalmente son flexibles Porque si nosotros a esto le pusiéramos in Line block O sea si en vez de dar display Flex a esto a estos elementos les pusiéramos display inline block esto medio que sería raro no porque como ven es como que así como están no se van adaptando no son flexibles para eso Tendríamos que darle un Line block tendríamos que darle un min wid

de 100 píxeles pero tampoco funcionaría y acá le podríamos dar un Max wid de 250 píxeles Entonces en este caso no pero claro tieneen un min wid Entonces no funciona y es un lío hacerlo entonces para eso es tan fácil como dar a la caja padre como vimos antes un display Flex Entonces ya está ya las cajas son flexibles automáticamente vemos cómo se pueden estirar lo único que no pueden Hacer es crecer porque hay una propiedad por defecto que tiene los ems flexibles que es no vas a crecer si tu tamaño es de 150 píxeles

te vas a quedar en 150 píxeles pero sí te puedes encoger o sea se pueden encoger como están viendo vamos a hacer un pequeño zoom para que lo observen más como ven se pueden encoger pero no se pueden agrandar O sea la resolución máxima es esta ven ahí ya no se están agrandando pero tampoco se están encogiendo pero si lo encojo se Pueden encoger entonces lo que no pueden hacer es agrandarse sí se pueden encoger más adelante cuando veamos otras propiedades vamos a poder observar cómo lo que vamos a poder hacer con los elementos es

hacer que se agranden que se achiquen vamos a poder definir si decimos que queremos que se achiquen Si queremos que se agranden todo lo que va a pasar con los elementos que están adentro lo podemos definir lo primero que tenemos que aprender a definir es la Dirección hacia dónde quiero que vayan los elementos quiero que el primer elemento esté acá y el segundo este acá y el tercero acá o sea quiero que vayan de izquierda derecha quiero que estén en fila Bueno eso es porque la propiedad Flex Direction es en Row que si actualizamos no

pasa nada pero se acuerdan Cuál era la otra después de Row era Row reverse vamos a poner Row reverse y ahí fíjense cómo cambian de dirección yo voy a agarrar el Last Child Flex item Last Child y le vamos a dar un background color negro para que se note bien la diferencia est le vamos a dar 800 vamos a ponerles números También 1 do 3 que no que no tengan wid que tengan directamente un pad Ahí va padding creo que el padding sea de 75 píxeles no Debería ser para que tenga más o menos el

mismo tamaño así están centrados los elementos les vamos a dar también un color blanco y un font size de 40 píxeles y el padding 60 píxeles lo que Sí ven cuando un elemento tiene padding no se chica ni se agranda O sea si nosotros definimos a los elementos por su padding ya las cajas dejan de ser flexibles esto es interesante así que bueno en vez de darles así el padding mejor vamos a darle he de 60 píxeles Ahí va y un Wi de 50 píxeles como antes ahora sí y le vamos a dar un text

align Center así están centrados los textos y si le sacamos el hate esto solamente tiene la finalidad de que ustedes vean Su funcionamiento le voy a dar 180 Ahí está tiene la única finalidad de que ustedes vean su funcionamiento o sea ven yo esto lo achico y se achica lo agrando y no se agrandan pero la resolución original es esta pero lo puedo seguir achicando bien eso eso es lo que necesitaba ahora como ya vimos si nosotros lo dejamos por defecto el valor va a ser de Row porque tenemos el primero acá el segundo acá

y el tercero acá pero nosotros lo que podemos hacer Ahora en vez de hacer que vayan en esta dirección podemos hacer que estén en Row reverse como vimos recién lo que está pasando acá es que está cambiando la dirección o sea si vamos a Paint el Main axis ahora va hacia allá porque el primer elemento empieza acá y el último va hacia allá mientras que si usamos la otra forma que es Row ven Lo que sucede es al revés Entonces en este caso cuando usamos Row o el valor que está por defecto los elementos van

en esta Dirección es interesante esto sería el Main axis el eje principal ven lo que estamos haciendo estamos estamos definiendo la dirección del Main axis Pero eso no es todo vamos a agrandar un poquito más porque nos faltan otras dos si yo en vez de darle Row le doy colum ahora los elementos se van a posicionar de arriba hacia abajo y van a mantener su wiet ojo esto es porque nosotros le dimos un wiet pero las cajas van a ocupar el total del flexbox si yo le Saco el wid las cajas van a ocupar todo

esto porque las cajas tienen un wid definido si yo no se lo doy y acá por ejemplo lo dejo en Row ven acá parece que no están ocupando el total pero eso es porque están ocupando siempre lo alto o sea básicamente en este caso si se fijan va a ocupar el Cross axis al completo vienen hechos para eso Este es el tamaño a lo alto se ocupa completamente y en este caso a lo alto que hay y el eje cruzado que es el que Va a lo alto entonces a lo alto el tamaño que ocupa

es tamaño completo porque los items vienen configurados por defecto para que si no tienen un tamaño ocupen todo el Cross axis si en este caso así va el eje principal El Cross axis va cruzado O sea que va así O sea que van a ocupar todo el tamaño que tienen a lo alto Qué significa eso que si cambiamos la dirección y le ponemos column estarían ocupando todo el Cross axis porque ahora en este caso el Main Axis que es este que está acá está yendo hacia abajo el Main axis arranca acá Okay y termina acá

y como tenemos un eje cruzado el eje cruzado este sería el eje cruzado y el eje cruzado en este caso va de izquierda a derecha qué significa eso que si nosotros no le definimos un wid a estos elementos van a ocupar todo el eje cruzado es complicado de entender al principio pero básicamente lo que hacemos Es ocupar todo el tamaño del del eje cruzado O sea a lo ancho se ocupa Todo en este caso entonces si yo le doy un wid eso ya no pasaría por eso le voy a mantener el wid wid de 180

píxeles cuando nosotros definimos el wid del elemento ahora tenemos varias posibilidades porque el Cross axis sigue siendo todo esto O sea sigue siendo largo pero ahora podemos hacer que los elementos se centren pero no nos vamos a enfocar en eso ahora eso lo vamos a ver después ahora vamos a verlo más técnicamente cuando usamos Row los Elementos van en fila siguiendo la dirección del texto cuando nosotros ponemos Row reverse los elementos están en fila pero en contra de la dirección del texto cuando nosotros ponemos column los elementos van de arriba hacia abajo y cuando ponemos

column reverse los elementos van de abajo hacia arriba ahora cómo es esto de la dirección del texto simple si nosotros ponemos Row para nosotros los lenguajes en español La dirección es de izquierda a derecha Pero hay una propiedad llamada Direction que nos permite acá tenemos dos valores ven ltr o rtl ltr significa left to right o de de izquierda a derecha que si lo ponemos No pasa nada porque es el valor por defecto para los lenguajes en español pero si nosotros ponemos right to left para el lenguaje Como por ejemplo el árabe fíjense que ahora

está cambiando Por qué Porque Row Repito no significa de izquierda a derecha significa vas a ir en fila a favor de la Dirección del texto Si el texto dice que vas a estar de derecha a izquierda vos vas a ir de derecha a izquierda si el Es más si nosotros venimos acá escribimos algo fíjense qué interesante esto 1 2 3 y fíjense que aparece un dos 3 yo puse 1 2 3 y acá dice 3 2 1 bueno porque en árabe no leen como nosotros de de izquierda a derecha leen al revés leen de izquierda

a derecha perdón de derecha a izquierda nosotros leemos de izquierda a derecha y ellos leen de derecha a Izquierda Entonces es normal que si nosotros escribimos así ellos lo lean así porque el texto va al revés Entonces es importante que entiendan esto de que nosotros lo vamos a ver left to right okay Pero los demás lengu left to right Pero los demás lenguajes no lo van a ver así entonces esto Bueno yo lo voy a cambiar lo voy a dejar así pero no nos interesa Por ahora pero está bueno porque si ustedes quieren hacer páginas

web gigantescas para empresas Internacionales y demás pueden configurar esto okay se pueden encargar de establecer que la dirección va a ser left to right si ustedes saben que su página no va a funcionar si la dirección es así Tienen que darle a la caja flexible esto y si quieren que se lea correctamente nada los Flex items le dan Direction right to left entonces para leer van a poder leer Así ven yo pongo 1 2 3 para leer el el texto lo van a poder leer bien de izquierda a derecha pero Las cajas no van a

cambiar de posición Aún estando en otro lenguaje Entonces es es una cosa piola que igual ni se preocupen por eso porque la verdad es que no creo que escriban páginas para árabes ustedes por ahora por ahora pero está bueno que lo tengan en cuenta investiguen más acerca de esto si quieren hacer páginas web para múltiples idiomas pueden expandir su conocimiento por ese lado y además Está bueno porque están aprendieron a hablar técnicamente No es que r va izquierda a derecha no Row va a favor de la dirección del texto Row reverse va en fila pero

en contra de la dirección del texto column va de arriba a abajo si acá le cambiamos la dirección Direction Rest to light no va a cambiar Eso lo único que cambia es la posición ven pero no va a cambiar más nada solamente cambia su su alineación en el eje en el Cross axis el eje cruzado pero no es que me va a cambiar los items de lugar no así que tampoco se Tienen que preocupar por eso por eso colum sí podemos decir que es de arriba a abajo Row no Row decimos que es en fila

en la dirección del texto Row reverse es en fila en contra la dirección del texto pero column sí podemos decir que es de arriba a abajo y column reverse e de abajo a arriba Eso es todo así que bueno ahora bien entendiendo esto Estaría bueno que aprendamos otras dos propiedades que son muy cortitas Así que la vamos a ver muy Simple Flex wrap que es para permitir que los elementos puedan ir hacia abajo porque si yo acá le doy le saco el Flex Direction como ven no importa lo que les pase los elementos podemos agrandar

y los malparidos Nunca van a ir para abajo bueno Flex r nos permite eso nos permite definir cuando un elemento se puede ir hacia abajo y después tenemos Flex Flow que es otra propidad que combina a Flex Direction y Flex wrap Así que no voy a hablar más vamos con esta mini sección Que está bueno porque me gusta seccionar la como Flex es entero no podemos meter todo flexbox en tres clases de 40 minutos vamos a primero explicar las propiedades de algunas propiedades básicas de los padres después propiedades de los hijos y después vamos a

hacer un par de cositas más como algún patrón de diseño por ejemplo con flexbox y después vamos a hacer una página web o algún proyecto con flexbox nada vamos de poquito así que vamos ahora con Flex Wrap y Flex Flow Bueno ahora lo que vamos a ver van a ser estas dos propiedades Flex wrap y Flex Flow que es una abreviación de Flex Direction y Flex wrap básicamente eh Flex wrap nos permite controlar el comportamiento de los Flex items una vez que ya el espacio que tenemos en en contenedor es insuficiente para abarcar a todos

esos elementos es decir qué pasa cuando por ejemplo cada elemento tiene 100 píxeles pero el contenedor mide Solamente 200 o sea cada elemento va a tener que medir 66 píxeles porque si no no van a entrar o no Bueno eso es lo que Define Flex r porque nos da otra solución es decir en en vez de que cada elemento se achique pueden ponerse abajo por qué no esto es acá se le da la caja contenedora no se le da a los hijos se le da al flexbox vamos Che los hijos que están adentro los Flex

items van a poder cambiar de línea van a poder crear una nueva línea y vos le decí Che La verdad Que sí lo van a poder hacer o no lo van a poder hacer esta es la propiedad por defecto no wraap pero después vamos a poder venir acá y decirle wrap y ahí ven que se se ponen wraap Por qué Porque le dijimos que el tamaño va a ser de 180 píxeles Entonces no hay espacio para que entren Así que no van a entrar pero le podemos decir que por ejemplo sea de 100 píxeles Ahí

está o de 100 150 Entonces esto es lo que pasa Nosotros podemos encoger Esto entonces Esto es lo que nos Permite hacer esto es muy parecido a cómo se comportaba display in Line block se acuerdan darle Flex wrap wraap le está diciendo Ey no hace falta que los elementos se se encojan Es decir para qué vamos a permitir que un elemento se encoja cuando podemos tirarlo para abajo entonces eso es lo que hace esta propiedad vamos a crear más elementos vamos a crear hasta cinco para que podamos verlo y a cada elemento le vamos a

dar 100 píxeles para que se note bien Ah Entonces ven agrandamos y los elementos se van poniendo hacia abajo Esta es un poco La magia de eh Flex wrap que nos permiten hacer estas cosas pero esto es como que automáticamente pierde lo flexible no porque ahora queda feo si se fijan todos los elementos estn alineados de una forma extraña Bueno vamos de a poquito porque los recontra remil cacheteo dije que vayan de a poquito estamos en la segunda sección de Flex no sé qué pretenden hacer Ya una barra de navegación completa relájense muchachos no van

a hacer todo de entrada estamos viendo recién la tercera propiedad o sea vimos display Flex Direction que en este caso es Row y la tercera que es Flex wrap o sea posta relájense un poco también en vez de Row no se olviden que puede ser column y en caso de column va a ser lo mismo si nosotros definimos que el flexbox va a tener por ejemplo un hate de 400 píxeles fíjense que está haciendo un wrap vamos A tener de 300 píxeles está haciendo un wrap vamos a hacer que si el he es automático vamos

a sacar esto acá el elemento y vamos a empezar a en cogerlo para que entiendan lo que les digo vamos a decirle que va a tener un he de 100 View por he Ahí va y ahí fíjense cómo se va ir adaptando ven se va adaptando en vez de adaptarse de la otra forma se adapta así porque esto es lo que hace se va adaptando como la direcciónes en columna Esto es así arranca para acá y Que cree otra línea significa que va a seguir acá Entonces eso es lo que significa te lo va alineando

de esta forma y fíjense qué interesante es la forma en la que lo alinea ahora crea dos columnas y los deja así Ahora crea tres columnas y los deja así Ahora crea cuatro columnas y los deja así es Así es como funciona colum es flexbox es increíble es más con flexbox podemos hacer casi todo lo que podemos hacer con grid solo que grid tiene otras Particularidades que nos permiten hacer otras cosas pero lo más importante más que grid incluso es flexbox flexbox es como la base más importante que tienen entender pueden aprender flexbox y no

aprender grid y está bien okay pero no pueden aprender grid y no aprender flexbox a eso voy es como flexbox sí es requisito grid no grid es como la parte avanzada la parte top la parte Wow llegué a grid ya van ir viendo cuando vayamos avanzando ha hay una pregunta Bastante interesante que les voy a responder más adelante que es Cuándo usamos flexbox cuá usamos grid pero hasta que no lo entendamos no lo vamos a poder responder y fíjense lo que yo les decía en caso de colum reverse por ejemplo lo que pasa es reloco

porque si tenemos column reverse fíjense que los elementos se posicionan de esta forma o sea es muy raro es muy raro y lo mismo que si por ejemplo tenemos rad reverse Row reverse fíjense Cómo funcionan los Items miren miren esto ven se posicionan abajo es es magnífico Bueno vamos a a dejarlo Row Y ahora yo voy a resolverles un problema bastante bonito y bastante lindo que es el de abreviar propiedades Sí porque hay dos abreviaciones principales en Flex la primera es Flex Flow que nos permite eh resumir estas dos propiedades y la otra es Flex

Flex solo Flex que nos permite abreviar tres propiedades que son Flex basis Flex shrink y Flex grow que lo Vamos a ver más adelante para arrancar vamos a ver una de esas dos que es Flex Flow Flex Flow justamente habla del flujo fíjense que el nombre de la propiedad es itiva Flex Flow habla del flujo flexible Flex Flow es una propiedad que nos permite Definir la dirección y el wrap entonces ponemos Flex Flow y si le podemos dar por ejemplo Row Y wrap entonces es exactamente lo mismo que no darle esto okay es exactamente lo

mismo el valor Por defecto de Flex Flow es este sea es el valor por defecto de Flex Direction que es Row y el valor por defecto de Flex wrap que es no WAP Entonces es Row que está acá no ro está acá ent si no definimos esto es exactamente lo mismo ven definir esto o no definir ninguna de las dos da igual ven porque son los valores por defecto Flex Flow viene con el valor por defecto de Row y no wraap si cambiamos cualquiera de las dos ya está suficiente pu esta propiedad Sobreescribe estas dos

Es raro usar Flex Flow no he visto mucho que la están usando Pero últimamente estoy viendo que cada vez se usa más al principio era como que había un rechazo viste a la gente le gustaba tener el Flex Direction y el Flex wrap sobre todo porque lo que solemos modificar no es el wrap es el Flex Direction Entonces es medio raro usar Flow porque nosotros lo que solemos hacer como dije antes es modificar solamente la dirección y si tenemos Flex Flow definida y tenemos que modificar Flex Flow y va a ser medio raro porque vamos

a tener que poner de vuelta esto vamos a tener que sobreescribir esta propiedad y vamos a consumir más recursos entonces para evitar eso usamos dos propiedades por separado pero en Casos normales podemos usarla para abreviar Entonces lo vamos a separar y en este caso tenemos Row no WAP entonces decimos Che va a ser column y además sí va a ser un wraap Entonces si ahora los Elementos se desbordan hacer un wrap o podemos decir rw Row WAP Entonces los elementos sí van a ser un WAP Entonces eso lo podemos definir con Flex Flow y después

Tenemos uno raro que no les expliqué que también en Flex wraap tenemos una propiedad extra que es wrap reverse que es esta que está acá es lo mismo Solo que el wrap va a estar en una dirección opuesta fíjense como los elementos es decir en vez de ir hacia abajo van hacia arriba es loco porque si Si le ponemos rap normal o sea lógicamente tengo el 1 2 3 4 y el cco abajo acá debería decir se yo tengo 1 2 3 4 5 6 7 pero con el rap rever es al revés es 1

2 3 cu y el 5 el 6 y el Si siguen arriba lo mismo que con el colum si le damos colum acá se empieza a comportar todo le damos en column reverse column reverse acá ya se va todo al miren miren esto 1 2 3 4 6 7 es como que ya es la serpiente o lo que va a decir no cualquier cosa pero bueno Nada Esto está bueno Porque les dan todas las propiedades ya no se pueden quejar todas las propiedades están incluidas así que bueno jueguen un poco rap ahora vamos a ver

otras propiedades que seguramente me están diciendo dalto Yo quiero alinear los elementos es decir Fíjate que los elementos me están dejando este espacio acá yo quiero hacer que los elementos ocupen este espacio que lo que hagan algo porque si no fíate si yo a flexbox le doy un no sé padding De 20 píxeles para que se separe de todos lados 20 píxeles Vamos a darle a todos los div y al Body un Box icing Border Box así no tenemos problema con el scroll y le voy a dar un Border dos píxeles solid negro fíjense okay

dije que le iba a dar no le debería dar un margin no un padding margin Ah va y acá le vamos a sacar el he porque no nos sirve el he fíjense que este espacio de acá como dije no me lo está ocupando no me lo ocupa el espacio y no está bueno Porque siempre va a dejarnos este espacio que está acá qu feo es como que no no no termina de aprovecharse Y la verdad tranquilos que no se deja así no porque para eso tenemos que trabajar con tres propiedades primero es Flex grow que

nos permite definir cuánto puede crecer la caja la otra que es Flex basis que nos permite establecer el tamaño base de la caja para para entender cuál cuánd se tiene que recortar Cuál es lo hasta cuál Cuánto es hasta lo máximo que Se puede recortar y la otra que es este espacio si bien es una porquería todavía no lo vamos a terminar de ver para eso tenemos que utilizar varias propiedades Pero lo que sí podemos hacer ahora antes de encargarnos de hacer crecer las cajas para que ocupen este espacio nos podemos encargar de otra cosa

que es el la alineación Porque si estas cajas las que igual la necesitan hacer porque tienen que aprender para tienen que entender cómo alinear un elemento hacia Arriba hacia abajo hacia los costados ahora van a ver sobre alineación alineación en el eje principal y alineación en el Cross axis es importante así que bueno vamos a ver sobre alineación porque como dije es algo importante e igual lo necesitan saber una de las cosas más importante de todo flexbox la alineación de hecho así que bueno vamos a ver cómo alinear tanto en el eje vertical como en

el eje horizontal Bueno ahora vamos a ver todo Sobre alineación bueno no no todo casi todo sobre alineación digo casi todo porque nos falta una que vamos a ver después cuando veamos propiedades a los Flex items no sé si se dieron cuenta pero lo que estamos viendo Ahora son todas propiedades que van directamente a la caja contenedora o sea la caja padre no vimos ninguna propiedad que se aplique a los hijos y eso es porque lo que estamos viendo Ahora son propiedades que se aplican a la caja flexible no a Los items flexibles que los

items flexibles como ya vimos son los hijos directos de las caja flexibles No si estamos aplicando propiedades a la caja flexible Esto es lo que teníamos antes es lo mismo que teníamos Okay todo igual mismo código de la clase anterior la primer propiedad que vamos a ver yo necesito sacar algunos elementos porque si no no me va a estar funcionando vamos a dejar solamente tres Ahí está y lo que tenemos que hacer ahora es utilizar una Propiedad que se va a dar a flexbox llamada justify content justify content es una propiedad que habla del eje

principal es decir lo que vamos a hacer es alinear los ems a lo largo del eje principal si el eje principal es de izquierda a derecha vamos a estar alineando los ems de izquierda a derecha si el eje principal va de arriba a abajo o sea en column vamos a alinear Los ejes los items en ese eje esto es en el eje principal no es de horizontal vertical En en el eje I en el eje x No no es fijo el justify content puede cambiar porque si la alineación cambia todo cambia entonces para arrancar justify

content alinea los items en el eje principal el valor por defecto es Start antes se podía poner Flex Start pero ahora ya no se usa el Flex con decirle Start es suficiente antes era obligatorio que digamos Flex pero ahora ya se entiende que es Start y podemos darle Start y así es como funciona por defecto Start Significa que va a estar en dirección del texto es decir No es que va a estar de izquierda a derecha sino que va a estar en dirección del texto si la dirección fuera diferente como vimos antes va a estar

al final en este caso está al principio entonces primer elemento segundo tercero después tenemos otra que es end que esto es al final O sea al final del eje Entonces tenemos una si este fuera todo el eje esto es el principio y esto es el final entonces lo Que estamos haciendo es alinearlos al final y también tenemos la otra que es Center que lo que hace es nos permite alinear items al medio pero lo que hacemos acá es mantener siempre las propiedades o sea los elementos van a estar siempre juntitos con la misma separación entre

ellos lo único que hacemos Es agarrar estos tres elementos y moverlos no en el eje nada más Pero tenemos otras tres más tenemos space between que acá ya cambia ojo acá ya Cambia lo que se hace acá básicamente es poner al primer elemento al principio del eje el último elemento al final del eje y los que están en el medio van a distribuir su espacio para estar a la misma distancia eso es todo o sea te pone el primero acá el otro acá acá y los del medio te los va poniendo acá lo que significa

que si hubiera más elementos ven lo que van a cambiar son los elementos del medio nada más porque los otros elementos te los pone así tal Cual vamos a checar un poquito esto vamos a agregar más elementos Ahí va fíjense que los únicos elementos que cambia son los del medio por qué Porque siempre el primer elemento y el último van a estar posicionados al principio y al final solamente va a cambiar la distribución del medio y acá ya tenemos una estética un poquito más linda creo yo no como tu hermana perdón a veces me me

paso pero hay que tu hermana Está link eso es lo primero que hace después Tenemos otra que es space around que esto lo que hace es hacer que cada elemento tenga una separación igual o sea va a tener básicamente un margen a un costado que va a ser el mismo que va a tener al otro costado eso para todos los elementos un margen a un costado que va a ser el mismo que va a tener para el otro costado Y este tiene un margen al costado que va a ser el mismo que tiene para el

otro costado Esto está bueno Okay pero después tenemos otra propiedad Que nos permite distribuir todo equitativamente esto lo que hace es como les dije agarra el elemento y hace que tenga un básicamente una especie de margen del mismo tamaño pero acá No hay un colapso de márgenes porque los márgenes se superponen entonces a veces Si queremos que haya la misma distancia la distancia que hay acá no es la misma que la que hay acá ven fíjense que es del doble Esta no es la misma que hay acá es la misma que de acá y la

misma Que de acá pero no es la misma que de acá entonces para hacer que todos tengan la misma distancia entre los bordes y entre los elementos entre sí se usa space evenly que esta es una propiedad que dice Okay Vas a tener el mismo espacio acá que va vas a tener acá qué vas a tener acá qué vas a tener acá es el mismo espacio Pero además le estamos agregando el espacio de los márgenes no no se olviden que tenemos un margen de 10 píxeles que si queremos que sea Perfecto se lo tenemos que

sacar y ahora sí es exactamente el mismo espacio acá que acá que acá que acá exactamente el mismo entonces así es como funciona esto Start que te los pone al principio tenemos end que te los pone al final tenemos Center que te los pone al medio tenemos space between que te pone el el uno al principio otro al final y los Además te lo van poniendo en el medio a la misma distancia entre sí space around que básicamente hace que los elementos Estén separados y tengan unos márgenes iguales y space everly que te deja todos

los elementos a la misma distancia entre sí y entre los bordes Estas son las formas de alinear en el eje principal y esto es del eje principal es importante porque yo puedo venir ahora y hacer que en vez de ser Row sea colum por ejemplo y vamos a serc que la caja tenga un height de 600 píxeles por ejemplo vamos a que tenga menos para que entre 500 píxeles Ahí está no le vamos a dar un Wi A los elementos ahí está Ahí va fíjense que acá funciona igual estamos alineándolos en el eje principal porque

ahora el eje principal no es de izquierda a derecha es de arriba a abajo entonces si yo no toco nada queda en Start que es el valor por defecto Start también los podemos alinear con end también lo podemos centrar con Center también podemos usar space between el principio arriba de todo el último abajo de todo y los demás si vamos agregando Más elementos ven van a estar todos en el medio se van a distribuir el espacio en el medio pero el primer elemento y el último van a estar siempre al principio y al final V

ven de las cajas después tenemos space around que ya lo vimos es que el elemento ocupe este espacio Ven y así van ocupando des espacio en espacio pero no tienen la misma distancia del elemento a los primeros bordes que del elemento entre los mismos elementos entre Sí para eso usamos space everly y Ahí están todos a la misma distancia Incluyendo los bordes esta distancia la misma que esta que la misma que esta que la misma que esta y así es como estamos trabajando con la alineación lógicamente si le damos en column reverse Por ejemplo si

acá le ponemos end el n sería esto que está acá y si le damos en Start el Start seguiría siendo esto el reverse no cambia la dirección de alineamiento Okay lo que cambia es el orden de los ems si nosotros le damos en colum ven se Mantiene igual solamente cambia el orden de los ems no más bien el comienzo y el final de un de la de la forma en la que tenemos que posicionar los elementos No eso es importante que lo sepan Pues si cambiamos Esto no es que me cambie la alineación lo mismo

que yo acá tengo Row por ejemplo tuviera Row que es lo principal y acá por ejemplo le doy Row y acá le doy Row reverse no me va a cambiar o sea no es como que el Start va a estar al final el Start va a ser el End y el No eso se cambiaría si tuviéramos el Direction right to left por ejemplo Y ahí sí cambia porque ahí estamos cambiando la dirección de escritura entonces ahí Eso sí le afecta pero si no es exactamente lo mismo vamos a dejarlo con su wid de 150 píxeles

Ahí está Y esto no tenía un hate predefinido y y ahí estaban perfecto eran de 120 me gustaba más cuando eran de 100 de 100 de 100 eran más lindos Bueno ya aprendimos a alinear en este eje Okay pero esperen Esperen hay más ejes sobre los que alinear es decir el eje principal no es el único sobre el que podemos alinear si yo a esto sí le doy un hate por ejemplo de 500 píxeles 360 yo tengo esto acá si yo a los ems además de darle un Wi también le doy un he de no

sé 60 píxeles por ejemplo o en 69 como lo que le hago a tu herman cuenta alto Por qué te la vivis tanto Ahí está he de 50 píxeles Nosotros acabamos de aprender a alinear los elementos al principio al centro al Final Okay los diferentes tipos de Space etcétera Pero ahora la pregunta es dalti como joraca podemos alinear los elementos en el eje cruzado porque sí si acá le ponemos column Okay column esto cambia así si ya está podemos de vuelta ponernos a alinear los elementos en el eje principal pero yo quiero alinearlos de las

dos formas quiero alinearlos en el eje principal y en el eje cruzado en ambos Cómo podemos hacer para alinear los elementos en el otro eje bueno para Eso usamos otra propiedad que es align items que align items genera una alineación de los items en el eje cruzado vamos a poner align items necesitamos para esto que haya más Vamos a darle más líneas Ahí está pero la propiedad de este no es Start por defecto ojo no no no no no la propiedad de esta es stretch stretch significa que los items se estiran para llenar el contenedor

si yo no le doy un hate ven stretch eso es lo que hace Perdón no le Doy un hate a los hijos ahí va Esto es lo que hace estamos diciéndole Ey estir para llenar al Cross axis O sea a ese eje lo vas a llenar completo pero nosotros le podemos decir Start y ahora solamente van a estar ocupando el contenido que tienen adentro si el contenido es de 50 píxeles ocupan 50 si el contenido es de 40 ocupan 40 entonces si nosotros le damos un hate a esto okay parece que stretch y Start son

lo mismo pero no porque si le sacáramos el tamaño Y no le definamos un tamaño stretch que es el valor por defecto lo estira para que se ajuste mientras que Start no Start Deja que el contenido sea el original y lo posicione al principio después tenemos end para que los posicione al final tenemos Center para que me los posicione en el centro lógicamente y después tenemos el último que es bassline que es este que está acá que los ems en este caso se alinean según la línea base del texto acá no se Nota mucho la

diferencia pero vamos a ver algo si yo acá por ejemplo no vamos a hacer un ejemplo al primer Flex item Vamos a darle un hate de 50 píxeles por ejemplo o de 70 píxeles font size de 50 píxeles si se fijan acaba de pasar algo okay Si font size de 60 píxeles Ahí está y el último va a tener un font size de 80 píxeles Ahí va fíjense cómo se desborda todo y medio que hay algo extraño que pasa ahí bueno Esto es porque con base Line okay si le damos en Start fíjense que los

elementos siempre van a estar al principio de todo mientras que con baseline lo que se intenta hacer es hacer una alineación de texto entonces todo más o menos se pone a la misma altura para que el texto esté relativamente centrado Entonces Okay en este caso lo pondría en Start arriba de todo entonces esa es la diferencia principal entre Start y b porque muchas veces a veces no se llega a ilustrar no la llegan a entender no llegan a Comprender es muy simple uno se alinean mirando la dirección del texto que es baseline y otro lo

que alinea es te los pone al principio no importa el texto no importa nada te lo pone al principio de todo esa es la principal diferencia pero está bueno que sepan esto porque si ustedes por ejemplo están en un contenedor Flex y se ponen a escribir un contenido y el contenido no entra es porque por defecto están usando stretch no Entonces siempre el contenido se va a Estirar si ustedes no definen el alto del hate por ejemplo esto no va a tener un alto si ustedes aum el tamaño de un elemento de un ítem Por

ejemplo si acá le dan hate 100 píxeles van a ver que los demás también van a aumentar Entonces es una eso porque si ustedes solamente quieren que aumenten el tamaño de uno qué hacen Bueno le sacan stretch y le ponen por ejemplo Start entonces ahí si se fijan el primer elemento es el que crece pero a los Demás no les afecta porque como dije antes con stretch que es el valor por defecto los demás elementos van a crecer siempre y a veces queda feo que los elementos crezcan y aunque vos no quieras quedan feo porque

si ustedes por ejemplo tienen un borde y cada elemento no sé tiene por ejemplo un bord dos Pixel solid negro no y no tienen background color no tienen Esto va a quedar raro Vamos a darle color de texto negro queda raro porque ustedes Solamente quieren que un elemento se estire porque acá tienen toda una caja muy linda no en vez de stretch le damos Start por ejemplo o le damos baseline y ahí están alineados entre comillas Entonces ya no se estarían preocupando por cuánto crezca un elemento sino que se van a preocupar por cómo se

alinean No si al principio si al final eso lo chequean después pero bueno nada la verdad que hay de hecho con flexbox se pueden hacer este tipo de cosas fíjense Imagínense tener un juego donde van pasando de diferentes niveles bueno Porque pueden hacer que este sea el nivel uno este el nivel dos y se va haciendo un caminito hasta llegar hasta el final Bueno nada a lo que voy es que es bastante copadas las cosas que se pueden hacer con Flex la cantidad de posibilidades que nos permiten yo ahora voy a le voy a sacar

el stretch pero le voy a sacar el alto de este contenedor y voy a voy a retroceder mucho su alto Ahí Está ahora sí Y ahora si ustedes quieren alinear los elementos de la misma forma vamos a hacer que ya se salgan como que ya no tengan más tamaño o menos vamos a dejarlo igual esto porque si no meo que se va a volver Un lío si ustedes se preguntarán Che pero ahora me Gar qué ya solamente los puedo poner al principio O solamente los puedo poner al final pero yo quiero que se distribuyan en

el medio Cómo puedo hacer Bueno tranquilos para eso se utiliza la propiedad align Content Okay que en vez de justify content El justify es para el eje principal El al es para el eje cruzado entonces podemos usar la misma propiedad que antes podemos hacer Start Y fíjense que ahora se ponen todos al principio ya nos omitimos este lío que teníamos antes de de que estaban como separados No porque si se fijan esto era como que estaba cuando no lo cuando no le damos la propiedad es como que esto está dividido en dos columnas no tenemos

esta Columna y esta y lo que nos permite Start y Center y end fíjense que era es como centrarlo en alguna de estas líneas esto es acá puede estar acá puede estar acá o puede estar acá las líneas de abajo lo mismo la línea de abajo puede estar acá puede estar acá o puede estar acá pero en cambio directamente Vamos a darle Start directamente con esta propiedad podemos hacer que vengan al principio acá podemos mezclarlo con Center por ejemplo pero ya no Funcionaría porque es una propiedad que medo que se sobreescribe si la ponemos acá

abajo tampoco afecta Entonces ya sacaríamos aing items porque aling items es cuando solamente tenemos una línea si tuviéramos esto ahí usamos al in items Por qué Porque nos lo centra de esta forma fíjense Start and Center baseline o También tenemos el stretch pero cuando tenemos múltiples líneas como era el caso de acá acá es cuando se tiene que usar el al content entonces para una Línea o muchas líneas en el eje principal justify content para una línea en el eje cruzado align items y para muchas líneas en el eje cruzado align content Entonces ahora sí

le podemos dar startar space around space evenly le podemos dar space between si tuviéramos una tercera línea acá si se nota Ven vamos a agregar más para que se noten ahí funciona bien space between space around Space sevenly eh le podemos dar Start le podemos dar Center le podemos Dar end una técnica muy usada para centrar un elemento con flexbox fíjense qué fácil que es una técnica muy común que si nosotros por ejemplo tenemos solamente un elemento uno solo que sería Este es un solo elemento tenemos dos formas una forma es venir acá y darle

Center acá y Center acá y ya acabamos de centrar un elemento lo centramos en el eje horizontal acá en vez de darle a link content también le podemos dar a link items que como ya saben para una Sola línea se recomienda link items las líneas son esto es cuando en vez de tener una sola línea de elemento tenemos dos líneas de elementos o en vez de tener una sola columna de elementos tenemos dos columnas de elementos o más entonces para más de una fila o más de una columna es Eh Al in content pero para

menos de una como por ejemplo un solo elemento aling items es correcto entonces acá por ejemplo podemos hacer esto o podemos hacer algo mejor que es Esto nos olvidamos lo dejamos ahí pero agarramos el Flex item y le damos por ejemplo un he de no sé 100 píxeles ponel eh pero acá viene la magia le damos margin auto y se centra es más podemos sacarle esto también y se sigue centrando y le sacamos el wiit y también se sigue centrando esta para mí es de las mejores formas de centrar un elemento es más hay casos

en los que solamente utilizamos flexbox para centrar elementos literalmente es una Técnica muy copada o sea agarramos el elemento que queremos centrar lo ponemos adentro de otro elemento a ese elemento padre Le damos display Flex sacamos todo lo otro no nos importa nada solo le damos margin auto y se centra es una técnica muy común y muy usada No no es chiste muy usada para centrar elementos Así que si quieren centrar elementos ahí tienen una forma copada de centrar elementos porque usar el position absolute y el margin auto y top right Top left es medio

Un lío pero esta forma es copada pueden usar eso o en vez de darle margin auto pueden hacer lo que ya les dije yo no que es agarrar y darle align items Center y justify content Center y ya está tea resuelto lo que les digo Siempre si no entendieron del todo como funciona a olvidarse y a mamarse una No mentira mentira estoy gracioso y no sé qué me pasa y como dije desde el principio del curso desde el principio de flexbox te hecho un Ahora sí Vamos con la siguiente sección que posiblemente no dure ni

ni 5 minutos la próxima sección porque estoy hablando del ordenamiento Sí si tenemos más de un elemento Okay acá por ejemplo Tenemos muchos justify content le vamos a dar en space evenly y el he del flexbox lo vamos a dejar en 100 Ahora sí muchachos podemos visualizar lo que yo quería visualizar un background blanco Body le vamos a dar ccc para ad alto estás sacando minutos de otro de otra sección Que ya de por sí va a durar poco sí sí Posiblemente sea la sección que menos dure lo que podemos hacer con orden es cambiar

el orden de los elementos así que bueno vamos a verlo porque es solamente una propiedad y un valor y ya terminan toda la sección vamos a verla porque se va a ser muy cortita no quiero explicar más nada por ahora vamos Bueno ahora lo que vamos a ver va a ser ordenamiento con flexbox es decir vamos a poder Modificar el orden en el Que se representan visualmente los elementos en pantalla y digo el orden de representación visual porque no cambia su posicionamiento en el dom O sea no va a haber un cambio Genuino Como por

ejemplo si lo hiciéramos con javascript una cosa que podemos hacer con javascript es agarrar al elemento y cambiarlo de lugar entonces literalmente cambia el orden pero con esta propiedad lo que hacemos Es solamente cambiar su orden visual porque realmente en el don Como tal se mantiene cada elemento tiene un orden de visualización o sea el orden en el que se van a ver basado en dos factores el primero es cómo están en el código html en este caso por ejemplo tenemos el un el 2 el 3 y el cuatro y el segundo es su propiedad

order okay Así que esa es la propiedad que vamos a estar modificando por defecto todos los elementos vienen con la propiedad de order cero de tal forma que es como un Z Index viste que normalmente si no lo Definimos en este caso se queda en cero Y a medida que vamos definiéndolo vamos modificando su orden pero yo por ejemplo Acá tengo el First Child First Child tiene order cero por defecto entonces para modificar este comportamiento por defecto si le decimos que el order va a ser uno qué va a estar pasando y el order va

a ser que se va a poner al final porque estamos definiendo su orden si le damos dos si le damos tres si le damos cuatro no importa Porque lo que Estamos diciendo es todos los demás elementos van a tener un order cero y vos como sos el primero vas a tener un order uno entonces el problema de esto que cuando le damos order Tenemos que tener definido bien los elementos que vamos a modificar su orden es decir en este caso por ejemplo hay cuatro vamos a sacar el cuarto Okay y vamos a hacer que solamente

haya tres 1 2 3 para eso tenemos que también Modificar el order de Child por ejemplo y el del del el del Medio que es el Flex item Entonces el primer elemento va a tener un order uno el segundo elemento le vamos a dar un order 2 y el último elemento le vamos a dar un order 3 entonces ahí cada elemento ya tiene un order definido este va a ser el primero el o sea el que va a estar primero en el orden este va a ser el segundo y este va a ser el tercero

pero de repente podemos agarrar y a este darle order 3 y a este darle order 2 entonces de repente ahora el elemento Dos está en el orden tres pero si venimos al código efectivamente pasó lo que les dije como siempre estamos en un curso si no pasa lo que les dije evidentemente Hay un problema un poco más grande que es los elementos siguen acá o sea este es el uno sigue el dos y sigue el tres no es que el dos aparece abajo ni nada no no no no no solamente cambió el orden visual porque

en el en el html siguen igual o sea el fe Child va a seguir siendo el fe Child y el Last Child va a seguir siendo el Last Child Solo que a nivel visual se ven desacomodados porque cambiamos su orden en realidad no están desacomodados porque le dimos nosotros el orden así que acomodados pero nosotros cambiamos su orden podemos agarrar al primero y hacer que el primero esté en el lugar del tercero y el tercero esté en el lugar del primero Entonces tenemos el First Child en el orden tres O sea al final el del

medio en el orden uno o sea Al principio y el Last Child en el orden dos o sea acá Esto está bueno porque lo que hacemos Es cuando nosotros cambiamos la resolución de diferentes dispositivos lo que hacemos es ir a las medias queries que básicamente nos permiten poner condiciones entre comillas es decir si la resolución es una resolución para celular o sea si tu página le están viendo de celulares vos podés cambi ciar la predisposición Entonces por ejemplo si vos tenés una barra de navegación Arriba y tenés un elemento acá y un elemento abajo y

vos querés que en móviles se vea diferente Qué haces cambias la posición de los elementos modificando el orden y una propiedad interesante es que también se pueden dar órdenes negativas o sea si yo por ejemplo creo un elemento cuatro no un elemento cuatro Ahí va Yo voy esto que está acá lo voy a sacar voy a sacar el order Ahí va y acá lo voy a dejar en uno también ahí va Si todos los elementos Por ejemplo tienen un order uno básicamente se alinean igual por qué Porque como todos los elementos tienen la misma jerarquía

que es uno todos los elementos se van a alinear respecto a eso pero yo por ejemplo el primero lo puedo poner en el lugar dos y se pone atrás Pero bueno vamos a dejarlo este con el orden dos y el último con el order 3 Entonces el segundo y el tercero van a tener un order dos y el último va a tener un order tres se entiende más o Menos cómo funciona Flex item se está aplicando a todos pero solamente el primero tiene un uno y solamente el último tiene un tres también podemos dar negativos

este si por ejemplo tiene cer0 Okay uno y acá tengo dos por ejemplo solamente un ejemplo Qué pasa si yo vengo a este y a este le doy cer0 parece que no pasa nada pero si le doy -1 fíjense que ahora se van a estar posicionando un elemento adelante así funciona -1 o sea le podemos dar números Negativos o por ejemplo a este si están todos en cero okay Si todos están en cero por defecto este elemento es el cuatro el último si le doy -1 va a posicionarse adelante de todos porque estoy haciendo que

tenga un orden menos acepta números negativos también eso n más para que sepan eh Yo acá le voy a dejar un dos y tres por qué Porque en el futuro podemos cambiar el orden yo acá voy a poner tres y acá voy a poner dos y ahí me quedó nada que ver el orden Pero Bueno así es como funciona esta propiedad order lo bueno de esto es que las personas que que tengan tecnologías de accesibilidad y estén accediendo a la web como no cambiamos el orden de de los elementos originales en el dom no cambiamos

el flujo del documento las tecnologías accesibles siguen pudiendo acceder a nuestro contenido y no se ve afectado el orden Entonces eso está bueno puede jugarnos en contra a veces pero en la mayoría de los casos Está Bueno y después como dije las meda queries en dispositivos móviles podemos hacer que de rep cuando la resolución sea más chiquita cambie el orden de los elementos y se predispongan como nosotros tenemos ganas así que bueno ahora vamos a ver lo siguiente que es una de las partes más importantes que ahora vamos a arrancar a ver propiedades de los

hijos vamos a ver tres propiedades que son muy importantes que son Flex grow Flex shrink y Flex basis Que son tres propiedades que nos permiten determinar cuánto van a crecer los elementos que por defecto no crecen fíjense que si un elemento tiene un tamaño por defecto el tamaño no crece Cuánto se van a achicar los elementos que eso sí podemos definirlo podemos definir hasta Cuánto se achican por defecto fíjense que se achican hasta el contenido Porque si yo tengo la caja flexible si yo no tuviera el wrap los elementos se achicar yo AC le voy

a dar Un zoom ven los elementos se achican no se agrandan pero se pueden achicar Entonces tenemos que definir si se achican los elementos o hasta cuándo se van a poder achicar y tenemos que definir su tamaño base para que digamos Ey los elementos se pueden agrandar hasta este punto pero se tienen que achicar hasta este punto por ejemplo y después se van para abajo entonces vamos a poder hacer un montón de cosas con las siguientes tres propiedades que se dan a Los hijos ya es otra propiedad al igual que order que no se le

da al padre sino que se le da a los hijos order se le da a los hijos y las siguientes tres propiedades también y la próxima que es aink self también así que vamos a ver tres propiedades que en realidad son cuatro Porque después tenemos una que Flex que resume esas tres anteriores Y después a link items Así que vamos que ya estamos por terminar y ya nos podemos poner a hacer proyectos con Flex no es Muy largo Así que vamos a ver cómo es esto de Flex grow Flex shrink y Flex basis vamos para

arrancar Tenemos que tener el concepto de Flex items super bien definido que básicamente son los hijos directos de un contenedor Flex o sea con display Flex Esos son los Flex items ahora las propiedades que vamos a ver ahora las tres que vamos a ver se aplican a los Flex items porque vamos a definir el comportamiento de estos Flex Item tengo los mismos elementos que antes ahora voy a encargarme de eliminar el order para que no se confundan vamos a cambiar el orden porque si no se me van a confundir Ahora sí están bien ordenados de

vuelta bueno para arrancar si ustedes se fijan estos elementos lo que tiene es que si bien ahora están bien distribuidos que es lo que hicimos antes los logramos alinear bien en ambos ejes El problema es que no cambia su tamaño porque sí están bien alineados Pero y el tamaño Bueno si lográramos darles un buen tamaño Aunque ocupen toda la barra todo el eje de alineación y estén en full size no importaría porque tenemos que el tamaño se adapta ahora lo que se está adaptando es la alineación o sea tenemos los elementos bien centrados bien lindos

Como queremos Pero también si quisieramos amos que cambie su contenido no lo podemos hacer porque sí supónganse que yo solamente tengo un elemento tengo un solo elemento el Elemento está centrado pero si si la resolución es esta quiero que tenga un tamaño pero si la resolución es gigante me va a quedar una página enorme con un elemento chiquitito Cómo puedo aprovechar las propiedades de las cajas flexibles para hacer que realmente sean flexibles lo primero es la propiedad grow que por defecto viene en cero la propiedad grow básicamente le está diciendo que del espacio disponible puede

ocupar algo es decir si yo por Ejemplo a el First Child vamos a crear varios elementos como antes vamos a dejar solamente tres 1 2 3 1 dos tres de estos tres elementos Okay vamos a decir que el primer elemento elijo tenga un Flex grow de uno y lo que está pasando si se fijan es interesante porque ahora le chupa el huevo la alineación Por qué Porque no importa cómo se alinean podemos incluso eliminar esto y no va a cambiar porque la alineación ya no estaría afectando ya acabamos de decir Que las cajas van igual

se lo voy a dejar porque está bien dejárselo pero el las cajas van a cambiar por qué Porque ahora sí tienen un tamaño definido si yo le diera un Max W de cu de no sé 100 píxeles ahí sí me cambia y ya no afecta o de 200 peles es como le estás dando un Max W se pueden pero nada es como ahí queda no no se va a agrandar más en cambio con el grow si le sacáramos esto todo el espacio disponible lo va a ocupar fíjense que acá si cre crece También crece eso

es lo que nos permite hacer permite que las propiedades crezcan ahora se lo puedo aplicar a todos los elementos yo puedo venir acá y a todos los Flex items darle esto ahora ustedes miran El flex grow como que agarrá los espacios disponibles y los rompiéramos en muchas partes cada uno de estos va a tener una parte de ese espacio disponible si yo por ejemplo esto a ve es un poco confuso pero supónganse que si yo al Flex item a Todos los Flex item le doy uno si yo al Fish Child le doy un Flex grow

2 va el doble que estos dos por qué Porque el espacio que tienen disponible vamos a sacarle el wid porque el wid en este caso está afectándolo ahora sí este va a tener el doble que estos dos fíjense que estos ocupan la mitad de lo que ocupa este Por qué es eso porque si cada ítem tiene un Flex grow uno vamos a llevarlo a Paint Esto es lo que teníamos antes no esto que está acá Tiene todos los Flex Grow Es decir de acá acá tenemos un Flex grow de acá tenemos otro y acá tenemos

otro o sea que si acá tenemos un Flex grow 2 acá Tenemos uno y acá Tenemos uno el total del espacio se va a dividir En cuántas partes se va a dividir en cuatro por qué Porque si estos tres Flex items tienen dos uno y uno tenemos que sumarlos el Flex grow total O sea la cantidad de espacios disponibles que se van a repartir van a ser cuatro entonces a este le vamos a dar dos de esos cuatro Espacios a este le vamos a dar uno y este le vamos a dar cuatro ahora si por

ejemplo le diéramos al último por ejemplo al Last Child si al Last Child por ejemplo le diéramos un Flex grow de cuatro fíjense que este va a estar ocupando el doble que este y el cuádruple que este Por qué fíjense es bastante interesante vamos a hacer el mismo ejercicio que antes ahora esto cambia por qué vamos a ponerlo más chico y vamos a verlo abajo las proporciones Ya no son las mismas si este es el total de acá a acá Tenemos uno acá tenemos otro y acá tenemos nosotros este elemento ocupa cuatro espacios disponibles este

ocupa uno y este ocupa dos Entonces cuántos espacios disponibles Vamos o sea todo el espacio disponible el espacio disponible significa el espacio que le falta a la caja para ocuparse completamente por las dudas se los digo entonces ahora cuánto va a ser en cuánto se va a romper el Espacio disponible en siete Es simple en siete por qué porque esta caja tiene dos pedacitos esta uno y esta cuat eso es lo que estamos diciendo Entonces ahora el espacio disponible se va a romper en siete partes y esta caja va a tener cuatro partes esta caja

va a tener una y esta caja va a tener dos Entonces esta caja va a ser el doble que esta fíjense que si agarramos así tenemos una y este es el doble una dos y esta que está acá va a ser el cuádruple una dos 3 cu por Qué porque las cajas ya tienen un valor mínimo por defecto que es este este es el tamaño original de las cajas el contenido hay que restárselo el espacio disponible que se le va a estar agregando es todo el resto entonces básicamente el espacio disponible que va a tener

Esta es uno Este a este le van a regalar el doble de espacio y a este le va a regalar cuádruple de espacio Eso es todo esto está bueno porque manejando esta regla que al principio parece un Poco complicado Esto es lo que estamos haciendo Okay al primer elemento le estamos otorgando un dos a otro un uno o sea que hasta ahora el espacio lo Estamos rompiendo en tres y a este que está acá lo Perdón en cuatro Porque si este tiene uno y son tres elementos son 1 1 y dos o sea 1 2

4 pero al último le estamos dando cuatro Entonces tenemos el primer elemento con dos le sumamos uno del del medio y le sumamos cuatro del final son siete este asigna cuatro y así S podemos cambiar acá podemos poner también por ejemplo tres y ya está este tiene dos este tiene uno Este tiene tres o sea son 3 + 1 + 6 Son seis espacios disponibles esta cajita va a tener tres espacios disponibles y estas dos cajitas van a tener otros tres espacios disponibles esta va a tener dos y esta va a tener uno es así

entonces tres espacios disponibles para acá dos pedacitos del espacio para acá y un pedacito del espacio para acá eso es lo Que hace Pues si nosotros no le diéramos El flex grow vamos a sacárselo a esto se lo sacamos a esto se lo sacamos y a esto se lo sacamos fíjense que las cajas no tienen tamaño como no tienen tamaño todo esto que está sobrando acá es espacio disponible se entiende todo esto que está en blanco es espacio disponible si yo a esto le doy por ejemplo que arranquen en Start van a posicionarse acá o

no Bueno ese espacio que sobra es espacio que podemos hacer que lo tengan Los hijos entonces lo que hacemos Es decirle Okay al First Child le vamos a decir hay espacio disponible y el único que va a tener todo el espacio disponible vas a ser vos uno entonces el espacio disponible se va a romper en un pedazo y todo ese pedazo va para vos ahora si a todos los Flex item le damos uno hay tres elementos significa Que en total el espacio se va el espacio que sobra el disponible va a romperse en tres pedazos

y cada uno de estos Elementos va a tener uno de esos tres pedazos Si queremos romper hacer que el fir Child tenga otro pedazo le damos Flex grow 2 y como antes ocupa el doble Por qué Porque ahora se va a romper en un pedazo acá un pedazo acá y dos pedazos acá Entonces se va a romper en cuatro pedazos este va a tener dos este va a tener uno y este va a tener uno eso es lo que estamos haciendo estamos manejando y administrando como el espacio disponible puede ser utilizado Por los Flex items

eso es lo que hace la primer propiedad de tres que es la más complicada igual lo que vamos a ver ahora después es el Flex shrink que básicamente Flex shrink determina la capacidad para encogerse si nosotros decimos por ejemplo que el Flex Okay fíjense Yo por ejemplo le voy a dar a esto le voy a dar un wid no le voy a dar un wid a los Flex item van a tener un wid de 50 píxeles fíjense que ahí el espacio disponible se lo están Repartiendo de forma diferente Si todos los elementos tienen 100 píxeles

el espacio disponible va a ser menos si yo le saco el Flex Row Ahí va fíjense que ahora lo le sobra menos espacio disponible Yo le doy 200 pasa lo mismo el espacio disponible que sobra es menos Entonces si yo acá uso un Flex grow por ejemplo uno y acá uso un Flex grow 2 ahora esta cajita no va a crecer mucho más que estas Por qué Porque se está repartiendo menos espacio disponible Antes sobraba muchísimo espacio y eso era lo que se repartían y ahora sobran mucho menos menos espacio entonces tener dos pedacitos del

espacio disponible cuando tu caja ya es muy grande mira si yo esto lo achico Ahí está ocupando más porque porque el espacio disponible que sobra Es más si yo le doy que no tiene tamaño ahí sí todo el espacio les queda para ello entonces ocupan más bueno vamos a retroceder le vamos a dar un 100 píxeles y le vamos a sacar el Flex grow Si nosotros no tenemos un Flex grow okay Estamos definiendo que va a tener un tamaño de por ejemplo 150 píxeles no este es el tamaño 160 le vamos a dar 160 píxeles

Entonces yo Por ejemplo si vengo a acá Esto no se va a esto se está encogiendo como ven ven se está si se tiene que encoger se encoge yo le voy a dar ahora 100 200 pixeles por cada uno el tamaño original es este que está acá pero si llegamos acá si seguimos deslizando se está empezando a encoger Sí la caja se empezó a encoger porque no entró vamos de vuelta el tamaño original es este pero desde acá se empieza a encoger entonces con lo con Flex shrink definimos Hasta cuándo se va a poder encoger

nosotros tenemos definido El wrap flex Flow Row wrap O sea que van a poder venir para abajo o no eso por qué es es porque Flex shing por defecto es uno y los elementos en este caso es como va cambiando pero yo vengo acá y le doy F Child por ejemplo o no a todos los Elementos a los Flex item le damos un Flex shrink de cero por ejemplo lo que está pasando acá es que los elementos no se van a encoger después de su tamaño base se entiende Si yo por ejemplo le doy wraap

los elementos no se encogen eso es lo que definimos con Flex ring es hasta dónde se van a encoger los elementos pero ojo después podemos definir cómo los elementos se encogen entre sí si si yo le doy Flex String 1 acá le voy a sacar el wraap fíjense qu Interesante esto acá Todos los elementos se encogen igual pero si yo quiero que un elemento se encoja más que otro voy a decirle Mira vos te vas a encoger tres veces más Flex shrink 3es te vas a encoger tres veces más de lo que se van a

encoger el resto de elementos entonces fíjense que el elemento uno es el que más encoge es el elemento que más encoge mayor ve si te vas encoger cinco veces más fíjense que es como que prácticamente el único que se encoge es Este no porque le estamos diciendo Che te vas a encoger sí los demás están encogiendo Sí pero vos sos el que más te tenés que encoger eso es lo que hacemos con Flex ring determinamos Cuántos se tienen que encoger los elementos si yo al primero le doy cero le voy a decir se van a

encoger todos menos el primero Entonces ahora sí ven se encogen Todos menos el primero el primero no se encoge todos los demás sí eso es lo que hacemos con Flex ring es más Si queremos que no Se encoja ninguno de los dos por ejemplo lo dejamos ahí ven no se va a encoger el primero pero se va a encoger Ah no perdón acá no sería en el último Ahí va no se va a encoger ni el primero ni el último el que se va a encoger es el del medio ah ahora si sobrepasan se van

para abajo si yo le doy un wrap Vamos a darle en wrap y se van para abajo ahora ya no le importa pero yo lo que necesito es que tengan un wid mínimo y un wid máximo Cómo podemos hacer esto no para que se Puedan estirar pero que se tiren para abajo bueno acá viene la magia de la última propiedad la última propiedad es Flex basis que por defecto viene en automático si le damos a todos los hijos un Flex basis cer por defecto fíjense que acá no están notando nada pero esto le estamos diciendo

que el tamaño base que van a tener es de cero acá ya no le importa nada Yo le doy 50 píxeles por ejemplo se mantienen 50 píxeles Esto está bueno porque si nosotros no tenemos Que tener un wid prácticamente ni se usa el wid en los Flex items se usa el Flex basis porque es el tamaño base significa Esto es lo máximo que te puedes achicar antes de encogerte Entonces yo Por ejemplo si le doy un tamaño base de 150 píxeles y le doy un Flex grow de uno se van a estirar pero si el

tamaño base es más chiquito se van a encoger y acá tenemos el efecto que queríamos bueno acá prestemos atención porque hay una diferencia entre el min Wi y el basis Cio de Flex basis le damos min wided el efecto es el mismo fíjense que va a creciendo y se va adaptando Pero qué pasa si yo por ejemplo atentos acá ahora hago que en vez de ser Row sea colum Ah bueno atentos a esto atentos a esto si acá esto es colum si acá le pongo Flex basis Ah o sea que no es lo mismo porque

uno Define el tamaño en dirección del elemento acá solamente estamos definiendo literalmente el min wet mientras que con Flex basis estamos Definiendo okay en dirección hacia la que apunta el elemento el tamaño base que tiene este elemento eso es lo que estamos definiendo V Vamos a darle 30 por ejemplo y ahí está Entonces en este caso estamos definiendo esto Esa es la diferencia o sea cuando tenemos un Flex Direction column es como si en vez de esto usáramos un min he mientras que si tenemos un Row es como si usáramos un min with Esa es

la diferencia principal que cuando tenemos en Row es como si Usáramos minit y cuando tenemos en Flex es Es como si usáramos el hate voy a sacar la orra dando calor hay una diferencia en cuanto al cálculo es decir se calculan de forma diferente uno simplemente establece el ancho o el alto mínimo mientras que otro establece el tamaño base de un elemento entonces conceptualmente son diferentes pero en la mayoría de los casos funcionan igual pero ojo con esto porque es mucho mejor establecer El flex basis Así que eso Para que lo tengan al tanto yo

le voy a poner un Flex basis de 150 píxeles que es lo que habíamos tenido antes y este que está acá va a tener un grow Flex grow de dos entonces este crece el doble y cuando no tienen el mínimo se van para abajo este crece el doble y cuando no le da el mínimo se fueron para abajo vamos a hacer un pequeño zoom un pequeño mínimo este crece crece crece pero cuando se encoge Ahí va perfecto después tenemos una propiedad que se encarga de Resumir a estas tres y esta propiedad de Flex en vez

de tener que andar poniendo Flex basis Flex grow y Flex shrink que por ejemplo acá es uno y esto por defecto es cer0 y esto por defecto es auto así funcionan estas propiedades esta por defecto es auto esta por defecto acá se lo vamos a sacar porque acá se lo estamos Estableciendo Ahí está y acá también Ahora sí esta por defecto es cer0 esta por defecto es uno y esta por defecto es auto O sea si le Sacáramos esto ven va es lo mismo es exactamente lo mismo entonces lo dejamos así acá le podemos dar

para que crezca acá le podemos dar para que no se encoja si queremos abreviar las tres usamos solamente Flex la propiedad por defecto de Flex es 0 1 auto porque es lo mismo que antes Pero podemos decirle Ey quiero que crezcas Este es el Flex grow Este es el Flex shrink y este es el Flex basis que por defecto viene en auto pero acá le puedo decir mira el tamaño por Defecto mínimo que van a tener el base va a ser de 200 píxeles vas a tener un Flex shrink de uno para que te encojas

uno y un Flex grow de uno para que también crezcas uno entonces ahí ven los elementos se van a adaptar pero van a tener un tamaño mínimo y ahí tenemos efectivamente un buen uso de las cajas flexibles voy a crear muchas más cajas vamos a usar em ya que lo aprendimos div Flex item con un contenido lo voy a hacer por 12 Ahora sí borramos los Primeros dos Ahí está perfecto y ahora sí fíjense vamos a darle un tamaño más chiquitito en vez de que tenga Esto va a ser de 100 píxeles Es hermoso Cómo

se van adaptando no cómo van cambiando no esto es Ah mágico es más Vamos a darle un m Child 12n para que sea uno Sí Uno no ven y ahí está perfecto vamos a sacarle el color de fondo blanco al flexbox y vamos a sacarle el borde y si no tuviéramos borde Así es como se ve ven Este es el posicionamiento que Acabamos de crear vamos a hacer un pequeño zoom Ahí estamos qué increíble esto qué magnífico qué bestia que es de alto perdón a veces digo bolud porque estoy concentrado así que bueno gente la

propiedad Flex sí se suele usar o sea sí recomiendo que usen Flex y también recomiendo que usen Flex Flow que esta no va al hijo va al padre pero bueno y otra propiedad que la voy a enseñar así muy muy rápidamente es Gap si ustedes dicen Che la verdad que están muy juntos Los elementos quiero que se separen entre sí qué hacemos Bueno a la caja flexbox al Padre le damos un Gap de 20 píxeles y el Gap es la separación que van a tener yo al flexbox le doy un Border dos pixeles solid negro

como tenía antes van a ver que se sobresalen del cont Así que hay que tener mucho cuidado con esto eso es porque tienen un hate definido podemos darle como antes overflow hiden y ya está no se ven los elementos o podemos sacarle el overflow Y sacarle el he que tienen por defecto Ahora sí el tamaño ocupa el lugar que debe ocupar le sacamos el he que tenía por defecto y ya tenemos la separación que queríamos de los elementos entre sí que es de 20 píxeles Ven y ahí está tenemos los elementos separados entre sí podemos

separar los 10 píxeles entre sí Esto está bueno la verdad que está bueno es una buena forma de trabajar pero así nos falta ver la última propiedad que la tuve que haber explicado en alineación No sé por qué no la expliqué en alineación esta propiedad Soy medio estúpido ahora vamos a ver align self que es básicamente para agarrar a un elemento puntual vieron que todas las propiedades de alineación se La damos a la caja le damos justify content al in items y a in content se lo damos al flexbox bueno la siguiente a in self

se la damos al hijo porque es para agarrar un elemento puntual y llevarlo a donde querramos Así que basta de hablar y Vamos a ver cómo funciona muy brevemente align self bueno ahora vamos a ver la propiedad align self prometo ser muy breve vamos a aumentar el Gap primero a 40 píxeles mentira a 30 como sabrán vamos a intentar mover el elemento cinco Ah este le vamos a dar la clase em 5 Entonces estamos moviendo el elemento cinco y ahora lo que tenemos Okay es entender el concepto básicamente cuando nosotros usamos Alin items vamos a

venir Al flexbox y usar aling items nosotros lo que podemos hacer es utilizar la propiedad aling s para alinear a un hijo de forma diferente a la que se alineó acá yo voy a venir acá abajo de todo y voy a poner em 5 y con align self si yo le doy Start y acá no funciona Porque todos tienen el tamaño que deberían tener pero si nosotros le sacamos el Gap por ejemplo y Agarramos al flexbox y le damos un he de 300 píxeles Por ejemplo No acá van a estar de esta forma Yo acá

Uso a in content content acá ya eh Ya deja de funcionar Por más que le des space por ejemplo lo que sea ya no funciona la propiedad de al s al s funciona solamente cuando utilizamos la propiedad align items ahí sí funciona le vamos a dar por ejemplo Center no y acá yo puedo agarrar el em 5 y decirle vas a estar al principio vas a estar al final vas a estar a los costados Quizás por ejemplo en el Center que es la propiedad por defecto vas a estar en baseline por Ejemplo o vas a

hacer vos sí vas a ocupar todo el ancho puedo agarrar el elemento el último elemento por ejemplo el Last Child y decirle al elemento nueve vos vas a estar vas a tener una alink items vas a hacer stretch y en stretch debería ocupar todo pero no porque hay algo que está pasando Ah alink self perdón self Ahí va y está ocupando todo ven entonces también le puedo decir top y se alínea Perdón top no Start y se alínea arriba le puedo Decir end y salí abajo le puedo decir stretch le puedo decir baseline que en

este caso funcionaría igual que que que Start o le puedo decir como dijimos antes stretch que este es el valor por defecto de hecho si le damos initial Esto no se va a poner en stretch si le damos inedit esto tampoco se va a poner en stretch si le damos reset tampoco se va a poner en stretch Entonces lo único que va a hac que se ponga en stretch es escribir stretch porque stretch es la Propiedad por defecto de Alin items la propiedad por defecto de Alin s es auto O sea que lo determina el

navegador es esta Pero podemos agarrar a cada elemento que fue afectado por la propiedad a in items Y definir Cuál va a ser su posición eso es lo que hace a in item eso es lo que hace aink self es Che todos estos elementos fueron afectados por la propiedad alink items pero yo quiero que este puntualmente tenga un aspecto diferente yo por ejemplo acá le Doy en alink items le doy Start por ejemplo Start Ven ahora yo puedo hacer que se modifique en ese Start pero básicamente lo que hago con aink items es agarrar todos

los elementos y ponerlos en alguna de las diferentes posiciones y con alink self agarro solamente ente uno entonces a in self es Exactamente igual que ain items solamente que ain items es para modificar a todos los hijos o sea todos los Flex items mientras que aink self es Para modificar solamente a uno Eso es todo al self así que bueno gente Ahora sí vamos con la siguiente sección vamos a ver sobre layout en css ahora ya con esto entendido Estaría bueno que Comencemos con el tema del layout Cómo armar layout con fxbox es decir cómo

hacer un footer una barra de navegación Cómo estructurar un l vamos a ver primero también lo que es un después vamos a ver un par de cositas más como el patrón Holy grail por ejemplo y Después pasamos a grid Así que vamos Bueno ahora lo que vamos a ver va a ser Cómo crear un layout con flexbox esto es la verdad que medio una especie de trampita porque no se puede crear un layout solamente con flexbox y es uno de los desafíos a los que nos vamos a enfrentar pero vamos a llegar a eso más

adelante o sea s sí se puede en realidad crear un layout con flexbox pero ahora vamos a ver a lo que me refiero un layout básicamente podemos verlo como la Forma que vamos a tener nosotros de distribuir los elentos el contenido para que todo quepa dentro de nuestra página es decir tenemos una página web y decimos Che cómo voy a crear una barra secundaria dónde voy a poner el nav De qué forma voy a mostrar al usuario el Main content o sea el contenido principal cómo voy a poner el footer bueno todo eso tenemos que

encajarlo en la página y distribuir los elementos correctamente para que haya un diseño Que sea lindo que se adapte a todos los dispositivos que nada sea funcional entonces Esto justamente es lo que es el layout no es la forma que tenemos de distribuir los elementos en una página estuve intentando después de decirles que íbamos a trabajar con Flex Xbox eh de crear un layout con flexbox Pero los layouts que pude crear con flexbox siempre incluían media queries que es lo que vamos a ver más adelante en la en el próximo apartado que sigue que es

el de Responsive design Pero la realidad es que dije e yo creo que se puede crear un layout y la verdad que sí lo logré pero es un layout bastante complejo y Que es innecesario de trabajar o es un layout feo hay layout que son feos que tienen el menú así arriba todo al se convierten en cosas que son feas es decir un menú que por ejemplo se adapta a dispositivos móviles pero que no no es lindo estéticamente el menú más clásico de toda la vida es un menú que apretamos Los las tres barritas o

los tres puntitos y se despliega un menú que elegimos las opciones y si no lo queremos le damos clic y se vuelve a subir eso es un menú real que se hace mínimamente con javascript entonces No podemos hacerlo sin javascript o no podemos hacerlo sin media queries porque sí lo podemos hacer con javascript o también lo podemos hacer con css con una técnica que es la técnica del checkbox oculto que básicamente para hacer este Tipo de cosas lo que hacemos Es agarrar un elemento y decirle que cuando el checkbox esté clique vamos a desplegar el

menú cuando no lo vamos a mostrar de otra forma entonces la verdad que es una técnica que es un poco trampa pero nada más allá de eso quiero básicamente hacer una prueba muy simple Para que vean Cómo es que se puede hacer un lagado muy simple con flexbox o Cómo podemos construir algún elemento Así que vamos a intentar esto es una práctica y prueba Completa para que veamos si es que lo podemos hacer Bueno acá tengo un layout simple primero cambié la cantidad de Tab size a tres Okay le di acá using tax y le

di en tres para que no tengamos la necesidad de hacer tanto zoom que igual lo vamos a tener que hacer Igual pero para arrancar podamos zafar lo que voy a hacer para arrancar para comenzar con el layout es construir un heer Okay acá tenemos un header muy simple adentro del header vamos a poner No no vamos a poner Una n vamos a intentar hacer una sección Vamos a darle la clase gader y vamos a poner adentro un h1 Perdón un h1 no un div que este div sí va a tener un h1 que vamos a

ponerle Ada 13 tu evento Ada 13 coma no no Ada 13 edición 2024 Ahí está mejor y vamos a poner abajo un párrafo con un Lore msum muy básico hasta ahí está bien Perfecto Bueno vamos a tener que empezar a chicar un poquito como dije eh Pero bueno acá vamos a poner un nav que va a tener una barra de Navegación no se acuerden que el header es como nuestro encabezado en este caso Sí este es nuestro encabezado la barra de navegación Vamos a darle una clase nav adentro va a tener un vamos a hacerlo

con m esto un ul que va a tener la clase nav ul que va a tener adentro un le que van a tener la clase nav item que va a tener cuatro elementos que adentro va a tener un a no se ve nada perdón no se ve nada cada a va a tener la clase nav link y van a tener el Contenido link y este signito del dólar y ahí ya estaríamos Perfecto Bueno vamos a darle el signo del hashtag t signo del hashtag Tab signo del hashtag t signo del hashtag bien ahí tenemos los

links Entonces ya tenemos el Head y la barra de navegación esta barra de navegación quiero que la hagamos un poquito diferente quiero que la hagamos más genuina okay quiero que la hagamos más genuina para eso voy a envolver esto que está acá en un div Okay y voy a envolver Por un lado lo que viene siendo esto este div que simplemente va a ser un separador y acá va a haber otro div que va a contener una imagen una simple imagen que va a tener source y acá le vamos a poner el logo de a

13 a 13 logo como no me gusta el 13 ya el logo lo vamos a cambiar así que des preocúpense es temporal este logo voy a guardar la imagen le voy a guardar la misma carpeta voy a poner logo.pn ahí está voy a abrir gimp esto de gimp es un paso Completamente opcional es mío ustedes pueden elegir el logo que quieran yo lo hago por temas de colorización voy a agarrar el logo le voy a traer a gimp y voy a recortar la imagen a 400 por 200 y ahí me quedó perfecto le doy en

sobreescribir logo y ahí en vez de que la imagen ahora sea una imagen con el 13 la imagen dice solo Hada ya está listo no me estoy copiando ninguna empresa eh ojo porque ya veo que me llegan la demanda No ma aquí noas Bueno ahora Cierro y acá tengo esto que está acá bien para comenzar vamos a arrancar a darle estilo a antes de darle estilo a esto Vamos a darle estilo al header sí vamos a arrancar dándole estilo al header vamos a venir a agarrar el header y vamos a darle al jader un he

de 100 View por hate Ahí está y vamos a hacer que el header tenga un Box sizing Border Box Al igual igual que el body que también va a tener un Border Box hasta que estamos bien Vamos a hacer un Pequeño zoom así esto lo pueden observar vamos a hacer que el body tenga un background de hecho un background color que se va a parecer al color del logo que el logo no lo pusimos lo tenemos que poner acá e la imagen va a tener logo.png ahí va el logo Es este fíjense có vamos a

convertir Esta cosa fea en un en un layout simple el color va a ser un color parecido al del logo que debería ser de 73 más o menos debea hac un naranjita eh No no me acerqué tanto le Voy a dar otro a ver de es como que tiene más am amillo o sea Debería ser de ahí más o menos agarré un color que se ha parecido bueno no está mal lo logré f80 Bueno no es el mismo pero hay medio que lo agarré ya se perdió la imagen con el fondo para arrancar vamos a

poner una imagen de fondo este header vamos a buscar ad3 en Google ahora voy a elegir una imagen que sea llamativa vamos a guardar la imagen como header background pun WEP la imagen termina en punto WEP Bien eso es algo positivo vamos a usar este formato más adelante le voy a dar un background imagen un consejo que les doy y es si ustedes tienen un background no usen solamente background usen background color sean más específicos Porque además van a estar siempre sobrescribiendo Todas las propiedades de forma innecesarias sean más específicos en este caso como es

una imagen voy a poner backr imagen URL ahora sí ya no voy a hacer más pendejadas vamos a Ah se Ponía mexicano vamos a hablar bien Ahora vamos a hacer las cosas como se debe la URL va a ser background imagen. vp acá tenemos la imagen pero la verdad como es un asco y además nos sobra este pedacito que está acá ustedes se deben estar volviendo locos pero no se olviden que tenemos un concepto llamado margin collapse en que los márgenes colapsan qué está pasando acá y el margen no está teniendo en cuenta la caja

que está dentro y está como dándole un margen a La caja que contien un elemento que tiene margen ese elemento es el h1 agarramos y le damos un margin cero le puedo dar elemento a la etiqueta h1 desde acá ya que h1 debería haber solamente uno por página Entonces no está mal darle h1 a la etiqueta h1 Porque la única etiqueta que vamos a tener que sea h1 es esta no vamos a tener otra Así que podemos darle clase estilo de esta forma ya que no deberíamos tener problema y ahora sí ya Se nos fue

esto y además está adaptado perfecto pero como esto feo vamos a crear un overlay un overlay es una imagen que es una capa que se superpone con una finalidad que después veremos para eso vamos a agarrar el header y acá vamos a crear un div que va a tener la clase header overlay Vamos a darle estilo header overlay le vamos a dar un he de 100 vi por he y un wid de 100 View por wid y le vamos a dar un background color 006 está bien y le vamos a dar un position absolute así

se pone acá Perfecto ahí est al color de los elementos en el body le vamos a dar blanco así adquieren este color pero ahora el problema que tenemos Es que este header overlay se está superponiendo por encima de de de los demás elementos Así que vamos a venir a este elemento que está acá en el header y darle Class header item container Entonces estamos es un header que Contiene los items que están dentro del header no entonces venimos acá y ponemos tag item container y le vamos a dar un Z Index que sea mayor por

ejemplo 10 no y a este le vamos a dar un Z Index que sea menor en este caso le vamos a dar por ejemplo uno y ahora igual sigue igual por qué porque este no tiene ningún tipo de posición Así que le vamos a dar antes acá un posi relative y ahora sí nada le chupa completamente Ah eso porque le estamos dando qué que soy le di Una clase al cierre de una etiqueta acá va Ahora sí y acá la tenemos lo único el overlay no sé si me gusta mucho o sea este color Sí

muy lindo pero no me gusta tanto así que vamos a agarrar el color de antes f80 y vamos a dárselo al fondo del overlay pero vamos a darle una opacidad de nueve no ahí tenemos más o menos no está bien pero tampoco está mal voy a entrar a gim de vuelta y a la imagen de fondo la voy a desenfocar filtros difuminar desenfoque gusano la Desenfoco a cinco más o menos aceptar exporto la imagen la sobreescribas si vamos a la página actualizamos y la imagen ya está sobrescrita perfecto para qué queremos esto así vamos a

darle un save para que no sea tan fuerte el color Ahí está ah Ahí está mejor primero vamos a hacer algo interesante al item container también le vamos a dar un he de 100 View por he no no hace falta no hace falta fíjense Qué interesante esto al header le podemos dar un display Flex Para qué Para que al contenedor le demos un margin auto y se Centre ya está tenemos centrado esto para arrancar ya arrancamos bien tenemos centrado esto vamos a dar una resolución real de 100% Ahí está ya tenemos esto centrado no está

muy lindo así así que vamos a hacer dos cosas primero le vamos a dar un text Lin Center Ahí está vamos a agregar más texto para que sea más Genuino Ahí está pero vamos a limitar el texto para que el texto sea más legible después lo Vamos a ver más delante el motivo del Por qué hago esto pero básicamente le vamos a dar un Max wid del 70 por del sí de no un Max wid de unos 900 píxeles no estaría mal no de 700 píxeles que tenga este Max withd Así es legible dentro de

todo vamos a poner un len completo y acá arriba para que esté más estético acá arriba Vamos a poner otra cosa primero y principal Vamos a darle al Ada 13 edición 2024 O sea al h1 un font size de 40 píxeles porque siento que es muy Chiquito de 50 píxeles Ah va o más fácil se lo vamos a dar de 3 3.2 Rem más o menos son 50 píxeles entonces ahí nos queda más grande el título Vamos a darle más Todavía 3,6 ahora sí Y además Vamos a darle un text wrap balance Entonces de esa

forma va a estar balanceado siempre ven entonces independientemente de la resolución siempre va a estar balanceado el texto perfecto y al último para que no nos queden estas cosas al texto o sea vamos a agarrar el p item container p le Vamos a dar un text wrap Pretty y ahí ya ya tenemos esto también resuelto perfecto no nos queda ni Ninguna palabra así sola ningún huérfano ni ninguna viuda hermoso y arriba Vamos a agregarle una imagen vamos a hacer eso hagan eso por mí agreguen una imagen por m acá arriba Vamos a poner una imagen

source voy a poner mi foto por qué voy a poner mi foto no sé tampoco me importa vamos a poner alto vamos a agarrar la primera imagen que salga como siempre a lo largo De todo el curso la voy a guardar como dalto png no la voy a chicar ni nada la voy a clavar ahí n más alto. png y ahora sí la vamos a trabajar vamos a agarrar y vamos a decir he it en container y le vamos a agarrar la imagen Es más Vamos a darle otro estilo porque ah no está perfecto pero

le podemos dar la clase gader y mg O sea la imagen del gader no Entonces ahora sí gader y mg tenemos esto resuelto Vamos a darle un wid un min wid de 200 píxeles para que como Mínimo tenga 200 píxeles pero Max with del 60 por así no crece más del 60 por. Vamos a darle un bord radius del 50% así también se convierte en un redondel ven que queda lindo el redondel vamos a limitarlo a un 50% Ahí va ahora sí me gusta más pero no va a tener menos de 200 píxeles o sea

va a tener 200 píxeles como mínimo pero Vamos a darle 250 pero se mantiene ahí ahora esto que está acá no va a quedar así Tampoco porque queda medio feo así que vamos a darle un borde 10 píxeles solid blanco y ahí vamos a hacer que tenga menos que tenga seis Ay me gusta más me gusta mucho más y agrandamos la pantalla ahí tenemos la imagen igual siento que es Ay hay algo que no me cierra primero vamos a agarrar el background y vamos a darle cover vamos a agarrar el background acá background size cover

porque me está sobrando fondo abajo ahora ya no me sobra fondo primero el tema Ya está resuelto listo la imagen Aún así sigue siendo muy grande Vamos a darle un Max wid de 40% me gusta mucho más y vamos a ser que tengo un poquito de margin margen de 20 píxeles Así estás un poquito separada de abajo si no queda medio y ahora sí está todo bien centrado me gusta siento que es una mejor presentación a ver pantalla completa ahí queda en pantalla completa se ve linda Lástima que tenemos esto que está acá que es

este overflow que podemos ocultarlo o podemos hacer que todas las Cajas vamos a agarrar y darle que al body div na ul podemos agarrar varios elementos y hacer que todos tengan un Box sizing Border Box h1 al h2 al p a las imágenes también ahora sí El único problema que tenemos ahora es el tema de que igual sigue viendo c o sea le chupó completamente un huevo vamos a ver el motivo del Por qué y qué es lo que se está sobresaliendo creo que es esto sí es el header overlay pero es algo que hay

adentro del Head overlay Ah no Tenemos que darle un Wi de 100 View por Wi tenemos que darle un Wi del 100% al header overlay Ahí está ahora sí tema resuelto Bueno ya tenemos un problema resuelto Perfecto Bueno hasta ahora ya tenemos el encabezado bien hecho lo tenemos con flexbox debería adaptarse a dispositivos móviles vamos a ver vamos a poner la pantalla de costado y bueno adaptarse se adapta es como que terminamos de adaptarlo no el texto está bien balanceado Vamos a ver cómo se ve Por ejemplo en un iPhone 14 Pro Max bien Se

ve bien nos falta la etiqueta de media queries para que se adapte y nada es esta que está acá Ahí va link metav viw por content with igual device bueno Esta es la etiqueta de responsive design Okay Vamos a darle ahí actualizamos y así se ve en un iPhone bueno para arrancar en un iPhone se ve bien no tenemos problemas se ve bien Así se ve en un Pixel 7 Así se ve en un iPad Air Bueno nada esto no está mal está bien Obviamente se puede hacer mucho mejor pero acá tenemos un problema justamente

no de los media queris que aunque le demos Rem aunque le demos lo que le demos aunque trabajemos con medidas eh dinámicas o medidas que no son estáticas medias responsive incluso no vamos a poder después a decirle que Mobile cambie de resolución ahí ya tenemos un primer problema que se presenta si no O sea si solamente trabajamos con flexbox si no usamos media queries que es este No de de no poder cambiar eh ciertos estilos cuando la resolución se a chica Pero bueno por ahora nos enfoquemos en esto que lo venimos trabajando bastante bien Ahora

vamos a trabajar con el gader para arrancar vamos a definir Algo vamos a poner acá vamos a poner un Home acá vamos a poner un about as que es una sección de sobre nosotros acá vamos a poner un contact y acá vamos a poner login Por qué no una sección de login y acá a esto le vamos a Poner link login Entonces vamos a arrancar estilizar todo ya tenemos la estructura bien hecha vamos a venir acá y vamos a hacer este esta barra de navegación Ahora nos toca hacer esta barra de navegación esto que está

acá lo vamos a comentar Okay vamos a agarrar y vamos a crear un comentario que diga header se porque estamos estilizando o dandole estilos a la sección de header acá vamos a bajar y vamos a poner navbar section entonces venimos acá y vamos a Arrancar a darle a la barra de navegación vamos a agarar el nav y le vamos a dar primero y principal un background color blanco porque me gustaría que el background de esto sea blanco vamos a agarrar el nav ul que en este caso el ul tiene tambi un un margin que hace

que se vea esto okay tenemos que sacárselo así que le vamos a dar un margin cero ahí se acaba de despegar vamos a agarrar ahora a los nav link y le vamos a dar un color Vamos a darle el Mismo color que le di que tiene esto Ahí va vamos a agarrar el text decoration none bien Vamos a hacer que sean inline block vamos a hacer lo mismo con los le nav items que los items son los le y le vamos a dar display inline block ahí ya tenemos esto en línea perfecto pero les ofrezco

una mejor solución que esta Espero que esto les guste vamos a olvidarnos de esto y a esto le vamos a dar display Flex tenemos parte del problema solucionado y digo parte del Problema porque ahora son list uno amontonado encima de otros que tienen el puntito que ahí lo pueden ver tenemos que sacárselos así que le vamos a dar list Style No Y ahí ya se fue perfecto vamos a arrancar a darle estilos a los lo a esto que está acá sí vamos a darle un padding de 10 píxeles hasta acá Venimos bien pero vamos a

darle al nav acá viene la magia un display Flex y acá ya está pasando algo vamos a agarrar a la imagen nav logo Ahí está y vamos a Decirle al nav logo que va a tener un wid de 100 píxeles ahora tenemos que encargarnos de la distribución cómo va a ser la distribución bueno primero Vamos a darle a todos los elementos un margin de 10 píxeles seis píxeles está bien A este le vamos a dar 80 píxeles porque me parece que es demasiado grande 70 6 70 está bien y le vamos a sacar el margin

Bueno a al na le vamos a dar un un justify content space between el between para que se ponga esto acá y esto acá y Tenemos que dejar un poco más de espacio porque si no no va a ser un nap De verdad vamos a poner una sección Main y vamos a poner un lorem lorem vamos a copiar y pegar muchas veces este lorem ahí va para tener algo de contenido bueno ahora sí ahí tenemos nuestra barra de navegación Ahí estamos Bueno vamos a hacer a su vez que vamos a hacer a su vez que

este nav tenga un padding arriba y abajo cero pero los costados de 40 píxeles para que estén un poquito más Separados igual space B Twin creo que es demasiado No por ahí podemos darle space everly y le vamos a dar solamente padding right de 40 píxeles ahora sí me gusta más a ver ahí como va quedando vamos a ponerlo pantalla completa eh Me gustaría que estén diferentes Vamos a darle un space around y ahora ahora me gusta un poquito más como viene quedando el Nava aún así es mejorable no me gusta mucho siento que están

muy a los costados los bordes Vamos a darle de Vuelta un space between Ahí va un padding right de con un padding a los costados en general vamos a volver al pading a los costados cer0 y 100 píxeles acá cer0 y con 40 píxeles estamos bien entonces Le di acá 40 píxeles y acá Le di 100 pero más o menos es la misma distancia ya que estamos incluyendo el padding que tiene este elemento vamos a agarrar a los elementos al ul le vamos a dar un padding de 10 píxeles No tampoco un padding arriba y

abajo al nav Por qué No de 10 píxeles tengamos huevos a ponerle seis seis Bueno vamos a poner esto acá bien Vamos a arrancar a hacer el over ahora vamos a hacer que los nav link en el estado de over o sea con un mouse encima tengan un background color del mismo que este pero vamos a hacerlo muy suave muy leve Ahí está es más les tengo un detalle Y si hacemos un efecto lindo si dejamos algún lindo efecto con esto bueno Vamos a intentarlo vamos a hacer que tengan por defecto un Border Radius cer

y acá tengan un Border radius 20 píxeles a ver cómo se ven bien que los envuelva vamos a agarrar la propiedad transition y darle Border 0.3 segundos bord radius 0.3 segundos y ahí bueno Ahí va me gusta mucho más vamos ser que sean en 0.2 y no es el borde es el background color ahora sí me gusta el efecto y acá vamos a darle 0.3 24 Ahí va perfecto me gusta el efecto que generamos lo único que voy a hacer va a ser darles un padding a estos Elementos un padding top más chiquito o sea

que el top sea de 8 píxeles y el padding de El nav sea de 8 píxeles y 8o píxeles pero vamos a darle a los elementos acá un margin de dos píxeles Bueno hasta ahora venimos bien Nada nuevo todo lindo Vamos a darle un tamaño a este botón de login vamos a volverlo un botón vamos a agarrar link login y vamos a darle la clase vamos a simplemente darle un background color este y un color blanco el tema es que Cuando ponemos el mouse encima sigue adquiriendo las propiedades del hover Entonces tenemos dos posibilidades para

hacer primero le vamos a dar este borde radius de entrada Entonces no necesitamos animarlo y después link login hover Solamente vamos a cambiarle el background y el background va a ser el mismo pero en este caso sí va a ser un poquito más visible porque el fondo de este elemento es así background color en vez de hacer que que pase que tenga Tres nada más vamos a hacer que tenga menos tres porque fíjense que estamos pasando de blanco naranjita sería e d c y con c estaríamos bien Igual vamos a hacerlo un poco más bruto

Vamos a darle nueve bueno ahora sí me gusta más Ven y como ya saben ahí me gusta darle por defecto a este tipo de elementos un padding distinto en este caso sería tiene ocho píxeles arriba y abajo eso está bien pero vamos a darle 24 pixeles a los costados me suele gustar más Espaciar el el botón a los costados y si vamos a darle un margin left un poquito más grande vamos a dárselo de seis píxeles así está un poquito más separado Ahí va ahora me gusta mucho más lo que estamos teniendo lo que estoy

viendo me gusta un poco más bueno Esta no es no está tan mal vamos a hacer que tengan una pequeña animación estos botones vamos a hacer que tengan de entrada un outline cero y un outline offset 0 Y acá vamos a animar estas propiedades outline 0.3 segundos y un outline offset 0.3 segundos y acá en over le vamos a dar un outline dos píxeles solid y vamos a hacer que tenga el mismo color del fondo pero el tema es que no queda muy lindo ven no queda muy lindo para eso vamos a hacer que tenga

el offset negativo menos o8 píxeles por ejemplo y ahí más o menos deamos hacerlo un poquito más oscuro que sea más visible Ah Es outline offset perdón outline offset Ahora sí ahí va ven este efecto raro que hace es un Efecto extraño no pero no queda mal Vamos a darle os7 y vamos a ver que tenga seis Ahora sí ven y ahí está es un efecto extraño pero nada ahí está si lo quieren usar yo se lo voy a dejar porque me interesa pero ustedes se lo pueden dejar sacar o hacer lo que quieran y

a este que está acá se lo vamos a sacar vamos a hacer que en over el L sea none ya está tenemos este botón que está acá que por cierto si es verdad que hay algo que no me está llamando deberíamos Hacerlo más oscuro vamos a hacer que tenga un d 7 60 Ahí va por ejemplo Vamos a darle en B Ahí va mejor ahí va mejor pero siento que muy lento no vamos a cambiarle los timings a el background color tiene que durar 0.24 esto tiene que durar 0.2 2 y estoo Ah ahora sí

Ahí va un poquito más rápido Sí porque la transición muy lenta no no está no me gusta mucho me me genera un poco de ansiedad Bueno ahora tenemos otro problema que es venimos bajando Ah Primero vamos a ver si se adapta dispositivos vamos a ver qué pasa Vamos a darle inspeccionar Uy no no se nos adapta una porquería no se adapta nada eh se rompe todo cómo tenemos que hacer para que se adapte bueno primero esto de darle un hate fíjense que se nos está rompiendo esto de darle un hate fijo a los elementos están

mal no se hace y no es recomendable dar un hate fijo para eso lo que vamos a hacer para arrancar es al jader no darle un he fijo sino que Darle un ahora Dónde tenemos el header acá darle un mi min hate Ven a todo lo que teníamos hate así se le suele dar un min hate y ahí está mucho mejor pero si es correcto usar el min hate y no el solamente el hate Okay eso para que le permitamos estirarse En caso de que tenga más contenido del que debería tener ya tenemos esto que

está acá y lo que sí les quería decir era que si se fijan Okay si tenemos este problema de que el nav no llega a a raparse Entonces Si lo hacemos podemos permitir que el na también se adapte a dispositivos móviles para eso vamos a venir al nav acá estamos con el nav y vamos a hacer que el Flex tenga un Flex wrap wrap y ahora sí Uy Perdón ahora sí Esto hace un wrap ven pero no estaría haciendo wrap esto ahora que es el otro Flex Bueno vamos a agarrar el nau y vamos a

darle Flex wrap de vuelta wrap Ahora sí Entonces ahora sí tenemos esto el problema que tenemos otra cosa que es más fea que tenemos Todo descentrado tenemos dos soluciones una agarramos el nav y le damos un textal Center de esa forma algunas cosas se centran pero no es la solución en este caso lo correcto sería en vez de darle space between darle simplemente Center entonces ahí va a estar centrado ven va a estar centrado vamos a tener siempre todo centrado y el único problema es que acá sí van a estar uno pegadito al lado del

otro Entonces eso es lo único que quizá no nos gustaría Pero esto lo podemos evitar también podemos evitar esto cómo hacemos para evitarlo simple Esto va a estar centrado pero le vamos a dar a cada uno en este caso al ul Por ejemplo si se fijan tenemos vamos a poner pantalla completa tenemos esto por un lado que es este div y esto por otro lado Así que vamos a poner acá y vamos a darle nav Flex item nav Flex item le vamos a dar nav Flex item a ambos divs que son los dos contenedores Y

es más acá vamos a poner Nav ul container y acá vamos a poner lo mismo vamos a poner img container o logo logo container Entonces ahora sí vamos a seleccionar estos dos vamos a poner nav logo container coma nav container y le vamos a dar un FX grow uno entonces ahora si venimos si lo chequeamos Cómo está quedando a ver que ahora está como más adaptado Y es más esto es positivo porque ya no no estaríamos necesitando el margin que les estábamos dando a los costados ven podemos deshacernos de este Padding asqueroso que le vamos

a dejar solamente en seis pero algo mejor todavía es que podemos agarrar por ejemplo solamente uno por ejemplo este y darle uno y agarrar el otro y darle Flex grow uno por ejemplo Pero podemos Agar y darle cuatro más o menos Entonces ahí tenemos una proporción que es más linda a mí me gusta más por lo menos como tu hermana lo único que sí quizá le voy a dar a los costados un 20 píxeles ahí queda mucho mejor y ahí tenemos un logo Que es adaptable porque si bajamos ven esto que está acá sí se

va a adaptar ven sí se va a estar adaptando El único problema que tenemos es el mismo es que no está centrado y queremos centrarlo cómo lo centramos bueno para eso le damos a este contenedor le damos un text alig Center entonces ahí debería centrarse este con el de arriba tenemos un problema parecido que es ul container nav ul container y le podemos dar un Tex in Center Ahí va ahí tenemos todo Centrado entonces esto si se adapta a diferentes dispositivos y por ejemplo lo vemos en un iPhone 14 ven ya está lo tenemos adaptado

no es la mejor estética y no es lo más lindo del mundo pero es funcional vamos a ver con 75 por de resolución Así se ve un iPhone 14 ven así se ve bastante bien Así se ve un iPhone 12 Por ejemplo Así se ve un Samsung Galaxy s20 acá Tenemos el mismo problema no tenemos centrado esto para eso vamos a centrarlo vamos a agarrar y Vamos a al nav ul darles un justify content Center entonces ahí debería estar todo centrado el problema es que acá tenemos el ni padding esto que están viendo acá es

porque el H por defecto es otro elemento que ya tiene un padding por defecto Así que al l le vamos a sacar el padding por defecto que trae ahí está y ahora sí tenemos todo bien centrad dito porque fuera de joda el u trae un padding por defecto que es un asco así que tenemos que sacárselo Porque si no el L siempre va a venir con un padding que es el padding que carga por defecto que hace que cuando pongamos un elemento aparezca con los puntitos y más adelante Bueno ese es el padding que trae

que es un Pero ahora sí ya está tenemos todo adaptado en diferentes dispositivos se ve hermoso tenemos nuestra web responsive y es estética miren Cómo se adapta Y lo bueno es que ya tenemos el diseño completamente adaptado Eso es lo que me gusta que ya Logramos adaptar el diseño a dispositivos móviles Pero tenemos un problema más feo ahora que el problema que tenemos es que cuando bajamos ven Esto no se queda fijo vamos a actualizar Ahí va bajamos y no se queda fijo yo voy a agarrar y voy a darle más texto todavía para que

lo notemos más más texto y le estoy dando puro texto Ahí está esta barra de navegación debería quedarse fija bueno para eso podemos usar una técnica muy copada que es darle A todo el nave entero Pos muchos le dan el position fixed Pero simplemente no es lo correcto lo que yo recomiendo es darle position y acá le vamos a dar en sticky Por qué si se acuerdan lo que pasaba si acá le damos top cero le estamos diciendo Ey Vas a comportarte como relative pero cuando llegues al cero vas a empezar a bajar Entonces tenemos

la la barra navegación así y una vez que llega Acá toki empieza a bajar entonces una forma de hacer una una un Menú de navegación que al usuario le damos la presentación con esto El único problema de esto igual es que el usuario no sabe para dónde ir no sabe que tiene que hacer scroll tendríamos que agregar algo que le indique al usuario que e tenés que bajar un poquito y continuarían ven bajando lo que sí podemos hacer igual es darle a este nav margin bottom de 10 pixeles para que por lo menos tenga un

espacio abajo y lo que sí le podemos dar es un Box Shadow de Vamos a que se vaya para al lado cero para abajo que se vaya a dos píxeles vamos a hacer que la sombra sea de cuatro píxeles no 10 píxeles está bien y vamos a dejarle acá vamos a Sí todo va a tener cero mejor pero sí vamos a darle un 25 acá vamos a darle un se tiene como este de decirle que se está escondiendo en lo que estamos metiendo como que se va escondiendo en el na Pero lo bueno de esto

es que no necesitamos hacer las cosas que hiciéramos si tuviéramos que Dejar la barra fija no queda fea es una respuesta muy interesante el position sticky para estos casos y ya está acá podemos comenzar a trabajar justamente el tema de la sección de main que como dije lo bueno sería agarrar el Main por ejemplo y acá veníamos y pondríamos Main section por ejemplo agarrarías el Main y le daríamos un Max withd de 1000 píxeles por ejemplo Te estamos limitando la ven de no de 800 incluso Ahí va y le damos un margin auto estamos limitando

el Main Section a esto y la gente puede leer bien porque más adelante vamos a ver los problemas que surgen cuando el contenido ocupa toda la pantalla y demás vamos a ser que tenga un font size de 30 píxeles ahí va y el usuario arranca leer tranquilo no se preocupa le damos un text rap prity y el usuario puede leer sin problema además podríamos agregar un footer también Por qué no pero vamos a dejarlo así Esto es lo que sería justamente desarrollar un layout con Flexbox estamos eh encargándonos de diseñar esto pero como vimos esto

tiene un montón de problemas porque justamente hay muchas cosas que no podemos hacer porque no al al cambiar no esta resolución a una resolución Mobile hay muchas limitaciones o o veces en las que la página se va a romper no es este el caso Pero estaría bueno por ejemplo que este menú pueda presentarse de otra forma Estaría bueno que este menú no se quede fijo porque un menú para celulares Fijo no les voy a mentir es feo tenemos que tener la posibilidad de agarrar este menú por ejemplo hacer que todo el body sea un elemento

flexible ponerlo en column que cada contenido ocupe lo que tiene que ocupar y cambiar el orden para que en Mobile aparezca arriba de todo y se convierte en un menú hamburguesa por ejemplo eso solamente lo podemos hacer si usamos media queris que es lo que vamos a ver más adelante en la sección de responsabiliza Pero esto como así Como lo ven es algo muy básico que podemos hacer con flexbox y Les acabo de mostrar dos componentes que no están mal hechos pero que realmente si tuviéramos flexbox podríamos hacer cosas como el Holy grail layout o

el diseño del santo grial que es algo que podemos hacer hacer con flexbox pero mi consejo es hacerlo con flexbox sí lo vamos a hacer con flexbox pero más interesante sería poder aplicarle media queries para hacer que cuando tengamos una resolución el Holy grain se comporte de una forma y cuando tengamos otra resolución se comporte de otra pudiendo lograr Ese diseño Entonces que se adapte a todos los dispositivos sin media queries No no es muy fácil de lograr digamos o sea en fin hay varias limitaciones que no vamos a entender hasta que tengamos que aplicarlas

y para qué voy a explicarles Cómo desarrollar algo y dejarlo incompleto no es una estupidez para vamos a finalizar con la sección de Flexbox la doy por finalizada pero no vamos a dejar de usarlo lo que acabamos de ver son las cosas básicas de flexbox pero yo estaba pensando y dije qué puedo hacer puedo ponerme a explicarles a la gente cómo hacer cosas con flexbox pero después dije claro pero la mayoría de cosas que hacemos con flexbox tienen además un uso de componentes que normalmente en responsive cambia o aplican media queries o también se combinan

con grid entonces digo para qué Les voy a enseñar a hacer componentes que necesitan de cosas más avanzadas para ser realmente funcionales o útiles en en pleno 2030 ponele bueno no no Para eso mejor vamos a enseñarlo bien y vamos a ir de a poco vamos a seccionar no puedo hacer todo una sección de flexbox por un lado toda una sección de grid por otro lado toda una y cuando tengamos que hacer un proyecto final recién ahí unimos todo no vamos a ir aprendiendo y vamos a ir unificando cosas para hacer Las cosas bien Así

que lo que continúa ahora es que veamos sobre responsive design hay muchas cosas que nos falta ver y por eso es importante que veamos esta siguiente sección para después Sí cuando terminemos esta sección vamos a ver los conceptos básicos de grid Okay vamos a aplicar bien grid correctamente y ahí cuando ya hayamos aplicado grid recién ahí nos podemos a poner a desarrollar componentes porque vamos a aplicar componentes que se usan en la Vida real pu si yo me pongo a desarrollar cosas ahora que dalto no haría en la vida real los estoy engañando Esa es

la diferencia entre un buen desarrollador y un mal desarrollador el mal desarrollador se las ingenia con lo que tiene solamente es esto entonces hago un diseño mediocre basándome solamente en los conocimientos que tengo que eso no está mal para practicar pero para crear componentes en la vida real están mal Y lamentablemente Yo sé el desarrollo web es duro porque para la mayoría de cosas que un desarrollador web construye en el día a día se necesitan casi todas las herramientas O sea no es como que aprendes un poquito y podés hacer algo y aprendes otro poquito

y puedes hacer otra cosa Lamentablemente los componentes reales las páginas web reales que se construyen hoy en día aplican casi todo el conocimiento técnico más avanzado de desarrollo web Para hacer componentes y cosas funcionales si yo solamente hacemos cositas con lo que aprendimos para estar haciendo cosas que o no son buenas prácticas o en la vida real no se pueden considerar componentes bien hechos no quiero que hagan un proyecto de este curso que esté mal hecho o que si tuvieran que hacerlo la vida real o que si yo lo hiciera la vida real lo haría

diferente no yo creo que cuando llegue el momento de construir cosas cuando Llegue el momento de crear componentes o elementos o una página web completa ustedes lo pueden hacer como yo lo haría realmente ustedes lo pueden hacer como un desarrollador de verdad lo haría realmente Así que vamos a ver ahora sí Todo sobre responsive design después vamos a ver grid y ahí vamos a comenzar a construir componentes en serio Perdóneme que vaya panqueque and tanto durante el curso sol lo que voy reflexionando sobre las cosas que creo Que ustedes necesitan para convertirse en desarrolladores de

verdad Así que suscribite si no lo hiciste todavía y basta de hablar vamos ahora sí con responsive design no sé si se dieron cuenta pero ya activé la lucecita Roja de fondo aunque no sea muy visible es un poco sutil pero está ahí y significa que nos podemos adentrar en una sección que de a poquito se empieza a complicar más como en los viejos tiempos que la complicamos con luces rojas basta de Hablar Comencemos con la sección responsive design vamos con responsive design Bueno ahora vamos a ver todo sobre los bloques flexibles básicamente ahora lo

que vamos a ver es Cómo crear elementos contenedores como tal o o mismo elementos no que se vayan adaptando fluidamente acá viene la PR se vayan adaptando fluidamente Okay o de forma flexible a las diferentes resoluciones de pantalla ahora no vamos a enfocar cosas como por ejemplo el min Wiet min hate el Max wiet el Max hate Y también ver un poquito de flexbox para que aprendamos Cómo aplicarlas incluso dentro de flexbox la sección de flexbox como dije no es que termina sí termina la parte dedicada a flexbox ahora vamos a seguir viendo flexbox pero

en otro tipo de contexto Así que tranquilos por eso vamos a seguir aprendiendo bueno para arrancar tengo el mismo diseño de siempre que es un Body simple que le vamos a dar un div a este div le vamos a Poner la clase flexbox o más fácil todavía le vamos a poner la clase bloque y vamos a primero principal jugar un poco con sus propiedades no con sus medidas si yo por ejemplo a esto a este div no le damos tiene la clase bloque le vamos a dar un wid de 400 píxeles por ejemplo no un

he de 300 píxeles Por ejemplo si le damos un background color vamos a dar un color rojo Vamos a darle un color más Genuino Vamos a darle 6a F ahí va se parece mucho a que me gusta a Mí que 48e pero este es más para poner un texto de fondo es más Vamos a darle 7b hasta acá parece que no tenemos ningún problema todo bien le vamos a dar un margin auto para que se Centre ya está es un bloque que lamentablemente no podemos decir que se adapta porque no no se adapta si se

fijan no es un bloque que se adapte De hecho si hacemos un pequeño zoom Ven y nos pasamos de su resolución tenemos un scroll que está acá abajo que nos permite hacer Yo acá Le voy para que lo entendamos mejor le voy a poner un lorem okay Ahí va y ahí está ven o sea básicamente si el contenido entra perfecto entra pero si no entra no se adapta ni cambia su resolución no nos coge entonces ahí tenemos un primer problema vamos hacer eh algo para resolver este problema pequeño que estamos teniendo ahora que es primero

agarrar y en vez de darle un Wi fijo poder darle un min wid Porque si nosotros queremos que tenga un wid Mínimo así se lo podemos dar para que tenga como mínimo este wid o podemos hacer que tenga un wid máximo Entonces yo por ejemplo digo que el wid máximo tiene que ser este le pongo Max entonces de esta forma si yo achico a acá esto se va a achicar también ven se achica y el contenido se adapta Entonces ya encontramos una forma de hacer que el contenido tenga una resolución que queremos si no queremos

que crezca más hasta acá crece Okay pero tiene la Posibilidad de de estirarse no lo mismo podemos hacer caso contrario podemos también por ejemplo darle Max withd y le damos por ejemplo de 800 píxeles No Entonces le vamos a permitir estirarse ven le permitimos estirarse pero hasta 800 píxeles Vamos a ponerle de 600 Vamos a darle 600 mejor porque si no Ahí va se puede estirar hasta acá ven o sea se adapta el contenido pero se estira hasta acá y lo mismo con achicarse vamos a hacer que se puede achicar hasta 500 Nada más ahí

tenemos el contenido hasta acá se estira más no O sea se estira como máximo hasta 600 píxeles es más el wid por defecto vienen 100% entonces lo que va a intentar hacer el wid es adaptarse al 100% de la pantalla okay Porque el wid si bien el Wi por defecto es auto a lo que voy es que siempre se intenta adaptar al 100% de la pantalla Entonces si si siempre se intenta adaptar al 100% si el 100% de la resolución es vamos a dar un min en vez De un Max un min el min with

que tiene que tener es de 500 píxeles y el Max wid es de 600 estamos diciendo Ey tu 100% de que tenés por defecto tiene que ser mayor a 500 ven tiene que ser más grande que 500 pero menor a 600 en este caso es mayor a 600 Entonces no se adapta el contenido se queda en 600 píxeles si queremos achicar podemos pero hasta ahí ven hasta 500 después de 500 ya no se puede achicar más vamos a hacer que sea 400 para que se aprecie mejor Entonces Se estira hasta 600 después se empieza a

en y se encoge hasta 400 después de 400 no se encoge más Esto es lo que nos permite hacer tener este tipo de propiedades min wet y Max W Entonces ya de entrada logramos encontrar una forma de hacer que el contenido se adapte manteniendo una medida Entonces nosotros podemos decir e Mira la medida deseable es esta Okay ya tenemos nuestra medida deseable pero nuestra medida mínima y máxima es esta le estamos de perm Entiendo que se mueva en un Rango después tenemos el problema con el hate que el he como digo no es muy recomendado

porque acá tenemos un he de 300 píxeles tenemos un problema primero es que no se está adaptando Entonces el contenido puede hacer que haya mucho espacio en blanco que en este caso es espacio en azul pero básicamente hay espacio vacío que no se está rellenando entonces no es correcto dar un hate ahora supónganse que por algún motivo Raro tienen que poner un hate listo ponemos el hate Qué pasa si nosotros venimos y escribimos más lorem y escribimos más contenido acá vamos a tener un problema se desborda entonces acá tenemos el primer problema de definir un

hate Y es que el contenido se desborda qué podemos hacer Bueno en caso de que ustedes quieran definir un hate mi consejo a menos que sea muy estricto y necesiten aplicar la barra de scroll o algo mi consejo si no se les rompe la Interfaz es utilizar la propiedad min he entonces de esta forma ven el contenido se adapta ustedes pueden tener menos texto y se va adaptando ahora si tienen menos e igual va a medir 400 píxeles porque es lo que ustedes le dijeron Perdón 300 va a medir lo que ustedes le queon es

quiero que midas 300 píxeles pero vas a medir eso como mínimo si necesitas medir más para adaptarte a lo que te estoy dando como tu contenido lo puedes hacer No importa te vas a adaptar Entonces ahí tenemos contenido que se va adaptando tanto al tanto al alto como al ancho y esto es interesante porque ya tenemos un contenido flexible sin necesidad de usar flexbox Entonces ya de entrada estamos logrando algo interesante no el tema es que ahora por ejemplo si quisiéramos tenerlos en línea tenemos que darles inline block por ejemplo vamos a hacer que el

min withd sea de 200 Ahí va 150 y el Max que sea de 200 y vamos a poner varios de estos Bloques vamos a sacarle un poco más de texto y vamos a sacarle el hate porque no lo necesitamos en este caso Ahí estamos vamos a crear Así vamos a crear varios elementos estos elementos son inline block se posicionan uno al lado del otro Pero cuál es el problema de esto ahora los elementos se no es como que por más que tengan un mid wid y un Max wid no se adaptan si yo le doy

wid 100% aunque ya tengan su posibilidad definida El problema es que no se Adaptan porque están de esta forma pero si queremos hacer que los elementos se puedan adaptar para esto nació flexbox Okay fíjense Qué pasa si yo ahora por ejemplo estos dos elementos que tenía vamos a sacarle texto porque la verdad que ya me está dando un poco que tenga todo este texto Ahí vamos a crear tres cajitas tenemos este este este tema de que sí se adaptan o sea permite que se adapten Pero yo lo que quiero es hacer que puedan crecer para

eso voy a meter Estos tres bloques adentro de un contenedor que va a ser flexbox y adentro meto los bloques Ahora sí yo voy a agarrar y voy a poner el flexbox y le voy a dar display Flex entonces de esta forma Ahora sí son flexibles Okay son flexibles y miden lo que queremos si se fijan ven como máximo 200 píxeles pero si se tienen que achicar se achican pero hasta 150 píxeles después empiezan a romper ahora eso tenemos la otra propiedad que se la damos directamente a La caja flexible que es Flex wrap wrap

ya esto lo vimos también no hay nada nuevo okay se van tirando para abajo esto es bastante interesante Entonces se adaptan Pero qué pasa es lo mismo que antes o sea se van adaptando todo lo que quieras pero es lo mismo que antes porque no cambian su tamaño Bueno entonces les permitimos que crezcan Flex grow 1 y de esta forma V les permitimos ocupar todo el ancho disponible entonces para permitirles que crezcan y para Terminar de darles el toque porque el Flex grow no sirve de nada si no definimos su tamaño base entonces ponemos Flex

basis cero Esta es la técnica correcta darle Flex grow 1 Flex basis 0 o para eso le damos directamente un Flex 1 y es exactamente lo mismo porque también aplica para el shrink Ahora sí si agarramos esto ven van a encogerse y si no se pueden encoger más se tiran para abajo pero se adaptan ven tienen la medida máxima que le dimos la Mínima que le dimos Y tenemos componentes flexibles Entonces yo por ejemplo voy a agarrar el bloque le voy a dar un font size 12 píxeles para que parezcan que se están adaptando le

voy a dar un padding 20 píxeles mentira de 10 le voy a dar un margin de cuatro píxeles y ahí está ahí tengo a mis componentes ya está lo logré el tema es que este por ejemplo ven no se adapta debería tener un grow pero este grow no se lo estamos permitiendo porque tenemos el Max with Ven lo máximo que pueden crecer es esto y no se están adaptando Entonces qué hacemos venimos acá y le damos un justify content le podemos dar Center por ejemplo o sea ahí siempre van a estar al centro crecen pero

se mantienen al centro Esta es una de las prácticas más comunes que esté todo el contenido al centro Entonces se adapta y si se va para abajo se queda en el centro okay No se olviden que esto tiene su medida máxima lo que podemos hacer es para Hacer que no tenga una medida máxima qué hacemos le sacamos el Max wid y siempre el contenido se va a adaptar Y yo qué es lo que voy a hacer ahora es decirle que el flexbox tenga un Max wid Entonces al flexbox Total le doy un Max wid por

ejemplo de 400 píxeles Y le doy un margin auto así también se centra Ahí está entonces ahora tenemos esto que está acá y si se tienen que achicar y hacer wraap se hacen WAP le voy a dar un Wi de 200 píxeles si se tienen que Achicar se achican ven vamos a darle acá de 500 Entonces si se tienen que achicar se achican pero si no se quedan así y de esta forma podemos llegar a encontrar una forma interesante de construir un layout Vamos a darle un Max wid de 600 para que sea más más

real de esta forma se pueden construir layouts que son interesantes que son responsive porque acá tenemos un artículo acá tenemos otro artículo acá tenemos el footer por ejemplo entonces cerramos Ven y se Adaptan pero cuando ya es una resolución de celular bueno se van a poner uno por debajo del otro Entonces esto es interesante esto ya lo vimos es algo Bastante simple de esta forma podemos crear sin media queries component flexi bloques flexibles y bloques que se adapten ahora Esto no es lo mismo con las imágenes parece que adaptar imágenes Es simple y que podemos

adaptar una imagen eh con técnicas parecidas pero adaptar una imagen todavía es más simple Pero a su vez trae más complicaciones porque tiene más variables Así que para una página aplica perfecta y lo que vamos a ver ahora es lo mismo que estamos viendo acá que es contenido flexible bloques flexibles pero aplicado a imágenes y videos vamos a ver cuáles son los problemas que surgen cuando queremos aplicar esto a videos por ejemplo y Cómo resolverlos y cómo hacer videos que se adapten a todas resoluciones imágenes que hagan lo mismo Que se adapten okay Así que

vamos a ver eso ahora videos y imágenes flexibles vamos Bueno ahora lo que vamos a ver es imágenes y videos flexibles No no vamos a ver eso vamos a aprender a construir eso pero bueno se entiende no hay que es medio fan del blog de notas para entender eso bueno para arrancar vamos con lo más fácil las imágenes las imágenes flexibles son simplemente imágenes que se cambian o se adaptan para adaptarse Okay a la pantalla que Los contiene o a la resolución en la que se encuentran nada más también puede ser al contenedor no lo

importante es eso es crear una imagen que se adapte a lo que necesitemos que se adapte sobre todo hablando de resoluciones hay una forma que es la forma podemos decir la estándar la más común del mundo y la más recomendada para hacerlo con imágenes primero voy a venir acá y crear una imagen muy simple voy a darle en source y vamos a poner la imagen logo o dalto Dal alto. png era la imagen Acá está perfecto la verdad que es medio complicado pero vamos a poder agarrar una imagen y ahora sí no podemos venir acá

y darle a la imagen un Wi del 100% por ejemplo porque esto no puede generar bastantes problemas porque supónganse que la imagen es esta no la imagen eh tiene una resolución que es gigantesca la estás viendo desde una televisión y la televisión es inmensa vos no querés que la televisión se reproduzca una Imagen que es chiquitita es decir vamos a intentar hacerlo con una imagen más chiquita vamos a hacerlo en serio esta imagen por ejemplo tiene una resolución muy chiquita la voy a guardar como img.png y la voy a cargar ahora le voy a poner

img.png si se fijan Se ve toda pixeleada ven voy aar 100% Se ve toda pixeleada si yo no le diera esto la imagen tendría esta resolución no entonces el problema de eso es que se ve toda pixeleada voy a Hacer un pequeño zoom para que se vea bien entonces hagamos de cuenta que la resolución Así se ve bien en realidad no se ve bien porque se ve bien al 100% pero vamos a dejarla ahí y Hacer de cuenta que se ve bien Es más vamos a dejarla ahí y Hacer de cuenta que se ve bien

Si nosotros ponemos esto le estamos diciendo que siempre va a tener una resolución que ocupe su 100% Y eso está mal nosotros tenemos que decirle que va a tener un Max wid del 100% Por qué Porque de esta forma nosotros lo que hacemos Es si tenemos un contenedor vamos a hacer de cuenta que la imagen original es esta si tenemos un contenedor que es más chiquito se va a adaptar pero si tenemos un contenedor que es más grande que su resolución la imagen se mantiene Incluso si le quieren dar un margin auto se lo pueden

dar y no hay problema la imagen se centra está todo bien entonces ya está así es como lo hacen Okay el problema de esto es que A veces el hate nos juega un poquito en contra y por eso lo que se suele recomendar es venir acá y darle un hate auto que si bien Estaría bueno establecerlo lo vamos a hacer cces ya con estas dos propiedades tenemos todo lo que queríamos definido la imagen se adapta crece como máximo un 100% pero un 100% de Qué bueno lo máximo que va a crecer es el 100% del

dispositivo que lo está rodeando siempre se va a adaptar como máximo al 100% de una pantalla que Sea mayor a él pero cuando ya alcanza el el tamaño original de la imagen no va a seguir creciendo pero si solamente le diéramos with ven siempre va a ocupar todo y no nos interesa eso porque a veces si es una imagen que tiene una resolución chiquitita lo que conseguimos con eso es que al agrandarla se vea en Baja calidad Entonces estamos haciendo de cuenta que eso no pasa vamos a usar otra imagen vamos a usar la imagen

dal alto. png y vamos achicarla mucho Entonces Si yo le doy Max with 100% Pon l me queda ahí y ahí la imagen se ve reb se ve reb vamos a hacer un un pequeño zoom ahí se ve bien la imagen ven se ve perfecto si yo agrando la imagen mantiene su imagen original Entonces se sigue viendo bien pero si yo le dier un wd El problema es que ahora van a ver que la imagen empieza a perder calidad ven ahí ya está perdiendo calidad ustedes quizás no sé si lo notan tanto o no pero

yo desde acá que lo estoy viendo En un monitor bastante grande 32 pulgadas Lo noto Entonces yo ahora estoy notando que se ve con baja calidad entonces lo que yo quiero decir es decir e no no no quiero que vos te veas con baja calidad quiero que tu tamaño máximo sea como máximo lo que tiene el contenedor pero tu wid tu wid va a ser auto que es el valor por defecto entendés que va vamos a decirle que el tamaño va a ser automático pero el más grande va a ser del total entonces de Esta

forma ya tenemos la imagen adaptada si la imagen es chiquita se adapta ven se adapta a dispositivos más pequeños vamos a ver este bloque de atrás ahí está se adapta a dispositivos más pequeños si tiene que adaptar se adapta pero si tiene que crecer la imagen no es que va a crecer se va a mantener en su resolución original Entonces esta es la forma correcta de trabajar con imágenes Ahora cuando lo hacemos con videos eh cambia un poco si queremos hacer lo Mismo que hacemos con un video pero en una imagen vamos a tener un

problema y acá tenemos una razón por eso la razón por la que no podemos aplicar el mismo enfoque un Max swed del 100% y un he auto es justamente por como los navegadores manejan los elementos el iframe el video y demás las imágenes tienen dimensiones intrínsecas es decir tienen un ancho y tienen un alto Qué significa esto que le permite a los navegadores redimensionar losos Eso es Todo o sea se puede mantener su relación aspecto cuando se redimension o sea cambiamos el Wi y automáticamente puede cambiarse el hate pero el problema es que elementos como

los videos se comportan de forma diferente aunque sí se puede aplicar un Max with del 100% estos elementos no ajustan su altura automáticamente para tener una relación interesante de aspecto o sea para mantener su aspecto original no lo hace Entonces si no lo manejamos bien Esto Puede resultar en que un video lo que hace es que se salga de su contenedor o de repente se estire y se vuelva no mantenga su aspecto y nos quede más gordo más flaquito y no está bueno entonces le pedí a chat gpt que me explique cómo hacerlo y me

respondió este código que están viendo ahora en pantalla Igualmente está el otro bando que mira eso que están viendo en char gpt y dice Y la verdad que el código ese medo que se CA pedazos que es ese Padding top Random ahí de 56.25 que es color HD tam mal es un er de ch no lamentablemente no es un er de chat gpt y Esta es una de las tantas formas que tenemos de de hacer que los videos sean responsive Okay es agarrar un contenedor meter el video adentro y darle esas propiedades de hecho es

un truco muy común llamado el padding top hack que lamentablemente no es lo mejor para hacerlo no hagan todo lo que está gpt les dice qué es eso que les dije no Envolvemos el video en un contenedor y le damos un margen que incluya la relación de aspecto que la mantenga ahora vamos a verlo bien voy a hacer una cosa vamos a poner una etiqueta de video Okay y vamos a ponerle un source video. mp4 vamos a sacar la imagen vamos a dejarla ahí y acá tenemos el video Vamos a darle Controls o muted y

autoplay se reproduce perfecto hasta acá estamos bien Podemos venir a imagen y al estilo y decirle bueno el video va a tener Okay Un Max wid del 100% por ejemplo vamos a hacer un pequeño zoom perfecto hasta acá se mantiene parece que se mantiene todo muy lindo pero no es lo correcto la técnica que nos dicen no para no romper los videos ni tampoco hacer que se se vean mal que si bien Ahora no pasa pero tendría que crear todo un contexto para mostrarles cuá se rompe solamente Síganme lo que les digo que lo van

a entender para eso se agarra el video Okay se pone un contenedor que suele ser El container container y lo que se hacía antes se lo voy a mostrar es agarrar este container y no le dábamos las medidas al video lo que hacíamos era primero esto lo sacábamos chao afuera después Agarramos al contenedor okay Y qué le dábamos le dábamos un Pos relative al video le dábamos un posi absolute a este le dábamos un Max wid del 100% Ahí está O de hecho un wid del 100% Por qué no al video le dábamos un wid

del 100% Ahí está a esto le damos un Max wid del 100% al video le damos un Max wid del 100% Entonces ahora la pregunta es con el video en un contenedor adentro Cómo podemos hacer para que mantenga lo que nosotros le pedimos es decir con la imagen es fácil ya sabemos le damos el Max with y se mantiene Pero cómo hacemos con esto bueno acá lo que hacemos Es a esto le damos un fíjense interesante un padding acá viene la magia padding top del 56.25 por. espérense a esto le damos un Top cer left

0 solo con estos dos estamos bien y a este que está acá esto queda así pero le vamos a dar un he del 100% así también se adapta a la altura acá le damos un Perdón acá menom morfe le damos un he cer hasta acá estamos bien el he tiene que estar cero pero acá le damos un Max with y acá le damos un Max with y al al el higher se lo damos al contenedor y ahí está ya tendríamos el video que se adapta ven de esta forma acabamos de adaptar el video y el

Contenedor al total esto es esto es excelente ven le damos inspeccionar y ahora el video efectivamente se adapta es decir se adapta a la pantalla Ven ahora esto ya no se usa más para eso ahora usamos una relación de ratio un aspect ratio es decir la forma moderna es le vamos a sacar el position relative le vamos a sacar el position absolute le vamos a sacar las propiedades de de Top y left esto lo sacamos le vamos a sacar el hate el Max W se lo vamos a dejar le Vamos a sacar esto y acá

solamente le vamos a dar el aspect ratio y le vamos a dar 16 nu Por qué vieron el 56,25 por que estábamos haciendo básicamente estábamos haciendo que el padding top suba hasta si la caja es toda esta que el padding top sea del 56 pun eso por qué Porque eso conformaría el aspecto que estamos buscando Cuál es el aspecto que estamos buscando que la resolución sea 16 de ancho 19 de alto entienden Entonces Cuando hacemos eso tenemos que hacer 9 Divo 16 y nos queda esto por 100 nos queda esto entonces este es el porcentaje

de padding Button que le tenemos que dar 56.25 por de ahí sale esta es la relación que tiene pero para eso en vez de hacer 9 div 16 qué hacemos decimos 16 sobre 9 y de esta forma ya estamos calculando el aspect ratio Ven y ya está lo mantuvo Entonces esto del ratio es espectacular porque si le damos ahora un He por ejemp ejemplo no un hate de 600 píxeles fíjense Qué pasa mantiene el aspect ratio no porque le dimos un Max with Entonces le vamos a sacar el hate y lo va a mantener Pero

de esta forma el aspect retio se mantiene se mantiene porque lo que hicimos fue adaptar el contenedor a el aspect ratio y ahora sí tenemos un video completamente flexible y agarramos el contenedor le damos un margin auto Y tenemos al contenedor hasta incluso centrado Es increíble cómo Logramos tener un video así fascinante Ahora si quieren que tenga un Wi del 100% y no del Max wid del 100% lo dejan así y ahora sí lo mismo en vez de tener esto acá el wid se lo dan al video Entonces ahora sí le dan un wid del

100% No Y ahí se mantiene Entonces es lo mismo pero ahora sí con el video adaptándose a la máxima resolución Pero bueno ahí ya los dejo a ustedes que elijan lo que ustedes quieran y de esta forma recuerden la y véanla bien esta es La forma de hacer un video flexible también aplica para los iframes que lo vamos a ver más adelante pero también aplica para los iframes lo que vamos a ver a continuación son los atributos souret y eh sizes okay son atributos que nos permiten definir ciertas condiciones entre comillas no para cargar imágenes

por ejemplo cargar una imagen cuando hay más zoom o cargar otra imagen cuando hay menos zoom cargar una imagen Cuando tenemos una resolución de pantalla o Cuando tenemos otra entonces es interesante esto porque siento que podemos aprovechar estos dos atributos para hacer contenido que cargue e en base a la resolución entonces de esta forma si un celular es chiquitito le cargamos una imagen que no pesa mucho que es más chiquitita Y si está en una computadora le cargamos otra imagen que sea adaptada a computadoras de esa forma vamos a poder mejorar la resolución dependiendo del

dispositivo y no Sobrecargar al usuario Así que vamos a ver cómo usar source set y sizes vamos bueno gente ahora el tipo más fachero del mundo o sea yo les voy a explicar lo que vendría siendo dos atributos el atributo souret y el atributo sizes Okay como ven está todo de Rojo No porque le entrea a tu vieja no se ponía muy turbina no no no en realidad es por el hecho de que bueno como estamos en una sección que principalmente es de html Aunque estemos En un apartado responsive responsive design como tal no implica

al 100% css hay muchas cosas del responsive que tienen que ver mucho con la estructura de html entonces la verdad que me la complico un poquito pero como esto es más html la pongo de este color no se la pongo de este color Bueno entonces lo primero que vamos a hacer yo acá me creé la carpeta y lógicamente la puse dentro de la clase html voy a dar en Go Live bueno acá ya lo tengo perfecto Básicamente tengo un estilo muy simple no que es este backon que lo voy a sacar tengo Border boox fan

family Bueno lo que ya sabemos y lo voy a dejar por acá para arrancar souret y sizes Okay son dos atributos de html que trabajan en conjunto src set o source yo le digo source set source set y sizes Okay son dos Ah me mordi la lengua souret y sizes son dos atributos de html que trabajan en conjunto para ofrecernos una solución más avanzada y flexible para poder Justamente Cargar imágenes respons estos atributos lo que hacen es permitirle al navegador elegir cuál Debería ser la imagen adecuada según cierta condición pueden ser por ejemplo que la

condición sea si la página tiene un zoom o si un una la ventana llega a cierta cantidad de píxeles ahora lo vamos a ver tengan en cuenta que esto es fundamental para mejorar el rendimiento y la carga de la página no se olviden que si bien lo vimos del momento uno los usuarios se Van o abandonan una p página en el 75 por de los casos Si no carga antes de los primeros 4 segundos es importante que optimices lo que más podamos en lad Time es decir el tiempo de carga para arrancar Yo acá tengo

la carpeta en donde tengo mi imagen la que vine usando bastante durante el curso pero lo que voy a hacer con esta imagen es convertirla a diferentes resoluciones Okay qué es lo que voy a hacer ahora voy a abrir gimp y lo voy a hacer esto Básicamente lo pueden hacer ustedes en cualquier momento pero yo básicamente lo que estoy haciendo es hacer que tengamos una sola imagen con diferentes resoluciones es un paso super opcional pero que es muy óptimo acá por ejemplo tengo la imagen que tiene una medida de 900 píxeles por 900 píxeles ven

acá arriba me dice la medida Acá está 900 píxeles por 900 píxeles yo lo que voy a hacer es imagen tamaño de Lienzo y la voy a dejar de 600 píxeles por 600 Píxeles Ahí estamos y la redimension ahora qué hago lo que hago es escalarla a 600 píxeles y ahí se me escala perfecto y esta la voy a guardar como dalto medium dalto medium ahí la export y para dispositivos más chiquititos si ven ahí perdió un poquito de calidad vamos a de vuelta tamaño de Lienzo y la voy a exportar en 360 es una

calidad más chiquita todavía y la redimension y ahora agarro la imagen y hacemos lo mismo 360 por 360 ahí la escalo y ahora La imagen Es más chiquita si hacemos un zoom vamos a ver que ahora sí hay una diferencia se nota claramente la diferencia Entonces ahora sí la guardo como sm entonces ahí tengo tres imágenes si se fijan tengo una imagen vamos a carrar las tres imágenes en la web para que lo vean solamente para que lo vean la primera imagen es esta de alto. png la segunda sería de alto medium que es más

chiquitita y la otra es de alto small que es todavía más ch quita cuál Es el problema de esto bueno supónganse que nosotros tenemos una imagen responsive no venimos acá y agarramos la imagen y a la imagen le vamos a dar un Max wid del 100% no vamos a hacer de cuenta que tiene un Max wid del 100% vamos a agrandar el zoom cuál es el problema bueno la realidad es que al principio no parece que hay ningún problema pero si nosotros estamos cargando la imagen por ejemplo la ad alto común se nos va a

cargar esta Imagen que si se fijan se adapta a pantallas más chiquitas Como por ejemplo esta vamos a ver cuál es la resolución de esta pantalla la resolución de esta pantalla es de 500 píxeles o sea lo que tenemos acá Este ancho total es de 500 píxeles la pregunta que yo les hago es Por qué tengo que cargar una imagen de 900 píxeles para achicarla y que se ajuste a solo medir 500 si la imagen mide más ven si yo la sigo agrandando la imagen se va a estirar hasta los 900 Píxeles pero yo en

este caso la estoy encogiendo más entonces La pregunta es si yo tengo una imagen de 900 píxeles no Existe alguna forma de decirle al navegador Ey escucha como es una imagen que mide 900 píxeles por 900 píxeles y tu pantallita es de 500 píxeles carga una imagen que sea la misma pero con menos calidad porque se va a ver Exactamente igual ya que la resolución no cambia Entonces qué hacen ustedes le dicen Bueno en vez de tener esto van a Tener la de alto medium y se ve igual no cambia por qué Porque lo están

viendo desde una pantalla más chiquitita sí pierde un poco de resol pierde un poco de calidad Perdón pierde un poco de calidad pero mantiene la resolución Por qué Porque si ustedes la están viendo desde un dispositivo más chiquitito no deberían ver afectado realmente a nivel perspectiva la resolución lo mismo que si la pantalla todavía la siguen achicando dicen Bueno en vez de poner un Medium pongo un small Entonces si la la resolución todavía se vuelve más chiquita en vez de poner la medium ponen la small entonces acá por ejemplo en una pantalla de este tipo

pondríamos la resolución small porque tenemos un tipo de imagen que sería una imagen para dispositivos más chiquititos una imagen para dispositivos que tengan una pantalla más grande y una imagen por ejemplo para computadoras Entonces de esa forma si un celular a ver si estamos Todos estamos de acuerdo en que un celular tarda más en cargar que una computadora normalmente una computadora tarda menos en cargar que un celular a menos que es un celular de Última Generación Comparado con una compo medio pelo pero lo que voy es que si ustedes abren una página desde un celular

lo más normal es que como ustedes tienen menos espacio y tarda más tienen que aprovechar los recursos de su celular no pueden hacer que su celular cargue una Imágen así de enorme si la van a ver en una pantallita así no hagan que carga una imagen más chiquita bueno para esto apareció Este primer atributo que es souret hasta acá está todo bien se carga la imagen si es más de00 más de 900 no crece si es menos de 900 crece yo lo que puedo hacer con esto es decir al navegador Ey escúchame Mira tenemos otras

versiones de la imagen para eso vamos a decir souret y le vamos a decir tenemos una versión de la imagen llamada Dalto png vamos a arrancar por la más chiquita le vamos a mostrar dalto small vamos a arrancar por la más pequeña de todas le vamos a decir tenemos Mall que mi consejo es que dalto Mall la apliques para resoluciones de hasta 360 píxeles o más fácil de 400 píxeles hasta resoluciones de 400 píxeles las podés aplicar o sea podés Mostrar small hasta pantallas que tengan 400 píxeles pero no ponemos el píxeles ponemos el doble

Okay así se pone el W vamos a poner una coma Vamos a poner pantalla completa porque si no no lo vamos a ver vamos a poner una coma y vamos a decirle tenemos otra imagen que es dalto medium.pdf 1000 píxeles entonces en pantallas que tengan hasta un 400 de wid intenta cargar esta en hasta 600 de wid intenta cargar esta y hasta mil de wiet intenta cargar esto Yo vengo acá actualizo vamos a ver la pantalla acá vamos a abrir la imagen y acá la tenemos vamos a venir a inspeccionar y acá vamos A ver

esto observen esto eh acá no se nota porque justamente nosotros los desarrolladores somos los únicos que redimension así una pantalla pero vamos a ver cuando yo tengo menos de 400 píxeles por ejemplo ahí actualizo y si venimos a la pestaña de Network vamos a ver que la imagen que está ando es esta es dalto small Por qué Porque el navegador no se escuchó ojo porque a veces no se escucha a veces no eh depende del navegador el navegador elige Pero le estamos dando una recomendación al navegador le estamos diciendo Che mira en este caso Bueno

me cargó el dalto small si yo la agrando más de 400 píxeles ven fíjese que acá hay un cambio mínimo ahí me acaba de cargar otra que es dalto medium ustedes vieron eso vamos a ir de vuelta vamos a arrancar en medium está dalto small y fíjense cuando yo empiezo a superar una distancia fíjense el cambio que hay Ah va lo vieron ese cambio bueno Y fíjense acá Abajo me acaba de cargar de alto medium entonces una vez más cargamos amos acá y fíjense cómo aparece abajo de alto medium Cuando hacemos un zoom Tucson ahí

apareció acá abajo y seguimos creciendo la pantalla Okay y fíjense que apareció dalto pun png Qué significa eso que siempre me va a estar cargando una imagen más grande entonces el el navegador dijo Mira para arrancar con una resolución de estos píxeles te vamos a cargar esta si seguís creciendo por Ejemplo a 400 y pico te vamos a cargar esta otra la de alto medium y si crec más todavía por ejemplo acá que son 650 píxeles te vamos a clavar esta que es de alto punto png Entonces el navegador el dije y en pantallas que

son chiquititas me carga la small que es una imagen chiquitita en pantallas que son medianas me carga esta que es una imagen mediana y en las pantallas más grandes me carga la última que es la imagen más grande entonces acá tenemos la más chiquita de Todas tenemos esta que es una mediana y tenemos esta que es la más grande entre la más grande y la más la mediana no parece mucho pero si hacemos un pequeño zoom acá vamos a poder ver que hay una diferencia de calidad ven voy a hacer de vuelta un zoom ven

La hay ahí Creo que se nota un poco hay una diferencia de calidad pero la diferencia es que esta es para pantallas más grandes y esta para pantallas más chicas y esta ya y descuento la calidad se cada pedazo a Comparación de las anteriores pero por lo menos nos aseguramos de que en dispositivos que necesitan esta resolución se puedan ver bien entonces así es como funciona souret y después tenemos otra el otro atributo que solamente funciona solo funciona con souret el otro atributo es vamos a dejar otro espacio y poner sizes sizes le dice al

navegador o le da una recomendación sobre Cuáles serían los máximos de altura para que puede trabajar vamos a Ver ahora acá le vamos a decir Mira vamos a abrir paréntesis y te voy a especificar algo llamado media queries o o una condición en este caso si tu pantalla o sea va a tener un Max with de 700 píxeles esto es una media quel estamos diciendo Mira para pantallas que son menores a 700 píxeles te recomiendo que insertes una imagen que tenga hasta 600 píxeles acá sí podemos poner el Pixel ahora para pantallas que son más

chiquitas Perdón para pantallas que son Más grandes vas a usar una imagen de 900 píxeles Entonces eso es lo que te dice Mira para pantallas que tienen hasta 700 píxeles O sea si la pantalla tiene 700 píxeles o menos mi consejo es que pongas una imagen de 600 píxeles Y si la pantalla tiene más de 700 píxeles mi consejo es que cargues una imagen de 900 píxeles entonces acá le decimos Mira tenemos estas tres imágenes esta imagen es para pantallas con estas resoluciones esta imagen es para pantallas con estas Resoluciones y esta imagen es para

pantalla con estas resoluciones y abajo le estamos diciendo Aparte te digo otra cosa si tu pantalla es de este tamaño mi consejo es que uses una imagen de 600 píxeles Como por ejemplo Esta que está acá o Esta que está acá y si la pantalla es más utiliza una de 900 píxeles Como por ejemplo Esta que está acá que tiene 1000 ahora vamos a darle 1000 para ser más exacto mejor en vez de 600 píxeles le voy a decir 360 y acá le voy a poner 900 Por qué no ahora yo lo que quiero es

esto quiero Mira si el maxwidth es de 400 vas a cargar una imagen de 300 píxeles Ahí vamos a darle coma vamos a crear Otra condición porque el coma separa condiciones Entonces vamos a venir acá vamos a decirle Okay ahora vas a cargar imágenes de de hasta 600 píxeles Okay si la resolución tiene por ejemplo hasta 600 y si no recién Ahí vas a carrar imágenes de 900 píxeles no Entonces esto es Vamos a repasar si la Pantalla tiene 400 píxeles o menos cargá imágenes de hasta 360 píxeles Si tiene menos de 600 vas a

cargar de 600 píxeles y si no vas a carar de 900 acá vamos a darle igual 300 píxeles mejor eh acá vamos a darle 500 y acá vamos a darle 100 Está bien ahí bueno ahora sí vamos a ver si arrancamos acá ya me está cargando la imagen chiquita Si aumentamos de resolución Ven vamos a pasar por encima de 500 no por encima de 400 si le dimos 400 y por encima de 400 Fíjense que me está cargando la medium acá por encima de 400 fíjense esta diferencia hasta acá me carga la chiquita Hasta a

partir de acá ahí me carga la mediana y a partir de 600 que es acá me carga la grandota la grandota entonces de esta forma podemos Cargar imágenes con diferentes resoluciones ustedes no lo están viendo porque todas son del mismo color pero tranquilamente Yo podría venir a porque si no no lo van a terminar de notar voy a abrir Esta que Está acá voy a duplicar la capa le bajo la saturación y esta la guardo como medium y esta la guardo como la small y a ver ahora bueno ahora sí se va a notar bien

actualizamos ahí me carga la chiquita acá me carga la mediana y ahí me carga la grandota entonces ahí podemos ver cómo va cargando obviamente a ver esto Es lógico una vez que cargó la imagen más grande no va a ser que el usuario de vuelta ande todo el tiempo cambiando de imágenes entre sí no si el Navegador ya cargó la imagen más grande ya está que disfrute de la resolución que cargó ya está esto solamente nos pasa a nosotros Porque nosotros ahora que estamos trabajando mientras estamos editando estoy enseñándoles estamos cambiando la resolución y aumentándola

bajándola y aumentándola pero una persona normal con Doo de frente no no va a andar haciendo esto en una página web Okay entonces una persona normal con una resolución de este tamaño le carga Así es Mall una persona con una resolución más grande por ejemplo le carga así en medium y una persona con una resolución más grande le carga la imagen más grande entonces eso es lo que hace estos dos atributos Okay con uno lo que hacemos es definir Cuáles son las imágenes alternativas para que el navegador elija le decimos Che Mira tenemos una imagen

small que te recomendaría cargarlas para 360 Wi porque esta imagen tiene 360 Dalto medium que tiene 600 Así que la vas a cargar para esta resolución y después tenemos el alto. png que mi consejo es cargal para pantallas de 1 wid más o menos Okay y acá lo que hacemos Es decir okay Hagamos una cosa cuando la pantalla sea menor de 400 o igual cargate imágenes que tengan más o menos 300 píxeles cuando tenga menos de 600 o más cárgate imágenes que tengan 500 píxeles por ahí y cuando no que la imagen tenga 900 píxeles

o sea cuando no Cumpla Ni esta condición Ni esta condición que es que la pantalla sea menor a 400 con este tamaño o que la pantalla sea menor a 600 con este tamaño como no cumple ningú helado vas a tener 900 píxeles de de ancho y eso es lo que vas a cargar una imagen de 900 píxeles Por ende me carga la de alto. png eso sería todo acá definimos las imágenes alternativas y sus tamaños y acá definimos Qué tipo de tamaño le recomendamos que cargue al navegador Según la resolución que tenga de pantalla Así

que es un poco confuso por eso Además está todo rojo porque es un poquito complicada esta sección por eso repito además de ser de html dije no es una sección complicada Entonces vamos a ponerlo así pero no hay que preocuparse porque ahora vamos a ver ahora otra sección que también de html vamos a ver la etiqueta picture la etiqueta source vamos a ver la etiqueta picture vamos a ver la etiqueta source y vamos a ver la Etiqueta media okay O sea media Wow dto mira tu inglés esas tres etiquetas son importantísimas para hacer algo Bastante

parecido a lo que acabamos de hacer pero en vez de jugar con la resolu opciones Jugamos en realidad con la compatibilidad y con los formatos que más soportan los navegadores y nos vamos a ir acercando a ese lado de a poquito vamos a ver ahora este uso muy interesante que tiene justamente la etiqueta picture la etiqueta source y la Etiqueta media así que bueno vamos a ver Bueno vamos a ver ahora tres etiquetas muy importantes en realidad son dos etiquetas y un atributo que son la etiqueta picture la etiqueta source y la y el atributo

media perdón entonces estas cosas nos van a permitir entender un poquito más sobre todo lo que vamos a hacer ahora cómo funciona esto de darle lo vimos en el en la sección pasada esto de darle al navegador y decirle Ey Mira yo te doy estas opciones vos elegí la Más óptima la más adecuada pero ahora lo vamos a hacer de forma más explícita incluso Así que para comenzar tenemos que entender Cómo funciona la etiqueta picture picture es una etiqueta que funciona para especificar múltiples Fuentes para una imagen okay eso es lo que hacemos Es mira

acá dentro vamos a tener una imagen pero vas a poder elegir de entre varias imágenes que te voy a dar Así que vamos a ver cómo funciona eso vamos a escribir el código para Comenzar yo voy a poner una etiqueta picture y adentro de esta etiqueta es cuando vamos a utilizar la otra imagen O sea ya sabemos que como dije antes la etiqueta pixo le está diciendo al navegador Mira yo te voy a definir una especie de contexto en donde todo lo que esté dentro mío van a ser Fuentes para que vos las elijas y

determines cuál Mostrar vas a mostrar una nada más así como el Select necesita adentro options o sea cuando Agarramos al navegador y Usamos un Select que es esta etiqueta le estamos diciendo al navegador Ey adentro van a ver opciones Entonces no existe un Select sin opciones así como cuando creamos no sé por ejemplo una lista adentro sabemos que vamos a poner list items Entonces esto es lo mismo cuando utilizamos la etiqueta picture adentro vamos a poner la etiqueta source tenemos más casos para usar source porque los casos que di antes son exclusivos pero source se

puede usar en más situaciones Ya lo vamos a ver pero para arrancar vamos aprender a usarla con picture en este caso puedo agarrar y decir source dalto png venir acá y decir source Eh daltos mal.png entonces yo vengo acá por ejemplo Y si la imagen carga que evidentemente no vamos a ver que esté cargando nada vamos a poner medium mejor medium Ahí va esto no carga nada porque necesitamos la etiqueta imagen entonces venimos acá y utilizamos la imagen y le damos source dal alto.png entonces Venimos acá y hay carga si esto lo vemos así Simplemente

y vamos a a Network esto que está acá actualizamos va a cargar de alto es super chiquita va a cargar de alto es super lga va a cargar de alto no va a cargar otra imagen y entonces para qué sirve esto acá vamos a poner de alto sm Perdón me confundí va a cargar la de altos mal que es la que definimos acá repito la imagen crece y no me va a cargar otra me va a cargar siempre la imagen small la chiquitita como la tuya Por eso claramente ella no te ama No se ponía

muy Por qué sos así da alto ella sí te ama No seas su perro faldero nada más est es un consejo personal que te voy a dar a vos no seas un perrito faldero No se trata de no darles atención de ignorarlas eso es pura no hagan eso eso es una tontería se trata de que ustedes tengan un valor propio que tengan valor personal que se quieran ustedes mismos y que sean seguros Sí ustedes son facheros tienen Belleza muchas chicas quieren estar con ustedes creé anelo cuando se lo crean lo van a empezar a volver

realidad Si una persona dice soy lo mejor eh todo el mundo quiere estar conmigo no sé qué Yo diría Pero qué interesante No porque si él cree eso de sí mismo es porque debe tener una autopercepción muy interesante o sea que debe ser una persona interesante porque si no no sea si yo veo algo en la tele y digo esto no me interesa Al que está al lado mío no le Va a interesar Pero si yo digo esto es buenísimo es posible que le interese yo lo mismo si yo me autop percibo piola la gente

me va a considera piola yo le digo a la gente Soy gracioso de entrada la gente va a pensar que soy gracioso Esto es algo parecido no no aplica mucho a la belleza pero sí aplica más a lo que es el atractivo Entonces nada usen esto usen esto que es lo más importante no dalto ahora si ustedes se preguntan Pero qué podés saber vos dalto de minas bueno La realidad que miren lo que es mi novia se me trabó ahí pero en fin tengo una novia hermosa ya está mi amor por favor no me acá

básicamente no funciona Porque no tenemos que usar source tenemos que usar souret souret actualizamos y ahora sí va a cargar el navegador la imagen que más apta considere entonces la imagen que carga es esta pero tiene estas otras fuentes aunque normalmente deberíamos hacerlo al revés dalto small dalto Medium Y dalto png entonces ahí carga Entonces tenemos una posibilidad una i y otra y ahí estamos bien hasta Acá más o menos lo venimos definiendo pero acá Así tal cual siempre me va a cargar la de alto.png porque es el primer souret podemos venir acá y poner

si quieren el segundo entonces va a cargar siempre la medium ven siempre va a cargar la medium incluso Aunque la pantalla sea gigante Entonces si siempre me va a cargar el primer source set para qué pongo el Segundo bueno ya vamos a llegar a eso este elemento source se usa dentro de las etiquetas video audio y picture principalmente y lo que hacemos justamente es esto no es definir estos múltiples medios para diferentes situaciones y acá aparece el atributo media yo por ejemplo voy a mostrar bueno Esto que está acá lo voy a poner acá y

acá voy a poner la imagen normal source dalto png y acá voy a poner dalto small Ahí va entonces yo lo que voy a hacer va A hacer lo siguiente acá voy a poner la etiqueta media y acá vamos a hacer lo mismo que antes Max wid en este caso vas a tener un Max wid de 600 píxeles Entonces si la imagen mide 600 píxeles o menos vas a cargar esta ahí si se fijan ven esto carga solamente en caso de que tenga menos de la resolución establecida si más tiene Max with eh 400 píxeles

o 360 vamos 400 está bien 400 píxeles vas a cargar la small entonces acá viene la magia en una resolución gigante me carga Esta en una resolución mediana me carga esta y en una resolución intermedia no Porque primero van las más chicas Entonces primero definimos la más chica y después la más grande Entonces ahora sí si nos encogemos se muestra la más chica si agrandamos se muestra la más grande y si seguimos agrandando se muestra otra Esta es otra forma de hacer lo que hicimos antes es decir podemos hacer lo mismo que hicimos Recién con

size y souret con la etiqueta picture y Picture tiene una respuesta semántica más acertada diría yo porque le estamos diciendo al navegador Ey Mira tenés varias fuentes vos elegí La que quieras según la resolución y ahí te las libero vos hacé lo que quieras entonces para tamaños de pantalla menor a 600 se muestra esta para menor a 400 se muestra esta y si no O sea si no cumple ninguna de estas dos condiciones se muestra acá Este es el primer uso que le podemos dar Okay el primer uso que le podemos dar es Este una

resolución grande mostrás esta una resolución más chica mostras la mediana y una más chica mostras la small hasta acá está todo bien perfecto todo bien pero Y qué cambia ad altito mostrame Bueno en realidad media es un atributo que nos permite hacer más cosas que estas otra cosa que podemos hacer también por ejemplo es si el navegador soporta el webp cargamos el webp acá por ejemplo posiblemente si descarguemos alguna imagen de Instagram convertir a Webp tenemos acá un converter puede ser cualquiera Es más yo quiero uno que sea gratis creo que convertio es gratis entonces

vengo acá agarro ad alto. png la traigo acá no Entonces estamos convirtiendo una imagen png a webp que webp es un formato que es una propuesta de Google Chrome que dice ey Mira yo creo que con este formato tiene unas características particulares que hacen que las imágenes carguen mejor y sean estén mejor adaptadas a la web Entonces Vamos a darle ese favor a Google Chrome le damos en convertir ahí se está convirtiendo Acá está me la descargo ven acá la tengo y la voy a bajar acá Perfecto entonces yo lo que hago con el ahora

con source es le digo Mira vamos a decir una cosa no vamos a cargar por resolución lo primero que vas a cargar acá podemos poner por ejemplo un source Vamos a darle en source s alto. webp Acá está y acá vamos a decirle media que es una imagen barra webp no va a ser media Va a ser type perdón el type va a ser imagen webp Entonces qué pasa si me carga esta imagen la webp me la va a estar cargando en este caso si venimos acá no estaría cargando dalto pun webp Ah porque no

tiene otra carpeta bueno ahora sí acá acá me cargó perfecto se me carga esta ven si soporta alto. WEP que me cargue la la imagen webp entonces Esta es otra cosa que podemos hacer es decirle Mira tenemos souret dal alto. WEP es de este tipo la imagen si me Soportas esta imagen me va a cargar esta si no se va a fijar la resolución si no se va a fijar otra resolución y si no cumple ninguna de estas condiciones O sea si no soporta los el formato eh webp si es una pantalla que no cumple

esta condición O sea no es no es menor a 400 píxeles tampoco cumple esta condición es decir no es eh menor a 600 píxeles qué va a hacer Si no cumple nada de esto no me soporte este formato y no tiene estas resoluciones Bueno me muestra ad alto. Png entonces va en orden dice Bueno picture solamente va a mostrar uno de todos los siguientes recursos un recurso es este otro es este otro es este y otro es este Si ninguno de estos tres carga va a mostrar Este Entonces vamos a ir poniendo por orden de

prioridad Cuál es la imagen que queremos que cargue para eso sirve esta etiqueta source esta etiqueta picture Perdón las etiquetas de adentro source y la etiqueta imagen mi consejo es investiguen un poquito más en Este caso no no vamos a profundizar mucho en esto pero hay toda una teoría bastante interesantísima sobre todo este mundo créanme que pueden ir a leer la documentación oficial que mi consejo es que lo hagan porque hay muchos y se van a enriquecer muchísimo pero dada la duración del curso me veo obligado a explicarles los aspectos más importantes de estas cosas

así que repito dada la duración del curso no voy a poder profundizar pero aún así Creo que se Entendió bastante bien Cuándo es correcto aplicar la etiqueta picture Bueno eso es lo que nos importa ahora y es cuando necesitamos que cargue una imagen y lo que necesitamos hacer es hacer que no no cargue una sola imagen sino que cargue una imagen según la resolución si vamos a cargar una imagen chiquitita por ejemplo una imagen del logo no tenemos un chat y queremos cargar una imagen del logo que va a estar en el nav no hace

falta que Carguemos una imagen con picture Por qué Porque un logo Es chiquitito siempre es chiquitito ahora si tenemos que cargar una imagen muy grande esa imagen sí puede estar dentro de picture porque podemos cargar diferentes imágenes dependiendo diferentes condiciones es decir si tenemos una imagen que ocupa esto nada más no ya está la ponemos así n más porque funcione igual pero si tenemos una imagen que ocupa todo el ancho Okay si todo el ancho es todo el Ancho de una pantalla gigantesca cargamos la imagen más grande si es de una tablet cargamos de otra

imagen y si es de un dispositivo chiquitito cargamos la misma imagen pero con una resolución más chiquita Entonces de esa forma optimizamos los tiempos de carga Así que este es el funcionamiento principal de picture vamos a estar utilizándola para alguno que otro proyecto cuando Hagamos una página web completa Así que la vamos a tener que ver Vamos a repasar la más Adelante pero estoy contentísimo de que la hayamos aprendido porque seguro muchos de ustedes la habrán visto por ahí si están metidos en html pero no se les ocur ocurrió ni entendieron muy bien cómo funciona

picture qué son estos Sources Y por qué no carga ninguno de esto y siempre carga solo uno y qué pasa con todo lo demás y ahora lo acaban de entender créanme que media Hay un montón tenemos el atributo type que carga un recurso según el tipo de recurso tenemos Media que es para poner estas queries no que acá estamos diciendo que el medio tiene que tener esta condición Pero podemos poner más condiciones Pero lo importante es que lo más normal es usar esta etiqueta para verificar que un navegador soporte un formato okay Y si soporta

ese formato que lo cargue y si no lo soporta que cargue lo de abajo y el otro uso que lo damos es para verificar tamaño de pantalla Entonces lo usamos para verificar un tamaño de Pantalla y lo usamos para el tema de los soportes podemos combinar picture y source con las etiquetas source los invito a que exploren los invito a que investiguen es algo muy interesante y ahora agregaron unas etiquetas más a su stack de conocimiento html ahora continuamos con la siguiente sección que A mi parecer ahora podemos volver a la sección de css y

ya puedo sacar el rojo así que bueno vamos con la siguiente sección de media queries que diría yo Que es un apartado que también al igual que flexbox es un apartado que lo cambia todo al igual que transiciones o al igual que esas cositas vieron que son son cositas mínimas pero que tienen un impacto gigantesco no Esta es una de esas porque esto que son las media queries son lo que nos va a permitir cambiar no de estilo según la resolución es parecido a lo que vimos ahora pero vamos a aplicarlo completo en ccs y

bien Así que Vamos Ah para comenzar vamos de vuelta las media queries son podemos decirlo podemos verlo como una herramienta poderosísima que tiene el objetivo de adaptar nuestra página web a diferentes resoluciones para eso lo que hacemos Es definir estilos distintos según la resolución a esta resolución hacemos que tenga un estilo a esta resolución hacemos que tenga otro estilo y así básicamente lo que le permiten al desarrollador las media queries es usar La lógica de si tatat entonces tatat donde justamente ciertos estilos solo se aplican si el dispositivo de visualización es decir en donde estamos

viendo la pantalla en donde estamos viendo el contenido cumple cierta condición la sintaxis básica es la que estamos viendo ahora en pantalla Okay básicamente media es la regla que inicia la media query not y only son operadores opcionales o sea podemos ponerlos o no pero not excluye a los dispositivos que Cumplen con la consulta mientras que only se usa para evitar que navegadores antiguos que no soportan media queries apliquen los estilos definidos en la consulta esto es importante porque si nosotros no ponemos el o o no ponemos el Note navegadores antiguos que no lo soportan

lo van a aplicar igual y podemos tener problemas Entonces el Note es para no aplicar un estilo a esos dispositivos o sea básicamente todos los que no cumplan con esa condición Mientras que lowly es para navegadores antiguos Si no lo puedes hacer No lo hagas no lo cumplas después tenemos el media type que básicamente indica el tipo de medio al que se dirige la consulta Por ejemplo si queremos imprimir algo usamos print Si queremos medir la pantalla de nuestra compo usamos screen tenemos el and que si queremos también lo podemos usar es opcional lo podemos

usar para combinar varias expresiones en una consulta yp Las expresiones que evalúan características específicas del dispositivo como el wid el he la orientación etcétera la verdad que no quiero complicara mucho pero esa tengo que explicárselo porque es la la la la versión formal no de media dije que iba a ser sencillo y créanme es s sencillo supónganse que yo tengo acá Okay un lorem un lorem muy simple damos el botón derecho imprimir fíjense que Esto es lo que no se nos imprime Pero si yo vengo Acá y le digo Mira media print le estamos diciendo

vamos a iniciar una media query y vamos a iniciar una media query en los dispositivos de impresión y vamos a hacer que todo o más fácil el body tenga esto es importante porque acá abrimos un bloque y adentro del bloque van los estilos Entonces es abrimos el bloque y acá decidimos Cuál es el elemento que queremos modificar y cuáles van a ser sus estilos acá ponemos por ejemplo que el body tenga un font size 12 PT que era una medida que usábamos para impresión Entonces si ahora le damos botón derecho y imprimir fíjense que va

a cambiar esto le podemos dar por ejemplo 24 fíjense esto eh 24 Entonces ahora esto lo actualizamos si le damos botón derecho imprimir acá acaba de aumentar la letra vieron que es más grande que antes ahora vamos a venirnos para acá si lo pueden ver mejor ven entonces acá la letra sigue igual acá le voy a dar 200 Entonces cuando le damos Imprimir fíjense que la letra se hace gigante Por qué Porque estamos diciendo vas a aplicar este estilo solamente a los medios print o sea los de impresión PT es una medida para impresión la

vimos en medidas cuando vimos medidas así funciona una media query Es simple después tenemos otra que es el media Scream estamos diciéndole Mira a todo el body le vamos a aplicar un font size de no sé 20 píxeles entonces todo el body aplica este font size no todo esto pero Acá básicamente tenemos una condición Esta es una expresión no sé si se dieron cuenta estamos diciendo media y la condición va a ser que se cumpla esta condición Cuál es la condición y tiene que ser sí o sí una pantalla o sea esto no se aplica

al print si yo por ejemplo le doy imprimir esto tiene texto chiquitito Por más que yo acá le de 200 20 píxeles esto tiene así pero le damos imprimir y no va a funcionar por qué Porque este estilo no se está aplicando Al print se está aplicando solo a los dispositivos de visualización que son pantallas screens Esa es la condición que está cumpliendo acá supónganse que yo lo que quiero hacer Vamos a darle 30 yo lo que quiero hacer es decirle Otra condición Cuál va a ser la otra condición y la otra condición va a

ser que además va a tener un tamaño tiene que tener un tamaño para eso le vamos a dar and porque el and conecta condiciones O sea la primer condición va A ser esta que es se va a aplicar solo a dispositivos screen y la segunda va a ser vamos a aplicar un Max wid por ejemplo de 500 píxeles entonces acá vamos a chequear qué es lo que pasa si la pantalla tiene 500 píxeles o menos vas a aplicar este estilo un Body de 30 píxeles y si no no le vas a aplicar nada entonces venimos

acá y si se fijan cuando achicamos de 500 tenemos un tipo de letra cuando agrandamos el color cambia Entonces esta es la magia de todo El responsive design en gran parte no de todo porque ya vimos muchas cosas de responsive pero Esto hace que sean posibles el 99% de I que existen hoy en día que se adaptan a dispositivos móviles Cómo fíjense qué interesante esto supónganse que yo acá tengo un Body no entonces yo voy a agarrar el body y acá le voy a dar que tenga un background color negro y además va a tener

un color blanco Entonces si es menor a 500 el body tiene color negro esta tipografía y Este tamaño este este color de texto y este tamaño Esta es la ahora Cómo podemos hacerlo útil Bueno ahora vamos a ver un caso muy interesante Yo vengo acá por ejemplo y voy a agarrar un div le voy a poner la cl clase flexbox por ejemplo y voy a venir acá y voy a decir div Class item o Flex item no voy a crear tres Flex item yo a cada Flex item le vamos a dar un background gris pero

para que tenga algo de tamaño le vamos a dar un padding de 30 píxeles ahí está no Lo estamos observando pero acá tenemos el display para poder observarlo le vamos a dar un Border un Pixel solid red o sea un rojo y acá lo tenemos perfecto ahora le vamos a dar al flexbox un display Flex ahí está y a los Flex items le vamos a dar un Flex grow de uno entonces ahora todos se adaptan todos se estiran hasta acá está perfecto tenemos algo que se estira vamos a sacar este estilo Porque no nos interesa

pero supónganse que nosotros tenemos un Estilo este es nuestro estilo No yo tengo acá varias columnas es decir tengo acá un contenido teng un contenido tengo acá otro y tengo acá otro entonces tengo tres páginas web con contenido No desde una computadora esto se puede leer perfectamente vamos a agregarles más para que tengan sentido repito esto desde una compu se puede leer bien no estamos todos de acuerdo en que se puede leer bien desde una compu Bueno ahora tenemos un problema el problema radica En que si bien se puede leer bien desde una compu cuando

empezamos a achicar esto que está acá ya no estaría entrando ent tenemos dos opciones una es venir acá y por ejemplo decirle Flex wp rap no y ya está cuando no entran se tiran para abajo nos falta otra propiedad ahora que es la propiedad de Flex basis c min with 300 píxeles Por ejemplo entonces de esta forma ven se van adaptando hasta acá está todo bien listo Es hermoso se adapta pero si nosotros no quisiéramos Esto si quisiéramos hacerlo de otra forma Cómo podemos hacer Bueno Miren qué interesante esto nos ahorramos todo esto y lo

único que tenemos que hacer por ejemplo para hacer que de un estilo pase a otro ya no necesitamos ni el wrap venimos acá y le damos la caja flexbox le vamos a dar un Flex Direction column Entonces cuando tiene menos de 500 píxeles vamos a agrandarlo cuando tiene menos de 500 se ponen columnas vamos a darlo de 600 Ahí va entonces en pantalla Se ve así en celus se ve así entonces Esto es lo que podemos hacer podemos decir Che mira cuando alcanzas cierta resolución vas a cambiar tu estilo acá por ejemplo Por qué no

está funcionando yo le estoy poniendo iPhone 14 Pro Max y acá incluso Perdón le di 900 quise poner 410 480 en realidad Por qué acá no me está agarrando esto vamos a dejarlo en 400 píxeles no en a partir de 500 píxeles te vas a poner a partir de 480 te vas a poner en column Por qué no me Funciona si el iPhone acá arriba podemos ver el iPhone 14 tiene 430 bueno acá porque nos olvidamos una etiqueta muchacho no nos olvidemos de esta etiqueta la meta name viewport pun c esta etiqueta Okay la la

la etiqueta del Met viewport y ahora sí fíjense que ahora tenemos la escala real Entonces ahora sí funciona pero si le sacamos la etiqueta fíjense que se queda así de vuelta si le ponemos la etiqueta se queda Entonces ahora está adaptado Dispositivos móviles por eso es importante que tengan siempre esta etiqueta porque si no cuando trabajan con media queries y con diferentes resoluciones van a tener problemas por eso incluso a veces cuando trabajan con la imagen souret o sizes y demás si no tienen esta etiqueta van a tener problema Entonces para evitar problemas siempre tienen

esta etiqueta y acá van a poder ver por ejemplo en un Galaxy s8 se ve así Ahora si tienen por ejemplo un IPad Pro se va a ver así porque en un iPad se va a poder ver bien si lo tienen en una surface Duo se va a poder ver así Si la tienen en un Galaxy así entonces acá pueden ver cómo se verían diferentes dispositivos Entonces ustedes Acá tiene la opción de responsive Pueden decir Che Mira si mi dispositivo tiene estas resoluciones se va a ver así oa y ya lo pueden ir probando con

esta funcionalidad ahora con todo esto en cuenta vamos a ver cómo hacer un layout Holy grail vamos a prender uno de los patrones es un patrón de diseño de layout más históricos que existen en todo desarrollo web que es el el patrón del santo grial o el diseño del Santo grial El Holy grail des o el Holy grail layout no estamos eh haciendo una de las cosas que se hacen mucho se usan mucho Y hoy por hoy aunque no lo crean se sigue usando y hasta en muchos casos queda muy estética la web cuando se

aplica correctamente Así que ahora sí vamos a Desarrollar un componente genuinamente así que bueno vamos a ver cómo podemos hacer una estructura muy simple de Holy grail con flexbox Bueno ahora vamos a desarrollar nuestro primer tener layout completo que no va a tener contenido como tal pero sí vamos a tener el layout con los contenedores para ya comenzar a trabajar en el contenido bien preparados el Holy grail Okay básicamente se puede componer de tres etapas la etapa principal es una Etapa con un menú principal de navegación o un header Okay que el header tiene ese

menú de navegación después tenemos una sección principal en la que tenemos un Main content que es el contenido principal de la web y dos columnas Okay una puede ser por ejemplo un menú lateral y otra puede ser una sección de interés ponele y abajo de todo tenemos el footer estas cinco secciones componen el Holy grail son tres secciones Okay pero la de arriba y La de abajo son enteras y la del medio está dividida básicamente si esta es nuestra página web el Holy grail vendría siendo algo así tendríamos nuestra barra de navegación tendríamos nuestro footer

y en medio tendríamos tres columnas la del contenido principal y dos que son secundarias Este es el diseño del Holy grail que aplica casi para todo después tenemos otra característica del Holy grail Okay que es que también el contenido principal está como flanqueado Por dos barras principales pero lo más importante en este caso lo que nos vamos a enfocar es que también sea receptivo y se adapte a diferentes resoluciones Así que vamos a comenzar a construirlo para comenzar voy a iniciar todo con un gader Okay voy a poner un simple gader y adentro voy a

poner un na porque acá vamos a tener la barra de navegación acá vamos a poner un l adentro vamos a poner Li no vamos a preocuparnos por los estilos Ahora solo lo vamos a dejar así Es más adentro le vamos a poner el a Vamos a ponerle algo Random no le vamos a poner clase y no le vamos a definir nada Por qué Porque queremos enfocarnos en otra cosa Ahora no estamos enseñando Cómo hacer esto de vuelta ya lo dejamos así Esto va a ser el primero de tres componentes Además nos falta otra cosa que

es en este caso una columna del medio pero no le podemos poner Main le deberíamos poner div y le vamos a dar la clase Main wrapper Qué es un wrapper Bueno un wrapper básicamente es como un contenedor que solamente está ahí con la finalidad de darle estilo específico Por qué Porque si yo quiero separar un elemento en tres elementos más tengo que hacerlo con un div por qué porque yo no puedo venir acá y poner un Main Porque si acá dentro pongo un aside por ejemplo esto sería incorrecto si aside no formara parte del contenido

principal Entonces lo más normal sería poner un wrapper acá vamos a poner una Side okay Que va a ser la primer Barrita secundaria que vamos a tener acá vamos a poner un Main que va a ser como el contenido principal de la web y vamos a poner acá otro aside que acá va a haber otro contenido Random por ejemplo datos de valor acá vamos a tener no sé un h2 y un p por ejemplo vamos a poner un contenido full Random y acá vamos a poner un título Random en el Main acá vamos a poner

el h1 Okay título principal Ahí está y vamos a poner También un p con más contenido Random Ahí va y en el primer aside vamos a poner lo mismo que acá arriba va a ser un na una barra de navegación secundaria eso sería todo una barra de navegación secundaria esto sería todo lo que necesitamos en la web para hacer el segundo componente y ahora lo que vamos a hacer también va a ser crear el último componente que va a ser un footer y el footer va a tener por ejemplo un texto simple que diga dalto

copyright 2025 y Ahí el ara siempre se pone un poquito más salto copyright 2027 Perfecto Bueno ya tenemos toda la estructura del Holy grade terminado todo lo terminado tenemos los estilos Así que lo que vamos a hacer primero y principal va a ser darle un poquito de clase vamos a arrancar a las clases solamente a las necesarias Vamos a ponerle la clase header acá vamos a ponerle no no hace falta el Main a este aside le vamos a poner la clase secondary navar Porque es Una barra de navegación secundary y a este nav le vamos

a poner la clase Main na porque eso es lo que es una barra de navegación principal y acá tenemos todo medianamente separado no Entonces para arrancar vamos a hacer una estructura muy simple primero vamos a agarrar a los lead del navbar Main navbar h y le vamos a dar display Flex Bueno lo venimos logrando le vamos a sacar el padding al ul que tiene por defecto También estamos perfectos ahora vamos a agarrar el Main Navar y vamos a agarrar a los le y acá le vamos a dar un list Style n Ahí está y le

vamos a dar un mínimo margin de unos cco pixeles Ahí está para que estén no más para que estén de cuatro cuatro está bien vamos a agarrar a los Main nabar a y le vamos a dar un de hecho a todos los nav a le vamos a dar un text decoration none pero al Main navb a le vamos a dar un color blanco porque al Main nabar también a su vez Main nabar le vamos a dar un background color 48e Como me gusta a mí perfecto vamos a los a darle display inline block también para

qué y simple para poder darles un padding de nu9 píxeles por ejemplo Ahí está o mejor dicho de seis píxeles nu píxeles para que tengan más padding a los costados home about as contact login register no vamos a no nos vamos a enfocar tanto en hacer una barra de navegación bien hecha así ya con esto es suficiente ya con el primer elemento terminado vamos a enfocarnos en otro Elemento que va a ser el segundo Vamos a darle igual este estilo al header no al nabar pero para cambiar esto voy a agarrar el Main wrapper y

fíjense que acá acá viene la magia vamos a separarlo por secciones acá vamos a poner el gader gader Ahí va y acá abajo vamos a editar el Main section se agarramos el Main wrapper y le vamos a dar un display Flex bueno ya vamos entendiendo la idea No creo que se va entendiendo la idea a poquito vamos a poco vamos a agarrar al Main wrapper aside y le vamos a dar un Flex grow 1 Entonces esto se va a estirar sin problemas vamos a agarrar el con Dari navar min Wi de de 300 píxeles no

200 píxeles Ahí va porque por ahí necesitamos que tenga un mínimo de esto Ahí va bueno venimos bien algo tenemos hasta acá eh algo tenemos Vamos a darle a el aside y al Main temporalmente un Border un Pixel solid rojo Esto va a ser temporal solamente para entender bien Qué está pasando con cada uno de los Elementos esto que está acá Tiene un nav bien vamos a agarrar el secundary navb vamos a agarrar a los y darle otro color le vamos a dar un color 48e a los a mejor los Lino los a y a

los secundary secondary nabar le le vamos a sacar el list Style n le vamos a dejar list Style none bien vamos a agarrar el a le vamos a dar display inline block y le vamos a dar un padding de 10 píxeles y arriba y abajo de seis píxeles vamos a hacerlo diferente vamos a poner por ejemplo Vamos a hacer de cuenta que esto es una documentación no vamos a poner concepto uno y en vez de poner item vamos a poner concepto y acá vamos a poner un pequeño título vamos a poner un h2 que va

a decir nav elige el concepto por ejemplo Entonces el concepto que elija se va a mostrar acá a el secundary nabar le vamos a dar un textal in Center Ahí está pero al secundary nabar ul le vamos a dar un padding cero porque como dije el padding acá siempre molesta y por ahora No viene mal venimos con una web que no está mal venimos venimos haciéndolo bien por ahora bien lo que tenemos que hacer ahora es asegurar que el footer siempre esté abajo ahora no seguimos enfocando en esto Pero nos tenemos que asegurar que el

footer siempre este abajo para eso vamos a agarrar al Body fíjense Qué interesante esto y decirle que el mismo Body va a tener un display Flex parece que se rompió todo pero tranquilos va a tener un Flex Direction column Así vamos Hacia abajo de vuelta relájense vamos de a poquito vamos a tener un align items Start para que todo se ponga arriba en primera posición y ahora vamos a venir a Main wrapper después header y después el footer todo va a tener un W del 100 por ahí está y al footer acá viene la magia

un margin top auto siempre va a tener un margen automático y para qué no sirve esto y no se olviden que tenemos que agarrar al Body y darle un min he de 100 View por hate y ahora vamos a tener Siempre abajo el foter Entonces si se fijan si al foter le damos un Border un Pixel solid red vamos a ver que el foter ahora está acá abajo na ul foter le estamos dando a todos estos elementos un Box icing Border Box después vamos a ver cómo hacer un reset porque me rompe mucho las bolas

siempre están cambiando esto así que tenemos que incluir un archivo de reseteo de css pero lo vamos a hacer en otro momento no ahora entonces el footer está abajo yo lo que Voy a hacer al fter es darle un background color por ejemplo Vamos a darle un un 333 que es casi un negro y vamos a definir una tipografía de color blanco y vamos a darle a esto un padding de eh Por qué no 40 píxeles Ahí está y vamos a hacer que esto se adapte al máximo para eso vamos a agarrar el Main wrapper

y decir Flex grow uno entonces el Main wrapper se va a adaptar a acá abajo ven que antes no estaba adaptado hasta acá abajo en cambio de esta forma Se adapta ven es interesante porque siempre va a estar creciendo ahí tenemos esto Ahora no parece mucho lío pero si nosotros le sacáramos el borde a esto fíjense que ahí más o menos tenemos una estructura interesante No yo lo que voy a hacer es darle a estas secciones a todas darles un padding de 10 píxeles mínimo para que se separen un poco entonces de esta forma por

lo menos hay una leve separación y no un padding hacia arriba y hacia abajo vamos a hacer Que el padding solamente sea a los costados 20 pixeles a los costados y hacia arriba y hacia abajo eso Entonces ahí sí Ahora sí ven el footer puede bajar pero acá viene la magia del Holy rail esto es muy lindo todo lo que quieran que sí tiene su magia pero si nosotros de vuelta le damos el Border quiero que vean algo un Pixel solid red van a ver que necesariamente los dos siempre van a estar dependiendo del contenido

del otro si yo por ejemplo Vengo al Main y a la sección principal Por ejemplo yo agarro Y le doy más contenido por ejemplo ven va a tener más contenido fíjense que esta caja no se va a estar adaptando para eso tengo que agarrarlas y decirles esto Normalmente se trabaja con position sticky Okay pero bueno Esto es lo lo principal digamos ya tendríamos una una sección bastante interesante ahora esto nunca se mueve siempre mide lo mismo Entonces eso no sé que tan bueno esté vamos a dar una Medida un poco más en vez de darle

un Bing de 200 píxeles le vamos a dar un Bing with de 1,2 perdón 12 Rem es mejor tener medidas relativas eso no se olviden cuando estamos trabajando con tamaños en este caso vamos a hacer que cuando lleguemos a esta resolución esto que está acá se elimina porque ya se rompe la pantalla para eso cómo vamos a hacer Bueno venimos acá y vamos a poner media screen y la segunda condición va a ser que cuando la resolución Max W sea De No lo sé 600 píxeles por ejemplo vas a agarrar la columna El otro aside

es decir la Side Last Child que es el último aside es esta barra que está acá y le vas a dar un display no entonces de esta forma ven acá funciona pero cuando nos empezamos a encoger un poco ya ahí no ven acá ya no funciona Entonces hasta acá va pero a partir de acá ya desaparece después podemos ver queé hacemos porque normalmente esta barra algo que no aporta mucha información Entonces después decidimos qué es lo que hacemos pero por lo menos ahí ya no no estorba y cuando la resolución vamos a ir más allá

es menor a 400 incluso Okay qué va a ser incluso lo que vamos a hacer acá tenemos que agarrar el Main wrapper y ponerlo en Flex Direction column entonces de esta forma si seguimos bajando aún más voy a hacer un pequeño zoom para que se note la diferencia entonces acá se muestra todo acá se tiran para abajo y Más adelante Se pone así entonces de esta forma tenemos elegid el concepto acá arriba tenemos el menú que deberíamos poder hacerlo responsible el menú pero no lo vamos a hacer ahora y acá tenemos el título principal Entonces

tenemos una página Okay que increíblemente se adapta a todas las resoluciones esto esto que está acá también debería tener un Main wid Okay entonces para eso vamos a agarrar de vuelta el aside Last Child y vamos a darle un min withd de 10 Rem no Tiene que ser tan chiquito pero tiene que tener su tamaño hasta acá está bien pero acá por ejemplo Ya no me está gustando mucho y justamente como se empieza el contenido principal a achicar es requisito que desaparezca de hecho lo podemos hacer incluso más abajo Normalmente se trabaja con tipografías más

chiquititas pero no nos vamos a preocupar por eso ahora vamos a darle en 800 píxeles y ahora sí ven Entonces ahora sí tenemos el Main wid que está Ocupando esto ves crece pero tiene un wid mínimo y ahí se adapta Entonces tenemos un layout que se va adaptando Y esto tranquilamente puede funcionar para un artículo de noticias por ejemplo elige elige la categoría de las noticias y aquí elegimos la categoría categoría 1 2 3 acá Tenemos un montón de de noticias o puede arrancar la noticia principal o podemos acá puede haber otros artículos de otras

noticias para que vayamos explorando acá puede haber otras cosas Como publicidad o boludeces y acá ya tenemos un layout para una página web esto es mucho mejor cuando le aplicamos grid es decir si le aplicamos grid a esto y lo mezclamos grid y flexbox para desarrollar esto tenemos un contenido de la santa Igualmente Esto no es recomendable cuando el contenido es muy grande lo que se recomienda es que se achique ahora vamos a ver a qué me refiero lo más normal es agarrar por por ejemplo al Main wrapper Okay vamos a Venir acá arriba al

Main wrapper wrapper y darle por ejemplo un Max wid de unos 10000 píxeles por ejemplo entonces nunca va a poder crecer más que eso 1024 vamos a darle 1024 ahora Para qué nos sirve esto y es interesante vamos a a esto le vamos a dar un justify content Center así está centrado vamos a reemplazar el Start por el Center así nos centra el contenido ven en el eje cruzado y de esta forma siempre nos queda y ahora Para qué nos sirve esto esto por un tema De legibilidad no es que lo hago yo si Incluso

si van a la documentación por ejemplo buscan cualquier cosa calc en css No acá está la documentación oficial fíjense que ustedes Acá están viendo la página completa Pero cuando la página se empieza a chicar esto se mantiene así porque qu por un tema de legibilidad el usuario no debería estar leyendo todo el tiempo de pantalla completa a pantalla completa porque se cansa el área donde hay que leer debe ser chiquitita Okay Es Más si ustedes van a una página de noticias común y corriente la noticia es esta pero ustedes fíjense que el contenido termina acá

o sea acá termina el contenido pero la sección principal es esta okay Y acá es donde el usuario lee el usuario no va a leer más que acá por qué Porque leer es más que esto se empieza a estorbar Entonces nosotros lo que le tenemos que dar al usuario es una sección donde pueda leer sin estorbo esa sección es esta que está acá Okay la Principal ahora ya le podemos sacar los bordes si ya lo tenemos entendido de esta forma y ahí más o menos lo podemos llegar a chequear no a lo que me refiero

normalmente esto tendría una barra okay Y cuando nosotros desplacemos esta barra nos movemos solamente en este elemento y cuando cuando nos desplacemos en la barra principal del contenido solamente afectaría a este elemento para eso tenemos que encontrar la forma de hacer los sticky pero no me voy a meter mucho En eso porque ya se complejiza bastante la web si me empiezo a meter en eso solo quería que tengan la posibilidad de hacer un layout simple con flexbox okay Y acá tienen estos enlaces ven que son enlaces para moverse dentro de la página le voy a

dar un over a en over van a tener un opacity 0.7 me ahorro todo lo otro y listo a la Ah va entonces de esa forma ven el usuario puede leer y acá nos faltó algo no faltó agarrar los títulos por ejemplo venir acá y al h1 h2 H3 h4 darle zo text wraap balance y a todos los párrafos a todos los p darles un text wraap Pretty por ejemplo y ahí evitamos también el tema de los huérfanos Ven por ejemplo acá si no le diéramos Pretty fíjense que me está dejando este texto acá c

Yo le doy Pretty Me lo me lo intenta acomodar para que sea más lindo y no tengamos esas cosas que ya sabemos que son que no nos gustan La Barrita de acá no debería tener tantos Rem 12 Rem No creo que con 10 Rem es suficiente solo el Main debería tener un Mining with de 300 píxeles como mínimo Ah mucho mejor ahí se rompe un poco la página se rompe ven se rompe un toque Así que para eso le vamos a dar al wrapper un Flex wrap rap para que para que pueda tirarse para abajo

pero para eso le tenemos que dar a ambos que están adentro un Flex basis cer y ahora sí funciona ven me lo tira para abajo y arranca el único problema de este es que no está centrado cómo lo Centramos bueno lo mismo que antes justify content Center y ahí lo tenemos centrado entonces ahí todo el contenido queda centrado Y tenemos completamente terminada nuestra página web con el layout Y con todo lo que quieran y la que los parió lo único que tengo un super to vamos a agarrar el footer darle font W Gold y vamos

a darle un Tex Center porque me va a dar un toque en cualquier momento vamos a agarrar al Main y Sacarle más texto porque tiene demasiado texto al Main tenemos gente nuestra página web terminada aunque no parezca linda créanme que lo que acaban de hacer es bastante poderoso Y si quieren hacer otro toque para que se vea mejor estéticamente un consejo mío es en este tipo de casos pueden agarrar el body y hacerlo por ejemplo un poco gris por ejemplo background color dejar en Ed d dd y a los contenedores le doy un background color

blanco Entonces ven de Esta forma tienen todo el contenido principal acá y los pueden separar un poco entonces vienen acá y le dan Gap 10 píxeles por ejemplo entonces ahí tienen los contenidos separados y cuando redimensiona la página no se va a ver mal porque el Gap solo es de separación entre elementos AC voy a ponerle otra resolución va a ser 480 que es un clásico el Gap es solo de separación entre elementos además se lo pueden sacar en responsive y a la esto Que está acá lo deberían convertir en una especie de menú hamburguesa

y esto que está acá también o ver la forma de aplicarlo pero si Estaría bueno lo único que al Main también le den un Flex grow uno porque si no no se va a estirar Entonces es importante que tenga un Flex grow uno y ahora sí Ahora sí gente tenemos la página web terminada con el layout hecho hermoso ahora ya lo demás Depende de lo que a ustedes les guste no es más le voy a dar un Flex grow dos Ahí Va porque merece crecer más que el resto entonces este que se coma más espacio

como tenemos esto así no nos va a funcionar así que qué tenemos que hacer Exacto la etiqueta de responsive design la de meta viewport es esta que está acá perfecto y ahora sí Ahora sí tenemos la página web adaptada Qué hermosa web muchachos que nos armamos en nada de tiempo y es adaptado incluso hasta Ultra wide miren lo lograron pónganse a aurar manga de vagos no lo quiero agredir pero Sí estaría bueno que que se pongan a laburar comiencen a hacer sus propios layouts comiencen a investigar No hagan su página web final con este layout

voy a hacer una última cosa Perdón perdón sé que está mal esto pero es que me da un tox y no lo hago Vamos a darle justify content Center así Esto está centrado bien Ahora sí Bueno ahora sí gente perfecto logramos adaptar la web ya voy a parar de hablar porque estoy haciendo lo mismo hace 20 minutos imagínense que Ustedes a esto si le dan amor si le dan su Estilo si le aplican colores si le agregan los scrolls y le ponen el stick y si lo logran hacer bien nada puede quedar 350,000 veces más

lindo pero hay que dedicarle tiempo imagínense que no me voy a poner a hacer un layout completo de una página web estética en un curso que ya lleva casi 15 horas no lleva 15 ya lo sé pero lleva casi 15 horas ni empedo voy a dedicarle una hora de video solamente enseñarles esto Cuando lo más importante era esto Además vamos a hacer cosas así que duren una hora entera pero más adelante no ahora ya cuando hagamos el proyecto final o la web completa o lo que sea vamos a empezar a aplicar cosas más complejas y

vamos a tener que dedicarle más tiempo entonces guardémoslas recontra remil entendió y vamos a ver ahora sí porque además Esto está incompleto para seguir desarrollando cosas podríamos aplicar más como grid Pero lo necesitamos ver vamos a ver grid pero antes de ver grid necesitamos ver otras dos cositas que son de las últimas cosas que salieron como los container queries Sí pero antes vamos a ver otra cosa que son los feature queries así que bueno vamos a ver muy rápidamente lo que son los feature queries después veremos emos lo que son los container queries y después

pasamos con grid así que bueno Comencemos con feature queries Bueno para relajate qué querías Ver los feature queries Por qué aparece Mobile F si dijiste que íbamos a ver los feature queries relajate porque te mete un cachetazo como ya lo hemos hablado en otras circunstancias en la que si me desobedeces pu cachetas bueno eh ahora lo que vamos a ver es un concepto llamado Mobile First Qué jor es el Mobile First SIMPLE Mobile First es una forma de pensar el desarrollo de páginas web de una forma en la que primero creamos una página web adaptada

a Dispositivos móviles y de dispositivos móviles la vamos adaptando a resoluciones más grandes por qué Porque el objetivo es que Mobile First es decir primero que se vea bien y funcione bien en dispositivos móviles y después en dispositivos más grandes Esta es una tendencia que Eh bueno marcó al comienzo de la década de se ponía ret técnica bueno en 2009 más o menos apareció un muchacho llamado Luke rowski no sé cómo se pronuncia rowski Pero sí ese tipo Llamado yo siempre le dije a robli Lu robli que es un muchacho que dijo Che Mira aparecieron

nuevas tecnologías aparecieron los eh los celulares y ahora se puede acceder a la web desde el celular o sea que lo que necesitamos hacer es crear páginas web que brinden una experiencia en celulares y como todo el mundo está usando celulares para acceder a las páginas web necesitamos hacer que primero trabajemos con un enfoque Mobile F Por qué Porque si hoy Por hoy sobre todo hoy en pleno 2024 todo el mundo accede a las páginas web desde el celular necesitamos hacer que primero sea bien en celulares y después en computadoras por qué esto depende el

consumo si vamos a hacer algo que por ejemplo tiene un público general o sea algo que no es de Nicho okay No es que vamos a hacer por ejemplo una página web para que las personas que trabajan en mercado libre se encarguen de administrar un panel de control o sea Algo b2b por ejemplo para que puedan manejar varias cosas No no es eso Qué es es algo para todo el mundo es una tienda para comprar ropa por ejemplo es una página de una red social Entonces lo hacemos Mobile F porque la gente principalmente va a

entrar desde el celular qué hacemos primero le adaptamos primero hacemos que funcione bien en dispositivos móviles y de ahí le adaptamos quizás a dispositivos de tablet por ejemplo más grandes y después Le adaptamos a dispositivos de computadoras por ejemplo de escritorio entonces lo que hacemos Es hacer que primero se vea bien el escritorio después tenemos el otro que es de top First que es decir primero escritorio y de escritorio lo vamos adaptando a Mobile qué es lo que hicimos recién creamos un Holy grail que es este patrón de diseño que tiene un header tres columnas

y un fooder y con este patrón primero lo creamos en escritorio y Después de escritorio lo desarrollamos para para Mobile eso es desktop First Por qué Porque primero lo hicimos en escritorio para que se vea en una computadora y después en un Mobile Entonces ahora vamos a intentar hacer el mismo ejercicio pero adaptándolo primero a móvil o sea que primero t móviles y de móviles agrandarlo acá tenemos la web que teníamos antes es muy simple lo que tenemos que hacer es esta propiedad ahora no se la vamos a dar cuando Alcance una resolución chiquitita no

se la vamos a dar de entrada así que de entrada le vamos a dejar que esté en none y acá lo mismo no vamos a darle el Flex Direction column en esta resolución se lo vamos a dar al Main wrapper de entrada Dónde está Main wrapper acá Flex Direction column ahí ya Aunque arranquemos en computadoras de entrada se va a ver así que es como se vería en un dispositivo móvil Okay entonces esta Va a ser la la resolución Mobile de Entrada Okay qué es lo que tenemos que hacer después adaptarlo Bueno entonces ahora venimos

acá y acá damos las otras medidas que es ahora por ejemplo el Main wrapper va a estar en Flex Direction Row cuando cuando tenga un mean o sea un withd mayor a 800 píxeles por ejemplo Entonces si ahora agrandamos a más de 800 píxeles vamos a probar ahí es cuando se pone en columna de vuelta ahora tenemos que hacer Que aparezca este elemento si tenemos más de cu 380 Píxeles que es lo que teníamos antes en vez de Max min es el contrario le vamos a dar un display block porque las asid son de display

block y ahora ya está Ah qué boludo Me faltó el pixeles Ahora sí Bueno ahora sí probamos agrandamos y ahí está pero el problema acá es que aparece no en resoluciones mayores a 480 píxeles Esto va acá y Esto va acá Ahora sí Entonces ahora sí achicamos ven y estemos Así es como entramos dentr si no tuviéramos esto la página web carga así Pero con las media queries si se hace más grande tenemos adaptado a dispositivos que tienen una resolución media y si lo volvemos a estirar volvemos a tener un dispositivo adaptado a esta resolución

entonces así funciona Mobile First las estrategias Uh ya no hay batería Bueno lo termino así porque la tengo enorme no malditos eso no va a pasar no nunca me voy a quedar sin pantalla entonces para utilizar el Mobile First lo que hacemos Es decirle Esto justamente no si la pantalla tiene al menos 480 píxeles va a tener este estilo Y si la pantalla tiene al menos 800 píxeles vamos a utilizar este estilo Así es como funciona con estrategias de creación de páginas basadas en desktop First utilizamos el Max wid Por qué Porque le decimos si

tu resolución es más chiquitita que 500 píxeles vamos a dar un estilo para celulares porque los celulares tienen menos de 500 píxeles mientras que como vaf es al revés la Creamos para celulares y después la adaptamos decimos si tu pantalla tiene más de 500 píxeles posiblemente seas una computadora entonces le vamos a dar estilo para una computadora Esa la diferencia la creamos a móvil y adaptamos a resoluciones más grandes y con texto First la adaptamos a a una un escritorio y la tiramos después a resoluciones más chiquitas Entonces lo bueno de esto es que tenemos

una limitación por qué porque tenemos el Desafío de que tenemos que hacer que toda la información de nuestro contenido quee que o sea que entre en una pantallita chiquitita de celular Entonces tenemos el desafío de hacer que podamos presentar la mayor cantidad de información en la menor cantidad de contenido y tiempo posible Entonces es es un buen reto es un buen desafío lo que hace que nuestras páginas sean más simples más minimalistas y en muchos casos Entonces es mejor y además tenemos Que ver cómo gestionamos el contenido porque priorizar el contenido y gestionarlo bien para

resoluciones chiquititas es un reto entonces Está bueno que lo sepamos a enfrentar pero la recomendación es que si bien o Mobile First es el enfoque principal sobre el que se trabajan las webs O sea primero se hacen para Mobile y después se agrandan en la mayoría de los casos donde hay un público que es Main sobre todo si es para adolescentes o personas Promedio mñas o sentenas no hay que olvidarse que si por ejemplo yo estoy trabajando en una plataforma para que no sé los médicos administren su sistema no voy a hacer una plataforma Mobile

First Por qué Porque los médicos van a trabajar bajar desde su escritorio o desde su oficina en una computadora entonces sabemos que los médicos no necesitan un sistema como bf tenemos que hacer que primero funcione en computadoras que es el principal lugar Donde se va a usar en una computadora y después lo hacemos mfs para que si el médico quiere entrar a chequear algo del celular pueda hacerlo eh tenemos que ver cuál es el objetivo A quiénes estamos apuntando Y si nuestro público objetivo principalmente va a entrar de celular apuntamos a celular eso sería todo

así que bueno gente Ahora sí vamos a ver los feature queries que son otra de las posibilidades que tenemos que esto es interesante porque los feature queries Nos permiten principalmente actar en caso de que el navegador no soporte una regla no una propiedad o un valor de una propiedad así que bueno vamos a ver cómo funcionan los feature queries bueno gente ahora vamos a ver muy rápidamente Cómo funciona esto de los feature queries los feature queries que también se lo suelen conocer como media queries de nivel 4 porque es como forman parte de css4 que

si bien no salió Sí sí cs4 va a salir básicamente Son una herramienta no que le permite a los desarrolladores escribir código en caso de que el navegador soporte una funcionalidad Yo acá tengo mi mi ccs no es un html completamente supónganse que yo quiero aplicar un estilo Como por ejemplo color ocle no que se acuerdan que era una propiedad complicada digo Bueno mira si el navegador suport si el navegador soporta No si el navegador soporta y acá ponemos la expresión si soporta el color ocl por ejemplo o occh Que es nuevo en caso de

que soporte esto por ejemplo 30 30 30 no En caso de que lo soporte Es que esto en realidad no es así esto sería más 30% 0.2 por ejemplo y ahí s un 30 en caso de que soporte esto qué vamos a hacer vamos a agarrar el body por ejemplo y darle un color y darle este color Entonces qué hacemos estamos diciendo mira en caso de que el body soporte esta propiedad le vamos a dar este color Entonces yo vengo acá escribo en el body y me lo soporta como Me lo soporta me lo da

vamos a aumentarle un poco Esto entonces como el body me soporta esta propiedad es decir como el vo soporta esto que está acá lo usamos ahora Para qué me sirve esto y alto para eso Mejor usa un failback no O sea agarra esto y Pon este color acá y después si no funciona venís y ponés color y ponés el otro color o haces primero esto le das un color acá o sea le das este color Y después agarras al Body y le das otro color con diferentes Especificidades o sea son filb es lo que vimos

antes no no porque en este caso sí es medio inútil hacer esto okay en este caso sí es inútil hacer esto pero en caso de que el navegador no lo soporte no va a dar el estilo Entonces qué estamos haciendo acá esto nos permite hacer cosas por ejemplo en caso de que tengamos to una propiedad que no se soporta si yo por ejemplo sé que el navegador soporta display grid Por ejemplo si yo sé que el navegador me Soporta la propiedad display grid al Body por ejemplo le doy un display grid Pon L y si

no lo soporta que sería supports not esto sería si no lo soporta qué hago le doy un display Flex entonces acá le doy estilo al contenedor no como si fuera display Flex por ejemplo agarro así Y le doy un Flex Direction column por ejemplo vengo acá y le pongo un Flex grow 1 le pongo un Flex bas 0 y le defino sus propiedades y acá empiezo a trabajar en grid pongo grid template Call y arranco a trabajarlas no Entonces esto sí nos sirve nos sirve para que en caso de que Un diseño se rompa en

caso de que no se soporte alguna propiedad por ejemplo estoy trabajando con subgrid no que es una ya vamos a ver más adelante pero es un módulo nuevo de grid eh es para que básicamente los los nietos también sean grillas como una grilla de la grilla Pero bueno ya lo veremos más adelante eh pero básicamente es interesante Porque si el diseño está Basado 100% en subgrid Y si el navegador No soporta subgrid no va a funcionar Entonces qué hacemos definimos todos los estilos para que funcione con subgrid y en caso de que no lo soporte

definimos Todos los estilos para que funcione sin subgrid Entonces de esa forma la página no se nos rompe eso es lo que yo creo que que está bueno además es legible y funciona de esa forma mejoras la compatibilidad creas un desarrollo más seguro decir además es una forma de Probar características del navegador sin romper la página por lo que está bueno también y normalmente también se usan en combinación con media queris y demás para probar más cosas no en fin es una práctica recomendada usar el feature queries cuando estamos probando una funcionalidad nueva que en

caso de que el navegador no la soporte podría romper el diseño o en caso de que sí se soporte podría desacomodar Entonces tenemos que plantearlo y chequearlo con el supports Con un feature query para asegurar de que funcione o no funcione porque si de eso depende que nuestro diseño se rompa o no la probamos con el supports Así que nada Es una herramienta super poderosa y pasamos a la última sección de todas que es el container queries son una herramienta poderosísima que viene a complementar El mambo de los media queries vamos a ver cómo es

esto de los container queries y después de eso vamos directo con grid así que vamos con Container queries Bueno ahora vamos a ver lo último de todo antes de cerrar con este apartado y estoy hablando de los container queries los container queries o o o lo los media No no son media queries Son son queries de contenedor Ahí va los queries de contenedor pero no le digas así por favor sí es verdad que representan un avance significativo en el diseño Okay sobre todo en la parte del desarrollo we Pero por qué bueno Básicamente nosotros cuando

trabajamos con un media query lo que hacemos Es agarrar un medio completo por ejemplo agarramos lo que se va a visualizar la impresión el media print y eh lo modificamos en el print Si queremos agarrar una pantalla completa agarramos un screen una pantalla y modificamos la O sea según las características de la pantalla pero cómo se querían ustedes ahora mismo si yo les dijera que también podemos agarrar un elemento volverlo un Contenedor y que depende las medidas de ese contenedor se le de estilo a lo que está dentro o sea se puede como agarrar un

contenedor y según las propiedades de ese contenedor Dale tiro a los elementos adentro es una locura es realmente un avance porque lo que no podíamos hacer antes era no podíamos agarrar un elemento y verificar que depende de su resolución pase algo o pase otra cosa teníamos un mediaquery por ejemplo y el mediaquery tenía tres columnas y se Achicaba la del medio si se achicaba la del medio teníamos que ver la forma de hacer que o no se achique la del medio o una columna se tire para abajo en cambio ahora podemos hacer que si la

del medio se achica el contenido se adapte porque la columna del medio se está achicando es increíble para hacer esto es muy simple supónganse que yo por ejemplo Acá tengo un div no y a este le voy a poner la clase container y acá dentro voy a crear un p y adentro del P voy a pegar Voy a poner voy a tener el lson de toda la vida para hacer que esto funcione yo tengo que venir acá y darle a container primero lo tenemos que definir como contenedor para eso ponemos el container type y container

type es una propiedad que lo que nos permite hacer es definir el tipo en este caso va a ser en Line size es decir vamos a poder condicionar las propiedades que le vamos a dar por su ancho en este caso o sea tenemos size size solamente tiene en cuenta lo que Vienen siendo las dimensiones en bloque y en línea de ambas mientras que inline size solo tiene en cuenta las dimensiones en línea y después tenemos normal que básicamente hace que esto no sea un query container O sea no pueda considerarse un query container No yo

lo voy a dejar en inline size entonces lo que vengo a hacer ahora es agarrar ara y decir container y ahora vas a tener que en caso Okay vamos a vamos a venir acá y poner que los p van a tener un font size De TR píxeles Ahí va Pero vamos a ponerle de ocho para que no quede tan chiquito pero en caso de que el Max wid sea de 500 píxeles por ejemplo vamos a hacer que el p que está dentro de container porque ahora esto ya cuenta como container tenga un font size de

20 píxeles por ejemplo Ahí está entonces si el contenedor ven es más chiquitito que 500 píxeles se pone así y estamos ahora midiendo el contenedor ahora también podemos darle nombre cómo le damos Nombre a este contenedor porque ahora si nosotros ponemos más contenedores podemos crear más contenedores Pero esto se va a aplicar a todos los contenedores a todos Yo lo que quiero es un contenedor en específico bueno le vamos a poner container name y el container name va a ser por ejemplo no sé va a estar dentro del contenedor Main no porque va a ser

el contenido principal de la página Entonces esto igual podemos poner cualquier n podemos ponerle pene Iba a poner y de esta forma solamente está funcionando en el contenedor Main y ahí se estira y ahí me está funcionando solo en el contenedor Main acá le vamos a dar 600 para que funcione mejor ahí va así así lo podemos notar más ven ahí está ahora si yo le pusiera otro nombre por ejemplo Mayan ya no funciona porque esto está intentando darle esta regla al contenedor llamado Mayan y no tenemos ninguno Tenemos uno llamado Main por eso funciona

y le vamos A dar encima color red y le vamos a dar un background color negro Entonces podemos dar ahora okay condiciones por el contenor cosa que es mágico esto Esto es mágico o sea cuando nosotros utilizamos la propiedad container type estamos creando un contain context que básicamente esto permite la posibilidad de que con esta palabra reservada esto que está acá podamos con esta regla seleccionar ese contenedor y utilizar un query en el contenedor para verificar Que en caso de que la altura sea tal de lo que sea podemos hacer otras cosas Entonces al p

y esto solamente Aplica para los que están adentro O sea si yo agarro Ven y hago así y se lo doy por fuera este p va a tener otro estilo por qué porque solamente le estamos dando a los p que están adentro de container Y eso es mágico Entonces cuando hacemos esto le estamos creando un contain context con esto le estamos asignando un nombre al container y de esta forma Estamos seleccionando el container Y en este caso el container Main y estamos diciéndole que todos los contenedores Main que tengan 600 píxeles o menos le van

a dar este estilo a sus cajas contenidas O sea a sus hijos y esto es la magia del container query O sea primero permiten una mayor flexibilidad y modularización nos permiten tener un código más modular que o sea básicamente se pueden adaptar los componentes según el espacio que el contenedor padre tenga Disponible además podemos reutilizar componentes porque podemos crear componentes específicos para reutilizarlos en diferentes contextos pero ese componente ya va a tener unos estilos predefinidos cosa que es espectacular también lo único hay que de a poquito empezar a chequear la compatibilidad porque no es compatible

en todos los navegadores pero ya casi todos lo soportan Así que yo ustedes lo uso sin miedo lo único hay que tener en Cuenta también la complejidad del código porque en sistemas que son más grandes sí pueden aumentar un poquito la complejidad del código Así que hay que tener cuidado ahí pero si lo saben implementar y arrancan a poco lo van aprender a hacer bien Un ejemplo muy interesante puede ser una tarjeta imagínense que ustedes están desarrollando una tarjeta no una misma tarjeta un Card que se usa en diferentes partes del sitio web ustedes qué

hacen Siempre usan un media queries depende de la resolución y se va a adaptar y usa todo flexible pero aún así es complicado Bueno qué hacemos agarramos y medimos el el ancho o o las resoluciones de ese contenedor entonces a todas las tarjetas le vamos a asignar ese contenedor y ese contenedor va a estar programado para que cuando se achique su tamaño toda la tarjeta se adapte y esto muchachos es el futuro de la web por no decir el presente porque muchas web modernas ya Lo están aplicando así que bueno gente me despido de esta

sección con este hermoso cierre de esta herramienta poderosísima vamos a abrir una nueva sección hermosísima que es la sección de grid el apartado de grid que es lo último que necesitamos saber para crear componentes super potentes y además no falta animaciones pero podríamos hacer casi todo gente estamos llegando al fin termina con animaciones pero grid el último gran módulo de css que nos falta Ver ya vimos un montón de módulos Ya vimos F Xbox que fue importantísimo y ahora nos falta el último gran módulo que es grid vamos a ver grid Bueno les quiero dar

la bienvenida a esta sección de grid les juro les juro que quiero decir gird la gente que me sigue en el canal hace un tiempo sabe que yo en lugar de decir grid decía gird y eso era espectacular porque me encantaba decirlo así es más nosotros decíamos gird y escribíamos grid pero Aún así esto entiendo que puede llegar a generar un montón de confusión Y lamentablemente esta vez no lo voy a poder hacer okay Así que les voy a dar la bienvenida a esta sección apartado de grid a ver veámoslo de esta forma ccs grid

layout Okay o bueno simplemente grid es un sistema de diseño bidimensional que lo que hace es permitirnos a nosotros los desarrolladores crear eh básicamente interfaces o layouts enteros complejos Okay básicamente de forma fácil y encima con con cosas flexibles A ver quiero explicar lo mismo que lo que dice con flexbox pasa que esto es incluso más fácil que flexbox o una es que ya dominan flexbox no sé si me me explico bien Es decir nosotros ya conocimos el css flexbox layout o bueno simplemente Flex que era un módulo de css enfocado en crear caja flexible

Eso es todo apuntaba en una dirección o elegíamos trabajar con filas o sea Direction Row y Trabajábamos en filas todos los elementos que los agregamos los íbamos agregando en fila y la otra que era column que cada elemento lo íbamos agregando a lo largo de una columna Entonces nosotros definí que el flexbox iba a ser una fila y todos los elementos los poníamos de izquierda a derecha o de derecha izquierda o decíamos que iba a ser una columna y los poníamos de arriba a abajo o de abajo a arriba eso era todo pero con grid

esto es diferente porque Con grid en vez de elegir una sola dirección es decir en vez de decir nuestro flexbox va a ser una fila Y que todos los elementos se pongan de izquierda a derecha o derecha izquierda o en vez de decir que nuestro elemento sea una columna y que todos los elementos vayan hacia abajo o vayan hacia arriba acá lo que hacemos Es distinto acá decimos el la grilla va a trabajar tanto horizontalmente como si fuera una columna como verticalmente Como si fuera una fila porque en grid no tenemos una sola dirección tenemos

dos por lo que nos va a permitir trabajar con filas y columnas no vamos a tener la necesidad de elegir si trabajar con una o con otra vamos a poder elegir ambas si en Flex por ejemplo hubiéramos querido hacer esto habríamos creado por ejemplo una fila flexbox y para armar columnas cada flexbox item debería tener a su vez un display Flex y estar en dirección de columnas de esa forma parecería que Tenemos filas de columnas pero no no no hay nada más horroroso que hacerlo de esta forma es mala práctica No es correcto se les

va a romper todo No no es bueno es lo peor que pueden hacer literalmente es mejor usar tablas antes que hacer esto bueno acá apareció grid y dijo Che mira puedo proponer una mejor forma de crear cosas con grid grid justamente fue diseñado para esto para superar las limitaciones anteriores que no se podían hacer que ahora ya podemos Hacer es decir viene viene a superar esa Barrera de trabajar en una sola dimensión y ahora podemos trabajar en dos dimensiones ahora vamos a responder la pregunta que tanto han pedido Cuándo trabajo con flexbox Y cuándo trabajo

con grid Bueno es muy simple si ustedes tienen que trabajar con diseños que requieran literalmente solo una dirección o trabajamos en fila o trabajamos en columna pero cuando estamos trabajando con grillas o con Contenidos que van a cambiar ciar y demás lo mejor es trabajar con grid esto por ejemplo lo hacemos con grid esto otro también lo hacemos con grid o esto otro también lo hacemos con grid Entonces ahora vamos a ver por qué es mejor hacerlo con grid porque cuando ustedes dominen todas las herramientas solo se van a dar cuenta es que no es

que es una pregunta que yo se las tengo que responder eso puede ser su principal error creer que esto es una pregunta que Yo les debo responder y no es así es una pregunta que ustedes solo se van a poder responder es como que yo le diga cómo puedo cambiar el color de fondo agarro y le bajo la opacidad al elemento negro para que se vuelva gris o mejor le doy un color Y ustedes solos van a darse cuenta Cuál es lo más óptimo según el caso Esto es lo mismo van a entender solos cuando

usar flexbox y cuando usar grid una vez que terminen de aprender grid dependiendo de lo que tengan en Mente Si quieren hacer cosas de una sola dirección o si quieren hacer cosas de dos direcciones pero cuando terminen grid van a terminar de de entender cuándo cada caso porque sí Ahora si alguien les pregunta cuándo usan grid y cuá flexbox Bueno le van a decir Bueno si yo quiero trabajar con diseños que van en una sola dirección trabajo con flexbox Y si quiero con diseños que vayan en dos direcciones por ejemplo filas y columnas lo pienso

con grid Sí Pero yo les pregunto bueno ejemplos y por ahí no se les ocurre ahora la respuesta ya lo saben ahora tienen que saber aplicarlo a la vida real tienen que saber cómo identificarlo y para eso vamos a aprender antes de comenzar quiero que veamos algunos conceptos clave okay algunos conceptos que son requisito para ver grid así como lo hicimos con flexbox solo que ahora sí tengo presupuesto para un editor mentira lo voy a editar yo todo el curso lo Edité yo muchachos la verdad que no no no siento que es tan complicado conseguir

Editores que trabajen bien que editen bien si es un editor y Quieres trabajar conmigo por favor Mandame un mail Mandame un mail acá yo solamente quiero que trabajes con After effects con prem con Photoshop con audition quiero que seas profesional que seas bueno y tampoco quiero que me cobres 300 un video de de 15 minutos No porque yo los edito en dos días o sea un poquito De gana también postulate siempre estoy buscando Editores Porque todos los que arrancan editan reb no les hago ni una corrección todo lo hacen de madre Pero a medida que

va pasando el tiempo es como que van perdiendo las ganas pierden la motivación y trabajan como el me da bronca trabajar con tantos Editores y que todos arranquen siendo cracks y de repente arrancan y bajan y bajan y bajan y bajan si tienes los huevo y si te dan postulate la verdad Que voy a estar encantado de trabajar con Así que nada ya saben Mandame un mail acá y lo analizamos bueno bataa de hablar ahora sí vamos a ver los conceptos básicos así como lo hicimos con Flex Pero esta vez de grid Así que antes

de comenzar quiero que ya arranquen con ahí un conocimiento de Qué es cada cosa para arrancar tenemos el contenedor grid o el grid container que básicamente es el elemento padre que se define como un contenedor cuadrícula es Decir si a un elemento le damos display grid ese elemento ya es el grid container este elemento puede tener varios elementos hijos que se colocan dentro de la cuadrícula por ejemplo todo esto es el grid container después tenemos los elementos de la cuadrícula que serían los grid items que son los elementos hijos directos del contenedor de la cuadrícula

cada uno de estos elementos puede ocupar una o más celtas en la cuadrícula cada uno de estos Pequeños elementos es un grid item después tenemos las líneas de la cuadrícula las líneas se definen como los bordes de la cuadrícula y separan las filas y las columnas Eso es todo las líneas de la cuadrícula se pueden referenciar para colocar elementos en la cuadrícula es decir cuando trabajamos con grid podemos hacer referencia a esas líneas O sea si le decimos que un elemento se posicione al principio o al final o al centro va a tener en cuenta

Esas líneas al principio de esa línea o al final de esa línea entonces Está bueno Porque eso lo podemos considerar después tenemos los grip tracks que básicamente las filas y las columnas en el sistema de cuadrículas son tracks un Track puede ser o una fila o una columna o sea cada una de estas filas o cada una de estas columnas se puede considerar un grid Track después tenemos las celdas de la cuadrícula que las celdas es el espacio entre estas cuatro líneas de Cuadrículas yacentes o sea es la unidad básica donde se pueden colocar los

elementos y ojo porque acá hay una diferencia es muy distinto un grid cell o una celda que un grid item un grid item es el elemento html que es el hijo de una caja que tiene display grid pero un grid cell es el espacio real que grid almacena para esa celda puntual en la que se va a estar colocando el elemento ya que el elemento puede ser así y acá tendríamos el grid item sin embargo el Grid cell sería Este Entonces está bueno que sepamos diferenciar porque nosotros podemos agarrar un grid y definirlo y aún

así no tener elementos es decir podemos agarrar y decirle a un display grid vas a tener tres filas y tres columnas y ahora aún así no hay ningún elemento Pero todas estas son grid cells siguen siendo celdas están vacías pero siguen siendo celdas Y por último tenemos los grid áreas o de de grid ya podemos decir que básicamente son partes Del del grid Okay que están delimitadas por cuatro líneas de grid o grid Lines las grid área pueden constar de una o de más celdas y se utilizan para colocar elementos de manera más eficiente dentro

de la cuadrícula esto por ejemplo podría ser un grid Area esto podría ser otro grid Area Y nosotros podíamos decirle a un elemento por ejemplo que ocupe todo un grid arrea es decir en lugar de que un elemento ocupe un una sola celda podemos decirle que ocupe cuatro celdas Por ejemplo y tod es esas cuatro celdas serían todo un área esto y muchísimo más podemos hacer con grid además de obvio por lo que sí van a ver que muchas cosas de las que tiene grid se parecen a flexbox Como por ejemplo alinear elementos Sí también

Usan el space el space around el Level Y entonces hay cosas que ya van a estar familiarizados pero otras que vamos a tener que ver de Cero y todo esto hace que grit sea increíblemente poderoso Así que no voy a Hablar más Ya di la introducción y vamos Ahora sí a ver cómo crear nuestra primera grilla o nuestro primer grid así que bueno vamos Bueno ahora vamos a crear nuestra primera cuad no sé si decirle cuadrícula grid ya yo siempre le dije grid Es raro habl en español no bueno en fin vamos a crear nuestra

primera grilla nuestro primer grid pero básicamente tienen que entender que trabajar con grid implica crear un entorno en el que podamos Trabajar con filas y columnas es eso establecemos un marco de trabajo en el que le decimos al navegador e quiero trabajar con filas y quiero trabajar con columnas de tal forma que yo por ejemplo Acá tengo eh seis divs que tienen la clase grid item que están adentro de un eh grid mayor que se llama grid o sea Son seis div adentro de un div que los contiene Eso es todo voy a agarrar a

los div a los grid items Mejor dicho y le voy a dar un background color el azul Que me gusta a mí 48e Vamos a darle un margin 10 píxeles Ahí va y un padding 10 píxeles Ahí va y un font size de 20 píxeles y un color blanco Ahí está el font si que seale de 30 píxeles mejor hasta acá no es nada raro tenemos lo mismo que tendríamos Antes tenemos simplemente ven un di que se estira porque esto es lo que hacen todos los dips se estiran si yo acá agarro el grid Y

le doy display grid Okay acá ya algo mínimo se puede ver okay okay Si yo le Saco esto ven que un mínimo cambio hay ahí vamos a dar de vuelta a grid ven que un cambio hay es decir hay una diferencia que es mínima pero la no se llega a notar tanto pero les voy a resumir básicamente lo que acaba de suceder lo que acabamos decir al navegador es que queremos que este elemento se convierte en una grilla y cuando un elemento se convierte en una grilla si no definimos nada y solo le definimos que

va a ser una grilla cada Hijo Pasa a ser una fila implícita ahora vamos a ver lo que es una fila implícita pero básicamente es una fila tenemos filas y columnas las columnas son así las filas son así lo que acá también es que ustedes dirán Che pero ese cambio que acabamos de ver o sea si yo Ya de por sí le saco esto ven que antes lo que está pasando acá es el margin collapse se acuerdan de lo que explicamos del margin collapse es decir si Acá hay 10 píxeles de margin de esta caja

y Acá hay 10 píxeles de margin de esta caja no van a sumarse para convertirse en 20 no se van a colapsar y cada uno va a tener cinco o la suma de los dos van a tener 10 de tal forma que ahora nos queda algo más simétrico y que no parece como que hay diferencia es decir el esp el el margin de 10 píxeles que tenemos acá es el mismo que tenemos acá vayan a ver la sección que vimos al principio pero el margin collapse es este concepto pero cuando trabajamos con grid ahora no

hay Un margin collapse Entonces sí si a cada div le dijimos vas a tener 10 píxeles de margin cada div tiene 10 píxeles de margin Okay y no se colapsan Entonces el elemento de arriba también tiene 10 y este espacio que está acá es más grande porque en vez de tener 10 como antes cuando colapsaba los márgenes tiene 20 esto es el primer concepto que lo pueden ir a la sección de de cuando explicamos lo que es el margin bueno Ahí lo si no vieron eso porque se lo saltear porque Se creían que tenían la

así bueno van a tener que volver porque no no tienen la así Ahora si lo entendieron Perfecto entonces sí tienen la así y si me seguís ahora la no la tenés así la tenés así de enorme Entonces nada yo que vos te sigo porque no perdés nada no imagínate darle el botón a suscribir y por solo suscribirte a un canal te duplica el tamaño del sería espectacular No si pasa me ties que pasar 3000 más amor Te pasé 12000 pes no me le el mensaje te estoy diciendo Bueno eso es lo primero que sucede aún

así Si le sacáramos el margin esto no lo notarían Okay de hecho le puedo dar por ejemplo un Border dos pixeles solid negro por ejemplo y no lo notan le sacamos el display grid y ahí sí realmente no hay un cambio cambio Si le aplicamos un margin el cambio que estamos viendo lo estamos viendo por eso porque literalmente Ya ahora no colapse El margen entonces en vez de que cada cada espacio entre divs tenga 10 tiene 20 porque es la suma de 10 arriba de uno y 10 abajo del otro Entonces eso es todo pero

ese no es el único cambio porque si nosotros ahora venimos al elemento y le sacamos el grid por ejemplo okay Ahí está Le damos un Wi del 45 por por ejemplo y un display inline block vamos a ver que ahora los elementos se posicionan uno al lado del otro no hasta acá está perfecto si a ustedes no les Aparece eso bueno Bájenle un poquito en vez de ponerle 45 pónganle 40 hasta que les aparezca uno al lado del otro no para que hagan esta prueba conmigo pero si ahora le dan display grid display grid fíjense

que igual se ponen uno abajo del otro por qué bueno yo ahora les voy a explicar lo que sucede si le damos botón derecho y le damos inspeccionar vamos a ponerlo abajo Acá está vamos a hacer un pequeño zoom acá vamos a bajar los estilos acá tenemos el Display grid ven Qué es lo que está pasando ven que se están marcando se están marcando como unas grillas lo ven estos botones esto estas líneas delineadas que que las vamos viendo acá Bueno eso porque estamos marcando la grilla cada uno de estos es un grid item si

apretamos acá nos aparecen estos numeritos que significan que son filas de alguna forma no entonces acá podemos ver esto podemos ver las divisiones cada una de estas divisiones son las celdas Pero en este caso son los rows en este caso son filas por qué Porque cuando nosotros creamos una grilla automáticamente lo que grid dice es Ey hay una caja que quiere convertirse en una grilla Entonces por defecto vamos a hacer que tenga solo una columna y todos los elementos se van a poner en fila cada elemento va a ser una incluso aunque le pusiéramos inline

aunque los elementos fueran en línea igual quiero que sean filas porque cada hijo va a ser Una fila diferente cada hijo directo se va a convertir en una fila básicamente siempre van a dejar un espacio en línea porque no es un espacio en línea como tal sino que está ocupando una celda diferente Eso es lo primero que está pasando nosotros estamos diciendo Ey Mira vas a tener una sola columna y cada hijo va a ar una fila porque tenemos una columna y muchas filas tantas filas Como hijos tengas Entonces eso es todo ven yo de

hecho puedo seguir agregando Ahí va y Esto me sigue agregando porque me está agregando de esta forma en cambio Si yo le saco el display grid por defecto se comportan así Ah porque les di inline bueno inline block Ahora sí se comportan así entonces esa es la principal diferencia que tenemos cuando trabajamos con elementos que son hijos de una grilla que básicamente van a ocupar todo por defecto nosotros podemos venir y decirle e Mira yo esto lo voy a sacar mira Mira la realidad es que no me está Gustando mucho esto porque Estás diciéndole que

todos los grid items que son los hijos del grid van a ser una fila y yo no quiero que sea una fila entonces acá viene la magia hay una propiedad que es la principal de grid que se llama grid template columns que acá grid me va a decir mira Quiero que me digas Cuántas columnas queres tener primero lo que nos pide son las filas solamente nos pide medidas o sea ahora cada cada medida que agreguemos va a ser El tamaño de una columna si yo por ejemplo agrego 200 píxeles 200 píxeles es lo que va

a medir cada una de las columnas o sea si nosotros no le dejamos nada le estamos diciendo cada cada columna va a ocupar todo lo que ocupe la grilla si la grilla mide 100% entonces la columna va a ocupar un 100% pero nosotros podemos cambiar el valor de esa primera columna y decirle que sea de 200 píxeles pero no termina acá ahora Podemos agregar otra columna y decirle En vez de que todos los elementos se dividan en una columna podemos hacer que se dividan en dos columnas y acá le agregamos otra columna por ejemplo de

otros 200 píxeles y ahora fíjense qué interesante porque qué tenemos filas un dos tres filas pero también tenemos columnas uno dos columnas o también podemos decirle que queremos que tenga tres columnas y de esta forma ven estamos diciéndole la primer columna va a medir 200 píxeles la segunda va a Medir 200 y la tercera va a medir 200 entonces de esta forma tenemos 1 2 3 y abajo 4 5 6 Esto es lo que estamos haciendo cuando trabajamos con grid lógicamente si ustedes ahora me preguntarán dalto O sea que los elementos van el primero va

el primer elemento se posiciona acá el otro se posiciona a la derecha no vamos a hacer lo mismo que hicimos antes Vamos a darle Direction right to left y ahora vamos a ver qué van a cambiar porque esto es lo Mismo tanto flexbox como grid manejan sus ejes principales a favor de la dirección del texto ent Si estamos en un país árabe por ejemplo el texto se lee de izquierda a derecha Entonces perdón de derecha a izquierda entonces acá van a ver que ustedes el primer elemento se va a posicionar acá el segundo acá el

tercero acá el cuarto acá porque estamos a favor de la dirección del texto como leen los árabes por ejemplo o los que leen de derecha izquierda pero nosotros Como por defecto lo tenemos así en este caso permanece así una probabilidad que también nos permite poner esto una posibilidad Perdón es porcentajes acá también por ejemplo vamos a poner un 10% Entonces esto me va a ocupar un 10% Entonces si la página o más fácil mira un 30% si la página crece este grid crece Entonces tenemos un grid que ya es Dinámico es más podemos pedirle que

ocupe el 50% Este grid es el único que crece los demás no Entonces es como una Forma dinámica de trabajar no y lógicamente si se achica ya me lo tira para allá por qué Porque grid por defecto también viene con esta posibilidad de que si un elemento supera el tamaño de la cuadrícula que se vaya para abajo o que se acomode o que se cree una nueva columna eso también lo vamos a poder ir haciendo No pero de a poquito porque nada se arranca por el principio siempre también podemos usar viewer por ejemplo vior with

que en este Caso es lo mismo que porcentaje porque ocupa casi ocupa como ocupa todo y sin márgenes es lo mismo también podemos usar rems 20 Rem por ejemplo después tenemos más valores tenemos auto FR Pero no quiero que los veamos ahora tenemos esta min content Max content a lo que voy es que quiero que lo veamos con el tiempo no voy a explicarles todo lo que se puede hacer de entrada quiero explicarles lo más básico y mientras vamos avanzando van a ir profundizando Porque si no se van a remare créanme que se van a

remare después También tenemos otra probabilidad Vamos a ponerle acá un 20% en vez de 20 Rem porque nosotros no sé si se están dando cuenta pero solamente le estamos diciendo Cuántas columnas queremos Pero si nosotros queremos que además tenga filas que nosotros queremos Ah bueno ahí cambia nosotros podemos mir acá y decirle Por ejemplo grid templates rows en este caso le vamos a decir la primer fila va a Tener 100 píxeles de alto y la segunda va a tener 300 pixeles de alto por ejemplo o la primera va a tener 20% por ejemplo de alto

y la otra va a tener un 80% Pero esto es del tamaño de la celda Así que vamos a ponerle en píxeles por ejemplo 300 píxeles acá y la otra va a tener unos 500 píxeles por ejemplo no y ahí tenemos dos vamos a hacer la más chiquita porque si no me parece que se cae medio pedazo entonces de esta forma podemos decirle Mira yo quiero que que La primer columna sea de El 20% o de 60 píxeles entonces la primera es de 60 píxeles la segunda es de 200 y la tercera es de de

400 incluso Mira qué guaso que soy y le estamos diciendo la primer fila va a ser de también de 60 80 y la segunda va a ser de 200 entonces así se puede trabajar con filas y columnas estamos definiendo esto Ahora si nosotros definimos solamente la primera la tercera se adapta al contenido o sea tenemos por defecto Ahora vamos a ver más adelante lo lo que es el grid implícito y el grid explícito pero básicamente es como son filas que se crean automáticamente que más adelante van a ver cómo las podemos definir sus tamaños y

demás pero acá solamente estamos definiendo el tamaño de la primer Zelda ven esto estamos definiendo solo el tamaño de la primer fila Perdón no celda fila y así es como funciona grid Okay podemos trabajar con columnas podemos trabajar con rows Nosotros por ejemplo agregamos una tercera fila vas a tener 100 píxeles y si ahora seguimos agregando elementos por ejemplo vamos a agregar el siete vamos a agregar el ocho y vamos a agregar el nueve Ven y ahí acá abajo están tenemos el siete el 8o y el nueve porque le dijimos que la tercer fila va

a tener de 100 píxeles aunque los elementos no estén ven si yo saco por ejemplo el siete y el ocho Yo vengo a inspeccionar bajo acá abajo voy a seguir Teniendo como ven el espacio reservado para el ocho y el espacio reservado para el nueve Por más que no estén porque le dije al navegador yo quiero que haya tres columnas y tres filas y quiero que tengan estas medidas Entonces por más que no haya ningún elemento la celda tiene que estar igual Eso es en parte un poco La magia de de esto no vamos a

sacarle este elemento número siete y vamos a sacarle Esta última fila que no la necesitamos o también podemos dejarle Por ejemplo dos columnas que en vez de tener tres columnas tenga dos columnas pero que tenga tres filas entonces la primer fila Tiene 200 píxeles de alto la tercera 300 píxeles de alto y la última 100 píxeles de alto y ahí ya más o menos que lo tenemos resuelto no bueno en mi caso no lo voy a dejar así lo voy a dejar con 200 y arriba las columnas as Así me gusta a mí es más

le voy a dar 100 200 300 podemos verlo como que git template columns Define el width de de Las columnas y el grid template rows Define el hate de las filas No eso lo podemos ver así así que bueno ahora lo que vamos a hacer es ir a ver el valor auto para estas dos template rows y template colums Y también vamos a ver el FR vamos a ver lo que es una unidad fraccionaria muy común que es el FR de fraction o de fracción que es muy útil y nos permite tener trabajar con más

dinamismo no así que vamos a ver eso bueno no voy a hablar más vamos a ver el Valor auto de estas propiedades y lo que son los FR así que bueno vamos bueno básicamente acá tenemos lo que vienen siendo dos valores que ya si bien pudimos haber visto se ponía ré vamos hac muy simple quiero explicarles estos dos valores posibles para el template columns y el template rows porque los van a estar usando bastante sobre todo el último que es FR Pero qué pasaría si yo por ejemplo acá le dijera que la primer columna va

a ser auto Bueno lo que pasa es que se estira completamente Para ocupar todo el ancho disponible pero eso es por un motivo y es que este div por ejemplo el primero No vamos a agarrar el primer item Vamos a darle grid item First child no tiene un wid Porque si primero tuviera un wid wid de 100 píxeles no lo ocuparía todo pero sí lo que pasaría Es que la celda se estiraría completamente Para ocupar esto así que eso quiero que queden claro una cosa es el tamaño de la columna otra Cosa es el tamaño

del hijo Por eso digo es muy distinto esto para que lo tengan en cuenta no O sea el tamaño reservado va a ser este todo este va a ser el tamaño reservado pero él está Solamente ocupando Este pero el reservado es todo esto ent vamos a sacarlo Ahora sí pero qué pasa si yo por ejemplo a otra columna le doy auto Bueno lo que pasa es que dice mira el espacio disponible es este pero ese espacio disponible Cómo se calcula bueno se calcula por el Contenido de las cajas también es decir yo por ejemplo acá

le agrego más texto a esta ven que ahora lo que se va a estar distribuyendo es este espacio este espacio que está acá es el mismo que está acá ven que la medida es la misma Bueno eso es porque básicamente elimina todo el contenido y dice Okay a ver ya lo único que hay libre ahora es este espacio más o menos este espacio más o menos y tenemos que dividirlo entonces lo dividen entre los dos es algo Parecido al Flex grow Okay si yo por ejemplo acá le saco esto fíjense que ahora sí están iguales

Por qué Porque tenemos la misma medida acá y la misma medida acá en cambio Si yo por ejemplo como dije antes le damos más contenido Ven ahora el espacio que sobra es solamente Este Entonces esto es lo mismo que va a medir acá si nosotros no le diéramos básicamente lo que hace es agarra el min content que ya lo vamos a ver pero básicamente el min content es Esto content no lo quiero mostrar ahora pero ya lo vamos a ver min content Ya lo vamos a ver lo que es esto y amente todo el espacio

que sobra es esto que está acá esto es el espacio que sobra Entonces qué hace lo que hace es repartirlo entre los dos auto auto y ese espacio que está ahí pum lo reparte y se lo da a este y a este porque eso es lo que hace o sea básicamente primero calcula el min content de todo y cuando ya calculo el min content de todo ve Cuál es el espacio que sobra y ese espacio que sobró lo distribuye entre las cajas a las que le dimos auto sí que es medio complicado al principio pero

véanlo como que primero lo que hace es asegurarse hace que todo el contenido entre o sea el contenido de esta caja el contenido de esta caja el contenido de esta caja y todo entre y cuando ese contenido ya entró y está asegurado que todos los espacios están ocupados con las medidas correspondientes o sea este Tiene que tener 300 píxeles listo se quedan 300 píxeles este tiene que tener al menos el tamaño para que entre este texto y esto tiene que tener el tamaño para que al menos entre este texto Entonces ahora cuando ya tienen todo

eso listo quedó algo de espacio Bueno ese espacio lo vamos a distribuir entre los que pusieron auto y ahora fíjense que auto es esto que está acá eso vendría siendo auto Okay es eso primero Calcula todo lo necesario para que todo ocupe el Tamaño que tiene que tener y lo que sobra se lo damos a las filas que tienen auto si lo tien solamente uno se lo damos a uno si lo tienen tres lo distribuimos entre las tres y así Eso es auto básicamente Calcula todo lo mínimo que tienen que tener los elementos para verse

como corresponde y lo que sobra lo distribuye en las filas que le decimos que tengan auto Qué ricao es el agua con gach me du un poco la cabeza Está abriendo la cabeza está poniendo la Cabeza feo No importa tengo que seguir tengo que seguir Ya voy ya voy horas de curso debo estar más o menos casi llegando a la hora 15 y medio ahora Cómo funciona el auto en Rose es lo mismo si yo por ejemplo agarro la grilla y le digo la grilla por ejemplo que vamos a V acá arriba decirle hate de

la grilla va a ser de 80 View por hate ahora si yo le doy auto a esta por ejemplo se va a estirar Para ocupar 80 View por hate le vamos a dar Sí vamos a dar 80 80 Está Bien entonces Esto es lo que va a estar haciendo auto ahora si yo le doy a las dos auto ambas se van a estirar Para ocupar todo y yo escribo ven No pasa nada pero esta Sí porque esta se tiene que se tiene que ajustar Pero qué pasa si yo por ejemplo le tiro un v y

lo demás lo tiro abajo Ah bueno lo que pasa es lo mismo ven se está Ajustando para el contenido y lo que se distribuyen sería el espacio que sobra que es este espacio que está acá Este espacio ven se Lo están distribuyendo a lo largo de toda de toda la columna de hecho no solamente eso a lo largo de toda la columna entonces este espacio es el que se van a estar distribuyendo dicen Ey Mira el contenido mínimo para esta para todo esto para toda esta fila es este que está acá el contenido mínimo para

esto es esto que está acá entonces lo que sobra que es más o menos Esto se lo vamos a distribuir equitativamente a cada una esto y esto para qué Para que Cubran todo el ancho de la grilla que en este caso es de 80 View por he vamos a sacarle esto porque no me gusta nada ahí está ahora sí Y tenemos otra medida otra unidad que van a ver lo que es pero básicamente es FR si yo acá le pongo un FR lo que está haciendo es ocupar todo el ancho disponible eso es lo que

hace ocupa todo el ancho disponible pero si le damos un FR a cada uno van a ver que acá ya no le importa el ven yo escribo más escribo menos no importa Por qué Porque el FR lo que hace es lo divide Exactamente igual o sea el ancho disponible O sea lo que sobra no tiene en cuenta el contenido es decir Ah bueno esta tiene este contenido y est tiene este contenido no importa o sea no lo aplica restándole el min content lo aplica del wid total se entiende o sea el Wi total eso es

lo que aplica ahora Obviamente si yo me paso ven si yo me paso un poquito va a tener que ajustarlo porque el contenido total de la caja es Este la medida mínima que va a tener Es esa que nosotros le dimos pero lo que sobra en este caso se lo va a estar dando toda esta Porque si nosotros le sacáramos un FR a esto V si se lo sacáramos y le pusiéramos por ejemplo auto sería lo mismo No cambia nada Por qué Porque en este caso necesita ocupar todo este espacio le heicho si damos min

content ven es lo mismo no cambia porque se está estirando Para ocupar ese espacio Entonces como en este caso Tenemos el contenido mínimo está afectando a un frr ahora si pusiéramos unf acá no cambia pero si le sacáramos el contenido ven ahí sí no le afecta y se distribuye Exactamente igual entonces mientras auto tiene en cuenta el contenido mínimo y lo que sobra lo distribuye un FR no lo divide Exactamente igual y se lo da en partes iguales ahora si una caja necesita más contenido para crecer se lo da y lo que sobra lo da

a las otras cajas que tienen FR Entonces eso es más o menos todo Yo sé que al principio es un poco complicado pero es raro que al principio ustedes entiendan todo yo ya se lo di que a lo largo de estas 15 horas y pico que llevamos de curso no van a entender todo a la primera relájense es más incluso Aunque hayas entendido las 15 horas que te viste ahora a la primera no está mal dejate ser tenés la cabeza quemada viste 15 horas de contenido es más posiblemente haya visto más porque Haya pausado retrocedido

le hayas dado me gusta te hayas suscrito No se preocupen si no entienden a la primera Está bien no se sientan mal con ustedes mismos siéntanse mal si no están suscritos al Canal y con la campanita activada ahí sí siéntanse mal pero si no realmente no hay de qué preocuparse no pero fua de joda No entendieron Ya lo vamos a ver porque Esto no es que lo vamos a ver una sola vez esto lo vamos a ver a lo largo de todo el curso así que Ya van a tener ejemplos de uso o casos para

que entiendan su funcionamiento pero básicamente se usa mucho más FR que auto porque FR divide Exactamente igual y podemos tener una noción mucho más certera de los porcentajes que está dando esto que está acá va a medir Exactamente igual que esto a menos que el contenido que es esto que está acá crezca más que esto y necesite ocupar más espacio entonces lo que distribuya Y sí va cambiando pero es lo mismo tengan En cuenta que un frr representa un espacio una fracción del espacio disponible en el contenido de la cuadrícula y funciona igual que Flex

grow si nosotros a todo le damos un FR si a este le damos dos FR todo esto se va a partir en cuatro pedacitos y este va a tener dos de ese cuatro pedacitos Y estos van a tener los otros dos este va a tener uno y este va a tener el otro Eso es todo lo mismo que acá si por ejemplo le damos cuatro y acá le damos Dos y acá le damos dos esto no va a cambiar porque son equivalencias Okay es matemática básica esto tiene cuatro pedacitos esto tiene dos y esto tiene

uno pero este le podemos decir que tenga uno y ahora sí Ese tiene un Entonces ahora todo el espacio se está rompiendo en siete es 4 + 2 6 + 1 7 si acá le damos tres se está partiendo en nueve pedazos porque 4 + 2 6 + 3 9 y a la tercera columna le estás dando tres espacios TR tres fracciones del espacio Disponible a la del medio le estás dando dos fracciones del espacio disponible y a la primera le estás dando cuatro fracciones del espacio disponible ahora si lo dejamos así y ahora le

ponemos un FR por ejemplo a la Estamos rompiendo todo en seis por qué porque tenemos 2 + 3 más uno que da seis entonces la primera va a tener de los seis pedacitos de espacio disponible va a tener dos la tercera va a tener tres y la cuarta va a tener uno así es como funciona todo Estos los FR Okay practiquen prueben investiguen es un tema bastante Interesante como para tocarlo un poco como a tu hermana no se pone r no les juro que a veces tengo que tirar ese bocado porque está ahí es como

desaprovechar la oportunidad ent tenene una hamburguesa acá y no comerla ahí me doné Me regalé Ya sé De hecho no hay nada más que explicar o sea ahora lo que tenemos que explicar son dos funciones bastante interesantes que es repeat y mi Max repeat es para cuando cuando no queremos repetir todo el tiempo Pues si nosotros ponemos que queremos tener 20 columnas de 100 píxeles vamos a tener que poner 100 100 100 100 100 hay una forma de repetir más fácil o sea repetir los tamaños más fácil y también min Max Si queremos que la

columna tenga un mínimo y un máximo así como si fuera un Max hate y un Max wid o un min hate y un min with esto lo podemos hacer así que bueno vamos a ver estas dos funciones Que son interesantes y son muy útiles de hecho Eh Así que vamos Bueno ahora lo que vamos a ver hacer dos funciones muy interesantes una llamada repeat que básicamente nos sirve para evitar repetir siempre la misma expresión o las mismas expresiones y la otra que es min Max que es para darle un mínimo y un máximo a una

columna o fila supónganse que yo acá tengo un FR no es más más fácil Tengo cuatro columnas que lo que van a hacer es ocupar todo el Espacio disponible no decimos bueno Mira la verdad que yo estoy cansado de repetir cuatro veces esto qué hacemos bueno ponemos repeat y esto nos va a decir Ey Cuántas veces vas a repetir la expresión cuatro qué expresión vas a repetir cuatro ve veces un FR actualizamos y es lo mismo pero ahora podemos venir acá y decir tres lo quiero repetir tres veces o cco lo quiero repetir cinco por

qué repit lo que hace es nos reemplaza todo este código por Esto la cantidad de veces que decimos acá o sea si acá decimos cuatro veces un FR es como si tuviéramos cuatro columnas de un FR Eso es todo acá podemos decirle tres por ejemplo y acá tenemos tres columnas de un frr Entonces esto es como no se evita andar repitiendo una y otra ve Esto está bueno yo por ejemplo pongo acá y pongo 100 píxeles estas son tres columnas de 100 píxeles y aún así no es que estoy limitado eh Porque si ustedes quieren

seguir agregando columnas pueden Yo acá puedo poner espacio y poner una columna de 200 píxeles tienen tres columnas de 100 píxeles y tienen una de 200 y yo puedo seguir Y acá es más adelante puedo poner una de 200 píxeles y ahí está repites solamente eso es como una función que es como si fuera una columna más no solamente que en vez de ser una columna más es una función que nos repite lo que nosotros le pidamos a la expresión que tenemos acá Eso es todo eso es lo que hace repeat es interesante Pero una

cosa interesante sobre el repeat supónganse que tengo un FR 2 frr un FR 2 frr un FR 2 frr acá estoy diciendo que va a haber una fila que tenga pero la reput Acá hay un patrón un FR 2fr un FR 2fr un FR 2fr si yo quiero repetir patrones también puedo Cómo hago bueno acá Tenemos [Música] uno acá tenemos uno dos este que está acá y tres este que está acá tenemos tres veces el mismo patrón Cuál es el Patrón el patrón es un FR 2 FR tenemos el patrón ese repetido tres veces qué

hacemos Bueno lo reemplazamos por repeat pas a repetir tres veces el siguiente patrón un FR 2 FR Entonces esto es lo mismo ahora le podemos decir que lo repita a dos por ejemplo ú estás repitiendo dos veces el patrón 1 FR 2 FR también podemos decirle vas a tener 50 píxeles 100 píxeles Entonces vas a tener tu primer columna 50 otra de 100 y así vas a seguir dos veces ahora puedes Hacerlo tres ent tenés otra más 50 píxeles 100 píxeles o podemos tener cuatro cuatro y ahí tenemos otro 50 otros 100 píxeles y así

es como funciona repit es bastante interesante porque eso es todo lo que hace nos permite repetir Okay columnas expresiones es muy usada para evitar hacerlo todo el tiempo porque si nosotros por ejemplo dijéramos un FR no a veces nosotros lo que queremos hacer es decir que por ejemplo van a ver eh cuatro columnas que tienen Un FR y una sola que va a tener 4 FR Entonces tenemos por ejemplo vamos a agregar más elementos hasta ahí vamos a agregar 10 entonces acá vamos a tener justamente que estas columnas de acá deberían medir lo mismo que

esta que está acá y así es miden lo mismo pero el día de mañana por ahí vamos a querer hacer que esto no sea así vamos a querer hacer que todas estas sean de 2 frr no entonces tendríamos que hacer esto entonces para evitarnos esto qué hacemos Bueno ponemos repeat y acá ponemos cuatro un FR y ya esto lo sabemos pero si ahora queremos reemplazarlo en vez de decirle cuatro veces a esto que en vez de uno va a ser dos ponemos dos y ya se reemplaza todo y acá ponemos cuatro y ahora son todas

iguales todas miden lo mismo ent Esto está bueno porque es una forma interesante de ir cambiando muchos valores de una sola vez y después tenemos otra función Yo acá le voy a dar 100 píxeles tenemos otra función Vamos a Darle 200 para que sea más una de 200 una de 100 tenemos otra que es min Max min Max le dice ey Mira toda la columna esto también aplica para la filas ahora lo vamos a ver en las filas toda la columna va a tener un mínimo de algo y un máximo de algo yo por ejemplo

acá puedo decir min Max y funcion igual eh el primer valor va a ser por ejemplo 400 píxeles o 300 píxeles y el otro valor va a ser 500 píxeles Entonces qué va hacer esto se va a chicar hasta que esto mida Como mínimo 300 píxeles y se va fíjense que si ya acá por ejemplo Ya está empezando a generarse la barra de scroll por qué porque esta caja ya mide 300 píxeles Entonces no se pueden más entonces si la agrandamos va a pasar algo parecido fíjense que se está agrandando se está agrandando hasta que

la caja mida 500 píxeles no se va a agrandar más de 500 píxeles y acá yo Por ejemplo si le pongo 700 se va a agrandar hasta 700 eso es lo que hace es como Ponerle un min width y un Max wid sol ente que en lugar de ponérselo al elemento se lo ponemos a toda la columna entera así funciona el el min Max ahora supónganse que queremos tener cuatro columnas iguales venimos acá y ponemos min Max por ejemplo vas a tener como mínimo 100 píxeles y como máximo 300 píxeles 1 2 3 4 acá

tenemos cces como mínimo tienen 100 como máximo tienen 300 y más o menos se van adaptando no hasta acá está todo bien Ahora si yo quiero en Lugar de tener todo este código ilegible repetirlo usamos repeat porque podemos mezclar el repeat y el min Max Yo vengo acá y pongo repeat vamos a repetir cuatro veces min Max para tener un mínimo de 100 píxeles y un máximo de 300 actualizamos y es exactamente lo mismo Entonces tenemos resumido esto qué le estamos diciendo vas a tener cuatro columnas Que tengan un mínimo de 100 píxeles y un

máximo de 300 píxeles la verdad que es bastante interesante y Como dije también aplica para acá si yo por ejemplo quiero que haya dos filas de 200 píxeles puedo poner repeat dos de 200 píxeles y ahí tenemos dos filas de 200 píxeles o puedo poner tres para que la tercera también tenga 200 píxeles o puedo decir por ejemplo que va a haber 2 con 200 pel y la última va a tener un FR para que ocupe todo el ancho disponible Entonces si la grilla por ejemplo mide 90 View por he se va a adaptar a

lo que le digamos que mida si mida 100 se va a Adaptar a 100 y ahí tenemos algo que ocupa básicamente toda la cuadrícula Y es más podemos hacer que por ejemplo esta en vez de tener tres tenga esto y que la última tenga un FR entonces la última siempre Se va se va a adaptar a todo el espacio disponible ahí tenemos una grilla relativamente flexible este espacio quedó libre lo podríamos rellenar si quisiéramos pero acá en vez de hacer eso le voy a dar dos ahí ya más o menos está relleno eliminar el décimo

El último Ahí va fíjense Qué interesante es esta grilla que acabamos de armar se adapta a todas las resoluciones bueno con el tiempo van a ver que vamos a crear cada vez mejores grillas no pero bueno ahora ya por lo menos aprendimos a usar dos valores que dos propiedades dos funciones en realidad porque esto ya son funciones que es repeat y min Max y hasta incluso Cómo combinarla si yo les mostraba este código al principio del curso ni en pedo se hubieran imaginado Entenderlo y ahora sí fíjense están entendiendo un código complejo Que no es

complejo Es simple pero aún así grid es bastante avanzado para lo que es SS entonces vienen de madre ahora una cosa interesante que no sé si se pusieron a pensar es Qué pasa si yo por ejemplo acá le voy a poner no sé si ustedes se están dando cuenta Okay lo que está pasando acá vamos a sacarle esto y vamos a ponerle repeat dos 200 píxeles también vamos a tener lo mismo Vamos a sacarle el hate no sé si te estás dando cuenta que eh las las filas que se crean automáticamente ven es como que

se van distribuyendo para adaptarse al alto de la grilla no sé si están dando cuenta eso ven O sea si la grilla no tiene alto se ajustan a Su contenido pero si la grilla sí tiene un alto se adapta para ocupar todo el alto si yo acá le dira por ejemplo 70 View por he se adaptan 80 se adaptan Estas son las grillas que nosotros no definimos Cómo Podemos hacer para darle un estilo a las grillas que no definimos porque las únicas grillas que tenemos definidas hasta acá son estas cuatro tenemos definidas dos columnas una

y dos y dos filas una y dos pero esto que está acá no no lo definimos y a pesar de no haberlo definido está ahí entonces lo que podemos hacer es darle tiro también a esto porque hay dos tipos de grid tenemos el grid explícito que es el que nosotros definimos grid implícito que Son los campos o celdas que se crean automáticamente sin que nosotros lo definamos podemos darle estilo también al grid implícito Así que vamos a ver más en profundidad Cómo funciona esto del grid implícito y el grid explícito Así vamos Aprendiendo a trabajar

también con estas grillas o celdas que se crean automáticamente no incluso aunque no definamos así que bueno vamos a ver cómo es esto el grid implícito y el grid explícito Bueno ahora vamos a ver lo que Es el grid implícito y el grid explícito es decir si por ejemplo acá tenemos una fila de 3x TR no tenemos os esta fila que está acá esta fila que está acá es una fila de 3 por 3 tiene tres filas 1 2 3 y tres columnas 1 2 3 Entonces esta es la lo que nosotros ya definimos es

más incluso aunque le saquemos elementos ven aunque se lo saquemos Ahí está si venimos acá vamos a checar que efectivamente ven que esto sigue almacenando el espacio lo sigue Almacenando como lo sigue almacenando el espacio esto es grid explícito porque le dijimos al navegador Cuáles van a ser las celtas Cuáles van a ser sus tamaños ya lo definimos es algo que explícitamente definimos pero si nosotros hacemos lo contrario ahora es decir en vez de hacer que esté justo o esté restante que sobren qué pasaría bueno acá vemos se siguen agregando filas Pero qué pasa con

esta fila si le damos acá también grid las trata como Filas por qué es esto esto pasa por dos cosas primero Esto justamente es el grid implícito grid Trata a todos los elementos como parte de su grilla Entonces si estamos creando elementos que nosotros no definimos Y son parte de una grilla tien que hacer algo grid qué es lo que va a hacer bueno va a crear nuevas filas las columnas ya están porque las columnas ya las definimos las columnas van a tener el tamaño que queremos Pero lo que no definimos es el Alto de

las filas esto lo Define automáticamente lo que hace por defecto es hacer que se adapte al total del contenido y si no que se adapte a la grilla pero nosotros también podemos definir esto eso lo hacemos con la propiedad grid auto Rose que es esta que tenemos acá ven si yo esto lo saco esta porque se la di recién por defecto esto lo hacemos con la propiedad grid auto rows que lo que hacemos Es decirle Por ejemplo y mira quiero que tengas 200 Píxeles o sea todas las filas que se creen automáticamente que tengan 200

píxeles o podemos decirles que tenga tengan 50 píxeles y esto por qué es bueno Esto es porque normalmente grid e el vieron que en flexbox podemos cambiar la dirección de filas a columnas y de columnas a filas por ahí ustedes se preguntan dalto Pero por qué en vez de crearse nuevas filas no se crean nuevas columnas o sea Fíjate que lo único que se crea automáticamente son las filas Porque las columnas No si definimos que hay tres columnas va a haber siempre tres columnas pero si definimos que hay tres filas puede haber cuatro cinco seis

filas tres filas son las que definimos son las explícitas pero el resto de filas van a ser implícitas Eso es porque también como ya verán y tienen conocimiento en grid pueden cambiar ustedes la posición de todo es decir pueden cambiar la dirección de Los ejes de tal forma que lo próximo que se crean En vez de crearse filas se crean columnas Sí eso también lo pueden hacer Ya lo vamos a ver más adelante no se adelanten pero sí también podemos hacerlo yo lo haríamos con la propiedad grid autoc colums O sea si en vez de

crearse filas automáticas se crearan columnas podemos crearlas así entonces las columnas automáticas que se creen más van a medir 200 píxeles o pueden llegar a medir 100 píxeles o lo que nosotros querramos ahora es irrelevante Porque lo que se crea automáticamente no son columnas o sea acá no se van a crear nunca nuevas columnas se van a crear nuevas filas que son estas que están acá lo que estamos haciendo es definir el tamaño de esas filas que se crean automáticamente porque es lo único que por ahora nos interesa pues justamente Esta es la magia de

El grid implícito y el grid explícito tenemos la otra propiedad que es justamente grid autof Flow que acá podemos decirle Mira Puedes Ponerte en posición de columnas Entonces ahora sí Todo lo que se cree van a ser nuevas columnas van a ser nuevas columnas y esto ya no afecta Por más que lo saquemos no cambia nada porque ahora como son nuevas columnas tenemos que decirle mira ahora el Flow va a ser en columnas o sea que vas a seguir la dirección de columnas y yo acá puedo venir y poner grid eh autoc colums las columnas

que se crean automáticamente van a medir 100 píxeles entonces cada Elemento que agregamos o que sacamos ven se convierte en una nueva columna entonces en vez de ponerse en filas lo ponemos en columna Entonces esto es lo que hace autoflow le estamos diciendo vas a seguir las columnas o vas a Si tenés que agregar cosas nuevas elementos nuevos que no estén definidos hacia dónde vas a hacer Bueno por defecto viene en Row eso es lo que hace y si no tenemos la otra que es dence No la vamos a ver ahora el Dance pero ya

lo vamos a Ver más adelante pero básicamente lo que intenta hacer es rellenar los huecos en blanco si entran en la cuadrícula se es como es para rellenarlo ya créanme que lo vamos a ver cuando trabajamos con muchos elementos el dence es muy usado por ejemplo para crear Galerías de imágenes Ya lo vamos a ver pero el dense es muy usado ya más adelante repito lo veremos pero por ahora quedémonos con la idea de que podemos utilizar en Row o en columns para que cada vez que se crean Elementos nuevos esos elementos puedan ponerse en

forma de nuevas columnas o en forma de rows que serían nuevas filas Y si creamos nuevas filas las filas las definimos con grid auto rows y las columnas con grid auto colums eso sería todas las formas que tenemos de forma muy resumida de trabajar con grid explícito e implícito entonces resumiendo todo el grid explícito es el que nosotros definimos puede ser con grid template colum grid template rows Con grid Area Por qué no ya lo veremos y el grid implícito es el que nosotros sin definirlo o sea es el grid que nosotros Por más que

no querramos se crea a veces lo vamos a querer crear igual pero lo que digo es que es grid que nosotros no definimos explícitamente no le decimos al navegador vas a tener tres filas y tres columnas no es grid que se crea automáticamente Y de forma normalmente dinámica porque nosotros no vamos a querer eh decirles la cantidad entonces Tenés el explícito que es el que vos creas que decís van a tener tantas filas tantas columnas y después tenés el otro que vos le decís a todas las que se creen de ha en más que tengan

este patrón no O que hagan esto que haga el otro ya vamos a ir viendo cómo combinarlas todas estas propiedades para crear cosas reales vamos a ir viendo ahora de a poquito como dije todas las propiedades que van a ir surgiendo y cómo realmente las aplicamos en un Desarrollo real así que bueno hasta acá llegó esta sección y me emociona mucho porque quiero cuanto antes que ustedes vean todas las cosas mágicas que tiene grid para que cuando terminemos ya al fin nos pongamos a construir cosas estamos O sea no estamos terminando el curso falta un

poquito todavía pero estamos acercándonos al final a mi etapa preferida que es la parte de los proyectos quiero que ustedes se vayan de este curso con muchísimos proyectos Hechos en su portafolio aplicando todo lo que aprendieron en el curso para que puedan desarrollar cosas reales y espectaculares no voy a hablar más vamos con el siguiente apartado de grid esto como que no sé si no sé si lo notaron pero desde que arrancó el curso estoy como más musculoso mirate brazo bueno gente ahora lo que vamos a ver son los grid gaps que es lo mismo

que flexbox es la separación entre elementos pero vamos a ver porque tenemos que Verlo Tenemos el mismo ejercicio que antes yo lo que voy a hacer acá va a ser agarrar el grid Okay y darle un Bueno a todo principalmente Okay al body y a los divs le voy a dar un display no un Box sizing Border Box para que ocupen todo y no no me jodan y le voy a dar un Border 3 pixeles solid negro para qué para que podamos ver algo que les quería mostrar a continuación acá le vamos a poner un

frr Ahí está y vamos a eliminar varios elementos que no nos sirven vamos a Borrar también el hte bueno acá como podemos ver si nosotros utilizamos el el margin como utilizamos acá tenemos el problema que les comentaba antes que es el tema de del margin collapse en este caso no colapsa el margen es decir tenemos este espacio alrededor de cada elemento Entonces no tenemos la misma separación total para eso hay muchas cosas que se suelen hacer que es por ejemplo agarrar al margin 10 píxeles y agarras el contenedor grid por ejemplo y Le das un

padding de 5co píxeles o de sí de 10 píxeles Entonces de esa forma te quedan ves la misma separación por elemento que tienen con los bordes pero esta es una respuesta que es medio una porquería para eso no utilizamos ni padding ni tampoco utilizamos margin para eso lo que hacemos es utilizar una propiedad que es Gap tenemos column Gap si le damos 10 píxeles si se fijan solo estamos separando las columnas 10 píxeles solo estamos separando entre sí Las columnas y después tenemos column Perdón column no Row Gap que ahora estaríamos separando 20 píxeles las

filas Esta es la forma correcta de crear separación entre elementos porque solamente nos separa de los elementos entre sí no con los bordes del contenedor ni nada parecido ahora si Si queremos resumir las dos en una podemos poner Gap 20 píxeles y es lo mismo nos ahorramos el column y el Row Y si queremos darle a medidas distintas y Hacemos esto van a ver que tenemos el colum Gap de 10 píxeles y el Row Gap de 20 píxeles quería que se note un poco más la diferencia el primer parámetro de Gap vendría siendo el Row

y el segundo parámetro vendría siendo el column Gap Entonces si ponemos uno solo es lo mismo para los dos ahora ustedes me deben decir de alto pero cómo puedo hacer si también quiero que tenga la misma distancia con los bordes la solución es s al padre también le dan un padding 20 Píxeles lo mismo que le dieron de Gap le dan de padding Y esta es una de las posibles soluciones Entonces de esa forma ven si al grid Total le damos un Wi de 90 View por Wi y le damos un margin auto ahí pueden

notar el efecto Vamos a darle al background color de negro así lo notan mejor no de negro no le vamos a dar un oscuro bastante interesante y a este le vamos a dar blanco así se nota mejor ahí como pueden observar Vamos a darle también un margin Top de 30 píxeles ahí como pueden observar tenemos la misma separación por elemento ven esto acá lo tiene acá lo tiene acá y es mucho mejor porque si el día de mañana por ejemplo en responsive incluso queremos sacarle el padding le sacamos el padding y listo cada elemento queda

así no es común igual utilizar el padding o sea normalmente es raro pero si tiene sentido lo pueden utilizar pero lo más normal es hacer así de hecho ni siquiera debería tener borde entonces Quedaría así y tampoco esto tendría un background entonces así es como que no notamos la magia que hay y directamente lo dejamos así por lo que solamente el padding aplicaría cuando tenga algún sentido que exista por ejemplo porque hay bordes Porque queremos que resalte la diferencia por un tema estético pero en este caso Cuando no tenemos colores de fondo ni bordes ni

nada sería raro ponerlo entonces esa es la forma correcta con el Gap de separar elementos Lo bueno de los gaps A diferencia de los margins fíjense Qué pasa si yo por ejemplo en vez de darle un Gap acá no vamos a hacer de cuenta que igual hubiéramos usado el margin Vamos a darle margin 20 píxeles quiero que vean acá lo que les estaba diciendo si ustedes vienen acá van a ver que cuando hacen esto más chico supónganse que lo logran hacer responsive no supónganse vamos a venir a media Green and Max withd Vamos a ponerle

no 400 píxeles por ejemplo Esto va a estar todo en una sola columna solo una una columna de un FR Ahí va ahora si se fijan ven tenemos esto así cuando vene acá tenemos esto acá Esto no se hace así tranquilos Esta no es la forma correcta de hacerlo pero supónganse que lo hacen así ven El problema que tienen acá tienen el problema del margin o sea ahora mismo tienen eh que estar o sea elemento se hace más chico y esto no es legible si ustedes tienen por ejemplo texto Esto no Es tan bueno tenerlo

así en cambio Si ustedes en vez de darle un margin le dan un Gap por ejemplo vamos aar el margin acá y vamos a ponerle un Gap de 20 píxeles ahora la única separación que hay es de entre los elementos porque no hay ningún tipo de márgenes a los costados más que el mismo margen del 90 por que le dimos acá que lo vamos a sacar ahí está ahí se observa bien entonces ahí cada elemento se puede leer y la única separación que hay es entre Elementos Mientras menos media queries tengamos que usar Mientras menos

eh capas de complejidad tengamos que agregarle al proyecto mucho mejor utilicen Gap y no utilicen margin En todo caso utilicen Gap y el padding el margin lo pueden utilizar si el diseño tiene sentido Pero bueno gente esta sección es rec cortita Porque sí porque fue cortita Ahora sí vamos con la siguiente sección que la próxima sección sí se va a complejizar un poco porque Vamos a ver grid Dinámico y responsive no porque es como que el grid sea Dinámico también nos ayuda a que sea responsive pero ahora ahora Lo vamos a ver porque vamos a

ver dos de repeat que son autofill y autofit que nos van a servir para un montón de cosas así que bueno vamos a ver cómo es esto de los grid responsive Los grid Dinámicos Perdón bueno gente ahora vamos a ver todo sobre el grid Dinámico y el grid estático para comenzar nosotros acá Tenemos un grid estático porque siempre sin importar lo que nosotros digamos o lo que se nos dé la gana no vamos a poder tener un grid que se adapte a diferentes tamaños que se adapte a diferentes medidas como máximo podemos utilizar los grid

auto y dar por ejemplo Que tengan un follow column y de esta forma vamos a ir agregando nuevas columnas por ejemplo vamos a poner acá más elementos Pero esto realmente no es Dinámico Y aunque logremos hacer que se Adapten a diferentes resoluciones repito no es Dinámico suponiendo que incluso tengan un FR también Y sí sí está bien podemos seguir agregando elementos y demás y pero no se va adaptando no vamos a tener ninguna forma para hacer que los elementos que se vayan creando que no entren cambien de posición o vayan a algún otro lugar eso

no lo estamos haciendo Entonces ahora vamos a ver ver cómo pasar de crear gits estáticos como estos que son grillas que van a tener Normalmente la misma dirección la misma resolución la misma cantidad de cuadrículas la misma cantidad de columnas la misma cantidad de filas sin importar el tamaño vamos a hacer que esto se pueda ir modificando para eso tenemos que utilizar el repeat vamos a achicar un poco esto así lo podemos trabajar mejor acá está perfecto porque en el repeat hay dos valores que son muy importantes que veamos tenemos autofit autofit que es este

que está acá autofit Y el otro es autofill uno fit ajusta porque que eso es lo que hace fit hace un autoajuste y autofill es relleno literalmente rellena vamos a arrancar con autofit Para que vean qué es lo que hace si yo por ejemplo le pongo repeat autofit y acá le pongo por ejemplo 100 píxeles lo que va a hacer si se fijan es nada Para eso primero tenemos que darle el Direction Row que tiene por defecto el Flow y ahora vamos a ver que lo que va a estar pasando es que si se fijan

ya Tenemos algo interesante y es que hacen una especie de wraap Por qué Porque que se van adaptando literalmente se adaptan hasta acá no tenemos ninguna diferencia con poner autofill hasta acá está todo bien autofill y autofit funcionan igual y vamos a ver con pocos elementos si dejamos por ejemplo tres elementos esto efectivamente funciona igual con autofill y vamos a ver con autofit también con autofit y con autofill la forma que tiene de funcionar si le damos Solo un valor está bien min Max 100 píxeles y 10 50 píxeles por ejemplo le estamos diciendo que

va a tener un mínimo de 100 píxeles y un máximo de 150 píxeles no hasta queé está bien no vemos ningún cambio sigue todo igual pero cuando aplicamos la famosa técnica del FR es decir queremos que tengan un FR porque en realidad sería una hacer esto es una vol normalmente el min Max se utiliza para poner frs acá lo que vamos a ver es un efecto interesante Ahora sí Vamos a notar la diferencia si se fijan se están creando y eliminando nuevas columnas hasta acá Está bien No acá tenemos una dos 3 cu 5 se

columnas cuando supera los 100 pixeles pum otra columna vamos a ponerlo los 150 para que se note mejor cuando hay espacio suficiente para que entre otra columna me la carga ven eso es lo que está pasando ahora esto es todo el espacio que ocupa agrandamos pum otra columna a ver a ver a ver a ver entra otra columna No lo dejamos así entra otra columna no lo dejamos así entra otra columna no lo dejamos así entra otra columna Sí entonces la dejamos arriba eso es lo que hace autofit lo que va a estar chequeando constantemente

es si en la resolución que están ahora entra otra columna y si entra la va a poner y si no no la pone Entonces eso es lo que va a estar haciendo viendo si tiene 150 píxeles disponibles para agregar otra columna más O tiene que seguir estirando Los elementos hasta que de el lugar y autofill hace lo mismo no hay diferencia ven es exactamente lo mismo por eso no se preocupen cuando tienen muchos elementos para muchos elementos no hay diferencia pero la diferencia entre autofield y autofield radica cuando hay pocos elementos Ahora sí si yo

elimino estos elementos van a ver que lo que va a estar haciendo acá es lógicamente a ver va a estar buscando que haya nuevas columnas y por ejemplo si acá tuviéramos Otro elemento miren tuc aparecería Ahí seguimos si tuviéramos otro elemento tuc aparecería ahí Entonces eso es lo que está haciendo autofill ves Vas creando columnas por más que no haya elementos si yo vengo a inspeccionar van a ver que acá si seleccionamos el grid está creando columnas ven fíjense que hay tres columnas cuatro columnas cinco columnas en este caso estiro ahora tenemos seis columnas ven

estiro de vuelta vamos a seguir y ahí tenemos Siete columnas eso es lo que hace autofill crea columnas para ir rellenando pero autofit lo que hace es ir adaptando las columnas o sea mientras que autofill rellena autofit adapta eso es lo que hace adapta y si tuviéramos ponerle un elemento más vamos a dejarle el cuarto elemento ahí va lo que se fijan es te lo tira para abajo entonces repito si funciona para varios elementos vamos a de vuelta a dejarlo acá funciona para varios elementos pero cuando ya no Tiene elementos te lo estira y esto

sería raro en algunos casos y positivo en otros casos Si nosotros queremos que genere este efecto de que se estira buenísimo pero nosotros por ejemplo si estamos mostrando no sé si solamente tenemos dos resultados no me los muestre gigantescos así y si tenemos muchos resultados me los muestre así entonces eso sí sería muy raro pero pero lo que si pueden hacer yo si esto le sacara el fondo de este color el texto fuera negro Por defecto y además tuviéramos un Tex align Center van a ver que en este caso es como Ah okay entiendo es

como que querés Que aparezca todo centrado es como si utilizáramos un space around por ejemplo no Entonces más o menos ven esto queda así y este es el efecto que se podría lograr en cambio Si ustedes utilizaran un autofill esto Sí se vería raro no porque es como que las columnas no se van adaptando al tamaño total pero aún así En la mayoría de casos donde ustedes por ejemplo s tienen que utilizar o un color de fondo o Mostrar imágenes o resultados de búsqueda esto sería muy raro o sea imagínense entrar a YouTube y observen

esto entran a YouTube y miren lo que está pasando ven es como que se va estirando el contenido lo ven bueno Esto está bien Esto está hecho con grid si esto se tiene que agrandar se agranda hasta un punto pero si esto no tuviera elementos tiene un tamaño máximo hasta Donde estirarse no se va a estirar por el resto de la eternidad Si tuviera un solo resultado no te va a mostrar un solo resultado a lo largo de toda la pantalla no el resultado se va a quedar acá y más que esto no va a

crecer entonces esa es un poco la diferencia de uso de estos dos que igual a ver Solo se van a dar cuenta cuando tengan que aplicarlos en un proyecto real y van a decir quiero que se ajuste a ese tamaño y que se mantenga porque me parece más Razonable bueno uso autofit quiero que no se ajuste y simplemente que se vayan rellenando columnas porque me parece lo más lógico para Mostrar resultados de búsqueda o para mostrar otra cosa o o imágenes y demás bueno uso autofiel y de esa forma es como si se crearan nuevas

columnas siempre por más que no sean visibles Eso ya depende de ustedes y lo bueno de esto es que también lo podemos hacer responsive o sea venimos acá y creamos un media 500 píxeles y vamos a Decir que acá el grid template columns por ejemplo en vez de ser de de 250 píxeles por ejemplo van a ser de 150 tenemos varios elementos ven tenemos varios elementos y cuando lo abrimos desde una computadora los elementos tienen este tamaño ven es como bueno es considerable es aceptable para una computadora adora pero si nos encogemos más ven ahí

por ejemplo 500 píxeles bueno Esto que está acá es por por el tema de entrar pero es como que se Adaptan ven se van adaptando alguien que lo ve desde un celular vamos a abrirlo en dispositivos en resolución celular Ah nos olvidamos agregar la etiqueta responsive perfecto Ahora sí Bueno y ahora sí ven así se ve un iPhone 14 si nosotros en un iPhone 14 no le pusiéramos esta resolución fíjense lo que pasaría vamos a ponerlo ahí ahí está si nosotros en un iPhone 14 no le dejáramos este media se ve vería así podemos elegir

que se vea así no estaría Mal Entonces de esa forma en un iPhone 14 vemos forzado a mostrar Como por ejemplo lo hace YouTube que YouTube lo hace así o podemos decirle no no si quiero que entren más elementos Entonces los hago más chiquitos para que entren no los dejo de 100 por ejemplo Para que entren tres y que en un iPhone se puedan ver así O por ahí ustedes no quieren eso y simplemente quieren dejarlo así entonces ya de esta forma tienen un eh una grilla responsive también porque por Defecto si se están dando

cuenta Están volviendo responsive a su grilla no sé si se dieron cuenta de eso por ejemplo ponen autofill no y acá ponen min Max y acá le dan los tamaños Sin embargo a las columnas del medio les cambian el tamaño Entonces siempre va a haber una más grande que otra y pueden construir quizás un layout a base de esto no entonces ya tienen literalmente una grilla responsive Porque si por ejemplo están mostrando resultados de búsqueda Los pueden mostrar si esto fueran imágenes por ejemplo vamos a reemplazar todo esto por imágenes pero lo vamos a descargar

rápido esta imagen que usamos durante todo el curso dalto png y acá está la imagen perfecto Es más fíjense s Qué interesante lo que podemos hacer ahora este este d lo vamos a borrar vamos a venir acá y vamos a darle a la imagen porque tiene un FR de tamaño lo ven Entonces es como que no se termina de adaptar Max Wi 100% Ahí va entonces Ahí se terminó de adaptar y fíjense que la última imagen se muestra completa por qué es eso porque como a las columnas pero si le diéramos más por ejemplo le

podemos dar cuatro un FR Ven y ahí aparecen cuatro le damos cinco y ahí aparecen cinco o le podemos dar autofit Y de esa forma se ponen todas iguales y se queda la última así per vamos a sacar esto porque no nos queremos meter el río le vamos a sacar que se creen automáticamente las grillas las vamos a Sacar Ahí está Y ahí sí ahora está todo definido es más a las greis auto Rose le vamos a dar también un FR Ahí está ahora sí le vamos a sacar el Gap de de no le vamos

a sacar el background color que no nos gusta nada vamos a sacar el padding Ahí va y le vamos a sacar el background color que es un asco y el Gap Sí el Gap no nos sirve y ahí está Tenemos un montón de daltos ahí que son responsives y si la imagen fuera en formato 169 Como por ejemplo es una miniatura de YouTube Voy a guardar esta esta foto de virgo estoy así ahora entonces así tenemos los resultados de búsqueda ven nada en fin esto tiene muchas muchas posibilidades y se le puede estilo por ejemplo

puedo agarrar esto y darles un realmente puedo darles un en este caso si sirve miren esto margin 10 píxeles pero en este caso por ejemplo el margin no me estaría sirviendo mucho vo a sacar el margin top este lo voy a sacar no me estaría sirviendo mucho el margin porque no me Separa las imágenes entre sí Entonces ven lo que les digo acá qué deberíamos aplicar bueno deberíamos aplicar un Gap de 10 píxeles y sacar el margin a la y ahí está y a esto le damos un padding 10 píxeles ven la diferencia que hay

esto es mucho más estético que otras cosas es más y hasta podemos darle un un borde miren esto miren esto borde radius 12 le vamos a dar estoy pronunciando para que se note Pero bueno Tenemos muchos datitos y podemos hacer que por Ejemplo en en over grid item over opacity Perdón 0.6 entonces ahí pasamos el mouse por encima y es como Ah querés entrar a esta imagen y podés entrar ya está muchachos lo logramos tenemos esta esta especie de galería rara igual esto esto no lo cuenten como un ejercicio de galería dinámica porque no es

para nada un ejercicio de galería dinámica pero digo la galería la vamos a hacer dentro de la sección de grid no no afuera Bueno ahora lo que tenemos que ver es el Siguiente apartado que es el de grid Row y grid column así que no voy a hablar mucho más Vamos a ver este apartado porque es un apartado que nos va a permitir más adelante hacer esta galería dinámica que va a ser hermosa es más vamos a agarrar la galería que tenemos acá y la vamos a modificar Per bueno no voy a hablar mucho más

Vamos a ver cómo funciona grid Row y grid column Bueno ahora lo que vamos a ver es grid column y grid Row Y cómo funcionan Grid column Start grid column end grid Row Start gr end y son la base de un montón de cosas que vamos a hacer en el futuro pero para arrancar ustedes imagínense esta grilla con diferentes líneas se acuerdan cuando expliqué lo que son las grid Lines bueno así tenemos esta línea que está acá sería la Line One después tenemos la segunda tenemos la tercera y después tenemos la cuarta entonces la cantidad

de líneas que hay son tantas como elementos más un Por qué Es esto bueno acá lo podemos ver en la grilla tenemos esta que están viendo ahora es la primer eh línea de fila O sea la primer grid Row Line después tenemos la segunda grid l Line la tercera grid l Line la cuarta grid Line y después tenemos las otras que son las e las de columna pu en este caso como tenemos tres filas hay cuatro líneas de fila como tenemos cuatro columnas hay cinco filas de eh cinco líneas de columna matemáticamente hablando podemos Verlo

de 300,000 formas como que todos los elementos están separados por eh una gridline eh Row y una gridline column y además todas las grillas tienen hay mucha forma No quiero que nos metamos en esa ahora pero solo quiero que si vienen a inspeccionar Y ustedes van a el grid como les dije se acuerdan que si activan esta opción tienen las líneas bueno activamos esta opción y vemos esto que está acá por qué Porque este uno significa que esta es la primer eh Line Tenemos la primera línea horizontal y la primer línea vertical acá tenemos la

segunda línea vertical y acá tenemos la tercera línea vertical Esta es la segunda línea horizont eh la segunda línea vertical tercera línea vertical cuarta línea vertical y así tenemos un montón okay Para qué joraca nos sirve esto Bueno es muy simple supónganse que yo voy a decirle 200 200 pixeles cada una si lo pueden observar mejor Yo puedo agarrar al primer elemento grid item First Child Entonces estamos seleccionando al primer elemento grid item si le damos 500 píxeles ven que se extiende 500 píxeles así que ya Estamos rompiendo todo bien bueno fíjense Qué pasa si

Yo vengo acá y pongo grid column Start grid column Start para el primer elemento por defecto va a ser uno por qué Porque el elemento arranca acá ven que esto dice uno o sea el grid column Start y el grid Row Start son de uno en ambos casos es de uno por qué Porque Arrancan en la primer línea vertical y en la primer línea horizontal así como el segundo elemento arranca acá ven arranca en la primer línea eh horizontal pero en la segunda línea vertical Entonces esto determina las posiciones para qué quiero yo saber esto

simple por qué yo le voy a decir mira tu grid column end o sea donde va a terminar tu línea de columna no va a ser acá porque por defecto es dos o sea si yo vengo acá si yo vengo acá y pongo dos No pasa nada Por qué Porque por defecto termina acá No sé si lo pueden ver pero hay un dos acá Bueno si yo ahora vengo acá y en vez de decirle dos le digo tres Esto es lo que pasa Le estoy diciendo que en vez de ocupar una columna que ocupe dos

para que no se rompa tanto la pantalla como lo están viendo ahora que se está rompiendo en vez de terminar en vez de que tu grid Row termine en el dos como termina por defecto vas a terminar también en el tres y de esta forma ya Tenemos esta estructura terminada le estamos diciendo tu tu tu columna va a arrancar en la primer línea que es esta que está acá la primer línea y tu fila va a arrancar también en la primer línea o sea acá la primer línea pero va a terminar en la tercer línea

de columna o sea va a terminar acá y efectivamente fíjense que terminó acá lo mismo con el Row el grid rowen dice que va a terminar acá y efectivamente terminó ahí entonces Esto es lo que nos permite hacer este Tipo de de propiedades Okay Aunque siguen existiendo las grillas porque fíjense que los espacios se siguen Viendo acá están reservados y parece que están delimitados por una cruz esto funciona así yo puedo decirle que en vez del tres puede ser el cuatro Ven y se extiende hasta el cuatro y acá le podemos decir también que se

extiende hasta el cuatro esto es por un error igual que se tenga que extender de forma tan estricta saben Por qué es esto Esto Es porque es una imagen si yo a esto en vez de imagen le pusiera por ejemplo un div esto no tendría problema y acá le pusiera la clase grid item Ahí va esto no tendría problema ven es el grid item lo ocupa todo le doy cuatro tampoco hay problema solamente funciona así con las imágenes voy a Desactivar esto de la grilla Por un segundo Para que vean algo esto funciona con las

imágenes Okay con las imágenes sí tenemos problemas no se pone una imagen directamente sino que se Pone un contenedor div y la imagen se adapta al div Okay Por eso es importante que nunca pongan imágenes directamente Porque si ponen imágenes tenemos estos problemas ven que si lo dejáramos así como antes tenemos el problema de que si queremos hacer que en vez de la tres se extienda hasta la cuatro ven se pone así y tenemos este problema mientras que si esto fuera como nosotros lo dejamos que es un div simple okay Ahí va fíjense que ahí

no hay problema podemos dejar que se Extienda hasta la hasta la cuatro o hasta la tres o hasta la cuatro acá y acá solamente que est hasta la dos Entonces esto realmente no afecta porque la colocación de los elementos acá no altera de ninguna forma a las demás eh grillas salvo su posición pero lo que estoy haciendo acá es estirar el elemento Ven y es más Pues yo puedo decirle Por ejemplo que quiero que ocupe toda toda entera la fila y ya está me lo ocupa tod entera la fila entendés También puedo decirle que ocupe

la fila de abajo y algo que esté abajo más Esto sí lo puedo hacer es normal también puedo hacer que ocupe por ejemplo hasta acá y hasta acá o que ocupe Solamente hasta acá y hasta acá por ejemplo entonces todas esas cosas sí las puedo hacer de hecho es muy común hacer esto pero como digo si ustedes quieren poner una imagen la imagen vendría a dentro a este fe Child el background imagen y ahí le doy la URL da alto. png Y ahí aparece Le doy en background size cover Ven y ahí más o menos

que medio que se adaptó background position Center y ahí tenemos mi cara ven Entonces de esa forma meo que va a aparecer mi cara y ahora sí yo puedo agarrar y decirle que en vez decir así por ejemplo que va a ser hasta la cuatro hasta la tres O puedes tirarla de acá hasta acá por ejemplo ven esto no no hay problema porque está de dentro de las cosas que me permiten hacer se entiende a eso voy a que se permite Hacer esto porque yo puse la imagen en un contenedor Entonces esto está bueno que

lo vayamos viendo desde ahora porque si no después van a tener problemas a la hora de desarrollar layouts Y no van a saber cómo enfrentarlo Entonces Esta es una buena forma de trabajar con Galerías por ejemplo no es creando un contenedor y adentro del contenedor se pone la imagen y se adapta o directamente se utiliza como fondo esto sigue funcionando igual está todo igual Solo Que est igualmente deberíamos hacerlo con todas no solamente con esta sino que con todas Pero ahora para mostrárselos como ejemplo solo se los muestro así Otra cosa también que podemos hacer

con grid colum y grid Row es agarrar y en vez de decirle En qué línea arranca y En qué línea termina podemos solamente decirle En qué línea arranca Y cuánto lugar tiene que ocupar yo por ejemplo voy a decirle Mira vas a ocupar dos Qué significa spam 2 significa vas a ocupar Dos líneas más O sea te vas a mover vas a ocupar dos celdas más hacia la derecha o sea Perdón dos celdas no vas a ocupar dos columnas más y acá lo mismo vas a ocupar dos filas más entonces Yo acá puedo decirle Bueno

ahora en vez arrancar acá vas a arrancar acá ven cómo se va cambiando en vez de arrancar acá vas a cambiar acá y se va modificando entonces Yo acá puedo ir cambiando de lugar el elemento Ven y esto no tendría ningún tipo de repercusión porque yo lo Único que le estoy diciendo es vos vas a cambiar de posición Okay pero la cantidad que se tiene que desplazar ya la establecí acá si yo quiero cambiar la cantidad la cambio en vez de dos por ejemplo voy a poner tres y ahí se mueve tres Yo vengo acá

por ejemplo y lo puedo poner acá lo puedo poner acá Okay esta también la puedo poner acá la puedo poner acá la puedo poner acá Entonces lo único que yo sé es que estoy agarrando la imagen y moviéndola de línea en línea Y después tenemos una mejor forma de hacerlo Esto está bueno porque imagínense que si nosotros no no hiciéramos esto también no fíjense que si en vez de usar spam Ahora les quiero mostrar el Por qué del spam por ustedes no entienden el Por qué del spam el spam es porque si nosotros no tuviéramos

el spam si yo por ejemplo quiero hacer Que aparezca desde la línea dos no hasta la cuatro lo quiero cambiar de posición tengo que poner cuatro acá cuatro acá Uy Perdón cuatro acá y fíjense cómo cambia ven la tengo acá pero es un lío porque tengo que dos Perdón es un lío porque tengo que andar moviendo todo y si la quiero poner uno más abajo Qué tengo que hacer tengo que decir Bueno quiero bajarlo en la columna Así que pongo tres acá y acá pongo cinco Entonces de esa forma la la sigo desplazando en la

columna es una porquería porque cada vez que modificas este tenés que modificar este y cada vez que modificas este tenés Que modificar este cl si ustedes ya le dejan directamente el spam Entonces cuando Ustedes ya tienen esto así ustedes lo que tienen que hacer encargarse de desplazarlo quiero que se mueva dos pero desde la fila dos por ejemplo y ahí se movió quiero que se mueva dos desde la columna dos y ahí se movió entonces por eso es más fácil utilizar el spam y después tenemos otra forma mejor todavía de abreviar esto en vez de

poner grid column Start y grid Column end yo puedo venir acá y poner directamente Okay en vez de esas dos grid column y el primer parámetro es el Start le pongo este signito y el segundo es el end que le habíamos dicho span dos No Y ahí quedó y lo podemos desplazar desde acá ven Ahí va y desde acá lo vamos desplazando y después tenemos la otra en vez de grid Row Start y grid Row end ponemos grid Row Entonces tenemos acá el 1 bar span 2 y ahí lo mismo lo vamos moviendo en la

fila 2s en la fila 4 en la fila 3 y vamos a dejarlo por ejemplo en la fila dos y lo podemos mover en la columna dos Y de esa forma lo vamos moviendo o podemos acá darle tres por ejemplo a poner top Ahí va entonces lo movemos acá y o lo movemos abajo o lo desplazamos a Lau uno y lo volvemos a subir no entonces o o lo dejamos más arriba todavía entonces todas estas cosas son cosas que sí podemos hacer con grid y ahora lo acaban de aprender bueno gente en fin Ahora Quiero

que veamos un efecto muy común que es utilizar el dence que es cuando estamos creando componentes con grid lo que suele pasar es que se no suele romper un poco la pantalla Entonces quiero mostrarles muy rápidamente un efecto que surge a veces de acomodar así los elementos Y cómo resolverlo así que vamos ahora a ver cómo funciona el autof Flow Dance bueno ahora vamos a ver un problema muy común que suele surgir Cuando trabajamos con esto de Modificar el inicio y el fin de de un elemento no lo que quiero mostrarles ahora es bueno acá

tengo un tengo 20 grid items Okay que son 20 divs Esto es lo mismo que teníamos antes tienen un autofill min Max 150 píxeles entonces se van Ajustando automáticamente Ven a esto se van Ajustando así hasta acá está todo bien si yo vengo y agarro un ítem cualquiera por ejemplo grid item y vamos a agarrar acá tenemos los números encima El número quedó justito queda justo en la parte Blanca donde el contraste y se ve el número Bueno yo quiero elegir por ejemplo el elemento 10 no entonces vengo acá y pongo Child 10 y elijo

el 10 vengo acá y escribo algo yo puedo venir acá y ponerle grid column okay Y acá Simplemente si le pongo span 2 va a ocupar dos lugares hasta acá todo bien ya lo vimos Nada nuevo si le pongo spam tres va a ocupar tres lugares Esto está bueno porque nos agarramos poner uno Barra tal o dos barra tal Ya está lo dejamos así y suficiente si le pongo esto pero ahora en vez de a este elemento le pongo tres le pongo cuatro lo que va a suceder es que nos va a dejar estos tres

espacios vacíos Y esto no es muy estético Porque si nosotros esto lo modificamos se va a ir adaptando Pero hay situaciones por ejemplo acá arriba ven en las que se va a romper un poco el layout y esto puede hacer que quede un poco feo Okay de hecho esto Puede pasar varias veces yo puedo agarrar por ejemplo el elemento también el elemento seis y hacer que tenga un spam 3 por ejemplo y se estaría rompiendo dos veces ahí el layout ahí y acá entonces tendríamos este problema de que cuando el layout no encaja correctamente medio

que puede llegar a romperse y puede llegar a generarnos problemas le voy a dar en vez en TR le voy a dar en dos y acá en vez de darle en s le voy a dar en siete ven los Problemas que puede llegar a generar bueno estos son los problemas que pueden pasar de no saber manejar una propiedad que es la solución a este problema se acuerdan cuando estábamos viendo el Flow grid Flow Row si el Flow es en Row las nuevas filas van a ser las nuevas lo nuevo que se va a estar creando

van a ser nuevas filas si yo le doy en column lo nuevo que se va a estar creando van a ser nuevas columnas pero le tengo que dar en Row Porque si nosotros definimos El grid template columns con autofill ya no necesitamos definir columnas Ya está ya las columnas que sean automáticas en vez de Row le damos then se acuerdan que yo les dije que lo íbamos a entender bueno ahora sí ya lo entendimos y esto ven V lo que acaba pasar vamos a hacer una vez más por las dudas este espacio en blanco que

ahora está todo en blanco se va a rellenar Entonces si le damos dens ahí se rellenó y ya evitamos tener este problema de que nos quedan huecos En blanco Esto está buenísimo para Galerías la es que fíjense que por ejemplo si yo hago así el elemento siete está acá el elemento seis está acá y el elemento ocho está acá o sea no me está respetando el orden que yo le dije el elemento dices este y acá debería estar El Siete si no entra Qué hace me deja un espacio en blanco no agarra el ocho y

lo pone acá Este en vez de ser el ocho es el siete y los los los intercambio de lugar lo mismo con el 10 Si yo por ejemplo rompo más acá viene 7 8 nu y después del nueve viene el 10 y sin embargo acá el 10 me lo tiro abajo porque no entra y estos lugares el 11 el 12 y el 12 y el 13 deberían quedar vacíos si yo le saco el Dance ves deberían quedar vacíos Pero qué hace para que no queden vacíos me los rellena con los elementos siguientes para cubrir todos

los lugares Esto es lo que hace hace que no le importe el orden pero dice Okay a ver hay huecos vacíos Tenemos que rellenarlos de alguna forma y de esta forma estamos rellenando los huecos Y esta es una forma interesante de trabajar con Galerías porque literalmente tenemos una galería muy simple de crear esto cuando lo ven así Qué pasa esto bueno como esto le está diciendo que ocupe cuatro se ve obligado a ocupar cuatro espacios y acá solamente como entran tres para que ocupe cuatro líneas nos vemos obligados a a crear otra columna Por más

que no lo soporte y Eso lo que hace es rompernos un poco el layout utiliza el min content entonces la columna que crea la crea en min content para que el contenido mínimo sea el que entre pero para que pueda cumplir la condición que nosotros le dimos que es tenés que ocupar cuatro columnas entonces las ocupa de acá hasta acá está ocupando una está ocupando dos tres y cuatro y ahí nos ocupó las cuatro columnas Esto no es muy recomendado lo recomendado es trabajarlo de una forma En la que se adapte por ejemplo no sé

vamos a ponerle spam 2 entonces esa forma está bien no está mal no queda tan Wow Como querían pero en resoluciones más chiquitas se adapta Okay ahí se adapta es más le pueden dar spam 3es de esta forma ven en resoluciones chiquitas y igual lo pueden ver pero no se les rompe el layout lo mismo acá grid Row le pueden dar spam dos entonces crece dos dos filas y de esta forma ven lo pone en el lugar donde considere necesario para Que no queden huecos vacíos Entonces nada esta es una una de las mejores soluciones

que tenemos para este problema de los huecos en grid que de hecho es la única forma nativa de hacerlo prácticamente así que bueno bueno ahora que lo vimos y que ya lo aprendimos vamos con la siguiente sección estoy hablando del grid área que es bastante interesante porque bueno no voy a explicar el por qué pero tiene su magia el grid y van a entender una forma Distinta de pensar grid creo porque siento que abre muchas posibilidades nuevas Así que no hablemos más vamos con la siguiente sección que es grid Area Bueno ahora vamos a ver

cómo funciona el grid Area pero básicamente grid Area nos permite De alguna forma crear una especie de layout teórico donde le decimos al navegador En cuántas filas queremos separar cada fila o asignarle un nombre que después le podemos reemplazar por un grido o sea es Un poco no no no sé cómo explicarlo pero básicamente lo que podemos hacer es asignar un elemento a un área específica que nosotros le dimos en grid a ver Esto es lo que teníamos antes okay un ejercicio muy simple y tenemos una forma bastante interesante de resumir las áreas es decir

en vez de darle grid column spam 3 y grid Row spam 2 podemos venir acá y darle grid área y le damos por ejemplo spam 3 y barra span 2 hasta acá aparece todo bien y perdón al revés Spam 2 spam 3 hasta acá está todo bien Es casi lo mismo Okay hacer esto que hac esto como verán funciona Exactamente igual no cambia si quieren ser más específicos Este es el Row Start Este es el column Start Este es el Row end Este es el column end este sería el orden en el que lo pueden

hacer si lo quieren hacer así pero en mi caso más fácil es primero decirle Ahí va primero decirle el Row y después decirle el column de esta forma es mucho más simple Seleccionas el elemento y sabés llevarlo a donde vos te guste no después podemos hablar bien del tema del lighting del Z Index o de qué pasa cuando suponemos elementos o cuando los cambiamos de posición eh pero no no ahora ahora simplemente estamos diciendo vas a crecer dos filas y vas a crecer tres columnas Eso es todo lo que estamos diciendo Pero hay otra forma

de crear áreas que esto lo pude haber explicado en el área en el video pasado pero se Conectaba demasiado con lo que vamos a ver ahora que es una forma diferente de crear áreas pero a través de templates literalmente fíjense Qué cosa más rara venimos acá a grid y ponemos en vez de grid template columns ponemos grid template áreas vamos a sacar todos estos elementos vamos a les quiero Mostrar cómo cómo funciona entrada todo esto el body lo vamos a dejar obviamente vamos a crear un header esto este ejercicio es típico siempre es r típico

un nav por Ejemplo Main una Side y un footer esto es todo lo que vamos a crear ahora estas estas tres Entonces esto lo voy a sacar todo Ahí va y acá en grid template áreas fíjense Qué interesante esto vamos a abrir así y vamos a poner gader gader jader esto le estamos diciendo vas a tener arriba tres columnas una se va a llamar otra se va a llamar heer y otra se va a llamar header abajo tenemos que abrir comillas dobles obviamente no y venimos acá abajo y ponemos nav Main Aside Entonces le decimos

arriba de todo vas a tener el header o sea todo esto va a ser el header después le estamos diciendo vas a tener acá el nav acá el Main acá la Side y efectivamente todo esto sería el header pero después tendríamos todo esto que sería el nav todo esto que sería el Main y todo esto que sería la Side y después creamos uno que sea por ejemplo footer footer footer tiene que haber una coincidencia en esto no Sí o sí tiene que ocupar tiene que Haber tres en cada uno vamos a ponerle gader acá vamos

a ponerle na acá vamos a ponerle Main y acá vamos a ponerle aside y obviamente acá vamos a ponerle footer no obviamente naad footer aside Main un padding de 20 píxeles Ahí estamos a cada cosa del Body ahí acabo de ponerle esto Ahora el tema es que en realidad no existe un elemento que sea grid así que vamos a darle al Body la clase grid así ya empieza a funcionar Ahí va ahí va vamos viendo cómo va tomando va tomando Forma y vamos a darle a todos un Border un Pixel solid no dos dos píxeles

solid y vamos a darle ahí un oscurito perfecto Acá más o menos vamos viendo cómo funciona esto okay quiero que lleguen quiero que entiendan a dónde voy fíjense ahora cómo vamos a aparecer la magia Ya tenemos las áreas definidas ahora tenemos que asignárseles a los elementos vamos a agarrar el header y le vamos a dar un grid área fíjense acá viene la magia header por qué porque acá dijimos Que el heer va a ocupar todo esto y efectivamente ocupó todo esto Entonces es importante que lo aclaremos hasta acá estamos perfectos ahora vamos a seguir definiendo

las áreas el nav va a tener el grid área nav el Main va a tener el grid área Main hasta acá también está funcionando todo no hay nada raro el aside va a tener el grid área aside tampoco hay nada raro esto prácticamente no cambia porque tenemos tres columnas que ahora vamos a cambiar eh el tamaño De esas tres columnas Y por último vamos a agarrar el footer y al footer Vamos a darle un grid are foter y ahí crece como el foter al foter le vamos a dar un background color negro y un color

blanco para que pueda diferenciarse un poco Ahí ya más o menos podemos ver el cambio Okay voy a hacer lo mismo con el header voy a agarrar y darle los mismos colores al header solo que el header voy a permitir que el color sea 48e como me gusta a mí típico de header que me gusta A mí bien el Border color 48e Ahí va bien Bueno ahí tenemos las áreas definidas Okay como lo pueden ver ahora le podemos dar tamaño el tamaño podría ser por ejemplo min Max y acá le podíamos decir vamos a correrlo

un poco para acá vas a tener un mínimo de 150 píxeles y un máximo de un FR por ejemplo ent de esta forma si el contenido Main por ejemplo tiene contenido adentro por ejemplo tiene no sé tiene el h1 ven el h1 título principal tiene el título Principal y además tiene un párrafo con Lawrence bastantes Loren Ahí va esto tenga al menos un mínimo entonces podemos venir acá o incluso darle acá su min content entonces de esta forma podemos nosotros definir el tamaño Entonces al Main le podemos dar un min with de 300 pixeles Por

ejemplo entonces nunca va a tener menos que esto ven el contenido principal nunca va a tener menos que esto y por ejemplo el nav va a tener un Max with de 300 píxeles porque No necesitamos que tenga más que eso ven más que esto no necesitamos que tenga Pero el problema de esto es que está haciendo que no puede adaptarse correctamente al contenido principal Entonces nos deja un poco por fuera esto es una solución puede ser directamente cambiar el tamaño lo sacamos del nav Ahí está Y en vez de darle un min Max y usar

un repeat lo definimos nosotros por ejemplo que tengo un min Max de 200 píxeles un máximo de un FR por ejemplo La siguiente columna lo mismo pero que tenga un mínimo de 300 y la última lo mismo pero que tenga de 200 y esta en vez de tener un FR va a tener tres por ejemplo entonces de esta forma ven crecen pero la del medio es la que más crece Ahí está que tenga acá el Max wid ven que el Main tenga el Max wid de 700 píxeles por ejemplo entonces de esta forma tenemos esto

así y muchas veces esto caga nuestra cuadrícula entera y también tenemos que ver cómo Solucionarlo una posible solución es por ejemplo sacar envolver todo esto no excepto el header Sí el header también envolver todo esto por ejemplo en un y le ponemos el ID grid Okay y ahí le metemos todo esto acá dentro Ahí va y al Body le sacamos la clase grid entonces ahí para arrancar tenemos esto tenemos que darle Ahora sí he de 100 View por he arriba de todo sol lo tenemos que dar Ahí va y al también le tenemos que dar

la clase Ahí va Ahora sí y la forma de Resolverlo también puede ser por ejemplo esto que está acá lo sacamos o sea el tema El header lo sacamos Okay y cho header pero el header lo tenemos por fuera por fuera de esta estructura Entonces tenemos el header acá arriba de todo que está fijo ven que el header forma parte fija de la estructura Pero podemos limitar el grid entonces agarramos acá y le ponemos al grid le ponemos un Max wid de 100 píxeles por ejemplo un Max wid y le amos un margin Auto para

que se Centre ent esto crece pero hasta cierto punto y después ya no crece más Igualmente esto lo estructuramos mal solamente que tenemos que sacar esto Ahora sí listo y ahí tenemos esto que está acá ven aún así podemos darle al Body por ejemplo le damos un display Flex Box display Flex le damos un Flex Direction column le damos una link item Start save no Start ya ya van a llegar a dónde quiero ir le sacamos esto Ahí está esperen que ahora Vamos a ver ahora les quiero mostrar lo que vamos a hacer No a

todos los de Perdón Esto se lo tendríamos que estar dando solo al Body Ahí está acá al header le damos un wid de 100% ahí está a todos estos también le podemos dar un Box sizing Border Box Ahí va si no tenemos problemas ahora al grid le damos fíjense Qué interesante un Flex grow 1 Ahí va y se estira completamente y ahí ya resolvimos el problema de que no se adapte al 100% lo único que tenemos el Footer acá abajo cómo resolvemos lo del footer Bueno lo acá Tenemos el mismo problema y acá tenemos que

sacar el footer de acá ven lo sacamos de acá el foter acá eliminamos el auto de acá lo eliminamos Ahí está lo dejamos un FR y que el footer tenga un wid 100% y lo sacamos de acá Ahí va entonces venimos acá y agarramos el footer y lo sacamos de acá y lo metemos afuera del de la grilla ent ahí tenemos ven una estructura con las barras y el footer Esto aplicamos grid solamente para armar esta grilla que es bastante raro pero acá por ejemplo podríamos aplicar subgrid y es válido Pero fíjense qué interesante comoo

intimos todo este diseño y aplicamos grid solamente para esta parte nada que ver pero está bueno porque acá acá podemos hacer un efecto que es el efecto de scroll quio les quiero mostrar un nuevo efecto que es el que les quería Mostrar antes si esto lo hacemos lo llenamos de contenido van a Ver que se va a estirar si a estas barras a las nav y a aside vamos a agarrar ambas vamos a agarrar acá abajo el nav y el aside les damos posi sticky y le damos en Top cero top cero ahora venimos acá

y le definimos el he por ejemplo 100 View por hate y ahí si se fijan se quedan estancadas ven entonces podemos desplazar el contenido principal vamos a segir creando contenido para que se pueda apreciar mejor Entonces tenemos esto acá y Podemos seguir bajando acá mientras que las barras estas están fijas o sea estas barras de acá siguen fijas entonces acá por ejemplo podemos crear un nav ponemos un h2 navegación ponemos item 1 y así le ponemos adentro enlace todo y vamos agregando enlaces al costado Entonces ven el primero se desplaza y esto también y cuando

llega al footer este se desplaza entonces si el footer por ejemplo tuviera más espacio no sé un padding de 50 píxeles Textal Center por ejemplo ent esto se desplaza hasta abajo entonces tenemos acá y acá tenemos el efecto que les comentaba ven eler también va a tener lo mismo va a tener un 30 píxeles text al Center ent tenemos acá arriba el header Ven arrancamos a desplazar Y tenemos esto acá y ahí está tenemos el layout que queríamos Entonces el contenido en medio se puede leer y ya está lo logramos lo logramos un efecto bastante

interesante bueno acá también podemos Darle un fondo para que se aprecie mejor background color Este pero con no sé dos de opacidad todavía va y a estos le damos un background color blanco vamos a sacarle los bordes bueno ahí le saqué los bordes y más o menos Ahí tengo ven puedo desplazar acá en el principal mientras los demás siguen acá es un efecto muy común es el mismo que por ejemplo tiene el cdn bajamos y mientras se mueve solamente el contenido del medio lo demás sigue fijo Ese es el Efecto que estamos logrando mientras todo

está fijo el contenido del medio se abre ahí está y esto igual podemos llegar a ser que sea un poquito más grande el Max en vez de ser de 1200 píxeles que sea de 1460 por ejemplo Entonces se extiende y se puede extender hasta acá después más que esto ya no se extiende por ejemplo Ven y ahí se empieza a encoger y cuando llega a esta resolución podemos usar un media un media por ejemplo Medi screen and Max with esto igual lo podemos hacer al revés no cuando llega a 400 píxeles 700 píxeles modificamos esto

o sea modificamos las áreas que están acá Venimos acá y ponemos por ejemplo el grid va a tener nav abajo Main y abajo una Side de esta forma cuando se encoja por debajo de los 600 píxeles se pone así el tema es la resolución que le dejamos acá tenemos que sacar el stick y tenemos que sacar todo para eso agarramos el nav y el aside y le damos Un hte auto y un position static que es lo de antes y ahí más o menos se adapta ven ahí está y ya tenemos todo como antes lo

que sí le podemos dar un wid del 100% o en vez de eso simplemente esto que está acá lo modificamos es decir lo copiamos acá lo pegamos acá Esto del grid template y le decimos que va a tener solamente una columna un FR que se estira al máximo y ahí está Entonces tenemos todo este contenido acá tenemos el contenido secundario que de Hecho el contenido secundario hasta podemos ocultarlo a la Side le podemos dar display Non por ejemplo entonces desaparece y ahí está estiramos un poquito y tenemos esta estructura esto que está acá lo podemos

bajar a los 800 píxeles Ahí está no a los a los 400 sí a los 500 píxeles por ejemplo y en media screen and Max with 800 píxeles por ejemplo qué hacemos Bueno lo ocultamos y esto que está acá lo que haríamos sería sacarle la última columna que habíamos Puesto habíamos puesto dos columnas le sacamos cuál y la de al lado Ahí está y nos quedaría así Ah no también le tenemos que sacar el sticky esto que está AC lo tenemos que sacar y a ver si sale bien ahora Ahí va Mucho mejor ahí estamos

en esta resolución tenemos para navegar y el contenido principal ven vamos aumentando y aparece la Side Y si achicamos más Debería ser antes por ejemplo los 580 Ahí va y ahí está listo Tucson Tucson Tucson y ahí está tenemos Una página completamente responsive muy fácil y muy simple con un efecto sticky que desaparece en responsive sin usar javascript sin usar prácticamente nada Okay y muy simple Yo hoy por hoy quizás aplicaría un par más de cosas para hacer un layout así pero yo creería que ahora sí ya pueden hacer un layout así Igualmente les ti

un tip se pueden ahorrar las media queries estas de acá de 800 pixeles se las pueden ahorrar sin este mediaquery no sin este aunque sea o Sea sin el de 800 hacer lo mismo pero solamente usando un mediaquery en lugar de dos usando uno a ver si lo logran yo no lo intenté pero me imagino que se debe poder y esto que está acá olvídense si ustedes Cuando en medio de mis cursos ven esto que está acá es porque yo siempre antes de una clase nueva por las dudas me preparo un documento en Google docs

para por si me lleo a olvidar algo en medio de la clase o me llego a poner en blanco porque a veces yo estoy horas Y horas grabando pu a veces no me acuerdo ni lo que estaba explicando y me dejo esto como una especie de guía para ir explicando las clases Entonces sab si ustedes estoy grabando y ven esto de fondo des preocúpense simplemente una mini guía para explicarlo mejor de hecho además me gusta hacer esto O sea en mi casa para mí este es el guion de los cursos el guion que yo me

hago para los cursos es esto Este es el curso html css ven todo lo que tengo acá es lo que Estoy explicando todas las clases como digo Son planeadas Aunque ustedes no lo vean es recontra planeado Así que nada por las dudas les digo que si a veces vien una clase o esto acá o esto ya son cosas que yo mismo me creo para mí para explicar mejor y que no se me escape nada hay otra cosa si no no ven La Barra que está acá abajo o sea ven todo negro tranquilos es porque me

funcionaba mal la compu y nada saqué a la la barra de exploración de de Windows así Que bueno gente ahora tenemos que ir con lo siguiente que es la alineación y distribución del espacio en grid Sí vamos a ver cómo aliñar los elementos posicionarlos de forma diferente Cómo sacarles el stretch que tienen por defecto como lo vimos en Flex que se estiraban hasta el contenedor bueno grid pas algo parecido Hay un montón de cosas que podemos ver Y por cierto no sé si se dieron cuenta pero el lout que acabamos de crear recién lo creamos

usando Flex y Grid o sea acaban de aplicar en un mismo proyecto las dos tecnologías ven qué Qué uso se les puede dar si me pusiera a retocar el código que acabamos de hacer recién le haría 300,000 modificaciones y quizás cambiará la estructura Pero fíjense qué solución rápida llegamos usando herramientas que ya conocíamos si nos rompiéramos la cabeza podríamos hacer algo mucho mejor y hasta más simple pero de a poquito vamos a ir viendo layout que cada vez son más Simples de construir o que nos permiten tener una base que después no tenemos que romper

tanto para modificar Entonces nada si ahora hubiéramos usado para hacer esto recién librerías de javascript hubiéramos aplicado una versión de jquery y un framework y no sé qué quizá cuando intentáramos sacarle el position sticky o un par de cosas más tendríamos 30.000 problemas y eso es agregar capas de complejidad al pedo Entonces si lo podemos hacer bien De entrada golazo bueno no voy a hablar más vamos con la siguiente sección de grid que es alineación y justificación de elementos o alineación y distribución de elementos con grid Así que vamos bueno gente ahora lo que vamos

a ver es alineación en el eje horizontal y en el eje vertical lo bueno de grid es que no tenemos que andar preocupándonos por la dirección del Main axis etcétera porque acá sí podemos decir que orinamos eh alineamos en eje horizontal y en el Eje vertical no podemos decir a menos que lo establezcamos que va de izquierda a derecha ni de izquierda a derecha eso se mantiene igual por ahora pero sí podemos decir en el eje horizontal y en el eje vertical Esta vez sí lo podemos decir para comenzar Yo acá tengo una grilla muy

simple Okay de 3x 3 que de tres columnas de 250 píxeles cada una y tres tres filas de 250 píxeles cada una y adentro le voy a poner 1 2 3 4 5 6 7 8 lo primero que les voy a enseñar es a Centrar elementos adentro de un div normalmente nosotros lo que haríamos es a este grid item no le daríamos eh display Flex por ejemplo podemos hacer algo muy similar Flex por ejemplo no y le damos justify content Center y align items Center de esa forma va a estar centrado donde nosotros queremos que

esté centrado color blanco y un font size de 30 píxeles Ah igual no crece por el box sizing Border B Bueno no importa lo dejamos ahí Esta es una forma sí Válida de centrar elementos Pero más adelante cuando trabajemos cuando ya terminemos de ver todo esto de la alineación vamos a ver cómo centrar un elemento con grid porque creo que es algo Bastante poderoso y muy simple de hacer así que lo vamos a hacer Pero por ahora quedémonos con esta forma con Flex que no está mal y como no tenemos ninguna forma de seleccionar el

elemento adentro por ahora le damos así y de esta forma los centramos ahora también le Vamos a dar un padding de 30 píxeles porque ya van a ver qué es lo que sucede si nosotros alineamos el elemento sin padding no vamos a a sacárselo al padding Ahí va si nosotros trabajamos primero con la primera propiedad que no habíamos visto vamos a ver la primer propiedad que es justify y no es justify content es justify items justify content también la tiene pero ahora vamos a ver acá tenemos varias propiedades es la es la más compleja de

todas para arrancar Tenemos Start Okay que es esta que está acá tenemos self Start que es muy parecida Start pero vamos a dar la diferencia Y tenemos left que parece que las tres hacen Exactamente lo mismo pero no no hacen las tres Exactamente lo mismo ahora vamos a ir viendo la diferencia También tenemos enter Okay tenemos right tenemos end okay Y también tenemos self end tenemos estas tres para también el final por eso es un poquito más compleja pero ahora ya de a poquito Vamos a ir llegando a eso también tenemos basel Line pero también

tenemos First base Line y también tenemos Last baseline o sea tenemos ojo acá porque tenemos ya ya va modificándose de a poquito las propiedades por defecto tiene stretch este es el valor que viene por defecto al igual que en Flex es decir stretch justify items es como lo que venía haciendo en su momento aling items solo que en lugar de hacerlo de abajo hacia arriba lo hace en el eje Horizontal se acuerdan si nosotros íamos un display Flex lo que pasaba era que se estiraba a lo alto por defecto porque estaba en direc Row si

nosotros le sacamos esto y le ponemos por ejemplo Start No acá se encoge horizontalmente pero no verticalmente Incluso si cambiáramos la dirección por ejemplo grid autoflow y le damos column esto no cambia si le damos Row tampoco cambia esto no no afecta no es como que podemos cambiar el lujo y demás no no tan fácil Pero bueno para comenzar ya sabemos Cuáles son las más básicas que tenemos Start tenemos Center Y tenemos end pero recuerden que esto sí significa a favor de la dirección del texto es decir esto significa vas a ir como vaya el

texto si esto por ejemplo tiene un Direction right to left Esto va a cambiarse Ven y se va a poner este elemento acá Este acá Este acá yo lo primero que voy a hacer es sacar estos elementos para que solamente lo podamos Ver en este eje para que lo puedan notar mejor pero si yo esto lo saco ven aparecen ahí si yo esto lo dejo aparecen ahí es como que un pequeño comportamiento leve hay pero vamos a arrancar con el más básico que es con Start hay una diferencia entre Start Okay que en este caso

Start fíjense que lo pone al final y si fuera si esto no lo tuviera lo pondría al principio Entonces esto para arrancar va así y sin embargo si pusiéramos end fíjense que Esto es como que lo cambia cambia la dirección de los elementos esto es porque en end literalmente se da vuelta esto tal cual como en flexbox no hay nada no hay nada nuevo es como en flexbox Acá hay una diferencia si nosotros damos end versus si damos vamos a poner por ejemplo Start No si pongo Start ven esto aparece acá y si lo saco

aparece acá se voltean este es 1 2 3 y con esto aparece 1 2 3 o sea 3 2 1 al revés ahora si yo por ejemplo acá le Pongo self Start si yo le cambio La dirección se cambia Pero si yo vengo al hijo vamos a agarrar por ejemplo eh un hijo vamos a hacer item First Child si yo al hijo le cambio la dirección por ejemplo Direction left to right fíjense que el hijo Sí se ve afectado pero si nosotros le ponemos en self Start solamente en Start Perdón no afecta Por qué Porque

el self Start tiene en cuenta la dirección del hijo Mientras que el único Start tiene en cuenta la dirección Del contenedor Esa es la principal diferencia Okay y después tenemos otra que es right y left esto Igual también aplica para ende si le damos ven and no tiene en cuenta la dirección del grid item mientras que self and si tiene en cuenta la dirección del grid item eso para posicionar los elementos no Entonces est está bueno que lo sepan porque es una forma de de entender un poquito cómo funciona este flujo and y self end

son lo mismo Solo que self le Importa la dirección del hijo Mientras que el otro le importa solamente la dirección del padre nada más y no tiene que ver con la reescritura porque si lo ponemos acá igual sigue funcionando Así que no tiene que ver ni con especificidad ni con nada de eso porque esto se lo est dando al hijo Bueno loo con Center no hay un self Center ni nada parecido eso de eso olvídense porque no existe el self Center No no va Start self Start end self end bueno el Center Hace eso ya

sabemos que lo Cent vamos a sacarle la dirección acá y después tenemos el right el perdón acá arriba va después tenemos acá el right que esto lo que hace es siempre alinearte elos a la derecha tenemos el left que esto lo que hace es siempre alinearte los a la izquierda Entonces tenemos por un lado right ven te lo tira para allá left ven te lo tira para allá Eso es todo lo que hace Pero esto lo que hace es alinearlo dentro de sus propias celdas O sea si se Fijan Yo vengo acá y lo que

hace es dalto pero lo estoy poniendo que se vaya para la derecha Okay Igual acá No importa la dirección si yo acá le doy Direction ltr se mantiene así le doy right to left se mantiene así O sea sí lo único que cambia es la dirección pero fíjense que se mantiene siempre hacia el mismo lugar no cambia la derecha va a ser siempre a la derecha solamente que que está cambiando la dirección de la grilla cambia la la cambia el el or o Sea cambia la la dirección del contenido pero no cambia Hacia dónde tiene

que ir que en este caso es la derecha lo estamos llevando absolutamente hacia la derecha en este caso las grillas se posicionan a la derecha por eso vemos esto pero justify items right siempre te lleva el contenido a la derecha si acá en vez de tener esto tuviéramos un FR Ven ahora sí ocupa todo el tamaño Entonces como ocupa todo el tamaño no importa si le damos right si le sacamos Esto se va a mantener igual por qué Porque antes lo que estábamos haciendo es alinearlo acá se entiende o sea nosotros si le decimos al

principio se va a posicionar acá si le decimos al medio se va a posicionar acá y si le decimos al final se va a posicionar acá porque eso es lo que hace esto observen vamos a activar la grilla le vamos a dejar ahí en grid y fíjense esto si yo le digo por ejemplo Center ven se pone al centro si le digo Start Se pone al principio bueno en este caso tenemos la dirección invertida Así que Start sería al revés pero ven lo que les digo Start tenemos Center Y tenemos end Entonces eso es lo

que hace ustedes si hacen páginas en español y demás solamente quédense con el Start Okay o con el s Start Pero esto repito es para para trabajar con múltiples idiomas con el Center y con el end después tenemos el por defecto que es stretch que esto lo que hace es estirarse completamente Que también lo vimos después como ya vimos También tenemos el baseline que esto dice bueno a ver vamos a ponerlo por sobre la línea de texto First basel Line lo Pon sobre la primer línea de texto y Last baseline lo pones sobre la última

línea de texto pero esta No la vamos a ver porque son irrelevantes por ahora entonces nada esto la verdad que es bastante simple y supónganse que nosotros le damos Center no y decimos Okay Listo ya tengo esto centrado Vamos A darle a los hijos un padding de 20 píxeles Ya está listo tenemos esto así todo perfecto también podemos agarrar al hijo a un hijo vamos a agarrar por ejemplo al First Child grid item First Child y le vamos a decir mira yo no quiero que vos estés al centro Entonces vamos a Modificar el justify self

el self es para hacer referencia a sí mismo Entonces vamos a autojustificación o podemos poner Start ven o podemos poner end Por qué Porque al primero Vamos a darle un background color o 44 si Ah va mejor 66 Entonces el primero si se fijan lo estamos llevando donde nosotros queremos le podemos dar stretch le podemos dar Center le podemos dar left le podemos dar Start le podemos dar end da completamente igual porque somos nosotros quienes van a decidir así como lo tenemos también en el align Okay que ahora también vamos a ver al pero esa

básicamente es la forma que tenemos de alinear en el eje horizontal en la celda Okay porque esto acá no estamos alineando las celdas no se olviden que tenemos los elementos hijos y las celdas los elementos hijos van adentro de una celda Okay pero la celda no la estamos moviendo solo estamos moviendo el hijo en la celda eso tiene que quedar super Claro porque si se fijan si por ejemplo la celda fuera más chiquita ven o si fuera incluso más chiquita estamos viendo el elemento en la celda ven le damos Start se pone al principio de

su Celda le damos enter se pone al centro de su Zelda entonces justify items lo que hace es desplazar los elementos justificar los elementos en el eje horizontal dentro de su propia Zelda Bueno después a nivel horizontal también podemos mover la misma Zelda hasta ahora lo que venimos haciendo es mover todos los elementos dentro de sus celdas y con justify self agarrar ese elemento y por ahí darle otro otra dirección pero también podemos mover toda la celda Completa y para eso podemos hacer un justify content y acá tenemos las mismas propiedades que con tenemos Start

Okay que se pone al principio tenemos enter y lo que hace es nos lleva todas las celdas al medio ven como ahora no me está moviendo los elementos me está moviendo las celdas eso es muy distinto porque con justify items estamos moviendo los items o sea los grid items dentro de las celdas si la celda es así lo estamos moviendo en este cuadradito Okay si la celda es más grande lo movemos dentro del cuadrado más grande pero con justify content no movemos el hijo de la Zelda movemos directamente la celda completa ent eso es lo

que hacemos con justify content mover toda la celda también le podemos dar space around que ya lo conocemos esto Ven y ahora tenemos una celda acá otra celda acá y otra celda acá también tenemos space between por ejemplo tenemos space everly Entonces esto lo que hace es mover Directamente en el eje horizontal la celda entonces con justify items movemos en el eje horizontal el hijo dentro de su celda y con justify content movemos en el eje horizontal la Zelda misma en el cont edor Es como ir un nivel más arriba Okay es bastante interesante porque

con justify items movemos el hijo dentro de la Zelda y con justify content lo que hacemos Es mover la celda dentro de todo el contenedor Entonces es eso esa es la principal diferencia justify Items mueve el hijo en su celda y justify content mueve la celda en el contenedor grid Tenemos también end Ven y ponemos todo acá Entonces por defecto lo que estaba pasando cuando ustedes estaban viendo que si nosotros lo que hacíamos es como la propiedad por defecto que trae es Start Start es a favor de la dirección del texto o sea que si

cambiamos la dirección Direction y le damos right to left esto se va a poner al final Como lo vimos al Principio por eso si por ejemplo acá decimos vas a estar siempre a la derecha siempre a la derecha listo pero si no tenemos la dirección ven acá tenemos la derecha va a ser esta pero sin embargo las celdas van a estar allá entonces en ya con right con right le estamos diciendo siempre sin importar tu lenguaje siempre vas a estar a la derecha de tu celda siempre ahora dependiendo del lenguaje la celda puede estar en

un lugar o en otro pero el Elemento siempre va a estar a la derecha de la celda Esto es lo mismo acá también podemos poner right y esto siempre va a estar y no importa la dirección del texto eh No importa la dirección del texto AC leimos centos lo vamos a sacar No importa la dirección del texto siempre okay siempre van a estar a la derecha Entonces eso hacemos con right y con left con right le decimos siempre vas a estar a la derecha con left le decimos siempre vas a estar a la Izquierda con

self right lo mismo y así Bueno ya no hace falta expli se entendió bastante bien aunque las más conocidas para usar son spacer round space between que es lo mismo que usamos en Flex y vamos a sacar esta dirección por defecto Vamos a darle space around por ejemplo y ahí tenemos space evel me gusta bastante para ejercicio es el evenly y también acá por ejemplo le vamos a dar Center ahí los elementos están centrados en sus celdas y las celdas están correctamente Distribuidas a lo largo de todo el contenedor grid bueno Esto es solamente en

cuanto al eje horizontal después podemos hacer lo mismo pero en el eje vertical yo por ejemplo acá voy a crear solamente una columna de 150 píxeles Okay perdón tres columnas pero una fila Ahí está una fila de 250 píxeles pero el contenedor va a tener un height de 350 píxeles por ejemplo y le vamos a dar un Border dos píxeles solid negro para que podamos ver bien el Border y le vamos a Dar un margin de 20 píxeles y acá vamos a serer que el tamaño de la de la fila sea un poquito más chico

Es más si no 180 sea más chico todavía más 150 este va a ser su tamaño si desactivamos la grilla ahí pueden ver el elemento lo vamos a activar para que lo tengan bien pendiente Ahora sí como no necesitamos trabajar con esto vamos a dejarla por lo menos en stretch así como ahora por ejemplo está en stretch a lo alto vamos a dejarla en stretch a lo largo por eso No tocamos nada y por defecto se pone en stretch Por qué Porque ahora vamos a ver vamos a dejarlo por escribirlo para que se note bien

vamos a ir por lo siguiente que es el align ahora También tenemos lo mismo tenemos el items y el content el al items hace lo mismo que el justify items lo mismo Solo que en lugar de en el eje horizontal lo hace en el eje vertical podemos a darle Center Ven y lo centra en las celdas tiene un padding por eso hace eso le vamos a dar un Padding más chiquito para que se pueda apreciar mejor entonces ahí lo que hace es se centra Okay en la celda si le damos Start aparece al principio de

la celda si cambiamos la dirección Ah no en el eje horizontal no afecta la dirección no cambia solamente el orden Tenemos también end tenemos Center tenemos stretch También tenemos el baseline tenemos las mismas propiedades que tenemos con justify items solamente que ahora al no tener izquierda y derecha Porque no se modifican los elementos así no no nos tenemos que preocupar por el self ni nada de eso pero básicamente al item de hecho Funciona muy similar muy similar que en flexbox es prácticamente lo mismo Solo que con estas pequeñas diferencias que estamos trabajando con bidimensionalidad y

no con unidimensionalidad Entonces es lo mismo ahora También tenemos el alink items si nosotros decimos Bueno mira este elemento lo quiero alinear en baseline No vamos a poner todos en Start para que todos los elementos estén alineados arriba de sus celdas pero quiero agarrar el FR Child y darle a self y acá también podemos usar la link self y a link self le damos por ejemplo and y agarramos el primero en vez de Flex end and también cuenta Flex end pero le tenemos que dejar end es mejor hoy en día ya no se usa el

Flex adelante ven y queda al final o le podemos dar Center y lo centramos o le podemos dar stretch y se Pone así entonces así como tenemos el justify items y el justify self para el eje horizontal tenemos el align items y el alink self para el eje vertical es lo mismo y lógicamente También tenemos el Vamos a darle a todos en este caso stretch para que se aprecie mejor lo que queremos Mostrar ahora tenemos la otra propiedad que si tenemos justify items justify self y justify content y también tenemos align items align self También

tenemos que tener align content y lo Tenemos tenemos align content que esto lo que hace también es distribuir los elementos a lo alto al enje vertical perdón si le damos space around ven se pone ahí en este caso tenemos que crear filas para que lo puedan notar necesitamos filas Así que vamos a crear eso vamos a crear filas Vamos a darle tres un FR Ahí va y esto acá vamos a poner solamente una Ahí está y no le vamos a dar 150 píxeles acá vamos acá vamos a darle 50 píxeles Perdón pero acá Vamos a

darle un FR ahí ocupa todo tenemos el space around tenemos el Start tenemos end para ponerlo al final tenemos Center tenemos space between Okay tenemos space everly esto de hecho es lo que ya vimos en el curso de Flex si vos viniste solamente para aprender grid mi consejo es Ya deberías entender esto porque deberías saber Flex y si no lo entendés porque tampoco sabes del todo Flex Andá ver el apartado Flex Porque es importante es importante y en Estos cursos enseñamos detalles que en la mayoría nos enseñan por eso es importante que vengas de entender

bien los fundamentos y si lo entendés perfecto pero si no entendés y no viste el apartado Flex mirate por lo menos el apartado de alineación en Flex para que lo entiendas mejor haciendo un repaso de todo muy rápido tenemos justify items para alinear la el hijo dentro de la celda en el eje horizontal tenemos justify content para alinear la celda en El contenedor grid en el eje horizontal y después tenemos el justify self para agarrar a un hijo específico y desplazarlo donde querramos eh dándole las mismas propiedades que items o sea es para modificar esta

propiedad pero de un hijo particular después tenemos a items que es lo mismo que justify items lo que hace es modificar la posición de un hijo en una celda en el eje vertical después tenemos a link content que lo que hace es igual que justify content Modifica la posición de la celda en el eje vertical respecto al contenedor obviamente y después tenemos el al self que es igual que justify self Que agarra el hijo Y en lugar de cambiar su valor de justify items cambia el valor de Alin items O sea que vas a estar

cambiando al hijo en el eje vertical Eso es todo muy simple y así podemos modificar como se nos dé la gana a los elementos así que bueno gente la verdad que los recontra felicito prácticamente ya entend dieron Todo grid ahora vamos a ver una propiedad muy poderosa de grid y estoy hablando de Aprender a usar subgrid esto no lo había explicado en ningún curso de css actual al día de hoy Entonces subgrid aunque sea un concepto bastante complejo para algunos es mucho más simple de lo que parece y es muy interesante porque cuando lo veamos

decir Ah mira Porque mucha gente que ya sabía css Y está viendo este curso para repasar ni siquiera sabe de la Existencia de subgrid mucha gente que ya sabía de la existencia de subgrid pensaba que era complejo pero no es para nada complejo y aún así es uno de los inventos más importantes que se hizo junto con los container queries para cambiar las forma en la que desarrollamos los layouts así que bueno vamos a ver cómo funciona esto del subgrid en la próxima sección vamos bueno gente ahora vamos a ver lo que viene siendo subgrid

o subgrid Subgrid básicamente es una forma que tenemos de hacer que los hijos de un grid item que a su vez es un hijo de un grid también foren parte de la grilla principal esto era porque anteriormente teníamos un problema con todo el mundo de los grid sanidad y se nos complicaba bastante digamos ciertas cosas que ahora les voy a mostrar No no quiero que se enfoquen tanto en ver eh Por ahí a nivel teórico sino que más a nivel práctico Así que vamos a ver el ejemplo porque Por ahí explicándolo no se entiende tanto

como mostrándolo bueno para comenzar retomamos desde el ejercicio anterior okay Lo que teníamos que esto es muy simple tenemos varios grid items yo de hecho lo que voy a hacer es crear más perfecto tenemos dos elementos bien Vamos a cambiar el tamaño de la grilla que esta vez no la necesitamos no queremos Mostrar nada y vamos a modificar esto en este caso voy a pedirle que tenga por ejemplo cuatro Columnas de un frr y tres columnas de un frr también cuatro vamos a decirle cuatro filas de un frr y ahora tenemos que agregar cuatro elementos

más ahí estamos ahí tenemos nuestra grilla bastante llena voy a aumentarles el padding para que tenga un poquito más de sentido Ahí está y ahora como podemos ver tenemos una grilla bastante simple no bastante simple cuál es el problema de esto bien supongamos que nosotros estamos trabajando en un layout estamos Trabajando en un layout en el que un elemento se tiene que posicionar de alguna forma en el medio y a su vez ese elemento tiene que tener otro grid vamos a ver un ejemplo muy interesante vamos a agarrar al F que es el elemento uno

y vamos a darle un grid column a un grid área más fácil lo vamos a posicionar en la línea dos y le vamos a dar span dos y en la columna dos o sea línea dos o sea lo estamos posicionando acá Así que el elemento va a arrancar hacia acá ahora Le tenemos que decir cuánto queremos que crezca le voy a decir que crezca dos hacia acá y dos hacia acá o sea que le vamos a decir span 2 span 2 actualizamos y tenemos el elemento acá voy a eliminar los últimos tres Los hijos que

no me sirven Ahí está como ven Este es un ejemplo el que les voy a explicar que lo vi bastante y se usa mucho este ejemplo para explicarlo y siento que es bastante interesante explicar grid su grid con este ejemplo porque nosotros si Tuviéramos incluso este elemento que es el uno con más divs vamos a poner por ejemplo otro div Okay que vamos a tener sub un que a esto podemos ponerle la clase grid sub item o podemos ponerle la clase subgrid item es la clase que yo le quiero asignar subgrid item no porque los

subgrid sean una nueva categoría de elementos No para nada sino que le ponemos su grid item simplemente para referenciarlo porque en realidad grid es el nombre de de de todo el contexto como Como tal pero subgrid no es como que crea todo un nuevo contexto como tal Así que no no sería correcto si aplicáramos alguna metodología que tenga que ver con los nombres de elementos y demás pero en este caso simplemente para referenciarlo acá le ponemos sub un sub do sub TR sub cu Entonces estos son sub items Bueno ahí estamos si ahora nosotros quisiéramos

crear lo mismo es decir quisiéramos hacer que este elemento tenga una estética similar qué hacemos Bueno agarramos y le decimos por ejemplo le vamos a dar un display grid no vamos estamos metiendo un grid dentro de un grid y a los sub items no a esto no perdón esto directamente ni lo trabajamos así Le damos un grid template columns Y tenemos dos formas de hacerlo pero vamos a copiar lo mismo que acá para que se mantenga igual podríamos Hacerlo con un template columns y un autofill y darle en dirección de fila y listo pero no

vamos a poner dos y dos Ahí está de esta forma está Exactamente igual y lo vamos a centrar de la misma forma en este caso no necesitamos centrarlo como Flex a ver si le dimos Flex no Estos no son Flex Así que es que no necesitamos Vamos entrarlos como Flex porque como tien solamente un padding Solamente necesitamos el justify Ahí está ahora sí Bueno ahora los subgrid items vamos a darle las mismas propiedades que a este vamos a venir acá y ponerle background color pero le vamos A poner el background color rojo a esto no

a los subgrid items a esto Ahora sí ahí queda mejor a esto es que le vamos a dar el padding también necesitamos darle el padding a este Ahí está también Vamos a darle su borde borde radio creo que le dimos 18 pixeles también está perfecto y tiene un Gap de 10 píxeles Así que vamos a venir acá y darle a este subgrid acá el Gap de 10 píxeles perfecto acá tenemos lo mismo que antes Igualmente está cambiando un poquito la estructura Y si se fijan Ahora nos afectó un poco a la columna del medio eso

ya está jodiéndonos pero vamos a ignorarlo por ahora vamos al subgrid item darle un Tex Center hasta que está todo bien y ya está tenemos como que todo medio centrado cuál es el problema de esto bueno supónganse que ahora a mí me pinta agarrar y decir que que estos dos van a tener un wid de 200 píxeles por ejemplo o de peles como verán lo que está pasando Es que es como que están no Están se están sobresaliendo porque internamente si lo vemos en la grilla Vamos a darle 250 para que se aprecie mejor acá

como ven la grilla sigue igual lo que estamos haciendo es afectar a la subg que la subg que es la primera esta grilla es la que está siendo afectada porque ahora las las columnas de esta grilla aumentaron su tamaño pero las columnas de la grilla principal siguen exactamente iguales y no se ven afectadas en cambio Miren la magia Cuando yo uso subgrid esto de los rows y esto de los colums lo vamos a reemplazar por subgrid y por subgrid acá entonces actualizamos y fíjense lo que acaba de pasar ahora cada una de estas grillas literalmente

está ocupando una celda perteneciendo a la grilla principal Entonces esta va a tener su grilla propia pero ahora si se fijan están ocupando los elementos que deben ocupar porque la grilla secundaria que acabamos de crear estaría perteneciendo de alguna Forma y afectando a la grilla principal de tal forma que si ahora la movemos por ejemplo para que arranque acá fíjense que se puede desplazar acá por ejemplo vamos a hacer que arranque desde la fila tres por ejemplo y se va para abajo acá podemos hacer que arranque desde la columna uno Ven y se pone la

columna uno y lo que estamos haciendo ahora es crear una grilla dentro de la grilla que de hecho acá viene la magia si al fier Child a este que está acá le damos un Padding cero ven le damos un padding cero un background transparent por ejemplo ahora literalmente es como si estos subgrid estuvieran afectando a la grilla principal pero todos se seleccionan porque incluso acá pueden ver que el hover hace este efecto pero en inspeccionar podemos ver que literalmente es como si ocuparan un lugar más entonces ahora cada elemento está afectando a la grilla esto

es espectacular y no solamente eso si ahora Queremos cambiar el posicionamiento de los elementos lo podemos hacer tampoco sin ningún tipo de problema Bueno venimos al hijo por por ejemplo y al subgrid item le decimos subgrid item First Child también agarramos el primer subgrid item y le decimos order 2 por ejemplo y se va a poner acá al final porque también tenemos la propiedad order que funciona igual y a este le voy a dar un background color algo así mejor ahí va mejor algo así porque entonces Ves lo que estamos teniendo acá agarramos y Bueno

le sacamos el order y podemos cambiarlo sin problema esto eh No tenemos problema podemos cambiar la posición podemos afectar lo que querramos es más podemos cambiar la posición de un elemento a este elemento darle un Wi por ejemplo de 350 píxeles y va a afectar a los demás elementos se entiende los va a estar afectando acá acá porque le dimos este W límite pero si se lo sacáramos se mantendría ahí Tenemos este acá y en este caso se equipara con el otro sea es porque le estamos dando a todos Así que esto lo podemos sacar

o lo podemos dejar da igual pero ven lo que les digo estamos agarrando un elemento y un solo elemento afecta toda la grilla Entonces esta es la magia del subgrid aprendan a usarlo ahora vamos a ver un ejercicio interesante para darle un uso a su grid terminamos grid gente los recontra felicito porque terminamos grid ahora Que ya manejamos grid ahora que ya manejamos flexbox ahora que ya prácticamente conocemos todo Les propongo hacer un ejercicio de hacer una página web completa con todo lo que aprendimos hasta ahora y aún así No termina el curso vamos a

seguir aprendiendo Porque nos falta sobre animaciones nos falta sobre aprender a Cómo subir una página web a internet porque les voy a les voy a explicar cómo hacerlo también para que la puedan Publicar les tengo que explicar más cosas sobre ccs avanzado no les expliqué cómo funciona filter transform Cómo son las funciones como tal No si expliqué sobre variables en css que también se puede Me encantaría explicar sobre el scroll no les mostré los mixing no les mostré los saneamientos no les mostré las custom properties no les mostré nada faltan las medidas dinámicas dynamic View

por with dynamic View per he falta large vi per with large vi per he no les Expliqué el End of sx faltan quotes faltan content editable que eso va para html también no les expliqué scope scope es muy importante También faltan todavía la optimización de recursos en html css faltan todos los proyectos que tenemos pendientes por hacer que eso es lo que va al final de todo así que no sí sí faltan bastantes cosas por todavía Así que bueno Nada estoy re emocionado porque siento que va a ser es que no lo siento va a

ser el mejor curso de html y Css de todo YouTube sin duda Perdón tuve así que bueno gente Ahora sí vamos a hacer Nuestra primer página web completa en este gran curso de css ahora vamos a hacer bien una página y no la vamos a hacer mala de mala calidad vamos a hacer una buena página así que bueno vamos a ver cómo lo podemos lograr bueno gente ahora como verán puse todo de rojo porque nos vamos a adentrar en un ejercicio complejo posiblemente hasta este momento del curso sea lo más Complejo que hagamos tenemos por

un lado lo que es la complejidad es decir el nivel de dificultad del código que estamos creando y por otro lado la complejidad que toma el tema de comprender un contexto más grande porque si tenemos un código con 1000 líneas por ahí es un código fácil pero se complejiza igual porque es más complicado encontrar errores hacer un cambio mínimo porque puede afectar a toda la página Entonces se trata también De a veces desarrollar páginas web saber cómo construir páginas web para que cuando tengamos un proyecto grande podamos resolver eh cambios podamos hacer mejoras y demás

sin afectar a toda la estructura y que tampoco sea tan complicado encontrarlo Así que ahora vamos a ver cómo hacer este proyecto y es un proyecto complejo porque vamos a ver todo el código que aplicamos antes y además va a ser complejo porque vamos a tardar mucho tiempo haciéndolo y con Mucho tiempo no me refiero a 20 minutos y tampoco me refiero a 3 horas no sé cuánto nos vamos a tardar pero sé que no lo vamos a liquidar fácil así que bienvenidos al primer proyecto Real del curso ya superamos la hora 17 vamos más

de 17 horas de curso esto es una locura realmente no quiero que dure tanto el curso pero aún así yo quiero que aprendan bien y para eso este ejercicio es requisito para eso lo primero que tenemos que hacer es encontrar los Warframes yo me tomé el tiempo de diseñar una especie de warframe que básicamente es como una especie de boceto de lo que queremos y así se debería ver en dispositivos móviles y así se debería ver en computadora nosotros primero lo que vamos a hacer es construirlo desde dispositivos móviles y vamos a agrandarlo a computadoras

Esto está bueno porque tenemos que hacer menos código tenemos que concentrarnos en el contenido más relevante van a ir Viendo las ventajas de trabajar Mobile First Así que vamos a comenzar con este proyecto bueno primero acá como podemos ver tenemos simplemente cuatro archivos el Index que está vacío el Styles que está vacío el loguito D Ada 13 y en realidad igual esto es un logo temporal Así que tranqui si buscan en Google Ada 13 y les aparece otra cosa es porque ya hicimos un rebranding y este no va a ser el logo de Ada 13

para la para la edición de este año en adelante pero por Ahora vamos a seguir usándolo por otro una imagen mía que saqué de Google Okay ahora yo no quiero trabajar con este color con el color de la 13 que el original es el el naranja Esto está mal porque según el manual de marca Esto no se hace pero no importa lo que va a hacer va a hacer abrirlo con gimp porque le quiero editar el color para trabajar con otros colores una vez que ya tenemos los warframes lo segundo que tenemos que hacer es

definir una paleta de colores Cuál va a ser la paleta de colores con la que vamos a trabajar nuestra página en este caso nosotros nos vamos a ahorrar eso vamos a ahorrarnos eso de crear la paleta de colores y yo ya más o menos Tengo unos tres colores con los que podemos trabajar así que vamos a ir trabajándolo con esos colores así que primero voy a venir acá y recortar la imagen anchura 400 ahora voy a darle en colores lo voy a hacer un poco azul algo así como el 48e que me gusta mucho Igualmente

voy a seleccionar este color Y lo voy a modificar voy a poner un degradé pero el color color del degradé va a ser mi color preferido que es 4488 e Ahí va Le damos en aceptar y lo pinto de este color ahora si esto es opcional ustedes no necesitan hacerlo esto Solamente yo para poder tener los colores que a mí me gustan sobre escribo el logo cierro esto así que bueno ahora cierro y lo primero que voy a hacer es escribir html 2.5 y comenzar a trabajar Voy a minimizar esto bien bueno ahora sí ya

podemos comenzar a trabajar primero voy a cargar la imagen para chequear que esté bien perfecto carga Así que no hay ningún tipo de problema para comenzar vamos a arrancar con la primer sección de todas que es el Head les voy a enseñar una técnica para crear un menú responsive Es decir un menú que se adapte primero vamos a poner la resolución de dispositivos móviles es decir vamos a poner una resolución como Esta y vamos a agrandarlo al 125 y vamos a enlazar el estilo obviamente link style.css vamos a crear el header y le vamos a

dar la clase header vamos a crear un input type checkbox Esto es para la técnica que vamos a ver input type checkbox y le vamos a dar el ID Open menú Debería ser en realidad menú toggle Pero bueno no importa le vamos a dejar Open menú acá vamos a crear Label para poder tocarlo y que nos muestre ese checkbox el Label va a ser Va a tener un For y va a ser Open menú para que esté básicamente e referenciando a esto y esto va a tener la clase header Open nav Button y esto por

motivos de accesibilidad Vamos a darle roll Button esto no sé si vamos a checarlo un poco ahora vamos a tener que trabajar con esta vista perdón pero si llegaron hasta esta parte del curso lamentablemente no me va a quedar otra que reducir la pantalla porque no nos va a entrar la cantidad de información con La que vamos a trabajar así que por eso necesito tener este texto más chiquito voy a intentar hacerlo más grande hasta que hasta que ya no podamos más pero aún así no tiene sentido si ustedes después no lo van a poder

seguir el roll Button es para indicarle a las tecnologías de accesibilidad que el rol que tiene este Label va a ser de un botón y ahora vamos a ver por qué Vamos a ponerle un igual podríamos usar una librería de iconos pero en este caso lo vamos a reemplazar Por el igual y como ven si vamos a aumentar el font size porque por defecto no está nada bien pero tranquill ya vamos a llegar a eso voy a hacer un pequeño zoom solo para que lo vean si apretamos el igual ven se cliquea el input entonces

lo que vamos a hacer ahora es desaparecer el checkbox para que podamos apretar el Label igual esté chequeado y con ccs vamos a hacer una verificación vamos a decir si el input el checkbox perdón está chequeado vamos A deslizar el menú y si no está chequeado vamos a volverlo a subir es dec a la lógica pero ya vamos a llegar a eso esto lo vamos a mostrar solamente ahora ahora vamos a crear el contenedor de logo div Class header logo container va a ser un contenedor del logo y acá va a estar la imagen que

va a tener la classe header logo y lógicamente Esto va a tener el source logo.png acá bien bueno y ahora vamos a poner el nav vamos a crear un nav que el nav va a tener la Clase gader nav vamos a tener un ul los Li y los a y esto lo vamos a dejar así porque básicamente es una una técnica como ya saben para que no nos moleste y no se actualice la página cada rato le dejamos el hashtag porque si lo sacamos ve que la página se actualiza a cada rato entonces para evitarlo

lo dejamos así y acá vamos a poner home por ejemplo y vamos a darle a esto a la clase cader nav link no Esto no es el link esto es el item perdón nav item y Esto va a ser La clase Head na list y a esto no hace falta referenciarlo al link Así que vamos a duplicar esto y vamos a tener tres secciones solamente home aot o mejor vamos a hacer primero el avot aot después vamos a hacer una sección que diga portfolio y después una sección que diga contact que son las tres secciones

que vamos a tener ahí está acá tenemos las tres secciones que vamos a trabajar Bueno ya tenemos lista la estructura del na lo primero que vamos a hacer es Arrancar dando unos estilos por defecto acá s puedo hacer un pequeño zoom vamos a arrancar agarrando todo y dándole un Box sizing Border Box porque me molesta muchísimo esto vamos a resetear los valores de entrada al Body le vamos a dar un margin cero le voy a dar un font family Monserrat que me gusta mucho esta tipografía de Monserrat Vamos a darle un background color E2 ea

F este background color Perdón vamos a dejarlo así es un azulcito que nos va a servir de fondo Okay este azulcito y el color no va a ser negro sino que va a ser 10 16 32 dd que es el color que me armé que es como una especie de azulcito que no es del todo azul pero no es negro tampoco no se olviden que cuando nosotros trabajamos con páginas el fondo no puede ser todo blanco pero tampoco puede ser todo negro y tampoco tienen que ser colores tan intensos porque eso hace que la página

parezca trucha entonces nunca se trabajan con colores tan intensos el Body Ya lo tenemos todo listo ahora vamos a agarrar un par de elementos div nav header footer el a el I el Label vamos a agarrar todos el h1 el H aunque no solamente con estos pares estamos bien bueno y el input también input al input no al input lo vamos a dejar así y vamos a sacarles a todos el margin por defecto cer y padding cer así no nos comemos los problemas que tenemos de que todos estos elementos tengan el padding y el margin

de hecho al Body le vamos a Sacar y vamos a ponerlo acá vamos a dars al Bo también Bueno ahora Simplemente nos queda comenzar a trabajar en el menú okay Así que Comencemos a trabajar en el menú para arrancar el header si va a tener un color blanco de fondo el header va a tener un background color blanco por lo menos para la versión Mobile Vamos a darle un display Flex Ahí está no se aprecia mucho porque se nos está yendo de Mambo pero ya vamos a llegar a eso no se preocupen vamos a agarrar

el G Y AC vamos a mejor darle clase por la clase Ahí va y acá vamos a Agar el header logo y le vamos a dar al logo un Max wid del 100% como ya sabemos Ya se está empezando a adaptar bien pero le vamos a dar un wid de 64 píxeles Por qué no ahí no me parece mal que tenga ese tamaño y le vamos a dar un margin 10 píxeles 20 píxeles o sea 10 arriba y abajo y 20 Ahí está centrado Igualmente lo vamos a centrar de otra forma ya vamos a llegar

a eso no se preocupen Vamos a agarar el header okay Y al header ya trabajarlo vamos a darle un justify content Center Ahí está no un space between Perdón space between y vamos a darle un align items Center bien parece que no hay ningún cambio pero les puedo asegurar que hay un gran cambio ahí algo se puede notar la diferencia vamos a agarrar el Head Open na Button Vamos a darle un color 48e un font size de 3 Rem Ahí está si crece acá ya lo tenemos crecidito yo Le voy a dar un font weight

de 700 así me crece un poco el el menú ojo no sean no se desubiqué de 600 me gusta más que de 700 700 es muy bruto bien le vamos a dar un Pos absolute para que no estorbe porque no lo queremos que intervenga y fíjense lo que vamos a hacer ahora vamos a agarrar al checkbox header a ver cómo se llama el checkbox le habamos puesto el ID Open menú pero vamos a seleccionarlo por el input checkbox Ahí está y vamos a darle Primero un display n n Ahí está aún así ya es como

que medio que nos desapareció está en position absolute Pero fíjense lo que yo quiero hacer con esto y va a ser poner esto en right 10 píxeles así se posiciona acá tenemos que desaparecer el menú ahora Así que vamos a hacer lo siguiente y acá acá Viene un poco La magia de todo fíjense Esta técnica gader si el O sea si el input el check CX Vamos a darle una clase a esto porque si no meo que se nos va a descontrolar Gader checkbox y vamos a darle por clase mejor ahí va Bueno ahora vamos

a hacer esto acá viene toda la magia acá abajo si el heer checkbox está checked O sea si está chequeado vamos a modificar al her mano para eso usamos la virilla y vamos a agarrar alader nav y le vamos a dar display Non y fíjense esta magia okay Perdón tiene que ser not checked o sea por defecto el header na tiene que estar en display n y acá le vamos a dar en display block fíjense esta magia si Está chequeado fíjense que como que aparece o desaparece dependiendo de si está chequeado o no Bueno ahora

vamos a darle propiedades Vamos a darle un background color blanco primero así ya tiene su propio background color Bien también necesita un position absolute para SEP pararse del fondo y no romper los huevos va a tener un he 100 vi por W un he 100 vi por he y un Wi 100 View por Wi Vamos a darle top cero para que se posicione acá arriba bien y un Z Index -1 para que no esté por encima del na que tenemos acá lo que sí tenemos que hacer ahora es agarrar al gader Igualmente Esto se lo

deberíamos dar No acá sino que se lo deberíamos dar directamente acá por un tema de que así Cada vez que tipo no No gasta tantos recursos si no gasta tantos recursos porque imagínense que cada vez que se le da en chequeado el navegador tiene que cambiarle todas las propiedades en cambio de esta forma cuando está Chequeado Solamente le cambia una propiedad pero si todo lo ponemos acá abajo siempre cada vez que se le de check el navegador va a tener que estar cambiándole todas estas propiedades y esto consume más recursos no es tanta la diferencia

pero digo es mejor dárselo directamente acá para que tod eh las propiedades estén definidas en el nav y solamente cambie una cada vez que se apriete el botón entonces de esta forma más óptimo todo ahora lo que sí vamos a Hacer es agarrar el gader nav list okay Y ahora sí viene la magia le pusimos nav list no nav list bien y vamos a darle un display Flex Vamos a darle un Flex Direction column Vamos a darle un hate del 40 View por he Por qué no pero vamos a darle a este en vez de

un display en vez de display le vamos a dar display Flex Por qué fácil así acá le podemos dar margin auto y se centra ahí tenemos esto bien centrado pero ahora tenemos que distribuirlo correctamente para esto Vamos a decir un justify content y vamos a darle un space around a ver cómo se distribuye bien ahí me gusta Vamos a darle space evel mejor Bueno ahí está entonces ahora fíjense que ya tenemos el menú listo esto es increíble en tan pocas líneas de código ya tenemos el menú vamos a separar esto por secciones porque si no

se nos va a perder vamos a poner esto vamos a comentarlo es una buena práctica comentar códigos tan largos header section y vamos a poner Estas linitas para connotar más una separación y abajo de todo tenemos que poner otra sección que sea header queries que Esto va a ser para trabajar con los media queries y cuando terminamos con los media queries el header ends es como una forma de decir vamos a trabajar las medidas Originales del header después vamos a trabajar los queries para adaptarlo a diferentes dispositivos y después terminó entonces y acá inicia la

próxima sección Está Bueno tenerlo acá tendríamos que poner los queries y entre después de eso indicamos que terminó por ahora mal no venimos vamos a agarrar alader nav item creo que sería y vamos a decirle que el list Style none para que se le vayan los puntitos después vamos a agarrar el header nav item a O sea al enlace al a le vamos a dar un color 48e que es el mismo que tiene el el mismo que el color predominante y vamos a sacar el subrayado Vamos a darle un text Decoration no eh Ahí está

y ahí tenemos por ahí un menú mucho más estético se parece un menú de meta no como si estamos bando con los colores de Facebook y vamos a hacer algo vamos a hacer que en over over vamos a hacer que tenga un text decoration underline es más o podemos hacer esto directamente esto lo ahorramos acá fíjense y acá ponemos a not y acá ponemos over Entonces cuando cuando no se hace over le decimos Tex decoration n Entonces si Se hace over queda n es como una técnica interesante esto es bastante raro pero básicamente le estamos

diciendo cuando no está en over es más podemos complejizar lo más not dos puntos is y acá ponemos over o AC entonces de esta forma cuando no lo apretamos o cuando no estamos en over el text decoration se mantiene es un poco compleja esta línea pero está bueno para que sigamos aprendiendo Qué joraca significa esto si en vez de decirle que tiene un text Decoration por defecto okay en over sacarle el text agregárselo de vuelta como por defecto ya está agregado le estamos diciendo Mira si el a no está en estado de over ni en

estado de active vamos a dejarle el text decoration Non ahora si está en estado de over o en estado de AC esta condición not no se cumple Entonces no se le aplica este estilo eso es básicamente todo yo la verdad que ignoro Igualmente Esta es como una solución interesante para no Tener que andar haciendo esto miren poner text decoration none acá y acá poner lo mismo pero para Over y acá poner Lo mismo para el acp aunque también se podría hacer lo siguiente y es sacar esto okay Y acá sacarle esto que está acá y

acá ponerle is Over coma AC typ y de esta forma Igual funcionaría igual Entonces es lo mismo realmente es lo mismo pero no me parece mal esta forma bueno en este caso no nos la vamos a complicar tanto la vamos a sacar y Vamos a dejarle test de correction n y acá le vamos a poner underline porque tampoco quiero complicar losos tanto pero si entendieron todo lo que acabo de hacer espectacular si no es simple le sacamos la decoración por defecto pero cuando está en over o en active que AC es cuando clicamos se le

aparece la línea de vuelta Bueno ya tenemos listo el menú ya está tenemos el menú completamente listo ahora lo que tendríamos que hacer es trabajar con Esto y yo lo que voy a hacer ahora no va a ser trabajar con media queries va a ser trabajar con container queries para eso vamos a agarrar el header y vamos a hacer que el header sea un contenedor container type y le vamos a dar un inline inline size Ahí va y container name va a ser header Entonces ahora puedo llamar a este media query por lo que es

un header y venimos acá abajo de todo en los gader queries y le damos un @ container gader y acá ponemos la Condición cuando tengo un min with de 600 píxeles por ejemplo y acá vamos a arrancar a trabajarlo a ver si por ejemplo podemos agarrar el a por defecto Y hacer que tenga un color rojo a ver si funcionaría a ver si aumentamos de resolución no le chupa completamente un huevo Ah Me faltó me olvidé Ahora sí agarro Y si estiro perfecto se vuelve de color rojo bien para qué quiero chequear esto y para

adaptarlo a escritorio lo que quiero hacer ahora es adaptar este Elemento a escritorio Cómo hago eso bueno puedo seleccionar el Head nav de la misma forma ga nav Igualmente acá tenemos el tema de que esto que está acá tiene más especificidad si se fijan tiene tres de especificidad si solamente selecciono el Head naab no va a tener mucha importancia o podemos ponerle un ID y seleccionarlo directamente por ID pero cuando cuando trabajamos de esta forma tenemos que trabajarlo de vuelta de esta forma porque literalmente Estamos cambiando el estilo si el checkbox está chequeado o no

está chequeado entonces Menos mal que las propiedades no las pusimos acá por qué Porque no solamente habría consumido más recursos es decir decir en vez de las propiedades dárselas al nav acá arriba se las hubiéramos dado acá estas propiedades tendrían un nivel de especificidad de 030 y acá tienen un nivel de especificidad de 01 O sea que si ahora queremos modificar cualquiera De estas propiedades es tan fácil como acá usar el header nav en cambio de la otra forma tendríamos que haber hecho algún selector de especificidad 030 o ponerle algún ID Entonces ahora nos ahorramos

todo eso y podemos seleccionar directamente el nav y como Igualmente lo vamos a crear display Flex lo vamos a poder trabajar así que es magnífico primero lo vamos a poner en position static para sacarlo del position absolute en static Entonces ahora sí Está dentro del flujo normal de la página static es el valor por defecto no se olviden el hate va a ser auto automáticamente y ahora sí vamos a agarrar el header nav ul y le vamos a dar un Flex Direction Row de vuelta para que se ponga por defecto en Row Ah list Perdón

naul no es na list list Ahora sí Bueno ya tenemos esto acá por algún motivo es como que esto está demasiado grande pero eso por el hate que le dimos le vamos a dar hate auto también y ahí Más o menos a poquito viene quedando lo que nosotros queremos Ah vamos a agarrar el Label y sacarlo completamente vamos a agarrar header Open na Button y le vamos a dar display none porque no lo necesitamos para que se vaya del flujo normal Ahí va a esto le vamos a dar también un Wi auto y vamos a

darle al nav justify content space between Qué está pasando con esto a ver si le damos también un Wi auto Ahí está ahora sí Bueno ahora simplemente le damos un Gap De 20 píxeles así se separan un poquito el problema acá es que este está demasiado al borde Así que vamos a moverlo un toque también mar right 40 píxeles y ahí tenemos este movimiento Entonces ahora de forma tan simple fíjense que ya hicimos un menú adaptado o sea acá lo podemos abrir y cerrar y acá simplemente Bueno lo que pasa que acá es que desaparece

esto no debería pasar así que vamos a resolver esto y es que vamos a trabajar con el display Así Que vamos a darle display block para que también en caso de que se vaya esto quede en display block y ahora sí ya está en caso de que este acá va a tener un menú desplegable que se va a desplegar en dispositivos móviles y en caso de que esté sí va a tener esto de esta forma no me parece mal me parece De hecho perfecto y ahí tenemos un menú que es bastante interesante y bastante estético

me gusta bastante la verdad lo que acabamos de lograr vamos a Aumentarlo un poquito porque creo que el tamaño real Debería ser otro hermoso eh Hasta ahora nos mandamos un hermoso heer Perfecto Bueno Les propongo Algo vamos con la próxima sección vamos ahora a construir la sección del perfil Bueno ahora ya tenemos el header ens y vamos a arrancar a escribir acá el profile section y acá comienza la sección del perfil ahora vamos a chicar de vuelta el html vamos a esto ponerlo acá en Mobile de vuelta agrandar un poquito hasta un Punto que se

vea bien Bueno ahora por debajo del header vamos a crear el Main porque esta Va a ser la sección inicial y acá vamos a tener la Class profile y vamos a tener por un lado un div que va a ser Va a tener la clase profile wrapper porque simplemente tiene el objetivo de actuar como una caja para dar estilos O sea no tiene ningún tipo de significado semántico Así que le vamos a poner wrapper porque eso es un wrapper no es como es una capa que Solamente se crea para trabajarla en css Así que eso

nos va a permitir después hacer serer que tenga un límite O sea si queremos decirle Mira esta caja va a estar siempre centrada pero se va a estirar hasta cierta medida lo podemos hacer entonces eso es para eso básicamente para que sea esa cajita la que controle los límites de nuestra sección primero vamos a crear la imagen acá vamos a crear un de que va a tener la clase profile img container Ahí va y Lógicamente adentro va a haber una imagen adalto png la sección después va a tener información vamos a venir acá y poner

Class profile Data container es decir va a contener Data y vamos a crear un div que va a tener la clase profile Data primero va a tener una descripción Class profile bajo profile Data Ah va y acá va a serer profile description acá va a haber un h1 que va a ser mi nombre el h1 va a tener la clase No no va a tener ninguna clase porque h1 solamente Hay uno así que con h1 Debería ser suficiente Quién es Lucas dalto acá vamos a poner un párrafo y vamos a tener un Loren y después

vamos a tener otra sección que va a ser como de skills div class profile skills acá vamos a poner un H un h2 que va a ser skills que van a ser mis skills y acá va a haber una lista y los le van a tener la clase profile skill en vez de skills skill o skill container o sea contenedor de skill digamos algo así en realidad sería Skills container y acá sería skill acá vamos a crear un div Igualmente no estaría bien entado Vamos a apretar Tab acá vamos a crear un div que va

a tener la clase load bar y acá dentro va a haber un div que va a tener la clase lad bar bar esto ya van a ver para qué es Okay este es el bloque y Este es un elemento del bloque y acá va a haber un modificador que va a ser por ejemplo bar 80 Ahí está y de esta forma acá podamos a poner 80% ya van a ver para que es Esto pero vamos a crear un efecto muy lindo y acá vamos a crear un spam que va a ser la tecnología que va

a tener la clase profile skill name y acá va a ser por ejemplo html Y así vamos a crear varios venir acá y vamos a crear varios yo voy a crear cuatro que con cuatro para arrancar es suficiente css lo tenemos dominado al 60 por acá le vamos a dar 60 acá tenemos al 70 javascript por ejemplo Ahí va Vamos a agregar cinco mejor ahí va Tenemos También python que también lo enseñamos en el canal al no sé 70 por acá de vuelta ponemos 70 sql al 90 por que tenemos un curso de sql también

que está muy bien explicado listo 70 70 Bueno ahora tenemos que arrancar a darle estilo a todo esto que parece bastante complique de dar estilo no vamos a arrancar entonces con el profile section me emociona porque tenemos que ver cómo pasar de esto tenemos que ver cómo pasar de esto algo estético algo agradable y Lo vamos a hacer tranqui que lo vamos hac primero vamos a agarrar el profile container y le vamos a dar un display Flex esto para arrancar profile wrapper le dimos Perdón profile wrapper ya tenemos todo descontrolado bien Me encanta Flex Direction

colum o sea va a estar en columnas hasta acá parece que no hay ningún cambio Aunque sí lo hay Vamos a darle un justify content Center y un margin auto el margen auto es para que después el wrapper se Centre igual Lo vamos a dar después para que entiendan el Por qué vamos a darlo después y vamos a darle un background color también blanco vamos a agarrar la imagen profile img creo que le pusimos así a la clase No class profile img Ahí va igual esta metodología bem no está del todo bien aplicada pero aún

así lo importante es que nos guiemos que reduzcamos los problemas de especificidad y que Entendamos lo que estamos viendo solamente con leerlo Así que es suficiente le vamos a dar a la imagen Max Wi del 100% ya sabemos que de esta forma la hacemos responsive Ahí está mucho mejor y le vamos a dar un Wi de 860 píxeles para que no crezca más de eso Entonces si la agrandamos solamente va a crecer hasta acá hasta 860 píxeles que repito Me parece una guasada Vamos a Darle que crezca menos queremos que crezca 600 píxeles como máximo

ahí está A ver hasta dónde crece Ahora hasta ahí crece bien no está mal que crezca solo hasta ahí bien Bueno vamos a seguir trabajando vamos a agarrar al contenedor de la imagen profile img container y le vamos a dar un Max hate de 500 píxeles para que no se desborde Entonces ven ahí no va a crecer más que esto va a tener ese Max hate pero vamos Vamos a darle un Overflow hidden para que se oculte Así que vamos a darle un overflow hidden Entonces de esa forma si la imagen crece más se oculta

ahí abajo ven se oculta ahí abajo y como se está ocultando ahí abajo eso nos permite bueno Vamos a darle mejor que el ma de imagen sea de 720 píxeles sí por qué no ahí va ahí tenemos un efecto mucho más estético ven la imagen crece y se va metiendo adentro Entonces de esa forma la imagen puede seguir creciendo un poquito más lo ideal Igual es que tengan una imagen de mejor resolución para que no les pase esto pero en este caso después pueden optimizar ustedes la página pero yo les voy a dar guía para

que después la optimicen Ahora nos enfoquemos en eso no porque como es nuestro primer ejercicio haciendo una página web no quiero volverlos tan locos con todas las cosas que hay que hacer cuando un hace una página web porque se explotan dejan el curso y se van así que vamos a dar Poquito vamos a agarrar más arriba ahora al profile Data container y acá Viene un poco la magia también de lo que va a estar sucediendo no Esto va a tener un Max Wi de 600 píxeles para arrancar Bueno ya arrancamos a dar estilo al h1

le vamos a dar un color 48e ahí me gusta más o un 2 6a que es como un poquito más oscuro Vamos a darle a la imagen container un padding de 20 píxeles No acá no perdón al Data container así está un poco bien separado Vamos a darle 12 Pixeles para que no sea tanto y ahora vamos a agarrar skills y acá Viene un poquito La magia de lo que les quería explicar de la barra de carga vamos a venir acá abajo y vamos a tocar el lad bar primero vamos a agarrar el profile skills

container agarrar el h2 de acá lo mismo darle el mismo color que le dimos a esto por ahí y ahora sí vamos a agarrar el lad bar y acá ahora arranca todo vamos a arrancar con un Border dos píxeles solid 48e bien ya venimos bien Ya ya creo que ya saben lo que quiero hacer Border radius 8 píxeles Vamos a darle un color blanco porque va a tener va a tener un padding de dos píxeles Ahí está un font size 12 píxeles para que sea un poquito más chiquito el wid va a ser del 80%

para que pueda entrar esto acá ahora lo vamos a poner bien margin va a ser de 4 píxeles así se separa un poquito entrada van a tener un list Style n así no tienen Ah no esto Hay que hacerlo a los le eh a los le al profile Skill sería profile skill acá le tenemos que dar el list Style Non Ahí va a esto le damos un display Flex así se ponen así uno al lado de otro bien venimos bien le vamos a dar un margin 10 píxeles así están más separadas una de las otras

le vamos a dar un Max wid de 600 píxeles por un tema de que fíjense que también nos interesa que crezcan hasta ahí y no crezcan más O sea están así y si tienen que crecer que crezcan hasta ahí y acá viene un poco la magia ahora vamos a Agarrar a las slad bar Bars y les vamos a dar un background color 48e que es esto que está acá vamos a darle un borde radius de si el de arriba fue de 8o píxeles El de abajo tiene que ser de cuánto seis píxeles más o menos

vamos a darles un padding de cuatro píxeles seis píxeles ahí están esto Debería ser cuánto de ocho un poquito más no no menos de cuatro Ah va Sí ahí está mucho mejor de cuatro no está mal hasta ahora ya creo que más o menos se hicieron una Idea y ahora viene más la magia punto bar 80 y acá vamos a darle wid 80% Ven y así lo hacemos con todas creo que pusimos tres nada más pusimos 70 y 60 Ahí está y ahí tenemos los porcentajes a esta le vamos a dar 70 y esta le

vamos a dar 60 por y estaba la última que eran 90 creo Ahí está y ahí tenemos las barras Esto está no pueden negar que está bastante bueno Esto según yo está bastante bueno así que bueno mucho más no hay ya tenemos esto así no está mal Me gusta es estético por ahora venimos muy bien y ahora tendríamos que ir trabajando lo que vienen siendo los los queries no Igualmente habría que sacarle tiene como un esto que está acá Este espacio no me gusta mucho así que voy a darles a las load bar vamos a

darles un margin left cero Y qué más tiene margin acá margin left cer ahí por lo menos nos aparecen Así que siento que me gustan mucho más entonces es muy básico pero está bueno porque se lee vamos a agarrar También a las skill name acá y le vamos a dar un color 48 eh Ahí está Entonces ahora sí Y acá vene un poquito la magia también que como le dimos display Flex ven como le dimos display Flex ahora podemos decir align items Center y se van a alinear al centro ven si no le se lo

damos está como arriba si le damos el Center van a estar centradas Y eso nada también suma muchísimo c ahí ya tendríamos nuestro set de habilidades no Y esto además no se estira más de lo que Se debería estirar la imagen de arriba digamos Bueno ahora vamos a esto darle el a profile vamos a volverle un contenedor para trabajar las medi queries ya las container queries profile y acá vamos a darle un container prof y un container type in size también ahí va y ahora vamos a venir acá abajo y crear las queries vamos a

poner profile y arrancar container profile min wid 600 píxeles y ahora arrancamos con esto bueno primero al profile container Container en general lo tenemos acá arriba no cómo lo llamamos profile wrapper Perdón profile wrapper al profile wrapper tendríamos que darle de entrada Flex Direction Row Entonces cuando crece de los 300 peles se así bien no está mal yo igual quizás esperaría un poquito más en vez de 600 píxeles lo pondría así a los 800 ponele o a los 720 ahora veremos dónde 720 no me parece una mala medida a ver ahí ahí me gusta mucho

más ahora tenemos que Encargarnos de limitar el crecimiento de esto así no crece más de lo que debería crecer pero ahora lo vamos a hacer eso acá vamos a darle de entrada el Max wid 1400 píxeles para que no crezca más de lo que tiene que crecer tampoco así tiene un límite no importa si es en escritorio lo que sea esto tenga que tener un límite va a tener un padding de 20 píxeles necesita el padding de 20 píxeles si no queda medio desastroso Ahí va También Bien también va a tener un Background color transparente

Ahí va porque esto es lo que va a tener el estilo ya también lo vamos a ver des preocúpense por eso lo que tiene que quedar blanco Debería ser esto que está acá solamente a profile Data Vamos a darle un Max withd de 620 píxeles así no crece más de lo que debería crecer Ahí va acá vamos a hacer otro un poquito de magia vamos a venir acá y poner profile img Vamos a darle hate 100 View 100% Perdón 100 View no 100% bien Vamos a Darle un obet fit cover cover para que se adapte

bien ya esto lo vamos a nivelar des preocúpense que está medio raro pero lo vamos a ahora lo vamos a retocar y el Wi va a ser más chiquito W va a ser de 620 píxeles más o menos no va a crecer más que eso ahí está el Mobile y Acá empieza a crecer bien y más de esto no crece esto bien si seguimos poniendo resolución original Esto se está acercando más a resolución original y ahí ya ven no crece más Vamos a darle Un margin auto para que se siente pero ya vamos a llegar

a eso ahora vamos a agarrar a la imagen y darle un background color blanco ahora vamos a agarrar a profile Data que es esto que está acá y darle también un background color blanco pero tenemos que hacer que todo lo cubra no que solamente esto lo cubra Así que cómo cómo lo podemos hacer y agarramos el profile Data container y a esto le damos el background color bien Mucho mejor Entonces ahora esto se Estira y bueno ahora vamos a hacer otro truquito que les va a gustar bastante que es para dejar esto más estético porque

no me gusta mucho así como está así que lo vamos a ajustar mejor para esto al rapper le vamos a dar un hate más o menos de 90 View por he y ahí creció como verán hasta acá pero la imagen como que no no se estaría adaptando Por eso tenemos que al contenedor de imagen profile img container darle un Max hate initial Entonces se va a adaptar completamente Ay un fucking dengue esto es un dengue a mí no me jodan voy a matar con el cular asegurar de matarlo si no lo maté me caga eso

me caga chupando me succiona la vida lo que tenemos que hacer ahora es centrarlo verticalmente así que vamos a centrarlo verticalmente para eso vamos a agarrar al Data container y le vamos a dar display Flex y vamos a darle un text align Center no text aling Center Perdón No quise decir align items Center Entonces de esa forma lo tenemos centrado ven ahí está y vamos a sacar este margin que tiene el h1 y el h2 porque si no se nos va a descontrolar un poquito todo así que vamos a poner al h1 vamos a agarrarlo

y vamos a y no No necesitamos hacer más nada porque ahora el h1 es uno solo así que con darle tiro al h1 ya está margin top 0 Y de esa forma ahora Estamos sacando el margen que tiene por defecto esto y además le Vamos a dar un font size 4 Rem sí no está mal 4at Rem text wrap balance para que los para que esté bien balanceado la cantidad de texto bueno no está mal eh lo tenemos bien Quedó bastante estético ahora lo que yo haría sería quizá e centrarlo para eso vamos a agarrar

el wrapper y vamos a darle un margin auto para que esté centrado e horizontalmente y ahí ahí está va a estar siempre centrado horizontalmente ahora Estaría bueno darle como un borde redondeado a Todo esto y ponerle como una sombra no para que quede todo más estético esto se puede hacer muy fácil tenemos que calcular los bordes nada más tenemos que agarrar el Data container y darle un borde radius 25 píxeles 0025 píxeles Ah no al revés sería borde radius 0 píxeles 25 píxeles 25 píxeles y cero ahí tenemos estos dos bordes El de acá y

el de acá redondeados y ahora vamos a agarrar la imagen el container de imagen y vamos a darle el de antes y ahora sí tenemos Esto redondeado esto redondeado esto redondeado y el de abajo redondeado para separarlo un poquito más del fondo yo agarraría solamente el Data container y le daría un Box Shadow c píxeles cer píxeles 9 píxeles y le daría 003 menos do y ahí lo tenemos un poquito separado pero es un efecto mínimo de sombra pero que crea le da una separación y hasta ahí entonces venimos con algo que es bastante estético

es bastante lindo Yo particularmente compro así que bueno por Ahora venimos bien No necesitamos hacer mucha ciencia por ahora gente me viene gustando bastante lo que tenemos así que bueno ahora nos tenemos que poner a trabajar en la próxima sección diría yo no que sería como el portafolio Esta es la parte más interesante porque va a ser la más cortita pero aún así va a ser la que técnicamente más compleja sea porque vamos a estar trabajando con grid Así que vamos a usar grid para armar un buen portafolio y adaptar un grid con Diferente distribución

de elementos Mientras más va creciendo la pantalla así que bueno vamos a ver cómo lo podemos lograr pero la verdad que yo lo veo bastante fácil eh Pero bueno vamos a implementarlo bueno para eso vamos a cargar el profile ends acá Ah va y vamos a poner portfolio en inglés siempre de testé escribir portfolio porque es portfolio y nosotros le decimos portafolio portafolio no portfolio Porta Pero bueno nada será portfolio y será Portfolio section Entonces vamos a dejar un espacio acá un espacio acá y acá vamos a arrancar a trabajar para arrancar tenemos que arrancar

creando la estructura Así que uh miren lo que es todo el código que creamos hasta ahora Bueno vamos a salir del Main y vamos a crear un section que va a tener la clase portfolio también una cosa que se suele hacer mucho es en vez de clases se le suele poner ids primero porque son como bloques completos y después porque con El con los hrf los podemos redireccionar Pero bueno ya después lo veremos Cómo resolverlo posiblemente les agreguemos un ID con el mismo nombre muy simple lo aperturamos con un h2 que diga portfolio section y

acá vamos a crear un div que va a tener la clase item container o project project container para contener proyectos y vamos a ponerle portfolio project container acá simplemente vamos a crear vamos a crear div vamos a poner vamos a hac de cuenta que tenemos seis Solo seis proyectos Class portfolio project y vamos a ponerle un h2 con el título por ejemplo va a tener el título clase portfolio project name project y esto lo vamos a copar y pegar varias veces 4 5 6 bien solo Esta es la estructura que necesitamos No necesitamos más nada

para hacer algo bellísimo y ya vamos a ver cómo hacerlo y vamos a arrancar primero vamos con portfolio le quiero dar un background a esto que me guste bastante background Color 18 23 F este background me gusta bastante la verdad vamos a darle también un color blanco ahí también está venimos bien Vamos a darle un min he 100 View por he para que esté bien display Flex lógicamente Flex Direction column y textalign Center así siempre están centrados bien por ahora venimos bien Vamos a hacer magia con esto ya lo van a ver portfolio project container

le vamos a dar un display grid vamos a aplicar grid vamos a hacerlo bien grid template Columns un frr vamos a hacer una sola columna de un FR al principio Vamos a darle un Max wid de 1300 píxeles para que no crezca más que esto O sea cuando esto lo estiramos acá que no crezca más que esto Ven y después lo centramos le vamos a dar un margin auto siempre va a estar bien centrado tanto vertical como horizontalmente y esto me gusta ahora vamos a agarrar el portfolio project Vamos a darle un background imagen y

vamos a ponerle la imagen de dalto png Porque es lo primero que se me ocurre gente no no me por favor no me maten va a tener este fondo Vamos a darle a su vez a esto un wid del 100% a ver si lo toma bien lo toma y vamos a darle un Gap de 12 píxeles para que estén separados 12 píxeles entre sí también Vamos a darle un pading de 12 píxeles que esto es lo que yo les decía la técnica que les decía ven ahí está separado entre sí Y además los bordes que

es un efecto que queríamos lograr a esto también le vamos A dar un min he 90 View por he Ahí está así crece y se adapta ven entonces de esta forma los tenemos adaptados y acá tenemos un problema con las imágenes Así que primero vamos a agarrar y decir que mosquito de que las imágenes van a tener un back Center y después van a tener un background size cover Perdón cover y ahí está ahí si crecen se van ahí si crecen se van adaptando bien Me gusta esto lo único un tip que les voy a

dar bueno Primero Vamos a darle también display Flex o mejor dicho un display grid y acá van a ver una técnica para centrarla que es usando el Place content Center se acuerdan Que cuando vimos grid les dije que les iba explicar cómo centrar elementos usando grid bueno perdón me olvidé y se centra así se le da display grid y Play content Center y todo lo que está en el centro se centra es espectacular pero les voy a enseñado un truquito para poner un background se Acuerdan que antes creamos un overlay para que el overlay tenga

un desenfoque me caía pedazos pero necesitaba que lo aprendan Para que vean que en ese momento Es malo Al principio van a aprender un montón de cosas que con el tiempo van a tener que ir modificando Así que ahora ya no se hace más overlays que les enseñé cuando vimos el background sino que ahora lo vamos a hacer de esta forma para crear una capa oscura de fondo simplemente lo hacemos De esta forma ponemos linear gradient y acá ponemos hashtag 00 acá ponemos la opacidad por ejemplo cco lo mismo 005 y acá ponemos una coma

entonces ahí tenemos esta capa y si queremos aumentarle por ejemplo ponemos nu9 y nueve Ven y se aumenta la opacidad Entonces estamos poniéndole un linear gradient acá No le podemos poner color porque no funciona no se acuerdan que no olviden que Back imagen es para usar o imágenes o gradientes linear gradient el Radial etcétera entonces qué pasa Yo también puedo poner varios gradientes varias imágenes etcétera entonces lo que estoy haciendo ahora es poniendo un gradiente primero y después la imagen si yo hiciera la imagen y después el gradiente no funcionaría porque la imagen está encima

del gradiente Entonces primero estoy poniendo el gradiente y después pongo la imagen arranca oscuro y termina ven lo puedo poner así incluso arranco oscuro y Termina claro y de esta forma en vez de poner el centro Lo pueden poner arriba el project puede tener cero opacidad y después terminar oscuro Entonces esto termina así o pueden hacerlo al revés es decir ponen cero acá acá ponen totalmente oscuro y acá ponen cero Entonces de esa forma ven el centro está oscuro Pero siempre es muy raro hacerlo así es raro hacerlo de esta forma entonces yo digo en

vez de hacer esto le damos a toda la capa oscura y le damos Ponerle lo dejamos en 6,006 y de esta forma toda la capa se vuelve un poquito negra ve como tu hermano vamos a poner un poco así todo nuev así está más oscuro todavía y ahí tenemos una capa oscura y para qué queremos que el fondo sea oscuro simple para que podamos leer el nombre del proyecto que es lo que nos interesa acá lo que vamos a hacer es darle en portfolio project over Vamos a darle una opacidad 0.7 0.74 Vamos a darle

ahí podemos detectar un elemento más o menos opaco también pueden agregarle un outline por ejemplo ven ponen outline y acá ponen dos píxeles solid y acá le agregan blanco pero con una opacidad de se por ejemplo entonces ahí tienen el outline Ven ahora lo que tenemos que lograr es que cuando aumentemos la resolución de esto la distribución de los elementos cambie Así que vamos a hacer eso vamos a arrancar con los queries Y también vamos a Agarrar el portfolio h2 y le vamos a dar un font size 3 Rem y ahí crece un poquito más

solo el h2 Ah Ah Ah perdón vamos a poner vamos a poner una clase especial las portfolio title le vamos a dar portfolio title ahí solamente crece este Ahora sí vamos a ponerlo acá para trabajar con las media queries en 600 y vamos a ya le dimos la clase no no le dimos vamos a poner lo mismo container name portfolio container type inline size bien Ahora vamos a agarrarlo acá Container portfolio min withd 600 píxeles a los 600 píxeles lo que vamos a hacer No a los 900 Mejor vamos agarrar los 900 píxeles vamos a

mostrarlo más por acá despés lo vamos Ajustando Igual se está hablando mucho de usar también esto con rems en lugar de andar modificándolo usar rems Entonces por ejemplo en vez de 900 píxeles se le puede dar 900 di 16 56 bien le podemos dar 56,25 Rem Esta es una medida muy común Que se suele dar en Rem Así que la podemos aprovechar y acá vamos a agarrar el portfolio project container y vamos a darle grid template columns y vamos a poner un repeat auto coma min Max y vamos a darle 400 píxeles un FR entonces

de esta forma ven que se posicionan en varias columnas tenemos esto tenemos acá y después crece Y tenemos esto así Pero yo lo que quiero acá es hacer generar una distribución diferente acá vamos a hacer que Portfolio project First Child este tenga un grid column span 2 por ejemplo y ahí está ocupando toda la parte de arriba y vamos a ser que el de abajo de todo también haga lo mismo y también le damos al Port folio portfolio project container ahora vamos a darle al Perdón project directamente Child 5 y vamos a darle lo mismo

colum span se lo damos al seis ahí va ahí va ahora sí ya lo tenemos resuelto ven Entonces estamos acá y tenemos esto así crecemos y esto Nos queda de esta forma ahora tenemos que en esta resolución tenemos que cambiarlo porque acá viene bien acá también viene bien Vamos a aumentarlo igual en vez de 400 píxeles 420 Ahí está entonces de esta forma crece un poco más y hasta acá se mantiene ven hasta acá se mantiene y se mantiene bien pero aún así deberíamos cambiar un poco la distribución de esto cómo lo cambiamos bien para

cambiar esto lo que necesitamos es crear otra media queries Que no sé si es lo correcto pero bueno podríamos intentarlo hacemos Exactamente lo mismo pegamos esto que está acá y la media queris va a ser diferente va a ser por ejemplo de 10000 píxeles Así que vamos a hacer otro cálculo 10000 píxeles dividido 16 sería 75 rems Así que venimos acá y ponemos 75 rems vamos a checarlo un poco así lo lo sufre de entr y no tenemos que andar haciendo este movimiento Así que saqué el zoom para que lo podamos ver mejor y ahora

lo que Vamos a hacer es cambiar esta distribución ahora van a necesitar 300 píxeles Ahí está 300 píxeles crece y se pone acá vamos a darle un poquito más Igual vamos a darle 1300 píxeles 1300 píxeles dividido 16 da 81,25 bueno casi lo calculé 81,25 Ahí está vamos a poner la resolución real ent está acá sigue acá y crece acá bien no está mal lo tenemos bien adaptado Y esto no está mal igual no me disgusta esto eh pero aún así Creo que podemos Igualmente Cambiarlo podemos cambiar esto cómo lo podemos adaptar y creo que

podemos darle al proyecto principal le podemos dar protagonismo para eso vamos a checarlo un poquito más igual ahí va al proyecto principal le vamos a dar protagonismo y vamos a hacer span 2 grid Row spam 2 vamos a dejar que esté ocupando ambos y a este de abajo también le vamos a dar su protagonismo quinto le vamos a dar spam 4at y ahí crece no entonces ahí tenemos esto y fíjense cómo cambiamos la Distribución de los elementos Qué interesante no tenemos la resolución chiquitita que así se ven celulares crece y se ve así y seguimos

creciendo Y se ve así no para mí esto está perfecto en vez de 90 View por ge Vamos a darle por ahí 84 a ver si queda más lindo 60 Ah ahí se reduce bastante Ah bueno le podemos dar 80 entonces ahí está no me disgusta esto y a esto le vamos a sacar el margin botton que tiene a Este título h2 al h2 dónde estás h2 h2 h2 le vamos a Dar un margin bottom cero ahí está ahí está justito me gusta y a esto le vamos a dar un justify content SP creo que

sería la mejor opción y ahí está no Sí ahí nos quedó ahí me gusta mucho más entonces por un lado tenemos esta sección ven que tenemos el se adapta diferentes dispositivos porque fíjense acá está toda la magia lo que venimos haciendo tenemos esto Uy nos dejó de funcionar el menú Ah Ya sé que pasa Ya sé que pasa lo que pasa es que Tenemos a todo lo demás por sobre encima es decir esto que está acá se está desplazando pero tiene por sobre encima fíjense esto miren vamos a inspeccionar vamos a ponerlo abajo y fíjense

que el menú el hadad perdón el nav está acá fíjense le damos clic acá y el nav está está cubriéndolo ven está acá ahora Lo pueden ver fíjense ven cómo va apareciendo pero como tenemos el Z Index no se puede ver bien entonces lo que tenemos que hacer No es darle os1 es Darle un Z Index 2 para que sí cubra Okay pero al header darle un Pos relative y darle un Z Index 4 por ahí y ahora sí quizás darle un men1 creo entonces de esta forma ahora sí no era necesario men1 y acá

le damos 10 porque está bueno ir de 10 en 10 eso lo uso yo por lo menos y ahí está ahora sí Sigue apareciendo Menos mal que lo intentamos chequear porque si no se nos iba eh Y esto que está acá lo deberíamos centrar también Vamos a darle un text align Center y ahí se centra el texto también porque no estaba centrado aunque no parezca no estaba centrado y vamos a dar un font size de 20 píxeles por qué no así crece un poquito y ahí está listo ahí tenemos el menú Entonces por un lado

tenemos el menú responsive ven después cuando crecemos el menú se vuelve esto bien después tenemos la sección del perfil Quién es Lucas dalto acá podemos ver quién es Lucas dalto no crecemos un poquito más y esto se va adaptando Perfecto después seguimos bajando y vemos el sección de portafolio cada uno de estos proyectos debería llevarte a algún lugar si quieren lo que pueden hacer poner todo esto dentro de un enlace a de algo después después lo pueden adaptar ahora no te manda a ningún lugar pero lo ideal es que cuando cliques te mande Así que

en vez de ponerlo adentro de un li pueden hacer que el Li esté adentro de una a o al revés que el a esté adentro del Li pero Que lo cubra todo ya lo pueden ir viendo cómo aplicarlo o cómo llevarlo de vuelta con la estructura pero solamente estamos trabajando el diseño para que se entienda bien eh esto crece y se adapta a esta distribución de elementos que es otra distribución de elementos que está buena pero no es la misma y después tenemos esta sección que es como ya la versión más grande la desktop tenemos

este project que sería el principal cuatro Side projects y otro que también Estaría bueno que quedaría como abajo de todo cces esto no está mal está bueno es interesante y siento que muestra un poco las habilidades que ustedes tienen por último ahora tenemos que crear el formulario de contacto o sea tenemos que crear este form de contacto para que cualquier persona persona que nos vea que diga Che Qué buen trabajo que tiene este tipo que nada los pueda contactar a ustedes y mandarles un mensaje así que vamos a crear esa sección Oh miren lo Que

acaba de pasar acaba de aparecer La Barrita de abajo ahora sí del alto solucionó su problemita Perfecto Bueno ahora vamos a hacer la sección de contacto para eso vamos a venir acá y vamos a bajar abajo de todo bajar abajo muy bien de alto igual ojo porque nunca falta el boludo que agarre y diga ay sí porque pensé que ibas a subir abajo Oh Mira la verdad que so re inteligente no sabía pensaste voy a tener que cerrarlo de Vuelta bueno no resolví nada está bien decidir bajar abajo y subir arriba Así que no jodan

Bueno ahora vamos a crear un section que va a tener adentro un form y este form va a comenzar con un h2 que diga contact vamos ahora a poner un div que va a tener la clase rapper Igual vamos a hacer lo mismo vamos a ponerlo por encima y acá el no va a haber ningún div ya vamos a trabajar directamente con los inputs vamos a poner div Class form input Ahí está y esto le vamos a poner La clase form form que sería el elemento form le vamos a poner la clase form Ah ver

va vamos a poner la clase form title form form form input y acá dentro vamos a poner el input o input container vamos a poner el input el input y vamos a poner Label Label y vamos a poner acá Ahí está a esto le vamos a poner type text Play holder John el lab va a tener nombre Nombre nombre y vamos a copiar y pegar esto varias veces apellido vamos a poner mail y acá vamos a poner o mensaje Mensaje Esto va a ser un textarea Esto va a tener un type email mail ahí está

A ver acá tenemos Esto está bien estructurado Esto está perfecto ahora vamos a darle estilo en nuestro css vamos a venir abajo de todo contact section y vamos a arrancar vamos a agarrar el form Vamos a darle un min hte 100 View por hte creo que deberíamos darle un No no vamos a darle Vamos a darle un mínimo de 50 View por porque no creo que necesite tanto espacio el Formulario Así que vamos a dejarle este mínimo Vamos a darle lo que sí un display Flex Flex Direction column y un justify content Space Ahí va

así se se queda de esta forma o no vamos a darle un Center Center Ahí va para que estén centrados ahí va contacto y están bien centrados Vamos a Ahora sí el form form Vamos a darle un un Flex de uno para que crezca a lo largo Ahí estamos no no le vamos a dar un Flex 1 no me interesa que tenga un Flex 1 no sí sí va a tener esto Y va a tener un va a adaptarse al contenido Mejor dicho vamos a hacer así vamos a darle un background y el background va

a ser de este color me gusta que tenga el color de de esto pero creo que deberíamos cambiar el color para que no se pegue mucho a esto o no vamos a darle background y simplemente vamos a agarrar form input container input y ahora vamos a venir acá y darle a esto y vamos a darle el tiro acá de última Vamos a darle un Wi 100% Ahí va y Acá también Vamos a darle al textarea Vamos a darle is input Y textarea ambos Ahí está y nos faltó el botón y Esto va a ser un

botón va a tener un input type submit para mandar el formulario Acá está Vamos a darle zoom padding de 12 píxeles también está bien acá font size de 16 píxeles creo que debería tener el padding va a ser de seis mejor porque creo que 12 es medio guaso el form form va a tener un padding también de 12 píxeles siento que es muy bruto si no y Van a tener un margin de cuatro píxeles y van a tener un background color o un Border no y cómo lo vamos a diferenciar simple Box Shadow 0 píxeles

0 píxeles 9 píxeles 00 3 como le dimos a los otros elementos tanto que sea do dos por ejemplo y acá un cuatro entonces ahí se va a notar como más abajo lo ven Lo que sí Quizá el padding de arriba lo daría más como nu píxeles tenemos más pading arriba que a los costados y acá podemos escribir sin problema ahora sí vamos a Darle su respectivo texto th J your mail @example.com y acá en el Player puede ser el mensaje your message entonces ahí ya le deja el mensaje y ahí tenemos el Play holder

bueno est es la verdad que es un formulario bastante simple que igual deberíamos limitarlo o sea deberíamos ponerle que tenga un Max with Vamos a darle que sea de 600 píxeles acá a items Center y de esta forma lo tenemos igual de entrado es lo mismo que el margin auto pero también lo hace con El contacto y ahora podemos permitir estirarnos esto lo que se nos dé la gana entonces le damos un Max wid 600 píxeles pero le damos un wid del 100% Entonces ven esto se va a adaptar como máximo Hasta eso entonces se

adapta lo que se tiene que adaptar pero tiene un Max wid correspondiente vamos a agrandarlo un poco porque ahora Necesitamos verlo más grande no estamos mal está bien Esto me gusta como viene quedando y ya está tenemos esto listo al textarea vamos a Agarrar específicamente el textarea form input container textarea Vamos a darle el resize none para que no no se no se rese para ningún lado le vamos a dar de 90 Ahí está para que sea un poquito más alto y se note creo que se le dar 120 me gusta más 120 y va

a tener un font family inedit Entonces de esa forma va a heredar la tipografía es decir ese Monster rat y como ya saben si no le damos Monster rat tiene la tipografía monoespaciada que viene por defecto Así Que ahora le estamos dando esta Y por último vamos a agarrar al botón form input container input type submit y vamos a darle un padding 12 píxeles Ahí va el padding 12 píxeles me parece mejor vamos a darle un color del color del fondo con que deberíamos darle Ahí está y un color rojo de color blanco perdón y

tenemos el botoncito de enviar Es más podríamos darle hasta un 48e Ahí está sí no me disgusta la verdad es un formulario bastante simple y nos quedó Le podríamos dar un min ha de 60 no ahí está y acá le podríamos en vez de darle Flex 1 podemos sacar el Flex 1 y además está todo centrado así que yo diría que está bien Esto sí está bastante bien lo que sí haría yo sería darle a esto padding 40 píxeles y cero para que no tenga los costados pero arriba y abajo sí tenga algo para que

nada tenga una separación no ahí en vez de darle 40 quizás le podría dar 30 por ejemplo ahí estaría mejor sí ahí estaría un poco Mejor ahí va ahora vamos a agarrar las media queries contact queries y lo mismo vamos a enfocarnos en el contenedor Vamos a darle container name form container type inline size Ahí va container form me wid 600 píxeles que serían ya lo habíamos calculado antes no serían más o menos 50 y pico de Rem cuánto serían 56.25 Rem ahí abrimos y comenzamos vamos a agarrar el form form Ah pero a esto

le deberíamos dar directamente un display Flex claro Ah Ahora entiendo Está muy bien lo hicimos la hicimos Muy bien gente la hicimos muy bien Vamos vamos a aplicar Algo vamos a darle display grid ahí tenemos esto con display grid parece que no hay ningún cambio Pero porque todavía no tenemos definidas las columnas pero ahora podríamos tranquilamente venir acá y acá darle form form grid template column un frr un frr y fíjense esto cuando lo estiramos por encima de 600 aparece así pero Esperen porque ahora viene la magia que lo que nos va a gustar a

todos Ahora lo que podemos hacer a esto es hacer lo siguiente es poner grid template áreas y acá poner name Last name abajo poner email email y abajo poner message lo que estoy haciendo No sé si si se están dando cuenta Estoy aplicando todas las técnicas que conocemos para obviamente esto lo podríamos hacer de una sola forma con una sola técnica pero siento que está bueno no aplicar todo lo que Aprendimos en un solo apartado del curso para sacarle más provecho ahora venimos acá abajo y por ejemplo seleccion amos el form input container input First

Child y le asignamos el grid área y le damos name hacemos lo mismo con todos acá damos Child 2 acá damos el Child 3 este sería Last name este sería email aunque esto no sería así en realidad de hecho ahora que me estoy poniendo a pensar ni siquiera se lo tenemos que dar a los inputs porque esto se lo tenemos Que dar al contenedor de input qué que soy Ahí va y ahora sí ahí va Ahora lo único que tenemos que hacer es dejar un Gap de 12 píxeles que es el que venimos dejando a

lo largo de todo el curso y ahí está en acá tenemos este formulario y cuando lo agrandamos lo tenemos así fíjense qu simple que es lo único tenemos que crear un espacio más para el botón Así que acá tenemos que poner Button Button Button Button Ven y ahora abajo de todo al botón al quinto Le damos buton y ahí estaría estirado completamente y el padding de los inputs directamente en vez de ser de nu píxeles se píxeles va a ser todo nueve píxeles a ver qué tal Ahí Ah Ahí está mucho mejor me gusta más

al contact le vamos a cambiar el texto lo único form no vamos a poner form h2 que es el único que tiene y vamos a darle igual le habíamos puesto algo no form title vamos a usar la clase que le dimos font size 3 Rem después igual podríamos retocarlo para Que tenga otro tamaño 2.6 Remo creo que es bastante grande si no 2.4 podemos darle y lo que sí me gustaría hacer es acá quizás podemos cambiar el estilo no podemos hacer que tenga otro otro no vamos a dejarlo así Porque podríamos rebuscar noos las pero

yo creo que Así estaría bien Lo único que si será bueno que hagamos a ver qué opinan es agarrar al form form y darle background color y le damos este que está acá se pondría de este color que no está bueno pero le Bajamos toda la opacidad O sea le damos de opacidad por ejemplo 33 y que quede como un contenedor que va a tener un padding de 30 píxeles que va a tener un Border 12 píxeles Por ejemplo Border radius 12 píxeles y hasta puede tener un degradé a ver si lo podemos lograr linear

gradient y terminamos con uno que sea un poquito más ahí y a este lo aumentamos a cuat a ver ahí cómo queda lineal gradient Uy algo pasó Ah porque sería background imagen Ahí está es como Que arranca clarito y termina más oscuro a ver si lo hacemos más clarito todavía ahí está ven como que arranca de un color y termina de otro es más podemos darle ya que estamos radial sí no o o lo hacemos al revés a ver ponemos este acá y el otro lo ponemos ahí a mí me gusta más al centro está

más clarito y a los bordes está más oscuro pero lo hacemos con 33 Ahí quedó y acá le damos si le damos 00 quedará muy mal Sí no queda bastante mal parece casi transparente Así que podemos darle 06 a ver y si le damos un Box Shadow cero píxeles cero píxeles 12 píxeles a ver si le damos este Box Shadow Qué pasa 40 creo que ya ahí quedó no no C3 Ya es demasiado no s no sé si para del fondo no está mal ahí lo podemos dejar ahí que quede ahí no mantiene la estética

eso es lo único que no me gusta Así que vamos a agarrar los items de acá arriba el portafolio project y darle un Border radius de 8 píxeles así todos tienen un bordecito Ven el borde que tiene y ahora sí Todo tiene bordes está más adaptado Porque si algunas cosas tienen borde y otras no es medio raro Ahora como todo tiene bordes safa Y esto no está mal la verdad que no está mal vamos a agarrar de la misma forma a esto vamos a seleccionar de la misma forma Vamos a darle un Box Shadow cero

para que no tenga Box Shadow o sea ahí no tienen ahí sí lo necesita el box Shadow para separarse del fondo pero acá ya no lo necesita el box Shadow Ah ya Solamente con eso me gustó mucho más ahora si se la quieren vivir pueden darle por ejemplo un background color transparente y darle un Border dos pixeles solid y le dan por ejemplo el borde no me voy a meter tampoco en esto vamos a dejarlo ahí y ahí quedó no no está tan mal Lo que sí puedo hacer es darle un Border radius cuatro píxeles

así está un poco más redondito a me gusta un poquito más Listo Ya está bueno ahora tenemos simplemente que hacer una Última cosa que es el tema del footer y esto lo hacemos super rápido acá ponemos contact ends y ahora agarramos el foter y footer se venimos abajo de todo y creamos el footer Ada 13 copyright Por qué el tipo en la página no tenía sentido viste el tipo le ponía el logo de Ada 13 y y y ponía era un portafolio propio viste y abajo le ponía Ada 13 copyright nada que ver bueno esto

vamos a agarrarlo vamos a agarrar la sección foter y vamos a darle padding 60 píxeles Textal in Center background color le vamos a dar este azulcito y le vamos a dar color blanco con d font size 22 píxeles a esto lo vamos a envolver en un strong nos interesa que el L 13 se resalte y ahí quedó acá lógicamente el footer no se debería hacer así pero ya hicimos un footer antes así que ahora ya los dejo a ustedes para que hagan el footer que más les guste lo que sí haría nada más sería agarrar

el form form y darle un margin bottom de por lo menos 30 píxeles para que se separe un poquito más de abajo porque siento que si no está muy pegado ahí me gusta un poco más como está Yo igual Es verdad que quizás le habría puesto otro estilo siento que el blanco no me gusta mucho va a ser un blanco pero va a ser un blanco con d ya está gente lo logramos creamos terrible página web que se adapta a diferentes dispositivos móviles esto ven se encoge y as 100 en dispositivos móviles se ve de

madre en nuesta Sección esto se Agranda ven y cuando acá crece no le pasa nada se puede seguir viendo pero acá ya toma otra forma el formulario Ven y lo ponemos en pantalla completa y ya tenemos nuestra página web completamente terminada les pongo un reto y es agarrar esta caja que está acá y darle un estilo parecido al que le dimos acá Así mantenemos un poco la estética de este fondo y las cajitas con blanco el background como tal es de este color un azulcito Claro pero acá tenemos una caja Blanca entonces intenten hacer lo

mismo acá lo único que tenemos que hacer ahora es venir a cada una de estas secciones y ponerle un ID por ejemplo ID form acá vamos a venir acá y le ponemos ID portfolio seguimos subiendo y acá le vamos a poner a esta sección ID profile ya no necesitamos más nada acá lo único en vez del hashtag ponemos hashtag profile acá ponemos hashtag portfolio acá ponemos hashtag contact Ah le pusimos ID form Vamos a ponerle contact Ahí está entonces entramos a contact y ahí nos baja acá después otra cosa que pueden hacer por ejemplo Es

que esto se quede sticky Entonces ustedes bajan y el formulario mientras ustedes van bajando toma Ahora cuando veamos sobre animaciones que es lo próximo que vamos a ver este es el proyecto final ya está ya que dos si lo lograron conmigo los recontra felicito porque ahora fíjense que tiene una página web que los manda a diferentes lugares de la página de hecho Para finalizar y lo último que vamos a hacer es agregarle a el body una propiedad que la vamos a ver más adelante igual pero no ya lo pueden ver ahora si quieren scroll behavior

y le vamos a dar en Smooth que esto básicamente hace que el desplazamiento sea más lento Ven ahora se ve que le chupan huevo así que se lo vamos a dar a todo Ahí va y ahora sí debería ven el desplazamiento es más lento Ahí está tiene un desplazamiento más lento es Como que se suaviza es un desplazamiento más más suave no es tan bruto Entonces se se nota que está bajando Ven y ahora parece como que eh el eh No baja tan rápido tan bruto baja suavecito Ven vamos a ver ahora lo que vienen

siendo las animaciones y después de animaciones vamos a venir a esta página y mejorarla Pero esto cuenta como proyecto individual estoy emocionado porque Uf Ay estamos terminando estamos cerrando estamos por cerrar el curso Así que Vamos ahora mismo a la sección de animaciones y Comencemos bueno gente les doy la bienvenida a la sección de animaciones que esta sección lógicamente es una sección que tiene mucha historia en el Canal de hecho si se acuerdan hace un tiempo atrás bueno no me vanan acordar la promesa que hice animaciones animaciones en C Nos pasamos por una banda Nos

pasamos por una banda pero se viene la sección de animaciones para arrancar antes de comenzar con las animaciones lo que me interesa es que veamos hagamos un repaso muy rápido de transiciones supónganse que tienen una caja una simple caja vamos a a la caja darle un margin 20 píxeles un background blanco Okay y un padding de 40 píxeles Ahí está Esta es toda la caja le vamos a dar un Border tres píxeles solid y ahí está y adentro De esta caja vamos a poner otro di que va a ser el box barra Esto va a

ser como la barra más fácil Vamos a ponerle barra en español barra Okay va a ser Quien tenga el padding de 40 píxeles a Barra le vamos a dar un padding de cuatro píxeles Ahí está y a Barra le vamos a dar un padding de 40 píxeles y un background color 48e tenemos esta barra que está acá vamos a darle un borde radius de 30 píxeles ahí se pone así y al acá le vamos a dar un borde radius de 38 píxeles Ahí está más o menos entra a ver creo que debería ser de menos

de 34 píxeles 36 píxeles Ahí está más o menos Ahí la la bordea completamente acá el padding en vez de ser de cuatro vamos a hacer que sea de seis así hay bastante más espacio y acá en vez de ser de 36 Debería ser de 39 creo Ahora sí Ahora lo que vamos a hacer va a ser el borde en vez de ser tres píxeles solid va a ser de cuatro píxeles y va a ser 48 y acá tenemos como una barra de hecho esto es Interesante porque si le damos por ejemplo acá un wid

del 60 por esto baja Ven y es como que la barra no no está del todo llena Entonces vamos a hacer una animación ahora vamos a hacer una transición que la transición va a ser en over no Entonces vamos a poner la barra va a ser por defecto va a tener un wiet del 10% Ahí está y vamos a agarrar a la barra y en over Okay de hecho en AC mientras se la está apretando va a tener un wid del 100% Entonces apretamos Cuando apretamos la barra Okay la barra tiene un wid del 100%

Ahí está le vamos a dar a los divs un Box sizing Border Box así tienen el tamaño correspondiente pero vamos a hacer que haya una transición transition with le vamos a dar 2 segundos entonces apretamos y tarda 2 segundos en llenarse vamos a hacer que la animación sea linear transition y vamos a hacer que sea linear Entonces de esa forma ven va de forma lineal Ahí está Y esto es un Efecto que tenemos como ven tarda lo mismo en ir que en volver pero muchas veces vamos a querer hacer que para volver tarde menos Qué

vamos a hacer entonces Bueno vamos a venir acá y poner que la transición la duración transition duration en vez de durar 2 segundos va a durar un segundo entonces Este es un truco interesante Por qué Porque la transición arranca eh más rápido pero vuelve más lento ven Entonces se llena más rápido pero vuelve más lento Entonces esto se puede hacer por qué Porque estamos diciendo que cuando apretemos va a ir va en un segundo se va a completar o sea la transición en un segundo se completa ven cuando cuando tenemos en AC cuando volvemos tarda

un poco más esto es por la transition duration Okay que podemos hacer que por ejemplo acá t 4 segundos y en un segundo se llenó y tarda 4 segundos en volver o podemos hacer que sea al revés un segundo en ir y 4 segundos en volver Entonces tarda un montón pero vuelve rápido ven entonces Este es un truco bastante interesante para hacer que o la transición de ida sea más rápida y de vuelta sea más lenta o que de ida sea más lenta y de vuelta sea más rápida esto es interesante porque nos sirve mucho

por ejemplo para botones Cuando tenemos un botón o algún elemento que queremos que se muestre una transición en over que quede muy linda lo podemos hacer y a veces queremos que cuando Sacamos el Mouse de encima o dejamos de hacer esa acción que se vaya más rápido una transición dura 2 segundos pero solamente queremos que dure 2 segundos cuando estamos en ese estado cuando estamos volviendo por ahí creemos que directamente no haya nada Por qué Porque para pasar de estado de barra a estado de over de perdón de active tarda un segundo pero cuando Ya

dejamos de cliquear está pasando en estado de active a estado de barra Entonces si lo Ponemos acá estamos definiendo que la duración va a ser de cuatro Entonces eso es lo que estamos haciendo está yendo más lento volviendo más rápido entienden o sea Mientras esté en AC la transición va a durar 4 segundos mientras no est AC va a durar uno esa es una de las cosas que está bueno que repasemos de transi que no se las había hablado antes pero hasta ahora más o menos ya sabemos cómo es esto de transiciones también les muestro

esta barra porque hay un truco Interesante que es ustedes a veces tienen una barra de carga y a veces la barra de carga Está bueno que en vez de llenarse así se llene como por barritas no Cómo podemos hacer eso bueno está la función steps okay Que steps básicamente nos dice En cuántos pasos querés que se complete la animación entonces reemplazamos linear por steps ahí está entonces ahora apretamos acá Ven y la transición hace 10 pasos hasta completarse Ven y ahí vuelve más rápido Vamos a hacer que en vez de tardar 4 segundos tarde dos

y para volver tarde punto se entonces 1 2 3 4 5 6 7 8 9 10 vamos a hacerlo más lento porque tardamos mals en contarlo 1 2 3 4 5 6 7 8 9 10 Perdón vamos de vuelta porque lo hice mal 1 2 3 4 5 6 7 8 9 10 ya está tardó 10 pasos en completarse también podemos hacer que tarde por ejemplo que tarde seis 1 2 3 4 5 6 eso es lo que estamos haciendo cuando usamos la función steps le está estamos diciendo Ok La transición se va a hacer

en seis partes vamos a separar la transición en seis estados diferentes Ok y cada estado va a representar una parte nueva de hecho fíjense esto Ahora la barra puede tener un background color rojo f44 por ejemplo f33 también podemos venir acá y poner color pun 6 segundos steps y también le damos se Ah va entonces ahora son dos los bueno igual esto no porque es background color background color y ahí está Ven ahora sí miren esto Ven la transición se completa en este timing es más podemos agarrar el color ahora no podemos venir acá y

agarrar decimos Box has barra over en estado de over Ahí va y ahora el box va a tener un Border en estado de over no perdón en estado de AC el Border va a tener cuatro píxeles solid y 4 perdón f33 el Border hace lo mismo pero al Border le tendríamos que dar lo mismo la duración de transición entonces agarramos esto y por defecto el box Así que básicamente Tenemos que agarrar la transición y dársela acá arriba pero va a tener solo del background color Ah perdón del Border quise decir Border Ahí está entonces ahora

fíjense que todo cambia en seis pasos Igualmente esto Debería ser porque de ida era 3 segundos no 3 segundos Ahí está acá debería durar menos transition duration pun 6 segundos de esta forma ven tenemos todo esto miren eh Ah es al revés acá Perdón acá Tiene punto 6 segundos y acá Tiene 3 Segundos tres Ahí está ahora sí ven apretamos y ahí va y ahí tenemos es una barra que va cambiando completamente el color esto es increíble Ahí va también podemos hacer que en vez de ser en seis como digo sean 12 Por ejemplo ve

a todos le ponemos 12 Ahí está y ahí estamos ven La Barra carga más rápido esto está bueno porque lo que hacemos con esto es pueden verlo como los fps En caso de que pongan un segundo si ustedes ponen por ejemplo que la transición se completa en Un segundo va a tener 12 fotogramas por segundo si le ponen 30 en un segundo va a tener 30 fotogramas Bueno ahora vamos a ponerle 30 un segundo y acá vamos a ponerle un segundo Entonces fíjense esto apretamos y la transición en un segundo va a volver y se

completa entonces volvemos y 30 fotogramas en un segundo ven esto es la velocidad por ejemplo a la que exportan las películas normalmente en 30 o en 24 pero bueno en vuelve y en un segundo 30 fotogramas Quieren que vaya fluido como un juego bueno los juegos tienen que tener un mínimo de 60 fps entonces un juego para que se vea bien tiene 60 60 fps en un segundo Así que vamos a ver vamos y cuando se completa se completa lento va medio tildado el juego pero cuando volvemos pum Así se ve un juego Ven ahora

si no quieren que tenga los steps directamente se lo sacan Okay le sacan los steps Y de esa forma la transición se hace lo más natural posible ven Literalmente con los fps máximo que tenga disponible para para actuar y ahí está y nada de esa forma hicimos un breve repaso sobre las transiciones aunque nos falta la última que también lo que puede pasar Es que hay personas que por ejemplo tienen efectos de epilepsia o tienen muchos problemas y que no pueden como que les duele la cabeza o les pasan cosas cuando ven que hay algo

que hace muchas animaciones ent supónganse que por ejemplo este efecto Es un efecto que una persona que tiene problemas eh de algún tipo que no puede ver animaciones porque les molestan o les incomodan o demás Chrome te permite tener una opción que te dice ey queres desactivar las animaciones o queres desactivar la interacción no sé cómo es la opción qué hacemos Bueno podemos poner un media queries y ponemos media y la condición va a ser prefers reduced motion y esto significa hay una configuración en Google Chrome que se Trata de reducir la animación no se

llama así prefers reduced motion si ustedes van a Chrome y ponen que por ejemplo quieren hacer que los popups estén bloqueados lo ponen si quieren hacer que no no tengan activado javascript se Desactiva javascript Para eso hay nombres bueno el nombre para las personas que configuran su Chrome para no tener tantas animaciones usan est entonces Chrome lo ponen reduce Ahí va entonces Si una persona tiene reduce en Las animaciones significa que tiene problemas de accesibilidad y no quiere ver tantas animaciones qué hacemos venimos acá por ejemplo y podemos hacer que el animación tarde más entonces

por ejemplo agarramos estos ven agarramos todos por ejemplo y por ejemplo no le ponemos a la barra y al Box un transition with 5 segundos Border 5 segundos background color 5 segundos y de esa forma en vez de que la animación tarde un segundo o 3 segundos tarda cco Entonces las personas que tienen activada esta opción pueden ver la animación más lenta Yo no lo tengo activado pero si lo activara veríamos que la animación se hace mucho más lenta o directamente decirle transition no Entonces de esa forma ven directamente es como que no no no

hay transición en este caso no lo tenemos el efecto no lo vamos a ver pero podemos desactivar las transiciones o también desactivar las animaciones en un futuro venimos acá y Ponemos Animation y no Entonces se desactivan las animaciones Eso está bueno tienen que saber configurarlo porque si es un cambio bruto eh Por ahí el usuario directamente vería algo así miren vería algo de esta forma ven entonces por ahí es peor ver esto que ver la transición entonces eh tienen que tener mucho cuidado cuando lo hagan pero está bueno considerarlo porque de esta forma de una

forma tan simple como esta están haciendo accesible una página que Tiene muchas animaciones y todo no hace falta que desactiven todas las animaciones pero por ahí las que son más las que generan más distracción o más impacto visual o que son más brutas por ahí desactivarlas no estaría mal para que las personas que necesitan o tienen problemas de accesibilidad lo pueden hacer también así que nada Eso está bueno para que lo sepan Así que vamos en este caso dejarlo así y de esta forma tan simple vamos a ya tenemos la Animación totalmente completa Eso es

todo el repaso que teníamos que ver y ahora creo y Considero que ya estamos listos para meternos de una vez por todas en el mundo de las animaciones así que bueno No hablemos más vamos con animaciones Bueno ahora vamos a comenzar con la sección de animaciones para arrancar Qué es una animación Porque todo lo damos por sentado Pero qué es una animación hay mucha gente que no realmente no sabe definirla Pero Básicamente una animación es un proceso que quiere generar una ilusión de movimiento Eso es todo es agarrar una imagen o un objeto inanimado Y

animarlo entonces en el contexto de ccs una animación lo que hace es eso es te permite una transición como si fuera una transición entre un estado y otro estado final y en el medio pueden pasar más cosas Pero eso es una animación tenemos muchas muchas diferencias con las transiciones que ahora las vamos a ver Pero una animación es eso es agarrar un elemento Y hacer que vaya cambiando de de Estado a lo largo del tiempo ahora por qué usaríamos animaciones bueno primero nos da feedback visual porque mejoras la interacción con el usuario Cuando haces efectivos

o cosas con botones y demás también puedes crear narrativas visuales para crear o contar cosas que guían al usuario a través de la página en el desarrollo de interfaces es muy usado no y además la gente que Trabaja en experiencia de usuario también trabaja mucho con animaciones y muchos también lo que hacen es utilizar animaciones para bueno utilizar mientras también se cargan recursos no entonces mejora como la experiencia de esperar que un recurso cargue ahora adto por qué no usas transiciones si para eso son las transiciones bueno a ver hay una diferencia entre animaciones y

transiciones por un lado las transiciones básicamente nos permiten Cambiar entre Estados si yo por ejemplo agarro y pongo el mouse encima entonces una animación es distinta porque la transición solamente se ejecuta cuando nosotros por ejemplo ponemos el mouse encima o cuando clique un elemento las transiciones necesitan un evento disparador necesitan algo que les permita decir que están en un estado y que ahora pasaron a otro estado y se transicion entre esos dos estados mientras que las animaciones las podemos Ejecutar cuando querramos es más las animaciones pueden ser automáticas incluso o sea se Ejecutan de forma

automática otra cosa es que también podemos controlar la secuencia con las transiciones solamente decimos vas a pasar de este estado a este estado de color azul a rojo y se van transicionando pero con animaciones podemos decirle Vas a pasar por rojo después vas a ir hasta verde después vas a llegar a azul y después vas a terminar En no sé amarillo podemos hacer que tenga más de un inicio y un final y pasen más cosas en el medio con la transon decimos vas de acá acá Así mientras que con las animaciones podemos hacer más cosas

podemos cambiarle más veces las propiedades o tenemos más control sobre lo que pasa y también el tema de la repetición o sea una animación la podemos repetir la cantidad de veces que querramos hasta infinito Si queremos una transición no solamente se Repite una vez y es de un estado a otro si ponemos el mouse encima es una transición lo sacamos tenés otra transición y así las transiciones solamente son entre cambios de estados Así es como creamos una animación primero ponemos la regla K frames y definimos el nombre de la animación después ponemos el from y

el to en el from van a estar todas las propiedades que va a tener el elemento cuando inició la transición y en el to van a tener Todas las propiedades que va a tener el elemento cuando termina la animación en vez de from y to también podemos usar porcentajes también Podemos agregar cosas en el medio Como agregarle qué va a pasar a la mitad de camino de la animación y muchas cosas más nosotros por ejemplo tenemos esto que es lo que teníamos en el ejercicio de antes no si hacemos una transición apretamos y esto crece

hasta acá está todo bien pero fíjense qué pasa si nosotros aplicamos Una animación vamos a venir abajo de todo vamos a sacarle la transición vamos a sacar el ac vamos a sacar el ac también y acá ya dejó de pasar todo vamos a sacar esto que está acá también esto por ahora no lo vamos a usar Está bueno que lo tengan en cuenta pero ahora siento que distrae un poco ténganlo en cuenta pero ahora por ahí dejemoslo de lado por este momento ya está no pasa absolutamente nada bueno para eso venimos acá y vamos a

crear la animación Porque lo bueno de las animaciones que nosotros las creamos una vez le damos el nombre y ahora podemos modificar la animación Y si tenemos 10 Element con la misma animación la animación va a cambiar para los 10 elementos Eso está bueno arrancamos poniendo K frames y acá en K frames iniciamos la animación acá tenemos que poner el nombre yo por ejemplo la animación puede ser llenar barra Este es el nombre que le vamos a dar llenar barra y después También Tenemos por ejemplo el from que es todo lo que va a tener

el elemento cuando inicie Y tenemos el two que es todo lo que va a tener el elemento cuando termine entes acá por ejemplo le vamos a dar en with 0% y acá vamos a dar por ejemplo el Wi 100% Entonces el elemento va a arrancar con 0% y va a terminar con 100% ya tenemos la animación creada Felicidades crearon su primera animación Ahora nos falta lo siguiente que es necesitamos decirle al elemento que va a Tener la animación entonces venimos a Barra Animation name vas a tener una animación que el nombre de la animación se

llama llenar barra no Y hasta acá No pasa nada porque ya está no sucedió nada Por qué Porque para que una transición funcione necesitamos como mínimo dos propiedades el nombre de la animación y la duración y ahora ponemos Animation duration que va a ser por ejemplo 2 segundos y ahí ni bien carga sucede la animación volvemos a cargar esto y ahí Se ejecuta transiciones por defecto se repiten solo una vez y es ni bien carga elemento y carga la transición cuando ya todo el código de la página cargó o cuando este elemento cargó ven La

transición se ejecuta solamente se ejecuta una sola vez acá por ejemplo le puedo dar 3 segundos Ven y ahí está perfecto ahora si quieren hacer por ejemplo Vamos a ponerle 5 segundos si quieren hacer que la transición tarde más en iniciar pueden usar la propiedad Animation delay Animation delay nos dice ey como la transición vieron el delay de la transición es igual cuánto vas a tardar para empezar y yo le doy por ejemplo los 3 segundos y actualizo y 1 dos 3 y Ah ah cuento como el orta vamos de vuelta un 2s tres y

ahí inicia ven ahí está entonces tardó 3 segundos en comenzar eso lo hacemos con el delay Estamos dándole un delay pero después tenemos otro problema y es que muchas veces si hacemos una animación es para Que el elemento pase de un estado a otro y ya quede en ese estado Yo por ejemplo quiero que la barra ni bien arranque ya quede cargada porque fíjense que acá no queda vamos a hacer que tarde un segundo en iniciar yo por ejemplo ahora van a ver que va a empezar yo quiero que esto ya se quede lleno porque

yo es una barra de carga y quiero que la barra de carga ya quede llena ya está que quede ahí Cómo puedo hacer para que esta barra de carga se quede como está en este último Estado bueno para eso usamos otra propiedad que es Animation fill Mode que es cómo vamos a rellenar la propiedad Porque O sea qué hacemos ahora por un lado tenemos backwards vas a quedarte como estabas antes de iniciar es decir en el estado que tenías antes es como te vas a quedar vamos a hacer que el background color sea rojo f33

y que termine en azul background color azul Si yo por ejemplo le doy backwards fíjense que ya no no fue necesario que le dé Porque el background color por defecto es 48e Entonces al decir backwards le estamos diciendo vas a quedarte Okay como estabas antes de la animación Entonces vas a ir de nada al azulcito que tenías y se queda azul yo por ejemplo acá le voy a dar background color red Ahí está si nosotros le damos por defecto en backwards como estaba vamos a seguir dejándolo en backwards ven vuelve azul Si yo le doy

N nada es como si pusiéramos backwards si yo le doy en B ahí fíjense que ya arranca en rojo ojo porque a pesar de que le dimos un color azul la animación lo que esto es interesante porque lo que hace fíjense que ya se queda así se queda llena no cambia hay una diferencia entre Bot y forwards ahora vamos a mostrar el último valor que es forwards que Forward lo que hace es arranca así con todas las propiedades que le dimos acá tarda un Segundo en iniciar Vamos a ponerle 2 segundos y después cambia su

propiedad fíjense que arranca azul porque acá le dijimos que tiene que ser azul después se inicia en rojo porque cuando la animación arrancó recién ahí se puso en rojo y después de eso llega al 100% si yo acá por ejemplo le doy 10% para que lo notemos ven que acá se queda vacío arranca en rojo y termina en rojo No ahora si yo le doy Bot ahí lo que hace es ya arranca igual 10% Quizá lo mismo Que 30 ahí va Vamos a iniciarla de vuelta ahí ya arranca así si yo le doy de vuelta

forwards fíjense que ya arranca en azul pero tarda en obtener este estado inicial Por qué Porque cuando el animación arranca recién ahí o sea 2 segundos después de que se cargue el elemento va a tener un Wi del 30% y un background color de eh rojo pero si yo le doy en B Aunque la animación no haya iniciado ya se queda con las idades que le dimos acá Entonces esto es Buenísimo Porque no tenemos que esperar a que la animación inicie no la animación ya arranca con esto es como si en vez de darle esto

al elemento directamente lo tuviera acá arriba ven es como si tuviera el color acá y el wiet lo tuviera acá entonces arranca así ven yo lo saco esto y arranca así Ven y después la animación se completa es lo mismo Qué hace Boot Boot dice Okay vamos a agarrar las propiedades que tiene el inicio de la animación y se las vamos a Dar al elemento o sea las propiedades del elemento van a ser las que tien la animación en su inicio Eso es todo lo que está diciendo vamos a dejarlas acá Ahí está eso es

lo que hace B vamos a actualizar arranca así pero termina así O sea como la animación se quedó termina Ya termina como se quedó Entonces ya ahora sí tenemos el elemento que pasó de un estado inicial a un estado final pero si le damos en forwards va a arrancar como lo definimos acá cuando la Animación inicie se va a poner con estas propiedades y va a terminar con estas O sea que va a tener tres cambios Perdón va a tener dos cambios el primer cambio es de acá acá y el segundo cambio es de acá

a acá mientras que con bow va a tener solamente un cambio que es de acá acá lo entienden fíjense vamos vamos de vuelta con bow tiene solamente un cambio de este estado al estado final mientras que con forwards tiene un cambio de este estado a este estado y de este estado al Final por eso esa es la diferencia principal entre forwards y b Pero bueno normalmente todos usamos B porque es como el el más lindo por defecto y el que más sentido tiene de usar normalmente porque si no sería darle las mismas propiedades que tiene

acá acá Entonces es raro usar forw salvo casos específicos Pero bueno le podemos dar este uso no hay problema y otra cosa interesante es que al delay le podemos dar números negativos Esto no se los Enseña a nadie miren si ponemos menos do Qué significa esto que la animación ya habrá arrancado acá le vamos a dar vamos a sacarle esto y vamos a poner 0% si le sacamos el delay arranca desde acá e inicia pero si le ponemos delay menos un segundo vas a arrancar como si la animación ya hubiera iniciado hace un segundo entonces

actualizamos Y es es eso es como si la animación ya hubiera empezado hace un segundo si por ejemplo acá le vamos a dar en Animation timing Function le vamos a dar lineal porque si no fíjense que así así es lineal porque si no es como que tiene la curvita esa que hace que al principio arranque más fuerte y termine más lento bueno las animaciones por defecto son así arrancan rápido y terminan lento pero cuando le damos el linear estamos haciendo que la animación sea igual que sea uniforme que no vaya ni más rápido al principio

ni más lento al final se mantiene igual Entonces ahora lo podemos notar mejor Ven Yo le doy menos un segundo le estoy diciendo es como si la animación hubiera empezado hace un segundo entonces en vez de durar cuatro va a durar tres porque arrancó hace un segundo si le damos dos es como si la animación hubiera arrancado hace 2 segundos si le damos cuatro es como si la animación nunca hubiera existido el Animation delay por defecto viene en cero o sea arranca en el segundo cero y termina en el segundo cuatro si le damos 2

segundos en 2 Segundos inicia Y si le damos menos 2 segundos es inició hace 2 segundos Eso es todo así que está bueno también que lo tengan ahora cómo hago para que la animación se repita más de una vez tenemos otra más que es Animation fíjense todas las Hay un montón Hay un montón pero la que vamos a usar ahora es Animation iteration count que esto es para ver cuántas veces la repetimos acá ya nos salta el primer parámetro que es infinite qué hace infinite básicamente La repite siempre ven V elver tado principal y la

repite vamos a en vez de durar esto que dure le vamos a sacar esta propiedad que es del delay y le vamos a dar al delay y le vamos a dar un segundo y acá le vamos a poner un segundo entonces ahí va tarda un segundo en comenzar pero después no va a tardar un segundo cada vez que arranque no tarda un segundo al principio o sea el delay solamente sirve para la primera vez que se ejecute la animación O sea no Es que siempre va a tardar un segundo ven sino O sea la animación

ya va a tener siempre lo mismo No es que tarda un segundo y cada vez que inicia de vuelta tarda siempre un segundo o sea si se repite 10 veces va a tardar 20 segundos No si se repite una vez tarda 2 segundos uno para arrancar y uno para ejecutarse si se repite 10 veces va a tardar 11 segundos Por qué Porque ni bien carga el elemento espera un segundo y después la hace 10 veces la animación 10 10 10 10 o sea Eso está bueno que lo tengan en cuenta ahora si no queremos que

sea infinite podemos poner un número quiero que te repitas tres veces Entonces se va a repetir solamente tres veces ven una dos tres actualizo y fíjense lo que pasa Vamos a ponerle tres tarda 3 segundos 1 2s 3 y se ejecuta 1 2s 3 Eso es todo lo que acaba de pasar si le decimos que se ejecute dos veces arranca tarda 3 segundos 1 2s 3 y ahí arranca uno dos y no se ejecuta más Entonces ya más o menos vamos comprendiendo cómoo funcionan las animaciones no Entonces es uno que es el valor que viene

por defecto es infinite o es eh cualquier número que ustedes quieran que se ejecute la cantidad de veces que ustedes quieran Yo le voy a dar infinite para que se ejecute siempre ahora además de esto tenemos una propiedad que es bastante interesante que es la dirección porque yo Por ejemplo si hago el over lo que pasa con El over es que el over va y vuelve Si yo por ejemplo hacía que la barra antes se llene cuando ponía cuando le daba click la barra se llenaba cuando sacaba el clic la barra retrocedía entonces acá solamente

se llena pero no retrocede bueno eso lo podemos cambiar si le damos por ejemplo en Animation Direction ven podemos cambiar la dirección le podemos dar por ejemplo en reverse y va de atrás para adelante o sea en vez de ir de adelante para atrás va de atrás para Adelante o sea es como que la animación se ejecuta en reversa arranca acá y termina acá en lugar de arrancar acá y terminar acá o sea es al revés después tenemos otra que es alternate bueno por defecto es normal reverse que es la de atrás para adelante y

después tenemos alternate arranque en Normal y vuelve en revers arranque en Normal y vuelve en r Esto está buenísimo porque esta es una animación que va y que vuelve que va y que vuelve Y es más natural porque no Vuelve a arrancar se entienden no vuelve a arrancar fíjense que yo acá por ejemplo le doy Esto se lo saco este se lo saco por defecto ven ent así ya arranca con el azul que le declaramos acá entonces arranca así y vuelve sube y vuelve sube y vuelve ese es un efecto que está muy bueno y

después tenemos el alternate reverse que es lo mismo pero yo por ejemplo acá le doy que en vez de infinite sea tres veces que se ejecute fíjense que en reverse lo que hace es Vamos a sacarle el vamos a ponerlo ahí Ahí va arranca del final vamos a y vuelve para atrás Ven y ahí se ejecutó tres veces Entonces eso es lo que hizo vamos a sacarle el delay Vamos a ponerle un segundo para que no tarde tanto para tenerlo igual pero que no tarde tanto y es arranca de atrás para adante y se ejecuta

tres veces Entonces si lo lo probamos es una dos tres en cambio Si en vez de poner el alternate reverse ponemos directamente el alternate es de Adelante para el final del final para adelante mientras que si le damos reverse o sea en alternate la primera animación la hace del principio a fin y en reverse la primera animación la hace del final al principio O sea la hace invertida es lo mismo solamente que en alter arranca the from y termina en to y en alternate en alternate reverse arranca en to y termina en from pero el

efecto después de la primera repetición es el mismo casi Solo que van a estar Invertidos los timings se hace infinito pero arranca de atrás para adelante y después ya acá es lo mismo viste Ah vuelve y ya con esto más o menos tenemos todo lo que necesitamos para comenzar a animar elementos ya vamos a ir viendo después tenemos algo que es el Animation Play State por ejemplo Animation Play State a ver si está Play State y por ejemplo acá le podemos dar paused no Entonces se pausa ahí ven se pausa donde yo lo dejé Esto

está bueno porque por Ejemplo podemos venir acá y hacer que si la barra está en un estado de AC se pausa la animación Entonces si tenemos por ejemplo eh apretamos ahí y se pausa soltamos y sigue ven le damos clic al elemento y Mientras tengamos clic se mantiene vamos a solo de vuelta y click y se pauso lo soltamos y tuc sigue la animación Eso está bueno porque esta animación nos permite pausar la si bueno Esto se hace con javascript no Por ejemplo si queremos que cuando le demos Click la animación se pause decimos que

en acp vas a estar pa usada es más la animación por defecto puede estar pausada por ejemplo Animation Play State paused y acá va a estar en runing que es el otro runing es el valor que viene por defecto Entonces le damos acá y por defecto no arranca la animación pero cuando le damos clic arranca ven ese efecto puede hacer es más lo damos ahí y se pausa mientras le demos clic la animación funcione mientras no le demos Clic no funciona normalmente la animación la pausamos cuando le damos click y por defecto está corriendo entonces

ahí funciona como funcionaría por defecto que es no funciona y cuando le damos clic se pausa en no funciona le damos clic y se pausa así que bueno Más o menos vimos todo sobre animaciones ahora en realidad no vimos todo porque nos falta después las animaciones por scroll tenemos que entender Cómo funcionan los rangos y el timeline Pero Bueno ya veremos eso por ahora lo que propongo es para empezar a Porque si vemos todo lo que tiene animaciones de entrada siento que nos vamos a confundir Así que lo que propongo es Qué opinan si vamos

a hacer algunos ejercicios Les propongo que hagamos dos botones animados para que haya dos botones que tengan buenas animaciones no voy a hablar más pero hay efectos muy interesantes que se pueden hacer con los botones y con los textos y demás vamos a La siguiente sección de botones animados buenísimo buenísimo Bueno ahora vamos a hacer dos botones animados para arrancar vamos a hacer una estructura en la que podamos tener dos botones que sean exactamente iguales y con un botón Hagamos una cosa y con otro botón hagamos otra cosa vamos a hacer eso y vamos a

trabajar con el after y con el bfor al fin se acuerdan que les dije que el after y el bfor eran muy usados para hacer animaciones o darles efectos a los Botones yo las cosas que les digo nunca quedan en el aire y todo tiene un motivo entonces lo que vamos a hacer ahora es mostrarles A qué me estaba refiriendo cuando dije que el after y el before eran muy poderosos Porque al fin lo van a entender para comenzar vamos a poner un div que tenga la clase rapper Porque lo vamos a usar para eso

solamente para separar los botones y dos divs con la clase Button container Button y que estos tengan la clase btn y este Btn1 bien acá está entonces ahora copiamos esto y pegamos y acá le ponemos la clase btn2 entonces venimos acá Bueno al Body primero le vamos a dar el margin cero el background color 22 para que tengamos este fondo oscuro ya ya me arrancó a gustar a rapper le vamos a dar display Flex Flex Direction column obviamente hate 80 View por hate justify content space evenly así los tenemos bien centrados y una link items

Center ahí tenemos los botones bien centrados No están centrados del todo para eso deberíamos poner un 100 View por he pero no me interesa eso por ahora porque yo tengo la camarita acá abajo y cualquier cosa quiero asegurarme de que se vean bien los dos botones y no cagarla des Fu Entonces lo voy a tener un poquito más arriba Vamos a agarrar a los butons por defecto darles un padding 40 píxeles creo que no está mal bien Vamos a hacer un pequeño zoom acá 150 Ahí está background color transparent para que Los dos tengan color

transparente y color blanco bien Border radius 6 píxeles ahí va y un letter spacing de tres píxeles por qué no ahí está me gusta mucho vamos a hacer un pequeño zoom perfecto me gustan estos botones Eh ya me vienen igual este borde es una asquerosidad Pero tranquilo que ya lo vamos a sacar vamos a arrancar con este botón con el primero de todos vamos a agarrar el btn1 y a darle estilo para arrancar le vamos a dar un borde de un Pixel solid 48e que es el color que nos gusta a nosotros y vamos a

agarrar el btn1 y vamos a trabajar con el bfor perdón backd no bfor directamente Primero lo primero que se le da al before es el content que aunque sea cero no tenga nada tiene que estar Sí o sí porque si no el bfor no funciona y no se olviden que el bfor tranquilamente puede actuar como un elemento aparte yo por ejemplo le doy un background color 48e y parece que no hay nada pero si le doy un Display block por ejemplo le doy un hate por ejemplo va a ser de 200 View por hate Ahí

estamos notando un cambio teng quedar de 200 igual no 200 200 y un Wi de 200 no lo vamos a ver pero si le damos un position absolute ahora al crear otro contexto ya lo estamos viendo y nos está rompiendo todo es esto que está acá para arrancar tendríamos que hacer que el position absolute sea referente al botón uno entonces a este botón y de hecho a todos porque a todos Los vamos a trabajar de esta forma Así que tendríamos que darle un position relative a todos los botones para que tomen de referencia este elemento

Entonces ahora sí ven tenemos algo mucho más coherente que es esto que está acá y el Wi puede ser del 100% no hace falta que sea tan grande 150 está bien diría yo 1% 120 El problema es que nos está tapando el texto Así que para eso le vamos a dar un Z Index y le decimos Z Index -1 de esta forma ven se pone por Debajo ya van notando lo que queremos hacer pero fíjense qu interesante Porque si al botón a todos los botones no solamente al uno le damos overflow hiden van a ver

que ahora ya no se ve esto ya está tenemos un botón raro no bueno esperen a ver lo que vamos a hacer ahora tenemos que hacer que no se vea mucho así que vamos a darle un margin top 30% y vamos a agarrar al hover vamos a decir que el buton un en hover tenga un before o sea estamos diciendo cuando el Elemento uno se le pase el mouse por encima vamos a acceder a su before y vamos a modificarlo vamos a agarrar todo esto y vamos a modificar primero el top que va a ser

cero después el left que va a ser cero y de esta forma ya a ver no tenemos nada nuevo pero tranquilos porque el top va a ser del men 30% a ver Ahí está no el margin top va a ser del - 10% a ver ahí entra completo bien y ahora vamos a hacer que sea despacito esto Vamos a darle al Sí al before un Transition top pun 6 segundos left pun 6 segundos y margin pun 6 segundos a ver qué pasa Ahí está pero tenemos todavía esto que es medio raro no bord radius 50%

así nos genera este efecto bien no está mal esto que está pasando de que se va muy rápido es por el top y por el Entonces yo lo que recomiendo es sacar el margin top sacar el margin top acá acá sacamos el margin y fíjense Cómo podemos ahorrarnos esto podemos Modificar el top y el left le damos al Top le damos a dar por ejemplo 30% a ver Hacia dónde se va no top vamos a tener que tenga un 50% un 100% el top Ahí va y el left va a tener un 30% a ver

si ahí no se ve y ahí está mucho mejor no ahí va bueno y a la vuelta el top va a tener - 10% como teníamos en el margin Pero ahora con el top va a tener un - 30% por ahí Ahí va y el left un - 10% a ver si esto entra Ahí va falta un poquito igual así que vamos a hacer que el el he en vez el wid en vez de ser 120 que sea de 140 a ver ahí Qué tal Bien y acá va a tener un - 20% mucho mejor

y va a tener un -35 bueno fíjense Qué efecto lindo le acabamos de dar al botón Y esto es un botón animado no es un botón con una animación como tal con un Kame pero es un botón animado ahora vamos a hacer otro botón que va a ser un botón Neón vamos a separarlo los primeros vamos a poner un comentario Bo Neon Button y acá arriba Vamos a poner eh wave Button porque esto es como una ola no es como Que se están rellenando con una ola y vamos a usar los mismos colores vamos a

agarrar el botón dos bt este nos va a costar un poquito más pero lo vamos a hacer Igual primero le vamos a sacar el Border Border no primero Border un Pixel solid Okay solid y lo vamos a dejar en cuánto lo podemos dejar fff f3 quiero que esté apagado que parezca un botón que como que no tiene vida no como que está apagado el color va a ser el mismo color Ffff3 así parece un botón como que de entrada está apagado vamos a poner btn 2 over y este va a tener en over un Border

un Pixel no Border color vamos a cambiar solamente el color Border color va a ser azul ya está y el color lo mismo color 48 eh es como que se prendió ahora tenemos que darle un efecto Neón para eso vamos a darle un Box Shadow Box Shadow cero píxeles cero píxeles seis píxeles y le vamos a dar 4 o eh TR y ahí que genera una sombra muy mínima la ven Pero está y le vamos a agregar otra sombra para eso se pone una coma y se escribe lo mismo pero esta segunda sombra vamos a

hacerlo más chiquito para que entre la sombra y esta segunda sombra va a tener 16 Entonces ahora tenemos dos Perdón acá dos sombras Ven y ahí por lo menos tenemos que ya ya se le nota un poco el efecto de sombra hacemos lo mismo con el texto text Shadow cer píxeles c píxeles 9 píxeles 4 8 e3 vamos a poner una e ahí se ve un poquito más y Coma vamos a hacer otro efecto c0 píxeles cero píxeles tres píxeles y vamos a darle también 48e y ahí ya también Ah pero está muy fuerte no

Debería ser como un poquito más clarito vamos a hacer entonces que sea más blanco A ver vamos a agarrar un color más blanquito este puede ser eh Ahí está Y en vez de vamos a hacer que tenga más transparencia creo no que sea más opaco ahí a ver ahí ahí queda mucho mejor de hecho tendríamos que hacer que el color También del elemento sea este Okay este rgba pero con total opacidad y ahí ya hay mucho mejor no O es muy clarito Sí a ver vamos a ponerlo un poco más oscuro ahí está ahí está

como que se prende más ahí está ahí tenemos un efecto que es casi Neon no está mal pero nos falta como falta algo más para hacer que sea más Neón todavía primero falta que sea lento a esto le podemos dar una animación si quieren ya ya lo podemos animar y esto se haga directamente con Over a ver podemos darle un Animation y fíjense que acá nos tira todos los parámetros la animación va a ser parpadear la duración va a ser 3 segundos el timing function no lo vamos a definir el delay va a ser no

va a tener tampoco la iteration count va a ser infinite o Y sí infinite la dirección va a ser alternate y el F Mode va a ser backwards Ahí está y vamos a definirla ahora k frams parpadear al pedo dije que No íbamos a animar ningún botón pero lo vamos a terminar animando vamos a hacer el from y vamos a en el from vamos a poner vamos a trabajar con porcentajes ahora 0% y va va a tener por ejemplo un color ff3 que es el color que tenía acá va a tener lo mismo que esto

que está text Shadow cero píxeles y un Box Shadow también Box Shadow también cero píxeles y vamos a darle estas propiedades que le dimos en transition que la vamos a sacar de la transición no vamos a hacer una Transición vamos a hacer directamente una animación 25% y ahí está Le damos esto acá vamos a identar lo seleccionamos todo y apretamos la tecla Tab y ahí se tabula y esto vamos a copiarlo y pegarlo varias veces Ahí ahí ahí y acá vamos a cambiar los porcentajes por ejemplo de 0 a 25% Esto va a ser un

30% acá va a haber 35 por acá un 50 y acá un 100% por ejemplo y tiene este efecto como de transición no de medio raro y vamos a que dure menos La animación que dure en vez de durar esto que dure 3 segundos no que dure uno y ahí ven es como un efecto Neón Igualmente tendríamos que hacer esto más pronunciado acá debería haber como algo más entre medio No acá está esto Debería ser al 46 por acá al 60 esto al 72 por ejemplo y termina esto al 100% de esta forma Ahí va

tenemos una animación que hace parecer un cartel mucho más Neón no como que está titilando es más podemos hacer que solamente titile en vez del Color Si no si no tiene el Border color tampoco tiene el box Shadow si no tiene el color tampoco tiene el text Shadow y acá lo mismo le vamos a sacar el Border color y le vamos a sacar el box Shadow acá lo vamos a dejar y acá le vamos a sacar s Ahí está bien entonces ahí más o menos ven como que van cambiando y ahí está ahí tenemos una

animación espectacular igual el color es medio raro no cuando no le damos color acá le deberíamos dar none quizás none none a Ver si hacemos esto queé tal sale none acá le damos none none y ahí está A ver Ah mucho mejor ahí mucho mejor ahí no Sí ahí mucho mejor además Ahora les voy a enseñar más adelante esta propiedad pero a si por ejemplo el btn container el buton container Button container se llama así no Button container sí tiene el btn2 le podemos dar también un filter y le podemos dar por ejemplo un Drop

Shadow el Drop Shadow se los expliqué Por eso lo uso si no no lo usaría cero píxeles cero pixeles 15 píxeles 48e entonces de esta forma ven tiene como este efecto de ven de de filtro que es como que lo hace más Neón lo hace ver más neón de verdad Y esto es porque le estamos dando a todo lo que tenga como luces fuertes en este caso a todo lo que resalte este este efecto ven este filtro si se lo sacamos se queda Así es más suave ven no es tan fuerte pero si se lo

damos se vuelve mucho más fuerte es más Acá le podemos dar por ejemplo 20 píxeles acá y otro Drop Shadow de cuatro píxeles por ejemplo y ahí ven que se ve más fuerte y ahí tenemos un botón neón de verdad Este es un botón Neón está muy bueno no ahí está tenemos un botón que se rellena y un botón Neón es más podemos llevar la puesta a otro nivel al botón uno Perdón al botón dos por ejemplo le podemos agarrar el bfor y le damos lo mismo que el de arriba propiedades para que exista por

lo menos Ahí está A ver qué tal acá existe bien pero le vamos a dar que tenga el el hate va a tener tres píxeles nada más solo tres p mentira dos píxeles Ahí va dos píxeles No ni siquiera un píxel va a tener ahí está A ver el Wi va a ser de Wi va a ser del 70 por en vez de margin auto vamos a hacer que te tenga left 0 right 0 Por qué Porque con el margin auto se centra ven al medio ahí está el top el Dónde está el top el

top va a ser menos 6 píxeles por ejemplo y ahí está Ven ahí acá arriba lo tenemos entonces podemos hacer que por defecto tenga una opacidad cero y un top menos 6 píxeles pero que con el mouse encima con el mouse encima over for va a tener una opacidad un y Esto va a tener nada esto lo dejamos así es más Esto va a tener menos 6 píxeles y acá va a tener -26 entonces ahí aparece Vamos a darle las propiedades transition top pun 6 segundos y opacity 6 segundos entonces ahí más o menos aparece

ven pero no es Todo podemos hacerlo mejor todavía podemos darle el mismo filter Ah no no hace falta podemos darle el box Shadow directamente el box Shadow que tiene acá y esto se quedaría así o en vez de hacer que esto sea así lo podemos hacer más Dinámico Y en vez de darle todas estas propiedades le damos una animación y le ponemos Animation parpadear e línea parp acá lo dejamos acá y lo ponemos en parpadear pero acá esto no funciona con el parpadear es medio raro ven con el Parpadear literalmente quedaría medio raro Entonces le

damos parpadear línea Pero cuál va a ser la diferencia que copiamos la misma animación vamos a checarlo un poco copiamos la la misma animación la pegamos abajo parpadear línea va a tener otras cosas va a quedarse Exactamente igual solamente que va a cambiar el background color background color 48e y va a tener este Box Shadow Ahí está y si no va a tener el background color Ff3 que es esto que está acá lo otro y el box Shadow va a ser lo mismo no va a tener Box Shadow Box Shadow no eh entonces ahí ven

como que cambia y vamos a copiar esto y repetirlo donde está negro lo dejamos negro y vamos variando y así lo hacemos con todo Ahí va vamos modificándolo y ahora agarramos el otro que es el que está totalmente negro y lo reemplazamos pues ahí fíjense que también se ve afectado el de arriba sacamos esto y ahí aparece el de arriba Ven ahí está ahora lo lo que tenemos que hacer lo que sí tenemos que hacer es animar el top Porque si se fijan no aparece Entonces tenemos que hacer Que aparezca para eso el top va

a ser el que le dijimos antes que por defecto va a estar en Top -27 men 26 píxeles Ven y acá Tiene que estar el top os6 Entonces tenemos que hacer que la transición de Top sea punto 6 segundos y ahí aparece de arriba Ven y ahí está pero también la opacidad Opacity tiene que ser de punto 6 segundos y ahí está ahí carga con opacidad igual vamos a dar 16 píxeles porque es mucho Ahí está ven espect regular ahí tenemos este efecto es más esto también lo podemos hacer con el after es más copiamos

lo mismo acá así y lo pegamos para el after Y en vez de before ponemos after y acá también ponemos after pero en vez de estar en 16 píxeles va a venir de -19 por ejemplo y va a tener alternate reverse pero Fíjense que aparece la misma línea entonces acá en vez de ponerle os6 píxeles cambiamos -3 Ahí está no -3 no perdón -9 y ahí está pero vamos a hacer otra cosa este el segundo va a tener un wid del el primero Perdón va a tener un Wi del 80% y el segundo del 60

Ahí está entonces ahí fíjense el efectazos que nos acabamos de mandar Este igual tendría que estar más abajo no creo yo sí en vez de os6 píxeles -5 O estoy mal Ahí está perfecto Che qué botón más Estético igual eh qué botón más estético pero en en over deberíamos aumentar el wid creo deberían nacer de un wid este 20% y acá tener un wid del 80 y este de abajo tener un Wi del 10% y acá un wid del 60 por. también le damos Wi pun 6 segundos y arriba lo mismo punto 6 segundos y

ahí está se agranda medio raro igual no el Wi tiene que tener menos punto 3 punto do lo veo mejor 60 me queda raro ahí siento que en vez de 60 le podría dar 50 50% me gusta mucho Más ahí eh Me gusta mucho más Che nos mandamos terrible efecto para un botón esto un epiléptico lo desmaya lo deja así dando vuelta Así que yo que ustedes tendrían mucha consideración de hacer este efecto porque si lo van a hacer aplíquenlas que tengan el prefers no lo tengan por ejemplo entonces vienen acá ven que dice parpadear

y y abajo de todo de todas las cosas vienen acá y ponen media prefers motion reduced o mentira prefer reduced Motion motion y acá le dan en reduce Entonces si esto está así agarran al btn vamos a agarrar a todos al btn a todos los Buttons a todos los Buttons a todos los Buttons before y a todos los Buttons after y le sacamos por ejemplo vos y ponemos Animation no Entonces de esa forma la gente que tiene problemas que que ya Configura que no quiere tener tantas animaciones con esta simple línea no verían estas animaciones

tan locas que por ahí hacen que a una persona que No sea capaz no lo vea y de esta forma gente ya tenemos dos efectos tenemos el efecto este y el efecto de acá si a esto le ponen un efecto de sonido que suena el a ver si lo encontramos sonido Neon FX buenísimo buenísimo así que bueno si lograron hacer estos dos botones muy bien por ustedes los desafío a que hagan mejores botones y me los manden etiquétenme en una historia de Instagram con el mejor botón que hayan logrado crear con un after y con

un before si Quieren o con lo que venga este código que acabamos a hacer acá todo este código se podría optimizar para que sea menos así que lo desafío a eso lo desafío a que logren encontrar una forma de optimizar todo este código hacerlo mejor quizás ha lo más estético pero me interesa mucho que ustedes también tengan la capacidad de ver esto y decir Che qué podría mejorar O qué podría cambiar para que esto sea mejor así que bueno eh gente los dejo hasta acá porque Deberíamos ir con la próxima que es una sección donde

vamos a animar un texto para que genere el efecto de tipeo text writing typing se llama O sí algo así es un efecto el que usé para proyecto alto este efecto es es bastante interesante este efecto porque genera sensación genera la sensación de que realmente estamos escribiendo un texto Así que esto lo vamos a aprender a hacer ahora porque lo podemos hacer con animaciones Así que vamos a ver cómo hacer este Efecto bueno ahora sí esta parte les va a gustar a varios porque vamos a hacer este efecto de texto animado que se anima una

sola vez y genera este efecto como de de que es un texto que se está escribiendo No así que vamos a arrancar para empezar la estructura que tuvimos el ejercicio anterior la dejé simplemente puse un div que es un wrapper un div que es un text container y otro div que es el texto de hecho vamos a hacerlo más fácil vamos a sacar Esto y vamos a sacar esto vamos a solamente dejar este p que es el texto y este wrapper va a ser el text container Ahí está y vamos a reemplazar wrapper por text

container tengo lo que lo que teníamos antes display Flex Flex Direction column hate el justify content y la línea lo mismo que laón tiro es una boludez y para que destaque el texto le vamos a dar un color blanco Ahí está y un letter spacing de tres píxeles ahora sí tenemos un texto lind para esto vamos A crear una animación Okay frames una animación muy básica que se va a llamar crecer o grow y va a arrancar en from y va a tener un Wi del 0% y va a tener un do con el Wi

al 100% esto es todo vamos a dásela Animation vamos a decirle que se va a la animación va a ser grow va a durar 3 segundos y va ser B Ahí está Y esto es lo que estamos viendo qué es lo que está pasando pero vamos a darle en overflow overflow hidden al Body le tenemos que dar un display Flex Ahí está Y a este le tenemos que dar un margin auto así está bien centrado ahí ya de a poquito tenemos el efecto no más o menos ya casi lo tenemos casi lo tenemos ahora vamos

a hacer que la animación además se haga con steps si tenemos una 2 3 4 5 6 7 8 letras vamos a ver qué pasa si le le damos steps ocho a ver Bueno más o menos no vamos a darle siete lástima los puntos no hay tanta diferencia los puntos ni siquiera afectan tanto así que para mí está bien Así Bueno hasta ahora lo logramos este efecto no está mal pero a mí me gusta algo que sea más lindo Igual vamos a hacer que dure 2 segundos para hacer que sea más rápido pero ahora nos

falta lo que va a generar realmente el efecto de que estás escribiendo para eso tenemos que agarrar el text y agarrar el after o el before yo voy a agarrar el before y content no va a tener nada with va a tener Solo dos píxeles hate va a tener 80% el background va a ser blanco va a Tener un position absolute pero vamos a darle al text el position relative así el relative respecto a esto bien va a tener un 100% mejor ahí está el wid va a ser de pasa que si lo agrandamos a

ver qué pasa el Wi va a ser de un Pixel quizá por lo que estoy viendo bien un Pixel no está tan mal va a tener right 0 a ver si se pone del otro lado Ahí va va mejorando bien no está tan mal vamos dec que sea de un segundo Ahí va perfecto pero tenemos que hacer que titile esto Va a tener un Border radius de cuatro píxeles ahí por lo menos queda más lindo y vamos a hacerle que titile vamos a darle Animation titilar un segundo infinito Ahí va y vamos a crear la

animación y acá le damos alternate Ahí está y titilar va a tener opacity cer opacity 1 y ahí está miren crea este efecto entonces venimos acá y cuando actualizamos Ahí está pero no tiene que durar un segundo tiene que durar menos tiene que durar punto 2 segundos Pon l No punto 36 Ahí va Mucho mejor bueno y ahí está en parte el efecto está bien no está mal así pero me gustaría un efecto más estético para eso vamos a hacer lo mismo que hicimos antes al text container le vamos a dar un filter Drop Shadow

Ahí va ahí se nos puso el primer efecto de Drop Shadow pondría otro Dr Shadow de tres Ahí va y ahí está creo que ahí queda muchísimo mejor no A ver qué pasa Sí me gusta mucho más es más esto también parece que tiene su propio Drop Shadow Así que vamos a agarrar el Select text selected selection y vamos a darle un background color transparent así no se selecciona Ah va y acá le vamos a poner también nueve y ahí se reduce un poco en vez de darle 15 píxeles le vamos a dar menos le

vamos a dar 12 Ahí está y acá le vamos a dar uno y esto lo achicamos y no parece la gran cosa acá le vamos a dar también nueve y acá también le vamos a dar el primero nueve al de un Pixel lo vamos a hacer Completamente blanco Ahí está está parece literalmente texto Neón que cargo de la nada esto tiene cuántos steps tiene tiene ocho yo le había dado siete Ahí va y ahora sí car y ahí nos carga nuestra página web Ustedes pueden ir probando igual porque nunca es perfecto por ejemplo si esto

durara 3 segundos fíjense que cargaría como muy lento en un dos y acá sí se notan las imperfecciones Bueno ya le van a agarrar el toque pero el efecto ya está Completamente logrado y los recontra felicito porque otra cosa que pueden hacer es animarlo para que una vez que termine se vaya de hecho pueden encontrar la forma de usarlo de preloader para que cargue la página y una vez que la página cargó esperan 3 segundos y hacen otra animación para que el contenedor se vaya para arriba de todo y desaparezca y te cargue la página

como yo lo hice en proyecto alto pero ya queda la imaginación de ustedes Así que Ahora sí los dejo con libertad Pero antes vamos a ver Otro aspecto de las animaciones y se trata de El timeline y el rango tenemos que ver cómo cómo es esto de las animaciones basadas en scroll si ustedes entran a angular.de Okay si ustedes bajan van a ver que esta animación ven yo mientras bajo el scroll esta animación se hace con el scroll o sea mientras yo Voy avanzando esta página va aumentando su efecto yo puedo retroceder Y esto es

un Efecto basado 100% en scroll o sea acá están sucediendo animaciones no la animación dice primero va a estar angular así después angular se va a mover la a se va a desplazar y se va a convertir en tres triángulos que se van ir creciendo para Que aparezca este texto del medio esto es una animación o varias Pero cuál es la magia que lo que pasa es que mientras yo voy bajando el scroll que es esta Barrita que tengo acá la animación se ejecuta mientras yo voy Moviendo el scroll y esto le da un efecto

increíble a la página web esto lo podemos hacer podemos hacer que la animación en vez de que dependa de un segundo O sea que por ejemplo la animación transcurra en un segundo hace que la animación transcurra desde que yo tengo el scroll arriba y desde que yo tengo el scroll abajo entonces la animación arranca arriba de todo el scroll y la animación termina abajo de todo el scroll entonces la animación no Va a depender del tiempo va a depender de En dónde yo me encuentre con el scroll ya vamos ir viendo esto pero es un

efecto fantástico que lo vamos a comenzar a ver en la próxima sección en la próxima sección en la próxima clase no son muchos pero vamos a hacer dos tres videos y ya con esto cerramos todo el apartado de también de animación Así que vamos a ver cómo hacer este gran efecto que es muy bueno Y antes necesitábamos Sí o sí javascript para Esto y ahora ya no lo podemos vamos a hacer 100% con ccs porque es nuevo vamos a hacerlo 100% con css Así que vamos a ver ahora cómo es esto de El timeline de

animaciones y el rango vamos bueno gente ahora lo que vamos a ver son las animaciones basadas en scroll primero tenemos que entender que normalmente nosotros lo que tenemos es una línea de tiempo basada en la duración si nosotros por ejemplo decimos que una animación va a durar 2 segundos La animación va a durar 2 segundos después la curva de progresión O sea si la transición es lineal si la transición es exponencial si es s in is out etcétera eso lo podemos definir con la función de la timing function vamos a ver mejor para que se

entienda más acá por ejemplo tenemos esto que está acá y nosotros Este es el ejercicio que hicimos al principio el primero de todos los ejercicios que hicimos de animaciones tenemos esto que está acá y Acá justamente le dimos linear pero también le dimos por ejemplo yas out Okay que arranca fuerte y termina más despacio tenemos is que es la que viene por defecto que es arranca muy fuerte y termina despacio entonces Siento como que esto es algo con lo que podrían confundirse si no lo tienen en claro ahora que ya lo tienen en claro y

que entienden que una cosa es eso pero después también puedos hacer que por ejemplo la animación duration sea de 3 Segundos no en este caso vamos a dejarlo en linear Okay animación linear entonces básicamente cada parte de la animación va a estar eh ejecutándose de forma lineal no va a progresar la animación más rápido o al principio o al final la transición O sea la animación el cambio de un estado a otro va a ser completamente lineal y la duración la definimos por esto entonces la progresión de la animación el timeline va a estar definido

en su totalidad por La duración que nosotros definamos es decir cuál es el timeline en el que se va a ejecutar bueno normalmente si tenemos un wid del 0% y un wid del 100% al final en 2 segundos va a comenzar e la transición para pasar de wid 0% a 100% en el segundo uno lo vamos a tener a la mitad o sea el 50% y esa va a ser el timeline el timeline va a ser basado completamente en la duración si le damos 10 segundos el Tim va a ser de 10 segundos Pero tenemos

otra forma de Hacer que funcione las animaciones y que no dependan de la duración sino que dependan de otras dos posibilidades y estamos hablando de las animaciones basadas en scroll tenemos dos tipos de timelines basados en scroll y uno es el de scroll que básicamente solo funciona por el scroll del elemento es decir tenemos un contenedor Por ejemplo yo tengo una caja y esa caja tiene un hijo esa caja tiene una Barrita de scroll la animación va a progresar según progrese La barra de scroll Entonces no va a durar ni 3 segundos ni cuatro ni

cinco No no va a tener duración porque no va a durar segundos o sea el timeline no va a depender de la duración sino que va a depender del avance de la barra de scroll y después tenemos otra forma Okay que es la del View es cuando el borde superior del elemento empieza a aparecer en el viewport es decir cuando podemos observar por primera vez el elemento eso está comenzando la animación y cuando el Borde inferior desaparece del viewport eso está terminando la animación Entonces tenemos esas dos formas de eh digamos definir un timeline basado

en scroll el principal es por la barra de desplazamiento que es la barra del scroll y la otra es por View que si cuando el elemento se ve comienza la animación y cuando el elemento se deja de ver termina la animación ahora vamos a ver esto para que les quede más claro Okay pero de los tres tipos de de Timelines que tenemos ya definimos uno que es el de la duración ahora vamos a ver los otros dos que son basados en scroll para comenzar esto no lo voy a tocar el eh iteration con porque no

no aplica acá el iteration con solamente Aplica para cuando está basado en animaciones Así que no lo vamos a hacer por lo menos el infinite tampoco necesitamos bueno el delay puede ser pero lo vamos a sacar por ahora el F Mode sí nos sirve y el timing function También y el Direction también pero por ahora vamos a sacar el Direction y el linear lo vamos a dejar okay vamos a dejar el linear vamos a hacer algo Bastante interesante ahora okay Ya la animación la creamos la animación va a ser que la barra se llene Y

pase de un color originalmente azul a un color rojo no Entonces eso es lo que va a ser la animación ahora Cómo podemos hacer para que la animación progrese según progrese el scroll Bueno una forma bastante Interesante es la siguiente vamos a agarrar por ejemplo el body y al Body le vamos a dar un hate de 200 View por hate Entonces ahora ya tenemos el scroll no Cómo podemos hacer que según el scroll progrese la barra también progrese bueno primero vamos a agarrar el box que sería la caja contenedora No si es la caja contenedora

y le vamos a dar position fixed de esta forma el la barra está fija Okay Vamos a darle un wid del 100% para que mantenga es por el margin Así Que vamos a sacarle el margin Ahí va y ahí la tenemos al 100% entonces lo que vamos a hacer va a ser animar esta barra Okay a medida que vayamos bajando el scroll cómo hacemos eso bueno tenemos dos formas vamos a usar la más básica la primer forma de todas es agarrar la caja que va a estar animándose que en este caso la animación se la

dimos a esta cajita que está acá y le vamos a dar el Animation timeline Animation timeline vamos a utilizar la función scroll y de Esta forma le estamos diciendo mira tu animación se va a basar en el scroll actualizamos Y fíjense que ahora a medida que vamos bajando la barra se va completando y ahora el timeline no depende de la duración porque la animación no tiene una duración es decir no es una animación que se base o sea cuyo timeline se basa en duración en segundos o sea la animación va a comenzar acá y a

los 3 segundos va a terminar acá Entonces el timeline es de 3 segundos está basado en la duración No acá el timeline O sea la forma en la que va a ir cambiando de un estado a otro en la animación va a ser a través de esto que está acá entonces literalmente con el scroll estamos eh basándonos Para hacer el timeline Esta es una animación del tipo eh timeline basado en scroll ahora ponir al Body y decirle Por ejemplo al Body que está acá arriba Ahí está vas a decirle scroll name scroll timeline name o

sea tu nombre de scroll Va a ser Body entonces este va a ser el nombre que va a tener el scroll y además tenemos que definir el eje tenemos dos tipos de ejes scroll axis scroll Time Line axis un axis Es inline okay Que el ese de izquierda a derecho se es el eje horizontal y después tenemos el eje vertical que es el scroll en I que es este que está acá que es el eje de block Entonces si solamente queremos que la animación funci en el eje vertical tenemos que darle block y para resumir

Estas dos tenemos un Shan llamado scroll timeline y le damos el nombre que sería Body y el axis que sería block entonces de esta forma si lo vemos Así cuando nosotros bajamos sigue funcionando pero si venimos acá y en vez de scroll le damos el nombre que va a ser Body ahora fíjense que la animación deja de funcionar le sacamos el block bueno Esto es simplemente por un motivo bastante raro y es que en el body no se puede aplicar esta Si queremos hacerlo de esta Forma tiene que ser aplicado a cualquier elemento que no

sea el body tenemos una forma más interesante de hacerlo vamos a crear otra caja div Class container y ahora vamos a pegar lo que teníamos Ahí va vamos a agarrar a container Okay y vamos a darle el hate 200 View por hate scroll timeline y le vamos a dar en container scroll ahora venimos a la barra y acá a la barra le damos y container scroll ahí está pero Qué pasa tampoco funciona porque este overflow no Va a ser del container va a ser del scroll además de esta Box vamos a hacer otra cosa vamos

a agregar un div que va a tener la clase crecedor solo para crecerlo vamos a poner punto crecedor y vamos a darle un he 200 View por he ahora d está el container Acá está el container No necesitamos darle este alto lo vamos a dejar así y vamos a darle un alto de 100 vi por g o sea el alto que le demos que sea de 100 vi por G y ahora s va a funciar ionar Por qué Porque este Scroll Necesito que presten atención a esto porque esto es muy importante Este scroll no es

el scroll del Body eso se está entendiendo el scroll que tenemos acá no es el scroll del Body es el scroll de este contenedor De hecho fíjense si le damos 50 View por he este va a ser el scroll ves tenemos el scroll del Body que va a ser otro si yo por ejemplo al Body le doy un he 200 View por he tenemos por un lado el scroll del Body que es este que está acá lo ven el Scroll del Body y por otro lado el scroll del elemento este que está acá Entonces el

scroll que va a animar O sea que va va a ser definido como el timeline va a ser el scroll del elemento del container si nosotros le sacáramos esto okay O lo dejáramos ahí pero en vez de ponerle esto le dijéramos scroll Ahí va esto lo que va a hacer es avanzar según este scroll a este scroll no le va a dar pelota O sea al scroll del contenedor no le va a dar pelota pero al Scroll del Body Sí entonces por eso Si nosotros queremos que en lugar de que la animación funcione a través

del scroll que tiene el Root que en realidad no es el scroll del Body es el scroll del Root Pero bueno lo que está pasando acá es que está funcionando el scroll del Root si nosotros no queremos que este efecto sea así qué hacemos creamos un contenedor y al contenedor le definimos un timeline y le decimos mira tu timeline va a ser llamado container Scroll le Podemos agregar el block Si queremos para asegurarnos que solo funcione en vertical y ahora a esto le decimos tu timeline va a ser container scroll entonces en vez de que

su timeline sea el del Body que es este que está acá no el timeline va a ser el de la caja contenedora que es esta que está acá y así es como funciona ya ya vimos dos ya conocemos las animaciones basadas en duración que van a ejecutarse según duración las animaciones basadas en Scroll por desplazamiento del scroll una es esta que está acá y otra es esta que está acá si no le damos nada y solo usamos la función scroll por defecto es Root si le damos al contenedor que tiene el scroll el scroll Y

además le definimos el Animation timeline al hijo que va a ser animado se basa en el otro Entonces es medio confuso pero es loco es bastante loco si ustedes normalmente quieren hacer animaciones normalmente lo que uno hace es usar scroll okay scroll Simplemente usamos scroll porque Todos quieren usar la original nadie quiere usar el scroll de un elemento es raro Así que todos usan scroll pero ya saben que caso muy puntual que quieran definir el nombre de un contenedor porque no quieren usar el scroll del Body para animar sino que quieren usar el scroll de

alguna caja extra lo pueden hacer de esta forma asegúrense que el contenido sea mayor que esta caja y que tenga el overflow scroll porque si no no se va a Ver esas son las características pero en la mayoría de los casos con usar scroll okay va a ser suficiente porque todos van a querer basar su animación según este scroll y no el del contenedor Así que en este caso vamos a dejarlo visible y ahí quedó Bueno ese es un tipo de animación que tenemos después tenemos otro tipo de animación que funciona por el view es

decir que va depender de el elemento que se va a ver o no se va a ver vamos a ver un ejemplo vamos a Borrar esto lo único va a ser poner adentro del container dos cajas Box one o crecedor le vamos a poner crecedor porque está bueno para separarlo la caja dos clase el eh Box Okay y vamos a poner otro crecedor abajo entonces vamos a hacer una cosa a los crecedor crecedor le vamos a dar un he de 100 View por he para que en el medio tengamos al elemento ahora tenemos al Box

y el box Vamos a darle un background color 48e y un padding 20 píxeles para que se pueda Ver 20 píxeles y acá está Entonces tenemos en el medio al elemento y arriba crece para qué quiero hacer esto simple para que veamos cómo funciona la animación de View cuando una elemento empieza a aparecer en el scr empieza a ser visible no depende del scroll eh depende de si el elemento es o no es visible no va a depender del scroll Obviamente con el scroll hacemos que el elemento se pueda ver más o menos porque si

está acá no es visible si está acá ya Debería ser visible entonces lógicamente con el scroll hacemos que sea visible pero la animación está basada en el scroll pero no depende o sea el timeline directamente del scroll sino de que si el elemento está visible o no Para eso tenemos una función muy simple que es View entonces yo voy a agarrar esto y voy a darle Animation y le vamos a dar una animación Solamente le vamos a cambiar el color es lo único que vamos a hacer sí Y también vamos a hacerlo del Wid vamos

a dar un Animation llenar barra nosotros en este caso no queremos que dure entonces lo que vamos a hacer para que no dure Vamos a darle Animation timeline View O sea si le damos scroll como ya sabemos esto va a funcionar a través del scroll mientras movamos el scroll se va a ejecutar pero esta no depende del scroll es decir si yo por ejemplo pongo dos crecedor cuando yo encuentre al elemento ya va a estar casi terminando la animación porque no Depende de si se ve o no se ve solo depende de cuánto esté avanzado

el acá por ejemplo el scroll está a la mitad de la animación entonces si yo sigo bajando ya está por terminar si yo acá por ejemplo le doy lineal para que lo vean mejor Animation timing function le vamos a darle linear para que se pueda observar ven acá va a estar en la mitad de la animación Por qué Porque el scroll está a la mitad Entonces como la animación progresa según progrese el Scroll acá ya arrancó a la mitad entonces para evitar esto tenemos otra que es View y View lo que hace es fíjense que

ahora comienza la animación pero ni bien el elemento se empezó a ver arranca con el Wi del cero y arranca a crecer según el elemento se vea Ven y termina cuando el elemento se deja de ver entonces cuando el borde del elemento toca la parte de abajo del viewport arranca la animación cuándo va a terminar la animación cuando el borde Inferior del elemento toque la parte de arriba del viewport Esta es una animación basada en la vista de siir el elemento se ve o el elemento no se ve Ahora lo que podemos hacer es definir

el timeline es decir antes el timeline del scroll lo definí en la caja contenedora eso se hacía al contenedor porque se iba a basar en el desplazamiento del contenedor pero ahora solamente se va a basar en el elemento visto Entonces le vamos a decir al navegador Okay en vez De decirle scroll timeline le vamos a decir View timeline le estamos diciendo en vez de decirle te vas a basar en el scroll de este elemento le estamos diciendo el elemento que tiene que ser observado va a ser este que está acá y le vamos a poner

de nombre cajita y va a ser block entonces va a ser blog para que se desplace de arriba a abajo pero también puede funcionar la animación en el scroll de izquierda a derecha Pero bueno ya lo veremos en otro momento eso Entonces si yo acá en vez de darle View le doy cajita Okay acá funciona y Acá empieza la animación ahora por qué hacemos esto si si sería Exactamente igual que decirle viu sí es exactamente lo mismo pero a veces ustedes van a querer que la animación de un elemento dependa de si otro elemento se

está viendo Es decir si yo por ejemplo quiero hacer que un elemento se anime en caso de que otro elemento esté apareciendo en pantalla lo puedo hacer de esta forma Entonces lo que estoy haciendo es decirle Mira eh mientras este elemento que vas a depender vos se esté observando vas a transcurrir la animación nosotros podemos arrancar acá y acá acá la animación ya arrancó sí pero si el elemento que tiene que observarse está más abajo que este elemento la animación no habría arrancado Por qué Porque el view timeline Lo tendríamos definido en otro elemento así

que bueno acá tenemos esto Que está acá Entonces esto está bueno porque es un efecto muy interesante ya aprendimos Cómo hacer una animación basada en duraciones Cómo hacer una animación basada en scroll Y cómo hacer una animación basada en si el elemento está visible o no ahora lo que tenemos que ver es el [Música] rango solamente la animación termina cuando desaparece y arranca cuando empieza Pero si yo quiero que la Animación arranque un un poquito más tarde Cómo puedo hacer bueno para eso tenemos el Animation Range Entonces esto es lo que va a serc el

rank le va a decir mira la animación quizás puede arrancar un poco después de esa forma Entonces ven vienen acá y dicen por ejemplo cover eh 10% le vamos a decir que va va a arrancar el rank Start va a arrancar con un cover 10% Entonces ven La animación va a arrancar recién ahí Es más le podemos dar cover 20% y va a Arrancar recién ahí entonces una vez que pasó un 20% del del View o sea normalmente el view Este es el 100% acá sería el 50% la mitad de 50% estaría Acá más o

menos y sería un 25% O sea que un poquito menos acá sería el 20% y le estamos diciendo que vas a arrancar al 20% Entonces cuando esté por acá más o menos Ahí va a arrancar la animación ahí arrancó la animación eso es lo que está pasando si se fijan esto que está acá es porque por defecto el box es una caja Común y como es una caja común es un de común tiene un wid del 100% o sea está completamente ocupándolo pero cuando arranca la animación tiene un wid del C por entonces para que

esto no pase le tenemos que dar como ya sabemos al Animation le podemos dar un Animation fill Mode b y ahí ya vamos a ver que arranca chiquito ahí y después empieza la animación V en vez de estar grande y después achicarse arranca o en vez de hacer esto Simplemente nos ahorramos Esta línea y lo ponemos acá y de esta forma también funciona ven arranca chiquito Y ahí empieza a crecer si acá le damos 50% ven va a arrancar más tarde a la mitad va a arrancar ven está por llegar a la mitad Esta es

la mitad y ahí arranco a crecer y va a terminar arriba así como estamos haciendo que arranque más tarde También podemos hacer que termine más temprano o termine más tarde porque acá si se fijan está arrancando más tarde pero termina igual Entonces si Queremos hacer que termine Antes tenemos que usar la otra que es Animation runch ends y de esta forma nosotros lo que tenemos es por ejemplo le vamos a decir cover 80% porque por defecto vendría en Normal ambas vendrían en Normal Okay esto viene así por defecto en normal pero si le damos cover

100% tenemos más o menos el mismo efecto ven que es arranca ahí pero vas a terminar cuando esté al 100% o sea Ahí vas a terminar y esto es casi el comportamiento igual al De normal Entonces si nosotros reducimos esto y le damos por ejemplo 80% en vez de que la animación termine arriba de todo termina casi arriba de todo pero ahí terminó ven entonces la animación arrancó a la mitad de la vista o sea una vez que está en pantalla a la mitad del viewport arrancó y terminó en el 80% y se va así

entonces Esta es una forma interesante ven de manejarlo de hecho podemos hacer otras cosas en vez de cover podemos darle por ejemplo contain Que contain es básicamente cuando el borde de abajo Vamos a darle van a ver qué pasa cuando ponemos contain 0% contains es cuando la caja está completamente contenida De hecho también tenemos otro que es exit Crossing que es cuando termina de cruzarse con la parte de abajo pero como digo ven es algo que es muy raro Perdón exit Crossing es cuando cuando empieza a tocar la parte de arriba ven o sea cuando

la parte de arriba del elemento toca la parte de Arriba del del viewport ahí es cuando arranca la animación ven ahí y le podemos dar por ejemplo que term en exit Crossing al 100% entonces la animación arranca recién cuando está desapareciendo se ven ahí arranca ahí arriba la animación Entonces ahora Cómo podemos hacer para calcular bien Esto bueno Animation ran en el mdn acá ahí está el view timeline Ranch visualizer de hecho lo pueden buscar a ver si aparece View progress timeline Ran visualizer si lo buscan así entran a este ven y es este que

está acá es el mismo exactamente el mismo ahora Para qué nos sirve Esto bueno fíjense Qué interesante esto funciona por un Dragon Drop o sea normalmente la animación como ya sabemos viene por defecto con normal y termina con normal pero es lo mismo que tenga cover 0% y cover 100% está en verde cuando la animación comienza ven en verde la animación comienza y cuando empezó a ponerse en rojo la animación Terminó entonces en rojo la animación no está ejecutándose y acá vemos Qué porcentaje de la animación progresó Acá está la mitad Acá está terminando y

acá ya se fue por completo entonces la animación termina cuando desapareció esto es cuando tenemos el Animation Start en cover cero y el Animation ends en cover 100 es lo mismo que pasa acá si le damos cover cer y cover 100 pasa eso la animación arranca ni bien entró y termina ni bien salió ahora tenemos más Chances en vez de darle cover le podemos dar por ejemplo contain y ven como acaba de subir contain es igual que cover Solo que la animación arranca una vez que el elemento entró completamente o sea Estamos bajando el scroll

bajando el scroll bajando el scroll y con cover hubiera arrancado acá ya porque si se fijan cover hace que la animación arranque acá si se fijan está en verde ves eso significa que la animación habría arrancado entonces con cover Arranca acá ya acá la animación empezó a funcionar ven con como el elemento que está Acá empieza a crecer porque la animación es una animación del tipo crecimiento Entonces cuando nosotros estamos acá la animación empezó a crecer okay Porque la animación arranca acá ni bien está entrando el elemento ni bien rompe con los bordes inferiores del

viewport ahora con contain lo que hace es la animación acá todavía no arrancó arranca recién cuando elemento está Completamente adentro ahí arranca Ven y si terminamos con un contain también termina con la animación completamente adentro Entonces el over si se fijan terminaría con la animación afuera entonces acá la animación va a un 70 por. y cuando se fue ahí ya terminó completamente mientras que si le damos en contain ahí la animación ya va un 100% que es lo que aparece ahí ves el 70 por iría recién acá mientras que si estuviéramos en cover acá iría

al 52 por La animación ven acá estoy viendo el número de porcentaje esto es un 52 por pero si le damos en contain acá la animación ahí iría al 71 porque termina antes ya que termina cuando el elemento está cubierto al 100% entonces arrancaría después pero terminaría antes o sea que la animación va a durar menos y después con los porcentajes podemos definirlo yo por ejemplo en vez de que arranque con contain al 0% voy a decirle que arranque con contain al 20 entonces Arranca ahí y que termine con contain al 80 entonces termina ahí

entonces en vez de arrancar acá que sería cover o en vez de arrancar acá que sería contain al 0% arrancaría con contain al 20% Y en vez de terminar acá que sería cover al 0% Perdón al al 100% o en vez de terminar acá que sería contain al 100% esto que está acá es contain al 80% entonces termina acá entonces la animación arranca en este punto y termina en este punto si nosotros podemos usar esta Página para hacer pruebas no Y para qué nos sirve esto simple supónganse que yo quiero que la animación en vez

de arrancar acá arranque por acá Cómo hago y digo Bueno voy a ponerle cover 30% por ejemplo no entonces ahí está y cover 30% Es más si esto es más grande esto Podría tener un he de 400 píxeles por ejemplo no arranca ahí entonces recién ahí arrancó y fíjense que si yo le hubiera dado cover 0% la animación estaría arrancando ahí y no terminé de ver el Elemento Entonces no terminé de ver el final del elemento y ya arrancó entonces si yo quiero que la animación comience cuando el elemento esté completamente adentro en vez de

darle cover le doy contain contain o 0% entonces la animación ahí no va a arrancar primero hay que esperar a que el elemento esté completamente adentro y cuando está completamente adentro tuki ahí arranca cuando el elemento está completamente adentro y decimos Bueno mira la Animación empieza a desaparecer y termina de desaparecer cuando el elemento está completamente afuera yo no quiero eso Quiero que desaparezca cuando el elemento está dentro entonces ponemos contain y de esta forma ven cuando el elemento está completamente adentro arranca la animación ahí arranca y cuando el elemento está completamente adentro arriba de

todo termina cuando el elemento esté completamente adentro y esté un 10% más arriba y cuando el Elemento esté completamente adentro y esté un 10% más abajo va a terminar Entonces se muestra todo el elemento y arranca después entonces cargó el elemento se se mostró completo vimos un poquito abajo y arrancó terminó un poquito antes y se fue es más podemos hacerlo más exagerado contain al 30 y contain al 70 y de esta forma ven arrancaría acá y terminaría acá Entonces el elemento puede tener una transición más visible Para qué nos sirve esto y Nos sirve

para cargar el elemento supónganse que la animación por ejemplo es un opacity no opacity cero opacity opacity 1 Vamos a hacer de cuenta que est es toda la animación ven opacity 0 opacity 1 si nosotros esto no lo tocamos por defecto la animación va a cargar así miren ven Entonces tenemos un elemento que queremos que se vea no se va a ver bien Yo quiero que se vea acá no quiero que se vea ahí porque ya no lo estoy viendo Entonces qué hago Voy a decirle Bueno mira vas a arrancar con container al 0% vas

a terminar con contain al 100% Y ves ahí por lo menos puedo verte completo pero quiero que termines antes vas a arrancar con container al 50% Perdón vas a terminar con un container al 50% y arrancar con un con un cover por ejemplo cover porque ahora sí quiero que la animación arranque antes Entonces ven el elemento empieza a aparecer acá en cover y se termina de mostrar a la mitad entonces ahí ya tenemos todo el Elemento y arranca acá y ya lo empezamos a ver acá si nosotros por ejemplo no hubiéramos querido eso le pudimos

haber dado acá contain pero esto no está bueno porque la animación arranca Cuando esto está completamente adentro Entonces el elemento está acá y recién Acá empieza a aparecer y ya se me está ocupando la mitad de la pantalla aí me sirve que arranque aparecer desde el momento que la parte de arriba del elemento empieza a aparecer que ahí ya aparezca la Animación Es más si yo quiero que empiece desde antes le doy por ejemplo cover - 10% o -20 Entonces ya ya va a aparecer desde antes el elemento lo tengo acá y ya cuando lo

vemos no es que empieza a aparecer ya había aparecido hace un ratito y ahí terminó de verse Entonces le doy contain 40 por ejemplo Esto está bueno para hacer cargar algunos elementos ahora para qué me puede servir esto y esto nos puede servir para mucho para mucho así que lo Que les recomiendo Es que ahora vayamos a hacer dos ejercicios interesantes con este tipo de animaciones Así que vamos aer un ejercicio Primero vamos a ver cómo hacer un menú animado vamos a tomar la página web que hicimos al final del de la sección de grid

y vamos a trabajar esa página para que con estas animaciones nos quede una página muchísimo más estética y que cargue más linda Así que vamos a ingeniar la para que esto suceda así así que bueno vamos A ver cómo podemos hacerlo vamos Bueno ahora por último vamos a finalizar la página web pero esta sección que vamos a hacer ahora es una sección de menú animado Así que abajo la van a poner como eh nabar animado o algo así porque en realidad nada es uno solamente puede animar un nabar cuando ya tenés listo el nabar Entonces

sería una boludez eh hacer toda una página nueva desde cero solo para poner nabar animado Así que vamos a trabajar sobre Un nabar que ya tenemos que es este que está acá para animar el nabar y además de eso no vamos a animar el nabar No Solamente vamos a animar el nabar de la página que hicimos antes sino que encima vamos a animar varias cosas más para arrancar fíjense que interesante esto es vamos a agarrar el header y darle un Animation a todo el header vamos a hacer lo primero que vamos a hacer lo vamos

a hacer con el header con el nave de arriba Vamos a darle padding de 20 Píxeles y cero así está alto a lo ancho entonces de entrada es alto Okay pero esto Lo tendríamos que hacer en realidad en dispositivos web O sea que tendríamos que encargarnos de sacar la media queries así que vamos Lamentablemente vamos a dejar de hacer esto y va a ser una media query media screen and y de esta forma dejamos de utilizar un media container y usamos un media query y agarramos el header y le sacamos esto que está acá como

ya sabemos un media Container no podemos darle un estilo al propio contenedor o sea es un lor en realidad hacerlo entonces por eso vamos a usar un media media query solamente para el gader entonces en desktop los demás sí lo vamos a aplicar a todos pero específicamente este no Entonces vamos a agarrar gader y vamos a darle un padding de 20 píxeles arriba abajo y cero y va a tener una animación Animation que va a ser adaptar o adapt nav ahí va como para adaptar nav no va a tener duración sino Que va a tener

un bd para que se entienda eso va a tener un timel scroll scroll vamos a arrancar así y vamos a hacer la animación ahora vamos acá abajo vamos a poner un anim vamos abajo vamos a poner todas las animaciones porque si no nos vamos a volver Loc vamos a venir acá abajo y poner animaciones para cuando necesitamos animaciones vamos a arrancar vamos a poner un Ke frames adapt o movement y vamos a darle un from pading 20 peles c y un pading 20 peles cer ahora una cosa interesante que podemos hacer para esto es darle

el background que tiene que es el background color de fff pero terminarlo con otro background background color fff 6 Pon l Entonces como va a ser basado en el scroll tendríamos que darle un position sticky Así que vamos a venir acá arriba de todo vamos a venir al a los queries del header que en realidad Está mal deberíamos no No deberíamos haberlo Hecho así la estructura no está muy bien deberíamos primero poner Todos los estilos de los elementos y abajo todos los queries Pero bueno no importa no no está tan mal es una forma organizada

no tan organizada acá le no le habíamos puesto adap na le habíamos puesto header movement Bueno ahora el timeline está basado en scroll eso ya lo tenemos pero tenemos que darle un position sticky por qué porque se va a quedar estático Y dónde se va a quedar en Top cero Entonces ahora vamos a bajar la página y se va a quedar ahí y si se fijan va bajando esto pero esto no puede ser así Ah y además la recagar porque el background acá lo tiene el about portfolio contact Y esto no sé por qué tiene

ese background si no lo necesita Ahora nos estamos dando cuenta de algunos errores por qué tiene este background color el nav si no lo necesita realmente no O sea a ver vamos a chequear el na Ah en Mobile sí lo Necesita en Mobile sí lo necesita pero acá no así que se lo vamos a sacar arriba de 600 y lo vamos a sacar vamos a dar un background color initial vamos a dejar en initial entonces de esta forma ven bajamos y ahí ya no nos jode el background color pero si se fijan tenemos un Rango

malo yo quiero que ni bien hago este movimiento tuc ahí ya arranque a verse el fondo para eso tengo que decirle Animation Ranch yo quiero que arranque a los 10 pixeles por Ejemplo y m a los 100 píxeles entonces arranca Acá más o menos ahí a los 10 píxeles y ahí ya termino la animación ya está pero no me gusta el fondo yo siento que debería hacer algo debería poner un fondo oscuro y eh Ahora vamos a hacer otra cosa pero para arrancar el background del header va a ser oscuro Sí el B del header

va a ser oscuro 006 y no queda mal pero el tema es que tenemos que hacer las letras claras ahora entonces vamos a hacer lo mismo pero con El color more bigness creo que así se escribe brillo bigness color blanco Ah no no falta miren esto no necesitamos hacer eso no necesitamos hacer eso necesitamos simplemente decirle fíjense qu Qué inteligente técnica vamos a poner acá u Qué inteligente técnica le vamos a dar acá esto así nos ahorramos a hacer otra otra animación no le vamos a dar color blanco al header color blanco y acá vamos

a hacer que el hiad por defecto tenga el color 48e entonces en Vez de darle el color Okay fíjense esto en vez de darle el color al a acá en vez de darle el color a esto a esto le damos in para que lo herede lo va a heredar y va a terminar blanco Entonces por defecto el header color color Ah pero el color acá es blanco no es acá blanco Ahora sí Qué inteligente esa es una de las magias de lerit ven que les decía una de las magias de hacer que podamos heredar un

una propiedad es esta que tenemos un Color cambiamos y ha el portafolio adap además tenemos que achicar tenemos que hacer que acá el padding sea de cero todo cero Ahí está entonces ahí y ahí está para para eso le había llegado el padding Al principio para que se achique ven y ahí está ahí tenemos el nav que quedó fijo arriba ven está así y ahí quedó esto está bueno porque Mobile no cambió nada ven venimos a Mobile bueno acá Acá está porque esto no es Mobile pero acá que tenemos este por defecto Ven sigue igual

sigue funcionando y cuando bajamos de vuelta desapareció el sticky porque el sticky solamente lo tiene para resoluciones más grandes cuando este este navs está acá y este na sigue funcionando O sea no cambió nada y lógicamente vas a poder bajar Es más acá una vez que esto se desplazó deberíamos dejar en sticky pero no vamos a jugar con eso por ahora porque ya es meternos en otro Mambo Pero lo podemos dejar ahí podemos hacer por ejemplo cuando el ru Tenga un elemento que tenga de hermano a un elemento chequeado todo hacemos con un has a

ese elemento le sacamos el scroll Entonces cuando le das clic acá debería desaparecerte este scroll y le das clic acá y te vuelve a aparecer Entonces ya nadie podría hacer scroll aunque quisiera pero bueno nada es una técnica que el es tiro la pueden implementar usted ent de entrada ya tenemos el primer efecto de animaciones este que estamos viendo acá que lo Hacemos Únicamente con animaciones en scroll y sin javascript que es mágico ahora por ahí nos quedó un poco fuerte no así que por ahí en vez de cinco deberíamos darle ahí y más en

vez de negro deberíamos darle el mismo color que tiene el fondo acá arriba no este que está acá Venimos acá abajo de todo y acá le damos background color le damos este color pero le damos 666 y ahí nos queda el azulcito ven ahí está no es negro pero tampoco es azul del todo Entonces ahí queda un poco más de la mano con lo que tenemos acá hecho Bueno es un buen momento para animar el resto de cosas vamos a crear otra animación que esta simplemente va a hacer que los elementos aparezcan van a tener

un opacity cer y van a terminar con un opacity 1 Eso es todo aparecer Ahí está entonces por ejemplo al header que va a ser lo primero que cargue va a ser el único que le vamos a dar la animación por defecto al header no perdón a la Sección de abajo que sería el profile acá vamos a darle Animation aparecer 2 segundos vote entonces ahí está y hay carga y la animación aparece así entonces Ni bien la página carga ya tenemos una animación ni siquiera necesitamos Que aparezca desde 0% Okay puede podemos darle 3 segundos

y el delay que sea de menos un segundo esto realmente puede llegar a marear A alguien entonces para evitar que maree a nadie Perdón Ahí está menos Ahí va Entonces ahí va ven entonces la animación carga y parece que está apareciendo desde cero pero no O sea la animación ya arrancó hace 0.6 segundos 2.4 segundos Ahí está uh Me gusta mucho más ahí el efecto muchísimo mejor carga la página y tuc cargo vamos a hacer lo mismo con esto que está acá pero esto que está acá vamos a hacer que sí dependa del View vamos

a agrar a los elementos a ver el portfolio portafolio project acá vamos a darle un Animation Aparecer B va a tener un Animation aparecer vot el Animation timeline va a ser el view Ahí va por acá Venimos bien Ven y ahí mientras los elementos se van viendo van apareciendo este efecto Ya es mágico Ya de por sí tenemos un efecto mágico pero vamos a hacer que tengan un Animation Range contain 0 Okay y el Range le podemos pasar dos parámetros Cuando tenemos el ran Start y y el Range end es una cosa pero con el

Animation Range podemos unir los dos en uno solo Entonces le damos contain 0 y cover 30% Entonces ven los elementos van apareciendo así uno atrás de otro quizás esto es muy bruto entonces podamos poner podemos darle cover 10% entonces ahí van apareciendo v y ahí van cargando y los elementos van apareciendo Y en vez de darle 30 le pueden dar 50 o 40 por ejemplo entonces ahí ya ahí aparecen ven es más esto lo pueden poner en responsive y también funciona ven van bajando y los elementos se van mostrando Mientras ustedes lo van poniendo también

pueden jugar con el wid cambiarles el wid o dáselos per es un efecto bastante interesante y pueden por ejemplo hacer que comience desde el 5% así no es tan tarde y ahí está ahí tiene un efecto lindo estético Vamos a darle 48 por porque me pinta Ahí va mucho más lindo Entonces lo ponemos en pantalla más full Ahí está por ejemplo y los elementos van a cargar solamente a medida que vayamos bajando Ven y Esto para mí es un valor Agregado bastante fuerte en 40 Está bien si en 40 Está bien es una boludez pero

como digo es un factor agregado que suma fíjense como los primeros dos pero este que está acá no Entonces es bastante loco me gusta mucho podemos hacer lo mismo con el formulario de hecho podemos agarrar el formulario y darle Exactamente lo mismo agarrar esto venir al formulario y darle Exactamente lo mismo y el formulario va a ser lo mismo ven no va a aparecer Y ahí aparece pero El formulario necesita otros parámetros Así que al formulario le vamos a dar contain a ver qué pasa y ahí cargaría ven contain pero es muy fuerte esto así

que vamos a darle contain 40% y no en cover sino que en contain Ahí va Ven y ahí aparece quizás deberíamos darle en cover 10% y 40 a ver qué pasa Ahí arranca ahí y termina ahí podemos darle en cover 10% Y contain sí contain 50 está bien creo a ver ahí Qué pasa arranca ahí y se Muestra Ahí está arranca y se muestra 40% Perfecto entonces tenemos una página que va cargando mientras nosotros vamos bajando este tiene una animación que carga de entrada ya está de entrada cargó bajamos y la animación se nos queda

fijada arriba ven los elementos van cargando mientras vamos bajando y así tenemos una página que para tener un portafolio un sitio web o demás sin necesidad de usar una sola línea de javascript tenemos un efecto fantástico Para cualquier página web Así que los recontra felicito si lograron esto siempre los felicitaba dijo al principio del curso dije lo voy a felicitar tres veces pero es que si lograron todo se merecen que lo felicite las 20 veces que lo felicite porque lo que solamente miren esto y lo acaban de lograr ustedes obsérvelo a principio del curso ni

se imaginaban hac esto sin una sola línea de javascript por eso es tan importante saber bien css porque nos podemos hablar Un montón de técnicas con javascript acá por ejemplo para hacer esto uno normalmente usaría el intersection observer que es una ap de javascript que enseñamos con javascript Pero para qué podríamos usar intersection server bueno para cosas que tengan que ver más con funcionalidad o quizás podríamos usar no sé node o algo pero puntualmente para cargar elementos o animarlos no Porque ya lo podemos hacer con css Entonces eso es mágico así que bueno gente lo

dejo a Ustedes para que jueguen con sus propias animaciones a ver si alguno se anima a resolver este error que tenemos acá lo ven que cuando dejamos el mouse ahí pasa esto a ver si alguno se anima a resolverlo pero la verdad que yo estoy muy contento porque ya tenemos pedazo de web Así que terminamos la sección de animaciones y los dejo con un videíto especial que armé con mucho esfuerzo cariño para toda la gente que es vieja en el canal y que llegó hasta este Momento del curso seguramente los que ya vieron el curso

anterior de css que tuvo más de cu de millones de visitas y va a seguir creciendo porque lo prometí y porque me pasé por un montón y lo que prometo lo cumplo Así que les juro que no lo quería hacer Lo siento que si no lo hago me matan Así que lo hice a modo de Meme a modo parodia Así que espero que disfruten el video especial Bueno esta sección es medio especial pero no no no la voy a hacer Como lo que pensaba que iba a ser Va a ser mucho más cortito les voy

a mostrar les voy a decir que les cumplí una promesa había prometido una canción de animaciones hace muchísimo tiempo atrás y esa canción lamentablemente no se pudo dar Pero al final la hice pensaba mostrarla en esta parte del curso pero dura 2s minutos y pico y dije debería desperdiciar 2 minutos del tiempo para mostrar la canción la canción es esta fíjense có Arranca fíjense esto y explicando cada tema y tema Dios que [Música] ahora es el meme es una canción que está hecha obviamente a puro meme no es que la quiero cantar para siempre el

cantante Es un chiste lo hice con puro autot túnica Ana propósito así entonces nada voy a hacer una producción con esa canción Y en vez de hacerla ahora preferí mostrársela en un canal ap parte que tengo que llama dalto produce que es Un canal en el que quizá el día de mañana suba contenido para enseñarles a editar porque este soy yo editando miren vamos a hacer De hecho acá está todo bien Vamos a hacer de hecho algo que tenga un poco más de sentido vamos aarle el hate y un y vamos a darle un h1

Esto va a tener un título y acá va tener título y acá va a haber un p Sí así como Ven estoy estoy completamente enfermo la verdad y como dije soy yo quien edita todo los efectos Especiales los audios todo lo como están viendo ahora loito todoo por ahí G parte para ñar Guitar o para mostrarles producciones y demás Así que nada si quieren y si les interesa pueden buscar alto prod irse es interesante porque tendríamos un ecosistema completo de no es una locura la comunidad nuestra comunidad es una tiene todo nuestra comunidad tenemos alto

emprende tenemos soy alto tenemos el evento de D 13 por el día del programador y Ah tenemos alto Producce sea vamos a crear un ecosistema completo falta el de notici no más voy a monopolizar todo todo va a ser nuestro ahora sí que ya saben que cumplí con la promesa que les dije Y saben cómo encontrar la canción de animaciones que ya está subida al Canal Así que nada ese va a ser el primer video de ese canal para estrenarlo de hecho así que bueno continuamos bueno gente ahora lo que tenemos que hacer es ver

cómo subir una página web internet ya cuando sabemos Hacer páginas web como la que hicimos recién tenemos que saber cómo subirlas a internet Pero esperá tenemos los diferentes hostings tenemos los costos tenemos los planes tenemos que saber a dónde subirla tenemos que saber cómo elegir algo más rápido cómo Entonces hay varios De hecho tengo un curso completo de Hosting que habla sobre todas estas cosas pero voy a hacerles un resumen completo para que por lo menos puedan subir su web a internet que es lo más Importante que la puedan subir de la mejor forma posible

y que después si quieren investigarlo lo puedan investigar porque es un requisito para desarrollo web saber de alojamiento Pero de entrada voy a hacer una mini sección para que por lo menos si la quieren subir que la puedan subir no va a durar más de una hora ni en pedo pero van a salir con todo el conocimiento necesario para para que lo puedan hacer y además no solo van a salir con el conocimiento Para que lo hagao que van a salir con el conocimiento para saber cómo elegir un Hosting Cómo elegir un proveedor eh los

diferentes planes también van a entender sobre cómo eh trabajar con ftp como trabajar con un administrador de archivos lo más importante a la hora de subir una página web internet o sea no van a ha simplemente el proceso de subir una página web a internet Porque detrás hay mucho más si solamente saben subir una página web de internet van a suir un Montón de problemas que no van a poder resolver Así que lo más importante es que tengamos esta mini sección de Hosting que no es mucho ya el curso dura casi 20 horas que nos

cuesta meter una sección de Hosting ya que estamos comenzamos con esa sección Qué es el Hosting y Por qué es tan importante para un sitio web el término Hosting que también le solemos decir alojamiento web se refiere especialmente a un servicio que básicamente lo que hace es darnos Una especie de espacio en donde nosotros podemos almacenar información normalmente son imágenes videos páginas web etcétera y lo importante del alojamiento web o del Hosting es justamente que pueda ser accesible a través de la web es decir que podamos acceder a ese contenido básicamente un Hosting es el

espacio que utilizamos en un servidor probablemente de alguien más para almacenar un sitio web normalmente un Hosting es como una computadora Siempre encendida que guarda todos los documentos de tu página web la diferencia es que esta computadora especial no está en tu poder está en poder de la empresa que te provee este servicio y ellos son los que se encargan de que esté segura que funcione todo el tiempo y que cualquiera con acceso a internet pueda ver lo que vos almacenas en ella así que en lugar de que tu página web Viva en tu computadora

personal vive en esta computadora de la Empresa de Hosting vos le envías los documentos y esos se encargan de que todo el mundo pueda acceder a ellos a través de internet ustedes este video lo están viendo probablemente a través de YouTube ese servicio que les Vita YouTube a ustedes está alojado en un Hosting justamente independientemente de que eso es algo muchísimo más grande porque ellos tienen recontra servidores enormes es Cloud etcétera todo está alojado siempre en servidores entonces Es superimportante por un montón de cosas primero por accesibilidad permite que tu sitio web sea accesible desde

cualquier lugar del mundo las 24 horas del día después almacenamiento o sea ofrece un lugar para almacenar justamente todos tus documentos incluyendo textos imágenes páginas web etcétera Además por las tecnologías y los servicios que manejan los proveedores de Hosting justamente suelen incluir ciertos tipos de tecnologías o Servicios que lo que hacen es facilitarnos a nosotros la gestión de nuestro sitio web incluso a veces nos brindan por ejemplo correo electrónico sistema de mailing y varias cosas más que hace que sea todo mucho más fácil además tenemos más seguridad un buen proveedor de Hosting normalmente ofrece buenas

medidas de seguridad para hacer que siempre la página en todo momento esté segura y también normalmente nos ofrecen soporte técnico o sea lo que Hacen es ofrecernos servicio técnico o sea asistencia al cliente en realidad no con el desarrollo ojo acá Porque una empresa de Hosting no te va a brindar un servicio para que soluciones problemas de tu página web no te va a ayudar a solucionar problemas a la hora de subir tu página web de hacer algunas configuraciones cosas que tengan que ver justamente con los servidores o o su alojamiento si vos tenés un

error en tu código no va a venir una empresa de Hosting que por la que la contrates y te va a decir Che sabes que tengo un problema c qué puede ser no antes sí antes era un bug muy normal ahora normalmente cuando nosotros nos metemos en cualquier empresa de Hosting siempre tenemos que entender qué es lo que queremos hacer Cuál es el Hosting que tenemos que ir qué tengo Tenés una empresa que tiene muchos visitantes una empresa que tiene pocos una empresa enorme una empresa chica es dinámica es Estática sobre todo las plataformas que

son bastante grandes siempre tenemos que ver bien Cuál es el plan que más nos conviene porque a largo plazo termina siendo un gasto por ahí gastamos que $100 en 2 años cuando deberíamos gastar 300 y se nos queda corto y la cagamos Así que ahora vamos a la siguiente clase en la que justamente vamos a hablar de esto vamos a hablar de los diferentes tipos de Hosting vamos a ver qué es lo que nos ofrece cada uno así que vamos a La siguiente [Música] clase bueno en esta sección la verdad que va a ser todo

más fácil porque el objetivo de esta nueva clase es que ustedes puedan hacer como una especie de clasificación si a ustedes una empresa les dijera toma Tengo estos 100 sitios web Qué servicio de Hosting contratarías para cada uno ustedes entendiendo las necesidades y los requerimientos de cada uno de esos sitios web puedan determinar Cuál es el mejor para cada una de esas empresas el primero es el Hosting compartido Este es el más común de todos en el que la mayoría de las páginas web están alojadas el Hosting compartido es básicamente un tipo de Hosting en

donde un solo servidor contiene muchísimos sitios web imagínense Elo como literalmente una computadora en la que hay adentro entran muchísimas páginas web si quieren hacer a Pepito com acceden a ese servidor a ramiro.com Acceden a ese servidor es el mismo servidor sosteniendo a todas las páginas web comparten todos los recursos la ram el cpu etcétera y normalmente los recursos no solamente se comparten sino que se suelen distribuir según la configuración de cada servidor pero Normalmente se adaptan a la demanda si de repente un sitio web pasa de levantar 1000 visitantes por hora a levantar 10,000

visitantes por hora y lo que hace es consumir más recursos del servidor Porque se va adaptando más o menos a a a lo que necesite consumir otra cosa es que este tipo de Hosting normalmente suele incluir un panel de de control esto normalmente es para gestionar justamente el sitio web y algunas cositas muy puntuales y además el sistema de correo y que a veces tenemos el no sé por ejemplo eh soid alto @google.com no sos Pepito bueno Pepito @google.com Pepito @facebook.com trabajas en No lo sé trabajas en Ada 13 Bueno robe Tito @ada 13.te los

correos corporativos justamente a veces eh Son más fáciles y tenemos un sistema que nos permita manejarlos de forma sencilla y los Hosting compartidos normalmente nos ayudan bastante con esto otra cosa importante es que el compartido es gestionado por el proveedor o sea ustedes no se encargan de nada ellos se encargan de las actualizaciones de software la seguridad e incluso también el mantenimiento técnico haciendo que Vos no Tas que encargarte de nada bueno por otro lado también tenemos otro tipo de Hosting es decir el vps servidor privado virtual o virtual private server por eso vps o

vps justamente un vps eh lo que hace es lo mismo que el Hosting compartido solamente que funciona de forma diferente lo que hace es agarrar un servidor y no es que mete todas las páginas web ahí mismo sino que lo que hace es utilizar justamente una tecnología de virtualiza que lo que hace Es separar físicamente el servidor en varias partecitas entonces cada una de estas partecitas es independiente funciona como si fueran servidores distintos es como las máquinas virtuales es literalmente como agarrar una computadora o en este caso un servidor separarla en partes y que cada

una funcione de forma independiente aunque los vps justamente comparten el mismo Hardware físico o sea el mismo servidor actúan como servidores independientes Además cada vps tiene asociados recursos fijos Como por ejemplo el cpu la memoria y el espacio de almacenamiento con memoria me refiere a Ram esto que nos garantiza bueno que justamente el rendimiento de cada uno no se vea afectado por otros nosotros En el anterior veíamos que si uno consumía muchos recursos puede que las páginas anden lentas para las demás páginas web acá No acá si alguien usa muchos recursos y se excede lo

que va a pasar Es que no va a dejar a los demás sin recursos se va a quedar él sin recursos Por más que los demás no usen nada Eso es lo que nos provee justamente este tipo de Hosting el vps nos provee un espacio físico en un servidor con cierto tipo de recursos vamos a hacer un resumen super rápido para que les quede claro y lo entiendan rápido el Hosting compartido aloja múltiples sitios en un solo servidor compartiendo recursos y siendo la opción más económica es ideal Para una tienda en línea que sea chiquitita

una página web personal o cosas que reciban poco tráfico un vps es un paso intermedio lo que hace es agarrar un servidor y dividirlo en máquinas virtuales con recursos asignados es ideal para una empresa mediana que lleve un poquito más de tráfico o que incluso requiera ejecutar cierto tipo de aplicaciones que tengan algún tipo de de necesidad específica el Hosting dedicado lo que hace es ofrecer Un servidor completo para un solo cliente es ideal para cosas que necesiten alto rendimiento es ideal para páginas web que son grandes que mueven mucho volumen de datos para empresas

grandes En definitiva O sea no para empresas grandes a nivel de equity sino que para empresas grandes o sea como que tengan mucho tráfico a eso hoy Y por último tenemos el Cloud Hosting que es el más picado de todo que lo que hace es distribuir todo tu tráfico a través de Una red de servidores lo que hace que todo sea muchísimo más escalable y flexible es ideal para cosas que sabemos que van a tener Boom cada tanto que no sabemos el nivel de tráfico que puede tener porque a veces tiene digamos campañas de marketing

que hacen que explote por ejemplo una página que te vende productos que de repente Ten un Black Friday que sabe que va a romper todo para arriba Entonces necesita que su servidor se adapte a la cantidad de Gente que va a entrar de golpe después Este no lo agregué Okay de podía haberlo agregado pero no lo agreg porque no me parece necesario que muchos de ustedes lo habrán utilizado y quizás lo usen así que por eso lo voy a agregar y es el Hosting especializado esto no lo mencioné antes pero se les voy a explicar

muy rápidamente el Hosting especializado es básicamente un Hosting que está optimizado para cosas específicas lo más normal de un Hosting Especializado es usarlo por ejemplo para wordpress que agarraron wordpress dicen Che una página web ech con wordpress qué necesita para funcionar bien Qué sería lo ideal Bueno vamos a crear un Hosting y adaptarlo especialmente para wordpress después tenés el Hosting especializado de shopify tenés el Hosting esp tenés varios tipos de de Hosting especializado pero básicamente es eso ahora cómo elegimos un plan que sea adecuado para nuestro proyecto ya sea que vamos a Trabajar con Hosting

compartido Hosting dedicado bps Cómo Cómo sabemos cómo elegirlo porque ya está nosotros lo que tenemos es tipos de Hosting Pero dentro de esos tipos de Hosting a su vez También tenemos subcategorías Porque a veces un servidor puede ser más potente que otro más débil que otro puede ser un punto intermedio a veces un servicio de Cloud puede ser más potente más flexible a veces un Hosting compartido que es el más común del mundo y es el que vamos a Ver en este en este video El Hosting compartido justamente lo que hace es que se el

más común y el más normal del mundo para alojar páginas web tenemos tipos de planes tenemos planes tenemos el plan básico el plan intermedio el plan avanzado y aún así tenemos diferentes tipos de capacidades También tenemos que saber cómo elegir de entre eso en el módulo anterior desglosamos el concepto como tal de Hosting vimos los distintos tipos de Hosting lo Comprendimos completamente entendimos que cuando nosotros queremos que nuestra página web sea accesible desde cualquier lugar del mundo y que cualquier persona la pueda visitar necesitamos de un espacio en un servidor brindado por un proveedor de

Hosting justamente los proveedores de Hosting son estas plataformas que nos brindan el servicio de hacer todo por nosotros alojarnos el sitio web básicamente configurar todo y lo que hacen es ponen a disposición sus Recursos para que nosotros podamos utilizarlos ahora qué tenemos que buscar en un proveedor de servicio de Hosting primero tenemos que buscar soporte 247 es lo que ya les dije 1 veces 24 horas del día 7 días de la semana necesitamos un proveedor que tenga un equipo que se encargue de solucionar todos nuestros problemas punto uno punto dos que tenga alto rendimiento con

centro de datos alrededor del mundo con rendimiento óptimo lógicamente con tiempos de carga Rápidos para las páginas web Ya vimos por qué además confiabilidad a que podamos saber que nuestra página va a estar disponible más del 99 más del 99,8 por de de las veces ahí hay servidores de que se caen a pedazos y todo el tiempo están fuera de línea tenemos que asegurarnos que al menos el 99.8 por del tiempo estén en línea y también que tengan almacenamiento en estado sólido obviamente no lógicamente es más rápido y encima dura más que los tradicionales Además

que tenga una diversidad de planes y flexibilidad O sea que podamos elegir según lo que nosotros necesitemos y que podamos ir escalando que no sea tan difícil o sea estamos acá y queremos ir avanzando o retrocediendo que podamos hacerlo sin que sea tan caro tan costoso y y tan tedioso que Puos así con un uno que otro clic cambiar de plan o aumentar recursos etcétera También que pueda tener la posibilidad de tener copias de seguridad automáticas esto siempre es Importante que puedas podamos hacer backups y que sea fácil de usar que no necesitemos tanto conocimiento

técnico Hay un montón de veces en las que como queremos Buscar facilidad Hay un montón de cosas que nos ahorramos de hacer que eso hace que todo sea un desastre Cuando vos queres ser más hacer que todo sea más fácil en programación hacés porquería cuando queres usar una librería de forma más fácil a veces consumís menos recursos si bien todo Todo todo todo va tiende hacia la abstracción entonces un Hosting que sea fácil de usar el hecho de que sea fácil de usar no significa que no podamos hacer cosas que todo lo que podamos hacer

lo podamos hacer pero que lo podamos hacer de forma fácil y que se entienda entre todos los provees de Hosting que existen hay uno que es mi preferido que uso siempre y que si me siguen en el canal ya los recontra mega reconocen porque lo usamos mil veces y Estoy hablando de hostinger con una plataforma que por cierto es muy intuitiva planes que se adaptan a todo tipo de necesidades desde páginas chiquitas hasta tiendas Gigantes y encima Tiene todo lo que les dije antes todo lo que les dije antes prácticamente era una descripción de tinger

o sea yo ofrece todo lo que les dije y encima ofrece más la mayoría de los planes de Hosting te dan un dominio gratuito sí El dominio es eso con lo que llamas a tu Página web facebook.com es un dominio Ada 13.te es un dominio google.com es un dominio El dominio es esa forma de enmascarar la IP o o la forma en la que llamamos a nuestra página para que no sea feeda porque normalmente las páginas web tienen un aspecto como este sí un aspecto normalmente así lo que hacemos Es encapsular enmascarar y darle un

nombrecito que sea lindo y que la gente lo pueda escribir Como por ejemplo este que está acá O sea si ustedes ahora Mismo van y ponen esta IP que es la ip de ahora por ahí cambia si la pueden buscar de esta forma les debería saltar el servidor de Google o también lo pueden buscar por su dominio ese dominio es la forma en la que podemos llamar al servidor que aloja nuestra página web se entiende o sea El dominio llama al servidor y el servidor nos muestra lo que El dominio tiene asociado eso nos lo

dan gratis además también nos permiten utilizar direcciones de correo Electrónico personalizadas Pepito @el nomel dominio.com eso es buenísimo es un correo corporativo y además un certificado ssl ilimitado que ahora van a ver lo que es ya los que me conocen también lo saben es una boludez los que conocen saben además tiene garantía de devolución de dinero cosa que es buenísima ustedes pueden probar el servicio si no les gusta lo cancelan Así que si quieren hacer todo lo que voy a ir haciendo en este curso no hace falta Que lo compren pero si lo quieren llegar

a pagar quédense tranquilos que tienen el descuento aplicado o sea no hace falta que hagan todo lo que yo hago pero si lo hacen Lo bueno es que pueden llegar a reembolso se fundó al mismo tiempo que Facebook Sí el mismo año que Facebook y hoy tiene más de 30 millones de usuarios sí le vendió Hosting a más de 30 millones de personas creo que casi el doble de la población de chile el triple de la población de Bolivia el Doble de Venezuela creo casi también de la que mejor relación precio calidad la tienen sin

duda de hecho Por ese motivo y como saben que yo tengo por suerte contacto con la gente de hostinger porque me han ayudado con muchas cosas que yo necesité en el canal en el pasado como proyecto de alto que bueno si quieren pueden ir a verlo como yo personalmente uso hostinger hace hace como 7 años que uso hostinger le escribí a la gente de hostinger para ver si me Pedar una manito Porque además hostinger está todo el tiempo en constante cambio Entonces les pedí una mano para que no se me pase nada de hecho en

agradecimiento por este material educativo que estoy creando para mi audiencia a la gente de hostinger le pintó darme un regalo Se los voy a mostrar pero básicamente es algo para todos los que están viendo este video es un regalo para ustedes Espero que este video no sea tan viral porque nada Solamente les voy a decir que la comunidad de hostinger nos quiere nos ama Ahora sí con todo esto vamos a nuestros primeros pasos con hostinger vamos Vamos a aprender la [Música] computadora Bueno lo primero que tenemos que hacer en este caso lo que ustedes tienen

que hacer es ir al curso en este caso estoy en el curso de python pero ustedes pueden ir al curso que están viendo ahora mismo primero van a tener El temario Okay y después van a tener por acá abajo qué tanto mosquito y por acá abajo van a tener el que dice Hosting recomendado puede ser que lo ponga de forma distinta probablemente el enlace esté más arriba pero es este que está acá el enlace tiene un aspecto similar a este le van a dar enlace acá y se les va a abrir esto Ahora les voy

a explicar por qué Tienen que entrar desde el enlace que les di porque van a tener un Descuento de hecho acá viene la sorpresa y es que les voy a comentar lo que me dijo la gente de hostinger dalto ya queras un curso de hostinger llamamos tu contenido Nos gustaría otorgarte un enlace especial con el que tus seguidores solo por haber visto tu curso en caso de que quieran alojar su sitio o los de sus clientes con hostinger van a tener un descuento enorme tomarlo como un regalito nuestro éxitos con el curso en este caso

va a cargar la página de México yo le voy a dar en la Argentina Okay e acá tienen básicamente para eh su sitio web ahora no solamente ya por haber entrado a este enlace fíjense que ya solamente por haber entrado con este enlace ya tienen un super descuento cosa que es buenísimo pero voy a pasar a explicar cada una de estas cosas porque repito la mayoría de veces cuando ustedes ven esto que está acá dice Che ahora en qué joraca me tengo que fijar cuando voy a eligir un plan de Hosting Qué joraca me tengo

que fijar bueno primero rendimiento estándar y en este caso mayor rendimiento hasta cinco veces y en este caso rendimiento máximo hasta 10 veces en cuanto a rendimiento este rendimiento que es el mayor rendimiento hasta cinco veces rinde muchísimo más lógicamente por las cosas que tiene abajo que ahora vamos a ir mencionando 100 sitios web 100 sitios web 300 sitios web O sea que si no somos si nosotros no somos una empresa que está creando Sitios a lo loco No necesitamos este pack que está acá o sea si no vamos a alojar tanta cantidad de sitios

web este de último no lo necesitamos en este tenemos 100 GB de ssd Y en este 200 GB de almacenamiento en nbme primero el nbme es mucho más rápido que el ssd y después tenemos el doble o sea nuestra web tiene archivos eso ya lo sabemos la velocidad con la que pueden ser leídos nuestros archivos Porque todos los archivos están armazenados en un disco La velocidad con la que se leen va a depender del tipo de disco el ssd es más lento a pesar de ser más rápido que los discos duros es mucho más lento

que el nbme que es el más rápido en la actualidad entonces 200 GB de almacenamiento nbm estamos diciendo que vamos a tener el doble de espacio y encima se va a leer mucho más rápido cada archivo de talma forma que el rendimiento va a ser mayor en este caso hay copias de seguridad semanales y acá Tenemos copias de seguridad diarias acá hago una aclaración no es que le van a cobrar Esto está en pesos argentinos Okay ustedes lógicamente si están en Estados Unidos si están en otro país lo tienen que hacer el cálculo pero más

o menos Creo que este debe estar 9 y este $9 o sea no hay mucha diferencia o sea básicamente dividan lo por 1000 y ahí tienen el valor actual en este caso la copia de seguridad vale más o menos unos $15 pero en este caso está incluida O Sea si ustedes no contrataran ningún servicio cada copia de seguridad cuesta eso y aún así se lo están prácticamente regalando Entonces esto es lo que cuesta la copia de seguridad di airea que se lo está está incluido en el Hosting el ssl limitado que el sl básicamente creo

que se llama es el socket secur layer básicamente es una capa de seguridad para que esté cifrado el tráfico que viaja entre las conexiones hechas un tema técnico des preocúpense que lo Vamos a ver más adelante el ancho de Band ilimitado ancho de Band ilimitado esto es clásico imil gratis email gratis email gratis esto También es importante dominio gratis dominio gratis dominio gratis es importante esto El dominio porque ahora Estamos viendo también que el plan cualquiera que elijamos vamos a tener un dominio gratis es decir El dominio va a ser gratis esto es buenísimo no

todos los planes de Hosting lo tienen y hasta ahora la única Diferencia que estamos viendo entre estos dos Es que este que está acá Tiene 300 sitios web y nada más es decir y bueno rendimiento hasta 10 veces pero no hay diferencia por eso hasta ahora el mejor plan relación calidad es el segundo el del medio después Este no tiene una cdn gratis Y este tiene una cdn gratis Okay el cdn sí es importante básicamente lo que hacen los cdn es almacenar las copias del contenido estratégicamente distribuido en toda la Red de servidores del mundo

Hosting ser una de las empresas de Hosting más grandes del mundo suele tener justamente servidores distribuidos por todo el mundo el cdan estratégicamente piensa Cómo almacenar eh las copias del contenido que ustedes tienen para que sea todo más óptimo básicamente cuando un usuario hace una solicitud para cargar nuestra página web o sea cuando ustedes buscan mi página web.com cuando ustedes solamente están Llamando la página web el cdn lo que hace es redirige la solicitud al servidor de origen y lo que va a hacer es Mostrar los recursos del servidor que dé una respuesta más rápida

o de del servidor que esté más cercano lógicamente como el servidor que se va a ver es el que está más cerca del usuario el contenido se va a mostrar más rápido además los cdn lo que tienen es saber redistribuir bien las solicitudes de del servidor de esa forma lo que hacen es Optimizan todo mejor e incluso reducen la latencia cosa que es buenísimo por eso el cdn es tan importante entonces En definitiva el cdn lo que hace es aumenta la velocidad de carga de la página que ya vimos que es muy importante que una

página cargue dentro de los primeros 4 segundos disminuye La carga del servidor de origen por Por qué Porque al almacenar la la la información en caché ahorrá hacer que el servidor cada vez siempre tenga que mandarle todos los Recursos O sea al almacenarlo en caché se lo mostrá directamente porque ya está cargado en el usuario además te aumenta la disponibilidad No porque si un servidor está cargado va por otro e indirectamente también mejora la seguridad porque los cdn también suelen ser efectivos cuando queremos protegernos de un ataque ddos ya que redistribuye justamente entre los servidores

según la sobrecarga de cada uno y lo que sí tiene este último que Todos los demás no es el tema de la IP dedicada básicamente la IP dedicada es lo que les mostré antes cuando ustedes van por ejemplo yo les voy a mostrar vamos a hacer un ejercicio muy rápido yo por ejemplo vengo acá y pego esta IP que es la de Google justamente yo lo que estoy hacendo es entrando al servidor de Google por qué porque tiene un IP dedicada si yo por ejemplo abro Google y entro a esto fíjense que es lo mismo

que les mostré antes la IP dedicada entonces Lo que está haciendo es cargarnos el servidor ahora Qué ventaja sirve tener un IP dedicada bueno primero si tenemos cualquier problema con el dominio voy a ponerlo en pantalla completa si tenemos cualquier problema con el dominio igual podemos seguir Llamando al servidor desde la IP cosa que igual es medio raro porque nadie nadie accede a goog IP Pero bueno es un ejemplo hay muchas apis o muchos servicios que lo que nos piden es una IP fija entonces lo que hacemos Nosotros es le damos una IP fija a

la aplicación para poder establecer esa conexión segura No sé supónganse que estamos utilizando una Api de una página que nos dice Okay decinos la IP con la que vas a trabajar d más le pasamos la IP y lo que tenemos que hacer ahí es mantener esa ip de forma fija Entonces si la cambiamos tenemos un problema porque ya no podemos utilizar más ese servicio antes de que apareciera eh digamos el sni los certificados ssl lo Que tenían eran eh o sea la versión antigua de los ssl necesitaban Sí o sí tener una IP dedicada entonces

si vos no tenías una IP dedicada no podías tener el candadito de seguro acá arriba este candadito de seguro vos no lo podías tener si si vos no tenías justamente una IP dedicada Por qué Porque para cada certificado ssl había solamente una IP asociada pero después justamente salió el sni que creo que eran las iniciales de eh server name indication Y qué Hacían como estamos en justamente en un alojamiento compartido lo que permitía era tener un ssl o sea un un certificado de seguridad para cada eh cada Hosting compartido entonces vos tenías un Hosting compartido

15 páginas web y cada página web podía tener su ssl porque no era un ssl por eh IP sino que era un ssl que ocupaba esta extensión sni para poder utilizarse muchas conexi entonces vos tenías un Hosting dedicado y podías darle un ssl a cada sitio Por más que no Tengas una IP dedicada pero en realidad a nosotros ni siquiera nos importa eso Porque al fin y al cabo nadie entra a nuestro dominio por la IP además tampoco nadie ya los ssl ya no necesitamos tener un IP dedicada Entonces para qué nos sirve la IP

dedicada bueno para una cosa puntual Y es que nosotros justamente podemos eh enviar correos corporativos No yo por ejemplo tengo dalto @ada 13.te ad 13.te es esta página web que yo cree por el día del evento el evento del día Del programador que es un evento que estuvo bastante bueno Les recomiendo que vengan cada año si hace el 13 de septiembre supónganse Que Ada TR estuviera eh en un Hosting compartido con muchísimas otras páginas web No si cualquiera de esas personas hace spam ind directo amente 13 se ve afectado es decir si ustedes ponen una

página web en un Hosting compartido al no tener una IP dedicada lo que hagan los demás usuarios los van a afectar a ustedes Entonces si De repente un usuario de su servidor empezó a hacer spam a todo el mundo automáticamente Gmail por ejemplo los va a poner en spam ustedes tienen su página web eh pepito.com alojado En el mismo servidor que robertito comom pero como robertito comom eh creó un mail llamado info @roberto punc com y no paró de hacer spam a todo el mundo ahora usted ustedes como estn en el mismo servidor compartido cuando

quieran mandarle por ejemplo el usuario de su página web se Registró y quieren decirle te has registrado correctamente y mandarle un mail eso puede que le lleguen spam Porque todo lo que hacen todos termina afectando al servidor general entonces ese sería la desventaja principal de una IP dedicada de no tener IP dedicada pero la verdad que por lo que cuesta para mí prácticamente es casi indetectable porque plataformas Como stinger por ejemplo castigan y bloquean a la a los sitios web que hacen spam constante de Tal forma que usted se deberían quedar tranquilos que no deberían

tener problema para si por ejemplo compran un Hosting acá y otro se manda cagadas no deberían tener problema porque Hosting lo bloquea lo bloquea Entonces ustedes safan de recibir penalizaciones Por eso creo que sin duda Este es el mejor plan de Hosting que cualquiera puede elegir o sea poquita plata más por algo más bueno y después tenemos esto que es el wordpress eh Hosting gestionado que en Este caso tenemos todo o sea no tenemos que preocuparnos por nada porque tiene todo lo que tiene este que está acá ahora este el primero no tiene la optimización

de woocommerce que es importante no tiene el wordpress el wordpress Station no tiene el off caché el Ob caché por ejemplo almacena el caché también para que la página al usuario le cargue más rápido No lo tiene bueno no puedes tener la copia de seguridad Cuando hay mucha demanda pero En este caso sí no tenés herramientas de wordpress que tienen Inteligencia artificial porque hostinger justamente te lo que te da también Es una herramienta para que crees páginas web con wordpress por ejemplo con Inteligencia artificial le decís creamos una página web que tenga esto esto esto

y te la crea es buenísimo sub contator después si quien se los muestro además tiene por ejemplo una protección contra ddos y lo único que este tiene Asistencia prioritaria pero prácticamente Yo después de haber experimentado con todos los planes la tensión es casi la misma est es un poquito más rápida pero para mí el plan que más vale la pena es este ahora si ustedes tienen toda la plata y les sobre y no les afecta bueno vayan por este porque está mucho más caro pero lo que están pagando principalmente es la ip dedicada es alojar

muchísimo más sitios web es que tener un rendimiento por ahí El doble de rápido doble de mejor en todos los sentidos y asistencia para contactarse en tiempo real todo lo que quieran pero esta igual lo ofrece es interesante van a tener atención y tiene todo lo que necesitamos Así que yo voy a ir por esta a Añadir al carrito voy a hacer todo con ustedes ya saben a mí no me gusta eso de No yo ya me lo desc no no yo voy a comprar el Hosting con ustedes y lo más común es comprarlo por

48 meses pero como yo estoy haciendo un Curso no lo voy a comprar por 48 meses lo voy a comprar por 24 Eh me parece una Guada comprarlo por 48 meses yo ya tengo mi mail y yo ya tengo mi Hosting yo ya tengo y lo lo compré por 48 meses Pero porque soy un loco y porque me gusta tener todo a disposición pero lo más normal es comprar este y ya con este estás rec contrras obrado y lo más común es 24 meses un mes no Porque cuando uno lo tiene Durante un mes es

primero las páginas web pierden posicionamiento O Sea si ustedes lo compran Durante un mes la página web no va a posicionar porque va a estar online y offline todo el tiempo eh hostinger No los añade a la lista de prioridad lógicamente porque tienen otro otro tipo de de los usuarios que pagan muchísimos meses juntos lógicamente van a tener un Rango de prioridad un poco más elevado ustedes pagan por un año y vale lo mismo que pagarse cuatro de estos no tiene sentido por donde se lo vea Pero principalmente El problema es el seo o sea

la página no va a posicionar bien si todo el tiempo está en línea está fuera de línea Es muy poco profesional lo mínimo que Les recomiendo es 12 meses lo mínimo pero en caso de que no quieran 12 meses pueden ir por 24 yo lo que suelo hacer como les dije siempre suele ser 24 y cuesta esto que está acá como están viendo son 77000 no son ni $100 ni siquiera llegan a ser $100 en el en el mejor caso en este plan que está acá que es el que yo tengo con Mi otra cuenta

estarían ahorrando creo que un 10% más que con este o un poco más incluso y con este están ahorrando pero muchísimo yo voy a Iniciar sesión con Google ahí acabé de Iniciar sesión y fíjense porque acá está la clave ustedes no solamente van a tener descuento por usar mi enlace sino que van a tener descuento porque encima los do stinger me yo tengo muchas tramas con los do tinger y me dieron un cupón Además del enlace tenemos el cupón miren esto le Dan acá en donde dice tenés cupón de descuento lo cliquea le dan ahí

y acá les va a saltar esto ustedes ponen soy de alto así todo junto soy de alto le dan aplicar y fíjense eh cuando le doy aplicar qué pasa tucun Ahí está y automáticamente vale menos espectacular Ya tienen un descuento del 71 por por entrar con mi enlace un descuento del 71 % y un descuento encima del 10% por usar mi código o sea esto es lo que lo pagaría un usuario normal Esto es lo que Lo están pagando con el dalto ven soy soy un tipazo igual posta Muchísimas gracias a la gente de hostinger

Porque si los tinger no me hubieran respondido los mensajes y no hubiera tenido la posibilidad de que ellos me contacten y hablar con ellos jamás me habrían dado este cupón que de vez en cuando me lo dan pero para un curso es muy difícil porque imagínense que los cursos los ven muchísimas personas Pero bueno nada se animaron se pusieron la 10 eh pongan el Cupón Y si el cupón les funciona sigue disponible pero técnicamente está disponible y cuando lleguen a este punto bueno no hacen el pago así que bueno voy a hacer el pago enviar

pago seguro voy a pagar con tarjeta de de crédito yo bueno Esto sí lo voy a censurar todo y lo voy a hacer rápido bueno listo Le doy en pagar ahora le voy a pagar en una cuota lógicamente y está bueno viste yo uso esta opción normalmente porque sé que voy a alojar varias páginas web Administro varias páginas web y está bueno para para tenerlo vist ya está bueno vamos a comenzar con el seguimiento Bueno le vamos a dar empezar ahora para qui está creando el sitio web yo en este caso como ya creé el

sitio web Le voy a dar en ya tengo mi sitio web Qué tipo de sitio web queres crear vamos a hacer de cuenta que es un sitio web un business un negocio y lo cree yo mismo por ejemplo voy a darle en omitir crear un sitio web vacío acá podemos Reclamar un dominio gratis yo lo que voy a hacer justamente es reclamar El dominio porque yo ya tengo mi dominio ingrese el nombre del dominio deseado voy a ponerle corte d'alto al dominio corte dal alto.com Acá está corte alto.com a ver si está disponible está disponible

listo continuar y es de empresa organización siguiente paso bueno estos son mis datos lógicamente los voy a bloquear finalizar registro y se está registrando listo ya Está bueno la ubicación es de Sudamérica porque yo estoy en Argentina y el servidor más cercano está en Brasil entonces técnicamente que la ubicación esté en Brasil es espectacular por eso le vamos a dar en finalizar configuración Ah se está configurando todo Bueno listo acá se terminó impecable ahora lo que podemos hacer es ver tu sitio web que es ver lo que has hecho hasta ahora yo le doy en

ver sitio web y a ver qué me salta me va a mandar Acá esto que está acá si se fijan es la vista que tiene el usuario cuando entra al Hosting si yo ahora pongo corted alto.com Me está llevando a esta página o sea que y tengo enlazado mi dominio acá es decir si yo busco cortee alto.com ya voy a ver esta página web de tinger Por qué Porque cortee alto.com está asociado a mi cuenta entonces yo ya puedo administrar mi página web mi página web es esta corted alto.com O sea que esto es lo

que va a ver el usuario Lo que vamos a hacer en este caso es darle administrar sitio porque ahora tenemos varias cosas para administrar es importante que habilite la la verificación de dos pasos Yo la voy a habilitar para tener más seguridad en la cuenta le doy en habilitar y me va a llevar a la aplicación de ati o nord pass pero yo voy a habilitarla con correo electrónico la voy a habilitar por ahora con correo electrónico bueno acá me llegó que han recibido mi pago Código de aplicación de acceso copio vengo acá lo pego

y perfecto ahora cada vez que entre estos que están acá son códigos de respaldo Que obviamente no les voy a mostrar los códigos de respaldo Porque si les muestro los códigos de respaldo ustedes van a poder acceder a mi cuenta pero son códigos que tengo para que en caso de que se me pierda la cuenta yo pueda acceder a mi cuenta con estos códigos que me dan acá cosa que es buenísimo le dar en Finalizar configuración Ya está Está todo configurado ahora le vamos a dar en authentication set ahora vamos a darle al botoncito de

acá que dice Hosting y acá ya tenemos un panel interesante ten tenemos este panel que es de Premium web Hosting tenemos un business web Hosting un Premium web Hosting yo tengo varios varios Hosting como les dije Vamos a darle en administrar yo el que tengo es este Estos son todos mis planes de Hosting Okay yo tengo este actualmente Corriendo pero este es el que acabamos de contratar de hecho lo puedo poner un nombre que va a hacer el Hosting de corte dalto Esto está bueno nombrarlo porque podemos tener en cuenta qué es lo que estamos

administrando acá Entonces ahora lo tenemos le damos en administrar y acá estamos con la página web lo que quiero hacer ahora que si se fijan esto que está acá lo bueno de esto es que está configurada la conexión es sl es decir ya tiene el candadito de seguridad Una cosa es http que es esto que está acá otra cosa es https que es esto que está acá Ahora yo para administrar mejor esto voy a darle donde dice un sitio web y corte de alto porque es el sitio web que yo ya tengo acá tenemos varias

cosas importantes okay Porque ya estamos viendo primero y principal el plan que tenemos acá que es business web Hosting tenemos El dominio que es El dominio activo que también lo podemos administrar Si queremos lo que vamos a Hacer ahora es aprender a utilizar la herramienta del administrador de archivos de hostinger bueno acá en el tablero principal de la administración de nuestro sitio web tenemos el administrador de archivos Okay Vamos a entrar para entender cómo funciona acá nos está cargando fíjense que esa prueba de tontos porque acá dice no suban acá o sea en esta carpeta

no hay que subir nada fíjense que si entramos a html nos salta este default php que si lo abrimos Vamos a ver todo su código Okay todo el código de este php que es de hecho la página web que ustedes pueden ver cuando buscan en cortede alto.com De hecho yo puedo tranquilamente esto que está acá por por ejemplo eliminarlo con suprimir Y le doy en borrar entro al html y acá puedo crear una nueva carpeta Okay y creo una nueva carpeta y acá puedo poner por ejemplo eh fotos no entonces Acá tengo la carpeta fotos

y si acá por ejemplo voy a darle nuevo archivo el Archivo se va a llamar fotos. txt por ejemplo yo acá tengo un texto que va a ser Hola A continuación te voy a dejar todas las fotos dos puntos vamos a hacer zoom para que ustedes lo puedan ver mejor y acá arriba tengo el loguito para guardar le doy en guardar y se guarda qué acabamos de hacer Bueno si venimos acá y le damos en corted alto.com y ponemos barra fotos vamos a ver que ahora estamos entrando a una carpeta que nos dice que está

prohibida pero si Nosotros le damos en fotos. txt ahora me salta esto que está acá qué está pasando acá Bueno literalmente estamos accediendo a la página web que tenemos porque fíjense que public html es como si nuestra página tuviera esto hasta acá después estamos entrando a la carpeta fotos fotos y después estamos entrando al archivo fotos. txt fotos. txt y cuando entramos accede al archivo si yo por ejemplo solamente entro acá fíjense que Ahora me va a decir for vitem Por qué Porque Ya eliminé la página web que tenía antes antes tenía un archivo El

default Bueno vamos a venir acá voy a eliminar esta carpeta Okay voy a borrarla y ahora voy a volver a intentar entrar a fotos fotos. txt qué pasa no hay nada Por qué Porque ya no existe este archivo no existe esta ruta yo mi página web ya la tengo es es esta que está acá pero fíjense que si yo entro a mi página web entonces fíjense que esta Es la ruta Yo quiero hacer que esta página web mía esté en línea y aparezca en corte alto.com Cómo puedo hacer Bueno fíjense qué fácil es utilizar el

Dragon Drop vengo acá selecciono Todos mis archivos y los arrastro hasta hasta la carpeta pú html puedo hacer esto o directamente puedo entrar a la carpeta html a pública html perdón y venir acá y subirlos y cargarlos fíjense que ahí me están cargando los archivos acá abajo y acaban de ser car todos los archivos de Tal forma que si yo actualizo la página o casualidad acaba de cargar nuestro sitio web Por qué Porque nuestro sitio web ya está en línea que de hecho es lo que acabamos de hacer recién acabamos de subir un archivo agarramos

y entramos desde el celular yo voy a entrar desde mi celular para ver cómo se ve cortede alto.com eventualmente tiene un problema porque me está cargando de una forma medio fea la verdad Pero si la pongo de costado creo que ahí se actualiza y ya No hay problema lógicamente en Mobile por ejemplo debería hacer que desaparezcan estas cosas para el efecto que estamos viendo acá pero En definitiva nada está todo más que bien en fin hay otro sistema mucho mejor no sé si es mejor pero sí lo utilizamos mucho es muy común para subir una

página web y es directamente utilizando ftp bueno ftp significa file transfer protocol o en español protocolo de transferencia de archivos es Literalmente eso una forma estndar de transferir archivos entre tu de tu computadora y el servidor que aloja tu página web o sea es un protocolo que define como un cliente y un servidor tienen que transferirse archivos entre sí podemos ver los archivos literalmente como si fueran de nuestra computadora lo vemos como si fuera un sistema de archivo de manejo de carpeta igual que el administrador de archivos pero desde nuestra computadora de forma nativa sin

Entrar a ninguna página web ni a través del navegador ni nada Y tenemos dos tipos de ftp y de acá depende la seguridad porque también tenemos que entender Cómo funciona la seguridad de ftp el primer tipo de ftp es el ftp puro es la forma justamente más básica de ftp y no es segura porque no está cifrado y después tenemos el ftp seguro o el sftp o el ftps cualquiera de las dos sftp sería ftp sobre ssh y después tenemos ftps que sería ftp sobre ssl así como Https es http sobre ssl ftps Es ftp

sobre ssl justamente lo que hacen estas es cifrar la conexión y proteger tus credenciales bueno no lógicamente tus datos no O sea todo lo que envíes y descargues a través de la conexión en donde más se usa es el desarrollo web Okay así que bueno vamos a ver cómo utilizarlo en hostinger lo primero que necesitamos es descargarnos el cliente yo me voy a descargar Fil cila o Fil sila porque esto lo necesitamos es Sí o Sí un requisito acá tenemos la opción de Descargar el cliente Fil sila o el servidor nosotros no somos ningún servidor

nosotros queremos conectarnos a un servidor Entonces nosotros somos el cliente Así que vamos a descargar el cliente de Fil sila acá tenemos el tipo de descarga Depende de lo que hagamos Okay nosotros Solamente necesitamos el primero si quieren descargarse losotros háganlo no hay problema pero yo con el primero para mí es más que suficiente lo Descargamos acá se nos está abriendo Lo abro acá sí acepto acepto acá lo mismo voy a ponerme un icono en el escritorio Así que le di también en marcar esta opción que se instale que se instale listo perfecto yo Mientras

tanto voy a iniciar sesión en No stinger porque se me cerró la sesión bueno acá tenemos ya el programa instalado Perfecto Bueno Esta es la interfaz que tenemos de El ftp voy a minimizarlo y ahora lo que tengo que hacer es tener los datos para Conectarme justamente el servidor y acá tenemos varias formas de acceder normalmente uno viene donde dice archivos y a cuentas ftp entonces acá tenemos esto que está acá que es justamente todos los datos que necesitamos para subir los datos a nuestros servidor primero lo que hacemos Es cambiar la contraseña de ftp

acá voy a introducir una nueva contraseña lógicamente la voy a poner en secreto esto mi consejo es que es una contraseña Muy larga Okay eh Y que que sea que sea tenga una mayúscula una minúscula que tenga caracteres especiales y que sea larga Bueno ahora le voy dar en cambiar contraseña y le di eh Y se cambió exitosamente perfecto primero vamos a copiar la IP del ftp lo copiamos acá en servidor pegamos la IP el nombre de usuario es esto que está acá lo copiamos también y lo pegamos en nombre de usuario y la contraseña

es la contraseña que nosotros pusimos y el puerto es el Puerto 21 le damos en conexión rápida yo le doy no guardar contraseñas y ahí debería Iniciar sesión esperamos y ahí se conectó fíjense que estos estos archivos que tengo acá son los mismos que yo tenía en el administrador de archivos voy a darle acá voy a eliminar esta carpeta que está acá es para volver para atrás yo acá me estoy conectando a public html esto que está acá fíjense Qué pasa si lo borro si lo borro ahí se están borrando los archivos se están Terminando

de borrar se acaban de Borrar todos si yo vengo a corte de alto no hay nada pero si yo ahora vengo agarro los archivos y los vuelvo a arrastrar hasta acá se están subiendo igual que como si estuviéramos en el administ archivos Ah se están Terminando de subir y efectivamente ahí se terminó de subir venimos acá actualizo la página y de vuelta ya tenemos los archivos completamente subidos esta justamente es la magia del ftp normalmente es muy Común utilizar ftp para trabajar eh cuando estamos subiendo páginas web para subir a servidores también se utiliza para

trabajar cuando manejamos archivos grandes y queremos comunicarnos entre un servidor y un cliente y bueno nada Así de fácil es subir una página web a ftp De hecho si nosotros venimos acá y le damos en gestor de sitios acá lo que podemos hacer es agregar un sitio yo por ejemplo le voy a dar en donde dice nuevo sitio y acá lo que venimos a hacer es Ftp yo le voy a dar ese ftp para que sea seguro el servidor va a ser este que está acá arriba Así que vamos a hacer lo mismo vamos a

copiar el servidor lo voy a pegar acá el puerto es el 21 el usuario es este que está acá Ahí está y acá tenemos que dejar en donde dice preguntar la contraseña para que cada vez que nos conectemos nos pregunte la contraseña podríamos darle en donde dice normal y acá directamente dejar nuestra contraseña escrita pero esto es un reor De seguridad No deberíamos hacer eso y deberíamos escribir la contraseña siempre de esta forma nos estamos ahorrando todos estos datos Entonces no nos ahorremos tanto demás porque podemos dejar un hueco de seguridad bastante grande le damos

en aceptar Yo cierro acá le damos en filea y yo acá puedo venir acá gestor de sitios y acá le doy en donde dice conectar me va a pedir la contraseña lógicamente y ahí ya nos ahorramos de poner todos esos datos cada Vez que queremos conectarnos al servidor y ahí fíjense cómo tenemos ya la página web cargada de vuelta y con un simple clic y la contraseña ya accedimos a nuestro servidor bueno gente ahora vamos a comenzar con la sección avanzada del curso de css Aunque En realidad estamos super avanzados o sea no sé si

esta será la sección avanzada porque ya venimos avanzados hace rato Es decir o se la sección avanzada del curso porque ccs Avanzado ya lo vimos Así que en realidad no estamos viendo ccs avanzado estamos viendo la sección más avanzada del curso ahora lo que vamos a ver es todo sobre funciones vamos a ver las funciones de escala funciones de transformación funciones de filtros eh funciones sesgadas vamos a ver un montón de funciones Yo acá simplemente tengo un di común con la caja y acá Tengo estas propiedades Okay todo nada muy raro si yo por ejemplo

uso la propiedad Background imagen okay Y uso la función URL esto es una función y cuando vengo acá y pongo la URL de la imagen acá me carga la imagen okay Voy a darle un padding mayor de 400 píxeles solo para que lo podamos ver es esto que está acá y vamos a darle 200 ahí está básicamente me está cargando la imagen por qué bueno porque URL es una función es un código entero que tiene la funcionalidad de hacer que cuando nosotros escribamos esta URL haya un código interno que lo Que hace es ir a

encargarse de buscar esa URL y poner la la foto como como valor de la propiedad Entonces esto es una función Okay también teníamos la función por ejemplo Drop Shadow que creaba una sombra en elementos teníamos la función min Max también que la usábamos con grid para definir un min mínimo y un máximo de cada uno de los elementos estas básicamente son funciones Okay yo acá voy a eliminar esto y voy a dejar una imagen que es la Deada 13 y voy a sacarle este padding así me queda esto de esta forma pero básicamente quiero que

entendamos esto de las funciones no hace falta que lo comprendan a fondo la gente que ya sabe de programación Lo entenderá Pero principalmente vamos a ver todas las funciones que tiene css no vengo acá explicarles el término de funciones que en realidad es no es más que simplemente en un lenguaje de programación es un código que para evitar repetirlo muchas Veces lo almacenamos a un nombre y puede tener parámetros que se van a usar en la función para devolvernos un resultado distinto en este caso una función es eso no es básicamente algo que nos devuelve

un valor nosotros nos enfocamos más en sus funcionalidades para arrancar quiero que veamos el primer tipo de funciones que son las funciones de filtro Okay las funciones de filtro básicamente son funciones que tenemos que usar en la propiedad filter Ya vimos la primera yo Por ejemplo vengo acá y pongo filter Okay y pongo Drop Shadow cer píxeles 0 píxeles 15 píxeles negro por ejemplo vamos a ver esta propiedad de hecho si esto que está acá se lo damos a la imagen van a ver que ahora la imagen es voy a borrar el fondo la imagen

Es quien tiene esto ven sin el Drop Shadow queda así con el Drop Shadow queda así Esta es la primer propiedad de de la primer función de filtro que vimos pero básicamente las funciones de filtro son Funciones que usamos en la propiedad filter que aplican efectos especiales como sombras desenfoques aumentan el contraste y hacen varias cosas más la primera que ya conocemos es Drop Shadow que básicamente Agrega una sombra al elemento si el elemento es transparente podemos crear este efecto interesante en imágenes transparentes si el elemento es simplemente una caja y si lo estamos dando

a la caja la propiedad Esto va a aplicarse a la caja en este caso si Tenemos esto así se sigue aplicando a la caja pero como la caja no tiene background y la los bordes sería esto acá se aplicaría pero como ya vimos si la imagen tuviera un background color por ejemplo vamos a hacer Así fíjense que ahora el Drop Shadow no se va a aplicar más acá sino que se va a estar aplicando a la caja porque ahora la caja sí tiene un contorno diferente para aplicar un Drop Shadow ahora si también se lo

aplicamos a la imagen la imagen Directamente es quien tiene el Drop Shout Entonces esta esto ya lo conocemos lo vimos en el apartado de sombras pueden ir a buscarlo si no lo vieron pero es lo más simple de todos Ahora vamos a ver otras cosas vamos a sacarle el fondo Vamos a darle un fondo azul 48 e Ahí va y vamos a sacarle esto que está acá vamos a ver diferentes eh funciones de filtro que tenemos la primera ya la conocemos es filter vamos a ver un par más si nosotros tenemos eh la propiedad Filter

y acá vamos a ver todas las propiedades que tenemos que esto es interesante no porque tenemos blur bigness contrast of Shadow y ya el nombre nos dice blur significa desenfocar Okay el blur es un efecto de blur r que se hace cuando nosotros por ejemplo le damos 10 píxeles le va a decir Che Mira esta caja va a estar desenfocada 10 píxeles esta caja y todo lo que tenga la caja Porque si el blur se lo damos a la imagen en vez de Desenfocar si la caja se desenfoca solo la imagen entonces tengan en cuenta

siempre que los filtros que apliquemos siempre se van a aplicar a la caja y a todos sus elementos hijos entonces si esto lo tiene el box se va a aplicar a la caja entera y a todos los fijos que estén adentro Por más que de repente agarre la imagen le de un un position eh absolute Y tenga un top uno o un top cero Mejor dicho y el body tenga un position relative Incluso si a la imagen Le damos pos no sé que yo relative y hacemos que esté top men 500 pixeles y se vaya

para arriba o incluso que agarremos y le demos un margin top % dec bueno pasa esto no importa si aplica a todos los hijos y a la misma caja Entonces el primer efecto es este es un blur podemos darlo en rems también un Rem en porcentajes no se lo podemos dar porque esto porcentaje que 10% de qué What the fuck pero sí podemos dar medida como Pixel también le podemos dar TR 2 cm por ejemplo 1 cm Pero esto es raro normalment se le suele dar rems o eh pixeles Por ejemplo cinco píxeles un efecto

muy común para blur por ejemplo es si abrimos una ventana modal se acuerdan cuando abríamos ventanas modales es a todo lo que está en el fondo lo desenfocar por ejemplo le damos 20 píxeles de desenfoque y a la cajita que va a estar por fuera la super ponemos Entonces está toda la página desenfocada pero lo que estás haciendo Foco es en donde queres prestar atención es un efecto muy común a ver si encuentro el ejercicio de modales modal composition absolute Y tenemos al dialog Okay y después tenemos al resto de elementos yo al resto de

elementos lo voy a poner en otro di que yo puedo hacer que por ejemplo cuando el diálogo esté abierto no al div blur le dé un filter blur 20 píxeles entonces todo el fondo no sé si tanto es demasiado quizás Ahí va too está desenfocado Perdón ahí No sería ahí bueno a esto le vamos a dar un Z Index no sé 10 para Que aparezca por arriba y está Entonces tenemos todo el fondo desenfocado Ven y cerramos y vuelve a estar acá lo ideal es que cuando cerremos la ventana o sea esto vuelva a la

normalidad Pero eso lo pueden hacer con javascript O creo que hay una forma de hacerlo con css pero ahora rápido así no se me ocurre pero es un buen efecto para eso no que si tenemos un modal abierto que el fondo Esté desenfocado lo cerramos y el fondo vuelve a enfocarse ese es un buen uso buen acá volvemos a la otra carpeta de vuelta con esto Bueno ese es el primero que vimos tenemos blur después tenemos otro que en vez de blur es que esto significa brillo si yo por ejemplo le doy 0.5 fíjense lo

que va a estar pasando y es que se va a empezar a oscurecer si yo le doy cero es que va a tener cero brillo Y si yo le doy uno es lo normal ahora podemos ir más allá le Puedo dar 1.5 le puedo dar dos le puedo dar cuatro esto básicamente lo que hace es ir aplicando multiplicadores lineales a la capa de entrada esto es más para la gente que hace diseño des preocúpense pero básicamente acá manejan el brillo ve dos es más fuerte tres más fuerte 10 es brillo puro y hasta acá no

estamos la diferencia hasta el cuatro no hasta el cuatro por ahí porque después con tres de dos 1 y así menos se va notando 1.2 por ejemplo y más brillo y así pero ya También si le restamos brillo es otra forma también de hacerlo no Por ejemplo si estamos haciendo lo del modal como antes quizá No necesitamos desenfocar todo por ahí simplemente con sacarle fondo al brillo es suficiente con sacarle brillo al fondo no fondo al brillo Así que eso hace el brillo también podemos darle en vez del cero punto le damos solamente punto 3.6

eh Ahora si le queremos dar más de uno ahí Sí perdón si queremos dar más de cero Ahí sí uno o un punto algo pero si esto es un cero lo podemos reemplazar y sacarlo y ahí está después tenemos el contraste Okay yo lo voy a dejar ahí si yo pongo contrast y acá pongo cero la imagen va a ser gris si yo pongo uno va a tener un contraste normal porque eso es lo que hace el contraste no A ver esto es otro concepto de diseño pero prácticamente cuando o sea el contraste básicamente viene

siendo como la diferencia entre diferentes partes Entonces nosotros lo que estamos haciendo es haciendo que los más claros sean más claros y los más oscuros sean más oscuros mientras tenemos cero cer0 es la diferencia es cero todo va a ser igual uno es un contraste normal y si yo por ejemplo pongo dos o tres o cco o 10 Esto no se nota Okay puedo poner 100 puedo poner 1000 y parece que no se nota mucho okay Pero qué pasa si yo por ejemplo acá pongo otra imagen voy a agarrar una imagen mía Como por ejemplo

Esta que está acá uno así queda la imagen con un contraste cero queda gris Pero si yo le voy aumentando el contraste van a ver que eso es lo que hace hace que los colores claros sean más claros y los negros sean más negros O sea no los negros Perdón los colores oscuros sean más oscuros y los claros sean más claros aumenta la intensidad aumenta Esa diferencia Okay así que por ejemplo si este color que está acá es más oscurito y este color que está acá Es más claro hace que este sea todavía más claro

y este sí es oscuro que sea más oscuro entonces si yo pongo 10 ven esto que antes era oscuro ahora me lo hace super oscuro esto que es claro me lo hace más claro y mientras más vayamos aumentando la intensidad más va a ir haciendo esto llevándolos al límite de su intensidad de color al límite de su matriz bueno tampoco me voy a poner tan técnico esto es el contraste y lo podemos trabajar con contrast también Podemos poner como antes no pun 5.8 esto le baja el contraste a las imágenes después tenemos gre scale Gray

scale si por ejemplo acá yo le doy uno se convierte completamente en gris si yo le doy 10 100 etcétera ya no cambia Yo le doy en cero se queda normal porque no está en la escala de grises lo que hace Grey scale es convertir mi imagen a una escala de grises Qué hace bueno prácticamente es es parecido a la saturación es prácticamente la Saturación si yo acá le doy por ejemplo saturate Este es otro acá por ejemplo le doy eh uno se queda normal uno le doy 0.5 la mitad de saturación tiene o sea

literalmente tiene la mitad de saturación que tenía antes si yo le doy dos tiene esto Ahora si yo por ejemplo le doy gre scale Y le doy dos No pasa nada le doy -1 tampoco pasa nada pero sí es igual en la saturación si yo por ejemplo le doy grecale 0 es lo mismo que si yo por ejemplo le diera saturate 1 No Cambia nada si yo le doy saturate pun 5 ven es lo mismo que si yo le diera scale pun 5 no cambia Okay la única diferencia con gre scale es que cuando nosotros

trabajamos con la escala de grises literalmente está reduciendo la intensidad de color en cada una de las matrices o sea se reducen los verdes se reducen los rojos y se reducen los azules pero con la ventaja que tenemos de usar saturate Es que además de poder hacer esto de punto5 1 y 0 que esto lo Podemos hacer con grecale También tenemos para aumentarla más todavía le podemos dar 2 3 10 50 y esto lo que hace es eso es aumenta la intensidad de los colores mucho al punto de que lo me convierte mi imagen en

esto también se usa mucho en cine para crear efectos drásticos o de miedo pero bueno este es el efecto de saturación y este es el Gray scale que los convierte escala de grises si me preguntan estuve revisando la documentación oficial para ver si Internamente había alguna diferencia pero lo único que cambia es que parece que internamente realizan cálculos diferentes pero nada funcionalmente Parecen lo mismo después tenemos hue rotate que est es bastante interesante si yo por ejemplo acá le doy 10 Vamos a darle 50 no afecta porque tenemos que usar grados si yo le doy

deg ahí empezó a cambiar esto qué es lo que hace Está eh básicamente cambiándonos una ruedita de la matriz no sé cómo explicar esto Imagínense Okay que estos son los colores normales lo que nosotros hacemos Cuando hacemos un H rotate es rotar en un en el famosito círculo de la de matrices el color Entonces yo por ejemplo acá lo podemos ver si yo por ejemplo tengo la imagen en rojo por ejemplo como sería este imagen que por defecto está en rojo ven si yo le pongo cero está en un naranja rojo por acá más o

menos por 15 si yo le agrego 100 se está yendo para el lado de los verdes Por eso la imagen se me pone pasa de los rojos y los naranjas a los verdes si yo por ejemplo le doy 240 debería estar yendo a los azules 240 de ven se me está yendo para los azules violetas Es más si le resto un poquito debería estar más en los celestes le voy a dar 200 Ahí está ves azulcito celestito le pongo 100 60 Ahí está tocando de vuelta Los verdes quiero llevarlo más a Violeta Bueno lo pongo

en vez de 240 le pongo 280 y ahí ya lo tengo más Violeta Por qué Porque Si yo estoy acá y este es el cero es de ese color ahora si yo por ejemplo tengo el fondo que el fondo es el fondo de qué color es vamos a ver el fondo es de color azul o sea que el fondo está por acá más o menos Qué significa que si está en 210 gr si yo lo subo 10 gr para arriba o sea estarían 310 entre 300 y 330 O sea si yo de 1110 lo subo

100 gr se iría a un color violeta Así que vamos a ver si yo le doy 100 deg el azul que teníamos acá en el fondo debería irse a Violeta qué es lo que pasó ahora si yo le resto grados deberíamos llevarlo a verde si yo en vez de que le sume 10 gr se ponga así yo le resto 10 gr debería estar en los verdes porque 210 - 10 es 110 por acá Entonces debería estar en un verde actualizo y ahora efectivamente se me puso verde eso es lo que hace el H rotate básicamente

agarra todos los colores y los hace rotar Okay hasta que cada uno se mueva la cantidad de grados que especifiquemos acá Eso es todo Es Una boludez es un efecto muy común para usar en conjunto con una propiedad llamada backdrop filter que ahora les voy a mostrar Qué interesante que es de hecho vamos a hacerlo ahora esto lo vamos a sacar no no lo vamos a sacar vamos a venir acá y poner Ja la imagen la vamos a poner de fondo ahí está la imagen está acá y vamos a hacer que la imagen tenga un

Max withd del 100% ahí se adaptó perfecto object fit cover ahí estamos buenísimo vamos a Agarrar el box y darle position absolute y fíjense cuál es el efecto acá vamos a sacarle el fondo el background color Ahí está fíjense Qué pasa si agarramos y le damos en vez de filter Back Drop filter lo que está haciendo es actuar como una capa de ajuste y la capa de ajuste va a aplicar este efecto entonces acá todo los efectos que apliquemos se van a reflejar en el fondo yo por ejemplo acá de vuelta le pongo el blur

y 10 píxeles fíjense Cómo me desenfoca esa parte le Pongo Pero no se me desenfoca el contenido eh o sea si yo como les conté antes si nosotros le damos filter vamos a mantener la propiedad de antes si le damos filter se desenfoca todo lo que está dentro Todo se desenfoca en cambio Si nosotros le damos backdrop filter el contenido no se desenfoca sino lo que está por debajo de esa caja es bastante loco entonces acá le damos como dije antes el Blue el blur perdón y ahí estamos le damos por ejemplo eh el Contrast

contrast y le damos por ejemplo tres y aumenta el contraste en esta zona Y esto es bastante loco acá le voy a dar por ejemplo un Max del 50% a esta caja le voy a dar un wid del wid del 100% Ahí va y fíjense Cómo aplica este efecto ahora la muevo le voy a poner un left 0 50 píxeles y ahí fíjense que se separó un poquito vamos a darle left 250 píxeles left 200 píxeles Entonces tenemos este efecto ven de la imagen que es como que le afecta al fondo H rotate Voy a

poner 200 de entonces todo el fondo ahora está cambiando porque este es el borde de la caja si le doy un Border cuatro píxeles solid negro Ahí van a ver bien el fondo Entonces ven eso es lo que está haciendo backdrop filter Entonces así funciona filter y backdrop filter mientras que filter es un filtro que se aplica a la propia caja y a todos los hijos backdrop filter hace Exactamente lo mismo pero se aplica solamente a los elementos que estén por Debajo lo mismo que si yo por ejemplo acá le diera a la imagen El

backdrop filter ves el fondo de la imagen es el que estaría recibiendo los efectos no más bien ni la imagen ni lo que esté ahí así que nada es un efecto bastante piola pero no termina acá también tenemos otra que es opacity Pero esto no funciona en el backdrop solo funciona en el filter opacity y puede ser 1.5 por ejemplo entonces simplemente le estamos sacando opacidad ven punto 3 es como lo mismo Que usar opacity después tenemos otra que es bastante rara que es invert te invierte los colores o sea en es como el H

rotate Pero te los invierte o sea Tenés que ir a buscar al al invert acá lo pueden ver ven Este es el espectro original y este es el vectro invertido Entonces por ejemplo el contrario del rojo naranja y este son los celestes Azules y demás Entonces si se fijan si nosotros por ejemplo agarramos el invert y le damos el invert a la imagen Ahí va Esto va a pasar de tener negros a blancos rojos Y cálidos a frío se invierte la imagen y hace No no hace falta que lo hagamos tanto si yo por ejemplo

acá pongo uno se mantiene uno si le doy cero no se invierte nada si le doy punto c se queda ahí porque la inversión tiene que mover los tonos no entonces si le damos cer0 es como si diéramos saturación al 0% o contraste al 0% cosa que también es medio raro no tenemos esto ahí se va perdiendo la Fuerza ven hasta llegar a un básicamente contraste cero y después al revés se invierte ven Ah entonces primero básicamente para invertir de color tiene que atravesar todos los colores hasta llegar a la escala de grises para poder

invertirse si no pasan por todos los grises no se invierten entonces ponerlo en punto c es como dejarlo sin contraste Y eso es lo que hace ven pasa de reducir todo su contraste a invertir todos sus colores todo su espectro de colores y Empezar de vuelta a aumentar el contraste hasta llegar al invert un que es totalmente invertido Entonces si le damos ahí es lo mismo que si le damos Grey scale que se pone gris que es lo mismo que si le damos saturate pero saturate o sea esto lo que hace te lo deja siempre

en uno no cuando vos no le das paréntesis saturate te lo deja en uno contrast te lo deja en uno Gray scale Okay te lo deja en uno es lo mismo ven que no hagamos nada y lo mismo Invert te lo invierte hablando de funciones también usamos la función eh ahora que me estoy acordando la función View y la función scroll Así que ahí tienen otros ejemplos de funciones y después tenemos el último de todos que es el cpia que si no le damos nada se pone cepia lógicamente porque es como si dijéramos uno pero

básicamente es un efecto raro pero te pone todo en color cpia es un filtro bien de Instagram que quisieron aplicar toda la página color Cpia venís al Body y le aplicá un cepia y Ah tenés toda la página sepia ahora si ustedes quieren aplicar más de un filtro lo pueden hacer simplemente con espacios espacio blur y le dan 10 píxeles por ejemplo no y ahí le dan contrast dos y aumenta el contraste Esto está bueno que lo sepan porque es eh los filtros se Ejecutan en el orden en el que los pongamos si yo por

ejemplo pongo el blur después del contraste el efecto es un poco diferente lo ven se nota Porque Primero se aplica el contraste y después se desenfoca ya con el contraste en cambio si primero pongo el blur y después el contraste Miren la diferencia hay una diferencia entonces Está bueno que sepan que los filtros se aplican en el orden en el que ustedes los pongan Entonces yo por ejemplo puedo venir acá y agarrar el a 13 Okay voy a sacar esta imagen de acá Ah va voy a agarrar voy a centrar en la a13 a esta

caja le voy a dar margin auto Ahí va así se centra le Voy a sacar el position absolute y ahí está entonces ahora qué pasa si yo por ejemplo vengo y la imagen le pongo como verán un no sé un sepia y le pongo en uno por ejemplo eh Grey scale y lo dejo en Grey scale y acá le pongo el Drop Shadow y después del gre scale le puedo dar invert y se invierte es más oscuro porque en vez de ser un gris claro es un gris oscuro ahora si primero pusiera el Drop Shadow

fíjense como el Drop Shadow se me pondría blanco entienden si yo a Esto le doy un background color 48e acá Se nota por qué Porque el invert me invierte todo si yo el invert lo pongo antes Ahí va fíjense que lo que me está haciendo esto Me está poniendo un fondo negro como le dije acá pero si yo el invert lo pongo después primero la imagen va a tener este este efecto y cuando le agrego el invert se van a invertir los colores en vez de que el fondo en vez de que la sombra sea

Blanca es negra y en vez de que la sombra sea Negra es blanca depende del orden en el que lo ponga pero nada eso es todo sobre el primer tipo de función que son básicamente la las funciones de filtro que son eh funciones que podemos aplicar en backdrop filter y en filter que son dos propiedades de css de los elementos Así que los invito a que jogen y a que exploren porque si se acaban de dar cuenta acaban de aprender una habilidad super poderosa eh Porque es muy usado yo lo usé bastante de hecho fíjense

que yo No quise usar a mí no me gusta usar cosas que no enseño o sea cuando hacemos ejercicios no me gusta usar cosas que yo no haya enseñado antes aún así me vi obligado a usar el Drop Shadow en más de una ocasión o sea fíjense lo útiles que son así que bueno ahora vamos con el siguiente tema que son las funciones de transformación ya van a ver para qué las usamos pero también se usan bastante las que suelo usar bastante son las de scale las de rotate skill también Bueno ahora Vamos a ver

pero son bastante interesantes estas funciones las funciones de transformación que no son funciones de transformación como tal sino que vienen de una propiedad transform Porque antes estas propiedades se aplicaban sobre una así como las propiedades de filtro se aplican en filter bueno las propiedades de transform se aplicaban en transform Pero bueno ya lo veremos en la próxima sesión Así que Vamos bueno gente ahora vamos a ver las funciones de transformación que en realidad como digo Son funciones que en realidad en escalar sesgar Eh rotar bueno y trasladar elementos no que transforman al elemento transforman sus

propiedades la primera de todas vamos a trabajar con lo mismo que teníamos antes que es esto que está acá la primera de todas es scale scale lo que hace es cambiar la escala del elemento Yo acá por ejemplo le doy dos el elemento Agranda si le doy cero desaparece porque esto lo que hace es trabajar en una escala de tamaños estoy diciéndole que va a ser 1.5 de su tamaño si yo por ejemplo le doy que Esto va a ser de 100 píxeles al darle un scale 1.5 le estoy diciendo no vas a tener 100

píxeles por 100 píxeles vas a tener 150 * 150 si le estoy diciendo dos es como multiplicarlo por 2 que es 200 * 200 si yo le doy cer0 es como multiplicarlo por cero Entonces es cer entonces básicamente así funciona El scale No yo puedo modificar las dimensiones pero esta propiedad antes estaba adentro de otra que se llama transform que ahora vamos a ver bien su uso y acá podemos ver varias de las cosas que se pueden hacer con transform pero la principal es esta por eso esale es una función de este tipo porque le

podemos dar por ejemplo dos y es lo mismo que antes pero también tenemos scale I que es como Okay solamente vas a tener el doble de tamaño a lo alto o sea En el eje i o podemos darle scale x y va a tener el doble de tamaño a lo ancho Entonces yo puedo decir por ejemplo Che Mira el logo de a 13 no me gusta Así que voy a hacer que sea un poco más ancho de lo que debería ser bueno 1.2 por ejemplo Ven y se hace un poquito más ancho dig Che tiene

que ser mucho más ancho Okay se hace mucho más ancho Esto es lo que hace scale x y scale y lo mismo pero solamente ca lo alto y si no le damos nada y solamente le damos a scale crece Y hacer esto es lo mismo que usar simplemente la propiedad scale Ven 3.2 y se queda igual y scale también sirve con dos valores yo por ejemplo puedo decir scale 2 vas a crecer dos y uno entonces crece dos a lo ancho y se mantiene en uno a lo alto Entonces yo puedo venir acá por ejemplo

y decirle vas a tener uno y uno es decir vas a tener la escala original pero vas a tener a lo alto el doble o el quíntuple Y a lo largo o a lo ancho el doble Entonces así función Scale Okay el primer parámetro es el ancho el segundo el alto X y Y si le damos uno solo se aplica a ambos es la primer función de transformación que tenemos que en este caso se digo es una función de transformación porque originalmente se usa desde acá no que es el scale después tenemos el scale 3D

que no lo vamos a ver ahora pero es básicamente para mover en 3D un objeto es algo que por ahora no nos sirve mucho pero sacando las funciones de escala También tenemos otra que es el skw que est aunque vengamos acá y pongamos skw y pongamos 20 de que se trabaja con de no sirve Okay pero acá sí sirve y si le damos 20 deg aunque no notemos gira en este caso no lo vamos a aplicar a la imagen porque quiero que lo podamos notar en la caja y esto es lo que hace Ven literalmente

sesga a la imagen Es como que la agarra y la hace hacer esto tuc okay tuc tuc Okay tuc pero no es que no es que agarra la imagen y la rota no No hace esto hace esto así Okay tuc después tenemos otra que es rotar rotar ahora vamos a agarrar vamos a crear dos cajas para que lo noten bien crear dos cajas Ahí va Vamos a darle a esto un Flex Direction column Ahí va si están un abajo de la otra y ahora vamos a ver la diferencia Yo le doy Box First Child También

tenemos otra que es rotate que es de rotar yo por ejemplo puedo venir acá y hago eh transform Okay rotate acá simplemente pongo 20 deg entonces Mientras que la rotación literalmente rota 20 gr el skew es como que agarra la parte de arriba y la parte de abajo y las hace eh las inclina de tal forma que los ángulos se muevan 20 gr en este caso este ángulo se cierra a 20 gr y este ángulo se abre 20 gr este ángulo se cierra 20 se abre 20 gr y este ángulo se cierra 20 gr Eso

es todo lo que hace A diferencia de además de sk También tenemos skue I que solamente lo hace en el eje I tenemos sk x que solo lo hace En el eje x Okay y skq normal lo hace en ambos ejes fíjense Qué interesante porque sk I es como hacer un skew normal y hacer un agregarle una rotación de 20 gr no es bastante loco porque hacer esto es lo mismo que hacer venir acá y ponerle una y acá adelante ven ahí va Ven actualizamos y es casi lo mismo No es lo mismo pero es

casi lo mismo y nada Esto es lo que nos permiten hacer No a diferencia de sk rotate si lo podemos usar sin el transform Yo vengo por Ejemplo hago rotate ven rotate 20 deg que deg significan grados y simplemente la roto Ven y vengo acá y le doy 60 y la roto 60 90 y la roto 90 esto es una bolude es igual Ah acá le tengo que dar en Box así uno se Uy no perdón mir esto se va a aplicar a todas las cajas hasta ahí estamos bien pero un filtro se va a

aplicar o sea uno se va a aplicar a la última y otro a la primera Ahí está si digo 0 gr estoy haciendo que gire 90 gr le digo 180 gira 180 gr literalmente la Pongo al revés una de las cosas que me pasaba en el evento del día del programador inscríbanse en este evento vengan acá entren a la preinscripción y pongan su mail Pepito Pérez @gmail.com le dan confirmar y de esa forma eh Cómo que no se pudo completar el registro eh la concha ya va a estar arreglado para cuando ustedes lo vean Ah

igual la página que esta página la hice nada en 3 horas y la tuve que hacer rápida ya Para abril seguramente mejore Muchísimo esta web porque es un desastre Así que la vamos a hacer mucho mejor que esta que es un literalmente es un asco Así que la voy a mejorar yo personalmente pero nada pueden ir a preinscribirse si quieren esto que estacar este efectio que están acá este efecto saben cómo se hace con el bfor Exacto con el bfor Ah y lo que estaba diciéndoles es que mucha gente cuando le dimos el precinto de

a13 porque el precinto de a 13 se lo dábamos a varias Personas no sé las que tenían el VIP o las que tenían que eran speakers o las quean alunos lugares o los dueños de marcas y demás entonces muchos se llan y me decían Che Pero qué es el Bob y claro lo daban vuelta y esada 13 pero visto de esta forma parece que dice el Bob Así que despídase del logo de Ada 13 porque este logo de Ada 13 es el último que van a ver por acá Bueno volviendo a lo que nos compete

podemos rotar 360 gr y de alto Pero para qué rotarias un elemento 360 gr si es lo mismo que dejarlo en cero no hay diferencias y bueno muchachos si yo por ejemplo le hago un over o lo hago lo hago en una animación pero vamos a darle en over ahora le ponemos la rotación ven le ponemos la rotación y acá le dejamos en cero transition rotate un segundo entonces ponemos el mouse encima y rota Ves Eso es lo que hace en Casos como estos nos puede ser bastante útil el rot porque nos genera este efecto

y también tienen El sk Por ejemplo si pasan del sk 20 deg vamos a dárselo a este también sk 20 deg acá pueden poner sk no sé 190 de entonces pone el mouse encima y hace esto si Bueno no es tanto cómo puede ser que 20 deck haga esto y 190 de haga otra cosa y bueno por los movimientos que hace si usted le dan 50 fíjense lo que hace V Se estira si usted le dan 240 y acá le dan transform ven ven ahí el efecto que está haciendo ahí se puede apreciar un poco

No es como que cambia voy a darle 140 para que lo noten mejor 6 segundos fíjense ven este esto Así es como va cambiando de propiedad se nota Bueno ahora le vamos a dar en 90 para que noten lo que hace con 90 pongo el mouse encima y ven lo que está pasando así es como funciona así que nada Está bueno que que entiendan este funcionamiento normalmente uno lo usa mucho para torcer los bordes un poquito No mucho pero un poquito por ejemplo ahí entonces vos Venís ahí y sabes que puedes hacer juegos con el

before con el after para efectos de botones o para mover elementos Entonces es algo Bastante útil norment uno lo usa de Entre 10 a 50 gr porque por ejemplo más de 50 es medio guaso ven hasta ahí está o hasta 60 como máximo para ejemplos muy extremos pero ponerle con 20 se tuerce hasta ahí y no queda mal con 10 se vuelve a normalizar un poco pero ya con no sé si le dan 70 fíjense que se va un poco y después la Última que tenemos es el trans el otro que es muy común que

es el Translate ahora vamos a sacar todo esto vamos a sajar solamente una caja y vamos a dejarlo ahí perfecto También tenemos otra propiedad vamos a simplemente tocar esto que está acá Ahora sí Y ahora ya podemos trabajar con esta eh podemos darle la propiedad transform Translate y esto lo que hace es desplazar el elemento yo por ejemplo doy 30 píxeles ven se va a estar desplazando el Elemento lo que hagamos que se desplace 10 pixeles y esto toma dos valores tenemos Translate I que es para desplazarlo hacia abajo hacia arriba y demás ven Esto

es lo que hace vamos a dejarlo en 500 y se va para abajo y después tenemos el X que lo mueve en el eje x ven eh 100 300 - 100 men 300 y así y después tenemos el Translate común que es el que vimos recién que por defecto funciona solo en x pero si le damos dos valores Funciona en x y en I que en una función no funciona okay A menos que lo separemos por coma porque las funciones funcionan por coma Ya saben que los argumentos están separados por coma tenemos que pasárselos o

la otra es simplemente sin usar el transform usar Translate que ahora se puede usar de forma nativa trans late y le damos 200 píxeles y funciona solamente en x y si le damos el otro parámetro funciona también en el eje I entonces podemos Desplazar un elemento en ambos ejes Así es más o menos como yo le doy uso a las funciones de transform ya que no hay más hay otras que por ejemplo son las de Matrix o las de Matrix 3D pero son cosas que son demasiado complejas y matemáticamente estúpidas De hecho acá me hice

más o menos un temario de las cosas que vamos a ver ahora okay e y Estas son las que explicamos hasta ahora que son funciones de filtro sesgar trasladar votar y escalar que son lo que Vimos hasta ahora fíjense que acá vamos a ver varias funciones más la de Max min clamp de imagen y forma variables custom properties e esto igual es algo que escribí así noom Más pero más o menos va a ser el orden Genuino en el que lo vamos a trabajar pero acá si se fijan estoy eliminando un montón de cosas okay

Que no voy a enseñar que las iba a enseñar pero no las voy a enseñar porque es demasiado estúpido enseñar esto ahora funciones de materiales y de funciones Matriciales y de perspectiva que es la que yo les dije que era Matrix 3D Matrix etcétera o la de perspective que también por ahora no le vamos a dar uso las de valor escalonado que son round mood y Rem que tampoco nos van a servir las trigonométricas para qué quieren ustedes hacer un cálculo de seno coseno y tangente en css bueno para desarrollo juegos se usa bastante Así

que si quieren Pero nadie hace juegos con html y css lo suelen hacer con otro lenguaje De programación Así que les va a convenir aplicarlo con el lenguaje de programación con el que lo tengan que trabajar no con css html por eso por eso es raro funciones exponenciales también para qué quieren ver la función p por ejemplo Qué le van a pasar 10 al cuadrado es medio estúpido usar funciones exponenciales funciones de signos como ABS y Sign tampoco son las voy a enseñar funciones de contador funciones de fuente Okay que afectan a La tipografía funciones

de facilitación que de hecho funciones de facilitación Ya vimos pero hasta ahí Pero bueno no no voy a seguir viendo más son cosas que no son necesarias O sea hay cosas que no necesitan sab porque no las van a aplicar nunca en su vida okay Nunca si hacen páginas web hacen aplicaciones no las van a usar nunca Entonces no tiene sentido explicarlas así que les quería contar eso para que se queden tranquilos de que hay un montón de cosas Que no no tienen sentido explicarla Ahora sí si las quieren explicar si quieren saber qué es

lo que no estamos viendo Es todo esto que está acá que le voy a sacar el tachado para que las puedan ver Okay pueden sacar screenshot y Buscar porque todo esto es lo que no voy a enseñar es como que yo les diga les voy a enseñar Cómo con Paint pueden hacer una animación para qué nadie anima con Paint así que bueno vamos con la siguiente clase que es la función calc Esto es lo único de aritmética yo por ejemplo le puedo decir mira quiero que este esto tenga 100 View por he menos 20 píxeles

entonces Calcula Cuánto es el view por he y les restas 20 píxeles y así es buenísimo así así que bueno vamos a ver cómo funciona calc se me acaba de ocurrir una mejor forma de enseñar calc que de hecho calc también puede usarse con variables para Bueno potenciarse todavía más así que prefería esperar y lo próximo que vamos a ver ahora son las Funciones min Max y clamp funciones de comparación vamos bueno gente ahora vamos a ver tres funciones de css que son funciones de comparación que son Max min y clamp hay personas que dicen

que Max es para establecer un mínimo y una medida ideal que min es para establecer un máximo y una medida ideal y clamp es para establecer un máximo y un mínimo y una medida ideal Pero esto es medio que falso porque no es del todo así sino que Max min y clamp lo que hacen es comparar tres valores y se va quedando con el máximo el mínimo o con el valor ideal Así que ahora vamos a ver cómo funciona esto porque en realidad son funciones de comparación para arrancar vamos a crear esto ya lo tuve

que haber hecho antes pero bueno les pido disculpas vamos a arrancar creando un simple div va a tener la clase Box y va a tener un simple texto vamos a agarrar ahora este div Vamos a darle un hte de 200 píxeles Un background color 48e un display Flex justify content Center o más fácil display grid y Play content Center que es una forma que ya vimos para centrar contenido Vamos a darle color blanco y un font size de 40 píxeles por qué no y ahí está Vamos a darle un font 60 píxeles incluso y vamos

a darle un wid de 600 píxeles Ahí está por último le vamos a dar un margin auto y arriba y abajo unos 60 píxeles más 100 píxeles 120 entonces acá tenemos nuestra cajita Nada nuevo todo correcto hasta acá está todo bien Vamos a hacer de hecho algo que tenga un poco más de sentido vamos a sacarle el hate y vamos acá darle un h1 y Esto va a tener un título y acá va a haber un párrafo que va a tener un Loren acá creo que podría tener mucho más sentido esto vamos a sacarle el

font size y Esto va a quedar así vamos a poner font size de 20 píxeles y si se fijan ch alto Pero por qué cuando a la caja le das este font size esto aumenta Bueno Porque este texto en realidad no está medido en font size y este tampoco está medido en rems por defecto el navegador ya trae las medidas en Rem entonces por eso ustedes van a decir Che si le acabo de dar a la caja padre 60 píxeles los hijos no deberían heredar estas medidas no porque los hijos ya traen medidas por defecto

los h1 por defecto traen dos Rem y el font size de las cajas padres suelen ser de 16 peles están heredados del Root Entonces si el Título es dos Rem y la caja padre tiene un font size de 60 píxeles el font size del título va a ser de dos Rem o sea el doble de 60 píxeles o sea 120 lo mismo pasa con esto esto tienen el tamaño de un Rem lo que significa que si decimos que el font si va a ser de 60 píxeles este texto va a ser de 60 píxeles porque

un Rem es igual 60 píxeles entonces acá vamos achicar y vamos a ponerlo a 40 Esto está bueno Porque pueden ver un poquito la magia no de trabajar con con Font size Rem por eso justamente es una medida responsive porque depende el tamaño se va a ir a gustando no Entonces está bueno así que bueno Vamos a darle de 40 pel de 30 píxeles mejor y vamos a darle un padding de 20 píxeles un poquito más Vamos a darle arriba y abajo de cer0 y a los costados de 40 ahí tiene mucho más sentido Pero

vamos a agarrar al h1 y le vamos a dar un font size de 2.4 Rem así crece un poquito más Ah no mentira 2.4 Rem pero atentos acá porque Yo le voy a dar enter acá y esto se va a achicar Por qué se achica porque acá viene la magia en realidad por defecto no tienen dos Rem tienen dos m por qué Porque el em es una medida que busca Cuál es el font size de las cajas padre Mientras que el Rem solo Busca el Root el el em del Root okay O sea que por

defecto viene así 2 em si yo le doy 2.4 Rem no va a aumentar va a chicar porque el em o sea el tamaño del Root es de 16 píxeles hasta acá está todo bien nada Raro pero está bueno repasar cada tanto porque estamos haciendo cosas no no quiero solamente hacer proyectos al final del curso si sino que lo que me interesa también es hacer proyectos durante todo el curso porque así cuando llegamos al final del curso tenemos menos cosas para hacer porque habremos adquirido más conocimientos de forma más práctica incluso Entonces si se fijan

casi todas las cosas que explicamos las explicamos con prácticas con ejercicios Con proyectos Así que está bueno eso en vez de darle dos Rem le vamos a dar dos em y ahí nos quedó bien pero le vamos a dar un margin bottom de cero así se nos pega un poquito más y vamos a darle 2.2 para que no quede tan grande Ahí está Me gusta esto qué es lo que tenemos que explicar ahora Bueno lo que tenemos que explicar ahora es cómo funciona Max min Y clam si yo acá por ejemplo le doy un Wi

vamos a sacarle este Wii de 600 píxeles si yo uso la función min 600 Píxeles y por ejemplo 100% Qué es lo que está pasando acá es más 600 píxeles o 800 píxeles vamos a arrancar con esto min lo que va a ha ser es una función que va a devolvernos El más chico Qué significa que nos va a devolver el más chico bueno las funciones cuando entren en programación lo van a ver solamente nos devuelven cosas Si yo por ejemplo hago sumar a + b si yo a digo que es 20 y b digo

que es 30 20 + 30 es 50 Entonces cuando nosotros ponemos sumar 20 + 30 nos va a devolver 50 porque nosotros estamos ejecutando un código y ese código automáticamente se convierte en 50 por ejemplo yo digo zoom 20 + 30 y esto se va a convertir todo este código en 50 eso es que nos devuelva ent si yo estoy diciendo que min va devolver algo significa que este código el código que tenemos acá escrito se va a transformar en otra cosa okay en algo entonces min lo que nos va a devolver es o 600

o 800 Pero cómo elige bueno min elige el valor Más chico hace una comparación dice ey Qué valor es más chico 600 píxeles u 800 píxeles si el más chico es 600 píxeles esto nos va a devolver 600 píxeles Entonces vamos a chequearlo actualizamos y se queda exactamente igual Entonces para qué nos sirve min si siempre nos va a volver más chico O sea si yo acá le pongo 500 me va a volver 500 Por qué Porque entre 600 y 500 El más chico es 500 La pregunta es para qué quiero usar esto no si

para eso directamente si yo Que 500 es el más chico vengo acá y le pongo 500 pixeles y Listo Ya está bueno thisis wrong por qué porque esto sirve para comparar medidas absolutas o fijas con medidas relativas si yo por ejemplo acá le voy a poner 100% que es lo que les quería Mostrar el más chico es 600 píxeles por qué Porque si nosotros le damos wid 100% 100% es más grande entonces no me lo va a devolver por eso entre 600 y 100% me devuelve 600 píxeles ahora esto Aplica para esto si yo Empiezo

a achicar lo Okay acá no va a aparecer nada Vamos a darle 900 píxeles para que se note más acá se va a quedar con 900 Pero si yo empiezo achicar lo vamos a ver que se adapta Okay acá no lo podemos ver pero se adapta Vamos a darle un margen para que se note mejor el margen a los costados va a ser auto Okay pero no le vamos a dar un margin auto Vamos a darle un No sí vamos a darle un margin auto pero al Body le vamos a dar un padding de 20

píxeles entonces acá Como pueden ver vamos a darle el box sizing Border Box también para que no se nos desborde y se pueda notar mejor el efecto Border Box Ahora sí bueno acá se nota perfecto hasta acá está centrado y mide 900 píxeles que es lo que le dijimos acá menos el padding Entonces cuando nosotros empezamos a achicar esto acá se va a adaptar por qué porque acá no tiene la medida de 600 píxeles si nosotros Solamente le diéramos 900 píxeles esto qué pasa no es útil acá es Útil sí acá sí es útil pero

acá Deja de ser útil porque no se está adaptando en cambio acá sí se está adaptando Entonces es como si tuviéramos un Max wiet y un wet esto es increíble Pero pará eso no es todo También tenemos la otra otra función que es Max que Max lo que va a hacer es quedarse siempre con el más grande entonces este va a ser lo contrario Este es el más grande entonces se queda con el 100% Ahora cuando el 100% es menor a 900 píxeles como es este El caso acá esto mide 900 píxeles no me va

a devolver 100% Porque ahora el 100% no es 900 píxeles es menos Entonces la medida más grande entre 900 y 100% es 900 píxeles Entonces se queda con 900 píxeles Entonces maximin no sirven para eso no sirven para tener un valor mínimo un valor máximo por eso lo ven de esa forma pero en realidad lo que está haciendo internamente es comparar dice Okay Cuál es el máximo valor entre estos dos bueno puede ser este o puede ser Este okay Y podemos seguir agregando yo puedo venir acá y le puedo dar 200 por Entonces el máximo

valor siempre va a ser el 200 por me está comparando 900 píxeles con 1000 y con 200 Yo acá le voy a dar 10000 para que se note mejor y por ejemplo acá el máximo valor es 200 por. pero cuando achicamos acá el máximo valor es 10000 Entonces se queda con 18 O sea no es que solamente puede comparar dos puede comparar dos tres o cuatro pero nada lo ideal suele ser comparar Dos valores tres como máximo en excepción es muy puntuales pero hoy por hoy normalmente nadie usa ni Max ni min por un tema

de que existe una alternativa mejor ya que normalmente cuando uno usa Max le falta definir el máximo o le falta definir el mínimo cuando usas min Entonces ese es el problema no que tenemos un mínimo o tenemos un máximo pero no tenemos los dos es como si tuviéramos un min with o como si tuviéramos un Max with y ni Contarle si lo aplicamos acá en Max wid no como que va a elegir el mayor y acá sí aplica acá si funciona y es Está bueno pero si tenemos configurado el Max withd tendríamos que definir un

valor ideal Como por ejemplo no sé un wid no y ahí lo tenemos y además tenemos que definir un min withd entonces medo que no tiene mucho sentido la solución para esto es usar otra función que es clamp clamp lo que hace es decir Mira vamos a hacer así vamos a ponerle with clamp Dice mira lo primero que me vas a pasar es el valor mínimo O sea la medida mínima que puede tomar yo voy a decir bueno como mínimo quiero que tenga cu píxeles 800 Ahí está y ahora vamos a darle otra cosa Vamos

a darle el valor ideal yo quiero que por ejemplo tenga idealmente el 100% es decir quiero que ocupe toda la pantalla porque ese es el valor ideal me gustaría que ocupe todo el ancho total Entonces le doy un 100% y después el valor máximo quiero que ocupe Por ejemplo 1600 píxeles Entonces qué le estoy diciendo Mira yo quiero Vamos a darle 1400 mejor quiero que siempre que puedas ocupar el 100% de la pantalla lo ocupes Pero si ese por cento es menor a 800 píxeles no vas a ocupar el 100% te V vas a quedar

con 800 píxeles Y si ese 100% es mayor a a 10000 píxeles no lo vas a superar O sea no vas a ser el 100% te vas a quedar con esto o sea estamos diciéndole como mínimo 800 píxeles O sea no va a medir menos de 800 píxeles como Valor ideal 100% o sea siempre que puedas medir 100% vas a medir 100% y como máximo 10000 píxeles Entonces le estamos diciendo Mira vas a medir 100% mientras seas mayor a 800 píxeles y menor a 1400 píxeles Entonces ahora sí vamos a ver que si esto lo

agrandamos no crece más de acá porque no está creciendo más de 1400 píxeles pero tampoco se encoge más de acá porque no se está encogiendo menos de 800 píxeles Okay Vamos a darle 900 para que sea más Visual y vamos a darle un borde también Border dos píxeles solid negro Ahí está más Vamos a darle seis píxeles ahí lo notamos ven entonces acá 10000 píxeles es lo máximo que crece ahora está tomando un valor del 100% porque como mide menos de 10000 pero más de 900 se puede adaptar y mide el 100% pero acá ya

está midiendo menos de 90000 Entonces no puede medir el 100% tien que medir Sí o sí 900 píxeles que es el mínimo que le vamos a dar y de esta forma podemos Trabajar con cajas flexibles sin flexbox sin Max with min withd ni nada tenemos todo definido en clamp esta es una forma moderna de trabajar con ccs y es muy común no solamente para crear cajas flexibles sino también es Útil para crear tamaños de letras flexibles si yo por ejemplo esto le saco el zoom fíjense que es lo que le pasa al texto es como

que no no se adapta ven no se termina de adaptar Entonces cómo puedo hacer para que esto se adapte Bueno muy simple le Puedo dar por ejemplo vas a tener un mínimo de dos Rem por ejemplo no vas a tener un mínimo de dos Rem vas a tener una medida ideal de 5 View por he por ejemplo Vamos a darle esto al font size Perdón font size Ahora sí pero va a tener un máximo o sea el valor máximo va a ser 7 vi por vamos a establecerlo acá y ahí o podemos darle otro límite

en vez de TR vi por Wi le podemos dar que no va a tener un máximo de cco Rem Perdón Esto es así no no se hace con el view por Wi Me confundí yo primero Se pone un Rem mínimo un Rem máximo y la medida relativa ven Entonces tenemos el el min font size es como tenemos un mínimo para el font size esto sería equivalente a usar un min font size así como tenemos el min wd y también usar un Max font size es como el font size va a tener como mínimo algo el

font size va a tener dos vi por wid y el Max font size va a tener algo es como usar el wid min wid y Max width Entonces si se fijan acá como Mínimo tiene dos Rem es la medida más chiquita que puede tener ven acá está dos Rem ahora si crece tiene dos View por wid que es esto que estamos viendo ahora vamos a darle Eh sí dos View por Wi pero como máximo vas a tener cinco Rem vamos a dejarlo en cuatro entonces de esta forma ven ahí está y más de eso no

crece Entonces vamos a hacerlo más chico Vamos a darle 2.2 View por wiet ahí está perfecto entonces para arrancar acá ven es dos Rem 2.4 Rem ahora si Empieza a crecer más la pantalla el texto se tiene que adaptar entonces empieza a crecer el texto y la caja y ya cuando supera esta medida que ya ya está ya ya llegaste a 5 Rem No crezcas más entonces como máximo va a tener 5 Rem como ideal va a tener 2.2 View por wiet y como mínimo va a tener 2.4 Rem y de esta forma podemos trabajar

con font size o sea con textos con tipografías responsive y que se van adaptando a diferentes dispositivos solo usando Clamp esta es una técnica muy interesante y mi consejo es usenla es algo que es relativamente nuevo y está bien usarlo y es correcto usarlo y de esta forma nos ahorramos cambiar el tamaño con media queris Okay ya saben que mientras menos media queris usemos mejor Y esta es una alternativa excelente para eso de hecho es una pena porque me huera hua gustado mostrarles Cómo se utilizan las variables acá pero lo mismo que hice con cal

no que también Les pudo haber mostrado Cómo usar variables con calc Pero no importa lo que vamos a hacer ahora es ver justamente eso variables porque no quiero seguir perdiéndome de enseñarles Cómo aplicar variables en contextos como estos que son muy útiles vamos a ver cómo funcionan las variables porque realmente son muy poderosas Así que vamos bueno para arrancar entendamos Que una variable Okay es simplemente un espacio que se almacena en la memoria de Nuestro programa que principalmente hace referencia a un dato Eso es todo y ese dato puede ir cambiando con el tiempo y

vamos a ver de qué trata Yo acá por ejemplo tengo lo mismo que teníamos antes que es una simple caja que le dimos un font size con un valor mínimo un valor máximo y Mientras pueda medir dos View por wid mientras que se encuentren entre estos dos valores lo va a medir O sea no va a medir menos que esto y no va a medir menos que esto así Que siempre que pueda va a medir 2.2 View por Wi y acá lo tenemos ven un mínimo de dos Rem va creciendo pero tiene su límite y

no crece más que estamos todo bien Esto lo vimos en la clase anterior supongan s que nosotros vamos a decir mira yo tengo una página web y de repente Quiero que mi página web tenga un color no va a ser Va a haber un color principal y un color secundario Qué puedo hacer lo que voy a hacer es definir algo llamado variable Ent Yo vengo acá y voy a decir Mira vamos a crear una variable para crear una variable tenemos que poner dos guiones adelante de esta forma dos guiones guion guion y creamos una variable

y a continuación tenemos que definirla en este caso va a ser color principal por ejemplo le damos dos puntos y acá lo definimos yo por ejemplo voy a poner f44 cu que esto es un rojo entonces acabo de crear una variable llamada color principal y va a ser igual A rojo Entonces qué hago el background va a poder tener variable color principal y acá se puede ver mejor lo que les estaba intentando decir usamos la función bar Okay vamos a hacerlo de vuelta bar y acá bar nos dice ey Cuál va a ser la la

variable que queres utilizar y acá la variable que nos va a saltar es la que ya creamos la usamos Y fíjense cómo acaba de cambiar de color y eso es la magia de las variables estamos creando un nombre que va a ser igual a Un valor y ahora no tenemos que venir a cambiar el color desde acá porque si vamos a crear otro color supónganse que venimos y creamos otra caja creamos otra caja otra y otra y otra caja supónganse que estas son cajas diferentes creamos una caja diferente y simplemente queremos darle al vamos a

venir acá y vamos a crear esto Ahí va y por ejemplo vamos a hacer que la caja Box First Child Okay tenga el background color de este color Y ahora También queremos que Un Child 3 y ahí está Entonces tenemos una caja o que vamos a crear solamente dos así no nos queda la del medio medio que al dope y vamos a darle dos entonces la primera tiene un background de este color el color principal ven el color principal va a ser el fondo de una y el color principal va a ser el fondo entonces

en otras situaciones si nosotros tuviéramos que definir colores de esta forma cómo haríamos y pondríamos acá y pondríamos f44 y acá pondríamos F44 alto pero poné color es más fácil Sí pero si después el color principal cambia Qué pasa tienen que cambiarlo acá 48e y venir acá y poner 48e acá porque tenemos dos propiedades con el mismo valor pero en una página web como las que como la página web que creamos hace un tiempito al finalizar la sección de grid tienen muchísimas más propiedades con este mismo valor muchas pueden ser 20 30 40 50 no

sabemos imagínense tiene que andar cambiándolo cada vez es más Eso no es todo hay algo peor todavía que el programador cuando está leyendo el código no entiende Sí este es el color de la primer caja okay pero y este color Qué es O sea qué estás coloriz Bueno cambio de esta forma yo les estoy diciendo Mira es el color principal entonces para el fondo estamos utilizando el color principal la gente va a decir Ah okay entiendo que Estamos dándole un fondo con un color que es el color principal a la caja y no solamente Eso

sino que la magia está en que ahora podemos venir acá y cambiarlo y darle 48e y se cambia en todos los lugares entonces la próxima vez que querramos modificar una caja lo modificamos desde acá y se va a cambiar y podemos jugar con esto sin afectar a más nada Ahora voy a hacer otra cosa a la última caja le voy a dar un Border se píxeles solid color principal y ahí tenemos Esto entonces acá tenemos más casos yo de repente lo quiero cambiar Bueno vengo Acá y lo cambio de vuelta 4 o8 Ahí está ahora

todo se cambia para adaptarse a los colores nuevos que les di pero esto no es todo También tenemos otra cosa la variable o sea el bar también es increíble esto porque si ustedes dicen buen Ah vamos a hacer una cosa vamos a crear un párrafo suelto no un párrafo suelto y vamos a darle un texto vamos a agarrar a a el p que es hijo directo de un Body porque si le damos el tiro a todos los p ven le vamos a dar color Rojo y se va a dar estilo a todos los p en

cambio Si le decimos no vas a ser hijo directo de un Body solo va a ser este porque este es el único p que es hijo directo de un Body O sea que está directamente adentro del Body y no adentro de otro elemento que está dentro del Body Vamos a darle un font size de 40 píxeles Ahí está si lo podemos ver Y acá está vamos a darlo un poquito más grande Ahí está acá lo estamos viendo Bueno para qué quiero hacer esto simple Qué pasa si ahora venimos si le damos bar color principal Ah

ya no funciona por qué bueno acá también Viene otra la parte teórica de bar y es que si se fijan nosotros le estamos dando a todas las clases Box esa propiedad pero esa propiedad solamente va a existir para el scope de box es decir va a existir para box para h1 para p pero no va a existir para este elemento porque este elemento está por fuera de la caja Box ahora si este p lo pusiéramos adentro de acá acá Sí funcionaría tenemos que seleccionarlo de otra forma pero funcionaría entonces esa es otra magia de las

variables podemos definir un entorno entonces si yo vengo acá y esto en vez de ponerlo acá lo pongo en el body Okay ahora sí va a funcionar por qué Porque todos los elementos están adentro del Body entonces si yo quiero utilizar esta propiedad esta esta variable la tengo que definir en el body ahora también podemos hacer una redefinición yo puedo Decir está bien el color principal va a ser 48e pero específicamente para las cajas el color principal va a ser f44 entonces para las cajas para los Deep Box color principal va a ser rojo pero

para los elementos que están adentro del Body que están fuera del alcance de la caja Box van a ser Azul se entiende vamos a checarlo un poco para que se note entonces adentro de Body todo es azul pero como es más específico darle a esta caja esta caja tiene prioridad Entonces tenemos por un lado estas dos cajas que son Box y acá dentro Todo lo que esté dentro de las cajas el color principal va a ser rojo pero acá como está adentro de Body y no adentro de las cajas va a ser Azul se entiende

un poquito más yo puedo venir ahora al p y en los mismos p puedo decir Box First Child p por ejemplo o Box más fácil Box p y en los p el color principal color principal va a ser igual a verde por ejemplo ahí tenemos un verde tenemos que Definirlo color va a ser igual a bar color principal Entonces ahora los p van a tener otro color principal y así funciona la jerarquía de las variables básicamente una variable es eso estamos creando un nombrecito que va a tener asociado un valor que después podemos llamarlo desde

cualquier parte de la página y si modificamos el valor se modifica el valor en todas las veces que haya sido llamado Esa es la magia de las variables y encima tienen un alcance Local entonces todo lo que esté adentro de la caja en la que que se definió lo puede usar todo lo que esté afuera de esa caja no y es más las cajas que están más adentro pueden crear sus propios eh variables con el mismo nombre que van a ser diferentes según el ámbito Esto está bueno para que lo prueben lo investiguen pero la

verdad que es muy sencillo Y por qué le quería enseñar eh bar antes de calc porque podemos hacer cosas como estas yo puedo acá por ejemplo definir Tamaño principal que va a ser igual a 20 píxeles por ejemplo Entonces yo vengo acá y clamp en vez de tener dos Rem va a tener bar Okay tamaño principal o por ejemplo va a venir acá y vo a poner 2.4 Rem tamaño principal Entonces el font size va a tener un mínimo de tamaño principal vamos a agrandar un poquito ahí está entonces si se fijan la tipografía no

puede ser más chiquita que esto que está acá Acá empieza a crecer pero más chiquita que esto no puede ser V la tipografía se mantiene Acá está aumentando la tipografía y acá ya no Ahora si a esto lo aumentamos y le damos por ejemplo cuatro esto aumenta también entonces acabamos de crear una variable porque ahora podemos definir que todos los font size de todos los lugares van a tener tamaño principal y es más podemos usar otra cosa que es por ejemplo darle más chiquito a esto darle No lo sé e un Rem por ejemplo y

acá darle cal bar tamaño principal por dos o por tres o Por cuatro y esto lo multiplica y es mágico por eso Esta es la magia es medio complicado esto así que vamos a irlo a la próxima clase vamos a dejarlo ahí ahí está Vamos a ponerle 2.4 que era lo que teníamos Ahí está entonces quería mostrarles La magia de usar variables y que son poderosísimas Realmente con variables podemos hacer mucho así que los invito a crear sus propias variables De hecho hay una cosa interesante que se llama property Okay que es property En Donde

podemos crear una variable incluso sin definirla yo por ejemplo voy a sacar color principal para que no esté creada En ningún lugar a ver acá lo voy a sacar y acá también lo voy a sacar ahora no existe color principal pero yo la puedo crear desde acá entonces voy a poner color principal Okay y lo voy a empezar a crear primero vamos a poner syntax y acá le vamos a decir vamos a esperar un tipo de dato Cuál es el tipo de dato que vamos a esperar Bueno yo voy a esperar a Que me pases

un color esto cuando ustedes leen la documentación se les complica pero a veces leen cosas así no entienden Qué joraca es y acá estamos diciéndole que la sintaxis va a ser vas a esperar un color es decir el parámetro que vamos a esperar el color principal es un color Por qué Porque después tenemos otro que es por ejemplo number ven tenemos number y podemos estar esperando un número pero no nosotros vamos a esperar un color queremos algo Exagesimal o un hcl o un color Bueno después acá el punto y coma acá vamos a tener otra

propiedad que se llama inedits que significa e Esto va a heredarlo o sea se va a heredar o no se va a heredar vamos a poner false porque no queremos que se herede y después tenemos el valor inicial que sería initial value y en este caso el valor inicial va a ser no sé por ejemplo le vamos a dar 48e Entonces si se fijan Perdón Esto no se pone entre comillas Ahí está si se fijan ahora sí me lo está tomando por qué Porque estamos creando una propiedad para todo el Root hay una propiedad nueva

hay un valor Perdón nuevo entonces si yo vengo acá por ejemplo como verán le puedo decir bar y ya existe porque acá me está diciendo que tenemos la variable color principal y ya existe entonces la la creo y ya funciona Es más si acá pusiéramos por ejemplo number number ven esto no va a funcionar porque esta función estaría Esperando un número y qué estamos haciendo No queremos un número queremos un color entonces como queremos un color ahí me está estamos funcionando con el color y podemos redefinir la yo puedo como dije venir acá y darle

color principal y acá le puedo dar por ejemplo rojo punto y coma y ahí está ahí está color principal va a ser rojo y fíjense que también funciona Entonces es una propiedad que también funciona de forma eh local que podemos definir una así por Defecto que esto que está acá sería básicamente lo mismo que definirla acá arriba pero esto en realidad tiene que ver con otra cosa que llama hudini que es como una forma de hacerlo que con javascript se lo recomiendo aprender más adelante al final del curso vamos a ver algo sobre eso que

no es algo sino que voy a van a ha ver una recomendación sobre qué aprender pero es una de las formas en la que tenemos de crear nuestras propias eh propiedades Personalizadas O valores personalizados y es un módulo que lleva al extremo ccs digamos con javascript pero también existe una forma muy simple de hacerlo con ccs y una es esta No acá también podemos decirle Por ejemplo true y tendríamos el valor sería heredable pero en este caso no no le vamos a dar bola pero es bastante interesante Cómo se pueden trabajar con crear propiedades desde

acá pueden investigarlo más a fondo pero la mayoría de cosas de judini Se hacen directamente con javascript Pero bueno no es algo que vamos a ver ahora pero que sepan que si quieren establecer propiedades por defecto lo pueden hacer así o bueno Bueno nada en este caso es prácticamente lo mismo que sacar esto venir acá poner Root que es el elemento raíz y poner color principal y acá ponemos el 48e por ejemplo y ahí funciona Cuál es la diferencia entre ponerlo en el body o en el Root las cosas que queremos que sean válidas para

Toda la página no se la damos al Body se la damos al Root Así que nada Eso está bueno que lo sepan y bueno gente Eso es todo sobre variables lo más básico en realidad pero para ir más complejo necesitamos irnos con judini así que por ahora nos quedamos que con todo lo que podemos hacer con variables en css ya es esto que estamos viendo después es aplicarla funciones o cosas etcétera Pero bueno eso será todo así que vamos con la siguiente clase en la que vamos a Ver ahora sí la función calc llegó el

momento así que bueno vamos a ver cómo funciona esta función cal a ver tampoco es la gran cosa en realidad la puse ahí porque me pintó Pero bueno vamos a ver cómo funciona calc bueno gente ahora vamos a ver el uso de la función calc pero básicamente es una función que hace cálculos sí es aritmética básica nos permite hacer cuatro cosas nos permite sumar restar multiplicar y dividir nada más que eso Por ahora si podemos usar otras funciones adentro de la función calc pero no es el momento vamos de a poco bueno acá tenemos el

ejercicio anterior que por ahora nos vamos a deshacer un poquito de esto vamos a agarrar todo esto que teníamos del ejercicio anterior y lo vamos a eliminar así nos queda algo tan simple como esto vamos a borrar el color el font 6 lo vamos a dejar y Bueno ahí tenemos lo que teníamos la clase pasada que es esto no es como acá Tiene Un tamaño de letra Acá empieza a aumentar el tamaño de letra y hasta acá crece más que esto no crece no Entonces esto lo teníamos la clase pasada perfecto si quieren mirar las

propiedades mírenlas pueden copiarlas vamos a borrar las variables Eh bueno vamos a sacar esto que está acá y acá le vamos a poner dos Rem 2.4 Rem de vuelta porque no no nos interesa otra cosa vamos a borrar este p Okay y vamos a dejar quizás una caja sola Ahí está con Una caja creo que estamos bien para este ejercicio vamos a poner esto acá arriba de hecho vamos a poner primero el selector de todos ahí va después el Root y después el body en orden jerárquico y esto del display del Play content en realidad

lo Podríamos sacar porque es innecesario de hecho nos arruina un poco nos arruina un poco esto ya que no hay margin colabs Y en este caso necesitamos un margin collaps Así que fue un error mío de Bruto haber dejado eso todas las Clases anteriores pero no importa así estamos perfecto Así que si quieren copiar el código cópienlo y ya tenemos esto Vamos a ponerle 30 acá arriba Vamos a ponerle lo único 50 de padding no tanto Ahí está vamos a poner 60 de margin arriba lo único nada más ahí está bueno ahora vamos a ver

la función calc calc es para hacer cálculos Eso es todo en este caso por ejemplo tenemos un wid vamos a hacer este cálculo un wid del del 100% no esto es básico Cómo podemos Usar la función calc acá Bueno simple vamos a poner la función calc y vamos a decirle vas a tener un wid del 50% más okay Un 50 por y esto nos va a dar como resultado un 100% Esta es la primera operación que podemos hacer la suma yo puedo decir por ejemplo vas a tener un 50% más 100 píxeles esto es buenísimo

porque estamos combinando medidas relativas con medidas fijas es mágico entonces va a tener siempre un 50% más 100 píxeles Vamos a darle más 300 Píxeles ent acá por ejemplo va a ap parecer que vamos a ponerlo acá acá por ejemplo va a parecer que tiene un 100% pero no en realidad tiene un 50% Pero además tiene 500 píxeles y por eso nos da la impresión de que esto tiene un 100% pero cuando lo empezamos a agrandar vemos Que no que en realidad tiene la mitad del wet o sea un 50% pero 300 500 píxeles extras

entonces de esta forma podemos mantener una medida mínima que voy a decir Bueno mira quiero que Tenga un tamaño fijo grande o sea que por ejemplo tenga al menos eh estos píxeles o sea va a tener como mínimo 500 píxeles más un 50% entonces en una pantalla gigantesca que va a ser así por ejemplo no va a tener menos de un 50% pero una pantalla que es así por ejemplo eemplo no va a tener más de un 50% A menos que es una pantalla muy chiquita Entonces en este caso es un buen uso que se

suele dar por ejemplo eh No sé 200 pixeles de mínimo y un 60 por acá Entonces es una forma más clara de tener una medida más chiquitita pero más fija al mismo tiempo pero nada Esto es algo muy común que se suele usar ahora otra cosa que podemos hacer es restar quiero que tengas por ejemplo un 100% no un 100% Pero además que tengas 200 píxeles menos Entonces siempre va a tener una medida del 100% pero 200 píxeles menos Enton entonces en pantallas más grandes se va a notar menos pero en pantallas más chiquitas se

va a notar más para qué Es útil Esto bueno supónganse que ustedes por ejemplo tienen que hacer un cálculo de algo no tienen que supónganse que tienen un esto esto Box Box es una caja no vamos a hacer una cosa vamos a poner dos cajas no una una caja dos cajas ahí ahí está Solamente le sacamos el margin bueno Esto se lo vamos a sacar el W supónganse que vamos achicar un poquito esto Ahí está Vamos a darle Box First Child a la primer caja va a tener un hate de 100 pes se va a

quedar ahí de Hecho vamos a eliminar el contenido Vamos a darle un poquito más grande para que no se quede chiquito Vamos a darle 200 píxeles ahí está la primer caja tiene un tamaño de 200 píxeles Entonces si venimos a la caja anterior no a la caja anterior Box eh perdón a la caja siguiente Vamos a darle tiro a esta caja si esta caja por ejemplo le decimos que va a tener un hate del 100 View por hate Qué pasa Va a irse muy para abajo qué podemos hacer acá bueno acá podemos usar Por ejemplo

un display Flex o un grid y manejarlo pero no es el caso también puedo hacer otra cosa que no me sirve en este caso Ah igual estamos creo que eliminamos del segundo no no no del primero tenemos que eliminar esto Ahí está ahora sí Esto es lo que queríamos qué pasa con esto podemos empezar a calcularlo decir 90 View por hate a ver 80 View por ahí está 80 View por hate 82 y ahí está 83 Listo Ya lo tenemos a medida pero si esto se achica ven por Qué tiene scroll porque el 80% no

entra no no encaja 80 View por hate es más que el tamaño ideal hacemos así y acá podemos ver que hay un scroll debería no haber scroll deberíamos calcular exacto para evitar que haya scroll una solución es decir bueno Mira vamos a tener calc 100 View por hate men 200 píxeles esta forma Perdón tiene que haber eso es otra cosa de calc siempre tiene que haber un espacio o sea hacer esto no sirve siempre tenemos que dejar un espacio Entre el más y el menos el multiplicar sí lo podemos poner y el dividir también pero

el espacio tiene que estar ahí Okay Esto es para evitar por ejemplo que esto suceda men2 píxeles no sabemos si decimos men2 píxeles o menos menos Entonces está bueno que se quede esto así y ahí está ahora qué logramos con esto Bueno vamos a sacarle el padding que tiene el body por defecto Ahí está y ahí lo logramos si hubiéramos hecho lo de antes que era darle 83 View por hate Fíjense que acá parecía que estaba bien acá parecía que estaba bien pero en otras resoluciones por ejemplo iba a cambiar acá por ejemplo no hay

scroll pero si lo achico un poco más Qué pasa lo achico y Uy me me pasé de achicar lo achico hasta ahí ponele y ven que acá hay scroll en cambio Si yo por ejemplo lo hago con el cal Ahí está ahora sí esto que está acá porque tenemos el scroll no lógicamente acá tendríamos que darle por ejemplo en vamos a venir acá y Ponerle overflow scroll Ahí está y ahí está listo esto tiene scroll pero no la barra no el grande entonces de esta forma tenemos un contenido que se adapta Vamos a darle auto

para que se ponga scroll automáticamente Ahí está tenemos un contenido que se va adaptando a la caja y nunca va a tener un scroll en el Root okay Porque siempre va a tener un alto bien calculado entonces esa en parte es la magia del cal es más Si tenemos el tamaño este que va a ir Variando acá le podemos decir un podemos crear un valor por ejemplo venimos acá y ponemos alto del vox por ejemplo y vamos a decir 200 píxeles por ejemplo entonces venimos acá y este he va a ser bar alto del box

y acá también bar alto del box entonces de esta forma podemos cambiar el alto del box y tranquilamente se va a adaptar siempre siempre se adapta siempre podemos darle también 300 píxeles 500 píxeles y esto no va a tener problema porque podemos ir cambiando el Alto del box y se va siempre adaptar porque calc es una función que te Calcula está diciendo Bueno mira si una caja va a medir como máximo 400 píxeles Okay va a tener un alto de 400 píxeles esos 400 píxeles se lo vamos a restar a la siguiente la medida total

es 100 View por he pero en ese View por he Hay 400 píxeles que están ocupándose por la caja anterior Okay se lo restamos a la nueva caja la nueva caja siempre va a tener la diferencia de lo que le falta a la Primer caja para llegar al 100% y de esta forma es una forma de adaptarlo y no preocuparnos en cambio si pusiéramos medidas fijas esto sería imposible y agregándole las variables tenemos otra cosa que es todavía má entonces también se puede dividir igual se podemos dividir y se divide podemos multiplicar y se multiplica

pero acá lo quiero restar para que se reste y listo Así que nada Este es el uso de calc ven que no era tan gr por ahí como la esperamos Tanto y hablamos tanto de calc parecía re importante Está bueno es importante y suma pero nada más que nada se usa para eso ven Cuando tenemos un elemento que está ocupando parte de un valor que es es eh relativo y no tenemos forma de calcularlo de manera fija lo que hacemos Es le restamos ese valor a ese elemento con calc o se lo agregamos también después

se podrá ver pero está bien incluso porque también podemos usar clamp o sea esto es reloco porque Podemos venir acá y decirle Mira clamp el hate va a ser de 100 View por hate menos y acá le damos clamp es fantástico es decir Mira vamos a devolver como mínimo 2.4 Rem como máximo 4 Rem Y si soporta 2.2 vi por wid entonces cualquier valor que sea ideal según la medida se va a estar restando a 100 View por G entonces también podemos aplicar funciones en funciones o también podemos hacer otra cosa que es podemos a

clamp agregarle acá variables bar ta y Podemos Agregar un clamp adentro del clamp Entonces nada Esto está bueno los desafíos que prueben a que jueguen no sigan avanzando en este curso hasta que no sigan jugando sigan probando y encuentren usos para esto hasta pregunten la chat gpt lo que quieran pero investiguen para encontrar buenos usos del tema porque la verdad que está bueno digo para probar y terminar de entender cómo es esto de meter una función adentro de una función y jugar Con by los cal Y cómo es que una función retorno Pero bueno no

quiero marear losos más hasta acá vamos a dejar esto y vamos con la siguiente clase y estoy hablando de propiedades de scroll y vamos a ver tres cosas de scroll principalmente una es Cómo hacer un scroll que se deslice suave que ya lo hemos visto pero si es es un nabo que se lo saltó te lo voy a explicar de vuelta otra es Cómo modificar el tamaño de la barra de scroll y otr es como Modificar El color que son las únicas propiedades que por ahora son estándar para trabajar con scroll Además del scroll Snap

pero no deja de ser un módulo de otra cosa que que nada no vamos a ver por ahora pero está bueno también que lo mencionemos por ahí así que vamos con la próxima clase que tiene que ver con las propiedades de scroll vamos bueno gente ahora vamos a ver alguna de las propiedades de scroll así que bueno no teng habla mucho más ya Sabemos lo que un scroll vamos a verlo para comenzar lo que hice fue esto básicamente tenemos la caja Box Okay con la clase Box que adentro tiene un h1 y adentro tiene otro

div que tiene la clase crecer acá si lo deslizamos le puse todo este texto que simplemente lawen atrás de Lawrence que están Así le voy a dar acá en cerrar para que no me moleste esto y acá tenemos este esta estructura Okay acá en estilos nada Esto del Root lo vamos acá porque quedó de la Clase anterior acá Le di un wid de 50 View por he Okay que sería un wid de 50 View por wid no sé por qué le di eh principalmente por un motivo y es por el hecho de que que quiero

que tenga un scroll acá para que podamos verlo mejor porque siento que si trabajamos con el scroll del Body va a ser un asco Aunque ojo porque normalmente nosotros deberíamos darle estilo no sé si a las barras que están adentro pero Quizás sí a las barras del Body Así que nada pero Nosotros vamos a trabajar con esto para que lo vean para comenzar lo que voy a hacer es poner acá un simple a que vamos a tener acá abajo otro div que va a tener el ID Venite Venite o venir sí venir y este a

va a tener la el hrf a venir Entonces cuando le des click en clic acá te va llevar abajo de todo y a su vez Esto va a tener el ID subir y Esto va a ser otro a que va a tener el href subir subir vamos a dar en bajar entonces ahí está ven esto es subir esto Es bajar vamos a poner acá abajo Ahí está para Que aparezca al final del texto acá tenemos subir bajar subir bajar Es más esto también lo vamos a poner más arriba todavía el bajar lo vamos a poner

antes del h1 bajar subir ahora la primera propiedad que vamos a aplicar es la propiedad de El scroll behavior Okay que es esta que está acá scroll behavior nos permite dos posibilidades auto o Smooth esto solamente afecta a la suavidad del del Usuario O sea si yo por ejemplo le doy clic acá me va a bajar más suavecito ven ya no es tan bruto Es suavecito yo esto no lo tuviera fíjense que sube bruto Es como de un instante a otro en cambio con el Smooth eso es lo que hace cambia la velocidad de subida

pero esta velocidad está definida por el agente de usuario o sea el user ag que lo Define cada navegador entonces prácticamente esto en cada navegador pod podía llegar a funcionar distinto dependiendo de las Versiones etcétera Pero normalmente todos manejan casi la misma velocidad y esto con javascript se puede modificar no podemos entrar y modificar la velocidad del scroll behavior eh pero no no lo vamos a hacer porque no estamos en un curso de javascript pero que sepan que para trabajar con esta propiedad de que sea suave lo hacemos así entonces eso es lo primero que

podemos hacer Okay pero no afecta esto Pues yo por ejemplo doy clic acá esto es igual ven si yo le Doy clic en cualquier otra parte o yo lo deslizo por mi propia parte esto no cambia hay otras formas con javascript de también Modificar el scroll de esta forma pero esto solamente cambia cuando le damos click clic de un lugar a otro nada más cuando apretamos en la flechita de abajo por ejemplo ven no cambia de hecho si le sacamos el Smooth es Exactamente igual ven O sea no no hay no hay nada distinto Por

más que tenga el Smooth o el no smoo es igual entonces Solamente cambia para los enlaces para mandarte un enlace a otro y así Eso es la primera propiedad que vamos a ver después tenemos otra que es el scroll bar color y esto nos dice e Mira si quieres puedes darle color a la barra entonces yo voy a venir acá y le voy a dar por ejemplo 48e Por qué no funciona esto simple porque tenemos que darle otro color si yo por ejemplo le doy f44 que son los colores que vos usando anante todo el

curso el primer valor es El color que le vamos a estar dando a la a la Barrita y el otro es el color que le vamos a estar dando a el Track sería no al Track a lo que está en el fondo del scroll a esto rojo que está acá Esto es lo que estamos haciendo Y como se fijan esto nos está revelando otra cosa Y es que las cajas aunque no lo veamos tienen un scroll y eh Nada yo por ejemplo lo pondría de este color Y eh blanco por ejemplo Entonces tenemos esto así

ahí me gusta ven Esto es algo que yo Usaría Después también lo que podemos hacer es cambiar lo que vendría siendo el el tamaño no Y para eso usamos la propiedad scrollbar Wi entonces acá podemos darle por ejemplo 20 píxeles pero ojo porque esto no funciona porque esto tiene tres valores auto thin que es finita y none none no significa que el elemento no se va a poder deslizar significa que no tiene O sea no tiene tamaño la barra pero si usamos la la flechita Esta que está acá se puede Deslizar o si estamos en

el celular podemos deslizar con el el celular ven así como arrastrando pero no significa que no tiene scroll o sea como que no es lo mismo que darle un overflow hidden No simplemente es que lo podemos deslizar pero sin scroll y el auto es que se pone automática que es la que tenemos por defecto que es la que es más gruesita la que Define el navegador y Din que es la otra que es más finita entonces Esto es lo que podemos hacer con el scroll bar Manejarla de esta forma Está bueno para que lo conozcan

para que lo sepan Para que vean otra forma también de trabajar con scroll sí tenemos otras formas no estándar de hacerlo pero yo no lo recomiendo la verdad y hay un tema de accesibilidad para arrancar cuando Nosotros le vamos a dar color es importante que los colores contrasten Esta es una normativa de accesibilidad o sea cuando nosotros vamos a la documentación oficial nos dice ey ojo a Nivel accesibilidad tenés que preocuparte para que haya un contraste por ejemplo no podemos hacer esto que está acá así por ejemplo esto no lo podemos hacer porque por más

que una persona porom medio pueda distinguirlo la gente que tiene problemas quizás para distinguir colores que no están tan contrastados o tiene daltonismo por ejemplo algún tipo especial de daltonismo esto no lo pueden ver entonces por eso es importante que eh Haya contraste por ejemplo Acá hay un buen contraste es una barra azul oscurito mediano oscuro que se contraste y se diferencia Entonces se puede acceder y el otro problema con Din es que Din normalmente hace que el contenido O sea la barra de scroll sea menos accesible que muchos la usan pero no no se

recomienda mucho de hecho los los celulares por ejemplo está el Tin Pero si ustedes la configuran como auto ven va a ser más grande y va a ser más Fácil de desplazar Entonces se recomienda que para accesibilidad sea grande pero si van a la van a poner en Team que sea incluso más visible de lo que debería ser en auto o sea en auto por ejemplo ustedes pueden quizás usar un color como este vamos a hacerlo 9 cf por ejemplo esto esto ya sí quizás un poco guaso igual a mí me sigue gustando Ya sé

que es lindo y estético pero por accesibilidad se recomienda quizás no usarlo ahora si está en auto por ejemplo Bueno por ahí puede ser pero nada Esto está bueno para que lo tengan en cuenta Okay así que bueno nada lo voy a dejar en en thin y con el 6a que sería este colorcito de acá y Listo Ya está Esas son las propiedades del el scroll tenemos el scroll Snap que es un módulo de css que Les recomiendo que lo investiguen es bastante Interesante pero no me voy involucrar con eso por ahora es un poquito

más avanzado pero realmente requeriría de de además es Algo que se está introduciendo ahora es bastante nuevo entonces preferiría esperar un poquito y dárselos como tarea para que lo investiguen de hecho al final de este curso les voy a explicar Cómo leer documentación porque a veces venimos acá no a calc a la documentación de calc Y esto no lo entendemos la función de calc puede ser usada en cualquier sitio donde length frequencies angle Time number o integrer se ha requerido Pero qué joraca es todo esto No entiendo no sé porque tampoco entienden los conceptos de

por ejemplo que es leng es un tipo de dato de tamaño que es frequency qu es sle qu es Time qu es number son tipos de datos acá por ejemplo dicen values en values Siempre vamos encar los posibles valores no Y esta sería una expresión y acá les dice la expresión matemática las expresiones acá les dicen que pueden usar el más el menos el por y en la división acá dice por ejemplo en la multiplicación al Menos uno de los argumentos debe ser un número en la división debe ser un número el divisor el que

divide no entendemos que también siempre nos aportan valor por ejemplo acá tenemos para hacer un try le damos en play y acá podemos jugar con la documentación ven Pero esto ya lo veremos al final del curso que les voy a explicar Cómo leer documentación para que no se frustren y aprendan a leerlo bien y encontrar material bueno para que puedan seguir aprendiendo pero ahora Tienen al tipo que mejor explica de todo YouTube para qué se van a poner aer la documentación No mejor les sigo explicando hasta donde llegue este curso y vamos a ir con

la siguiente propiedad que es initial letter que parece raro y de para qué queremos usar la propiedad initial letter o sea modifica la primera letra para eso tenemos letter la pseudoclases pero no vamos vamos de poquito el pseudo elemento sería en realidad pero no importa vamos a ver Cómo funciona esto de initial letter porque tiene su Us y tiene su magia Así que vamos a ver esto de initial letter vamos bueno gente ahora vamos a ver ver initial letter Okay que es una propiedad que va de la mano con First letter para hacer varias cositas

de hecho una sola pero bueno ahora vamos a ver Acá tengo simplemente una html muy simple que tiene una caja okay Y un párrafo nada más adentro del párrafo tenemos tres textos lorem uno atrás del otro después Acá en estilos es muy simple tenemos el estilo básico de todos con Border box el body con margin cero y el un font family que le vamos a dar Monserrat porque me gusta mucho más el Monserrat Ahí está y eh Por último bueno el la cajita va a tener el font size el padding y el borde nada más

vamos a Agar el borde y ahí está lo que vamos a hacer ahora es ver cómo funciona First letter vamos a agarrar el párrafo y vamos a jugar con la propiedad initial letter No First Letter Perdón initial letter vamos a dar poquito acá lo que le tenemos que decir es Cuántas líneas va a ocupar yo por ejemplo le pongo dos y no pasa nada pero pongo otro dos y tampoco pasa nada saben Por qué no funciona porque esto sí o sí tiene que estar en First letter y ahora sí es que funciona lo primero que

va a hacer es definir Cuántas líneas va a ocupar ya está esto es todo lo que hace nos crea esta primer texta esta letra capital que es como esa famosa letra de Los párrafos dec Che Mira va a ocupar dos líneas o podemos dar 2s TR o podemos dar 3 do y va a ocupar más a lo más arriba que que abajo entonces es bastante Interesante pero esto es así es vas a ocupar dos líneas para abajo y si le damos tres al principio va a ocupar una más para arriba acá ojo porque el primer

valor o sea el primer el primer valor que le pasamos es la cantidad de líneas que va a ocupar hacia arriba y el segundo valor es desde Qué línea lo vas A ocupar entonces así es medio como funciona esto También tenemos por ejemplo la posibilidad de dar 1.5 que es medio raro esto yo no suelo usar así como en 3.5o raro no entonces ahí queda bien ahora también podemos trabajar con otras propiedades yo por ejemplo pu venir acá y le puedo dar un padding 10 píxeles Entonces se separa del resto entonces por eso no necesito

darle el tres yo con darle dos para mí es suficiente o de última le doy tres y ahí Está y ahí se separó le vamos a dar un pading bottom cero y Listo ya creamos la primer letrita linda y la vamos a poner en rojo color rojo ya está y ahí tenemos un buen texto lo vamos a dejar en ahí y ahí está entonces por ejemplo vamos a poner vamos a contar una historia Lucas era un chico muy inteligente enseñaba a programar a todo el mundo hasta que un día llegó al millón de Seguidores con

su canal soid alto y desde ese momento se volvió alguien completamente Sobrenatural llegando incluso alcanzar el interés de los extraterrestres siendo el tipo que logró crear la primer interacción humano Alien del mundo ganando tres premios Nobel a consecuencia una historia muy real entonces acaba eh Lucas era un chico muy y ahí te la cuenta Es más hasta le podemos cambiar la tipografía por ejemplo le podemos dar F family Impact y ahí se vuelve más groso le podemos dar San serif y se pone ahí la l o le Podemos dar Arial y se nos vuelve Arial

que es prácticamente San serif o le podemos dar en cursive y se vuelve cursiva Entonces esto de la primera letra La verdad que juega bastante con esto no de hecho una cosa muy normal es hacer que sea por ejemplo -2 y por ejemplo poner uno y acá poner tres no Entonces te crece para sería uno y dos en realidad to ahí te crece para arriba to ahí vos tenés Lucas era un chico y esto te lo ocupa eh o sea si vos le das Un Border a la caja Border dos pixeles solid rojo esto entra

dentro el borde O sea si le das tres acá cuatro el contenido se hace más grande como tal O sea no es que no te ocupa lugar porque sí sí ocupa lugar y todo así que bueno Esta es una de las formas que tenemos de hecho le voy a por ejemplo dar padding eh left cero porque me interesa que al costado no tenga padding es más le podemos dar dos pixeles nada más ahí está y ahí está Lucas era un chico muy Inteligente y le vamos a dejar el aria o el San serif es lo

mismo Ah Ahí está Lucas era un chico y vamos a darle 10 Vamos a darle cuatro le podemos dar dos a ver si queda bien con dos sí queda bien con dos Lucas era un chico muy inteligente le enseñan a programar a todo el mundo bla bla bla bla bla y ahí comenzó la historia de Luca normalmente también se suele hacer por ejemplo eh este este efecto de que sea muy grande no entonces el primer parámetro el Primer valor vendría siendo Cuántas líneas vas a ocupar y el segundo valores desde Qué línea vas a estar

ocupando esta cantidad puede ser desde la línea dos desde la tres desde la cuatro desde la cinco desde la seis ven si por ejemplo le dan cuatro y acá le dan cuatro se pone la cuatro si le dan tres se pone la tres Si le dan dos se pone la dos y ahí queda yo le voy a dejar en la uno y ahí tenemos Lucas era un chico muy inteligente vamos a dejarla en la cuatro Ahí está y vamos a ponerlo desde la línea dos ahí si queda intercala en el medio Lucas era un chico

muy inteligente que enseña a programar a todo el mundo hasta que un día llegó al millón de sig Ah ya está no voy a leerlo todo de vuelta Este es el uso gente de initial letter así que bueno esta explicación fue bastante corta porque corto no hay mucha más magia pero no quería perder la chance de enseñarles esta propiedad que de hecho es una propiedad especial para El fus letter que es bastante loco no vamos con la siguiente clase en la que vamos a hablar de las unidades large small y dynamic del viewport todas son

medias View por el view por with y el view por he tienen medias dinámicas cortas y largas así que bueno vamos a ver esta próxima clase vamos bueno esta clase va a ser rara porque no tengo una forma de demostrarlo Okay prácticamente en este video no vamos a ver nada para hacer pura teoría Y es muy corto es muy corto porque es muy simple a ver Esto es simple si yo por ejemplo uso medidas del viewport Como por ejemplo View wid o View hate vamos a enfocarnos ahora en View hate el viewport hate sabemos que

por ejemplo 100% viewport hate va a ser equivalente a esto ya que el viewport he se basa en el alto total del viewport incluyendo la barra de scroll vertical por lo que incluso si la página tiene contenido que s el alto visible la altura de los Elementos View por he va a aumentar para abarcar la barra de scroll Entonces cuando es trabajamos por ejemplo con el view por hate si le damos 100 View por hate va a ocupar el total de todo incluyendo la barra de scroll ahora si nosotros le damos por ejemplo 100 View

por ha no a un celular Qué puede pasar Es decir si le damos 100 viw por he a un celular y nosotros estamos en un celular como este por ejemplo cuando nosotros veamos y centremos el elemento el Elemento no va a estar centrado porque el view por hate está ignorando completamente los menús y todo lo que se va a extender en el celular que va a serc que a veces tengamos errores esto lo viene a solucionar una medida que vendría siendo el svh que es el small View por height que supone que todas las unidades

están extendidas y Por ese motivo se ajusta al celular Entonces el 100% del sm View por he va a ser equivalente a esto que estamos viendo en Pantalla ahora caso contrario si usamos sbh cuando nosotros des expandimos se nos va a quedar corto entonces la otra medida es lbh Pero tenemos este problema cuando usamos lbh si des expandimos se nos queda largo y cuando usamos sbh Cuando hacemos que nos aparezca las interfaces de vuelta se nos pone corto entonces apareció la medida mágica que nos va a salvar que es dbh Okay que sería e el

dynamic view por he que básicamente funciona de la forma que Están viendo en pantalla ven se va adaptando si se extienden las interfaces se adapta si se retraen las interfaces se adapta también entonces de ahora en más que sepan que cada vez que trabajemos con elementos acá por ejemplo si yo le voy a dar al Box un ancho de 100 View por he no le debo dar 100 View por he le debo dar 100 dynamic View por he y nosotros en desktop no vamos a notar la diferencia pero para todas las personas que estén trabajando

con Dispositivos móviles o que accedan a la web desde dispositivos móviles Esto va a ser mágico porque no vamos a tener que agregar media queries para calcular especialmente qué pasa en Mobile cuando le restamos la barra depende el dispositivo nos ahorra un montón de código cuando queremos ser muy perfeccionistas con las medidas entonces solamente con poner d vh estamos resolviendo todo el problema de que cuando estamos en celulares el view por Hate no contempla los menús que se desplazan o el teclado los scroll etcétera entonces con dbh resolvemos todos los problemas y si que adora

es más esto es un consejo Pero esto aplica siempre no hay casos donde usar bh va a ser mejor que usar dbh no no hay casos solamente son casos en donde sí queremos que eh la página crezca más de lo que debería crecer o sea en esos casos sí pero es raro porque nunca vamos a querer eso nunca vamos a querer que el 100 vi Por G no contemple el pedacito de abajo que está expandiéndose en un celular es raro y además también lo vamos a querer usar Cuando tenemos eh apliaciones para navegadores muy antiguos

Porque los navegadores nuevos ya todos soportan dbh pero hay algunos que no Entonces en ese caso no está mal usar bh y hacer los cálculos pero ya lo mejor lo que yo recomiendo y lo que todos estamos recomendando es usar dbh para todo entonces de ahora en más ya no usamos Más el 100 View por he de más para todo se usa el 100 dbh por qué Porque ocupa todo okay Todo solamente que en computadoras no tenemos ningú interfaz que se despliega Entonces no lo notamos para desktop es igual pero en celulares tablets y otros

dispositivos ahí sí hay la diferencia o sea Ahí si hay una real diferencia que nos va a beneficiar un montón Entonces si creamos una página web de entrada con con dynamic viewer units que son dynamic viewer e with y Dynamic vier he o se son las dos el with y el he no solamente está para el he está el dynamic vier he y el dynamic vi por withd es lo mismo funciona para ambos uno funciona para el wid otro funciona para el he Entonces es lo mismo que usar View por wid y View por he

Solo que con la de adelante Okay entonces mi consejo es hcen siempre pero ustedes no van a notar la diferencia a menos que est en un celular y cuando estén en un celular van a notar una diferencia y les Va a ahorrar un montón de dolores de cabeza Así que créanme que con esta medida Hay un montón de problemas resueltos Así que nada no me quiero meter mucho en esto En este lío pero no no voy explicar tanto porque tampoco tengo un celular acá para mostrarles la diferencia pero creo que se entendió bastante No fue

bastante claro además la Consigna es una no usen bh usen dbh Eso es todo lo mismo con wid no usen 100 View por wid usen 100 db Wi aunque con El wid cambie un poco es un poco diferente pero nada eso Y sí hay una diferencia entre lbh y vh Y es que l no contempla scroll Mientras que el vh sí contempla scroll o sea esto no contempla scroll Y esto sí lo contempla entonces esa es la diferencia pero bueno nada teniendo en cuenta Eso Igualmente casi nunca van a tener que usar lbh y tampoco

sbh salvo escasas excepciones además Sabiendo ya su uso y entendiendo su uso ya saben cómo funciona si los quieren Usar por algún motivo especial los pueden usar pero ahora es una buena práctica usar el D bh porque para dispositivos móviles y otros dispositivos se va a ver espectacular Así que nada gente Eso es todo de esta clase Fue bastante corto porque es bastante sencillo Así que estamos listos para pasar a la próxima clase y estoy hablando d Ender tres valores Okay para la el ancho alto y demás que son Max content minan content y fit

content creo Que tuve que explicado antes pero no está mal explicarlo ahora por qué no así que vamos a ver estas tres a ver cómo explicar esto bien a ver color mix es una es una función nueva Okay que lo que hace es tomar dos valores los mezcla en cierta cantidad predeterminada y de una forma predeterminada yo por ejemplo voy a aplicarlo acá acá tenemos un background no vamos a ver simplemente vamos a sacarle todo el texto que tiene vamos a Sacarle todo todo el textio Vamos a darle un padding 30 píxeles vamos a sacarle

esto que está acá no No necesitamos y el padding va a ser de 300 píxeles mejor ahí está 320 y vamos a darle un background color por ejemplo 48e hasta acá está todo bien es un azulcito bordeado con un rojo vamos a sacar esto Qué pasa si yo por ejemplo uso color mix Bueno vamos a probar color mix Uh Acá está fíjense que interesante lo primero que nos va a pedir esto que Dice INS srgb es el método tenemos in hsl que es una posibilidad tenemos otra posibilidad que se srgb que esta no está mal

okay Que es la que vamos a usar que esta nos permite trabajar con colores hexadecimales primero nos pide un color vamos a verlo más incluso más chiquito vamos a verlo acá y ahí primero nos pide un color y un porcentaje Okay el color va a ser por ejemplo vamos a trabajarlo con variables Okay no vamos a trabajarlo acá con colores el primer color va a ser Rojo f44 y el porcentaje va a ser Qué porcentaje Bueno vas a tener un 30% y después nos pide otro color que va a ser por ejemplo el 48e que

es mi preferido y va a ser también otro 30 por y ahí si se fijan tenemos este resultado nos permite combinar colores literalmente estamos mezclando colores y no es lo mismo No es lo mismo No es como si yo agarrara dos capas Okay vamos a hacer así vamos a agarrar otro div simple le vamos a poner la clase Box 2 vamos a venir acá y poner Dos y hacer lo mismo Solo que a este le vamos a dar un fondo 48e y al box 2p le vamos a dar un background color f44 a ver dónde

está acá el p p Ahí va bien esto en realidad se lo daríamos al esto que está acá sí se lo vamos a dar a Box 2 Ahí está así aparece ahí estamos bien guardamos esto así aparece abajo bien acá tenemos esto y ahora esto tiene el background color vamos a agarrar Box 2 y vamos a dejarle el color que queremos que es el rojo de fondo pero encima Tenés el este que está acá y vamos a bajarle la opacidad vamos a ver qué pasa ir subiéndole la opacidad a poquito a ver a ver qué

pasa bueno Acá más o menos por más que querramos Okay cuesta acercarse a a este color no vamos a dejarlo en seis no en cinco y este que está acá vamos a dejarlo en cinco Ah nos vamos acercando a ver en seis en siete Ahí va en siete este y esto lo vamos a dejar en seis Bueno ahí de a poquito nos vamos acercando pero fíjense lo que Tenemos que hacer para poder combinar dos colores no es un lío y además acá pasa algo que es cambia todo si al Body le cambiamos el color Qué

pasa Uh nos cogió nos cogió pero si le damos un color negro al fondo por ejemplo también se adaptan las dos ah hablando de esto primero Esta es una buena forma de e ahora que ya vimos esto Qué pasa cuando le damos fondo negro es una buena forma de ahorrarnos esto okay acabamos de mezclar colores sin rebuscar la tanto Simplemente vos AC ponemos por ejemplo 40% y este aumenta ahí lo tenemos casi al mismo color miren casi al mismo color pero acá podemos ir aumentando intensidades ir llegando al color que queremos hasta acá está todo

bien Okay bu ahí lo dejé al 100% los dos pero en este caso como vemos tenemos este problema de la opacidad no entonces una de las cosas que se me ocurrió a mí vamos a dejarlo en 30 y 40 Ahí va es Cómo podemos hacer para mezclar un color Con un fondo blanco es una técnica muy interesante que podemos usar esta Porque yo por ejemplo Tengo este fondo negro fíjense Qué interesante Esta técnica podemos usar podemos decir mira vas a tener un White un blanco al 100% lo que me pasa mucho es que acá por

ejemplo si le doy el background no negro yo tengo esto acá entonces lo que me pasa es que si yo quiero bajarle la opacidad al fondo Cómo haría de otra forma pondría 48e y acá haría dos tres le voy bajando La opacidad pero le estoy bajando la opacidad y el fondo va a ser negro y yo no quiero que menos opacidad signifique que el color sea más oscuro No yo quiero bajarle la opacidad pero que de fondo haya un blanco Bueno lo podemos hacer de esta forma lo podemos hacer con color mix okay Y si

Le bajamos lo que hacemos para que haya un fondo blanco Es simplemente Le vamos agregando de acá le agregamos de acá y es como menos opacidad pero lo que está suendo en Realidad es que lo estás combinando con un blanco queeres menos todavía Bueno le restas de acá ahora y cada vez se va acercando más al blanco Ven y lo dejas acá y acá ya es 100% blanco es una forma también de trabajar con en realidad no está bajando la opacidad como tal pero s es una técnica para restar la intensidad al color que parece

que se ve más blanco o menos fuerte pero en realidad simplemente nada lo estás iluminando más con un blanco entonces podés como entre Comillas bajar la opacidad que no estás bajando la opacidad pero con un fondo entonces vos bajas la opacidad pero con un fondo blanco es un ejemplo muy común que se puede hacer lo mismo a la inversa Si tenés un fondo blanco Okay y V en realidad queres hacer que esto sea oscuro lo haces con Black o con 00 por ejemplo entonces vos acá estás bajando la opacidad pero no se te pone blanco

se te pone negro Entonces vos tenés ahí acá le das en cero y ahora y arrancas a Aumentar tuki tuki tuki ves tuki o lo dejas por ejemplo ahí y desde acá arrancas a bajar nada Son son técnicas la verdad que es muy buena la verdad que esta forma es muy buena siento que se usaría en Casos bastante específicos o sea en Casos bastante sobre todo por cosas como estas miren miren lo que pasaría si yo acá pongo shorter hue parece que no sucedió nada acá le vamos a dar hsl esto se vería así pero

también tenemos el longer hue Entonces esto lo Que hace es hacer un cambio la rueda cromática de H es como hay que saber mucha teoría de color para sacarle el máximo provecho a esta propiedad pero mi consejo que si les interesa realmente trabajen la yo dalto particularmente la usaría en casos muy puntuales como para el que les comenté recién de que si quiero reducirle la opacidad a un elemento y que no tenga el mismo fondo que el fondo y darle yo un fondo lo usaría Okay pero Normalmente me quedaría Con mi rgb Me quedaría con

mi ex decimal Perdón En todo caso o en el peor de los sistemas iría al rgb y ahí queda y me quedo con el rgb no Entonces yo con el rgb el rgb realidad con el rgba y el hexadecimal ya con solamente tres valores yo ya estoy sobrados así que nada ya lo dejo a criterio de ustedes investiguen la propiedad más a fondo pero que sepan que existe y que nada la verdad que es una de las recomendaciones de Chrome últimamente usarla y ahora Vamos a cerrar con el la última propiedad que vamos a ver

con esto vamos a cerrar toda la sección de todo el curso y vamos a arrancar con los proyectos al fin y estoy hablando de Clip pad clip pad es una forma que tenemos de recortar el elemento de tal forma que lo que está dentro del recorte es lo que se ve y lo que está por fuera no se ve eso es todo así que bueno vamos a ver clip pad y vamos a ver cómo funciona un generador de Clip pad porque La verdad es que hoy en día nadie usa nadie usa clip pad desde cero

todos usan generadores de Clip pad y es lo correcto porque sería raro hacerlo la mano cuando tenés un generador Pero bueno nada vamos a ver cómo funciona esto de Clip pad Así que vamos Bueno ahora vamos a ver cómo funciona clip pad pero básicamente lo que permite clip pad es decir Mira vamos a hacer un recorte todo lo que está por dentro de ese recorte se ve lo que está Por fuera no es muy simple para eso vamos a usar una imagen del tipo más hermoso que hay que raro viste Porque si un hombre te

dice esos hermoso es como bien bro Gracias vos también esos hermoso pero si una mujer te dice esos hermoso es como o sea sí pero le voy a dar botón derecho copiar imagen No no vamos a copiar la imagen vamos a copiar la dirección de imagen y fíjense lo que me anoté con clip pad me anoté con cliad esto porque no voy a explicar mucho voy A ignorar esto y vamos a venirnos directamente acá voy a poner una imagen voy a adentro de la caja voy a poner solo la imagen okay Y voy a darle

en source y le voy a pegar acá Ahí estamos Bueno vamos a agarrar esto y vamos a sacarle el padding porque no necesitamos a la imagen Vamos a darle un Max wid 100% y ahí estamos creo que estaríamos no alfons se lo vamos a sacar el fit content se lo vamos a sacar esto lo vamos a sacar afuera lo vamos a sacar Está no crece más que su 100% bien una imagen responsive Bueno ahora vamos a ver clip pad y cómo funciona pero básicamente clip pad acá lo tenemos tiene varias propiedades el primero es el

círculo que es el más simple es Che De qué tamaño va a ser el círculo si le damos 50% lo que va a hacer es ocupar el 50% lo que es Esto hace internamente es calcular la distancia entre un punto que vendría siendo el centro y los bordes le estamos diciendo vas a tomar Okay la Imagen y el 50% del tamaño que tiene lo vas a agarrar y vas a crear una distancia esa distancia se usa para dibujar la circunferencia Okay entonces por eso decimos que esto es el tamaño del círculo es un 50% que

equivaldría un 100% del círculo o sea sería el círculo más grande posible ahora si le damos más que esto ya se empie empieza a recortar como ven ven eso ya empieza a tener un recorte 60 70 80 ya se empieza a Recortar por un tema de que eh es como que el círculo más grande posible es el círculo del 50% porque justamente como digo es eso traz a un punto que está en el medio va hasta 50% hacia cualquier lado no sea A qué lado va y después hace una circunferencia entonces la circunferencia va a

ser en un en una distancia del 50% Entonces te queda como que este es el tamaño del radio por eso es la gente que entiende lo básico de geometría me entenderá est es el primer Para vamos a dejarlo de 30% para que lo vean Este es el primer parámetro Okay el 30% ahora vamos a decirle at y ahora lo que nos está pidiendo es cuánto te vas a desplazar en el eje x y en el eje y en el eje x te vas a desplazar por ejemplo 100 píxeles y en el eje I 100 píxeles

y ahí vamos a ver que estamos diciéndole vas a moverte desde el punto de arriba a la izquierda 100 píxeles si le damos 50 verán que se mueve menos Ven y si le damos 0 y C le estamos diciendo esto Porque lo que está haciendo es haciendo crecer el círculo ven que acá está así y 100% crece así esto es un efecto muy común para hacer un efecto hasta acá de hecho si le le diéramos un borde a esto Border dos pixeles solid el rojo van a ver que lo que va a estar bordeando vamos

a dárselo más grande va a estar bordeando directamente esto lo ven la caja Entonces se va a estar recortando hasta el borde esto también lo podemos modificar para que el recorte incluya Esto Lamentablemente desde acá no lo podemos hacer tendríamos que directamente utilizar un after y poner la misma Ur de la imagen y hacer todo un lío pero se puede hacer desde otra técnica pero no lo vamos a ver ahora Entonces esto puede ser en píxeles o en porcentaje yo le puedo decir 10% Entonces te vas a mover 10% y 10% acá entonces V se

está moviendo un 10% o le vamos a decir Igualmente esto Debería ser menos estábamos lo teníamos en 30 Ven tenemos un 20% un 20% por defecto cuando nosotros hicimos 50% y 50% se posiciona en el centro Entonces no decir nada a decir esto es lo mismo No cambia nada ven es lo mismo entonces normalmente cambia cuando queremos modificar esto un poco si no lo modificar se posiciona en el centro o sea básicamente esto que está acá Define okay Lo único que hace clickpad es definir puntos lo que estamos haciendo con esto es decirle Mira el

tamaño desde El punto hasta acá va a ser del 30% entonces traza la circunferencia teniendo en cuenta que todos los puntos del borde van a estar a un 30% del centro Eso es todo y después de definir eso lo posiciona en el centro porque el punto por defecto está en el centro cuando nosotros modificamos estos valores le estamos diciendo no no el punto no va a estar al 50% y al 50% o sea en el centro no los puntos van a estar por ejemplo en cer0 y en cer0 Entonces la imagen comienza ahí o en

cer0 y en 100% entonces la tenemos abajo o en 100% Y 100% entonces la tenemos abajo a la a la derecha o en 100% y cero entonces la tenemos arriba a la izquierda Entonces esto funciona por defecto para que podamos mover el punto en este caso el punto está acá en otros casos el punto estaría acá acá y acá arriba eso es lo que hacemos definimos eso y definimos puntos Entonces vamos a dejarlo para arrancar en un 20% Y 20% Entonces el punto se mueve más o menos a estar acá Entonces el punto está más

o menos por acá si le damos 30 y le damos 30 lo vamos a ver ahí con un poquito de borde Vamos a darle 24 y 24 así no teamos más el recorte ahí no vamos a dejarlo en 50 y 50 por ahora porque quiero que veamos el siguiente este es la primer forma que podemos crear que es un círculo pero también podemos crear un elipse pero este no nos va a pedir un valor nos va a pedir la distancia del Centro al borde y la distancia la distancia del centro al alto entonces podemos decirle

50% 30% y vamos a tener esto por qué Porque la distancia Okay desde el centro hasta los bordes va a ser del 30% pero la distancia desde el centro hacia arriba va a ser del 50% es exactamente lo mismo solo que ahora con medir una con pintar una circunferencia estamos pintando un elipse y una circunferencia necesita un centro y una distancia con todos los puntos que están Conformando la circunferencia y un elipse necesita una distancia una distancia entre el eje x y una distancia hacia el eje I y lo demás es simplemente conectar con una

curva los puntos Eso es todo también podemos hacerlo por ejemplo al revés así y así Ven y se hace un óvalo de esta forma o podemos hacer 50 y y 80 y se pone de esta forma o 50 y 100 ven o al revés 50 y 100 acá así entonces Estas son las cosas que podemos hacer con clip pad ahora como ya sabamos en Clickpad todo es conectar puntos también tenemos la posibilidad de hacer polígonos okay Pero para esto lo que a ver una persona cuando trabaja con clickpad normalmente les voy a ser sincero al

principio usamos esto buscamos clip pad generator fíjense que yo lo tengo acá bien marcada la búsqueda le damos acá en buscar y el primero que entra no importa casi todos son útiles mientras no diga publicidad entramos y vamos a tener un generador de Clip pad Es este puede ser cualquiera es completamente indistinto acá por ejemplo lo que hacemos Es modificar los puntos ven fíjense cómo se va modificando esto modificamos los puntos y depende de los puntos que modifiquemos se va obteniendo un clip pad diferente entonces eso es lo que hacen los clickpad recortan los puntos

Eso es todo entonces copiamos este clickpad acá lo pegarías acá Ven y cuando venimos acá tenemos esto en la imagen lo mismo por ejemplo si seguimos Agreg esto es un polígono si seguimos agregando puntos tenemos de vuelta un polígono pero con un punto más y es el cuadrado entonces con lo que podemos hacer con Los polígonos es creamos puntos okay y con los puntos los movemos el Paralelo eh es como son formas son como presets que podemos utilizar eh acá por ejemplo lo que hacemos Es crear un quinto punto Ven y acá creamos un quinto

punto acá creamos un sexto punto acá creamos un siete puntos acá creamos un Ocho puntos y simplemente los modificamos Y sí esto que está acá es lo mismo que quizás un Eh Esto que está acá pero así por ejemplo es lo mismo pero para qué queremos esto no cada cosa tiene su su forma de usar tenemos que ver el sentido y también tenemos por ejemplo eh círculos a ver si encontramos un círculo ven Esto es lo que les dije el primer valor F fíjense que lo que hace es medir la distancia entre un punto vamos

a poner la pantalla completa Lo primero lo que hace es medir la distancia entre el puntito rojo este que está acá okay Y esto esa distancia mide la distancia va a ser del 15% del 20 y pico del 50 Okay respecto al total Entonces eso es lo que hace clipan mide esta distancia ven mide esta distancia ahora lo que hace lo siguiente es definir dónde se va a estar el centro Entonces tenemos esto que está acá que este vendría siendo el centro Ven y lo movemos acá acá lo pueden ver acá Observen esto movemos el

centro y se mueve esto estamos moviendo el punto donde va a estar el centro movemos el otro y se mueve el tamaño O sea la distancia entre el centro y este punto Entonces eso es lo que estamos haciendo Cuando hacemos un círculo después tenemos el otro que es el elipse ven que es lo mismo que les comenté antes movemos la distancia entre la parte de arriba y el centro y la distancia entre en el eje x y el centro ven entre el Punto rojo y esto eso es lo que hacemos y con esto movemos de

vuelta y en el polígono es diferente tenemos eh el primer punto donde va a estar el segundo punto donde va a estar el tercer punto donde va a estar y lo único que estamos haciendo es creando puntos si acá por ejemplo le ponemos una coma vamos va a crear nosotros venimos acá ponemos esto así ponerlo abajo y vamos a acceder a esto pero también podemos seguir haciendolo o sea yo puedo venir acá y Crear otro punto voy a crear otro punto y lo voy a poner en 70 por y 80% y ahí tenemos este otro

punto Entonces ahora este más arriba ahí más arriba le voy a poner ahí queremos otro punto bueno creamos otro punto vamos a crear un punto que esté en 55 por Y 20% entonces ahí creamos otro punto 40 cu está bien un punto acá otro punto acá otro punto acá otro punto acá y otro punto acá y con esto lo que hacemos es ir moviendo esos puntos ven los estamos moviendo en La dirección en la que nosotros queremos esto es justamente el funcionamiento de clickpad ahora para no ser tan precisos tenemos estos generadores que nos lo

permiten generar ven yo por ejemplo necesito Cuántos puntos necesito Quiero hacer una cruz acá tenemos predefinido cómo hacemos una cruz eh quieros hacer una estrella acá tenemos predefinido cómo hacemos una estrella acá tenemos un una una flecha de costado tenemos varias formas ahora si queremos crear nosotros Una forma decimos Bueno voy a buscar algo que necesite ocho puntos para construirse quiero construir no sé una l Ah no es fácil construir una Z eh yo sé que me va a salir Yo sé que me va a salir eh Me salió no ahí está lo podamos construir

una Z igual así no algo así Bueno ahí construimos una Z entonces copiamos lo que nos generó el clickpad venimos acá lo pegamos acá est to Un lío Pero tenemos la z que queríamos construir por ejemplo Esto está bueno Porque esto se adapta al fondo yo al fondo le doy por ejemplo negro y se me adaptó al fondo le doy rojo y se adapta o sea es como un fondo por eso está bueno saber manejar el clip pad ahora Lo pueden hacer ustedes y elegirlo ir retocándolo o usar generadores Entonces nada gente Esto fue todo

sobre clip pad Espero que le hayan dado un uso Interesante pero lo que nos compete ahora Pero bueno vamos ahora con el apartado de proyectos que igualmente no Va a durar tanto Porque si nos ponemos a pensar desde que comenzamos con el curso venimos haciendo proyectos entonces sera una estupidez re armarlos de vuelta pero vamos a hacer cosas que no hayamos visto antes vamos a hacer por ejemplo un una sidebar que es un menú lateral que no lo hicimos antes vamos a hacer una tarjeta giratoria vamos a hacer varias cosas y vamos a culminar todo

con un portfolio final y si nos da el tiempo vamos a terminar haciendo la página web oficial De Ada 13 que es la que vamos a publicar no no van a ver la parte del backend pero sí la parte del Front así que bueno gente estoy rec contento y vamos ahora sí a iniciar este apartado de proyectos con html y css y es increíble porque con estas dos tecnologías vamos a poder hacer mucho así que vamos bueno gente comenzó el momento en el que vamos a tener que trabajar con proyectos que en realidad una vez

que me puse a pensar qué proyectos podíamos Hacer lo que me basé fue en decir mira qué proyectos no hicimos a lo largo del curso porque prácticamente hicimos un portafolio ya lo hicimos Así que podíamos descartarlo pero vamos a hablar de eso más adelante no es que lo vamos a descartar pero Se los voy a dar como idad pero nada ya medo que lo hicimos hicimos de todo hicimos menús responsive fuimos haciendo cosas a lo largo del curso entonces lo que se me ocurrió fue hacer varios proyectos uno de ellos son Proyectos que la verdad

que no hicimos como por ejemplo un Side menú que es el sidebar menú que es el menú que está el menú lateral tampoco hicimos por ejemplo una web con un efecto paralax no hicimos tarjetas responsive giratorias una cosa que se usa mucho también es un sistema de mensajes o comentarios Estaría bueno también hacer un sistema donde podamos tener como un chat Y lamentablemente la página web de 13 No la vamos a llegar a hacer en este curso porque no no sé Cuánto va a durar la verdad eh Hasta ahora en lo que va del curso

esto viene durando casi 22 horas entonces con todos los proyectos que vamos a hacer ahora más con el apartado final de cómo seguir aprendiendo realmente creo que es muy complicado que el video dure menos de 24 horas e y y por ahí dura 24 exacto no lo sé pero este video tiene que subirse cuatro días y me falta editar un montón No edito con editor edito todo yo todo yo así que la gente que pensaba no dalto Le guion en sus videos no gu no todo yo hago todo yo las clas preparo yo yo todo

yo entonces no es fácil y por eso preferí en caso de que haga hagamos la página 13 hacerla en un video aparte O sea no es que no lo voy a mostrar lo vamos a mostrar Pero va a ser un video aparte dedicado porque ahora la sentiría presión porque la tendré que hac rápida entonces de otra forma puedo mostrarlo bien puedo hacer un video más preparado y un video especial mostrando Cómo Desarrollamos la página web de Ada 13 Cómo armamos un sistema de login etcétera Además quizás podemos hacer algo con Don web que es una

marca eh que es sponsor principal de la 13 quizás también podemos hacer algo con directus que es una empresa que el año pasado no hicimos un backing s simple que recibía datos y los almacenaba en una database entonces muy se les voy a mostrar todo el proceso así que sería mucho mejor que lo hagamos en un video y No Necesariamente que lo hagamos en un curso html css que por ahí no encaja del todo Así que si salieron de este curso además de ya van a saber cómo seguir porque al final del curso les voy

a explicar cómo continuar aprendiendo va a estar bueno porque igual van a poder ver otros proyectos que hagamos a lo largo el canal no es que todo esté en este curso No no eso no no es así pero bueno el primer proyecto que vamos a hacer de esta sección final del curso es un Sidebar menu no va a estar adaptado a dispositivos móviles ya que los sidebar menus son menús que normalmente están en páginas web que son en desktop es decir en resoluciones chiquitas lo podemos desaparecer o una técnica muy común que se suele hacer

es por ejemplo en el dashboard de YouTube es decir si yo por ejemplo vengo acá que este es mi dashboard de YouTube YouTube para esto tiene una versión Mobile es decir una versión Mobile en la que podemos Chequearlo de una forma diferente ven que cuando le damos clic acá se ponen solamente los íconos y le damos clic acá y se vuelve a poner esto así entonces esto es un sidebar menu pero mosquito lo voy a acabar trompada voy a poner un ra me voy a poner ra hasta en el pelo boludo dejen de romperme las

pelotas entonces lo que vamos a desarrollar ahora es un sidebar menú que básicamente va a serc eso vamos a Y es más le vamos a dar un efecto más lindo porque tengo Un truquito para enseñarles que los va a volver loco seguro Bueno lo primero que necesitamos para un sidebar menú va a ser una foto de ejemplo y también va a ser un logo Así que vamos a tener el loguito que usamos de teresia hasta ahora yo tengo esta carpeta llamada sidebar menu Okay voy a crear una carpeta nueva que se va a llamar imágenes

y mg y adentro le voy a pegar estos dos que teníamos desde antes que uno es el logo Okay que es este que está Acá perdón el logo no en mi imagen mi cara y otro es esto que está acá que es Ada 13 Estos son colores azules pero yo no quiero trabajar con azules yo esta vez quiero trabajar con colores con los colores originales y ir convirtiéndolo así que lo vamos a reemplazar voy a hacer lo mismo que antes me voy a descargar el logo de a 13 lo voy a descargar acá en la

carpeta imágenes y le voy a poner logo.png lo voy a guardar sí voy a buscar dalto de vuelta y me voy A descargar esta imagen de YouTube que es en la que soy yo prácticamente Así que dalto png lo mismo vamos a abrir las dos imágenes con gimp acá ya tenemos las dos las reemplacen primero la de dalto convertir Ahí está y vamos a hacer algo que es lo que uno suele hacer esto está bueno porque lo tengan de práctica pero en realidad uno cuando desarrolla una página web realmente no es uno Cuando hacemos páginas

web dinámicas no que Tienen backend y demás A menos que sea fija uno no suele eh hacer esto uno norment tiene sistem mitas que te lo hacen automáticamente o los programas voos en este caso lo que tiene que hacer este sistema es reducir el tamaño de la imagen yo por ejemplo ahora lo voy a unir y voy a poner que la imagen tenga 128 por 128 por ejemplo porque más que esto no vamos a usar y ahora voy a a redimensionar la imagen también voy a ponerla acá arriba 128 también por 128 Ahí le damos

en escalar la imagen no es que se ve tan Pro pero más que esto no necesitamos una resolución mayor a esta Por eso la voy a guardar Así le voy a sobreescribir y ya está también podemos usar la técnica de que se carguen dos imágenes al mismo tiempo pero en este caso no no lo necesito Así que paso Esta vez y también vamos a abrir Okay el logo el logo de da 13 Acá está vamos a hacer lo mismo Vamos a darle un tamaño de Lienzo de 400 por 200 Ahí está y le Vamos a

dar en sobreescribir logo perfecto y vamos a crear una versión más chica que va a ser de 200 por 100 Ahí está perfecto y vamos a chicar a lo mismo si era 200 por 100 tiene que ser 300 por 100 escalar y esto lo guardamos como logo Smile ahí tenemos una versión chiquita del logo y una versión grande o la original Bueno ya estamos lo que voy a intentar hacer en este proyecto es aplicar todo lo que vimos no vamos a usar ni malas prácticas ni malas Técnicas No no eso no no no es el

objetivo vamos a hacer un sidebar muy bueno va a estar espectacular lo van a poder aplicar de verdad Pero lo que voy Es que voy a intentar hacer que apliquen todas las técnicas que vimos a eso voy o sea no no me voy a enfocar en intentar optimizar cada aspecto mínimo del Side sino que que podamos aplicar técnicas que nos permitan después hacer otras cosas o voy a intentar hacerlo con lo que vimos en el curso digamos Básicamente eso y además vamos a usar cosas nuevas porque van a aprender cosas siempre que que veamos esto

no hay cosas que por ahí no vimos explícitamente pero que las aprendimos durante el curso así que ya con esto ya estamos listos para comenzar lo voy a correr en tiempo real acá estamos Perfecto Bueno ahora solamente tenemos que comenzar a trabajar para arrancar lo primero que vamos a aprender es a integrar una librería de iconos Okay si ustedes Buscan Google material icons simbols outlined esto que está acá Okay vamos a ver si se los pueden permitir a ver dónde está la etiqueta Esta que está acá no esta no Bueno vamos a clicar acá vamos

a entrar a una página de Google y le vamos a dar en developer guide y acá van a tener un van a explicar les van a explicar cómo hacer esto okay Yo necesito que hagamos algo igual y es copiar Esta que está acá esta etiqueta que está acá tienen que buscar cómo Hacerlo de Google icons pero básicamente entran a Google icons ponen en guía para desarrolladores y copian esto que está acá si no pueden copiar esta URL y listo para qué esto Bueno muy simple esto es eh algo que tiene Google que es una de

las tantas cosas interesantes que tiene que nos hacer lo siguiente fíjense Qué pasa si yo acá por ejemplo pongo un simple spam normal y le doy una clase Cómo eran las clases lo voy a googlear Ah no no no es necesario era materials Symbols outline lo tengo acá arriba qu tardado que soy ahí estaba y acá por ejemplo ponemos home fíjense lo que pasa salta un icono tenemos un icono acá ahora si escribimos cualquier otra cosa nos salta así entonces por eso es importante que si le dig Jo me salta Jo home me salta así

entonces es importante que pongamos esto así ven tenemos home tenemos menú tenemos diferentes iconos que vamos a poder utilizar ahora cómo conocemos esos iconos simple si ponemos Icons Google acá vamos a tener todos los iconos si por ejemplo vamos a los iconos ven acá abajo tienen todos los iconos Entonces por ejemplo esta dice Chevron right si la queremos conseguir qué hacemos bueno ponemos Chevron gu bajo right es todo en minúscula y se separa por guiones bajos cuando hay espacios entonces actualizamos Y observen tuki tenemos la flechita queremos usar este signo de logout bueno ponemos logout

log out Ahí está y acá tenemos este signo de Logout Entonces esto es espectacular porque ustedes pueden utilizar iconos y no usar imágenes ni nada hay otras formas de utilizar iconos estos mismos de Google pero nada a mí me gusta usarlos así la verdad Lo único malo es que cuando ustedes no tienen internet la página no no van a poder ver los iconos cargar porque esto lo que hace es está llamando a una URL externa Entonces si por ejemplo ustedes no tienen internet si ustedes copian el enlace y vienen acá Y lo pegan van a

tener esto que está acá esto que está acá es simplemente un acceso que tiene Google que está accediendo enen es algo que hace Google Entonces nosotros estamos utilizando este código podemos descargarlo tener y descargar todos los recursos para que los tengamos nosotros en nuestra computadora pero es al pedo en este caso componer esta línea de código ya está porque nosotros no queremos tener acceso a internet cuando queremos que los Recursos sean nuestros y cuando no queremos que dependan de alguien más pero como están dependiendo de Google y Google es gigante nada no está mal hacerlo

de esta forma después si lo quieren hacer ustedes para quedárselo ustedes y descargarse todos los recursos lo pueden hacer pero por mi parte así está perfecto así que bueno eso solamente para chequear que esté esto conectado lo vamos a dejar abierto acá porque lo vamos a usar así que bueno Vamos a comenzar a crear la estructura bu para arrancar creamos arrancamos cre ando una Side porque esto es literalmente una barra secundaria adentro vamos a crear un form Por qué vamos a crear un form simple porque esto vamos a vamos a utilizar una técnica que es

la la del click como no usamos javascript en este curso no vamos a usar javascript Esta no es una forma que está mal pero es mejor hacerlo con javascript pero si solamente lo quieren hacer con Html css Bueno podemos usar la técnica del checkbox para dar estilo a los elementos Vamos a aprender a hacerlo porque no está mal los conocimientos para poder hacerlo no Además menos menos sobrecarga de javascript Pero bueno adentro vamos a poner un input type checkbox y le vamos a dar el ID Open menú como antes y y cerramos ahora vamos a

poner un Label que va a tener la Class lo mismo material simbols outlined vamos a checar un poquito esto porque vamos a Tener que trabajar así Ahora lo siento vamos achicar esto un poco Ahí está outlined y vamos a cerrar el Label y acá vamos a poner menú no vamos a poner una cruz Close menú o Ah Close menú Mira lo que me carga Close Ah close me está cargando dos iconos Close y menú creo que con Close es suficiente Ahí está est en realidad es igual que poner una x no es casi igual Pero

bueno vamos a dejar ahí en el icono Close esto después Este checkbox lo vamos a ocultar pero está Bueno que cuando le demos clic al Label también se se chequee el input pero no está pasando que ya Ah le tenemos que dar el for for Open menú O sea que ahora le damos click y ahí está perfecto una cosa que no me gusta es que a veces cuando le damos clic a algo ven que como que se selecciona después con el user selected lo vamos a sacar que no sé si lo vimos eso o no

pero también lo vamos a poder ver ya está el Esto del form Ya está listo ahora podemos crear un Picture para cargar el logo de Ada 13 dinámicamente no esto igual no es necesario Tampoco porque ya está carguemos el logo grande y listo pero vamos a hacerlo bien OK Vamos a cargar abajo el Grande vamos a poner la imagen img source img logo de 13 Ahí va y acá vamos a poner el source pero es bastante Sí es bastante grande vamos est un poquito más chiquito igual porque está muy grande al 200 y vamos a

darle en source Sr source set Imagen cómo era logos mal.png y vamos a cargarlo vamos a cargarlo cuando Max 57.5 era no esa medida entonces ahí está entonces ahora ya tenemos esto que es si es algo chicos A ver vamos a checarlo un poquito porque si no no se va a notar a ver si esto funcion Ahí va ven si tenemos esta resolución se va a cargar este logo si tenemos una más grande se va a cargar el logo más grande ahí ya tenemos una Por qué no una optimización Después le vamos a dar estilo

a la imagen para que tenga el tamaño que querramos nosotros Pero de entrada esto yo lo veo bastante bien primer cosa ya está hecha ahora por debajo del picture vamos a crear el nav porque acá va a estar la la navegación de verdad vamos a darles clases correctamente a est le vamos a dar la clase sidebar al form le vamos a dar la clase sidebar form al picture le vamos a dar la clase cbar picture y al nav le vamos a dar la clase Cyar nav parece que usamos los nombres de los elementos directamente no

Qué curioso bueno bien bueno acá vamos a crear el u y acá vamos a crear los l los Li van a tener esto es interesante Cómo lo vamos a hacer van a tener un I no vamos a poner un spam vamos a poner un spam y acá va a estar el logo y todos los spam van a tener Uy mosquito la que te agarre sabes como te dejo te aplasta va a tener un spam con la clase de material acá está va a tener la clase Material y abajo va a tener un a que va

a tener el href bueno Vamos a darle un hashtag que esto te va a llevar a las diferentes secciones y acá va a estar el nombre que por ejemplo podría llegar a ser bueno el elemento No acá por ejemplo le vamos a poner notifications c creo que es ser un logo No sí Acá está acá está y abajo le vamos a poner notification Entonces tenemos por un lado el texto y por otro lado el icono Entonces vamos a copiar y pegar Varias veces pegamos no el ul no solamente los l Ahí va pegamos pegamos pegamos

pegamos con cinco opciones estamos bien no sí con cinco estamos bien bueno Esto va a ser un icono de mensajes que esto es interesante porque tenemos por ejemplo el fíjense esto tenemos el mail Entonces cuando por ejemplo nosotros podemos programar para que cuando tengamos un mensaje recibido ponemos mail Cómo era el icono a ver resed mail vamos a poner mail este mal Mark email and read entonces venimos acá y ponemos Mark email Andre Entonces cuando por ejemplo tenemos un mensaje nuevo lo que hacemos Es Poner este icono que está acá lo ven Este iconito Entonces

cuando el mail no está leído lo dejamos en mail cuando está leído le ponemos este icono entonces Está bueno porque podemos hacer como una programación para que cuando nosotros detectamos en nuestra base de datos que hay un mail que el usuario no leyó tuc Le hacemos Que tenga este iconito con el loguito arriba lo mismo con el vamos a poner darle mail lo mismo con la notificación creo que hay un mensaje que es notifications important o notification importa Ah cces tenemos este o este cuando cuando no hay notificaciones tenemos este y cuando hay notificaciones dejamos

Este Entonces de esa forma ven podemos ir mutando entre si tiene mails o no tiene mails es esa es un poco La magia de usar iconos También no poder agregarles esas cositas y demás a ve si se puede hacer con un before igual o con un after pero ahora ya que ya tenemos el icono no nos cuesta nada modificarlo dinámicamente con javascript en el futuro no con ahora solamente diseñar la estructura para que después se pueda modificar con javascript es suficiente Así que es lo que estamos haciendo así que ya lo tenemos perfecto abajo le

ponemos mail y acá le ponemos mensajes a este que está Acá que puede ser y vamos a ser que es una página para comprar Así que vamos a poner shopping shopping cart Ahí va cl pasa que yo ya ya he usado esto de icono ent más o menos algunos me acuerdo o me imagino cómo pueden ser después tenemos el de abajo que podría llegar a ser el account balance account balance y esto Debería ser un balance no balance no esto es literalmente una balanza vamos a probar con account balance account balance Ah mira exactamente lo

que Necesitamos el balance de cuenta perfecto y abajo de todo vamos a poner el settings settings que tiene que ser sí o sí la tuerquita viste Ah y acá ponemos settings Ahí está entonces ya tenemos esto listo también y tenemos esto que debería abrir y cerrar el menú tenemos esto que está acá y vamos a crear abajo otro otro más vamos a hacer que el nav permanezca acá pero abajo va a tener un div que va a tener la clase sidebar profile y profile vamos a tener La cl va tener específicamente la clase profile eh

Aunque no necesitamos darle la clase va profile está bien Sí ahí va y acá vamos a darle por ejemplo Ahí va un simple que va a tener un link con una imagen que va a ser nuestra imagen que va a tener el sourced alto.png a ver si me carga bien png ahí cargó la imagencómo de una carpeta llamada imágenes bien Vamos a checarlo un poco Ahí está y va a tener el nombre que en este caso puede ser un spam que sea Lucas dalto por ejemplo o mi perfil va a ser mi perfil mi perfil

o profile profile sí profile y abajo vamos a tener uno parecido a estos otro Li más otro Li que sea parecido pero que tenga el logout para cerrar sesión digamos entonces ponemos log log out a ver ahí cargo y acá le ponemos logout entonces de esta forma puedes cerrar sesión Entonces tenemos una opción para todas las opciones tenemos el perfil de cada uno y después el logout acá están todas Las opciones no sé si es la mejor forma de estructurar un menú que yo creo que seguramente no O sea a nivel experiencia de usuario digo

no o o no sé si está bueno Mostrar estas opciones en ese orden quizá o es la forma correcta de presentarlas no nos encargamos del diseño son nosotros nos encargamos del desarrollo y el diseño estructural técnico del proyecto no no no somos quien decide dónde va el setting si va acá o si va acá abajo pero más menos Suele ser el orden no lo que te genera dopamina suele ir Primero Como por ejemplo las notificaciones o los mensajes que son lo que más dopamina genera después tenemos el shopping Card que es como la opción que

va generar guita el account balance después el setting que es la opción de configuración y mientras menos importantes o menos usadas al final creería que son Entonces no está tan mal además también se pueden separar por sus Grupos y así así que bueno ya tenemos esto listo bien bien Bueno vamos ahora al css que es todo lo que necesitamos que esta es la parte Ahora sí viene la parte compleja para comenzar agarramos el di el el body el div el ul los Li los a Ah bueno los h1 h2 h3 h4 y a todos le

vamos a poner un margin cero y un padding cero padding cero así Ah bueno mucho mejor Ya está nos recatamos bastante bien La verdad vamos a agarrar el body y esto está bueno porque ahora Ya vamos a empezar a aplicar lo que vimos Uy Por qué se me abrió esta pestaña Ah cierto que no resolvi el problema todavía vamos a minimizarla para que no nos siga jodiendo bueno en el body vamos a poner vamos a crear no voy a reiniciar la unidad para comenzar vamos a poner un para comenzar vamos a poner un background color

que va a tener el color del fondo y vamos a arrancar con un color mix color mix ines rgb Eh f62 Puede ser no está mal es un color pasa que no me lo muestra al costado porque estamos en la función de color mix Bueno ya está me cansé voy a cerrar voy a finalizar la tarea del Explorer perdón pero cho Explorer afuera Explorer afuera chu y vamos a dejar al 70 por por qué no y eh vamos a tener el White de fondo el fff el blanco ya tenemos un buen color de fondo vamos

a definir vamos a aumentar un poquito el zoom para que no tengan problemitas de vista pues Son Medios biscos Ahí va Vamos a crear otro color el otro color va a ser el sidebar color que va a ser blanco en este caso le vamos a dar la variable también sí en este caso va a ser blanco sí más fácil vamos a dejarlo en blanco y después vamos a definir un eh Dark color y un light color vamos a quedarnos con el Dark para ahora que es el f62 que es este que está acá arriba ahora

se me están mostrando bien los colores bien Ahora vamos a arrancar al Body dándole Un background color del vg color veg color significa background Okay solamente que lo simplifico y ahí ya tenemos el fondo de color no es un color feo y está bien me gusta simplente porque ya me imagino terminado Esto bueno ahora vamos a arrancar ahora con los heavy vamos a comentar esto y vamos a poner eh Cyber Styles y ahora venimos a poner sidebar y la agarramos bien para comenzar le vamos a dar el background color bar eh sidebar color y por

qué Hacemos esto de darle color de esta forma con variables simple porque imagínense que ustedes el día de mañana implementan colores negros no O quieren crear una versión de modo oscuro una versión de modo oscuro lo que van a hacer es si el usuario tiene activadas las preferencias de modo oscuro ustedes qué hacen y hacen que todas estas variables de color cambien y que por ejemplo el color del sidebar en vez de ser blanco sea negro que el Dark color En vez de ser este color sea un color quizá un poquito o más claro o

más oscur entonces pueden cambiar los colores en el futuro con un mediaquery y de esta forma es muchísimo mejor porque ustedes no necesitan andar cambiando los colores de cada uno de los elementos no no no todo trabajan con variables el día de mañana si este color lo usaron 33 veces este color lo usaron 27 y este lo usaron cuatro veces lo cambian una sola vez acá una sola vez acá y una sola vez acá y Cambian todos los colores de la página que eso es la magia un poco no de hacer esto entonces eh pueden

trabajar con un modo oscuro de forma muy simple sin crear otro archivo completamente diferente para modo oscuro que eso hace mucha gente mucha gente con javascript carga dinámicamente eso dice si la p si el usuario tiene modo oscuro cargamos una hoja de estilos si tienen otro cargamos otra hoja de estilo Pero para qué trabajar con variables te ahorrá Muchísimo código y menos tiempo de carga Vamos a darle un a esto no perdón al sidebar también Vamos a darle un posi fixer ya fíjense que se adapta al tamaño que tiene Porque necesitamos que esté fijo los

las barras laterales están fijas están en fixed En todo caso le pueden dejar en sticky Porque si tienen un footer y quieren trabajarlo lo pueden trabajar no me rompa los hos por por ahora va a ser fixed le vamos a dar un hate de 100 View por hate no 100 display View por hate para que sea si nada si algún loquito qui usar celular que pueda vamos a darle un wid ahora vamos a aplicarla del clamp sí por qué no clamp y le vamos a dar que el wid va a ser 220 píxeles 20 View

por wid o máximo de 300 píxeles Por qué no ahí va entonces ahí vamos a ver qué pasa si la achicamos eh bien se va adaptando Y no crece más que 300 píxeles Está bien me gusta me gusta que tenga este tamaño y que se mueva así bien Ahora vamos lo mismo pero con la Tipografía font size clamp clamp un Rem 2.2 vi por wid que es lo que usamos la otra vez creo y tres Rem sí por qué no Esto está bueno porque cuando le sacamos el zoom a la página esto se adapta igual

ven se adapta igual y ahí se va adaptando pero no se no se me está terminando de adaptar no se me está terminando de adaptar Igualmente acá Debería ser Card cart acá debería decir balance y ahí está ahora sí bien bueno Entonces ahora sí a ver si tiene las Medidas correctas sí está correcto ahora con zoom sin zoom se adapta siempre bien vamos a dejarlo al 100% Vamos a darle un display Flex y ahora van a ver por qué porque vamos a darle un Flex Direction column y vamos a darle un space un justify content

Perdón justify content space between para que se ponga esto acá esto abajo y esto acá vamos a darle también un padding padding 30 píxeles arriba y abajo cer a la derecha 30 abajo como dije y seis a al fondo parece que No hicimos nada pero ya vamos a ver cómo vamos avanzando por ahora vamos a encargarnos de dejar el form Okay el form sidebar form en position absolute position absolute para que no moleste Ahí va para que se ponga por fuera le vamos a dar un display n de hecho así nos molesta después le damos

estilo después le damos estilo Pero Ah ahora no va a molestar porque va a estar posicionado de forma absoluta entonces necesitamos si lo vamos a trabajar vamos A trabajar bien pero después bueno el sidebar Ya lo tenemos estilizado entonces bien Vamos con lo de adentro Entonces vamos a agarrar el sidebar nav y le vamos a dar un Flex un Ahí está display Flex también o sea tenemos que darle display Flex y un Flex un ahora vamos a agarrar el sidebar nav ul le vamos a dar también un display Flex un Flex Direction column un justify

content Center ahora vamos a agarrar los items sidebar item vamos a arrancar sacándoles El list Style n que no se nota mucho pero los tienen porque no tienen el padding Vamos a darle un display Flex a item Center Esto es para que estén centrados que que está un poco de está un poco Injusto Esto entonces lo estamos centrando pero como que no se quiere centrar no le dimos sidebar items Ah no le dimos sidebar item qué boludo que somos Class cyar item Cómo No le vamos a dar a los items cyar item Ahí va ahí

va ahí va Y estos dos también ahí va Bueno Ahora están por lo menos bien todos vamos a darle un text transform uppercase para que se transforme entonces en mayúscula vamos a cambiar también la tipografía porque no me gusta nada la tipografía que tiene y le vamos a dar un font family mons rat Por qué no me gusta Monster rat que quede Monster rat a los sidebar item a le vamos a dar un color inedit para que herede el color y nosotros podamos trabajar desde acá con el color y si acá le damos color Rojo

se queda en rojo por ejemplo entonces va a ser mucho mejor eso Y de paso Vamos a sacarle el subrayado eh text decoration none Ah V ahí le sacamos el subrayado y nada está todo bien va a tener un font size pun Rem para se un poquito más chiquito Además está se estarían adaptando Y van a tener un padding right de se píxeles el padding más que nada es para que se para que se separen en realidad del borde cuando hagamos el efecto de over y ahora vamos A agarrar el sidebar item y y al

sidear item I le vamos a dar un padding de 12 píxeles que esto es lo que va a tener el padding que va a separar los elementos y un font size dos r Perdón nosotros no usamos s para los iconos qué boludo usamos spam spam bueno esto ya acá tenemos toda la magia ya acá creo que se empezó a notar Esto fue lo que acabamos decer recién fue clave me parece vamos a darles También acá un color bar Dark color y ahí ya tienen por eh eh me está Gustando esto vamos a agarrar el el

over ahora vamos a agarrar el cyar item over cyar item over y en over le vamos a dar un background color bar background color Por qué Porque tiene que tener el mismo color del fondo ahora ya van a ver por qué acá lo que tenemos que hacer es darle a esto un eh Wi del 100% para que podamos ver ahora sí bien y en over también le vamos a dar un color el color del texto va a ser de la variable del color del sidebar Entonces esto se va a Invertir o sea el color va

a ser el mismo que el del sidebar pero el background va ser lo mismo que el del fondo esto para que se puedan mezclar ahora van a ver el efecto que queremos lograr pero es interesante cuando lo entendemos Bueno ahora le vamos a dar a los ems le vamos a dar a los items un bordes radius 26 píxeles 0036 píxeles Porque queremos que tenga solamente los primeros bordes ahí Esto va tomando forma bien Ahora arranca la parte Compleja okay Porque lo que tenemos que hacer ahora sidebar item over before ahora vamos a accer al before

esta acá Viene un poco La magia de lo que les quería Mostrar que es un truquito interesante que podemos aplicar es más Vamos a darle al mismo tiempo a los dos porque hay hay ciertas propiedades que comparten el after y el before para empezar un content y ahí los dos después el background color bar igual que el background el color de fondo position Absolute tiene que tener también entonces como vamos a trabajarlo con esto esto que está acá tendría que tener también position relative ahí está seguimos trabajando el right tiene que ser cero porque lo

queremos al costadito del todo va a tener un wid de 16 píxeles por y un wid de también un he 16 píxeles vamos a ha 16 por 16 he va a ser 16 por 16 no 18 por 18j 18 por 18 bien para qué queremos esto ya van a ver vamos a agarrar Ah los mismos pero vamos a Agarrar vamos a pegarlo dos veces porque en una vamos a agarrar al before y en otra vamos a agarrar al after vamos a borrarle todo el contenido y vamos a trabajar a los dos porque lo necesitamos a

los dos es más vamos a sacarle el hover Porque necesitamos solo trabajar el before y el after acá Ahí va y ahora sí en over el over los modificamos No mentira tiene que ser esto tiene que ser en over porque si no se van a mostrar No necesitamos que se muestren van a ser en Over s primero le vamos a dar un Border bottom bottom Border bottom right radius y va a ser de distinto 25 píxeles le vamos a dar a ver qué pasa cuando ponemos el mouse encima no parece pasar nada pero algo pasa

les puedo jurar es más vamos a para hacerlo visibles vamos a ser que estén así así los podemos Cuando le ponemos el mouse encima Vamos a darle para que lo podamos observar un top menos 10 píxeles Ahí va ahí lo podemos observar bien acá se nota el Border bien Se nota lo que queremos que se note Vamos a darle por último un Box Shadow cuatro píxeles cuatro píxeles cero y cuat píxeles bar background color y ahí más o menos se puede apreciar un poquito esto bien pero para eso tenemos que dejar el color de fondo

transparente porque si no no se va a notar background color transparent a ver si se nota Ah hay algo algo pimos ver a ver vamos a dejarle a ver si le damos top men 12 píxeles a ver si damos top men1 top men1 Bien Ah claro porque esto m 18 boludo y ahora vamos copiar y pegar lo mismo con el after Pero va a ser un bottom men1 bien y ahora tenemos que invertirlo esto no tiene que ser el bottom right radius tiene que ser el top right radius pero el Drop Shadow tiene que estar

en4 Ah va Ah miren Qué hermoso efecto que logramos espectacular Este era el efecto que les quería Mostrar que les dije que era muy lindo y para mí es una locura este hace parecer como que el nav forma parte del Fondo Así que para mí esto es una locura así que bueno esta parte ya la tenemos pulida bien Bien Ahora sí vamos a agarrar el sidebar picture y le vamos a dar un primero la imagen vamos a agarrar porque vamos a agarrar la imagen vamos a dar un Wi también clamp quiero que lo usemos bastante

el clamp 4 Rem 75 por y 20 Rem Por qué no y hay más o menos está Vamos a darle un margin auto también para que se Centre cuando le demos medidas al picture opacity 82 porque Siento que es un naranja muy fuerte no ahí se adapta un poquito más al color y vamos a darle un filter H rotate 20 deg a ver cómo queda no es demasiado 12 deg no tiene que ir para el otro lado menos 10 de Ah bueno a ver men 20 men2 de e se parece -22 de nos quedó casi

el mismo color que el fondo Mira qué espectacular Esto no se hace igual eh nunca tienen que agarrar un logo y modificarle el color Pero a mí no me gustan los colores de a 13 Perdón que les diga pero me Gusta un poco el concepto y además el naranjita pero no me gusta ese naranja puntual Me parece muy feo no combina con nada y además no no no no me gusta Entonces vamos a dejar este después ya cuando la empresa lo cambie veremos Cuál es el nuevo color Igual yo soy deño de la empresa Pero

nada no importa Per bueno la verdad que me gusta eh Me gusta mucho cómo estamos Cómo está quedando esto bien Bueno ahora vamos a agarrar el picture vamos a agarrar acá arriba tiene Que venir por orden jerárquico tiene que venir arriba sidebar picture y vamos a darle margin left 24 píxeles así se mueve un poquito es más le podemos dar 1.5 Rem que es lo mismo No sí es lo mismo un Pos relative y un Z Index 10 por qué esto bien porque después vamos a ponerle por encima el checkbox y queremos que el checkbox

como esto viene después si nosotros le damos al checkbox un Z Index y lo ponemos por encima no se va a notar y no lo va a poder cliquear Porque vamos a aparecer como que el checkbox lo tenemos acá pero el checkbox va a estar por debajo del logo Entonces como no queremos que esté por debajo del logo y queremos poder cliquear el checkbox tenemos que darle un Z Index 10 para al Label que va cliquear el checkbox darle un Z Index 20 y poder cliquear los y que no nos quede por debajo entonces esa

es la idea no bueno ahora acá vamos a eh cambiar un poquito acá vamos a darle sidebar picture Styles Y acá vamos a darle sidebar profile menu Styles bien sidebar profile para arrancar Igual vamos a agarrar la imagen que está acá que no me gusta el tamaño Vamos a darle un bord radius del 50% para que gire como esto es cuadrado bord radius radius como estos es cuadrado un bord radius del 50% siempre hace que sea una imagen redonda Vamos a darle un Wi de dos Rem así cortito Solo dos Rem Ah también al sidebar

profile span deberíamos darle un Un font size de punto nu r porque tiene que tener lo mismo que esto Ahí va ahora me gusta más pero debería tener un color y vamos a crear una especie de Grey una especie de color oscuro a ver text color vamos a dejarle text color de última Vamos a ponerle negro este negro Ahí va entonces ahora venimos acá y a todo el texto le vamos a dar así color text color y ahí lo dejamos ahí nos quedó Ese negro que es un gris en realidad pero está bien no está

tan mal 3 3 3 Eh 4 44 mejor ahí va listo mucho mejor pero solo al spam que está dentro de un l spam que es hijo directo de un l Ah no quiero darle a este este estilo por eso no quiero darle ese estilo a esto que está acá de última en vez de darle un spam le damos otro texto y le damos punto profile option le vamos a dar y venimos a este spam y le damos también la clase A dónde está el perfil acá Class profile option entonces venimos acá y le damos

profile option solamente Al profile option perfecto a mí me gusta mucho más es más a este le le deberíamos poner la clase item profile mucho mejor y acá agarrar el item profile y a esto darle mucho mejor no Ah pero este no es el item profile el item profile es el de arriba este saar item item profile Ah ahora sí me parece que es mucho mejor y lo que podemos hacer también ahora es agarrar el item profile y darle es más esto debería tener un. o Rem Es demasiado grande Ahí vamos a darle un Margin

de 12 píxeles Por qué no así se separa Además este tiene que tener esto ahí el tema es esto esto que está acá es medio molesto Así que para eso mejor vamos a darle un item profile over y va a tener un Wi fit content y el item profile before el after a ambos al before y al after after le vamos a dar a ambos display none Ahí va entonces ahí no molestan Ah No mira mir que no se escapó no se escapó Ah Es con dos qué que soy Ahí va a ver listo Espectacular

y le vamos a dar un borde radius de todo 25 píxeles Entonces hay mucho mejor me gusta mucho más eh pero vamos a hacer que no tenga un padding porque el padding no está bueno margin 12 píxeles pero el padding 0 12 píxeles 0 ahí ya debería será este padding Ah ah ah es el padding que tiene el spam bien Entonces vamos a darle item profile acá acá arriba lo tenemos seleccionado espectacular y acá le damos Este padding Entonces mejor no pero sería arriba y Abajo cero y a los costados 12 píxeles Oh me gusta

mucho más es más Vamos a darle nueve píxeles acá cer y 12 píxeles Ah Ahí está mucho mejor sería al revés igual no sería 12 píxeles acá y y nu píxeles acá entonces ahí uh Me gusta y en over le vamos a dar el color blanco o no el color del sidebar Vamos a darle y al profile también le vamos a dejar un color inedit y al item profile le vamos a poner un color color bar el text color no sé dónde se lo pusimos text color Dónde lo usamos acá sí vamos a sacarlo de

acá vamos a darle inedit el text color pero en over le vamos a dar un color bar el sideb color entonces ahí ahí está uh Me gusta como viene quedando me gusta bastante bien estoy estoy conforme estoy conforme es más incluso a este podríamos hacer que no tenga ni efecto no que solamente se le subraye el texto pero sol los dejo ustedes eso yo no Aunque el el fit content debería estar acá directamente no ahí Entonces El fit content Debería ser siempre bien Che me gusta lo que logramos eh Me gusta ahora Les propongo algo

Les propongo que esto así como está que lo adaptemos a ver qué opinan ustedes no no que lo adaptemos que hagamos que se pueda retrotraer el menú Y eso lo vamos a hacer sí no se los propongo lo vamos a hacer Igual aunque no lo quieran hacer y vamos a hacerlo con esto directamente Okay vamos a sacarle el display Non y ahí lo tenemos vamos a arrancar a Trabajarlo vamos a sacar el display Non y vamos a arrancar a trabajarlo pero acá una cosa que me gustaría hacer antes es que el item profile cover a

la imagen que está dentro que le demos un opacity pun 7 no entonces así la imagen también se como que se selecciona bien ahí me gusta me gusta bastante bien Ahora sí ya estamos listos para comenzar a trabajar con el F para arrancar vamos a agarrar el input type checkbox Ahí va y vamos a darle un display none no nos interesa Que se vea bien solamente nos interesa la crucecita esta al sidebar form vamos a dar un Z Index 20 para que esté por sobre encima y lo podamos cliquear porque si no si se fijan

cuando le damos clic acá estamos entrando a la imagen no podemos tocar o sea acá por ejemplo igual esto no lo van a ver ahora lo van a entender Más adelante cuando sea más grande el icono pero por ahora vamos a dejarlo ahí en Z Index 20 y vamos a darle un r right menos un Rem a ver qué Pasa Ahí está bueno acá necesitamos tener la crucecita bien vamos a agarrar ahora el sidebar form Label no sidear form Label no vamos a Agar el sidebar Label Porque después lo vamos a necesitar Pos relative porque

vamos a necesitar trabajar con el before ahora y after color bar lo mismo background color no perdón el Dark color va a tener ese color bien el background color sí va a ser como qué color va a ser Va a ser del background color no ahí va sí Debería tener el background color y va a tener un font size de dos Rem bien no no el color Mejor vamos a hacer así el color va a ser blanco va a ser el Cyber color Ahí va bien ahí lógicamente va a tener un borde radius del 50%

también porque queremos que sea un circulito bien le podemos dar un padding pun C R para que sea un poco más ahí está y esto que está acá vamos a hacer lo mismo que antes y vamos a darle el efecto acá arriba a ver si lo podemos lograr Primero Vamos a darle en user selected none porque molesta o sea cuando me molesta que se seleccione esto Así que con el user selected n ahí no se va a seleccionar es más vamos a dárselo el user selected a acá arriba arriba de todo Label van a tener

user selected N O por lo menos en el span por lo menos los que estén adentro de un sidebar nav esos no se van a poder seleccionar Side barn Ahora sí es demasiado grande igual no demasiado grande Vamos a darle en punto 3 Rem tiene demasiado padding Ahí está punto cu a m me gusta punto cu más bueno ahora vamos a agarrar el before y el Label sidebar Label before y bueno el after after Ahí está agarramos y le damos un content cero lo mismo que antes background color background color Pos absolute por eso le

dimos position relative al Label with cuánto puede ser y este vamos a hacerlo de 13 píxeles y el he de 25 píxeles y ahora vamos a agarrar el after solamente el after y Solamente el before como antes al before le vamos a dar top -25 píxeles Ahí está left 20 píxeles a un poquito menos no top 24 Debería ser Border bottom radius 25 píxeles Ay ay ay no tenemos que darle 25 acá Ah va bien y lo mismo Box Shadow cu píxeles 4 píxeles c cu píxeles y el color del fondo background color Ah a

esto le tenemos que dar transparente color transparent Perdón perdón casi me asusté background color transparent Ahí Está ahora se nota un poquito no me gusta a ver si lo tiramos para arriba 25 está perfecto 25 men está perfecto Es una buena medida por no bueno y hacemos un copy Pay pero a inversa ahora vos acá y inversa bottom acá ponemos top lo mismo top y acá ponemos menos cu a ver si funciona Uh funcionó perfecto igual que lo pienso a ver voy a probar cambiar el le doy en left 19 ahí se integra mejor no

y acá lo mismo acá le doy left 19 ahí se integró mucho mejor me parece Si se adapta diferentes resoluciones se adapta re esto bien golazo a ver si lo movemos así 50 sí no se adapta bomba Esto sí está perfecto bien ahí me gusta más bien Bueno ahora tenemos que hacer el Esto del checkbox tenemos que hacer qué si el input Ty checkbox está chequeado checked tenemos que usar la verguilla virguero como siempre copy pego siempre ler Esto es para agarrar al hermano o sea el Label que sea hermano o sea el Label que

sea hermano de un que esté chequeado va a tener un color background color Ahora sí vamos a chequear y un background color blanco o sea el del sideb color en realidad el del sidebar Ahí va bueno se nos está rompiendo un poco Tenemos que sacarle medio raro esto igual no y tenemos que hacer algo con el after y el before agarramos acá y agarramos el after sería Label after y copiar todo coma abajo pegar todo before y ahí estaría bien y acá le damos Display n a ver si ahora funciona ahí funciona bien Bueno me

gusta a a ver la otra que podemos hacer es hacer la invertida no O sea hacer que de última Ah pero eso ya no siento que es demasiado rebuscado pueden hacer el mismo efecto este que está acá Este efectio mínimo de la curvita con el after y el before pueden intentar hacerlo del otro lado para Eso Tienen que poner o sea tienen que Modificar el box Shadow tienen que modificar la Posición de los elementos y el este radius que en vez de ser right sería left Y en vez y así pondrían el top y el

bottom entonces simplemente le modifican el left o sea anulan este y dejan el left para ambos y ya lo podrían lograr Así que se los dejo como desafío pero por ahora no lo veo mal me gusta ahora tenemos que hacer que cambie el estilo bien Vamos a hacerlo vamos a agarrar el cyar para eso vamos a decir que si el sidebar tiene un input Okay type check Box en estado de chequeado sería checked Ahí va el Wi va a ser de fit content Entonces si está chequeado el Wi va a ser de fit content vamos

a hacerlo lo mismo pero vamos a Agar ahora el picture picture bien vamos a empezar a checarlo de vuelta un poquito para que no nos moleste y al picture le vamos a dar un margin left un with fit content a ver ahí si se adapta o no se adapta sí se adapta y un margin left de 12 píxeles no para que esté bien centrad too o sea en Otras palabras de pun 75 Rem Ahí va vamos a hacer lo mismo pero agarrar el dos puntos is acá si lo deberíamos poder usar y al sidebar item

spam a ver si ahí funciona Ah Ahí está al fin Ah no no pero Debería ser el Ah Ya sé qué que soy prof file option Ahí está bien Ahora solamente tenemos que modificar este logo porque Está rep pesado una opción es eliminarlo o sea podemos eliminarlo como una opción para eso tenemos que venir acá y poner que sería El cómo sería es el picture claro al picture picture img y le damos en display n sería display none y ahí ya como que se elimina ven es una chance yo no sé si lo haré así

pero no lo veo mal igual ahora que lo estoy viendo de esta forma porque siento que poner el logo chico es medio feo no sería medio feo poner el logo chico no sé si me gusta mucho la verdad Pero es verdad que sería medio feo poner el logo chico va Vamos vamos a probarlo A ver vamos a agarrar Esto y le vamos a dar un Max with de no sé tres Rem ponele entonces quedamos ahí sí medio raro también podemos probar agarrar el margin right y sacárselo el left perdón y sacárselo margin left y sacárselo

igual le dimos al a este no le dimos al margin left se lo dimos al picture nada más ven ahí está y al margin right margin left Perdón se lo sacamos entonces ahí ya no tendría problema y esto Podría tener 3 pun 3.8 Rem ponele 3.4 y el tema es que Tendríamos que esto moverlo entonces tendríamos que agarrar a este form o tenemos que agarrarlo de vuelta miren todo el código que tenemos que hacer solamente para esto a ver agarramos el lo pondríamos más abajo el mismo form de hecho vamos a venir acá y poner

el mismo form eh form Cyber form y darle un top 20 píxeles a ver no 4 Rem a ver qué pasa Ahí está entonces ahí nos queda el logo Vamos a darle 4.8 Rem Ahí está Entonces tenemos el loguito y ahí está pero Tendríamos que cambiarle esto no también el signo porque este es el signo de la x y debería tener otro signo otro signo debería tener entonces podemos dejar que tenga dos el que dice el que dice el que está cerrado que es el close y el open Vamos a darle acá que va a

tener la clase las Open Button no vamos a buscar acá la flecha a ver opening full este sería no el opening full sería open in full a ver ahora eso Entonces por defecto al opening full Dónde está Cyber Picture Dónde tenemos el form estamos trabajándolo acá abajo el form no bien sería cbar form sería el open button venda un display n Ahí va no cómo lo llamamos y Open Button Ah ya tiene clase o sea sería acá Open Button ahí está la clase la tiene display n pero cuando de última Cuando esto esté cuando esto

esté así vamos a venir acá y darle al sidebar form Open Button sería display block se mostraría Ahí va pero tenemos que sacar este el X Entonces tenemos que darle Tenemos seleccionar el otro y agarrar el Label display Non y este lo ponemos arriba porque por temas de de cascada se le va a dar al último entonces ahí está perfecto Che gente lo logramos eh Me encantó lo que acabamos a hacer terrible sidebar menu y encima está no está muy fachero eh Me gusta bueno gente acabamos a hacer un sidebar menu mi consejo ahora es

que nada lo adapten a dispositivos móviles porque no es tan complicado en realidad esto es desktop First porque Entendemos que las personas que van a utilizar esta interfaz son personas que van a entrar desde la computadora o sea normalmente yo por ejemplo cuando entro al YouTube Studio que es la interfaz de YouTube quiero entrar desde la computadora entonces necesito al entrada de la computadora a adaptarlo primero a computadora y después a celulares porque me interesa que la gente en compu lo vea bien entonces ahora en compu está perfectamente adaptado y mi consejo es Hacer que

ustedes hagan esto mismo pero que se pueda adaptar a dispositivos móviles y aprovechar esto que está acá es decir el abrir y cerrar para cambiarles las propiedades para que tengan un menú que se pueda desplegar sin problema ya que ya tenemos estas varias opciones lo podemos conseguir así que bueno eso se lo dejo como ejercicio pero la verdad que nos quedó espectacular eh estoy contento tuvimos un buen Side menu esto igual quizás Podríamos cambiar el icono a ver sería Double Arrow a ver cómo queda Tucson Oh me gusta Oh Ahí va listo listo orti bueno

gente ahora sí me despido Espero que les haya gustado este Cyber menú que la verdad repito quedó espectacular y solamente ustedes no se dan una idea de que esto que estamos haciendo ahora hay gente que usa librerías de javascript hay gente que utiliza framework un montón de cosas para hacer esto cuando Miren qué fácil que es hacerlo en Cuántas líneas de código lo hicimos a ver lo hicimos en 57 líneas html nos faltó la etiqueta responsive igual así que hagan de cuenta que en 58 líneas con la etiqueta y 176 líneas de css no es

nada Los invito a ir a cualquier proyecto real que trabaje con una sidebar y ver Cuántas líneas utilizan menos de 200 no van a encar menos de 300 tampoco van a encontrar Okay entendiendo que igual esto es chico Porque faltan opciones y demás mi consejo es está bien Sí agréguele javascript acá por ejemplo también podrían trabajar con menús desplegables ya que aprendieron cómo funciona summary se acuerdan el con el details acá podrían crear un menú desplegable tampoco necesitando javascript o sea solamente con ht1 SS por crear menú desplegable Okay con suary y con details increíble

Así que bueno vamos con el siguiente proyecto que se trata de una caja de comentar de una No mentira una caja de chat para Crear un chat entre diferentes personas vamos a hacer solamente la cajita de chat Okay así que bueno uno de los desafíos que les voy a dar es mejor en esto el próximo es hagan el próximo ejercicio que vamos a hacer que es una caja de comentarios vamos bueno gente acá estamos de vuelta para hacer una caja un una chatbox Sí sería un chatbox pero acá básicamente tengo el estilo de antes okay

Que simplemente son los colores por defecto Que me creé eh la tipografía Y esto y una caja completamente vacía con los iconos bueno Y acá voy a arrancar creando el div que va a tener la clase chat después vamos a tener dos div más el primer div Okay va a ser la clase chat user que va a tener al usuario con quien te vas a estar mensajeando y el chat content que va a tener el contenido del chat que vendrían siendo los chats Esto va a tener una imagen que va a tener ahora le voy

a poner mi nombre Source img alto.png o sea soy yo y abajo va a tener un spam que va a ser Lucas dalto que sería la persona con la que uno está hablando acá abajo vamos a tener los mensajes o sea acá van a estar todos los mensajes los mensajes van a tener la clase eh msg que son mensajes y los mensajes van a tener por un lado solamente un contenido claro un párrafo con el mensaje y acá tendríamos la clase mcg content y acá tenemos por ejemplo vamos a poner un lorem Ahí va entonces

Ya con esto creo que podemos arrancar a a estilar y vamos a tener eh Sí ahí está bien Bueno vamos a arrancar con chat a a a a a a y vamos a darle primero Vamos a darle un Max wid con clam vamos a usar clam vamos a intentar usar clam lo más que podamos 300 píxeles como mínimo un 60 por y un 1900 píxeles como máximo Vamos a darle un background color blanco sería el cb color cb color le puse así porque cb color significa chatbox color sería chat color chat background color Esto sería

chat background color y el body vamos a agarrar el body y darle un background color vg color y ahí quedaría a esto le vamos a dar un margin 50 píxeles auto para que esté centrado pero tengo un espacio acá vamos a darle un Border radius también Border radius de 30 pixeles de 20 30 me parece un montón No vamos a trabajar con padding acá porque el padding lo van a tener los elementos las cajas tienen que estar pegaditas a su top e vamos a agarrar al Chat user y le vamos a dar un display Flex

y un litem Center para que esté bien centrad dito vamos a agarrar al chat user img y le vamos a dar un Max wid de 48 píxeles de tres Rem Vamos a darle dos pun 6 Rem es muy grande de dos Ahí va y vamos a darle un Border radius de 50% porque ya saben que las imágenes cuadradas con Border radius 50% se vuelven redondas el Max wid va a ser de 2.4 Rem mejor y vamos a darles un margin De 6 píxeles a la imagen Ahí está de cuatro sería mejor y a chat user

le vamos a dar un Border bottom de un Pixel solid qué más Pixel solid y vamos a darle en Dark color Dark Ah no tenemos Ah tenemos el Dark color Ahora nos vamos a enfocar en los diálogos que es esto que está acá para eso vamos a agarrar el chat content y vamos a darle para comenzar un padding de 12 pixeles Así se separa un poquito vamos a agarrar el mensaje y vamos a darle un background Color Vamos a darle a ver qué colores teníamos vamos a usar Vamos a darle el mismo color que el

fondo y un color blanco a esto sí le vamos a dar un font size 6 Rem porque tiene que ser más chiquita el texto vamos a Agar un poco Ahí está igual esto le vamos a dar un 70 por ahora sí y Esto va a tener un padding de también 12 píxeles o es mucho 12 Uh es una banda Vamos a darle seis píxeles arriba y abajo no cuatro píxeles arriba y abajo y seis píxeles a los Costados creo es lo mejor no no sería tres píxeles arriba y abajo y cuatro a los costados mm

no me termina hay algo no me termina de cerrar y no sé por qué Ah Ya sé tenemos que agarrar esto y darle acá también esto a darle un p Ah no esto lo estamos haciendo mal Perdón esto no me di cuenta en el ejercicio anterior parece Eh Esto solamente es válido para el body Ahora sí Y acá le dimos al p No sí también le dimos al p Ahora sí es más útil esto y acá le vamos A dar seis píxeles en todos lados Bueno también Vamos a darle un Border radius que va a

ser 00 9 píxeles para que esté Ah no perdón al revés sería 9 píxeles 9 píxeles 9 píxeles cer0 para que esté redondeado en todos lados menos abajo y acá vamos a hacer otra cosa interesante que es agarrar el after msg o el before before y vamos a ponerle un content cero Ahí va un position absolute y a esto lo vamos a poner en position relative pos relative Ahí está un he de de cuánto le dimos el radius de 9 píxeles no O sea que vamos a poner entonces de 18 para que sea el doble

y un wid de 18 también para que sea el doble ahora tendríamos que darle el background color background color Ahí va y ahí lo tenemos acá arriba lo podemos ver vamos a darle un bottom menos de 18 píxeles será y vamos a darle un left men 9 píxeles ahí abajo vamos a ir al generador de Clip pad clip pad generator Acá está y vamos a crear una Figura como esta Ah no no como esta sería algo así no si algo así estaría bien no bueno copiamos este clip pad y lo peg amos acá abajo y

ahora vamos a desplazarlo como debe ser os6 píxeles a verlo y sería 6 ahí -6 tendría un Z Index -1 para que se ponga por detrás de esto no Z Index 5 y el mensaje tendría un Z Index 10 para que no lo superponga Ah o esto tendría 20 y esto tendría 10 porque a mí siempre me gusta trabajar de 10 en 10 el left tendría -4 también y Ahí está no sí lo logramos y esto tendría un os3 quizás eh Me gusta Ah pero lo sigue lo se sigue poniendo encima si le ponemos os1

entonces estará muy mal Así que vamos vamos a dejarle 10 a este bueno gente ya está lo logramos tenemos una cajita de chat el padding podría ser nu píxeles igual s vamos a dejarlo en siete Bueno ahora tenemos que crear tenemos que darle un wid esto voy a tener un Max wid de clamp vamos a usar clamp de vuelta clamp 300 píxeles 70 por Y 600 píxeles por qué no entonces ahí se adapta Okay se adapta si no le queda otra se adapta pero si crece hasta ahí puede crecer y ahí está eh Me encanta

me encanta como lo logramos ahora los mensajes le vamos a dar un margin de 12 pixeles y arriba y abajo le vamos a dar seis píxeles Ahí va así No mejor vamos a darle seis píxeles a todo seis píxeles a todo y vamos a crear otro mensaje vamos a separar los mensaje creo y vamos a poner eh msg1 Y vamos a mandar esto y Abajo vamos a copiar y pegar msg2 ponele ahí tenemos otro mensaje a este le vamos a dar la clase self por qué Porque los que se llaman self son los que vamos

a darle estilo nosotros Entonces vamos a agarrar a los que son pun self y van a tener un background color del Dark sería tambén vamos a agarrar el for del self self before y vamos a darle también background color del Dark Ahí está tenemos que cambiarlo de lugar para eso tenemos que darle un margin left auto Ah No se cambió por qué no se cambió Ah vamos a hacer otra cosa al chat content le vamos a dar un display Flex y Flex Direct column a ver si ahí funciona tampoco funciona Qué cosa más extraña no

porque no es al before qué que soy margin left auto acá Ahora sí está mucho mejor ahora sí está mejor lo logramos No ahora tenemos que cambiar esto nada nada más para eso tenemos que invertir esto cómo hacemos para invertirlo no tengo la más pálida idea Creo que acá tíos que dar 100% a ver eh También tenemos que modificar esto y en vez de tener un left acá le vamos a dar left left auto porque si no no nos va a dejar trabajar con el right porque no se olviden que le dan le da prioridad

al right vamos a right menos cu píxeles a ver a ver si acá le damos esto tiene que estar acá bien esto tiene que ser 100% 100% este Está bien a ver este que está acá Ah en vez de ser 100% tiene que ser cer0 Okay el segundo tiene que ser 0 0 67 creo que habíamos usado 68 a ver cómo va quedando ahí bien y falta el último que sería 43 sería acá entonces en vez de 43 o sea de la mitad se fue para acá sería 57 entonces 57 entonces a ver Ah pero

es cer0 es cer0 57 c y ahí Ah nos quedó Exactamente igual Qué grande por qué hice esto simplemente hice cálculos porque por ejemplo si antes tenía 43 significa que del 50 que es la mitad se fue eh 7% para allá y si nosotros lo Queremos para el otro lado del 50 se tiene que ir 7% para el otro lado el 100% es el punto más alto lo bajamos al punto o sea invertimos los valores algunos y nos dio esto básicamente Así que acá tengo el de abajo perfecto y ahora ya está podemos mandar mensajitos

a ver qué pasa si achicamos los mensajes eh Está muy bien a ver si le reducimos texto y se adapta bien se adapta eh vamos a probar mandarle dos mensajes a ver mensaje dos mensaje tres va a ser Más cortito mensaje tres Ahí va V a llegar hasta acá y vamos a envi Ah acá no el bor de radius también ojo ojo ojo el Border radius de acá es al revés es 9 píxeles 9 píxeles 0 9 píxeles porque acá acá fíjense que no teníamos el borde y acá molestaba Entonces ahora está mucho mejor y

si enviamos ahora un mensaje que no es nuestro que es el original un mensaje de la otra persona que sería mensaje 4at calculo msg4 Ahí va y ahí nos llega el otro mensaje a ver si este También se adapta vamos a probarlo ahí no no se adapta o sea se queda corto para eso tenemos que venir acá y darle un Wi a ver si alguien sabe tenés 5 segundos 5 4 3 2 1 no Y la respuesta correcta es fit content bueno gente nada vamos a dejarlo ahí lo lograron si lograron hacer esto está recontra

remil curtidos no me gusta que esto tenga tan grande el texto igual no es como medio medio guaso pero vamos a permitirlo por este por esta vez vamos a agarrar el Chat también y darle un Box Shadow dos p dos píxeles nu píxeles 004 ahí tiene una sombrita la sombra es quizá un poco mejor esto y vamos a darle en tres listo lo logramos gente una cajita de chat que como podemos ver se adapta a ver si también se adapta dispositivo móviles sí se adapta también lo logramos Bueno ya está lo conseguimos en nada de

tiempo en 10 minutos menos de 10 minutos Bueno ahora lo que vamos a hacer es ir con el siguiente ejercicio y estoy hablando de Una Ah una tarjeta responsive giratoria que puede que sea el último ejercicio que hagamos en el curso hicimos un montón igual pero no lo hicimos en el apartado de proyecto lo hicimos en el apartado de Yo también esperé tanto para este apartado cuando en realidad va ser más corto de lo que pensaba porque los proyectos tienen que proponer ustedes porque si yo ahora les enseño a hacer proyectos todos los proyectos que

hagan conmigo lo van a hacer 35 mono o sea Piensen to de esta forma si este curso lo ven un millón de personas solamente con que el 5% llegue hasta el apartado de proyectos hay 50,000 personas que conocen el proyecto solamente con el 10% de ese 5% lo haga o sea el 0.0 el 0.5 por del total sería ya habría 5000 personas con el mismo proyecto por eso me pusa no tiene sentido tampoco hacer tantos proyectos Porque habría miles de personas que tengan el mismo proyecto copy p paseado lo interesante es Despertar su lógica Así

que al final del curso les voy a explicar y les voy a dar consejos de proyectos para que ustedes hagan también así que ojo porque eso va a estar bueno una cosa que tienen que hacer acá también es el tema del marching collaps o sea normalmente en cuando ustedes mandan mensajes si se fijan hay mensajes que aparecen separados y mensajes que aparecen juntos los mensajes que envía uno normalmente aparecen juntos ent esto lo dividen en Divs Okay lo dividen por divs y lo ponen por ejemplo en una grilla esto puede llegar a crear un colapso

de margen en algunos casos y en otros casos no entonces lo que está todo en un mismo div no colapsa entre sí O sea Perdón colapsa entre sí y lo que está por otro div no colapsa Entonces los mensajes que envían ustedes en simultáneo están colapsados y los mensajes que no no Entonces de esa forma los mensajes que ustedes envíen van a estar más juntitos Y los mensajes que envían otros van a estar más separados de lo que ustedes envían Así que nada se los propongo también como ejercicio para que lo hagan también hablando de

algo esto creo que podría llegar a ser compatible con el el ejercicio el sidebar pero para eso tendrían que agarrar el sidebar y darle un overflow hiden y además meter el botoncito de la cruz para dentro y darle también un top cero para que se quede fijo arriba de todo o trabajarlo como Sticky pero ya se lo dejé como desafío porque el sidebar anterior que hicimos Está bueno pero cuando empezamos a hacer una página web con ese sidebar nos empieza a el estilo Entonces vamos a tener que darle más cositas Si queremos hacerlo funcional al

cidar anterior Así que también los desafío que hagan eso ya tienen ya tienen proyectos para haer no se pueden quejar Les estoy dando un montón de proyectos para acá así que bueno Vamos a continuar con el Próximo y posiblemente el último ejercicio que es esta tarjeta responsive giratoria no es el mejor ejercicio que hicimos ni en pedo pero está bueno es un ejercicio más que sumamos hay gente que comete el error de creer que el último ejercicio siempre es el mejor y No necesariamente o sea lo mejor lo hicimos durante el curso Así que vamos

ahora con este ejercicio final la tarjeta responsive giratoria bueno gente ahora lo que vamos A hacer va a ser eh esta cajita linda que queríamos hacer y tenemos lo mismo que antes que es esta caja de iconos Eh bueno acá ahora vamos a sacar los iconos porque al final los terminamos sin usar tenemos esto de antes que simplemente es el color de fondo el sidebar color un color para el texto y un color oscuro nada más que eso tenemos todo esto con paddings Okay vamos a agregárselo También acá el p y nada ya podemos arrancar

a crearlo vamos a crear una una Tarjeta responsive giratoria Así que vamos a arrancar con un div que va a tener la clase Card un clásico si habré creado divs con clases Card vamos a crear ahora un div que esta Va a ser la parte de arriba que va a tener la clase img que básicamente va a ser la persona la persona sería Card eh user o Card worker vamos a ha cuenta que esto es un trabajador no un trabajador una persona que trabaja Esto va a tener una simple imagen Ah va una imagen source

y vamos a Darle dalto alto. png y acá vamos a darle vamos a poner todo dentro de un div que va a llamarse Card contain o Card flipper Ahí va Card flipper y adentro vamos a tener las cards Ahora sí vamos a seleccionar todo y lo vamos a tabular Esto va a ser una tarjeta va a tener cada tarjeta va a tener otro que va a tener la clase Card Data y Esto va a tener simplemente un h2 o no un sí un spam nombre de la persona que sería Lucas dalto por ahora y abajo

un párrafo Que cuente Quién es que sería un lorem Ahí va perfecto y esto sería todo ahora el lado giratorio vendría siendo otra otra otra cosa que querramos Mostrar entonces también tenemos que crear el el lado giratorio Okay De hecho no sería así Perdón me confundí esto sería Card y esto sería Front Por qué Porque es la parte frontal de la tarjeta Okay sería Card Front okay Ahí está y esto que está acá también tendría un Card Back entonces creamos un div que se va a Llamar Card clase Card Back que sería la parte de

atrás de la tarjeta acá vamos a poner simplemente un lorem y vamos a hacer un párrafo solamente para checar que funcione digamos no y acá tenemos todo lo que necesitamos bueno para comenzar Vamos a entrar al css y vamos a arrancar a darle estilo Card a la tarjeta le vamos a dar un Max with clamp de vuelta va a tener un mínimo de 300 píxeles va intentar tener 100% siempre y va a tener un máximo de 10000 píxeles Ahí va a estar bien 10000 píxeles pero 100% no me gusta no vamos Vamos a darle que

no no va a tener menos de un sea no va a tener menos de s de 300 píxeles no va a tener menos 320 vamos a dejarle va a apuntar a tener un 50% pero como máximo va a tener 400 píxeles porque es una wasada quizá 400 Así que está bien Ahí Ah ahí me gusta Vamos a darle 280 y acá vamos a darle 3 60 Ahí va bueno Vamos a darle un background color y acá vamos a dejarle el no le dejamos sidebar Que es lo de antes Vamos a ponerle Card color Ahí va

Card vg color no Card color Card color está bien Vamos a darle un background Card color y ahí está Vamos a darle un margin 50 píxeles auto para que esté ahí centrad como antes y ahora vamos a arrancar a trabajar primero vamos a hacer que la imagen encaje Vamos a darle hac que la imagen agarre Ahí va en este caso Sí necesitaríamos una imagen un poquito más grande Así que la vamos a descargar como tal dalto png la Sobreescribir no nos importa nada y acá tenemos la imagen deberíamos crear una versión más chiquita pero esto

está bueno porque ustedes ya lo saben ahora ya saben que para crear esto deberíamos crear una versión más chiquita pero no lo vamos a hacer nosotros pero lo podríamos hacer Okay de hecho demasiado no vamos a darle un picture vamos a hacerlo bien Ya fue picture Ahí va cerramos con picture al pedo tengo el link editing no funciona una a Veces le vamos a dar en souret en source ahí va y va a tener souret mg bar dalto small small y va a tener un media que va a tener un Max wid 600 peles cuando

la pantall tenga arriba 600 píxeles vas a cargar la grandota si no vas a cargar la chiquita Entonces ahora vamos a crear vamos a cargar vamos a crear esa imagen no tengo el de exploración Así que como no tengo la barra de exploración voy a tener que hacerlo desde una web común y la vamos a hacer que se achique a 360 Por 360 ahí se descargó Ahora sí Bueno ya está ahora debería funcionar esto no vamos a checar si funciona o no funciona no le chupa completamente Ah acá es sour set Perdón perdón Ahora sí

Entonces esto estaba bien era Max with no estoy tan perdido entonces vos la la chicas y tiene una más chiquita la agab vamos a hacer un pequeño zoom vos achicas esta imagen y carga la versión chiquita Entonces para dispositivos móviles está optimizado la agrandas y te carga la Grande Ahí va perfecto acá también se lo vamos a dar a vamos a agarrar Card eh worker worker y agarrar la imagen de hecho img y darle un Max with 100% para que se adapte a su contenedor y al Card worker le deberíamos dar un Max hate 200

píxeles está bien Vamos a darle overflow hiden Y si dic alto Pero por qué no se oculta hay un error no Tienen que darle display block porque el por defecto funciona diferente e entonces ahí medio que se va a ir adaptando ven Se va adaptando Y ahí nos queda la imagen Aunque podemos darle menos no 150 está bien y acá le vamos a dar 240 como mínimo 160 como mínimo y 360 como máximo 320 como máximo eh ahí me gusta bastante eh Sí está bien mucho texto igual pero está bien vamos a agarrar ahora a

Card cómo sería Card content no content sería Card Data Card Data Perdón Card Data y a Card Data le vamos a dar un padding de se píxeles a ver qué tal le va no 12 12 píxeles vamos a agarrar el Card Data Span y le vamos a dar un font size 1.4 Rem para que sea más grandecito y le vamos no le iba a dar un font weight pero no necesitamos le vamos a dar simplemente un margin cer no 12 píxeles cero ahí ya Play block A ver ahora sí mucho mejor se píxeles Ahí está

me gusta más bien ahora tenemos que agarrar el cardb y dar la vuelta esto Esto es mágico pero fíjense fense lo que va a suceder ahora vamos a agarrar al Card Front y Card Back sería y vamos a darle Un Pos absolute para qué es esto van a decir bueno Vamos a darle un top cero Okay y a a la tarjeta le vamos a dar un Pos relativa así se posiciona acá vamos a darle un wid del 100% y un he del 100% Ahí estamos bien para qué es esto Bueno lo que vamos a hacer

ahora es crear el efecto de giro que ahí vamos a darle un display Flex no display display grid y eh Place content Center y vamos a darle también un padding de 12 píxeles bueno para comenzar vamos a agarrar Card Card Vale lo tenemos acá igual así que vamos a agarrarla y para esto para arrancar Tenemos que trabajar con la perspectiva Vamos a entrar en transform y vamos a agarrar la perspectiva y vamos a hacer que se aleje 900 píxeles Ya está ya tenemos la perspectiva vamos a hacer un rotate en el eje y para que

haga este movimiento que rote en el eje y y le vamos a rotar solamente para que lo vean 60 gr van a ver lo que pasa ven como tenemos este texto ya en un entorno 3D Lo rotamos 180 gr y se da vuelta completamente lo tenemos al revés vamos a crear una propiedad Okay que la propiedad va a ser la siguiente vamos a decir Card Back y Card Front vamos a decirles que el Back Cómo se llamaba el Back Face visibility va a ser hidden Qué significa esto que normalmente el navegador reconoce Cuando tenemos una

cara de adelante y la cara de atrás Si yo estoy rotando algo o sea esta es la parte de adelante Okay si yo estoy Rotando algo 180 gr la cara de adelante ahora me está quedando atrás y lo que estoy mostr lo que estoy viendo ahora es el backface la cara de atrás Entonces esta propiedad dice el Back el Back Face visibility O sea la cara de atrás va a ser visible o la vas a ocultar y ahora lo estoy ocultando Okay eso es todo entonces ahora podemos rotar la tarjeta y que el que esté

atrás siempre se gire y también tenemos quear una perspectiva en el Card Front pero la perspectiva en Este caso va a ser de 0 grados Porque nada no queremos que rote y ahora viene la magia ahora viene la magia cuando en la tarjeta agarremos el over vamos a Acceder al Card Front vamos a poner un is no un is no vamos a Acceder al Card Front y vamos a transformar esto okay vamos a transformar acá solamente que ahora el rotate va a ser de 180 y ahí está ven Entonces esto es lo que está pasando

tenemos que darle a esto un transform no perdón un transition Transform un segundo entonces ahí vemos cómo rota vemos cómo rota bueno y ahora tenemos que agarrar a la otra tarjeta o sea venimos acá y ponemos a la Back y tenemos que rotar la 360 porque esta va a pasar de estar en Normal o sea en 0 gr a estar en 180 y la otra va a pasar de estar en 180 a 360 Entonces se va a ver si si ponemos esto acá vamos a poder ver este efecto Y ahora esta esto lo podemos hacer

con la tarjeta de fondo con la que tenemos acá que es esto pero yo Realmente no lo haría de esta forma porque no no no vamos a tener el mismo efecto y además ahí me gusta hacer lo siguiente que es agarrar a ambas okay y darle un background color blanco que en este caso sería lo mismo Card color Ahí va y al fondo de la tarjeta no no le vamos a dar Card color le vamos a dar otro color vamos a agarrar y vamos a poner el Ahora sí vamos a crear un Card background color

y va a ser el mismo Solo que con una opacidad de tres de Tres no de nueve Ahí va entonces acá lo vamos a usar Card No acá arriba Card vg color y fíjense lo que pasa de fondo ven tiene es eso de fondo que lo hace ver para mí mucho mejor es má vamos a que sea menos opaco menos visible incluso vamos a dejarlo en seis ahí está ahí quedó es como que el fondo aparece igual pueden sacarle el fondo ustedes si quieren eh lo pueden dejar transparente y a ver si entramos acá lo

dejan transparente y a la Listo o sea Esto aparece así por defecto se puede apreciar de esta forma pero eh No no me llama tanto la atención a mí así siempre No sé no me pregunten por qué pero siempre me gustó con un con un fondo que se vea en un fondo además esta tarjeta siento que gira demasiado guaso para eso vamos a hacer que tenga una perspectiva mayor vamos que eeca sea de 1200 100 Y 100 que nos la perspectiva nos aleja la el elemento o lo acerca si yo por ejemplo le doy 200

píxeles fíjense que Es como si tuviéramos el elemento pegado a nuestra a nuestra cara ven es como si lo tuviéramos pegado a nuestra cara entonces para evitar esto se usa el 1200 píxeles acá sería también 10000 esto es como si estuviéramos viendo la animación desde más lejos entonces nos cambia la perspectiva justamente la tarjeta y acá pueden poner otras cosas acá pueden venir por ejemplo y crear lo mismo las barras con skills y pueden poner por ejemplo un otro que tenga el span no más Fácil otro span más span que va a llamarse skills entonces

voltean y ahí tienen los skills Ven y los los modifican Vamos a darle estilo a esto Card Back span Vamos a darle también font size 1.5 Rem y un margin 6 píxeles cer y acá muestran los skills esto debería estar bien estructurado obviamente para mí pero bueno acá pueden contar un poco acerca de lo que hace por ejemplo no sé historia o acá cuentan un poco de quién es de alto y acá arriba Simplemente son los skills ven solo los skills acá vienen y ponen div y acá ponen Class skill bar no y acá ponen

otra barra que es la de porcentaje div y acá la llenan Ven y así se vien acá y ponen abajo de todo killb Border 4 píxeles solid ahí tenemos bueno las vamos a separar con un margin 5 píxeles vamos a sacarle el Place content porque está de más acá le dimos esto y se lo vamos a sacar Ahí está skills y ahí te tendrá que numerar los skills acá abajo Le vamos a dar un margin mayor 12 píxeles y va a tener un padding de se peles hay solamente una skb vamos a aggar varias a

tener tres píxeles esto mejor tres y vamos a darle un Border radius 12 píxeles a ver ahí tenemos Las barritas para llenarse cu píxeles porque siento que es demasiado y el padding va a ser de 12 píxeles obvio mucho mejor 12 más grande ah vamos darle nu siento que es demasiado y vamos a poner skill barar Div y esto le vamos a dar un vamos a dar un background color bg color Ahí está y va a tener un padding nu píxeles Pero esto va a tener un p más chiquito de dos píxeles para que tenga

el borde no o de tres para que tenga la misma distancia con los bordes y adelante ponemos el nombre yí acá dentro html css js sql a poner el último V a poner python ahí está ahí tienen todos estos van a tener un color blanco Ah va o más fácil un color Card background color no Card Color sería Card color y acá simplemente la agarran y le ponen killb div Last Child with yo 70 por y acá acá según el el perdón sería skill barar Last Child div y acá simplemente las van modificando ven dos

y este va a tener un no sé un 90 por acá vamos a agarrar el cuatro y este va a tener un 50% y ahí está ven ahí más o menos tienen las barras que más saben más llenas o menos llenas como la cola de tu no no entonces acá simplemente acá le vamos a dar a Todo un borde porque no me gusta sin borde ya saben que a mí los bordes a veces me parecen bastante estéticos depende la estética de la página Vamos a darle un Border radius 20 píxeles y vamos a darle un

overflow hiden entonces ahí aparece bien y ahí tenemos ven Aunque acá cuando se voltea la carta Esto sí que no me gusta ven cuando se voltea la carta que se note este efecto Así que vamos a hacer que los bordes los tengan estas y esto también por no ahí Pueden voltearse Bueno ahí tenemos un ejemplo de tarjeta giratoria gente vamos a sacarle un poco de texto a esto e gente tenemos nuestra car lo único si vamos a crear un padding un poquito de padding acá arriba y abajo a ver padding botón de y unos nu

pixeles puede tener No pero lo debería tener la tarjeta esto las tarjetas Ay Ah perfecto Vamos a darle seis píxeles para que no sea tan guaso bueno gente lo logramos Me encantó acá tienen sus tarjetas Eh responsive Esto lo pueden aplicar a cualquier cosa que quieran pueden crear varios trabajadores por ejemplo por ejemplo acá tienen una una un Card van y copian el Card lo copian y pegan otro Card ven ahí tienen dos cards y no sé al Body por ejemplo le dan display Flex y ahí tienen dos tarjetas Ven y así van poniendo lógicamente

esto lo meten dentro de otro contenedor y acá pueden ir viendo las capacidades de cada uno no entonces acá por ejemplo en vez de Lucas alto crean a Otro que yo no sé Pep Lucas alto y Roberto Roberto Tito Roberto Tito acá Card Last Child le dan un filter y mg le dan un filter gre scale Ahí va no Child 2 Perdón entonces está Lucas dalto y Robert tontito Ahí está fíjense como esto parece que ni se inmuta no parece que se queda acá Así que vamos a bajarle un poco la perspectiva A ver vamos

a darle la perspectiva de 110 11 vamos a darle mejor la perspectiva a este no le vamos a 50 le vamos a dar 60 porque me Da un Toc que no gire como las otras y que parezca que es el centro de todo Ahí va listo ahora sí bueno gente nada ahora acá Lo acabamos de lograr así que bueno gente les quiero decir que este no va a ser el último proyecto que hagamos les dije que sí pero no no no pero les tengo una buena noticia Y es que este no va a ser el

último proyecto que hagamos vamos a hacer unos dos proyec más Así que ahora sí nos vemos en la anteúltima clase Vamos bueno gente ahora vamos a hacer una portada web Sí vamos a hacer un proyectito en el que veamos al menos un poquito sobre animaciones en scroll que hasta ahora no hicimos nada con animaciones en scroll ningún proyecto interesante además de la la práctica que ya aplicamos Y además quiero que veamos el tema del Blend no Porque muchos de ustedes seguramente dirán dalto Cómo puedo hacer esos efectos que se pueden aplicar en premiere por ejemplo

cuando Vos agarrá una capa la super ponés encima de otra y tenés los modos de fusión bueno Esto de los modos de fusión es algo aplicable en css y me gustaría mostrárselos mediante un ejercicio que está bueno que lo practiquemos que si bien posiblemente eh necesite de más para convertirse en una práctica real puede ser el inicio de un gran proyecto para comenzar tengo esto que es lo de antes es decir acá reemplacar del color mix Okay por esto que está acá que Simplemente algo que que encontré después de usar el color picker ven que

seleccionas color y te tira cuál color es que es este que está acá arriba Entonces yo lo peg acá y ahí está la diferencia es que ahora si queremos bajarle la intensidad por ejemplo al 60 por 50 y demás no podríamos y siempre estaríamos Sí o sí eh con la necesidad de mantenernos fijos en este color Y en todo caso no sé bajarle la opacidad desde acá pero no es lo mismo porque acá Le Estamos bajando la opacidad no lo estamos combinando con ningún blanco pero bueno nada vamos a suponer que sí para comenzar okay

acá me descargué una imagen que la voy a llevar acá imágenes donde dice portada y la voy a sobreescribir voy a probar con imagen source img barad alto.png a ver si se llama Acá está perfecto la recort Rápido como verán no está super bien recortada pero hasta le aplicar unos efectos de desenfoque en algunas partes en otras no Pero tengo un fondo azul Así que creo que lo primero que tendríamos que hacer es aplicarle un fondo azul o les quiero mostrar acá muy rápidamente el efectio que les decía que si yo por ejemplo vengo acá

agarro la imagen y le doy mix Blend Mode Y le doy por ejemplo screen esto lo que va a hacer se va a poner en modo pantalla de tal forma que los colores más oscuros van a estar con una opacidad inferior o sea Mientras más claro sea el color más opacidad va a Tener mientras menos Claro sea el color menos opacidad va a tener eso es lo que hacemos con el modo de pantalla después tenemos el mix Blend el darkness que hace todo lo contrario el darken o sea hace lo mismo pero con los colores

claros que en realidad no es lo mismo porque el darken sería como el opuesto del lighten en realidad que sería este que lighten agarra los colores claros y hace que esos se queden y el darken agarra los colores oscuros y hace que Esos se queden después tenemos el multiplay esto ya como digo es algo más técnico no de diseño pero si quieren trabajar con diferentes colores lo pueden hacer y esto está bueno porque yo por ejemplo acá puedo venir y darle screen okay Pero además venir abajo y agregarle un filter y agregarle el Grey scale

por ejemplo y se va a poner gris pero no se va a poner gris la imagen porque ya le estamos agregando con screen entonces va a estar tomando color Del propio fondo Por más que lo dejemos en r scale ahora lo que sí afecta es por ejemplo si le damos saturation que acá básicamente los puntos donde más saturada está la imagen Son puntos donde se van a adherir al fondo y donde menos saturación hay donde menos se va a adherir al fondo Y si acá le damos filter Gray scale van a ver que ahora justamente

se pone es prácticamente como hacer una una silueta así que bueno nada vamos a eh sacarnos de acá y lo que voy A hacer yo ahora es cambiar el el mix Blend Mode a Screen que es por ahora el que me interesa es screen es este que está acá Así que lo voy a dejar acá para qué quiero este modo simple primero porque no me gustan mucho los azules que tenía que como habrán visto antes tenía Azules y además le voy a agregar el filter Grey me interesa que no se vean los azules de fondo

si yo les saco el Grey van a ver que si hacen un zoom van a poder notar uno que otro azul acá por Ejemplo ven que un azulcito tiene que si le sacamos el mix Blend Mode también lo van a poder notar más que tiene unos ciertos bordes azules ven como acá por ejemplo Que si le damos el mix Blend algo se siguen notando clamos Si de entrada le dejamos el gr scale eso ya no se nota ya todo está sin sin ese color feo no entonces de entrada Esto es lo que yo estaba buscando

para qué quiero hacer esto Bueno lo que yo voy a hacer de entrada voy a agarrar a la imagen También y voy a ponerla adentro de un div voy a venir acá y poner vamos a crear un header porque esta Va a ser como una portada voy a crear una imagen que la voy a poner en posición absoluta que es la que ya teníamos Ahí está bien y vamos a agarrar el header el único header que va a ha ver y le vamos a dar un eh Max no un hate min hate de 100 View

por he 100 display View por he Okay ahí 100 View por he a la imagen la vamos a poner como position absolute ahí está Y al Body Bueno ya tenemos con todo con Border Box bien y al Body le vamos a dar un scroll No mentira un hate 200 display View por hate por qué porque vamos a hacer una animación por scroll que es lo que necesito que esté De hecho no va a estar en absolute va a estar en fixed que es lo que más nos sirve en este momento y va a tener un

top cero para que se quede fija ahí Okay Vamos a darle además un margin auto para que se Centre no se centra Le chupo un huevo bien Así Que vamos a poner un header y le vamos a dar display Flex y le vamos a dar justify content Center ahí se centró bien ahí la tenemos entradita la imagen y vamos a hacer una animación de que cuando bajemos la imagen vaya apareciendo para eso a la imagen le tenemos que dar un opacity no no ni la vamos a tocar le vamos a dar un Animation Animation aparecer

y va a estar Animation timeline en scroll el scroll del Body Okay y ahí está entonces Vamos a crear la animación Kame aparecer y va a arrancar del 0% y terminar en el 100% y acá Viene un poquito la magia quizás que va a arrancar desde el opacity 0 hasta el opacity 1 entonces mientras vamos bajando la imagen va apareciendo No hasta ahí estamos bien Ahora otra cosa que me interesaría hacer es jugar con el fondo con El Blend pero no sé si Estaría bueno hacer esto o no No tengo idea pero acá puede ser

mix Blend Mode color no Y Mientras más va pasando va pasando de un modo a otro no podemos dejar una silueta y que de la silueta después pase a Tucson en vez de color vamos a dejarle saturation creo que sería lo mismo entonces ahí bajamos y ahí va no lo que sí vamos a darle es un Box Shadow c píxeles C píxeles 15 píxeles y vamos a tener un fondo no muy oscuro Okay pero más abajo que el fondo sea más oscuro entonces ahí por lo menos va a empezar a aparecer el fondo a ver

si se lo damos Arriba el No no es un Box Shadow Perdón sería un filter Drop Shadow No si esto ya tiene un un filter grecale deberíamos darle un filter gre scale y un Drop Shadow c píxeles o píxeles 15 píxeles eh negro y con un seis ponele entonces ahí ya cargaría con esto bien y ahora hacemos lo mismo acá abajo venimos acá y le ponemos el filtro pero es como que no carga no no no no va el Ah por el opacity no carga el filtro No claro entonces directamente el el opacity Puede llegar

a arrancar en punto cuat puede ser en punto en punto c Por qué no no hay algo que no me termina de convencer hay algo no sé qué es que no me cierra vamos a sacarle el Drop Shadow y esto también el Drop Shadow se lo deberíamos dar al header no No tampoco se lo vamos a darer porque vamos a ha l Vamos a darle Bot Eso sí para que ya quede siempre fija podemos aplicarle también la del Translate y le damos 0 Y acá le vamos a dar un Translate 00 y Acá le damos

- 20% bajamos y baja bien y acá le damos un scale pun 8 y acá le damos un scale 1 entonces Bueno ahí algo bueno es sol que no me gusta el efecto no de que cambie de esto a esto a ver le vamos a dar en el mix Blend Mode es screen vamos a dejárselo en screen y acá el mix Blend Mode puede ser darken No no vamos a dejar el mix Blend Mode siempre en screen y el opacity que qué ranque de cero Bueno ya tenemos esta animación muy Simple ahora lo que tenemos

que hacer es voy a abrir un poco los costados tenemos que hacer Que aparezca nuestro nombre al costado Cómo podemos hacer eso bien yo pondría un div acá y otro div acá Ahí está y cada div vendría a tener una palabra Okay Esto va a tener la palabra left text y Esto va a tener la palabra right text por qué porque esto va a tener @ soy y Esto va a tener @to no @to no tendría dalto entonces a esto le podemos dar a ver si esto le hacemos un Zoom Ah crece no tiene que

crecer tenemos que adaptar la imagen pero ya ya le adaptaremos la imagen Ah no Claro tenemos que adaptar la imagen porque si no no nos va a servir Bueno vamos a agarrar la imagen y le vamos a dar un Max he si vi por he Ahí está Ah me gusta que esté así bien está bien Sí además se adapta todos dispositivos creo esto Y encima se va adaptando Mientras más va bajando bien Esto de soid alto Ok también tiene que ir apareciendo a Medida que va bajando Así que también lo tenemos que poner en absolute

o en fix lo tenemos que poner Bueno vamos a hacer una cosa vamos a agarrar esto y a esto vamos a poner en otro div Esto va a tener el div Class text container y acá dentro vamos a poner los divs bien vamos a agarrar al text container y le vamos a dar hte o min he 100 View por Okay y le vamos a dar un Pos absolute también en posición absolute y un top cero la imen también tiene que estar en Top cero ah Están todas en Top cero pero no apareció bien Ahí está

no le vamos a dar un top cero le vamos a dar fixed perdón fixed también tiene que estar fixa porque la queremos siempre ahí eso ya vamos a ver por qué lo que vamos a hacer ahora es darle un display Flex y le vamos a dar un font size de 10 Rem puede ser y le vamos a dar al Body si tiene Monserrat bueno bien y le vamos a dar color Dark color no vamos a darle color en este caso no vamos a usar variables vamos a Olvidarlo 333 444 perdón y le vamos a dar

mix Blend mode screen a ver qué pasa no no screen No le podemos dar darken Bueno ya ya vamos a ir viendo pero lo que sí va a tener el text no el text container sería el right left Perdón left container va a tener un color 48e que es el que me gusta a mí le container no perdón left text Ahí está claro y depende de la imagen Ah bueno no me disgusta el color le vamos a dar un font weight 700 Así engordo un poco como tu m Le vamos a Modificar el font size

porque no me gusta le vamos a dar clamp vamos a va a tener no va a tener menos de un de un de un Rem no va a tener menos de un Rem la medida ideal sería de 2.2 View por wid son 1 2 3 4 5 6 7 8 9 caracteres dividido 100 View por wid sí más o menos son 11 12 pero vamos a probar con nueve nu o nu View por Wi por ahora ocho ocho mejor y un máximo de 10 Rem sería sí de 10 Rem bueno tan mal no está y

ahí va creciendo bien Me gusta esto mal no está Ahora le tenemos que dar un no justify content space between así se pone cada uno de los costados pero no se está poniendo a los costados ahí tenemos un problemilla Ah por el wid A ver vamos a probar wid 100% a ver qué pasa Ahí Ahora sí y vamos a darle una l items Center así están centrados de esta forma y le vamos a dar un padding de dos View por Wi Por qué no yo diría tres tres View por Wi soy dalto Entonces esto viene

así y aparece bueno tan mal no está vamos a Dar un poquito más grande Vamos a darle 12 r como máximo y nu vi por como máximo entonces ahí Bueno ahí me gusta un poquito más pero este va a tener un padding left de seis View por with cuatro no porque necesita estar más a la Ah bueno mal no está lo ideal sería que abajo encontremos una forma de poner las redes sociales abajo de esto Bueno ahora vamos a ver qué pasa si en vez de darle este color de fondo le damos una imagen vamos

a probar Qué pasa vamos a abrir Esta imagen en una nueva pestaña y acá está vamos a descargar esta imagen guardarla y la vamos a guardar en portada imagen Vamos a darle fondo. png ahí está guardamos y ahora acá vamos a ponerle el background imagen URL img bar fondo.png entonces acá podemos ver un poquito más el efecto de Esto va a tener un background size cover así se adapta Sí o sí un background position Center no Center así está centrado y ahí está y además va a tener un un un fondo le Vamos a dar

un fondo vamos a vamos a venir acá y poner una coma No pues vamos a poner acá vamos a poner un linear gradient 005 005 Ahí va y una coma Vamos a darle ocho y vamos a darle ocho ven Qué pasa cuando le damos darken al texto ven lo que está pasando ni se nota ni se llega leer en este caso en vez de darle darken le vamos a dar lighten si le damos saturation ven Qué pasa también vamos a ir probando diferentes modos a ver Tenemos exclusion Ahí va que es este que está acá

tenemos difference que diference no está malo también está bueno que es este que está acá Okay que genera un efecto extraño pero lo genera Al fin y al cabo pero ni siquiera saben lo que voy a poner de fondo vamos a dejarle el colorcito simple que teníamos ahora que ya aprendieron a usar esto vamos a sacarle el darken a esto que quede como nosotros queremos Pero el color de este va a ser el Dark Dark Color ahí y esto debería tener blanco no el chat background color nos quedamos con los del chat todavía en vez

de chat background vamos a reemplazarlo chat background lo vamos a reemplazar por text color lo reemplazamos y listo y acá tenemos una simple portadita una un efecto interesante que se puede aplicar es trabajar con un gift de fondo Buscamos por ejemplo un gif que sea gif Smoke a ver si encontramos alguno que esta bueno y que sea fluido a ver vamos A probar con este vamos a probar con este lo guardamos como encima es un bucle bien fondo pun gif vamos a guardar fondo pun gif vamos a aplicárselo Por qué no vamos a probar a

ver background imagen URL img fondo. gif a ver qué pasa lo mismo le vamos a dar en background position Center y background size cover tan mal no está esto tan mal no está el tema es que si está afectando Ah pero le podemos dar un Drop Shadow a ver si le damos un Drop Shadow al le vamos a dar Filter Drop c píxeles o píxeles 15 píxeles y le damos negro qué rar que cuando le dan Drop Shadow es como que se se le sale el filter No qué cosa más rara Ah Ya sé Claro

tiene sentido porque una vez que nosotros definimos el Drop Shadow en un elemento estas propiedades pasan a ser parte de su posicionamiento Entonces técnicamente es como si estuviéramos reposicionando el elemento Y acá es donde tendríamos que darle posterior a Eso un position fixed ahí quedaría de vuelta el elemento pero ahí ya que se rompe todo pero ahora más más o menos debe ir por ahí más o menos Che interesante Esto es algo nuevo que no no la tenía esa bueno así que vamos a sacar el Drop sh porque en este caso no nos sirve Pero

me gusta esto me gusta me gusta este efecto es más ya sé que podemos hacer a ver si a mí el Blend Mode que se me da es otro Vamos a darle len Claro si me dan en darken desaparece En un fondo negro es buenísima en un fondo negro desaparezco pero reaparezco cuando aparece el fondo blanco no es un buen efecto igual este eh es un a mí me gusta no sé a ustedes pero a mí me gusta y le vamos a dar darken a todo a ver darken al hate de hecho le vamos a

dar al hate darken a ver qué pasa es muy bueno es muy bueno pero le vamos a dar al text container le vamos a dar un darken Claro en este caso tendríamos que hacer algo diferente Ya ya Les explico Que vamos a hacer a esto O sea a la imagen por defecto le vamos a aplicar un mix Blend darken Okay a la imagen Sí si al container le aplicamos esto Aplica para este elemento pero no para el otro para este que está acá entonces en vez de darle un color blanco le podríamos dar un color

negro claro o sea que el text color en vez de ser blanco va a ser 333 Pon L y ahí aplica Oh Miren qué espectacular este efecto que logramos eh e ojo que acabamos de lograr un muy buen Y esto es puro texto es puro texto es más tiene animación y todo tenemos que hacer que se anime el texto también Bueno vamos a hacer que se anime el texto a ver si le damos también al texto aparecer container Animation aparecer Animation timeline timeline scroll a ver qu Qué pasa Ah claro pero necesitaríamos una animación diferente

aparecer texto se debería Llamar la animación deberíamos reconstruirla aparecer texto okay Y acá deberíamos sacarle el Blend Mode que en este caso no sé por qué está acá se lo tenemos que sacar y también Tenemos que sacarle el grecale le sacamos el grecale y esto lo dejaríamos igual no entonces ahí aparecería pero claro necesitamos hacer que sea un poco diferente necesitamos hacer Que aparezca como que tenga un delay como Que aparezca más tarde a ver vamos a darle Animation Range y le vamos a dar un el Start vamos modificar sol el Start cover 20% ahí

debería arrancar más tarde la Animación No claro debería arrancar más tarde o sea debería arrancar por ahí bien Pero para esto lo que tenemos que hacer es darle un buot Ahí va para que no aparezca así Boot Bot aparece sin nada y empieza a aparecer ahí está ahí va Pero Debería ser inversa esta debería pasar de un. 8 a 1.2 por ejemplo la otra esta un 1.2 Entonces el texto pasa de grande a más chiquito ven de grande a más chiquito y lo podemos hacer más brilloso No le podemos dar un filter para que sea

más brilloso vamos a agarrar el left container no left text div que son los div que están adentro y le vamos a dar un filter Drop Shadow cer píxeles cer píxeles cuatro píxeles negro a ver qué pasa Ahí a ver si también funciona Sí sigue funcionando esto así que le vamos a dar varios Drop Shadow a ver pero en vez de texto negro va a tener blanco va a tener blanco Child el primero en realidad debería tener un naranjita no O Sea el mismo naranja que que tiene acá de color que es este el Dark

color Lo debería tener acá bar Dark color bar Dark color sería el left text directamente y debería tener uno de un píxel y otro un poquito más grande de 9 píxeles por ejemplo che No está mal eh A ver no no está mal y ahora Necesitamos a este pero Debería ser un poquito más blanco deberíamos aclararlo un poquito el color y el Dark también un poquito más clarito a ver si ahí funciona me Gusta ahí me gusta pero ponerle no me gusta que tenga este font weight ahora me gustaría con 400 a ver cómo queda

o se quizás Ah ahí me gusta más y el dalto lo hago más fuerte agarro el text y le digo font weight al que está no al left no a la derecha sería right text y tendría un fway de 900 entonces ahí quedó che No está mal esto Esta animación eh Me gusta bastante vamos dar vamos a sacarle este y que quede todo parejito Ahí está entonces lo agrandamos A pantalla completa full size medio mareo a veces pero creo que podemos encontrar una forma de hacerlo más ingenioso No a mí me encanta Ah Ya sé

Y si hacemos que se invierta el color al pasar por encima le sacamos el darken Ahí está al texto Acá hay algo que creo que podríamos lograr que es en vez de darken Miren el soft light el efecto que genera a ver si en vez de soft le damos hardlight Che me gusta a mí me gusta un poquito más quizá me gusta un poco más Ahí en vez de soft Light hardlight me gusta un poco más color burn también es bueno este modo de color burn no me disgusta está color Dodge también que es este

que está acá pero me parece que me voy a quedar con dier que es este que está acá Este de di es este que está acá y se lo voy a dar a todo el header Ahí está Uy ahí me encantó listo gente lo logramos Miren el header espectacular que nos mandamos no no no no no es que esto es Es más el texto tiene que venir De arriba Ahí está tiene que venir de arriba el texto va a venir en vez de 20% arriba 20% abajo entonces la animación va a ser así Tucson Uy

no miren la miren lo que nos manda es más vamos a hacerlo mejor todavía vamos a hacer que el scale sea de dos Ahí está y acá que el scale sea de punto s Ahí está vamos a ver cómo es ahora el efecto no Uy miren este efecto Ya está gente logramos este efecto de No no es que no voy a decir la Palabra increíble y lo que podemos hacer acá si se animan es los desafío porque los quiero desafiar hasta el Select cambia miren miren miren no es increíble quiero hacer un efecto que es

interesante y es poner acá abajo un enlace con las redes sociales entonces tendríamos por un lado los textit pero abajo o sea el desafío que hagan es acá abajo tienen que crear por ejemplo otros divs con no sé su Instagram por ejemplo entonces acá abajo ustedes le dan click Y con una hrf van a poner por ejemplo Instagram h. instagram.com barsy dealto por ejemplo y acá tienen que poner el logo de Instagram Entonces ustedes tienen esta página así Y ustedes clique y esto los tendría que llevar a su Instagram en este caso me lleva a

mí a mi Instagram pero el objetivo es que se abre en Target Blank O sea que se abra en Target Blank y de esta forma ven se abre en otra pestaña y ustedes tienen acá asociadas sus redes esto lo tien que Que hacer bien no tienen que agarrarlo eh darle un estilo font size de Rem por ejemplo entonces Esto va a estar chiquito y además va a ser un logo va a ser un logo y va a tener un color blanco por ejemplo Entonces se va a notar y va a haber un buen contraste Entonces

lo pueden trabajar para mí de esta forma es la mejor y ponen las redes sociales por ejemplo Instagram y YouTube acá y al lado ponen su Facebook y su linkedin por ejemplo se les voy a dejar de esa forma Para que ustedes puedan tener creatividad libre pero espero que este efecto les dé a ustedes muchas ideas nuevas para hacer efectos Próximamente en sus webs no se olviden que si van agregar más contenido a esto tienen que trabajarlo con un scroll cuando lo vengan a animar acá abajo bueno acá le tenemos que sacar esto porque ya

acá no aplica sería directamente para el header y ahí está Uy Ahora sí lo que les quería decir es que ustedes Cuando vengan a Hacer esta animación lo ideal es que hagan esto con un scroll más corto porque acá por ejemplo tienen 100 eh display View por hate y acá 100 display View por hate esto que está acá lo sacaría yo porque ya tendrían por defecto este que está acá Entonces ya podrían generar el mismo efecto y más rápido Ven y ahí está e Entonces le habría sacado y ahí está ahora lo que yo les

decía que cuando trabajen con animaciones van a tener que hacer que el Scroll dependa de otro scroll específico o la otra opción que pueden hacer también en vez de depender de otro scroll pueden hacer que las animaciones estén al 50% pero yo no haría eso yo haría que todo dependa de diferentes scrolls por ejemplo ahora del scroll del header Y ustedes con el scroll principal animar el scroll del header entonces son animaciones basadas en scroll y pueden hacer varias entonces tienen esta acá y cuando terminan pasan a una sección Nueva por ejemplo y la nueva

sección tiene otras cosas y así van creando animaciones de todo esto está bueno para una landing igual Sería bueno adaptar disp disi móviles porque no está adaptada pero acá lo que pueden hacer por ejemplo en dispositivos móviles no vamos a crear un media queries media screen and Max wid por ejemplo 900 píxeles podemos hacer que el text container sea justify content Center por ejemplo Entonces el texto está centrado Acá son dos puntos Perdón ahora sí Entonces se baja de acá y está centrado es más le pueden dar en vez de eso un space ev para

que quede más lindo y ahí está entonces a partir de acá se pone así y acá está acá Entonces ustedes van a tener los cles por acá y el fondo igual va a seguir siendo visible pero van a poder tener contenido clickable acá en el medio Entonces no deja de ser algo que está piola porque igual lo pueden adaptar dispositivos móviles y Esto de cualquier dispositivo se debería ver bien Y lo bueno es que pueden jugar y está bueno Esto de trabajar también con gifs Aunque tienen que tener cuidado de Cómo es el tema de

los movimientos de la fluidez de los tamaños de la calidad también porque muchos gift tienen mala calidad entonces tienen que tener mucho cuidado con esto una cosa también que se suele hacer por ejemplo es desenfocar un poco el fondo para que no para que no tenga tanto ruido e pero a veces el Ruido sirve para efectos Como por ejemplo en este en este caso el efecto del brillo que le estamos dando al ponerle el difference de fondo que también en vez del diference podemos darle el exclusion que más o menos funcione igual Okay pero a

mí me gusta más el el el di frence porque lo es es como más más bruto Entonces me quedo con el deference pero también aplica Entonces nada gente Bueno hasta acá llegó este ejercicio vamos Air con el Próximo que ahora sí va a ser el último ejercicio del curso y el próximo ejercicio por suerte va a ser un ejercicio tranqui pero vamos a hacer una un menú acordeón basándonos en dos posibilidades vamos a intentar hacerlo y ver las ventajas rápidas de hacerlo con divs y las ventajas rápidas de hacerlo con summary y con el detail

porque al ser solo css tenemos que optar por una o por usar divs o por usar summary and details porque los que trabajan Terriblemente en experiencia de usuario y quieren tener un control absoluto usan eh divs Y los que quieren hacerlo más semántico accesible y más rápido muchas veces Usan el summary y el details Entonces vamos a ver ambos casos y cuáles son nuestras limitaciones con ambos también vamos con el último ejercicio de todo que es hacer un menú acordeón de dos formas diferentes que lo van a aplicar mucho el menú acordeón es algo muy

común que yo por ejemplo en Esta página de la 13 acá sí lo podemos ver está pero si se fijan ven es algo que en este caso está pero esto no está hecho con details y con summary está hecho 100% con html css Y javascript entonces vamos a ver las ventajas y desventajas de hacerlo de diferentes formas bueno gente ahora vamos a hacer un menú acordeón o dos menúes acordeones para ver cuál forma nos conviene dependiendo de la situación okay vamos a hacer este análisis rápido Y de paso Vamos a haar dos menús acordeones y

les vamos a dar estilo para arrancar vamos a crear un div y este di va a tener la clase acordeón acordeón en inglés escribe así acordeon en español se escribe acordeón pasa que en inglés hay otro concepto que cuando uno dice menú acordeón en realidad sería un Drop down menú pero o sea no no es no es correcto el término de acordeón pasa que también a nivel conceptual no porque un Drop down menú Vendría siendo literalmente un menú entonces vos lo lo deslizas y tenés otras opciones Pero esto sería como una sección de fa de

preguntas frecuentes Así que le vamos a dar Fack primero vamos a poner un un details details y adentro vamos a poner un summary y acá dentro vamos a poner pregunta un 01 esto de hecho a esto vamos a ponerlo entre un B para resaltarlo y acá se viene la pregunta 01 puedo ir gratis no el el evento es gratuito por ejemplo y ahí Tenemos la primera opción desplazamos y acá deberíamos tener algo más entonces venimos acá y ponemos si el evento es completamente gratuito La Única condición es estar inscripto vamos a crear tres dos opciones

más una vamos a poner debo ser mayor de edad los menores de 16 deberán ir acompañados de un mayor y acá sería 02 Y por último en vez de B sí esto sería B porque son Únicamente con con funciones de estilo 03 y acá la última pregunta sería Qué actividades Habrá bueno Y acá voy a poner habrá una feria de empleo una hackaton charlas y workshops interactivos y muchas cosas más entonces ahí ya sabemos que si deslizamos tenemos las diferentes opciones Bueno vamos a arrancar a darle un poco de estilo a este menú para arrancar

vamos a agarrar el fac Vamos a darle al Body Okay un background color vg color bien y vamos a agarrar el fa y darle un background color fa color que sería blanco por Ahora Ahí está y vamos a poner fa color Ahí está le vamos a dar un Max with y vamos a usar un clamp de vuelta 300 píxeles 100% 70 % no 7% 100 píxeles Ah 900 píxeles Debería ser No sí 900 píxeles bien vamos a tener también un margin auto en este caso le vamos a dar de 700 píxeles bueno acá le puse

70 por y ya estaríamos No ahora no le vamos a dar fck este color le vamos a dar a las opciones es decir F details y le vamos a pegar el fondo Por qué vamos a hacer Esto simple vamos a hacer esto porque esto va a tener un margin de 5 píxeles Ahí está no de s píxeles para que estén más separad it y a su vez va a tener un padding de 7 píxeles Uy lo puse en full size Bueno ahí más o menos tenemos algo relativamente estético vamos a agarrar los summary Y darles

un padding de unos cer píxeles arriba y abajo y 20 píxeles a los costados al contenido deberíamos hacer esto es más esto que está acá deberíamos envolverlo en un div y esto Tener la clase content Perdón punto content No content esto lo deberíamos aplicar en todos esto lo tabul y esto lo tabul content y el contenido es lo que va a tener el padding de 0 20 píxeles entonces ahí solamente cuando agrandamos podemos ver que este elemento ya está con este padding de hecho puede tener padding 10 pixeles 20 píxeles por qué no y que

tenga un Border top un Pixel solid background color Perdón esto sería bar background color Ahí está es más Propongo que en vez de ser esto que el padding top padding top sea de cinco píxeles Ahí va para que el margin top sea de 5co píxeles así tenemos una distancia entre esto y esto lo mismo que los lo mismo que el margin lateral esto debería tener un padding de 10 píxeles o sea 10 píxeles a todos los lados y margin cer 10 píxeles mejor ponerle un margin cer 10 píxeles a todo y listo margin 10 píxeles

a todo Excepto a la parte de abajo margin bottom cero Entonces ahí va a estar mucho mejor Entonces tenemos las preguntas que se deslizan con su correspondiente respuesta esto le vamos a dar un font si. 8 Rem Así es un poco más chiquito el texto y ahí tiene mucho más sentido creo yo bien Esto que está acá también vamos a envolverlo vamos a agarrar el detail y a los b y le vamos a dar un background color bueno Vamos a darle este color va a tener un padding de cu píxeles o de tres píxeles y

van a tener un color Blanco de hecho yo le pondría color Dark Dark color pero arriba y abajo el padding sería menor sería de un pixxel me gusta me genera algo lindo y yo le pondría colores diferentes a cada details entonces pondría details y acá pondría details b o details Child 2 y acá simplemente le cambiaría el background color a este le pondría por ejemplo otro color alternativo no sé 48e por ejemplo y al cuarto le pondría tres y a este le Pondría el rojo será o al revés lo vamos a hacer verde 4 e8

es un verde azulado pero y vamos a bajarlo un poco Vamos a ponerle seis y acá vamos a ponerle a más o menos no vamos a ponerle b y vamos a ponerle siete bueno y ahí tenemos eh menús de diferentes colores entonces ahí más o menos tenemos esto Bueno hasta acá es un menú normal ahora Cómo podemos hacer un efecto en el que el menú se desplace pero se anime bueno primero vamos a agarrar a todo el a a los Details en general o sea los details y vamos a darle user Select no así no

podemos seleccionar esto okay O por lo menos el summary que no se pueda seleccionar el summary summary user selected n entonces de esta forma podemos seleccionar el contenido pero no podemos seleccionarlo de arriba Entonces de esa forma No molesta lo demás entonces ahí está bueno Esto de entrada está bueno me gusta Aunque hay algo que me llama la atención y es que el margin Botom es cero acá deberíamos hacer otra cosa y es esto dejarlo así Ahora sí mucho mejor ahora sí mucho mejor y le vamos a dar también al contenido un color text color

Así es un poquito más oscuro que es el color del texto entonces ahí está bueno y acá tenemos un menú lo que sí recomiendo es reemplazar estas flechitas que no me gustan mucho la podemos reemplazar por más y menos Entonces para eso tenemos que agarrar el bfor si entramos acá vamos a ver que el Summary tiene un marker es este que está acá el marker de los summary que podemos reemplazarlo lo que vamos a hacer para cambiar Esta flechitas es venir acá y poner eh details marker Y vamos a darle primero le vamos a dar

un color Vamos a darle el color que tendría esto color de acá vamos a darle un content Perdón es del summary el marker Ahí va y ahí está esto puede ser igual no me llama mucho la atención esto ahora que lo estoy viendo así eh Hay algo que no me llama La atención vamos a sacar esto y vamos a dejarle que tenga solamente un color sí es más estético ahí me gusta más bueno y el marker va a tener este color pero no me gusta que tenga esta flechita Vamos a darle content va a ser

de más y una vez que se le cliquea va a ser de menos para eso ponemos details Open o sea una vez que está Open el details vamos a Acceder al summary y vamos a modificar su marker para que el contenido sea menos es medio vulgar esta forma pero no importa ahí Nos queda de esta forma ven que nunca me llamó mucho la atención pero le podemos dar un hate predefinido es más podemos hacer algo mejor que es agarrar el marker darle Pos absolute Okay y directamente ahí ya no molestaría right cero y como el

marker no sirve para esto lamentablemente no funciona al marker tendríamos que sacarle el contenido sin marker no queremos marker y y esto dárselo directamente al summary do. bfor Entonces al before Lo tendríamos acá y Esto tendría el contenido que quisiéramos que vendría siendo el más ahí está al suary le vamos a dar pos relative ahí está y acá podemos ver esto al costadito Entonces ahora en vez de acá acá le vamos a poner al summary before y ahora si se fijan Tenemos el mismo efecto pero al costadito ven Lo que sí voy a ponerles es

un font weight 900 para que el más aparezca más grueso Ahí está me parece mucho más estético esta forma Okay que la anterior que Teníamos que no me gustaba mucho esto es lo primero que tenemos lo primero de todo bu acá Igual vamos a darle cuatro dos o decí bueno Esta es una de las cosas malas que tiene el before que no podemos darle un estilo muy estético una forma que a mí nunca me gustó es darle por ejemplo al content o al details directamente darle al details por ejemplo un Max wid de no sé

40 píxeles Perdón Max hate Max hate de 40 píxeles no Entonces tenemos un Max hate ahí no Se puede abrir más que eso le vamos a dar 36 por ejemplo Entonces vamos a darle en 34 Entonces cuando nosotros lo abrimos por ejemplo fa vamos a sacar el fa Vamos a darle solamente al details Ahí está cuando nosotros lo abrimos por ejemplo details Open Vamos a darle estilo cuando tenga el atributo open vamos a decir que el Max hate es de no sé eh 400 píxeles por ejemplo y acá le vamos a aplicar un transition Max

hte de un segundo Por ejemplo entonces acá ven Que se abre de esta forma que es como que se abre más lento Ven por ejemplo 1.4 segundos y le van a dar también al details un overflow hiden para que lo que no esté se oculte y de esta forma si se fijan se abre lento todos se abren lento Lamentablemente se cierra rápido de vuelta o sea se cierra rápido pero la otra es que se abre lento Y esta es una buena forma de hacerlo No está mal nunca me llamó mucho la atención pero no no

es una mala forma de hacerlo la otra es Además al texto dándole una animación por ejemplo Vamos a darle Animation aparecer Okay y vamos a darle un segundo y un segundo en el que vamos a crear una animación Ke frames aparecer que va a ir de from y acá va a tener el to y va a tener un opacity c y un opacity 1 Entonces no le vamos a dar a esto sino que le vamos a dar a details Open y se lo vamos a dar al content entonces venimos acá y ahora sí cuando abrimos

una de estas ven Esto está cerrado por Ejemplo y cuando lo abrimos vamos a cargarlo de vuelta porque la página no está cuando abrimos hay carga para que esto no suceda le tenemos que dar en primero punto 6 segundos y le tenemos que dar en B entonces ahí ven abrimos y ahí carga también puede ser en punto 3 y a esto darle por ejemplo 2 segundos entonces ahí está y acá tenemos esto que debería ser punto 6 Ahí está y ahí arranca ven Tucson Y ahí empieza Vamos a darle punto TR entonces abrimos el Elemento

y acá carga la respuesta Esta es otra forma de hacerlo que también está buena que así tal cual es como yo uso otra también que también se suele aplicar es un Translate 0 - 20 píxeles y acá es Translate 0 entonces de esta forma también genera este efecto de traslado ven ahí y recién el Border top se le da al final de la animación Ahí está y acá en por ejemplo 90 por todavía tienen un Border n o Border un Pixel solid transparent por ejemplo Border top Y ahí carga ven lo tienen desde acá y

desde acá ponele desde el 50 50 está bien y ahí está Ven y ahí carga de esta forma también le pueden dar 350,000 animaciones más Pero bueno particularmente no es mi estilo este Estas son las ventajas y la forma de hacerlo con un menú así okay de esta forma entonces hacen preguntas y respuestas no sé qué acá no necesita el guion esto lo podemos dejar sin el guion y ahí está Entonces tenemos la pregunta De hecho el B puede tener le podemos dar al B margin Wi de cuat píxeles así se separa más y ahí

está esto lo bueno es que es adaptado a dispositivos móviles o sea se adapta como verán Así que si por ejemplo lo quieren utilizar en no se vamos a inspeccionar lo utilizan en un iPhone 14 Pro Max tienen cargar la etiqueta de responsive perdón siempre me olvido la tengo copiada a Ahí está esta que está acá Perfecto entonces ahí está y así por ejemplo se ve en un iPhone Cces acá podemos Agar una media query por ejemplo que esto sería al revés acá tenemos el clam Ahí está que de por defecto cubra todo pero vamos

a agregar un media screen and Max with min with Perdón min with 600 píxeles y ahí agregamos esta condición pack y ahí tiene este Max wid entonces de esta forma ven lo dejamos así y en tiene esta resolución hasta que crece Entonces hasta acá está así cuando ya crece de esto se queda y ahí lo tenemos adaptado A responsive Así que nada gente esta es la forma que yo uso normalmente para hacer un menú cuando lo hago con summary y details pero después tenemos otra que es la de hacerlo con dips vamos a crear otro

Igual vamos a hacer una copia de esta carpeta ahora vamos a poner con div selecciono la carpeta si guardo todo y ahí estamos bien Ahora voy a abrirlo acá y esto lo voy a dejar acá no lo voy a cerrar lo voy a dejar abierto pero ahora voy a trabajar en la nueva no sé por qué Arriba dice portada igual siempre me olvido de cambiar los títulos acá le vamos a dar fck Bueno y este es el que vamos a estilizar vamos a usar una técnica parecida pero ahora vamos a dejar el mismo texto Solo

que Esto va a ser ahora a base de divs okay Y este div va a tener la clase option y en vez de un summary ahora va a tener otro div que va a tener la clase ask de question sería fa option Fack ask y todo lo demás debería tener la misma estructura qué Paja Pero bueno vamos a hacerlo bueno Más o menos Esta es la estructura es similar a la anterior solo que ahora vamos a darles nombres el details sería el F option ahí tenemos esto ven ya tenemos esto de entrada esto por ahora

lo vamos a dejar ahí ya que no nos va a servir el content sigue siendo el content el summary sería en este caso el fck ask será la pregunta acá lo mismo la pregunta y acá lo mismo la pregunta y ahí tenemos como verán esto que está acá Acá sí podemos poner lo mismo fuck ask y bueno ahora lo único que tenemos que reemplazar es el details open por un checkbox es decir necesitamos a cada opción asociarle un checkbox donde el Label sería esto que está acá Entonces sería loco pero cada una de estas opciones

Debería ser en realidad un Label okay de ser un Label acá lo mismo debería serc un Label acá lo mismo Debería ser un Label lo mismo un Label Ahí está y cada Label va a tener su Checkbox input type check Ahí está y lo cargamos input type checkbox input type checkbox ahora vamos a agarrar a los input tye checkbox y le vamos a dar un display obviamente no pero antes tenemos que verificar que funcionen para eso vamos a apretar acá y apretemos en donde apretemos funciona perfecto los ponemos en none Ahí está y ahora a

los Label que serían los F options deberí darle display block Ahí está entonces ahí ya no tenemos ningún tipo de problema ahora Lo que podemos hacer es lo mismo lo reemplazamos como esto es un Label y acá en vez de poner Label ponemos el input type checkbox si esto está abierto pero ahora sería en caso de que el fa question Perdón que el fa option En caso de que el fa option tenga un input type checkbox vamos a agarrar a lo siguiente Entonces eso es lo que hacemos y lo reemplazamos por todos donde diga details

reemplazamos acá reemplazamos acá y donde más tenemos que reemplazar Emplazar reemplazarías con un f option Entonces más o menos Ahí está ahora tenemos que lograr el efecto de animación pero acá deberíamos decir checked eso era lo que yo me había confundido lo mismo dos puntos checked acá lo mismo dos puntos checked y ahí está Entonces esto es el mismo efecto solo que ahora el mismo efecto nos permite hacer que se retrotraen es que acá tenemos un ma gigantesco tenemos que darle 200 píxeles porque si no se nos va De las manos Ven y ahí está

ese sería el efecto que generaría y se retrotrae lo único que deberíamos sacarle esto que está acá que es el delay que no me gusta nada que tarda demasiado en aparecer y demasiado en cerrarse y todo así que vamos a sacarle el delay 1.5 segundos y no hay nada más con delay No perfecto pero aún así sigue siendo mucho 200 píxeles Vamos a darle 150 lo único es esto ven que tarda en cerrarse lo único acá es donde yo les digo esto fíjense Qué interesante fíjense Qué interesante es esto acá para el cierre o sea

ustedes pueden dejarle esto de 200 píxeles de última pero pueden hacer de última que acá es lo que yo les decía que el transition se aplique acá y que acá dure punto C segundos por ejemplo Entonces se va a abrir rápido y se va a cerrar más rápido es más esto Pasé por una s entonces de esta forma ven se abre normal y se cierra más rápido ven se cierra más rápido o si podemos dejarle 150 y aún así Creo que sigue siendo un efecto mejor además también como desarrolladores tenemos que apuntar a con O

sea a que el texto lo complete por ejemplo de ir acompañado de un mayor si tienen entre 16 y 18 Se les pedirá una firma de autorización de un mayor un adulto usable por ejemplo entonces ahí ya sabemos que más o menos ocupa lo que tiene que ocupar Entonces se va a cerrar rápido por qué Porque si el Max hate es muy grande sabemos que tenemos que dar Ciertas respuestas Esto no es muy Dinámico cuando nosotros estamos intentando crear otras cosas pero está bueno cuando por ejemplo queremos tener un control absoluto sobre el cierre cuál

es el problema de esto Bueno ahora vamos a ver las diferencias este que está acá para comenzar es casi igual solamente que fíjense que al cerrarse no funciona es la única diferencia no hay nada nada más si tiene un código más lindo o sea el código más lindo no resultado para mí El resultado más estético es este quizás Okay sacando ese cierre que necesita tener Sí o sí de una cantidad de hate necesario pero me gusta que sea un efecto que pueda ser tanto a la ida como a la vuelta eso sí me gusta podemos

hacer también que se modifique el hate del contenido es decir en este caso acá pueden encontrar una forma de ingeniárselas para que no necesitemos darle un Max hate sino que le demos un hate 0% y después un hate 100% Dependiendo del del contenido Entonces eso lo podemos reemplazar ahora simplemente utilicé la estructura que estaba antes para hacerlo más rápido pero también lo pueden hacer sería la forma correcta de hacerlo porque no es muy bueno usar el hate siempre está bueno usar 0% y 100% cuando no sabemos cuánto va a medir la caja Entonces aplíquelo lo

único acá le voy a dar solo para para desktop también así que vamos a sacarle esto y vamos a dejar que esto Sea así para desktop 40 píxeles auto Mientras tanto acá va a tener el solamente el auto ahí se queda para Mobile y ahí se queda para desktop bien entonces les decía que las diferencias son prácticamente mínimas Pero sí hay una gran diferencia en cuanto a accesibilidad Okay Por qué Porque este elemento así como lo ven ya está completamente accesible o sea el navegador Ah y otra cosa acá tienen que esperar a que la

animación se complete O Sea si si un elemento lo abren y ahora lo cierran tienen que esperar por ejemplo Para volver a abrirlo Entonces ese es el tema ven lo cierran esperan y lo vuelven a abrir porque si lo cierran repentino No pasa nada ven como que la animación No transcurre porque no termina de fluir en cambio acá sí es diferente lo pueden abrir y cerrar y no importa Porque eh la animación va funcionando en función de esto esto principalmente es por el comportamiento Nativo de los Tails y los options No no es como que

hay una forma de evitarlo Sí con javascript pero no vamos a enfocarnos en eso Entonces este es verdad que es más lindo estéticamente y además tiene un tenemos un control mayor sobre los elementos pero el otro tiene todo lo de accesibilidad incluido los lectores de pantalla lo pueden leer a este tendríamos que agregar roles tendríamos que trabajar más con área Entonces ese es el problema principal de Hacerlo de esta forma además de esta forma es más rápido Okay mucho más rápido y esta es la forma diría yo correcta hoy en día si no quieren hacer

tanto código si quieren una respuesta rápida y una solución simp Esta es la forma si quieren tener mayor control y están dispuestos a encargarse de poner los atributos y todo lo necesario para la accesibilidad correspondiente esta sería también la opción indicada no las páginas más grandes y cómo hacen los Mejores desarrolladores y las mejores empresas bueno normalmente usan un enfoque híbrido como les dije que es o hacen una respuesta rápida o buscan control total o los que trabajan en empresas gigantes ya tienen framework es decir usan react angular View Y estos ya normalmente vienen con

sus propios componentes para crear este tipo de elementos no entonces bueno se ahorran de desollar esta funcionalidad que estamos desarrollando nosotros Ahora se La ahorran por eso no no se preocupan de uso detels o uso openen porque ya vienen integrados pero si lo van a hacer 100% nativo ya la elección es completamente suya Yo lo haría de esta forma y me tomaría el tiempo Uy me salió me tomaría el tiempo de agregarle todos los atributos de esto de lo otro de configurar todo bien porque tengo mayor control Entonces al fin y al cabo es más

código pero me da un resultado más lindo y haría esta forma si estoy simplemente Buscando una web que sea rápida no que la pueda liquidar en mayor tiemp en menor tiempo porque a veces así como tenemos que decidir si una opción rápida o una opción corta pero una opción larga pero con más control en esto También tenemos para hacer un montón de cosas más por ejemplo para hacer headers para hacer menús para hacer un montón de componentes tenemos que pensar quio la opción rápida o la opción a largo plazo o pero con mayor control Entonces

si Vamos a hacer una web rápida todos los componentes lo vamos a hacer en el modo corto Por eso digo que parece que no se ahorran mucho pero cuando desarrollan muchos componentes sí se lo ahorran entonces para una web que es bien compleja y que quieren lo mejor est con todos los atributos de accesibilidad y darle mayor funcionalidad y cuando quieren algo rápido que ya tenga todo lo de accesibilidad incluido o no sabe Mucho de accesibilidad esta igual no Deja de ser una opción excelente que se está recomendando pero el código que uno usa sin

ccs para Perdón sin javascript para hacer esto con css viene del 2009 imagínense pero está bueno que le aplique en javascript Pero bueno eso ya es otro tema pero esta no es una forma mala no es un no es algo negativo no siempre y cuando chequeen que en todos los dispositivos en to porque a veces queda muy lindo en su computadora pero lo vende otra compu lo vende otro Sistema operativo y lo vende otro dispositivo y no funciona o no se ve tan estético Entonces siempre está bueno testear funcional idades No Y ahí ya van

viendo que pueden cambiar así que bueno gente esto llegó al fin acabamos de finalizar este fantástico curso de html Y css lástima que la gente que entra solamente para ver qué es lo que hicimos se va a encontrar con esto y va a decir esto es lo mejor que hicieron en todo el curso pues son tontos solo ustedes que Recorrieron todo el camino saben todos los proyectos que hicimos que fue uno más lindo que otro y que no pararon de aprender Y tienen todo lo necesario para avanzar al siguiente nivel y no al siguiente nivel

html y css sino que ir con la siguiente tecnología porque esta ya la tienen pulida Así que vamos a ir con la sección final y el cierre del curso y estoy hablando de cómo seguir aprendiendo porque seguro te haces esa pregunta ya está alto y ahora y Ah cómo Sigo qué aprendo qué qué toca continuar Bueno vamos a ver y analizar todo lo que sigue a continuación nuevamente los felicito vamos la pregunta que todos se deben estar haciendo cómo sigo aprendiendo me acabo de morfar 24 horas alto casi 24 horas literalmente vi un día de

curso bueno para comenzar lo que creo que tenés que hacer de entrada es aprender a leer la documentación si bien Tengo un video de eso no te voy a mandar al video Porque no es lo que voy a explicar ahora para mí hay cosas que cuando yo me di cuenta ahí me cambió la forma de ver todo y aprendí a la documentación de una forma increíble esto no lo expliqué antes porque como todos los conceptos que fuimos viendo se lo fui explicando durante el curso y les daba laada que ustedes investiguen ahora que van a

tener que seguir aprendiendo y ver cómo avanzar quiero explicarles Cómo leer la documentación muy rápidamente para que Tengan una herramienta y entiendan bien Hacia dónde voy hacia dónde quiero ir y por qué Les recomiendo esto vamos a buscar una propiedad por ejemplo Max hate Okay Vamos a entrar acá para arrancar nosotros nosotros cuando entramos a la documentación que esta es de las más importantes Okay es la de milla es developer.mozilla.org que esta para mí repito de las más importantes esto lo pueden ver así o lo pueden ver en español acá básicamente lo que dice Es

la propiedad ma hate establece un máximo un alto máximo de un elemento esto previene un vamos a traducirlo al español para que lo entiendan acá dice esto evita que el valor utilizado de la propiedad sea mayor que el valor especificado para Max G entonces acá nos muestra una demo V acá podemos ver las diferencias de Max hate por ejemplo Max heate 150 píxeles 7m y en este caso 75 por es lo mismo por qué porque simplemente establece un Máximo no un hate no Entonces en este caso podemos ver las diferencia acá Okay está diciendo que

Max hate anula el hate pero el min hate anula el Max hate Qué significa esto significa que Max hate va a tener prioridad por sobre hate O sea que si el hate es de 2000 píxeles pero el Max he dice 1000 le va a dar prioridad al Max height O sea que el el resultado final va a ser que el elemento Okay tiene 1000 no va a tener 2000 porque ma hate tiene prioridad por sobre Hate y a su vez min hate tiene prioridad por sobre Max hate Cómo es esto bueno significa que si por

ejemplo el min hate es de 1000 píxeles y el Max hate es del 100% si el 100% es 900 píxeles A qué le va a dar bola al 100% que serían 900 píxeles en una pantalla chiquita o al min heate que dice de min peles Bueno evidentemente al min heate Entonces esto significa que algo lo anule no entonces simplemente leyéndolo medio que podemos llegar a una conclusión entonces acá por Ejemplo te dice los valores Estos son todas las posibilidades que acepta no se olviden que los valores son normalmente tipos de datos tenemos por ejemplo el

length que es el tamaño tenemos el porcentaje que son valores porcentuales estas suelen ser medidas fijas tenemos el valor de n tenemos el Max content el min content el fit content y el fit content con un porcentaje que esto no se lo expliqué pero también lo pueden aplicar Esta es la fórmula del Fit Content igual Qué interesante no Entonces ustedes pueden darle a Max hate estos valores le pueden dar un número por ejemplo dos Rem 3 Rem 20 píxeles 100 píxeles pueden darle porcentaje 100 porcentaje entonces acá te dice Mira si vos le das 20

píxeles por ejemplo que sería el tipo de dato leng que si no saben lo que es entran y acá van a ver qué es lo que es les dice el vamos a venir acá el tipo de datos de css length representa un valor de distancia las Longitudes se pueden utilizar en numerosas propiedades como y ahí arranque numerar te empieza a explicar qu es y acá te dicen por ejemplo cuáles son estas medidas las unidades que son length son eh cap em ex ic lh rk tenemos los pixeles tenemos los centímetros bueno esto sería una medida

leng Okay pero esto no es una medida de porcentaje es leng después tenemos la medida de porcentaje que si queremos ver qué es entramos y acá podemos ver lo que son y Un ejemplo de uso Entonces si ustedes no entienden la parte más afata no lo van a entender entonces por eso es importante que cuando lean la documentación entiendan estas cosas que estos son todos los valores un posible valor es un tipo de dato length otro posible valor es un tipo de dato porcentaje otro otro tipo de otro posible valor es none que significa que

no hay límite y cuando ustedes le dan none acaba a suceder esto cu ustedes usan porcentaje va a suceder Esto cu ustedes usan leng va a suceder esto tenemos el Max content que acá dice lo intrínseco preferido Max hate min content que es el mínimo intrínseco de Max hate fit content que significa utiliza el espacio disponible pero no más que Max content es lo que explicamos y acá te dice las preocupaciones de accesibilidad no y acá te dan consejitos para que apliquen acá les dice el valor inicial que por ejemplo el valor inicial es n

oa si ustedes no le dan nada por Defecto el Max hate viene en none acá les dice que no se hereda O sea que si ustedes por ejemplo tienen una caja con el Max hate 100 píxeles y esa caja tiene un hijo ese hijo no va a heredar el eh Max hate acá les dice cómo se calculan los porcentajes porque por ejemplo si ustedes le dan un porcentaje a font size no es lo mismo que le den un porcentaje a Mac hate que tampoco es lo mismo que le den un porcentaje a un elemento fix

de un elemento Flex por ejemplo entonces Acá le dice en este caso para esta propiedad cuando hablamos de porcentaje porcentaje de acá no se explica Entonces esto es leer la eh documentación vamos a ver otro ejemplo vamos a ver por ejemplo filtrar o filter la propiedad filter acá nos dice la propiedad filter aplica efectos gráficos como desenfoque o cambio de color a un elemento entonces acá te muestra que hay varias funciones como blur contraste y que están disponibles para ayudarte a lograr Efectos predefinidos porque ya están definidos Por css acá nos muestra un par de

ejemplos ven que podemos aplicar entonces acá te muestra el código filter y con la función H rotate lo rotan con Gray scale lo aumentan en escala de grises lo mismo con contraste con blur con URL es más acá se le da el Drop Shadow y después se le da un invert acá lo pueden ver ven acá les muestra la sintaxis ven cómo se unos ejemplos de sintaxis esto está bueno ahora vamos a Buscar donde dice valores acá les dice funciones la propiedad filter se especifica como none una o más funciones enumeradas a continuación Qué significa

eso que si ustedes van abajo de todo seguramente por defecto les va a decir que el valor por defecto de filter Es none okay O sea que una de las posibilidades es none después dice que también pueden especificar una o más funciones que vamos a enumerar a continuación y las funciones son estas Que están acá acá dice que blur aplica un desenfoque gusano que es un desenfoque que todos los que editan también la conocen y acá les muestra Y si quieren más información entran entran a blur y acá tienen exactamente el uso completo Ven y

les dice por ejemplo la sintaxis es esta y los parámetros que le pueden pasar es el radius que es el parámetro que les pide la función que es el radio del blur concepto básico y acá les muestra ejemplos No acá les dice la Compatibilidad con los navegadores que esto es importante para funciones nuevas y así pueden ver el total de todo entonces venimos bajamos bajamos y acá decimos combinando funciones y pueden ver cómo combinan ven lo que es la interpolación acá le dice no está heredado y pueden ver esto ya es un cálculo técnico Cómo

funciona internamente la sintaxis formal justamente que no nos vamos a poner ahora a ver eso y la compatibilidad Obviamente decimos Bueno vamos a buscar una propiedad de una más compleja vamos a buscar por ejemplo justify content entonces acá por ejemplo entran y les dic Mira justify content tiene estas posibilidades ven la propiedad hace esto y estos son los posibles valores Start end Flex y acá te cuenta todo y có cómo funciona cada una de estas cosas okay esto es increíble veamos cómo funciona por ejemplo la propiedad wid ves acá Está nos muestra Cómo funciona la

Propiedad wid bajamos y nos dicen Cuáles son los valores los valores posibles son o un dato length o un dato porcentaje también puedes usar la propiedad auto puedes usar un Max content un min content y todo esto tiene su respectivo elemento si ustedes no saben lo que es un tipo de dato length entran acá por otro lado tienen los que no son estndar por ejemplo acá le di en zoom y acá se puede observar el zoom ven Esto no es un estándar entonces no se recomienda Usarlo si no es está también pueden chequear eso vamos

a ver qué pasa si usamos por ejemplo vamos a buscar clamp que esto ya es algo más complejo y acá dice ven la función clamp fija un valor medio les cuenta De qué trata acá Tienen varias opciones acá tienen la sintaxis por ejemplo y acá tienen los parámetros no confundan valores con parámetros los parámetros son los datos que nos pide la función la función nos pide que le establezcamos un mínimo que es el valor Mínimo que es el primer parámetro nos pide que le establezcamos un un valor ideal que es el valor del medio y

el máximo que es el valor máximo eso nos dice la documentación y abajo nos muestra los valores ven el valor de retorno que un valor de retorno es lo que una función nos devuelve y acá dice que según los parámetros proporcionados la función puede devolver cualquiera de estas cosas leng frequency angle Time porcentaje number integrer okay Y acá Tienen todo esto esto que está acá es una posibilidad Entonces es importante que ustedes entiendan y que se familiaricen y cuando no entienden algo de la documentación aonde más a fondo por ejemplo fija un valor medio dentro

de un Rango de valores entre un límite mínimo definido y un límite máximo la función toma tres parámetros qué jorak que es un parámetro Bueno no sé lo que es lo busco entro y lo busco Qué es un parámetro es un dato o factor que se Toma como necesario para analizar o valorar una situación O sea que el parámetro es eso que necesita la función para hacer algo entonces por ejemplo clam tiene tres parámetros el primero es el mínimo el segundo es el valor ideal y el tercer parámetro es el el valor máximo Esos son

los tres parámetros ahora Cuáles son los valores de este parámetro eso lo podemos ver yo por ejemplo vengo acá y Busco la función Flex no flex esto que está acá me dice Mira es una El flex es una propiedad abreviada establece como mento flexible va a crecer O se va a reducir para adaptarse al espacio disponible de su contenedor y acá dice esta propiedad es una abreviatura de las siguientes propiedades Flex grow Flex shink y Flex brais siempre te la muestran en ese orden y acá te dice por ejemplo la propiedad Flex se puede especificar

utilizando uno dos o tres valores o sea la podemos utilizar con un solo valor Con dos o con tres si le damos un solo valor nos dice que pasa si le damos dos valores nos dice que pasa si le damos tres valores también nos está diciendo qué está sucediendo y ahora nos está diciendo Cuáles son los valores se entiende y acá no dice que los valores que podemos usar es initial auto none también podemos usar un Flex grow o sea un valor para Flex grow un valor que le daríamos a Flex shrink y un valor

que le daríamos a Flex basis Entonces esto está Muy bueno porque leyendo la documentación nosotros podemos entender un montón de cosas que no sabemos ni que existen Okay por ejemplo esto es de css es una regla nueva de css starting Style es otra cosa nueva esto de starting Style es buenísimo estas cosas que no las enseña nadie y no está en ningún curso es porque la mayoría de gente que da ustedes entiendan esto la mayoría de gente que da cursos lee la estandarización oficial en muy pocos Casos porque la gente que da cursos suele leer

o aprender de otros cursos y lo que enseña no es más que lo que otros cursos le enseñaron cambio Si ustedes leen yo soy la excepción yo no hago eso yo siempre Leo la documentación oficial Entonces cuando ustedes Ven por ejemplo que en la documentación oficial Hay cosas de las que nadie habla aplíquenlas yo por ejemplo no vi que nadie hable del scope no vi que nadie hable de de lo que se va a poder usar más adelante que es El tema de mixins pero implementados nativamente en css porque no lo saben porque no entienden

porque no buscan en las cosas nuevas entonces acá van a poder ver muchas de las propuestas que están eh Ya aceptadas para implementarse pero que son tecnologías experimentales por eso mi consejo es vean el cursito para leer la documentación Ahora sí la gente que da cursos Saca los contenidos de acá o de gente que da otros cursos Entonces si no hay nada de material en Internet sobre un tema es porque todavía nadie lo habló nadie lo vio desde acá Entonces es importante muy importante le lado con oficial por eso mi consejo es que ahora aprendan

a leerla Tampoco voy a hacer una sección de eso porque ya no se excede de html y css no ya no tendría mucho que ver con el curso pero aprendan a leerla investiguen sobre cómo leerla bien y cómo entender la documentación cuando adquieren esa habilidad se van a volver unas bestias y se van a sacar Todas las dudas que tengan a tal punto de no buscar más en esta overflow no preguntarle más a chat gpt porque lo van a entender ustedes y eso va a ser clave porque va a desarrollar mucho mejor su lógica bueno

eso como primer punto después otra cosa Ya a nivel personal que Les recomiendo hacer es hacer proyectos personales hagan un portafolio personal agarren un portafolio Y desarróllelo con todo lo que aprendieron a lo largo del curso Okay y pongan todos Los proyectos que hicimos y construyan nuevos proyectos el portafolio es muy importante porque como ustedes no tienen currículum porque Posiblemente no no tengan una no sean ingenieros en sistemas o desarrolladores de software o algo de eso Entonces su carta de presentación no va a ser un currículum porque no tienen experiencia profesional en el mundo del

desarrollo web sino que van a tener un buen portafolio para mostrar Cuántos años trabajaste en estas Empresas No la verdad que no nunca tuve un trabajo formal de esto pero sí eh tengo tengo muchísima experiencia desarrollando proyectos o sea este es mi portafolio mire y le vas a mostrar todos los proyectos ahora si a ustedes no les interesa esta habilidad para trabajar de desarrolladores web a eso ya está tem má suyo pero lo que digo es que les sirve un portafolio personal porque es muy bueno hasta si ustedes son autónomos Porque si ustedes tienen clientes

que no Son una empresa si ustedes no tienen jefe y ustedes son su propio jefe igual tienen un jefe y ese jefe es su cliente si ustedes son freelancers por ejemplo al freelancer al cliente también le interesa ver otros proyectos que ustedes hayan hecho para saber si contratarlos o no pero yo repito eso es otra cosa no voy a meter muy técnico pero mi consejo es hagan un portafolio personal aunque sea de proyecto porque es muy bueno e investiguen pregunten la chat gpt qué Proyectos puede hacer únicamente usando html y css sin javascript o por

ahí Ojo por ahí buscan hacer proyectos con javascript y se ven obligados a aprender algo nuevo pero ya vamos a llegar a eso otra cosa que para mí es importante también es que vean las nuevas propiedades y los nuevos módulos en desarrollo como los que le dije deí Por ejemplo que aprendan sobre scope los dos tipos de scope O sea la propiedad y el add rule la regla el que arranca con Aroba que aprendan también sobre el html moduls por ejemplo que investiguen las cosas nuevas que van surgiendo que busquen las cosas experimentales okay Y

las lleven a la práctica se descarguen Chrome eh Chrome canary que es Eh como un navegador especial que es especial para desarrolladores Porque implementa funcionalidades nuevas para que nosotros las probemos ya de entrada sino también tienen pueden probar eso lo pueden ver justamente abajo a ver qué desarrollador Lo acepta qué navegador Perdón es compatible además también pueden Aprender a usar el el mozila porque por ejemplo una de las cosas que no les dije Es que a veces cuando tenemos diferencia entre compatibilidad tenemos que arregar por ejemplo el guion guion webkit guion y el nombre de

la propiedad Porque también es importante Entonces estudien eso también analicen la compatibilidad de navegadores también vean sobre los mixing los mixins en realidad son una Característica de los preprocesadores Como por ejemplo Sas o les básicamente lo que hacen es o sea realizan como un grupo de declaraciones de css para que después las usemos todas juntas digamos básicamente son como son son muy parecidas a las funciones y los lenguajes de programación nos dejan todo algo para que de una sola llamadita ya nos sirva yo por ejemplo digo Bueno mira este B los botones van a tener

todas estas propiedades Entonces qué hago Después agarro y le pongo mixing entonces cada botón que quiera que tenga esa propiedad le doy mixing otro consejo es que investiguen css Houdini porque es un módulo poderosísimo que trae como otros submódulos como el Paint tapi el layout tapi que básicamente les permiten agarrar ccs y con javascript modificarlo para hacer magia créanme que judini cambió Todo ccs judini cambió todo porque te permite agarrar css y hacer lo que quieras literal puedes modificar tus Propiedades puedes crear tus propias propiedades puedes hacer lo que sea Hay un montón de cosas

mágicas para hacer con judini Así que investígalo anótelo en la cosita para investigar Pero eso después de ver javascrip también investiguen sobre Sprite css como es una de tantas formas que tenemos de reducir las solicitudes http a ver básicamente un Sprite ccs es una imagen grande que contiene como como otras imágenes más chiquititas Y en lugar de usar Muchísimas imágenes chiquititas a lo largo de toda la página web pueden usar una imagen grande y esa imagen grande fragmentarla en chiquitita entonces en vez de que la página cargue muchísimas veces imágenes diferentes carga solamente una y

esa una se subdivide en imágenes más chiquititas que se usan en la web esto es mucho más óptimo que cargar 300,000 imágenes ahora para qué Esto bueno para mejorar el rendimiento de carga y esto está bueno sobre todo en Las en las redes que son lentas no O tienen bueno poca conectividad o bueno también las páginas que tienen muchísimos elementos gráficos y bueno si la desventaja es que eh tarda más inicialmente esta primer carga de imagen pero bueno Nada igual hay que ver si compensa los tiempos de carga Pero es muy bueno también pueden ver

el tema de la [Música] mimifondos pero tampoco les dije Por Ejemplo que un elemento html es indistinto de los espacios O sea al elemento html no le importa si vos ustedes ponen una palabra ponen dos espacios tres espacios cuatro espacios 20 espacios eso va a contar solamente como un espacio pero al navegador que lo lee le cuesta un poquito más entonces eso sería mimifondos sino hay que optimizar muchísimas cosas un poquito y de esa forma tenemos un resultado mucho mayor Después me consejo que aprendan framework Como por ejemplo tailwind Okay que es muy potente Está

bueno Porque pueden escribir códigos sin tener que andar haciéndolo todo desde cero Eso de reinventar la rueda No no va o sea básicamente tailwind proporciona clases de utilidad Okay no sea tiene Flex pt4 Tex tenter etcétera Lo bueno es que se pueden componer directamente en el html Y desde ahí ya lo estilizan el elemento Esto hace que sea todo más rápido más Eficiente nada tiene sus ventaja lo bueno de esto que te acopla todo el html y el css que es redundante te lo saca te lo fleta y ojo acá porque aunque tailwind no es

nuevo o sea no es que es una tecnología nueva ya está por salir la quinta versión tiene un enfoque de utility First que eso o sea está ganando cada vez más popularidad es como View vi no es nuevo pero cada vez está ganando más relevancia así como rect hace unos años atrás Así que anótelo en la listita De cosas por aprender Y por último si quieren darle un retoque máximo a a todo esto aprendan javascript que como habrán visto a lo largo del curso es Es indispensable es un lenguaje de programación de alto nivel es

interpretado y basado en prototipos es orientado objetos y es el lenguaje de programación web más usado del mundo ahora es el lenguaje frontend más usado del mundo y eso es indiscutible de programación no porque es el único Obviamente yo tengo cursos de javascript y está ahí después si realmente quieren ver una curva de desarrollo real Tengo un video especial para explicarles qué es lo que yo haría o cómo yo aprendería a programar desde cero Cuál es la ruta que yo tomaría pero por ahora si solamente quieren seguir por el camino del desarrollo web y demás

Estas son las cosas que les recomendaría aprender para fortalecer sus conocimientos en html ccs y agregarle un Plus al frontend todo Esto es únicamente de de frontend si quieren una ruta mucho más exclusiva y profunda mi consejo es que vayan a lo que vendría siendo el video que les dejé que está bueno la verdad y bueno gente hasta acá llegó el curso los recontra felicito los aplaudo acaban de verse más de un fucking día de curso eso no lo hace cualquiera y Eso habla muy bien de ustedes porque significa que realmente están comprometidos con esto

de seguir Aprendiendo realmente tienen ganas de de meterse en este mundo aunque ya bastante metidos están y me despido espero que la estén pasando bien y que la hayan pasado bien durante todo el curso las risas los conocimientos y el aprendizaje No faltaron y te deseo un muy feliz cierre de curso Espero que estés contento porque yo lo estoy y te invito a continuar aprendiendo porque eso es lo que nunca tenés que dejar de hacer Ah y una cosa si van a convertirse en Programadores no se olviden nunca de que no tienen que programar para

solucionar problemas sino que tienen que programar para crear soluciones yo soy dalto y nos vemos en la próxima Hey