Amplía tu kit de herramientas de CSS con Flexbox

1. Introducción: Soy Jay Silverstein, instructor de boot camp de desarrollo Web y desarrollador front-end, y te estaré guiando a través de este curso sobre CSS Flex Box. Flex Box es uno de mis nuevos desarrollos favoritos de CSS, y las empresas realmente están empezando a profundizar en su potencial de flexibilidad y capacidad de respuesta. Este curso es perfecto para personas que ya conocen un poco de edad a montaña CSS y ya familiarizados con ellos algunos y están buscando expandirse. Osias cuenta con kit de herramientas. En el transcurso de estos, 16 videos pasarán por las herramientas que necesitamos para armar un proyecto, refrescar unos melones de dos años, isas básicas y luego terminar. Negocios con CSS Flex box también revisará algunas técnicas y conceptos de diseño responsive , y también un poco de front y play out. Decidir. Al final del curso, podrás diseñar y construir tu propio sitio web de una página usando CSS Flex box. Estoy muy emocionado de impartir este curso, y estoy emocionado de tenerte junto por lo correcto Una cosa que sí quiero señalar es que por la forma en que dice esto es a tiene un concepto es una cosa. No es posible que te enseñe todo al respecto en 16 videos, pesar de que solo estamos haciendo un subconjunto muy pequeño, así que para una especie de aliviar que lo que he hecho es que he armado un conjunto de materiales de recursos al que podrías referirte como vas a los videos. Estos incluirán cosas como todo el código que uso en los ejemplos cualquier enlace y artículo que creo que te resultarían útiles y cualquier ejercicio adicional que creo que deberías hacer para practicar tus habilidades. Esto se vinculará en la descripción de este de este curso, por lo que podrás seguir adelante y dar click en eso y seguir a lo largo de los materiales de recursos a medida que vas con videos. Sin más preámbulos, empecemos este viaje hacia Let's box mystery 2. Configuración y herramientas: una de las partes más importantes de cualquier desarrollador configurado ¿hay herramientas? Herramientas se refiere a las herramientas que utilizan cuando están trabajando en proyectos, y este curso estaré usando código V s. Hay otros editores de código por ahí, Adam y sublime o dos ejemplos, y puedes usar lo que sea cuando estés más cómodo con. No obstante, sí necesitas estar usando un editor de código. No se puede escribir código en Microsoft Word o páginas ni ninguna mascota o lo que sea. Si no tienes editor en absoluto, recomiendo Della Envious code at code visual studio dot com. Está disponible para Mac, Windows y Lennox, otra herramienta importante que los desarrolladores utilizan con frecuencia la línea de comandos o la terminal. Generalmente, cuando interactúas con tu computadora era, utilizas lo que se llama la interfaz gráfica de usuario, el bobo que te muestra dónde están tus carpetas, ¿Qué es los formatos. Tus archivos son y etcétera en contraposición a lo pegajoso, que te da una especie de capa visual sobre lo que está pasando debajo de la superficie de tu computadora. El terminal le permite interactuar directamente con el sistema de archivos de sus máquinas. Voy a pasar por cómo usar la línea de comandos en una máquina Maxwell A siguiente porque eso es lo que tengo. Te voy a dar Si estás en una máquina Windows, todavía puedes seguir adelante. Hay un par de comandos que son diferentes. Pero te diré qué. Esos son de antemano. Um, si no te sientes cómodo usando la terminal para navegar, preferiría simplemente usado finder o Windows Explorer, ¿Qué tienes Eso está totalmente bien. Simplemente encuentro que usar la terminal me ayuda a ser más productivo. Entonces eso es lo que voy a estar deprimiendo a lo largo del curso. Entonces lo primero que voy a dio en mi espalda no va a usar Spotlight, que es el espacio de mando para encontrar la terminal. Voy a escribir en terminal y abrirla para que puedas verlo me dice el nombre de mi computadora, que es Victoria encendida. Y luego tiene mi nombre de usuario. Lo primero que quiero hacer es que quiero revisar qué directorio soy y lo voy a hacer grabando el Commander P W. D. Esto significa directorio de trabajo de impresión, y me dice que conocí usuarios slash Jail son Eso es bastante guay. Pero y si quiero saber qué hay en este directorio. Puedo usar el comando. L s l s va a enumerar todos los todos de los subdirectorios y todos los archivos que están en este directorio en particular. Este es uno de los comandos que va a ser un poco diferente en una máquina Windows. Si estás en una máquina Windows, debes usar el comando. D I r va a verse un poco diferente. Te va a dar alguna información diferente. Eso está bien. Entonces aquí está mi lista de todo lo que hay en esta carpeta en particular. Voy a querer hacer una nueva carpeta llamada Flux Box. Aquí es donde voy a guardar todos los materiales para este curso. Para ello, todavía voy a hacer eso en la línea de comando y voy a usar el comando m k d I R. Eso significa make directory. Y luego le voy a dar el nombre del directorio que quiero hacer, que es caja de pisos. Voy a seguir adelante y pegarle entrar y me va a decir. De acuerdo, hice este directorio flex box, y si hago ls o de ir. Si vuelves a estar en una máquina Windows, puedes ver ese flex boxes. Ahora, aquí en mi lista de cosas que están en esta carpeta en particular, ella es bastante guay. Entonces lo que quiero hacer ahora es que voy a querer entrar en esa carpeta de flex box y empezar a hacer archivos para poder hacer cosas con ellos. Entonces lo que voy a hacer es que voy a dar dio el comando C d Eso significa directorio de cambio y luego le voy a dar el nombre de la carpeta que quiero cambiar a flex box. Y luego si lo hago, si reviso donde estoy otra vez usando PWD y veo que ahora soy usuarios slash jlr slash flex box. Enfriar. Si quisiera volver a subir un nivel y entrar en mi conteniendo fuller, escribiría c d dot dot y eso me llevaría un nivel de nuevo a mi carpeta de usuario. Um, dot dot dot significa el más completo por encima del actual. Si haces solo un punto que significa carpeta actual. Ya veremos esto de nuevo cuando hablemos de cómo enlazar archivos HTML y CSS um, por ahora, solo recuerda que los de punto punto significa punto atrás punto significa la carpeta actual. Entonces voy a volver a cd en flex box, y luego voy a querer hacer mi primer archivo. Voy a hacer un archivo llamado, uh, flex box que CSS en un Mac. El Mac o máquina Lennox. El comando para esto es toque. Y luego el nombre del archivo que quieres hacer toque, Uh, flex box que CSS. Y ahora, si vuelvo a hacer ls, podemos ver que ahora tengo el flex box que archivo CSS en mi en mi directorio usuarios de Windows. Lo que querrás hacer para hacer un archivo es tipo N u l mayor que y luego el nombre del archivo flex box. Eso sí. Esto se iba a romper si trato de ejecutarlo porque no lo hago No estoy ejecutando una máquina Windows, pero esto es lo que harías aquí mismo. Si quiero abrir esto y mirar todo estaba en este archivo, y en este directorio, podría simplemente escribir código, uh, uh, open dot y eso va a abrir eso en finder o windows Explorer o lo que tienes, lo cual es bastante guay. Lo último que quiero repasar en este video es que si has descargado abrigo V s, hay una cosa extra que puedes hacer que tu proceso sea mucho más suave. Entonces quiero que hagas es quiero que abras código V s. Quiero seguir adelante y escribir comando shift p para abrir la paleta de comandos y luego empezar escribir shell y luego ir a esta opción, que se instala comando de código en ruta. Deberías conseguir esta cosa que dice código de comando Shell instalado con éxito en el camino. Entonces si sales de tu terminal usando el comando Q y lo reinicias. Volvamos a CD en caja de flujo. Entonces puedo escribir código dot Y lo que eso va a hacer es que va a abrir la carpeta actual en el código V s , incluyendo todos los archivos que hay en esa carpeta, lo cual es bastante genial. La línea de comando consume un poco intimidante la primera vez que te enteraste de ello. Pero es una herramienta realmente poderosa que realmente puede ayudar a aumentar tu productividad como desarrollador. Y el recurso es que mencioné en el primer video. Hay un conjunto de ejercicios de línea de comandos para que hagas con el fin de practicar tus habilidades en la línea de comandos . Y, por supuesto, como mencioné, si no te sientes cómodo usando la línea de comandos, no tienes que hacerlo. Puedes seguir adelante y seguir usando el gráfico User Interface Finder o Windows Explorer, o lo que tienes para hacer todos los pasos requeridos para este proyecto. Yo sí, sin embargo, te pido que hagas esa carpeta de caja de pisos para que tengas algún lugar donde poner todos los materiales de tu curso. En este video. Hemos hablado de las herramientas de los usos de los desarrolladores. Un editor de código como V S Code Adam son sublimes, y los comandos de terminal, una vez que has hecho esa carpeta flex box y opcionalmente también has hecho los ejercicios de línea de comandos que tengo en los materiales de recursos. Pasemos al tercer video 3. Refresher y elementos Semantic en HTML en HTML: en este video, voy a repasar brevemente los conceptos básicos del HTML. Si no has trabajado con HTML antes, recomiendo realmente pasar algún tiempo aprendiendo sobre ello antes de continuar con el curso. Por otro lado, si ya estás familiarizado con HTML y conoces sobre HTML cinco elementos semánticos, puedes seguir adelante y saltarte este video. HTML significa lenguaje de marcado de hipertexto. Fue creado por Tim Berners Lee sobre en el CERN como una forma de compartir la investigación. HTML define la estructura de todo lo que se ve en la Web. CSS define el estilo, y JavaScript define la interactividad, y este curso estará hablando de cómo usar HTML para crear estructura para nuestros sitios y luego usar CSS para darle estilo. Cada página HTML tiene dos partes básicas. Una cabeza y un cuerpo. El encabezado de un documento HTML contiene información sobre el documento, el título que debe mostrar en la ficha y las hojas de estilo correspondientes. Cualquier información de CEO, etcétera. El cuerpo contiene el contenido que se mostrará en el navegador, por lo que tengo terminal abierta. Voy a crear una nueva dentro de mi soporte de caja de flujo. Voy a crear una nueva carpeta llamada Demo site Demo y luego dentro del sitio demo, voy a crear un nuevo archivo llamado index dot html indexado en HTML. Entonces lo abriré. Código envidioso usando mi comando code dot. Entonces voy a andamio fuera de estructura HTML básica. El primero que necesito es un tipo dock. Esto le dice al navegador qué tipo de documento es este en este caso es un documento HTML. Entonces necesito envolver todo dentro de una etiqueta HTML como esta para que veas que tengo la etiqueta de apertura aquí arriba y luego la etiqueta de cierre aquí abajo. Esto es lo que demuestra una etiqueta de cierre, Um, la rodaja después de la zanahoria, Entonces necesito elemento de ventaja, que también voy a incluir aquí ese título. Muy bien, Primero, ¿qué página entonces? También voy a necesitar un cuerpo. Y dentro de eso, voy a tener en cada uno que acaba de decir hola mundo, y esta es una página HTML muy sencilla. Las otras cosas que puedes hacer es, en lugar de tener que escribir todo esto tú mismo ves code, te vamos a andamiar si escribes html colon cinco y golpeas tab. Entonces tengo la etiqueta HTML. Tengo la etiqueta de cuerpo que tengo que etiqueta de cabeza voy a barrer con este título es el cual va a ser mi primera vista y luego en el cuerpo voy a tener en cada uno que diga hola, mundo. Voy a seguir adelante y abrir esto y cuervo escribiendo índice abierto que h dos boca. Ahí vamos. Tenemos algo que dice hola, mundo. Esto también me da acceso a las herramientas de desarrollo de Chrome. Si voy adelante y a la derecha, click y luego golpeo Inspeccionar, Puedes ver que tengo aquí abajo esta caja de herramientas que se abre y da y me muestra del html para lo que está mostrando en la página. También tiene algunas cosas con las sábanas de estilo en eso que van a meterse con nosotros en un poquito. Entonces esta es otra herramienta muy poderosa que los desarrolladores usan bastante. Probablemente estés familiarizado con mucho HTML. Los elementos están listos. Por ejemplo, P de Dube etiqueta a tags H ones 36 vanos gritaron aliados, etcétera, etcétera, etcétera. Lo que tal vez no sepas es que la más reciente spec html e introdujo un nuevo conjunto de elementos llamados HTML cinco elementos semánticos. Elementos semánticos incluyen cosas como Never main article, header, Footer Aside y otros. Los elementos semánticos no aparecen en la Web de ninguna manera diferente a los elementos DIV, pero son beneficiosos para cosas como Web crawlers, lectores de pantalla y S e O. Lo que hacen es describir qué es cada parte del documento y cómo lo hace se refiere a otras partes del documento. Es por ello que es beneficioso para el desarrollo Web moderno, y el recurso es, he incluido un enlace donde se puede leer más sobre cada tipo de elemento semántico. Una vez que hayas terminado de leer eso, puedes continuar con el siguiente video. 4. Revisión CSS y reset.css: por lo que he hecho algunas pequeñas modificaciones a nuestro sitio de demostración. Le he agregado alguna estructura, por lo que ahora tenemos un encabezado en un principal. El principal tiene algunos datos sobre la Tierra, que pensé que serían divertidos. Estamos saludando. Los líderes mundiales tendrán algunos datos sobre el mundo, uh, y thes e en un diff con una etiqueta P en ella, lo cual es bastante guay, pero hasta ahora parece bastante básico. No hemos hecho ninguno de nuestros propios estilos. Simplemente estamos confiando en el navegador para decidir cómo se ve. Lo que se podría notar, sin embargo, es que algunos elementos aparecen diferentes a otros, pesar de que no hemos escrito ningún estilo. Esto se debe a que cada navegador tiene sus propios estilos construidos a los que por defecto se ajustará en ausencia de estilos definidos por el usuario. Por ejemplo, Crom dice dijo esto cada uno debería ser más grande que este h tres, y que un tres debería ser más grande de lo que deberían estos impuestos P. También dice que debe haber un margen de ocho píxeles o algo así, y que cada uno de estos debe estar espaciado un poco para que se pueda ver a su alrededor . Queremos deshacernos de todo este estilo por defecto. Entonces vamos a estar usando algo llamado Reset CSS. Queremos deshacernos del estilo porque cada navegador trata con un poco diferente . Por lo que es bueno empezar con una pizarra en blanco para que podamos empezar de cero y no tener que preocuparnos de nada. Vamos a hacer esto usando algo llamado Reset CSS. Como su nombre indica, esto quitará cualquier estilo predeterminado y nos dará un lienzo en blanco con el que crear nuestro diseño web Art. Hay un par de versiones diferentes de Reset CSS. Vamos a estar usando el original de Eric Meyer. Se puede ir. Lo puedes encontrar en mi web dot com slash eric slash herramienta slash slash CSS slash reset. O simplemente puedes hacer lo que hago cada vez y Google se restablece. Aquí vamos. Uh, y aquí está. Entonces tenemos aquí y lo describe un poco, y luego tiene el contenido del restablecimiento CSS. Se puede ver que solo está restableciendo todo para ser cero y todos sus valores predeterminados. Lo que vamos a hacer es que vamos a tomar esto, vamos a copiarlo, y luego vamos a pegarlo en algo llamado Reset CSS. Ahora bien, aún no hemos hecho este archivo, pero lo que vamos a hacer es en terminal tenemos nuestro índice HTML y nuestra carpeta del sitio de demostración. Por el momento, vamos a hacer otra carpeta llamada Estilos ahí y luego también vamos a hacer una llamada activos Activos va a ser lo que contiene cualquier imagen que podamos incluir más adelante. No lo vamos a usar todavía, pero lo haremos. Entonces en, vamos a Así que ahora vamos a CD en estilos. Entonces vamos a hacer una nueva carpeta CSS reset, touch reset, evaluación nazi. Y también vamos a hacer un estilo de archivo CSS toque estilo que CSS cool. Esta actualización se mostrará en nuestro código en R. V s. Ya ves, tenemos estas cosas nuevas, así que vamos a entrar en estilos en reset CSS, y solo vamos a pegar todo el reset CSS ahí dentro. Guárdalo ahora. Todavía no hay ningún cambio en nuestro documento HTML. Esto se debe a que aún no hemos conectado el CSS con el HTML. Entonces en índice ella Mel, vamos a meternos dentro de la etiqueta de cabeza. Vamos a añadir una nueva línea que va a decir OK, incluye esta hoja de estilo. Vamos a decir que la ceja de enlace es estilo. El tipo de disparo es un CSS slash de texto y el ref de TI es la carpeta actual y luego la carpeta Estilos para luego restablecer ese CSS. Entonces lo que esto hace es que diga OK, vamos a incluir un enlace a otro documento. Ese documento va a ser una hoja de estilo de texto tipo, CSS. Y luego aquí está el camino hacia ella, Que es que los estilos, uh, uh, restablecen ese CSS. Entonces ahora si guardamos esto y refrescamos esto, puedes ver No, tenemos absolutamente ningún estilo por aquí, lo cual creo que es un plus. Por supuesto, esto se ve súper aburrido. Arreglemos eso. Voy a decir que tal vez deberíamos hacer un Chuan es grande otra vez. También deberíamos quizás espaciar un poco las cosas y añadir un poco de color también. Entonces lo que voy a hacer es ir adelante y enlazar mi estilo ese CSS Así que voy a decir Link Rale su hoja de estilo otra vez tipo es texto slash CSS y luego un borrador. Esta vez va a estar en estilos. Va a ser estilo que CSS cool. Entonces todo lo que me queda por hacer es seguir adelante y abrir mi hoja de estilo. Lo primero que voy a hacer ya que voy a tomar todo en la etiqueta del cuerpo y hacerlo Sand Saref porque prefiero mirar a Sand Saref sobre Sarah. Entonces voy a escribir una regla para eso. Primero viene mi selector. Después viene la propiedad, que va a ser divertida familia, y luego el valor. Que va a ser Sands. Sarah. Enfriar. Ahí vamos. Entonces quiero que alguna vez fui de cada uno a ser grande otra vez. Entonces voy a decir que cada uno debe ser divertido Tamaño 2 a.m. Y voy a decir que cada div debe tener un margen de cinco píxeles en todo el camino. Entonces eso va al espacio que fuera un poco más. También hagamos que los tres años de edad sean divertidos amorosos. Espera, Deberían ser tanto cool y terminamos. Esto aún no es muy bonito, pero se ve un poco mejor que antes. Um, pero hemos incluido el reseteo CSS. Entonces ahora tenemos un dedo del pie de lona en blanco trabajando si no te sientes cómodo con CSS. He incluido algunos enlaces en el material de recursos para que lo veas antes de continuar , ya que este curso está dirigido a personas que ya tienen un poco de familiaridad con CSS. Si todas las cosas que acabo de escribir te son totalmente ajenas, de verdad te recomiendo que mires por esas piernas antes de continuar. Hay un artículo en particular que me gustaría que todos los que están lavando esto leyeran que son las partes visibles de CSS de Mike Wreath Mueller. Recomiendo especialmente la parte sobre el modelo de formato visual, ya que eso va a ser relevante en un poco. En lo que va de nuestro sitio de demostración, hemos incluido Reset CSS. Hemos hecho un poco de pie, pero no tanto. Todavía no hemos presentado Flex Box, y eso haremos en el próximo video 5. Flexbox: un nuevo contexto: por lo que finalmente ha llegado el momento de presentar a la estrella de este espectáculo. Caja Flex CSS. Veamos qué ven esto los funcionarios, ya que tienen que decir ocasiones especiales sobre Flex Box. El módulo de caja flexible de tres CSS o flex box, es un modo de diseño, prevé la disposición de los elementos en una página tal que los elementos se comporten predeciblemente cuando el diseño de página debe acomodar diferentes tamaños de pantalla en diferentes dispositivos de visualización. El aspecto definitorio del layout flex es la capacidad de alterar sus elementos con y o bombo para que encajen mejor en el espacio disponible en cualquier dispositivo de visualización. ¿ A quién qué significa eso? Exploremos y averigüemos. Pero antes de que lo hagamos, necesitamos hablar del concepto de contexto y de su sitio web promedio de Internet. Los elementos se presentan en un contexto de bloque hacia arriba, su valor de visualización predeterminado es. Block da elementos de lista de Heather. En HTML. Cinco elementos semánticos son todos elementos bloqueados por defecto. Ser un elemento negro significa un par de cosas por defecto que ocupan todo el peso de su contenedor padre. Por defecto, adoptan la altura de su contenido y, si anidan, bloquean elementos dentro de elementos de bloque. crea un nuevo contexto de bloque que se comporta de manera similar cuando aplicamos Display. Flex a un elemento, sin embargo, estaban restableciendo el contexto. Terminamos con lo que se llama contexto flex. Los elementos dentro de un contexto flex se comportan de manera muy diferente a tus elementos de bloque ordinarios. Echemos un vistazo a un ejemplo, así que tengo Aquí están el mismo sitio de demostración. He añadido algunas dips adicionales con números. 123456789 Son solo dibs de caja de clase. Tienen un par de estilos ahí en este contenedor, llamados cajas que tiene una altura mínima de podría de 300 píxeles y con de 600 píxeles. Por lo que se están comportando como elementos de bloque normales. No obstante, sigamos adelante y aplicamos display flex a nuestro flex de display container parent. Ahora, cuando refresque la página, lo que vamos a ver es muy diferente a lo que vimos. Estábamos observando en el contexto negro. Cualquier elemento que tenga la propiedad display flex se convierte en lo que se llama un contenedor flex. Aquí es donde hemos creado un contexto flex. Esto es lo que tienen que decir las especificaciones W tres sobre esto. Cada hijo de flujo final de un contenedor flex se convierte en un elemento flex. Cada ejecución continua de texto que está directamente contenida dentro de un contenedor flex se envuelve en un elemento flex anónimo. Entonces pero significa sobre el elemento flex anónimo es que si solo lo tengo tengo tengo las cajas de clase de sección , Este es nuestro contenedor de pie. Tengo todas estas cajas da. Todos estos son lo que se llama elementos de flujo. Si solo tengo algún texto aleatorio de lado de esto, también se trata como un elemento flex. Eso es todo lo que eso significa. Por lo que cualquier elemento de nivel de bloque dentro de nuestro nuevo contexto flex se convierte en lo que se llama un elemento flex . Los elementos Flex son cajas de nivel flex, lo que significa que participan en el contexto de formato flex de sus padres. Entonces eso significa que simplemente se ponen, como se puede ver aquí. Dentro de cada elemento flex, sin embargo, el contexto es familiar, cualquiera que sea ese valor de visualización de elementos particulares es el que, por defecto suele ser bloque. Lo que eso significa es que si dentro de uno de estos días, voy a crear un par de otros dibs, eso está ansioso. ¿ Acaso clase igual a Box One? De acuerdo, hagamos un par más de estos bien, y a un cool y luego también sigamos adelante y diferente. Tratarlos un poco, así que tenemos un pedido de caja caja. Se puede ver que estos aire se tendieron de la manera normal que un elemento de bloque sería así . Si bien existe un elemento flex en un contexto de flick, su contenido aún existe en cualquier contexto que cree, que generalmente va a ser un contexto de bloque por defecto. También podemos realizar lo que me gusta llamar opción flex, que es anidar contextos flex dentro de otros contextos flex. Entonces vamos a hacer una demostración de esto rápidamente. Si yo fuera a tomar la caja de nuestro padre y decir que debería ser display flex, puede ver que ahora nuestros elementos hijos son ahora elementos flex. Este es un nuevo contexto flex. Se trata de elementos flex y se puede ver que hemos creado otro contexto flex y estos aire exhibiendo en este largo tipo de estiramiento vertical como los otros elementos de este flex en el contenedor flats. Ahora que hemos discutido cómo configurar un nuevo contexto para nuestros elementos, el contexto Flex pasará los próximos cinco videos discutiendo propiedades específicas que podemos aplicar a los contenedores flex y a los elementos flex. Como siempre, el código que hemos escrito en este video está en los materiales de recursos 6. EjE principal, Cross Axis: En el último video, mencionamos el concepto de contenedores flex y elementos flex en este video y los siguientes videos. Nos vamos a sumergir en lo que diferencia un contenedor flex para él de un elemento flex y qué propiedades específicas podemos aplicar a cada uno. Antes de hacerlo, Sin embargo, necesitamos hablar de los dos ejes que son específicos de los contextos flex. Cada contenedor flex tiene un eje principal y transversal. Es realmente importante que no pienses en estos ejes es X e Y o ejes horizontales y verticales o nada por el estilo. Ellos son el acceso principal y los ejes transversales. El acceso principal define qué elementos de dirección se colocan en la página por defecto. El eje principal inicia en el lado izquierdo de la página y va hacia la derecha. Los puntos de reunión se presentan horizontalmente uno al lado del otro. Esto es lo que sucede cuando aplicamos display flex a un elemento. Es elementos secundarios se alinean a lo largo del acceso principal sus propiedades podemos utilizar para cambiar la dirección del eje principal. Vamos a repasar estos en el siguiente video, pero por ahora, aquí hay una demo rápida. Por lo que podemos ver aquí que en esta pequeña caja tenemos un contenedor flex con tres cajas de artículos flex . También tenemos un pequeño indicador que nos muestra dónde inicia el acceso principal. Por lo que el exceso principal comienza por el lado izquierdo y luego todos los elementos se presentan en consecuencia. Ahora voy a ser poco común estas otras secciones que tienen play out similar. Se puede ver que tienen el mismo marcado HTML exacto. Simplemente tienen cambiada la dirección del acceso principal. Entonces echemos un vistazo a esto. Por lo que se puede ver cuándo comienza el acceso principal en la parte superior del contenedor. Se alinean los elementos de acuerdo a eso. En este caso, dado que el acceso principal está en la parte superior, los alios están dispuestos verticalmente. Aquí hay otro ejemplo donde el acceso principal comienza a la derecha y va hacia la izquierda . Se puede ver que el 1er 1 está ahora todo el camino hacia la derecha porque todavía se están alineando de acuerdo con el acceso principal. Y por último pero no menos importante, tenemos el exceso principal comenzando por la parte inferior. Y luego tenemos 123 subiendo. El acceso cruzado siempre es perpendicular al acceso principal por defecto. Simplemente arrancará en la parte superior donde la izquierda. Pero también podemos cambiar en qué dirección de la misma también. Vamos a ver cómo utilizar el acceso cruzado en nuestros diseños muy pronto. 7. Propiedades de Flex : flex: flex-wrap: En el último video, hablamos de los dos ejes que cada contenedor flex tiene el eje principal y el acceso cruzado . En este video, vamos a aprender a cambiar esos ejes para que podamos crear diferentes diseños en mi contenedor de rebaños, que es la sección Voy a agregar la dirección flex de propiedad y darle el valor Row flex fila de dirección de flexión. Esto no va a hacer nada porque Row es el valor predeterminado, sin embargo, si en lugar de decir fila de dirección flex digo columna Dirección de flujo se puede ver que este cambio es donde comienza el acceso principal, que es, como dije, dicho antes indicado por este pequeño punto rojo Esto es útil, sobre todo al diseñar un sitio que se va a utilizar tanto en escritorio como en móvil porque podemos cambiar en qué dirección son elementos se van a presentar sólo por cambiando un valor de propiedad, también podemos usar el valor. Por ejemplo, Ro reverse ro reverse inicia el eje flex en el lado derecho en lugar del izquierdo. Y como probablemente podrías adivinar, si dijéramos cuando es un reverso de columna, eso va a empezar por la parte inferior en lugar de por la parte superior. Esto hasta ahora es bastante liso, pero hay un problema con el que podríamos encontrarnos. Si tenemos un montón de elementos alineados uno al lado del otro y uno de ellos tiene que tener un conjunto con, van a desbordar el contenedor. Podemos arreglar este comportamiento agregando la propiedad flex rap rap. Entonces, antes que nada, vamos a romper esto primero antes de arreglarlo. Entonces vamos a cambiar esto de nuevo a la fila. Tengo un montón de otras cajas aquí dentro que me voy a una NCAA significaba, y luego veamos cómo se ve esto. Oh, no, este no es realmente el look que vamos a buscar. Creo que sería genial que todos estos, como, como, lo envolvieran debajo de la siguiente línea. Entonces eso es lo que vamos a hacer. Vamos a aplicar la propiedad flex rap flex wrap. Por lo que ahora éstos fluirán hacia abajo a la siguiente línea. Si fuera a añadir otra fila de cajas, esas también seguirían fluyendo hacia abajo. Veamos cómo se ve genial eso. Como puedes ver, siguen desbordando los límites de nuestro contenedor, pero eso es porque yo contenedor es demasiado pequeño. para sostenerlos a todos, y eso está bien. Enfriar. Entonces también puedo hacer esto con, um con una columna. Entonces si quiero tener columna Dirección de flujo y sé que esto es demasiado grande para sostener todos estos y forma de columna, así que va a conseguir 123 en la columna y luego así sucesivamente y así sucesivamente. También podemos revertir la dirección de thes mediante el uso del rap reverse. Por lo que ahora, en lugar de esto, cambia la dirección del acceso cruzado. Entonces si tuviéramos, por ejemplo, flex direction grow y flex wrap rep reverse, estamos empezando aquí abajo en la parte inferior en lugar de y en la parte inferior izquierda. Y así la parte superior izquierda. Entonces solo estamos cambiando donde empieza el acceso cruzado. Podemos combinar estas dos propiedades en una sola propiedad que se llama flex flow. Flex flow es algo así como el borde, la propiedad border o cualquiera de esas otras propiedades que puedes darle todo un montón de valores a todos a la vez. Eso sucedió teclear nombres de propiedad individuales, por lo que con flex flow, le das primero la dirección que quieres ir. Digamos que queremos que Theo vaya a la columna. Y luego quiera o no envolver eso, lo voy a vender para envolver así. Ahí vamos. Por lo que hemos hablado de flex direction flex wrap en flex flow y el siguiente video vamos a hablar sobre cómo alinear y justificar nuestros artículos a lo largo de cada eje. 8. Propiedades de Flex : align-items, justify-content: hemos hablado de cómo gestionar la dirección de los elementos flex usando flex direction flex envuelto en flex flow. A continuación, necesitamos hablar de cómo posicionar esos elementos en relación con sus contenedores padre. las propiedades de las que vamos a hablar en este video son de las que realmente me volaron la cabeza cuando estaba aprendiendo por primera vez Flex Box sí tomó mucho del trabajo gruñido de aprender CSS y simplemente hacer que todo sea mucho más fácil. Ah, así que me emociona compartirlas. También son un sueño para el diseño receptivo también. Hablar en un video posterior las propiedades. Para eso vamos a estar hablando de nuestros artículos de alinear y justificar contenido. Hacen cosas muy similares , por eso estamos hablando de ellas juntos. Justificar contenido trata de cómo se posicionan los elementos a lo largo del eje principal mientras que una línea ítems trata cómo sus posiciones a lo largo del acceso cruzado. Entonces echemos un vistazo a ambos y demostremos Um, así que primero veamos los diferentes valores para justificar contenido. Ah, voy a empezar diciendo que estas propiedades de aire que se aplican en contenedor ah flex así que voy a tomar mi contenedor flex, que es la sección, y voy a decir justificar contenido. Debería ser, uh empecemos con Flex Start. Una de las cosas bonitas del código Bs es que proporciona pequeñas pistas sobre lo que hacen cada una de las propiedades a medida que las escribes. Entonces como puedes ver, flex start empaca todos los elementos al frente del contenedor. Estos son los valores por defecto, y aún no vamos a ver ningún cambio. No obstante, si cambiamos esto desvía extremo, los elementos flex se van a empacar hacia el final de la línea porque se puede ver aquí, esto es diferente del rap reverse Cuando hicimos rep revertir el uno estaba todo el camino en el derecho. Como se puede ver aquí es simplemente empujar a los elementos para escribir en lugar de reordenarlos. Entonces está bien, entonces tenemos flex y también vamos a tener centro que, como podrían sospechar, centran los elementos. Y entonces tenemos, um también el valor por defecto, que es stretch eso. Los elementos se estiran a lo largo de la altura de la página, pero este es el valor predeterminado. Algo muy útil que puedes hacer con esto es que puedes hacer algo. Usted consiente sus elementos tanto horizontal como verticalmente. Lo cual requiere mucho trabajo para hacer si no estás usando flex box, sino con flex boxes. Súper simple. Por lo que decimos en línea centro de artículos y luego también decimos justificar centro de contenido. Y ahí vamos. Tenemos nuestros elementos justo en medio de nuestra caja. Si no estás haciendo esto con flex Box, tienes que hacer un par de cosas como, ligeramente hacky, y es muy frustrante. Entonces esa es una línea. Elementos en justificar contenido. Hay 1/3 de propiedad que pertenece a esta familia. Se llama contenido de línea que se aplica a contenedores flex que tienen más de una línea de contenido envuelta . Entonces déjame añadir un par de cajas más aquí. ¿ Están terminando? Sí. Deberían envolver. Entonces vamos a volver y decir, uh, uh, Flix flow pro rap. Enfriar. Entonces ahora están envolviendo. El valor predeterminado para esto es tenerlos estirados, pero podemos decir ah, line content flex start, y esto los empujará a todos hacia arriba hacia el inicio. Por supuesto, podemos pasar por el extremo flex y ver qué parece eso los empujará hacia abajo hasta el centro inferior los pondrá, por supuesto, en el medio. Y entonces también tenemos espacio alrededor, como se puede ver y espacio entre. No sé si el espacio se aplica uniformemente a éste o no. Ah, sí. Por lo que tenemos espacio alrededor del espacio uniformemente y espacio entre como se podía ver usando una línea ítems y justificar el contenido nos ayuda a resolver muchos problemas de diseño que de otra manera tendríamos que hacer mucho trabajo manual para poder resolver. Entonces eso es solo uno de los muchos beneficios de usar cajas flex. El poder de usar artículos en línea y justificar contenido es que dejas los elementos de lugar. Ahora que hemos hablado de esos dos y cómo se alinean los átomos en la página, a continuación llegamos a hablar de cómo crecer y ordenar artículos para que podamos controlar su tamaño y el orden en que aparecen 9. Propiedades de Flex : flex: flex-grow, flex-grow, orden: Ahora que sabemos poner los elementos donde los queremos. Hablemos de cómo ajustar su tamaño. Para ello, vamos a utilizar a propiedades espacios flex y flex grow. base Flex describe el tamaño base de un elemento flex a lo largo del eje principal. Tan bien, así que eso es un poco difícil de entender. Vamos a descomponerlo un poco. Entonces aquí tengo otra versión de mis cajas en su contenedor flex. Um, hay cinco cajas diferentes. Cada uno de ellos es un div dentro de una sección, por lo que puedo apuntar a todos ellos usando esto y luego dirigirlos individualmente usando las clases . Y luego aquí está mi sección. Tiene motas de exhibición en él. Por lo que es contenedor bi flex. Por lo que quiero que cada uno de estos dispositivos tenga 25 píxeles de ancho. Sí quiero señalar que estoy súper acercado a esta cosa en particular. Por lo que 25 pixeles no suele ser así de grande, pero quiero que cada uno de estos sea de 25 pixeles. ¿ Qué? Entonces mi respuesta predeterminada correcta va a ser decir, uh, qué, qué, 25 píxeles que parecen normales y razonables, ¿ verdad? De acuerdo, entonces cada uno de ellos es de 25 píxeles. ¿ Qué? Ahora digamos que quiero que estos sean realmente columnas. ¿ Verdad? Entonces quiero simplemente voltear estos para que el que esté en la parte superior y luego bajando 2345 sigo queriendo que se ocupen de todo con. Todavía quiero que sean dedo del pie hay que retener esos 25 píxeles que mencioné. Excepto porque quería ser una altura ahora en lugar de un qué? Entonces intentémoslo primero. Aplicando columna de dirección flex. De acuerdo, bueno, están alineados en la forma que yo quería que fueran, pero todos siguen teniendo 25 píxeles de ancho. No cambió porque ahora quiero que tengan 25 píxeles de alto en lugar de 25 píxeles de ancho. Entonces para arreglar algo como esto, en lugar de usar ancho o alto, vamos a usar una nueva propiedad llamada base flex. Base flex. base Flex describe la medición del elemento a lo largo del eje principal. Por lo que ahora estos aire de 25 píxeles de altura a lo largo del acceso principal que inicia en la parte superior hombre va hacia abajo. Si fuera a deshacerme de esta columna de dirección flex, los conseguiría 25 píxeles de ancho a lo largo del acceso principal, que va de izquierda a derecha. Entonces así funciona la base flex. Yo sí quiero señalar que la base flex, um, no es necesariamente un dicho de como, Oh, quiero que este sea exactamente este vino. Entonces si fuera a decir todo este div, toda esta sección es de 300 pixeles de vino. Pero si le digo a la base flex que sea de 300 píxeles, no va a hacer eso porque no quiere expandirse más allá del contenedor. Si quisiera que en realidad tuviera 300 pixeles de ancho, tendría que usar hombres. ¿ En qué con cuál se permite el mínimo con este elemento en particular? Entonces como puedes ver, establecer la base flex de un elemento no es lo mismo que configurarlo con. Todavía puede expandirse o encogerse, dependiendo de cuánto espacio esté disponible, la base simplemente le da una pauta sobre por dónde empezar. Ahora bien, si sí queremos hablar de expandir un elemento, vamos a utilizar la propiedad flex grow. Voy a deshacerme de este hombre con y volver a nuestra disposición normal de estos tipos. Y luego voy a aplicar una propiedad flex grow con el valor uno a todos juntos se puede ver lo que hace esto. Se saca el espacio extra que tenemos aquí. Sub lo divide en cuantas unidades tengamos por aquí y aplica una unidad del espacio extra a cada una, lo que tiene el efecto lifting resultante de espaciarlas uniformemente. Ahora hemos aplicado Flex crecer un dedo del pie los cinco de estos elementos, lo que significa que estamos tomando el espacio extra y sub dividiéndolo en cinco partes y eso aplicando una parte a cada uno de esos cinco elementos. Pero si fuera a quitarme eso para que volvieran a verse así y luego aplicar Flex, crezca uno a solo un elemento. Nuestra primera caja que va a ocupar todo el espacio adicional que queda porque sólo hay un elemento al que tenemos que aplicarlo. Ahora bien, si iba a ir a aplicar Flex, crecer uno a mi segundo cuadro, se puede ver que los espacios restantes ahora tienen entre ellos también puedo usar diferentes números para aplicar diferentes cantidades de crecimiento a cada ítem. Entonces si voy a decir flex, crece uno en la primera caja y los gestos crecen a en la segunda caja, eso va a quedar así. Entonces lo que estamos haciendo es tomar ese espacio extra que estaba disponible por aquí. Estamos sumando todos los números de crecimiento flex que están en ese particular o que están en este contenedor de flujo, por lo que tenemos tres. Entonces es dividir ese espacio extra en tres, y luego esas piezas de espacio extra. Es repartirlos a cada una de las subcajas en el número que están flex crecen. El número es así que esta obtiene una pieza de espacio extra en esta obtiene dos piezas de espacio extra . Flex Grow es uno de los conceptos más difíciles de entender en Flex box. Si sientes que te vendría bien un poco más de ayuda para entenderlo, he vinculado un artículo en los materiales de recursos al que puedes ir echar un vistazo que tiene algunas ilustraciones detalladas y algunas explicaciones de todas las matemáticas que se involucran ya que el navegador está haciendo sus cálculos. El siguiente inmueble con el que tenemos que hablar es de hablar es de la propiedad de orden. El inmueble de orden nos permite reorganizar nuestros artículos flex sin cambiar el código fuente. Esto es útil, por ejemplo, para S C O. Permite que el contenido importante aparezca primero en el código fuente aunque no aparezca primero en la página. Utilizar la propiedad de orden. Todo lo que tenemos que hacer es decir es aplicar orden y luego darle un número. Voy a decir orden 54 Caja uno. Entonces cuando actualice la página, cuadro uno estará al final. Si fuera a decir caja a debería tener, vamos a dar en realidad, casilla cuatro debería tener orden cuatro. Va a aparecer junto a la casilla Uno ahora. Por lo que ahora nuestro pedido es 235 para uno. De acuerdo con la propiedad de orden que hemos dado aquí, esto es bastante guay. También es muy útil para tratar con un CEO y diseño responsive porque nos da la flexibilidad para reorganizar nuestros elementos sin tener que cambiar el marcado HTML de nuestra página . Ahora que hemos hablado de dimensionar con la propiedad flex grow y la propiedad flex basis , y ordenar nuestros elementos con la propiedad order. Es hora de terminar y conseguir algo más de práctica antes de sumergirnos en la creación realmente sitios usando libros flex. 10. Flexbox Froggy: hemos hablado de dirección, alineación envuelta, justificación, tamaño y orden. Pero siempre hay más que aprender más para practicar. Si de verdad quieres practicar tus flex bucks, realmente recomiendo el sitio. Flex Box Froggy You Confinated Effect Flex box para él dot com Básicamente lo que es, es una práctica interactiva con flex box. Tienes esta rana que necesitas para llegar a la almohadilla de lirios y solo aplicas la propiedad de pisos correcta para que termine. Y este nivel queremos utilizar el justificado contenido propiedad contenidos para enviar el fraude todo el camino hasta el final del contenedor. Flex, realmente recomiendo jugar a través de esto. Yo jugaba a través de esto todo el tiempo. Si solo quiero refrescar mis habilidades. Jugué a través de esto mientras estaba juntando este curso para asegurarme de que no me olvidaba nada. Entonces y así sucesivamente también hay otra cosa que me gustaría mostrarles. Por suerte para mí, Flex box Robbie tiene un nivel dedicado a ese pensamiento en particular lo vendió. Dejemos justo aquí es la propiedad alineada auto. Un auto de línea te permite tomar un elemento flex particular y alinearlo de manera diferente a los demás elementos de la página. Entonces ya sabes, ¿cómo están las líneas de pedido? Las propiedades son cosas como, um Flex, start flex, end center Así sucesivamente y así sucesivamente, solos a través del acceso. Bueno, si queremos, tenemos un ítem que queremos poner al principio o al final de una página separada de sus otros elementos circundantes. Aplicamos la propiedad, alineamos auto a ese elemento flex en particular. Entonces vamos a decir, aliado en auto centro, y se puede ver que tenemos a esta rana de clase. amarillo ahora está en el centro mientras que todas las otras ranas siguen alineadas en la parte superior y en realidad nos hubiéramos movido hasta el flex. Y y ahí vamos. Por lo que a mí respecta, donde has tocado todas las propiedades flex y sabemos aplicarlas a diferentes elementos ahora podemos empezar a seguir adelante y crear algunos diseños usando flex box 11. El Santo diseño de la griega: y este video, vamos a tomar una descripción de layup. Lo vamos a resolver con Flex box, y luego vamos a hablar a través de la vida. Resolverlo con pantanos flex es la mejor y más eficiente opción que la disposición estará resolviendo se llama el layout del Santo Grial. Ya lo has visto antes, alrededor de mil 000.000.000 de veces. Se ve así para ponerlo en palabras. El diseño del Santo Grial tiene un centro fluido, lo que significa que la columna central cambia con a medida que el navegador cambia con y fija con barras laterales. Todos esos son de la misma altura. La columna central aparece primero en el H dos. Mel, cualquier columna puede tener más contenido. Tiene una altura fija, cabecera y pie de página que abarcaba el ancho de la página. Cuenta con un pie de página que llega al menos al fondo de la ventana del navegador. No importa la altura del contenido sin usar un posicionamiento absoluto o fijo, solo requiere un elemento extra, y utiliza la menor cantidad de CSS posible. Ahora esta descripción se toma de un artículo en una lista aparte titulado Diseño del Santo Grial. Yo lo he vinculado, y los materiales de recursos estarán funcionando a partir de este HTML. Simplemente se ve así. Hemos tenido nuestro elemento de elemento principal en el artículo dos lados y un pie de página Eso es todo. Estaremos usando flex box para convertir esto en algo que se parece a la imagen que te mostré antes. Por lo que he creado estilos basados que sólo nos da algo de color. Tenemos la estructura de nuestras H dos bocas configuradas aquí en nuestro documento. Empecemos a escribir algo de CSS. A mí me parece que un buen lugar para empezar sería hacer todo el cuerpo de contenedor flex eso vamos a dio display debería tener display flex Looks cool. De acuerdo, entonces ahora tenemos esta maravillosa cosa del flex pasando. Déjame echar un vistazo a esto. Como puedes ver, queremos que el cuerpo sea la altura completa de la ventana del navegador. Um, pero en este momento solo es qué, 348 píxeles de altura. Lo que vamos a hacer es que vamos a tomar esa altura, y vamos a decir que la altura de los hombres del cuerpo debe ser de 100 V h v h significa altura de puerto Vieux. Um, y lo que eso va a hacer es que le va a decir a nuestro contenedor de cuerpo que va a ser tener ser el 100% de la altura de la ventana del navegador. Entonces también necesitamos cambiar la dirección del flex porque queremos que el encabezado esté en la parte superior en el pie de página para que esté en la parte inferior. Um, así que vamos a decir columna de dirección flex, que nos va a dejar una especie de vuelta por donde empezamos. Pero sabemos que ahora están pasando muchas cosas diferentes bajo el capó aquí. De acuerdo, entonces ahora que tenemos esa configuración, voy a seguir adelante y abordar esta descripción del encabezado y del pie de página como tener una altura establecida igual. Entonces vamos a decir encabezado y pie de página, pie ella ambos van a tener, uh, flex property flex base de 150 píxeles, por lo que eso les dará su altura igual. Por lo que tengo este contenedor flex. Se gasta toda la altura de la ventana del navegador, pero tengo todo este espacio extra al final. Yo quiero tomar todo este espacio extra y dárselo a mi elemento principal. Entonces voy a decir que Maine va a tener un flex grow Propiedad de uno. Ahí vamos. Entonces ahora esto se está acercando a cómo era nuestra descripción. Tenemos el encabezado en la parte superior. Tenemos el pie o todo el camino al fondo. A pesar de que no hay contenido aquí todavía. También queremos que nuestro contenedor principal sea un contenedor de flujo. Entonces vamos a decir, uh, uh, Display Flex aquí también. Impresionante. Ahora todo lo que queda por hacer es cambiar el tamaño de estas barras laterales. Por lo que las patillas son ambos elementos laterales, y van a tener una base flex de 200 píxeles, por lo que eso les da un tamaño igual. Y entonces nuestra etiqueta de artículo va a tener todo este espacio restante por aquí. Entonces vamos a decir Flex, crecer uno para esa etiqueta de artículo, y luego sólo tenemos que pedirlo. El bar lateral izquierdo tiene una clase de izquierda, así que vamos a decir orden cero. El artículo tiene que tener orden uno, y entonces nuestra barra lateral derecha tiene que tener orden tres. Y ahí vamos. Hemos hecho esta capa. Fue súper rápido y fácil con flex box. Solo quiero mostrarte brevemente un pequeño fragmento de código de cómo se ve la solución sin flex box. Esto es extremadamente feo. Si alguna vez tienes un margen negativo que sea así de grande, has hecho algo mal, y probablemente deberías repensar lo que sea que estés haciendo con tu CSS. Por lo que hemos resuelto este problema de layup usando flex box, y hemos explorado un poco y cajas flex, la elección correcta para este tipo de cosas. Pero todavía hay algunos defectos y nuestra solución. Por ejemplo, si seguimos adelante y echamos un vistazo a cómo se ve esto, si hacemos la pantalla más pequeña, por ejemplo, si es un dispositivo móvil, empieza a parecer un poco funky. Cuando hacemos la pantalla lo suficientemente pequeña, aún no responde. Vamos a pasar el próximo par de videos hablando de diseño responsive, qué es y cómo podemos usar flex box para hacer que nuestros diseños respondan. 12. Diseño adaptable: Entonces nuestro diseño del Santo Grial que hemos construido usando cajas flex bastante cool, pero todavía tiene algunos defectos. Como mencioné, no es muy sensible. Antes de seguir adelante y hacer un responsive, vamos a hablar un poco de lo que es el diseño receptivo y lo que significa. El término diseño responsive fue acuñado por Ethan Marcotte en 2010. Esto es lo que tiene que decir al respecto. diseño Web Responsive es el enfoque que sugiere que el diseño y el desarrollo deben responder al comportamiento y entorno de los usuarios en función del tamaño de la pantalla, la plataforma y la orientación. Ahora, diseñando de esta manera con on yo a lo que el usuario necesita en el momento particular, es algo que es específico a las pantallas, ¿no? Si estás diseñando para la impresión, no puedes hacer que las cosas respondan. Diseñar para pantallas es intrínsecamente diferente de diseñar para impresión. Por este concepto que Frank Camaro llama flujo. flujo es el concepto de que, uh, la pantalla es mutable. Puede cambiar con el tiempo. Um, mi buen ejemplo de esto es un documento Excel. Se pueden reorganizar las columnas, se puede reorganizar la rosa así sucesivamente y así sucesivamente, mientras que con una mesa impresa, no se pueden originalmente las personas que estaban diseñando para Web eran diseñadores de impresión. Es por ello que muchos de los primeros diseños Web en los noventa y a principios de los dos miles se ven mucho muy boxy. No se redimensionan bien. Están construidos usando mesa así sucesivamente y así sucesivamente porque los diseñadores estaban acostumbrados a diseñar para impresión, por lo que llevaban el mismo tipo de conjunto de herramientas que estaban trabajando en él. Pero tan pronto como la gente viendo comenzó a ver la Web en diferentes tamaños de pantalla, así que tan pronto como empezó a haber diferentes tamaños de monitores, tan pronto como la gente empezó a mirar las cosas en sus teléfonos, etcétera, etcétera, se hizo bastante obvio con bastante rapidez que la forma en que pensamos en diseñar para pantalla necesitaba cambiar. Aquí te dejamos una definición de una página Web a partir de un artículo titulado The Web's Grain de Frank Camaro . Ah, página web es una superficie naturalista de porciones desconocidas compuestas por pequeños elementos invariables individuales desde múltiples ventajosas se ensambla en un agujero legible. Ahora hay un par de cosas aquí que quiero desempacar individualmente. El 1er 1 es este concepto de Edgell es ISS. Si miras Si piensas en una página Web y piensas en qué forma tus páginas Web, la respuesta inicial correcta es pensarla como un rectángulo porque la ventana del navegador es rectangular. Pero en realidad es más como una superficie infinita que conecta el gasto potencialmente, infinitamente en cualquier dirección. Correcto, Debido a que eres capaz de desplazarse, eres capaz de desplazarse en diferentes direcciones. Incluso podría haber elementos de interactividad. Si se culpa al sitio web, música, o si es capaz de responder a tu entorno, yo diría que eso es parte de qué forma es. Entonces ese es un elemento de esta definición. Otro elemento es este concepto de remontaje, o de elementos que se pueden mover y volver a ensamblar para crear diferentes versiones del mismo agujero. Te voy a mostrar una gráfica para ayudarte a darle sentido a esto. A la izquierda. Aquí tenemos una imagen de la Mona Lisa. Podemos pensar en la Mona Lisa como diseñando para imprimir esa estática. No cambia a la derecha. Tenemos lo que se llama carpintero por David Hockney. Ahora, esto es mucho más parecido a diseñar para Web. Se puede ver que tenemos todos estos pequeños elementos individuales. Hay mucho movimiento en esta pieza en particular. Podemos imaginar que si sacáramos algunas de estas fotografías y las reorganizáramos en un orden ligeramente diferente, seguiríamos obteniendo el mismo contexto del todo. Esto se parece mucho a, ya sabes, pensar fuera de tus páginas Web que estás diseñando. Se pueden pensar en ellos como piezas pequeñas, individuales de un agujero más grande que se pueden reorganizar según sea necesario. Entonces echemos un vistazo a esa definición de nuevo en la lista de bordes, superficie de proporciones desconocidas. Entonces hablamos de la forma de un sitio y de cómo no sabemos lo grande que es hasta revisarlo . Compuesta por pequeñoselementos invariables individuales, elementos invariables individuales, se trata de cuotas y vanos y así sucesivamente ensamblados en un agujero legible. Ahora bien, administrar este tipo de reensamblado es lo que estamos haciendo cuando hacemos diseño responsive, porque no debemos pensar en el diseño responsive como administrar los puntos de ruptura de un sitio o de administrar donde empieza a parecer raro. Donde el diseño empieza a romperse así sucesivamente y así sucesivamente debemos pensar en ello en términos de remontaje. Estamos tomando los mismos elementos que ya tenemos y reensamblándolos en un todo diferente , legible. , El trabajo de un diseñador o desarrollador. Esto para estructurar página que en cualquier momento dado, sin importar el tamaño de la pantalla o el dispositivo del usuario, el usuario está viendo la información que más necesitan. Una de las cosas hermosas de las cajas flex que hace que sea mucho más fácil de manejar el remontaje como veremos en el siguiente video. Pero quiero dejarte con un último pensamiento. El diseño responsive no se trata solo de asegurarse de que el sitio se vea bien en todos los tamaños. También se trata de anticipar las necesidades individuales del usuario. Estamos hablando mayormente en el contexto del diseño visual, pero esto extiende las cosas de Teoh como cómo el contenido del sitio está estructurado como debería. La información importante debe estar más cerca, la parte superior en un dispositivo móvil porque es más un dolor desplazarse hacia abajo. Debe ser lo fácil que es el sitio de leer también en el lector de pantalla. Esa es otra parte del diseño responsive. Entonces y así sucesivamente, los diseñadores apenas se acercan a un problema con a través de una lente creativa con el fin de encontrar una solución hermosa. Si este tema te interesa, como lo es. Para mí, diseño responsive es definitivamente una de mis cosas favoritas de las que hablar. De verdad recomiendo a artículos de Frank Camaro. El primero se titula Lo que quieren las pantallas y el en segundo se titula El grano de la Web que he vinculado a ambos en los materiales de recursos. 13. Implementación de diseño responsivo: consultas de medios: por lo que hemos discutido la teoría detrás del diseño responsive. Ahora hablemos de cómo implementarlo realmente en nuestro sitio usando algo llamado consultas de medios . Las consultas de medios son lo que nos permite hacer que nuestros sitios web se adapten al ingenio de pantalla variable. Aquí está la sintaxis para consulta inmediata que se aplica a pantallas con un ancho de 10 25 píxeles. Tiene sentido cuando lo lees en voz alta a Hey, media, donde la pantalla mide más de 10 25 píxeles. Se puede ajustar el tamaño adecuado de las consultas de medios basadas sin especificar que, por lo tanto, la pantalla. Pero por lo general es bueno ser lo más específico posible. También puedes especificar el significado de impresión cuando alguien va a imprimir tu página y habla para lectores de pantalla con el fin de que las consultas de medios funcionen en tu página, tienes que incluir algo que se llama la etiqueta meta Vieux Port. Es decir, éste de aquí. Esto es algo que vas a estar buscando mucho en Google. Te recomiendo que acabes de reservar mercado. He incluido un enlace con más sobre lo que es el ataque de meta mirador en los materiales de recursos . Entonces en este momento tenemos este diseño del Santo Grial que empieza a parecer raro cuando la pantalla se pone lo suficientemente pequeña. Entonces vamos a agregarle una consulta de medios. Entonces lo primero que voy a hacer es que voy a decir, um que quiero que esto sea una consulta de medios. Cuatro tamaños de teléfono, el tamaño del teléfono con el que suelo empezar comienza en 7 68 píxeles. Entonces voy a decir en media screen, y vamos a decir que esto debería aplicarse a pantallas que tengan menos de 768 píxeles de ancho. Entonces vamos a decir que Max con tiene que ser 7 68 p x y luego tenemos nuestra consulta de medios. Podemos empezar a leer algunas reglas aquí. Creo que el 1er 1 que vamos a abordar es esta área principal aquí en el centro porque queríamos alinearnos como columnas en lugar de su a fila, voy a tener el tamaño de pantalla más pequeño. Entonces lo que vamos a hacer es que vamos a decir principal debe ser dirección flex. Llámalo guay. Ahora, cuando refresco la página y redimensiono esto una vez que llega al tamaño se cambia a ser la dirección de la columna. Esto es tan bonito. Me encanta flex box específicamente, al igual que hacer cosas como esta sin tener que preocuparme por ningún flotador o como dónde se colocan los elementos en la página. Pero yo sólo podría decir gestos dirección calma y se ciñe automáticamente. A mí me encanta tanto. De acuerdo, lo siguiente en lo que necesitamos trabajar son las órdenes de que el contrato viene primero, y luego la barra lateral izquierda en la barra lateral derecha. Eso también es bastante sencillo. Todo lo que tenemos que hacer es decir, uh, que la izquierda debe ser la frontera uno, uh, derecha consigue sus consigue para quedarse. Pide tres como es ahora mismo, y vamos a decir que Maine debería ser orden cero y eso es todo. Eso es todo lo que teníamos que hacer. A mí me encanta. Entonces, ¿qué consultas de medios debes incluir en un proyecto? Realmente depende de cuáles sean sus necesidades de proyecto. No tiene sentido intentar escribir una consulta de medios para cada uno de los sitios de dispositivos, porque literalmente hay cientos de tamaños diferentes de dispositivos por ahí. Mi consejo es comenzar a diseñar para móviles y luego poner todos sus estilos de escritorio dentro de una consulta de medios de escritorio como generalmente una buena idea para comenzar con el móvil porque el diseño es más fácil como un proceso aditivo que como uno restado. Significa que debes comenzar con la versión más básica de tu sitio, que usualmente será la móvil. Estamos muy cerca de poder hacer el proyecto. Y el siguiente video. Voy a repasar algunas técnicas comunes de diseño y tendencias de diseño para ayudarte a diseñar tu proyecto. 14. Diseño 101: hasta ahora, hemos aprendido a armar una página juntos. De lo que no hemos hablado es de qué poner en la página y cómo se ve cuando lo pones ahí. Eso es, Ah, todo el tema para todo un video de otro Siri así que no voy a cubrir todo el diseño de sitios en este video. Pero voy a repasar algunos conceptos básicos que te ayudarán ya que estás trabajando en tu proyecto. Lo primero es considerar la legibilidad de tu sitio. Un error que noté que hacen muchos nuevos diseñadores es que hacen el texto de ancho completo o realmente, por qué, ah, buena regla de pulgar es tratar de mantener tu texto una especie de er's estrechos y como bloques. Hay una longitud, y voy a poner en los materiales de recursos que tiene un juego que puedes jugar que te ayudará a averiguar la relación correcta de altura de línea, también. Uh, párrafo longitud a párrafo con una gran tendencia y diseño Web ahora mismo es tener algo que se llama sección héroe, que es una sección grande en la parte superior de la página que incluye una imagen y algún texto grande . He comisariado algunas selecciones de anuncios que he visto en el metro, y quiero que se den cuenta de lo vibrantes que son todas estas imágenes y de lo que la atención consiguiendo que son. También echa un vistazo a la tipografía. tipografía es uno de esos detalles que no parece súper importante, pero cuando es realmente bueno, es una de esas cosas que no debes notar en absoluto. Otra cosa que muchos de estos lados demuestran es realmente buen sentido del ritmo mientras te desplazas por la página, algo que hacen muchos sitios es que tendrán secciones distintas separadas. A lo mejor les gustaría una imagen y una imagen, o son varias imágenes llamativas. Este tiene un montón de productos. Este tiene algunos llamados a la acción llamados La acción es un área que tiene, como un poco blurb. Y luego en algún lugar se puede hacer clic para tomar acciones que o bien te venderá el producto o algo así. También verás con frecuencia algo como esto. Este diseño de tres columnas, con ya sea tres productos diferentes o tres pasos que puedes dar o alguna información sobre un producto en particular. Hacer correcto el ritmo de una página lleva mucho tiempo en la práctica. Si es si no te sientes bien con el ritmo de tus 1er 2 sitios. Eso está bien. Eso en realidad significa que estás en un buen lugar, que es que tu gusto va por delante de donde están tus habilidades. Ese es realmente buen lugar para estar, porque siempre puedes mejorar tus habilidades. Todo esto está construyendo sobre una base realmente sólida de buen color y buena tipografía. Escoger colores y tipografías son ambos cursos propios. Pero sí quiero señalar un par de recurso es que no podías visitar para ayudarte a aprender sobre ambas cosas. Este sitio que Ammón en este momento se llama Reclamación de color. Es por dos sesgos Van Schneider. Diseñó Spotify, y tiene el sitio que tiene un montón de emparejamientos de color realmente buenos. Voy a este sitio cada vez que necesito tomar los colores para un nuevo proyecto y luego otro sitio que lo encontrarías a mano si estás mirando bien. La tipografía es el sitio tipo lobo. Este sitio solo tiene muchos ejemplos de sitios con buena tipografía. Mirar ejemplos es una de las mejores maneras en que el dedo del pie aprende a hacer este tipo de cosas. Y, por supuesto, las fuentes de Google siempre son un gran recurso. Como siempre, he puesto enlaces a un montón de estos sitios en los materiales de recursos. En el siguiente video, voy a demostrar cómo construiría un proyecto como el que vas a construir. 15. Demonstration completa de la construcción: finalmente es tiempo de proyecto. Qué emocionante pero lo voy a estar haciendo en este video es que voy a estar haciendo una demostración de un proyecto como el que vas a estar haciendo para este curso. Entonces lo que voy a hacer es que voy a decidir en una página web que quiero construir. Yo lo voy a diseñar. Voy a enmarcarlo con alambre. Yo voy a y luego lo voy a construir con H dos montaña CSS. El sitio que voy a construir va a ser, creo que una nave espacial. Um y te voy a mostrar mi proceso de creación con todas las cosas que hago para preparar sitio. Y puedes tomar lo que hago y adaptarlo a tus propias necesidades a medida que construyes tu proyecto. Como mencioné antes, realmente prefiero sacar a mis amigos de alambre. No se distraen por características de diversos programas de temer alambre, empezando por mi área de héroes. Voy a tener texto grande en un pequeño trabajo con botón que llamó Área de acción que tiene texto en un blurb, luego una sección que tiene tres columnas con una imagen de título y una pequeña descripción debajo cada imagen para cada una de esas, luego un área que lo tiene va a tener una imagen a la izquierda y luego algún texto a la derecha , seguido de otro párrafo corto y luego por último pero no menos importante, un pie de página con tres columnas a texto y una imagen. Otra cosa esto se ve bastante bien Hasta ahora, otra cosa que me gusta hacer es que me gusta romper esto y cuántas secciones van a tener Así que uno, 23 para cinco y luego duran pero no menos importante, ese pie de página es nuestro sexta sección. Entonces también me gusta subdividir secciones en dibs que creo que voy a necesitar en mi página. Entonces hay una toda esta sección de héroes, Tal vez este botón de texto sea otro. Entonces nuestra cada una de nuestras áreas de columnas va a ser un div. Y entonces cada una de las columnas tendrá su propio div. El cuadro y la imaginación serían un div on. Entonces esto instituyó también para que podamos compensarlo un poco desde los lados. Se necesita espaciar adecuadamente, y luego cada una de estas columnas va a ser de su propiedad. Si esto sólo realmente me ayuda a ver qué? La estructura de mi HTML va a estar bastante contenta con esto ahora Todo lo que queda es el comenzado a trabajar en recubrirlo. Entonces voy a empezar por hacer un directorio de sitio de nave espacial y mi directorio de cajas de flicks haciendo índice archivo HTML hacer una carpeta de estilos y una carpeta de activos y luego dentro de los estilos necesito hacer reset CSS con estilo. CSS. Entonces ábrelo todo en código. También voy a abrir el índice html y chrome. Um, entonces necesito mi html cinco boilerplate. Dale un título. Por el momento, no parece nada. Eso es bastante guay. Uh, necesitamos restablecer CSS aquí. No te distraigas por lo rápido que estoy escribiendo aquí. Abrí esto algunos para que no tomara toda una canción cuando la veas, vale , estoy usando pantalla dividida para poder ver el HTML y CSS al mismo tiempo. Voy a enlazar mis hojas de estilo. Necesito, uh, uh, uno para reinicio. Y también necesito otro enlace para esta hoja de estilo en sí. ¿ Quién va a ser lo que sostiene todos mis propios estilos? Enfriar. Todavía no se parece a nada Vamos a añadir algunos html Empecemos con una etiqueta de encabezado. Aquí va a ser donde está nuestro héroe, y luego vamos a decir H un párrafo de naves espaciales con algunos calentamientos y texto y luego un lapso de botón de clase que voy a estilo más tarde parecerá un botón en lugar de sólo mirar con algún texto. Diga que es niña para aprender más. Está bien, genial. Entonces está ahí. Simplemente no parece nada, pero sabemos que puede parecer algo, Así que sigamos adelante y empecemos a peinarlo. Entonces con el encabezado que es display flex, debería tener una dirección flex de columna y le vamos a dar una altura de hombre para que ocupe algún área en la parte superior de la página. También vamos a decir que quiero un div contenedor alrededor de estos tres elementos, pero tenía para conseguirlo. En realidad ya tengo un contenedor tive, así que no necesito ese. Tengo este héroe de clase dividida que va a satisfacer mis necesidades también iban a decir un centro de ítem de línea y justificar centro de contenido para que esto esté centrado vertical y horizontalmente en esa caja. Vamos a decir que todos los ataques aquí deben ser centro de alianza. Vamos a darle un tamaño de fuente y fuente esperar a este h uno. Ahí vamos. Más grande no parece bastante grande, pero llegaremos a eso en un poquito. Ahí está el margen haciéndose un poco más grande. Hagamos más grande todo el texto sobre el héroe para que podamos ver eso también, y luego solo juguetemos un poco con eso. Una forma de hacer que tu texto sea más legible es darle un punto culminante de 1.4 E. M. Estas tiras ayudan a espaciar el texto en un párrafo para que sea más fácil que el ojo siga de línea en línea. Al hacer eso, solo tienes que asegurarte de que cada vez que estás cambiando el tamaño de la fuente, tienes a Teoh establecer también la altura de la línea, modo que eso solo ayuda a que las cosas sean más legibles. También voy a hacer arena Sarah, porque me parece que un poco menos doloroso de mirar mientras estoy diseñando y vamos a darle a este encabezado color de fondo para que pueda echar un vistazo a cómo se ve no lo suficientemente alto . Dale esa clase también. Entonces eso es que hace un poco más grande. De acuerdo, esto es una especie de lo que quiero tener. Por lo pronto, Trabajemos en el primer apartado, que es el RCD A o nuestro llamado a la acción. Voy a comentar esto, diciendo lo que termina cada sección, que podemos verlo, uh, por su cuenta. Enfriar. Entonces vamos a tener una historia de ocho que dice que este es un sitio sobre naves espaciales en un sitio real . Esto sería algo así como contactarnos para conocer más sobre bla global. Y entonces el botón diría Llamar ahora o algo así y luego vinculado a la página de contacto. Pero ya que no tengo otra página que otra vez un enlace a y lo va a dejar así Así que estoy poniendo en mis estilos base de la parte superior. Voy a decir que cada lapso debería tener un display de bloque para poder moverlos un poco más fácilmente después. Enfriar. Entonces eso no es realmente lo que quiero que se vea así hasta ahora, pero lo será. Entonces tenemos Vamos a hacer un div CJ para poner estos dos elementos de texto en fresco. Y luego vamos a decir que tops et a la C T a div solía tener una pantalla de flex. Necesito darle algo de relleno también, y luego darle un máximo con porque no lo quiero. Voy a darle un ancho del 80% del reporte dentro de un máximo con 1000 pixeles, Se les dio un auto de margen, que básicamente tomará todo el espacio disponible y luego especie de centro este div en la página. Se puede ver cómo hizo eso. Voy a decir un espacio Wainaina entre Excepto porque ya que lo estamos haciendo a lo largo del acceso principal , en realidad debería ser contenido justificado. Siempre me meto a esos dos cuando trato de hacer cosas como esta. Enfriar. Entonces el bien está de un lado y el H tres está del otro. Hacer el H tres un poco más grande, hacer un poco más pequeño, ajustar la altura de la línea. Como mencioné antes. Sigo haciendo eso. Estos dos no son del todo parejo así que voy a añadir una línea de base de islas que sólo las enrolla en la parte inferior del texto. No mencioné eso cuando hablé de un vino por primera vez de Adam, pero Es muy útil para casos como este cuando tienes que escribir elementos y necesitas alinear el texto en sí. Entonces esa es esa sección hecha. Trabajemos en este área de tres columnas. Decidí que necesita esa sección display flex. Por lo que tenemos esta tres área común. Va a tener un título y luego va a tener esos tres peines. Empecemos con eso. Por lo que tenemos la sección con una H tres n it. Aquí hay algunos datos básicos sobre naves espaciales Puedo deletrear cool y luego tenemos un diff de nuestro contenedor de columna y luego cada columna de barra también necesita ser un def individual. Entonces hemos llamado tercero, y luego vamos a usar esta cosa llamada lugar. Sostén que t. Para agarrar algunas imágenes. Simplemente son como imágenes grises de cualquier tamaño que te ocurra necesitar. Viene como eslabón. No lo quiero como enlace. Deshazte de eso. Ahí está eso. Y luego mi hecho de nave espacial, que va a ser algo así como suelen ser bastante grandes, cual es un buen hecho sobre naves espaciales en ese entonces, otra columna justo en el html para estas columnas. Eso es realmente bueno cuando nombras a tus clases para nombrarlas descriptivamente, Um, para que puedas ver lo que están destinados a hacer. Hacen viajes largos en el espacio. Y luego me dieron una copia, todo este asunto, y luego simplemente cambié ese texto otra vez. Entonces brindemos por éste. Son acumulados por hombres, mujeres y personas extremadamente valientes porque no sabemos qué jueces tienen los extraterrestres. Está bien, Tan guay. Entonces eso se ve así. Por el momento, necesitamos agregar algunas cosas aquí para que podamos asegurarnos de que esto se vea como lo hizo en nuestro marco de alambre. Primero, lo primero que vamos a hacer es meternos con eso. Creo que nos vamos a meter con eso h tres para que se vea de la manera que necesita . Es tres. Volveremos a hacer la cosa donde le demos un ancho y máximo con y margen para que no extienda todo con la página que está contenida en esta área. He usado esta propiedad de dimensionamiento de caja un par de veces también. Si no sabes lo que hace esa, te recomiendo buscarla. Tiene que ver con el modelo de caja CSS y cómo funciona. Agregando algo de relleno. Apenas un espacio fuera de la sección un poco más. Ahí vamos. Eso se ve mejor. Y luego agregando un margen en la parte superior de la parte inferior de nuestro encabezado para que podamos espaciarlo incluso un poco más. De acuerdo, entonces nuestro contenedor de columna necesita ser display flex porque queremos alinear estos tres uno al lado del otro. Vamos a dar a cada uno todo el asunto y relleno y 50 pixeles. También vamos a hacer esto mismo aquí arriba, que es que queremos que el contenedor específico sea de un menor con son un factor. Oportunidad aquí es poner todas esas reglas en una sola clase y luego aplicar esa clase definitiva. Eso lo necesita. De acuerdo, entonces ahora los elementos estaban alineados, así que vamos a trabajar en las columnas individuales iban a decir que cada una de ellas debería tener un ancho máximo del 33% y un crecimiento flex de uno. Vamos a tener un margen, y les iban a decir que usaran el tamaño de caja. Y también vamos a decir que cada imagen y una de esas casitas sólo deben tener un máximo con el 100% porque Ok. Sí, ahí vamos. Las imágenes se desbordaban antes, por lo que esto se ve bastante bien hasta ahora. A continuación, voy a trabajar haciendo que se vea el texto. OK, entonces cada columna, tercer párrafo va a tener un tamaño de fuente un poco más grande. Va a estar centrado. Enfriar, ligeramente palabra. Tu tamaño de fuente va a estar centrado. Vamos a darle un poco de margen. Y entonces creo que también le vamos a dar un poco de una línea diferente. Altura. Ahí vamos. Eso se ve mejor. Podríamos tal vez lucir aún mejor. Ahí vamos. Enfriar. Entonces ahí está nuestra tercera sección. El siguiente apartado en el que tenemos que trabajar es el que tiene la imagen y el texto justo al lado del otro. Enfriar. Entonces vamos a trabajar en la clase de sección para tener su 1/2 de ella es la imagen de la otra mitad es la imagen y luego el texto, más bien, y vamos a empezar por escribir. Por lo que vamos a decir que la sección de dos casas debe ser display flex justo por delante. Sí. Ahí vamos. Entonces va a tener que hacer esto. uno se le va a llamar pick container. Al otro se le va a llamar contenido. Entonces está la imagen de este contenido que ganó pic container. En lugar de poner realmente la imagen dentro de ella, vamos a establecer la foto pick como la imagen de fondo que hace que sea un poco más fácil administrar cómo re tamaños en diferentes tamaños de pantalla. Si quieres ver una descripción de ese problema en particular con una imagen siguiente texto y se ve raro cuando el cambio de tamaño de la pantalla es echa un vistazo a ese artículo, el verde de The Web. De acuerdo, así que esto no se parece en nada a que quisiéramos trabajar ahora. Por lo que queremos que tanto pick container como content tengan un flex grow de uno. Y entonces también queremos que ambos de esos dos tengan una base flex del 50%. Enfriar. Ahí vamos. Entonces es que puedes ver que va a haber una imagen a la izquierda y una imagen en algún texto a la derecha. Hacer la fuente un poco más grande, dijo la altura de la línea y luego también establecer algo de relleno en la tive de contenido. Ahí vamos. Eso se ve bastante bien. Un poco más de relleno. Aquí vamos. Um, también vamos a decir que estos dos deben tener una altura mínima de 200 píxeles. Vamos a darle un solo contenido de pie o en los ítems de línea más bien centro y luego decirle que muestre Flex para que eso esté centrado en la cosa. Y luego le vamos a dar contenedor también un color de fondo de gris para que podamos ver cómo se ve eso cuando realmente sí ponemos una foto ahí. Se ve bastante bien. Y luego nuestra segunda a última sección es este blurb. Por lo que tienes una clase diferente de blurb. En realidad vamos a poner algunos reales o minutos de ahí. Entonces no tengo que, como, seguir como, intentando dedo del pie sacar qué partes de ella he memorizado. Vamos, nuestro párrafo fresco. Y hasta ahora eso se parece a See, eso va todo el camino a través del ancho de la página. Realmente no me gusta esa mirada, Así que vamos a cambiar eso. Vamos a usar el mismo conjunto de reglas que hacíamos antes de las cosas. Vamos a hacerlo aún un poco más estrecho por defecto sólo para que se destaque un poco más marcha auto petting D y luego dimensionamiento de caja. Entonces nuestro párrafo Lo vamos a hacer un poco más grande y pones una altura de línea, Ve cómo se ve. Está bien, eso se ve bastante bien. Pero lo vamos a hacer aún más grande. Sólo que se destaque más y luego arriba el relleno. Impresionante. Y entonces todo lo que queda por hacer es el pie de página. Vamos a reutilizar algunas de estas clases que habíamos usado antes. Entonces esta columna, clase contenedor y luego esta columna, tercera clase Solo porque, ya sabes, sabemos que los hemos usado antes y sabemos que se ven de la manera en que queremos que pongan algunos, como, texto ficticios aquí. Lista de naves espaciales notadas incluye al William Fall él, el USS Enterprise y el comodín y muchos más. Y nuestra siguiente columna. Sólo vamos a tener otro blurb sobre los viajes espaciales. Innovaciones frescas del siglo 22. Claramente, se trata de un sitio web del futuro. Si puedo teclear y luego durar pero no menos importante, vamos a incluir un poco de imagen por aquí, y vamos a usar este lugar. Sostén esa cosa yo t imagen otra vez. Uno de los beneficios de usar esto es que puedes recitar estas imágenes especie de sobre la marcha solo pero cambiando los números en la URL. Entonces decidí que realmente no me gustaba eso. Mira, van a cambiar. De qué tamaño imágenes. Está bien, está bien. Está bien. Ahí vamos. Eso es lo que se ve bien. Y entonces una cosa que me gusta hacer es que me gusta hacer que el pie de página sea la cosa más pesada del sitio. Por lo que se encendió. Entonces el ritmo fluye, bajadas, vamos a hacer que esto tenga un fondo negro, y luego le vamos a dar algo de texto blanco vamos a hacer que esto tenga un fondo negro, y luego le vamos a dar algo de texto blanco. De acuerdo, así que esa es la estructura de nuestra página. Se ve bastante bien hasta ahora. Estoy bastante contento por ello. Lo que voy a hacer es tomar esto y luego añadir colores, fuentes e imágenes, y luego volveremos a convocar y te mostraré lo que se me ocurrió. Está bien. Como puede ver, aquí está nuestra versión terminada del sitio. He escogido algunos colores, he recogido algunas imágenes. Tenemos una imagen buena, audaz en la parte superior. Las fuentes y estoy usando son todas de fondos de Google. Elegí un bonito azul oscuro acentuado por un par de colores más cálidos para la paleta de colores A Z se puede ver que en realidad está empezando a parecerse a un sitio web. Tenemos algunos patrones de fondo aquí, así sucesivamente y así sucesivamente, como mencioné antes, si estás interesado en aprender a buenos colores y fuentes para tu sitio, debes echar un vistazo a los lugares de interés en el recurso materiales para ayudarle a través de ese proceso . Un oleaje. Tengo el código del código actualizado con todos los estilos actualizados. Esto también estará en el material de recursos, por lo que puedes ir a echarle un vistazo. Básicamente, hice lo de re factor que mencioné antes, donde tomé cada parte del código que se veía así y luego convencí de su propio dedo una clase y luego seguí aplicando. Esa clase vomitó. Ese es concepto que se llama clase de ayudante. De verdad ayuda. Es realmente una de esas cosas que realmente ayuda a módulo a surgir tu CSS que puedes reutilizar partes de él sin tener que escribirlo todo otra vez, que es algo por lo que luchar. Y en general, estoy bastante contento con mi vista. Estoy bastante emocionado por ello, y también me emociona ver qué se te ocurre en tu proyecto. Y ahí lo tienes, un sitio web de Internet armado con flex box. Como siempre, el código para esta compilación está en los materiales de recursos, y ahora es tu turno. Piensa en un cable de idea, enmarcarlo y luego construye el HTML y CSS para ello. 16. Outro: Bueno, llegaste hasta el final del curso y este Siri's hemos repasado un conjunto de herramientas de HTML y CSS Basics. Qué es flex box, cómo usar las propiedades sexuales individuales un poco sobre lo que es el diseño web receptivo y cómo aplicar sus conceptos e incluso habló un poco sobre el diseño de maquetación antes de hacer tu proyecto. Estoy tan contenta de que vinieras conmigo en este paseo y tengas algo que mostrar por ello. Yo solo quiero dejarte con un solo pensamiento. Aprender CSS lleva tiempo. No es razonable esperar que entiendas todo CSS de una vez. Es una de esas cosas fueron sin importar cuánto tiempo lo llevas haciendo, aun así es un poquito de proceso de prueba y error. Todavía tienes que quebrantar nuestras cosas tipo de propiedades diferentes, así sucesivamente y así sucesivamente. Pasarás mucho tiempo en tus herramientas de desarrollador tratando de que las cosas funcionen. Eso está bien, eso es normal. Mi consejo es que, si de verdad quieres bajar estas habilidades, es primero que todo, seguir jugando Flex box, Brockie y segundo de todo, ir a hacer tres o cuatro proyectos como el que acabas de hacer que realmente cimentará el conocimiento en tu mente, y así podrás ver cómo mejoras de proyecto a proyecto. Muchísimas gracias por ver. Ha sido un placer.