HTML + CSS: CÓMO CONSTRUIR UN SITIO WEB

1. Introducción: todo el mundo, Muchas gracias por dar click en este curso. Mi nombre es Verity y soy desarrollador front-end de Sydney, Australia. Ahora, estoy aquí hoy para enseñarte los fundamentos de HTML y CSS on. Para ello, vamos a trabajar juntos en la construcción de un sitio web de estilo de cartera que puedes personalizar a tus habilidades únicas a propias y por supuesto, tu propio estilo. Ahora bien, no necesitas ninguna experiencia previa para poder tomar este curso. Vamos a empezar desde la plaza uno y vamos a trabajar juntos y construir toda habilidad lentamente. Al final de este curso, habrás construido un sitio web listo para Internet, lo cual es bastante cool en este momento para sacar el máximo provecho de esto, porque realmente te animaría a crear un proyecto debajo de este video en el proyecto sección donde puedes rastrear tu progreso a lo largo de la clase, puedes chatear con otros alumnos, puedes ver en qué se ha estado trabajando todo el mundo. Y por supuesto, si te quedas atascado, puedes hacer cualquier pregunta abajo en la sección de comunidad y yo intentaré ayudarte tanto como pueda y ojalá tus compañeros intenten ayudarte también. Entonces si estás listo para sumergirte en este proyecto, empecemos con nuestra primera lección. 2. Lección 1: empezar: si ustedes bienvenidos a Lección uno saben lo que vamos a estar haciendo en esta primera lección es que vamos a ponerlos a todos configurados con sus archivos del curso. Acude a descargar un editor de texto. Vamos a echar un vistazo a través de la estructura de carpetas en simplemente generalmente atrapado a través todo lo que vamos a estar cubriendo en este curso. Entonces vamos a lo primero que vamos a hacer es hacer click en el tap de tu proyecto debajo de este video, y deberías ver archivos adjuntos y una pequeña carpeta Zip diciendo class project dot zip. Simplemente descarga esa carpeta y extrátela a tu computadora. Ya he hecho tan social abierto que ahora. Por lo que una vez que abras ese archivo, deberías ver tres diseños de sub archivos, archivos de trabajo y terminar proyecto. Si cocinamos en el archivo de diseño, verás que te he proporcionado a PNG uno para escritorio uno desde Mobile. Y esos son los diseños de lo que vamos a estar construyendo en este curso. Pero vamos a echar un vistazo a eso en un navegador en un momento. Entonces si volvemos a subir un nivel, tenemos archivos de trabajo que es literalmente como viales de trabajo. Aquí es donde vamos a estar haciendo todo sobre el trabajo a lo largo del curso en un proyecto terminado en el que se cocinará ahora puedes ver Tengo index dot html y una carpeta de activos donde vamos a almacenar nuestro CSS en todo sobre imágenes. Si haces doble clic en tu archivo html index dot, se abrirá en un navegador, como puedes ver aquí. Por lo que tenemos un bonito espacio de navegación para un logo. Algunos linajes bonitos. Nos adelantamos a la imagen con un poco de texto introductorio para que puedas presentarte . Tenemos una sección aquí abajo para artículos de cartera. Evidentemente tienen fotos o comida en este momento, pero puedes cambiarlas a ser lo que quieras. Y si pasamos por encima de estas imágenes veremos que tenemos un bonito efecto CSS mostrando el nombre del ítem del portafolio en una breve descripción así de lo que es. Y si nos desplazamos hacia abajo, tenemos una sección sobre mí con la cara puesta a la derecha. Tan solo un poco de espacio para una descripción sobre quién eres y qué haces y luego al fondo. Tenemos una sección de contactos que también tiene el encabezado y la descripción, pero también todos tus iconos de redes sociales que puedes enlazar a tus propias cuentas personales . Entonces eso es lo que vamos a estar construyendo. Creo que se ve bastante bonito en. Para el final de este curso, este será un sitio web listo para Internet. Entonces antes de que podamos iniciar cualquier trabajo en nuestra página web, lo primero que vamos a necesitar es un editor de texto, que es lo que utilizabas para escribir el código de tu página web. Entonces he usado bastantes en mi tiempo y con toda sinceridad, a nivel principiante, realmente no hace ninguna diferencia real ¿cuál eliges? Algunas de las que he usado antes Son adam dot io. Tengo sublime. Tex en el que estoy usando en este momento es código de estudio visual. Pero honestamente, en realidad no importa. Entonces solo elige el que te guste. Creo que hoy vamos a estar usando con él para que solo puedas hacer click en la descarga y seguir las instrucciones de Adam. Uh, abre eso. Ya lo tengo instalado en mi computadora, así que solo voy a abrir eso ahora voy a abrir nuestros archivos de proyecto, luego Estos son nuestros archivos de trabajo. Entonces, ¿quieres que quieras la carpeta Working files? Por lo que haces clic en abrir, puedes ver todo el índice y nuestros activos. Voy a hacer clic en archivo de índice. Y ahí tienes. Aquí es donde vamos a estar trabajando en nuestro proyecto para que veas que ya he configurado el archivo html de heno para ti. La estructura básica. Por lo que tenemos doc type html en la parte superior, lo cual es una necesidad para todo el archivo de cobertura de cantidad para que el navegador sepa qué tipo de archivo es tu apertura. Cuando lo cargas en tu navegador, tenemos una etiqueta hey html que vuelve a envolver la totalidad del contenido en tu archivo HTML, eso necesita ser. Ese es el El navegador sabe lo que le estás dando. Tenemos la cabeza en el cuerpo. Ahora. El cabezal es donde pones toda la información sobre tu página web que no necesariamente quieres que se carguen en tu navegador. Entonces aquí es donde dices enlazar tus archivos CSS, tu archivo javascript para que la navegación sepa dónde encontrarlos. Aquí es donde pondrías información en Facebook, compartiendo cualquier metadatos, el título de tu página Web y cosas así. Hay un montón de cosas que podrías poner ahí, pero lo cubriremos más tarde, así que no te estreses demasiado por ello ahora y después por el cuerpo. Aquí es donde escribes todo lo que quieres ser visible en tu página Web. Entonces para demostrar primero lo que realmente hace el cuerpo, vamos a empezar con crear una página Web hola mundo, que es una tradición en el desarrollo Web. Siempre que inicies un nuevo proyecto, creas una página Web hola mundo para asegurarte de que todos tus archivos y todo funcionen como esperas que vayan a hacerlo. Entonces lo primero que vamos a hacer es que vamos a hablar. Oye, H uno, odio una etiqueta. Ahora eso solo significa rumbo uno y luego dentro del encabezado, vamos a escribir Hola, mundo poco signo de exclamación y guardar ese archivo. Ahora bien, si entramos en chrome en camino, abre nuestro archivo así que entraré en mis proyectos de costos los archivos de trabajo y mi archivo de índice. Ahí vas. Se puede ver Hola. Bueno, acaba de imprimir en el navegador. Entonces sabemos que nuestro archivo de índice está funcionando, Pero también queremos configurar nuestro archivo CSS para que podamos aprender CSS en este curso. Entonces en tu carpeta de activos, si vuelves a él y echas un vistazo a la carpeta Assets y tenemos la carpeta Styles , que es donde se almacena el CSS y en esa carpeta tengo el punto principal CSS es donde vamos a almacenar todos nuestros archivos Y como puedes almacenar todos nosotros estilos Lo sentimos. Y como pueden ver, he escrito que odio Uno debería tener el color morado, Pero por el momento, el encabezado no es morado, así que no está funcionando. Entonces lo que vamos a necesitar hacer para que ese estilo afecte a nuestro archivo índice está en nuestra cabeza del documento. Necesitamos realmente vincular el archivo CSS. Entonces aquí acabo de copiar. Tenemos una etiqueta de enlace con RTL, que termina por relación o relación, que es así que ese es el tipo de lo que es el archivo Es una hoja de estilo. Oye, Treff significa la ubicación para que podamos ver si vamos por el lado izquierdo aquí, podemos ver que el archivo índice se sienta en el mismo nivel que la carpeta de activos. Entonces lo que le estamos diciendo aquí es que desde Index, queremos que entres a la carpeta Activos, veas su carpeta de activos. Entonces queremos que entres a la carpeta Estilos. Entonces queremos que entres en el CSS de punto principal. Entonces si solo guardamos ese archivo y luego entramos a nuestra página Web y recargamos, se puede ver que es morado. Ahí vas. Acabas de poner tu primera página Web. Ahora, en la segunda lección, vamos a dejar de construir en la navegación para nuestro sitio web, así que vamos a ir. 3. Lección 2: parte 1: navegación: Entonces, antes de ir más lejos, probablemente deberíamos hablar de lo que el correo electrónico y CSS está en realidad correcto. Es algo importante para este curso. Entonces hey, HTML se mantiene mientras el lenguaje de marcado de hipertexto donde un CSS significa hojas de estilo en cascada. Ahora se puede pensar en HTML y CSS en cuanto a construir una casa tan apresurada ml es la estructura de la casa. Son los lobos. Es el techo. Es el piso. Es lo que secciones Un poco de cuartos fuera donde está un CSS, cómo decoras la casa, cómo la haces en casa. Es el color que pintas las paredes. Es el mobiliario que elijas. Elija en su lavandería. Es si quieres que la fotografía de la pared esté a la izquierda a la derecha. Ahora lo importante a recordar para las hojas de estilo en cascada o CSS es que la importancia de los estilos que escribes se hacen cada vez más grandes y mayores a medida que bajan en cascada la hoja de estilos. Entonces lo que sea que estés justo en la parte inferior va a anular potencialmente lo que has escrito arriba . Si estás usando el mismo select up, no te preocupes demasiado por eso Ahora. Eso vamos a cubrir en la siguiente lección. Entonces la primera parte de nuestra página que vamos a estar construyendo es la navegación en. Para ello, vamos a necesitar empezar por escribir ALH html markup que va a definir el diseño y el contenido de nuestra página. Ahora bien, si miramos el diseño en nuestro proyecto terminado aquí, puedes descomponer el diseño en una especie de cuadrícula. Se puede ver que tenemos el contenedor exterior que crea la forma de la navegación. Tenemos un contenedor interior que está creando el máximo con que son contenido de contacto puede expandirse a Tenemos un pequeño contenedor para nuestro logo y un contenedor para nuestros artículos de navegación . Ahora cada una de estas secciones se van a envolver en etiquetas llamadas dibs on les dará nombres de clase para que podamos seleccionarlas en CSS cuando las estemos peinando más adelante. Vamos a nuestro archivo HTML y en primer lugar vamos a eliminar son hola mundo porque ya no necesitamos eso. Vamos a empezar por escribir. Odio a tu boca, así que escribiré nuestro primer div con la navegación Kloss. Este va a ser el contenedor para toda nuestra navegación. Ahora bien, puedes escribirlo así como div o porque va a ser una navegación. Ahí hay una etiqueta especial llamada la etiqueta naff. Pensé que podías hacerlo de cualquier manera. Ahora es simplemente mejor para la accesibilidad. Y luego dentro de eso vamos a tener un contenedor. Kloss, quien tendrá el contenedor que va a limitar el ancho del contenido que está dentro de la navegación. Y luego una capa más abajo tendrá un Kloss con knaves Loga Uh, Dave on en el mismo nivel dentro del mismo contenedor. Vamos a tener una clase para nuestra clase nunca a y un did para nuestros ítems de navegación. Aquí es donde vamos a poner todos nuestros enlaces a diferentes secciones en nuestro pero folio. Entonces estamos justo aquí solo por ahora para que tengamos algo ahí dentro, vamos a escribir logo y vamos en este momento artículos me gusta hacer esto solo para que pueda ver en la página donde está todo. Entraremos a nuestros archivos de trabajo y refrescaremos y ahí tienes. Por lo que para que nuestro logo aparezca. En realidad lo tengo configurado como un archivo de imagen, así que escribiremos una etiqueta de imagen con una fuente en una alternativa después de ti. Este atributo alternativo básicamente sólo describe cuál es la imagen. Entonces si no se carga, el usuario sabe lo que se supone que debe estar ahí. Por lo que voy a la derecha imagen de perfil en eso en. Nuestra fuente le dice a ese navegador dónde encontrar la imagen. Entonces en este caso, estamos en el archivo índice. Queríamos entrar a la carpeta Assets en la carpeta Imágenes y luego bajar a Verity logo dot p y G. Así que escribiré eso como imágenes de activos y luego verity logo dot PNG. Y luego, bueno, sólo comprueba que eso ha cargado ver este espacio en blanco. El logo en sí es blanco no iban a poder verlo por el momento. Pero el hecho de que no esté mostrando la etiqueta alternativa significa que ha cargado la imagen . Entonces, en nuestra sección de artículos de navegación, vamos a escribir nuestros artículos en una lista, y en este caso vamos a usar un nordeste, lo que significa que solo mostrará puntos de bala en lugar de números. Si querías mostrar números puedes escribir. Ah, l lo que significa lista ordenada. Pero vamos a usar una lista en ordenados en este caso. Por lo que cada uno de nuestros ítems de la lista va a bahía uno de los nuestros sobre enlaces a un punto de la página . Entonces hagamos tres de esos uno Teoh tres y dentro iban a tener una etiqueta, que es como se crea un enlace. Sólo pondremos una libra en eso por ahora. Por lo que en una etiqueta te permite enlazar cualquier texto dentro de tu cantidad tramada. Por lo que nuestro primer enlace será copia de sección de portafolio superior. Este segundo enlace va a ser a nuestra sección sobre, y el tercero Enlace va a cebar a nuestra sección de contactos. De acuerdo, entonces ahora estábamos frescos. Podemos ver este espacio en blanco donde las imágenes que tenemos cada uno de nuestros enlaces, pero no se ve del todo como queremos. Por lo que ahora vamos a darle estilo a la cantidad rht. Entonces para hacer eso, vamos a entrar en nuestros estilos de carpeta de activos y luego CSS principal se deshará de nuestro odio uno morado porque ya no necesitamos eso. Y bueno, correcto. Navegación porque recuerda, nuestro contenedor superior tiene la navegación de clase, y estableceremos el fondo para si cinco fecha 75 Ahora esto es lo que llamas un valor hexadecimal. Entonces si ahorramos eso fresco, ahí tienes. Ahora puedes ver nuestra imagen. Pero ya ves cómo hay este extraño espacio en blanco alrededor de la navegación, que no tenemos. No hemos pedido que el navegador haga eso. Y lo que eso es un estilo predeterminado que el navegador está aplicando a nuestra página Web, y cada navegador aplicará estos valores predeterminados de manera ligeramente diferente. Por lo que he incluido en tus archivos para que normalices dot CSS. No voy a entrar en mucho detalle sobre lo que es esto en este momento, sólo por el tiempo. Pero esencialmente, lo que esto hace es restablecer todos tus estilos predeterminados de navegación. Entonces si solo vinculamos eso en nuestro archivo principal por encima del archivo CSS de punto principal y actualizamos la página que te vas que desaparece, es importante que venga primero porque cualquier cosa que esté en tu archivo CSS principal anulará normalizar dot CSS porque es un estilo de hojas en cascada. Entonces cuanto más abajo vayas, mayor es la importancia. Las reglas de estilo son así ahora que tenemos eso, lo que queremos hacer ahora es conseguir que este logo se peine y flote hacia el lado izquierdo. Y queremos que nuestros enlaces se muestren en línea y floten a la derecha por lo que empezaremos sin logo, ya que eso es primero para que podamos apuntar a nuestro logo usando sus garras. Tenemos los paños, knave, Loga. Entonces vamos a nuestro CSS bien ahora mismo. If logo. Vamos a darle un ancho de 180 píxeles, porque es un poco bigot en el momento que voy a poner un borde alrededor, sólo para que puedas ver donde termina todo. Y lo haremos también para nuestra navegación. Entonces vamos a hacer frontera un píxel lectura sólida. Ahorraremos eso y solo echaremos un vistazo rápido. Ah, ver las imágenes que salen del contenedor. Es por eso que la frontera siempre es buena, para que puedas ver donde termina todo. Entonces la razón por la que eso está pasando es porque el logo nunca es el contenedor. Pero la imagen en sí es más grande que el contenedor, por lo que se está derramando por el costado. Entonces para arreglar eso, vamos a hacer otra capa hacia abajo y bien ahora mismo. Imagen de logotipo hablando. Es así como apuntas a un elemento simplemente escribiendo imagen dirá div o l. I. Así que para apuntar a la imagen vamos a escribir con 100% y con 100% en este caso significa 100% del ancho fuera de su padre. Entonces porque dijimos que los padres deben ser de 180 píxeles, eso significa que el logo de duende podría ser no más de 180 píxeles lo guardará y lo revisará nuevo. Y se van, eso se ve mucho más bonito. 4. Lección 2: navegación: Echemos un vistazo a estos enlaces. Queremos que se sientan en fila en lugar de uno debajo del otro. Tan paños que tenemos de artículos de nab. Ahí vas. Y luego tenemos nuestra u L L I. Así que entraremos en un CSS on Vamos a estilo no tenemos artículos para el Kloss. Pondremos un borde de un píxel blanco sólido ahí otra vez para que podamos ver dónde está. Pero para nuestros artículos tienen, detengámonos haciendo que se muestren en bloques de línea. Por lo que queremos bajar a la lista ordenada de la ONU y al ítem de la lista cuando queremos que cada ítem de la lista se muestre en línea con los demás. Por lo que en cuadra de línea, van allá viejos en fila. Ahora veamos. Este contenedor está tomando todo el ancho fuera de la pantalla, lo cual no queremos. Y la razón por la que eso está sucediendo es porque es un elemento de bloque de visualización. Por lo que volveremos a subir hasta ahora los artículos, que es el contenedor, y vamos a añadir display en bloque de línea a esto está bien, van ahora. Ve este pequeño espacio aquí que está creando a la izquierda del texto que tiene que ver con relleno tan palmaditas Ves ese espacio verde Entonces el relleno es el te voy a mostrar en el si abrimos las herramientas de desarrollador o para mostrarte que desde el principio Sophie, click derecho, click, inspeccionar y entramos damos click en esta cosita del puerto cuando hacemos click en nuestro ítem que queremos mirar, que está fuera en listas ordenadas, puede ver este es el HTML que escribimos justo antes de que abriéramos. Puedes ver tus elementos de lista y ahora si vamos por aquí a estilos y nos desplazamos hacia abajo, puedes ver la sección verde es lo que llamamos palmaditas y palmaditas significa espacio dentro de un contenedor. Entonces no queremos ese espacio en el contenedor. En realidad queremos que eso sea cero así. Entonces si entramos en todo ah CSS en los artículos de knave nunca artículos en elemento lista ordenada y escribimos relleno cero que desaparecerá o se quedará fuera. Ya se van. Queremos a estos enlaces por aquí sentados a la derecha. Entonces si volvemos a nuestro CSS y apuntamos a los artículos de duende, podemos. Lo que podemos hacer es que podamos escribir, flotar bien, y eso lo enviará a la derecha. Entonces echemos un vistazo. Flota derecha Ahí tienes. Está a la derecha, pero mira cómo ahora está como sentado fuera del contenedor ahora. Esto se debe a que cuando usaste flotador, toma ese macho chiíta odio fuera del orden normal. Entonces ahora está sentado gracioso, así que la forma en que vamos a arreglar esto es poniendo un flotador a la izquierda en el logo. Tienes logo flotante a la izquierda. Pero lo que esto hará entonces ver ahora eso está sentado a pesar de que compraste el contenedor con el fondo en realidad se ha derrumbado porque ha cambiado el orden del HTML. Entonces ya no hay nada sentado dentro. Entonces arreglarlo para eso es ir al contenedor fuera de esos dos elementos encendidos. Vamos a escribir agua de desbordamiento, que esencialmente está diciéndole al contenedor que contenga todo, aunque desborde la altura. Entonces vamos a dar clic, refrescar, y se van que contenían de nuevo. Entonces, vamos a deshacernos de las fronteras porque ya no las necesitamos. Vamos a poner un poco de espacio entre Alá ahora objetos y también deshacernos de este azul y subrayado. Por lo que ahora ítems L. I Queremos algo de espaciado en el exterior. No queremos relleno. Queremos espaciado. Queremos margen por fuera, fuera de los ítems de lista, así que vamos a escribir cero en la parte superior. Cinco a la derecha es cero en la parte inferior cinco a la izquierda. Eso es lo que significa esa taquigrafía. No más. Intercambia AIBA y ve que se crea este espacio. Y si voy y si entro en uno de nuestros artículos aquí arriba y doy clic en él en el ítem de la lista Ver , podemos ver el margen cinco a cada lado. Nada en la parte superior en la parte inferior. No, ahora, para el color hay que apuntar específicamente a la etiqueta a que tenemos dentro del ítem de lista. Entonces vamos a ir a sollozar. La U L L L de Eisen de Eisen. Un color f f f f f f f f, que significa blanco, y queremos que la decoración del texto sea ninguna. No queremos ese subrayado ahí, así que vamos a refrescarnos. Se van encantadores ahora. Creo que cuando se cierren, vamos a querer un poco de color en él. Entonces volvamos a hacer la misma regla. Pero esta vez queremos usar una pseudo clase llamada Ha va, y vamos a cambiar el color a, Digamos que por ahora, naranja. Esta es otra forma en que puedes definir colores en CSS con solo escribir el nombre. Entonces haz clic en guardar fresco y flotar y obtienes naranja. Ahora, observa cómo el logo encendido y los enlaces se van yendo al borde de la página, mientras que en nuestro proyecto final se sientan un poco hacia adentro. Entonces para arreglar eso, vamos a apuntar a nuestro contenedor, cual tenemos envolviendo todo nuestro contenido. Yo voy a escribir eso. Muy alto como un estilo general, general. Estos son todos estilos de navegación. Cuando envuelvas algo en este aguanieve y estrella, lo comentará para que en realidad no afecte los estilos de tu sitio web. Entonces para contenedor, vamos a escribir Max con 1200 píxeles y un margen apagado, cero en la parte superior e inferior y auto en la izquierda y derecha, que significa dividirlo por igual a izquierda y derecha, por lo que se sentará en el centro. Guarda eso y refresca anunciado se sienta en el centro. Entonces ahora solo queremos un poco limpiarlo. Esto se ve bastante bien. Nos desharemos de esto. Borda cambiará nuestro frente a un fondo Sand Sarah porque tiene estos pedacitos de decoración en este momento en el frente, y vamos a añadir un poco de relleno a la parte superior de esta imagen para que se sienta más abajo. Así que vuelve a una Onda CSS. Nos desharemos de la frontera. Escribamos en nuestro general. Nosotros queremos todo. Eso es lo que este pequeño Asterix significa todo para tener la familia forma grupos de fuentes familia fuera de San Serif encendido. Entonces queremos agregar algunos puntera acolchada nuestro logo. Entonces descubramos Logo aquí es así que queremos que Salem acariciando, digamos, 10 pixeles, pero solo en la parte superior. Entonces esta es otra forma en que se puede escribir padding top y luego vamos a refrescar eso, y eso se ve bastante bien pero todavía están terminados. El proyecto es un poco más ancho, por lo que a nuestro contenedor, el contenedor de navegación añadiremos algo de relleno de 10 píxeles en la parte superior, inferior izquierda y derecha. Por lo que en todas partes tiene 10 píxeles encendidos ahorrará eso. Vuelve a nuestro archivo de trabajo y refresca. Y ahí tienes. Está bien. En la navegación se ve realmente bien. Sigamos trabajando en una cabeza arriba. 5. Lección 3: encabezar: De acuerdo, entonces en la navegación se ve bien. Entonces ahora pasemos a peinar y montar el html para el encabezado, que va a ser esta parte aquí con la bonita imagen de gran característica y un poco de introducción sobre quiénes somos ahora, igual que antes, estamos va a romperlo en una especie de grilla, como, uh, desglose. Entonces puedes pensar en ello como así tienes este contenedor externo aquí donde se está aplicando esta imagen de fondo y luego tenemos un interno contener a para nuestra introducción y luego la pequeña flecha que solo se sienta debajo de eso. Entonces echemos un vistazo a cómo escribiríamos el email de odio para eso. Lo he escrito para ti sólo por los enfermos de tiempo. Entonces vamos a pasar por algo muy parecido a la cabeza fuera. Tenemos el exterior hasta la navegación. Perdón, tenemos el div exterior, cual le hemos dado la cabeza a los paños. Entonces tenemos el contenedor interno para evitar que el contenido se extienda demasiado lejos y luego dentro del contenedor. Tenemos, uh, uh, hecho por nuestra cabeza de texto con nuestro pequeño texto dentro de él y luego por debajo de eso en el mismo nivel. Tenemos nuestra flecha. Entonces si decimos eso fuera, entraré a nuestros archivos de trabajo sólo para comprobar. Ahí está. Entonces dejemos de peinar esto ahora. El primero que vamos a querer hacer es establecer el fondo para el con el jefe de sección, por lo que solo diremos fondo y le daremos el camino para donde se va a pagar la imagen. Por lo que en este caso, vamos desde el archivo CSS y hacia la carpeta de imágenes. Entonces CSS si tienes un vistazo aquí, CSS se sienta dentro de la carpeta Estilos, así que en realidad queremos saltar al mismo nivel fuera de la carpeta de estilos e imágenes y luego saltar de nuevo hacia abajo. Por lo que retroceder un nivel es lo que hace este punto punto de aquí. Así que salta de esa carpeta y luego vuelve a las imágenes para encontrar espacio de trabajo. Tengo J peg. Por lo que sólo voy a aplicar un par de estilos más. Por lo que tenemos la cubierta de tamaño de fondo para que siempre cubra el ancho y la altura de la cabecera. Tenemos centro de posición para que la imagen siempre esté centrada. Estamos configurando la altura en este caso para que sea de 80 puertos vieux, por lo que un 80% de descuento en la altura del puerto de vista o lo que sea que estés usando para ver tu sitio web. Va a tener un 80% de descuento en esa altura. Por lo que ahorraremos eso y echaremos un vistazo rápido que ellos consideran. Podemos ver nuestra imagen en su sentado a cerca del 80% de la altura fuera de la pantalla. Entonces al siguiente queremos darle estilo a este pequeño contenedor donde vamos a tener nuestra cabeza de texto. Entonces vamos a hacer Hedda. Y luego Target tenía un texto pero se sienta dentro de la cabeza en Andi. Yo sólo voy a hacer un fondo con un valor RGB A. Entonces esa es otra forma en que puedes definir un color en CSS. Y entonces el 111 indica que esto debe ser negro, y luego el Norte 0.8 al final es el valor que dicta cuál debe ser el nivel de opacidad . Entonces no 0.8 80% uh, capacidad, tenemos el color del texto, dijo Toe White on. Vamos a hacer de esta pequeña sección elementos a nivel de bloque para que podamos establecer una altura máxima y un ingenio máximo para evitar que se expanda demasiado con el contenido. Tenemos margen, cero auto para que se sienta en el centro y luego un poco de palmaditas para que haya algo de espacio alrededor del texto y el texto no vaya justo hasta el borde del contenedor. Entonces ahorraré eso en fresco se vayan. Eso se parece bastante a nuestro diseño. Entonces ahora, para que quede sentado verticalmente enviado, tenemos que usar una propiedad llamada Position Now. La posición es un poco complicada, así que les voy a proporcionar un enlace a esta página de MDM aquí, lo que les da una buena explicación fuera del puesto. Inmueble. Ahora este desarrollador dot Mozilla dot org MDM What Web atrapa. Esto tiene todo lo que necesitarías saber sobre la cantidad de Haití y CSS en él para que solo puedas usar la barra de búsqueda para buscar cualquier propiedad que necesites. Entonces en este caso, estamos usando la propiedad position, y puedes ver aquí esto te está dando ejemplos de lo que cada uno lo hace en este ejemplo vamos a estar usando absoluto y relativo así como una explicación. Si hago click en esto, puedes ver que si cambio esto a cero, vuelve a subir. Por lo que esto está posicionando esta caja amarilla relativa a su contenedor, que es la caja hijita aquí. Entonces si no importa qué, cambié esto a su haciéndolo en relación a esa caja. En tanto que este ejemplo Aquí se ve cómo la caja azul se ha movido de aquí para solapar donde esa caja amarilla previamente waas. Eso se debe a que absoluto ha sacado esta caja del flujo normal de hey html y lo está posicionando en relación a este contenedor, que sería como el cuerpo de nuestra página web. Entonces si digo top zero, irá justo arriba. Entonces, ¿cómo se aplica eso al contenedor de Allah Little aquí? Queremos que esto se siente en el centro, pero no queremos que vuele todo el camino hasta la navegación. Entonces es un pequeño truco que puedes hacer Así que vamos a usar la posición, absoluta para centrarla, lo que harías al igual que esto, teniendo la posición propiedad absoluta, que solo comentaré esto. Bueno, estos fuera un segundo y dirán que para mostrarte esa posición absoluta lo tira todo el camino hasta aquí, lo saca del flujo normal, lo cual no queremos ahora Camino que podemos arreglar eso es yendo arriba nivel en la cabeza y realidad colocando la cabeza como un pariente de posición. Y eso evitará que su hijo salga fuera de la cabeza del contenedor. Entonces ahí lo tienes. Ahora, para que se sienta verticalmente centro así como horizontalmente centro. Vamos a hacer la posición en la parte inferior izquierda, derecha y hablar todo cero para que esté tirando de ella en todas direcciones. Entonces si digo que se tira en todas direcciones y termina sentado en el centro de la página justo como queremos. Entonces eso se ve bastante bien, excepto que escribo desarrollador mal, así que bueno, arregle ese desarrollador devel. De acuerdo, entonces ahora queremos cuidar de nuestra flecha. Entonces lo primero que vamos a hacer es ir a imágenes y conseguir flecha door spg que te he proporcionado, que solo puedes resaltar y copiar en tu archivo de índice. Un SPG es un formato de archivo para cuatro imágenes, por lo que solo copiaremos eso en Andi. Ahorraremos eso y probaremos si se ha ido ahí dentro. Se ve precioso ahora para ponerlo sentado en el centro, vamos a darle estilo. Yo tenía, uh oops, digamos de cabeza y luego tuve, uh, Avera, que tenemos encabezado Arrow. Y entonces vamos a guardar eso y diremos Posición fondo absoluto. Digamos que 40 píxeles de abajo. Entonces esto lo va a poner sentado en el fondo del contenedor encendido luego para ponerlo sentado en el centro. En realidad vamos Teoh, vuelve a subir a nuestra cabeza. Un contenedor encendido. Vamos a establecer el centro de alineación de texto. Este es un hackeo que podrías usar en imágenes dentro de contenedores que vas y ahora sentado en el centro y luego vas a la parte superior de nuestras páginas Web ya hechas. Ahora, me encantaría ver tu trabajo en progreso en la sección de proyectos que hay debajo de este video, así que asegúrate de crear un proyecto y enviar esos asientos capturas de pantalla de lo que has hecho hasta ahora. Me encantaría ver que lo personalices. Elaborado con logo propio. Tu propio texto de introducción tu propia cabeza de imagen, lo que quieras es de cabeza abajo a los proyectos. Y en realidad, lo mantienes actualizado a lo largo. Este curso es que todos pueden ver en qué estás trabajando. Y, por supuesto que tienes alguna pregunta. Asegúrate de llegar a la comunidad. 6. Lección 4: portafolio: Ah, cabecera La navegación se ve tan genial. Ahora pasemos a la sección de portafolio de nuestra página web. Aquí es donde vamos a presumir el trabajo que hemos hecho que podrían ser proyectos de desarrollo web . Podría ser tu fotografía. Podría ser clases de cocina. Lo que quieras. Podrías hacerlo tuyo. Echemos un vistazo a nuestro proyecto de acabado primero para que podamos ver hacia qué vamos a estar trabajando. Esta es la sección en la que estamos trabajando ahora. Vamos a tener nuestros cuatro pequeños azulejos para cada uno de nuestro proyecto con una cosecha ocho con una descripción de lo que arriba es lo que es el negocio y lo que hicimos hacia el proyecto. Ahora, si lo pensamos de nuevo en términos de la grilla, vamos a tener nuestro rapero externo nuestro contenedor, para evitar que se ponga tan ancho. Entonces también vamos a tener un sub contenedor que lo va a romper en 50% de ancho para cada una de las fichas. Pero como puedes ver, el azulejo en sí no tenía un 50% de ancho, así que también vamos a tener otro pequeño Dave dentro de ese contenedor para poner el ancho fijo , así que vamos a pasar por el HTML ahora. Entonces vamos a entrar en nuestro archivo HTML. Ondas habituales. Tenemos un rapero y voy a contenedor y luego solo voy a crear un sub contenedor, contenedor de artículo frío, contenedor taquigrafía, derecho, derecho, activo y dentro de este contenedor. Yo sólo voy a escribir otoño por ahora y voy a crear cuatro de esos para que podamos ver cómo se va a diseñar. Entonces entraremos en un CSS y vamos a configurar Let's Go Portfolio. Vamos a darle a la cartera un poco de relleno para que tengamos un poco de espacio de los encabezados. Digamos que 40 píxeles deteniendo abajo cero en el lado causa que tenemos nuestro contenedor para hacer eso y luego otro contenedor de artículos de cartera de nivel hacia abajo. Así que digamos digamos, relleno de 40 píxeles en este también. Pero entonces vamos a establecer el ancho como de 49.7% y ya verás por qué lo he hecho en un momento, porque cuando tienes elementos de display en bloque de línea sentados uno al lado del otro, realidad no se sientan 50 50 50. Hay un poco de espacio entre ahora. Tan solo ponle un borde por ahora para que podamos ver los bordes. Entonces echemos un vistazo a nuestros archivos de trabajo. No funcionó porque escribo puse locuras me equivoqué. Good on May Port Folio Cierra esto y echa otro vistazo. Aquí vamos. Para que puedas ver esta es nuestra grilla. ¿ Cómo vamos a tener configurados nuestros artículos? Creo que en realidad cambiaré esto a un margen para que tengamos espacio en el exterior en lugar del interior. Ahí vas. Hay un poco de espacio. Entonces Pero como dije son ítem de cartera enfermo no es en realidad 50% ingenio. Va a fijar ancho y altura. Si bajamos otro nivel al portafolio Isom Container y entonces digamos que subasta de portafolio creará el rígido. Ahora dices que dentro de nuestro contenedor de artículos Div Dave clase portfolio artículo en se pegará. Escribiré dentro de eso y luego estableceremos nuestro con 2 450 píxeles y todos de altura a 450 píxeles. Y pongamos un fondo también para que podamos ver dónde va a terminar. Voy a usar, uh en un p I de on splash dot com. On splash es un sitio web donde puedes obtener imágenes realmente de alta calidad que puedes usar en tu página web de forma gratuita. Dejaré un enlace a la página web en la descripción. Sólo digamos eso y echemos un vistazo. Hermosa. De acuerdo, así que pongamos algunos estilos. Trajo fondos que se sienta siendo taza de tamaño y en el centro. Entonces también queremos que este artículo de cartera se siente en el centro de nuestro contenedor. Entonces, digamos, fondo fondo tamaño cubierta fondo fondo posición centro. Bueno, no puedo teclear hoy vas, y también queremos nuestros artículos de cartera de ancho y altura fija en el centro. Entonces diremos cero también te vas, eso se ve mejor. Así que ahora empecemos a peinar nuestra descripción. Toda la descripción del portafolio Adam. Por lo que queremos primero a la derecha de alguna manera html para esto. Entonces empecemos con diff con la clase. Pero totalmente lo describo. Y luego dentro de eso, vamos a tener algún texto el cual está envuelto en una etiqueta para que yo usaría pueda hacer click a través de los proyectos que usted diga. Y luego solo voy a usar etiquetas de párrafo para decir en qué se encuentra el nombre del proyecto y un poco de descripción sobre el trabajo que hicimos en el proyecto. Por lo que este proyecto se llama Harries Pizza on para este proyecto. Hicimos el diseño Web en y desarrollo, así que solo voy a copiar en los otros tres solo por tiempo. Ahí vamos. Entonces tenemos Joe's Bakery, florista de Pam, en la fotografía de Olivia. Es Solo comprueba que todo eso está pasando. Sí, genial. Eso se ve bien. Por lo que ahora queremos poner un fondo negro y darle estilo a este texto. Entonces digamos Folio, uno de estos días, lo deletrearé bien, pero elemento de falla contienen en, Digamos, descripción de la cartera. Por lo que vas a poner el fondo con RGB a de nuevo encendido. Vamos a configurarlo para que sea negro con 80% de capacidad. Queremos el color fuera del enlace. Tenemos que ir una capa más hasta la longitud. Queremos que el color sea lo que Onda queríamos tener, digamos, relleno de 20 píxeles en arriba e abajo y 10 píxeles en la izquierda y la derecha. En realidad, hagámoslo al revés Alrededor de 10 píxeles. Stilton abajo 20 pixels izquierda y derecha, es refresco go. Por lo que sólo queremos deshacernos de lo subyacente rápidamente. ¿ Para qué deshacerse de la decoración Subrayado Ex? Ninguno. De acuerdo, entonces ahora queremos crear efectos flotantes. Por lo que queremos que esta descripción sea todo el camino aquí abajo sentado debajo de Al Container. Entonces vamos a usar la posición Absoluta para eso, tal como lo hicimos antes. Vamos a necesitar poner posición relativa en el contenedor del artículo. Entonces vamos a escribir eso aquí arriba. Posicione a los familiares para que todos menos totalmente artículo nuestra descripción descripción descripción del portafolio no va a derramar e ir todo el camino hasta la parte superior de la página. Digamos abajo. En realidad queríamos sentarnos debajo del fondo del contenedor. Entonces digamos menos 130 solo para ver cool. Eso es un poco demasiado abajo, Así que diremos 110 y estableceremos el ancho al 100% para que se mantenga fresco. látigo se ve así que el ancho ha ido demasiado lejos. Y la razón es porque pongo posición relativa aquí arriba en contenedor de artículo por accidente, que debería tener realmente estar en los artículos de cartera. Por lo que el 100% para la descripción del portafolio en realidad se está ajustando al 50% de la página. Eso lo moverá por un nivel. Lo pondremos aquí abajo. Y eso debería arreglar nuestro problema. Sí. Bien. De acuerdo, así que ahora hagamos la cosecha. Ocho. Entonces lo que queremos lograr es cuando flotamos sobre el ítem de la cartera, las descripciones de la cartera deberían subir una entrevista. Entonces digamos que baje aquí y vamos a la derecha. Descripción del portafolio, ¿eh? Por lo que al hover aplica este estilo para poner descripción más completa. Entonces para que suba la página, vamos a usar un títere. Llamó ah, transformación de tendencia, que tiene muchos valores diferentes, incluyendo escala de rotación, perspectiva. Vamos a usar traducir, traducir movimientos, mueve tu elemento alrededor de un eje X y una y. Entonces en este caso, vamos a subir y bajar el eje Y, y queríamos movernos menos 110 píxeles. Creo que debería ser bueno. Entonces, ¿qué set? Vamos a refrescarnos así en puerto. De acuerdo, Tal vez no las esperanzas. Hacerlo otra vez por su aisam. Más fresco, va, Así que eso salta en entrevista ahora. En realidad no queremos ser visibles cuando no se está rondando. Entonces en el artículo de cartera aquí arriba, vamos a escribir Overflow Hidden, lo que significa que cualquier cosa que se esté derramando fuera de ese contenedor se va a esconder fresco. Ahí vas. Se ha ido y parece hermoso. Ahora es un poco culpable encenderse y apagarse así. Entonces pongámosle una transición para que Ah, efecto hover sea un poco más suave. Ups dirá transición. Quería postularme para traducir. Yo quería tomar no 0.4 segundos para completar, y vamos a usar y efecto de facilidad voy a hacerlo. Esto va a ocurrir cuando llegue a la vista, pero también queríamos ocurrir cuando salga de ustedes. Entonces pongámoslo arriba en la descripción normal del portafolio también. Lo que es fresco en realidad quiere que esto se transforme porque ese es el nombre Transform. Ver, el desarrollo es un toro sobre cometer errores y resolver problemas. De acuerdo, entonces eso es aplicar en la salida. No, en el camino. Y eso es porque no hemos conseguido n y transformamos. Aquí vamos. Eso se ve mucho mejor. De acuerdo, entonces vamos a sacar frontera de nuestros contenedores Ya no necesitamos eso, y queremos configurarlo para que podamos tener una imagen diferente para cada azulejo para cada uno de nuestros proyectos. Entonces vamos a buscar esa frontera. Ahí está. Nos desharemos de eso. Y aquí en artículos de cartera donde estamos estableciendo el fondo, vamos a escribir algunas causas específicas, pero cada una sobre negocios. Entonces primero, vamos a entrar en HTML y en realidad estableceremos estas clases en el ítem del portafolio. Def. Digamos pizza. Harry's Bakery for Boots Panadería para Jurors Panadería, uh, floristas, Floristería de Pam en Y, por supuesto, foto. fotografía de Will Olivia. Yo sólo voy a copiar en estas clases sólo por el sake de la velocidad. Ahora notarás en el nivel de artículo foliar. No hay espacio entre las cláusulas tan específicas. Y eso es porque no queremos esto. No queremos bajar otro nivel. Queremos quedarnos en artículos de cartera, pero sólo queremos seleccionar el ítem de cartera que tiene este Kloss específico. Entonces digamos eso y comprobemos. Ha funcionado OK. Funcionó el tres de cuatro, así que probablemente sea otro tipo de mayo. Por lo que parece panadería está en el nivel equivocado. Por eso tenemos un doble whammy donde nos falta un espacio. Entonces eso fue apuntar a lo equivocado. Se van, eso es todo. Imagen de panadería. Ahora bien, esto es tanto como frustrante. Esto es Desarrollo Web. La mayoría de tus temas van a venir de. La mayoría de tus problemas van a venir de tontos errores tipográficos y tontos errores. Así que sólo asegúrate de que pases con un peine fino antes de darte por vencido y di: Oh, Oh, esto es demasiado duro porque, como hemos visto hoy, solo estoy teniendo uno de esos días en los que simplemente no puedo deletrear nada al costo es correcto. Y a veces solo tendrás días así, al igual que May. ¿ Qué pasa con los mejores de nosotros? De acuerdo, así que eso se ve bastante bien. Creo que estamos prácticamente hechos. Tal vez estés pensando, ¿Qué pasa con Mobile House va a funcionar en un dispositivo móvil o tableta? No estreses demasiado. Vamos a tener una lección dedicada hacia el final de este curso donde vamos a venir en consultas de medios y misión fuera responsive. Simplemente no quiero abrumarte con demasiadas piezas diferentes de información al principio de este curso. Pero, quiero decir, estamos a mitad de camino. Sólo hemos sacado esa sección Sección de contacto izquierda para ir. Entonces sigamos avanzando. Y, por supuesto, asegúrate de hacer cualquier pregunta abajo. 7. Lección 5: acerca: también cerca de terminar un proyecto Super buen trabajo. Si todavía estás aquí trabajando junto a mí, el último par de secciones realmente debería ser un estofado con todas tus nuevas habilidades de email hash y CSS que estás obteniendo a lo largo de este curso. Pero claro, si estás atascado, asegúrate de llegar a la comunidad y actualizar tu proyecto. Muéstranos en qué has estado trabajando. Entonces para la sección sobre, aquí es donde vamos a contar un poco toda la historia y mostrar quiénes todos. Por lo que tenemos un diseño de dos columnas pasando sin imagen a la izquierda y algún texto a la derecha. Y así, ya sabes, pega a Shia Mel, vamos a empezar con ah, estándar Rapa Kloss con el reparativo con el sobre Kloss, nuestro contenedor para mantener todo contenido. Y luego vamos a crear dos da para separar todas las columnas. Por lo que el 1er 1 se va a llamar contenedor de imagen de perfil. Ahí es donde va a ir nuestra pequeña imagen de nuestros rostros, Andi. Entonces debajo de eso, vamos a tener un did para el contenedor de texto de perfil. Lo hiciste en Ah, contenedor de imágenes Vamos a incluir una etiqueta de imagen igual que lo hemos hecho anteriormente con una vieja etiqueta diciendo que esto es ah, imagen de perfil. Sí, y luego la fuente. Porque estamos en el archivo en el índice, igual que antes. Vamos a ir a las imágenes. Entonces si cocinamos en imágenes, podemos ver que tenemos perfil. P y J lo reemplazaron absolutamente con una imagen de su propia cara. Uh, voy a decir que en nuestro contenedor de texto vamos a escribir encabezamiento con el título de la sección. Pero claro, puedes poner lo que te falte aquí y luego voy a tener un poco fuera de Laura MSM , que voy a copiar, y ahora Así que eso sólo va a llenar el espacio para nosotros por el momento. Entonces echemos un vistazo a unos archivos de trabajo. Refresca la página. El respeto como nuestra sección sobre imagen no es del todo cargando, y probablemente así que echemos un vistazo a lo que está pasando aquí. Entonces donde en el archivo de índice queremos entrar en imágenes y luego tengo perfil, no PNG. Echemos un vistazo arriba, pero nuestro logo ¿Es el mismo uh, activos. Olvidé entrar a la carpeta de activos. Ves, llevo mucho tiempo haciendo esto, y todavía hago estos seis. De acuerdo, eso debería arreglarlo. Echemos un vistazo. Fresco es la cara. De acuerdo, entonces lo primero que vamos a hacer es separar nuestro contenido en las dos columnas, así que vamos a entrar en un archivo CSS y vamos a apuntar contenedor de imagen en el contenedor de texto. Entonces vámonos. Acabo de crear una sección para nuestro sobre estilos. Vamos por ahí voy a palos y palmaditas ahí dentro. Entonces vamos espaciando de ah, sección perdida andi También un color de fondo, que va a ser de nuevo un valor hexadecimal. Vete tú. Y luego vamos a apuntar contenedor de imagen de perfil. Queremos que el ancho de esto se bahía. Eso es un 30% quería mostrar bahía en bloque de línea. Yo sólo voy a poner un borde alrededor para que podamos ver dónde termina por el minuto. Al igual que siempre encendido. Y recuerda que a menudo nuestra imagen saldrá del costado del contenedor si en realidad no lo hacemos , uh, restringido. Entonces voy a crear a través de imagen de perfil, que vamos a usar en nuestro impuesto de imagen todo justo eso aquí para viles aros de imagen vamos a ahorrar. Voy a hacer el máximo con off esta imagen ya que es un 250 pixeles. Pero si la pantalla es menor que George y 50 píxeles querrán que llene el espacio para, digamos, 100% De acuerdo, echemos un vistazo. Ahora por supuesto. También queremos apuntar a la columna de texto. Entonces digamos contenedor de texto morado. Queremos que eso ocupe el resto del espacio. Entonces hagamos de este 39% en realidad para que sean casi 60 40. Recordando que display en línea Block necesita un poco de espacio extra entre los dos contenedores, y vamos a hacer ambos de estos elementos en bloque de línea en bloque de línea en ese. Pégale un borde a éste para que podamos verlo. De acuerdo, echemos un vistazo a cómo eso se ve genial. Eso se ve bastante bien. De acuerdo, ahora, estas imágenes como que bloquean el texto por alguna razón. Arreglo rápido para eso es ir a nuestro contenedor de texto, y solo vamos a aplicar flotador derecho, que lo va a sacar del orden habitual y lo va a meter justo hasta la parte superior que vas ahora, en nuestro proyectos terminados, esta imagen es redonda y está sentada más hacia la derecha. Entonces para lograrlo, vamos a ir a una clase de imagen de perfil y vamos a escribir Border Radius. Vamos a darle a eso un valor del 50% en el contenedor de la imagen. Vamos a usar todo el texto solos, ¿verdad? También funciona en imágenes. Se van ahora, imágenes sentadas a la derecha. Creo que como etiqueta de golf power se ve un poco demasiado ancha, aunque estoy un poco demasiado cerca de la imagen. Entonces voy a poner un látigo máximo en el párrafo, y también voy a poner un poco de relleno de este lado. Entonces digamos, uh, rumbo, rumbo dejó los 40 píxeles en el contenedor, luego dentro del contenedor. Señor. Archivo 12. Uops, Gro Archivo contenedor de texto. El tag P, voy a decir, y el ancho máximo fuera de 500 píxeles pincel que se ve mejor. De acuerdo, vamos a deshacernos de esas fronteras y entonces pensar que se hará. Guárdalo saldrá. Vamos a compararlo rápidamente con nuestro proyecto terminado luciendo bastante bang el 2 de mayo. Entonces pasemos a ah sección perdida, que es la sección de contacto, y tenemos tan cerca de hacerse, Sigamos adelante. 8. Lección 6: contacto: estamos en la sección perdida. Diablos, sí. Ahora esta sección quiero decir, mírala. En comparación con todo lo demás que has construido hasta ahora, esto va a ser un corsé. Entonces, sólo vamos a meternos directamente en ello. Entonces vamos a empezar con. Ah, de costumbre. Vamos a poner un rumbo a en eso para que puedas poner un saludo, poner lo que quieras. Yo sólo voy a meter contacto ahí dentro un poco de párrafo para que podamos decir Ok , Ho, ven a hablar con May. Simplemente voy a meter algo de Laura ipsum en el quién, y debajo de eso, vamos a tener un ciervo para contener todos nuestros iconos sociales. Ahora, voy a hacer trampa un poco aquí, y voy a conseguir que entres en los archivos del proyecto terminado. Vamos a entrar en nuestro proyecto terminado y hacer clic en índice, y vamos a desplazarnos hacia abajo a los iconos sociales. Estas están llenas de las SPG que vas a estar usando para tus iconos sociales, y solo están envueltas en un enlace que tiene tus asas sociales. Por lo que puedes reemplazar estos por tus propios enlaces. Entonces, solo bajemos y copiemos. Pondré algunos enlaces con tu proyecto de donde puedes encontrar iconos sociales y solo spg generales que puedes usar en tus proyectos porque tienes que tener mucho cuidado con los derechos de autor. No quieres terminar metiéndote en problemas por usar iconos sociales que no te permiten . Entonces tengo mi si para iconos sociales. Tenemos un enlace con un enlace a, uh, perfil. Tenemos una clase para icono social en blanco con un blanco bajo la escuela. Ahora, esto sólo va a significar que cuando hagas clic en tu enlace, se va a abrir en una nueva pestaña en lugar de la parte superior en la que estás. Digamos que entra en un archivo de trabajo y refresca como nuestro contacto se ve bastante bien. Nosotros más o menos sólo queremos que este viejo se centren. Queremos dedo del pie, reducir un poco el ancho, tener un lío alrededor con estos iconos, ver si podemos deshacernos de esta pequeña línea negra aquí. De acuerdo, así que vamos a nuestro CSS crear una nueva sección contactos en. Empezaremos con agregar algunas caricias como formas de separarlo de lo anterior dirán, 80 píxeles cero Al igual que antes. No hay antecedentes ni nada sobre esto. Entonces vamos a bajar a Bueno, vamos a aplicar. En realidad, lo sabes, pero el texto de suministro alinear aparece toma lang cente. En realidad queremos poder reducir el ancho fuera de esto. Entonces en realidad voy a agregar aquí para envolver nuestro texto. En realidad voy a añadir otro. En realidad voy a agregar otro div con el contenedor de texto de contacto de clase eliminar Looks. Ahí vas. Simplemente cierra eso y copia abajo hasta aquí, chicos. ¿ Qué pasa con mi ortografía hoy? ¿ Se puede ver el error? ¿ Chequeado? ¿ Qué? ¿ Qué me pasa? De acuerdo, entonces usando contenedor de texto de contacto, vamos a, um, reducir el viento máximo. Entonces vamos a auto que aquí táctica contenedor dirá un ancho máximo de 700 píxeles. Vamos a decir Ma jin, Así que sabes también dijo que se sienta en el centro, así que echemos un vistazo rápido a cómo se ve eso. Está bien, Eso se ve bastante bien. ¿ Verdad? Entonces echemos un vistazo a lo que está causando estas pequeñas líneas. Vamos a entrar en nuestras herramientas de Dev va a dar click hasta spg. ¿ Ves lo que es? ¿ Qué hemos estado haciendo sin etiquetas todo el camino a través de la decoración de texto? Ninguno. Porque tenemos una etiqueta envolviendo alrededor de rs PGS. Entonces si aplicamos eso a todas las ocho etiquetas dentro, uh, uh, sociales que con nos contengo dicen, Hey, vamos a decir decoración de texto ninguno que debería desaparecer y nos vamos guapa. Pongamos un poco de espaciado, sin embargo, entre estos SPJ porque me veo un poco acurrucado el momento. Entonces para hacer eso, voy a hacer iconos sociales. Pero sólo voy a apuntar a lo social, este singular icono social, y voy a poner un margen. Se trata de un 10 pixeles a cada lado. Perdón. Hagamos cero en la parte superior de abajo 10 píxeles en. Tú decides y te refrescarás. Aquí vamos. Vamos a compararlo. Teoh terminó proyecto. Piensa que tal vez necesitamos un poco de espaciado en la parte superior de los iconos sociales, pero eso es todo. Entonces vámonos. Iconos sociales. Pongamos un poco de whoops. Se pone un poco de, um, um, AJ en, Digamos 20 píxeles de margen en la parte superior de abajo y guarde eso, creo que un poco más. Digamos que 40 20 es mejor. Sí, Cool. Chicos, Miren, hicimos un sitio web. ¿ Qué tan bien se siente eso? Sí, 9. Lección 7: parte 1: cómo hacer que nuestro sitio: ahora lo último lo último que vamos a tratar en este sitio web es liderar sobre las consultas de medios y cómo hacer que tu sitio sea receptivo al lucir bien en. Todos los diferentes tipos de dispositivos también iban a hacer solo un poco de limpieza de código para asegurarse de que la próxima vez que vengas y trabajes en este sitio web u otro desarrollo, trabajos constantes en este sitio web. Se ve bien. Está limpio. Es fácil de entender. Así que primero echemos un vistazo a las herramientas de desarrollador del crimen en Vamos Teoh. Usa el movimiento de arrastre, que puedes acceder configurando tu plática como si estuviera a la izquierda o a la derecha encendida. Verás que si te desplazas a la izquierda o a la derecha que obtendrás un poco de píxel, una pequeña caja que dice la relación de píxeles fuera de tu sitio web. Ahora una consulta de medios es una forma en que puedes decirle al navegador qué estilos quieres cargar en qué punto de ruptura? Ah, punto de ruptura siendo una palabra bastante literalmente, para describir dónde estás diseñado descansos. Entonces si reduzco ah, punto de desglose a lo que habría alrededor de un tamaño de tableta, se puede ver que voy a poner sección Folio. El diseño se rompe porque nuestras imágenes tienen un ancho fijo y alturas fuera de 450 píxeles, pero eso es mayor que el ancho de nuestro dispositivo. Por lo que se están empezando a solapar. Entonces este es un lugar perfecto donde crearíamos un punto de ruptura o en consulta de medios para describir al navegador que no describimos al navegador que no queremos que se siente así. En realidad queremos aplicar algunos estilos diferentes. Ahora. Seguro que estás consciente de que en estos días la mayoría de los usuarios están accediendo a Ah, Internet vía dispositivos móviles. Por lo que necesitamos asegurarnos de que nuestros estilos se estén escribiendo de una primera manera móvil. Entonces la forma en que vamos a hacer esto es que ya tenemos todos nuestros estilos que hemos escrito, y en realidad hemos construido esto a un tamaño de escritorio. Entonces vamos a asumir que todos estos estilos funcionan en móvil, y si no lo hacen, vamos a hacer ajustes para que funcionen primero en Mobile y luego en la parte inferior de la sección vamos a crear y consulta de medios para pantalla encendida y digamos mínimo con desactivados 768 píxeles, que sería aproximadamente un iPad en modo retrato encendido. Entonces cualquier cosa que no queramos que pase en mi pelota, vamos a poner aquí abajo. Entonces digamos por ejemplo, que queremos que el fondo lo diga tal como está en el móvil. Entonces queríamos ser morado, pero en realidad queremos que el fondo de navegación sea amarillo. Entonces volvamos a los archivos de trabajo y refresquemos, y ves que la navegación se vuelve amarilla porque afuera está tiene un ingenio Gracia que todo punto de ruptura. Pero si bajamos a lo que llamaríamos el sitio web móvil o un dispositivo más pequeño, es que vuelve a ser morado, así que en realidad no queremos que la navegación sea amarilla, así que nos desharemos de eso. Pero sí queremos hacer algunos cambios. Entonces bajemos a lo que sería un estándar bastante, mi tipo de tamaño de bola, Digamos 375 píxeles. Se puede ver que el logotipo de los elementos de navegación no se ajusta a todos en la misma línea. Entonces si seleccionamos nuestro logotipo en nuestras herramientas de desarrollador. Por lo que en el logo de navegación, podemos tener una jugada alrededor y ver qué podemos hacer con este logotipo. A lo mejor que sea pequeño fuera. Veamos si eso ayuda a ver que empieza a engancharse a la siguiente línea. Entonces creo que 1 50 se ve bastante bien en mayo será aumentará el relleno así para que se sienta en el mismo nivel que los elementos de navegación. Entonces vamos a copiar estos estilos más, y vamos a disparar subir a un logotipo de navegación. Nuestra regla sobre estos son lo que queremos para el escritorio. Entonces vamos a pegar en estilos lowball en, y en realidad vamos a cortar los estilos de escritorio y ponerlos en una clase de logotipos de noticias ahora aquí abajo. Por lo que esto se aplicará en todo lo más grande que un dispositivo de 768 píxeles de ancho. Entonces vamos a refrescarnos, y eso debería seguir siendo igual. Pero cuando subimos, arriba , arriba, arriba, arriba, arriba, todo el camino a 700 en 68 ¿viste? Se hace más grande y más pequeño alrededor de ese punto de ruptura Ahora, vi antes un poco de un problema con esta era creo que el diseño general de la cabeza de funciona bien en mi pelota, pero esta flechas no realmente sentado perfectamente centro. Entonces vamos a volver a toda flecha. Kloss. Andi, recuerda, configuro texto alinear centro a en la imagen a, o está en la cabeza del contenedor, pero afecta a la imagen. Pero eso obviamente no está funcionando. Entonces vamos a guardar y deshacernos del texto el centro de línea. Y en realidad vamos a usar la regla A 50% izquierda para enviarla al centro. Pero eso realmente lo empujará un poco demasiado lejos. Entonces, en realidad vamos con el dedo del pie. También usa un margen negativo a la izquierda 25 píxeles para traerlo de vuelta al centro. Entonces vamos a comprobar eso. Eso se ve mucho mejor justo en el centro. Está bien. Ahora son artículo de cartera. decir, Esdecir,no se ve tan mal en este momento, ¿verdad? Pero si en realidad entramos en nuestras herramientas sordas aquí, se puede ver que el contenedor de artículos todavía tiene que incontar casi el 50% pero nuestra imagen se está derramando fuera de él. Entonces tapa son imágenes que se derraman fuera de ella, que obviamente no queremos Pero tampoco queremos contener la imagen en Dale un vamos, digamos, digamos, un ancho de 100% porque entonces se vuelve realmente pequeño en un on a mobile dispositivo. Entonces lo que realmente vamos a hacer es ir Teoh, hacer que cada uno de los contenedores de artículos tenga un ancho del 100% en un dispositivo móvil. Entonces vamos a bajar a nuestra sección de portafolio. Andi, tenemos con 49.7% a través de viejos browses en este momento, pero en realidad vamos a recortar eso y poner ancho al 100%. Por lo que en todos nosotros pequeños dispositivos, será del 100%. Y luego en la parte inferior, vamos a crear una consulta de medios de pantalla completa y hombres con oh, trajes de hombres con off 768 píxeles. Vamos a tapar nuestra regla. Cuál era nuestro nombre de clase, artículos de cartera, contenedor ison. Y pondremos nuestro lodge browses tamaño con ellos, así que echemos un vistazo a cómo se ve eso. Entonces contenedor de artículos es lo suficientemente ancho ahora, pero si bajamos a nuestros tres 3 75 puntos de ruptura, en realidad la imagen sigue siendo demasiado grande, así que en realidad vamos a tener que reducir el máximo de imagen con y caliente también. Por lo que esta altura y anchura va a tener que bajar. Entonces digamos que encontremos la clase en la que tenemos puesta nuestra altura y anchura. Tenemos totalmente artículo Ausubel café esto y volveremos a bajar. Y así nuestro ancho y altura actual es para 50 como recuerda. Por lo que 50 pixeles ponen altura por 50 pixeles. Pero en todos nosotros pequeños dispositivos, hagámoslo 250. Está bien, vete tú. Eso se ve mucho mejor. Certifique, levante mi punto de descanso hasta donde se encaja en la versión más grande. Entonces creo que en realidad queremos que veas cómo, a estas alturas aquí sigue solapándose. Entonces, en realidad lo dividamos porque queremos encajar en ser 100% con un poco antes. Pero en realidad queremos que reduzca en altura y anchura un poco más tarde, porque por el momento en este punto de ruptura, esto se ve realmente pequeño. Entonces echemos un vistazo a nuestro punto de descanso. Entonces creo que, por la altura y el ancho, en realidad queríamos romper alrededor de 950 píxeles tanto más alto. Pero en realidad voy a sacar el ancho y la altura de esta consulta de medios, y voy a crear una nueva más abajo. Entonces a un bajo, uh, ancho. Por lo que voy a decir y hombres ingenio 550 píxeles. Y puse eso ahí dentro y veamos si eso ayuda. Por lo que a partir de 550 píxeles, queremos que el tamaño cambie. Y luego vamos a seguir moviéndonos arriba, subiendo, subiendo. Y luego se va a encajar en 50% látigo a 950 píxeles. Entonces, ¿dónde estamos ahora? Estamos alrededor de 650 así que vamos frescos para que podamos ver que nuestra imagen es un buen ingenio hasta el 5 50 que creo que se ve bastante bien. Ahora vamos a revisar donde nuestra grilla encaja en ser dos columnas, así que sigamos adelante Amega. Se encaja en ser dos columnas 10. Lección 7: parte 2: cómo hacer que nuestro sitio: Ahora, lo último que quiero hacer en cartera es en realidad todo el camino de vuelta hacia abajo en Mobile. ¿ Se puede ver cómo ah pequeño efecto flotante es una especie de asomarse por el fondo? Entonces solo voy a cambiar el en el mismo que todos hola y todo con. Yo sólo voy a ajustar este fondo para que se sienta un poco más bajo. Entonces vamos a conseguir una copia de la regla. Hagámoslo sentarse 115 píxeles en lugar de 110. Y luego dentro de esta consulta mediática, pondremos la parada de muerte de nuevo a lo que wa tan inferior menos 110 píxeles. Por lo que el 115 no se ve lo suficientemente lento. ¿ Y qué tal 100? Digamos que 25 sólo para estar a salvo. Esto lo arreglará aquí 25 Vale, así que ahora eso se ve bastante bien. Entonces vamos a bajar a sobre sección y se puede ver que esto es sólo un desastre. Esto no es bueno. Por lo que queremos poner 100% ingenio en ambas columnas, y queremos que todo sea agradable y perfumado. Entonces hagámoslo. Ahora vamos a bajar a la sección sobre y tenemos nuestra UIT siendo puesta en contenedor de imagen de perfil y también en el contenedor de texto. Así que vamos a crear otras consultas de medios en la pantalla de medios y hombres con, digamos, 768 píxeles que está encendido. Vamos a poner nuestra clase ahí dentro. Diré 100% ahora porque queremos el contenedor de imágenes y también el contenido de texto fuera a ambos. Ser 100%. En realidad puedes cambiarlos así poniendo un coma y luego poniendo los otros paños en la siguiente línea. Y si guardas ese curso de grupos fuera, eso no funcionó porque estos son los estilos de escritorio. Entonces vamos a tener esta regla aquí arriba. Lo escribiremos diff. De acuerdo, así que aquí arriba, no queremos que se cambien, así que solo haremos 100% 100%. Y entonces, en nuestra consulta inmediata, en lugar de encadenarlos, en realidad los separaremos de nuevo porque queremos que sean diferentes. Entonces digamos 39% ingenio que este encendido y 100% ingenio para ese. Está fresco. Enfriar. Ahora, recuerda, esto se ve un poco raro porque nuestra imagen es tiene texto, alinear a la derecha y esto está flotando. Por eso está saliendo de nuestro contenedor. Entonces cambiemos eso. Entonces queremos en mi intestino. Queremos texto el centro de línea. Imagen en bruto en el escritorio. Queríamos mantener el texto alineado justo en y para nuestro contenedor de texto. No queremos que flote sobre mi pelota, pero sí queremos que flote sobre yesto. Entonces digamos flotar bien y también tenemos este ancho máximo aquí. No quiero que esto ocurra en mi pelota, así que en realidad lo cortaremos completamente de mi pelota y lo pondremos en una sección de escritorio . Entonces echemos un vistazo que se vea mejor. Hagamos todo el texto enviado. Entonces digamos que queríamos mantener la línea de texto justo en el escritorio ya que ahora está apagado tipo de izquierda como lo es ahora. Y por supuesto, el que se ha ido necesita quedarse eso Así que digamos 40 pixeles como es. Pero vamos a reducir eso hacia abajo en los jardines de cerveza, digamos texto la línea enviada desde mi bilis. Echemos un vistazo que se vea mejor así que qué pasa cuando subamos. Arriba, arriba. Bueno, Y nos partimos. Eso se ve bastante bien. Ah, pero recuerda, llegamos a un punto donde fijamos un ancho máximo en nuestro párrafo. Ah, pero ahora esto está quebrado, y ya no está flotando, así que no hemos hecho algo, ¿ verdad? Entonces todo soy un lleno. He escrito 100% aquí cuando debería ser 60. Seguro que ustedes vieron eso, y yo no hice Buen trabajo gritando a sus computadoras. Está bien, genial. Eso se ve mucho, mucho mejor. Entonces vamos a revisar que broches y se ve bien, ¿de acuerdo? Y me pondré en contacto. Es decir, me pondré en contacto es un diseño bastante sencillo. Por lo que en nuestra página web ahora es sensible. Ahora, por supuesto, hay muchas otras formas de utilizar las consultas de medios. Puedes hacer cosas como establecer un ingenio máximo. Podrías hacer estilo específicamente para cuando un usuario quiera imprimir tu sitio web. Entonces dejaré, por supuesto, por supuesto,un enlace para ti a la documentación mdn para consultas de medios sobre hay bastante ahí. Puedes tener una lectura a través en tu propio tiempo. Y como estás construyendo tus propios proyectos, claro, si piensas en un caso de uso. Tener una lectura a través de estos documentos y ver si puedes averiguar qué es lo que necesitas . Es el último toque final que quiero hacer para nuestra página web es enlazar todas las secciones . Entonces tenemos nuestra pequeña navegación aquí, pero por el momento, si les das click, no van a ninguna parte. Por lo que sólo vamos a usar I DS para vincularlos al resto de la página. Entonces entraré a nuestro archivo de índice y tenemos aquí Ah, listar ítems para el portafolio sobre en contacto. Entonces voy a hacer el camino donde este es donde normalmente pondrías un enlace. Pero si quieres un enlace interno, puedes usar una libra y luego cuál será el i D. Así que para nuestra sección de portafolio. Si me desplazo hacia abajo dos portafolio y me pongo el rapero de cartera I D igual a cartera. Entonces cuando guardé que Andi refrescar mi página. Si hago clic en cartera, si hago clic en cartera, saltará a nuestra sección de portafolio, así que lo haré por el resto de ellos. Ahora, lo largo de este curso, hemos estado usando clases en nuestro CSS para seleccionar qué elementos queremos absorber mi hacer. Eso no tiene por qué ir ahí ahora. A lo largo de este curso, hemos estado usando cláusulas solo dos hacen toda la selección fuera de qué elementos queremos ser estilizados . En realidad puedes usar I DS también. Hay un montón de formas diferentes de seleccionar, uh, pedazos de OMG cobertura, así que solo pondré todos nuestros cuerpos por un momento, y te mostraré un poco justo rápido sobre cómo pueden funcionar las ideas para ti en CSS también . Entonces digamos contacto. Volveremos a subir a una navegación y añadiremos aquí nuestro I DS. Contacto. Enfriar. Ya hemos hecho portafolio, así que vamos a revisar sobre todavía eso funciona. Andi. Contacto. Perfecto. Simplemente se desplaza hacia abajo hasta la parte inferior de la página. Ahora solo echemos un vistazo muy rápido a I DS. Ahora te acuerdas dentro de CSS. Sabemos esto que se trata de una hoja de estilo en cascada, por lo que básicamente el orden de los estilos es muy importante, por lo que a todo lo que está más abajo en la hoja de estilo se le va a dar una mayor cantidad de importancia. Ahora echemos un vistazo a nuestra sección sobre para que pueda demostrarte cómo las clases y yo DS difieren en términos de importancia. Entonces tenemos nuestra clase sobre aquí y con poner nuestro fondo a ese tipo de color beige . Ahora, si iba a apuntar de nuevo sobre y le iba a dar el fondo azul, obviamente, porque está más abajo, va a cambiar el fondo para que sea azul. Si estuviéramos frescos, se puede ver que es azul. No obstante, si yo fuera a hacer esto aquí en I d. A pesar de que el azul está más abajo en la hoja de estilo CSS y a I D se le da un mayor nivel de importancia que un paño, así que verás si lo guardo y refresco, vuelve a ser página Ahora. Te recomendaría que uses las clases tanto como sea posible a lo largo de tus hojas de estilo, porque si dejas de tirar yo DS en el realmente solo te va a confundir. Cuando tengas problemas con tu código, no vas a poder decir qué tiene mayor o menor valor. Y si quieres volver a aprender más sobre los selectores, solo echa un vistazo a la documentación de mdn y encontrarás mucho ahí. Entonces si echamos un vistazo a esta página aquí, podemos ver que tenemos el selector de tipo, que es lo que hemos estado usando para nuestros elementos. Entonces, igual que nuestras imágenes, tienes clases que hemos estado usando I ds ah, selector universal, que es el Asterix, que utilizamos para nuestros estilos generales. Y entonces incluso puedes bajar a los atributos. Electores, Combinador, sus hermanos, todo tipo de cosas. Esta es una Esta es toda una clase en y por sí misma. Por lo que hoy no entraremos en esto. Pero absolutamente. Si quieres aprender más, este es un gran recurso. 11. ¡Lo hice: Yo fui hecho. Muchas gracias por llevarme las escuelas conmigo. Vosotros chicos, escuché que la gente lo pasaba muy bien y habéis aprendido un montón de nuevas habilidades. Asegúrate de actualizar tus proyectos a continuación para que pueda ver en qué has estado trabajando y cómo lo haces tuyo. Voy a estar haciendo muchas clases más sobre Scotia, así que por favor asegúrate de seguirme para que recibes una notificación cuando lanzo mis nuevas clases. Por supuesto, si te gusta conectarte conmigo en redes sociales, tardaré longitudes mayores. Fuller. Muchas gracias por unirte. Puede que tenga un día brillante, no.