¡Construye 3 proyectos con HTML y CSS!

1. La bienvenida y lo que construiremos.: Bienvenido a aprender HTML y CSS construyendo tres proyectos. Mi nombre es Chris, y me emociona ser tu instructor para este curso. Te guiaré a través del proceso, paso a paso, de construir proyectos de sitio web gratuitos, reales, cada uno construyendo sobre lo que has aprendido en el último. Va a ser una forma divertida y práctica para cualquiera que busque aprender a construir sitios web. En primer lugar, comenzaremos por crear un sitio web basado en la receta. Este será un sitio web estático, te presentaremos los fundamentos de HTML y CSS. Aprenderás a crear la estructura básica de archivos y carpetas, a crear una página de índice básico. Entonces cómo crear todas las secciones del sitio web, como el encabezado, la sección de cuerpo, y el pie de página. Después usaremos CSS para darle estilo a un sitio web y también para el diseño y posicionamiento de todos los diversos elementos, como posicionar las imágenes y también el texto, y agregar las imágenes de fondo. Después pasaremos a un sitio web basado en colegios, que será el proyecto dos. Este será un sitio web totalmente receptivo, lo que significa que el sitio web se verá muy bien en smartphones, tabletas o computadoras, y responderá a cualquier tamaño de pantalla en el que se esté viendo. Si encoges el navegador hacia abajo, verás que los dos divs, que están uno al lado del otro, se apilarán uno encima del otro para que el proyecto se vea mejor en dispositivos más pequeños, y todas las áreas, como el logotipo y la navegación, todo responde a mirar hacia atrás en un dispositivo de diferente tamaño. Vamos a expandir el navegador de nuevo. También se te presentarán algunos conceptos nuevos, como consultas de medios y puntos de ruptura, estilo de teléfono móvil, e incluso algunas técnicas avanzadas más modernas, como el CSS Flexbox. proyecto tres es un sitio web basado en hoteles, que te presentará el popular framework bootstrap desde las cunas de Twitter. Ahora tenemos una buena comprensión de cómo crear sitios web desde cero después de construir los dos primeros proyectos. Introducir el framework bootstrap realmente acelerará su tiempo de desarrollo y le permitirá agregar algunas características realmente geniales a sus sitios. Al final de este curso, habrás construido los tres sitios web, lo que realmente dará un impulso a tus habilidades de diseño web. El estudiante ideal para este curso es alguien nuevo en la construcción sitios web o alguien con un poco de experiencia, buscando una forma estructurada y basada en proyectos para ampliar sus conocimientos. Te dará una gran base, si estás buscando construir sitios web para una carrera o incluso si solo quieres construir un sitio web para un uso personal o empresarial. Gracias por su interés, y espero tenerlo a bordo. 2. Lo que necesitarás para este curso: Para trabajar para este curso no necesitamos comprar ningún software ni realizar ninguna compra adicional. Todo lo que necesitamos es un navegador web que probablemente estés usando en este momento para este curso. Voy a usar Google Chrome, pero puedes usar cualquier navegador moderno. Además de esto, vamos a necesitar algún software para escribir nuestro código. Voy a estar usando un programa llamado Visual Studio Code. Si le das a esto una búsqueda en un motor de búsqueda, te encontrarás con la página de inicio, que está disponible en code.visualstudio.com. Si te diriges aquí, puedes encontrar algo más de información si quieres. O puedes descargar esto para tu sistema operativo. Se trata de una descarga gratuita para Mac, Windows, y Linux. Adelante y descargue la instalación adecuada para su máquina. Ya tengo esto descargado y abierto a la izquierda. Adelante y descarga esto, y nos vemos en el siguiente video, donde vamos a empezar con la creación algunos archivos y carpetas para nuestro primer proyecto. 3. 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, revisar el contenido que escribe y piense en cómo podría 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 alejarte de la clase. 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 de la clase. Además, recuerda compartir tu Proyecto 2 aquí en Skillshare. No sólo voy a comprobarlo, sino que también inspirará a los compañeros de estudios también. 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, estaré deseando ver lo que creas y subes aquí en Skillshare. 4. Archivo y estructura de la carpeta: Bienvenido de nuevo. Por ahora, del video anterior, deberíamos haber descargado con éxito Visual Studio Code o un editor de texto de su elección. Tengo el mío abierto a la izquierda justo aquí. Voy a empezar en este video creando una carpeta de proyecto para nuestro primer proyecto. Ahora, durante este curso, estaremos creando tres proyectos separados. Puedes guardar estos en cualquier lugar de tu computadora, puedes ir en una unidad en particular, una ubicación en particular, como documentos, que voy a guardar la mía en el escritorio. Estas tres carpetas de proyectos para nuestro proyecto incluso pueden ir directamente en el escritorio, pero para mantener las cosas bien y organizadas, voy a crear una nueva carpeta y renombrar estos proyectos. Si abrimos esto, dentro de aquí, nuestra primera carpeta de proyectos será para nuestro sitio de recetas. Vamos a crear una nueva carpeta dentro aquí llamada Mis Recetas. Ahora, al crear una carpeta de proyecto de sitio web así como esta, no hay una estructura estricta para exactamente cómo colocamos nuestros archivos y carpetas. Somos libres de organizar estos de casi cualquier forma que queramos. Generalmente, creamos algunas subcarpetas dentro aquí para almacenar cosas como nuestros archivos JavaScript, nuestras imágenes, nuestras hojas de estilo. Generalmente puedes agrupar todo el contenido relacionado para mantener las cosas bonitas y organizadas. Realmente no vamos a estar lidiando con JavaScript durante este curso, así que no voy a crear una carpeta JavaScript. También, para este proyecto, sólo vamos a tener una hoja de estilo. Tampoco voy a agrupar estos juntos, pero vamos a estar lidiando con múltiples imágenes en este proyecto. Proporcionado con este curso se encuentra una carpeta de imágenes la cual puedes utilizar, o también puedes usar tus propias imágenes si lo prefieres. Tengo estas imágenes descargadas y guardadas en el escritorio aquí. Voy a agarrar esto, y arrastrarlo a nuestra carpeta del proyecto. Dentro de aquí, tenemos todas las imágenes que vamos a estar utilizando para este proyecto. Entonces, podemos abrir esto en Visual Studio Code. También necesitamos algunos otros archivos que vamos a crear en tan solo un momento, pero voy a crear estos dentro del editor de texto. Lo que vamos a hacer es agarrar la carpeta del proyecto Mis Recetas y, después, dejar esto dentro de Visual Studio Code. Podemos ver de inmediato que, por encima de la izquierda, tenemos una barra lateral, simplemente haciendo esto un poco más grande. Entonces, tendremos abierto todo el proyecto Mis Recetas. El primero que vamos a hacer es crear un nuevo archivo HTML, que va a ser nuestra página de índice. El índice es típicamente el punto de entrada a la página principal de nuestro sitio web. Si pasas el cursor sobre la barra lateral, podemos hacer clic en este icono de “Nuevo Archivo” o también podemos hacer clic derecho en un “Nuevo Archivo”. Esto se llamaría Índice, y esto necesita extensión the.html ya que esta es una página HTML. El segundo archivo va a ser para nuestras hojas de estilo, y esto es para que podamos aplicar algún estilo y diseño a nuestros proyectos. Este serán los Estilos y, entonces, éste tiene la extensión the.css. También podemos ver estos si abrimos nuestra carpeta de proyectos en el escritorio. Ahora, dentro de aquí, junto a nuestras imágenes, vemos nuestro Índice y nuestro Styles.css. no tenemos ningún contenido guardado dentro de nuestras páginas, pero podemos hacer click derecho en el nombre del archivo, ir a Copiar Ruta. Entonces, podemos pegar esto como una nueva pestaña del navegador. Esto abrirá nuestro proyecto dentro del navegador. Por supuesto, no tenemos ningún contenido que mostrar en esta página todavía, pero lo arreglaremos en el siguiente video donde comenzaremos a crear nuestra estructura HTML para nuestra primera página. 5. Estructura básica de HTML: Mira dentro de nuestra página index.html que creamos en el último video, y me voy a poner a trabajar añadiendo alguna estructura a este documento HTML. Ahora bien, todo el contenido que va dentro de las páginas HTML es generalmente diferente y dependiendo del tipo de sitio web que vas a estar creando. No obstante, hay alguna estructura básica general que vas a estar necesitando para cualquier página HTML. Para empezar, necesitamos agregar una declaración DOCTYPE, y esto le dice al navegador exactamente qué tipo de documento va a estar leyendo. Hacemos esto agregando nuestros corchetes angulares al igual que este, un signo de exclamación, y luego agregamos en el DOCTYPE. Este es un documento HTML, por lo que estamos agregando HTML. Entonces como esto es HTML, envolveremos todo el resto de los contenidos dentro del elemento HTML. Al igual que muchos elementos en HTML, esto tiene una etiqueta de apertura y también una etiqueta de cierre la cual podemos ver con esta slash hacia adelante. Ahora todo lo demás que añadimos a este documento necesita colocarse dentro de estas etiquetas HTML. El siguiente trozo de estructura que vamos a añadir a este documento HTML es rompiendo esto en dos secciones. Al igual que una persona, un documento HTML tiene una cabeza y también un cuerpo, así que agreguemos estos en. Tenemos la sección de cabeza, que tiene las etiquetas de apertura y cierre, y luego también tenemos la sección de cuerpo. La diferencia entre estas dos secciones es la sección de cabecera se utiliza generalmente para agregar información sobre nuestros sitios web, que tiene el nombre, los títulos de las páginas, sus descripciones, contenido para motores de búsqueda, y también enlaces a otras páginas. Entonces esto es más como información sobre nuestro sitio web, y en general, nada de lo que vemos en la pantalla. El apartado cuerpo contiene el contenido real que se mostrará dentro del navegador. Por lo que la sección de cabecera es para información y enlaces a otras páginas, y la sección de cuerpo es lo que realmente verás que se muestra dentro del navegador. Otra cosa que podemos hacer con cualquiera de estos elementos es agregar lo que se llama un atributo. Atributos es alguna información adicional que debe pasar a la etiqueta de apertura. Por ejemplo, con un documento HTML, queremos declarar qué tipo de idioma está enrutando este documento. Esto lo hacemos con un atributo lang, que es abreviatura de lenguaje. El mío va a estar en inglés. Si estás escribiendo el tuyo en un idioma diferente, también puedes hacer una búsqueda de códigos de idioma HTML, y podemos ver una lista completa con este enlace justo aquí. Si nos desplazamos hacia abajo, vemos una tabla de idiomas donde podemos elegir un idioma en particular, y luego elegir el código corto que vamos a colocar dentro de estos atributos de lenguaje. Siéntete libre de cambiar esto si quieres, pero ahora voy a pasar a esta sección de cabecera. Recuerda, la sección de cabecera contiene información sobre nuestro sitio, y lo primero que voy a colocar dentro de aquí es el título. Este título es el título de la página de esta página en particular. Por lo que si tenemos una página Contáctanos, esta será contactarnos. Si tuviéramos una página Acerca de Nosotros, esto sería sobre, y así sucesivamente. Ya que esta es la página de inicio, voy a llamar a esto Mis Recetas. Ahora si guardamos esto y actualizamos nuestra página de Índice, ahora vemos el título de la página que se muestra en la parte superior del navegador. Justo debajo del título, vamos a agregar alguna información adicional sobre nuestro sitio mediante el uso de las metaetiquetas. A diferencia de cosas como nuestro título y nuestra sección de cabeza y el cuerpo, esto no tiene una abertura y una etiqueta de cierre. Solo tenemos una etiqueta de apertura y cierre así cuando queremos anidar algún contenido dentro. Por lo que el título tiene este texto dentro, la sección de cabeza tiene múltiples piezas de contenido dentro, pero para nuestras metaetiquetas, solo vamos a agregar algunos atributos al igual que lo hicimos justo arriba. Estos atributos declaran qué tipo de información adicional queremos agregar para nuestro sitio. Este primero va a ser el conjunto particular de personajes que queremos utilizar para nuestro proyecto. Por caracteres, nos referimos a qué tipo de letras, números y símbolos queremos utilizar en nuestra página web. El estándar HTML5 es UTF-8, y esto cubre casi todos los caracteres y símbolos disponibles en el mundo. Hacemos esto agregando el atributo de conjunto de caracteres y establecemos esto igual a UTF-8. Tu siguiente pieza de información en una metaetiqueta va a ser la etiqueta de viewport. Crearemos una nueva metaetiqueta igual que la anterior, y luego le daremos el nombre de viewport. Esto nos va a permitir configurar nuestra página para diferentes tamaños de pantalla. El motivo por el que necesitamos esta etiqueta de viewport es porque la gente está viendo nuestros sitios web en múltiples tamaños de pantalla, junto a monitores, pero también necesitamos tener en cuenta tamaño de tableta y también los dispositivos de tamaño móvil. Donde hacemos esto como un segundo atributo es estableciendo el contenido, y luego dentro de las citas, establecemos el ancho para que sea igual al ancho del dispositivo. Lo que esencialmente estamos haciendo aquí es que estamos configurando el ancho de la página para que sea igual al dispositivo en el que la estamos viendo, y separarlo por coma. El siguiente que vamos a hacer es establecer la escala inicial para que sea igual a una. Esta es la escala inicial o el nivel de zoom inicial cuando nuestra página se carga por primera vez, y esto es realmente importante para que nuestro sitio se vea bien en todos los dispositivos de pantalla. Si no agregamos esto en, un usuario puede intentar visitar nuestro sitio en un dispositivo de tamaño móvil y este dispositivo móvil puede intentar tomar nuestro sitio de tamaño de escritorio y luego alejar para encajar todo el contenido en la pantalla más pequeña, lo que luego resultará en que cosas como nuestro texto se vean realmente pequeñas. No queremos que nada de este zoom o escalado surta efecto ya que vamos a estar manejando surta efecto ya que vamos a estar manejando el aspecto y la sensación de nuestro sitio en todos los tamaños de pantalla agregando algo de CSS. Mucho de esto puede parecer confuso para empezar, pero solo recuerda todo esto es esencial para cualquier página HTML, que vamos a estar creando, por lo que te familiarizarás mucho más con agregar esto. Junto con toda esta información adicional sobre nuestro sitio, también podemos usar la sección de cabecera para enlazar a otras páginas también. Por ejemplo, tenemos el styles.css. Esto va a contener todo el estilo, todos los colores, todo el diseño, los tamaños de fuente, y mucho más para nuestra página HTML. Para que esto surta efecto, necesitamos enlazar a este archivo, y lo hacemos con el elemento link. Nuevamente, esto solo contiene los atributos dentro, por lo que no tenemos etiqueta de apertura y cierre. El relato es una hoja de estilo, ya que este es el tipo de archivo con el que estamos vinculando. Entonces tenemos esta href, donde le decimos a esta página en particular donde podemos encontrar esta hoja de estilo. En nuestro caso, esta hoja de estilo está al lado de nuestra página de Índice, por lo que todo lo que necesitamos hacer es agregar el nombre del archivo, que es styles.css. Si este archivo en particular fue almacenado dentro de una carpeta CSS, todo lo que necesitamos hacer es agregar la ruta del archivo así como esta. Esta es toda la información que voy a añadir en la sección de cabecera. A partir de ahora, vamos a estar trabajando dentro de la sección de cuerpos. Esta sección del cuerpo, como mencioné antes, va a contener todo el contenido que vemos en la pantalla. Por ejemplo, si queremos agregar algún texto, podemos agregarlos en el elemento p, que es para párrafo. Ahora digamos hola, di esto, refresca el navegador, y luego todo este contenido corporal se mostrará dentro del navegador tal y como vemos aquí. 6. Recursos útiles: Al construir sitios web en cualquier etapa de tu carrera de desarrollo, va a haber un punto en el que necesitas echar un vistazo a algunos recursos valiosos para ayudarte en tu viaje. Uno de estos grandes recursos que utilizo regularmente es el sitio web de Mozilla Developer. Este es un recurso para la mayoría de las tecnologías web básicas, como HTML, CSS, JavaScript, y también muchas otras cosas como el desarrollo de juegos, y también tiene algunas guías para algunas tecnologías back-end usando Python, Express JS, y mucho más. Por el momento sin embargo, sólo vamos a estar concentrándonos en HTML y CSS. Realmente no estaremos cubriendo JavaScript a lo largo de este curso, pero probablemente esto sea algo en lo que quieras enfocarte después de aprender HTML y CSS. Si echamos un vistazo a alguna de estas tecnologías, podemos encontrar más información sobre los antecedentes, sobre lo que hace. Pero una de las cosas realmente útiles es la referencia de elementos HTML. En el interior aquí, podemos echar un vistazo a todos los elementos disponibles que podemos utilizar en nuestro proyecto. Por el momento, no hemos llegado muy lejos con nuestro proyecto, todo lo que hemos agregado es un texto sencillo, y los añadimos dentro de los elementos P. A modo de ejemplo, si nos desplazamos hacia abajo y seleccionamos esto, podemos ver que esto representa un párrafo de texto, tenemos las etiquetas de apertura y cierre con el texto dentro. Podemos averiguar exactamente cómo utilizar cualquiera de estos elementos haciendo click en este. Esto es realmente útil si te quedas atascado en cualquier momento a lo largo de este curso, y también cuando te mueves a tus propios proyectos también. Además de esto, dentro de las Tecnologías, si bajamos al CSS. Estaremos trabajando bastante con CSS en este proyecto, CSS es la forma en que podemos agregar estilo, podemos agregar colores, podemos agregar un layout, animaciones, y mucho más. Puede tomar nuestro HTML sencillo y convertirlo en algo realmente bonito y visual. Nuevamente, puedes leer y descubrir pequeña información o puedes pasar a la referencia CSS. Esto nos dará muchos de los ejemplos de sintaxis que vamos a estar usando. Podemos echar un vistazo a estos selectores, que es una forma de seleccionar una parte de nuestro HTML a la que queremos agregar algún estilo. Pero vamos a estar aplicando muchas de estas técnicas a lo largo del curso. A continuación, tenemos la página web de Escuelas W3. Esta es también una referencia útil para HTML, CSS, y JavaScript, junto con algunas otras cosas como algunas tecnologías del lado del servidor, algunos lenguajes de programación, inteligencia artificial, mucho más otros temas. Nuevamente, para este curso, y al iniciar el HTML, sólo la sección CSS va a ser realmente útil si quieres usar esto como referencia para cualquiera de los elementos o incluso para encontrar algunos ejemplos de código también. Es bastante sencillo de usar. Por ejemplo, si no estamos seguros de cómo agregar una imagen, podemos ir a la sección de imágenes, donde veremos varios ejemplos en los que podemos hacer clic, y podemos jugar con el código, y también la salida sobre el lado. Hasta que tengamos algún código, también queremos asegurarnos de que lo estamos escribiendo correctamente. Una forma de hacerlo es utilizar un servicio de validación como el validador W3. Si tenemos una página web en vivo en línea, podemos agregar en la dirección web justo aquí. Todavía no hemos publicado ninguno de nuestros sitios a un servidor en vivo, lo que una forma de hacerlo es haciendo click en el Validador de Carga de Archivos, y luego podemos seleccionar nuestras páginas HTML de nuestros proyectos. Comprueba esto. Podemos ver que esto ha terminado revisar el documento y no tenemos ningún error en esta página, aunque por el momento no hemos agregado mucho contenido. A continuación, vamos a echar un vistazo a algunos recursos útiles para agregar imágenes, video, y también audio a nuestro sitio. Una de ellas es pixabay.com, que cuenta con miles de imágenes gratuitas que podemos utilizar en nuestros sitios web. Podemos hacer una búsqueda, podemos filtrarlos abajo por fotos, ilustraciones, vectores, videoclips, y también archivos de música también. Es bastante sencillo de usar, solo tenemos que dar click en cualquiera de estas fotos que nos gusten, y luego podemos dar click en la “Descarga gratuita”. No es necesario que te registres a menos que quieras utilizar una de las imágenes grandes, es de uso gratuito. A menudo no necesitamos agregar atribuciones al autor, aunque se aprecia. Además, si tienes algunas imágenes propias que quieres subir y aportar, también puedes hacer esto. de esto, también tenemos unsplash.com, que es otro sitio web popular para la fotografía de stock. Nuevamente, esto cuenta con miles de imágenes de alta calidad las cuales puedes utilizar de forma gratuita, y si hacemos click en este enlace justo aquí, podemos ver aquí que las fotos tienen una licencia gratuita de uso para proyectos comerciales y también no comerciales. No necesitamos pedir permiso para usar esto en nuestros proyectos, aunque por supuesto, se agradece la atribución. El siguiente recurso al que vamos a echar un vistazo es caniuse.com. Este es un sitio web realmente, realmente útil para comprobar si una característica está disponible en un determinado navegador. medida que pasemos por este curso, vamos a estar escribiendo mucho HTML y también mucho CSS también. Para este CSS, queremos asegurarnos de que se vea igual en todos los navegadores de nuestros usuarios. Por ejemplo, es posible que podamos utilizar las últimas características de CSS en nuestros propios proyectos, y puede verse increíble en nuestro navegador actualizado. Pero también tenemos que considerar que algunos usuarios pueden tener algunos navegadores más antiguos, sobre todo tal vez en cosas como escuelas o algunas empresas más grandes que no actualizan su navegador con tanta regularidad. Es sencillo de usar desde la página de inicio, todo lo que tenemos que hacer es escribir una función CSS, que se desea utilizar. Por ejemplo, si queremos utilizar el CSS Flexbox en cualquiera de nuestros proyectos, podemos teclear esto y podemos averiguar exactamente qué navegadores, y también qué versiones está soportando el flexbox. Aquí podemos ver que Internet Explorer sólo tiene soporte parcial, aunque esto es compatible con el navegador Edge más moderno. Está completamente bien usarlo en Firefox, Chrome, Safari, Opera, y también en todos los navegadores móviles populares también, en todas las versiones más recientes. Significa que esto es bastante seguro de usar en nuestro proyecto. Esto es realmente útil para comprobar y también averiguar exactamente qué tipo de experiencia tendrán nuestros usuarios si están usando un navegador más antiguo. A continuación, además de algunas imágenes y videos, posible que también solo queramos añadir algunos iconos simples también. Esto, el unicode-table.com es un recurso realmente útil. Podríamos querer agregar algunos iconos como flechas, y podemos consultar a través del catálogo de miles de diferentes entre los que podemos elegir. Por ejemplo, si quisiéramos una flecha a la derecha, podríamos hacer clic en esto. Podemos agregar estos dentro de nuestro HTML con el código HTML justo aquí. Echaremos un vistazo a cómo hacer esto en nuestro proyecto. A continuación, también tenemos una biblioteca de iconos dedicada también, que se llama Font Awesome. Por supuesto, también hay muchas otras bibliotecas de iconos disponibles, pero Font Awesome es una muy popular. También tiene una versión gratuita la cual tiene muchos iconos diferentes, y también hay una versión de pago también si superas a la biblioteca gratuita. Como cabría esperar, esto es sólo un puñado de algunos recursos populares, hay cientos e incluso miles de más disponibles en línea. Seguro que te encontrarás con muchos de estos en tu viaje de desarrollo. Pero por ahora sin embargo, esto es sólo un puñado de recursos para que empiece. A continuación, vamos a saltar de nuevo a nuestro proyecto, y comenzar en la sección de cabecera. 7. Sección de encabezado HTML5: Actualmente, tenemos un sitio web bastante vacío, solo tenemos este texto de hola arriba en la parte superior, el cual se ha creado con este elemento de párrafo. Para el resto de este video, estaremos agregando algo más de contenido creando nuestra sección de encabezado arriba en la parte superior de nuestra página. Para echar un vistazo a exactamente lo que vamos a estar creando, esta es la versión final. El apartado de cabecera será esta sección gris sobre la misma parte superior y ésta se va a dividir en tres partes. Tendremos los dos enlaces a la izquierda. Tendremos el logo del sitio y también la imagen en el centro, y luego algunos enlaces adicionales sobre la derecha. Para crear estas tres secciones, vamos a estar usando lo que se llama div. Un div es una sección o una división dentro de nuestro sitio web donde podemos colocar contenido dentro. Para ver más sobre esto, podemos ir al sitio web de Mozilla Developer, que miramos en el video de recursos. Bajo las tecnologías, o bien podemos ir al HTML, pero voy a hacer una búsqueda de div. Aquí tenemos el div, que es el elemento de división de contenido dentro de nuestra sección HTML. Este es un contenedor genérico. No tiene ningún significado especial. Se acaba de utilizar dos contenidos grupales juntos. Podemos ver aquí tenemos un div el cual tiene la etiqueta de apertura y de cierre, y luego podemos colocar nuestro contenido dentro. Este ejemplo en particular tiene una imagen y también un elemento p para algún texto. Usaremos esto para las tres secciones y también algunas secciones más adelante también. Empecemos, y lo primero que vamos a hacer es solo hacer clic en este ícono arriba en la parte superior, cerrar nuestra barra lateral, y luego vamos a mover este texto hola dentro del cuerpo, así como contenedores como un div, que es bastante genérico. En la versión 5 de HTML, también tenemos algunos elementos más descriptivos, a menudo llamados elementos semánticos. Estos elementos semánticos se utilizan para describir el contenido que se anida en su interior. Uno de estos útiles que podemos utilizar son los elementos de cabecera. Esto tiene una etiqueta de apertura y una etiqueta de cierre y podemos colocar dentro de todo el contenido relacionado con el encabezado. Como acabamos de ver, vamos a estar usando el elemento div y todo el contenido de nuestra primera sección de la izquierda se colocará dentro de este div. Al usar Visual Studio Code, esto también viene completo con un plugin llamado Emmet. Emmet se utiliza para acelerar nuestro código en. Si escribimos un div y luego presionamos “Enter”, podemos ver que esto se cierra automáticamente de la siguiente manera con la etiqueta de cierre, y también agrega los corchetes alrededor de cada sección también. Entonces si quieres la práctica, puedes teclear esto manualmente o puedes hacer uso de Emmet. Esto ahora da nuestras dos primeras secciones div y voy a crear la tercera, que es para nuestros enlaces sobre la derecha. Pero, ¿cómo hacemos para crear estos enlaces? Si quisiéramos, podríamos ir bastante simples y sólo tener los elementos p como hemos visto antes. Pero en general, cuando tenemos múltiples piezas de texto como este, es una buena idea colocarlas en una lista. Con HTML, dos de los tipos populares de listas que podemos utilizar es la lista ordenada y la lista desordenada. Una lista ordenada es una forma de enumerar múltiples elementos al igual que ésta, y éstos se ordenan por números. Esto tendría el número 1, el número 2, y continuaría para cada ítem. Lista desordenada por otro lado, lugar de colocar números junto a cada elemento de la lista, colocará un punto de viñeta a la izquierda. Actualmente, no vemos esto para nuestros artículos justo aquí ya que hemos eliminado esto con este CSS. Al ver cómo usar una lista, vamos a volver al sitio web de Mozilla y hacer una búsqueda de lista desordenada, que es la etiqueta ul. Este es el que necesitamos justo aquí. Al igual que muchos elementos, tenemos la lista desordenada que es la envoltura, y luego anidada por dentro, tenemos a cada uno de nuestros artículos rodeados en esta etiqueta li. Este ejemplo particular es un poco más complejo. También tiene una lista más desordenada anidada dentro de este elemento de lista de quesos. Se puede ver por el ejemplo sobre a la derecha, esto proporcionará una lista anidada sin ordenar. Pero todo lo que nos interesa para nuestro ejemplo es esta única lista desordenada, que contendrá nuestros ítems de lista. De vuelta al proyecto, crearemos nuestra primera sección dentro de nuestro primer div. Crea la lista desordenada para el contenedor, y luego coloca dentro de todos los elementos de nuestra lista. El primero, igual que vamos a ver aquí, es popular, y luego el segundo es lo nuevo. Por lo que crearemos el elemento de lista. El texto de popular. Entonces el segundo va a ser lo nuevo. Guarda esto, refresca el navegador, y ahí están nuestros dos elementos de lista. Al igual que se mencionó antes, ya que se trata de una lista desordenada, veremos un punto de bala junto a cada uno de estos, pero vamos a eliminar estos extraños CSS muy pronto. Si no tienes esta página index.html abierta actualmente, recuerda, puedes hacer clic derecho en el nombre de la página, copiar la ruta y pegarla en la pestaña. O en su lugar, puedes ir a los proyectos, a la carpeta de recetas y luego hacer doble clic en la página Índice. O bien, si no quieres seguir actualizando este navegador después de cada uno de los cambios guardados, puedes usar una extensión de servidor en vivo. El modo de hacer esto dentro de Visual Studio Code es bajar al botón de extensiones y luego hacer una búsqueda de servidor en vivo. Este es uno justo aquí. Ya tengo esto instalado en Visual Studio Code, pero si no lo haces y quieres usar esta extensión, necesitarás instalar y activar arriba en la parte superior. Una vez hecho esto, es posible que también necesite reiniciar Visual Studio Code. Después deberías tener un botón Go Live en la parte inferior. Haga clic en esto. Esto abrirá entonces la página dentro del navegador, y ahora cada vez que hagamos un cambio en cualquiera de nuestros sitios, esto se actualizará automáticamente. A continuación, vamos a pasar a la sección media, que incluye una imagen y también el título de nuestro sitio. Para ello, vamos a enlazar con una de las imágenes que se habían proporcionado con este curso, luego poner nuestro título como título. Después de nuestro primer div, salta dentro de nuestra segunda sección div, y luego agregamos nuestros elementos de arriba a abajo. El primero es nuestra imagen, que es el elemento img, y una imagen es uno de los elementos que no tiene etiqueta de cierre. Esto se debe a que no anidamos ningún contenido dentro. Todo lo que tenemos que hacer es hacer uso de estos atributos. El primer atributo es la fuente, y esta es la ubicación de nuestra imagen. Todo esto es relativo a nuestra página de índice actual. Actualmente, estamos dentro del index.html, y junto a esto, tenemos nuestra carpeta de imágenes. paso 1 es entrar en las imágenes y luego avanzar barra inclinada, y ahora podemos elegir cualquiera de las imágenes dentro de esta carpeta. Lo que necesitamos es el chefs-hat, y este es un archivo svg, y esto es realmente útil para escalar nuestras imágenes hacia arriba y hacia abajo sin perder ninguna calidad. Después de esto, también tenemos el texto alt, que es algún texto alternativo para mostrar si esta imagen no se puede mostrar, y esto es útil por múltiples razones. Por ejemplo, si la imagen no se puede descargar por cualquier motivo, este texto alt se mostrará en su lugar. También para la accesibilidad, si las personas están usando un lector de pantalla en lugar de un navegador tradicional, este texto alt será leído en su lugar, así que asegúrese de que esto sea descriptivo. Voy a decir chefs-hat logo, cierra la barra lateral, y esto es guardar y alt al navegador. Ahí está donde ahora aparecen los chefs-hat. Ahora, por el momento, no te preocupes por el posicionamiento y también por el diseño. Vamos a configurar todo esto en tan solo un poco cuando pasemos a nuestra hoja de estilo. A continuación, justo después de nuestra imagen, justo debajo de ésta, pero aún dentro de nuestra sección div, ahora vamos a hacer uso de un encabezado de nivel 1. Este es el h1, y con HTML, podemos agregar encabezados desde el Nivel 1 hasta el Nivel 6. Siendo H1 el más valioso de un rubro más importante en nuestro sitio, solo debemos usar estos de nuestra página, justo a través de h6, que es el jefe menos importante para nuestro sitio. Personalmente, lo más comúnmente, uso h1 a través de h4, pero esto depende totalmente de ti. Dentro de aquí, el título de mis recetas, guarde esto, y ahí está nuestro título de sitio dentro de esta sección. El último apartado de este encabezado es igual que la primera sección. Por encima de la derecha, tenemos dos enlaces adicionales. Esto es para enviar receta y también las ideas de comida. Ya debes saber hacer esto desde la primera sección, entra al tercer div en la parte inferior, crea nuestra lista desordenada, nuestro ítem de lista. El primero fue presentar receta, el segundo ítem de lista fue para las ideas de comida. Dale a esto un guardado y echa un vistazo a esto en el navegador. Actualmente, reconociendo estas balas sobre la izquierda, que vamos a quitar en nuestro CSS. Si echamos un vistazo a la versión final, sí vemos que tenemos una pequeña bala entre cada una de estas secciones. Esto es sólo para colocar un divisor entre estos dos elementos de la lista, y la forma en que podemos agregarlos es mediante el uso de una entidad HTML. Desde los recursos del video, miramos un sitio web llamado unicodetable.com. Este tipo era una lista de muchos iconos diferentes como flechas, como texto, emojis, y una de estas entidades es este punto. Para ver esto, podemos pasar a nuestra tabla unicode. Hagamos una búsqueda de punto, y ésta es la que vamos a usar arriba en la parte superior. Se trata de un punto que se coloca verticalmente en el centro. Agarra el código HTML, incluye el signo comercial al inicio y el punto y coma al final. Pasa a nuestra lista, y luego entre nuestros dos primeros enlaces, vamos a colocar esto dentro de un elemento span. Un elemento span es más o menos un contenedor genérico básico. Podemos colocar dentro de cualquier cosa que queramos como texto o incluso estas entidades HTML. Un lapso también cae en lo que se llama un elemento en línea. Un elemento en línea ocupará naturalmente algún espacio en el navegador a través de la página. Eso es proporcionarle espacio para hacerlo. De no ser así, bajaría a la siguiente línea. Esto es lo contrario de algo como un div, que es lo que se llama un elemento de nivel de bloque. Esto significa que independientemente del tamaño del contenido, naturalmente caería en su propia línea. Podemos ver esto si nos fijamos en nuestra primera sección, y luego la segunda sección está en su propia línea, y lo mismo para la tercera sección en la parte inferior. Justo antes de terminar esto, también añadiremos estos puntos a la tercera sección en la parte inferior. Colocar en nuestro lapso, colocar en el código de entidad, y ahí está nuestro punto apareciendo en ambas secciones. Bien. Este es ahora el HTML completado para nuestra sección de encabezado. No se ve demasiado genial por el momento, pero esto estará todo arreglado cuando lleguemos a la sección de estilismo. Pero justo antes de agregar nuestro estilo y diseño a esta sección, en el siguiente video, vamos a echar un vistazo a cómo podemos agregar algunas páginas adicionales y también convierte nuestros elementos de lista en enlaces. 8. Enlaces y páginas adicionales: En esta versión final de nuestro proyecto, si pasamos el cursor sobre alguno de estos ítems de la lista, también podemos hacer click en estos y ser llevados a una página diferente. Ahora, cada una de estas páginas a las que enlazaremos no tiene ningún contenido en particular. Pero podemos ver que esta es una página de recetas populares. Tenemos el What's New, tenemos la página Enviar Receta, y también las Ideas de Comida también. Pero actualmente si vamos a nuestra versión justo aquí, no podemos hacer click en ninguno de estos ítems de la lista. Para ello, necesitamos convertir cada uno de nuestros ítems de lista en un enlace. Se crea un enlace o un hipervínculo en HTML envolviendo nuestra sección en el a element de en el sitio web de Mozilla, podemos ver en el ejemplo tenemos una lista desordenada. Esto tiene algunos elementos de lista justo dentro, igual que tenemos en nuestro proyecto, pero la diferencia está dentro de este elemento de lista, también hemos anidado dentro de un elemento a. Este un elemento también tiene este atributo href. Esta es la clave para crear un enlace porque necesitamos decirle al navegador exactamente a dónde queremos enlazar. Pasemos a nuestro proyecto y replicemos esto dentro de nuestro encabezado. En primer lugar, necesitamos recortar el texto desde el interior del elemento de la lista y luego crear un elemento. Agregará automáticamente el atributo href. Dado que esto se requiere dentro de la etiqueta de apertura y cierre de elementos a, podemos agregar de nuevo dentro del texto popular y esto se mostrará dentro del navegador. Ahora, para la href, podemos agregar cualquier enlace dentro de aquí el cual queremos cambiar como enlace a un sitio web, digamos Wikipedia, y por defecto, aparecerá un enlace subrayado y con un color diferente. También podemos pasar el cursor sobre esto y el cursor cambiará para ser un puntero. Cuando hacemos clic en esto, ahora está vinculado a nuestro sitio externo. Volvamos atrás. Pero por supuesto, no queremos vincularnos a Wikipedia. Queremos enlazar a algunas páginas dentro de nuestro sitio. Actualmente, si abrimos la barra lateral, sólo actualmente tenemos esta página de índice. Lo que tenemos que hacer al lado de nuestro index.html es crear algunas nuevas páginas HTML a las que enlazar. Demos click en el nuevo botón “Archivo”. Voy a crear un enlace para cada una de estas cuatro páginas. El primero, podemos darle cualquier nombre de nuestra elección. Esto va a ser para la página popular, y esto necesita tener la extensión HTML de punto. También necesitamos tres más. El siguiente es para new.html. El número tres es para el meal-ideas.html. El final es presentar nuestra receta. Vamos a darle a esto un nombre de submit.html. Ahora tenemos algunas páginas diferentes enlazan a. Tan solo asegúrate de que todas estas páginas estén al lado de la página de índice y no anidadas dentro de la carpeta de imágenes ni de ninguna otra carpeta. Puedes seguir adelante y crear la mayor cantidad de contenido en cualquiera de estas páginas que quieras. Pero por ahora sin embargo, sólo voy a agregar un texto sencillo para que podamos ver qué página se ha cargado dentro del navegador. Para la página Enviar, sólo vamos a añadir un texto sencillo, pero primero vamos a añadir la estructura HTML básica. Podrías seguir adelante y agregar toda la misma estructura que usamos dentro de esta página de índice. Podría escribir todo esto manualmente, o si está utilizando Visual Studio Code, nuevo, podemos hacer uso del atajo de Emmet. Para ello, escribimos html:5, pulsa “Enter”. Esto se creará para nosotros. Todo lo que tenemos que hacer es cambiar el título del documento. Esto es Enviar una receta. Entonces dentro del cuerpo agrega algo de texto en el elemento p, solo para que podamos ver qué página se ha cargado. Diré, Enviar Página de Receta. Guarda este archivo con Command or Control S. Ahora vamos a Ideas de comida. Nuevamente, html:5, pulsa “Enter”. Cambia el título, agrega nuestro texto. Guarda este archivo y luego el botón Nuevo, que es para nuestra página Novedades, agrega la estructura básica, el título, y algún texto, entonces ¿Qué es Nueva página. Guarda esto y luego nuestro último, que es el popular.html. El título del documento de las recetas populares, y luego el texto. Guarda esto y ahora vuelve a nuestro index.html. Ahora tenemos cuatro páginas diferentes a las que enlazar. Abajo a nuestro ocho elemento y dentro de la href. Dado que estas páginas están al lado de nuestra Página de Índice, simplemente podemos escribir el nombre, y en este caso, es el popular.html. A continuación, tenemos What's New, poner esto en el elemento a. El sitio para esto fue el new.html. Después, entre la etiqueta de apertura y cierre, pegue en el texto. Bajemos, y vamos a hacer esto dos veces más. El siguiente fue Enviar Receta, saca esto. Coloque en nuestro enlace, que va a apuntar a submit.html, agregue en nuestro texto. Por último, tenemos las Ideas de Comida. Este es meal-ideas.html, pega en el texto y guarde este archivo. Pasado al navegador. Ahora tenemos cuatro enlaces dentro de aquí. Probemos el popular. Éste ahora enlazó bien, popular.html. A continuación, What's New, podemos ver que esto está bien. Presentar Receta, y luego finalmente las Ideas de Comida. Lo último que voy a hacer es enlazar también este título de recetas justo aquí de vuelta a nuestra Página de Índice. Para ello, pongamos nuestra cabeza de nivel uno con Command o Control X, agreguemos en nuestro enlace. Esto va a apuntar de nuevo al index.html, pegarlo en nuestro nivel uno cabeza en, dar click en esto. Esto ahora enlazará de nuevo a nuestra Página de Índice. Si quisiéramos, podríamos agarrar nuestra sección de cabecera. Destacemos todo esto y copie con Comando o Control C, vaya a la página popular, y también podríamos agregar esto dentro de cada una de nuestras otras páginas. Si pegamos esto en, haga clic en el enlace “Popular”. Ahora también vemos este encabezado dentro de aquí. Haga clic en “Mis Recetas”. Esto luego nos devolverá de vuelta a nuestra Página Principal. Como se mencionó anteriormente, puedes ir por cada una de estas páginas adicionales y además agregar más contenido si lo deseas. Pero a continuación, vamos a pasar a hacer que este encabezado vea mucho más bonito agregando algo de CSS. 9. Estilo del encabezado: Ahora hemos agregado algo de HTML a nuestra página y en particular, esta sección de encabezado arriba en la parte superior. Ahora vamos a pasar a agregar algo de CSS para agregar un poco de estilo y diseño a esta sección de encabezado. Si echamos un vistazo a la versión final justo aquí, esta será la sección arriba en la parte superior en la que vamos a trabajar. Al final de esta lección, nuestra sección de encabezados debería verse así. Para ello, vamos a cambiar el diseño de nuestras secciones div gratuitas para ir a través la página en lugar de estar apilados uno encima del otro como lo tenemos actualmente. Para empezar, vamos a pasar a nuestro styles.css que ya hemos creado, y ya hemos vinculado esto a nuestra página de índice. No queremos enlazar sólo aquí, así que lo que tenemos que hacer es apuntar a cualquiera de estos selectores en la sección de cuerpo. Si queremos apuntar a la sección de encabezado, podemos, el div, las listas, los elementos individuales de la lista, podemos apuntar a cualquier cosa en esta página. Pero primero vamos a empezar por el elemento muy externo, que es este elemento HTML justo aquí. Una forma de apuntar a cualquiera de estos elementos es escribirlo exactamente igual que hacemos en HTML. Después abrimos los tirantes rizados así. Entonces todas las reglas de estilo que aplicamos en medio aquí, se aplicarán a nuestro HTML. Lo primero que vamos a hacer es establecer un color de fondo. Este color de fondo se va a aplicar al documento completo. Voy a mantener esto simple y poner esto para que sea un color blanco. Si le damos una palabra a este archivo, realmente no deberíamos ver ningún cambio en el navegador, ya que éste ya es un color blanco. Pero este es el color de fondo que podemos ver por encima de la izquierda, por el lado derecho. Todo esto también es blanco, pero la diferencia está en el centro. Ahora vamos a agarrar todo el contenido HTML contenido en la sección de cuerpo. Después cambia el color para la sección. Recuerda que esta sección del cuerpo estaba anidada por dentro, por lo que esto se sentará encima de un fondo blanco. Esto a continuación esto, en la sección del cuerpo. Entonces dentro de aquí, si entonces configuramos el color de fondo para que sea de cualquier color diferente, di esto, todo al navegador y refresca. Pero ahora ver el cuerpo tiene un color de fondo diferente, en su mayoría se fue a poner en marcha el servidor en vivo haciendo clic en “Go Live”, cierra esta primera versión hacia abajo. Esto sólo nos ahorrará refrescar el navegador después de cada cambio. Además de estos colores que has saturado aquí, también podemos utilizar unos códigos de color diferentes. Para ello, si pasamos a Google y hacemos una búsqueda de HTML Color Picker, tenemos varias opciones diferentes que podemos usar para establecer un color. Podemos o usar este selector de color que aparece justo aquí, o también hay uno bueno en los sitios web de W3Schools. Se acabó los valores a la derecha, que comienzan con este hash. Se trata de códigos de seis dígitos que conforman lo que se llama un valor Hex. Podemos seleccionar cualquier color, al igual que este azul. Podemos entonces ver el valor Hex en la parte superior. También podemos ver un color RGB, que es el rojo, el verde, y los valores azules todos mezclados entre sí. También un valor HSL, que es el tono, la saturación, y la ligereza. Todos estos son valores CSS válidos. Pero para este color me voy a apegar al valor Hex. El hash y el volumen que voy a usar va a ser ede6e6. Esto nos da el diferente color de fondo. Si está utilizando Visual Studio Code, también puede pasar el cursor sobre este color de fondo, y podemos seleccionar un valor diferente de este selector de color. En la parte superior, podemos ver que se trata un valor Hex o también podemos hacer click en esto para que se lleve al valor HSL, un valor RGB, si prefieres un formato diferente. Continuando con el cuerpo, lo siguiente que queremos hacer es establecer la familia de fuentes para este proyecto. El tipo de letra es el estilo de los textos que vamos a utilizar. Voy a ir por Arial. Esta es una fuente bastante sencilla la cual voy a estar seleccionando para este proyecto. Podemos seleccionar diferentes si lo prefieres. Este es el valor de primera opción y luego separado por coma puede agregar diferentes valores que desea agregar. Si no se encuentran las familias de fuentes anteriores, las siguientes son Helvética, y luego sans-serif. Lo que está pasando aquí, es que estamos buscando la fuente Arial si esta está disponible en el sistema de usuario. De no ser así, retrocederá a la Helvética, y si ésta no se pudo encontrar incluso caerá de nuevo a unas fuentes sans-serif genéricas. de esto, también podemos establecer el tamaño de fuente predeterminado que desea utilizar para este proyecto. Una vez que vayas por 18 píxeles, podemos cambiar esto para que sea cualquier valor o también podemos anular este valor para cualquiera de nuestras secciones también. Esto es sólo básicamente un punto de partida. A continuación, el resto del contenido queremos restringir el ancho de toda esta sección para que sea un cierto valor. Voy a ir por 960 píxeles para este ejemplo, que es un valor fijo que no cambiará. Si encogemos el navegador, vemos que esto se empuja fuera del borde. Pero echaremos un vistazo al diseño responsive muy pronto. También queremos que la sección esté en medio de la página. El modo en que podemos hacerlo es aplicando algún margen. Margen es el espacio en el que aparece fuera de un elemento, por lo que cualquier cosa que añadas dentro de la sección del cuerpo aparecerá fuera de esta sección coloreada. Vamos a darle una oportunidad a esto. Si agregamos 10 píxeles, esto surtirá efecto a los cuatro lados. Por supuesto, por el momento no queremos eso porque estos van a estar peleando unos contra otros. Tenemos cantidades iguales en la parte superior, la inferior, y también la izquierda y la derecha. Lo que podemos hacer es agregar cuatro valores separados. Esto irá en el sentido de las agujas del reloj desde arriba, derecha, abajo e izquierda. Desde arriba cambiaremos esto para ser de 50 píxeles, una derecha, una inferior, y la izquierda. Entonces si ahora solo 50 píxeles se aplicarán a la parte superior de la sección de cuerpo, pero lo que queremos hacer igual la versión final es no tener margen en la parte superior e inferior, sino dividir todo el espacio por igual a izquierda y derecha. El modo en que podemos hacerlo es aplicando margen cero en la parte superior, margen cero en la parte inferior, y luego podemos establecer el otro valor para la izquierda y la derecha, que dividirá el espacio por igual. El superior, queremos cero, la derecha de auto, cero en la parte inferior, y luego auto en la izquierda, y estos valores de auto ahora empujarán esto hacia el centro. Si queremos, también podemos aprovechar una versión más corta, que es aplicar dos valores. El primero será el superior e inferior, y luego el segundo valor será el izquierdo y el derecho. Guardar esto dará como resultado exactamente el mismo efecto. A continuación vamos a apuntar a la sección de encabezado y a los divs libres que están anidados dentro. Por lo que este encabezado está envolviendo las tres de nuestras secciones, entonces tenemos un div que sigue a cada una. El primero que hay que hacer es agarrar esta sección de encabezado que es el envoltorio, entonces vamos a establecer el tipo de visualización. El tipo de visualización nos permite cambiar la visualización por defecto para cada elemento. Anteriormente mencionamos que ciertos elementos pueden caer en una categoría. Mencionaré el tipo de bloque y también el tipo en línea. Si recuerdas, el bloque ocupará todo el ancho de la página y empezará en una nueva línea, igual que estas tres secciones que ya tenemos. En línea, como suena, colocaremos los elementos a través de la página de lado a lado si hay espacio para hacerlo. Pero vamos a estar aprovechando un tipo de pantalla llamado flex. Esto hace uso del flexbox CSS para hacer que la disposición de nuestros limones sea mucho más fácil. Si guardamos esto, inmediatamente veremos que las tres secciones div se colocan a través de la página. Esto lo hace porque al usar el flexbox, podemos establecer los contenidos que incluso están dispuestos en una dirección horizontal o vertical. Por defecto, el flexbox hará uso de la dirección del flex en el valor de fila. Esto significa que todos los elementos se colocarán a través de la página en fila. Cuando se utiliza un lenguaje de izquierda a derecha, igual que el inglés, esto será de izquierda a derecha. También podemos cambiar la dirección del flex para ser columna. Esto apilar todos los elementos verticalmente. Dado que la fila es predeterminada, podemos dejar esto apagado y asumir que esto ya está configurado. A continuación, vamos a restringir la altura de este encabezado para que sea un cierto valor. Podemos hacer esto con la propiedad alta. Entonces voy a usar el valor de 150 píxeles. Entonces tenemos que asegurarnos de que las tres secciones estén espaciadas por igual. Queremos que todos tengan el mismo valor de ancho. Podemos hacer esto volviendo a nuestra hoja de estilo. Nuevamente, vamos a apuntar al encabezado. Pero esta vez usamos el símbolo mayor que y luego seleccionamos el div. Esto significa que todos los estilos que aplicamos dentro aquí, solo se aplicarán a cualquier elemento div que inmediatamente sigan nuestro encabezado. Podemos ver si vamos a la página de índice, tenemos nuestro encabezado. Entonces maravilloso anidado dentro tenemos esta sección div. También tenemos éste al lado, y luego nuestra tercera sección. El estilo se aplicará a las tres de estas secciones con este código. Dado que ya tenemos la sección de encabezado que es el conjunto de padres para hacer uso del flexbox, estos elementos secundarios que están anidados dentro también pueden hacer uso de valores flex. Uno de estos es simplemente flex. Si establecemos el valor para que sea uno, ahora este valor flex de uno se aplicará a los tres de nuestros divs. Ahora bien, esto significa que las tres secciones tendrán la misma cantidad de espacio. Si lo cambiáramos para que sea alguno de nuestros valores que es de dos, tendremos exactamente el mismo efecto ya que todos son iguales. No obstante, aunque la diferencia ocurrirá si aplicáramos un valor flex diferente a una sección diferente. Por ejemplo, si nos dirigimos a esta sección de logotipos en el medio y luego colocamos un valor flex de dos, esto tomaría el doble del espacio disponible como esta sección justo aquí. Pero queremos que estos sean iguales, por lo que esto está bien por ahora. Después de esto, también estableceremos el text-align para que esté en el centro. Esto significa que todos los textos contenidos dentro de este div estarán centrados dentro de esta sección. Al mirar la versión final, también queremos que estos dos sean empujados hacia abajo. De una forma que podemos hacer esto, y como todavía estamos haciendo uso del flexbox con los padres aquí, no podemos hacer uso de una propiedad llamada alinear-self. Justo después del alineado con texto, agrega en el selector de alineación-auto, y tenemos los diversos valores que podemos elegir. Ahora el valor que vamos a sumar aquí se aplicará verticalmente. Esto se debe a que como hemos visto antes, la dirección del flex por defecto es la fila. Esto es a través de la página horizontalmente. Alinear-yo se aplicará a lo contrario, que es la dirección vertical, también conocida como el eje transversal. Ya que estamos trabajando verticalmente, el estilo flex será la parte superior, el centro estará en el medio, y el extremo flex estará abajo en la parte inferior. Esto ahora los empuja hacia abajo al fondo de nuestro div. También necesitamos cambiar estos para que estén a través de la página, pero volveremos a estos en tan solo un momento. También necesitamos hacer que estos enlaces pasen por la página, y la forma en que podemos hacerlo es apuntando al wrapper, que es el ítem de lista. igual que antes cuando configuramos el tipo de visualización del encabezado para hacer uso de flex-box, para esto, vamos a cambiar el tiempo de visualización predeterminado para todos los elementos de la lista sea el valor de inline. Cuando guardemos esto, veremos de inmediato que estos cambian a un tipo de visualización en línea en lugar de estar uno encima del otro igual que antes. A continuación, vayamos a esta sección media y haremos la imagen un poco más pequeña, así que agarra nuestra sección de cabecera. Entonces vamos a usar un selector diferente que se ve así. Antes, mencionamos que si usamos esta mayor que flecha, esto seleccionará cualquier div que inmediatamente siga nuestros elementos de encabezado. No pudimos hacer exactamente lo mismo para esta sección porque la imagen no es un canal directo de nuestro encabezado. Esta sección de encabezado solo contiene nuestros divs, por lo que lo que podemos hacer en su lugar es dejar esto fuera y esto agarrará cualquier elemento de imagen que esté dentro de la sección de encabezado. Para ello, restringiremos el tamaño de la imagen del encabezado para que sea un ancho máximo de 100 píxeles. Ahora podemos ver que la imagen ahora es casi del tamaño correcto, pero parte del espaciado y también el tamaño del título del sitio sigue empujando esto fuera de la parte superior de la página. En lugar de hacer esto más pequeño, bajaremos a nuestro encabezado de nivel uno, que es nuestro título de sitio colocado dentro de este div medio, así que justo aquí. Para esta sección queremos, en primer lugar, eliminar el espaciado predeterminado que está justo debajo. Si hacemos clic con el botón derecho y vamos al inspector, abriremos las herramientas de desarrollador, pinchamos en la flecha de la esquina. Podemos ver la sección naranja en la parte superior e inferior. Ahora, si hacemos click en esto y luego miramos hacia la derecha, y luego dentro de la sección de elementos, entra en los estilos. Entonces en la parte inferior, podemos ver que tenemos algún margen el cual se ha aplicado en la parte superior e inferior. El encabezado nivel uno, junto con otros elementos a menudo tienen algún margen por defecto y relleno aplicado por el navegador. También podemos anular esto estableciendo nuestros propios valores de margen. Podemos restablecer esto para que sea cero y podemos ver que esto ya se ha eliminado. No obstante, queremos aplicar un poco de margen en la parte inferior y también en la parte superior, por lo que podemos cambiar esto a diez píxeles. Ahora hemos quitado el espaciado, casi tenemos la imagen de nuevo en la página. Lo siguiente que vamos a hacer es establecer el tamaño de fuente para que sea de 20 píxeles. Esto luego reducirá el tamaño de la fuente y dejará suficiente espacio ahora para nuestra imagen. A continuación vamos a pasar a esta sección izquierda y derecha y darle estilo a nuestra lista desordenada. Si notas y en particular si entramos en las herramientas de desarrollador, si hacemos clic en el inspector y luego pasamos el cursor sobre cualquiera de las secciones, podemos ver que estos ítems de lista desordenados no se colocan en el centro de nuestro div. Esto se debe a que si seleccionamos nuestra lista desordenada, podemos ver por la sección verde sobre a la izquierda, tenemos algún relleno por defecto, y al igual que el encabezado nivel uno con la sección naranja, también tenemos algunos margen aplicado también. Nuevamente, si hacemos click en esto podemos pasar al diagrama de abajo a la derecha. Podemos ver el tamaño de los elementos en el medio, un relleno que se está aplicando sobre a la izquierda, que actualmente es de 40 píxeles, y luego el margen que está en la parte superior e inferior. Lo que vamos a hacer es, en primer lugar, establecer el margen para que sea un valor de 10 píxeles. Esto dará entonces la misma cantidad de espaciado desde la parte inferior que el encabezado. Después moveremos esta sección de relleno verde por defecto para que nuestros enlaces se coloquen en el centro. Haz esto. Como acabamos de ver, esto se aplica a la lista desordenada. En primer lugar, estableceremos el margen para que sea de 10 píxeles en la parte superior e inferior y esto luego debería alinear esto con nuestro encabezado. Estableceremos cero a la izquierda y a la derecha y luego eliminaremos cualquier relleno predeterminado con un valor de cero. Esto y volver al navegador, ahora podemos ver si pasamos el cursor sobre el relleno, no tenemos ningún valor aplicado. El margen, esto ahora se ha reducido a 10 píxeles en la parte superior e inferior, que luego se alinearán con nuestro rumbo. A continuación, como todos estos elementos son enlaces, estos tienen un color predeterminado y también los tienen subrayados. Para eliminar esto, necesitamos seleccionar nuestro enlace, que es este Un elemento que rodea nuestro título, y también nuestros ítems de lista. Agarra esto. En primer lugar, para quitar el subrayado, necesitamos establecer la decoración del texto. tenemos opciones para cambiar cosas como el color, pero sólo voy a eliminar esto con el valor de ninguno. A continuación vamos a establecer el color del texto. También voy a configurar esto en la sección de cuerpo también. Esto también se aplica a otros elementos. El modo en que podemos agregar color a nuestro texto es simplemente usando la propiedad color. A partir de aquí nuevamente, queremos utilizar un valor hexadecimal de 373535. Esto se aplicará al resto del sitio cuando creemos nuestro nuevo elemento. Como podemos ver, esto no se aplicará a nuestros enlaces, por lo que necesitamos aplicarlo también a nuestros elementos A haciendo exactamente lo mismo. El valor fue de 373535, guarde esto. Esto ahora se aplica a todos nuestros enlaces. El último pedazo de estilo que voy a usar para este encabezado es cambiar el color de este enlace cuando el ratón se coloca sobre. Al igual que vemos en la versión final aquí cuando pasamos el cursor sobre cualquiera de estos enlaces, obtenemos un cambio de color. Para ello, necesitamos aplicar una pseudo-clase a nuestro elemento A. Al igual que arriba, seleccionamos nuestros elementos, usamos un colon y una pseudo-clase aplicará un estilo diferente para un estado diferente. Por estado, nos referimos a cosas como si se ha visitado un enlace o se ha hecho clic en él, si no ha sido visitado, si el mouse pasa por encima de alguno de estos enlaces, y también varios se desplaza también. Para esto, vamos a hacer uso del estado de flotación, por lo que cuando el ratón pase sobre cualquiera de estos enlaces, pero voy a cambiar el color del texto. Nuevamente, somos libres de usar cualquier tipo o valores diferentes que quieras, pero para este ejemplo, voy a mezclarlo y usar un valor RGB donde colocamos dentro de tres valores separados. El primero es rojo, que es 226, el verde de 74, y el valor azul de 74. Podemos ver por la vista previa que esto nos da este color rojo. Pasado al proyecto, y nuestro hover entra en vigor para cada uno de estos enlaces. Esto ahora es todo el estilo aplicado a nuestra sección de encabezado. Si quieres, puedes jugar alrededor de estos valores y colores y cambiar las cosas si quieres. A continuación, vamos a bajar la página y crear algunas más estas secciones de contenido. 10. Área del contenido principal: Bajando de esta sección de encabezado en la que hemos estado trabajando, ahora vamos a agregar el contenido justo a continuación. Si echamos un vistazo a la versión final justo dentro de la otra pestaña del navegador, estas van a ser las dos secciones que vamos a estar creando. El primer apartado tendrá una imagen de fondo, y luego tendrá un encabezado, y también una oportunidad de ingresar un correo electrónico y luego enviar esto. Por supuesto que por el momento esto no lo hará porque esto es solo HTML, y necesitarías algún servicio back-end para que esto funcione. Pero por el momento, solo nos concentramos en el look y la sensación del sitio usando HTML y CSS. Bajando, tenemos una segunda sección justo debajo, que tiene estas tres secciones diferentes. Esto nos dará la oportunidad de echar un vistazo a algunas formas diferentes de cómo podemos posicionar elementos. Vamos a superponer este texto en la parte superior de la imagen. Echa un vistazo a algunas de estas técnicas. Para empezar, volvamos a nuestra página index.html. Entonces si nos desplazamos hacia abajo justo debajo de la sección de encabezado y hacemos algo de espacio, asegúrate de que esto aún esté por encima del cuerpo. Esto vamos a utilizar un nuevo elemento llamado sección. El apartado será el envoltorio para toda nuestra primera sección la cual se ve justo aquí. Ahora, podríamos agregar una imagen igual que usamos en el encabezado aparecer para el logotipo usando el elemento de imagen. Pero para esta imagen de fondo, te voy a mostrar una forma diferente de insertar una imagen. Echaremos un vistazo a esto en el siguiente video vía CSS. Empezaremos con nuestros encabezamientos y este va a ser un rumbo de Nivel 2, entonces éste será Nivel 3. El h2, y luego pulsa Enter, y luego el texto de recetas semanales a tu bandeja de entrada. Voy a guardar este archivo y luego abrir el servidor en vivo, tal como lo hemos visto en videos anteriores. Ahí están nuestras texturas aquí, y parece que está dentro de la sección de encabezado por el color de fondo. No obstante, esto se encuentra en su propia sección debajo del encabezado. Si echamos un vistazo a nuestro style.css y luego nos desplazamos hacia arriba hasta la sección de cuerpo, aquí hemos establecido el color de fondo para todo el cuerpo. Esto se aplicará a todo nuestro contenido, pero esto será reemplazado por una imagen de fondo en el próximo video. A continuación, el texto, que va a ser Regístrate ahora, en la página de índice. Este va a ser un rubro de Nivel 3, pon el texto de Regístrate ya. Ya que estamos usando un servidor en vivo, esto se actualizará automáticamente cuando guardemos. Para ingresar la entrada del usuario, vamos a hacer uso de un formulario. El formulario es una forma para que el usuario interactúe con nuestro sitio web e introduzca algunos valores. Es posible que hayas utilizado formularios en el pasado donde te registras por correo electrónico, puedes agregar tu nombre, puedes agregar todo tipo de información como mensajes, tu fecha de nacimiento. Pero este va a ser sencillo, sólo va a ser una entrada de correo electrónico y luego un botón Enviar. Para ello, vamos a envolver toda esta sección en un formulario. Podemos eliminar este atributo de acción ya que no estaremos enviando esto durante este curso. Pero lo que vamos a hacer es colocar en una entrada. Si tocamos Enter, el tipo predeterminado que nos dan es la entrada basada en texto. Según suena, esta es una forma para que el usuario introduzca un valor de texto, como un nombre de usuario o un nombre completo. Vamos a hacer uso de una entrada de correo electrónico. Ahora bien, este tipo de entrada en la que entramos, le dará al navegador una pista de qué tipo de datos esperamos que se introduzcan. Puede comprobar estos datos y también proporcionar algunos mensajes al usuario si el tipo de datos no es válido. Por ejemplo, si cambiáramos esto a un tipo de número y luego el usuario ingresó algún texto, el navegador restringiría esto a solo aceptar números. Además, dado que se trata de un tipo de correo electrónico, cuando el usuario hace clic en esta entrada, también puede aparecer con algunos correos electrónicos previamente utilizados también. Pasando adelante. El siguiente atributo que vamos a agregar es el aria-label. Una vez que establezcas esto, para ser igual al correo electrónico. Esta etiqueta aria-se utiliza para dispositivos de accesibilidad como lectores de pantalla. Si echamos un vistazo a nuestra versión final, justo aquí, ya ves que no tenemos ninguna etiqueta junto a nuestra entrada. A menudo, con formularios verías una etiqueta igual a esta, y tal vez algún texto igual a este, que aparecerá junto a la entrada del formulario. Ahora, al igual que nuestra versión final, no queremos mostrar este texto. Podríamos eliminar este texto del navegador usando CSS. obstante, hay una razón por la que no queremos hacer esto, y esto se debe a que si un usuario tiene discapacidad visual y no puede leer estas texturas aquí, y puede que esté usando un dispositivo como un lector de pantalla y hágales saber qué tipo de entrada esta es. Si fuera a quitar esto, su aria-label etiquetaría este elemento para proporcionar una indicación al lector de pantalla o dispositivo de accesibilidad a qué tipo de entrada es. Después de esto, el siguiente atributo es el marcador de posición, que va a ser el texto que se coloca dentro este cuadro antes de que el usuario agregue un valor. Para esto, diremos Ingresa tu correo electrónico con poco espacio justo a la izquierda. Este espacio también se reflejará dentro de la entrada. A continuación, el segundo insumo, que tiene el tipo de presentación. Cuando agregamos un formulario así como este, también necesitamos agregar un botón Enviar, el cual va a enviar este formulario al servidor. Ahí hay un todo justo aquí. Esta es una sección bastante simple y todos los visuales se crearán en el siguiente video usando CSS, incluyendo esta imagen de fondo. A continuación, avanzamos hacia abajo para hacer nuestra sección que justo debajo. Para esto, crearemos una nueva sección como envoltorio. El apartado va a tener tres divs colocados dentro con cada una de estas imágenes con el texto. El primer div, y cada uno de estos divs va a contener dos elementos. El primero es la imagen que se desea utilizar para el fondo, y la fuente esta está dentro de la carpeta Imágenes. Esta imagen es un vegatarian.jpg. El texto alt. Recuerda, esto se mostrará en el navegador si no se pudo cargar la imagen. Dirá sección vegetariana. Entonces después de esto, podemos colocar en el texto. Ahora bien, si quisiéramos, podríamos usar un elemento p o podríamos usar un encabezado. Para ello, quiere colocar en un rubro de Nivel 3, ya que estos son apartados razonablemente importantes. El texto es vegetariano. Guarda esto, y vamos a echar un vistazo a esto en el navegador. Bien. Esa es nuestra primera sección. No te preocupes por cómo se ve esto por el momento. Vamos a mejorar mucho esto en el próximo video. El segundo div, justo debajo, esto es para la sección media. Esto es igual a la sección anterior con la imagen y también un encabezado Nivel 3. Si lo quisiste, sigue adelante y pausa el video y danos un go por tu cuenta si te sientes cómodo haciéndolo. Si no, voy a seguir con las imágenes. El imagen esta vez es el quick.jpg. El texto alt dirá la sección de comidas de cinco minutos. El h3 es más comidas de cinco minutos. Comprueba todo se ve bien en el navegador. Por el momento, estos se apilarán uno encima del otro en lugar de cruzar la página. Porque como mencionamos anteriormente, un div es un elemento de nivel de bloque, lo que significa que cada div comenzará en su propia nueva línea. El tercer div, este es para las opciones saludables. Colocar en la imagen. Nuevamente, en la carpeta Imágenes, ésta recibe el nombre de healthy.jpg. El texto alt, diga sección de opciones saludables. Entonces el h3 en la parte inferior, que es opciones saludables. Bajen. Ahí está nuestra tercera sección al fondo. Observe cómo todo este contenido se encuentra aún dentro de la sección de cuerpo. Este fondo gris se aplicará a todo nuestro contenido. No se ve muy bien por el momento, pero lo arreglaremos en el siguiente video, donde aplicaremos algo de estilo en nuestras dos nuevas secciones. 11. Estilo del contenido principal: Bienvenido de nuevo. Ahora tenemos algún contenido en la página al que necesitamos aplicar algún CSS. No solo tu estilo sino que también necesitamos hacer mucho trabajo de diseño. Tenemos que posicionar todo este texto en el centro de la página. Necesitamos agregar una imagen de fondo, algún estilo general, y luego en esta sección y justo debajo con nuestras imágenes gratuitas, y también el texto, necesitamos colocarlos a través de la página y también encontrar manera de que este texto reemplace cada una de estas imágenes, igual que tenemos en la versión final, justo aquí. Desde arriba, queremos comenzar con la sección de registro de en el styles.css. Pero justo antes de hacer esto, necesitamos una manera de realmente agarrar esta sección para poder aplicar algún estilo. Todo este contenido se coloca dentro de este elemento de sección. Pero si fuéramos a seguir adelante y agarrar la sección con un CSS, esto también aplicaría a la sección de abajo. Lo que vamos a hacer aquí es agregar en atributo id. Este id es un valor único para este solo elemento, por lo que al usar id es importante que solo agreguemos esto una vez en nuestra página. Dale un nombre de “inscribirte”. Ahora tenemos una forma de agarrar esta sección en nuestro archivo CSS. Ahora antes de agregar nuestros selectores así como esto, agregamos a través del nombre de la etiqueta. Utilizamos la a, lista desordenada, la h1. Pero cuando estamos seleccionando un id, usamos el # seguido del nombre id, que estaba inscrito. Entonces dentro de aquí, podemos colocar en todas nuestras reglas CSS, al igual que hicimos arriba. El primero que tenemos que hacer es agregar una imagen de fondo. Ahora antes, agregamos los valores de fondo. Ahora anteriormente arriba hemos usado la propiedad background-color justo aquí. Esto es para establecer el color del fondo. Pero esta vez lo que vamos a hacer es establecer la imagen de fondo. Entonces podemos colocarlo en una URL, que es la ubicación de la ruta del archivo de esta imagen. El nuestro está en la carpeta de imágenes y la imagen para esta sección es el main.jpg. Podemos ver de inmediato una vez guardamos que esta imagen aparece ahora como fondo para esta sección. También necesitamos agregar a la propiedad de altura para que sea un poco más alto, y voy a establecer la mía para que sea de 500 píxeles. Esto nos dará suficiente espacio para cubrir todo el contenido. A continuación, también queremos que este texto y también la entrada de formulario se coloque en el centro de nuestra imagen. Una forma sencilla de hacerlo es haciendo uso del flexbox CSS. Al igual que antes, configuramos el tipo de visualización para que sea flex y recordamos que la dirección de flex predeterminada es fila, por lo que todo el contenido se coloca a través de la página. No obstante, queremos que estos se apilen verticalmente, por lo que podemos cambiar la dirección flex-ser columna. Ahora estamos haciendo uso del flexbox, necesitamos agregar dos nuevas propiedades para colocar estos artículos en el centro. El primero es align-items y el valor está en el centro. Entonces, cuando la dirección flex-se establece en columna, los elementos de línea harán que estos se centren horizontalmente a través de la página. Lo siguiente que tenemos que hacer es exactamente lo contrario, que es centrar nuestro contenido verticalmente. El modo en que podemos hacerlo es usando justify-content y colocándolos en el centro. De acuerdo, ahora si echamos un vistazo de cerca, estos están más o menos en el centro, pero parece como si fuera un poco más de espaciado en la parte superior en lugar de en la parte inferior. El motivo de esto será que tenga que ver con los valores predeterminados del navegador. Si entramos en la Inspección, haga clic en esto, y podemos ver que el encabezado nivel 2 tiene algún margen por defecto en la parte superior e inferior. Lo mismo con el rubro nivel 3, no vemos ninguna en el formulario. Entonces lo que queremos hacer ahora es trabajar con nuestros dos rubros. Desde la página del índice, estas dos secciones se colocaron en el encabezamiento de nivel 2 y también en el nivel 3. Podemos apuntar a múltiples elementos separándolos con una coma. El h2 y también h3, todos los estilos dentro de aquí se aplicarán a ambos de estos encabezamientos. En primer lugar, el fondo-color, y antes mencionamos hay diferentes tipos de colores que podemos agregar. Podemos usar los valores rgb que tenemos justo aquí, y también podemos usar un valor hexadecimal también. También podemos extender este tipo rgb para ser rgba. Echemos un vistazo a cómo podemos hacer esto justo aquí. Si agregamos rgb, podemos sumar nuestros valores regulares, voy a ir por 46 por el rojo, 39 por el verde y también 39 por el azul. Si guardamos esto, como se esperaba, vemos un color de fondo oscuro. Ahora bien, este fondo es bastante sólido y cubre la imagen. Entonces lo que vamos a hacer es aplicar un poco de opacidad. Esto significa que podemos aplicar un cierto nivel de transparencia. Para ello sumamos el cuarto canal, que es a, y esto es para alfa, y luego entre cero y uno, podemos establecer un valor. Si establecemos esto para que sea uno, éste será un fondo sólido sin transparencia, al igual que ya tenemos. Pero si cambiamos esto para que sea cero, esto será totalmente transparente. Yo quiero colocar esto es en algún lugar del medio, como 0.05, esto significa que todavía tenemos un ligero color de fondo. También vemos aparecer parte de la imagen de fondo. Esto nos puede dar un efecto bonito. Para que esto sea más grande, estableceremos algún relleno de cinco píxeles en la parte superior e inferior y cero en la izquierda y en la derecha. Para aplicar algún espacio en el interior de este elemento, hacer que el fondo sea un poco más alto, de hecho, también añadiremos esto por un lado también. Simplemente eliminaremos el valor cero, por lo que se aplica a los cuatro lados. A continuación, el texto, vamos a hacer que esto sea más claro estableciendo la propiedad de color. Este es un valor rgb de dos 235, 222, y luego 222. Dándonos este color más claro que vemos justo aquí. Si comparamos esto con la versión final justo aquí, podemos ver que el texto de estos dos encabezamientos es ligeramente más ligero que nuestra versión. Esto se debe al peso de la fuente. Voy a cambiar esto para que sea un valor más ligero de 300, así que no es del todo tan audaz como el predeterminado. A continuación, el nivel de encabezado de nivel 3 podemos eliminar algunos de los valores predeterminados del navegador. Recuerda desde antes que teníamos algún margen por defecto, y voy a quitar esto. Ahora si pusiéramos esto a cero, esto aplicaría a todos nuestros lados, o en su lugar, si sólo quisiéramos aplicar esto a un lado determinado, también podríamos colocar esto en, para poder colocarlo en la parte superior, la inferior, la derecha y la izquierda, y esto ahora sólo se aplicará a un lado. De hecho, sólo quiere ser un nivel 2. Por lo que esto se aplicará al top. Ahora se ha retirado el margen de nuestro encabezamiento superior, esto colocará esto más en el centro. bajar ahora tenemos esta sección de formulario con la entrada y también el botón Enviar. Si quisiéramos, podríamos ir a nuestra página de índice y agregar un id único o incluso una entrada de lista de clases. O también podríamos apuntar a esta entrada por el tipo. El modo de hacerlo es agregando la entrada seguida de los corchetes. Desde aquí podemos establecer el tipo de entrada de correo electrónico. Ahora todos los estilos que agregamos aquí dentro solo se aplicarán a la entrada de correo electrónico. En primer lugar, el ancho, podemos establecer que este sea un valor fijo de 250 píxeles, lo que hará que esto sea un poco más ancho. Soy relleno, que recuerdan es el espaciado interior del elemento. Cualquier valor que añadamos dentro de aquí lo hará más alto o más ancho. Vamos por cinco píxeles por todos lados. El radio fronterizo y esto nos dará un redondeo en las esquinas. Al igual que cuando se usa margen y relleno, también podríamos agregar múltiples valores. O si quisiéramos aplicar esto por todos lados, solo agregamos el valor único, el tamaño de fuente de 14 píxeles. Esto anulará el valor de 18 píxeles de la sección del cuerpo. A continuación, después del tamaño de la fuente, también podemos quitar este borde que está rodeando los cuatro lados. Esto es bastante sencillo de hacer. Todo lo que necesitamos hacer es establecer la propiedad fronteriza para que sea igual a ninguna. Podemos hacer lo mismo con nuestro botón Enviar. Recuerda que esto tiene el tipo de presentación. Entonces al igual que ambos, apunta a todos los insumos, y luego reduce esto al tipo que es igual a presentar. En primer lugar, estableceremos un color de fondo. Para esto podríamos usar el background-color, que hemos usado arriba o podríamos acortar esto a simplemente fondo. Nuevamente, tenemos acceso a todos los mismos colores como RGB o también a los valores hex también. Voy a ir por cccccc, y este es el color gris que vemos justo aquí. A continuación, un poco de relleno en el interior. El primer valor se aplicará a la parte superior e inferior y queremos igualar el valor de relleno del correo electrónico. Al igual que esto estableceremos que sean cinco píxeles, y luego para hacerlo más ancho, agregaremos 15 píxeles a la izquierda y a la derecha. También coincidir demasiado con el correo electrónico, también necesitamos dar la vuelta a las esquinas y también quitar el borde también. Al igual que por encima del borde ninguno, luego el borde radio, alrededor de las esquinas, los cinco píxeles, y también el mismo tamaño de fuente, que es de 14 píxeles. Bien. Esa es ahora nuestra sección superior completa. Ahora vamos a bajar a estas imágenes libres y también al texto. Para esto, también necesitamos una forma de seleccionar la sección y si nos desplazamos hacia abajo a esta sección, también podemos colocarla en una identificación, que voy a llamar ideas. Al usar CSS, hay múltiples formas que podemos usar para colocar nuestras imágenes a través de la página, igual que hemos usado anteriormente, vamos a estar usando el CSS Flexbox. En primer lugar, vamos a apuntar al contenedor que tenía el ID de ideas. Establezca el tipo de visualización para que sea flex y como se mencionó anteriormente, la dirección de flex predeterminada es fila, que los colocará horizontalmente en toda la página. Si echamos un vistazo a la versión final, vemos que hay algo de espaciado alrededor de toda esta sección. Para ello podemos hacer uso de un valor de relleno que, recuerde, aparecerá en el interior de la sección. Eso será relleno, y vamos por 15 píxeles y hay algo de espaciado alrededor del borde. Lo siguiente que tenemos que hacer es reducir el tamaño de estas imágenes, por lo que nuevamente, agarra la sección de ideas, y luego seleccionaremos todas las imágenes que se colocan en esta sección. Dentro de aquí, si establecemos la propiedad width en 100 por ciento, todas estas imágenes o bien escalarán hacia arriba o bajarán para caber dentro del contenedor. Ahora necesitamos colocar todas estas secciones tecnológicas por encima de cada una de estas imágenes. Ahora bien, esto puede ser complicado de entender si no has usado las propiedades de posición en el pasado, pero vamos a estar haciendo uso de dos valores de posición llamados relativos y absolutos. En primer lugar, antes de hacer esto, necesitamos aplicar una clase a cada una de estas secciones. Ahora al igual que aquí donde lo colocamos en un ID, podríamos colocar una clase dentro de cualquiera de estos elementos. Una clase es también otra forma de agarrar cualquiera de estos elementos usando nuestro CSS. Pero la diferencia entre una clase y un ID es un ID solo se debe usar una vez, pero podemos usar una clase varias veces. Esto es perfecto si queremos agregar los mismos valores CSS a múltiples elementos. Para esto voy a darle a esto un nombre de familiar, también voy a aplicar esto a nuestro segundo y también a nuestro tercer div también. Agarramos esto en el CSS, vamos a nuestra hoja de estilos, y en lugar de usar el hash que hemos visto para nuestro ID, usamos un punto para una clase. Esto fue relativo. Entonces vamos a establecer el valor de posición CSS en relativo. Echaremos un vistazo a lo que esto significa en tan solo un segundo, pero por ahora, vamos a bajar a este título. El texto dentro de nuestra página de índice está contenido dentro de este encabezamiento de nivel 3. Hay múltiples formas en que podríamos agarrar esto, podríamos apuntar a las ideas, y luego seleccionar el encabezado de nivel 3, o también podríamos colocar una clase dentro de cada uno de estos. Voy a ir por la opción de clase y nombrarlo el título de la categoría. Copia esto y también coloca esto en nuestras otras dos secciones. Volver a la hoja de estilo. Vamos a usar el punto y este fue el título de la categoría. Esta vez estableceremos el valor de posición para que sea absoluto. Ahora tenemos dos valores de posición diferentes establecidos justo aquí, hemos establecido las imágenes para tener la posición de relativa, y el título para tener la posición de absoluta. Una posición relativa es la posición original del elemento. Permanecerá en el flujo de los documentos y ocupará el espacio original que se pretendía. También podríamos empujar alrededor de estas secciones con un valor superior, derecho , inferior, o a la izquierda así. Pero voy a dejar esto tal como está. Ahora, la razón por la que hemos establecido esto para que sea relativo es porque si establecemos otro valor dentro para que sea absoluto. Aquí también podemos hacer uso de la parte superior, derecha, inferior, e izquierda, pero esta vez la diferencia es que la sección será referenciada desde nuestra imagen relativa. Si establecemos un valor superior de 20 píxeles, digamos esto, esta sección absoluta buscará el contenedor relativo más cercano, que es nuestra imagen. El valor superior de será referenciado desde arriba, tenemos la derecha, la inferior, y la izquierda. Como podemos ver, los 20 píxeles de la parte superior empujarán estos 20 píxeles hacia abajo de la imagen. También podríamos trabajar con el valor de la izquierda para empujar esto hacia el medio. Pero alternativamente, podríamos establecer el ancho para que sea del 100 por ciento. Esto ahora estirará el título para ser ancho completo de nuestra imagen. Entonces esto nos permitirá aplicar el text-align para estar en el centro, colocando estos exactamente donde queremos que estén. Cuando establecemos la posición para que sea absoluta, igual que hemos hecho aquí, esto eliminará el elemento del flujo del documento. Naturalmente, no ocupará ninguna posición en la página, actuará como si se hubiera retirado de los documentos, lo que significa que necesitamos usar la parte superior, derecha, inferior e izquierda para establecer el posicionamiento exacto. Si eliminamos esta sección relativa, digamos esto, ahora se coloca a 20 píxeles de la parte superior de la página. Esto se debe a que como se mencionó anteriormente, un elemento absoluto buscará el contenedor relativo más cercano y si no tiene uno, en su lugar hará referencia a los documentos completos. Coloquemos esto de nuevo dentro. El último que hay que hacer es también aplicar algún espacio en ambos lados de esta imagen media como lo hicimos con esta imagen justo aquí. Para ello, de vuelta a nuestra página de índice. Para esta sección media, también podemos agregar una segunda clase separada por un espacio. Llamemos a esto el medio, guardemos este archivo, y pasemos a nuestra hoja de estilo. Agarra la sección media. Para aplicar algún espacio fuera de este div, tenemos que ir por el margen. Ya tenemos el espaciado en la parte superior e inferior, así que dejaremos esto como cero, y colocamos 15 píxeles a la izquierda y a la derecha. Pasa al navegador, vemos que tenemos algo de espaciado a la izquierda y a la derecha, pero también ahora tenemos un problema con nuestro título. Vamos a las Herramientas de Desarrollador, haga clic derecho en “Inspeccionar”, haga clic en el “Inspector” y ya veremos qué está pasando. Este es el encabezado de nivel 3, así que haz click en este. Si pasamos el cursor sobre la sección de relleno, podemos ver que tenemos un contorno verde alrededor de nuestro título. Este relleno también está agregando algo de exceso de espacio en el que no necesitamos. Para quitar esto, volvamos a nuestra hoja de estilo, y ya tenemos un selector de encabezamientos de nivel 3. Volver a nuestra sección h3, este es el relleno justo aquí. Podríamos anular esta sección, pero esto también se aplicará a esta sección en el encabezado. En cambio, volveremos a bajar al título de la categoría, que sólo se va a aplicar a esta sección y establecer que el relleno sea cero. Esto ahora resuelve el problema horizontalmente, pero también necesitamos mantener el espaciado vertical. Para esto, cinco píxeles en la parte superior e inferior y solo aplicaremos este cero a la izquierda y a la derecha. Bueno, este es ahora el estilo completo para todo el contenido principal. En el próximo video, llegaremos a trabajar con nuestra sección final, que es el área de Footer. 12. Sección de HTML de pie de página: La mayoría de los contenidos principales ahora en esta página, y ahora, vamos a bajar hasta el fondo y crear la última sección de este proyecto. Esta sección va a ser un área de pie de página. No va a ser demasiado difícil. Simplemente será un pie de página como envoltorio, que es un elemento semántico HTML 5. Este envoltorio contendrá entonces una navegación con varios enlaces. Puedes hacer estos enlaces lo que quieras, y también puedes crear páginas adicionales si quieres enlazar estos dos también. Al igual que vemos en la versión final, también habrá una pequeña imagen justo encima de ésta, y ésta está contenida dentro de la carpeta de imágenes. Si te sientes seguro al hacerlo, puedes seguir adelante y crear esto tú mismo. Si no, solo sígueme. Vamos a crear esto ahora en la parte inferior, justo encima de la etiqueta de cuerpo de cierre. Proporcionado con HTML 5, fue un nuevo elemento semántico o descriptivo, que se llama pie de página. igual que lo hicimos antes cuando creamos la sección de encabezado con este elemento justo aquí, todo el contenido para el pie de página va en medio en estas etiquetas, y vamos a crear una imagen y también una nueva lista desordenada. En primer lugar, los elementos de imagen y la fuente está todo en la carpeta de imágenes. Necesitamos el cutlery.svg y también algún texto antiguo también. Guardemos esto y veamos esto de nuevo en el navegador. Refresca, y como nuestro svg, que es un poco grande en este momento, pero en el próximo video, vamos a darle estilo a esto con una sección con CSS. A continuación, al igual que lo hicimos antes, también vamos a crear una lista desordenada, que contendrá nuestros enlaces de navegación. Justo antes de hacer esto, también vamos a echar un vistazo a otros elementos semánticos o descriptivos llamados nav. Nav es un elemento que está destinado a representar una posible página, que contiene enlaces de navegación. Este no es un elemento obligatorio que necesitamos incluir ante los navegadores y lectores de pantalla que se leen en este HTML. Sí proporciona una mejor descripción de qué contenido está anidado en su interior. A partir de aquí, creamos una lista ordenada igual que antes. Enumeraré elementos que pueden contener un elemento para un enlace. Como se mencionó anteriormente, también se puede crear un enlace a una página diferente. Pero sólo voy a dejar este vacío en este video. El primero, digamos de esto. El segundo ese elemento de lista con un enlace, éste es para contratistas. El tercero, éste voy a sugerir una receta. El cuarto, éste va a ser privacidad. Esto seguirá los enlaces hacia abajo en la parte inferior. El CSS también se aplica cuando pasamos el cursor sobre cada uno de estos elementos desde lo más temprano [inaudible] que lo teníamos. Si subimos hasta arriba, también tenemos algunas secciones de navegación justo aquí arriba. Lo que vamos a hacer es trasladarnos también a la parte superior de la página y buscar nuestra lista desordenada dentro del encabezado. Seleccionemos toda esta sección, y luego comando o Control X. Podemos cortar esto fuera de lugar y también rodear la sección con el elemento nav. Lo mismo para el segundo conjunto de enlaces justo debajo, cortar la sección, colocarla en el elemento nav, y luego pegar el contenido de nuevo dentro. No deberíamos ver ninguna diferencia dentro del navegador. Esto es sólo para describir el contenido que se encuentra dentro de este elemento, igual que hicimos con las secciones de encabezado y pie de página. Por último, para rematar el HTML para esta página, lo último que vamos a hacer es colocar estos punto medio entre los enlaces de pie de página. Podemos hacerlo copiando los elementos span, que contiene la entidad HTML. Vamos a agarrar esto, nosotros Comando o Control C. Regresar a nuestros enlaces de pie de página y podemos pegar esto entre cada uno de estos ítems de la lista. Echemos un vistazo a esto. Ahí lo tenemos. Por último, lo último que hay que hacer para este proyecto va a ser en el siguiente video. Aplicaremos nuestro estilo CSS para la sección de pie de página. 13. Aplicar estilo al pie de página: Tendré todo el contenido HTML en esta página. Lo último que hay que hacer para terminar este proyecto es aplicar algo CSS peinándolo en el pie de página, va a ser bastante básico. Todo lo que necesitamos hacer es reducir el tamaño de este SVG colocará todo el contenido en el centro y también reproducirá un color de fondo ligeramente diferente. Después lo vamos a utilizar para el resto de la sección del cuerpo. Por lo que pasa al styles.css. Recuerda que el envoltorio para toda esta sección fue el pie de página. Ahora podemos trabajar con esto más en nuestra hoja de estilo. En primer lugar, vamos a agarrar esto. Entonces dentro de aquí estableceremos el tipo de display para hacer uso del flexbox. Como se mencionó anteriormente, la flex-direction por defecto es la fila que colocará estos elementos en toda la página. Tenemos que cambiar esto de nuevo para ser la flex-dirección de columna. Esto también se aplica a la sección de pie de página, que es el envoltorio. El flex-dirección ahora es columna, que pondrá en su lugar estos de vuelta verticalmente. Quizás estés pensando en estos momentos, “Bueno, esto sólo nos deja exactamente donde estamos al principio”. Pero ahora estamos haciendo uso del flexbox. Ahora podemos hacer uso de una propiedad flex llamada align items, donde podemos poner esto en el centro. Esto entonces empujará ahora nuestros enlaces hacia abajo en la parte inferior, hacia el medio y también este SVG, cuando reducimos el tamaño también, actualmente tenemos la columna de dirección flex-que es vertical, y esto se conoce como el eje principal. Al usar una línea de ítems al igual que llegaron aquí, esto funcionará en lo contrario, que se conoce como el eje transversal. Es por ello que la propiedad central alineará estos elementos a través de la página horizontalmente. Lo contrario se aplicaría si fijamos la flex-dirección a la fila. Esto significaría entonces que nuestro eje principal está a través de la página, lo que significa alinear elementos sería lo contrario y esto establecerá la alineación vertical. Si empezaras ahora, esto puede parecer un poco confuso, pero esto solo toma un poco de acostumbrarse. A continuación, cambiaremos el color de fondo para esta sección de pie de página. Cara sombra ligeramente oscura, que va a ser E5. fácil, fila fácil, guardar. Podemos ver un tono ligeramente diferente al resto de los contenidos corporales. Algún polen, que va a ir dentro de esta sección de pie de página y proporciona algo de espacio dentro, alrededor del interior. Vamos por 20 pixeles. Esto aplicará nuestro espacio en los cuatro lados. Por último, necesitamos reducir el tamaño de esta imagen. Podemos aplicar esto solo al área del pie de página y luego a cualquier imagen que esté destinada a estar dentro. Todo lo que necesitamos hacer es establecer el ancho máximo de esta imagen, los 80 píxeles. Ahí lo tenemos. Estas son mis recetas, webs ahora completas. Espero que hayas disfrutado de este proyecto y de tus primeros pasos hacia la construcción de sitios web. En el próximo proyecto, vamos a llevar las cosas aún más allá creando un nuevo proyecto y también introduciendo diseño responsive. 14. Configuración del proyecto universitario: Bienvenidos de nuevo a este nuevo proyecto y a esta nueva sección. Durante esta próxima sección, vamos a construir en este sitio web temático de la universidad que se ve aquí. No sólo vamos a estar replicando esto y obteniendo mucha más práctica construyendo sitios web HTML y CSS, también vamos a aprender algunos trucos nuevos. En particular, una de las más grandes que vamos a aprender en esta sección es el diseño responsive. El diseño responsive es una forma de crear nuestro sitio web, y hacer que se adapte a diferentes tamaños de pantalla. Por ejemplo, en un monitor de tamaño de escritorio más grande , así es como se verá nuestro sitio web. Pero si fuéramos a reducir esto a un ancho más pequeño, vemos que este sitio web responderá o se adaptará al tamaño actual del navegador, y luego cambiará el diseño en consecuencia. Esto también surtirá efecto cuando se vea en una tableta más pequeña o en un dispositivo móvil. En la parte superior, nuestro encabezado será apilado verticalmente. Vemos los enlaces justo debajo del encabezado, en lugar de junto a cada uno de ellos como están aquí. Este es un tema general para mucho del contenido. Podemos ver aquí con esta cuadrícula que en lugar de tener artículos libres lado esto ahora se apilará verticalmente y será el ancho completo de la pantalla. Para este proyecto en particular, solo tenemos un cambio de diseño, tenemos la vista de pantalla pequeña o la vista de pantalla más grande, pero podemos agregar tantos cambios o tantos puntos de ruptura como quisiéramos, aunque solo quisiéramos afinar una sección particular del costado. Esto es lo que vamos a aprender en esta sección. Vamos a empezar, igual que siempre creando una carpeta de proyecto. Encima al escritorio, una nueva carpeta. A éste, queremos llamar a esto el tec-colegio. Puedes darle a esto cualquier nombre que quieras. También se proporciona con este proyecto la carpeta de imágenes, y puedes hacer uso de las mismas imágenes que voy a utilizar, o puedes descargar las tuyas propias si lo prefieres. Después de esto, si lo desea, también puede colocar esto dentro de la carpeta del proyecto, y luego arrastrar sobre la carpeta tech-college hasta Visual Studio Code. Por el momento, sólo tenemos nuestra carpeta de imágenes dentro de aquí con las imágenes suministradas. Lo que tenemos que hacer para empezar es crear nuestra nueva página, que va a ser el index.html. Como siempre, puede escribir la estructura HTML si lo desea, o puede hacer uso del comando Emmet incorporado HTML5, que viene con Visual Studio Code. Escribe html:5, pulsa enter. Ahora, tenemos toda esta estructura que necesitamos para nuestro sitio. El título, coloca esto dentro de la sección de cabeza, guarda este archivo y abre esto dentro del navegador. Podemos hacer doble clic en el index.html dentro de la carpeta del proyecto, o como atajo, podemos hacer clic derecho en el nombre del archivo, copiar la ruta, y luego pegar esto en una nueva pestaña del navegador. Bien. Todo lo que voy a hacer ahora para el resto de este video es agregar un poco de trabajo de configuración, y esto es para proporcionar una fuente que vamos a usar para este proyecto y también proporcionar algo llamado el archivo CSS normalizado. Empecemos con nuestras Fuentes de Google. Hacemos una búsqueda de Google Fonts, y la primera que necesitamos aquí es fonts.google.com. Agrega aquí, y podemos elegir cualquier fuente que queramos utilizar para este proyecto. El que voy a usar se llama Vollkorn. Se trata de V-O-L-L-K-O-R-N. Vamos por el Regular, seleccionamos esto, y también cerramos esto hacia abajo y vamos por el medio. Abre esta copia de seguridad, y luego podremos copiar todo este enlace y pegarlo en nuestra sección de cabeza. Esto también necesita estar vinculado a nuestra hoja de estilos, así que vamos a crear este nuevo archivo dentro del directorio principal de styles.css, y volveremos a esto en tan solo un momento. Pero por ahora, solo copiemos esto y peguemos esto, y si comandamos o controlamos con barra inclinada hacia adelante, esto solo comentará esto para su uso posterior. Lo siguiente que hay que hacer es incluir lo que se llama el archivo CSS normalizado. Si tuviéramos O2, el motor de búsqueda y hacemos una búsqueda de un normalize.css, debería ser el primer enlace que necesitamos justo aquí. Podemos ver aquí que el archivo normalizado nos va a ayudar a renderizar nuestro sitio web de manera más consistente a través de diferentes navegadores. Hay algo llamado restablecimiento de CSS que está disponible, y esto restablecerá todos los valores predeterminados del navegador a cero. Por ejemplo, si ciertos navegadores tenían algún relleno o márgenes a nuestros elementos, esto restablecerá todos estos a cero. No obstante, aunque a menudo estos valores predeterminados se agregan por alguna razón. Una alternativa es usar este archivo normalizado, y esto no eliminará por completo todos los valores predeterminados del navegador. En cambio, lo que hará es ajustar ciertos valores, dando a nuestros sitios una mirada mucho más consistente a través de diferentes tipos de navegadores. Es realmente útil agregar a nuestro proyecto. También podemos usar esto con MPM si estuvieras usando nodo. Pero como no lo estamos, solo vamos a descargar este archivo, seleccionar todo con Command o Control A, copiar con Command o Control C, y luego dentro de nuestro proyecto, ahora tenemos una segunda hoja de estilo la cual vamos a agregar en. Voy a mantener esto más organizado haciendo clic en una nueva carpeta llamada CSS. Arrastremos sobre nuestras hojas de estilo, y luego abrimos esto, creamos un nuevo archivo llamado normalize.css y luego peguemos esto en. Todo esto está haciendo esencialmente es proporcionar algunos valores predeterminados sensatos que vamos a aplicar a nuestros elementos para que se vean mejor a través de diferentes tipos de navegadores. Ahora necesitamos vincular ambas hojas de estilo dentro de nuestro índice. A continuación, vamos a enlazar en nuestra hoja de estilo, que es el normalize.css. Recuerda, ya que creamos una carpeta CSS, también necesitamos agregar esto dentro de nuestra ruta de archivo. Encontrar nuestras hojas de estilo personalizadas, y nuestra hoja de estilos personalizada siempre debe ser la última por lo que Ninguno de estos valores anteriores anulará nuestros estilos personalizados en la carpeta CSS, styles.css. Ahora estamos bastante bien para ir con nuestro nuevo proyecto. Esto es todo el trabajo de configuración ahora completo, y en el próximo video, llegaremos a trabajar con la sección de encabezados y también echaremos un vistazo a cómo podemos agregar nuestras imágenes responsive. 15. El encabezado responsivo e imágenes: Pasando a algún contenido, ahora vamos a añadir algo de HTML, y también algo de estilo en él a nuestro proyecto. Empezando desde arriba con la sección de cabecera. Entonces siguiendo después de esto es la sección que está justo debajo de la cual está la imagen, y también el texto superpuesto por encima de la imagen también. Esto también demostrará algunas técnicas útiles como centrar la sección sobre la imagen, y también cómo hacer que nuestra imagen sea sensible. Por responsive, no me refiero sólo a que esto se va a encoger más pequeño o más grande así. De hecho, también va a usar dos versiones de la misma imagen, una pequeña y también una grande, y sólo se descargará la imagen de tamaño apropiado. Echemos un vistazo a cómo hacer esto empezando por el encabezado en el cuerpo. Crear los elementos de encabezado HTML5 como el envoltorio. Entonces solo vamos a crear dos secciones, que es el título en la parte superior izquierda, y luego en la lista desordenada de la derecha. En primer lugar, el h1, y también podemos colocar en un elemento para enlazar esto a la página de inicio, si queremos reutilizar este encabezado en múltiples páginas. Vamos por el index.html, entonces voy a título texto dentro. A continuación, nuestros enlaces, podemos colocar estos dentro del <nav> elemento para mantener las cosas semánticas, la lista desordenada. El primer elemento de lista va a ser para iniciar sesión. Escribí el mío en un <a> elemento vacío. También puedes crear las páginas separadas para enlazar a cada una de estas dos. Si querías crear una “Página de inicio de sesión”, una “Página de registro”, y también una “Get in Touch Page” o un poco de práctica extra. Después enlaza a estas páginas dentro de la href, esa es la primera. El segundo ítem de lista, nuevamente, un enlace con el texto de registro. El tercero, éste es ponerse en contacto. Está bien. Dale a esto un guardado y podemos revisar en el navegador si esto está funcionando. Por supuesto, no se ve muy bien, pero lo arreglaremos con CSS en tan solo un poco. Después de la sección de encabezado, todo esto ya está completo. Podemos crear una nueva sección, y este será el envoltorio para la imagen y también la superposición de texto. Con el CSS, colocar en una clase de aplicar. Entonces esto contendrá dos secciones separadas. En primer lugar, tenemos la imagen, que es la imagen de fondo, y luego un div separado, que va a ser esta sección de texto justo aquí. El origen en la carpeta de imágenes, echemos un vistazo. Tenemos dos imágenes separadas dentro de aquí. Tenemos el college.jpeg y también el colegio-pequeño. Echaremos un vistazo a lo que esto va a hacer en tan solo un segundo. Pero por ahora señalaremos la fuente de imagen con la carpeta de imágenes, y luego al college-small.jpeg. A continuación, el div, y esto tendrá una clase de superposición de texto, que usaremos en un momento dentro de la hoja de estilos, y luego las dos secciones tecnológicas, la primera ahora está tomando aplicaciones en línea, que vamos a envolver en un <p> elemento. Observe un botón con el texto de aplicar aquí. Pasado al navegador, tenemos la imagen y también el texto justo debajo. Como es de esperar colocar esto por encima de la imagen, esto va a llevar algún trabajo CSS. Por lo que solo colocar esto debajo de la imagen está bien por ahora. Pero en lo que primero nos vamos a centrar es en cambiar entre nuestra imagen universitaria. Vamos a descargar el colegio-pequeño en un dispositivo móvil o en una pantalla pequeña. Entonces, una vez que lleguemos a cierto tamaño, vamos a cambiar al college.jpeg, que es una versión más grande. Si hacemos click en esto, podemos ver que el colegio-pequeño tiene 1280 píxeles de ancho, mientras que el college.jpeg es más grande, y tiene el ancho 1920 píxeles. ¿ Por qué querríamos incluir dos imágenes separadas? Bueno, la razón de esto es por el tiempo de descarga, y también por la calidad de imagen. Si piensas en tener un dispositivo móvil al visitar este proyecto en una pantalla pequeña, si tenemos una conexión de red móvil más lenta, no queremos estar descargando la imagen grande. En cambio sería mucho más rápido descargar esta versión más pequeña. Desde el otro lado, si estamos usando un monitor grande, si solo tuviéramos que incluir una imagen pequeña como esta, y luego se estira para ser de mayor tamaño, perdería mucha calidad. Para hacer frente a esto, vamos a hacer uso de un elemento HTML llamado imagen. Esto nos va a permitir proporcionar múltiples fuentes de imagen, y entonces el navegador puede decidir cuál es el más apropiado. Bueno, para hacer esto, vamos a incluir los elementos de imagen. Primero incluimos los elementos de imagen como envoltorio, aún necesitamos incluir la fuente de imagen, y luego justo encima de esto, vamos a usar el elemento fuente HTML. El elemento fuente no incluye una etiqueta de apertura y cierre. En cambio, pasamos en algunos atributos. El primero va a ser una consulta de medios. Una consulta de medios también es algo que vamos a utilizar dentro de nuestro CSS para aplicar diferentes estilos a diferentes tamaños de pantalla. Pero cuando se utiliza con la fuente, esto nos va a permitir proporcionar imágenes de diferentes tamaños para diferentes tipos de medios o dispositivos. Uno de los casos de uso más comunes para una consulta de medios es cambiar el contenido a un cierto ancho de pantalla. Si pasamos dentro de los corchetes, un ancho mínimo de pantalla de 1100 píxeles. Esta sección en particular sólo se aplicará cuando el navegador tenga más de 1100 píxeles de ancho. Entonces una vez que está por encima del tamaño, entonces podemos usar el atributo set de fuentes, proporciona esta ruta de archivo a nuestra imagen grande. Hay muchas condiciones de medios diferentes que podemos sumar. Podemos incluir el ancho máximo. Podemos comprobar la orientación del dispositivo para ver si es horizontal o vertical. Podemos comprobar la relación de píxeles de un monitor, y muchas otras cosas diferentes. Esto va a aplicar nuestra imagen más grande si el ancho del navegador supera los 1100 píxeles. Pero si el ancho del navegador está por debajo de este tamaño, va a caer de nuevo a este elemento de imagen justo aquí, que incluye la versión pequeña. Si quisiéramos, podríamos insertar tantos elementos de origen como quisiéramos. Podríamos configurar diferentes condiciones mediáticas, y también señalarlas a diferentes imágenes también. Sobre esto, nuestros dos tamaños de imagen están bien. Del mismo modo que una nota al margen, siempre necesitamos incluir este elemento de imagen. Esto se debe a que este es en última instancia el elemento que siempre se va a renderizar dentro del navegador. Todo lo que estamos haciendo es cambiar alrededor de las diferentes fuentes de imagen. Asegúrate de que esto siempre esté incluido. El modo en que podemos probar esto, si decimos esto, es refrescar el navegador y abrir las herramientas de desarrollador con el botón derecho, e inspeccionar, y dentro de la pestaña Red. Lo que tenemos que hacer primero aquí es reducir el navegador a un tamaño de pantalla pequeño que está por debajo de 1100 píxeles, luego refrescar. Desde aquí, tenemos descargada la versión pequeña de nuestra imagen, y ésta es de 361 kilobytes. Si hacemos esto más ancho y repasamos los 1100 píxeles, es un poco más grande. Recarga, y ahora en su lugar esto descargará nuestra versión más grande, que es el college-jpeg. Como cabría esperar, este es un tamaño de archivo más grande, por lo que es mejor descargar la imagen más pequeña en los dispositivos móviles más pequeños. 16. Estilo del encabezado: Ahora sabemos que esto está funcionando, podemos cerrar esto y pasar a nuestro estilo, así que dentro de nuestra hoja de estilos personalizada, que es el styles.css. Ya tenemos nuestra familia de fuentes descargada de Google Fonts, y podemos añadir esto dentro de la sección HTML. Subiré esto y luego quitaré el inicio. Lo que voy a hacer aquí es establecer la familia de fuentes sea un tamaño base de 10 píxeles. Ahora esto no quiere decir que yo quiera que el texto dentro del proyecto sea de los 10 píxeles. Esto sólo va a proporcionar un cálculo fácil, que veremos en tan solo un momento. A continuación, el color. Esto se aplicará a todos los textos. El valor RGB va a ser 62 para el rojo, 61 para el verde, y 61 para el azul. Consultar esto se ha aplicado bien. Ahora vemos nuestra diferencia, la fuente se ha aplicado. El color de fuente base no se ha aplicado a todos los enlaces. Pero arreglaremos esto en tan solo un segundo. A continuación, la sección de cabecera. El apartado de cabecera, haremos uso del tipo de display de flex. Vamos a cambiar alrededor de la dirección flex de fila y columna en función del tamaño de la pantalla. Lo que vamos a hacer en este video es encoger el navegador a una pantalla pequeña, y en la versión móvil, tal y como vemos aquí. Queremos que este contenido se muestre como una columna. Después aplicaremos una consulta de medios para cambiar la dirección del flex a ser fila. Pero por ahora, sólo nos vamos a quedar con la vista de pantalla pequeña. Establezca la dirección del flex para que sea columna. Después también alinear elementos en el centro, cuales se centrarán a esto de izquierda a derecha. El título lateral está envuelto en un encabezado de nivel uno. Entonces vamos así y cambiemos el cursor para que sea un puntero. Esto cambiará cada vez que pasemos por encima de esta sección. Después de esto, el tamaño de fuente y el valor de dos rems. Un rem es un tamaño relativo, y esto significa que crecerá más grande o más pequeño, dependiendo de la familia de fuentes base, que se configuró en el HTML. Dos rems significarán que esto es el doble del tamaño, por lo que este será de 20 píxeles. Si establecemos que esto sea un rem, esto sería entonces de 10 píxeles. Tener este tamaño base establecido para ser un buen número redondeado, hace que sea realmente fácil calcular el tamaño exacto de fuente que queremos. Por ejemplo, si quisiéramos que este tamaño fuera de 16 píxeles, podríamos establecer esto en 1.6 rems. El alternativo es que tenemos que esto sea de 16 píxeles. Entonces si tal vez quisiéramos que esto fuera de 18 píxeles aquí abajo, los cálculos serían un poco más complejos. Sólo mantengamos esto como 10. Este también necesita ser el tamaño de fuente, no la familia de fuentes, que ya estás establecido arriba. Ahora si guardamos esto, ahora todo se aplicará correctamente. A continuación, podemos llegar a trabajar en estos enlaces. Este es el elemento a. En primer lugar, la decoración del texto, que no es ninguna, y esto eliminará el subrayado de todos nuestros enlaces. También queremos que el color de enlace sea el mismo que este color justo aquí. Para ello, también necesitamos establecer el color. Podríamos copiar sobre este color y añadir esto dentro de aquí. O en su lugar podríamos heredar esto, y éste heredará el color de los padres, que es éste justo aquí. Refrescar. Esto también se aplica a todos los enlaces y también al encabezado de nivel 1, que también se envuelve en un enlace. Para cambiar también el equilibrio flotar sobre cualquiera de estos elementos, podemos agregar un estado de flotación. Entonces un y luego tú colon. Podemos añadir el estado de desplazamiento, que va a cambiar el color del texto cada vez que el cursor del ratón se desplace sobre esta sección. Puedes jugar con el color si quieres. Voy a ir por 104, 114 y luego 166. Bajando a los enlaces, si nos fijamos en la versión final, lo que aquí queremos hacer es quitar los puntos o las balas de nuestros ítems de la lista. También se coloca a través de la página y también hacen que el tamaño de la fuente sea un poco más grande. Desde el contenedor, que es la lista desordenada, la forma en que podemos eliminar estas balas es establecer el estilo de lista en ninguno. Para permitirnos centrar correctamente todos estos elementos, también podemos mover el valor predeterminado del navegador. Dentro de las herramientas de desarrollador, si hacemos click en el inspector y luego colocamos el cursor sobre la lista desordenada, podemos ver por encima de la izquierda tenemos esta sección verde la cual es relleno. Esto ha sido aplicado por el navegador o Macondo movió esto estableciendo el valor del relleno para ser cero. Ah, otra lista. Esto ahora se ha eliminado. A continuación, vamos a hacer que el tamaño de la fuente sea un poco más grande. Después podemos seleccionar los elementos de lista y lugares horizontalmente a través de la página. Para ello, configure el tipo de visualización para que sea flex. Por defecto, la dirección flex va a ser fila colocando estos elementos través de la página hasta los elementos de la lista. El tamaño de fuente de 16 píxeles, que podemos calcular rom en 1.6 rems y también para aplicar algún espacio entre cada uno de estos. Eso es un margen de cero en la parte superior e inferior, y luego 10 píxeles en la izquierda y la derecha. Esto es todo lo que necesitamos hacer para la sección de encabezado hasta que lleguemos a la pantalla más grande. Abajo a esta sección de imágenes y podemos apuntar la imagen con img. A continuación, establece el ancho de la imagen. Queremos 100 por ciento. Esto ahora asegurará que nuestra imagen no se estire más allá que al ancho del navegador desde antes cuando agregamos el HTML. Volvamos a esta sección. Damos a esto una clase de aplicar. Esta clase nos va a permitir seleccionar esta sección completa y utilizarlo como punto de referencia para centrar esta sección y justo debajo, y hacer esto. Esta es una clase, por lo que usamos el punto. Para hacer de esto un punto de referencia para nuestro texto, necesitamos establecer el tipo de posición para que sea relativo. Echaremos un vistazo a lo que esto hace en ella apenas un segundo. No deberíamos ver ninguna diferencia por el momento. Pero la diferencia se hará evidente cuando seleccionemos esta superposición de texto. Esta fue la clase que le damos a este apartado. Agarra esto. Después para que esto funcione, también establecemos un valor de posición para que esta sección sea absoluta. Si nos refrescamos, para que no se vea diferente por el momento. Pero lo que efectivamente hemos hecho aquí es sacar esta sección de superposición de texto del flujo del resto del contenido. Ahora necesitamos decirle al navegador exactamente de dónde queremos que se posicione esto. Podemos hacerlo agregando los valores superior, derecho, inferior e izquierdo en nuestra hoja de estilo. Lo que queremos hacer es posicionar este 50 por ciento desde la izquierda de la imagen y luego 50 por ciento desde arriba. El valor izquierdo del 50 por ciento y lo mismo para la parte superior. “ Refrescar”. Ahora llegamos a algún lugar, esto está casi en el centro de la imagen. El motivo por el que ambos estos valores del 50 por ciento se han aplicado desde la imagen es porque hemos establecido el tipo de posición para que sea relativo. Cuando establecemos una sección, así como ésta para que sea absoluta, cuando establecemos los valores para el posicionamiento, hará referencia a todos estos tamaños en el contenedor relativo más cercano. En nuestro caso, el contenedor relativo más cercano es el envoltorio de sección de imagen. Si no tuviéramos esto justo dentro de aquí, echemos un vistazo a lo que pasaría. “ Refrescar”. Ahora como no tenemos un contenedor relativo establecido nosotros mismos, en su lugar usará la sección de cuerpo como referencia. El valor izquierdo del 50 por ciento empujará esto por encima de la mitad del ancho del cuerpo, y luego 50 por ciento desde la parte superior. Pero su contenedor relativo es realmente importante. Como podemos ver aquí, el centrado aún no está del todo en medio. Podemos ver por qué mejor si abrimos las “ Herramientas de Desarrollador ”, haga clic en el “Inspector” y seleccione nuestra sección de superposición de texto. Podemos ver mejor con esta sección de superposición de texto resaltada cuando establecemos la posición en el uso de la parte superior y la izquierda. Esto posicionará este elemento desde la esquina superior izquierda. En lugar de referenciar esto desde arriba a la izquierda, queremos que este div sea referenciado desde el mismo centro. El modo en que podemos hacer esto es usar una propiedad de transformación CSS, lo que va a significar que podemos mover este elemento 50 por ciento del ancho hacia la izquierda y también subir en un 50 por ciento también, lo que efectivamente significa que nos movemos en el punto de referencia de arriba a la izquierda hacia el centro de este elemento. Para ello, configuramos la transformación CSS y luego hacemos uso de Traducir, que nos va a permitir mover la posición de cualquier elemento HTML. Después colocamos dentro de dos valores, que es el eje x, que está de izquierda a derecha, y luego el eje y, que es de arriba a abajo. Si establecemos el eje x para que sea negativo 50 por ciento y también el mismo para el eje y. Este “Refrescar. Ahora este div completo se ha transformado en el centro. El único que tenemos que hacer para equilibrar esto es ajustar el texto alineado para que esté en el centro. Podemos hacer esto y la envoltura, ahora eso se ve mucho mejor. Tan solo para recapitular, si aún pudieras asegurar cuando establecemos los valores de la izquierda y los valores superiores, desapareces estos desde el exterior de la imagen. Pero en lugar de utilizar el centro del elemento del punto de referencia, utiliza la esquina superior izquierda. Esto significa que el elemento todavía no aparece del todo en el centro de la imagen. Tenemos que mover manualmente esto en un 50 por ciento tanto en las direcciones verticales como también en las horizontales. Esto es todo el posicionamiento all setup. Lo que ahora vamos a hacer es establecer los colores y también el tamaño de la fuente. El tamaño de fuente de 20 píxeles, que es de dos rems. El fondo de RGBA, 40 para el rojo, 40 para el verde, 40 para el azul, y luego el cuarto valor es el canal Alfa. Esta es la opacidad de la CE a través del valor. Si establecemos que esto sea 0.7, esto será 70 por ciento transparente. “ Refrescar”. Este valor Alpha significa que nuestro fondo será ligeramente transparente. La imagen comenzará a mostrarse a través. Si pusiéramos esto como uno, esto sería totalmente opaco, lo que significa que no podíamos ver nada que pasara. El radio fronterizo nos va a dar unas bonitas esquinas redondeadas de tres píxeles, que se pueden ver en los cuatro lados. Después un poco de relleno para darte algo de espaciado dentro de dos rems en la parte superior e inferior, y luego 10 rems en la izquierda y la derecha. Por último, el color de fuente que voy a usar 195,191,191. El estilo final y la propiedad para este video va a ser este botón “Aplicar aquí. El elemento botón, para hacer de esto tanto la versión final, podemos quitar el color de fondo, agregar un borde, algunas esquinas redondeadas para que también coincida con esta sección de superposición. Entonces finalmente el estado de desplazamiento del botón, quita el fondo configurando esto para que sea ninguno el borde, el ancho de dos píxeles, luego el color del borde de RGB, 169, 252, 169, luego tres píxeles de borde radio, que va a ser una coincidencia para esta sección de superposición de texto y refrescar el navegador. Ya casi terminamos con esto. Tenemos el borde, pero sólo queremos asegurarnos de que el color del texto también esté coincidiendo y la forma en que podemos hacerlo es también establecer el color para que sea igual que la sección anterior, o también podemos heredar esto, igual que hicimos con el enlaces. Esto heredará ahora el color del padre. Por último, el estado de desplazamiento del botón, por lo que el ratón va a cambiar este color, y también al igual que la versión final, lo va a hacer un poco más grande cada vez que el usuario pase el cursor sobre. El modo en que podemos hacerlo es seleccionando el botón y el estado de desplazamiento. Podemos entonces modificar el color del borde para que sea un valor RGB de 220, 237, 255. Entonces de nuevo, podemos hacer uso de la propiedad transformada. En lugar de seleccionar translate, que usamos justo aquí, otro método que podemos utilizar es escalar el elemento. Esto significa que podemos hacer que los elementos sean más grandes o más pequeños. Por ejemplo, si queremos que sea exactamente igual, ésta sería una. No veo diferencia justo aquí. Si quisiéramos que fuera la mitad del tamaño, sería 0.5. Pero voy a hacer esto un poco más sutil. Pondré esto en 1.05. En el botón real también podemos configurar el cursor para que sea un puntero. Echemos un vistazo a esto. Tenemos un cursor, se está llevando a cabo la transformación. También estoy cambiando el color del borde. Ahora tenemos el contenido de la sección de encabezado todo en su lugar y también el estilo CSS para la vista de pantalla pequeña. Volveremos a esto más adelante y haremos algunos pequeños cambios para una vista más grande. Pero a continuación, vamos a seguir abajo con el proyecto y añadir algo más de contenido. 17. Sección de cursos populares: Hey, bienvenido de nuevo a esta siguiente sección. Vamos a seguir moviéndonos hacia abajo con nuestro proyecto y crear la sección de cuadrícula justo debajo de esta imagen de cabecera. Este es el que, si estiras esto, va a ser un diseño de cuadrícula con todas las secciones del popular curso. Esto hará uso del diseño de cuadrícula CSS y esto nos va a permitir proporcionar a todas las secciones lado a lado una brecha entre medias y también hacia abajo a la vista de pantalla pequeña. Esto se transformará para ser el ancho completo de la pantalla con la vista de pantalla más pequeña. También arreglaré este error de tipeo de antes también. En el HTML, esta sección se va a envolver en los elementos de sección. Después un rumbo de nivel 3, que va a ser el título de Cursos Populares. La clase para nuestro CSS va a ser curses-title. Entonces debajo de esto, una nueva sección div, que será el contenedor para todos nuestros cursos en el formato de estilo grilla. Entonces como actualmente estamos trabajando con la vista de pantalla pequeña, vamos a estar asegurándonos de que todos nuestros artículos estén apilados verticalmente. Después cambiaremos el diseño para que sea un estilo de cuadrícula. Este primer div va a ser el envoltorio para todos estos cursos. Entonces démosle una clase de cursos. Después un nuevo div para cada una de nuestras secciones cual contendrá la imagen y también el texto. Este va a tener una clase de grid-item. Ahora tenemos que hacer para cada uno de estos elementos de cuadrícula es seleccionar la imagen correcta y también colocar en el texto. Tu primero, este es el law.jpg. Se puede agregar todo el texto. Entonces debajo de esto, el elemento p para nuestro texto de ley. Para ahorrar un poco de mecanografía, puedes teclearlos si quieres, pero solo voy a duplicar esto para cada uno de nuestros artículos. El segundo es la imagen de la construcción, todo el texto, el texto a mostrar. Entonces el siguiente va a ser para nuestra ingeniería. El cuarto es para la ciencia. Este es uno justo aquí. El número 5 es el arquitecto. Entonces, por último, tenemos el negocio. Guardemos esto y veamos dónde estamos dentro del navegador. Refrescar. Entonces nos dieron derecho, construcción, ingeniería, ciencia, arquitecto, y negocios, y todas las imágenes correctamente enlazadas. Como cabría esperar, esto no se ve demasiado bien si estiramos el navegador, pero por ahora, sólo vamos a estar enfocados en este primer enfoque móvil. Pasado a la versión final. No necesitamos hacer mucho estilo para esta pequeña vista de pantalla, que las imágenes ya están estiradas para ser el ancho completo de la pantalla. Lo que sí tenemos que hacer es hacer más grande el tamaño de la fuente y también añadir un efecto de desplazamiento. Comencemos por seleccionar nuestro elemento de cuadrícula individual. Entonces podemos alinear el texto en el centro y hacer que el tamaño de la fuente sea más grande. Ahora en la parte inferior, botón inferior, tu rapero era el elemento de la cuadrícula. Seleccione el texto. Entonces puedes empujar esto hacia el centro y también establecer el tamaño de fuente para que sea 1.8rems. Bien, esto ahora se ve mejor. A continuación, aplicaremos el efecto hover. Cuando el ratón pasa sobre cada una de estas secciones. Para esto, podríamos aplicar muchos efectos diferentes, pero todo lo que voy a hacer es establecer el brillo y también la escala. Una vez más, aplicamos esto a la cuadrícula completa, que tiene la clase de grid-item. Tengo el efecto hover. Entonces podemos aplicar un filtro CSS donde vamos a ajustar el brillo. El brillo es un valor entre cero y uno. Entonces un cero. Esto va a hacer que la sección sea realmente oscura. Si establecemos esto para que sea uno, este es sólo el estado original. Tan solo para darle a esto un ligero cambio sutil, estableceremos esto en 0.9, haciéndolo un poco más oscuro cada vez que pasemos sobre estas imágenes. Además de esto, también una transformación donde estableceremos la escala para ser 1.01. Por último, el cursor de puntero por. Además, nuestra transformación también está funcionando si pasamos por encima de cualquiera de estas secciones. Tan solo para terminar esta sección, necesitamos trabajar con los cursos-título populares. Si nos desplazamos hacia arriba, esto estaba contenido en un encabezamiento de nivel 3. Vamos a agarrar esto, h3. Al igual que con otros tipos de encabezados, también tenemos algún margen predeterminado del navegador, que podemos eliminar estableciendo esto como cero. Si actualizamos, esto ahora elimina el margen de arriba e abajo. Por lo que ahora somos libres de agregar nuestro propio espaciado de 2rems en la parte superior e inferior y cero en la izquierda y la derecha. El text-align del centro, y también el tamaño de fuente. Eso también aumenta a ser 1.8rems. Bien. Podemos ver que el encabezamiento de nivel 3 es negrita por defecto. Si queremos, también podríamos establecer el font-weight para que sea normal. Esto eliminaría el efecto audaz. Bien. Esta es nuestra sección ahora completada para la vista móvil. Posteriormente, volveremos a esto y lo transformaremos en un diseño estilo cuadrícula con una vista más grande. Pero por ahora, todo esto está bien. Seguiremos en el siguiente con los tramos restantes. Entonces te veré en el siguiente video. 18. Contenido final HTML: Bajando por debajo de esta sección de cuadrícula que creaste en los videos anteriores. Vamos a agregar que el resto del contenido HTML que necesitamos para este proyecto en la versión final, igual que aquí. Esta es la sección deportiva, que va a tener la imagen a la izquierda y el texto a la derecha, y luego el área de pie en la parte inferior. Al igual que con las otras secciones, esto también será plenamente receptivo. Si reducimos esto a una pantalla móvil, el contenido se apilará verticalmente y también se colocará en la parte superior de la sección de pie de página. Este video, solo estaremos creando el contenido HTML y en el próximo video, añadiremos el estilo CSS para que esto se vea bien. Después de eso, agregaremos algunas consultas de medios para que esto se vea bien en la pantalla más grande. Volvamos a nuestro index.html y debajo de la última sección que creamos, creamos una sección más. Esto va a tener la clase de deportes. Esto es para la sección de deportes. Esto va a ser bastante sencillo. Simplemente tendrá un div en la parte superior el cual va a contener una imagen. Después una segunda que contendrá el texto. Al tener estas dos secciones a continuación, iba a usar el flexbox CSS para controlar el diseño en diferentes tamaños de pantalla. El primer div y luego el segundo div. El primero va a contener una imagen. En la carpeta de imágenes se ha proporcionado una imagen que necesitamos. Este es el volleyball.jpg y también el texto alt. Esto es todo lo que necesitamos para este primer apartado. Esto es bastante sencillo. la siguiente sección, este será un rumbo de Nivel 3. Con el texto de descubrir nuestras nuevas instalaciones deportivas. Si echamos un vistazo a la versión terminada, vemos si pasamos el cursor sobre la palabra aquí. Este va a ser un enlace a una página de instalaciones deportivas. No tenemos esta página, pero puedes crear si quieres y hacer de esto un enlace. Podemos envolver esta palabra dentro del elemento “a”. Coloca esto dentro y sigue dentro de nuestro h3. El texto fuera aquí. Ahora solo vincularemos esto de nuevo a nuestra página de inicio. Pasó al navegador y desplácese hacia abajo y ahora podemos ver nuestro nuevo contenido hacia abajo en la parte inferior. Por defecto, este tipo de diseño se ve bien en un dispositivo móvil porque la imagen está apilada encima del texto, por lo que no tienes demasiado trabajo que hacer en el CSS para esta sección. Pero al igual que la sección de cuadrícula anterior, también necesitamos aplicar algunos estilos diferentes. Pero esto cuando llegamos a una pantalla más grande. A continuación, el área de pie de página justo debajo de la sección deportiva, la h3, y este es el texto de buscar más. Entonces este área de pie de página solo contendrá una serie de enlaces, que podemos colocar justo debajo de esto y también colocaremos estos uno al lado de la vista más grande. Esto puede ir dentro de una lista desordenada y nuestro primer elemento de lista, hecho, todos los elementos de la lista se colocarán en un elemento de enlace. El primero es el texto de, tour virtual. Al igual que con estas instalaciones deportivas, también podrías crear todas estas páginas extra si quisieras. Te daré algo más de práctica creando nuevas páginas. Pero voy a simplemente copiar este elemento de la lista y pegar justo debajo. El segundo enlace es para descargar nuestra guía completa. Después de esto, éste fue, escuchar testimonios de estudiantes. El cuarto y último es, reservar una sesión informativa. Bien. Dale a esto un guardado y también el navegador, en la parte inferior, y por defecto, todos estos ítems van a estar en línea ya que ya hemos creado algunos CSS en los videos anteriores. Pero lo arreglaremos en el próximo video. Todo lo que tenemos que hacer para el último del HTML es crear esta sección de derechos de autor hacia abajo en la parte inferior. Podemos hacer esto en un simple elemento p. Sí necesitamos este texto de, colegio tecnológico. Pero si miramos la versión final, vemos este símbolo de copyright justo aquí. Esto es lo que se llama una entidad HTML. Una entidad HTML es un código corto que nos permite colocar en un símbolo dentro de nuestro archivo HTML. Si quieres ver más de estos símbolos los cuales están disponibles, hay un sitio web útil llamado unicode-table.com, y podemos buscar muchos tipos diferentes de símbolos que quieras, como emojis, podemos buscar flechas y todo de diferentes personajes que necesitamos en nuestros proyectos. Si necesitábamos una flecha, por ejemplo, podríamos buscar esto. Después podemos seleccionar el que quieras, y veremos de nuevo a la derecha tenemos algunos códigos diferentes que podemos agregar a nuestro proyecto. Esto es lo que necesitamos para nuestro HTML justo aquí, que es el ampersand y termina en punto y coma. El código particular que necesitamos para el símbolo de copyright es también comienza con el ampersand es simplemente la palabra copia seguida de un punto y coma. También nuestros proyectos, y podemos apenas ver esto hacia abajo en la parte inferior del pie de página. Este es ahora todo el contenido que necesitamos para este proyecto, y en el resto de los videos para esta sección. Nos estaremos centrando en el estilo y también acabamos de ver todas las reglas CSS, los dispositivos de diferentes tamaños. 19. CSS final en pantalla pequeña: Lo que tenemos hasta ahora es todo el contenido HTML en la pantalla. Hemos rematado las dos últimas secciones, que es esta sección deportiva justo aquí, y también el área de pie de página con los enlaces hacia abajo en la parte inferior. Este video va a estar enfocado en el estilo de estas dos nuevas secciones. Recuerda, la primera sección de la clase es deportiva, y ésta contiene la imagen y también el texto. Vamos a necesitar centrar el texto en el medio del div independientemente del tamaño de pantalla que esté usando. Para que esto sea más fácil, vamos a añadir una clase a esta sección, la envoltura. Este será el texto deportivo. Guarda esto. Pasado a nuestras hojas de estilo, lo primero que voy a hacer para esta sección es agregar un nuevo color de fondo, va a ser bastante sencillo. Yo sólo voy a añadir un color claro, que es eee. Pasado al navegador, esto es sólo un color gris claro que solo separará esto de mí otras secciones. Después la clase que acabamos de agregar, que era el sports-text, esto, necesitamos que el tipo de pantalla sea flex, lo que nos permitirá establecer la dirección del flex verticalmente y también horizontalmente. Esto permanecerá en el medio del div independientemente del tamaño de la pantalla. En primer lugar, sólo por contenido en el centro. Entonces también alinee los elementos en el centro también al tener ambas propiedades establecidas. Esto significa que si tenemos la dirección flex para ser fila o columna, el texto siempre estará centrado en medio de este div. Algún relleno para hacer esto un poco más grande de dos rems. Incluso con este espaciado extra, todavía vemos que el texto está centrado vertical y horizontalmente. Podemos hacer que este nivel 3 se dirija un poco más grande. Apliquemos esto sólo a la sección de deportes-texto. Agarra el encabezado de nivel 3 y aumenta el tamaño de fuente para ser 2.2 rems. Tan solo para enfatizar el enlace, ves que voy a hacer esta cursiva y para ello, podemos agarrar esta sección en particular. Este fue el enlace, justo aquí están la clase de cursiva. Entonces podemos agarrar esto en nuestro CSS. Esta era una clase, así que usamos el punto. Ahora lo que tenemos que hacer aquí, es establecer el estilo de fuente, darle a esto un valor de cursiva. Ahí vamos. Esto ya se ha aplicado. Esto es todo lo que tenemos que hacer para esta sección, es bastante sencillo. Ahora podemos bajar al área de pie de página. En primer lugar, agarra el elemento de pie de página, que es el envoltorio. Lo que vamos a escuchar aquí es alinear todo el texto en el centro de la sección. Podemos cambiar el color de fondo y también el color del texto también. Para empezar, el texto-alinear de centro. Bien, haremos que estos enlaces se apilen verticalmente en tan solo un momento, pero tendremos que aplicarlo a la lista desordenada. Antes de hacerlo, continuaremos con la sección de fondo, que va a ser un valor RGB de 62, 61, 61. Ahora no puedo ver el texto porque nuestro color de texto es ahora el mismo que este fondo que acabamos de establecer. Para compensar esto, establezca el color de esta sección que se aplicará al texto de ddd. Ahí vamos. También necesitamos algo de relleno hacia abajo en la parte inferior para darnos algo de espaciado. Agrega algo de valor de relleno en la parte inferior de un rem. A continuación, podemos seleccionar la lista desordenada de pie de página y asegurarnos de que todos los enlaces estén colocados verticalmente en la página. El pie de página es como la lista desordenada dentro. Todo lo que necesitamos hacer para esto es establecer el tipo de pantalla para que sea igual a flex. Por defecto, la dirección flex es fila, por lo que necesitamos cambiar esto para que sea una dirección flex de columna. Al igual que con la versión final, cambiaremos esto de nuevo a una dirección flex de fila en un video posterior. Estos van a través de la página en la vista más grande. Ahora sigamos con la vista de pantalla pequeña y añadamos un poco de espaciado entre cada uno de estos enlaces. A continuación, el tamaño de fuente de 1.8 rems. El listado desordenado también tendrá algún margen por defecto para que podamos eliminar esto. Podemos ver que tan pronto quitamos esto, esto ahora ha vuelto a subir más cerca de nuestro título. Si solo comentamos esto y nos refrescamos, podemos ver que hay más espaciado aplicado arriba en la parte superior. Pero el espacio entre cada uno de estos elementos, necesitamos apuntar al elemento de la lista. Nuevamente, dentro de la sección de pie de página, este relleno sólo se aplica a esta área. Recuerda, no queremos que esto se aplique a todos los ítems de nuestra lista ya que también los tenemos en el área de cabecera. Para esto, algo de relleno está bien. Para que esto se aplique a la parte superior e inferior, agregaremos en 1.6 rems para el primer valor, y luego 0 a la izquierda y a la derecha. Ahí vamos. Lo último que tenemos que hacer para esta sección es aumentar el tamaño de fuente del área de copyright. Dentro del index.html. Abajo en la parte inferior, aplicamos esto dentro del elemento P. Para el pie de página, recorte los elementos p y el tamaño de fuente. Ve por 1.6 rems. Todo esto ya está terminado para la vista de pantalla móvil. En los próximos videos, comenzaremos a echar un vistazo a cómo podemos aplicar consultas de medios a ambos lados, lo que hará que nuestro proyecto se vea bien en todos los dispositivos de pantalla. 20. Consultas de medios CSS y estilo final: Para ayudarnos a agregar un poco de estilo y diseño adicionales para nuestra vista más grande, vamos a hacer uso de algunas consultas de medios CSS. Una consulta de medios es una forma para que podamos aplicar diferentes propiedades CSS, con diferentes tipos de medios. Con pantallas, podemos especificar a qué tamaños de pantalla queremos que esto aplique. Si quieres que solo se apliquen a un paisaje o a una orientación vertical, si la resolución de pantalla es de alta densidad, y muchas otras opciones. Para hacer esto dentro de nuestra hoja de estilo, usamos la regla @media, y luego vamos a sumar nuestras condiciones dentro de los corchetes. Una común es aplicar únicamente estas reglas CSS si el ancho de la pantalla es de un tamaño mínimo o máximo. Al igual que miramos con las imágenes responsive, podríamos establecer algo así como el ancho mínimo para que sea un cierto valor como 900 píxeles, y dentro de estas llaves, todo lo que necesitamos hacer es escribir nuestro código CSS exactamente como hemos previamente hecho. Entonces usando este ejemplo, todo el CSS dentro de aquí solo se aplicará cuando el ancho mínimo del navegador sea de 900 píxeles de ancho. Como se mencionó, se podrían hacer las cosas también, que sin duda son anchura máxima. Podríamos establecer la orientación. Esto es más para dispositivos móviles o portátiles, pero podríamos comprobar si el dispositivo está girado en vertical u horizontal. Contamos con una búsqueda en línea de consultas de medios CSS, si quieres saber más sobre los diferentes tipos disponibles. Con este proyecto, me voy a quedar con el ancho de pantalla, ya que esto es realmente general y se aplica a muchos casos de uso diferentes. Cualquier cosa que actualmente tengamos arriba justo aquí, esto siempre se aplicará a la vista de pantalla pequeña. Entonces lo que vamos a hacer es anular esto para la pantalla más grande. Partiendo de lo más alto de nuestro proyecto, nuevo, simplemente escribimos este CSS como haríamos normalmente. Para este encabezado, si lo hacemos un poco más ancho, queremos que este icono o este logotipo aparezca sobre la izquierda. Después se vincularon a la derecha. Para ello, si volvemos a subir a nuestra sección de encabezado original, ya hemos configurado el tipo de visualización para que sea flex. No necesitamos volver a configurar esto ya que ya lo hemos especificado aquí. Pero lo que sí tenemos que hacer es anular cualquiera de estos valores que se quiere cambiar. Una de las cosas que sí necesitamos cambio es esta dirección flex. lugar de estar en la dirección de columna como tenemos aquí, necesitamos establecer esto para que sea una fila. Bajar a nuestra consulta de medios. Hagámoslo primero. El sentido flex, la fila. Esto ahora entra en vigor ya que hemos alcanzado el tamaño de pantalla de más de 900 píxeles. Disminuyendo esto hacia abajo, podemos ver una vez que vamos por debajo de 900, ahora se invierte de nuevo a nuestra dirección flex original. Para agregar nuestro espaciado en el medio, podemos establecer la propiedad justify content y usar un valor llamado espacio entre. Esto sólo distribuirá todo el espacio en blanco disponible entre todos los elementos. Esto funciona sin importar cuántos elementos tengamos en nuestro encabezado. Si tuviéramos tres elementos diferentes, todo el espaciado se aplicaría por igual entre las tres de estas secciones. El último que hay que hacer para este encabezado, si miramos hacia arriba a la derecha tenemos algún espaciado a la derecha de nuestros enlaces y también necesitamos hacer coincidir esto en el lado izquierdo. Vuelve a subir hasta la cima. Desplázate hacia abajo hasta nuestros ítems de lista y podemos ver que hemos añadido 10 píxeles de margen a la izquierda y a la derecha, Tu saldo está arriba, baja a nuestra sección de cabecera y luego podemos establecer estos 10 píxeles de margen para que se apliquen solo en el lado izquierdo. Guardar, y pasar al navegador. Esto ahora coincide en ambos lados. A continuación, hasta la sección de superposición, no tenemos mucho que hacer para esto. Ya configuramos una imagen responsive en segundo plano. Todo lo que voy a hacer es el tamaño de la fuente y hacer que esta sección sea un poco más grande. Estas son la clase de superposición de texto. El tamaño de la fuente. Vamos a darle una oportunidad a 2.2 rems. Hazlo un poco más grande, 3.4. También podemos aumentar el valor [inaudible] para agregar algo más de espacio en el interior. Vayamos por ocho rems. Desplazándose hacia abajo hasta nuestra sección Cursos Populares, lo que tenemos que hacer para esto es establecer el tipo de visualización CSS para que sea igual a la cuadrícula y esto nos dará este diseño de estilo de cuadrícula que vemos en la versión final. Para ello, primero necesitamos seleccionar los elementos del padre para todos nuestros elementos de cuadrícula. Esto cuenta con esta clase de cursos. Entonces cada sección individual tiene la clase de elemento de cuadrícula. En primer lugar, vamos a los padres, que tiene la clase de cursos, y luego configuramos el tipo de pantalla para que sea cuadrícula. Si recargamos el navegador, por el momento no vemos ningún cambio. Esto se debe a que necesitamos decirle al navegador exactamente cuántas columnas y filas queremos usar para crear nuestra cuadrícula para las columnas. Necesitamos agregar la plantilla de cuadrícula, propiedad columnas. El número de valores que agregamos dentro de aquí determina cuántas columnas tenemos a través de nuestra página. En la versión final se tienen tres columnas diferentes. Lo que podemos hacer es establecer tres tamaños separados, como 200 píxeles, 100 píxeles, y 300. Refrescar. Podemos ver aquí para nuestra primera columna, tenemos el valor de 200 píxeles de ancho. Tenemos entonces 100, y luego 300, que acabamos de fijar aquí. También podríamos hacer que estos tengan el mismo valor, o en su lugar para hacer las cosas aún más fáciles, podemos hacer uso de una función de repetición. Entonces podemos pasar en dos valores. El primero es el número de columnas que desea crear y luego el segundo valor es el ancho de cada una de nuestras columnas. Si queremos que cada una de estas columnas tenga una cantidad igual de ancho, podemos establecer que esto sea 1fr. La unidad fraccional cuando se usa con la cuadrícula significa que calculará automáticamente las fotos de ancho y se asegurará de que todas nuestras tres columnas sean iguales. Refresca y esto ahora entra en vigor. Podemos hacer exactamente lo mismo para las filas de plantillas de cuadrícula y podemos establecer la altura exacta que queremos para cada una de estas secciones. Pero no necesitamos hacer esto porque si solo agregamos las columnas como tenemos aquí, cada vez que agreguemos una nueva sección o un nuevo elemento de cuadrícula, esto entonces simplemente fluirá automáticamente a la siguiente línea. Si quieres algo de espacio entre cada uno de estos elementos de cuadrícula, lo que también podemos agregar es el hueco de cuadrícula. Establezca esto en cualquier valor CSS como dos rems. Esta brecha de cuadrícula sólo aparecerá entre cada uno de estos elementos de cuadrícula. No aplica a la izquierda y a la derecha ni a la parte superior e inferior. Si querías aplicar algún espaciado alrededor del borde exterior, sí necesitamos aplicar algún margen o relleno. Esto es lo que voy a hacer en el fondo. Dice algo de relleno, justo al fondo de estos elementos y lo mantendremos igual de dos rems refrescar. Siguiente al estilo para cada uno de estos cursos, y cada uno de estos tiene la clase de elemento de cuadrícula. Para ello, coloque un borde alrededor de cada uno de un píxel, una línea sólida, y el color del gris claro. Podemos redondear las esquinas con algún radio fronterizo. Tan solo un valor pequeño está bien, así que intentemos tres píxeles. Esto se ve bien. De lo que queremos hacer, podemos ver el radio fronterizo en la parte inferior, pero arriba en la parte superior, también queremos hacer coincidir las esquinas redondeadas para esta imagen de fondo. Donde podemos hacer esto es volver a seleccionar el elemento de cuadrícula y luego aplicar a todas las imágenes de esta sección. Podemos establecer las propiedades individuales del radio del borde, y podemos agregar cuatro valores individuales desde la parte superior izquierda, la parte superior derecha, la parte inferior derecha, y la parte inferior izquierda. En primer lugar, la parte superior izquierda de tres píxeles. Tres píxeles en la parte superior derecha, y no queremos que se redondeen la parte inferior derecha o la inferior izquierda, así que establecí los dos últimos valores para que sean cero. Incluso esto redondearía las esquinas en los cuatro lados de nuestro artículo de rejilla. Después de esto tenemos la sección deportiva justo debajo, y para ello, vamos a hacer uso de la dirección flex. Pegue la imagen junto a este texto. Si pasamos a nuestro índice o html, y desplazamos hacia abajo es sección completa tiene la clase de deportes, establece el tiempo de visualización para que sea flex. Recuerda, cuando estamos haciendo uso del flex box, la dirección de flex predeterminada va a ser fila. No necesitamos incluir esto, ya que esto es predeterminado, esto colocará automáticamente nuestro contenido en una fila. Si encogemos el navegador, podemos ver que este tipo de visualización de flex solo se aplicará en esta vista de pantalla grande. Mira de cerca hacia abajo en la parte inferior de la imagen, podemos ver esta línea blanca por aquí. Esto es algo que puede ser [inaudible] si apenas estás empezando a construir sitios web. También puede ser difícil de diagnosticar, ya que el espaciado no se aplica con ningún margen o relleno. De hecho, en realidad he escrito una entrada de blog sobre esto, y si vamos a mi sitio web, podemos ver exactamente por qué se aplicará este espaciado en blanco. Esta imagen también tiene el mismo problema de espacio en blanco abajo en la parte inferior. Esto sucede porque por defecto se dice que los elementos de una imagen están en línea. Los elementos en línea aparecerán por defecto en toda la página. Si configuramos 10 imágenes diferentes, éstas tratarían de ocupar todo el espacio disponible en la misma fila y luego bajarían a la siguiente línea. Lo contrario es un elemento de nivel de bloque, y esto aparecerá automáticamente en una nueva línea. El motivo por el que el navegador agrega este espacio en blanco en la parte inferior de los elementos en línea se debe a que muchos elementos en línea, como un span, también pueden contener texto. Si consideramos este texto, que se ve justo aquí con la letra P y también la G cae por debajo de la línea base del resto del texto, y es esta sección inferior la que se llama descendiente, que es la razón por qué el navegador agregará algo de espacio en ella hacia abajo en la parte inferior. Si el navegador no agregaba espacio en la parte inferior de los elementos, la parte inferior de este P y también la G, tal vez cortaron. Pero en nuestro caso estamos usando una imagen en lugar de texto, por lo que no necesitamos permitir este espacio en blanco en la parte inferior. Hay un par de maneras diferentes que podemos evitar estos, y una de las formas más simples es usar establecer el tipo de visualización para que sea bloque. Esto anulará el tipo en línea que tenemos por defecto, refrescar, y ahora significa que el navegador no permite el espacio en blanco en la parte inferior de este elemento. Esto es sólo algo para tener cuidado cuando ves algún espacio en blanco en la parte inferior de una imagen. De vuelta a la consulta de medios y justo debajo de la sección de deportes, necesitamos asegurarnos de que tanto la imagen como también el área de texto tengan igual cantidad de espacio o para ser más específicos, una cantidad igual de ancho. Para ello, podemos agarrar nuestra sección deportiva, y el flex box tiene una propiedad flex la cual nos permitirá aplicar una cantidad igual de ancho a ambos elementos secundarios. En primer lugar, agarra la envoltura, que es la sección deportiva, y luego cualquier div que inmediatamente siga estos elementos, establece el valor flex para que sea igual a uno, y dado que este valor flex de uno se aplicará a ti ambos de nuestros div infantiles, por lo que tanto éste como también éste, ahora deberías tener una cantidad igual de espacio. Si solo establecemos el 1er div tener el valor flex de uno y establecemos el 2do div para tener un valor flex de 2, el 2do div intentaría ocupar el doble del espacio disponible que el 1er div, pero como tenemos estos como valores iguales, no deben reflejarse dentro del navegador. Pero aún así vemos que la imagen es un poco más pequeña que esta sección sobre la derecha. Vamos a entrar en las herramientas de desarrollador. Selecciona esta sección justo aquí, y la razón por la que esta área verde alrededor del exterior de este div. Selecciona esto y más al área calculada, podemos ver tenemos 20 píxeles de relleno aplicados a los cuatro lados. Para que esto sea igual, podríamos quitar este relleno para la pantalla grande. Sección tiene la clase de textos deportivos, por lo que podría eliminar esto dentro de la consulta de medios o podríamos desplazarnos hasta la sección de texto deportivo original, y sólo podríamos aplicar este relleno en la parte superior e inferior. Obtén el valor de cero a la izquierda y a la derecha, refresca, y esto ahora se ve mucho más igual. Veamos cómo se ve esto en la pantalla pequeña. Esto todavía se ve bien ya que ya hemos centrado la detección usando el flex box. El último tramo a cuidar es el área del pie. Esto va a ser bastante sencillo. Solo necesitamos agarrar las secciones del pie de página en la lista ordenada y cambiar la dirección del flex para que sea fila. Ese pie de página, lista desordenada, direcciones flex para ser igual a fila, y agregar el espacio es igualmente a través de la página, haremos uso del contenido de justificación. Selecciona el espacio de manera uniforme, y ahí vamos. También podemos simplemente comprobar que esto se ve bien en la pantalla pequeña. Desde arriba, aún tenemos todas las propiedades CSS originales que aplicamos en los primeros videos. Ahora, si estiramos el navegador a más de 900 píxeles de ancho, nuestro contenido ahora se ajustará para ajustarse a la pantalla más grande. Tenemos contenido lado a lado, tenemos una sección de cuadrícula para nuestros cursos, algunos texto más grande y también algo de espacio adicional en también. Espero que hayas disfrutado construyendo un proyecto responsive, haciendo uso de las consultas de medios CSS, imágenes receptivas, y también tamaños relativos para nuestros textos. Tenemos un proyecto más para pasar a donde vamos a hacer uso de un marco. Te veré en la próxima sección. 21. introducción a Bootstrap y configuración: Hola a todos, y bienvenidos de nuevo a Aprender HTML y CSS por Construir 3 Proyectos Reales. Enhorabuena por llegar al tercer proyecto. Por ahora hemos construido un sitio web estático y también un sitio web totalmente receptivo. A continuación, queremos pasar a un proyecto hotelero, que se va a construir con el popular marco de Twitter Bootstrap. Esto es un vistazo a lo que queremos construir. Es de nuevo un sitio web de respuesta completa, lo que significa que podemos encogerlo y se ve bien en diferentes dispositivos. Se va a incluir un carrusel deslizante mostrando diferentes imágenes. Habrá un cuadro de búsqueda y navegación en la zona superior. También incluiremos los menús desplegables en la sección diversa a continuación. Voy a mostrar cómo podemos construir un sitio web de aspecto agradable como este realmente rápido y realmente fácil usando Bootstrap. Lo primero que tenemos que hacer es si vamos a getbootstrap.com. Echaremos un vistazo a través del sitio web, pero primero solo haremos clic en el botón “Descargar Bootstrap” y el enlace Bootstrap de la izquierda ahí. Echemos un vistazo a través de la página web mientras se está descargando. En la sección de inicio hay varios bits de información, plantillas que puedes usar para empezar rápidamente. Te muestra todas las estructuras de archivos y carpetas para las diferentes descargas que puedes usar y también la plantilla básica. Esta va a ser la plantilla que estaremos usando para nuestra página de índice. Más abajo hay más ejemplos y plantillas pequeñas que puedes usar para empezar de forma muy rápida. De vuelta en la parte superior, también está la sección CSS. Ahora el CSS te da una visión general de todos los diferentes componentes disponibles. Podemos mirar tablas, formularios, botones, por ejemplo, y si solo haces clic en uno de esos, te muestra cómo hacer un botón en Bootstrap. Es muy sencillo y todo el CSS ya está precompilado. Al instante, obtendrás un sitio web de buen aspecto. En la sección de componentes, podemos mirar los glificonos. Bootstrap viene listo con todos estos iconos disponibles para usar sin costo adicional. También hay ejemplos de barras de navegación y los diferentes componentes como etiquetas y encabezados. Vamos a ver el código de muestra. Mucho es bastante similar a lo que ya hemos aprendido. Basta con aplicar las clases de Bootstrap para vincularlo al CSS. Echaremos un vistazo al JavaScript incluido. Ahora el JavaScript proporciona todo tipo de efectos. Hay cosas como transiciones, y lo que vamos a estar viendo es el carrusel. Estaremos usando el siguiente código para agregar el carrusel a nuestra página web. Bootstrap ya debería haber descargado. Si vas a las descargas, lo descomprimimos. Si solo copiamos la carpeta completa, y si volvemos al proyecto, y pegamos eso en el proyecto y vamos a renombrar eso. Llamaremos a esta carpeta MyHotel, y si abrimos la carpeta, tendremos que arrastrar nuestras imágenes hacia allí. Ya debiste haber descargado las imágenes que necesitas para este proyecto. Si no, vuelve atrás y descárgalos ahora. Al ser la mayoría de los archivos y carpetas configurados para el proyecto Bootstrap, solo necesitamos agregar la página de índice. Si entras a tu editor de texto y necesitaremos archivar y abrir carpeta, y en nuestro escritorio, tenemos los proyectos. Iré a MyHotel, y lo primero que tenemos que hacer es ir a Archivo y Nuevo, y lo guardaremos como nuestra página de índice, index.html. Volvamos al sitio web de Bootstrap, y si volvemos a la sección de inicio, si nos desplazamos hacia abajo a la plantilla básica, y solo vamos a copiar eso, y luego pegaremos eso en nuestra página de índice. Como puedes ver, si solo echamos un vistazo arriba y abajo, incluye toda la misma estructura que hemos incluido en los dos primeros sitios web, y hay un enlace a las hojas de estilo Bootstrap. También está la etiqueta de la ventana gráfica para la capacidad de respuesta. Lo primero que haremos es cambiar el título de la página y lo llamaremos MyHotel. El enlace al CSS Bootstrap ya está incluido, por lo que aún no necesitamos hacer nada con eso. También se incluye por defecto el HTML5 Shiv, que hemos incluido en los dos primeros proyectos, así que eso está todo en su lugar. Simplemente echaremos un vistazo a eso en la vista previa. Ese es el framework Bootstrap toda la configuración y listo para ir. A continuación, veremos agregar la barra de navegación. 22. Añadir la barra de navegación responsivo: Hola a todos, y bienvenidos de nuevo. Tenemos nuestro proyecto Bootstrap todo configurado ahora. Lo que queremos hacer es empezar a trabajar en la barra de navegación superior ahí. Si solo empezamos por eliminar el encabezado Hola, mundo. Nos dirigimos de nuevo a getbootstrap.com. Si seleccionamos la sección Componentes en la parte superior, necesitamos mirar hacia abajo la lista y encontrar la sección Navbar. Lo que vamos a hacer es copiar el estándar Navbar ahí. Si copia el codificador ahí, lo pegaré en la parte superior de la sección del cuerpo. Lo primero que queremos hacer es que sólo vamos a cambiar el contenedor de fluido solo al contenedor estándar. Eliminaré los comentarios también, y como pueden ver, Bootstrap proporciona unos comentarios al final de cada cierre ahí, para que podamos ver exactamente dónde estamos. Entonces lo primero que quiero hacer, si nos fijamos en nuestro ejemplo, necesitamos poner nuestro nombre, MyHotel ahí dentro y empezar cuatro enlaces en la parte superior. En la actualidad la Marca es el texto de marcador de posición. Entonces cambiaremos eso a MyHotel. Los cuatro enlaces en la parte superior, lo que tenemos que hacer es si buscamos la lista desordenada, que está ahí, y los elementos individuales de lista que hay ahí. El primero, si cambiamos el texto del enlace a “ESTANCIA CON NOSOTROS”. Entonces el segundo enlace va a ser “RESTAURANTES”. Si consulta nuestra vista previa y eso se ve muy bien. Te darás cuenta de que ahí hay una navegación desplegable. Nosotros queremos deshacernos de eso por este ejemplo. Entonces lo que vamos a hacer es si buscamos la lista con la clase de desplegable y solo vamos a eliminar el, solo busco el elemento cerrar en lista ahí, antes de las últimas listas desordenadas. Entonces si seleccionamos eso y dejamos esa sección, lo que vamos a hacer es que vamos a copiar el ítem de la lista y lo pegamos en dos ocasiones. Está bien, está bastante bien. Cambiaremos el texto. El siguiente quiere ser “INSTALACIONES DE SPA”. El último quiere ser el enlace, “BODAS”. Yo quiero separar un poco esto para que podamos verlo con más claridad. Por lo que a continuación tenemos la forma. Esta sección de formulario es el cuadro de búsqueda allí. Se puede ver que está el tipo de entrada de texto, que es donde ponemos el texto de búsqueda. También está el botón Enviar que utilizamos en el primer proyecto. Después vemos listas desordenadas en el lado derecho, que tiene la clase derecha Navbar. Si tan solo estiramos la página más ancha, veremos que el flujo es el correcto. En pantallas más pequeñas caerán a la posición de abajo. Nuevamente, cambiaremos el nombre de nuestros enlaces. Por lo que el enlace que se muestra a la izquierda, vamos a localizar en la lista desordenada, el primer elemento de lista. El primer enlace, si nos fijamos en nuestro proyecto final va a ser “CONTÁCTANOS”. Queremos cambiar los textos desplegables. Va a cambiar eso a “DESCUBRE”. Consulta nuestra vista previa. Está bien, eso se ve genial. Nuestro siguiente es cambiar los nombres, los elementos de la lista están en el menú desplegable. Tenemos que encontrar el primer ítem de lista el cual comienza con acción, que justo ahí, y queremos cambiar el nuestro por el enlace “ALREDORES NATURALES”, y luego “DONDE VISITAR”, “TOMAR UN TOUR”. Por último, la sección “CORPORATIVO”. De acuerdo, tal todos nuestros artículos de lista en su lugar. A continuación necesitamos poner ahí la pequeña imagen del teléfono y vender nuestro proyecto. Entonces lo hacemos volviendo a la página web bootstrap.com. Vamos a la sección Componente y nos desplazamos hacia abajo y miramos los iconos de glifo. Lo que tenemos que hacer es encontrar los ejemplos. Si hace clic en el código de muestra ahí, y queremos colocarlo justo antes del texto CONTÁCTANOS. Pongamos eso en una nueva línea y quién paseando el ejemplo. Si revisamos nuestra página web antes, es una lupa, ese es sólo el ejemplo en el que hemos utilizado en el sitio web. Si localizamos el teléfono, que estoy queriendo usar. Eso es gliphicon, glificon-auricular. Entonces si volvemos a nuestra clase, es glyphicon, glyphicon search. Por lo que sólo necesitamos cambiar la búsqueda a los auriculares. Consulta nuestra vista previa. Ahí vamos. Ahí hay una foto del teléfono en su lugar. Entonces esa es nuestra barra de navegación terminada. Se ve genial listo para usar debido a todo el CSS Bootstrap, que ya está preestablecido, podemos anular cualquiera de los estilos Preset, pero lo dejaremos como está por ahora. A continuación, veremos el Carrusel. 23. Incluye el carrusel deslizante y el área de marketing: Bienvenido de nuevo. En el último video, terminamos la barra de navegación. A continuación, vamos a empezar a trabajar hacia abajo en nuestra página web e incluir el control deslizante. Si volvemos al getbootstrap.com, necesitamos seleccionar la sección de JavaScript. En el menú de la derecha, si solo buscamos el carrusel en nuestro texto, hasta el ejemplo del carrusel. En primer lugar, si copiamos el código, y luego debajo de nuestro tipo de navegación de cierre, simplemente lo pegaremos y miraremos nuestra vista previa. No se ve mucho ahora, pero vamos a cambiar el CSS y vamos a añadir algunas imágenes para que eso se vea mejor. Empecemos agregando nuestras imágenes. Si bajamos al envoltorio para diapositivas, lo que necesitamos hacer es encontrarnos en la fuente de imagen ahí, camino a nuestras imágenes. En la carpeta de imágenes, las dos imágenes que vamos a utilizar son la entrada y la piscina. Seleccionamos las imágenes de la piscina. Simplemente utilizaremos el texto de la imagen de la piscina. En el segundo div de abajo, en la fuente de imagen, haremos exactamente lo mismo. En la carpeta de imágenes, éste va a ser el entrance.jpg. Cambiaremos el alt a la imagen de entrada, que va a quitar los puntos, y luego colocar el texto para poder poner una leyenda en la imagen, pero no necesitamos eso. Además, tenemos círculos libres ahí para indicar imágenes libres. Sólo estamos usando dos imágenes en este ejemplo, así que vamos a cambiar eso con los elementos de la lista. En la sección de indicadores ahí, hay tres elementos de lista diferentes, solo eliminaremos el tercero. Eso cambiará eso a dos indicadores ahí. Parece que está funcionando bien. Hemos hecho clic en las flechas, y se puede ver que podemos cambiar la imagen, y eso está funcionando bien. Una cosa más que quiero mostrarles es, si nos encogemos a una vista móvil, en realidad se puede ver que el menú cae a una caja. Eso hace que se vea mucho más ordenado y compacto en vistas móviles. Tenemos que rodear todo el slider en un contenedor bootstrap. Tenemos que darle a eso una clase div igual al contenedor, y acabaremos de cerrar eso. Sólo voy a copiar el div de cierre. Pondremos eso al final de la página. También había un contenedor que utilizamos para la sección de navegación allá arriba. Volveremos a arrancar el contenedor. Todo el contenido de bootstrap necesita estar dentro de ese contenedor. Simplemente pondremos algunos comentarios en. Este va a ser el carrusel, y va a ser el final del carrusel. Este es el div de cierre para el contenedor. Dejemos que nuestro deslizador termine. Si volvemos al sitio web de getbootstrap, y si volvemos a la sección de inicio. Cuando en la sección de abajo el carrusel aquí, si entramos en la sección de inicio de bootstrap y nos desplazamos hacia abajo a los ejemplos, lo que queremos es el carrusel. Si entramos en ese ejemplo y hacemos click derecho y ver la fuente de la página, lo que tenemos que hacer es, debajo del número está el carrusel. Debajo del carrusel, copiaremos las tres columnas de texto debajo del carrusel. Volveremos a nuestro editor de textos. Debajo del div carrusel de cierre, vamos a pegar eso en. Simplemente tomaremos un botín en nuestro avance. Simplemente vamos a quitar estas tres imágenes circulares. Si miramos la sección de imágenes en las tres imágenes, ahí vamos. En primer lugar, cambiaremos los tres encabezamientos diferentes ahí en las etiquetas H2. Los haremos igual que nuestros proyectos terminados. El primero será, Nunca muy lejos. El segundo tag H2 es, Visitante frecuente. El tercero es, Habitaciones a tu gusto. Cambiaremos el texto, así que el primero es, Nunca muy lejos. En medio de las etiquetas P, queremos cambiar ese párrafo a, Con más de 150 ubicaciones en todo el mundo, nunca estás lejos de nosotros. El segundo párrafo va a ser, Únete a mi club hotelero para fantásticos ahorros y recompensas de lealtad. El tercer párrafo es, Los paquetes están disponibles para adaptarse a cualquier gusto y presupuesto. Llame a nuestro amistoso equipo para discutir. Ahora, vamos a revisar ese en nuestro adelanto. A continuación, queremos cambiar los tres botones de la parte inferior. Si notas en el proyecto terminado, tienen un fondo azul. Nos dirigimos de nuevo al getbootstrap, vuelta a la sección CSS. Si buscamos la sección de botones a la derecha, notarás que estamos usando el botón predeterminado. Si miramos hacia atrás en la página de índice, veremos la clase y es button-default, que está justo en la parte superior de ahí. Lo que queremos es el botón primario, por lo que necesitamos cambiarlo a botón primario. Eso cambiaremos en los tres botones. Eso lo comprobaremos en la vista previa. Está bien. Justo lo que queremos. También necesitamos cambiar el texto del botón, por lo que revisamos los proyectos terminados. Necesitamos cambiar la sección de detalles de la vista. El primero va a ser localizaciones, segundo es unirse a nuestro club, y el tercero va a tener el nombre de los detalles de la vista, por lo que sólo vamos a mantener eso tal como está y vamos a revisar los cambios. Eso ha funcionado bien. Todos los textos al minuto se flotan hacia el lado izquierdo. Queremos que esté centralizado en los tres divs. Hacemos eso por clase [inaudible] a la fila. Simplemente escribimos en text-center, y eso hace que todo esté bien centrado. Acabo de terminar con esta sección. Si te unes a nosotros en el siguiente video, empezaremos a mirar las featurettes a continuación. Nos vemos ahí. 24. Terminar con el área destacada y el pie de página: Hola a todos, bienvenidos de nuevo. En el último video miramos agregar el carrusel y también agregamos los tres botones de abajo, por lo que vamos a terminar este sitio web sumando las featurettes y también la sección de fotos en la parte inferior. Entonces si volvemos a la página web getboostrap.com en la sección de inicio, vamos a usar el mismo ejemplo que usamos para el carrusel, que es el ejemplo del carrusel. Si haces click derecho en “Ver Fuente”, vamos a copiar la siguiente sección, la que copiamos la última vez así que si localizamos el inicio del comentario featurettes, y luego vamos todo el camino abajo más allá del final de las featurettes y también copiaremos en el pie de página. No necesitamos copiar en el último contenedor porque ya tenemos eso en nuestra página web, así que copie eso, y luego necesitamos ir justo debajo la última fila ahí arriba del contenedor de cierre, y pegamos eso en. Por lo que todos los contenidos ahora en su lugar en la página web ahí. Antes de ir más lejos, solo quiero hablar de la cuadrícula responsive en bootstrap. Te darás cuenta de que hay varias clases como col-md-7 y cinco, lo que son es que son el número de columnas. Si notas en la primera featurette, el tamaño de la imagen es una cuadrícula de cinco columnas, y el texto que queda de ella es una cuadrícula de siete columnas. Entonces es una cuadrícula de 12 columnas que estamos usando, por lo que las siete de la izquierda y las cinco es el ancho completo, y si miramos la última sección que hicimos en el último video, las tres partes iguales se dividen en cuatro columnas cada una. Es así como diseñamos las cosas en Bootstrap, puedes hacer que las cosas sean más estrechas o más anchas cambiando el número de columnas en la cuadrícula. Por lo que cambiaré a nuestra página web terminada, podamos ver qué escribir. Entonces primero queremos empezar con el rubro, así que si localizamos el encabezado featurette y eliminamos la primera sección de encabezamiento featurette, y llamaremos a eso paquetes de boda, y luego la sección span después, vamos a cámbiate eso a, hecho a medida para que te convenga. Después veremos las etiquetas de párrafo, que justo está ahí, y solo incluiremos el texto de la página web final ahí. Solo estoy tratando de copiar y pegar eso. Revisaremos nuestra vista previa, a ver que todo está bien. A continuación pondremos la imagen ahí, y si cambiamos la ubicación de la imagen, y estamos todos en la carpeta Imágenes, y en realidad déjame simplemente cambiar la fuente de datos en eso. Entonces images/wedding.jpg para la primera, cambiaremos también la segunda imagen. Entonces las imágenes carpeta y vamos a añadir la imagen restaurant.jpg, y la tercera imagen, de nuevo, eliminar la fuente de datos, y la tercera imagen es la spa.jpg. De acuerdo esas son todas las imágenes en su lugar, solo necesitamos cambiar el texto ahora. Entonces esa es la primera sección, y la media, copia de seguridad de vista previa, y solo copiamos el texto ahí dentro, lo pondremos en la sección de párrafos. Entonces para el rubro, es cena de primera clase, y cambiaremos la vista por ti mismo parte en las etiquetas de span como cuidan chefs de clase mundial, y luego la tercera y última, solo copiaré en el fotografía ahí, y vamos a cambiar el rumbo. Así que descubre nuestras instalaciones de spa, y luego, nunca querrás irte. Cuales son los únicos previos en nuestro durmiente. Está bien así que pasamos a peinar estos en un minuto, solo queremos que el texto sea un poco más grande. En primer lugar, acabaremos de terminar el área de pie de página, así que solo cambiaremos el texto ahí, y cambiaremos eso a 2015, My Hotel. Para agregar los estilos para el texto ahí, la forma más preferida de hacerlo en Bootstrap es anulando estamos creando tu CSS personalizado. Entonces si volvemos a la barra lateral y si entramos en Archivo, Nuevo, voy a crear una nueva hoja de estilos. Entonces lo guardaremos de inmediato, y lo llamaremos style.css, y lo querremos colocar en la carpeta CSS del tema bootstrap. Entonces vamos a guardar eso, y luego volvemos a nuestra página de índice, y si volvemos a la parte superior, queremos incluir nuestro propio CSS justo debajo del tablero de bootstrap, así que lo anula. Entonces cambiamos el comentario a CSS personalizado, y también está en la carpeta CSS. Basta con cambiar el nombre a style.css. Entonces si volvemos a nuestro style.css, lo primero que queremos hacer es que queremos aumentar el tamaño de la fuente. Entonces si volvemos a la página de índice y encontramos la necesidad de intersección para el featurette, así que ese es el primero, y luego el texto, el comedor de primera clase tiene una clase de encabezamiento featurette. Entonces solo copiaremos eso, y en nuestros estilos, y pegamos eso en. Tan solo quiero agregar un punto delante de ahí si su clase. Probaremos el tamaño de fuente, lo intentaremos con 4ems. De acuerdo se ve mejor, y hemos empezado con un poco de relleno en la parte superior, solo para empujar un poco el texto hacia abajo, y vamos a poner eso en cinco por ciento, sólo un poco más, ponerlo en ocho. Está bien, eso se ve mejor. Te darás cuenta de lo mucho más rápido y fácil que es construir un sitio web usando un framework como Bootstrap, y siéntete libre de personalizar este sitio web o cualquier otro tanto como quieras usando el archivo CSS personalizado, pero lo haremos dejar el sitio web en eso, ahora tenemos un sitio web totalmente receptivo y un gran aspecto. Entonces gracias por unirse a nosotros, y ese es el fin del proyecto de feria. 25. Gracias, ¿y ahora qué?: Enhorabuena por terminar este curso. Espero que hayas aprendido mucho sobre HTML, CSS, y diseño web en general. Si aprenderás a construir un sitio web personal para un hobby o un sitio web para tu negocio, ahora debes tener las habilidades requeridas para completar esto. O si estabas buscando una nueva carrera, ahora deberías tener una buena base sobre la que construir. Si sí quieres seguir aprendiendo, ahora te recomiendo pasar a JavaScript y jQuery. Entonces posiblemente un lenguaje del lado del servidor como PHP. También es útil familiarizarse con un sistema de gestión de contenidos para usar en tu sitio web como WordPress o Drupal. Una vez más, gracias por tomar este curso, por favor deje una reseña. Realmente ayudaría. Espero que me acompañen en un curso en el futuro. 26. ¡Sígueme en Skillshare!: Enhorabuena enorme 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. Entonces, gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.