CSS 301: diseño web receptivo

1. Bienvenido a CSS 301: diseño web responsivo: Bienvenido al diseño web responsive, CSS 301. Este es el paso final en tu viaje CSS, donde aprenderás sobre el diseño web responsive y cómo producir un sitio web que se ve muy bien en todos los dispositivos. En este curso, estaremos tomando CSS básico y cambiándolo en función del tamaño del dispositivo, que básicamente está aplicando una pequeña cantidad de lógica a nuestros hermosos sitios web usando CSS. Entonces ya sabes, cuando un sitio web tiene una barra lateral en la vista de escritorio, pero luego encoges tu navegador y de repente las cosas desaparecen y los menús aparecen en las cosas se esconden. Eso es diseño web responsive. Eso es lo que vamos a estar haciendo en este curso. Hola, soy Caleb Italian. Llevo 20 años haciendo sitios web. He estado enseñando codificación en línea desde hace unos ocho años. Y hoy te voy a estar instruyendo a través de CSS 301, diseño web responsive. Si quieres hacer hermosos sitios web que se vean bien en tu escritorio, laptops, televisores, tabletas, teléfonos, prácticamente cualquier dispositivo. Entonces este curso es absolutamente para ti. Bienvenido a CSS3 u1 diseño web responsive. Y espero verlos en esa primera lección. 2. El elemento meta de viewport: Muy bien, para empezar con el diseño web responsive, necesitamos realmente asegurarnos de que tenemos un metaelemento dentro de nuestra página HTML. Entonces solo voy a crear un nuevo archivo aquí y cambia de texto plano a HTML. Y estoy usando código VS. Este es sólo el editor de texto que he elegido. Y si hago HTML colon cinco, y voy a hacer esto sólo un toque más grande. Si hago HTML colon cinco, veo este m en abreviatura. Entonces puedo golpear tab y me da todo lo que necesito. Me da el lenguaje HTML, que es agradable. Me da UTF-8 para la codificación de caracteres, lo que te permite tener cosas como emojis en tu página. Y entonces tenemos esta línea, y ésta es la importante. El metanombre es igual a la ventanera. El contenido es igual al ancho, es igual al ancho del dispositivo y la escala inicial es 1. Eso es importante. Queremos mantener eso exactamente como lo vemos. Y lo que esto hace es que permita a nuestro navegador decir, acuerdo, así que esta va a ser una página receptiva. Entonces si tienes alguna página en la que estás trabajando, cualquier sitio web en el que estés trabajando y quieres hacerlas sensibles. Asegúrate de agregar esto a la sección de cabecera de tu página en cada elemento o elemento HTML, pero cada HTML, asegúrate de tener esto en cada archivo HTML de punto que tengas. Y eso asegurará que tu CSS actúe de la manera que queremos que actúe con diseño web responsive. 3. query de consultas de consulta de medios: De acuerdo, echemos un vistazo a la sintaxis de la consulta de medios. Entonces lo que puedo hacer aquí es que podemos hacer esto en un estilo interno con el atributo de estilo o no atribuir el elemento. O podemos hacer esto dentro de CSS externo. Voy a hacer esto justo dentro de este documento para que veas exactamente lo que estoy haciendo con el HTML y CSS lado a lado. Por lo que típicamente seleccionaríamos un elemento como nuestro cuerpo. Y podríamos decir que el color de fondo va a ser azul. Y vamos a guardar esta página como index.html. Y la mía siempre cambia aquí. Volvamos a cambiarlo a HTML normal, no a plantillas Django. Y así esto nos va a dar, el cuerpo, elemento cuerpo va a tener un color de fondo de azul, k Esto va a ser feo, pero esto va a ser una buena demostración. Entonces, vamos a pasar a un navegador. Solo estoy usando Chrome aquí. Puedo ir a Archivo, Abrir Archivo, seleccionar mi index.html. Tenemos un fondo azul k Esto es bastante feo, pero él consigue el punto por aquí. Ahora lo que puedo hacer es hacer clic con el botón derecho inspeccionar. Y tu panel podría verse un poco diferente al mío. Creo que el mío es sólo modo oscuro. Y ese va a ser mi escenario en alguna parte. Ajustes. Ajustes, ajustes. Sí, tema, oscuro, luz requiere una recarga. No quiero recargar, pero sí, puedes cambiarlo ahí si quieres. Entonces lo que esto está haciendo es permitirnos hacer clic en este pequeño botón aquí, esa barra de herramientas del dispositivo de toggle. Y esto va a cambiar el ancho de nuestra página. Y esto hace que nuestra página sea receptiva. Y así es mucho como encoger tu navegador a la izquierda y a la derecha, pero esto en realidad lo hace correctamente, por lo que se vuelve un poco más preciso de esta manera. También podemos decir responsive, pero también hey, intentemos como un iPhone o un iPad Pro o cosas así. Y automáticamente lo va a dimensionar para nosotros. O podríamos hacer simplemente responsive y un ancho regular aquí. Por lo que la mayoría de las cosas van basadas. diseño web más receptivo funciona fuera del ancho de tu dispositivo, no de la altura. Y sigamos adelante y restablezcamos esto al 100%. Eso es enorme y vamos a hacer eso más pequeño. Entonces está bien, aquí no pasa nada. El diseño web sensible es cuando decimos cuando ese ancho del dispositivo es un cierto ancho, ya sea más grande que, más pequeño que o entre dos tamaños, cambiar ese color de fondo. Y así se parece mucho a esto entre soportes de medios, ancho máximo. Y entonces qué ancho queremos darle? Digamos 640 píxeles. Y entonces también podemos decir aquí. Por lo que estamos envolviendo una consulta de medios alrededor de más CSS. Haz que ese cuerpo tenga un color de fondo de rojo. Y así a 640 píxeles y menos, porque va a tener un ancho máximo, nos enteramos de que NCSS a bien 1640 píxeles y bajo va a cambiar ese color de fondo a rojo. Entonces sigamos adelante y actualicemos esta página y respondiendo. Sigamos adelante y cambiemos a 641. Nada, 640 se pone rojo. Y podemos ver cuando arrastro aquí. Ahora este es un ejemplo realmente bueno. Es un ejemplo feo, pero es un ejemplo realmente bueno de diseño web responsive. Entonces echemos un vistazo a esa sintaxis una vez más. Tengo mi estilo regular aquí arriba. Lo que normalmente quiero pasar, podría estar en el cuerpo, podría estar en clases, ideas. Estarías seleccionando Por Atributos, cualquier cosa que te guste. Es tu CSS regular el que sube aquí. Y luego debajo, hacemos soportes de medios, ancho máximo, el ancho que quieras, corsé rizado, y luego tu CSS regular aquí y luego terminamos ese corsé rizado. Y en realidad podemos colapsar esto también. Por lo que se parece un poco más a esto. Y acabamos de poner nuestro CSS o CSS regular dentro de ahí. 4. ¿Qué es lo que es móvil primera?: De acuerdo, echemos un vistazo a lo que primero es el móvil. Se ve a mucha gente diciendo mobil primero. Bueno, bueno primero, ¿qué es el móvil primero? Móvil primero significa que estabas haciendo un sitio web para, para lucir muy bien en tu teléfono primero. Entonces lo que hice aquí fue darle estilo a esto basado en absolutamente ninguna regla en absoluto. Y sabemos si no hay regla de consulta de medios que este estilo aquí sólo se va a aplicar. Mantas sobre cada tipo de dispositivo, cada ancho de dispositivo. Y entonces lo que dije fue, oye, en realidad cuando ese ancho máximo es de 640 píxeles o menos, Eso es lo que significa max-width. Entonces cámbiate esto. Pero Mobile First es la idea de hacer esto contrario. Por lo que el móvil primero diría, oye, hacer rojo ese fondo del cuerpo. Y luego con un ancho mínimo de 640 píxeles, cambia ese color de fondo a azul. Y así todo lo que estamos haciendo aquí es revertirlo. Estamos diciendo todo el tiempo, que ese color de fondo sea rojo. Y luego en un ancho mínimo y hasta 640 píxeles y arriba cambiar ese color de fondo a azul. Entonces desde ese último video hasta este video, voy a refrescar esta página y vamos a ver que en realidad no pasa nada. Entonces hagámoslo más grande. Y se queda azul. Y luego lo hacemos más pequeño, más pequeño, más pequeño. Y cuando bajamos a 640, se puede ver que se va a rojo. Y así eso hace exactamente lo mismo que lo que hicimos antes. Sólo cambiamos donde estamos escribiendo nuestros códigos decían, oye, todo aquí tiene que ser para el móvil primero. Y luego en un ancho mínimo un arriba, en realidad queremos que ese color cambie. Y así ahora estamos escribiendo código para teléfonos primero y ajustándonos para un escritorio. En tanto que en el último video lo que hicimos fue escribir código para un escritorio o tableta o algo grande. Y luego dijimos, oye, en realidad cuando ese min, cuando ese ancho de página es lo suficientemente pequeño, cámbialo. Y así uno es el escritorio primero, uno es el móvil primero, y esto es el móvil primero. A menudo vas a ver a la gente diciendo que mobile-first es mejor. Honestamente, vas a ver más gente escribiendo escritorio primero css más de lo que vas a escribir un, más de lo que vas a ver gente escribiendo CSS mobile-first. 5. Imágenes responsivas: Echemos un vistazo a cómo hacer que una imagen responda, porque por defecto en realidad no son realmente todo tan receptivo. Y así vamos a seguir adelante y abrir una nueva pestaña y vamos a un Splash.com. Y busquemos algún tipo de pintura. Claro, bastante bueno. Lo que voy a hacer aquí es que voy a hacer clic derecho. Copia esta imagen. No, copia la dirección de la imagen, no la imagen, sino la dirección de la imagen. Y entonces puedo abrir esto en mi navegador. Y tenemos esta imagen. Genial, eso funciona, eso es lo que quiero en nuestro HTML. Adelante y agreguemos una imagen. Entonces no tenemos imagen aquí. Img fuente va a ser lo que sea esa URL y eso, todo, eso, todo va a ser pintura. Cuando vuelvo a mi página aquí, veo esta imagen. Y esta imagen realmente no responde hasta que la página se vuelve demasiado grande y luego se vuelve sensible. Eso no siempre es lo que queremos en realidad con diseño web responsive, la mayoría de las veces, lo que queremos es decir que esta imagen va a ser como el 50% del ancho todo el tiempo. Y eso significa que incluso ahora mismo, 50%, bueno, claramente no es 50, 50% por ciento estaría en algún lugar por aquí. Esto debería seguir encogiendo, pero no lo es, no se contrae hasta que realmente alcanza el ancho máximo de la ventana de visión. Incluso entonces, no reconoce realmente que se supone que son una frontera, no una frontera sino un relleno o margen alrededor del cuerpo del lado derecho ahí. Entonces las cosas se están poniendo un poco extravagantes aquí. Y podemos, podemos hacer que esto funcione mejor con una imagen receptiva. Entonces lo que podemos hacer es en lugar de cambiar nuestro cuerpo, podemos cambiar nuestro IMG. Y podemos darle a esto un ancho de, digamos, 100% y una altura de auto. Y eso sólo va a Auto calcular la altura para nosotros. Ahora no queríamos al 100%, queríamos al 50%. Y solo hagamos esta actualización más grande. Y se puede ver que esa imagen se hizo más pequeña y se queda en 50, 50% por ciento está justo en ese medio de esa X, creo. Entonces si vamos directo hacia abajo, podemos ver que eso es 50% y se va a quedar ahí sin importar el tamaño de las páginas, se va a quedar ahí. Y así eso es receptivo. Ahora lo que podemos hacer es que esto sea aún más receptivo. Y podemos decir, cuando la página tiene un ancho máximo de 640 píxeles, podemos hacerla 100% de ancho. Ahora, podría haberte perdido ahí. Entonces en la última lección hablamos sobre el desarrollo web responsive primero, mobile-first responsive. Mezclemos y emparejemos un poco estos. Entonces ahora hagamos medios de comunicación. Ancho máximo, 640 píxeles. Entonces se parece mucho a esto, pero exactamente lo contrario. Entonces la sintaxis es la misma, pero esto está diciendo de 640 en adelante. Esto está diciendo de 640 para abajo. Selecciona esa imagen y dale un ancho del 100%. Ahora porque sabemos cómo funciona CSS de arriba a abajo, podemos decir, seleccionar esa imagen, darle un ancho del 50%, darle un auto de altura, cerrar esa imagen. No tenemos que especificar altura auto aquí abajo porque todo lo que estamos haciendo es anular este ancho aquí. Eso es todo lo que estamos anulando va a heredar automáticamente altura de auto. Entonces se parece mucho a escribir. La altura es Auto. Pero nuestro navegador va a heredar eso de todos modos del código de la línea 13 aquí, así que no necesitamos escribir eso. Sigamos adelante y guardemos, refresquemos y miremos eso. Siempre que la página va Leer, la imagen obtiene ancho completo. Por lo que 505050, cincuenta cero cien por ciento, todo el camino hacia abajo. Y así ahora tenemos una imagen realmente receptiva. 6. Inscripciones responsivas: Bienvenido de nuevo. Hablemos de las incrustaciones receptivas. Entonces en este video, vamos a tomar un video, un iframe, y vamos a hacerlo sensible. Ahora aquí está la cosa, es cuando vamos a Youtube y hacemos clic en Compartir y obtenemos ese código de incrustación. Esto no responde por defecto. Y así si vuelvo a nuestra página y vamos a tirarla por debajo de nuestra imagen aquí, HR. Y peguemos eso. Vamos a ver que tiene un ancho, un código duro con una altura 5-6, codificada de 315. Y luego un montón de otra chatarra ahí dentro de la que realmente no necesitamos saber. El SRC es el principal aquí. Este es nuestro video de YouTube. Entonces sigamos adelante y actualicemos esta página y vayamos hacia abajo. Y tenemos este video. Ahora digamos que queremos que esto sea de ancho completo. Lo que podemos hacer eso diciendo ancho es igual a un 100%, pero entonces tenemos que descifrar un 100%. ¿Qué es esa altura? ¿ Cuál es esa relación de aspecto? Todo el tiempo tenemos que descifrar esa relación de aspecto sin parar. Y no podemos hacer eso. Pero lo que podemos hacer es escribir algunas matemáticas ingeniosas para hacerlo por nosotros. Y así voy a apretar esto para que podamos vernos a todos en una línea. Ahora mueve esto hacia arriba. Iframe va a ir por encima de la imagen y la HR va a ir por el iframe. Entonces sigamos adelante y minimicemos esos. Ahora lo que queremos hacer aquí, y esto es algo así como un truco de CSS, es que queremos envolver un contenedor alrededor de esto. Y así por lo general solo lo llamo contenedor y contenedor iframe, algo así. Y realmente solo necesitamos poder seleccionar este contenedor y seleccionar el iframe al mismo tiempo. Y entonces lo que queremos hacer aquí es que queríamos tomar este contenedor y queremos darle un pariente de posición y ocultar el desbordamiento. Aprendimos sobre posición relativa y ocultando desbordamiento y ancho, lo que vamos a estar usando a continuación, todo NCSS, uno-a-uno NCSS a O1. Por lo que ya deberías estar familiarizado con estos. Entonces sigamos adelante y agarramos este contenedor. Y digamos que la posición es relativa y el desbordamiento se va a ocultar de esta manera, simplemente no mostramos nada que esté fuera de esta caja. Vamos a darle a esto un ancho del 100%. Este va a ser todo el ancho de nuestro iframe. Entonces en lugar de decir, Hey, respeto a con el 560, eventualmente vamos a decir hacer de esto un ancho de un 100% de nuestra página. Ahora aquí es donde nos ponemos un poco complicados. Vamos a decir relleno, top es 50, nope, 56 punto 2-5 por ciento. Y esto se va a poner un poco raro. Y la razón por la que estamos haciendo esto es porque si decimos 16 por nueve, entonces si vamos 16 divididos por nueve, no, ese es al revés. Entonces si decimos 16 por nueve, se supone que son nueve divididos por 16, obtenemos 0.5625. O si multiplicamos esto por 100, obtenemos 56.25. Y así esto es sólo un poquito de matemáticas básicas ahí mismo. Entonces tomamos nueve divididos por 16, esa es nuestra relación de aspecto, o 16 por nueve. Y luego nos dio un decimal y luego dijimos veces por un 100 para darnos el número real. Este es nuestro porcentaje. Eso nos va a dar una parte superior acolchada del 56.25%. Ahora lo que queremos hacer es seleccionar este iframe, y no siempre tenemos acceso a este iframe. Entonces, no le demos una clase ni una identificación ni nada, pero digamos cualquier contenedor que tenga un I-Frame dentro de él. Podríamos decir posición absoluta, top 0, left 0, bottom 0, right 0. Y esto sólo lo va a estirar todo el camino a través. Esto, que también tiene relleno extra en la parte superior de la cabeza como un acolchado de 16 por nueve en la parte superior. Tan solo por buena medida, sigamos adelante y dale a esto un ancho del 100% y una altura del 100%. Técnicamente, esto no va a ser necesario, pero no hace daño tenerlo ahí dentro. Sigamos adelante y guardemos esta página y volvamos a Google. Y cuando nos refresquemos, no sólo el iframe va a estar encima, sino que va a ocupar todo el ancho de esta página. Entonces vamos a refrescarnos y averigüemos qué está haciendo aquí. Mira este enorme, enorme video. Y así podemos hacer que esto represente haciendo este hola, hola, hola, hola responsive, embed, responsive video de YouTube, que es realmente agradable. Entonces, en realidad lo que esto está haciendo aquí es crear algo así como una buena demostración. Por lo que hemos tenido un sitio de escritorio feo ahora mismo. Pero si nos desplazamos hacia abajo a la vista móvil donde el fondo se pone rojo, las cosas empiezan a hacer clic juntas y empieza a verse un poco más agradable. Y eso es exactamente lo que queríamos hacer. Queremos que nuestro diseño de sitio cambie, en su mayor parte con algunos bits y bobs aquí dentro. Queremos que estas cosas cambien en función del ancho de tu dispositivo. 7. Preguntas de múltiples medios: De acuerdo, echemos un vistazo a múltiples consultas de medios. Entonces sigamos adelante y creemos una nueva caja. Y sólo se va a llamar box y no vamos a hacer nada con él todavía. Y HTML interno, vamos a crear caja y aquí me da esta abreviatura m it, slam esa tecla tabulador y tenemos una caja. Entonces digamos que este ancho va a ser de 400 píxeles, la altura va a ser de 400 píxeles. Va a haber un borde diez pixel, margen negro sólido, margen, margen, margen 50 pixels y auto. Entonces es una línea que en el centro. Y vamos a cambiar el color de fondo, enorme cambio de color de fondo, el deporte, y eso es aburrido. Cambiemos el radio fronterizo. Y va a tener un radio fronterizo de nada por defecto. Entonces ahora lo que podemos hacer es que hemos escrito estas consultas de medios, una para anchura min, otra de ancho máximo. Podemos armar estos juntos. Podemos decir agregar medios. Digamos que un ancho máximo de cien, diez cientos píxeles y un min-ancho de, digamos 700 píxeles. Y luego podemos volver a seleccionar esa casilla. Y podemos cambiar ese radio fronterizo al 50%. Entonces esto va a convertir esa caja en un círculo cada vez que el ancho esté entre, no 100, pero hagamos 11000 píxeles y un min-width de 700. Por lo que entre setecientos diez píxeles, esto va a ser un círculo. Cada dos veces. Esto no va a tener ese radio fronterizo. Entonces va a parecer una plaza. Adelante y refresquemos, abran Chrome, refresquemos nuestra página. Y tenemos esta caja. Entonces hagámoslo. Entonces estamos en el 537 ahora mismo. Si subimos hasta 700 y simplemente desplazamos lentamente eso hasta 700, vamos a ver si, 700 cambios a un círculo. Y luego va a ir todo el camino hasta 1000. Y luego una vez que llegue a 1000 va a cambiar de 1000 a una plaza. Entonces esto es decir en cualquier momento que este ancho responsive aquí está entre 1700, que sea un círculo. Ahora de nuevo, este es un ejemplo feo, pero este es un ejemplo poderoso para mostrarte que puedes usar max-width y min-width juntos. 8. Haz un diseño de diseño de respuesta a la: De acuerdo, vamos a trabajar con algo real. Necesitamos crear algún tipo de diseño y hacerla sensible porque lo que hemos estado haciendo hasta ahora es divertido. Es genial, pero en realidad no es todo lo que aplicable en piezas individuales. Lo que queremos hacer ahora es crear algún tipo de diseño flexbox y básicamente cambiarlo para que, cuando se vea desde un teléfono, en realidad encaje bien. Entonces sigamos adelante y creemos un nuevo archivo. Llamemos a este flexbox dot HTML. Y lo cambiamos de una plantilla Django a una plantilla HTML. Y hagamos HTML colon cinco. Y nos da esto. Eso es exactamente lo que queremos. Y vamos a seguir adelante y crear algún tipo de diseño HTML aquí. Por lo que tenemos algún tipo de contenedor llamado nuestra cuadrícula o nuestro diseño de signos de número porque va a ser una identificación. Y digamos que aquí tenemos una identificación para navegación NAV. Otro ID para la barra lateral, Sidebar aquí, y otro ID para el contenido, contenido aquí. Ahora esto ahora se va a quedar como cualquier cosa en este momento porque no hemos aplicado ningún CSS. Vamos a seguir adelante y aplicar algo de CSS. Usemos flexbox. Alternativamente, en lugar de usar flexbox, también podría usar Grid. Voy a usar flexbox porque es un poco más popular en estos días. Pero la grilla también es realmente buena práctica. Entonces si buscas buenas, buenas prácticas, yo diría, oye, prueba esto con flexbox y después de este video, también pruébalo con grilla. Entonces sigamos adelante y seleccionemos este diseño. Y digamos que va a ser display flex. Y vamos a querer asegurarnos de que esto se envuelva. Y también hemos aprendido sobre flexbox y CSS 201. Entonces deberías estar algo familiarizado con esto, pero lo tomaré despacio y por si acaso no lo estás. Flex rap, vamos a decir envolver. Y lo que esto va a hacer es en lugar de hacer que todos estos de lado a lado, digamos, hey, cuando estos elementos sean demasiado anchos para la página, choquen hacia abajo en una nueva línea. Y así vamos por aquí, reutilizar esta pestaña Archivo, Abrir Archivo, Flexbox dot HTML, y no vemos nada útil. No obstante, estos son de lado a lado, lo que en realidad está haciendo algo útil. Es sólo que aún no estamos del todo ahí. Adelante y seleccionemos ese nav por su ID. Ahora, vamos a darle una base flex del 100%. Démosle una frontera a esto. Abajo. Sólido de un píxel, añadir un OCC, ver algo así. Eso podría no ser lo suficientemente oscuro. Aaa poco más oscuro. Y vamos a refrescarnos. De acuerdo, entonces la navegación está ahí arriba. Es que está bajando las cosas ahora porque como dijimos, base flex es un 100%. Hagamos esa barra lateral. Demos ese 20% de ancho. Entonces sigamos adelante y seleccionemos la barra lateral usando flexbox. Y nosotros de nuevo, no usamos ancho tu base flex de malas hierbas. Por lo que la base flex va a ser del 20% y la derecha de frontera va a ser sólido de un píxel. Hagamos que coincida con la navegación AAAA. Está bien, y eso se está juntando muy bien. Y entonces el contenido sólo va a ampliar el resto de la página. En realidad, no va a hacerlo por defecto. Pero podemos hacer que amplíe el resto. Entonces vamos a seguir adelante y seleccionar contenido y darle a eso una base flex de 100% menos 20%. Por lo que ocupa un 100% de la página, no un 100. Queremos 80% ahí dentro. Y sólo para que sepamos dónde estamos trabajando en cuanto a bordear un píxel, rojo sólido. Y me has visto hacer mucho ese píxel. Oh, vale, así que esto en realidad se encuentra con algo interesante. Esto lo chocó con nueva línea. De lo que nos olvidamos de hacer, y nos enteramos de esto y de CSS a U1 también fue seleccionemos todo. Y digamos que el tamaño de caja necesita ser border-box. Y esto sólo lo va a volver a poner ahí. Y así lo que eso hizo fue que dijera, oye, ahí está esta caja roja. Tiene un ancho de 80% más un píxel a ambos lados. Por esa frontera. ¿Qué border-box hizo? Caja-dimensionamiento border-box. Dijo, en realidad estás 80% incluyendo esa frontera. Entonces con el borde es del 80% y luego simplemente una especie de chocó ahí porque se trata de un diseño de precisión de píxeles. Es ahora es retocar un poco esto. Digamos que el cuerpo necesita serlo porque yo sólo quiero que esto se vea algo decente. El cuerpo necesita tener un relleno de 0, margen de 0. Y la navegación debe tener un relleno del 20%. Nope, nope, 20 pixeles, no 20%. Ahí vamos. Ve lo mismo con esa barra lateral y ve cómo se ve eso. ve bastante bien y ven lo mismo con el contenido. De acuerdo, entonces tenemos algún tipo de diseño ahí. Demos a esa barra lateral y al contenido un borde inferior. Por lo que barra lateral y contenido. Y todo lo que hice allí fue en VS Code, hice clic en un lugar y luego lo hice, hice Command click en otro. Yo creo en Windows. Es que haces click en un lugar y luego es alt click en otro lugar. Y podemos hacer frontera. Abajo. Sólido de un píxel AAA. Está bien, genial. Por lo que tenemos algún tipo de disposición aquí. Cuando hacemos que esto responda. Se va a, sí, no va a funcionar de la manera que esperamos que funcione. No está del todo ahí, se pone un poco raro y eso se espera completamente. Pero lo que podemos hacer decir en, digamos 640 píxeles, y podemos hacer que esa barra lateral abarque en realidad todo el ancho y baje este contenido solo un poquito. Y así podemos decir en Media, y sólo voy a subir eso. Por lo que puedes ver que en mi pantalla a media anchura máxima 640 píxeles, vamos a seleccionar esa barra lateral. Y vamos a darle una base flex del 100%. Y eliminemos esa tasa fronteriza. Tasa fronteriza va a ser 0. Y también agarremos esa sección de contenido que tiene una base flex actualmente del 80% y le demos una base flex de un 100 también. Entonces lo va a derribar. Y entonces qué podemos hacer aquí, porque este es básicamente el mismo código. Seleccionémoslos a ambos. Y vamos a hacer esto un poco más grande, refrescar. Y cuando hago esto un poco más pequeño, podemos ver que se desliza hacia abajo y se puede ver cómo se golpea ahí en su propia pequeña línea. Eso es realmente bonito, eso es el desarrollo web receptivo en pocas palabras. Ahora podríamos ir aún más lejos con esto. Vamos a seguir adelante y hacer esto sólo un poco más zoom. Ahora lo que podríamos hacer con esto es cuando lleguemos a, digamos que 480 es bueno y digo 480 píxeles, esto está llegando a ser algo de un tamaño de dispositivo más pequeño a 470 cinco es en realidad el vicio que usará ISIL, usará eso. Ocultemos la barra lateral. Por lo que ahora podemos crear otra consulta de medios a media max width 475 pixels. Tomemos sólo esa barra lateral y no mostremos ninguna. Escondámoslo por completo. Y así voy a refrescar la página donde lo para 80 en este momento. Y si fuera a dar click aquí y justo flecha abajo, flecha abajo, flecha abajo, flecha abajo, flecha abajo. Y se esconde. Se puede ver que estoy cambiando entre 476 y por 75, y se esconde Para mí, está haciendo exactamente lo que queríamos hacer. Ahora que mi amigo es el desarrollo web receptivo. En pocas palabras, eso es realmente todo lo que es, es cuando haces una página más pequeña o más grande, vas a ocultar algo y básicamente vas a hacer algo, ocupar más espacio, menos espacio, o esconderlo, o posiblemente mostrarlo si sólo se supone que aparece en el móvil. 9. Tu proyecto: Tu proyecto va a ser con flexbox o grid. Puedes usar cualquiera de ellos, cualquiera de los cuales estés más familiarizado. Lo que me gustaría que hicieras es una especie de despegar de esa última lección. Pero quiero que crees algún tipo de diseño de página. Usa flexbox o cuadrícula CSS, cualquiera que sea, de nuevo, estás más familiarizado con. Y luego asegúrate de tener una navegación. Tienes una barra lateral y tienes algo de contenido ahí dentro. Y luego cuando haces que tu página sea más pequeña en ancho cuando usas el desarrollo web responsive o ese toggle responsive en tu navegador. Este botón aquí, cuando usas esto y haces tu página más grande o más pequeña, quiero que realmente hagas esto para que me haga más grande. Entonces esto no toma un 20% sino un 100% y luego esconder algo. Básicamente, solo quiero que juegues con el desarrollo web receptivo, pero usar este diseño como ejemplo es un muy, muy buen ejemplo, muy buen uso del desarrollo web receptivo. Así que adelante y dale una oportunidad a esto y siéntete libre de referir aquí cualquier mi código. Puedes pausar este video en cualquier momento del tiempo y puedes echar un vistazo a lo que he escrito. Adelante y dale una oportunidad a eso. Diviértete un poco con él también, y no tiene que estar dispuesto exactamente de la misma manera que yo lo hice. Puedes colocarlo de la manera que te guste también. Diviértete con él, hazlo tuyo. Pero lo más importante, asegúrate de tener un poco de experiencia bajo tu cinturón antes de terminar este curso con consultas de medios. 10. Resumen: Hola, bienvenidos, y también felicitaciones por terminar este curso, CSS 301, diseño web responsive. Este fue un curso bastante pequeño. El grueso de CSS realmente es aprender, ya sabes, cosas como display none o border, ¿verdad? 0. Estas se denominan declaraciones. Todo lo que hicimos con el diseño web responsive es que dijimos, hey, agregamos este metaelemento ahí que le dice al navegador que esta va a ser una especie de página sensible con CSS. Y entonces dijimos, correcto, algún tipo de consultas mediáticas, alguna lógica condicional. Entonces cuando la página tiene un ancho máximo de 640, por lo que es 640 o menor. Aplica el estilo, o si es para 70 y menor, aplica este estilo. Eso es realmente todo lo que es. Y así eso es el diseño web receptivo en pocas palabras. Gracias por tomarse el tiempo para tomar este curso. Espero que lo hayan disfrutado. Espero que hayas aprendido algo nuevo. Espero que te hayas divertido un poco con el diseño web responsive. Es una cosa realmente, muy importante saber. No lo olvides, siempre puedes pedir ayuda en el grupo de aprendizaje a codificar Facebook. También puedes seguirme en Instagram en codificación para todo el mundo, o en Caleb Italian, o en Twitter en Caleb tell. O incluso puedes seguirme aquí en cuota de habilidad. Y solo puedes ir a mi perfil y dar click a seguir. Y luego puedes ver cada vez que tengo un nuevo curso y he estado produciendo muchos cursos últimamente. Por lo que ojalá obtendrás algún buen valor de eso, fuera de tu membresía premium de cuota de habilidad. Una vez más, gracias por tomar mi curso. Mi nombre es Caleb Colleen. Ha sido un placer enseñarte Diseño Web Responsivo. Espero verte otro de mis cursos, pero si no me gusta codificar y divertirme ahí fuera.