Hola a todos, bienvenidos de nuevo. Una vez más, te voy a pedir que dejes de aprender y empieces a codificar y practicar. Y vamos a usar el mismo ejemplo que usamos en nuestra primera pausa de codificación. Así que quería mostrarte cuál era nuestra página antigua, justo aquí. Y vea cómo podemos cambiarlo en algo que se parece un poco más a nuestra nueva página de aquí, donde hemos estado implementando algunos de nuestros márgenes, almohadillas, anchos y alturas. Muy bien, así que sigamos adelante y comencemos. Lo primero que quiero hacer es usar exactamente la misma hoja de estilo que usé para la primera. No hay absolutamente ninguna necesidad de volver a crear su hoja de estilo cuando puede usar esta y modificarla, o si lo desea, usar dos hojas de estilo. Voy a usar solo uno. Y lo primero que voy a arreglar es el hecho de que cometí lo que podrías llamar un error en mi versión anterior. Tengo dos reglas de estilo h1. Eso no es un problema. El navegador aplicará todos estos estilos. Pero lo que realmente quería hacer era darle estilo a la etiqueta del cuerpo. Entonces, echemos un vistazo a lo que parece ahora mismo. Y volvamos a nuestra versión actual. Y ahí vamos. Eso ya se ve un poco mejor de lo que solíamos tener. Muy bien, ahora que estoy en un buen lugar de partida para cuando empiece, hablemos de las diferentes cosas que podemos diseñar en nuestra página, ¿de acuerdo? Una de las primeras cosas que quiero hacer es agregar un poco de margen a mi página. Si miras aquí, no hay mucho espacio entre el borde de la página y el navegador real. Quiero añadir un poco. Puedes agregar un poco, puedes agregar mucho. De hecho, mientras codificamos hoy, voy a agregar mucho, solo para que puedas ver los efectos. Entonces, ¿cómo haces eso? ¿ Cómo se agrega ese espacio entre el elemento y sus vecinos? Entra y vamos a añadir un margen. Y, como dije, creo que voy a hacerlo un poco más pronunciado que en el código que mostré allí. Voy a seguir adelante y hacer que sea 4%. Así que cuando hagamos esto, volveré a la página. Voy a recargar. Y puedes ver que todo está mudado, ¿de acuerdo? Margin solo agrega un poco de espacio y lo hace visualmente más atractivo para tus usuarios, ¿de acuerdo? Pensemos en otras cosas que queremos hacer. Claramente, probablemente quiera agregar un poco de espacio entre mis enlaces y la parte inferior del texto. Así que esto es un poco diferente. No estoy diciendo que separe los elementos, estoy diciendo que necesito más espacio entre mi borde y el elemento en sí. Así que en ese caso, lo que queremos usar no es margen, queremos modificar el relleno. Así que entremos y veamos dónde pensamos que haríamos eso. Muy bien, así que necesito agregar relleno dentro de todo el encabezado. Así que vamos aquí y voy a cambiarlo a, relleno, de nuevo puedes elegir lo que quieras. Puede usar píxeles, puede usar porcentajes. Voy a seguir adelante en este caso, sólo voy a poner píxeles. Y voy a decir que por favor añada 15 píxeles de espacio entre el borde y el fondo. Así que, refresca, oh, asegúrate de guardar. Y actualiza, y puedes ver que he agregado relleno todo el camino alrededor de todo el asunto. Si realmente solo quería que el relleno estuviera en la parte inferior, podría haber dicho relleno inferior, o relleno derecho, o relleno izquierdo. Muy bien, sigamos adelante y diseñemos otra cosa. Una de las grandes cosas que cambié es que en lugar de tener uno debajo del otro, he cambiado estas para que estén al lado del otro. Así que recuerde, de forma predeterminada, las secciones son bloques, son bloques de visualización, lo que significa que no dejes que nadie más venga a mi lado. Para cambiarlo para que estén al lado del otro, podemos usar el bloque en línea o en línea. Casi siempre cuando se le da esta opción, va a usar en línea, porque cuando usa en línea, puede incluir una altura y un ancho. Muy bien, vuelve a mi archivo CSS. No quiero cambiar el encabezado. Creo que soy bastante bueno con H1. El navegador, el h2, oh, ¿sabes qué? No tengo nada que pueda cambiar aquí, así que sigamos adelante y pongamos una nueva etiqueta. Sección, de acuerdo, quiero las tres secciones una al lado de la otra. Así que lo que podría hacer es elegir tal vez 400 píxeles cada uno. Bueno, eso significaría que el navegador tiene que tener al menos 1.200 píxeles. Podría escoger 150 píxeles cada uno. Bueno, eso significa que van a ser muy flacos incluso si no necesitan serlo. Así que usemos porcentajes. Voy a usar el 30%, no el 33%, porque quiero dar un poco de espacio para rejas, márgenes, bordes , etc. Muy bien, vamos a mirar ahora mismo, quiero ver cómo se ve. Puedes ver que he conseguido un 30%, pero todavía no están el uno al lado del otro. Eso es porque todavía están bloqueados. Vamos a cambiarlos a bloque en línea, Display. Y esperemos lo mejor. Ahí vamos. Tengo las tres cosas una al lado de la otra. Todavía no se ve exactamente como queremos, pero es paso a paso. Está haciendo este pequeño progreso a la vez. Voy a seguir adelante y arreglar este hecho de que no están todos alineados en la parte superior. Y voy a decir flotar: izquierda; refrescarse y nos estamos acercando, nos estamos acercando, pero todavía hay algo un poco mal aquí. Primero, están aplastados. No me gusta que todos aplasten juntos. Entonces, ¿cómo separan diferentes elementos entre sí? ¿ Cómo se agrega un poco de espacio entre los elementos? De acuerdo, si estuviéramos en clase, tendría a ese estudiante que es como ooh, ooh, lo sé, sí, es margen, ¿de acuerdo? Margin, sólo voy a poner un margen en un lado, digamos margin-derecha. Y lo haré algo pequeño como el 2%. Muy bien, nos estamos acercando. Nos estamos acercando. Todavía no es lo que queríamos, pero así es como funciona. Agregas un poco. Te adaptas. Agregas un poco. Así que uno de los grandes problemas aquí es que cuando flotas cosas hacia la izquierda, o cuando flotas cosas, una vez que terminas flotando cuando no quieres que los siguientes elementos floten. Tienes que entrar y decir, oh, pero no quiero flotar esta parte. Así que una vez que terminemos con estas tres secciones, no queremos que el pie de página también las tenga al lado. Así que vamos a entrar y ajustar el código del pie de página. Aquí abajo. Muy bien, si recuerdas si no quieres que las cosas floten a tu lado, vamos a usar claro: ambos, lo que significa que no dejes que nada flote a ninguno de los lados de mí. Oh, mucho mejor, ¿verdad? Se ve mucho, mucho mejor. Y aparte del hecho de que tengo colores raros, estamos muy cerca de aquí. En realidad me gusta el gris en el encabezado y el pie de página, así que voy a dejarlo. Pero lo que quiero hacer, es que quiero hacer esa foto más pequeña. Este pequeño icono de aquí, hagamos que se vea un poco más como esto. Y eso es muy simple para el enfoque que vamos a usar ahora mismo. Vamos a seguir adelante. Voy a añadir una imagen. Y voy a seguir adelante y codificarlo duro ahora mismo. Así que, voy a hacer 75 píxeles. Vaya, voy a tener que decir ancho: 75 px. Echemos un vistazo a cómo lo hicimos. Sí, eso se ve bien. Si no me gustaba y quería jugar con él, no entraría aquí y probaría 100 y luego 80 y luego 52. Lo que haría es entrar aquí y hacer Inspeccionar Elemento otra vez. Y yo, oh, haría esto mucho más grande porque de lo contrario todo se ve realmente loco. Y yo entraría en la imagen y diría, ¿de acuerdo qué se ve si en cambio lo hago 150 píxeles? ¿ Eso se ve mejor? O Uy, no quiero hacer eso. ¿ O qué pasa si lo hago 125 píxeles? ¿ Me gusta eso? Elija el valor que desee y, una vez que encuentre algo que le parezca bueno, copie ese valor en la hoja de estilos. Porque si lo actualizo ahora mismo, los valores de mis elementos de inspección desaparecen. Muy bien, vamos a entrar aquí, arreglarlo, guardarlo y refrescarlo. Muy bien, así que esto es genial, estos son los tipos de cosas que quiero que hagas en esta clase. Quiero que cojas un archivo HTML y digas ooh, ¿puedo cambiar esto? ¿ Qué puedo hacer para que sea diferente? Claramente, esta página que hemos creado aquí no es un producto terminado. No es exactamente como querrías que estuviera en la web. Así que vamos a seguir aprendiendo cosas nuevas y vamos a seguir diseñando las cosas de diferentes maneras. Y mientras sigues practicando, tienes confianza y tu habilidad va a crecer. Y eso es lo que quiero. Quiero que tu confianza sea muy, muy alta para el final de la cuarta semana de que puedes hacer esto. Así que buena suerte.