Programación en HTML y CSS para principiantes: ¡crea tu propio portafolio!

1. Introducción: Para construir sitios web, HTML y CSS son las habilidades esenciales que necesitarás aprender. También necesitarás mucha práctica para conseguir el ahorcamiento de estas habilidades y este es el objetivo de este curso. Durante este curso, estaremos construyendo un proyecto de cartera para darte la oportunidad de poner en buenas prácticas tus nuevas habilidades HTML y CSS. También tendrás la oportunidad de mostrar tus habilidades construyendo un sitio y además tendrás un portafolio de aspecto estupendo para sumar también a cualquier proyecto futuro. Entonces, ¿quién soy yo? Bueno, mi nombre es Chris y llevo 20 años desarrolladora web y también enseñando estas habilidades a otros durante muchos años también. Al final de esta clase, tendrás una gran comprensión de cómo se construyen los sitios web y también del papel que tanto HTML como CSS tienen que desempeñar. No sólo aprenderás las habilidades esenciales para un principiante, también iremos aún más allá cubriendo temas más intermedios como diseño responsive, layout usando grid y Flexbox, animaciones y transformaciones, agregando un efecto de estilo paralaje usando CSS, y mucho más. No necesitas tener conocimientos previos en HTML o CSS para empezar y de hecho, si eres completamente nuevo, una disposición a aprender te llevará un largo camino. Cubrimos cosas desde cero explicando todo lo que necesitas saber. No obstante, si tienes alguna experiencia construyendo sitios web con HTML y CSS, esperemos que también aprendas algunos trucos nuevos en el camino. Al final de este curso, tendrás las habilidades que necesitas para construir sitios web receptivos de gran aspecto y también un portafolio en vivo en línea para que el resto del mundo lo vea. Gracias por interesarse en esta clase y empecemos. 2. ¡Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el bien de quitarse otra conferencia. Tómese el tiempo para procesar cada lección, revise el código que escriba y piense en cómo puede abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y desviarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña de proyecto y recursos donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 3. Qué es HTML y CSS: Antes de saltar a nuestro proyecto, si eres nuevo en HTML y CSS, vamos a echar un vistazo a cuáles son estos con más detalle. No vamos a profundizar demasiado ya que vamos a estar escribiendo mucho HTML y CSS durante este curso, pero un poco de fondo te ayudará a entender lo que vamos a estar haciendo. Empezando por HTML, que significa lenguaje de marcado de hipertexto, y es la forma estándar de escribir páginas web. Escribimos HTML usando elementos y estos suelen ser solo un par de etiquetas que describirán el contenido dentro como justo aquí, este es el elemento p que es para agregar un párrafo de texto a nuestra página web. En primer lugar hay una etiqueta de apertura y después tenemos una etiqueta de cierre la cual se indica con la tira hacia adelante, y luego agregamos nuestro texto por dentro. La mayoría de los elementos HTML tienen una etiqueta de apertura y cierre, sin embargo, existen algunas excepciones como cuando se usan imágenes que solo tienen la etiqueta única. Esto se debe a que los tanques de imagen no tienen contenido dentro, así que solo texto. En cambio señalamos un archivo de imagen y lo cubriremos durante el curso. ¿ Cómo pasamos de esto a una página web completa? Bueno, echemos un vistazo a un ejemplo típico. Es porque estamos creando un documento HTML que también vamos a estar usando los elementos HTML para rodear toda nuestra página Web, esto también tiene la etiqueta de apertura HTML y también la etiqueta de cierre que va a rodear todo el contenido vemos en la página Web. Para empezar, tenemos las etiquetas HTML y luego anidadas por dentro aquí tenemos todo el contenido para nuestra página y cualquier contenido que veremos en el siguiente video que queremos mostrar en el navegador va dentro del elemento body. Anidados por dentro tenemos el cuerpo que va a ser un envoltorio para todas las imágenes y todo el texto, enlaces y cosas así en la página. Dentro de este cuerpo, entonces tenemos todos los elementos que ven aquí, puede que tengamos un encabezado por lo que este está en el siguiente nivel en, y luego dentro de este encabezado podemos agregar más anidamiento también. A menudo podemos querer agregar un logotipo o una imagen de sitio en la parte superior del encabezado, también algunos enlaces para la navegación, o podríamos tener nuestra navegación justo debajo como vemos aquí. Dentro de la sección principal tenemos algunos anidamientos más también en el mismo nivel que el encabezado. También tenemos la sección principal, y dentro aquí podemos agregar más elementos dentro de aquí también. Podríamos querer agregar una imagen, quizá queramos agregar algún texto, o también podríamos dividir esto más en múltiples secciones. Por ejemplo, digamos que aquí teníamos una nueva sección. Esta sección también podría contener algunos elementos anidados más, y éstos nuevamente entran entre el elemento de apertura y cierre. Podríamos agregar algún texto dentro de aquí a esta sección, entonces también contendría los elementos p y así es como una página Web se estructura generalmente. Así es como metemos nuestro contenido en la página, pero ¿cómo agregamos estilo y diseño? Hacemos esto usando CSS, CSS es una forma de cambiar el aspecto, sensación y el diseño de nuestras páginas Web, lo hace agregando colores, dimensionamiento, espaciado, y posicionamiento por nombrar algunos, e incluso podemos usarlo para animaciones y transiciones. Para ello, necesitamos apuntar a los elementos HTML que queremos diseñar y son múltiples formas que podemos hacer esto. Al mirar este elemento p desde antes a la izquierda, probablemente la forma más básica de hacerlo es por el nombre del elemento. Ambos a la derecha es cómo escribimos nuestro CSS, apuntamos al elemento por su nombre como p, y escribimos nuestras reglas de estilo dentro de estas llaves rizadas como el color de la fuente, y el tamaño. Esto aplicaría el estilo a todos los elementos p de una página, sin embargo, si solo quisiéramos apuntar a un elemento único nacido, podríamos agregar un ID único a la etiqueta de apertura, así. Este nombre id de text-red depende totalmente de nosotros, y cualquier información adicional que agreguemos a esta etiqueta como esta, se conoce como un atributo. Vincularemos este ID a nuestro CSS por su nombre con el prefijo hash como vemos a la derecha. Dado que un ID está destinado a ser un nombre único que apunta a un solo elemento, también tenemos el atributo de clase. Esta clase se puede agregar a múltiples elementos dando como resultado que nuestros estilos sean más reutilizables. Al igual que el ID, lo vincularemos al CSS por su nombre, pero esta vez agregamos un punto como prefijo. Estos son ejemplos de lo que llamamos selectores CSS, y cubriremos algunos selectores más avanzados a lo largo de este curso. Esto es solo algunos conceptos básicos para que podamos ir con HTML y CSS, pero siempre creo que la mejor manera de aprender es construyendo cosas en realidad, y esto es lo que vamos a empezar a hacer en el siguiente video donde configuramos nuestros proyectos de cartera. 4. Preparar nuestro proyecto para el portafolio: Ahora tomemos este conocimiento y podemos aplicarlo a nuestro proyecto de cartera. Para empezar con un proyecto web, todo lo que necesitamos hacer es crear una carpeta regular la cual va a almacenar todos los archivos y carpetas que necesitaremos. Voy a agregar mi proyecto al escritorio o puede ir a cualquier lugar que prefieras. Voy a hacer clic derecho y crear una carpeta nueva a la que voy a llamar “cartera”. Este nombre depende totalmente de ti y siéntete libre de cambiar esto. A continuación, necesitamos un editor de texto para escribir nuestro código. Estaré usando código de Visual Studio para este curso el cual puedes descargar desde aquí si es necesario. El código VS está disponible para descargar de forma gratuita en Mac, Windows y Linux, o puedes usar cualquier otro que prefieras como Atom, Brackets o Sublime Text. Ya tengo el código de Visual Studio instalado así que tengo esto abierto en el escritorio. Para abrir nuestro proyecto, solo tienes que hacer es arrastrar sobre la carpeta del proyecto y luego necesitamos un nuevo archivo HTML para empezar a trabajar. Podemos ir al nuevo archivo en las opciones o usar Command o Control N y esto creará un nuevo archivo el cual voy a guardar como index.html. Esto guardará automáticamente dentro de nuestros proyectos y todos los archivos HTML necesitan tener esta extensión. Este archivo de índice es generalmente el archivo principal, todo el punto de entrada en nuestro proyecto utilizado a menudo como la página de inicio en un simple sitio HTML. Pongamos a trabajar creando nuestra estructura HTML inicial, empezando por la parte superior con el doctype. Un doctype es el tipo de documento que estamos creando y esto le dirá al navegador que se trata de un archivo HTML. A continuación, necesitamos rodear todo nuestro contenido en esta página, en los elementos HTML, y esto tiene una etiqueta de apertura y cierre. También podemos establecer el idioma de la página como atributo escribiendo “lang” y voy a poner el mío para que sea en para el inglés. Si estás usando un idioma diferente, puedes encontrar rápidamente unos códigos de idioma [inaudibles] buscando códigos de idioma HTML en tu buscador. Dentro de las etiquetas HTML, esto contiene tanto la cabeza como el cuerpo anidado en su interior. Empecemos con la sección de cabecera y esto va a contener información sobre nuestro sitio y también enlaces a otros archivos. Ninguno de los contenidos que agregamos en la sección de cabecera se muestra en el navegador. Voy a empezar aquí adentro agregando dos metaetiquetas. Las etiquetas meta son simplemente datos sobre nuestro sitio y no se muestran en el navegador. El primero, vamos a agregar los atributos del conjunto de caracteres y establecer esto en un valor de “UTF-8”. Esto fijará los personajes que vamos a estar utilizando en nuestro proyecto. El estándar HTML5 es UTF-8 que cubre casi todos los caracteres y símbolos del mundo. El segundo, vamos a establecer el nombre para que sea igual a “viewport”. Esta es la metaetiqueta de ventana gráfica que se utiliza para configurar la página para diferentes tamaños de pantalla. Esto lo hacemos configurando los contenidos y así es igual al ancho, para ser igual al ancho del dispositivo y esto establecerá nuestra página web para ser la misma que el ancho del dispositivo el cual se ha visto con digamos móvil, un escritorio, o una tableta. Después de esto, agrega una coma, y voy a establecer la escala inicial para que sea igual a una. Esto es realmente importante para el diseño receptivo. Esto establecerá el nivel de zoom inicial, toda nuestra escala cuando se cargue la página por primera vez. Esto es realmente importante por lo que todo el sitio se ve bien en todos los tamaños de pantalla. Si no agregamos esto, un dispositivo móvil puede intentar tomar nuestra página de tamaño de escritorio y simplemente aleje el zoom para tratar de encajar todo el contenido en nuestra pequeña pantalla dando como resultado cosas como nuestro texto luciendo realmente pequeñas. No queremos tener ningún zoom o escala ya que queremos cuidar el aspecto y la sensación de nuestro proyecto usando CSS. Mucho de esto puede parecer confuso para empezar, pero esto va a ser algo que vas a reutilizar en todos los proyectos por lo que obtendrás mucha práctica. La parte final es agregar el título de la página y este es el título de la página que se mostrará en la pestaña del navegador. Voy a poner esto como Portafolio de Chris Dixon. Podemos cambiar esto para que se adapte a tu proyecto. Por último, tú [inaudible] a la sección de cabeza, también puedes agregar un cuerpo. Este es el segundo elemento que está anidado dentro de nuestro HTML. Es así como configuramos una estructura HTML básica. Esta sección de cuerpo contiene todo el contenido que queremos mostrar en el navegador como cualquier imagen, cualquier enlace, y también cualquier texto. Por lo que pasarás la mayor parte del tiempo para el resto de este proyecto. 5. Haz un boceto de tus ideas y reúne imágenes para el proyecto: Antes de ir más allá con este proyecto, hay dos enfoques que se pueden tomar. Puedes seguir conmigo, y construir exactamente el mismo proyecto. Si solo quieres aprender HTML y CSS, y esto está completamente bien. O si te sientes un poco más creativo o quieres construir un portafolio real que vas a usar, ahora es el momento de reunir todo lo que necesitarás para tus proyectos. Esta va a ser la cartera que voy a estar creando. Tiene una gran sección de cabecera con una introducción sobre nosotros mismos. Si recargamos la página, también tenemos algunas animaciones de desvanecimiento. Tenemos algunos textos verticales. Entonces mientras nos desplazamos vemos algunas animaciones de flip incluyendo una imagen de paralaje en el fondo. Más abajo, tenemos una sección de trabajo reciente, que incluye dos filas con algunos contenidos que contienen información sobre un proyecto anterior que se desea mostrar. Estos también tienen algunas animaciones deslizantes también. También aprenderemos sobre cómo diseñarlos usando Flexbox y algunas otras técnicas. Abajo en la parte inferior tenemos un contacto a sección, y el sitio también es totalmente receptivo. Si reducimos el navegador hacia abajo, también se ve bien en diferentes tamaños de pantalla. También el contenido ajusta y cambió el diseño para adaptarse al nuevo tamaño de pantalla. Si subimos a la sección superior, tenemos algunos enlaces. Vamos a nuestra página de proyectos. Tenemos el mismo encabezado para la parte superior. Entonces tenemos algunos proyectos recientes usando los diseños de cuadrícula CSS. Nuevamente, si reducimos esto hacia abajo, esto también responderá, y se cambió para adaptarse al tamaño de la pantalla. Si solo quieres seguir conmigo, esto está totalmente bien. Si solo quieres cambiar tu nombre y las imágenes, usando esto simplemente como una experiencia de aprendizaje. Si estás planeando personalizar, sería una buena idea crear un boceto o un simulacro de cómo te gustaría que se viera. También necesitarás reunir cualquier imagen que quieras usar también. He proporcionado la imagen de fondo para usar con este curso, que es la imagen de fondo paralaje de la página de inicio pero necesitarás proporcionar algunas imágenes para utilizarlas en el portafolio. Si no tienes muchos proyectos para usar, puedes encontrar algunas imágenes de muestra que deseas incluir o también reducir la cantidad de proyectos que quieres mostrar. Tómate unos momentos para reunir todas las imágenes e ideas que necesitarás para tu proyecto. También puede ser una buena idea cambiar el tamaño de todas las imágenes del portafolio que vas a utilizar. Esto hará que el diseño de cuadrícula sea mucho más fácil más adelante en el curso. Una vez que hayas terminado, pasemos al siguiente video, donde vamos a empezar por crear la sección de encabezados. 6. La sección del encabezado y elementos semánticos: Antes de la versión 5 de HTML, algo típico que los desarrolladores web solían hacer para maquetar nuestro contenido en una página, sería crear muchas secciones div diferentes para rodear nuestras áreas o nuestro contenido. Por ejemplo, crearemos un div para nuestro encabezado, nuestra sección principal, nuestro pie de página, y también tal vez una barra lateral también. Para distinguir entre cada uno de estos divs o secciones, generalmente agregaríamos un ID, como vemos aquí, como el encabezado o el pie de página, por lo que sabíamos que cada una de estas secciones era diferente. Ahora bien, sin embargo, desde HTML Versión 5, tenemos muchos más elementos semánticos o descriptivos que podemos utilizar. Muchos de estos son bastante autoexplicativos. Tenemos uno como el encabezado, el pie de página, una navegación. También contamos con una sección principal para la pieza principal para nuestro contenido en la página. Relacionado con esta sección principal, tenemos el aparte, que típicamente se usa para cosas como una barra lateral. Podemos entonces agregar secciones independientes de contenido, o también podemos tener cosas como el artículo, que es una pieza de información autónoma, como un artículo de noticias. Haremos uso de muchos de estos elementos semánticos a lo largo de este curso, comenzando en el siguiente video, donde echaremos un vistazo al encabezado y al nav. Esta es la versión final del proyecto que vamos a construir. Voy a llegar a trabajar en la sección de cuerpo creando este encabezado. Esto nos dará la oportunidad de echar también un vistazo a algunos elementos semánticos que acabamos de ver. Podemos hacer uso del encabezado como envoltorio para la sección, a lo largo también estamos viendo el elemento nav también. Hagamos esto más en la sección de cuerpo de nuestro proyecto. Recuerda, todo el contenido que mostramos en el navegador irá entre estas etiquetas. Podemos empezar con el encabezado, que va a envolver toda la sección gris que acabamos de ver. Empezando con los enlaces de navegación arriba en la parte superior. Nuestros enlaces de navegación van a ser un seto en mi lista, o más específicamente, una lista desordenada, que podemos crear usando el elemento ul. Una lista desordenada simplemente generará algunos elementos de lista, por defecto con los puntos de viñeta a la izquierda. También tenemos una lista ordenada la cual podemos utilizar con el elemento ol. Esto creará una lista numerada. Dentro de aquí, agregamos cada uno de nuestros enlaces con la etiqueta li, que es abreviatura de elemento de lista. Tenemos que añadir un hogar, y también el enlace del proyecto. Si guardamos esto, ahora podemos abrir esto en el navegador. Incluso puedes entrar en tu portafolio de proyectos y hacer doble clic en el index.html, que abrirá esto en el navegador. En cambio, podemos ir en Visual Studio Code a la pestaña. Podemos hacer clic derecho, copiar la ruta, y luego pegar esto en el navegador. Ahora tenemos nuestros dos enlaces arriba en la parte superior. Si hacemos clic en estos, no enlazan a ninguna otra página. Para ello, necesitamos transformarlos en un enlace utilizando el elemento a. Eliminemos temporalmente el texto que está dentro de los elementos a, y luego peguemos esto entre los enlaces. Ahora, necesitamos decirle al navegador a dónde queremos enlazar. Esto lo hacemos agregando el atributo href. Este es un enlace completo, y actualmente estamos en la página de inicio. Queremos enlazar al index.html. Hagamos lo mismo para todos los proyectos. Pega de nuevo este texto, y luego la href va a ir a la página de nuestro proyecto. Todavía no hemos creado nuestro archivo de proyecto, pero podemos añadir esto para más adelante. Guarda este archivo, y luego, pasa al navegador y vuelve a cargar. Ahora vemos que estos se transforman en vínculos. Si hacemos click en los proyectos, nos traslada al project.html, que, por supuesto, no hemos creado todavía. Haga clic en el “Inicio”, y nos quedaremos en la página de índice. A continuación, necesitamos agregar el texto a nuestro encabezado. En primer lugar, tenemos el encabezado de “Hola, soy Chris”, un texto sencillo a continuación, y luego nuestro texto vertical en la parte inferior. Podemos agregar esto dentro de la sección de encabezado, pero justo después del elemento nav. El texto de “Hola, soy Chris”, voy a sumar en un encabezado de nivel uno. HTML nos proporciona encabezamientos que podemos utilizar desde el Nivel 1 hasta el Nivel 6. nivel 1 va a ser el más grande y también el más importante. El tamaño y la importancia descienden a medida que el número aumenta. Agrega el texto para tu proyecto, y luego debajo de esto tenemos el texto regular. Agregamos texto regular en el elemento p, que significa párrafo. Voy a rodear mi texto en los iconos tilde que puedes encontrar en el teclado, y el texto de, “Soy desarrollador web y creador de cursos”. La parte final que tenemos que añadir es el texto de “Hago las cosas”, y éste va a ser nuestro texto vertical. El texto vertical aunque no se crea usando HTML. El HTML simplemente está ahí para agregar el contenido a nuestra página. Vamos a añadir esto usando un encabezado Nivel 3. Esto aparecerá en el navegador por el momento justo como un texto horizontal regular, y lo cambiaremos más adelante con el CSS. Justo después de nuestro párrafo aquí, en la siguiente línea, el encabezamiento Nivel 3 con el texto de “Hago las cosas”. Guarda este archivo y más en nuestra pestaña “Proyecto”, recarga. El contenido está ahora en la pantalla. Dado que actualmente sólo hemos agregado el contenido HTML, nuestro proyecto no se ve tan bien como la versión final por el momento. Vamos a cambiar esto en el siguiente video agregando una hoja de estilo. 7. CSS para la primera impresión y la vinculación de la hoja de estilo: Antes cuando configuramos nuestro proyecto, dijimos que la sección de cabecera contiene información sobre nuestros sitios y también enlaces a nuestros archivos. Pero no vamos a enlazar a una hoja de estilo la cual va a ayudar a mejorar nuestro estilo y nuestros diseños para nuestros proyectos. En primer lugar, necesitamos una hoja de estilo con la que trabajar para que no podamos disolverla en nuestros proyectos. Podemos abrir la barra lateral y crear un nuevo archivo en la raíz de nuestros proyectos. Voy a llamar a esto los estilos con la extensión CSS punteada, que necesitamos para todos los archivos CSS regulares. Dado que este no es un proyecto grande, voy a mantener todos los estilos para este curso en un solo archivo. Para proyectos más grandes, puedes usar tantos archivos CSS como quieras, e incluso organizarlos en carpetas también. A continuación necesitamos esto dentro de nuestro archivo HTML en la sección de cabecera. Ir al Índice. Entonces voy a vincular esto justo por encima del título. Recuerda antes dijimos que la sección de cabecera se utiliza para agregar información sobre nuestros sitios y también enlaces a nuestros archivos. Podemos crear este enlace, por defecto, tenemos esta relación con las hojas de estilo, que es exactamente lo que queremos. Entonces el mismo atributo “href” que tenemos para nuestros enlaces justo debajo. Dentro de aquí tenemos que preguntar la ruta del archivo al archivo al que desea enlazar. Dado que este archivo está al lado de nuestra página de índice, todo lo que necesitamos hacer es agregar el nombre de nuestro archivo. Si organizáramos nuestro CSS en carpetas, también tendríamos que añadir el “Nombre de carpeta” también. Sólo una carpeta CSS, y luego reenviar “barra” en el nombre de nuestro archivo. Para probar que este archivo está funcionando correctamente, a menudo hago algo obvio que se mostrará en el navegador. Si vas a la, “Cuerpo”, y establece el color de fondo en el color de rojo. Guardemos esto y recarguemos el navegador, y esto claramente ahora está vinculado para que podamos eliminar este archivo. Ahora voy a añadir a la parte superior de este archivo algunos estilos globales que se aplicarán para todos los sitios. También restablecería en algunos estilos por defecto que el navegador agrega automáticamente. También para empezar, voy a estar peinando los sitios móviles primero, luego más adelante, podemos ajustar nuestro estilo para pantallas grandes. Empecemos por reducirlo a un dispositivo de pantalla pequeño. Voy a colocar esto junto a Visual Studio Code. Ya que solo usamos un archivo CSS, mantén esto más organizado. Voy a añadir un comentario. Un comentario son algunos textos que queremos agregar los cuales no se muestra en el navegador. Normalmente podemos usar esto a nuestras notas para nuestro yo y nuestros desarrolladores, donde el comentario en CSS con el delantero “slash” y luego una,” star”, y luego lo cerramos cuando la estrella y el avance slash entre aquí podemos agregar cualquier texto que desea agregar. Voy a añadir esta sección como estilos globales. Lo primero que voy a hacer es apuntar al cuerpo estableciendo la familia de fuentes. Si echamos un vistazo al auto completo, podemos ver algunas de las fuentes disponibles que podemos agregar, y voy a ir por “Georgia”, que bajan por “Times New Roman” y “Times New serif”. Estas son fuentes web seguras que podemos usar en tus proyectos, lo que significa que son seguras de usar en todos los navegadores. También podemos incluir diferentes fuentes de otros proveedores, como las fuentes de Google, el fenómeno para pegarse a una de estas fuentes del sitio web. A menudo cuando declaramos la familia de fuentes, como vemos aquí, hay múltiples fuentes. Tenemos cuatro justo aquí, y esto es en caso de que el primero no esté disponible. Georgia no está disponible. Buscará la fuente Times New Roman y retrocederá a los tiempos. Entonces el final quedaría por defecto a un serif genérico. En la siguiente línea, vamos a establecer la base en el tamaño para que sea de diez píxeles. Ya veremos por qué muy pronto. Lo siguiente que vamos a hacer es establecer el margen para que sea cero, y esto restablecerá cualquier defecto del navegador. Podemos establecer el ancho para que sea de 100 vw, que es 100 por ciento del ancho de la ventanilla. Esto se debe a que estamos peinando el móvil primero y queremos que el contenido sea span el ancho completo del dispositivo móvil, y también de nuevo, ya que estamos apuntando a los dispositivos móviles, también vamos a centrar el contenido. No podemos anular esto más adelante cuando desarrollemos para navegadores más grandes, y lo haremos usando midi-queries. “ Guarda” esto y ve al “Navegador”. “ Recargar”. Ver el texto está alineado en el centro y el tamaño de fuente ahora es de 10 píxeles. La próxima semana vamos a retirar estas balas de nuestra propia lista de órdenes. Vamos a apuntar a los elementos de lista desordenados. Podemos eliminar estos estableciendo el “Estilo de lista”, para que sea igual a, “Non”. “ Refrescar”, el navegador. También podemos ver de nuestra lista desordenada que esto no está completamente centrado. Esto se debe a algunos de los valores predeterminados del navegador que se aplican a nuestra lista desordenada. Vamos a eliminar cualquier margen, que es el espaciado alrededor del exterior de los elementos y también cualquier relleno, podemos restablecer esto también, y el relleno es cualquier espaciado que se agrega dentro de los elementos. Margen está afuera, y el relleno está en el interio.Quiero echar un vistazo más de cerca a estos muy pronto. Nuestros enlaces también tienen el subrayado. Esto se debe a que estos están rodeados de los elementos a. Podemos eliminar el subrayado estableciendo la decoración del texto como “ninguna”. Nuestros enlaces también tienen un color diferente. Podemos anular esto estableciendo el valor de color que se va a heredar. Esto significa que los enlaces heredarán el color del elemento de la lista padre en lugar de necesitar por defecto en color, “guardar” y “refrescar”. La mayor parte de esta sección son solo anulaciones de navegador y algunos valores predeterminados básicos. Ahora vamos a pasar a algún valor de encabezados específicos. También podemos crear un comentario o dos. Al igual que antes, podemos crear nuestros comentarios, y esto va a ser para la sección de encabezados. Nuestro encabezado está rodeado en los elementos del encabezado, y al igual que vemos en la versión final aquí, vamos a establecer que este sea un color gris claro. Hacemos esto estableciendo la propiedad background. Voy a poner este para que sea cualquier color que elijamos, que voy a ir por el color del gris pizarra claro. Si quieres saber más sobre diferentes colores que podemos usar, puedes hacer una búsqueda en Google para el selector de color HTML. Puede utilizar el predeterminado que aparece en la búsqueda o seleccionar cualquiera de los siguientes enlaces. Si estás usando un valor hexadecimal, así como este, también necesitamos copiar el hash y luego podemos reemplazarlo como nuestro color de fondo. Voy a mantener el mío como el color gris. Después vuelve a cargar el navegador. Veré esto ahora entrando en vigor. Por el momento, todo nuestro contenido se aprieta contra la parte superior y la parte inferior del encabezado. Recuerda siempre hemos dicho que podemos agregar algo de espacio en, dentro de nuestros elementos agregando relleno. Eso es obviamente ahora y voy a establecer que este sea el valor de 1rem. 1rem es una vez el tamaño de nuestra fuente base, que configuramos antes en el tamaño del cuerpo. Por lo que 1rem sería igual a 10 píxeles, 2rem sería de 20 píxeles, y así sucesivamente. La razón por la que establecimos esto un redondeado de 10 píxeles es para que podamos fácilmente elaborar el valor en rem. Entonces ahora si decimos esto, deberíamos tener 10 píxeles de relleno alrededor del exterior. A continuación, vamos a establecer la altura del elemento, igual que hemos visto en la versión final con la altura completa del navegador. Podemos hacerlo estableciendo el valor de 100vh, que es el 100 por ciento de la altura viewport. A continuación, vamos a pasar a peinar los enlaces de navegación. Estos se están creando usando una lista desordenada. Vamos a establecer el tamaño de fuente para que sea igual a 1.2rem, que es el equivalente a 12 píxeles que se agregan en la lista desordenada, así, aplicaremos el tamaño de fuente a todas las listas desordenadas de nuestra página. Si quieres que sea más específico sin embargo, y solo aplica esto a la lista desordenada. Dentro de nuestra sección ahora, podríamos ser más específicos y agregar el nav al frente, así como esto, lo que significa que ahora somos libres de agregar estilos diferentes en diferentes listas desordenadas. A continuación vamos a configurar el tipo de pantalla para que sea flex. Pronto veremos más profundamente en el flexbox CSS. Pero por ahora, esto nos permite establecer contenidos en una dirección. Ya sea horizontalmente, por defecto o verticalmente. Guarda esto y vuelve a cargar. Ahora vemos que los enlaces están dispuestos en dirección horizontal. Para empujar estos enlaces de nuevo al centro de la página, también podemos utilizar una propiedad flexbox, que es justificar el contenido y el valor del centro. Estos enlaces también necesitan algo de espacio en el medio. Podemos hacer estos apuntando al ítem de la lista. Nuevamente, vamos a ser más específicos y se dirige sólo a los ítems de lista en esta sección de navegación. Podemos hacer esto agregando algún margen. Al establecer el margen ciertamente si solo escribimos un valor como 1rem, esto se aplicará a todos los lados de nuestro ítem de lista. Por lo que 1rem de margen se aplicará a la parte superior, derecha, inferior, e izquierda. También podemos usar una taquigrafía que es aplicar el margen a la parte superior e inferior y también a la izquierda y a la derecha solamente. Por lo que para empezar, podemos establecer que esto sea cero en la parte superior e inferior. Entonces el segundo valor es la izquierda y la derecha, recargar, y ahora tengo algo de espacio en el medio. Bajando a nuestro rumbo de nivel uno. También agreguemos un poco de tamaño de fuente en esto. Nuevamente, vamos a ser más específicos y sólo apuntar al rumbo de nivel uno. Dentro de la sección de cabecera. Voy a establecer el tamaño de fuente para que sea 5rem. Recargar, y ahora es mucho más grande. Al bajar, también tenemos el elemento p a continuación. Entonces este es el encabezado p. El tamaño de fuente, voy a establecer esto igual a 1.6rem, que es el equivalente a 16 píxeles. Algún relleno que se va a aplicar en el interior de los elementos. Por lo que 1rem en la parte superior e inferior agregan algo de espacio entre el resto del texto, y no necesitamos ningún relleno a la izquierda y a la derecha ya que nuestro texto está centrado. Echemos un vistazo a esto. Está bien, bien. Si echamos un vistazo a la versión final, también tenemos esta línea que separa las cosas. Podemos agregar esto en el uso de un elemento hr, que es una regla horizontal en el HTML, o podemos agregar un borde en la parte inferior de este texto. Hagámoslo usando CSS. El fondo del borde, que va a estar en línea con de un píxel, una línea sólida, y el color del punto y coma gris claro al final y refrescar el navegador. Las últimas partes del estilo de cabecera es apuntar a la, hago las cosas gravadas en la parte inferior. Hasta el momento hemos estado apuntando a los elementos por el nombre como header y p, que nosotros miramos antes. También podemos usar un nombre de clase a. Voy a agregar un nombre de clase para rotar este elemento. Ya que vamos a reutilizar esto a través de nuestra página sobre en el index.html. Busquemos nuestro rumbo de nivel tres. Podemos agregar una clase de rotación. Esto se debe a que el texto rotará en las pantallas más grandes. Entonces volvamos a nuestro estilo en el que me dirijo a una clase con el punto, el nombre de rota. En lugar de simplemente usar la propiedad de margen que mirábamos antes, también podemos ser más específicos y apuntar a un solo lado, como el margen superior. Voy a agregar un valor de 2rem, un tamaño de fuente de 3rem, y la opacidad, que es el ver valor libre de 0.4. Esto significará que nuestro texto es 40 por ciento transparente, lo que significa que pasará parte del color de fondo gris. Entonces así se verá este texto en las pantallas más pequeñas. Después más adelante, en la pantalla grande agregaremos la rotación. Este es nuestro primer vistazo al estilo de una página web con CSS y también tomó un enfoque mobile-first. Como puedes ver, aquí hemos cubierto bastantes reglas CSS y también hay mucho más que podemos aplicar. Descubriremos muchos de estos a medida que avanzamos por el resto del curso. 8. Comentario rápido: inspecciona CSS con devtools: Antes de ir más allá en este proyecto, quiero compartir contigo un consejo rápido que realmente te puede ayudar durante el desarrollo y esto es usar las herramientas de desarrollador, que están integradas en todos los principales navegadores. Las Herramientas de Desarrollador, entre otras cosas, no pueden permitirnos inspeccionar el HTML y el CSS no sólo de nuestros propios proyectos, sino de cualquier otro sitio web también. Podemos acceder a las Herramientas de Desarrollador dentro del navegador. Generalmente haríamos clic derecho en o control-clic y luego ir a inspeccionar o inspeccionar elemento para algunos navegadores. Dentro de aquí, tenemos mucha información sobre los sitios web de Chrome. Quieres ampliar esto. Tenemos al inspector, primer lugar, de la esquina cercana. Si hacemos clic en esto, entonces podemos flotar sobre partes de nuestros sitios web. Al igual que en qué parte queremos mirar. Vamos a ir muy lejos con el título de nivel uno, haga clic en esto. Podemos ver la estructura HTML en el lado que diriges. Es posible que también veas esta información abajo en la parte inferior del navegador, pero solo moveré la mía al lado derecho usando las opciones aquí. Aquí podemos ver que se destaca el encabezamiento de nivel uno. Se puede ver exactamente qué HTML posible está controlando esta sección. Entonces a la derecha tenemos este estilo. Vemos que el encabezado H1 tiene un tamaño de fuente de cinco rems. También podemos hacer click aquí para eliminar el estilo igual en. Podemos jugar alrededor de las cosas agregando nuevo estilo en. Cambiemos al igualador. Esto instantáneamente surte efecto en el navegador. A continuación, también vemos algún estilo por defecto en el que ha sido aplicado por el navegador. También vemos hacia abajo en la parte inferior no algunos estilos de también se han heredado de la sección del cuerpo que es el contenedor, como la familia de fuentes y la alineación del texto. Hay muchas pestañas más avanzadas que se pueden ver en la parte superior pero no vamos a estar cubriendo esto durante esta clase. Las Herramientas de Desarrollador no sólo nos permiten inspeccionar el HTML y CSS de nuestro propio sitio, sino también de otros sitios. Por ejemplo, si vas a la página web de Mozilla, podemos hacer lo mismo aquí. Haga clic en el inspector, y luego elija cualquier elemento. Hay mucho más HTML como podemos ver aquí pero esto está rodeado en el elemento p para el texto. También podemos ver todo el estilo que se ha aplicado, como el tamaño de la fuente, que podemos hacer clic, un margen, la familia de fuentes, cualquier altura de línea, y mucho más. Ninguno de estos cambios se aplica de forma permanente. Todo lo que necesitamos hacer es refrescar y todo se restablece de nuevo al valor predeterminado. Este es solo un consejo rápido para mostrarte sobre las Herramientas de Desarrollador si no las has usado antes. Pueden ser realmente útiles durante el desarrollo. Las herramientas de desarrollo también tienen muchas características más avanzadas. Pero no estaremos cubriendo esto durante esta clase. A continuación vamos a volver a codificar nuestro portafolio añadiendo una imagen de fondo y también un efecto de paralaje. 9. Imágenes de fondo y efectos de paralaje: Eso está en un efecto de estilo paralaje a nuestra página web realmente puede hacer que sobresalga. Es posible que haya visto este efecto al desplazarse por páginas web o aplicaciones. Básicamente involucra el fondo, que en nuestro caso es una imagen que se desplaza a un ritmo diferente al resto del contenido que se asienta encima de él. Hay muchas opciones por ahí para lograr un efecto similar y muchas haciendo uso de JavaScript. Pero para este proyecto voy a estar creando una versión simple de sólo CSS. Para entender el efecto Parallax con más detalle, echemos un vistazo a un ejemplo rápido. la izquierda aquí tenemos un típico diseño de página web con un encabezado. Tenemos algunas imágenes y también algunos contenidos que pueden salir de la parte inferior de la pantalla. Si esto sucede, el usuario tendrá que desplazarse hacia arriba para que todo el contenido entre en la vista. Generalmente todo el contenido se desplaza hacia arriba a la misma velocidad. No obstante, quienes aplican un efecto de paralaje, toda la idea es que la imagen de fondo se desplazará a un ritmo más lento que el resto de los contenidos o no en absoluto. Para lograrlo con CSS, si echamos un vistazo a la imagen del lado derecho, vamos a estar configurando una imagen de fondo completa para cubrir todo el tamaño del navegador. Esta imagen también va a estar en una posición fija por lo que no nos moveremos a medida que el resto del contenido se desplaza hacia arriba a la vista. También podemos dejar algunos vacíos en nuestro contenido. Por ejemplo, si eliminamos las dos imágenes, esto dejará un espacio para revelar la imagen de fondo. A medida que nos desplazamos hacia arriba con todo el contenido. Tomemos una vista previa de la versión terminada para ver cómo se verá este efecto. Si nos desplazamos hacia abajo, se puede ver que la imagen de fondo está en una posición fija y en realidad no se mueve. El resto del contenido se desplazará hacia arriba y hacia abajo sobre la imagen de fondo. Es esta sección que ahora vamos a crear, siempre y cuando este curso sea la misma imagen de fondo que he usado o puedes usar la tuya si lo prefieres. Tengo la mía guardada aquí en el escritorio. Voy a sumar esto a nuestro portafolio. Voy a guardar esto dentro de una carpeta de imágenes. Vamos a crear una nueva carpeta. Esto también va a almacenar las imágenes del portafolio, que añadiremos más adelante. Arrastre sobre la imagen de fondo. Ahora si abrimos la barra lateral, ahora veremos la carpeta de imágenes y la imagen de fondo. Vamos a empezar por crear un envoltorio de sección, que va a ser para todos los enlaces que ven aquí. De vuelta a nuestra página de índice, podemos crear esto ahora. Justo debajo de la sección de cabecera, pero aún dentro del cuerpo principal, vamos a crear una nueva sección. Esto va a tener la clase de paralaje. Esto nos permitirá apuntar a esta sección en el CSS. Al igual que hicimos con el encabezado, vamos a crear una lista desordenada para cada uno de nuestros ítems de la lista. El primero va a ser para desarrollo web freelance. Como siempre, puedes crear cualquier enlace que se adapte a tu cartera. El siguiente voy a sumar como cursos de capacitación premium. El tercero va a ser para cursos de capacitación gratuitos, videos de YouTube. Entonces finalmente el último, ya que llevan película dirá beber café. Guarda esto, y pasa al navegador. Desplázate hacia abajo por debajo de nuestro encabezado y vemos nuestros elementos de lista hacia abajo en la parte inferior. Este es solo contenido html que necesitamos. La mayor parte del trabajo para esta sección ha terminado en nuestras hojas de estilo. Vamos a crear un nuevo comentario. Esto va a ser para la sección de paralaje. Aprovechó la clase paralaje que agregamos antes. Dentro de aquí podemos establecer nuestra imagen de fondo, lo haremos en CSS con la propiedad de imagen de fondo. Entonces dentro aquí tenemos la opción de establecer la url. El url es la ruta del archivo a nuestra imagen. Dentro de las cotizaciones, tenemos una carpeta de imágenes y luego reenviar barra diagonal el punto de fondo JPEG. También queremos que esta sea la altura completa. Establezcamos la altura para que sea 100 por ciento de la altura de la ventanilla. Guarda esto y de nuevo en el navegador. Ya ha aparecido el trasfondo. Pero queremos posicionar esto exactamente donde queremos que esté. Empecemos centrando la imagen de fondo con la propiedad de posición de fondo. Vamos a sumar esto al centro. También tenemos otras opciones, como la izquierda, superior e inferior. Recarguemos y veamos qué efecto tiene esto. Ahora vemos que la imagen se ha centrado en el navegador. Lo siguiente que vamos a hacer es establecer el tamaño de fondo a un valor de cobertura. Para esta propiedad tenemos múltiples opciones como podemos establecer el tamaño de la imagen para que sea del 50 por ciento, tres REM, 100 pixels o cualquier valor que nos guste. Aquí aunque vamos a establecer el valor a cubrir, que escalará la imagen lo más grande posible sin estirar la imagen. Ahora si guardamos esto y recargamos el navegador, vemos que la imagen también se mueve con el resto del contenido y actualmente no tenemos un efecto de estilo paralaje. Para obtener el efecto deseado, la parte clave es establecer la imagen de fondo que se va a fijar. Esto lo hacemos con la propiedad llamada archivo adjunto de fondo y el valor del fijo. Pasando al navegador desplácese hacia arriba y hacia abajo y vemos que la imagen de fondo se mantiene en la misma posición y el resto del contenido se mueve por encima de la parte superior. Esto ahora funciona porque la imagen de fondo está fija en su lugar al navegador o a la ventanilla y el resto del contenido es libre para desplazarse como es normal. Para terminar las cosas, también necesitamos hacer que los elementos de la lista sean un poco más grandes y también agregar algo de espacio en. Empecemos por apuntar a la sección de paralaje y a la lista anidada, desordenada. El tamaño de fuente va a ser 1.8 rems, que será el equivalente de 18 píxeles y parte en, de un rem. Guarda esto. Bueno, nuestro texto es ahora un poco más grande y también necesitamos agregar algo de espacio entre cada uno de nuestros ítems de la lista. Podemos hacer esto agregando algún margen a la parte superior e inferior solamente. Vamos a apuntar al ítem de la lista de paralaje. El margen de propiedad. Nuevamente, vamos a usar la taquigrafía para que podamos sumar 2 rems en la parte superior e inferior, y luego un cero en la izquierda y la derecha. Dado que estos ítems de la lista ya están censurados, recarga y ahora se ha aplicado nuestro espaciado. Es así como podemos agregar un simple efecto de paralaje a nuestro proyecto usando solo CSS. Como puedes ver, realmente puede marcar una gran diferencia y hacer que una sección de nuestro sitio web realmente destaque. En lo que va de este curso, también hemos utilizado tanto el margen como relleno para aplicar espacio en él a nuestros elementos. Si aún no estás un 100 por ciento seguro de lo que hace cada uno de estos, vamos a echar un vistazo más de cerca a cada uno de estos en el siguiente video. 10. Cometario rápido: margen, espacio adicional y modelo de recuadro: Hemos utilizado tanto margen como relleno en nuestro proyecto hasta ahora para aplicar espacio en él a nuestros elementos. Si aún no te sientes cómodo con lo que cada uno de estos hace exactamente, ahora vamos a echar un vistazo más de cerca en este video, junto a descubrir también el modelo de caja CSS. Si acabamos de empezar a div o secciones a una página web y algún texto dentro usando el elemento P, terminaríamos con algo que se veía así. Esto obviamente no es una gran mirada. Una de las primeras cosas que podemos hacer es agregar algo de espaciado. Es posible que queramos algún espaciado dentro de las secciones así, por lo que no está tan cerca de los bordes y se ve un poco más legible. Recuerda, dijimos antes, el relleno agrega espaciado dentro de un elemento. Esto es lo que aquí vemos resaltado por la sección verde. Este es el efecto de la regla de relleno en CSS. Por defecto agregará el relleno alrededor de los cuatro lados. También tenemos acceso a relleno en la parte superior, derecha, inferior e izquierda, también. Si sólo quisiéramos el espaciado en ciertos lados, bueno, ¿y si también quisiéramos un espacio entre las secciones? Como acabamos de ver, el relleno solo se aplica al interior del elemento. En cambio, aplicamos margen. Margen agrega espacio en ella al exterior de un elemento como vemos con la sección naranja. Al igual que el relleno, la regla del margen se aplicará a los cuatro lados a menos que le digamos lo contrario. Este ejemplo, la primera sección necesitaría tener aplicado un fondo de margen o también podríamos agregar margen superior al segundo elemento, que hará lo mismo. Añadir espaciado como este sí tiene un efecto en el tamaño general del elemento sin embargo. A esto se le llama el modelo de caja CSS. Si establecemos el tamaño de un elemento en el CSS, como 300 píxeles, por ejemplo. Este es generalmente el tamaño que queríamos mostrar en el navegador. Digamos que agregamos 10 píxeles de relleno alrededor de los elementos. Como sabemos, no se agrega nada al interior del elemento. Esto se sumará al tamaño general, resultando en que el aumento de ancho en él sea de 320 píxeles. Al igual que en un borde en CSS también tendrá el mismo efecto. Si agregamos un borde de un píxel alrededor así, esto agregará un píxel extra en cada lado aumentando el ancho total a 322 píxeles, lo que significa que debemos tener cuidado a la hora de dimensionar los elementos para permitir esto. No obstante, dado que el margen se suma al exterior de un elemento, esto no se contabiliza en el tamaño general. Si queremos dar cuenta del relleno y borde aumentando el tamaño del elemento, tenemos dos enfoques. Podríamos o reducir el ancho inicial de nuestro contenido. Aquí, podríamos eliminar los 22 píxeles adicionales y establecer el ancho para que inicialmente sea de 270 píxeles para dar cuenta de esto o en su lugar, podríamos conseguir que el navegador lo calculara por nosotros. Esto significa lo que sea que establezcamos nuestros tamaños de relleno y borde, el navegador siempre mostrará nuestros elementos a 300 píxeles. Podemos hacer esto estableciendo la regla de tamaño de caja CSS para que sea igual a la caja de borde. Esto es algo que podemos añadirlo a nuestro CSS si estamos teniendo problemas para establecer el tamaño de un elemento. 11. Contenido del bloque, en línea y anidado: Ahora vamos a echar un vistazo a cómo podemos anidar concepto más profundamente dentro de nuestro proyecto e incluir también imágenes. Vamos a estar haciendo esto creando una sección de trabajo reciente, que va a exhibir dos de nuestros proyectos. Esto también nos va a permitir jugar con algunos diseños más complejos, e incluir en elementos de tamaño desigual. Por ejemplo, nuestro primer proyecto estará en la primera fila. Tendremos una imagen grande, y luego algún texto sobre el proyecto en el lado opuesto. Después invertiremos esto para el segundo proyecto de la fila justo debajo, donde la imagen estará del lado opuesto al primer proyecto. Estos también van a estar dentro de su propio div, que va a ser una sección en estas paredes para ser anidados igual que hemos visto antes. Estos flexbox CSS nos va a permitir crear este layout, y también crear un layout diferente para la pantalla más pequeña también. Vamos a trabajar con la adición del HTML para la sección. Pasando a la versión terminada así es como se va a ver esto en la vida real. Vamos a tener nuestras dos filas, y vamos a alternar el proyecto en cada fila. Usando el flexbox, esto también será totalmente sensible a, por lo que los diseños cambiarán en dispositivos de pantalla más pequeños y más grandes. En este video, vamos a seguir adelante y agregar el marcado HTML para la sección que proporcionará el contenido con el que trabajar en el siguiente video. Donde vamos a añadir el flexbox para exponer esto exactamente como queremos. El primer paso es crear una envoltura para esta sección junto con un título de obra reciente en la parte superior. Hagámoslo dentro de la sección de cuerpo, que está por debajo del paralaje que acabamos de crear. Nuestro envoltorio de sección, etiqueta de apertura y cierre, y luego dentro podemos crear un encabezado de nivel 3. Es x va a ser Trabajo reciente, y también podemos agregar un atributo de clase dentro de la etiqueta de apertura para que podamos apuntar esto con el CSS. Justo después de nuestro rubro de nivel 3 voy a añadir un nuevo elemento, que es una regla horizontal. Esto va a agregar una línea a través de nuestra página, que se ve justo aquí. Utilizamos un efecto similar en el CSS anteriormente en este curso, donde usamos un borde para crear una línea. Pero esta vez vamos a estar usando la regla horizontal para crear nuestra línea en nuestro HTML, solo tienes que desplazarte hacia abajo, refrescar la página. Apenas ya podemos ver nuestro título y nuestra línea en la parte inferior. Entonces podemos empezar a anidar nuestros divs dentro de la sección para crear nuestras dos filas de contenido. Para hacer esto justo debajo de nuestra regla horizontal, vamos a crear dos nuevos divs con la clase de trabajo reciente. Entonces voy a copiar y pegar esto directamente a nuestra segunda fila, pero ¿cómo crear un nuevo div crea una nueva fila? El motivo por el que esto funciona es porque generalmente la mayoría de los elementos se categorizan como nivel de bloque o en línea, y si div cae en la categoría de elementos de nivel de bloque. Consideraré esto si pasamos a la página web de Mozilla, aquí me refiero a la sección de elementos a nivel de bloque. cual puedes hacer una búsqueda si quieres encontrar esta página. esta página hay mucha información y ejemplos, pero lo clave a tener en cuenta está aquí en este recuadro. Dice: “Un elemento a nivel de bloque siempre comenzará en una nueva línea, y también ocupará el ancho completo disponible”. Significa que por cada div que agreguemos esto siempre se agregará en una nueva línea. Podemos ver algunos ejemplos de elementos a nivel de bloque si nos desplazamos hacia abajo. Aquí está nuestra etiqueta div, y hay mucho más como: el encabezado, el pie de página, y también el nav. También vamos a la página web de Mozilla y echamos un vistazo a la sección de elementos en línea. Aquí podemos ver que los elementos en línea no arrancarán en una nueva línea, y sólo tomará tanto ancho como sea necesario. Cosas como las imágenes son elementos en línea, por eso podemos colocar el lado a lado a través de la página. Una vez más, si te desplazas hacia abajo tenemos nuestra lista de elementos en línea y podemos ver nuestra imagen justo aquí. También podemos usar CSS para cambiar el tipo predeterminado también usando la regla de visualización, y lo vamos a ver en el siguiente video donde vamos a agregar el flexbox. Ahora que tenemos nuestras dos filas las cuales pueden dividirse en dos secciones, vamos a hacer esto anidando dos divs más dentro de cada uno. Esto es para que podamos agregar la imagen por un lado, y por el otro lado podemos agregar la información sobre nuestro proyecto. Nuestro primer div también podemos agregar una clase, por lo que podemos usar esto en el CSS. Esta va a ser información de trabajo reciente. Podemos duplicar esto, y esto es para la reciente imagen de trabajo. Si esto parece confuso no te preocupes esto es solo la primera fila, y dentro tenemos un envoltorio para la imagen y luego para la información. Vamos a hacer exactamente lo mismo para nuestra segunda fila justo debajo, voy a copiar esto y añadir esto dentro de aquí así que tenemos dos secciones coincidentes. Estos son solo contenedores por el momento ahí, por lo que aún no hay contenido que mostrar dentro del navegador. Debiste haber reunido ya las imágenes que te gustaría utilizar. Si aún no lo has hecho ahora será un buen momento para reunir algunas imágenes de tu reciente trabajo. Si no tienes ninguna imagen de trabajo reciente, puedes descargar cualquier imagen de Marcador de posición de muestra que te gustaría utilizar. Ya tengo mis imágenes listas, así que voy a sumar éstas a los proyectos. Ya tenemos una configuración de carpeta Imágenes dentro de aquí. Voy a agarrar todo el resto de las imágenes excepto el fondo que ya tienes, luego arrastrarlos a mi carpeta Imágenes. Cierra esto, ahora podemos seguir adelante y sumar todo el contenido que necesitamos para nuestras dos secciones. Tenemos nuestra imagen, y luego vamos a añadir algo de texto en el lado opuesto. Empecemos en nuestra primera fila y dentro de la sección de información de trabajo reciente dentro de aquí un encabezado de nivel 4 que va a ser para el título del proyecto. El mío va a ser Pizza Planet. Justo debajo de los elementos p que va a ser el texto y sólo voy a añadir algún texto de muestra de Vue. aplicación js para un punto y luego punto punto. Por supuesto que puedes agregar algunas descripciones más detalladas aquí dentro, una regla horizontal para separar el título y la descripción del resto de las características. Estas características voy a agregar dentro de otra lista. En primer lugar, el título, la otra lista, y luego nuestro elemento de lista dentro y esto va a ser para cada una de las características de nuestros proyectos. Vue. js que va a ser la biblioteca de vista, la última base de datos firestore, Autenticación, Enrutamiento, gestión del estado Vuex, y luego actualizaciones en tiempo real. Después, vamos a separar esto con otra regla horizontal. Entonces vamos a añadir un enlace usando el elemento a, que va a ser un enlace a un proyecto en vivo si tienes uno. Ver texto de Visitar sitio, luego puedes agregar el enlace o la URL para el proyecto de vida si tienes uno. Esta es toda nuestra información si guardamos y actualizamos, bajamos tenemos todos nuestros textos en su lugar. El siguiente que hay que hacer es agregar la imagen que está dentro de esta envoltura. Esto lo hacemos con el elemento de imagen que es IMG. Agregamos la fuente que es la ruta del archivo a nuestra imagen, tenemos una carpeta Imágenes. Se trata de imágenes y luego de slash hacia adelante, y la imagen que quiero usar va a ser pizza-planet. png. El alt text de pizza planet image, esta es la alternativa para cosas como lectores de pantalla si la imagen no está disponible. Pasado al navegador y veamos esta imagen en la pantalla. Bien. Lo siguiente que hay que hacer es repetir este proceso para el segundo proyecto. Queremos hacer un prácticamente exactamente lo mismo que arriba vamos a crear la misma estructura, pero para el segundo proyecto. Empecemos con nuestro encabezado de nivel 4 sobre el título del proyecto, que es React Trello. Nuevamente, dentro de la sección reciente-work-info tenemos entonces una descripción dentro de los elementos p. Vamos a decir React js aplicación en línea con los elementos hr, el texto de características, y luego nuestra otra lista para todas nuestras características envueltas en un elemento de lista. Vamos a decir, la biblioteca React js view. Esto también tiene la última base de datos firestore, Autenticación, Enrutamiento. Esto también hace uso de la API de contexto, y también de las actualizaciones en tiempo real. Al igual que arriba debajo de nuestra otra lista vamos a volver a agregar una regla horizontal y luego un enlace a nuestro sitio en vivo si tenemos uno, y nos texto de Visitar sitio. Si no tienes una versión en vivo para mostrar también puedes dejar esto apagado, o puedes volver a esto más adelante y añadir en el enlace. Lo cual simplemente nos deja con la imagen para agregar en el div muy inferior, y de nuevo vamos a agregar a los elementos de imagen. El origen es la carpeta Imágenes, y entonces la imagen que he elegido va a ser react-trello. El texto alt de la imagen react-trello, guardar y luego volver a cargar el navegador. Ahora vemos nuestros segundos proyectos. Ahora tenemos el contenido en su lugar para nuestra sección de trabajo reciente, y en el siguiente video vamos a aplicar algún estilo CSS para no solo mejorar el aspecto y la sensación sino también para que se vea mejor en diferentes tamaños de pantalla también. Para ayudar con esto vamos a aprovechar el flexbox CSS, que ayudará con la disposición de un contenido en una dirección. 12. Primera impresión en CSS Flexbox: Tanto la cuadrícula CSS como la Flexbox, son formas relativamente nuevas de diseñar nuestro contenido usando CSS. En este video, vamos a estar cubriendo ambas técnicas. Empezando ahora con el Flexbox, que se utiliza para disenar nuestro contenido en una dirección, ya sea controlándolo horizontal o verticalmente. Para empezar con el CSS Flexbox, lo primero que tenemos que hacer, es crear un envoltorio para todo nuestro contenido. Encima en el CSS, entonces configuramos esta envoltura para que tenga el tipo de pantalla de flex. Esto nos permitirá entonces establecer la dirección del flex para que nuestro contenido sea ya sea fila, que está a través de la página de izquierda a derecha, o en una columna que es de arriba a abajo. Por lo que nuestro contenido se apila verticalmente. Esto es ideal para el diseño responsive y también podemos establecer las opciones inversas también. Podemos establecer la fila inversa, que estableceremos nuestro contenido de derecha a izquierda y también reversa de columna, que va a ser lo contrario, por lo que nuestro contenido es de abajo a arriba. Podemos usar esto combinado con consultas de medios para crear diferentes diseños para diferentes tamaños de pantalla y además el Flexbox tiene mucho más que ofrecer y descubriremos algunas de estas propiedades flex a lo largo de este curso. Pasemos a nuestra página index.html. En el contenido que creamos en el último video, creamos dos secciones con la clase de trabajo reciente. Esta es la envoltura div para cada uno de nuestros proyectos y la envoltura para cada fila. Cuando quiero usar esta reciente clase de palabras sobre en el CSS, comenzando con el diseño de columnas para nuestra vista de pantalla pequeña. Esto significa que cada uno de nuestros proyectos se apilarán uno encima del otro, estirándose para ser el ancho del dispositivo móvil completo. Pasemos a nuestras hojas de estilo y creemos nuestra nueva sección usando los comentarios. Esta es la sección de obras recientes. Recuerda, apuntamos a una clase con el punto y el nombre del trabajo reciente. Para utilizar el Flexbox, el primer paso es establecer el tipo de visualización para que sea igual a flex. Recuerda en el último video, dijimos que muchos elementos se pueden categorizar en inline y block level. Bueno, podemos cambiar el tipo de visualización de un elemento utilizando su propiedad de visualización. Aquí, estamos cambiando el tipo de pantalla de nuestra envoltura para hacer uso del Flexbox. Esto nos permitirá hacer uso de muchas más propiedades flex, como la dirección flex. Vamos a empezar en dispositivos de tamaño móvil configurando la dirección del flex para que sea columna. Si reducimos esto hacia abajo, esto significa que el contenido se apilará uno encima del otro en lugar de la fila predeterminada que está a través de la página. También tenemos las opciones inversas, por lo que podemos configurar esto para que sea la columna inversa, guardar esto y recargar, y ahora las imágenes aparecerán encima del texto en lugar de cómo fue con solo columna, donde tenemos el texto y luego las imágenes. También podemos establecer la dirección del flex para que sea fila. Esto significará que el contenido atraviesa la página, tal y como vemos aquí. Esto significa que el contenido irá horizontalmente a través de la página, dejando nuestro texto y la imagen uno al lado del otro. Ahora aunque en estas pantallas pequeñas, vamos a dejar esto como columna y luego también establecer el tamaño de fuente. No olvides el punto y coma al final. El tamaño de fuente va a ser igual a 1.3 rems y ese es un margen de un rem en la parte superior e inferior para darnos algo de espaciado y no necesitamos ningún espaciado a la izquierda y a la derecha. Recarguemos esto y si ahora nos desplazamos hacia abajo hasta entre nuestros dos proyectos, ahora vemos nuestro margen en el medio y también el tamaño de la fuente entrando en vigor. A continuación, voy a añadir un poco de dimensionamiento y espaciado más generales a nuestra sección, por lo que tenemos la clase para cada título, que es título de obra reciente. Podemos establecer el tamaño de la fuente para que sea un poco más grande y querer usar 1.6 rems. A continuación, podemos llegar a trabajar en nuestro texto para nuestro proyecto. Este texto, está todo rodeado en un div con la clase de información de trabajo reciente. Adelante y el objetivo es ahora. Para la envoltura todo lo que voy a hacer, es agregar algo de espaciado en el interior de los elementos de una rem y luego vamos a pasar al rumbo Nivel 4. Si pasamos al marcado en el archivo HTML, y vamos a ir a la información de trabajo reciente, ahora vamos a llegar a trabajar en el encabezado Nivel 4 que es el título del proyecto. Sí tenemos un par de formas diferentes en las que podemos acercarnos a esto. Podríamos apuntar directamente al rumbo de Nivel 4. Podríamos agregar una clase a este encabezado y luego agarrar el elemento de esta manera o podemos ser más específicos como miramos antes en nuestro CSS, donde podemos seleccionar la información de trabajo reciente, luego h4. Entonces hagámoslo. Podemos apuntar la información de trabajo reciente y luego a cualquier encabezado de Nivel 4 que esté anidado en esta sección. Todo lo que necesitamos hacer aquí, es establecer el tamaño de fuente para que sea 1.4 rems o cualquier tamaño de fuente que prefieras. A continuación, tenemos nuestras características que podemos ver aquí y vamos a sumar algo de espacio entre cada una de estas. También tenemos aquí un símbolo que necesitamos quitar. Vamos a bajar. También quita esto. Ahora para que podamos ser más específicos con solo apuntar estos ítems de la lista en esta sección, lugar de afectar a cualquiera de nuestros enlaces de navegación, podemos agregar una nueva clase en el índice. Para nuestra lista desordenada, podemos agregar la clase de características y haremos lo mismo para nuestro primer proyecto también. Entonces dentro de la lista desordenada, la clase de características, y luego podemos ser más específicos dentro de nuestras hojas de estilo al enfocar las características, el mayor que el símbolo, y luego nuestros elementos de lista. Esto funciona de una manera ligeramente diferente a la forma en que hemos utilizado esto en el pasado. El modo en que lo seleccionamos así, significa que todos los encabezamientos de Nivel 4 dentro de esta sección se verán afectados. Hacerlo de segunda manera con el símbolo mayor que, significará que esto sólo afectará a los ítems de la lista que son hijo directo de nuestras características. Esto significa que estos elementos de la lista necesitan estar directamente anidados dentro. Tenemos nuestra lista desordenada y estos están en el siguiente nivel en por lo que todos se verán afectados. Si tenemos un segundo nivel de anidación aquí dentro, digamos una segunda lista desordenada, y luego un elemento de lista, éste no se verá afectado. Dejemos esto dentro y veamos esto en acción estableciendo el margen para crear algún espacio entre nuestros ítems de la lista. Un rem en la parte superior e inferior y luego cero en la izquierda y la derecha. Conocemos el navegador. Tenemos nuestro espaciado justo aquí y también fuera de esos proyectos. Vamos a establecer el color de los enlaces. Recargar y ahora podemos ver que el elemento de prueba que agregamos en, porque esto no es un hijo directo de nuestras características, esto no se ve afectado por nuestro CSS. Deja que solo elimine esta prueba, guarde esto, y vuelva a cargar. También podemos quitar el color y las cosas ahora se ven un poco mejor con nuestro espaciado. De lo siguiente que necesitamos cuidar, las imágenes que son demasiado grandes para el dispositivo. Una vez más, más en nuestras hojas de estilo, podemos apuntar a los elementos por su nombre, que es IMG. Dado que este también es un estilo general que quieres aplicar a todos los proyectos, voy a añadir esto en la parte superior de las hojas de estilo en los estilos globales. Esto es solo una preferencia personal y esto puede ir a cualquier parte de las hojas de estilo. Todo lo que vamos a hacer, es establecer el ancho máximo para ser 100 por ciento. Esto significa que la imagen siempre será un máximo del 100 por ciento del contenedor. Recarguemos y veamos esto en acción. Nuevamente, también en esta sección de estilo general, voy a añadir un poco de estilo en para nuestra regla horizontal. Añadamos los elementos hr. El ancho para ser 100 por ciento por lo que abarca el ancho completo del contenido. También voy a establecer la capacidad para que sea 0.5, que es 50 por ciento transparente. El color también puede ser gris claro y veamos cómo se ve esto. Dejándonos ahora con una línea más ligera entre nuestro contenido. Esta es nuestra primera mirada a usar el CSS Flexbox y aunque sólo lo hemos utilizado hasta ahora para crear un diseño móvil de primera columna, medida que avanzamos por el resto del curso, descubriremos mucho más de lo que el CSS Flexbox tiene para oferta. 13. Sección Contáctenos y primer CSS para celulares final: En este video, vamos a añadir la sección final de nuestra página de inicio, que va a ser una sección de contacto. Junto con también rematar el primer estilo móvil. Si vamos a la versión final que he abierto aquí, y luego desplázate hacia abajo hasta la parte inferior de nuestra página de índice. Esta va a ser la sección de contacto que voy a crear ahora. El HTML es bastante simple. Todo lo que tienes son algunos bloques de texto y se pueden peinar con nuestro CSS. Empecemos agregando el marcado de barra de cobertura, que básicamente es nuestra nueva sección, y luego algunos bloques de texto. Pasemos al index.html abajo en la parte inferior, pero aún dentro de la sección del cuerpo. Vamos a crear una vez más nuestra nueva sección. Esto va a tener una identificación única de contacto. Haremos uso de esto en el CSS muy pronto. Entonces dentro vamos a tener un div anidado con la clase de información de contacto. Esta sección va a ser la envoltura. Si echamos un vistazo a la versión final, este va a ser el envoltorio para todo el texto horizontal que tenemos justo aquí. Después crearemos un encabezado de nivel 3 con la clase de rotación, que usamos anteriormente en el proyecto. Dentro de nuestra info de contacto podemos agregar el primer elemento, cual va a ser un elemento p con la clase de encabezado de contacto. Usaremos el CSS muy pronto para hacer esto mucho más grande, el texto de no ser un extraño. Guardemos esto y comprobemos que esto se ve bien en el navegador. Recargar. Podemos apenas ver cómo texto abajo en la parte inferior. Algo que vamos a hacer sin embargo, es poner la palabra extraño en una línea separada, igual que vemos en la versión final. Podemos hacerlo agregando una etiqueta de freno. Una etiqueta de ruptura es simplemente br. Esto empujará nuestro texto a la siguiente línea. Después de esto, un segundo elemento p con el texto de necesidad de un desarrollador. Entonces hablemos. Después ofreció un trozo de texto dentro de aquí, que va a ser nuestra dirección de correo electrónico. Esto ahora se encarga de todo el texto horizontal en nuestro envoltorio. Justo debajo de este envoltorio, vamos a tener el texto girado, que es un encabezado de nivel 3. Vamos a hacer uso de la clase de rotación, que usamos antes en el curso para nuestro rubro, que era el texto de I make things. Dentro de aquí, todo lo que tenemos es el texto de contacto, guarde esto. Pasado al navegador, vemos nuestro texto horizontal es bastante pequeño. Pero tenemos algunos estilos tomando efecto para nuestro encabezado de nivel 3, ya que hicimos uso de la clase de rotación. Ahora arreglemos esto de nuevo en nuestra hoja de estilo, comenzando con nuestra sección id de contacto. Recuerda cuando usa un id, etiquetamos esto en el CSS mediante el uso de un duro. Para empezar, ahora, vamos a crear una sección de contacto con nosotros. Nos apuntamos a un id usando los duros. Esto también va a hacer uso del tipo display de flex. Podemos hacer uso de las propiedades flex box, como la dirección flex. Desde que empezamos el móvil primero, esto también va a ser en la dirección flex de columna. Analizaremos esto más adelante cuando tengamos más espacio disponible en pantalla. Añadamos algo de relleno dentro de nuestra sección de 1rem. También al igual que hicimos con el encabezado temprano, también podemos establecer la altura de nuestra sección para que sea 100 por ciento de la altura visualizable. Podemos establecer un color de fondo, y este puede ser cualquier color de su elección. Voy a utilizar el valor hexadecimal de B1E2D7. Visual Studio Code también ha construido en un selector de color. Si pasamos el cursor sobre esto, entonces podemos seleccionar cualquier color diferente de la pantalla aquí. O hacer uso de los recolectores de color, que miramos antes en el curso. Por lo que esto establecerá el color de fondo. También podemos establecer el color de nuestro texto para que sea blanco. Veamos cómo se ve esto. Vuelva a cargar el navegador. Contamos con toda la sección de contacto de altura completa, nuestro fondo, y nuestro texto en blanco. Ahora vamos a trabajar con el texto en la parte superior, empezando con el encabezado de contacto de no ser un extraño. Estas son la clase de rubro de contacto. Vamos a agarrar esto y hacer uso de esto en el CSS. Esta es una clase, así que usamos el punto. Vamos a establecer el margen para que sea cero y luego hacer que el tamaño de la fuente sea mucho más grande. Voy a ir por cinco rems. Recargar. A continuación vamos a apuntar a nuestros elementos p dentro de la sección p. El apartado cuenta con la clase de información de contacto. Podemos entonces seleccionar los elementos p. Ese es el tamaño de fuente, b 1.4 rems. Después para agregar algo de espacio entre estos, podemos agregar algún margen a la parte inferior de cada elemento. Ya que tenemos un montón de espacio vertical con el que jugar, voy a poner esto para que sean tres rems. Guarda esto y vuelve a cargar el navegador. Ahora esto nos deja con un pequeño problema. Esto se debe a que hemos dirigido a todos los elementos p en esta información de contacto. Este rubro también es un elemento p. Tenemos algunas formas diferentes de cómo podemos acercarnos a esto. Podríamos cambiar estos primeros elementos p para que sean un elemento diferente como un encabezamiento. O alternativamente, podríamos agregar una nueva clase como texto de contacto. Añadamos esto también a nuestro correo electrónico. [ inaudible] para ahorrar. Cambia esto para que sea un texto de contacto. Guardar y recargar. Ahora nuestro proyecto es como se pretende. Lo último que hay que hacer es esta sección de contacto en la parte inferior. Solo vamos a mostrar estos elementos cuando tengamos más espacio de pantalla disponible. Por ahora en la primera vista móvil, vamos a seleccionar esto. Esta es la nueva sección de contacto, la clase de rotación. Entonces todo lo que necesitamos hacer es establecer el tipo de visualización para que sea ninguno. Esto eliminará esto de nuestra página. Podemos reinstaurar esto más adelante para la vista de pantalla más grande restableciendo el tipo de pantalla para que sea algo como bloque. Descubriremos cómo hacerlo más adelante en el curso. Este es el estilo que ahora completa para la vista de pantalla pequeña. En primer lugar por supuesto, no dudes en hacer cualquier cambio suites de tu look y tema. En el siguiente video, vamos a echar un vistazo a las consultas de medios CSS, lo que nos permitirá hacer aplicar diferentes reglas CSS para pantallas de diferentes tamaños. 14. Consultas de medios en CSS: Ya hemos hablado anteriormente sobre cómo podemos usar el flexbox CSS para crear diferentes tipos de diseños. En una vista de pantalla pequeña sobre la derecha, posible que normalmente deseemos que el contenido sea el ancho disponible completo y apilado en la parte superior de cada uno de una verticalmente por dirección ciertamente flex para ser columna. Cuando tenemos más espacio de pantalla disponible como por encima de la izquierda, también muchas veces queremos aprovechar este espacio extra y añadir nuestro contenido estar lado a lado. Sabemos que el flexbox puede hacer esto estableciendo la dirección para que sea fila, pero ¿cómo aplicamos esto en diferentes tamaños de pantalla usando CSS? Bueno, la forma de hacerlo es agregar una consulta de medios CSS, que es básicamente una forma de crear una sección de nuestro CSS, que solo se aplica a ciertos tamaños de pantalla, orientación o resolución, por nombrar algunos. Volver a la Mozilla Developer Network, bueno, en la sección Using Media Query, y aquí podemos encontrar pequeños ejemplos de cómo podemos usar las consultas de medios para aplicar diferentes estilos en función del dispositivo. En primer lugar, si nos desplazamos hacia abajo, tenemos una sección de tipo de medio, y este es el primer paso para construir una consulta de medios. Aquí podemos establecer estas reglas CSS para que se apliquen dependiendo del dispositivo. Podemos aplicar esto a cosas como un sintetizador de voz, una pantalla, el modo Print Preview, o podemos seleccionar todo para aplicarlo a todos los diferentes dispositivos. Más abajo en la siguiente sección, tenemos características de medios, y estas características generalmente son más específicas para el dispositivo, como el ancho, la altura, y también si el dispositivo es horizontal o vertical. Uno de los usos más comunes para las consultas de medios, y para lo que los vamos a estar usando en este curso es para cambiar nuestro estilo en base al ancho de la pantalla, y podemos ver esto hacia abajo en la parte inferior de esta sección. Podemos establecer reglas CSS basadas en el ancho de la ventana. Pasemos a nuestro archivo CSS y podemos agregarlos a nuestros proyectos. El primer paso es decidir en qué pantalla queremos cambiar el CSS, y empezar de nuevo en el navegador con la vista de pantalla pequeña. Generalmente queremos cambiar las cosas cuando nuestro contenido parece estirarse. Por ejemplo, si hacemos esto más amplio, siempre llegamos a un punto donde el contenido se ve realmente estirado, y luego queremos reorganizar nuestro diseño. Una vez que lleguemos a un tamaño donde queremos cambiar nuestro contenido, también necesitamos detectar qué tan amplio es esto, que podamos agregar esto a una consulta de medios. La mayoría de los navegadores tienen ciertos plug-ins o extensiones que están disponibles, muestran el ancho de la pantalla, u otra opción es ir a hacer clic derecho e inspeccionar para abrir las herramientas del desarrollador, y dentro aquí a medida que estiramos el navegador, podemos ver en la esquina superior derecha, se muestra el ancho del navegador. Una vez que nos ensanchemos un poco, y voy a ir por algún lugar alrededor del 860, pero voy a cambiar el diseño para albergarlos contenidos uno al lado del otro. A menudo en nuestro style.css, podemos comenzar por @media consulta con la regla en medios. Como hemos visto antes en los sitios web de Mozilla, podemos apuntar a la pantalla, y también podemos combinar esto con algunas de las características mediáticas que miramos, como el ancho mínimo del navegador, que voy a establecer para ser de 860 píxeles. Ahora lo que tenemos que hacer dentro de estas llaves es agregar cualquier regla CSS, tal como hemos usado anteriormente. Básicamente cualquiera del estilo en el que tenemos arriba siempre se aplicará a nuestro proyecto, pero los de estas llaves solo se aplicarán cuando la pantalla alcance los 860 píxeles y superiores. [ inaudible] la sección del cuerpo y podemos crear un verdadero insider aquí. Establezcamos el fondo para que sea el color del rojo, pongamos esto y recarguemos. Ves el color de fondo rojo, y luego vayamos por debajo de los 860 píxeles, y esta regla ya no se aplicará. Si desea dirigirse a todos los dispositivos de diferentes tamaños y no solo a esas pantallas, también podemos simplificar nuestra consulta de medios así. Vamos a probar esto. Vuelva a cargar el navegador, y esto aún se aplica. Por supuesto, no queremos este color de fondo rojo así como este en lugar de ahora consulta de medios. Vamos a empezar en la cima de nuestros proyectos con nuestros enlaces de navegación. Si echamos un vistazo a la versión final, esto se va a terminar por el lado derecho. Hagámoslo ahora. En lugar de apuntar a la sección de cuerpo, vamos a apuntar a la navegación, y luego a la lista desordenada, y podemos moverlas hacia la derecha justificando que los contenidos sean el valor de flex-end. Si echamos un vistazo a la sección de nav ul buscando esto, este n menos actualmente en la línea 43. Bueno, aquí podemos ver que establecemos el estilo global. Ya hemos configurado el tipo de pantalla para que sea flex, por lo que este siempre será el caso a lo largo de nuestro proyecto. Aquí establecemos los contenidos de justificación para que estén en un centro para las pantallas pequeñas, pero ahora dentro de nuestra consulta de medios más grande en la parte inferior, anulamos esto con flex-end. Ahora si guardamos esto, recargar el navegador, esto estará sobre el lado derecho para la vista más grande. Entonces a medida que encogemos el navegador hacia abajo, esto volverá al centro. Lo siguiente que tenemos que hacer es rotar el texto de I make cosas, para que también podamos agregar esto a la consulta de medios también. Esto tiene la clase de giros. En primer lugar, voy a añadir algún margen. Hemos mirado cómo agregar margen a los cuatro lados. También hemos mirado cómo podemos aplicar margen y relleno a la parte superior e inferior, y también a la izquierda y a la derecha. Si queremos controlar los cuatro valores individuales, también podemos establecerlos por separado. Dentro de aquí, podemos establecer cuatro valores diferentes, y este será el valor de la parte superior, derecha, inferior e izquierda en un orden particular. En primer lugar, dos rems en la parte superior, cero en la derecha, abajo, e izquierda. A continuación vamos a establecer el modo de escritura, que va a ser importante para la disposición de nuestro texto horizontal o verticalmente. Esto va a ser un valioso vertical- lr. Esto hará que nuestro texto sea vertical de izquierda a derecha. El texto ahora es vertical como se esperaba, pero si echamos un vistazo a la versión final, vemos que los personajes también están erguidos. Podemos hacer esto en nuestro proyecto estableciendo también la orientación del texto y el valor de vertical. Podemos hacer uso de esta propiedad cuando nuestro modo de escritura está configurado en vertical, y luego finalmente, también podemos establecer el tamaño de fuente para que sea mucho más grande, por lo que el valor de cinco rem, guarde esto inalterado en el navegador. Cuando LCL Vertical Text se haya derramado en la sección de paralaje, para solucionar esto, vamos a agregar algo más dentro de nuestra consulta de medios. Vamos a apuntar a la sección de cabecera y vamos a establecer la altura para que sea del 100 por ciento, ahorrar y recargar. Esto ahora soluciona nuestro problema. No voy a hacer nada con nuestra sección de paralaje ahora si nos desplazamos hacia abajo, esto se ve bastante bien en la pantalla más grande también. Wee puede pasar a la sección de trabajo reciente. Dado que ahora tenemos más espacio en pantalla disponible, vamos a colocar el texto junto a la imagen en cada fila. Podemos hacer esto apuntando al contenedor, que es un trabajo reciente. Después establece la dirección del flex en la fila, vuelve a cargar, colocando el contenido dentro de nuestras filas lado a lado. Lo siguiente que tenemos que hacer es establecer el tamaño para nuestro área de texto y también nuestra imagen. Podemos hacerlo estableciendo la propiedad flex para que sea un valor. Por ejemplo, si la sección info y la imagen tuvieran un valor flex de uno, éstos ocuparían una cantidad igual de espacio. Pero queremos que la imagen sea un poco más grande para que podamos establecer el valor flex en la sección info al valor de uno. A continuación, configure la imagen para que tenga un valor flex de dos, que efectivamente ocupará el doble del espacio. Hagámoslo ahora empezando con la información de trabajo reciente. Recuerda que esto es para el texto que configuramos el valor flex para que sea uno y además añadimos algo de relleno al interior de una RAM. El imagen tiene la clase de imagen de trabajo reciente. Nuevamente, aún asegurándonos de que esto aún esté dentro de nuestra sección de consulta de medios, estableceríamos el valor flex en dos, asumiendo el doble del espacio disponible que nuestra sección de información. También voy a agregar un borde alrededor de esta imagen. Voy a empezar ajustando el color para que sea gris ligero. El espesor del borde para ser una RAM y también una línea sólida. Recarga el navegador, dejando que la imagen esté ocupando el doble del espacio disponible que nuestra info. Justo antes de terminar esta sección, también voy a apuntar a la imagen para que la imagen de trabajo reciente y luego el elemento de imagen anidado en su interior. Tan solo para asegurarse de que el ancho de la imagen y también la altura estire el 100 por ciento completo del contenedor. si acaso nuestras imágenes no tienen el tamaño correcto, como descubrimos antes, vayamos a nuestro proyecto final y echemos un vistazo a cómo se alterna nuestra imagen y nuestro contenido. Una de las formas en que podemos hacer esto es cambiar el orden de nuestro HTML por lo que si vamos a nuestra página de índice, podríamos cambiar alrededor del orden de nuestra imagen y nuestro texto. Este es un enfoque que podemos tomar y esto funcionará bien para la vista de pantalla más grande. No obstante, si vamos a la vista de pantalla más pequeña estirando el navegador, esto también afectará el orden de la pantalla pequeña. Aquí tenemos la info, la imagen, la info, y luego la imagen, este no sería el caso si cambiáramos el orden fuente del HTML. En su lugar podemos utilizar una propiedad flex box llamada orden, que nos permitirá cambiar el orden en el que aparecen los elementos en la página con un número menor o negativo que aparece primero en el archivo HTML. Voy a añadir una clase a la primera sección de información de trabajo reciente. Pasemos a nuestro primer proyecto y seleccionemos la información de trabajo reciente. Vamos a sumar una segunda clase de nuevo derecho. Ahora puedo usar esta clase más en nuestra hoja de estilo para reorganizar el orden fuente. Vamos a apuntar a esto. Para movernos a la derecha, podemos establecer el orden para que sea un valor de uno. El valor predeterminado es 0, así que justo antes de guardar este archivo, echemos un vistazo a lo que tenemos actualmente. Por el momento tenemos, si vamos a nuestros proyectos, tenemos la info a la izquierda y la imagen a la derecha. Guarda este archivo, recarga, y ahora nuestra sección de información se ha movido a la derecha de nuestro proyecto. El motivo por el que esto funciona es porque nuestro valor por defecto, nuestro orden por defecto, es el valor de 0. El apartado de imagen seguirá teniendo el valor de 0, haciendo que esto aparezca primero. Después estableceremos la sección info para que tenga un valor de uno. Este es un número mayor, esto aparecerá último en el orden. Esto también está dentro de la consulta de medios, por lo que este orden sólo surtirá efecto en las pantallas más grandes. Ahora terminemos el estilo para esta consulta de medios moviéndonos hacia abajo a la sección de contactos. Actualmente, todo está alineado al centro y también necesitamos volver a introducir nuestros textos rotados. Encima en la página de índice, bajemos a la sección de contactos. En primer lugar, tenemos la clase de rubro de contacto. Voy a hacer esto aún más grande para este apartado. Después podemos seleccionar todo el contenedor, cambiar la dirección del flex a la fila, y luego también agregar algo de espacio en. Empecemos con el rumbo a la clase de rumbo de contacto. Voy a restablecer el margen para que sea un valor de 0, establecer el tamaño de fuente para que sea aún más grande de una RAM, recargar. A continuación vamos a reintroducir el texto rotado. Hagamos esto anulando el tipo de visualización de antes. Seleccionemos la sección de contacto, la clase de giros. Todo lo que necesitamos hacer aquí es establecer el tipo de visualización para que sea bloque. Esto anulará estos estilos que establecemos antes. Si nos desplazamos hacia arriba, configuramos esta acción para que tenga el tipo de visualización de ninguno en la vista de pantalla pequeña, ahora dijimos que esto podría ser bloque. Esto ahora se mostrará en las pantallas más grandes. También queremos que esta sección esté sobre el lado derecho y la forma en que podemos hacerlo es ajustando el flex box. Podemos configurar la sección de contacto completa para que tenga la dirección flex de fila, lo que significa que nuestro texto vertical estará al lado de la sección aquí. Seleccione el contacto, que es el envoltorio completo para nuestra sección. Establezca el tipo de visualización para que sea el flex. Significa que podemos establecer la dirección del flex para que sea fila, recargar el navegador, colocar esto al lado del otro en la página. Podemos agregar algo de espacio en el medio seleccionando y justificando contenidos. El inmueble del espacio entre el cual distribuirá el espacio disponible entre nuestras dos secciones. También voy a establecer la alineación del texto sea la izquierda, más bien cerca del centro, que actualmente es. Esto empujará todo el texto hacia la izquierda del navegador en la pantalla más grande. Seguimos manteniendo el texto centrado en la vista de pantalla pequeña. 15. Personaliza animaciones en CSS: Ahora vamos a echar un vistazo a cómo podemos agregar animaciones CSS a nuestro proyecto. Una animación es una forma de cambiar los estilos CSS a lo largo de un periodo de tiempo. Por ejemplo, a lo largo de digamos dos segundos, tal vez queremos desvanecer un elemento en o podríamos cambiar de un color de fondo a otro de una duración establecida. También podemos usar esto para aplicar cualquier estilo CSS diferente que vamos a querer. Voy a echar un vistazo a cómo podemos incluir estos ahora. Las animaciones realmente pueden dar vida a tu proyecto. Ahora los voy a usar en la sección de encabezados. Primero por desvanecerse en el texto de, hola, soy Chris. Entonces después de un breve retraso, también vamos a desvanecernos en el texto justo debajo de dos, dando al usuario un suave mensaje de bienvenida. Este video en particular cubriremos agregando en nuestras propias animaciones personalizadas usando CSS. Entonces el siguiente veremos cómo usar una biblioteca de animación para agregar muchos efectos bonitos al desplazarse. Para configurar nuestras propias animaciones personalizadas, necesitamos configurar qué CSS queremos cambiar usando la regla de fotogramas clave. La regla de marcos clave está configurada en el archivo CSS, un poco como las consultas de medios que buscamos antes. Podemos ver un ejemplo a la derecha, utiliza el símbolo @ justo antes seguido del nombre de nuestra elección. Entonces dentro de nuestras llaves rizadas, agregamos en cualquier nombre de estilo CSS que queremos aplicar en ciertas etapas de la animación. En lo más básico tenemos para y desde, que es el estado de inicio y fin de la animación. Aquí, cambiamos el color de fondo. Entonces a la izquierda seleccionamos un elemento al que aplicar esto, vincula en nuestros marcos clave personalizados nombre de change-bg a una propiedad llamada nombre de animación. Si queremos más control sobre las etapas de animación, también podemos aplicar diferentes CSS en diferentes porcentajes de la animación. Podemos aplicar cualquier CSS que queramos, no sólo el color de fondo, que puede aplicar en cualquier etapa. Encima en nuestro HTML, vamos a agregar una clase personalizada para permitirnos hacer esto. Pasamos a nuestra página de índice hasta la sección de encabezados. Vamos a efectuar estas dos líneas de texto dentro de nuestro encabezado. Añadamos nuestra clase a estos dos elementos aquí. El nombre de la clase se va a desvanecer en la costumbre. En realidad lo voy a aplicar a nuestros textos justo debajo también. Más en nuestras hojas de estilo, podemos preguntar a nuestros marcos clave y esto va a ser justo en la parte inferior después de nuestra consulta de medios. Utilizamos el símbolo @, vamos a tener nuestros marcos clave dando a esto un nombre de fade in. Entonces mantén esto simple agregando nuestras reglas de y nuestras a dentro de aquí. En primer lugar, vamos a establecer la opacidad para que comience en cero. Esto es totalmente transparente, lo que significa que no lo podemos ver en la página. Podemos entonces establecer la regla para donde vamos a establecer la opacidad para que sea una. Significa que esto ahora es totalmente opaco y no transparente en absoluto. Ahora tenemos nuestra configuración de marcos clave. Podemos agregar esto a nuestro fade en clase personalizada justo por encima de estos marcos clave. desvanecen en la costumbre lo que acabamos de decir dentro de nuestro HTML. Después configuramos nuestra animación, pasando en nombre de fade in. Entonces podemos establecer la duración de la animación. Queremos que esto se aplique a lo largo de un segundo. En el transcurso de un segundo pasaremos del valor de opacidad de cero al valor de uno. Podemos ver esto guardando y pasando al navegador, recargar la página. Esto está bien y funciona como se esperaba pero podemos mejorar las cosas aún más agregando un efecto de flexibilización. Podemos utilizar la flexibilización para ralentizar el inicio o el final, haciéndolo parecer más suave y gradual y hacer una animación fácil dentro o fuera. Podemos añadir esto en el CSS justo después de nuestro nombre de animación. Podemos seleccionar la facilidad de entrada, recargar el navegador y ahora tenemos una transición más gradual, suave a medida que nuestra animación se está iniciando. Recuerda aunque no es solo la opacidad que podemos agregar, podemos agregar en cualquier otra regla CSS que quieras aplicar. A continuación, voy a añadir un retraso a las animaciones por lo que la segunda línea del texto se desvanece después de esta primera. Empecemos agregando algunas clases personalizadas a estos dos elementos. Para el encabezado nivel uno, podemos agregar al nombre de clase del retraso uno. Entonces el texto debajo del nombre de clase del retraso dos más en el styles.css. Ahora podemos apuntar a estos dos clústeres y establecer el retardo de animación. Empecemos con el retardo. Podemos establecer el retardo de animación para que sea cualquier valor que queramos. Quiero empezar configurando esto para que sea de 0.5 segundos. El retraso dos sólo va a ser un poco más largo ajustando el retardo de animación a 1.5 segundos. Guardemos esto y pasemos al navegador, actualicemos. Ahora vemos que las animaciones están funcionando y hay un retraso pero esto no está funcionando como se esperaba. La segunda línea siempre está ahí cuando se carga la página pero sólo queremos que esta línea aparezca cuando se haya completado la primera animación. Esto está sucediendo por la forma en que configuramos nuestros marcos clave. Si volvemos a nuestras hojas de estilo, una vez que nuestra página se cargue por primera vez, ya que las animaciones se retrasan, la opacidad no se fijará de inmediato en cero. Para solucionar esto, también necesitamos establecer esto en nuestra clase de animación de fade en personalizado. Establecemos esto en un valor inicial de cero. Esto surtirá efecto cuando se cargue por primera vez la página. Probemos esto ahora, recargar el navegador. Las cosas tampoco se ven del todo como lo esperábamos. Vemos que la animación sí tiene un retraso pero también desaparecen después de que termina la animación. Esto se debe a que por defecto una vez que finaliza nuestra animación, ninguno de estos estilos de los fotogramas clave permanece. Lo que significa que nos queda con la opacidad de cero al final de nuestra animación en lugar del volumen de uno que esperamos aquí. Los cambios que podemos hacer uso del modo de película de animación y establecer esto como un valor de delanteros. Dentro de nuestra clase de animación personalizada, podemos establecer el modo de película de animación y el valor de los delanteros. Recarga el navegador y esto ahora funciona como se esperaba. Establecer el modo de película de animación para avanzar significará que estos estilos desde el final de nuestros fotogramas clave permanecerán. En nuestro caso, la opacidad que se establece en uno. También hay un retroceso, que aplicará el CSS desde el primer fotograma clave. También ambos que aplicarán el estilo desde el principio y también el final. Por último, también podemos quitar el de sección de la opacidad para ser cero. Esto se debe a que ya tenemos esta configuración al inicio de nuestra animación. Vamos a comprobar que esto funciona bien, recargar el navegador y todo sigue funcionando como se esperaba. Las animaciones pueden jugar un papel importante en cómo se ve, se siente nuestra página web y también en cómo destaca también. Las animaciones también es un tema realmente grande así que si te interesa, te animaría a que te sumerjas más profundamente en el tema. A continuación, nos vamos a quedar con los mismos temas e incluir una biblioteca de animación, que nos dará una agradable mirada a los efectos de desplazamiento. 16. Bibliotecas de animación: Hola. Te animaría a seguir aprendiendo sobre la creación de tus propias animaciones personalizadas. Otra gran opción a utilizar es una biblioteca preconstruida. En particular, el que te voy a mostrar se llama Animate on scroll. Esta biblioteca nos va a permitir agregar animaciones a nuestros elementos a medida que el usuario se desplaza por nuestra página. Podemos establecer diferentes animaciones para diferentes partes para nuestro contenido. Por ejemplo, podemos establecer un efecto flip en nuestra parte superior de contenido, que es como voltear autos. También tenemos muchos otros efectos, como el zoom del contenido, podemos tener el contenido desvaneciéndose o deslizándose desde fuera de la página ya sea desde el lado derecho o desde el lado izquierdo. También tenemos más opciones de control, como establecer el retardo, la duración del tiempo y también podemos combinar estos efectos también. Echemos un vistazo a cómo podríamos aplicar esto a nuestro proyecto. Para incluir esta biblioteca, voy a buscar animate en scroll. Ahora tenemos que ir al enlace de GitHub. Este es el que necesitamos, justo aquí en la parte superior, así que haz click en esto. Entonces a medida que nos desplazamos hacia abajo por la página, podemos ver muchos ejemplos diferentes, que se incluye con la biblioteca. Tenemos alguna diapositiva en efecto, tenemos fundido y si vamos [inaudible] podemos ver más animaciones de flip, donde se puede dar la vuelta hacia abajo, izquierda y derecha. Después tenemos algunos efectos de zoom, donde ampliamos desde diferentes ángulos y también podemos establecer la duración y el tiempo también, donde ampliamos desde diferentes ángulos y también podemos establecer la duración y el tiempo también, hacer algunos efectos realmente bonitos en nuestra página. Para empezar con esta biblioteca, todo lo que necesitamos hacer es incluir el enlace CDN hacia abajo en la parte inferior. Si usas cosas como un proyecto de nodo, esto también se puede incluir, con gestores de paquetes como hilo, bower o NPM. Ya que estamos usando un proyecto HTML regular, tenemos los enlaces CSS y JavaScript en la parte inferior, cuales enlazaremos a los archivos requeridos. Empecemos con las hojas de estilo. Voy a copiar este enlace y luego podemos incluirlo en la sección principal de nuestra página de índice. En lista justo encima del enlace para nuestras hojas de estilo personalizado. Asegurándose de que nuestros estilos personalizados sean los últimos en el orden. A continuación podemos agarrar el enlace al JavaScript y esto también puede ir en nuestra página de índice. Copiar este enlace. Esto lo estoy viendo en la parte inferior de la sección del cuerpo justo después de nuestros contactos. Lo último que tenemos que hacer es llamar al script inicializado. Entonces vamos a copiar esto. La página está justo debajo. Esto inicializará la biblioteca a utilizar en nuestro proyecto. Esto es todo lo que necesitamos hacer ahora para la configuración, podemos empezar a usar los efectos, simplemente agregando algunos atributos a nuestros elementos. Todos estos nombres de atributos son los que vemos en la página web que acabamos de ver. Si nos desplazamos hacia arriba, vemos que los atributos como se desvanecen y esto es exactamente lo que hacemos en nuestro proyecto. Empecemos en la parte superior de nuestra página principal. Ya tenemos algunas animaciones personalizadas en la sección de encabezados, cuales se añadieron en el último video. Entonces voy a saltar hacia abajo a la sección de paralaje, donde podemos agregar algunos efectos a estos ítems aquí. Por esto voy a hacer uso de la animación flip a estos ítems de la lista, que tengamos un flip en efecto cuando nos desplazamos por la página. Pasemos a nuestro índice y localicemos la sección de paralaje. Dentro de aquí, para cada uno de nuestros ítems de lista, podemos empezar a sumar estos atributos. El primero es data-aos. Esto va a enlazar con el nombre de la animación que queremos utilizar. Voy a usar flip up. Como acabamos de ver en la página principal, también podemos establecer el retraso y también la duración, que es la escala de tiempo para la animación. Entonces empecemos con el retraso que es datos-aos-delay. Establecemos esto en milisegundos para el tiempo que tarda en comenzar la animación. Una vez cargada la página, para la primera, no voy a incluir el retraso, lo que va a aumentar es para todo el resto de los enlaces. A continuación la duración de los datos, que es data aos duración y de nuevo, esto es en milisegundos, con un valor de 1000 haz un segundo. Voy a fijar esto igual a 800 milisegundos. Es el tiempo que tardará la animación en completarla, copiarla y pegarla en el resto de los elementos de la lista. También vamos a usar el flip de animación para todo el resto de los ítems, pero aumentando el retraso para cada uno. Entonces 100, 200, 300 y luego 400. El tiempo puede tomar lo mismo y también puedes jugar alrededor este valor y ver cuál funciona mejor para tu sitio. Guarda esto y actualicemos el navegador. Desplácese hacia abajo. Ahora tenemos un bonito flip en efecto a medida que nos desplazamos hacia abajo por la página. Ahora vamos a bajar a nuestra sección de trabajo reciente, donde vamos a añadir algunas animaciones deslizantes. Vamos a empezar con los dos títulos de proyectos de planetas de pizza y también reaccionar trello. Estos títulos van a comenzar fuera de la página y luego desplazarse a la vista a medida que pasemos por esta sección. Estos agregaron dentro de nuestros encabezamientos de nivel cuatro. Entonces localicemos el primero, que es pizza planet, el nombre de data aos, y esta va a ser la animación llamada diapositiva izquierda. También podemos agregar una duración, igual que usamos arriba y establecer este campo 1,000, que es un segundo. Voy a agarrar esto y mover esto hacia abajo al segundo título, que es reaccionar trello pegar esto en y como está en el lado opuesto, vamos a deslizarnos a la derecha, manteniendo la misma duración que antes, guarde esto y vamos a probar esto en el navegador. Recarga, desplácese hacia abajo, ya que nuestro título lo desliza y lo mismo para el segundo. Recuerda, este es tu proyecto y puedes usar cualquier animaciones y tiempos que más te convenga. Pero a continuación voy a desvanecerme en la información justo debajo. El apartado está justo aquí. Voy a desvanecerse estos en. Para ello, voy a envolver todo el texto en un div, que va a actuar como envoltorio y luego voy a agregar la animación a este envoltorio. Por lo que podemos agarrar todo desde nuestro enlace de sitio de visita hasta justo debajo de nuestro título, así que recorta esto, dejando un lugar, nuestro nivel para rumbo. Podemos entonces agregar un div, que va a ser un envoltorio, pegar en todo este contenido y luego podemos agregar nuestra animación a este wrapper, el nombre de datos aos. Esto se va a desvanecer y la duración de un segundo. Agarramos también estos dos atributos y podemos trabajar con la imagen del proyecto, así que justo debajo. También tenemos esta imagen de trabajo reciente. Justo después de nuestra clase, pega esto en, también voy a mantener el mismo fundido en animación o aumentar la duración para ser 1500. Vuelva a cargar el navegador. Esto lo hemos agregado accidentalmente al segundo en lugar del primero, pero esto está completamente bien ya que vamos a duplicar esto para ambos proyectos. Hagamos lo mismo ahora para el primer proyecto. Podemos cortar un lugar, todos los textos de los sitios visitados, todo el camino hasta justo debajo de nuestro título, agregar un div como envoltorio, pegar el contenido de nuevo dentro, entonces podemos agregar nuestra animación, que se desvaneció en, la duración de 1000. Copia estos atributos y luego también podemos agregarlos a la imagen justo debajo. El div que rodea esto, pega esto en y mantenga esto consistente con la otra imagen, aumentará esto a 1500, es una coincidencia. Ahora probemos esto. Desplácese hacia arriba hasta la parte superior y actualice, hacia abajo hasta la sección del proyecto. Se ve la diapositiva en para el título y también la imagen en el texto ahora se está desvaneciendo. Por último abajo en la parte inferior, también tenemos la sección de contactos, donde también podemos agregar algunas animaciones aquí. Voy a deslizarme hacia arriba por el encabezado principal de, no seas extraño y luego deslizarme en las dos líneas de texto de abajo por encima desde la derecha de la pantalla. Encima en el HTML, podemos bajar a la sección de contactos y empezar con el encabezado. El nombre esta vez se va a deslizar hacia arriba, la duración, voy a poner el mío para que sea 1500. Veamos cómo se ve esto. Vuelva a cargar el navegador, entonces esto ahora se desliza hacia arriba. Solo necesitamos trabajar con nuestras dos líneas de texto a continuación y traerlas desde arriba en el lado derecho. También vamos a sumar un retraso a estas dos animaciones, dada la cabeza en la oportunidad de llegar a la cima, si todos estos se mueven a través. Empecemos con el texto justo a continuación. Pega esto en y el nombre de la animación se va a deslizar a la izquierda. Este también necesita un retraso. Esto es data aos delay y 1000 milisegundos, la duración también vamos a aumentar esto para ser 150 también, y luego agarrar esto y podemos añadir esto para la última línea también. Pegue esto en como un atributo. Podemos aumentar el retardo para ser de 200 milisegundos, manteniendo la misma duración y nombre de animación. Acude al navegador y recarga, dejándonos con algunos bonitos efectos de animación. Hay una cosa sin embargo que cuidar antes de que envuelva este video. Una de las cosas que notarás desde que agregaste en esta animación, es que ahora podemos desplazarnos a la derecha de la página cuando se carga por primera vez. Esto se debe a que nuestras animaciones, que se deslizan hacia adentro, comenzarán desde el borde de la página y luego se deslizarán a nuestra vista. Desde que el contenido comenzó fuera de la página, el navegador ahora cosas que la página es mucho más ancha de lo que se pretende ser. Todo lo que necesitamos hacer para arreglar esto es decirle al navegador que oculte cualquier contenido que desborde la página. Podemos hacerlo agregando un desbordamiento en el eje x y lo vamos a hacer en la sección de cuerpo de nuestras hojas de estilo. Vamos a desplazarnos hacia arriba a nuestros estilos globales. Podemos declarar cómo queremos manejar cualquier desbordamiento en el eje x, que es de izquierda a derecha de la página. Cambia esto a un valor de oculto. Guardemos esto. Ahora si volvemos al navegador y nos desplazamos de nuevo a la sección de contenido principal, golpeamos recargar y ahora esta propiedad de desbordamiento nos está impitiendo desplazarnos fuera de la página. También vamos a sumar más de estas animaciones a medida que avancemos por el curso. Pero siéntete libre de intercambiar cualquiera de estas animaciones por otras diferentes para que se adapte a tu estilo. Esta es ahora nuestra página de inicio completa, y en los próximos videos, comenzaremos a enfocarnos en nuestra página de portafolio para lucir todas nuestras habilidades. 17. Comentario rápido: compatibilidad del navegador: CSS siempre está evolucionando junto con la adición de algunas nuevas características. Estas nuevas características a menudo son geniales y es posible que deseemos usarlas lo antes posible. No obstante, sí tenemos que tener cuidado porque muchas veces toma tiempo para estas características sean totalmente compatibles en todos los navegadores, e incluso cuando el soporte de navegadores sí se pone al día y se lanza la nueva versión del navegador, aún tenemos que estar conscientes de que no todo el mundo estará usando la última versión inmediatamente. El auxilio entre otros que es un sitio realmente útil como caniuse.com, esto nos permitirá revisar una característica CSS y también ver cuán ampliamente soportado es a través de los principales navegadores incluyendo cualquier versión anterior también. Por ejemplo, si quisieras usar el Flexbox en nuestros proyectos, podríamos teclear esto y luego lo que queremos es el módulo Flexbox, que podemos ver aquí. En la parte superior tenemos una lista de todos los principales navegadores y también el soporte para cada una de las versiones. Por ejemplo, la versión 80 de Chrome es verde y podemos ver por el pop-up que esto es totalmente compatible y también podemos ver el uso global de este navegador. Por ejemplo, esta corriente [inaudible] es de 10 por ciento en este momento y esto es realmente importante para determinar qué soporte de navegador desea proporcionar para su proyecto. Si echamos un vistazo a los diferentes tonos, Internet Explorer versión 11 solo tiene soporte parcial pero actualmente esto solo tiene alrededor del uno por ciento de uso global, lo que tendremos que decidir si esto va a ser un problema para tu audiencia. Generalmente, algo con todas estas secciones verdes como esta es bastante seguro de usar en un proyecto ya que es ampliamente apoyado. Echemos un vistazo a algo más como la opacidad que hemos utilizado recientemente en nuestros proyectos y la regla de opacidad que aquí ves es prácticamente totalmente verde, por lo que esto es seguro de usar en todos los navegadores. Las animaciones también están bien apoyadas. [ inaudible] algo en ella para tener cuidado. Escribamos las animaciones y veamos qué sale. Si tecleamos la animación, vemos algo llamado AnimationAPI, y vemos que esta característica es experimental. Esto se debe a que esta no es exactamente la animación que utilizamos en nuestro proyecto. El motivo de esto es porque la animación es una taquigrafía CSS para múltiples cosas. Si pasamos a nuestro proyecto y echamos un vistazo la animación que usamos antes en nuestro fade-in, la propiedad de animación es una taquigrafía para cosas como el nombre de la animación, que tenemos aquí, y también la animación-tiempo- función. Podríamos sumar estos por separado. Entonces podríamos agregar el nombre de la animación y establecer la velocidad de decoloración, y luego la función de temporización de animación, y luego podríamos configurar esto para que sea fácil de usar al igual que hemos usado anteriormente, y luego eliminar toda la taquigrafía. Esto tendría exactamente el mismo efecto pero esto es solo una forma de agrupar varias propiedades relacionadas en una sola línea. De hecho, nuestra animación también es una taquigrafía para la duración de la animación también, por lo que incluso podemos eliminar esto, podemos eliminar esta línea de código, y luego podemos colocar esto dentro de nuestra taquigrafía y esto funcionará exactamente igual. Solo tomemos esto yendo al proyecto y dentro de la sección de cabecera, recargar y todo sigue funcionando como se esperaba. Esto es algo a tener en cuenta al buscar propiedades CSS, que a veces una propiedad puede ser una abreviatura para múltiples reglas CSS. Si quieres saber si algo es una taquigrafía o no, puedes dirigirte al sitio web de Mozilla y luego hacer una búsqueda de esa propiedad en particular. Por ejemplo, busquemos la frontera. Podemos entrar en la sección CSS y vemos de inmediato que el borde es una propiedad taquigráfica que establece el ancho del borde, el estilo del borde, y también el color en una línea. Generalmente, cuando se trata de propiedades CSS más nuevas, se trata de equilibrar más características que desee, el proyecto RTA, junto con catering para sus usuarios objetivo. También hay herramientas que pueden ayudar con el soporte para navegadores también, y esto está usando prefijos de proveedor y polyfills. No estaremos cubriendo estos durante este curso pero sí siéntete libre de mirar más profundamente estas materias si estás interesado en aprender más. 18. Preparar nuestra página de proyectos: Ahora vamos a crear nuestra página de proyecto, que será un escaparate de nuestro trabajo anterior. Esto también nos dará la oportunidad de aprender una nueva técnica CSS que se llama la cuadrícula. A diferencia del flexbox que controla nuestros diseños en una dirección, la cuadrícula CSS nos permitirá controlar nuestro contenido tanto en las direcciones horizontal como vertical. Pasando a la versión final, voy pasando de nuestra página de inicio. Si hace clic en el enlace de navegación para los proyectos, esto incluye la misma sección de encabezado que hemos utilizado para la página de inicio, y luego podemos desplazarnos hacia abajo y los proyectos recientes se animarán a medida que se desplaza hacia abajo. También podemos pasar el cursor sobre cada uno de estos, y el título se mostrará para cada proyecto. Se puede ver en esta vista completa de escritorio ahora usamos el diseño de cuadrícula CSS. Aprenderemos todo sobre esto en los próximos videos, y esto también es totalmente receptivo. Si reducimos el navegador hacia abajo veremos varios cambios de diseño como el dispositivo de tamaño de tableta que luego cambiará nuestros proyectos a ser de dos columnas. Si reducimos esto aún más esto entonces se convierte en el ancho completo del navegador. Para empezar con esto vamos a pasar por encima de nuestro proyecto y crear un nuevo archivo en nuestro directorio de portafolio. Crea un nuevo archivo, y esto se va a llamar los Proyectos. Nuevamente esto va a tener la extensión HTML. asegura de que esto esté en la raíz del portafolio junto al índice y las hojas de estilo. Voy a hacer uso de la misma sección de encabezado para que podamos facilitarnos la vida yendo al index.html, y podemos copiar todo el contenido y luego Modificar esto. Esto ya tiene el enlace a nuestro projects.HTML el cual agregamos temprano al crear la sección de encabezado. Comando o Control A para seleccionar todo, Copiar el contenido sobre y luego Pegar esto en el projects.HTML. A partir de abajo también necesitamos mantener el animate en la biblioteca de desplazamiento, pero vamos a eliminar todo el resto del contenido hasta la sección de encabezado. Esto incluye nuestra sección de trabajo reciente, la sección de paralaje. Quitemos esto dejándonos sólo con la sección de encabezado, y luego nuestro script en la parte inferior. Esto también tiene nuestro mismo enlace con la hoja de estilo que creamos, lo que significa que nuestros estilos también seguirán aplicándose. Lo siguiente que tenemos que hacer es cambiar el título. Estos van a ser los proyectos de Chris Dixon, y esto ahora nos da un buen punto de partida el cual aún incluye el mismo encabezado y todos los enlaces que necesitamos a nuestro propio CSS junto con la biblioteca de animación. Vamos a Guardar este archivo y la lista de comprobación está funcionando bien en nuestros proyectos, vamos a Recargar el navegador desde la página de inicio, podemos hacer clic en los Proyectos, y ahora son enlaces a nuestro projects.HTML, y podemos ver el encabezado se encuentra en su lugar. Para esta página ahora configuraré. A continuación vamos a sumar nuestros proyectos utilizando un primer enfoque móvil. Recuerda desde antes en el curso también necesitarás descargar algunas imágenes, o tomar algunas imágenes reales de algunos proyectos anteriores que creaste. Si no tienes ninguna que esté completamente bien puedes usar cualquier imagen de marcador de posición que te gustaría, pero asegúrate de que estas estén listas para usar en el siguiente video. 19. Incluir nuestra página de proyectos HTML: Dentro de la carpeta de imágenes en nuestro proyecto, tenemos todas estas imágenes que ahora vamos a utilizar en nuestro projects.html. También cubrimos la estructura básica y el encabezado en el último video junto con el guión de animación hacia abajo en la parte inferior. Ahora voy a empezar con nuestra sección de proyectos creando un nuevo rapero de sección, que también va a tener un nivel ti encabezando con el texto de los proyectos recientes. Esto también va a recibir diversas clases a medida que vamos y haremos uso de éstas en el CSS muy pronto. El rubro de nivel tres va a tener el título de la clase de proyectos. Entonces después de esto, voy a añadir un div, que va a ser rapero para todos nuestros proyectos, así que vamos a añadir una clase de proyectos a esto. Entonces cada div individual dentro de aquí va a ser para un solo proyecto. Cada uno de estos proyectos va a tener una identificación. Voy a llamar al primero, trabajo uno, y este ID se va a usar más adelante en el CSS. Cada uno de estos también va a tener un nombre de clase consistente de grid-item. Después anidados por dentro si echamos un vistazo a la versión final, vamos a tener una imagen y también el título del proyecto, que se va a mostrar más adelante cuando pasemos el cursor sobre cada imagen. Tenemos que sumar estos dos elementos al comenzar con nuestra imagen. Todas nuestras imágenes en esta carpeta de imágenes. El primero que voy a usar, va a ser el reproductor de música, también el texto antiguo. Entonces después de esto, podemos agregar un enlace con los elementos a y este va a ser el texto para nuestros proyectos. Este es el reproductor de música. Puede agregar un enlace a una página separada para proporcionar más detalles sobre este proyecto individual, si así lo desea. Voy a dejar la mía vacía ya que no estaremos cubriendo esto durante este curso, pero siéntete libre de hacerlo como un reto. Un nombre de clase de texto oculto. Ya que el texto se va a ocultar inicialmente hasta que el usuario pase el cursor por encima, lo que podemos seguir adelante y teclear cada uno de estos individualmente si así lo desea. Pero como tengo bastante que pasar, voy a copiar y pegar esto y luego cambiar sobre los detalles. Recuerda, tampoco necesitas incluir tantos proyectos como yo, y también puedes agregar más si lo prefieres. Trabajo dos, la misma clase, la ubicación de la imagen, esta vez va a ser para reaccionar trello, el viejo texto dos, y también el título. El tercero en el que vamos a pegar. De nuevo, asegurándose de que esto esté dentro del rapero del proyecto, pega esto en, encuentra el ID. La imagen para mi tercera va a ser para el editor de fotos y también el texto enlazado dos. El cuarto va a ser para la app de productividad y también el antiguo texto dos. Es así como se van a estructurar nuestros proyectos. Tengo nueve en total, así que voy a saltarme adelante y sumar estos ahora. Pausa el video y regresa una vez que hayas terminado de agregar todos tus proyectos. Todos mis nueve proyectos ya están en su lugar, y ojalá, tengan los tuyos terminados dos. Ahora, pasemos al navegador y echemos un vistazo a esto en el projects.html. Justo debajo del encabezado, tenemos nuestro título de proyectos recientes. Entonces para cada uno de nuestros proyectos tenemos nuestra imagen y también el título al lado. Nuestro contenido está ahora en su lugar para nuestra página de portafolio. A continuación, vamos a aplicar algo de estilo CSS. Para empezar, vamos a estar empezando con el primer acercamiento móvil y aprovechando el CSS Flexbox. Después más adelante en el curso, aplicaremos una consulta de medios cuando tengamos más espacio de pantalla disponible. Entonces podemos aprovechar la cuadrícula CSS para disenar nuestro contenido en dos direcciones. 20. Primer diseño de proyecto para celulares con Flexbox: Según lo prometido, ahora vamos a seguir adelante con el estilo, comenzando con la vista en pantalla pequeña, y luego podremos jugar cuando queramos conseguir más espacio en pantalla. En el último video agregamos el HTML para todos los proyectos. Si vamos a la página HTML, vemos que todos nuestros proyectos individuales están envueltos en este div con la clase de grid-item, y luego todos estos elementos de cuadrícula están anidados dentro de este div proyectos. Estas van a ser las dos clases principales que necesitaremos en nuestras hojas de estilo. Entonces vamos allá ahora. Entonces voy a crear una nueva sección justo encima de nuestra consulta de medios, y luego crear un comentario para esta página de proyectos. Ya basta con el título, que era el título del proyecto, y todo lo que voy a hacer aquí es establecer el tamaño de fuente para que sea de 1.6 rems, que es el equivalente a 16 píxeles. Nuestro envoltorio principal era la clase de proyectos, y es aquí donde podemos establecer el tipo de display para hacer uso del flexbox. El primer vista móvil en el que estamos trabajando actualmente nos permitirá establecer la dirección flex para que sea la columna, lo que significa que nuestros artículos se apilarán verticalmente y luego cambiarán esto más adelante cuando tengamos más espacio disponible en pantalla. Cada uno de nuestros proyectos y esta clase de elemento de cuadrícula, y vamos a utilizar esto para establecer inicialmente algún espacio entre cada uno agregando algún margen en la parte inferior de cada uno y el volumen de un rem. Si ahora echamos un vistazo a la versión final, vemos que esto tiene el borde gris que rodea a cada una. Para ello, vamos a añadir un color de fondo a cada una de nuestras secciones. Para que este fondo sea visible desde la imagen, vamos a añadir algún relleno alrededor del borde de cada uno. Esto creará algo de espaciado, por lo que nuestro fondo pasará por los cuatro lados. Por lo que podemos establecer el fondo para que sea el valor de gris claro de listones, recargas, y sólo podemos ver esto detrás del título del proyecto. Entonces para ver esto alrededor de los cuatro lados, vamos a agregar el valor de relleno de un rem. Esto nos da el efecto de una frontera. Actualmente vemos que nuestra frontera es más ancha en la parte inferior, y esto es simplemente porque actualmente tenemos el título del proyecto. Quitaremos estos lugares sobre la imagen muy pronto. Después de nuestro elemento de cuadrícula, ahora vamos a pasar a la imagen y establecer que este sea el ancho completo del contenedor. Podemos hacer esto apuntando a nuestra imagen de elemento de cuadrícula, y luego establece el ancho y la altura para ser del 100 por ciento. Esto asegurará que nuestra imagen se ajuste completamente al elemento de cuadrícula. Ahora vamos a guardar esto y recargar los proyectos. Esto se ve bien en la vista de pantalla pequeña. No obstante, si estiramos el navegador, estas imágenes comienzan a estirarse realmente. Para mejorar esto, vamos a cambiar este diseño dos veces usando dos consultas de medios. Actualmente solo tenemos configurada una consulta de medios. Voy a hacer uso de estos dos, cambiar la dirección flex para ser fila. Por lo que tenemos dos proyectos uno al lado del otro. Entonces en el próximo video, iremos aún más ancha a una vista de escritorio completa, y luego haremos uso de la cuadrícula CSS. Entonces desplácese hacia abajo, ya tenemos nuestra consulta de medios en su lugar, y voy a ir al final de esto. Llena el corsé de cierre justo aquí. Empecemos con nuestros proyectos. Recuerda que este es el envoltorio principal para todos nuestros proyectos, y podemos establecer la dirección del flex para que sea fila. A continuación podemos apuntar al elemento de cuadrícula, que es nuestro único proyecto y podemos establecer la base flex ser un valor de 45 por ciento. El flex base va a ser el tamaño por defecto de nuestros elementos, que son nuestros proyectos, y esto también deja 5 por ciento para cualquier espaciado en el medio. Si guardamos esto y recargamos, vemos que los proyectos no se ven del todo como se esperaba, que de repente flexibilizan base para ser de 45 por ciento. Sí esperábamos tener dos imágenes de lado a lado con el 5 por ciento en el medio para el espaciado. Esto se debe a que por defecto nuestros artículos están configurados en ningún envoltorio, por lo que todos los artículos intentarán encajar en la misma línea. Podemos anular esto estableciendo el flex wrap porque cada elemento individual se romperá en su propia línea después de tomar en cuenta el ancho. Entonces en nuestros proyectos, si flex wrap, podemos anular el valor predeterminado de no wrap para simplemente ser wrap. Guarda esto y vuelve a cargar. Ahora veremos dos proyectos uno al lado del otro, segmentados 45 por ciento cada uno. Todo el espacio adicional, sin embargo, está en el lado derecho. Pero se vería mucho mejor si distribuyéramos el espacio de manera más uniforme. Para permitirnos hacer esto, tenemos una propiedad flexbox llamada justify content, y esto nos va a permitir determinar dónde queremos que aparezca este espaciado. Vamos a configurar esto para que se espacie uniformemente para que todo el espacio adicional alrededor de los elementos se divida por igual. Ahora el espacio en blanco se dividió por igual entre nuestros proyectos. Correcto. Por lo que ahora tenemos el estilo en su lugar para el diseño de pantalla pequeña usando el flexbox, y nuestro sitio ahora se ve bien en un dispositivo pequeño tamaño móvil o en una tableta pequeña. No obstante, aunque también queremos atender a pantallas más grandes y dispositivos de escritorio, y lo haremos en el siguiente video y también obtendremos nuestro primer vistazo al uso de la cuadrícula CSS. 21. Primera impresión en la cuadrícula de CSS: Ya sabemos usar el CSS Flexbox, el diseño de un contenido a través de un eje. Por ejemplo, en esta sección superior aquí, tenemos el contenido dispuesto a través de la página en fila. Justo debajo de esto, tenemos un diseño basado en columnas donde nuestro contenido se apila de arriba a abajo.Este es un gran uso para el Flexbox, pero esto también tiene una limitación, nuestro contenido dentro de cada sección solo se puede disponer en una dirección. No obstante, si echamos un vistazo a un diseño basado en cuadrícula en el lado derecho, podemos usar la cuadrícula CSS para controlar el diseño a través de dos direcciones.Lo primero que tenemos que hacer es establecer el ancho y alto de nuestras columnas y filas. Podemos entonces establecer cuánto de una brecha queremos entre cada uno de nuestros elementos. Entonces también podemos establecer si nuestros elementos están todos para ser iguales o si queremos que se fusionen como vemos justo aquí. Otra gran parte de la cuadrícula es también la capacidad de colocar nuestro contenido en cualquier sección que queramos. Podemos hacer esto o podemos permitir que nuestro contenido fluya de forma natural y ocupe el siguiente espacio disponible en la cuadrícula. Uno de los conceptos erróneos sobre la grilla y Flexbox para empezar es que necesitamos elegir ley IV. Por encima de todo esto no es la intención. El grid no está destinado a sustituir al Flexbox y se pueden complementar entre sí en los mismos proyectos. Ahora agreguemos en nuestra consulta final de medios, transformemos nuestros proyectos en una cuadrícula. Yo quiero agregar el mío alrededor de la marca de 1,000 píxeles, pero por supuesto puedes jugar con esto para adaptarse a tus proyectos de cualquier estilo de CSS. Después de la última consulta de medios, voy a agregar una nueva consulta de medios con el @media real. Por supuesto, podemos apuntar a diferentes tipos de pantalla, como la pantalla o la vista de impresión. Bueno al igual que antes, solo voy a usar el ancho mínimo, así como esto, y establecer esto en 1000 píxeles. Empecemos con nuestro envoltorio de proyectos y la forma en que podemos introducir la cuadrícula CSS. Al igual que hicimos con el Flexbox, es establecer el tipo de pantalla. Establecemos la pantalla para que sea la cuadrícula, y también voy a establecer la altura de la sección para que sea 100 por ciento de la altura del punto de vista. Lo siguiente que tenemos que hacer es declarar cuántas columnas y filas queremos usar en nuestra cuadrícula. Establecemos las columnas mediante el uso de la propiedad de columnas de plantilla de cuadrícula, y luego establecemos qué ancho queremos que sea cada columna. Por ejemplo, si queríamos tres columnas, ser de 200 píxeles lo hará así. Entonces 200 píxeles, 200 píxeles, y luego, 200 píxeles. Ahora si guardamos y recargamos, ahora vemos nuestras tres columnas a 200 píxeles cada una. También podemos hacer que estos sean diferentes para que el medio pueda ser 500, y esto sólo afectará, nuestra columna media. Si quisiéramos agregar uno extra, todo lo que necesitamos hacer es agregar un valor extra, así como esto, y esto ahora se refleja en el navegador. También podemos hacer uso de diferentes valores como porcentaje, ems, carneros, o también podemos hacer uso de una unidad fraccional de cuadrícula, que ocupará una parte del espacio disponible. Si quisiéramos tres columnas iguales, podríamos usar las unidades FR, por lo que una fr, una fr y una fr y éstas ahora ocuparían tres espacios iguales. Después de esto, también podemos establecer nuestras filas de plantillas de cuadrícula, y probablemente puedas adivinar qué hará esto. Esto establecerá el espaciado para cada una de nuestras filas en nuestros proyectos. Por ejemplo, vamos por 100 píxeles, 300 píxeles, y luego 200 por el tercero. Recargar. En realidad no necesitamos establecer las filas de plantilla de cuadrícula para nuestro proyecto si no tenemos este conjunto en absoluto. Quita esto. Dado que tenemos las tres columnas establecidas, el contenido ocupará las tres columnas de una fila, y luego el contenido restante se moverá a la siguiente fila. Después de esto, también podemos sumar algo de espacio entre cada uno de estos proyectos, y podemos hacerlo agregando una brecha de cuadrícula. El espacio de cuadrícula es simplemente el espacio entre cada una de nuestras filas y columnas. Yo quiero que el mío sea de 20 píxeles. Una de las cosas buenas de la brecha de rejilla es que tampoco agrega ningún espaciado en el exterior. Sólo se aplicará entre cada una de nuestras secciones. Algo que notarás sin embargo, es que hay más espacio debajo de cada proyecto del que está en medio a pesar de que hemos establecido una brecha igual de 20 píxeles entre cada uno. Esto se debe a que desde antes cuando creamos la primera vista móvil, establecemos algún margen en la parte inferior de cada uno de estos ítems. Solo queremos que esto surta efecto para la vista móvil. Por lo tanto, en esta consulta de medios también puedes restablecer el margen, estás de vuelta a cero. Esto se estableció en la clase de elemento de cuadrícula, y todo lo que tenemos que hacer es establecer el margen inferior para que sea cero. Recarga el navegador, y esto aún surtirá efecto en la pantalla pequeña. Expande el navegador al tamaño más grande y la brecha de cuadrícula ahora es igual. El grid también nos proporciona una función de repetición, que es un atajo. Si tenemos varias filas o columnas con espaciado igual, sólo podemos tener estas tres columnas iguales, por lo que en lugar de escribir esto tres veces, podemos usar la función de repetición. Entonces dentro de los corchetes declaramos cuántas veces queremos que esto se repita. Por ejemplo vamos cuatro veces, y luego establece qué tan ancho queremos la columna, guardar y refrescar. Estos ahora se repiten cuatro veces. Pero vamos a querer dejar esto como tres, igual que antes solíamos. Es así como funciona el sistema de rejilla en un nivel básico. Pero ¿y si no queremos que nuestra grilla sea tan parejo? Puede haber casos en los que queremos que nuestras imágenes o nuestras secciones se superpongan a múltiples partes de nuestra cuadrícula. Bueno, para esto, se nos proporciona la propiedad de áreas de rejilla, y esto es lo que vamos a descubrir en el siguiente video. 22. Áreas de cuadrícula para diseños más avanzados: Actualmente, nuestra cuadrícula CSS se ve un poco así. Hemos creado columnas y filas de igual tamaño, y esto está diseñado para aceptar piezas de contenido del mismo tamaño. pesar de que en ocasiones tenemos la necesidad de crear áreas de diferentes tamaños para permitirnos utilizar piezas de contenido de diferentes tamaños. Por ejemplo, es posible que desee una pieza de contenido más amplia, extienda a través de dos áreas de cuadrícula o que haga lo mismo verticalmente para una pieza de contenido más alta. Afortunadamente, podemos hacer esto con la cuadrícula CSS, usando las áreas de cuadrícula y esto es lo que vamos a echar un vistazo a usar ahora. En nuestro proyecto inicio HTML, le dimos a cada uno de nuestros proyectos un ID único. Esto es trabajo1, trabajo2, y luego aumentando para cada uno de nuestros artículos. Este ID puede ser utilizado en el CSS para colocar cada una de estas secciones en cualquier parte de nuestra cuadrícula. Por el momento nuestros elementos de cuadrícula están fluyendo de forma natural a través de la página. Después pasar a la siguiente fila. Podemos usar estos identificadores de vez en cuando colocarlos en diferentes secciones. También podemos permitirles que tomen un múltiplo secciones, y esto es lo que vamos a estar cubriendo en este video. En este archivo CSS, ahora voy a volver a subir a nuestra sección de la página del proyecto donde agregamos el comentario. Vamos a desplazarnos hacia arriba. Esta es la sección aquí. Agregamos esto en cualquier lugar, pero voy a agregar esto después del título, y podemos seleccionar nuestra sección por ID usando el hash y el nombre del trabajo1. Esto puede parecer un poco confuso al principio, pero ten atención conmigo ya que esto se hará más claro muy pronto. Lo que vamos a hacer aquí es establecer el área de cuadrícula, entonces vamos a darle a esta área de cuadrícula un nombre único. Vayamos por el trabajo1. Ahora tenemos esta sección en nuestro CSS asignada a una nueva área de cuadrícula llamada work1. Entonces vamos a repetir esto para cada una de nuestras secciones. work2, esto puede ser cualquier nombre que elijas, pero voy a mantener esto simple y consistente. Número cuatro, número cinco, y recuerda el mío sube hasta nueve artículos. Seis, siete, número ocho, y finalmente número nueve. Ahora, hemos asignado un área de cuadrícula con nombre a cada uno de nuestros elementos. Podemos ponerlos de cualquier manera que queramos. Volvamos a nuestra consulta de medios donde configuramos nuestra cuadrícula más temprano, abajo en la parte inferior de este archivo. Podemos entonces utilizar la propiedad de áreas de plantilla de cuadrícula. Yo quiero agregar esto en su propia línea, por lo que está más claro. En el interior aquí vamos a declarar cómo queremos que se vea nuestra nueva cuadrícula. En lugar de ciertas cosas nuestro peso, nuestras columnas de plantilla de cuadrícula, y filas que miramos antes, donde el contenido fluirá de forma más natural, aquí estamos declarando exactamente qué pieza de contenido queremos sumar a cada una de nuestras áreas de rejilla. Presentamos esto de manera visual entre las citas. Por ejemplo, si quisiéramos columnas libres, podríamos establecer el primer lugar en la parte superior izquierda, que es éste, para que sea la sección llamada work1. A continuación, voy a declarar que work4 va a ser el segundo ítem de la primera fila, luego el tercero va a ser el trabajo7. Estos son los elementos que desea que aparezcan en la primera fila. En la siguiente fila entre las cotizaciones, entonces podemos hacer exactamente lo mismo. Voy a decir que es trabajo2 trabajo5, y luego también trabajo7. Observe aquí que estos cuatro son piezas únicas. Entonces en el lado derecho tenemos dos con el mismo nombre. Esto significa que el trabajo7 tomará dos partes, lo que significa que será mucho más alto que los demás artículos. Por ejemplo, en nuestra cuadrícula aquí, esta será una sección justo aquí, y el trabajo7 ocupará ambos lugares. Abajo a nuestra siguiente fila, voy a establecer trabajo3, trabajo6 , y luego trabajar8. Entonces para la siguiente fila, voy a agregar una sección de trabajo. Esto va a abarcar todo el ancho de nuestra cuadrícula ocupando tres partes en la misma fila. Ya que tenemos tres secciones declaradas, todo lo que necesitamos hacer es agregar el mismo nombre de trabajo9 a cada una de nuestras secciones. Aquí sin siquiera ver la cuadrícula en el navegador, obtenemos una representación visual de cómo se va a diseñar nuestra cuadrícula. Podemos ver que todas estas secciones son individuales, excepto esta última sección aquí, y también esta sección vertical en la parte superior derecha. Ahora vamos a guardar esto. Vuelva a cargar el navegador. En la parte superior derecha tenemos esta sección que abarca las dos columnas verticales. Después tenemos nuestras piezas individuales todas rodeadas, luego en la parte inferior, la sección retomó la fila completa, que es la obra9. Podemos utilizar esta técnica de área de cuadrícula para crear algunos diseños de aspecto agradable y también algunos diseños más complejos dependiendo del contenido que tengamos dentro de nuestra cuadrícula. En el siguiente video, vamos a mejorar nuestra sección de portafolio agregando algunos bonitos efectos de hover CSS. 23. Superposición de texto en CSS, efectos cuando pasas con el cursor y animaciones: Bienvenido de nuevo. Nuestro proyecto ahora está tomando forma y casi completo. Ahora voy a terminar las cosas agregando un poco más de estilo CSS y también efectos. Si tomamos capa, vamos a añadir un efecto flotante en cada uno de nuestros proyectos dentro de la cuadrícula, que también va a revelar el título del proyecto. También vamos a hacer uso de nuestra biblioteca de animación a en esta página. Primero empecemos por eliminar el título del proyecto y luego vamos a volver a introducir esto más adelante cuando el usuario pase el cursor sobre nuestros proyectos. Empecemos de nuevo en nuestras hojas de estilo. Si echamos un vistazo a toda la sección de proyectos o a la página de todos los proyectos, vamos a añadir esto en la parte inferior de la sección. Asegúrate de que esto esté fuera de cualquier consulta de medios, ya que siempre queremos que esto se aplique para todos los tamaños de pantalla. Vamos a usar la clase de texto oculto. Si recuerdas en el HTML, agregamos esta clase a cada uno de nuestros elementos de cuadrícula, por lo que podemos hacer uso de esto ahora. El alto de un texto, lo que vamos a hacer para empezar, es establecer el tipo de visualización para que sea ninguno. Esto luego eliminará esto de la página. Si tocamos refrescar, ahora vemos que se ha eliminado nuestro título. Ahora necesitamos una forma de reintroducir esto cuando el usuario pasa por encima de nuestra imagen. Vamos a hacer esto con una combinación de clases. Recuerda que cada uno de nuestro proyecto está rodeado en esta clase de ítem de cuadrícula para que podamos acceder a esto para empezar. Después separados por una columna, podemos usar lo que se llama pseudo-clase. Se utiliza una pseudo-clase cuando queremos aplicar CSS para un estado en particular, como cuando un elemento está activo, cuando se está visitando un enlace, o en nuestro caso, cuando queremos pasar el cursor sobre los elementos. Cuando pasamos por encima de estos elementos, queremos afectar a estos textos ocultos justo arriba. Entendemos que justo después, ahora todos los estilos se aplicarán a esta clase de texto oculto. Una vez que pasamos el cursor sobre nuestro elemento de cuadrícula, tenemos este tipo de visualización de no ajustar aquí. Queremos restablecer el tipo de pantalla distribuida de bloque, que luego colocará esto de nuevo en nuestro HTML. También el text-align para estar en el centro de nuestra sección. También podemos jugar con el tamaño de fuente, vamos por 4rem y también el color de fuente del blanco. Pasado al navegador hit refresh y ahora cuando pasamos el cursor sobre cualquiera de nuestras imágenes, vemos aparecer este texto grande en la parte inferior. Ahora nuestros textos desaparecen cuando el hover. Pero esto sigue ocupándose del espacio en la parte inferior del div. No obstante, no queremos esto en la parte inferior. Queremos que esto se coloque en el centro de nuestra sección. El motivo por el que vemos esto en la parte inferior de nuestro div es porque por defecto el elemento ocupará espacio en el orden en que están en el HTML. Tiene sentido que tengamos nuestra imagen luego seguida de nuestro texto. Una forma en que podemos cambiar esto es establecer la posición CSS del texto para que sea absoluta. Absoluto, eliminaremos los elementos del flujo o de la página, lo que significa que efectivamente no ocupará ningún espacio. Entonces somos libres de posicionar esto en cualquier lugar que queramos. Volvamos a nuestra hoja de estilo y justo después de nuestro color, podemos establecer la posición de estos elementos para que sea absoluta. Veamos qué efecto tiene esto en el navegador. Ahora cuando pasamos por encima de nuestras imágenes, esto ahora lleva el texto en la página, pero ya no ocupa nada del espacio. Podemos ver esto porque no tenemos ninguno del fondo gris detrás del texto, lo que significa que ya no está posicionado dentro de nuestro div. Obviamente no está en una buena posición. Ahora podemos moverlo usando estas propiedades CSS de arriba, derecha, inferior e izquierda. Entonces podemos usar esto para colocarlo exactamente donde queramos. Queremos que el texto se coloque sobre el centro de la imagen. Tiene sentido hasta que fijas este 50 por ciento desde arriba y 50 por ciento desde la izquierda. Digamos esto y vayamos por la izquierda del 50 por ciento y también lo mismo para la parte superior. También podemos como medida temporal, quitar este flotante, sólo para que podamos ver qué está pasando mientras se prueba. Pasamos al navegador y veamos dónde estamos ahora. No vemos ninguno de los títulos sobre nuestros proyectos. No obstante, si nos desplazamos hasta la parte superior de la página, vemos que ahora todos los títulos están colocados en la sección de encabezados. ¿ Por qué es esto? Bueno, esto se debe a que cuando tomamos el textil, el flujo del documento usando absoluto y luego establecer los valores superior e izquierdo como acabamos de girar. Estos valores superiores e izquierdos se establecen desde la ventanilla del navegador. Efectivamente hemos establecido el texto para que sea 50 por ciento desde la esquina superior del navegador. Hay una manera de que podamos anular esto sin embargo, y esto es establecer cualquiera de los elementos que tengan una posición de relativa. Cada proyecto que tenemos abajo está envuelto en un div. Este div tiene la clase de elemento de cuadrícula. Si vamos a nuestro proyecto, este es el envoltorio div justo aquí. Ahora bien, si establecemos que esta sea una posición de relativa, este contenedor será ahora nuestro punto de referencia para nuestro texto en lugar de la ventanilla de los navegadores. Volver a nuestra hoja de estilo, podemos aplicar esto ahora. Se trata de elemento de cuadrícula, ya tenemos esta clase justo aquí. Establezcamos la posición para que sea relativa. Pasar al navegador y refrescar. Se aplica un texto de OCD sobre cada una de nuestras imágenes, el texto realmente ha sido empujado, por ejemplo, 50 por ciento desde el lado izquierdo. Pero no da cuenta del ancho y la altura del texto. En cambio, queremos que el texto sea movimos más del 50 por ciento al centro de nuestro texto. Podemos hacerlo moviendo el cuadro de texto en un 50 por ciento de su ancho y altura. Ya que estamos haciendo uso de una unidad porcentual en lugar de un píxel, esto también centrará el texto independientemente de su tamaño. Volver a nuestro texto oculto. El elemento de cuadrícula oculta el texto y luego justo después de nuestro posicionamiento, podemos entonces compensar nuestro texto por la mitad del ancho y la altura mediante el uso de una transformación CSS. Se va a traducir una transformación, que queremos añadir. Entonces dentro de aquí podemos compensar esto agregando un valor X e Y. Queremos sumar un offset de 50 por ciento negativo, que es la mitad del peso o el texto. Esto está en el eje X, que está de izquierda a derecha. También podemos hacer lo mismo para el eje Y, que se abre hacia abajo. Recarguemos el navegador, y ahora todos los impuestos se están moviendo hacia la izquierda y arriba, 50 por ciento del ancho y alto total. Para que ahora destaque nuestro texto, podemos agregar algunos efectos de flotación. En primer lugar, necesitamos volver a introducir nuestra pseudo-clase flotante, que eliminamos de antes. El texto ahora sólo volverá a aparecer al pasar el cursor sobre nuestra imagen. El siguiente cosa a hacer es apuntar también a nuestra imagen ellos hacen más oscura para que destaquen las etiquetas. Al igual que arriba, podríamos apuntar al elemento de la cuadrícula cuando el usuario pase el cursor sobre. Pero esta vez sólo aplica nuestro CSS a la imagen. Vamos a primero que nada, añadir un efecto de filtro en el brillo de nuestra imagen y establecer esto en un valor de 0.4. Esto tendrá el efecto de oscurecer nuestra imagen para ser sólo del 40 por ciento. Guarda esto y vuelve a cargar. Ahora cuando pasamos el cursor, ahora hemos reducido el brillo de cada una de nuestras imágenes. También podemos añadir un pequeño efecto pop dos, lo que va a hacer que la imagen sea un poco más grande cuando el usuario pase el cursor sobre. De nuevo vamos a hacer uso de esta propiedad transformada. Pero esta vez vamos a transformar la escala. Se utiliza la escala para hacer los elementos más grandes o más pequeños y uno es el tamaño regular de los elementos. Voy a hacer esto un poco más grande por cierto como para ser un valor de 1.01. Lo último que voy a añadir es la opacidad. Hacer esto ligeramente transparente con 0.95. Dale a esto un guardado y más al navegador. Cuando ahora pasamos por encima de nuestras imágenes, vemos un pequeño aumento en el tamaño y también la opacidad se reduce a. El último pedazo de CSS que voy a agregar es restringir el tamaño general de la página. Esto evitará que las imágenes se sobrecarguen en pantallas realmente grandes. Si estiramos el navegador a lo ancho que sea posible, muchas veces tenemos un ancho máximo, que queremos que el sitio web se estire también. Entonces podemos establecer el color de fondo para que se aplique en el lado izquierdo y derecho, una vez que el navegador alcance el tamaño, podemos hacerlo estableciendo el ancho máximo arriba en la parte superior de nuestra hoja de estilo en la sección de cuerpo. Voy a poner el mío para que sea un valor de 1,500 píxeles y luego pasar al proyecto. Ahora vemos que el navegador ha pasado por encima de los 1,500 píxeles, dejando todo el contenido movido hacia el lado izquierdo y todo nuestro espacio en blanco sobre la derecha. En general, sin embargo, lo que queremos es que el espacio en blanco se divida por igual entre el lado izquierdo y el derecho. Podemos hacerlo estableciendo los márgenes para que sean automáticos. Dividiremos el espaciado por igual en ambos lados. Hagamos esto de vuelta todo el en la sección de cuerpo. Ya tenemos la propiedad de margen configurada justo aquí arriba. Podemos agregar esto como valor superior e inferior. No se aplicará ningún margen en la parte superior e inferior. Pero podemos establecer los valores izquierdo y derecho para que sean auto. Guarda esto y ahora deberíamos tener el mismo espaciado. Lo último que voy a hacer para detener el espacio en blanco del cuerpo fluyendo hacia el color de fondo, es establecer algunos colores de fondo para el cuerpo, que es la sección que vemos entre aquí y el HTML, que es el color de fondo a la izquierda y a la derecha. En primer lugar, la sección del cuerpo puede tener el color de fondo blanco. Entonces si subimos, podemos sumar al HTML2. Ahora sección HTML cubrirá el espacio en blanco en el lado izquierdo y derecho. Ahora lo que voy a hacer aquí es establecer el color de fondo para que sea un tono ligeramente diferente. Yo quiero usar eee. Esto detendrá nuestra página que realmente se puede estirar en monitores grandes. El toque final para esta página es agregar algunas animaciones a todos los proyectos. Utilizar la biblioteca de animación. Vamos a los proyectos o HTML y podemos agregar los atributos a todos nuestros ítems de cuadrícula. Hacemos esto agregando el nombre de la animación con datos aos, una animación de zoom-in-up. Para ahorrar tiempo, voy a copiar esto y añadir esto a todo el resto de los proyectos. Por supuesto, puede agregar una animación diferente si lo prefieres. Para asegurarnos de que esto esté en cada uno de los proyectos, por lo que esto se acercará cuando nos desplazemos hacia abajo. Debajo del navegador, desplácese hacia abajo hasta nuestros proyectos y estos ahora se acercarán a medida que los alcancemos. Enhorabuena por llegar al final del proyecto del curso. En primer lugar por supuesto, siéntase libre de extenderlo y hacerlo suyo. Una vez que estés contento con tu proyecto, estarás ansioso por ponerlo en línea y esto es a lo que vamos a echar un vistazo a lo siguiente. 24. Hosting: Una vez que hayas terminado de perfeccionar tu portafolio, estoy seguro que estarás ansioso por ponerlo en línea para que el resto del mundo lo vea. Desafortunadamente, hay unas encuestas realmente rápidas y fáciles para hacer esto llamadas Netlify. Puedes ir a netlify.com donde tendrás que registrarte y crear una cuenta. Ya estoy inscrito con estos, pero si no tienes una cuenta, adelante y crea una ahora. Puedes registrarte con diversos proveedores, como tu correo electrónico y contraseña o un servicio como GitHub. También es posible que necesite verificar el correo electrónico. Ya he hecho esto, y tenía códigos de barras en Netlify y cancelo cualquier quickstarts que pueda aparecer. Una vez que hayas hecho esto, te llevarán a una página que se ve así, y todo lo que tenemos que hacer es arrastrar sobre la carpeta del proyecto. Si sí tienes tu proyecto almacenado en GitHub, también puedes usar esto. Lo que quieres hacer es arrastrar por encima de los proyectos de cartera a esta sección de carga aquí. Después de un corto periodo de tiempo, entonces obtenemos un enlace de prueba que podemos usar, que podemos ver justo aquí. Esto generará una URL en la que podrás hacer clic o copiar y luego pegar en el navegador para ver. Esto nos dará entonces la oportunidad de probar nuestros sitios y ver cómo se ve en un servidor web en vivo. Desafortunadamente, la nuestra parece parecer exactamente igual. También podemos probar la página de proyectos. Consulta que no hay errores en aquí también, desplázate hacia abajo y todo se ve bien en esta página también. También podemos hacer un dominio personalizado que es cualquier ruta antes que el netlify.com. De vuelta al panel, haga clic en la “Configuración de dominio”, luego en las “Opciones”, también puede editar el nombre del sitio. Este se está generando aleatoriamente y puedes cambiar esto para que sea algo más memorable si lo prefieres. Golpea “Guardar”, y entonces esto surtirá efecto. Esto aún tendrá el netlify.com en los extremos. No obstante, si sí tienes un nombre de dominio que quieres usar, si casi ya tienes o uno puedes comprar a través de Netlify. También hay una guía rápida para hacer esto también, y puedes dar click en este enlace para saber más. Por ahora, así es lo rápido y fácil que es comenzar con Netlify, y empujar tu sitio a un servidor web en vivo dejándote con una URL totalmente en vivo que ahora puedes compartir con el resto del mundo. 25. Reflexiones finales: Espero que hayas disfrutado tomando esta clase tanto como he disfrutado construyéndola. Muchas gracias y espero que hayas ganado algunas nuevas y valiosas habilidades, que podrás poner de buen uso en el futuro. Tampoco puedo esperar a ver qué van a crear ustedes chicos. Siéntete libre de compartir tu proyecto también. 26. ¡Sígueme en Skillshare!: Enhorabuena de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá te vea en una futura clase.