Programa tu propio portafolio. Conceptos básicos de HTML y CSS

1. Introducción: Hola, me llamo Aga y soy diseñadora, pero también puedo codificar. En estas clases vamos a codificar el portafolio de los diseñadores, lo que significa que vamos a aprender conceptos básicos de HTML y CSS implementando el diseño paso a paso. ¿ Deberían codificar los diseñadores? Bueno, cada uno tiene su propia respuesta. Voy a ir más allá en este debate. Mi objetivo no es convertirte en desarrollador, mi objetivo es mostrarte que el código es una gran herramienta para los diseñadores de UI y UX expresen sus ideas en el entorno real para los proyectos, que es un navegador web. Después del curso, podrás mejor mano de tus proyectos a los desarrolladores y hablar mejor su idioma. En resumen, vas a aprender etiquetas HTML, conceptos básicos y propiedades de CSS, implementar fuentes de Google en el sitio web y usar devtools en un navegador web. El curso está dedicado a diseñadores de UI y UX que quisieran empezar a aprender HTML y CSS mediante ejemplos prácticos. No se requiere conocimiento de codificación previa. Cubriremos los conceptos básicos paso a paso, por lo que podrás seguir con facilidad. Espero que te diviertas, y finalmente explora que la codificación es muy útil. Nos vemos en la primera lección. 2. Conceptos básicos de HTML: Bienvenido a la primera lección, vamos a cubrir algunas cosas cruciales para comenzar nuestro viaje de codificación. En primer lugar, aprenderemos algunos conceptos básicos de codificación en CSS HTML, y una vez que los conozcamos, iniciaremos nuestro proyecto que es un portafolio. Lo que vamos a necesitar es un editor de código, recomiendo descargar Atom. Atom es un software libre que es muy sencillo de usar. Se trata de un editor de código y puedes descargarlo para un mac, PC o si eres usuario de Linux. El siguiente es tu navegador web favorito. Yo uso Chrome pero siéntete libre de usar Firefox. Lo último que necesitamos son un DevTools. DevTools nos ayudan a navegar a través nuestro código y experimentar el CSS directamente en un navegador web. Pero no te preocupes, por ahora, vamos a cubrir todos los detalles durante las clases y ejercicios. También vamos a usar un paquete con los materiales que preparé para ti. Contamos con archivos y dos carpetas. Tenemos ejercicio uno en cartera. En portafolio, encontrarás algunos activos, imágenes, y plantilla HTML de índice que vas a utilizar los ejercicios futuros. Se puede descargar el paquete con los materiales de la sección fuente en el sitio del curso. Vamos a sumergirnos en la estructura del documento HTML, para ver cómo se construye un sitio web muy sencillo. Cada sitio web comienza con el Doctype. ¿ Qué es Doctype? Es declaración de tabulación de documento, y define que este es el documento HTML real. También da información al navegador de que este es el sitio web que debe ser renderizado. También proporciona la información sobre la versión del documento HTML. Por ahora, sólo dalo por sentado. No vamos a entrar en detalles de ello. Lo siguiente es el padre de todas las etiquetas HTML, que es HTML. Como se puede ver, es etiqueta abierta, en esa segunda línea, y en la última línea del documento, tenemos la etiqueta de cierre de HTML. Da información de que en realidad estamos escribiendo código HTML, y este es el documento HTML. La etiqueta HTML es seguida por la cabeza y el cuerpo. ¿ Qué hay entre medio texto? Todo lo que se pone ahí, en realidad no se muestra en ninguna parte, pero es muy crucial en cuanto a la búsqueda de Google y el navegador. Tenemos el título, etiqueta y el título muestra el título y el navegador web. También tenemos algunos enlaces e importaciones a archivo externo e interno. Pero no te preocupes por ahora, tenemos la sección de cabecera cubierta. ¿ Qué queda? Este es el cuerpo y entre las etiquetas corporales, ponemos todo lo que se genera en la página web, como encabezamientos como h1, párrafos como p, texto, listas, imágenes, lo que quieras. También podemos usar la analogía para recordar, cuáles son los ingredientes del sitio web porque tenemos como secciones humanas, cabeza y un cuerpo. La pregunta que podrías tener es, ¿cómo aprendes realmente todas estas etiquetas HTML? ¿ Los aprendes de memoria? En realidad la mejor práctica es solo codificar y aprender mirando algunos ejemplos. La práctica hace que el maestro, por lo que no tiene sentido aprender todas las etiquetas al principio lejano. Seleccioné algunas etiquetas HTML y son las más populares, así que las vamos a utilizar en ejercicios. ¿ Estás listo para nuestro primer ejercicio de codificación? Vayamos a la siguiente lección. 3. Primer ejercicio en HTML: La mejor forma de aprender a codificar es poner en práctica la teoría. Empecemos con el primer ejercicio. Vamos a abrir editor Atom, donde se puede ver es la pantalla de bienvenida. Además de Atom, también necesitamos el plugin Atom que nos ayude a ver fácilmente los cambios que estamos proporcionando en código. Se llama vista previa en vivo, y necesitamos instalarlo en Google. Escribamos Atom live preview en el navegador web. Abra el primer enlace y haga clic en “Instalar”. Nos pedirá que abramos nuestro software, lo cual está bien, y estamos dando clic en “Instalar”. Ahora podemos ver que el plugin está instalado por lo que estamos contentos de continuar. Puedo cerrar ahora a la ventana de configuración y guía de bienvenida también. Queremos crear archivo HTML, ¿cómo podemos hacerlo? Bueno, solo hacemos clic en Comando N, o Control N. Hice clic en Comando S para guardar el archivo y busco mi carpeta de paquetes. En el ejercicio 1, quiero crear el archivo index.html. Significa que esto va a ser un documento HTML, y haciendo clic en “Guardar”. Nuestro documento HTML está vacío ahora, necesitamos llenarlo con algunas etiquetas HTML. Tenemos que empezar con declaración DOCTYPE, así que estoy escribiendo, DOCTYPE html y etiqueta HTML, abriendo y cerrando. Entre estas etiquetas, tenemos las dos secciones. ¿ Te acuerdas de ellos? El primero una cabeza y el segundo un cuerpo. De cabeza podemos poner ahora el título de nuestra página, que es Ejercicio 1. Guárdalo. Instalamos el plugin de vista previa en vivo así que vamos a encenderlo. Navegamos hasta el Átomo y hacemos clic en “Paquetes”. Buscar Vista previa HTML. Hacemos clic en “Activar vista previa”. Ahora la ventana está abierta y en el lado derecho puedes ver nuestra página web. Está vacío ahora porque no hay nada escrito en cuerpo. Pero si escribimos por ejemplo, Hola allá. Guárdalo. Generará automáticamente todos los cambios que realizamos. Es mucho más fácil para nosotros ver lo que está pasando en la web. Pero, queremos usar algunas etiquetas HTML. Vamos a envolver este texto Hola hay con h1. H1 es sinónimo de rumbo del primer nivel. Podemos tener un par de encabezamientos. siguiente es el h2, por lo que encabezamiento de nivel 2 y podemos escribir como eso, bienvenido al curso. Por supuesto que necesitamos cerrar la etiqueta y verás del lado derecho que tenemos un rumbo más grande y otro más pequeño. ¿ Y qué tal poner aquí un párrafo? El bloque de texto se envuelve abriendo p y una p. de cierre Por supuesto que podemos copiarlo y duplicarlo. Tenemos ahora dos párrafos. Si desea escribir un enlace, por ejemplo al sitio web externo, vamos a usar una etiqueta. Estamos escribiendo a. Entre unas etiquetas, vamos a escribir la etiqueta que se muestra en la página web. Por ejemplo, este es el enlace a mi sitio. Se puede ver que aún no está sucediendo. Necesitamos definir un atributo para una etiqueta. Atributo es algo que aparece justo después del nombre de la etiqueta, y para un tenemos href, y en href ponemos la dirección del sitio web. Por ejemplo, estoy agregando mi Instagram. Veo que el enlace está subrayado en color azul. Este es el estilo predeterminado que agrega el navegador web. Si hago clic en él, estaré en mi Instagram. Para volver a su sitio web basta con hacer clic en Comando S en la ventana de índice HTML. Ahora estamos de vuelta en la página web. Para navegar fácilmente por el código y leerlo fácilmente, podemos envolver todos los elementos de los códigos de línea que aquí se muestran por lo que hacemos clic en “Ver”. Sería mucho más fácil para nosotros escribir y leer el código. Tenemos los encabezamientos, párrafos, tenemos el enlace. ¿ Y qué hay de mostrar lista en nuestra página web con puntos de bala? Toda lista ahí comienza con la etiqueta de apertura. Ul significa lista desordenada. Estamos abriéndolo y cerrándolo. Por supuesto tenemos los elementos de las listas, por ejemplo, HTML, CSS, div herramientas. Donde se puede ver es que cada elemento de la lista comienza con el punto de viñeta. Si quieres cambiarlo a números, necesitamos aplicar una etiqueta diferente que es ol, que significa lista ordenada. De repente tenemos los números. ¿ Y qué hay de adjuntar una imagen a nuestra página web? Podemos aplicar etiqueta img, y es bueno saber que img en realidad es una etiqueta vacía. Significa que se cierra dentro de la etiqueta, por lo que no la escribimos de tal manera. No tiene un contenido dentro. Cerramos esta etiqueta así. Un img tiene varios atributos que necesitamos definir para que aparezca la imagen. El primero es src que significa fuente, y aquí escribimos el camino a nuestra imagen. Otro atributo es alt, que es el texto alternativo que se va a mostrar si no se puede cargar tu imagen. También es bueno saber que es mejor para nuestra accesibilidad proporcionar un texto, porque alt lo leen los lectores de pantalla para personas que no pueden leer tu página al igual que nosotros. Pongamos el camino a través de nuestra imagen. Queremos mostrar coding.jpg. Es el archivo que está justo aquí en la estructura de todos nuestros archivos. Simplemente escribimos el nombre de la misma, es coding.jpg. El alargamiento es muy importante. Ahora podemos ver que se muestra la imagen. Por supuesto que podemos copiarlo y tener las imágenes. También necesitamos proporcionar el texto alternativo. Esta es la imagen promocionando mis clases. No podemos ver el texto alt en ninguna parte. Pero si cambiamos el nombre, por ejemplo agregamos uno, vemos que la imagen no se puede cargar porque no existe tal archivo. Pero al menos nos da la información que el autor quería presentar aquí. Podemos leer eso, esta es la imagen promocionando mis clases. Ahora estoy volviendo al nombre de archivo adecuado. En este sitio web, haces ejercicio de escribir líneas de código muy simples. Hay toneladas de otras etiquetas HTML. Pero los vamos a aprender paso a paso. El último tag que quiero practicar en estas lecciones es div. Div es de alguna manera una etiqueta muy genérica por lo que podemos usarla para muchos propósitos diferentes. Podemos usarlo para crear algunas columnas, algunos elementos del sitio web. En las próximas lecciones sería mucho más fácil para ti entender por qué realmente necesitamos div. En div podemos colocar algunas etiquetas de pedido, así que haremos lo siguiente. Podemos ver que div es en realidad el padre de la lista ordenada. Puedo cambiarlo a desordenado para tener dos listas separadas. También mencioné sobre las herramientas div. ¿ Cómo podemos lanzarlos realmente y para qué sirven? Tenemos que volver a nuestra carpeta. Estoy en la carpeta de paquetes y estoy abriendo el ejercicio 1. Tenemos nuestro index.html, y voy a abrir este archivo en el navegador web. Estoy usando Chrome. Lo que voy a hacer ahora mismo es abrir las herramientas div. Puedo hacerlo haciendo clic derecho Inspeccionar. O puedo usar el atajo que es la opción de comando I o la opción de control I en Windows. Inspeccionar y veo mi código HTML aquí. Las herramientas Div desplazan todo el código, y puedo navegar fácilmente por él. También puedo seleccionar algunos elementos particulares del sitio web y ver dónde está el código real responsable de generar este elemento. Es muy útil y bastante aseado. Espero que lo utilices mucho. Otra cosa que me gusta de las herramientas div es que podemos experimentar fácilmente con nuestro código. Por ejemplo puedo eliminar algunos elementos, puedo cambiar el texto, y también puedo agregar algunas cosas nuevas, como dos párrafos. Pero lo muy importante que hay que recordar es que todos los cambios que hacemos se guardan en el archivo local, en realidad en el almacenamiento local del navegador web. Si actualizamos el sitio web haciendo clic en Comando R o Control R en una PC, verás que el sitio web vuelve al estado anterior. Es por ello que no tomamos todos los cambios realizados en las herramientas div y no los presentamos en nuestro archivo HTML. Si te gustaría hacer algo diferente con esta línea de código y reemplazarlo por ejemplo, hola. Para mantenerlo por más tiempo, también necesitas volver al editor Atom y cambiarlo también aquí. Estoy ahorrando, volviendo al navegador web y refrescante y tengo este hola texto reemplazado. Las herramientas Div también son muy útiles a la hora de hablar de estilo, s pero vamos a meternos en ello en la siguiente lección. 4. Primeros pasos con CSS: En esta lección, nos vamos a centrar en CSS, así que estamos enviando nuestro sitio web al estilista, gracias a la madera, nuestro sitio web obtendrá algunos colores, finalmente. ¿ Cómo escribimos CSS? Bueno, necesitamos realmente escribir, crear un nuevo archivo. Estamos volviendo al átomo, y necesitamos crear un nuevo archivo y guardarlo, Command S como styles.css. La extensión CSS de punto es muy importante porque da la información de que este es el archivo de hoja de estilo en cascada real y podemos usarlo para importar los estilos en el sitio web. Yo estoy escribiendo styles.css pero puedes escribir esto también como mystyles, puedes llamarlo como siempre que quieras, prefiero llamarlo styles.css. Ahora, estamos teniendo listo nuestro documento. ¿Qué es CSS? CSS es otro lenguaje que nos ayuda a dar estilo a algunos elementos del sitio web y un objeto muy importante en CSS se llama Selector. Selector selecciona algunos elementos del sitio web que crea y aplica algunas propiedades determinadas como fondo, colores o familias de fuentes. En HTML, estábamos hablando de etiquetas, así que en estilos vamos a tener selectores. Vamos a crear nuestro primero. Por ejemplo, nos gustaría colorear todos los párrafos, por lo que necesitamos escribir la etiqueta que es responsable de los párrafos que es p, así que estoy seleccionando todas las p o párrafos y escribiendo corchetes rizados y dentro de ellos, escribo algunos CSS propiedades. Por ejemplo, color, rosa. Algo muy importante en CSS es terminar cada una de las líneas con punto y coma, no te olvides de ello. También puedes escribir más selectores CSS, por ejemplo, h1, así que encabezamiento, que es del primer nivel tendrá otro color, digamos salmón. Lo estoy guardando usando Command S o Control S en PCs y bueno, no ha pasado nada. El caso es que necesitamos importar esos estilos y conectarlo con HTML. ¿ Cómo podemos hacer esto? Bueno, lo hacemos usando una etiqueta llamada link. Para link, tenemos una app específica para buttes como rel que significa relación y es hoja de estilo. También escribimos href, por lo que el camino a nuestros estilos que es styles.css, y se puede ver que el sitio web tiene nuevos colores que es encabezamiento salmón y párrafos rosados, por lo que nuestros estilos comenzaron a funcionar finalmente. Resumamos brevemente lo que hicimos. Creamos otro archivo, styles.css, creamos dos selectores, selector para párrafo y selector para encabezado, y también vinculamos nuestro archivo styles.css en documento HTML. Por supuesto, podemos sumar a muchas más propiedades para que nuestro sitio web sea aún más colorido. Podemos agregar fondo para cada uno de los párrafos, por ejemplo, amarillo. Lo guardamos y vemos que nuestros párrafos tienen fondo amarillo. También podemos quitar subrayado en cada uno de los A, por lo que cada uno de los enlaces, podemos escribir text-decoración, ninguno, y también podemos cambiar su color de azul a rosa. La pregunta que podrías tener en este momento es, ¿cómo puedes saber que la propiedad del color realmente existe? Bueno, necesitas aprenderlo por práctica simplemente, pero espero que durante mis ejercicios estés mucho más familiarizado con los ciertos apoyos CSS. Agregamos algunos estilos, tal vez vamos a quitarlo porque parece que es un párrafo. Es azul, y tenemos dos párrafos. ¿ Y qué tal marcar la diferencia y destacar uno de los párrafos? Por ejemplo, aplicando un fondo diferente. Bueno, si escribimos p selector, significa que selecciona todos los párrafos con los que se encuentra el navegador, por lo que no podemos aplicar aquí otro fondo porque simplemente no sabrá cuál del párrafo debe ser azul y cuál debe ser amarillo. Para diferenciar algunos elementos, utilizamos clases CSS. La clase CSS es una noción bastante importante, significa que podemos aplicar algunas propiedades CSS a elementos con la clase específica solamente. Vamos a crear una primera clase, llamemos a este punto culminante. La regla es muy simple, también creamos un nombre pero antes del nombre, tenemos que añadir el punto. Dot significa que va a ser una clase, así que hemos got.highlight, leemos esto como resaltado de clase y dentro de corchetes rizados, agregamos propiedades CSS, por ejemplo, fondo azul, lo estoy guardando y mis párrafos son sigue siendo lo mismo, mismo porque también necesitamos aplicar clase CSS en HTML. Digamos que se debe resaltar la primera p, por lo que debe tener el fondo azul. Estamos agregando a la etiqueta p el atributo que se llama clase, y el nombre de la clase, por lo que es resaltado. Lo estoy guardando y veo que este párrafo tiene un destaque de clase y casa que corona azul, así que todo es correcto y el otro párrafo es amarillo. Si copio este y lo pego a continuación, tendría los mismos estilos al igual que el selector p. Si agregamos esta clase con la última, vas a ver que se aplica la clase. La clase CSS se puede utilizar varias veces y también se puede utilizar para diversos elementos, por ejemplo, para el encabezado. No sólo estos párrafos tienen los antecedentes sino también el rubro Hola. Se puede jugar con clases de CSS y aplicar diferentes propiedades como el font-size. Digamos que queremos que la fuente sea de 20 píxeles y de repente los párrafos son más grandes. Podemos cambiar el color a blanco y verás que cambió al instante. Lo muy interesante aquí es que este selector inicialmente tiene color rosa, pero lo sobrescribimos, con el resaltado de clase y le agregamos blanco a su color. Cambiemos ahora al navegador web, actualicemos la página y echemos un vistazo a las herramientas de Dev. Este es el mismo sitio web que estabas viendo hace apenas un minuto y si abrimos las herramientas de Dev, solo para recordarte que estamos abriendo haciendo clic con el botón derecho Inspeccionar, o puedes usar los atajos Opción de Comando I o Control Alt I. Aquí necesitamos cambiar a elementos. Aquí vemos, el código HTML. Si resalto algunos elementos, por ejemplo, el párrafo, se puede ver que aquí se muestra la clase de resaltado, y nos da la información de que esta pieza de código, este texto que se muestra en la página web aquí tiene fondo azul, font-size 20 pixels, y color blanco. Puedo comentarlo, significa que simplemente no quiero estos cambios y se remonta a la configuración CSS anterior. Si vuelvo de nuevo, verás que el color y el fondo del selector p están tachados. Significa que con el resaltado de la clase, los sobrescribamos, por lo que es bueno usar las herramientas de Dev para ver qué está pasando y qué cambios se aplican realmente. Si creamos otra clase, por ejemplo, mayor y definido tamaño de fuente a 40 píxeles, veamos qué sucede si la aplicamos a este párrafo. ¿ Cómo conectar dos clases? Bueno, es fácil porque sólo necesitamos agregar un espacio entre ellos y tratar de nombrar a la segunda clase. Tenemos resaltado y más grande aplicado, y podemos ver que el último párrafo tiene un tamaño de fuente más grande. Si cambiamos a las herramientas de Dev y nos referimos al sitio web, vamos a ver que la clase más grande sobrescribió el font-size. En un principio, eran 20 píxeles, pero con la siguiente clase, más grande, se aplicó el nuevo valor, por lo que las reglas son simples. Si vamos a usar más clases con las mismas propiedades CSS, solo recuerda que la que se define como la última en el documento styles.css tendría mayor poder. 5. Jugar con más propiedades de CSS: En estas clases, vamos a aplicar de nuevo algunas propiedades CSS. Te mostraré una configuración en editor Atom. En ocasiones necesitas editar HTML y CSS al mismo tiempo. Por lo que es más fácil tener visualización de dos columnas en el editor Atom. Ahora estoy cerrando Preview. A lo que hago, hago clic en “Ver”, “Panes”, “Dividir a la derecha”. Gracias a ello tengo las dos columnas, dos ventanas cerca una de la otra. En uno quiero tener estilos, ese CSS, y en el segundo índice HTML. Ahora puedo previsualizar código HTML y CSS al mismo tiempo. ¿ Y si quisiera aplicar el fondo de mi sitio web? ¿ Y si quisiera tener mi fondo en cierto color? Podemos hacerlo fácilmente aplicando selector de cuerpo. Normalmente tratamos de escribir estilos desde la parte superior de la parte inferior de la página web. Si el cuerpo es de alguna manera la madre de todas las etiquetas HTML, tratamos de escribirlo en la parte superior para que más adelante nos resulte más fácil escanear estilos y escanear HTML. Tiene sentido para nosotros que esta sea toda la estructura. No obstante, lo que quisiera destacar es que, el orden de los selectores específicos, no importa. Lo único que hay que recordar es que, si tenemos dos, los mismos selectores pero escritos en diferentes lugares, y tienen la misma propiedad, por ejemplo, color. Aquí tengo azul y en la parte superior tengo salmón, el que se va a recoger es el que en realidad está escrito en la última posición. Por lo que h1 estará en azul en lugar de salmón porque esta línea se sobrescribiría. Yo estoy borrando este, ahorrando, y tenemos el selector de cuerpo. Me gustaría aplicar el color de fondo. Este es el inmueble que se encarga de cambiar el color del sitio web. Podemos llegar a algún color, por ejemplo, azul claro. Lo estoy guardando, volviendo a mi sitio web, refrescante, y ciertamente, mi sitio web está en azul. Podrías preguntarte cómo escojo los colores porque eres diseñador y te gustaría aplicar aquí algunos colores menos sofisticados. Puedes pegar aquí, código hexadecimal, código hexadecimal. Si ahora no conoces el valor, puedes usar la paleta de colores en las herramientas Dev. Esta es otra característica muy útil que utilizo en estas herramientas. Yo solo puedo recoger el que estoy satisfecho, y pegarlo de nuevo a mi abrigo. Guardar, refrescar y ver que se aplican mis cambios. Desafortunadamente, nuestro sitio web no es muy bonito en este momento, pero tómalo con calma, nos dirigimos a la parte del portafolio bastante pronto. Otra cosa que podemos aplicar en CSS son los márgenes y los paddings. Podemos influir en cómo se separan los elementos entre sí. Digamos que me gustaría tener un espacio más grande entre la imagen y la lista que tengo aquí. Experimentemos un poco con las herramientas Dev. Estoy seleccionando “Imagen”, y me gustaría crear un selector aquí. Estoy haciendo clic en este “Plus” del lado derecho, y quiero aplicar margen. Estoy escribiendo margen, por ejemplo, 50 píxeles de cada uno de los lados, por lo que la parte superior, izquierda, derecha, e inferior. Puedo ver, mientras inspeccionaba este elemento, flotando sobre él, que hay un marco naranja. Me muestra el margen que se aplica. Si tuviera que tocar “Computado”, este es el llamado modelo de caja, verás que aquí tenemos el margen y cada uno de los bordes tiene 50 píxeles. También podemos agregar relleno, que es el margen interior. Por ejemplo, 20 píxeles por lo que se incrementa el espacio entre la imagen y las listas. También podemos agregar frontera. Un píxel del ancho de la línea de borde, queremos tenerlo sólido y en color negro. Esto significa negro en código hexadecimal, pero también podemos escribir negro. Verás que el relleno es el espacio interior entre la imagen misma y el borde. También puedes comprobarlo en el modelo de caja diciendo que, esta es nuestra imagen, estos son los remaches, tenemos la frontera, y tenemos los márgenes también. Para mantener esos cambios, necesitamos copiar todo el selector, volver a Atom, y pegarlo en nuestro CSS. Refrescar la página y se aplican los cambios. Por supuesto, podemos jugar mucho con CSS aquí. Pero creo que será mejor enfocarnos en nuestros proyectos de cartera y poner en práctica nuestros conocimientos. En la siguiente lección, estamos iniciando los proyectos de cartera, lo que significa que vamos a deconstruir el diseño paso a paso. 6. Comenzar tu proyecto de portafolio: Pasemos a la carpeta que se llama cartera. Está incluido en nuestro paquete. Estamos en Atom abriendo toda la carpeta. Estamos haciendo clic en “Paquete”, “Portafolio”, y “Abrir”. Nuestro portafolio se encuentra actualmente en Atom por lo que podemos ver toda la estructura, todo el árbol de la carpeta. Estoy dando click en index.html, y como puedes ver, ya está escrito. Es decir, el esqueleto del sitio web muy básico. Lo que vamos a hacer es que lo vamos a llenar con más etiquetas en cuerpo, y seguro necesitamos trabajar en estilos. En carpeta CSS tenemos style.css, que es empatía y espera nuestras propiedades. Tenemos bootstrap-grid.css. Esta es la cuadrícula que vamos a usar, y está tomada del framework bootstrap. No te preocupes por ello por ahora. Voy a explicar todo en las próximas lecciones. También tenemos algunos activos los cuales tienen todo el texto que está incluido en el portafolio, por lo que fácilmente puedes copiarlo y pegarlo al proyecto. Tenemos dos imágenes, dos archivos. El que presenta el portafolio, el diseño real para el portafolio, el diseño gráfico, y el otro que muestra los tamaños de fuente para los elementos dados. Más adelante, no necesitas adivinarlo, puedes aplicar fácilmente esos números para los encabezados o párrafos. Vamos a ver cómo se ve el portafolio. Actualmente estoy en la carpeta de portafolio. Estoy abriendo activos y disposición de cartera. Podemos ver aquí, que este es el sitio web que vamos a codificar, y hay algunas secciones, por ejemplo secciones que describen los proyectos, como la sección con el contacto. También tenemos la navegación, texto de intro, y algunos botones. Durante el curso siéntete libre de usar tus propios proyectos, para usar tus propias imágenes, para usar tu propio contenido. Pero también puedes usar el contenido que creé para este curso. El primer ejercicio que tenemos que hacer con el portafolio es pensar en este esqueleto de la página web, sobre el marcado. Qué secciones podemos ver aquí, y qué tipos de elementos se incluyen. Tenemos que deconstruir de alguna manera el diseño y ponerlo en la mentalidad HTML. Lo que veo aquí en muy arriba es la navegación. A continuación tengo todo el encabezado. Al igual que la sección de intro de la página web. Tenemos el encabezado, algún texto, tenemos el botón, y la imagen. Estas son las dos columnas. Tengo algo a la izquierda, y algo a la derecha. A continuación tengo otra sección la cual es una lista de algunas habilidades de Jane. Debajo de ella, tengo tres los mismos elementos de la maquetación, tres las mismas secciones que presentan proyectos. Mis proyectos desde portafolio. Tengo uno, con el fondo azul, tengo el segundo, con el fondo blanco, y el tercero igual que con el primero. ¿ Qué es diferente entre ellos? Es nuestra costa que colorea, los colores de fondo, y también la composición. Aquí la imagen está a la izquierda, y en el otro ejemplo esa imagen está a la derecha. También lo vamos a tomar en consideración al crear el sitio web. En la parte inferior tenemos el pie de página con los derechos de autor. Empecemos a escribir HTML para un eso. Voy a volver a Atom, y estoy abriendo index.html. Tengo index.html abierto y también me gustaría tener diseño de portafolio. Estoy dando click en “Ver”, “'Panes”, “Derecha”. Aquí, déjame abrir index.html. Tendré la visión general del diseño, estoy dando clic aquí también, “Ver”, “Envoltura suave”. Mis líneas de código están envueltas, así que es más fácil para mí escribir el código. Estoy viendo el portafolio, y mencioné al principio que lo que puedo ver es la navegación de la parte superior. Tengo que decirles que hay una etiqueta HTML específica dedicada para nuestra navegación, que se llama nav. Estoy abriendo nav y cerrando nav. En la navegación tengo todos estos enlaces a la página web. Puedo usar copy de content.txt, lo voy a poner en esta columna, y lo voy a copiar y pegar en navegación. Tenemos nuestra navegación, pero cada uno de estos enlaces de cada uno de este elemento de navegación puede ser en realidad un elemento de la lista. La lista no tiene que ser vertical , también puede ser horizontal. Vamos a cambiar en hoja de estilo. Pero por ahora, solo escribe la lista usando HTML. Va a ser lista desordenada porque no necesitamos números, y cada uno de los textos aquí va a ser un elemento separado de la navegación. Tenemos contacto, por supuesto etiqueta de cierre. Tenemos obras, necesitamos abrir y cerrar. Tenemos experiencia, y luego la siguiente. Tenemos todos los elementos en la lista. Como pueden ver tenemos la larga fila aquí. No te preocupes por ello por ahora. Centrémonos únicamente en el texto. Yo lo estoy guardando. Esto es todo el nav, y vamos a abrir index.html. Estoy en carpeta de portafolio, estoy dando click en “Abrir en Chrome”. Estoy abriendo el portafolio, HTML, se llama index.html y un navegador web, y veo que mi navegación está aquí, mi lista también está ahí, y tenemos todos los elementos de lista. Vea lo que sigue. Tenemos la navegación cubierta. La carga y navegación tenemos toda la sección de cabecera, se llama cabecera. Utilizamos etiqueta de encabezado. Entre cabecera vamos a poner el contenido de la misma. Tenemos el texto de intro el encabezamiento h1. Podemos copiar, hola, soy Jane Doe de aquí. Si te preguntas cómo podemos realmente romper el texto y poner a la desconocida en la siguiente línea. Estoy demostrando que en realidad podemos usar br que significa break, y esto se va a mostrar en dos líneas. Sólo por favor recuerda esa etiqueta de ruptura, br la usamos solo para romper los bloques de texto y no para elementos, no para hacer márgenes o espacios más grandes. Para márgenes, ocultar y tamaños, utilizamos propiedades CSS. Tenemos el rubro, y abajo a encabezamiento, hay una lista de algunos éxitos o puntos de carrera de Jane. Podemos de nuevo, copiar el texto y ponerlo en lista desordenada. Estoy abriendo etiqueta, cerrando, y envolvemos cada uno de los textos con li, para que sea más rápido lo estoy copiando. Estoy ahorrando y revisando lo que hay en mi página web. Ahora puedo ver la navegación. Tengo brezo el cual tiene algunos hijos, h1, lista desordenada, y algunos elementos de la lista. ¿ Qué sigue? Echa un vistazo al portafolio, y vemos que bajo la lista, tenemos el botón. El botón lo va a vincular en algún lugar, así que usemos una etiqueta. Por ahora no sabemos a dónde apuntará, por lo que podemos usar la empatía de atributo href. Entre las etiquetas a la de apertura y cierre, podemos escribir el texto de que está en un proyecto. Se llama agregarme en linkedin. Puedo ver que el enlace se está generando en una página web. Tenemos listo el lado izquierdo. ¿ Y la columna correcta? Aquí hay una imagen. Pongámosle una imagen. Por ahora sólo saltemos la fuente. Para alt podemos escribir que Jane Doe. Esto presentará a Jane Doe, y cerrando con una imagen. Esta es la etiqueta vacía. Veamos la estructura de nuestros archivos. Actualmente estamos editando index.html, y vemos que Jane jpg está oculta en la carpeta img. El camino a la imagen de Jane es el nombre de la carpeta, barra inclinada y el nombre del archivo. Es jane.jpg. Estoy refrescando la página y veo que la imagen, esto se ve brillante. No te preocupes por ahora por la posición de los elementos y cómo se están alineando. Vamos a conseguir esto cubierto en los próximos módulos del curso. Si volvemos a la disposición, veremos que ya tenemos la parte de cabecera casi lista. Basta con añadir el título a la imagen. Para ello, utilizamos una etiqueta especial en HTML que se llama figura, y envuelve la imagen, y también etiqueta figcaption en la que ponemos foto de Sam Manns en unsplash.com. Yo también estoy cerrando figcaption. Quiero mantener limpio mi código, así que por eso pongo tap aquí, e intersecto el código. Podemos ver fácilmente que figura es la etiqueta padre de img y figcaption. Lo estoy guardando, refrescante, y ver que tenemos que subtítulos debajo de la imagen. Continuemos con la siguiente parte del diseño en la siguiente lección. 7. Crear secciones y elementos restantes en HTML: Cubramos el siguiente elemento, las siguientes secciones de la disposición. Hemos terminado en el encabezado, y ahora estamos creando el siguiente. Entonces, cabecera cierra aquí, y tenemos aquí las secciones con la lista de habilidades. Vamos a crear una nueva sección, se llama etiqueta de sección en HTML. Tenemos el encabezado, que es muy específico al diseño. Es el encabezado, en la sección superior de la página, y vamos a la siguiente sección, lo general. En el apartado se incluirá la lista que se encuentra en contenido. Lo estoy copiando, y poniendo en una lista de pedidos. Nuevamente, cada uno de los elementos de la lista tiene que ser envuelto por la etiqueta Li. Yo estoy cerrando. Todo se ve correcto, ahorrando, y vamos a refrescar el sitio web que tenemos. Ahora tenemos lista la lista, y aquí está nuestra sección. Volver al átomo. Debajo de la lista, tenemos tres proyectos. Por cierto, te mostraré cómo crear comentarios en tu código. Los comentarios son muy útiles, porque se puede agregar alguna nota personal allí. Se puede estructurar el código. Por ejemplo aquí, esta es la sección del proyecto, y escribí comentario usando estos personajes. Pero también es fácil solo escribir el texto, quieres comentar. Usted lo marca, y hace clic en “Comentar” o “Ctrl”, y barra en su teclado. El editor de código flota automáticamente alrededor de él, este caracteres específicos. Tengo proyectos, y está gris, así que ves instantáneamente que este es el comentario. No se va a ver en la página web, pero va a estar en el código. Escribo sección, y escribiré aquí, proyecto 1 y lo comentaré. Tenemos el proyecto 1 aquí, ¿y qué es la perspicacia? Tenemos la columna izquierda y la derecha. En columna de la izquierda, tenemos el rumbo, es h 2, porque ya tenemos h 1, en la parte superior. Este es el encabezado que tiene el tamaño de fuente más pequeño. Por lo que aplicamos h 2. Codificemos este, el primer proyecto. Tenemos primera imagen. Entonces estamos escribiendo, img. ¿ Cuál es la fuente y alt? Bueno, la fuente de la imagen, vamos a revisar aquí. Estoy haciendo clic en el árbol de toda la carpeta, la estructura de la carpeta, y ver que es img y se llama cosmética jpg. Necesito escribir el camino específico al mismo. Se trata de una carpeta img, cosmetics jpg, así que estoy escribiendo img/, así que estamos entrando carpeta img, cosmetics.jpg. Aquí, podemos escribir cosméticos. Tenemos la imagen, pero de nuevo, necesitamos añadir un título. Si nos fijamos en la parte superior, utilizamos etiqueta de figura, y tenemos el título de higo. Entonces vamos a reutilizarla. Estoy escribiendo figura como el padre, de la imagen, cerrando también. Este es el hijo de la sección. Por lo que insertar también, figura y lo que falta es el título de higo. Aquí estoy agregando, la leyenda del contexto, que falta aquí. The Honest Company on Unsplash. Guardémoslo, actualicemos el sitio web , y tengo la imagen, y tengo listo mi título. Estas son la etiqueta de sección separada, mencioné acerca de los comentarios. puede ver que aquí están marcados en verde, y se muestran en el abrigo, pero no se puede ver ningún texto de palabra, proyectos o proyecto 1, en ese sitio web. Por lo que no se genera. No se preocupe por eso. Nos dirigimos al lado derecho, que incluye h 2. Copiemos estrategia de branding para cosméticos femeninos. Podemos usar break aquí. Poner en la siguiente línea, y luego tenemos el simple párrafo con el texto de que está aquí. Sólo lo estoy copiando y pegando. Esta es solo una versión moderna de Lorem ipsum. Guardémoslo, y veamos qué más falta. Tenemos el botón. Se llama leer más. Entonces estoy agregando h tag, abriendo, cerrando, y luego leer más, ahorrando, y he leído más en la parte inferior. Párrafo, rubro. Se puede ver que, hay una ruptura entre la estrategia de branding, y para los cosméticos femeninos. Entonces todo funciona. Sigamos ahora. Tenemos la segunda sección del proyecto. Podemos escribir el proyecto 2, comentarlo de nuevo, y crear sección. Aquí comenzamos con h 2, llevamos experiencia de usuario, diseño de app, h 2, cerrando. Podemos usar break también, y luego párrafo. Para un párrafo, utilizamos Lorem ipsum. Nuevamente, desafortunadamente, copié demasiado. Entonces es así. Tenemos leer más. Para hacerlo más rápido, podemos copiar y pegar porque es el mismo elemento. Lo que falta es la imagen. Nuevamente, podemos copiar toda la figura, responsable de generar la imagen y el título. Lo estoy pegando. No he mencionado del espacio. Son las líneas en código HTML, pero puedes hacerlas tantas como desees. No afectará cómo se genere el sitio web. Si necesitas hacer algunas notas personales, por ejemplo, aquí añadimos una imagen con el título. Puedes, por supuesto, copiarlo y usarlo para tus propios propósitos. Aquí sólo necesitamos cambiar el nombre de la imagen. Veamos, en la carpeta, se llama aplicación de dashboard, así que estoy cambiando aplicación de dashboard. Aquí tenemos que cambiar todo esto también, app de dashboard, y la leyenda, que se toma de aquí. Ahorrando, refrescante, y tenemos la siguiente sección lista. Tenemos apertura del proyecto 2 aquí. Después el siguiente, el proyecto 3, el tercer proyecto de nuestra lista. De nuevo, vamos a ver. Empezamos con una imagen. Nuevamente, podemos copiar y pegar figura. Aquí, tenemos una app para iPad, en diferentes subtítulos. Comprobemos el nombre del archivo, tenemos que conseguir. Es app para iPad. Yo lo estoy llamando app iPad. Del contenido, estoy tomando el pie de foto. Nuevamente, necesitamos aplicar h 2, que se llama app iPad para los artistas, break y paragraph. Copiar el texto completo. Lo estoy guardando, y necesito cerrar la sección. Olvidé abrir la etiqueta de sección. Por lo que cada uno de los proyectos gana con la etiqueta de sección, y por supuesto, necesita ser cerrado. Porque nuestro código podría ponerse desordenado. Estoy refrescando el sitio web actual y el navegador web, y veo que tenemos la imagen con el título, el encabezamiento, el párrafo, y es el tercer proyecto. Ya casi terminamos con el esqueleto de nuestra página web. ¿ Qué más falta? Veamos en el portafolio. Podemos ver que este es el pie de página. Limpiaré el código. Estoy creando pie de página, estoy abriendo y cerrando. Tengo el impuesto que es bastante grande. Creo que debería ser el rubro, así que usemos h 2. No te preocupes por las tallas por ahora. Entonces copio, cualquier pregunta, encuéntrame aquí, Jane. Yo estoy poniendo descanso. También estoy poniendo la última línea del texto, que está en la parte inferior de la página. Yo copio, y lo pongo, luego párrafo. Guardándolo. Mi sitio web actualmente tiene el pie de página. Como puedes ver, no es muy impresionante, y hay toneladas de trabajo por hacer, pero no te preocupes. Nos vamos a meter en cada elemento del sitio web, cada etiqueta HTML, y darle estilo, para que se vea igual y retrasar, tenemos. Al igual que los proyectos que he preparado para ti. 8. Tipografía web: En estas clases, vamos a tomar un descanso del código HTML y nos vamos a centrar en la tipografía web. Suena excitante? De verdad me gusta aplicar Google Fonts en mi sitio web, así que vamos a ver cómo podemos hacerlo. Lo que necesito hacer es abrir la página web fonts.google.com, y busco las fuentes que se utilizan en mi proyecto. Hay dos fuentes, la primera es Inknut que usé para los encabezados, es Inknut Antiqua. Entonces lo que puedo hacer es hacer clic en plus, por lo que seleccionará esta fuente, y tengo el panel que me muestra que la fuente está seleccionada. También tengo otra fuente que se llama IBM Plex Mono, por lo que este es el texto que utilicé para el cuerpo. También hago clic en el icono más, y veo que se seleccionan dos familias. Google Fonts nos da la instrucción sobre cómo podemos incrustar la fuente que utilizamos en el sitio web. La buena noticia es que tenemos un montón de ellos, por lo que podemos seleccionar varias opciones y varios tipos de letra, y son de forma gratuita y están alojados en servidores de Google. La opción estándar de incrustar la fuente es usar el código aquí. Se trata de una pieza de etiqueta HTML llamada link, que ya aplicaste en tu sitio web mientras vinculabas estilos. También puedes incrustar fuentes usando la importación de CSS, pero preferiría apegarme a la primera, así que copiémoslo y peguemos el código en la sección principal de tu documento HTML. Significa que vamos a volver a Atom. Estamos en nuestro documento HTML, y voy a la parte superior, a la sección principal de mi archivo. Entonces tengo sección de cabeza, y debajo de la etiqueta de enlace que ya tengo con styles.css, estoy haciendo la nueva línea y pegando todo el código que copié de Google Fonts. Yo lo estoy guardando y ya casi estamos listos. Entonces lo que tenemos que hacer en este momento es crear realmente CSS. Necesitamos crear CSS que aplique las fuentes que elegimos a los elementos dados del sitio web. Entonces vamos a abrir CSS, style.css. Va a ser esta placa en la nueva columna. En realidad no hemos escrito ninguna línea de código CSS, así que va a ser nuestra primera. El caso es que si miramos bajo nuestro proyecto, ahí tenemos Inknut Antiqua. Entonces esta es la fuente decorativa Serif que se aplica a los encabezamientos, la lista aquí, y eso es todo. tipografía IBM Plex Mono aparece por todas partes excepto por los lugares donde viene Antiqua. Por lo que podemos hacer esto de tal manera. Voy a volver a Atom y escribir que todo el cuerpo, significa que todo el sitio web tendrá IBM Plex Mono. Entonces volvamos un rato a Google Fonts y veamos cómo podemos especificar nuestras fuentes en CSS. Estas son las reglas CSS que podemos aplicar a nuestro documento CSS. Esta es propiedad font-family con Inknut Antiqua, y aquí es donde IBM Plex Mono, así que copio la última porque quiero usar IBM Plex Mono para todo el cuerpo de mi página web. Entonces lo estoy pegando, y significa que todo el texto que aparece en el cuerpo tendrá IBM Plex Mono. Actualicemos la página y veamos si se aplican los cambios. Tengo una nueva fuente lista, y esto es totalmente diferente a Times New Roman, y esto es seguro IBM Plex Mono. Si navegamos en alguno de los elementos, podemos ver que se aplica la familia de fuentes IBM Plex Mono. Si lo comento, verás que vuelve a la fuente predeterminada, que es Times New Roman. Está bien, pero también mencioné que en el proyecto, tenemos Antiqua usado para todos los encabezados y la lista, así que vamos a aplicarlo en CSS. Entonces H1, H2, y la lista que aquí aparece bajo la navegación, que es ésta, tienen Antiqua. Entonces por ahora escribiré “ul li”. Entonces podemos escribir el mismo estilo para múltiples elementos HTML, y podemos dividirlos usando dos puntos. Por lo que tenemos el mismo estilo aplicado para H1, H2, y todos los elementos de la lista “ul”. Entonces estoy en fuentes de Google y veo que esta pieza de código aplicaría Inknut Antiqua en mi tipografía web. Entonces lo estoy pegando para estos selectores. Estoy guardando, refrescando la página, y veo que el encabezado, la lista debajo tienen aplicado Inknut Antiqua. Desafortunadamente, también tengo esta fuente aplicada a la navegación. Si comparo esto con mi proyecto, veré que aquí, utilicé IBM Plex Mono. Entonces, ¿cómo podemos diferenciar esta lista de herramientas, recuerdas las clases de CSS? Espero que sí, así que vamos a aplicarlos. Vamos a crear clase css, por ejemplo, podemos crear la clase para esta lista y la llamamos la “Lista de habilidades”. Por lo que tengo la clase llamada Lista de habilidades. Es el atributo en HTML, pero también necesito agregar aquí en mi hoja de estilos CSS. Entonces estoy creando el punto, que significa clase, y luego el nombre, es Skills List. Yo quiero que aplique Inknut Antiqua para este, así que estoy copiando toda la línea, guardándola, y desde aquí eliminaré “ul li”. Significa que esta fuente, Inknut, ya no se aplicará a “ul li”, por lo que todos los elementos de la lista. Para que podamos copiar y guardar. Yo refresco, y ahora puedo ver que finalmente toda mi navegación está en IBM Plex Mono, y la lista bajo la navegación está en Inknut Antiqua. Entonces al igual que en mi proyecto, para hacer mi código más limpio y no repetible, solo copiaré esta clase, agregaré dos puntos, pegaré la lista, y eliminaré el último selector. Por lo que esta regla significa que la fuente Inknut Antiqua se aplicará a todos los H1, a todos los H2, y a todos los elementos HTML que tienen una clase llamada Skills List. Entonces así es como agregamos fuentes de Google en nuestra página web. Es así como los importamos al documento HTML. Por lo que lo primero que necesitamos agregar es la etiqueta de enlace que tiene las URL a fuentes específicas, y se genera en el sitio web de Google Fonts. El segundo es aplicar CSS con las reglas dadas mencionadas en la página web de las fuentes de Google. Por lo que por favor recuerde acerca de estos dos pasos. Por supuesto, para tus futuros proyectos, puedes seleccionar fuentes, lo que quieras. Hay un montón de fuentes en las fuentes de Google, así que siéntete libre de usar lo que quieras y cuando quieras. 9. Colocar elementos en la cuadrícula definida: En esta lección, nos vamos a centrar en la grilla. Vamos a colocar nuestros elementos del sitio web en consecuencia al diseño. Por último, tenemos algunas columnas y algunas secciones, por lo que sería mucho más fácil para nuestros ojos mirarlo. Así es como se ve nuestra página web actualmente,. Lo que necesitamos hacer es poner esos elementos en columnas. Si lo comparas con nuestro diseño, veremos que algunos elementos están cerca uno del otro y algunos están separados. Para hacerlo, vamos a usar grit de Bootstrap. ¿ Qué es Bootstrap? Bootstrap es un kit de herramientas de código abierto, es la biblioteca competente front end. Se trata de una herramienta muy grande y poderosa. No obstante, sólo vamos a usar un pedazo de la misma que es de rejilla. No vamos a codificar nosotros mismos la barra de cuadrícula. Vamos a usar una biblioteca y podemos ajustarla a nuestras propias necesidades. Facturar los diseños sería mucho más fácil. Si tienes curiosidad por el sistema de grit, puedes abrir la documentación que está disponible en getbootstrap.com. Se puede leer sobre la vieja teoría que se encuentra detrás de grid y Bootstrap. Pero te diré las cosas más importantes que debes saber para que funcione. Volvamos a nuestro documento HTML y centrémonos en HTML por un tiempo. Si abro toda la carpeta, veré que tengo Bootstrap grid CSS. Se puede ver algún código por ahí. Todo lo que está escrito aquí en CSS. Pero no quiero que lo analicen, lo memoricen, ni lo aprendan. Simplemente vamos a usar la cuadrícula que aquí se define. Si queremos utilizar esta hoja de estilo, también necesitamos vincularla en nuestro documento HTML. Tenemos nuestro styles.css, tenemos fuentes externas, pero también necesitamos bootstrap. Me gustaría vincularlo antes de mis estilos. La pregunta es por qué lo estoy haciendo antes o no como la última etiqueta de enlace? La respuesta es que la cuadrícula Bootstrap podría tener algunos estilos que pueden causar un conflicto que realmente puede sobrescribir nuestros estilos. Para que nuestros estilos sean más importantes, lo ponemos en el último lugar en cuanto a la hoja de estilo que tenemos. Estoy cambiando el nombre aquí. El archivo se llama cuadrícula bootstrap. Perdón, estoy volviendo a mi HTML. Yo lo estoy guardando. Se aplica mi cuadrícula bootstrap. A ver si no puedo ver ningún cambio. Bueno, en realidad, nada ha pasado todavía. Pero si cavo más profundamente en mi sección de código HTML y sombreros, veré que se aplica el CSS de la cuadrícula Bootstrap. La pregunta que podrías tener es cómo podemos usar la rejilla Bootstrap. En la documentación que nos muestran cómo se crean tres columnas, aquí podemos ver código HTML con algunos atributos, que son clases, clases CSS, y las vamos a usar también. El primer tag es div. ¿ Te acuerdas de div? Este es el contenedor. Esta es la etiqueta que es muy genérica y la podemos utilizar para diversos fines, principalmente para cosa de diseño, para colocar los elementos, anidación, etc. Tenemos div con un contenedor de clase, y abajo hay una fila. Clase de fila significa que todos los elementos, todas las columnas que se incluyen se mostrarán en una fila, lo que uno por uno, igual que aquí. Copiemos contenedor y dibujemos. Pongámoslos en nuestro documento HTML, pero antes de dónde vamos a revisar nuestro diseño. Estoy abriendo disposición de portafolio justo aquí. si lo agrando, verás que aquí está el contenedor y tengo dos columnas. Contenedor, fila, clases se aplicarían para la sección de encabezado. Tengo el encabezado. En el encabezado, estoy pegando estas dos líneas que copié de la documentación. Tengo el contenedor abierto, pero también necesito cerrar este div. Se cierra justo antes de que se cierre el encabezado. Entonces estoy agregando div, estoy haciendo tap aquí. Todo lo que se incluye como los hijos de este contenedor. Tengo fila Necesito fila para mostrar dos columnas cerca de un charter. También necesito cerrar la fila justo antes de un div. También anidando los elementos dentro de una charla. Puedo ver que todos estos elementos mencionados aquí, todos los hijos de fila. ¿ Qué es lo siguiente que se menciona en la documentación? Tenemos otra clase que se llama col-sm. Significa que esta es una columna y el ancho de las columnas se generaría automáticamente, dependiendo de cuántas columnas tengamos. Tomaremos todo el espacio que necesiten. Déjame copiarlo también. Si lo comparamos con el diseño, vemos que esta es una columna y esta es la segunda. Todo aquí como encabezado, lista y el patrón estaría en un div llamado col-sm. Todo aquí, lleno este lugar serán niños fuera este div, así que necesito cerrarlo. A pesar de que el siguiente contenido será otra columna. De nuevo, estamos pegando div y figura serían los hijos de este div. Recapitulemos lo que realmente sucedió. Haré que sea más adecuado para la pantalla. Tenemos el contenedor, empieza aquí y cierra aquí. Todo el encabezado está en un contenedor. ¿ Qué hace la clase en realidad? Bueno, ya lo verás en un minuto en el navegador web. Bajo contenedor, Tenemos una fila y fila nos ayuda a mostrar esos elementos cerca uno del otro. Tenemos una columna y la segunda. Podemos usar comentarios. Columna izquierda. Esta es la columna izquierda y debajo tenemos la columna derecha. Ahora es mucho más fácil seguir que esta es la columna de la derecha y esta es la columna de la izquierda. Siempre presta atención al impuesto sobre la ropa porque a veces es muy fácil meterse en tu código. Por lo que si haces clic en la etiqueta, verás que el subrayado azul, puedes ver fácilmente si esa etiqueta dada está realmente cerrada. Aquí, cuando estoy dando click en div, veo que esta es la etiqueta de apertura y en la línea 37, se está cerrando. Lo mismo con la columna derecha. Tengo etiqueta div apertura y cerrando la línea 45. Vamos a guardarlo. Veamos qué se genera en la página web. Cerraré las herramientas div y veré que en realidad tengo dos columnas. Si corro inspect, verás que se están estirando hasta el lado completo. Tan de ancho completo, por lo que ya no hay dos columnas separadas. Pero si cambio la posición de las herramientas div para hacer la resolución, el ancho del navegador de ventanas más grande, veré que caben. Que se exhiban uno por uno cerca uno del otro. Puedo ver que esta es mi columna izquierda y aquí mi columna derecha. Uno pensar que podemos ajustar a este nivel del diseño es cambiar el ancho, el tamaño en realidad de la imagen que ponemos para hacerla más pequeña para realmente llenar el ancho completo de las columnas. Volvamos al estilo CSS. Podemos escribir eso. Cada imagen que hemos mostrado en el sitio web tomaría el ancho máximo del contenedor. máximo de la imagen será del 100 por ciento de su padre. Significa que si la clase col-sm tiene aplicado un ancho específico, por ejemplo, 600 píxeles, la imagen, aunque es tamaño natural, es tamaño original es de 700 píxeles, no superará los 600 píxeles porque estamos limitando su ancho por esta línea de código. Vamos a escribirlo aquí. Aquí, te estoy mostrando cómo podemos hacer comentarios en CSS. Simplemente puedo escribir un texto, así que esto está limitando el ancho de la imagen, por lo que toma 100 ancho del máximo padre. Estoy destacando todo el texto, y de nuevo, comentario slash, así que todo escrito aquí es un comentario. Es un poco diferente porque en HTML tenemos estos personajes, y en CSS, tenemos slash y asterisco. Guardémoslo y actualicemos nuestro sitio web. De repente, se puede ver que la imagen se está haciendo más pequeña y se necesita todo el ancho de la columna, por lo que tenemos las dos columnas cerca una de la otra. El encabezado, digamos, está listo en cuanto a la grilla. Tenemos a la columna 1, la izquierda y la derecha, y todo está en una fila con el contenedor. Lo que hace el contenedor es que limita nuestro ancho y depende de las resoluciones de pantalla. Para pantallas más grandes, ese contenedor sería más grande, para más pequeño, sería más pequeño. Este es el diseño web responsive, y no vamos a entrar en detalles en este curso, pero voy a estar mencionando algunas cosas que puedes usar mientras usas Bootstrap. El encabezado está listo. Pasemos a diferentes partes del diseño. Si ves en el diseño aquí, tenemos la fila completa de la lista, así que podemos saltarla por ahora porque es solo el ancho completo y no tenemos columnas y no compartimos esta sección entre dos elementos, por lo que está bien para mí ahora. Estamos en los proyectos ahora por lo que vemos que tenemos dos columnas otra vez. Tenemos que hacer lo mismo, necesitamos aplicar la fila de contenedor y clase llamada columna col-sm. El proyecto 1, tenemos toda la sección, aplicamos un contenedor, tenemos la fila, así que tengo la columna izquierda aquí. Tendré la columna correcta, así que estoy escribiendo columna derecha. Haré más espacio para que sea más fácil de leer. Tengo la columna correcta y aplico clase col-sm. Tengo el div. Hagamos la intersección. Yo hice la sangría, mi col luce más limpio. A ver. Este es el inicio de la columna derecha, se cierra aquí. Este es el inicio de la columna de la izquierda. Aquí cierra. Tenemos que cerrar fila. Se puede ver que no está subrayado por la línea azul, lo que átomo nos da la información de que esta etiqueta, este div no está cerrada. Vamos a cerrarlo debajo de la columna derecha. Ahora bien, es correcto. También es necesario cerrar el contenedor div. Aquí mismo, yo haré la sangría. Una vez más y nuestro código se ve bien ahora. Tenemos izquierda, columna derecha, vamos a guardarlo y ver. Estoy de vuelta en el navegador, refrescando la página, y veo que la imagen está en la columna de la izquierda y todos los textos están a la derecha. Poco a poco nos recuerda el diseño al que estamos apuntando. Pongamos más contenido de los productos en columnas. Nosotros lo hacemos exactamente igual. Voy a reutilizar estas líneas de código y lo pegaré aquí. Estoy cerrando el div para la columna izquierda. Necesito agregar la siguiente columna, la imagen con el título, si puedes ver, esta va a ser nuestra columna correcta. Cerrando el div, sangría, y por supuesto, necesitamos doblar div de cierre para la fila uno contenedor. Si vemos contenedor está cerrado, fila está cerrada, y tenemos dos columnas. ¿ Qué debes recordar sobre estas clases de grid Bootstrap es que la fila es solo para usar para mantener columnas, por lo que no la usamos en ningún otro lugar. Si solo queremos mostrar columnas cerca una de la otra, usaremos fila, y esta es la única situación. Contenedor nos ayuda a mantener cierta anchura de la página. Ahorrando, cambio al navegador y veo que el segundo proyecto está dentro de dos columnas. Tenemos el último, el último proyecto. Nuevamente, podemos reutilizar el código que tenemos. Este es el proyecto 3, por lo que en la columna del lado izquierdo, tenemos la imagen. Por supuesto que necesitamos la columna correcta, comentar, pegarla. Por supuesto que necesitamos cerrar la columna correcta. El izquierdo ya está cerrado, hicimos sangría, y por supuesto cerrando fila. Ahora, tenemos que cerrar la fila porque es el hijo de un contenedor. Estamos cerrando fila, y aquí, estamos cerrando el contenedor. Déjame comprobar rápidamente si estamos bien. Sólo podemos agregar que esta es la columna correcta, ahorrando, refrescante. Veo que tengo secciones con columnas. Nos recuerda lentamente la disposición. Si quieres comprobar cómo se verían las columnas libres, puedes hacer la prueba. En el último proyecto, puedo copiar la columna correcta y simplemente duplicarla. Lo que espero de Bootstrap es mostrar tres columnas cerca una de la otra. Tengo tres columnas, así que más adelante es muy fácil multiplicar. Estas tres columnas son del mismo tamaño, del mismo ancho, están divididas. Si quieres cambiarlo, cambia las proporciones, por ejemplo, tener la foto más grande, veamos en la documentación de bootstrap. Estamos desplazando a la parte donde tenemos diferente ancho. Por ejemplo aquí, una columna es más ancha y la otra es estrecha. Aquí aplicamos ciertas proporciones. Imagina que tenemos 12 columnas pequeñas y simplemente las fusionamos para hacer más grande la columna. Si quisiera tener mi columna para realmente tomar la mitad del espacio disponible, estoy escribiendo seis porque seis a 12 es la mitad. Si quisiera aplicar esto en mi imagen aquí en el tercer proyecto, por lo que para la foto, escribo aquí col-6, y el otro automáticamente tomaría espacio disponible, lo que queda. Dividirán la mitad de todo el contenedor a esas dos columnas. Estoy actualizando el sitio web y veo que mi imagen es dos veces más grande que las columnas de sus becarios. Para el pie de página, estamos bien por ahora con eso porque el pie de página no usa dos columnas. Es igual que una pieza de diseño de una columna, un elemento de columna de diseño. Estamos casi listos para alinearnos con LMS, hay algunos ajustes que hay que necesitar. Pero por ahora, detengámonos con la grilla Bootstrap. Si estás ansioso por saber más sobre Bootstrap grid, te recomiendo encarecidamente que consultes la documentación. Hay muchos ejemplos de cómo se pueden crear diferentes giros de la columna, cómo se pueden apilar al modo horizontal, y finalmente, cómo trabajar en su lado receptivo de las rejillas. 10. 1/2 Colocar elementos en la cuadrícula definida: En esta lección, nos vamos a centrar en la grilla. Vamos a colocar nuestros elementos de la página web en consecuencia a la disposición. Por último, tenemos algunas columnas y algunas secciones, por lo que sería mucho más fácil para nuestros ojos mirarlo. Así es como se ve nuestro sitio web actualmente. Lo que tenemos que hacer es, tenemos que poner esos elementos en columnas. Si lo comparas con nuestro diseño, veremos que algunos elementos están cerca uno del otro, algunos están separados. Para hacerlo, vamos a usar grid de Bootstrap. ¿ Qué es Bootstrap? Bootstrap es un kit de herramientas de código abierto, es una biblioteca de componentes front-end. Se trata de una herramienta muy grande y poderosa. No obstante, sólo vamos a usar un pedazo de la misma que es de rejilla. No vamos a codificar la grilla por nosotros mismos. Vamos a usar la biblioteca y podemos ajustarla a nuestras necesidades, por lo que facturar los diseños sería mucho más fácil. Si tienes curiosidad por el sistema de grid, puedes abrir la documentación que está disponible en getbootstrap.com y puedes leer sobre la teoría más antigua que está detrás de grid y Bootstrap. Pero te diré las cosas más importantes que debes saber para que funcione. Entonces volvamos a nuestro documento HTML, y centrémonos en HTML por un tiempo. Si abro toda la carpeta, veré que tengo bootstrap-grid.css. Se pueden ver algunos códigos por ahí. Todo lo que está escrito aquí es CSS, pero no quiero que lo analicen, lo memoricen, ni lo aprendan. Simplemente vamos a usar la cuadrícula que aquí se define. Si queremos utilizar esta hoja de estilo, también necesitamos vincularla en nuestro documento HTML. Tenemos nuestro styles.css, tenemos fuentes externas pero también necesitamos Bootstrap. Me gustaría vincularlo antes de mis estilos. La pregunta es por qué lo estoy haciendo antes no como la última etiqueta de enlace, la respuesta es que la cuadrícula Bootstrap podría tener algunos estilos que pueden causar un conflicto que realmente puede sobrescribir nuestros estilos. Para que nuestros estilos sean más importantes, lo ponemos en el último lugar en cuanto a la hoja de estilo que tenemos. Estoy cambiando el nombre aquí, el archivo se llama bootstrap-grid. Estoy volviendo a mi HTML, estoy guardando y se aplica mi cuadrícula bootstrap. A ver si no puedo ver ningún cambio. Bueno, en realidad, nada ha pasado todavía pero si cavo más profundamente en mi código HTML en la sección de cabeza, veré que se aplica bootstrap-grid.css. La pregunta que podría tener es, ¿cómo podemos usar bootstrap grid? En la documentación que nos muestran cómo se crean tres columnas, aquí podemos ver código HTML con algunos atributos, que son clases CSS y las vamos a utilizar también. El primer tag es div, ¿te acuerdas de div? Este es el contenedor, esta es la etiqueta que es muy genérica y lo podemos utilizar para diversos fines, principalmente para cosa de diseño, para colocar los elementos, anidación, etc. Tenemos div con un contenedor de clase y abajo hay una fila. Clase de fila significa que todos los elementos, todas las columnas que se incluyen se mostrarán en una fila, lo que uno por uno al igual que aquí. Copiemos contenedor y fila y pongámoslos en nuestro documento HTML, pero antes vamos a revisar nuestro diseño. Estoy abriendo disposición de portafolio justo aquí. Si lo agrando, verás que aquí está el contenedor y tengo dos columnas. Contenedor, fila, clases se aplicarían para la sección de encabezado. Tengo el encabezado, y en el encabezado estoy pegando estas dos líneas que copié de la documentación. Tengo el contenedor abierto, pero también necesito cerrar este div. Se cierra justo antes de que se cierre el encabezado. Estoy agregando div, toca aquí. Todo lo que está incluido son niños de este contenedor. Tengo fila, necesito fila para mostrar dos columnas cerca de una charla. También necesito cerrar la fila justo antes de un div, pero también anidaré en los elementos dentro de una charla. Está bien. Puedo ver que todos estos elementos aquí mencionados son hijos de fila. ¿ Qué es lo siguiente que se menciona en la documentación? Tenemos otra clase que acabaría de llamar col-sm. Significa que esta es una columna y el ancho de las columnas se generaría automáticamente dependiendo de cuántas columnas tengamos, por lo que tomarán tanto espacio como necesiten. Déjame copiarlo también. Si lo comparamos con el diseño, veremos que esta es una columna y esta es la segunda. Todo aquí como encabezado, lista, y el botón estaría en un div llamado col-sm. Todo aquí hasta este lugar serán hijos de este div, así que necesito cerrarlo. El siguiente contenido será otra columna. De nuevo, estamos pegando div y figura serían los hijos de este div. Recapitulemos lo que realmente sucedió, lo haré más adecuado para la pantalla. Tenemos el contenedor, empieza aquí y cierra aquí. Todo el encabezado es un contenedor. ¿ Qué hace esta clase en realidad? Bueno, ya lo verás en un minuto en el navegador web. Debajo de contenedor tenemos una fila, y la fila nos ayuda a mostrar esos elementos cerca uno del otro. Tenemos una columna y la segunda. Podemos usar comentarios, columna izquierda, esta es la columna izquierda y debajo tenemos la columna derecha. Ahora es mucho más fácil de seguir, que esta es la columna de la derecha y esta es la columna de la izquierda. Siempre presta atención a las etiquetas de cierre porque a veces es muy fácil meterse en tu código. Si haces clic en la etiqueta verás el subrayado azul, puedes ver fácilmente si la etiqueta dada está realmente cerrada. Aquí cuando hago click en “div”, veo que esta es la etiqueta de apertura y en la línea 37 se está cerrando. El mismo con la columna derecha, tengo abriendo la etiqueta y cerrando la línea 45. Vamos a guardarlo. Veamos qué se genera en la página web. Cerraré las DevTools y veré que en realidad tengo dos columnas. Si corro Inspect, verás que se están estirando hacia el lado completo, así que ancho completo. Ya no hay dos columnas separadas pero si cambio la posición de las DevTools para hacer más grande el ancho del navegador de ventanas, veré que encajan y que se muestran una por una cerca de la otra. Puedo ver que esta es mi columna izquierda y aquí mi columna derecha. Algo que podemos ajustar a este nivel del diseño es cambiar el tamaño de la imagen que ponemos, para hacerla más pequeña para realmente llenar el ancho completo de las columnas. Volvamos al estilo CSS. Podemos escribir que cada imagen que hemos mostrado en el sitio web tomaría el ancho máximo del contenedor, por lo que máximo de su imagen será 100 por ciento de su padre. Significa que si la clase col-sm tiene un específico con aplicado, por ejemplo 600 píxeles, la imagen aunque su tamaño original es de 700 píxeles, no superará los 600 píxeles porque estamos limitando su ancho por esta línea de código. Vamos a escribirlo aquí. Aquí te estoy mostrando cómo podemos hacer comentarios en CSS. Simplemente puedo escribir un texto, así que esto está limitando el ancho de la imagen. Se necesita 100 ancho del máximo padre. Estoy destacando todo el texto y de nuevo comentarios slash, así que todo escrito aquí es un comentario. Es un poco diferente porque en HTML tenemos estos personajes y en CSS tenemos barras y asteriscos. Está bien. Guardémoslo y actualicemos nuestro sitio web. De repente se puede ver que la imagen se está haciendo más pequeña y se necesita todo el ancho de la columna. Tenemos las dos columnas cerca una de la otra. El encabezado, digamos que está listo en cuanto a la grilla. Tenemos la columna uno, izquierda, y derecha, y todo está en una fila con el contenedor. Lo que hace el contenedor, es que limita nuestro ancho y depende de las resoluciones de pantalla. Para pantallas más grandes el contenedor sería más grande, para más pequeño sería más pequeño. Este es el diseño web responsive y no vamos a entrar en detalles en este curso, pero voy a estar mencionando algunas cosas que puedes usar mientras usas Bootstrap. 11. 2/2 Colocar elementos en la cuadrícula definida, parte 1: El encabezado está listo, vamos a cambiar a diferentes partes del diseño. Si verías en el diseño aquí, tenemos la fila completa de la lista. Podemos saltarlo por ahora porque es solo un ancho completo y no tenemos columnas y no compartimos esta sección entre dos elementos, así que está bien por ahora. Estamos en los proyectos ahora, así que vemos que tenemos dos columnas otra vez, tenemos que hacer para decir que necesitamos aplicar la fila y clase de contenedor llamada col-sm. En el proyecto uno, tenemos toda la sección. Aplicamos un contenedor, tenemos la fila. Tengo aquí la columna izquierda, tendré las columnas correctas, así que estoy escribiendo columna derecha. Haré más espacio para que sea más fácil de leer. Tengo la columna correcta y aplico clase col-sm. Tengo el div, hagamos la intersección. Yo hice la sangría, mi código se ve más limpio, y vamos a ver. Este es el inicio de la columna derecha, se cierra aquí. Este es el inicio de la columna de la izquierda , más cerca aquí, casi allá. Tenemos que cerrar fila. Se puede ver que no está subrayado por la línea azul, lo que nos da la información, Atom nos da la información. Ahí está esta etiqueta, este div no está cerrado. Vamos a cerrarlo en la columna derecha. Ahora es correcto y también necesitas cerrar el contenedor div. Aquí mismo, voy a hacer la sangría, una vez más y nuestro código se ve bien ahora. Tenemos columna izquierda, derecha. Guardémoslo y veamos. Estoy de vuelta en el navegador actualizando la página y veo que la imagen está en la columna de la izquierda y todos los textos están a la derecha. Poco a poco nos recuerda el diseño al que estamos apuntando. Pongamos más contenido de los proyectos en columnas. Nosotros lo hacemos exactamente igual. Voy a reutilizar estas líneas de código y lo pegaré aquí. Estoy cerrando el div para la columna izquierda. Necesito agregar la siguiente columna. Esa imagen con el título, si puedes ver, esta va a ser nuestra columna correcta. Cerrando el div, sangría, y por supuesto necesitamos doblar div de cierre, por lo que para fila y contenedor. Si vemos, contenedor está cerrado, fila está cerrada, y tenemos dos columnas. Lo que hay que recordar sobre estas clases desde grid bootstrap es que fila es solo para usar para mantener columnas, por lo que no la usamos en ningún otro lugar. Si solo queremos mostrar columnas cerca una de la otra, usaremos fila y esta es la única situación. Contenedor nos ayuda a mantener cierta anchura de la página. Ahorrando. Cambio al navegador, y veo que el segundo proyecto está dentro de dos columnas. Tenemos el último, último proyecto. Nuevamente podemos reutilizar el código que tenemos. Este es el proyecto 3. En la columna del lado izquierdo tenemos la imagen, y necesitamos la columna del lado derecho, la columna derecha , el comentario, el ritmo, y por supuesto necesitamos cerrar la columna derecha. El izquierdo ya está cerrado, podemos hacer indentación y cierre de contenedor. Tenemos que cerrar la fila porque es el hijo de un contenedor, así que estamos cerrando fila, y aquí estamos cerrando el contenedor. Déjame comprobar rápidamente si estamos bien. Aquí sólo podemos agregar que esta es columna correcta, guardando, refrescante, y veo que tengo secciones con columnas y nos recuerda lentamente el diseño. Si quieres comprobar cómo se verían las tres columnas, puedes hacer la prueba. El último proyecto, puedo copiar la columna correcta y simplemente duplicarla, y lo que espero de bootstrap es mostrar tres columnas cerca una de la otra. Ahora tengo tres columnas. Más adelante es muy fácil multiplicarse. Estas tres columnas son del mismo tamaño, del mismo ancho, están divididas. Si quieres cambiarlo, cambia las proporciones, por ejemplo, ten la foto más grande. Veamos en la documentación de bootstrap, nos estamos desplazando a la parte donde tenemos diferente ancho. Por ejemplo aquí, una columna es más ancha y la otra es estrecha. Aquí aplicamos ciertas proporciones. Imagina que tenemos 12 columnas pequeñas y simplemente las fusionamos para hacer más grande la columna. Si quisiera tener mi columna para realmente tomar la mitad del espacio disponible, estoy escribiendo seis porque seis a 12 es la mitad. Si quisiera aplicar esto en mi imagen aquí en el tercer proyecto, por lo que para la foto, escribo aquí col-6, y el otro automáticamente tomaría espacio disponible, lo que queda. Dividirán la mitad de todo el contenedor a esas dos columnas. Estoy actualizando el sitio web y veo que mi imagen es dos veces más grande que sus compañeros columnas. Para el pie de página, estamos bien por ahora con eso porque el pie de página no usa dos columnas, es justo como una columna, una pieza de diseño, un elemento de columna de diseño. Estamos casi listos para alinear los elementos. Hay algunos ajustes que hay que necesitar, pero por ahora vamos a parar con bootstrap grid. Si estás ansioso por saber más sobre bootstrap grid, te recomiendo encarecidamente que consultes la documentación. Hay muchos ejemplos de cómo se pueden crear diferentes anchuras de la columna, cómo se pueden apilar en modo horizontal, y finalmente, cómo trabajar en su lado receptivo de la cuadrícula. 12. Diseñar la navegación: En esta lección, vamos a aplicar algo de magia CSS para que nuestro sitio web parezca mucho más familiar al proyecto que tenemos. Nos vamos a hacer cargo de la navegación en la parte superior del documento. Si lo comparamos con el proyecto, veremos que la navegación está en la parte superior, que cada elemento de la lista se muestra horizontalmente, por lo que están cerca uno del otro, no debajo del otro. También lo que no se ve aquí bajo imagen estática, me gustaría tener mi navegación fija en la misma parte superior. Va a ser una navegación pegajosa, y vamos a aprender en CSS a hacerlo. Estamos volviendo al átomo, y voy a rehacer rápidamente mis columnas en átomo para ver estilos aquí. Tengo estilos listos. Mi navegación tiene un color azul, déjame copiarlo del contenido txt, cual tiene todos los valores listados ahí. Si cambio al contenido txt, voy a ver en la parte inferior que tengo el color para la navegación. Es el código hexadecimal, puedo copiarlo, y voy a usar en CSS. Tenemos la navegación, si cambio a mi página web, veré que esto es todo el nav. ¿ Qué pasa con aplicar un color de fondo. Creo un selector para nav, justo en el DevTools, y aplico color de fondo, lo siento colores, me falta tipográfico aquí, color de fondo. Estoy pegando el valor del color. Puedo ver que es azul, fantástico. Puedo copiar a todo selector y aplicarlo en mi CSS, y guardarlo, y está listo. Si actualizo el cambio se guarda. Qué podemos hacer con la lista para que sea similar a la navegación que tenemos en el proyecto. Necesito mencionar algo, que se llama propiedad de visualización en CSS. Por defecto, cada elemento de lista, cada li, se muestra como un elemento de bloque por defecto. Elemento de bloque significa que toma el ancho completo del contenedor. Si ves el resaltado azul en las DevTools, descubrirás que realmente toma todo el espacio que tiene, o luego hace cierto contenedor. Necesitamos cambiar esta propiedad de visualización de bloque a bloque inline-block, lo que significa que el elemento de lista tomará sólo el espacio que necesita para que se muestren los contenidos. Si creo un selector ul li, y escribo aquí display inline-block, verás que todos mis elementos están cerca uno del otro. Se muestran verticalmente, y si navego en las DevTools, verás que sólo se necesita el ancho que en realidad define el contenido. Si agrego aquí un texto más largo, el ancho sería más grande, porque el contenido, es más largo. En la visualización de bloques, no importa cómo se vea nuestro contenido, porque siempre toma 100 por ciento de ancho del contenedor. Nos gustaría aplicar la propiedad display in-line block, pero no queremos mostrar en cada elemento de lista que tenemos en nuestra página web, porque tenemos diferentes secciones. Por ejemplo, aquí, también tenemos una lista que en el proyecto, que los elementos dados se muestran verticalmente. Podemos hacerlo creando un selector complejo, lo que significa que solo aplicaremos ciertos CSS a los elementos li, de la lista desordenada que existe en la etiqueta nav. Hará que nuestro alcance CSS sea más estrecho, por lo que display inline-block se aplicaría a la lista que solo se incluye en la etiqueta nav, solo a esta. Lo estoy guardando, refrescante, y ver que esta lista está intacta, nada ha cambiado. Pero si inspeccionamos el código y miramos lo que está pasando aquí, veremos en la pestaña de la computadora, que hay algunos márgenes aplican y algunos remeros, y nos gustaría restablecerlo totalmente a cero. lo que podemos hacer, en realidad podemos escribir margen: 0; relleno: 0; para esta lista dada. Refresca, déjame simplemente guardarlo, refrescar y ver que el elemento de lista, no tienen ningún margen. Pero los márgenes que vemos, en realidad, vienen de ul. Escribamos ul, vamos a copiar CSS, y finalmente, nuestros márgenes se han ido. Pero sí tenemos algunos márgenes del cuerpo, realidad son ocho píxeles de cada uno de los sitios, se puede ver el borde naranja. Aplicamos la misma técnica, en realidad podemos agregar ese cuerpo y ul, tienen margen: 0; relleno: 0; También podemos cambiar el lugar de la misma en su cuerpo, por lo que será mucho más consistente en cuanto al código. Lo estoy guardando, refrescante, y veo que mi navegación comienza al principio mismo de los bordes del navegador de ventanas, que es el comportamiento que quiero que logre. Veamos cómo se ve la navegación en nuestro proyecto. Tenemos algo de espacio y toda la navegación está centrada. Tratemos de aplicar esto. Podemos hacer identificación de centrado de diversas maneras. En realidad, puedes centrar algunos elementos en CSS de varias maneras, hay algunos métodos diferentes. Lo que voy a hacer es, voy a añadir sólo nav ul, y aquí arriba margen: 0 auto; lo que significa que este, el primer lugar, se refiere a arriba e abajo, por lo que los márgenes en la parte superior e inferior de la lista, y esto a la derecha y a la izquierda. Auto significa que se ajustará automáticamente, por lo que centrará naturalmente nuestro elemento. Lo estoy guardando, y vamos a ver. Lo último que tenemos que hacer es centrar todo el elemento. Por lo que aplicamos text-align center y gracias a ello, nuestra lista está en el centro de la sección de navegación. Déjame simplemente copiar la última línea, aplicarla, y tenemos nuestra navegación centrada. En realidad podemos aplicar relleno para hacer más espacio alrededor de toda la lista. Podemos aplicar relleno 30 pixels y tenemos la navegación más grande. Lo estoy copiando, pegando, ahorrando y nos estamos acercando. Lo que también es importante es que necesitamos algún espacio entre los elementos de la lista, así que alinearnos. Para esto, también podemos usar margen. Si tenemos dos posiciones, la primera se refiere a arriba e abajo, y la segunda a izquierda y derecha. Entonces si aplico 10 pixeles, verás algunos espacios a su alrededor. Vamos a probar si podemos editar más grande. Sí, se ve mejor. Entonces lo estoy copiando. Ahora si todos se alinean. Yo puedo hacer a los comentarios aquí, ese cero se refiere a arriba e abajo y 15 píxeles a la izquierda y a la derecha. Puedo hacer mi ventana más grande y alterar la warp suave, por lo que será más fácil de leer. Tenemos nuestros comentarios listos, tenemos margen aplicado y ¿qué sigue? Mencioné que nos gustaría tener esta navegación pegajosa. Entonces necesitamos arreglar la posición y para esto, vamos a usar la propiedad CSS que se llama posición. Para toda la navegación, necesito aplicar posición fija. Cosas extrañas le sucedieron a mi maquetación, pero no se preocupe por ahora. Puedo ver que aunque me desplaza, mi navegación sigue en la misma posición. Desafortunadamente, está detrás de todos los demás elementos. Se parece a las capas pero nos gustaría mantener la navegación en la parte superior. Para esto, usamos z-index. Le dice al navegador qué capa debe tomar este elemento. Cuanto más grande y el número sea, el frente será el elemento. Entonces si yo a una, será más grande desde cero porque cero es el valor predeterminado. Si a las cinco, sigue siendo lo mismo porque es más grande que cero y estará en la parte superior de los demás elementos. Entonces tengo z-index 1 y lo que me gustaría hacer es estirar la navegación a toda la anchura. Por lo que escribo ancho 100 por ciento, y mi navegación es fija. Puedo copiar esto y pegar al selector de navegación. Lo que podrías observar es que el contenido bajo navegación, por lo que todo desde el encabezado está recortado porque está oculto por la navegación. Lo que necesito hacer es aplicar algún margen desde el encabezado, pero vamos a usar algunas nuevas propiedades CSS. En primer lugar, crea selector a partir del encabezado y vamos a escribir, top 70 pixels. Significa que nuestro contenido comenzará en realidad 70 píxeles por debajo de su posición natural. Por lo que obtendríamos un espacio en blanco en la parte superior. También necesitamos posicionar relativo porque propiedades como arriba, abajo, derecha e izquierda funcionan sólo cuando se aplica la posición relativa o absoluta. Por favor, recuerda al respecto. Tenemos posición relativa la cual nos ayuda a colocar relativamente el elemento. O sea, usa su posición natural y la toma como punto cero. Entonces si quieres cambiar la posición por 70 píxeles de izquierda o derecha, puedes usarlo así como esto. Trataría este punto como punto cero porque es el lugar natural del elemento, pero queremos que lo mantenga arriba 70 por ciento. Ahora puedo ver que tengo algo de espacio para la navegación y está arreglado. Por lo que funciona como un giro. Pero también podría aumentarlo a 110 para tener más espacio en blanco disponible. Nuestro encabezado es un elemento nuevo, por lo que puedo pegarlo bajo nav. Lo estoy guardando y veo que se apliquen mis cambios. Lo último para la navegación por ahora, es cambiar las letras a mayúsculas y podemos hacerlo también con CSS. Por lo que aplico una propiedad CSS específica para el elemento de lista que se llama text-transform, y queremos transformarlo en mayúsculas. Ahora cada elemento, cada letra está escrita en mayúsculas. También podemos aumentar el espaciado entre letras usando la propiedad espaciado entre letras por ejemplo, en un píxel. Se verá más bien en cuanto a tipografía. Estoy copiando estas dos nuevas líneas y aplicando en estilo CSS 27th line, guardándola, refrescante y veo que mis cambios se mantienen. Si lo comparas con el proyecto, vemos que tenemos esta línea única. Por ahora, saltémoslo y vamos a guardarlo para los retoques finales al final del curso. Ahora nos enfocaremos en el siguiente elemento que es el encabezado de la página web. 13. Ajustar el encabezado: Es hora de enfocarnos ahora en el elemento de cabecera de nuestra página web. Lo que vamos a hacer es cambiar el tamaño del encabezado y cuidar la lista y del botón, y aquí está pasando algo raro, así que no te preocupes, vamos a cubrir todo y también vamos a aplicar el fondo al encabezado. Esto es algo a lo que estamos apuntando. Si echas un vistazo a la carpeta de activos del portafolio, verás los tamaños de fuente, por lo que sabrás que usé 100 pixels para el h1 en 15 pixels para las etiquetas de cuerpo, por lo que podemos aplicarlo fácilmente en nuestro CSS. Cambié a atom, estoy cerrando ventanas innecesarias así que por ahora, nos vamos a centrar sólo en CSS. Permítanme aumentar la ventana. Mencioné que para h1 que es en documento de hora estamos usando tamaño de fuente 100 pixels. Para un cuerpo, utilizamos 15 píxeles para que podamos definir que todo el cuerpo tendrá 15 píxeles, y si es una navegación para cada uno de los elementos, utilizamos 14 píxeles. Vamos a referirnos a un sitio web y tenemos un encabezado muy grande y una altura de línea muy grande, así que vamos a cambiarlo a un valor óptimo que es 150, copio pegar h1 150. ¿ Qué más quiero hacer? En realidad esta altura de línea es más grande de lo que planeé, así que tal vez podamos cambiarla a 130. Sí, está más cerca del proyecto. Para los retoques finales, podemos experimentar más adelante. Pero ahora me gustaría centrarme en lo menos aquí y en estas cosas extrañas que suceden. Inspeccionemos y veamos qué pasa con el encabezado. Cambié la posición del encabezado usando top. De lo que hace, cambia la posición real del encabezado, pero deja a los demás elementos en el mismo lugar. Como se puede ver en el lado izquierdo, lista se queda en el mismo lugar sin importar si comento fuera valor superior o no. Por lo que necesitamos reportar algún cómo, esta es una solución fácil para hacerlo, solo voy a agregar margen inferior con el mismo valor que solicité para la parte superior. Entonces son 110 pixels y voy a ver que en realidad está mejorando. También puedo aumentar el margen para que se vea más suave y en algún espacio en blanco. Entonces digamos 160 o tal vez 220, se ve mucho más mejor, así que lo estoy copiando y pegando al selector de encabezado. Cuidemos esta lista. Nos gustaría quitar esos puntos de bala en primer lugar y también hacer que la fuente sea apropiada. Entonces en realidad cometí un error porque aplicé lista de habilidades no a esta sección, si comprobamos aquí, tengo IBM Plex y en mi página web tengo inknut antiqua, así que necesito cambiarlo. Rápidamente vamos a rehacer esto en HTML, detente conmigo. Esta lista de habilidades de clase en realidad debería aplicarse a este. Perdón por la confusión. Creo que todo debe ser correcto ahora mismo. Entonces estoy refrescante a página web y se ve bien. Lo que me gustaría hacer con este impuesto es para aparecer más y altura de línea, y también quitar esos puntos de bala. Cómo puedo hacer esto, bueno, crearé un selector genérico para lista de elementos más antiguos en una lista ordenada, así que es de estilo lista, ninguno, y eliminará esas balas. Así. Puedo pegarlo bajo h1, y otra cosa es que me gustaría aumentar el margen. Puedo tener margen en la parte superior y la inferior para que se vea más cerca de nuestro diseño. Estoy copiando y pegando. Botón, queremos darle estilo al botón y además le agregamos algunos márgenes. Para una etiqueta, así que para nuestro enlace que está aquí, crearía una clase. Sería mucho más fácil para nosotros tenerlo bajo control, así que volvamos a CSS y tengo botón, y aquí puedo aplicar algunos estilos. Si reviso el proyecto, parece botón, por lo que tiene esquinas redondeadas, tiene border-radio, y tiene el borde en general. Vamos a aplicar frontera. Un píxel, sólido, es negro. Vamos a salvarlo y a ver, no ha pasado nada. Creo que sé por qué porque no he guardado archivo HTML. Por favor recuerda siempre que debido a cambios en CSS HTML, debes guardar ambos archivos. Ahora, tengo la frontera, no me gusta que mi texto tenga que subrayar, así que puedo aplicar subrayado de etiqueta text-decoration. No, lo siento, quiero restablecer esto, no es ninguno, color para ser negro, y me gustaría agregar algo de relleno. Por ejemplo, 10 píxeles, 20 píxeles, es mejor y también margen desde la parte superior. Estoy escribiendo margen superior como 30 pixeles. El margen no se aplica y la respuesta a esta pregunta por qué no se aplica es en realidad A es elemento en línea. ¿ Qué significa? Significa que sólo podemos afectar todo lo que ha sucedido en la línea horizontal y no en vertical, por lo que no podemos aplicar ningún valor en la parte superior o en la inferior. Para que funcione, necesitamos cambiar la visualización de inline que está por debajo del valor predeterminado para A a inline-block. Ahora, podremos cambiar los márgenes en la parte superior e inferior dicho a la altura del elemento. Estoy copiando todos los estilos que aplicé, pegándolo, guardando, refrescante, y asiento que aún están aquí. Perfecto. Pero también necesitamos establecer radio de frontera. Podemos hacer esto usando border-radius, digamos 20 píxeles, creo que es suficiente. También voy a aumentar un poco ese relleno de la derecha y la parte superior a la tercera de píxeles, y se ve bastante cool. Refresca y nuestra página web está cada vez mejor. Recuerdo que también necesitamos cambiar el título grande a un tamaño más pequeño. Podemos ver en el archivo de tamaño de fuente que tiene 10 píxeles, así que vamos a crear selector de subtítulo de fig y enviar a tamaño de fuente a 10 píxeles. Estoy actualizando la página y veo que se suministren mis cambios. Estoy revisando ahora el proyecto, el portafolio, lo que más falta es seguro la caja, la sombra en la imagen y el fondo. Vamos a cubrir esto en la siguiente lección. 14. Agregar una imagen de fondo y sombra al contorno: Ahora vamos a trabajar en el fondo. Podemos aplicar color de fondo y podemos aplicar imagen de fondo. Si revisas nuestra carpeta de imágenes en el portafolio, verás que tenemos archivo PNG de fondo. Vamos a utilizar este archivo para aplicar el fondo del brezo. Cambiemos a Atom en [inaudible]. Ahora me estoy centrando en el encabezado. Busco cabecera. Si buscas algunas clases de selector o CSS, puedes usar Control o Comando F para encontrarlo. Tengo el encabezado y me gustaría aplicar aquí un fondo. Vamos a aplicar imagen de fondo. Aquí está la regla. Tienes que escribir su URL. Se va a incluir el camino del elemento. Echemos un vistazo rápidamente a la carpeta que tenemos. Nuestro fondo es una carpeta IMG, pero estamos editando el archivo que está en estilo CSS, así que está en carpetas, CSS. lo que tenemos que hacer, actualmente estamos en carpeta CSS, estamos editando estilo CSS. Para llegar a la imagen, al archivo de fondo, necesitamos salir de esta carpeta. Tenemos que dar un paso atrás, volver atrás. Estamos en este nivel y luego necesitamos entrar a IMG y podemos ver fondo PNG. Cómo realmente lo escribimos en código. Bueno, volviendo al nivel más alto de la estructura, usamos dos puntos y una slash. Significa que nos estamos bajando de la carpeta CSS, y de repente estamos aquí. Tenemos que entrar al IMG. Simplemente escribo IMG y luego nombre de la imagen. Se llama background.jpg. Yo lo guardé. Vuelve al sitio web, actualízalo, y ve que no se genere mi fondo. Déjenme revisar dos veces. El caso es que el fondo tiene extensión PNG, así que necesito cambiarlo, guardarlo, refrescar y puedo ver que en realidad se aplican dos franjas azules. El caso es que se repite el trasfondo. Si deseas eliminar esta funcionalidad, eliminar esta propiedad, tenemos que definir repetición de fondo, no repetición. Por lo que nuestros antecedentes ya no se repetirán. También quisiera agregar la posición de nuestros antecedentes. Podemos ver que el encabezado no está cumpliendo la navegación que tenemos como el espacio disponible, por lo que podemos cambiar la posición del encabezado de 110 a, por instancia, 70 píxeles. Nav y cabecera lo harían obturador, por lo que se vería mucho más bonito. Estoy copiando todo el código para cabecera, basándolo. Veo que mi antecedente se está acercando. Ahora estoy teniendo mis herramientas de Desarrollador en la parte inferior. Tendré mucho más ya sea control para ver cómo se comporta el fondo. Para cambiarlo, en realidad necesitamos ajustar el tamaño de fondo. Este es el tamaño original del fondo. Tenemos que estirar y podemos hacerlo aplicando tamaño de fondo. Si aplico cubierta, se va a estirar todo el diagrama para cubrir el área. En nuestro proyecto, el fondo termina en algún lugar aquí. También necesitamos agregar posición de fondo Y. Por instancia, experimentaré con ella. Es demasiado. Algo como esto o esto. Sí. nos estamos acercando. Mantengámoslo de tal manera que se cubra nuestro tamaño de fondo. Se llenará todo el contenedor. También vamos a cambiar la posición del eje Y que es vertical. Necesito copiar estas dos nuevas propiedades CSS. Volver a Atom, pegarlos, guardar, refrescar, puedo cerrar herramientas de Dev para tener una mejor vista. Ahora mi encabezado se ve mucho más mejor. El siguiente cosa que me gustaría aplicar es la sombra de caja en la imagen. Sombra de caja es otra propiedad CSS genial. Abramos herramientas div. Ahora podemos cambiarlo a esta posición. Podemos editar para esta imagen, para esta actual y solo esto porque las otras imágenes, no tienen sombra de caja en el proyecto. Necesitamos agregar una clase CSS para diferenciarla de alguna manera. Estoy en mi documento HTML y busco una imagen que sea la columna correcta. Añadamos imagen de intro de clase. En CSS, estoy agregando imagen de intro de clase y agregando sombra de cuadro. La sombra de caja tiene valores libres, primero, cómo se coloca en el X, el segundo eje Y, qué tan borrosa debe ser y cuál debe ser el color. Vamos a usar algo de transparencia, así que vamos a usar RGBA. RGB, ya notas es de rojo, verde y azul y A es el canal alfa responsable de la transparencia. Recuerdo ese color negro dentro de RGB, es cero, cero, cero. El último son los canales alfa de lo transparente que es nuestro color, podemos escribir aquí, 20 por ciento. Yo lo estoy guardando. A ver. Se aplica mi sombra. Lo que puedo ver aquí es que está recortado, así que puedo aplicar algún margen superior para hacer más espacio desde arriba y también margen abajo para que el texto a subtítulo se vea un poco mejor. Yo lo estoy copiando. Estoy copiando y agregando a la clase llamada intro, IMG, refrescante, ya tengo mi encabezado de caja. ¿ Qué más falta? Creo que estamos muy cerca del proyecto. Podemos saltarnos otros ajustes para trabajar en la siguiente sección, que es la lista. Vamos a hacer esto en la siguiente lección. 15. Aplicar estilo a la lista y proyectar secciones: Centrémonos ahora en la sección con la lista que está mencionando todas las habilidades que tiene Jane. Como podemos ver, está centrado y tiene un tamaño de fuente más grande, que es de 50 píxeles. Volvamos a nuestro código. Para ello, tenemos la lista de habilidades aplicada. Tengo nueva clase lista ya que está en otro lugar, sí, está aquí, pero está bien aquí combinamos algunos selectores y clases. Pero estas propiedades se aplicarán solo las primeras listas de habilidades, por lo que está bien crear un nuevo objeto CSS bajo cada clase que tengamos antes. Queremos centrar el texto con seguridad y lo hacemos por text-align center, corrige y queremos aumentar el tamaño de fuente a 50 pixels, y vamos a refrescar nuestro sitio web. Se ve mucho más mejor, disminuiría el margen y la altura de línea porque es bastante grande para la lista de habilidades. Tenemos listas de habilidades y vamos a esconder la línea de suministro como 150 por ciento, que se ve mucho mejor y también podemos aplicar margin-bottom de la lista, como 60 píxeles o tal vez más grande, 100 píxeles o tal vez 130, así que tendremos mucho más espacio entre los elementos. Lo estoy copiando y pegando a la clase que ya tengo. Vamos a refrescarnos, y así es como se ve nuestra lista. Debes admitir que fue bastante fácil de arreglar. El apartado de encabezado casi está hecho, la lista está hecha. Ahora es el momento de cuidar los proyectos. Podemos con seguridad quitar la columna frontal porque era sólo con fines de demostración. Voy al fondo del proyecto, es proyecto 3, tercer proyecto, estoy quitando la columna adicional que no necesito. Está bien. En lo que necesito trabajar ahora es cambiar definitivamente el tamaño de los encabezamientos o en realidad se hace? No, aún no está hecho. Debe ser de 50 píxeles. Yo también trabajaría en la altura de línea para el rubro, para el párrafo y para el fondo también. La buena noticia es que podemos reutilizar la clase que utilizamos para este botón y aplicarla en todas partes que necesitemos. Para todos leer más, ocho impuesto. Volvamos a CSS, mencioné que para h2, queremos tamaño de fuente 50 pixels. Aquí tengo h1. Para que el código sea fácil de leer, bajo h1 creamos selector h2, así que estoy escribiendo tamaño de fuente 50 pixels y altura de línea, digamos 130 por ciento. Lo estoy guardando y veo que mi fuente se incrementa. Veo que hay una diferencia en el font-weight que éste es más delgado. Yo quisiera quitar esta audacia del rubro. Podemos hacerlo aplicando fuente para h1&h2 porque por defecto cada encabezado tiene negrita de peso de fuente. Queremos tenerlo font-weight normal. Ahora hay una diferencia. Permítanme comprobar rápidamente los tamaños de fuente. Abrí el documento de tamaño fuente y vi que en realidad nuestros encabezados h2 deberían tener 30 pixeles, no 50, así que necesitamos corregirlo, así que h2 tendrá 30 pixeles y ahora se ve mucho más mejor. Vamos a aplicar a cada párrafo más grande linea-altura, como 160 por ciento así que tenemos p, line- altura, 150 por ciento y ahora es mucho mejor. El siguiente es aplicar botón de clase a un texto. En HTML para el primer proyecto, que está aquí, tengo href por lo que aplicamos el siguiente atributo, que es clase, y aplicamos fondo. Lo estoy guardando, refrescante y ver que el botón funciona aquí. También me gustaría aplicar este azulejo para este botón o para ese, que en realidad no está aquí por lo que necesitamos colocarlo también. Lo estoy copiando, buscando el siguiente, está aquí. En ahi p también estoy teniendo botón. Lo que no me gusta es que todo está muy apretado, así que me gustaría dar más espacios entre proyectos. Podemos hacer esto aplicando clase CSS para disecciones. Si lanzamos herramientas def, verás que tenemos esta sección para el proyecto 1, el proyecto 2, el proyecto 3. Para todos ellos podemos aplicar clase, aumentará los márgenes en la parte superior y en la inferior. Lo que hago en este momento, estoy volviendo al primer proyecto y agregando proyecto de clase. Estoy copiando el atributo, sección y el siguiente. Ahora cada sección del proyecto tiene clase de proyecto, puedo crear esta clase, digamos que será solo clase de proyecto y puedo aplicar margen desde arriba e abajo, digamos 50 píxeles o incluso 70 para dar más espacio, se ve más bonito. Si lo comparamos con nuestro proyecto, se puede ver que el primer proyecto y el tercero tienen el fondo y el margen entre abajo y el párrafo es menor de lo que lo tenemos actualmente. Trabajemos en ello. Primer y tercer proyecto tendrá antecedentes, por lo que podemos aplicar clase CSS. Otro que tenemos proyecto y podemos aplicarlo al azul. Nuevamente, azul vamos a usar el mismo color que usamos para la navegación, lo que el color de fondo y aplicamos este color. Perdón, es el proyecto 2, así que necesito encontrar el proyecto 1. Para el tercer proyecto, el proyecto 3, que está aquí, estoy guardando HTML, guardando CSS. Volver a mi navegador y veo que se aplica el fondo. Lo que no me gusta es que todo el contenedor no tenga un relleno, así que para cada uno de los proyectos, también añadiría pixeles planetarios o incluso más del relleno y tal vez disminuya un poco el margen, así. Se ve mucho más mejor. Tomaré toda la clase y la reemplazaré, guardaré, y comprobaré. Lo que estaba mencionando fue que el fondo tiene definido el margin-top, por lo que podemos actuar de diversas maneras para resolverlo. Por ejemplo, podemos eliminar el margen si el fondo aparece en clase de proyecto. Tenemos clase de proyecto y le damos la información al navegador, que hey si tenemos la clase llamada la batuta, que está incluida en el proyecto de la clase vamos a quitar este margen, vamos a ponerlo en cero, vamos escribir de tal manera. Si tenemos clase de proyecto y perspectiva inferior, vamos a establecer margin-top en cero o tal vez no cero, pero 10 píxeles así que tendremos un poco de espacio y ahora se ve mucho más mejor. Ya casi estamos listos, estaba aplicando el margen a la imagen margin-bottom, por lo que lo que puedo hacer para hacerlo más universal, puedo quitar este margen de aquí y aplicarlo a cada figura, por lo que cada figura tendría el mismo margen desde la parte superior. El cambio que hago fue tomar de intro ING, estaba quitando el margen y agregué margin-top 10 pixels a figcaption, ahorrando, refrescante. Tengo el margen aquí y los mismos valores para los subtítulos en estos elementos también. ¿ Qué más falta aquí? Por supuesto, necesitamos trabajar en el pie de página. Veamos en el ancho completo del navegador. Vamos a aplicar magia CSS para ese pie de página. Lo que hay que hacer con seguridad, centrar el texto y establecer el tamaño de la fuente en 50 píxeles. Hagámoslo en la siguiente lección. 16. Aplicar estilo al pie de página: Nos estamos acercando a los pasos finales, así que vamos a cuidar el pie de página de nuestra página web. Lo que tenemos que hacer aquí es que necesitamos centrar el texto, necesitamos aumentar el tamaño de la fuente. Volvamos a este texto CSS. Tenemos nuestro pie de página y H2, y ya definimos el tamaño de fuente de archivo para H2, que es de 30 pixels, pero en nuestro proyecto tiene 50. En lugar de crear otra clase, solo podemos proporcionar el selector que consiste en pie de página y H2. Nuestro navegador intentará encontrar H2 dentro la etiqueta de pie de página y solo aquí aplicará el tamaño de fuente de 50 píxeles. También necesitamos centrar el texto. En realidad vamos a centrar el texto en todo el filtro porque el párrafo también está centrado, por lo que es text-align center. Vamos a refrescar la página. Yo casi estoy contento con ello. El que me gustaría aplicar son algunos márgenes en la parte superior y en la inferior. Estoy aplicando margen superior e inferior 50 pixels. En realidad un poco más, sumemos 100. Ahora es mucho más mejor. También me gustaría agregar algo de espacio entre el encabezamiento y el párrafo. Añadamos un margen superior para el H2 que está en pie de página, 50 píxeles. No es margen top sino margin-bottom. Perdón por esto. Es bastante pequeño, así que qué pasa con 100. Sí, ahora se ve mucho más mejor. Nuestro pie de página está listo. El asunto que me gustaría trabajar en un poco es el alineamiento del epígrafe grueso y un texto en el segundo proyecto. Si abrimos el archivo PNG, verán que el texto está alineado aquí al lado derecho, y éste, epígrafe grueso, tiene la misma alineación. Esto tiene alineación de línea también. Necesitamos aplicar clase adicional, llamemos a eso, alineación a la derecha, y usaremos alineación de texto , propiedad CSS, text-align, y luego necesitamos aplicarlo al proyecto número 2. Para todo el proyecto, vamos a aplicar aquí alineación derecha. Puedo ver que todo mi texto fue entonces la columna en el segundo proyecto está alineada a la derecha. Lo que más falta es que necesitamos alinear a la derecha el epígrafe grueso para ese proyecto uno y el proyecto tres. Busco proyecto uno y el epígrafe grueso está aquí, así que estoy agregando clase. El mismo alineamiento correcto, lo estoy copiando, y busco proyectar tres, y el epígrafe grueso aquí también. Estoy agregando clase, guardándola, y refrescando el sitio web, y puedo ver que el texto está alineado. Está bien. Cuidemos la navegación en las últimas semanas. 17. Aplicar estilo a la navegación: En esta lección, vamos a cuidar la navegación. Si abres el proyecto, verás que tenemos la línea negra. ¿ Cómo se puede hacer? No es tan complicado. Volvamos al código. De lo que tenemos que hacer en nuestra navegación, que está en la parte superior, necesitamos crear una etiqueta vacía que es entre Behance, Twitter, LinkedIn, etc. Aquí tenemos li, entonces tendremos vacío, clase. Vamos a salvarlo. A ver. Tenemos este espacio entre. Si usamos Dev Tools, verás que no hay nada aquí, pero en realidad necesitamos un poco más de espacio para poder definir el ancho. Por ejemplo, 50 píxeles, y podemos agregar border-top, por lo que sólo el borde superior tendrá el borde, un píxel y color negro. Creo que debería ser un poco más largo, así que como 70 o incluso 90 píxeles. Lo que no me gusta es que en realidad no está en el centro. Podemos posicionarlo fácilmente usando algunos trucos. Ya conoces top. Por ejemplo, podemos aplicar top, 10 pixels, y para que funcione, necesitamos tener posición, relativa, pero en realidad va hacia abajo, y esto es contador [inaudible] CSS, pero si queremos cambiar el top posicionarlo y hacerlo realmente más cerca del borde superior, necesario agregar menos para que tenga la distancia más pequeña entre el borde superior. Creo que cinco píxeles son suficientes para que podamos copiar toda la clase. Esto en realidad significa que estos estilos van a funcionar sólo si li tiene aplicada la clase vacía. Por lo que fácilmente podemos copiarlo y pegarlo en algún lugar cerca de nuestra navegación para que sea consistente. Tenemos nuestra línea, y también podemos agregar algunos enlaces a nuestros medios. Por ejemplo, si voy a usar enlace externo Twitter, puedo agregar mi cuenta de Twitter, solo en realidad mi personal, no Doe de Jane, pero ¿a quién le importa? Entonces tengo aganaplocha, este mi nombre real, y también estoy agregando otro atributo que es target, en blanco, y le dice a nuestro navegador que abra el enlace en una nueva Ventana. Lo estoy guardando, y ver que lamentablemente mi enlace es violeta y tiene la decoración del texto. Esta es la razón por la que el navegador aplica algunos estilos predeterminados, por lo que necesitamos restablecerlos. Podemos hacer esto fácilmente por nav li a, lo que todos los a que están en los elementos de la lista tendrán la decoración de texto establecida en ninguno, color negro, y estoy contento con eso. Si hago clic en él, se abrirá mi Twitter. ¿ Y si quisiéramos vincular esos elementos a las áreas específicas de la página web? Vamos a usar enlaces de anclaje, y vamos a usar identificadores. ¿ Cómo podemos hacerlo? Necesitamos crear “a” y en atributo de cultivo, necesitamos agregar un ID específico si queremos agregar un enlace al contacto, llamémoslo contacto, pero puedes ponerlo donde quieras. Puedes ponerlo Jane contact, nombrelo como quieras. Tenemos contacto, y tenemos identificación. ID comienza con hash. Ahora necesitamos crear este ID como un atributo para la sección específica. Imaginemos que ese pie de página sería nuestra sección de contactos. Por lo que necesitamos crear ID, por lo que ID atributo y el nombre tiene que ser el mismo tal como lo definimos aquí. En el Nav, se llama contacto. Entonces volvamos al DNI, y llamaremos a este contacto. Vamos a guardarlo, refrescar, hacer click, y estamos en la parte inferior de la página. Lo mismo que podemos hacer con Obras. Por lo que Works nos desplazará a proyectos. El primer proyecto iniciará el ID. Entonces tenemos el proyecto de clase, pero también necesitamos tener proyectos ID, y esto necesita reflejarse en el enlace. Si tenemos Works, creo proyectos “a” ID, y por supuesto necesito cerrar una etiqueta. Para la experiencia podemos, por ejemplo, enlazar a la primera sección al encabezado. Por lo que el encabezado tendría experiencia de ID, y necesitamos vincularlo también. Estoy ahorrando, refrescante, así que si hago clic en Obras, estoy en la parte superior de la sección Trabajo. Si hago clic en Experiencia, estoy en la parte superior, y si hago clic en Contactar, estoy en la parte inferior. Para otras secciones, puedes usar tus propios enlaces, y puedes intentar tratarlo como otro ejercicio. Entonces terminamos con la navegación. ¿ Qué más hay que agregar? Me encantaría agregar alguna pequeña transición de funciones. Por lo que pasa el cursor sobre los botones. Vamos a hacer esto en la siguiente lección. 18. Función de transición de CSS: Está bien, esta es una de las lecciones finales. En esta lección nos vamos a centrar en las funciones de transición CSS por lo que vamos a cambiar los colores del botón para pasar el ratón. Tenemos nuestro botón, pero si pasamos el cursor sobre nuestro cursor, no pasa nada. Nos gustaría cambiar el fondo a negro y tener el color del texto a blanco. Cómo podemos hacer esto, necesitamos usar pseudo-clase, que se llama hover. Busco mi clase de botón. Muy bien, vamos a cambiar sólo a CSS. La clase Hover es una pseudo-clase por lo que la escribimos así. Escribimos el nombre de la clase por lo que después de dos puntos escribimos hover y significa que esta pseudo-clase estaría dedicada únicamente para clase de botón. Siempre que pasemos el cursor sobre el elemento que tiene clase de botón, algo cambiará. Escribamos 'fondo', cambiará a negro, y vamos a añadir color al blanco y guardarlo. Refrescando nuestra página y cuando pasamos el cursor, podemos ver el cambio. Pero lo que no me gusta de ello, es que el cambio es muy agresivo por lo que es como cero o uno. Me gustaría tener la función de transición para que también podamos hacer esto con CSS y volver a Atom y para mi elemento, mi botón de elemento original, necesito escribir transición. De lo que se cambiará así por ejemplo, antecedentes. Cuánto tiempo tardará el cambio así por ejemplo, mitad de segundo y cuál sería la función para que se aliviara dentro y fuera por lo que el cambio será muy suave y muy suave desde el principio y al final. Se puede ver que el fondo cambia muy suavemente, pero el color todavía actúa agresivamente. También necesitamos esta función de transición para el color, y podemos copiar todas las demás propiedades. Ahora el cambio es muy suave y me gusta mucho y sólo se hizo con un par de líneas de código. Puedes modificar fácilmente estas cosas. Se pueden modificar colores, fondos, bordes, etc. ¿Qué más podemos hacer? Bueno, también podemos aplicar algunas, por ejemplo, transformaciones de texto o decoración de texto para subrayar el texto cuando pasamos el cursor sobre la navegación. Estamos volviendo a la navegación que está aquí así que tenemos 'nav li a' por lo que copiamos todo el selector, lo pegamos aquí, agregamos pseudo-clase la cual está flotando y agregamos subrayado decoración de texto. A ver. Si paso el rato, tengo el texto. Este no es todavía el enlace, por lo que no tenemos el subrayado del texto. Por supuesto, siéntete libre de experimentar para hacer mucho más. El cielo es el límite. Te puedes divertir totalmente con funciones de transición y con pseudo-clase así que espero que logres algunos efectos interesantes. Así es como se ve el sitio web final. Es casi uno-a-uno a mi proyecto así que estoy muy contento con él y espero que logres lograr algo similar con tu código, con tu CSS y HTML. Espero que logren poner algo de teoría en práctica y vean cómo funcionan juntos CSS y HTML. En cualquier duda, no dudes en usar Dev Tools para encontrar algunas nuevas características o para experimentar, para cambiar el color de fondo, para cambiar la tipografía, para hacer lo que quieras con el sitio web. Puedes rehacer fácilmente la plantilla para ajustarla a tus necesidades, a tu gusto, a tu estética. Estoy manteniendo los dedos cruzados para todos tus experimentos. 19. Resumen del curso: Echemos el último vistazo en nuestra página web. En primer lugar, nos encargamos de la navegación y tenemos ítems de la lista y aplicamos el gusto del ancla, por lo que podemos navegar fácilmente por nuestro sitio. Tenemos también enlaces externos, por ejemplo, una cuenta de Twitter. Creamos la sección de encabezado con una foto. Aplicamos sombra de caja. Tenemos los subtextos, tenemos el fondo con la animación, con la función de transición, con la pseudo-clase aplicar, que es hover. Tenemos la lista, tenemos el rumbo más grande. Aplicamos varios estilos de fuente. Tenemos diferentes tipos de caras. Tenemos el texto centrado. Tenemos dos columnas en nuestra cuadrícula. Tenemos las fotos adjuntas. Tenemos varios alineamientos de texto a la izquierda, a la derecha, y también tenemos el pie de página. Espero que reutilicen algunas secciones de la página web. Espero que aplique CSS y ejemplos prácticos en su trabajo diario. Muchas gracias por participar en mi curso. Espero que te diviertas mucho. Espero que creyeras que la codificación es una gran herramienta para hacer algunos experimentos con UI en la vida real, que es un navegador Web.