1. introducción a Fundamentos de diseño web responsivo: HTML5 CSS3 Bootstrap: Hola ahí. Mi nombre es Daniel Scotts. Juntos vamos a aprender a construir sitios web receptivos. Construiremos modernos sitios web profesionales que se vean bien en el móvil, en la tableta y en el escritorio. Construiremos para sitios juntos. Este sencillo sitio web del restaurante, este sitio web de reparación de bicicletas un poco más avanzado. este sitio web de cartera receptiva, y hay sitio web bootstrap para mi compañía de yogurt prototipo. Ahora, vas a aprender todo lo que necesitas para crear un sitio web, empezando en tu primera página, hasta subirlo a internet. Vamos a utilizar la herramienta de diseño de sitios web más popular y sorprendentemente gratuita del mundo llamada Visual Studio Code. Hay archivos de ejercicios descargables para que puedas seguir conmigo y cada video. Al final de cada video también, guardaré donde estoy hasta, para que en caso de que te pierdas o algo no esté del todo bien, puedas copiar tus archivos, pero mis archivos, es una manera bonita, fácil de asegurarte de que no te pierdas. Cubriremos todas las cosas buenas como cómo crear tu propio [inaudible] desde cero usando algún JavaScript básico y jQuery. Aprende a trabajar con imágenes e iconos sensibles, además de imágenes de fondo de pantalla completa de lujo y probablemente gradientes uno a muchos. Aprenderemos a crear fuentes, y a elegir grandes fuentes para tu sitio web. Aprenderemos a trabajar con fuentes Bootstrap, configuraremos directamente tu propio nombre de dominio y hosting y cómo subirlo en vivo a internet para que otras personas puedan ver tu sitio. A lo largo del curso, puse algunos proyectos de clase divertidos para que puedas practicar todo lo que estás aprendiendo en el curso. Al final de este curso, vas a tener una muy buena comprensión de los temas importantes de diseño web como HTML5, CSS3, flexbox, diseño responsive Bootstrap. Si eso todo suena un poco aterrador y un poco elegante, no te preocupes, este curso está dirigido a principiantes completos. No necesitas experiencia en diseño web. No necesitas haber codificado una sola línea en toda tu vida. Aquí vamos a empezar justo al principio y a trabajar paso a paso. ¿ Quién soy yo? Mi nombre es Daniel Scotts y no siendo diseñador web desde hace unos 15 años. También soy un instructor galardonado durante los últimos dos años seguidos. Uno, un Premio Mx Masters en la masiva conferencia Adobe MAX. También tengo gafas con borde y una camiseta cool. Estoy bastante seguro de que la combinación de justicia por sí misma debería hacerme calificar, tal vez. Si finalmente estás listo para actualizarte, apúntate a los más geniales, y construyamos sitios web receptivos juntos. 2. Cómo está estructurado este curso de diseño web: Hola allá, bienvenidos al curso. Este video quiero hablar de cómo se estructura este curso. Por lo que se rompe en cinco partes, comenzará por el principio con sólo una introducción básica real a HTML y CSS. Entonces iniciaremos nuestro primer proyecto. Por lo que la fase uno, introducción rápida. La segunda fase construirá este sitio web. Entonces, sacaremos tipo de introducción básica de HTML y CSS y sintonizaremos este sitio web aquí. Simplemente simpático simple para empezar. La tercera cosa que haremos es crear esta página web de ciclos de reglas. Ahora este sitio web está un poco más avanzado. Digamos que es HTML y CSS intermedio. Cubrimos lo básico y el primero, y luego nos metemos en eso un poco más de detalle aquí.La tercera parte es que vamos a hacer que nuestro sitio sea sensible. Simplemente significa que se va a ajustar para los diferentes navegadores. Por lo que los teléfonos móviles, tabletas, y sitios web. Es éste de aquí. Es un sitio de portafolio, bonito, sencillo. Aquí se puede ver que se ajusta para diferentes anchuras de navegador. Entonces el final del curso está mirando un marco. El marco que vamos a estar utilizando en este curso se llama Bootstrap. Es súper popular y solo significa que podemos tomar todo el conocimiento que conocemos hasta ahora y condensarlo y usarlo realmente rápidamente para construir sitios. Vamos a introducir cosas como este jQuery Slider aquí. Imágenes se deslizan a través, hay este cursor en la parte inferior es fácil móvil Nev. Es una gran adición para cualquiera que esté construyendo sitios web. Un marco como Bootstrap va a hacer que vaya súper rápido, hacer que se vea súper profesional sin que tengas que hacer todo el levantamiento pesado. Espero que estén listos. Es hora de empezar, y en realidad empezar a construir sitios web. Te veré en el curso. 3. Qué descargar para el curso de diseño web: Está bien. Hablemos de lo que necesitas descargar y lo que necesitas instalar. Descargar es sencillo. Hay algunos expedientes de ejercicios. Habrá un enlace en la página aquí en algún lugar para descargar esos, y serán todo lo que usaremos, como imágenes y garrapatas que usaremos a lo largo del curso. Descarga esos. Dentro de ese mismo archivo exacto que descargas, habrá algo ahí dentro llamado los Archivos Completados. Habrá una carpeta dentro de ella. Lo que son es al final de cada video, lo que hago es ahorrar donde estoy hasta. Si estás siguiendo y no obtienes los mismos resultados, solo puedes mirar el número de video y luego echar un vistazo a los archivos completados y solo igualar mi versión con tu versión e ir. A menudo es solo tal vez un error ortográfico o de sintaxis pero puedes comparar el tuyo que está funcionando o el mío que está funcionando con el tuyo que puede que no lo sea. Están dentro de los Ficheros de Ejercicio y Archivos Completados están en conjunto. Otra cosa de la que hablar es de qué descargar. Estaremos probando nuestros sitios web en Google Chrome. Asegúrate de descargar eso. Google Chrome es, con mucho, el navegador más popular en este momento. Descarga eso y haremos todas nuestras pruebas dentro de eso. Es como Firefox, o Safari, o Microsoft Edge, o Internet Explorer pero es el más popular. Acude a la página web de Google Chrome y te mostrarán cómo instalarlo. El otro elemento a instalar es un editor de código. Vamos a estar usando Visual Studio Code. ¿ Por qué? Hay muchos editores de código diferentes. No necesitas específicamente este pero lo necesitarás para este curso en particular. Porque básicamente un sitio web es una mezcla de HTML, CSS, y JavaScript, y puedes usar cualquier editor de código para hacer eso. Vamos a estar usando Visual Studio Code, no Visual Studio. Ese es un producto más grande. Necesitas el código de Visual Studio específico. Es gratis. Está hecho por Microsoft. Sólo para que lo sepas sin embargo, estoy usando eso principalmente porque es el más popular en este momento. Si estás buscando conseguir trabajo después de este curso, probablemente vas a terminar en un estudio donde están usando Visual Studio Code. Bien debes estar aprendiendo el mismo. Las técnicas y herramientas que vas a aprender en este curso también van a aplicar lo mismo si estás usando un editor de código diferente. Digamos que estás usando Atom, o Sublime, o Bloc de notas ++. Todos son realmente buenos editores pero terminan haciendo lo mismo. Los atajos son diferentes, tienen diferentes formas de trabajar, pero la salida es la misma. Entonces no te sudes si aprendes todo esto en Visual Studio Code y luego tienes que ir a usar otro editor. Todo aplicará encantador. Pero sí, instala Chrome, instala código de Visual Studio. Ambos son gratuitos y lo veré en el siguiente video. 4. Crear y probar nuestra primera página web HTML: Hola a todos. Este video vamos a hacer nuestra primera página web. No va a ser realmente emocionante, va a decir “Hola Mundo”, y en un navegador, te va a mostrar “Hola Mundo”. El curso se vuelve mucho más emocionante, pero necesitamos hacer lo básico, y eso incluye cómo configurar una carpeta para nuestro sitio web, cómo crear nuestra primera página HTML, y cómo probarla en un navegador. Hagámoslo. Por lo que tenemos instalado Visual Studio Code, y lo tenemos abierto frente a nosotros. Ahora el tuyo se verá ligeramente diferente al mío. Tenemos esta pestaña de Bienvenida abierta por la parte superior, podrías tener otra pestaña abierta diciendo Nuevos documentos de lanzamiento o algo similar, y también la tuya podría verse ligeramente diferente porque estoy usando un Mac a lo largo de este curso y podrías estar usando un PC. No te preocupes funcionan igual. Apenas algunos de los atajos son ligeramente diferentes, pero los cubriremos durante el curso. Puede ser un poco intimidante esta pantalla de bienvenida y todas las demás pestañas en la parte superior. Así que solo para que todo sea cristalino y fácil, cierra cualquier pestaña a lo largo de la parte superior golpeando esta pequeña cruz aquí, haz clic una vez en todas ellas hasta que termines con esta aplicación agradable, limpia y clara. La otra diferencia que podrías tener también es a lo largo del costado aquí tiene un montón de pestañas. Eso va a ser de ayuda, pero por el momento, si haces clic en la parte superior una vez, dos veces desaparece, todo está bonito y limpio, y vamos a ir a crear nuestro primer archivo. Para crear nuestra primera página web, necesita entrar en una carpeta. No puede estar solo tirado en tu carpeta de documentos o en tu escritorio, tiene que ir dentro de una carpeta y todo para ese sitio web necesita ir en esa misma carpeta. Entonces para crear esa carpeta, vamos a Archivo y vamos a Abrir, lo cual es raro. Acude a Archivo, Abrir y dice: “¿Qué Carpeta quieres Abrir?” Todavía no lo hemos creado. Aguanta. Entonces lo que hacemos es en un Mac, hay un botón New Folder en un PC, es un poco diferente, lo estás buscando, es un ícono de New Folder [inaudible] amarillo con un poco de signo de exclamación en la esquina, y decide dónde lo vas a poner. Para este curso, lo voy a poner en mi Escritorio. Mira lo limpio que está mi Escritorio, lo limpio totalmente para este curso. Pero de todos modos, Desktop, New Folder, ¿cómo lo vamos a llamar? Lo vamos a llamar Proyecto 0. Haga clic en “Crear”, y esa es mi carpeta. Yo estoy dentro del Proyecto 0, y voy a dar clic en “OPE"N. algunas veces hay que seleccionarlo y luego hacer clic en “Abrir”. Ya sabes que es correcto cuando estás en la parte superior y dice: “Bienvenido al Proyecto 0" a lo largo de la parte superior. Por un lado aquí, debería tener esta opción, Proyecto 0. Todavía no hay nada dentro de ella. Pero estas pantallas de bienvenida vuelven. Vete. Entonces tenemos la carpeta y todo lo que está en mi Escritorio, es que tengo una carpeta sin nada en ella. Entonces solo estamos haciendo una carpeta de esa manera. Realmente no importa cómo crees esa carpeta siempre y cuando exista, y le has apuntado VS Code. Ahora necesitamos crear nuestra página. Vamos a crear nuestra primera página HTML. Vamos a Archivo, vamos a Nuevo Archivo. Vamos a guardarlo, Archivar, Guardar, y vamos a ponerlo. Bueno, automáticamente debe saber a dónde ir. Se va al Proyecto 0, y éste se va a llamar helloworld.html. No le des ningún espacio, una palabra y tiene a be.html, vamos a dar click en “Guardar”, y justo aquí en nuestro editor, vamos a escribir Hola Mundo. Vamos a Archivo, Guardar. Voy a dejar de mostrarte el largo camino. Entonces mi Mac, es Command S. En una PC, es Control S. Voy a decir sólo Save de ahora en adelante. Ahora tenemos que averiguar cómo previsualizar esta cosa porque lo hemos hecho, has hecho un Sitio Web, uno minúsculo. Pero, ¿cómo lo comprobamos? Necesitamos usar ese Google Chrome. Así que ve en abierto Google Chrome. Entonces he abierto Google Chrome y vamos a ir a Archivo, y luego ir a Abrir Archivo, y luego vamos a encontrar nuestro Proyecto 0. Está en mi Escritorio. Ahí está Proyecto 0, dentro del Hello World. Antes de dar clic en Abrir, recuerda este momento, si has hecho un Sitio Web antes, no es tan emocionante, pero si este es tu primero, prepárate para este momento, este momento de gloria, ¿listo? Eso es todo. Ese es tu sitio web Hello World. Pero mira a tu alrededor, recuerda este momento. Esto es lo primero que hiciste alguna vez.Recuerdo cuando hice mis primeros Sitios Web, fue un poco más emocionante. El mundo Hola, el tuyo también lo será, y te mostraré el Sitio Web que hice mi primera un poco más tarde. Creo que tal vez si te lo muestro aquí, podrías [inaudible] apagado. De todos modos. Fue malo, pero fue hace 20 años. Entonces, recapitulemos el proceso de nuevo en el código VS. Aquí vamos a poner signo de exclamación, luego golpear “Archivo”, “Guardar”, prometo no mostrarte largo camino, lo hice. Después vuelve a Google Chrome y no se ha actualizado. Por lo que siempre que hagas un guardado o hagas un cambio en VS Code, pulsa este pequeño botón Refrescar, o el botón Recargar. Si no lo puedes ver ahí arriba, estará en alguna parte. ¿Dónde está Reload? Ni siquiera sé el largo camino para Recargar ahí está. Entonces si recargas, ahí está. exclamación. Entonces ese es el proceso. Haz la codificación en VS Code, revisa tu Sitio Web en Chrome para asegurarte de que funciona bien, no está roto, y haces un poco de baile porque has hecho un Sitio Web, si el tuyo se rompió durante este proceso. Es un mal comienzo. Está bien. Lo que probablemente pase es que te olvides de agregar the.html, si eso sucede. Acabas de tener algo llamado Hola Mundo no el HTML. Esto te va a pasar. Estás como, “Por supuesto que lo hice. Seguí a Dan”. Posteriormente en este curso, si eres nuevo, eso te pasará. Entonces todo lo que haces es por aquí en cualquiera de ellos. Esto puede ser un poco confuso, este Explorador. Esto dice, ustedes toda la página que tienen abierta por aquí. Esto te indica cada archivo posible de tu carpeta. Ahora el problema con eso es que solo tienes uno y cada uno, así que simplemente se repiten. De todos modos. Puedes hacer doble clic aquí. No. Puedes hacer clic derecho en él e ir a la que dice Renombrar, y para decir en realidad era missing.html o lo escribiste mal, solo tienes que escribirlo, pulsa Return. Entonces ve y prueba ese archivo en Chrome, y estarías bien. Eso no es realmente Diseño Web. Es el inicio. Pasemos al siguiente video donde en realidad empezamos a hacer algún HTML adecuado y algún CSS adecuado. 5. Qué es HTML5 y CSS3 en diseño web: Hola ahí. Este video es todo sobre aprender los fundamentos absolutos de lo que es HTML, versus lo que es CSS. Puedes saltarte esto si tienes un entendimiento básico. Aquí vamos a hacer algunas cosas realmente simples, vamos a añadir algunas etiquetas HTML. Se verá así, y luego los pararemos usando CSS, y se verá así, aquí vamos. Ah, eso es mejor, no peor. Pero ¿te das la idea? Vamos a hacer HTML y luego hacer que se vea bonito usando CSS. Saltemos al video, y aprendamos cómo. Para empezar, vamos a escribir primero nuestro HTML. Por lo que esta palabra “Hola mundo”, no es HTML, es solo un texto llano viejo que escribimos, borra eso. Cuando escribimos HTML, necesitamos seguir alguna sintaxis. Entonces vamos a poner en algo llamado encabezamiento, y en este caso el encabezamiento 1, el encabezamiento más importante de un sitio web, y un HTML utiliza la abreviatura de h1. Ahora no podemos simplemente escribir h1, necesitamos envolverlo en corchetes angulares. Por lo tanto, abran los corchetes angulares, <h1> y luego cierran Se puede ver aquí hizo un par de cosas. Escribimos nuestro, ponemos los corchetes a ambos lados, y notarás que el código VS, automáticamente se pone en esta etiqueta de cierre extra. Entonces así funciona HTML. Es una etiqueta de envoltura. Es una etiqueta que va alrededor del principio, y el final y todo en el medio. Este es mi rumbo, encabezando uno parejo. Siempre y cuando haya de un lado, del otro lado los envueltos entre corchetes angulares, el cierre, notarás tiene esta inclinación hacia adelante, y eso le dice al navegador que este es mi rumbo. Vamos a guardarlo, vamos a comprobarlo en Google Chrome. Ahí se puede ver, refrescar. Tengo mi rumbo 1, es grande, es audaz, es Times New Roman, es negro. Esa es una configuración predeterminada para un encabezamiento 1. Añadamos un par de otras etiquetas HTML. Aquí dentro, vamos a regresar. Voy a escribir corchetes angulares, cerrarlos, verás que pone en la sintaxis extra. Si no lo hace, por la razón que sea puedes simplemente escribirlo. Entonces voy a empezar a escribir, realmente quiere ayudar. Gracias, código VS. Sólo escribamos el encabezamiento 2. Esas son un par de etiquetas HTML básicas crudas. Otro realmente común es una etiqueta p, por lo que corchetes angulares , , ciérrelo, y es texto corporal. Probablemente tendrás solo uno en tu página, pero tendrás muchos textos de párrafo diferentes porque es el texto del cuerpo. Guárdalo, compruébalo en nuestro navegador. Se puede ver que estos son el estilo predeterminado para esas tres etiquetas. Para anular el estilo, por eso entra CSS. Entonces lo que tenemos que hacer es nuestro HTML es como las cosas en la página, y nuestro CSS es el estilo de esas cosas en la página. Para que esto funcione, pongamos un par de devoluciones en la parte superior aquí, y tipo de etiqueta llamada estilo. Ciérrelo, y de nuevo pone en la etiqueta de cierre, y lo que acabo de hacer ahí, es que puse algunas devoluciones. Las devoluciones no significan nada en código, puedes tener un millón de ellas. No se mostrará en la página. Simplemente uso muchas devoluciones cuando estoy peinando cosas solo para conseguir alguna ruptura visual de diferentes partes en lugar de tratar de juntarlas todas. Porque lo que notarás aquí abajo, es que si elimino esto, solo lo estoy mencionando. En la misma línea, si lo guardo, te darás cuenta aquí en Chrome, es exactamente lo mismo. Entonces no importa si pones retornos aquí un no, excepto eso, parece difícil trabajar. En esta etiqueta de estilo, aquí es donde va a ir nuestro CSS. CSS tiene un tipo diferente de sintaxis, mientras que HTML tenía un corchetes de ángulo de cierre de apertura, y una inclinación hacia adelante allí. El CSS, haces cosas como esta. Dices: “Quiero el h1”. A esto se le llama el selector. Estoy seleccionando el h1. Después lo pones en un espacio, y luego pones los corchetes rizados en lugar de los corchetes angulares. Voy a poner un retorno en mis corchetes rizados, sólo para separarlo, no por ninguna buena razón más que parece un poco más fácil comunicarse contigo. Aquí, voy a hacer un poco de estilo h1, y vamos a empezar con el color. Tenemos que deletrearlo a la manera americana. Color, y después de esto, esta es la propiedad, así que selector, estoy seleccionando el h1, quiero agregarle el color de la propiedad. Tiene que terminar con dos puntos, y luego eliges un color, está fuera por defecto ahí dentro, solo voy a poner un espacio y escribir rojo, y al final de CSS, tenemos que tener un punto y coma. Tirantes rizados, colon, punto y coma, esa es la sintaxis más o menos para todo nuestro CSS bastante simple. Guárdalo, y veamos si funciona. [ inaudible] en el navegador, y refrescar. Mira que h1 está estilizado. Ahora sé que esto no es una cantidad enorme lo que estamos haciendo aquí, pero estoy emocionado. Yo estoy emocionado por ti. Recuerdo aprender estas cosas cuando estaba en revelación. Hagamos otra cosa. Voy a poner un retorno aquí. Vamos al grupo CSS. Queremos hacerle algunas cosas a la h1, siempre y cuando esté dentro de estas llaves rizadas, podemos escribir algo así como fuente. Voy a poner en estilo de fuente. Puedes ver este código realmente quiere ayudarte a sugerir cosas colgando como tamaño, estilo, display. Voy a usar el estilo. Ahora estoy usando mi ratón en lugar de escribirlo. Esa es solo una de las pequeñas cosas útiles que puedes hacer con código VS o puedes usar tus teclas de flecha en tu teclado. Se puede ver la pequeña línea azul moviéndose, puedo ir a allá y, vuelvo en mi teclado. Tenemos casi todo, así que tenemos nuestra propiedad. Ahí está el colon, tenemos nuestro valor real, que es cursiva. Lo que va al final, lo tienes, punto y coma. Vamos a golpear guardar, vamos a ver qué hace. Vamos a golpear refresco. Es cursiva y es roja y es un h1. Brillante. Entonces voy a decir un ejercicio de clase ahora. Quiero que cambies este h1 para que sea un tamaño de fuente de un 100 pixels, o px. Me gustaría que lo pausaras ahora mismo, ve a apretar el botón y quiero que veas si puedes hacer eso. Tamaño de fuente a 100 pixels, dale una oportunidad, te daré una mano en un segundo. Pausa, ve. Puede o no haber pausado. Es posible que lo haya hecho funcionar o no. A ver si me has seguido. Entonces tamaño de fuente, aquí vamos, vamos a colon, luego ponemos un 100, y lo que la gente suele olvidar es que necesitas el px. Utilizamos píxeles cuando estamos tratando con fuentes en este momento, y lo que va al final, punto y coma. Guárdalo, de nuevo aquí, refresca, gigante h1. Marquemos juntos el h2, y luego pondré otro pequeño ejercicio. Entonces h1, ahora pongo un par de retornos aquí, llaves, y puedes separarlos usando estos selector. Los corchetes rizados, y todo va en el medio que quieres hacerle a ese selector en particular. En este caso, vamos a hacer un color de azul, punto y coma, y vamos a hacer un tamaño de fuente de 50 píxeles. Dale una oportunidad a eso ahora, y voy a ver un ejercicio verbal. Quiero que intentes hacer la etiqueta p. Todo por ti mismo, quiero que lo hagas verde, y me gusta que tengas un tamaño de fuente de 20 pixels? Dale una pausa ahora, mira cómo vas y pausas. ¿ Cómo fue eso? Espero que lo hayas hecho bien, sigámoslo juntos. Etiqueta P, tirantes rizados, color verde. Ahí hay algunos greens diferentes. Verde-amarillo, ese es mi uno, punto y coma, y vamos a poner en un tamaño de fuente de 20 píxeles. punto y coma, guardar, volver a aquí, refrescar. Mira todo eso. Cosas buenas. Eso es sólo una introducción a lo que es HTML, y cómo se ve la sintaxis. Estos son estos tipos de aquí abajo, y el estilo de ellos. Hablamos de selectores, yo uso las palabras de anualidad aquí, que se vuelva un poco más natural para ti. Selector, esa es la propiedad, ese es el valor de esa propiedad. Eso es lo básico de los sitios web. Simplemente vamos a expandirnos en eso. Construiremos unas cajas para meter estas cosas. Empezaremos a hacer algunos bits y piezas interactivas, pero sí, esos son los fundamentos de HTML, y CSS. Saltemos al siguiente video. 6. Qué es encabezad vs. cuerpo vs. etiqueta html en una página de diseño web: Muy bien, es hora de hacer un sitio web adecuado real. el momento en que hemos puesto algunas etiquetas HTML y algunas CSS básicas, pero eso no es todo lo que necesitamos. Necesitamos algunos otros bits y piezas como el tipo doc, la etiqueta de cabeza, la etiqueta de cuerpo. En este video vamos a resolver cómo agregarlos rápidamente y lo que hacen todos. Lo primero es que esta página que hemos hecho, este helloworld HTML es que tiene lo básico en ella, pero le falta un trozo de elementos para convertirla en una página web oficial. Cerrémoslo y miremos esos. Ciérrala, hagamos una nueva página, así que archiva nueva, y vamos a guardarla, y a ésta se le va a llamar comprensión. Pongamos un guión y pongamos bodyhtmlhead. Asegúrese de que al final usted add.HTML. Al final de la fue no sabe lo que estás haciendo. Otra cosa a notar en este punto es que no se pueden usar espacios o no se deben usar espacios. Necesitas usar guiones o guiones bajos, no importa cuál. Yo uso guiones y vamos a golpear guardar. Cuando estés nombrando cosas, trata de no usar cosas como $ signos o ampersand. Basta con usar números y letras. Para hacer de esta una página web oficial, necesita un par de cosas. Necesita saber que estamos lidiando con una página HTML por lo que es algo llamado el DOCTYPE. es un DOCTYPE de HTML, entonces necesitamos establecer que es un documento HTML que se establece en el idioma del inglés. De acuerdo cierra eso y probablemente haya otras cinco o seis líneas que necesitamos agregar para hacer oficial esta cosa. No escribimos eso. Había un atajo fácil porque es algo tan consistente y repetible que todo el mundo necesita hacer, Vs code usa algo llamado emmet, no te preocupes que emmet la palabra, pero es un poco de código insinuando que realmente te ayuda a ir rápido. En lugar de escribir todas las cosas que necesitamos para hacer una página web oficial, escribimos un signo de exclamación y presionamos retorno en el teclado. Eso es todo lo oficial que necesitamos para hacer esta página HTML legítima, ahí está nuestro DOCTYPE, ahí está el idioma inglés. Después tiene algo llamado la cabeza y el cuerpo, y luego todo está envuelto en esta etiqueta HTML. Ahora, ¿qué son todas estas cosas? El doctype sólo nos dice que es HTML. Este de aquí, si hago clic aquí, HTML, verás que hay un envoltorio correspondiente al final aquí, y si todo el sitio web está dentro de esa etiqueta HTML. Al igual que teníamos la h1 antes recuerdan que teníamos h1, y había un comienzo y un cierre y todo por dentro era el h1. Es lo mismo con todas las etiquetas HTML. Todo esto es HTML. Muchas gracias. No muy emocionante etiqueta HTML, no vas a lidiar mucho con ella. Estas otras dos etiquetas dentro de aquí, lo harás, ahí está la cabeza, ahí está el cuerpo, así que la etiqueta de cabeza, voy a poner un par regresa, recuerda, regresa eso significa cualquier cosa solo para que podamos segmentar cuanto más estemos aprendizaje. El cabezal tiene una apertura y cierre y todo dentro de aquí son cosas que el navegador necesita para funcionar, por lo que Chrome necesita las cosas, pero el usuario no lo ve. Si guardamos este archivo guardar, saltamos a Chrome, iremos al archivo, iremos a abrir archivo, y encontremos este nuevo, entendiendo el cuerpo HTML head. Te darás cuenta de que no hay nada en la página, así que este es el cuerpo todo este blanco al cuadrado en la parte inferior, ese es el cuerpo. El cabezal es cosas que el navegador absorbe pero no te muestra, puedes ver que hay un montón de cosas que simplemente no se muestran. Voy a lidiar con todas estas cosas más adelante, pero los conceptos básicos aquí, este de aquí los personajes, solo diciéndolo nosotros usando teclado latino, ABC123. Hablaremos de estas cosas más adelante, el diseño responsive necesita esto, algunos problemas con Microsoft edge, que necesita ser compatible con las cosas, el título del documento haría en el próximo video. Pero es todo lo que necesita el navegador que realmente no necesitamos sin el usuario, nuestro público no necesita ver, lo que el público necesita decir es todo en el cuerpo. Está bien. Puse un par de devoluciones aquí, cargas a muchos retiene eso. De acuerdo, pero en el cuerpo, aquí es donde agregamos cosas. Vamos a añadir un h1, así que vamos a escribir entre corchetes angulares h1 cerrarlo y aquí está hola Dan, o tu nombre. Vamos a salvarlo. Todo en el navegador de la cabeza no salvó, todo en el cuerpo realmente se ve por el usuario. Echemos un vistazo en nuestro navegador, actualicemos, y ahí está nombre. Ve, así que HTML, todo está dentro de su cabeza. Cosas que el navegador necesita para funcionar, cuerpo es lo que ve el usuario. Esas son nuestras tres etiquetas principales. Ahora, hagamos un par de cosas. Echemos un vistazo a la etiqueta de cabeza. Recuerda, queremos darle estilo a este h1. ¿ A dónde va el estilo? No lo ponemos en el cuerpo. Está bien. No lo ponemos entre lo oculto el cuerpo. Se va de lado de la cabeza, de acuerdo. Después del título, poner en un retorno, entonces podemos ponerlo a nuestro estilo. Recuerden, abran corchetes, ciérrelo, y regresen entre los dos. Todo entre estas dos etiquetas es el CSS, y un CSS puede ir en la cabeza bien. Realmente no queremos que este código aparezca en la página. Queremos que solo afecte a las cosas que hay en el cuerpo, así que decimos, recuerda etiquetas increíbles, h1, llaves, y decimos que lo haremos el color de color aleatorio de esta lista. Huerto oscuro ahí vamos, porque al final, punto y coma, guárdalo, echemos un pequeño vistazo en el navegador. Refresca del navegador, impresionante huerto oscuro, míralo. Está bien. Cabeza, cosas que van en la página. Dije esto 10-20 veces ahora, pero te das la idea. Cosas como esta pueden entrar en la cabeza, pero lo que la gente ve está en el cuerpo. Ahora un par de cosas que quiero explicar antes de seguir adelante es, estoy saltando entre estos dos, Como ¿cómo hizo eso? En un Mac y puedes mantener presionada la tecla de comando y presionar Tab, y estas pequeñas cosas se abren, está bien, y puedes seguir golpeando a Tab para moverte a través de ellas. En un PC, es control Tab, y puedes voltear entre ellos también con solo tocarlos, así que controla Tab, controla Tab. No tienes que hacer eso, y lo que podrías hacer es simplemente tenerlo por aquí, hacer algo de redimensionamiento de ventana, para que puedas ver uno por un lado, uno por el otro, y es mucho más fácil trabajar así hasta ti. Otra cosa que quiero hacer antes de seguir adelante, voy a borrar totalmente eso, es que, no quiero que en este punto vuelvas, ¿cómo voy a recordar todas estas cosas? Porque digamos que quiero hacer esto Hola Dan, subrayado. El genial de internet y sobre todo de HTML, es, una carga de recursos. Yo quiero hacer esto subrayado, bueno, ¿qué hace? ¿ Entro aquí y apenas empiezo a escribir subrayado? No parece funcionar. De acuerdo, así que digamos que voy a Chrome. De acuerdo, volveré a abrir eso. Voy a hacer un nuevo cuadro de búsqueda, voy a decir código HTML o CSS para subrayado. Vamos a hacer esto a lo largo del curso porque no estoy aquí para enseñarte cada pedacito de sintaxis. Te quiero, te estoy enseñando a pescar. Está bien. Echemos un vistazo. He pedido el código para subyacente, va a ser tres lugares principales que usarás en tu mayoría de los diseñadores web usan. Hay algo llamado W3Schools.com. Ese es un recurso realmente bueno, trucos CSS que tiene un sitio web increíble brillante Chris qualia. Hay otro que aparece con bastante frecuencia y no aparece tan menos, pero se llama desbordamiento de pila. Esos son tres principales para apuntar y decir que sí, esos son los lugares de destino. Echemos un vistazo, veo que ves una declaración de texto. Se puede ver aquí usando un h1, hay un over line, y no es lo que quiero en la línea, así que en lugar de recordarlos, se puede copiar esto, simplemente copiarlo cuando mi teclado comando C o en un Mac o controlar C en una PC, y volver al código VS, y solo voy a pegarlo, guardarlo, bien, y luego saltar a nuestro navegador, previsualizarlo, y está subrayado. Porque va a haber mucho de eso si eres como, hombre, ¿necesito anotar todo esto? Es un montón de veces que nos disgusta. No recuerdo cuál es la sintaxis, así que puedes ir y encontrarla. De acuerdo, porque se necesita decoración es una forma rara de discutir subyacente. Pero después de un tiempo, aprenderás algunas cosas que estás haciendo con bastante regularidad. Texto, decoración, sobre línea. Nunca usé esa de mi vida. Refrescar. Mira eso bueno que, puedes hacerlo. Está bien, eso va a ser todo para este video. Saltemos al siguiente. Empezamos a hablar del meta título que hemos estado ignorando. 7. Cuál es el título y descripción en el encabezado de una página web: Oye, ahí. En este video vamos a aprender cuál es el título en tu etiqueta de cabeza y vamos a ver qué es una descripción. El muy corto versión está en los resultados de búsqueda de Google. Ese es el título, esa es la descripción. Necesitamos editar a cada página y vamos a saltar ahora, mostrarte cómo editar. Cuáles son los pros y los contras, lo que debes hacer, o no debes hacer. Empecemos. Está bien. Empecemos con la etiqueta del título. Esto se agrega a la parte superior de cada página y al cabezal, yo iba a editar el automáticamente por VSCode. ¿Qué es? Es una forma de describir lo que hay en la página. Esto documentaría aquí es sólo un tenedor de lugar. Puedes escribir cualquier cosa aquí y notarás que todo no es realmente lenguaje de código. Puedes escribir ampersands y puedes escribir corchetes y todo tipo de cosas podría ser cualquier cosa que quieras escribir aquí. Pero no quieres que sea nada más. Digamos, este es un tipo de pensamiento que realmente describe esta página. Es aprender descripción HTML y etiquetas de título y eso va a describir realmente la página que estoy tratando de construir aquí. Ahora, si lo guardo y salgo a Chrome, veamos dónde aparece. Chrome, este el documento en el que estoy trabajando. Se puede ver la palabra documento ahí que había desde antes antes antes de que lo reemplazáramos. Si tocamos refresco, se puede ver ahí es donde termina. Esa es tu etiqueta de título y termina en la pestaña pero eso no es tan emocionante. Lo que es realmente importante y es donde eso se utiliza por Google y un resultado de búsqueda. Recuerda, hicimos la búsqueda antes de un subrayado en HTML. Hicimos esa búsqueda, ¿ves estos trozos de texto azul aquí? Estos trozos de texto azul son el texto total. Y si escribes ahí aparecerá en esta pequeña lista. Te puedes imaginar si lo levantas como documento. En primer lugar, la palabra documento, Google simplemente no va a enumerar tu página porque es demasiado vaga y probablemente haya un millón de páginas en línea con el documento golpeador. Necesitas hacerlo único para cada página lo cual es un poco doloroso. Ve que tenemos 20 páginas en tu página web necesitas 20 etiquetas de título diferentes para cada página y necesita describir realmente lo que hay en esa página. Se trata de unos 50 caracteres y se puede ver que algunos de ellos se ponen un poco más largos, algunos de ellos son más cortos pero sean realmente concisos y exactos sobre lo que hay en la página. No lo llames como página de inicio. Si fui yo por mi sitio, sabes que el mío se llama tutoriales de diseño web por Daniel Scott. Sería una buena etiqueta de título de la página de inicio para mí. Esa es la etiqueta del título. La otra etiqueta que debes agregar y no está ahí por defecto. Un muy común justo debajo está agregando la descripción. ¿ Cuál es la descripción antes de que lo hagamos? Es este trozo. Que ahí está el título, que solo hay tu dirección de sitio web. Esta cosa de aquí tienes control. Puedes decirle a Google qué poner en esta descripción. A veces lo ignora pero la mayoría de las veces no lo hará, lo enlistará aquí. Esto es un poco más de marketing de lo que es. Al igual que esta de aquí sé palabras clave realmente concisas, muy buenas, que realmente describan lo que estás haciendo. Aquí abajo es como si no lo supiéramos cuando estamos haciendo un resultado, que buscamos. Nosotros comprobamos eso para asegurarnos de que estás en el estadio correcto, luego usas esto solo para confirmar que te metes más en los detalles y solo comprobando que estás en el tipo de zona correcto. Aquí es donde es más marketing de lo que es, digamos codificación. Aquí abajo, vamos a añadir la meta descripción. Por defecto no está ahí porque no se puede sobrevivir sin un título, pero se puede sobrevivir sin una descripción pero en mi opinión, definitivamente se debe editar. Aquí es donde es alguna sintaxis fea pero la escribes una vez conmigo de vez en cuando puedes volver y copiar y pegar esta. Se llama nombre emisor y necesitas agregar toda esa sintaxis. Solo estoy usando los atajos que aparecen a través de VSCode, pero necesitas nombre, igual y necesitas las comillas y dentro de aquí, éste se llama descripción. Se necesita deletrear exactamente así y necesitamos el nombre como descripción y el contenido va a ser lo que quieres que sea esa descripción. Aquí es donde se llega a poner. Aquí quieres alrededor de entre 120 caracteres o 150 personajes.Ciento veinte es lo que realmente aparecerá en los resultados móviles y 150 en el escritorio. Se puede ver aquí, a este de aquí le dieron un trozo bastante grande. En tanto que este se cortó bastante pequeño [inaudible] va a conseguir una meta descripción realmente pequeña. A veces también, no importa cuánto tiempo lo hagas, Google lo cortará. Asegúrate de que todas tus cosas buenas estén al principio de ese párrafo. Tan solo hazlo uno y hazlo unos 120 personajes. Ahora lo único para esto es como que trae un buen punto. Se puede ver esta pequeña raíz, ésta se puso roja. Si guardo esto y veamos la página, vamos a refrescarla. Se ha vuelto un poco loco. Es como, bueno, eso estaba en la etiqueta de la cabeza, estaba exhibiendo aquí abajo en el cuerpo. Es porque nos olvidamos de cerrar esta etiqueta de meta descripción así que digo nosotros, yo. Tiene una abertura ahí te da a todos ellos tienen esto en corchetes angulares de cierre. El final aquí cerrando corchetes angulares, verás que el rojo desaparece y de vuelta aquí, refrescar, vuelve a la normalidad. Si tienes cosas rojas, malas y muchas veces notarás la diferencia cuando te metas en la previsualizacion en Chrome, te mostrará todo se irá pajarillo. Está bien, ese es el meta título, meta descripción. Copia y pega eso en un bloc tengas una mano para cuando lo estés haciendo la próxima vez, para que no tengas que escribirlo cada vez. Realmente esencial a las páginas. Pasemos al siguiente video. 8. Qué editor de códigos debo usar: VS, Code, Sublime, Dreamweaver, Atom, Brackets: Hablemos de editores de código. Hemos estado usando código VS hasta ahora y vamos a continuar para este curso. ¿ Por qué? Porque es el más popular y principalmente porque es el más de moda. Hay algunas peculiaridades que lo hacen impresionante, pero hay gente por ahí que argumentan que Sublime Text es lo mejor, o Brackets lo es, o Dreamweaver lo es, o Atom, o Notepad Plus. Hay un montón de editores diferentes. Vamos a saltar a este video y sólo te damos una vuelta rápida a través de algunos de ellos. Simplemente muéstrale lo que debe buscar y lo que es importante. Entremos ahí. Hemos estado usando Visual Studio Code para nuestro editor de texto. Ahora bien, podríamos haber hecho este curso en cualquiera de los programas de edición. Ahora, sólo estamos usando el código VS en este caso porque el código VS es el más popular. Mis cursos anteriores, he usado Dreamweaver porque a menudo paso mi vida en el mundo de Adobe, pero supongo que lo que quería mostrarte muy rápido fue ante todo cómo estos editores son realmente útiles, pero a menudo pueden ser muy a la moda. Si hubiera hecho este curso hace un año o dos años, probablemente hubiera sido en este llamado Sublime Text porque era el más popular entonces. Antes de eso, había cosas como Komodo y antes de eso, había Notepad Plus Plus. Hay muchos editores diferentes, pero todos terminamos en el mismo lugar haciendo lo mismo. La gente se acostumbra a algunas de las peculiaridades a ellas. He descargado e instalado Sublime Text solo para mostrarte, si estás empezando en Sublime, es mucho más limpio. Si quiero ponerlo en todo mi documento, cosas para HTML, en este caso, en lugar de signo de exclamación y tabulador, es HTML en una pestaña. Se puede ver que llegamos a un lugar muy similar. No tiene tanto en el tipo de documento, sólo los verdaderos fundamentos, pero terminamos en el mismo lugar. Bajamos aquí y escribimos h1, y empezamos a escribir. Echemos un vistazo a Brackets. Brackets es otro popular. pestaña del signo de exclamación funciona igual que en VS Code. No tienen todos los bits y piezas que queremos en código VS. Decidieron una opción mínima real. Dreamweaver también, gran editor de código. Si vamos a Archivo Nuevo, no lo hacen automáticamente. Si dices que quieres una página HTML, dices HTML5, haz clic en “Crear”. Ya puedes ver, pone todos los bits y piezas que necesitas para empezar. El motivo por el que te muestro esto es, si estás buscando trabajo después de esto, entonces comienzas a trabajar con diferentes desarrolladores y están usando diferentes editores, tienen sus propias bondades y peculiaridades, pero estamos creando el misma cosa. De la forma en que lo hago como cuando estaba diseñando este curso, estaba tratando de averiguar cuál usar. Stack Overflow, mencioné que antes, hacen una encuesta de desarrollador a finales de año. Ya es 2019, y esta es la encuesta del año pasado. Acabo de pasar y se puede ver aquí abajo, abajo de la página, los resultados de vuelta para Visual Studio Code es con mucho el más popular. Se puede ver Visual Studio es la versión grande de esto, Notepad Plus Plus, Sublime Text, Atom, pensé que era mucho más alto. Solo hay gente que ama a sus propios editores, pero a diferencia de algo como Photoshop, donde solo hay un producto y uno o dos compitiendo, hay muchos editores de código diferentes. Algunas de ellas bastante generales, como la que estamos usando. Algunos de ellos mucho más específicos para, digamos, PHP o Xcode. Pero de todos modos, pensé un pequeño video corto explicando diferentes editores. En caso de que quieras pasar a otra cosa o esperes usar otra cosa, puedes usar lo que aprendas en este curso en un editor diferente. Pasemos al siguiente video. 9. Cómo añadir estructura a tu sitio web utilizando etiquetas Div: Hola ahí. Este video vamos a construir una caja amarilla y luego una caja rosa, intentaremos al menos. Vamos a aprender a hacerlo usando algo llamado etiqueta div. Es una división del espacio y nos da las cajas que llegamos para poner nuestra página web dentro de. Saltemos y aprendamos. Para empezar, cerremos los demás documentos en los que hemos estado trabajando. No vamos a usar esos de nuevo. Vamos a crear uno nuevo sólo para separar todo en todos nuestros diferentes bits de aprendizaje. Nuevo archivo, vamos a guardarlo. Llamemos a este divtags.html. No olvides el html. Vamos a agregar toda esa etiqueta de cabeza, bondad poniendo signo de exclamación, golpeando Return, pero es un poco fragmentada, nos aseguramos de actualizar el título a las etiquetas, ponemos en la descripción, pero no estamos en este momento porque es un proyecto desechable solo para aprender cuál es la etiqueta div. El div tag va en el cuerpo porque quiero que la gente lo vea. ¿ Cómo queremos que se vea? En tus archivos de ejercicios, hay una carpeta llamada Wireframes y esta de aquí llamada HTML. Div 1. Yo voy a abrir eso. Por ninguna razón, lo dibujé en mi cuaderno, así que olvidé que te lo mostraría. Esto es lo que hago cuando estoy enmarcado por alambre, no es un alambre particularmente bueno o emocionante. Queremos una caja amarilla y queremos una caja meñky debajo. Primera caja, segunda caja. Eso es lo que vamos a hacer. Para editar, agregamos una etiqueta llamada div. Voy a hacer algo de espacio aquí en mi cuerpo, voy a tabular a través sin otra razón que se ve bien, vamos a poner una etiqueta div. Etiqueta div comienza con corchetes angulosos, corchetes de cierre div. Es muy inteligente y pone un cierre de esa etiqueta y todo dentro de esto va a ser mi plaza. Analicemos lo que hemos hecho hasta ahora. Deja que lo guarde. Ve a Google Chrome. Vamos a Archivo, vamos a Abrir. Dónde está este Open File, pongamos uno. Ahí está mi nueva etiqueta div, haz clic en Abrir y ve al título, pero no hay nada aquí arriba en la página. Una etiqueta div sin ningún CSS es invisible. Está ahí, pero no lo hemos peinado. Lo que tenemos que hacer es decirle que haga algunas cosas como ser amarillo y darle una talla. Eso lo hacemos con nuestro CSS, lo hacemos en la etiqueta de cabeza. Recuerda antes de que se cierre la cabeza, voy a teclear. ¿ Recuerdas lo que sube por aquí? Te acuerdas, estilo. Estilo, y ciérralo, pero vamos a entrar. Voy a poner todos mis estilos aquí, voy a tabular sólo porque se ve bien. Solo estoy usando mi tecla de tabulador. ¿ Qué vamos a hacer? Tenemos que darle estilo al div. Recuerda que teníamos h1 antes. Vamos a darle estilo a este div y ¿qué va después? Tirantes rizados, perfectos, entonces vamos a darle estilo, vamos a darle un color. Ahora, cuando estás estilizando texto, siempre se acaba de referir como color. Cuando intentas hacer un color de fondo, tienes que ir al fondo completo. Ahí está que se puede ver color de fondo. ¿ De qué color vamos a usar? Voy a poner en amarillo. Recuerda lo que va al final, punto y coma, guárdelo. Vamos a previsualizarlo en el navegador. No aparece nada porque por el momento, esta etiqueta div es amarilla, pero no tiene dimensiones. O necesita una altura o necesita algunas cosas en ella. Dentro de este div, voy a escribir a través de cosas en él. Si hago eso, guárdalo, vuelve a mi navegador ahora. Al menos ahora con algún texto en ella obliga que la etiqueta div se abra un poco borrosa para que pueda verlo. No sabe lo grande que es, sólo me está mostrando lo suficiente como para apretar el texto y se está derramando a través. Vamos a darle una altura y un ancho. Aquí, solo pongamos una etiqueta p en lugar de solo texto viejo plano. Vamos a poner algunos textos corporales, recordar párrafo para p, y vamos a poner en primer cuadro. Guárdalo, y vamos a darle estilo. Aquí arriba, la etiqueta div es amarilla. Voy a poner un retorno después y vamos a darle un ancho y una altura. Ancho, le voy a dar 600 por 400. Vamos a ir 600 píxeles por el ancho pero tiene que tener px y hay que tener el punto y coma y la altura. Lo mismo, fueron 400. Yo lo anoté. Ahora, hemos guardado esto. Saltemos a mi Google Chrome. Hit Refresh. Esa es mi estructura. Podría ser tu navegación, navegación bastante grande, pero podrían ser el medio de tu sitio web o tu pie de página. Es un lindo cubo grande que podemos empezar a poner cosas como h1s o etiquetas p. Básicamente, tu sitio está conformado por bits estructurales, estas etiquetas div y elementos de texto e imágenes que entran en él y videos, pero las etiquetas div son la estructura. Ahora lo que queremos hacer es poner en este segundo cuadro abajo por aquí. En código VS, voy a bajar aquí, hacer un segundo div. Solo copiemos el primero. Ahorremos algo de tiempo, copia. Siempre que estés copiando, asegúrate de agarrar la abertura y el cierre. Es fácil saber dónde está el cierre. Si haces clic en él, lo resalta aquí para guardar tu cursor parpadeando y como la cabeza aquí, está el cierre. Tengo que asegurarme de agarrar todo eso, copiarlo. Solo estoy usando edit copy y voy a pegar. El tabbing es un poco raro, y como tengo TOC sobre esto, voy a hacer que todo se vea bien. El primer cuadro y el segundo cuadro, guárdelo. Vamos a previsualizarlo en un navegador. Vista previa. Tenemos una segunda caja. Lo último que queremos hacer es que lo queremos hacer un color. Queremos que sea este rosa. En el código VS, vamos a subir aquí, y aquí es donde nos encontramos con nuestro primer problema. Estamos peinando esta cosa llamada etiqueta HTML, este div. El problema con ello es que este div aparece dos veces, pero solo podemos colorearlo una vez. Nuevamente, aprenderé en el siguiente video qué es algo llamado clase CSS. Nos permite atacar individualmente esta caja de puño en lugar de la segunda caja y peinarlos de manera diferente. Pero por el momento, hemos puesto nuestra etiqueta div. Es impresionante. Ahora necesitamos dos tipos diferentes de etiquetas div que tengan diferentes tamaños y colores diferentes, y aprenderemos a hacerlo con una clase CSS en el próximo video. 10. Qué es una clase CSS, y lo usamos para colorear un fondo: Hola, este video es todo sobre un selector de clases. Nos va a permitir hacer esto, donde peinamos la caja amarilla de manera diferente a la caja rosa. Hacemos lo mismo con esta etiqueta p, haremos una etiqueta p diferente a la otra y ese es el trabajo de un selector de clases CSS. Vamos a saltar ahora y aprender a hacer que funcione. Aquí está nuestro CSS, esto aquí se llama selector de tipo, es seleccionar todos los tipos div. El problema es bastante genérico porque cada tipo que pasa a ser un div, le hacen las cosas. Por eso tenemos un selector de clases. Lo que queremos hacer es dejar todo esto, poner mis devoluciones de vuelta en mi ficha en. En lugar de decidir el viejo div en cada página de la misma cosa, vamos a crear lo que se llama un selector de clases. Todo lo que significa es que llego a ser único, me acaban de decir, voy a crear una clase, a saber que es una clase y no como ese selector de tipo que acabamos de hacer. Pones una parada completa al frente de ella en tu CSS. Yo soy clase, ¿qué clase? Voy a darle un nombre, puedes llamarlo como quieras, esto vamos a llamar a box1. Entonces como el resto del CSS que hemos estado haciendo, es lo mismo. Tirantes rizados o girar, y luego lo peinamos. Esa pequeña parada completa al principio significa que soy una clase. ¿ Qué le vamos a hacer a esa clase? Vamos a decir que es un color de fondo de amarillo. Llamamos, vamos a tener un ancho y alto con 600px por altura de 400px. Tenemos caja 1. Ahora ya no hay forma de conectar a estos dos. Dice: “Oye, caja 1 sé amarilla”. Pero aquí abajo es como, “Bueno, no sé a qué se lo estás aplicando”. Lo que haces es dejar el div y lo que haces es después poner un espacio y escribir en la clase de palabras. Se puede ver VS Code realmente quiere ayudar. Si lo estás escribiendo, asegúrate de poner un igual y las comillas. Entonces tenemos una clase div. Lo que queremos hacer es aplicar la caja 1. Ahora eso está apegado. Las diferencias son solo para asegurarte de que cuando lo estás peinando aquí en tu CSS, tienes que usar el tope completo para decir: “Soy una clase”. Aquí abajo tienes que ser un poco más largo de cuerda. Entonces dices que clase es igual y no pones ese punto ahí, eso no funcionará. Clase versión larga, versión corta. Ahora esperemos que ahorremos. Vamos a nuestro navegador, reiniciamos y la primera caja ahora sabe es amarilla y sabe que es 600 por 400. Esta caja de aquí abajo no tiene idea de lo que necesita ser, así que vamos a contarlo. Como dije antes hagamos una segunda clase, ¿listo? So.box2, ponte llaves y le diremos : “Todavía vamos a hacer esto”. Esto es una locura. Pero queremos que este no sea amarillo, queremos que sea ese color rosa. Eso no es un color, ser rosa. Guárdalo, el tamaño y la altura equivocados, 400 por 250. Acabo de inventar estos tamaños, puedes escribir lo que quieras, 400 por 250, guardarlo. Ahora no va a funcionar. ¿Por qué no va a funcionar? Vamos a revisar, refrescar solo para confirmar que no está funcionando. Es porque no se lo hemos aplicado. Lo hemos modelado, ahora tenemos que aplicarlo aquí abajo. Después de la palabra div type en clase. Ahí se puede ver la forma en que trabajo, voy a trabajar un poco más taquigrafía a medida que trabajamos. Puedes empezar a escribir y toda la sintaxis si quieres pero notarás que yo, space hit C. Eso es todo lo que he hecho y solo voy a presionar Return en mi teclado o la tecla Enter y llena toda esa sintaxis encantadora. Escribo en box2, hit Guardar. Ahora, esperemos refrescar. Ahí estamos. Tenemos que primera caja y una segunda caja y se asemejan vagamente a nosotros. Enfriar. Aprendimos lo que era un selector de tipo. No necesitas recordar ese nombre, pero un selector de clases para CSS es algo que vamos a hacer un billón de en esta clase y es una forma de enfocar individualmente esto. En lugar de la casilla uno, este podría ser encabezado y esto podría ser navegación, y este podría ser contenido principal. Llegamos a peinarlos, colorearlos, y dimensionarlos. Vamos un poco más allá y le agreguemos un poco de estilo y veamos un selector de clases, pero en un contexto diferente. De vuelta en VS Code aquí, tengo dos etiquetas p y se ven exactamente iguales en el navegador. Digamos que quiero hacer de éste un color diferente y un tamaño diferente. En lugar de peinar la etiqueta p como lo hicimos antes, recuerda que hicimos todos los h1s. Pero el problema es que cada h1 en cada página. En tanto que este, sólo quiero que este pequeño chico único en la primera caja haga algo. Arriba aquí debajo de la caja1 o caja2, voy a poner en otra clase, recuerda tiene una parada completa y voy a llamar a esto cuando mi texto resaltado. Tienes que poner un espacio entonces tienes que poner tus llaves. Tirantes rizados junto a tu tecla p. Entonces vamos a decir que me gustaría que fueras un color. El color de fondo para el color de fondo, hace un color bajo regular si quieres darle estilo al texto. Digamos que quiero hacer de este uno de los colores locos se han ido aquí. Voy a hacer este gris tenue. Lo deletrean en ambos sentidos, mira eso, genial. Pongamos nuestro punto y coma. Hagamos el tamaño de la fuente a algo realmente grande para que podamos verlo fácilmente. Yo lo guardé, ahora necesito aplicarlo, y eso es lo mismo. Te puedo decir como una etiqueta p, pero también una clase para el texto, encontré la mía en texto, texto resaltado. Vamos a guardarlo. Vamos a comprobarlo, me refresco. Es más grande y es el gris. Estilizas los selectores de tipo para hacer trazos amplios generales grandes. Después haces pequeñas cosas específicas usando clases y las aplicas a pedacitos y piezas individuales, puedes usarlo dos veces, no hay razón para que no te podamos decir, mi amigo también tiene una clase de texto destacado y se aplicará a ambos, ojalá. No lo hizo. Eres como si veas por qué? No tengo ni idea de por qué. Ahora, finjo que me pongo eso ahí a propósito, pero ese siempre es mi problema. Puede que no seas tan desafiado gramaticalmente como yo, pero me resulta muy difícil escribir estas cosas, cuando no estoy haciendo tutoriales trato de impresionarte con mi velocidad de mecanografía, copio y pego todo. Copiar y pegar. Es dolorosamente lento, pero se mete alrededor de mi problema de escribir la palabra equivocada y luego tratar de arreglarla, no resolver lo que era, es solo por errores tipográficos. Eliminemos esto y te mostraré algunos otros trucos por solo asegurarte. Sí, puedes mantenerte al día o arreglar cualquier error. La forma más fácil es comparar con el archivo que estoy haciendo. Diga que parece que has hecho lo mismo, pero en realidad no está funcionando por alguna razón. Está en tus Archivos de Ejercicio que has descargado. Encontrarás en esa carpeta hay algo llamado Archivos Completados. Entonces aquí me he callado. Ese fue el quinto video que hice este sexto video. Si estás viendo este video, probablemente es lo que estás tramando. En estaño de video, encontrarás, déjame terminar este video aquí, encontrarás una carpeta aquí llamada lata. Eso se puede abrir, vamos a hacer sólo uno. Yo lo hice doble clic, lo abrí y ahí están las cosas en las que estamos trabajando. Simplemente puedes abrir esto en código VS. Entonces ve a archivo abierto y compara el tuyo versus el mío. Eso lo haré a lo largo del curso. Esa es una de las formas en que puedes consultar tu código. Las otras cosas a notar, o supongo que a revisar, y estas son las cosas que encuentro con mis alumnos cuando estoy dando clases en vivo es que la gente se olvida de la parada completa. Para identificar una clase o empiezan a agregar el punto de clase aquí abajo. Lo cual no quieres decir. Una que siempre atrapa a la gente es que borrarán accidentalmente uno de estos con las llaves. Porque ese se abre y luego no se cierra, se enloquece, ¿verdad? Se puede ver que cambió un poco el color resaltado, pero apenas falta. A menudo se puede pasar, voy a dar clic en ese primer corchete y se puede ver que está resaltado, el de cierre. Si hago click en este, no le daría click porque no sabe dónde está el final. No resaltará a su compañero. Ahora pongamos de nuevo a su amigo, ahí está. Ahora si haces clic en ellos, simplemente se conectan entre sí, ahí vamos. Las otras cosas son personas olvidando poner puntos y puntos y coma, sólo problemas básicos de sintaxis, errores de ortografía básicos como hago todo el tiempo. Realizaremos un poco más de comprobación de errores más adelante, instalaremos algunos plugins para VS Code para ayudarnos con esos errores de sintaxis. Pero por el momento, esos son los básicos y eso será todo para este video. Pasemos al siguiente. 11. Cómo anidar divs uno dentro de otro en HTML y CSS: Hola ahí. Este video vamos a hablar de anidar etiquetas div. Lo que eso significa es que vamos a terminar haciendo esto donde tenemos nuestra caja original amarilla y rosa y ponemos otras cajas dentro de ella. Se llama anidación. No es tan elegante. Aquí se pueden ver cajas dentro de cajas, terminan luciendo así. Al final, vamos a poner textos dentro de unas cajas, que está dentro de cajas. Hagámoslo ahora. Te mostraré en VS Code. Vámonos. Lo que estamos haciendo es en tu carpeta Wireframes en tus Exercises Files, buscamos hacer éste aquí, HTML, div 2. Tan mismas cajas, usaremos lo mismo que hemos creado hasta ahora. Vamos a poner dos cajas dentro, una caja gris, y una caja morada. Esas son las alturas. Vamos a trabajar cómo hacerlo. En VS Code, vamos a hacer lo que se llama anidación. Simplemente significa que vamos a poner divs dentro de divs. Entonces tenemos un div aquí y un segundo div aquí. Trabajemos en ese primero, que va a ser nuestro gris, un 100 por 300. ¿ A dónde va? Depende de dónde lo quieras, supongo. Tenemos este texto aquí, realmente no queremos más. Eso fue justo, supongo que puse ese texto p ahí para mostrarte cómo podíamos resaltar y decidir la caja con algún contenido sobre ella. Eliminemos eso por el momento sólo para que sea agradable y limpio y claro. Entonces lo que vamos a hacer es poner un div say, justo lo que era ese texto p. Entonces si vamos corchetes angulosos, div. Ahora no vamos a hacer un div en clase de crédito aquí arriba y luego volver y nombrarlo. Lo vamos a hacer todo de una sola vez. Entonces en lugar de simplemente cerrarlo aquí, ahora, va a deshacer eso. Voy a poner en clase antes de terminarlo. Entonces voy a llamar a éste llamado casilla tres. Entonces lo voy a cerrar. Sólo para ahorrar algo de tiempo, en lugar de volver y hacerlo más tarde. Voy a poner, ¿pongo algo en ella? No, sólo voy a dejarlo vacío. Pero recuerda aquí es donde iría dentro de ese div. Simplemente déjalo vacío. Entonces guárdalo. Todavía no va a aparecer. Refrescar. T el texto se ha ido y la etiqueta div está ahí dentro pero no lo veo. Por lo que necesitamos darle estilo. Ya no necesitamos esto, porque me deshice de él. Voy a llamar a este uno, punto, recuerda caja tres, llaves y vamos a robar todo eso, y vamos a recoger gris, que se deletrea en ambos sentidos. A mí me encuentro con eso cada vez. grises se ven grises y grises, no sé por qué encuentro eso increíble. Es el mismo gris. Simplemente deletrea de diferentes maneras. Este era un ancho de 100 y una altura de 300. Aquí vamos. Bueno, 3 mil. Eso no va a funcionar, guárdalo. Vamos a comprobarlo. A ver si lo hicimos funcionar. Refrescar. Mira eso. A menudo, cuando estás haciendo un sitio web, harás un fondo general del sitio web, un contenedor grande, y dentro de ese contenedor anidarás muchas etiquetas div diferentes como el encabezado, y la navegación, y las imágenes, y el carrusel, y todas esas cosas. Eso es anidar. Hagámoslo con la segunda caja. Yo solo quiero mostrarte un par de cosas, si no lo consigues en el lugar correcto, así que eliminemos esa etiqueta p de aquí. Ahí es donde debería ir. Pero digamos que lo hacemos justo fuera de aquí. Entonces vamos, corchetes angulosos, div, espacio, clase, Retorno. A éste se le va a llamar caja cuatro. Ciérralo con soporte de ángulo, vamos a ahorrar. En la parte superior aquí, voy a copiar y pegar todo el asunto. Realmente perezoso. Caja llena. Este era morado, y era de 120 por 350. En realidad era 350 por 120. Altura de 120. Echémosle un vistazo. Vista previa en el navegador. Impresionante. Bueno, no es impresionante, está en el lugar equivocado. Entonces si lo consigues en el lugar equivocado, es realmente sencillo en el código ir, realidad cortas y pegas. Yo lo voy a alinear para que se vea bien y todo alineado. Presiona Guardar y ahora refresca. Debería estar ahí dentro. Impresionante. Ahora si quiero, di un h2 dentro de ese texto morado, podría simplemente ponerlo aquí. No hay nada malo en escribir h2, cerrarlo y escribirlo aquí, y golpear dos, y eso es perfectamente gramaticalmente y sintácticamente, dudo que sea una palabra, correcta. Entonces démosle un adelanto. Está ahí dentro. Lo que me gusta hacer para que todo se vea bien es poner retornos entre todo esto para exponer realmente la anidación así que sé que hay una etiqueta de cuerpo, dentro de eso hay una caja uno. Dentro de eso hay una caja tres. Se puede ver la sangría diciendo con esta caja dos y dentro de ella es caja cuatro y dentro de la caja cuatro es h2. ¿Eso tiene sentido? Por lo que estamos consiguiendo el ahorcado de esta div tag división de cosa espacial y poniendo cajas dentro de cajas. Entrémonos al siguiente video donde sentamos un proyecto de clase. Hora de la tarea. 12. Proyecto de clase 01: etiquetas Div: ¿ Dijo deberes en el último video? Yo lo hice. Pero piénsalo más como una forma impresionante de conseguirte mejores habilidades. Pondré proyectos a lo largo del curso. Encontrarás los detalles de las mismas. Haré un pequeño video como este para explicarlo, pero también en tus archivos de ejercicios, habrá una carpeta llamada Class Projects, habrá un documento de palabras ahí dentro, y así es como se ve. Estamos hasta el Proyecto Clase 01. Entonces vamos a trabajar a través de lo que tienes que hacer, y seguiré sumando a esto a medida que pasemos por el curso. Si no tienes Microsoft Word, no puedes abrir este documento, y muchos otros programas. Si realmente te atascas, prueba Google Docs, puedes usar eso para abrir un documento de Word. En fin, entonces, ¿qué tienes que hacer? Tienes que crear dos sitios web separados. Entonces lo que hago es, en código VS, cerrar todo, guardarlo, y hacer un nuevo documento. Entonces vas a hacer uno nuevo, el primero se va a llamar Clase Proyecto 1A. Estas dos partes, hay 1A y 1B. El primero, y es éste. Yo quiero que hagas esto. Te he dado un poco de los detalles, así que el nombre de la misma, estas son las cajas, y puedes ver en este visual aquí. Lo siguiente que quiero que hagas, las cajas verdes dentro de la caja azul, etc, etc Las tallas están aquí abajo porque mi letra no es genial. Hay versiones más grandes de esto, puedes o hacerlo más grande aquí en Word o en tus archivos de ejercicios pondré copia de ellas en Wireframes y es Div 3, aquí está ahí, y Div 4. Entonces esas son las dos cosas que vas a estar haciendo. Esta es bastante fácil, ya lo hemos hecho antes. Este es un poco de bola curva. Porque quiero que pienses en las etiquetas Div, y cómo funcionan. Entonces esta, veamos la segunda, la diferencia es, tenemos dos cajas dentro de la otra, eso es fácil, caja amarilla, caja gris. Pero entonces quiero que lo pongas en dos h1s. Hay uno dentro de esta caja amarilla. Ponle algo de texto, no tiene que ser lo que he escrito aquí, sino algún texto en éste, y luego algún otro h1 aquí afuera. ¿ Cómo lo sacas por ahí? Está fuera de la caja amarilla, pero dentro de la caja gris. Entonces quiero que juegues con eso. Una vez que lo hayas hecho, di que lo construyes todo en Visual Studio Code, que lo previsualizaré en Chrome, y tomaré una captura de pantalla. Ahora, en un Mac, mantienes presionado el comando shift 4, y puedes arrastrar un cuadro alrededor de él, hacer clic en mantener y arrastrar, y eso te da una captura de pantalla. Debería ponerlo en tu escritorio. Tienes que ver mi aquí abajo, y quiero que compartas eso conmigo. En un PC, es diferente. Tienes botón de pantalla de impresión en tu teclado, es posible que tengas que comprobar que cómo hacerlo en tu versión de Windows. Es diferente en muchas versiones diferentes de Microsoft Windows y no estoy al día con todas ellas. Así que solo echa un vistazo a cómo haces una captura de pantalla, creo que solo es imprimir pantalla en tu teclado y luego puedes pegarla. Pero la razón es que quiero que lo compartas por mí porque quiero hacerte responsable ante estas cosas. Yo quiero que me demuestres que lo has hecho, y todo lo que tienes que hacer es compartirlo en los comentarios aquí, solo diciendo” lo hice”. Si te encuentras con algún problema, déjalo caer en los comentarios. lo que me gustaría que hicieras, porque estamos en una etapa razonablemente simple, si te encuentras con un problema, y estás como, no puedo hacer que éste funcione, publicar tus preguntas en los comentarios y pedir ayuda. Para las personas que están haciendo este curso que lo hacen con éxito, quiero inculcar un poco de ayudar a todos los demás. Entonces si estás ahí dentro, y estás publicando el tuyo, y lo hiciste y estás como, “Sí lo hice”, entra ahí y si alguien tiene un problema, y ellos son como, “El mío no está funcionando por esto x, y, y z”, puedes ayúdales. Basta con explicar lo que hiciste para que funcionara. Consigue este poco de texto fuera de esta etiqueta. Yo quiero inculcar esto en el grupo para que no sólo estemos todos confiando en mí para entrar y empezar a trabajar en el código de todos. Me gustaría que ayudaras a otras personas para que lo aprendas mejor. Ya sabes a lo que me refiero. ¿Dónde publicas estas cosas? Has tomado dos capturas de pantalla, y tu doc de Microsoft lo explica. Dice, dependiendo de qué sitio web estés viendo esto, posible que tengas una sección de asignaciones, podría haber un lugar para ponerlo en realidad, o puede que solo haya un lugar en los comentarios. Simplemente mételo en los comentarios. También, así, esto, o esto, los haré todos, en redes sociales. Entonces péguela en Instagram, etiquetadme, Twitter, etiquetadme, grupo de Facebook aquí, etiquetadme, solo para que pueda ver que lo has hecho. Lo que debes hacer en todos estos es agregar un hashtag, lo pensé antes. Así que etiquetame bajo el #byolweb, solo para que pueda agruparlos todos juntos, y todos ellos, para que cuando lo esté revisando, pueda mirar cosas web diferentes a mis otros cursos. Entonces Instagram, Twitter son buenos lugares para publicar cosas visuales, y en Facebook, hay un grupo aquí. Tiene un nombre terrible, así que mejor el enlace, se llama el, lo que se llama : Bringer Your Own Laptop Online Group. Es un grupo, hola, donde compartimos mucho de, por el momento hay un montón de cosas de la web, muchas cosas de interfaz de usuario, muchas de Illustrator, Photoshop, InDesign, un poco de UX UI, y ahora vamos a introducir el material web con este curso. Publica aquí, agrega ese hashtag y di: “Sí, lo hice, todo está roto” y ojalá alguien salte y te ayude. Haré todo lo posible para entrar ahí también y ayudar. Esa es tu tarea. No lo pienses como tarea. Piensa en ello como cada vez más impresionante en el diseño web. ¿ Es eso? Eso es todo. Proyecto de Clase sobre. Te veré en el siguiente video. 13. Cómo crear una hoja de estilo en cascada separada en HTML y CSS: Hola ahí. Este video se trata de separar nuestra hoja de estilo sacándolo todo del HTML, y lo pondremos aquí arriba en la cabeza, y lo vamos a quitar y ponerlo en su propio documento y conectar los dos. Es bastante sencillo. Vamos a saltar y hacerlo. Es bastante simple crear una hoja de estilo CSS separada o externa. Vamos a trabajar con cerrado todo lo que tengas abierto de parte anterior del curso. Es bonito y abierto o vacío. Si no puedes ver esto, da click en esa primera pequeña pestaña aquí. Si no puedes ver nada aquí ve al archivo, abre y encuentra Project zero. Es una carpeta que hicimos y hacemos clic en Abrir. Deberían ver todos los archivos. Vamos a trabajar en el divtags.html, realmente no importa cuál. Tenemos éste aquí. Lo que hemos estado haciendo es medio engaño, así que hemos estado haciendo trampa. Tenemos el estilo, todo el CSS, en el encabezado del HTML. Eso funciona, no hay nada malo en ello, excepto que es un poco doloroso si tenemos 20 páginas, digamos que tenemos 2,000 páginas, cada página tiene una caja 1. Tenemos que escribir la casilla 1 en todas nuestras 2,000 páginas separadas. Si quisiéramos cambiarlo, simplemente no lo harías. Si el cliente regresa y le dijo: “¿Puedes hacerlo regular?” Al igual que no, hay 2,000 páginas que necesito abrir e ir y cambiar. Lo que queremos hacer es ponerlo en una hoja separada. Ahora 2,000 páginas pueden hacer referencia a esa hoja CSS. De acuerdo, entonces podemos cambiarlo una vez en esta hoja CSS y el HTML todos van en busca de esa hoja y lo actualizaremos todo muy bien de una sola vez. Es difícil de explicar, solo hagámoslo realmente. En primer lugar, lo que necesitamos es un documento CSS. Tiene un archivo, vamos a archivar, a buscar un nuevo archivo. Vamos a guardarlo ahora. Aquí la diferencia es que podemos llamarlo cualquier cosa que nos guste siempre y cuando no haya espacios. Vamos a llamar a nuestro estilo, pero podríamos llamar a un estilo, estilos plural, ¿y qué más se llama? Simplemente no pienso en otros nombres genéricos. Puede llamarlo cualquier cosa. No se me ocurre nada de eso. Lo llamaremos estilo y se va a be.css. Hagamos clic en Guardar. Básicamente lo que queremos hacer es copiar y pegar el estilo de este documento a este documento. Tengo dos pestañas abiertas. A partir de este documento, ¿qué necesitamos? No necesitamos la etiqueta de estilo. Esta etiqueta de estilo está aquí solo para decirle al navegador, “hey, esto no es HTML”. Dentro de la etiqueta de estilo, todo aquí dentro es un CSS, así que vamos a agarrar todo. Cuando estás copiando y pegando cosas me pasa todo el tiempo como siempre me olvido de los corchetes de cierre, asegúrate de agarrarlos todos, y vamos a editar. Vamos a cortar. Ya no necesitamos la etiqueta de estilo. Estaba justo ahí para decirnos dónde está el CSS. Mucho más limpio, en primer lugar. Aquí en style.css solo tienes que ir a editar pegar. Eso es todo lo que necesitas hacer en una hoja de estilo. Al igual que hemos aprendido antes, es sólo en una hoja separada. Ahora no va a funcionar. Vamos a probarlo. Vamos a aprender y tú también funcionas, archivar, guardar todo. ¿Por qué eso es útil? Es eso porque, estaremos haciendo cambios en el HTML y CSS y eso son súper documentos. Echemos un vistazo a mi escritorio, y Project zero es etiquetas y hay estilo de CSS. Estos dos tipos están separados. Era más fácil simplemente ir, guardar todo. Aprendo el atajo en mi Mac, es Comando+Mayús+3. ¿ Qué hay en un PC? Si estás mirando un PC, ve al archivo, debería tenerlo ahí mismo. Adivino que Control+ Alt+S. así que vamos a guardarlo todo y vamos a revisarlo en un navegador. De vuelta aquí en Chrome, ya tengo etiquetas DIV abiertas. Es posible que tenga que ir a Archivo y abrir archivo. Yo lo voy a refrescar y se va a ir todo mal. Hemos movido todo el estilo que ahí, las etiquetas DIV todos se derrumbaron porque ya hemos conseguido bombo por ellos. Lo que tenemos que hacer, la segunda parte es que lo hemos copiado todo de ahí para allá. Pero este documento HTML no sabe que este tipo existe todavía. No va automáticamente a encontrarlo así que tenemos que decírselo. Hagamos eso. Debajo del título, es push-retene.El largo camino es bracket-link y lo vamos a tener relativo a la hoja de estilo. Se puede decir que nunca escribí esto y tienes que hacer o vas a referirlo y tipeas en el estilo. ¿ Cómo llamamos el nuestro? Nosotros llamamos plural a nuestros estilos que no puedo recordar. Otra vez tienes que asegurarte de que se cierre y estás como, hombre, no voy a recordar eso. No tienes que hacerlo. El largo camino es el mal camino. Vamos a cerrarlo y usaremos un código VS para ayudarnos. Podemos escribir link y luego simplemente desplázate aquí abajo y haz click en éste, porque puedes enlazar cosas diferentes. Donde puedes enlazar a un icono favorito, puedes enlazar a JavaScript. Estamos buscando CSS y pone en let cosas para nosotros e incluso pone el nombre ahí dentro. Entonces eso no fue automáticamente y averiguó cómo lo llamé, eso es solo lo predeterminado ahí dentro. Si has llamado a tus estilos, vas a tener que pasar por ahí y añadir los s ahí. Si lo llamaste, no puedo pensar en otro nombre, pero llamémoslo cosa, tendrás que ir y cambiarlo porque ponen estilo y solo automáticamente probablemente buena costumbre solo para enfriarlo estilo. Vamos a golpear salvar. Hagamos guardar todo. Show consiguió tiempo. Vamos a revisar el navegador ahora. Aquí vamos, refresca. Todo funciona. Hay mucho trabajo pero simplemente lo dejaría. Se puede decir la razón principal es que todos los documentos HTML ahora que creo enlazarán a esta hoja de estilo y cuando haga un cambio aquí, fluirá a través de un sitio web completo de genomas fácilmente porque todos buscan ese archivo. También lo mantiene agradable y limpio para que podamos mantener nuestro HTML separado de nuestro CSS. Significa que esto es bonito y ordenado y luego esto es bonito y ordenado. Se puede ver cómo CSS, sin el HTML tiene un lenguaje de aspecto realmente limpio, me encanta. Antes de seguir adelante, solo quiero mostrarte, cerrar eso hacia abajo, un par de cositas que hacer con CSS en una hoja de estilo si pasas arriba, digamos me está diciendo que es un elemento para pasar por encima de éste, puedes verlo, solo me dice, es el color de fondo del elemento. Este de aquí especifica el ancho. No puedes flotar por encima de estas cosas si no estás seguro de lo que hacen o abres otra página web que te guste, ¿qué hace esa cosa? Te puedes dar una breve explicación dentro de VS Code y también algo que está integrado en CSS pero no HTML por defecto es si tienes errores, digamos elimino con un corchete de apertura por accidente, verás aquí abajo hay un, “hey, has consiguió un error”. Si hago clic en él, dice que en tu hoja CSS, hay un error inesperado. Al igual que el problema es, es que eso no es tan útil. Nunca he encontrado que estos errores sean realmente útiles. Puedo decodificarlo porque lo rompí porque está esperando un corsé rizado al principio ahí. Se puede ver que hay muchos errores, hay cuatro de ellos. Sólo hay uno. Es porque es como este goteo de errores para que uno se rompe para que entienda el resto de ella. Pero si lo vuelvo a meter, podría abrazar, no necesito el segundo. Todo el problema se ha ido. No tenemos esa funcionalidad incorporada en VS Code for HTML en este momento, si antes estás como, “Oye, no te volví rojos y como se hizo”. Es una opción que vamos a sumar un poco más adelante cuando empecemos a mirar extinciones pero necesitamos hacerlo un poco más adelante en el curso. Ahora si ves errores, probablemente sean tus corchetes, tu colon, o tu punto y coma, faltan. A través de eso, lo rompe, lo pone en desenroscar. Tengo a muchos estudiantes como, “Oye, mío no está funcionando en clases y en videos” y normalmente siempre es justo como un error de sintaxis, normalmente. Otra cosa que la gente siempre se olvida de hacer es que se olvide de conectarlo en su HTML. Lo hacen y lo separan todo y luego se olvidan de volver, doblar atrás y conectar eso y voy a usar, va a ser sólo algo como esto. Hay gente, mucha gente como yo que está como, no está funcionando y puedo ver muy claramente que es un error ortográfico. Entonces tal vez algunos copiando y pegando solo para asegurarse de que la sintaxis esté bien escrita. Ahora voy a poner un pequeño proyecto ahora. No va a ser un proyecto de clase separado porque no tiene sentido enviármelo porque va a verse exactamente igual. Lo que me gustaría que hicieras es crear un dos documentos en el tutorial anterior, Tareas previas. Si no lo hizo, vuelve atrás y hazlos. Pero tienes estos dos documentos HTML. Me gustaría que los separaran y tuvieran hojas de estilo separadas para ambos. Ahora cuando pides imprimirlos, uno se puede llamar estilos, pero debido a que van a la misma carpeta, no puedes tener dos de ellos llamados estilos. Tengo dos hojas de estilo separadas solo para pasar por los movimientos de copiarlo y asegurarme de que lo hagas bien. A lo mejor llama a este style1.CSS y llama a éste style2.CSS y ve si puedes hacer que funcione. De acuerdo, eso es todo para hojas de estilo separadas. Te veré en el siguiente video. 14. Cómo crear un índice html y css de estilo: Estamos en el proyecto número 1. El proyecto 0 está terminado. Eso era acostumbrarse a las cosas, y sólo aprender lo básico. Ahora vamos a empezar realmente a hacer algunas cosas. Vamos a construir una estructura. Esa es nuestra estructura de proyecto 1. Lo he escrito en la parte superior ahí. Vamos a hacerle alguna estructura básica de etiquetas div, luego le agregaremos algunos detalles. Estos son mis armazones de cable. Vamos a añadir un logotipo, y algunos encabezados, y algunos botones, y algunos mapas, y cosas geniales. Eventualmente, con suerte, se verá así. Esto será una cosa de aspecto final. Sé exactamente, se verá exactamente así, porque ya lo he hecho. Pero antes que nada, en este video, necesitamos averiguar cómo crear una página index.html, y cómo connect.css juntos. También te mostraremos cómo separar los documentos como este uno al lado del otro. ¿ Estás listo? Proyecto 1 a punto de comenzar. Es hora de nuestro nuevo sitio. Limpiemos las cosas, y empecemos nuestro nuevo sitio. Cerremos todo en códigos VS, sin nada abierto. Hemos estado trabajando en una carpeta llamada proyecto 0. Estamos a la altura del proyecto 1, 0 fue un proyecto desechable. Esas son cosas que acabamos de probar, entender lo que algunas de las básicas, cosas que hemos tenido que aprender hasta ahora. Lo que tenemos que hacer es crear una nueva carpeta local. Nosotros lo llamamos la carpeta local, porque está en tu computadora, no en Internet. Es local, local para ti al menos. Tenemos que crear una nueva carpeta, y crear nuestro HTML y CSS, darles nombres y vincularlos. En primer lugar, vamos al archivo, y vamos a conseguir un crear una carpeta nueva. Ahora bien, no importa si te resulta un poco difícil ir, porque tenemos que abrir una carpeta, y luego crear una carpeta nueva. Es raro. Puedes hacerlo a través de tu Sistema Operativo. Si estás en Windows, es diferente pero en un Mac, está en Finder. Acude a tu Escritorio, y luego aquí puedo hacer clic derecho y decir Nueva carpeta. Realmente no importa cómo obtienes esta nueva carpeta, pero necesitamos un proyecto 1. Si estás en un PC, es muy similar. Abre tus Mis documentos encuentra tu escritorio, y haz clic con el botón derecho, haz una nueva carpeta. De cualquier manera, queremos tener una carpeta nueva, la voy a abrir. En mi escritorio, ya ahí, aquí está mi nuevo proyecto de carpeta 1. Haga clic en “Abrir”. En realidad no pasa nada. Simplemente parpadea cuando vuelves a obtener la pantalla de bienvenida. Recuerdo cuando empecé a usar VS Code, y estaba como “Man, Es confuso”. Entonces deshazte de eso. Hagamos un nuevo documento. Archivo, nuevo archivo. Vamos a crear dos de ellos. Crearemos un HTML. Archivo, guardar. Ahora, este documento HTML, le hemos dado un nombre aleatorio hasta ahora como, divtags.html, o helloworld.html. Ahora, para un sitio web necesitas al menos una página, o al menos una página. Necesitas que tu página de inicio se llame esta cosa exacta. Necesita llamarse index.html. Si lo llamaras homepage.html, ponlo arriba en Internet y el navegador iría a tu sitio, dansawesomewebsite.com, e ir en busca de índice, y no pude encontrarlo y cargará un gran error en tu página. Por lo que necesitas al menos una página llamada index.html. Utilice minúscula o mayúscula. No hay espacios, tiene que ser exactamente eso. El navegador va y busca esta página como su primera página inicial. Llámalo índice, haz clic en él, guárdelo. Añadamos algo de HTML básico. Todos nuestros meda-data. Recuerda signo de exclamación, regresa. Démosle un título. Este de aquí se llama el Restaurante Adare. [ Risas] Llegué hasta el restaurante. ¿ Estaba cerca? Aquí no hay chequeo ortográfico, y yo también estoy haciendo trampa. Estoy mirando mis notas. Ya lo he escrito, ni siquiera sabía lo que ese hechizo bien. De todos modos. El restaurante Adare va a ser mi título. Necesitamos crear, y conectar una hoja CSS. Hagamos eso yendo a “Archivo Nuevo”. Vamos a “Archivo Guardar”. Podemos darle cualquier nombre que nos guste. Estaba pensando en ello antes entre videos, yo era como si hubiera estilo. Solía llamarlo principal todo el tiempo, main.css. No importa cómo lo llames. El único problema es que si lo llamas estilo, y eres un desarrollador web, o diseñador, y estás haciendo muchos sitios web, vas a tener muchos archivos en tu escritorio llamados Style. Hace que sea un poco difícil encontrarlos cuando quieras, pero no tan duro. Sólo llamémoslo estilo. Remember.css. Si te olvidas, como lo hago todo el tiempo, es estilo. No funciona pero por aquí puedes hacer clic derecho en él, renombrarlo y solo put.css después. Entonces lo sabe. Ahora, vamos a conectar los dos. Volver a HTML. Justo debajo de aquí, bajo Título, vamos a poner link, y luego dar click en CSS y se obtiene el nombre correcto, porque le di el nombre correcto. Adelante y golpea “Guardar”. Eso debería funcionar. Vamos a probar si funciona. Sólo pongamos el cuerpo aquí. Pongámoslo en un h1. Ahora, les voy a mostrar una forma de trabajar un poco diferente. Vamos a añadir atajos a medida que vayamos. Si te gusta “Hombre, no estoy listo para atajos”. Basta con escribirlo el largo camino. Soportes angulosos, h1, cerrar. Ya hace un pequeño atajo ahí, pero te mostraré un atajo más corto. Yo sólo voy a escribir h1 y vuelvo. Se puede ver que no tuve que poner los soportes angulares al frente. Voy a hacer eso probablemente por el resto del curso. Sólo porque lo hago en un hábito. Podría estar preguntándose por qué, pero de todos modos. Llamemos a éste Do I Work. Guardar. Vamos a nuestros estilos. Añadamos un estilo para las llaves h1, h1. Haremos que solo cambie el color como si en columnas. Color. Vamos a darle este marrón y su salió con semi colon adentro. Vamos a guardarlo y vamos a probarlo en un navegador. Entonces esa es nuestra vieja página en la que estamos trabajando. Voy a ir a Abrir archivo. Vamos a buscarlo. Estamos buscando no proyecto 0. Ahora, ve a mi escritorio. ¿ Dónde estás escritorio? Proyecto 1. Aquí está mi index.html. Oye, ahí está mi h1 y él es marrón. Ahora un par de cosas más que quiero mostrarte en VS Code es esta cosa, el Explorer. Es genial una vez que lo has usado por un tiempo, pero al principio eres como “Es un poco confuso”. Por lo que hay dos secciones para ello. Voy a añadir estos pequeños chevrons aquí para atarlo todo. Tan abiertos editores, nunca tengo abierto. Lo que significa editores abiertos, eso es un editor. Me está mostrando que tengo estos dos documentos abiertos. No encuentro eso útil porque puedo ver ahí. Proyecto sin embargo, es realmente útil. Ese será el nombre de tu página web. Lo hemos llamado Proyecto uno. Pero si estuvieras trabajando en este sitio web, podrías llamarlo Sitio Web Ideal y ese será el nombre ahí. Entonces aquí esas son todas las diferentes páginas que tienes. Aquí si terminas en el proyecto 1 creando un montón de otras páginas, digamos que llamamos a esta nos contactamos, y hacemos un montón de otras páginas y solo hacemos una más. Yo sólo hago trampa. Te darás cuenta de eso, ¿puedes ver aquí? Se lo está agregando a ese proyecto, va bien. He buscado en esa carpeta y estoy viendo todo ahí dentro. Editores abiertos, es sólo mostrar los dos que tengo abiertos. No estoy seguro de si eso es útil para ti. Me pareció bastante difícil meterme la cabeza alrededor de ese pequeño explorador raro de ahí. Yo abro a estos tipos, no son nada. Verás que se actualiza. En lugar de ir a “Archivo”, “Abrir”, solo puedes hacer doble clic en éstas y las abrirá si aún no están abiertas. Así. Otra cosa que quiero hacer es que tengo Índice y estilo y voy a alternar entre los dos y tú giras para siempre alternando entre los dos. Te voy a mostrar un pequeño truco, no demasiados trucos antes. Nos vamos a poner más complicados a medida que vamos, pero este, es bueno para enseñar y práctico para lo que estamos haciendo. Si haces clic y mantén pulsado la pestaña en la parte superior así que voy a agarrar la palabra estilo, sosténgalo. Deja de arrastrarlo por ahí, puedes ver que estas cajas aparecen un poco raras. Eres como “¿Es ése?” Muévete vagamente por aquí. No demasiado alto, no demasiado bajo. Sobre ahí. Se puede ver que está ocupando la mitad que tiene sobre el gris. Es la mitad. Ahí vamos. Lo bueno ahora es que puedo ver mi índice y mi estilo, y no tengo que alternar entre los dos. Puedo ir por aquí y decir en realidad voy a cambiar esto. Voy a agregar una pestaña h1, h2 qué pasa con esto, y por aquí, se puede ver, mira, no tengo que irme ni alternar entre dos pestañas. Ahora, yo hago este y un color rojo apagado. Ahora, en el navegador, refresca. [ Risas] No está funcionando para nada. ¿Por qué no funciona? Te has dado cuenta de que estás como, “no puedo verlo”. Rojo. ¿Trabajo? Guardar. Yo no lo salvé todo. Ahí vas. Dije antes, me encuentro con problemas. Archivo, Guardar Todo porque guardé este lado, pero no este lado. Voy a fingir que hice eso a propósito. Pero no lo hice. Eso es una linda cosita de ayudante por la que trabajar. Si quieres deshacerte de eso, puedes hacer click en este pequeño ícono aquí. No se puede. Simplemente lo vuelve a poner. Cierra todo. Cerrar, guardado. Tengo que saber en qué botón hacer click ahí. Puedes arrastrarlo para que esté aquí abajo también. ¿Dónde está? Ahí vas. Puede ser debajo. Está bien. Lo último que quiero mostrarte es que te pasas la vida yendo de HTML, metiendo cosas e instalándolas en el CCS. Una buena manera de simplemente dividir estos ya que puedes estar en cualquiera de estos, y dar click en este pequeño ícono en el extremo derecho de aquí. Dale un click. Los separará. Hace algo raro. Encuentro ese botón, aunque se ve increíble, me parece que la forma más fácil de hacerlo es en realidad solo arrastrarlo. Entonces tengo a estos dos. Entonces style.css. Si haces clic, mantén pulsado y arrastra el nombre aquí, solo puedes arrastrarlo por aquí, puedes verlo hace que esta caja grande gris que aparece y es un poco aleatoria en cuanto a dónde termina. Pero lo que buscamos está vagamente en la parte superior justo aquí, porque queremos esa mitad. Se puede ver. HTML de ese lado, CSS de ese lado. Puedes cerrarlo si eso no te gusta. Yo lo guardaré. Ábrela. Son dos pestañas separadas, pero voy a arrastrarlo. Puedes tenerlo aquí abajo también, dependiendo de tus laptops. Yo sólo los mezclé. Hombre, eso me resulta difícil. [ Risas] Puedes poner HTML por encima de CSS. Nunca lo hago de esa manera. Siempre lo tengo por aquí. Aquí vamos lado a lado hasta ti. Ahora puedo entrar aquí y decir en realidad quiero una pestaña h2 y que tal esta. Por aquí, puedo teclear, dejar mi soporte ahí, podría escribir un h2. Se puede ver que es útil. Color, azul. Guardar. Consulta en el navegador. Check del navegador, azul. Bonito. Una cosa que debes hacer también es que tienes que ir “Archivo”, “Guardar todo”. Accidentalmente le pegué a “Guardar”. Mi cursor está parpadeando por aquí. Mira esto, si agrego un h3, y esas cosas, y por aquí empiezo a trabajar y agrego estilo mi h3. De nuevo color. Lo que sea. Yo lo guardo y estoy como, “Refresca, refresca, refresca”. Yo lo he guardado. Pero debido a cuando guardé el CSS, no salvó mi h3. Puedo pasar siglos tratando de solucionar este problema. Yo estoy como, “¿Qué tiene de malo el código?” Pasé años tratando de solucionar un problema que no existe. Solo soy yo siendo tonta y no yendo “Guardar todo” como el atajo. Si tienes el hábito de mando S o Control S, necesitas aprender el Comando, Alt S como tu afeitada predeterminada. O en una PC está Control Alt. Sí para guardar todo. Ahora mira, refresca. Sí, fácil. Entrémonos en el siguiente video. En realidad. No, me voy a casa por el día. Llevo grabando todo el día y es hora de un descanso. Mañana escucharás ya sea un más emocionado y dependiendo de lo bien que duerma su bebé o un Dan menos emocionado dependiendo de cuánto café he tomado entre videos. Pero para ti no importará porque estaré aquí en un segundo con el siguiente video donde empezamos a buscar plugins en código VS. Te veré entonces. 15. Prueba tu sitio web en vivo utilizando una extensión de código Visual Studio: Hola ahí. Este video va a hacer doble propósito; nos va a mostrar cómo instalar lo que se llama una extensión en VS Code. Esa extensión nos va a mostrar cómo hacer actualizaciones en vivo en nuestro navegador en lugar de ir y golpear actualización cada vez. Ya he instalado la extensión, voy a cambiar el color aquí a verde. Va a ser amarillo verde, y ver cómo cambia por aquí cuando golpee “Guardar”. No estoy golpeando “Refresh” listo se actualiza de forma natural. Te mostraré cómo uso esto, cómo configuro mi espacio de trabajo, mi espacio físico con mi escritorio, en mi laptop, y aprenderemos todo sobre las extinciones en VS Code. Para empezar abre cualquier archivo. Bueno, tengo nuestro index.html abierto, puedes tener cualquier cosa abierta y vamos a ir a la pestaña de extensiones por aquí. Hay un montón de iconos este es el último, o al menos éste con la plaza, con un cuadrado. No sé cómo describir ése. Da click en eso. Por otra parte, podría verse diferente al mío ligeramente por el ancho de la misma. Ver mi cursor, cuando me acerco a este borde ella, puedo hacer clic en “Hold”, arrastrarlo hacia fuera, y eventualmente si lo arrastro lo suficientemente grande. Vamos a arrastrarlo lo suficientemente grande para que podamos ver los iconos. Podría ser un poco grande para ti pero nos hará más fácil determinar qué extensión estamos viendo en realidad. Hagamos una búsqueda en la parte superior aquí así que voy a poner en vista previa en vivo. Sé exactamente lo que vamos a instalar pero finjamos que no lo haces. Quiero hacer previsualización en vivo de mi HTML. Haces una búsqueda aquí y es posible que tengas que seguir escribiendo algunas cosas diferentes para obtener la extensión que deseas. Ahora, el que vamos a usar es este de aquí llamado Live Server. Ahora esto es, supongo que para tener claro cómo se hacen las extensiones. Por lo que Microsoft gente increíble hizo VS Code y compartió eso de forma gratuita con nosotros. Gracias, Microsoft. Bueno, también lo hicieron y dijeron: “Oye, resto de mundos vamos a permitir que otras personas construyan extensiones para el software”. No lo haremos no Microsoft pero dejaremos que otras personas lo hagan. Es algo grande recordar que estamos usando servidor en vivo y se siente como si fuera parte del producto pero no lo es. Si hago click en él es algo hecho por Ritwick Dey. Un día decidió, voy a construir este plugin para ayudarme a usar el código VS porque no está incorporado por defecto así que lo hizo, lo hizo, y otras personas comenzaron a descargarlo. Ahora el problema es, es que podrían ser un mejor Live Server por ahí. Podría haber otra persona que haya hecho uno, y podría aquí Vista previa de Live Server. Eso se ve bastante bien, pero tiene estrellas inferiores, 3.5. Este de aquí tiene 5 estrellas y tiene un billón de descargas así lo juzgo. Cuando busco una extensión para resolver mi problema y la escribo y luego paso y digo: “¿Cuántas veces se ha descargado versus cuántas estrellas tiene?” Entonces es como x vector. Simplemente los comparo todos y veo quién tiene más estrellas, quién tiene más descargas, y luego yo solo escojo esa. Supongo que quiero mostrarte eso porque podrías estar viendo esto en ese futuro lejano. Podría ser Live Server no es tan bueno ahora tiene dos estrellas, porque Ritwick Dey fue atropellado por un autobús y nadie se ha estado cuidando de esta aplicación. Tienes que tomar tus propias decisiones aquí sobre cuál podrías usar y estas cambiarán con el tiempo. Vamos a usar este, y te mostraré que lo instales. Es bastante fácil, y hago clic en él, debería aparecer por aquí. Otro pequeño consejo, este es mi sitio web no se ha ido pero esta es la extensión. Me cuenta un poco al respecto y generalmente lo leo para asegurarme de que haga lo que necesitaba hacer, y te dice cómo instalarlo y “ lo siento estoy ocupado ahora si quieres mantener el proyecto”. Ver esta es una buena. Aquí hay una nota de Ritwick diciendo: “Ya no voy a apoyar este producto esta extensión”. Sé que funciona perfectamente porque lo estaba usando hoy. Pero va a haber un momento en el que probablemente no va a funcionar y las estrellas caerán. Dice: “Lo siento, estoy ocupado. ¿ Alguien quiere cuidarlo?” Eso es cierto de muchos programas ahora mucho software, XD lo está haciendo están permitiendo que se agreguen extensiones en lugar de los creadores de software. Simplemente hacen el núcleo y dejan que otras personas hagan todos los extras interesantes. Para instalarlo, es fácil hacer clic en el botón “Instalar”. Debería ser al principio. Lo puedes ver por aquí esa es tu cualquier cue visual de que está haciendo algo hasta que dice Instalado y puedes desinstalarlo si no te gusta. Puedes correr a través de un par de ellos, encenderlos y apagarlos. Ahora, para este en particular no creo que necesitemos reiniciar el código VS pero muchos de ellos lo harán, lo dirán en algún lugar aquí y si no funciona, esa es una manera bastante buena de hacerlo. Si no está funcionando, solo hagámoslo de todos modos. Vamos a “Código”, “Quit Visual Studio Code”, y ahora lo voy a volver a abrir y probablemente vaya a funcionar. ¿ Cómo funciona este plug-in en particular? Si lees la documentación básicamente dice tener el documento abierto y dar clic a este botón aquí abajo. Haga clic en “Go Live”, lanza Google Chrome, y no se ve muy diferente a donde estamos antes, excepto éste se actualizará en vivo. Te mostraremos lo que quiero decir haciéndolo un poco más pequeño, y lo voy a empujar por aquí, mover esto por aquí para que puedas verlo. Básicamente te detiene pulsando el botón “Refrescar”. Podría ser como, “No me importa tocar el botón de actualización”, y no instale este plug-in. No lo necesitamos es solo útil, me gusta pero si estás como, “Hombre, esto es demasiado trabajo y demasiado ajetreo, sí, solo puedes hacer golpeando “Refresh”. Pero supongo que lo que quiero hacer es principalmente en este video es mostrarte cómo instalar otras extensiones. Haremos otro en el siguiente video. ¿Qué termina pasando? Mira esto antes de que tuviera que golpear “Refresh”, ¿ ahora trabajo? Sí, sí lo hago. Golpeé “Guardar” puedes ver que guardé por el costado, solo se refresca automáticamente? Te mostraré en un segundo cómo uso esto pero solo recapitulemos rápidamente. Encuentra extensión, escribe lo que quieras hacer. Vamos a usar FTP más adelante, y vamos a usar alguna insinuación de código, encontrarlo, pasar y decir, oh tengo casi el mismo plazo. Este tiene el doble pero estos dos tienen críticas realmente malas. Este tiene menos pero tiene estrellas más altas, por lo que tomas una decisión basada en estrellas versus descargas. Bueno, éste se ve bien ese es el que vamos a usar, porque tiene 2.3 millones de descargas será diferente cuando lo mires, con una calificación estelar alta. Puedes cerrar las extensiones haciendo clic de nuevo en tu explore. Aquí vamos a previsualizar y lo que he estado haciendo es o tener un lado a lado como este, que va a funcionar para mi pantalla realmente grande. Aunque te mostraré cómo trabajo normalmente, y ahora voy a saltar a mi celular y te voy a mostrar. Cómo todo el mundo soy yo real, no sólo la pantalla de la computadora me. Yo quiero mostrarte cómo trabajo. Laptop, pantalla grande, los conecto para que estén conectados. Cuando estoy trabajando en la pantalla grande aquí tengo eso usando el código VS, y el código VS lanzaré la cosa cool live server. Entonces lo lanzo, va a lo grande. Lo que hago es solo hacer clic en “Hold” y lo arrastro hasta sobre esta pantalla. Lo dejo encendido ahí todo el tiempo y así es como hago mi edición. Over escuchar en código VS Voy a tratar de hacer algo para que puedas ver un cambio en vivo. H1, voy a ir y decir que el tamaño de fuente del tamaño va a ser de 400 píxeles masivos. Hit “Save” y eso debería actualizarlo está actualizado. Oye, así que un siempre estoy pirateando por aquí y mirándolo para asegurarme de que los resultados de bueno por aquí, así que tendría que alternar entre pantallas o cambiar entre ellas y vas a tener un problema extra mientras estás aprendiendo porque vas a intentar hacer esto, pero también necesitas ver el video que estoy haciendo. A lo mejor algunas personas usan un iPad aquí abajo para ver el video encendido y luego hacer las cosas aquí. Puede que no tengas, podrías tener una laptop diminuta en la que estás trabajando eso solo va a ser divertido. Tienes que alternar entre los tres videos. Pero eso es todo extensiones, asegúrate de comprobar la calificación de estrellas frente a la cantidad de veces que se ha descargado y haz tu propia elección. El servidor en vivo por el momento es bastante bueno, pero podría no ser en un año porque nadie lo está cuidando. Eso es todo. Hemos instalado nuestra extensión Live Server está medio lleno y balbuceando. Es más difícil cuando estás en cámara en vivo es fácil cuando puedes editar cuando estás haciendo un lanzamiento de pantalla suena mucho más sensato. Más divagación te veré en el siguiente video. Adiós. 16. Cómo detectar errores en tu código en HTML usando VS Code: Oye, ahí. ¿No estaría bien que hicieras un error tipográfico o te olvidaras de hacer algo o dejaras los corchetes apagados, que en realidad hubo errores que aparecieron y te dijeran en qué línea hay y cómo arreglarlos. Ahí hay tal cosa. No está instalado por defecto, es una extinción. Te voy a mostrar cómo trabajar con eso más otras formas de revisar tu código y pedir ayuda. Vamos a ir. Está bien. Por defecto tienes tictac de aire en CSS por alguna razón, pero no en HTML. Podrías haberte dado cuenta de eso ya. Cuando hago algo mal aquí dentro y me olvido de poner un colon, o meto un colon adentro, hay algunas cosas raras que surgen y dice que no sabe, no es esperar cosas y cómo arreglarse rápidamente. Estos nunca parecían funcionar. Ninguna de las correcciones rápidas funciona, Va a depender de ti arreglar. Simplemente vas a tener que pasar y decir, ¿por dónde empieza el problema? Aquí empiezan los problemas. Algo justo antes de eso está mal. Pero eso es útil sólo para conocer los inicios raros. En realidad esto borrado también, te mostraré dónde más empieza. terminé aquí, supongo es como un poco de errores justo abajo a la izquierda aquí. Doy click en esto, este es colon esperado. Eso en realidad es útil. Está esperando un colon, puedes conseguir uno. En la línea tres, y también está afectando a la línea 15 abajo, entonces, ¿qué están diciendo? Pero línea en nuestro personaje 15. Línea tres, ahí está, pero ahora cuando tienes un problema serio realmente grande, se vuelve más útil cuando hay como en la línea 1000. En la línea tres es un problema y todo el resto de éstos, no te preocupes hasta que arregles el primero, porque si arreglas el primero, todos desaparecerán. Es una cascada de errores que se corrige por el primero. Ahora bien, esto no funciona en HTML por defecto. Si pongo algo aquí que no está destinado a estar ahí y la cosa no sabe qué hacer, me dice que no hay nada que hacer si me perdí la etiqueta de inicio y hago partes de eso, se ha ido leer pero ahí no hay problema error. Ni siquiera estoy seguro si se va a leer por defecto. Estoy bastante seguro de que eso es por el enchufe que instalé antes. Vamos a activar esta comprobación de errores. Vamos a hacer exactamente lo mismo que antes, así que es lo mismo que instalar una extinción. Da clic en este ícono de aquí, y lo voy a hacer más grande para que puedas ver y esta parte superior de aquí y borrar lo que hay, y voy a decir que me gustaría HTML y error. Entonces aquí es donde se pone un poco atrapado, porque estás como, ¿cómo lo llamo? No hay buena regla, solo tienes que empezar a escribir y ver qué resultados aparecen. Podrías hacer algunas búsquedas en Google. En cuanto a comprobación de errores, a veces es caza en frío o pelusa con un L-I-N-T. Se puede pelar las cosas. Busqué por ahí tratando de encontrar uno, y el que uso se llama HTMLHint. Pero incluso entonces es realmente difícil de encontrar en esta lista. Hago algunas búsquedas en Google y encontré la que quiero. En realidad es sólo una palabra, HTMLHint, ves que no tienes oportunidad de encontrarla. De acuerdo, así que sepan que esta barra de búsqueda de extinción está bien para empezar y tratar de encontrar cosas. Pero sólo salta a Google y averigüe y sólo haga la pregunta, ¿qué es un buen plugin para esta cosa que estoy tratando de hacer. Aquí se puede ver que es uno realmente popular. Cuatro estrellas funciona para mí, y tiene 0.5 millones de descargas. Doy click sobre él para echar un vistazo. Se lee a través de lo que hace y cómo funciona, y yo voy a hacer clic en instalar, y vamos a esperar, y funciona. Este no dice reiniciar, ¿verdad? No, algunos de ellos dicen reiniciar, muchos de ellos ya no, acostumbran. Pero si no funciona, puedes apagarlo y reiniciarlo. Hagámoslo funcionar. Cerremos esta pequeña pestaña, eso solo me estaba mostrando un pequeño adelanto al producto. Consigamos los tres set. Volvamos a nuestro explorador y hagamos esto un poco más pequeño. Ahora si hago algunos errores, pon algunos códigos aleatorios donde no debería haber, mira cosita verde y me dice que hay un personaje especial en el lugar equivocado. Realmente no me vuelve a decir mucho, pero al menos sé dónde está el error, está en la línea 13, puedo ir a buscarlo. En cuanto a la comprobación de errores, ese es un buen lugar para empezar. Enciende la extensión, voy a cerrarla por el momento y sólo mantener un ojo en esto. Si eres como, no está funcionando. Antes de que me envíes un correo electrónico y digas, oye, no está funcionando, revisa tus errores aquí abajo, podrías ser capaz de autodiagnosticarte. Ahora otra cosa que hacer antes de llegar a ver si hay algún problema porque a veces no es realmente un problema. Podrías hacer algo aquí y cambiar el código y comprobarlo en tu navegador, y el navegador no se muestra y pareces que algo anda mal. A veces, probablemente una de cada 50 veces para mí, realidad no está rota. Tu código es perfecto aquí, el navegador donde has estado previsualizando como solo aferrándote a datos antiguos. Se puede hacer algo llamado almacenamiento en caché y se pone en caché tu versión anterior, de tu sitio web, así que cuando dices actualizar se va, usaré esta otra versión en caché de tu sitio web para ser rápido e inteligente y tú eres como, no seas rápido e inteligente, quiero que recargues cada vez, y la forma de hacerlo hacer eso, refrescar puede funcionar. Pero hay una forma definida real de hacer que se recargue. Si has descargado imágenes aquí, muchas veces va el navegador, bueno, si es el mismo nombre de la misma imagen, no la actualizaré porque es la misma imagen con el mismo nombre. Pero cambiaste físicamente la imagen, así que a veces las cosas no se actualizan aunque deberían. Hablar demasiado tiempo. Muéstrales cómo hacerlo, luego manda una vista y enciende este temible conjunto de herramientas. Ver Desarrollador y haga clic en Herramientas de Desarrollador. De acuerdo, haz click en eso. Esto abre el panel por abajo, el tuyo no se verá como el mío, mueve lo que se ve por defecto. Voy a apagar eso. No puedo recordar, pero hablemos de lo principal. No te preocupes por lo que aparece aquí, lo que quieres hacer es la opción. Ahora cuando golpeas la recarga, puedes hacer clic derecho en ella y te da estas dos nuevas opciones que antes no estaban ahí, porque ahora estás buscando bajo el capó usando las Herramientas de Desarrollador de Chrome. Tienes esta opción, Caché Vacío y Recarga Duro. Te olvidas de todo lo que sabes de mi sitio web y lo recargas exactamente como lo estoy mostrando aquí en VS Code. Eso puede a veces, si estoy haciendo problemas soy como, seguro debe estar bien, ¿por qué no funciona? Todo es perfecto. Yo entro ahí, reviso eso, lo hago, y a veces se arregla y tú eres como pocos, en lugar de pasar tiempo tratando de llegar y averiguar cómo está roto. En realidad no está roto, solo que el navegador no se actualizó. Muy bien, ¿qué más se puede hacer? Ahora puedes hacer totalmente preguntas de este curso como si hubiera comentarios. Yo uso la sección de comentarios, uso las redes sociales como ves todas las redes sociales en los archivos de ejercicios de clase, llegar de esa manera. Pero muchas veces soy solo yo para este curso, es un curso nuevo. Hago todo lo posible para responder preguntas. A veces consigo un poco puerta atrasada, es el fin de semana o de vacaciones, así que definitivamente puedo usar eso como opción. Pero también encontrarás búsquedas en Google, sé que es algo cojo decir, ir y buscar en Google. Pero lo que encontrarás es que hay un par de lugares principales, en realidad un lugar principal, se llama Stack Overflow. Aparecerá el desbordamiento de pila a menos que tenga resultados de búsqueda. Pero buscar en este sitio, es simplemente increíble. Escucho podcasts del chico comenzó esto, es para diseñadores y desarrolladores. Cualquier cosa web, haga una pregunta aquí, encontrará un montón y un montón de respuestas realmente útiles y son respuestas comisariadas de otros usuarios. Lo que probablemente encuentres es que en realidad no tienes que hacer una pregunta. Puedes iniciar sesión e inscribirte y hacer una pregunta, pero te darás cuenta que probablemente ya se ha preguntado, sobre todo a nuestro nivel aquí donde apenas estamos empezando. Stack Overflow es un sitio increíble y obtienes una respuesta de inmediato, y si aún estás teniendo problemas, déjame una línea. las diferentes formas en que se ve el sitio, este video curso se ve, usa los comentarios o haces botón pregunta y muchas veces para solucionar tu problema, necesito ver el código, así que subirlo. Se comprime en como una carpeta pequeña y manda eso junto, como un enlace tal vez usando Dropbox. Necesito los archivos, no tienes que trabajar una forma que funcione para ti. A veces le envías un como sistema a enviar cosas, Dropbox es muy bueno porque obvio sus capturas de pantalla son realmente difíciles de editar tu código. De lo contrario, llegué a empezar a escribir todo el asunto y tratar de resolver lo que salió mal. Ahora mi única cosa es si estás haciendo preguntas, digamos que publicas una pregunta, echa un vistazo a los otros comentarios o preguntas y ve si hay alguna que puedas contestar. Digamos que estás encontrando esto, no fácil, pero tienes ese concepto, ser como hombre, div tags, lo tienes encerrado y ves una pregunta que alguien hace sobre las etiquetas div. Me encantaría tratar de detener ese impulso donde si estás haciendo una pregunta, tienes que responder también a la de otra persona, o al menos darte una mejor opinión o intentarlo, para que podamos obtener respuestas rápidamente. Para ti, te parecerá súper valioso si eres capaz de responder las preguntas de otra persona, es bastante increíble como poder articular eso a alguien más realmente lo conduce a casa en tu propia mente sobre ese tema. Además, si estoy de vacaciones bebiendo colisionadores de maní, alguien que necesita ayudar, pero no te preocupes, tengo un bebé y un niño de cinco años. No hay colisionadores de maní en mi futuro cercano. Para recapitular, haz tu propia comprobación de errores usando el HTMLHint, que acabamos de instalar en Visual Studio Code. Comprueba que en realidad no sea un problema, al actualizar tu navegador. Pero recuerda que tienes que hacer eso entrando a la vista y entrando en Developer e inspeccionar herramientas, Herramientas para desarrolladores de KL, y luego haciendo clic derecho en el botón de actualización. Las habilidades de pila es un lugar increíble, pruébalo conmigo también. Wheez en los comentarios o me pegó en redes sociales. Una última cosa antes de irnos es que podría haber un, digamos pasa un poco, todos van a mi extinción CN y voy a estar como, genial, éste funciona. Parece que funciona. Lo instalo y simplemente no puedo hacer que funcione o está roto. En ocasiones necesitas desinstalar extinciones. Para ello, da click en este poco raro Clear Extension Insuments. Con eso despejado, tu búsqueda desaparece, y te dice exactamente lo que está habilitado, lo que se recomienda, nunca encuentro eso útil, pero por aquí, me dice las que he habilitado. Puedo hacer click en ellos y decir en realidad HTML no funciona, voy a desinstalarlo y probar uno diferente. Puedes desactivarlo temporalmente. Di que eres como en realidad, está funcionando, ¿está rompiendo algo más? Vamos a desactivarlo, y luego hacer algo y luego activarlo de nuevo para ver si esa cosa desaparece. Nunca he tenido que hacer eso. A menudo la calificación estelar arregla eso o al menos garantiza un plug-in o extinción medio decente, y eso es todo. Eso es chequeo de HTML. Está encendido por defecto para tu CSS. Pasemos ahora y en realidad empecemos a construir la estructura para nuestro proyecto uno, el restaurante. Te veré en el siguiente video. 17. Qué es encabezado de etiqueta HTML5, sección nav, artículo, pie de página principal: Hola ahí. Este video es todo sobre aprender cuáles son las etiquetas de estructura HTML5. Está bien. Son cosas como encabezado y principal y pie de página y nav y se puede ver como lo bastante simple. Son solo contenedores en los que ponemos cosas exactamente como un div, excepto que les damos nombres especiales porque hacen cosas especiales. Bastante fácil de hacer. Saltemos ahora, aprendamos qué son. Está bien. Entonces, ¿cuáles son estos elementos estructurales HTML5. Básicamente, HTML4, lo que solíamos hacer es lo que hemos hecho hasta ahora, solo hacemos que una etiqueta div recuerde una división del espacio. Es una especie de caja y le daríamos un nombre de clase. Entonces instala por aquí ahora en nuestro CSS y eso funciona bien. Está bien. Tenemos una caja en la parte superior para nuestro hitting y una caja para navegación y una caja para las partes principales, una caja para el pie de página y solo creamos todos estos divs con todos estos nombres por aquí. Entonces lo que decidieron en HTML5 es como : “Oye, estamos reutilizando estas cosas. ¿ No sería bueno tener una etiqueta real en lugar de escribir div es igual”. Simplemente escribe nav. Está bien. Al final vamos a cerrar el nav. Lo mismo con este de aquí. A lo mejor esta es la parte principal de nuestro contenido. Está bien. Simplemente lo llamaremos principal y por aquí lo llamaremos principal. Está bien. Delétalo bien y por aquí estilo la palabra principal. Está bien. Entonces eso es lo que es. Está bien. Simplemente reemplazan algunas etiquetas div de uso común con algunos nombres preexistentes. Ahora, aparte de eso, no hay mucha diferencia entre divs y este tipo de nombres predefinidos. Simplemente están listos para irse. Debe haber algunas opciones de accesibilidad para como lectores de pantalla que podrían usar este tipo de etiquetas que tienen que hacer un poco más de investigación y que nunca ha surgido en mi trabajo. Se va a deshacer esto porque estoy trabajando en este documento. Entonces, ¿qué son estas etiquetas? Hay algunos principales. Está bien. Hay todo tipo de sugerencias. Entonces soy w3schools.com y aquí hay un montón de su tipo de nuevas etiquetas estructurales. Está bien. Básicamente son solo un par de ellos los que se acostumbran. Deberías, si vas a ser como el mejor implementador de HTML5 del mundo ir a través e investigarlos a todos y usarlos a la perfección. Lo que encontrarás es que la mayoría de la gente escoge los buenos y hay mucha confusión acerca de algunos de donde debes usar algunos de estos. Porque al igual que los pros y los contras, bueno, los pros son enormes y por añadirlos, aparte de que sea un poco más claro, la gente no los usa. Entonces supongo que quería ser honesto al respecto para que no seamos algunos que no te dicen que tienes que usar estas etiquetas. Ahora, lo hice un poco a mano. Nuevos archivos de ejercicio, un poco de dibujo. ¿ Por qué estoy dibujando estos? Podría usar Illustrator. Siento que es apropiado si entro en wireframes. Si entras en wireframes y tu archivo de ejercicios, he hecho estos dos. Entonces hay estructura HTML a y b Te mostraré dos usos realmente comunes de los mismos. Entonces en lugar de imprimir el encabezado div, solo vamos a usar la etiqueta de encabezado. El nav dice lo que hago normalmente. Yo tiro en un sitio web, esta caja de afuera, el tipo de verde no tiene nombre. Deberían haber puesto uno en contenedor frío que todo el mundo usa en diseño web, pero no lo hicieron. Entonces no hay nombre para esto fuera de uno. Tenemos que darle un nombre div. Pero dentro de aquí, a menudo pongo mi encabezado. Dentro de la cabecera, pongo mi logo por aquí. No hay ninguna etiqueta HTML específica para el logo, por lo que lo pondrás como un elemento separado. Pero hay un nav, por lo que para el nav y ellos a menudo en la parte superior derecha. Esta gran sección en el medio, yo lo llamo la principal. Está bien. Bueno, yo lo llamo el principal. En realidad es un predefinido. Se puede ver por aquí. En realidad es una etiqueta HTML5 predefinida. Pensamos en principal es que esa no se acostumbra muy a menudo. Yo digo: “¿Por qué no harías una explicación tan buena de lo que es esta área?” Pero de todos modos y pie de página es uno realmente fácil. Entonces eso es lo que hago. Yo quiero mostrarles otra forma de trabajar que veo muchos otros sitios hechos. Está bien. Supongo que no quiero que todos me sigan perfectamente porque hay diferentes formas de hacerlo. Entonces otra vez, lo grande azul están en el exterior es que no tiene un nombre específico. Le daremos un nombre en un segundo, pero cabecera. Por lo que quería mostrarles este también porque el nav no tiene que estar dentro del encabezado para funcionar. Puedes tener el encabezado y puedes tener tu logo y algunos gráficos. No quiero subir ahí, pero diste tu navegación por separado. Tu navegación se puede hacer a un lado, aunque ya nadie hace eso. Entonces tienes esto, tienes tu pie de página. Ya hablamos de eso, y tienes estos tres. Estos son lo suficientemente comunes y de lado es bastante fácil. Si tienes un diseño web donde has conseguido una barra lateral o algo así. A menudo es como artículos relacionados o últimas fuentes de Twitter. Se puede tener esto. Puedes ponerlo dentro de una etiqueta div llamada a un lado y es uva clara. Estos dos son los verdaderos confusos. Entonces así es como interpreto cómo se estableció. Entonces tienes un artículo y es único de esa página. Podría ser una publicación de blog que podría ser. Estás escribiendo sobre un tema. Entonces dentro de ese artículo tienes secciones. Está bien. Podría tener un tipo de artículo principal pero podría tener algunos puntos de viñeta o como poco si una cola o una especie de cotización de pull, bits extra. Está bien. Podría tener 10 secciones o dos secciones pero tiene un artículo principal. Hay argumentos en sitios donde eso puede ser completamente al revés. Tienes una sección y tienes artículos dentro de la sección, y tienes varios artículos en la página. La documentación no es súper clara. Supongo que quería compartir la imclaridad porque podrías llegar a un sitio web con ser muy deliberado sobre el uso de artículos y luego secciones dentro de los artículos. Después llegas a otro sitio y han hecho algo implementado esta cosa de la sección de artículos, completamente diferente y tú estarías como, "Huh”. Entonces si eso sucede, si llegas a eso, momento de “Huh”. No eres tú, es Internet. Maleza clara. Pero mucha gente no usa main. Por eso no lo incluí aquí. Está bien. Entonces hemos aprendido cuáles son este tipo de etiquetas, solo reemplazos para divs con nombres especiales. Vamos a ir y empezar a construir nuestra estructura de proyecto real en el siguiente video. Nos vemos en un segundo. 18. Cómo añadir elementos de estructura de html5 a tu sitio web html: Empecemos realmente a hacer el sitio web. Nuestro primer proyecto va a ser este restaurante. Vamos a poner en la estructura para el encabezado, el principal, y el nav. Se va a ver algo así. Esta va a ser la estructura principal que estamos construyendo en este video. Encabezado, nav, principal, pie de página, fácil. Hagámoslo, y así es como se ve y lo centraremos también. Ese es el trabajo de este video. Empecemos a codificar. Dependiendo de lo bien que hayas estado siguiendo, voy a cerrar de todo y aquí excepto por, y abro mi Explorador. Yo estoy en el proyecto uno. Tengo índice y estilo abierto. Asegúrate de que los abran. Ahora en el estilo CSS, vamos a eliminar todo el código que tenemos hasta ahora y limpiarlo, y lo mismo aquí. Deshacernos de todo el cuerpo. Entonces eso es bonito y limpio. Pero si estuvieras tensando porque loco, y necesitamos mucho espacio. Asegúrate de que tu hoja de estilo esté vinculada y el título, tienes un título. Cualquier tipo de título. Pero también quiero hacer antes de seguir adelante, es que voy a cerrar en el Explorador. Sigo significando hacerlo en cada video, pero hagámoslo ahora. Vayamos a ver. Ahora, probablemente sólo voy a hacer esto. Vamos a ir a Ver apariencia y C zoom. Te verás si quieres hacerlo en un Sasquatch, puedes ver todos los textos se hicieron un poco más grandes. Probablemente sea para ayudar, principalmente para ayudar al editor a hacer zoom. Probablemente te estés mareando ya que vamos de lado a lado, revisando CSS y HTML. Entonces hizo que las garrapatas fueran un poco más grandes. Podrías ser igual, podrías ser como, yo uso gafas y necesito hacer esto más grande. Por lo tanto, ve la apariencia y puedes acercar. Te reinicias, estamos listos para irnos. Una vez que te metes en el marco de la mente, digamos que nos hemos despertado , tenemos dos ideas, tenemos un café y estamos como, vale, necesitamos hacer un sitio web para esta empresa de restaurante idea. Hemos creado nuestra carpeta local, que se llama proyecto uno, y hemos creado dos archivos, index y CSS. Nosotros hemos agregado nuestro título, y eso es todo lo que hemos hecho. En realidad, hemos conectado el style.css listo. Lo siguiente que quiero hacer es empezar a agregar mis etiquetas de estructura HTML5. Ahora, vamos a trabajar fuera de un diagrama que he dibujado a mano para ustedes. Está en el Proyecto uno en tus archivos de ejercicios y se llama a éste, marco de alambre P1A. Si quieres tener eso abierto en tu pantalla como yo, lo vamos a poner por ahí. Solo para que tipo de arreglar los tamaños y los colores y las cosas, no lo necesitas. Yo lo dibujé de todos modos. Vamos a necesitar nuestra primera y la primera es cabecera. En lugar de escribir div es igual a nav igual encabezado, vamos a simplemente escribir, porque ya ni siquiera necesitamos los corchetes angulares. Recuerda, estamos usando nuevos trucos, así que vamos a escribir encabezado. Ahí está. Ponga retorno para que haya un poco de espacio, porque me gusta el espacio entre las etiquetas y ahora lo vamos a peinar aquí en mi CSS. La diferencia entre lo que estamos haciendo ahora y lo que hicimos antes es, cuando escribimos una clase, tenemos que poner, ¿cuál es la cosa que va al frente? Ese periodo o parada completa. Entonces escribimos cabecera. Pero esto no es una clase, ya sabes que es una clase porque recuerda que escribimos aquí div es igual a clase. Está muy claro. Cuando no es una clase, es sólo una etiqueta llana vieja, no hay clase frente a ella. No tenemos que poner sus periodos, así que solo pones ese punto si es una clase. Este, no tenemos que hacerlo. Encabezado. Impresionante. Entonces, ponemos nuestros tirantes rizados y vamos a darle estilo. Ahora como antes, vamos a abrir [inaudible] está fuera para ser una caja clara. Pero muchas veces no le darías un color de fondo y una altura como estamos en ese diagrama que te mostré porque dejaste que el logo y todas las garrapatas llenaran el hueco. Pero pondremos primero la estructura. Entonces borraremos cosas como la altura y el color de fondo. Encabezado primero arriba. Tú mi amigo consigues un trasfondo. Color de guión, ahí estás. Vamos a usar el azul para este. Vamos a pegarle a Save. Vamos a ir y lanzar chulo de vista previa en vivo cool. En realidad, el mío sigue yendo desde la última vez. Vete a vivir. Iniciarlo copia de seguridad. Ahí, [inaudible] Genial. Fondo azul. ¿ Por qué no lo podemos ver? Porque no tiene altura. Entonces o bien poner contenido en ella, lo que normalmente harías, pero como no estamos haciendo contenido, separamos todo esto en videos separados que podemos sacar conocimiento yendo primero, para que podamos tienen una altura de 118 píxeles. Es por eso que decidí sin razón alguna. Ahora, vamos a previsualizar. Ahí vamos. Ahora bien, me gusta darle un ancho porque coser todo el camino a través de él podría ser lo que quieras. Pero por el momento queremos que sea agradable. Ancho físico. ¿ Qué tan ancho debes hacer tu sitio web? Esta parte de nuestro curso, le daremos un ancho físico. Diremos, hay que tener un cierto ancho. Posteriormente, conseguiremos que se adapte o responda. Por lo que cuando nos metamos en una sección sobre el diseño responsive, vamos a conseguir que responda a diferentes tamaños. Pero por el momento sólo vamos a apuntar como un tamaño de portátil estándar. Básicamente, tu ancho puede ser cualquier cosa. Depende de ti, cuál crees que debe ser el ancho. Pero eres nuevo, por lo que necesitas alguna orientación. A menudo haré los míos de 1024 pixeles de ancho. Ese es un ancho web genérico muy común. Al igual que las computadoras portátiles, por defecto son alrededor de 1300 de ancho, por lo que 1300. Mientras menos que eso, cabrá en la mayoría de las pantallas. Otros tamaños realmente comunes están en 960, se acostumbra bastante porque lo es, lo veremos más adelante, pero es fácilmente divisible por 12, lo cual no tiene sentido ahora, pero la dejará encenderse. Es las columnas que vamos a utilizar más adelante. Bootstrap, que veremos más adelante también, utiliza 992. Es un marco que vamos a ver. Pero no te preocupes demasiado. Puede ser teclado de malla. Va a ser bastante pequeño sitio web ese. Pero si lo hiciera 987, a nadie le importaría, no rompería el navegador siempre y cuando sea más pequeño que una pantalla de portátil, vamos a usar 1024. La otra cosa es también, tienes que decir 1024. Si estás a la reunión del grupo de diseño web y comienzas a hablar de 1,024, ellos van a saber que eres un novato. Tienes que decir 1024. Vamos a guardarlo y vamos a comprobarlo. Browser cool, 1024 encaja en mi pantalla gigante, y eso cabrá en pantallas más pequeñas. Tiene una altura y su fondo es azul. El principal importante es que usamos el encabezado en lugar de nombrarlo div, dándole una clase, y peinándolo por aquí. El siguiente, un par de espacios, voy a teclear nav. Entonces nav, hit Retorno, espacio, aquí vamos. Yo voy a hacer lo mismo aquí. No recuerdo haber dejado ese corsé rizado ahí. Voy a teclear nav, no necesita una parada completa frente a ella. Vamos a añadir un color de fondo. Vamos a hacer trampa porque ya se habló arriba allá arriba. Colores de fondo, te acostumbrarás, ese es uno realmente largo para escribir para obtener la sugerencia correcta. Es un largo grupo de personajes de todos modos. Vamos a revisar nuestro diagrama. Dónde está mi pequeño diagrama, va a estar 40 de altura. Usaremos el mismo ancho, pero usamos la altura de 40. Esto sucede bastante. Yo lo hago y me olvido de poner la P esperando. ¿Qué sucede en el navegador? Vamos a comprobar, no apareció. Ahorra, lo almacené aquí arriba. ¿ Por qué? Ya lo puedes ver. Porque es azul. Vamos entonces, eso va a ser rojo. Estuvo ahí todo el tiempo. Todavía no aquí. Vamos navegador. Está destinado a hacer actualización automática, ¿por qué no lo es? Ya sabes por qué. Es porque no guardé esto. Estoy golpeando mando S, es Control S en una PC. Le estoy pegando a Save, pero sólo estoy en este documento. Fuera del hábito de esta mañana de encabezar mando Alt S, que dice ambos lados, entonces aparece. Pretendo escuchar que te estoy enseñando, pero en realidad acabo de estropear. Hay un nav, ¿qué más tenemos que hacer? Tenemos la sección aquí que va a ser mi principal y este va a ser mi pie de página, 400, 100, vamos a comprobarlo. Por aquí los voy a acumular. Voy a poner una nota, voy a poner en principal, Return, poner algunos espacios entre ellos para que puedas ver. En el fondo aquí vamos a poner en pie de página. Ahora, observe que estaba jugando con mi cursor. Acabo de poner mi cursor delante de él, golpeo tab para que todo se alineara. No tienes que hacer eso. Pondré un Retorno en él para que se vea como el resto de ellos. Está bien, así que ahí están mis secciones, por aquí, voy a hacer trampa, pegar eso, éste va a ser principal. Este va a ser pie de página. Estamos haciendo muchas cosas de una a la vez. Pero a menudo cuando estás trabajando, vas a empezar a hacer esto un poco más a granel haciendo cosas. Tan naranja, no tiene que ser los colores, como este y colores aleatorios aquí dentro. Veremos más colores basados en código más adelante, pero solo estoy usando los que están prerellenados. Eran 400 y 100, no puedo recordar. Cuatrocientos 1000 lo es. Entonces altura, 400, y esto es 100. En el lugar correcto entonces. Guarda todo y luego ve a tu navegador. Ahí vamos. Es la estructura central. Ahora lo grande que te gusta, lo quiero centrado. ¿ Por qué no lo está centrando? Su siguiente. Entonces lo que podemos hacer es intentar centrar cada una de estas cajas y eso funcionaría. Pero lo que realmente es común es envolverlo todo en un div o en un contenedor y hacer eso centrado para que estos chicos vengan. En realidad es fácil sólo mostrarte. Entonces en el código VS, vamos a entrar aquí y decir el encabezado. Entonces para centrar algo, es raro. Para centrar un elemento estructural como este, no hay que me haga centrado. Entonces es un truco. Sigue siendo como si se hiciera de todos modos. Por lo que puedes poner en un margen, que es el espacio alrededor del exterior. Pero puedes poner un margen a la izquierda y yo pincharé en ese. En lugar de ponerlo en una medida real, solo puedes escribir “Auto” y asegurarte de que el punto y coma vaya al final. Entonces la sintaxis tiene que ser así. Voy a pegarle a “Save”. Lo que eso hace es echarle un vistazo a ese sitio web. Puedes ver lo he hecho al encabezado y es porque el margen es automático, solo intenta ser automáticamente tanto como puede ser y así es por eso que puede ser es, pero puedo ser masivo. Entonces va masivo pero para contrarrestar eso, dices, “quiero un margen a la derecha”. A exactamente lo mismo y lo batallan y de alguna manera por arte de magia terminan en el medio. Entonces así es como centras las cosas. Entonces podríamos hacerlo por esto y podríamos hacerlo por éste también. poco puedes trabajar a tu paso a través de él. No habría ningún problema técnico con eso excepto que solo sea un poco raro. Entonces voy a agarrar todos estos, deshacerme de él, a guardarlo. Entonces estamos de vuelta aquí y voy a poner todas esas cosas en un contenedor. Ahora no hay contenedor como etiquetas predefinidas, tenemos que usar nuestra etiqueta div de la vieja escuela. Por lo que de la parte superior aquí. Entonces quiero que sea antes del encabezado y quiero que esté cerca justo después del pie de página. Entonces aquí voy a tabular una vez y voy a decir: “Me gustaría un div con una clase de contenedor”. Ahora lo estoy llamando contenedor, podrías llamarlo plátano. Puedes llamarlo lo que quieras. Nadie lo llama plátano. si acaso, la gente lo llama envoltorio, podría ser caja. Vamos a llamarlo contenedor para que sería uno realmente común es contenedor. Entonces estilo eso, el problema es que se abre aquí, y se cierra justo aquí. Por lo que se abre y se cierra de inmediato. Necesito el final de esto. Hicimos esto jugando con nuestra cosa div tag box más temprano. Es la razón por la que lo hicimos. Porque necesito esto necesito un corte, agarrar todos los pedacitos y pedazos y después de los acabados de pie de página, lo voy a pegar. Entonces ahora si hago clic en este top de aquí, se abre aquí, cierra estos aunque, todo envuelto. Vamos a ordenarlo porque se ve un poco raro. Nosotros vamos a hacer esto. He seleccionado todos estos. Hay un atajo astutivo para ponerlo todo en orden, en lugar de tabularlo todo tú mismo, es hacer clic derecho en él e ir a éste que dice: “Selección de formato”. Simplemente tipo de sangría todo bien. La otra cosa que podría hacer para que esto parezca un poco más agradable es, sé que meto retenes, me estoy deshaciendo de ellos. Entonces voy a aclarar esto para que te quede bien. Pueden acelerar un poco esto y los veré en un segundo. Está bien, estás de vuelta. Ahora podrías irte, eso parecía doloroso y lo es, pero es como trabajo. Me gustó todo para intentar ser lo más agradable que pueda, y sobre todo hacer tutoriales porque es bueno que tengas claro dónde está todo y qué hace. Entonces es bonito y claro ahora que, eso está dentro de un contenedor, porque está sangrada. Entonces todo lo que tenemos que hacer aquí abajo es que necesitamos decir estilo al contenedor. Eres como, “¿Lo está haciendo mal?” Eres como “Definitivamente”. Esa fue una prueba real que configuré. Entonces tienes que, si estás firmando una clase recuerda, el periodo va al frente y entonces podemos decir, pegamos que no. Entonces mejor hacerlo de nuevo. Entonces haremos margen a la izquierda. Vamos a hacerlo auto, punto y coma. Lo mismo, margen derecho, auto, punto y coma, guárdelo. Debido a que todos estos becarios están dentro del contenedor, no deberían trabajar. Guardar todo, no una prueba. No estaba todo funcionando. Contenedor clase Div. Derecha, izquierda. No hay errores aquí abajo, lo he guardado todo. ¿ Qué va mal? Yo sé lo que es. Entonces he añadido un ancho porque estamos haciendo esto un poco al revés. Añadí el ancho a estos chicos internos, el contenedor necesita un ancho. Tenemos que canjearlos. Por lo que necesitas un ancho, no ventanas. Necesitamos un ancho. Estoy más agitado, ancho de 1,024. Estos tipos pueden desprenderse. Bueno en realidad se pueden quedar encendidos, ver. Echemos un vistazo. Por lo que el contenedor ahora tiene ancho. Por lo que ahora los márgenes saben empujar desde los lados de ahí. Podríamos dejar esto aquí, pero porque por naturaleza, etiquetas div tratarían de estirar para llenar el espacio proporcionado, y hemos dicho que el espacio proporcionado es contenedor, estos tipos no necesitan que se lo digan dos veces, aquí vamos, es luce exactamente igual. Ahora en cuanto al flujo aquí, quiero que el contenedor esté en la parte superior solo porque más adelante cuando vuelva aquí, busco cuando la hoja CSS se haga bastante larga, estoy como bien, que las cosas en el top son las cosas más sobresalientes. Entonces contenedor luego cabecera. Estos son supongo, más bajos en el orden de picking en cuanto a la estructura para el sitio. Está bien, entonces eso es aplicar las etiquetas HTML. Ahora en un anterior, dónde está, este de aquí te mostré en Wireframes, hice éste llamado estructura A, y puse el nav dentro del encabezado. Entonces lo haremos primero. Eso sólo significaría recortar eso. Lado equivocado, cortarlo y poner el cabezal dentro de éste. Entonces esa sería una forma de estructurar ese diseño. Digamos que el otro diseño no usó Main, usaron sección en su lugar. O sección abierta y cerrada usarían esa y sección de estilo por aquí. Pero nada cambiaría realmente. Estoy usando Main porque esa es solo la forma en que me gusta hacerlo, y me confundo por secciones y artículos. Muy bien amigos, tenemos nuestra estructura básica para nuestro sitio con algunos colores feos. Empecemos a añadir cosas extra porque sólo hemos hecho textos y cajas simples. Empezaremos a añadir colores de fondo adecuados. Empezaremos a añadir imágenes y texto y todas las cosas en los próximos videos. Te veré en un poquito después del almuerzo. 19. Cómo colorear el fondo de una página web utilizando la etiqueta de cuerpo html: Hola ahí. En este video, vamos a pasar de este fondo blanco viejo llano a este tóxico color verde. Básicamente todo te voy a mostrar cómo colorear el fondo usando tu etiqueta de cuerpo HTML y luego me voy en un poco de tangente para discutir los colores RGB en colores hexadecimales y cómo usar esta cosa de selección de slider de color. Está todo por delante en esta próxima clase. Muy bien, ahora necesitamos colorear esta parte de fondo aquí, así que hay blanco. No podemos colorear sólo el contenedor porque son contenedores solo sentados aquí en el medio así que necesitamos otra manera. Imagínese si hubiera una etiqueta que se envolviera, justo alrededor de todo en nuestra página. Mira eso. Etiqueta de cuerpo. Ya está ahí y esta es la etiqueta que le peinas para cambiar el fondo completo color. Ahora podríamos bajar el cuerpo por el extremo aquí, pero es muy común tenerlo en la parte superior así que cuerpo. Recuerda que no necesita un periodo o parada completa frente a él. Simplemente teclea body y vamos a agregar nuestro usuario de fondo ralentiza los tiempos abajo background-color Ahí está. Vamos a escoger por el momento uno de estos colores aleatorios. Coral. Vamos a checkout coral es, y es sí. A mí como que me gusta. No está funcionando con estos colores, pero así es como cambiar tu color de fondo. Haremos imágenes de fondo más adelante en el curso pero por el momento quiero enfocarme un poco en el color porque usando coral y rojo, y rojo indio y rojo rubí, hay mucho tipo de nomenclatura diferente. No sé quién se encargó de nombrar esos colores, pero oye, eso es lo que son. A menudo lo que queremos hacer es simplemente pasar por encima de él con el ratón. No estoy haciendo nada, no estoy dando click en él, solo estoy rondando por encima de él. Es raro en el código VS. A veces se enciende y no se puede hacer que se encienda a pesar de que realmente quieras así que simplemente pasa el cursor por encima de él, verás no se encenderá. Ahora lo hará. De acuerdo, y luego aquí abajo, podemos hacer un par de cosas. Este deslizador de extrema derecha es el tono así que arrástralo para conseguirlo más o menos en la zona. Digamos que queremos cambiar esto a y digamos verde brillante solo porque así lo conseguimos en la gama verde brillante y vamos ¿quieres un poco más amarillo? Amarillo-verde? ¿Un poco más de un azul-verde? Vamos a conseguir el azul-verde. Entonces por aquí está la opacidad así que cómo ver a través. Para el color de fondo, realmente no se puede tener transparencia u opacidad porque no hay nada que ver pero más adelante será útil y aquí, es donde termina este punto por lo que haces clic en mantenerlo y moverlo. Si subo aquí, no importa cuál sea el tono, voy a tener blanco, que es RGB 255 a través de todos ellos. Lo que quiero hacer es volver a meterme encima de él y volver a entrar aquí, agarrando el verde, consiguiendo el azul-verde y luego pinchando aquí y simplemente metiendo en donde siento que debería quedar bien y eso es lo que quiero hacer. Estoy eligiendo un color aleatorio por el momento. Ahora, solo tienes que hacer clic en el fondo o alejar el ratón. Te das cuenta de que los colores cambiaron de ser RGB, lo siento, de un nombre a esta mezcla roja, verde y azul y esos verdes mezclan con azul hace ahora un color verde loco. Guardémoslo y probémoslo en el navegador. Ese es el lugar equivocado. Ahí está, ahí está mi verde. Otra forma de hacer colores es usar colores hexadecimales. Voy a borrar todo eso. Ahora esto es para la gente que ya sabe. Digamos que sí sabes lo que son números hexadecimales. Comienza con hash y muchas veces la gente usará código de tres o seis dígitos. Yo sólo voy a fingir uno. Resulta que si golpeo esas teclas están al azar en mi teclado, obtengo un verde así que son o tres o seis dígitos, principalmente seis dígitos. ¿ De dónde sacamos estos colores a partir de ahí? En realidad estaban conformados por rojo, verde y azul. Los dos primeros dígitos rojo, segundos dos dígitos de verde, últimos dos dígitos azules. No necesitas saber eso, pero, y digamos que estás trabajando con pautas de marca, estás buscando un cliente corporativo, podrían darte este número hexadecimal o el número RGB, y puedes escribir lo que funcione para ti. Para mí, estoy trabajando desde esta maqueta aquí en XD veremos XD más adelante, pero este color en el fondo, he hecho clic en mi nombre aquí arriba. No te preocupes si nunca has usado XD y hablaremos de ello más adelante en el curso. Doy click en esto y se puede ver que me da mi número hexadecimal o podría ir RGB. Podría teclear esos en. Todos los diferentes tipos de creación web, productos de diseño, podrías usar Photoshop o Illustrator todo XD o Sketch para diseñar tu sitio web pero lo construyes en código VS y luego solo averiguas cuáles son los códigos de color que quieres usar. De acuerdo, ese es el código que quiero. Voy a copiarlo y entrar en código VS y eso, amigo mío, es el tipo de gris oscuro que quiero. Guárdalo, navegador, ese es el gris oscuro. De acuerdo, el primero fue fácil. Hablamos de agregar la etiqueta del cuerpo y luego me fui un poco demasiado largo sobre los colores. Sentía como si fuera el momento de hacerlo. A lo mejor es para más tarde. Lo cubriremos de nuevo a medida que pasemos si eso se sintió un poco rápido. Vuelvo del almuerzo, he tomado un café, corriendo por cosas, desaceleración ahí, respiro y te veré en el siguiente video. Estamos tomando un respiro. 20. Cómo añadir imágenes a un sitio web usando HTML, qué es alt: Este video se trata de agregar imágenes a tu HTML. Es bastante fácil. Saltemos ahora y aprendamos a hacerlo. Para agregar nuestra imagen, la vamos a poner dentro del encabezado. Al hacer clic entre el encabezado, corchetes angulares ponen retención y vamos a usar IMG, esa es la versión acortada de la etiqueta que describe una imagen y pega “Return” y pone en toda la basura que necesitamos. Entonces la fuente de la imagen, justo donde está y no está en ninguna parte en este momento, así que necesitamos ponerla en un lugar dentro de nuestra carpeta local, hagámoslo primero. Lo que vamos a hacer es que vamos a saltar a nuestro buscador, en un Mac se llama buscador, en tu PC, se llama ventana, así que encuentra tu panel de mis documentos levanta esto y en tu escritorio dentro de tu proyecto 1, tenemos índice y estilo, pero necesitamos poner nuestra imagen aquí y es realmente común no solo tirarla sentada con estos tipos. Los pones en un grupo en su propia pequeña carpeta llamada imágenes. Vamos a hacer clic derecho, voy a hacer una nueva carpeta que básicamente sea la misma en Mac o PC y podrías llamarla IMG o imágenes. Yo lo llamo imágenes, la mitad del mundo lo llama IMG y la otra mitad del mundo lo llama imágenes. Yo lo llamo imágenes, no es bueno ni malo, pero hay que tomar partido. Tenemos una carpeta ahí dentro llamada imágenes no hay nada en ella. Entonces vamos a entrar en nuestros archivos de ejercicios, vamos al proyecto 1 y dentro de aquí, hay un PNG llamado logo-adare-restaurant, voy a hacer clic derecho en él, voy a copiarlo. ¿ Dónde está la copia? Yo uso atajos, puedes decir, ¿puedo copiar? Ahí va, copia o comanda C o control C en un PC. Volvamos a nuestro escritorio y peguémoslo en, escritorio, proyecto 1, imágenes, haga clic derecho pegar elemento y lo hay, así que realmente no ha hecho mucho, supongo que trae un punto realmente bueno. Todo en este sitio web necesita estar en esta carpeta llamada proyecto uno. Recuerda, no tiene que llamarse proyecto 1, pero todo tiene que estar dentro de aquí. Se llama la raíz del sitio web, por lo que necesita saber que esto es home base y no necesita saber que el resto de su computadora existe. Solo necesita saber esto, como, pequeña carpeta es su propio pequeño mundo y fuente de imagen, así que solo escribiré im, acabo de empezar a escribir im puedes ver que va, “Oye, he mirado en tu carpeta raíz y he visto esta carpeta llamada imágenes. ¿ Te gustaría usar eso?” Eres como, “yo lo haría”. Si no aparece, probablemente esté roto y necesitas ir y asegurarte de que la carpeta de imágenes esté en el lugar correcto. Pero si aún no funciona, solo escríbalo en IMG y luego necesitas una barra inclinada para decir que estoy dentro esa carpeta y qué dentro de esa carpeta, solo hay una cosa. Es bastante inteligente, ahora vamos a guardarlo, guardar todo y vamos a previsualizar en un navegador, ahí está, está alineado a la izquierda vamos a moverlo hacia el medio, pero así es como se agrega una imagen bastante fácil. El alt-text es súper importante cuando estás agregando imágenes y básicamente, alt-text es la abreviatura de alternativa y solo significa, si esta imagen no se cargó, ¿qué texto describiría mejor esta imagen? Este va a ser el logo para Adere Restaurant es así como lo llamamos? Se trata del Restaurante Adere. Ese es mi restaurante [inaudible]. Entonces eso describe una imagen y por qué la hacemos es por un par de razones. Los discapacitados visuales tendrán un lector de pantalla que les leerá el sitio web, obviamente, si no puedes ver el logotipo, necesitas que te describan qué es, por lo que necesita ser un muy buen descriptor para que las personas obtengan lee tu página web. Otra cosa es que Google lo usa para ayudar a determinar de qué se trata tu sitio. Entonces si acabas de comprar logo, eso está bien, pero bien podrías ponerlo, para Adere Restaurant, porque si alguien está buscando Restaurantes Adere y tu sitio web es muy claro para Adere Restaurant, ayuda a tu rankings. Asegúrate de que alt-text esté realmente claro lo que es, pero también es muy específico a tu objetivo en nuestro caso queremos gente que busca restaurantes en esta localidad llamada Adere donde me mudo en un par de semanas, no puedo esperar. De todos modos, eso va a ser todo para este video, hemos puesto en una imagen, vamos a hacer cómo crear imágenes fuera de programas más adelante en el curso, vamos a separar eso, vamos a hacer Photoshop e Illustrator y XD, cómo hacer imágenes. Lo único que necesitas saber si las estás creando ahora es que no deberían tener ningún espacio. Si tengo un espacio ahí, o al menos en el archivo que he hecho en mi carpeta de imágenes, eso no debería tener espacios. Las mismas reglas que nombrar estos, deben tener guiones bajos o guiones o, no importa si no tiene espacios, solo asegúrate, no hay espacios. Ahora el siguiente video, vamos. 21. Cómo centrar una imagen en HTML usando CSS: Hola ahí. En este video vamos a sacar imagen que deslice por defecto hacia la izquierda y cambiarla por el medio. Es fácil. Saltemos y hagámoslo. Está bien. Queremos centrar esta imagen dentro del encabezado, y la forma más fácil de hacerlo en este caso es el encabezado. Echemos un vistazo a nuestro diseño. Vamos a centrar todo lo que hay dentro de ella, porque eso es lo único en este encabezado. No hay nada en las navegaciones fuera de la caja de cabecera, así que es solo una imagen. Es agradable y fácil. Encontremos el estilo de encabezado por aquí y alinémoslo al centro y usaremos el alineamiento de texto. Eres como, ¿por qué estás usando el centro de alineación de texto? Esa es sólo la forma en que es. centro de alineación de texto funciona realmente bien para horizontales. Me equivoco todo el tiempo. Horizontal o vertical, ya sabes a lo que me refiero. En medio, de esa manera. centro de alineación de texto funciona muy bien. Vamos a probarlo. Vamos a previsualizar en un navegador. Dentro de mi cabecera todo es texto alinear centro. Está bien. Es así como conseguir nuestra pequeña imagen en el medio. Empecemos a trabajar con parte del texto de este documento. Siguiente video por favor. 22. Cómo cambiar el estilo, tamaño y color de fuentes de h1 p en HTML CSS: Hola allá, compañeros diseñadores web. Este video, vamos a pasar de esto a esto. Quitando los fondos, agregando algunos textos, peinando los textos, mirando las familias de fuentes vamos a mirar el relleno desde el exterior y la parte superior, vamos a ver la diferencia entre el relleno y el margen. Wow, mucho que hacer en este video, saltemos y empecemos. De lo que queremos ponerlo en nuestro texto y que se vea así. Está bien esto está en h1 y luego hay una etiqueta p. Agarremos la copia. Lo he puesto en tus archivos de ejercicios, así que encuentra tus archivos de ejercicios y en el Proyecto 1, hay uno llamado Proyecto 1 Texto. Abre eso en algo, y, sí tengo algunas cosas aquí. Lo que queremos es, conozcamos, y vamos a traer eso primero, así que minúscula solo si miras. Puedes agregar la mayúscula si quieres y luego traeremos eso en un segundo. Saltemos al Código VS. ¿Dónde lo queremos? Yo quiero que sea, nos estamos saltando el nav que te gusta, hey vamos al nav. Haremos los bits fáciles primero y nos moveremos a medida que estamos construyendo sobre nuestras habilidades, así que h1 tab, o regresa y pega en ese texto, guarda. Echemos un vistazo en el navegador. Ahí está. Vamos a la carne. Añadamos la etiqueta p y vamos a agarrar el texto, copiarlo, pegarlo. Ahora esto trae un buen punto. Vamos a guardarlo y previsualizarlo, asegúrate de que funcione. ¿ Dónde estamos? Aquí vamos. Está ahí dentro. Ahora en la vista de código esto puede, si te gusta o no y te voy a mostrar algo que hago, así que el texto se apaga y ve en la parte inferior aquí, hay mucho texto por lo que tienes que desplazarte a través. Depende de ti si quieres dejarlo así, porque siento que esto es pros y contras con ambos. Voy a borrar eso, así que la etiqueta p, estoy golpeando mi “Borrar Clave” porque ahí tienes. Ahí vas. Todo está en una línea te podría gustar eso. Mucha gente y yo incluídos, me volteo y flop, así que les mostraré a los dos. Yo quería envolver. Una cosa que quiero que se den cuenta es que cada nueva línea comienza con un nuevo número y eso lo deja bastante claro. En la línea 22, a pesar de que es bastante larga, está todo en la línea 22 pero si voy a ver e hice esta aquí, toggle word wrap. Se puede ver que abre un hueco en la numeración, porque normalmente eso sigue siendo esa siguiente línea, pero es sólo una especie de envolver alrededor, porque depende de lo ancho que sea el espaciado. ¿ Conseguir lo que quiero decir? Depende de ti. Voy a envolver la mía, pero puede que no te guste eso. Es más fácil apagarlo haciendo clic en ese mismo botón exacto. Está bien, así que ahora necesitamos darle estilo a estos dos tipos y luego agregar algo de relleno porque, ese es audaz y es blanco y no es Times New Roman. Estamos usando arial en este caso y se puede ver esta incrustación desde los bordes. En tanto que por el momento, se ve que está corriendo todo el camino, además tenemos que centrarlo. Hagamos todas esas cosas. Entonces por aquí en mi CSS, h1 y poner en llaves llaves y vamos a hacer, vamos a empezar con el tamaño de fuente. Cuando lo estés construyendo, vas a pasar mucho más tiempo yendo, son 40, o tal vez 60 y solo probando porque ya he hecho esta clase para ustedes chicos. Ya sé que es 84 exactamente. Vamos a probar en el navegador, te meterás en el hábito y luego fuera del hábito de solo tratar de hacer todo el estilo, vas a entrar, aquí tienes. Ahora significa color de blanco y luego haces lo siguiente y luego lo siguiente sin revisar y luego lo comprobarás y algo saldrá totalmente mal y no tendrás idea de qué parte de tu código realmente rompiste. Mi consejo, sobre todo al principio, es hacer una cosa, ir a comprobarla, luego volver aquí y hacer otra cosa. Este caso tipo de una gran diversión con esto que aún no hemos hecho es la font-family. Piensa en ello como cambiar la fuente o el tipo de estas predeterminadas. Vamos a usar los predeterminados por el momento, no hay muchos, pero veremos expandir eso a medida que pasemos. Lo que voy a usar es con aérea. Voy por Times New Roman a Arial Helvetica sans-serif. Golpeemos el punto y coma, guárdalo. Vamos a previsualizarlo. En lugar de que sea Times New Roman, déjame apagar eso y te mostraré cómo lo hago en un segundo, así que tiempos que tienes con todos los piecillos, esto se le llama fuente serif. Tiene los pedacitos para pasar el rato por un lado y si lo cambio a arial, no veo piecillos. Es un sans-serif, sin los pies. Hizo un par de cosas. Uno era estaría comentando en un segundo. Éste, éste va a esperar. ¿ Por qué es un tres fuentes? Di que quieres Helvetica. Ahora, lo que estamos haciendo aquí es que estamos usando lo que se llama fuente predeterminada. Lo que está pasando es que no eres como poner aéreo en este sitio web. Lo que está pasando es, digamos que construí el sitio y nuestro amigo Bob carga tu sitio web. Lo que pasa es que su navegador entra y revisa su sistema, así que comprueba, la computadora de Bob para ver si tiene aérea y la carga. Si no tiene aérea, revisará la Helvética y si no puede encontrar a Helvetica, buscará esto, en cada computadora tiene al menos sans-serif. Es como la fuente predeterminada para el núcleo de la máquina. Te sugiero arial pero no lo tienes, sugiero Helvetica. Si no lo tienes, sugiero san-serif. Es por eso que cuando ves algunas de estas más largas, cogimos aérea porque es fácil. Pero eliminemos todo ese tipo familia, colon, familia, espacio que he escrito. Ahora el tuyo podría no haber hecho eso. Supongo que me salté eso también. Volvamos atrás. Cuando estoy escribiendo en una familia, lugar de golpear el colon, hago clic en esto porque me da todas estas sugerencias geniales. Al mirar a estos tipos se puede ver 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet', hay mucho en esa lista ahí, ¿verdad? Está diciendo que revise la computadora de Bob para Gill Sans, si no la tiene, tenga a Gill Sans MT. Si no tiene entonces poner en Calibri, si no tiene ese Trebuchet. No tiene eso, me rindo y uso el tamaño de fuente predeterminado, sans-serif. Te darás cuenta de que algunos de estos son blancos y algunos de ellos no. Algunos de ellos tienen estas pequeñas marcas a su alrededor. Algunos de ellos no. Las palabras solteras no las necesitan. Palabras o fuentes que tienen dos como un espacio en medio necesitan estos apóstrofos. Voy con apóstrofes, pequeñas cosas complicadas. Voy a volver a Arial, porque podrías escribir aquí. Escojamos unas fuentes más sugerentes. ¿ Qué tenemos? Cómic sans. Podrías escribir eso ahí y probablemente se cargará en la mayoría de las computadoras, porque la mayoría de las computadoras tienen Comic sans. Pero si no tiene va a tener a Gill Sans y luego calibri, entiendes lo que quiero decir ahora, ¿verdad? Voy a deshacerme de todo eso y empezar a teclear aérea, asegurarme de que el punto y coma vaya al final. Eso es lo que va a hacer. La otra cosa que me colé ahí y no quise hacerlo, siento que esto debería ser más tarde en el curso, pero como que hemos abierto esa caja, es que resalté esto y quería apagarlo todo por el momento, está funcionando. Es Arial. Si quiero desactivar esto, puedo hacer un truco astuto, lugar de eliminarlo y luego guardarlo y luego comprobarlo, puedes como desactivarlo momentáneamente. Básicamente necesitas esta sintaxis. Es necesario poner una baraja delantera frente a ella. Esto es sólo para CSS. Necesitas poner una barras inclinadas hacia adelante, luego tienes que poner tus asteriscos, que está atado con tu ocho, tecla número ocho en tu teclado, y especie de reverso de eso al final. Si pones eso alrededor de algo, así que barra hacia adelante, apóstrofe y al final de la misma, apóstrofe. Eso no es apóstrofe. Ése son tus asteriscos, perdón. Asterisco, slash hacia adelante, puede ver siempre y cuando esté dentro de ese pequeño grupo de personajes, lo apagará, se pone verde y el navegador ya no sabe que existe, y es solo un truco práctico. Pero también te habrías dado cuenta de que es súper rápido. Ahí hay un atajo. Es un poco temprano para estos atajos, pero ya estamos ahí. Lo que hacemos, es resaltar el bit que queremos apagar, y mantenemos presionada la tecla de comando en un mac o la tecla de control en un PC y presionamos el botón de barra inclinada hacia adelante. En mi teclado, está abajo abajo a la derecha de mi teclado. El tuyo podría estar en otro lugar, básicamente buscando esta clave, la tecla de comando y haga clic en ella y automáticamente lo haría. Es realmente útil. Resáltalo, manda la varilla hacia adelante, controla la varilla hacia adelante. Sigamos adelante y hagamos la etiqueta P. Entonces P, Este de aquí, ¿qué hacemos con éste? Hicimos tamaño de fuente. Yo quiero todo esto. Mi cerebro perezoso dice que solo cópielo. Está bien, pero el tamaño va a ser diferente. Queremos que el tamaño sea de 18 píxeles. Y dejaremos el color y la fuente. Vamos a comprobarlo. Por lo que ahora son 18 píxeles. Es Arial y es blanco. Ahora lo siguiente que quiero mostrarles es que ahora podríamos pasar y decir, porque queremos que parezca empate, para que coincida con esto, queremos todo en medio. Lo que podría hacer, es que puedo entrar en mi código TS y podría decir, hicimos éste y éste tiene mucho más sentido. Texto, alinear, centro, perfecto. Estamos hechos para el H1 y ya está hecho. Pero no se hace para este de abajo, no está centrado. Qué le haremos a B, porque todo se trata de ser económico con tu código, hazlo una vez en lugar de hacerlo como diez veces. Lo mismo, recuerda antes hicimos el contenedor, hicimos auto izquierda y derecha en la cosa que envuelve todo, haremos lo mismo por esto. Lo que envuelve todo esto, es esa etiqueta principal. ¿ Qué palabra es? Principal. Si hago lo mismo por esto, te digo amigo mío, todo dentro de ti será texto align center, hará lo mismo. Realmente no importa, pero estamos buscando puntos de estilo como diseñador front-end. Eso está funcionando, eso está centrado. Trabajemos con el relleno porque quiero un trozo grande en la parte superior y un trozo grande en los costados. Ahora podríamos volver a hacerlo al tipo específico, pero lo haremos al contenedor. Bueno es un margen a esa etiqueta principal. Haremos principal, haremos relleno y vamos a usar relleno a la parte superior. De lo que quiero que sea, ya lo he resuelto, son 80 pixeles. Vamos a comprobarlo. Impresionante. Por lo que hay 80 píxeles de relleno en la parte superior. Hagámoslo por la izquierda y la derecha. Acolchado, izquierda y este caso, es de 240 píxeles incluso. Asegúrate de que sea punto y coma al final y haz lo mismo por derecho. Bonito. Está bien, vamos a darle una prueba, ver si lo hemos roto. No, acolchado en la parte superior, acolchado en los laterales. Bonito. Ahora, a lo largo de este curso hay una especie de dos formas de meter espacios, hay relleno y margen, y esta es una manera realmente buena de demostrarlo, la diferencia entre ambos. Lo que haremos ahora es principal. Ya hemos hecho relleno. Hagamos la diferencia. En lugar de relleno top, vamos a hacer margen top, porque puede ponerse confuso como, ¿cuál uso? A veces no importa. Vamos a mostrar en este momento porque lo deja muy claro. He hecho margen top en lugar de relleno top. Mira lo que pasa. Funciona. El texto es justo lo más abajo de esa caja roja como lo era para relleno, excepto margen es el exterior de esta caja porque dijimos principal ser naranja. parte superior del margen lo aleja de la parte superior de la caja, toda la orangeness baja, mientras que el relleno es el interior de la caja, las partes internas. El texto terminará en el mismo lugar, pero el relleno es el interior de la caja, por lo que el naranja. ¿ Entiendes lo que quiero decir? Echemos un vistazo. Texto mismo lugar pero la caja llega al exterior. Margen empuja la caja hacia abajo más un poco más como dicho margen top y relleno top para ojalá lo aclare, si te gusta, casi he explicado este derecho. Haremos esto unas cuantas veces. Hagamos otros 80 pixeles. Esperemos solidificar esta idea. Se puede ver hay 80 píxeles ahí en el margen, y luego hay otros 80 píxeles aquí justo después para esto. Aquí hay un poco más porque esta fuente aquí tiene un poco en ella por defecto. Este probablemente relleno en la parte superior de este H1 por defecto, que se apagará más adelante, pero para darle un margen principal en el exterior, relleno en el interior. Entonces también dije a veces no importa y no importa cuando te deshaces de este color de fondo porque solo usamos este color de fondo para solo una especie de identificar estas cajas. No quiero una caja grande naranja ni una caja azul, así que lo que haremos es en tu margen, eliminemos esto. Adiós. Guárdalo. Echemos un vistazo. Eso es lo que quiero. Ahora si tuviera margen o relleno, puedes ver que no marcaría la diferencia. Porque el texto terminaría en el mismo lugar y porque no hay color de fondo, se obtiene lo que quiero decir. Dean, ya lo has dicho diez veces. Está bien. Lo tenemos. Si no lo has hecho, lo volveremos a hacer más adelante. Mientras estamos aquí, nos desharemos del fondo del logotipo. ¿ Dónde está la cabecera? El color de fondo azul. Eliminarlo. Aquí vamos. Última cosa antes de irme, cuando enseño esta cosa en vivo y siempre fue una en la clase, podrías ser esa persona, gente se olvida de poner el PX y salvarlo y estás como, oye, no está funcionando, estoy cambiando en el números, estoy maquillando arriba y abajo y no está funcionando. Es solo porque tienes el PX porque no es algo natural. Ahí vamos. No olvides eso. Eso es todo para este video. Te veré en un segundo en el siguiente. 23. Cómo hacer un enlace oprimible en html y cambio del color: Buenas tardes. Es hora de hablar de hipervínculos, y a veces se les llama h-refs o a tags. Se trata de enlaces clicables. Al igual que esto hacer una reserva, vamos a editar y cuando haga clic en ella, en este caso, va a abrir una nueva pestaña. Se va a ir a Google, porque no tengo un buen lugar para que vaya pero eso es lo que vamos a hacer. Vamos a hacer uno tanto por sí mismo como en línea con el texto en la parte superior aquí. Saltemos y trabajemos los caminos del hipervínculo. Para agregar un enlace, va a ser este tipo de aquí llamado Hacer Reserva. Se llama hipervínculo, así que vamos a entrar en VS Code. En realidad se le conoce como h-ref. ¿Dónde lo queremos? Lo quiero después de mi etiqueta p y notarás que mi envoltorio está apagado. Se apaga cada vez que cierras el programa, así que entre videos, me iba a ir a casa y luego dije: “No, haré un video más esta noche antes de llegar a casa”. Cerré VS Code, lo abrí de nuevo, y el envoltorio se ha ido. Es bueno demostrar que tiene un atajo bastante fácil si te pueden molestar recordarlo. Voy a poner la mía justo debajo de la etiqueta p aquí y ¿qué es? Es una etiqueta. Si escribo una a y le pego Return, pone todas las cosas que necesitamos. Necesita h referencia y en medio de las comillas, como la mayoría de las cosas aquí dentro, es donde ponemos el enlace que queremos que vaya. En este caso, voy a usar algo en Yelp. Lo pausaré aquí y volveré en un segundo con un enlace. Vuelvo solo con un restaurante al azar que encontré en un día al azar. Fui allí una vez, me gustó mucho la comida, Neville's Cross. De todos modos, así que he agarrado un enlace para que vayamos así que vamos a volver al código de Visual Studio. Cuando alguien hace clic en este botón, ¿va a ir a dónde? Podrías escribir colon HTTP, deberíamos haber hecho eso. Necesitas toda la basura. Es mejor tener toda la basura, así que HTTP colon slash, slash, dot, y la URL, ahí es donde va a ir este botón. Porque pasé por toda esa molestia y encontré un enlace, lo voy a escribir a pesar de que es realmente grande. Ahora por el momento, no va a hacer nada realmente. Voy a guardarlo, vista previa, echemos un vistazo. No funciona. Necesita algo de texto y el texto entra como una etiqueta. Ahí hay una abertura y se pueden ver los dos pequeños tirantes rizados entre las dos etiquetas h1. Voy a ir entre estas unas etiquetas y vamos a tener Hacer Reserva, eso va a funcionar. Acabo de escribirlo y podría ser cualquier cosa, solo texto como la etiqueta p, pero porque lo envolviste en esta etiqueta h-ref, no pasa nada. Vamos a ahorrar. No pasa nada. Esto trae un buen punto. Recuerda, dije que cerré código VS? Cerré el código VS, pero no cerré esta ventana de vista previa. ¿ Recuerdas el servidor en vivo? Esto trae un buen punto. Simplemente asumí que aún estaba conectado. Sé que no, pero me olvido. Cerré Visual Studio Code, lo abrí de nuevo, y esa conexión se rompió entre esos dos. Dejaré esto en el video porque es un buen punto. Lo que voy a hacer es volver a vivir. Se va a poner en marcha una nueva página, ahí está mi vieja que ya no está conectada, cerramos, aquí está mi Trip Advisor, y ahora está conectada. Aquí está. Enfriar. Ahora podría ser azul, mío es morado porque he estado antes en ese enlace. Pero dale un clic, lo carga, y ahí está ese adorable asesor de viajes. Es así como agregar una URL. Haremos un poco de estilo en un segundo también. Algo que quizás quieras hacer sin embargo es cuando haces clic en él, el momento hace clic en él y en realidad está reemplazando esa página por esto para que realmente no puedas volver fácilmente. Lo que haces es que hay una opción en tu h-ref. Lo que podríamos hacer es deshacernos de ese todo. Siento que ha hecho que se vea fea. Yo estoy más sobre hacer que se vea bien para ti, así que vamos a poner en Google, google dot com. Todo lo que necesitas hacer es después de la h-ref, así que una etiqueta es lo que estamos usando, h-ref es solo una parte de ella. Después de esto, y vamos a agregar algo llamado objetivo equivale a blanco. En realidad, creo que necesita ser subrayado en blanco. Necesito que revises eso dos veces. Démosle un adelanto. Intenta adivinar aquí recuerda, guárdelo todo, previsualizarlo en un navegador, y vamos a hacer clic y sí funciona. Enfriar. Si añades ese subrayado en blanco, ¿puedes ver qué hizo? Dejó esa pestaña ahí y lanzó este enlace en una pestaña propia. A veces está en la ventana, realmente no se puede controlar eso, pero si solo se agrega blanco blanco, se puede hacer eso. En este caso, no es lo que quiero, pero va a ser algo que voy a empatar en estos videos para que puedas volver a. Lo dejaré ahí dentro. Vivámoslo ahí dentro. El otro punto a tener en cuenta es que cuando estás haciendo URL, digamos que esto quiere ir a otra página de este sitio web, muchas veces no sabes qué es eso todavía. Estás como, “¿Va a ser el About Us página dot HTML?” Pero aún no tienes eso, así que lo que la gente tiende a hacer como desarrolladores es ponerte un hash, arriba cerca de las tres claves. El símbolo de la libra, hash, ¿cómo lo vas a llamar? Lo que eso hace es que es un realmente buen tenedor del lugar. Está claro que ese es un soporte de lugar y si lo dejas en blanco, muchas veces lo que puede pasar es que puede arrojar un error. Si lo dejas, no estoy seguro de si Chrome hace más un error. Vamos a revisar. Apenas se lanza en su propia ventana. Eso está bien. Está funcionando bien, pero algunos navegadores se asustan si no hay enlace ahí por lo que pones un hash. Te lo mostré porque eso es muy común tener. Podrías conseguir un sitio web de plantilla de otra persona y ellos han dejado hashes ahí dentro y tú estás como, “¿Qué son esos?” Simplemente son portadocumentos para que cuando se hace clic en el botón, no arroje un error. Enfriar. Dejaremos hachís ahí dentro. No, volvamos a Google. Ahora vamos a darle estilo a esto. Quiero que hagas una pausa ahora mismo y hagas un pequeño quiz pop. ¿ Cómo iba a darle estilo a esto? Sólo piénsalo bien. En realidad no tienes que hacerlo. Podrías hacerlo, eso va a estar bien. Pero quiero que veas si puedes darle estilo a esta cosa y lo primero que quiero que hagas es hacerlo blanco porque es morado en este momento, a veces es azul, si aún no se ha clicado. Yo quiero que hagas eso. ¿ Tenías un pensar? No te preocupes, solo es por pensar o por la tarde para mí. Es la etiqueta a. Es un por aquí. Voy a decir color, por favor, va a ser blanco. Va a cambiar el color de la misma y también diremos que quiero que la familia de fuentes sea la misma que el resto de ella, así que voy a escribir todo eso. Se puede ver ahora que no voy tan lento como lo hice al principio de la clase, en realidad se puede agregar código bastante rápido usando todas esas pequeñas pistas útiles. Si voy un poco rápido, lo siento, pero ya lo hemos hecho un par de veces. Echemos un vistazo. Oye, es el color correcto, es la fuente correcta, y vamos a dejar el subrayado porque lo quiero aquí, porque siento que a veces si no es muy claramente un botón clicable, necesitas dejar el subrayamos, pero digamos que no lo es y quieres deshacerte de él. Es una cosa rara. Se llama decoración de texto, tiene sentido pero también es raro y quieres ponerlo a ninguno. Text-decoración, ninguna, se deshará del subrayado ahí. Yo quiero el subrayado. Te dejaré esto en el código aquí, así que solo lo comentaré. Eso lo voy a hacer un poco más en este curso para que las cosas que te he mostrado estén en los archivos completados guardados, pero aunque no quiera usarlos yo mismo. Ahora la otra cosa a saber de este hipervínculo, lo hicimos como propias etiquetas separadas por lo que ha terminado colgando de abajo aquí. Digamos que quieres hacer de esta palabra como la palabra satisfaciendo un enlace. Usemos la palabra Adare. Digamos que la gente puede hacer clic en él y va a un mapa de Adare. En dónde está? Yo sólo voy a poner algunos espacios sólo para despejar todo. No quiero que haya espacios pero quiero dejarlo claro para ti. Vamos a hacer lo mismo, una etiqueta, que tiene una a y ese retorno lo pone ahí dentro. ¿ A dónde va a ir? Todavía no lo sé. Se va a ir al hash y dentro de los corchetes aquí, lo que quiero aparecer, voy a agarrar esto [inaudible] se va a ir dentro de ahí. Vamos a guardarlo, vamos a comprobarlo, y se puede ver que está subrayado. Se le ha dicho qué hacer en cuanto a la etiqueta a. El a tag todavía hace referencia tanto a éste como a éste, y está agregando el subrayado y está en el texto. A éste se le llama en línea. Se trata de un h-ref en línea o de una etiqueta o hipervínculo. Sostiene el nombre para la misma cosa. A. ¿Qué representa un? Creo que es enlace activo, debería pollito. Pero debido a que se coloca en el flujo de esta etiqueta p, simplemente fluirá a lo largo de esto porque se coloca por sí mismo fuera de la etiqueta p. Se cuelga por sí mismo, así que no sabes si realmente hacen algo. ¿ Te diste cuenta de los otros espacios? No cambió nada. Ya ves acabo de editar ahí para que se vea ordenado, pero lo volveré a poner ahí. Ese es el curso de choque sobre los hipervínculos. Entrémonos en el siguiente video. 24. Cómo añadir una imagen de fondo expandible a un sitio web: Hola a todos. Es hora de reemplazar nuestro aburrido fondo gris por nuestra emocionante imagen de fondo. Está fresco, se puso un estiramiento, cabe ahí, cubre todo el fondo, se ve limpio. No estoy seguro de lo que estamos comiendo, pero se ve sabroso. El ironía es que soy vegetariano, pero la carne se ve bien, sobre todo en estas fotografías. De todos modos, entremos y trabajemos como hacer el fondo. Para agregar nuestra imagen de fondo, es un poco extraño. El video anterior o uno de los videos anteriores, editamos nuestra imagen. Lo editamos al HTML y apareció en la parte superior de nuestro documento aquí, y es genial. El único problema con editarlo a tu HTML es que no puedes tener cosas por encima, o al menos no muy fácilmente. Nosotros lo queremos en ese fondo, y queremos que sea más un efecto, en lugar de algo con lo que puedas interactuar, simplemente escondiéndote en la parte de atrás para que sea más como un estilo, digamos. Editamos en los estilos CSS. Lo hacemos aquí en nuestro styles.css y editamos a, ¿a cuál debemos editar? Recuerda, nuestra etiqueta que viene todo el fondo que hicimos gris, es la misma etiqueta. El body tag aquí que hacemos gris, podemos dejar gris ahí y dejo ahí el color de fondo normalmente porque a veces se tarda un poco para que la imagen se cargue, lo que al menos hay algo en el fondo hasta que se carga. De la forma en que lo hacen, es un bien llamado, se llama background-image, nice. Algo que no está muy claro es qué hacer a continuación, y su URL, es una de esas opciones ahí dentro. URL es una URL de imagen de fondo dentro de esos corchetes, escribe a dónde va. Va a estar en imágenes/, suele estar en la slash delantera y el CSS dice: “Oye, ¿te refieres a esta imagen, el logo?” Eres como, no, no el logo. Quiero otra imagen que he usado para el fondo. Te lo he guardado, está en tus archivos de ejercicios. Necesitas salir a tu buscador, encontrar tus Archivos de Ejercicio, encontrar Proyecto 1, este de aquí llamado fondo, lo voy a copiar, estoy usando Command C en un Mac, Control C en un PC, escritorio, eres va a pegarlo en esta carpeta de imágenes junto con el logo. Ahora, ojalá pueda borrar la barra delantera, ahí tienes, vuelve a teclearla y dice: “¿Te refieres a este tipo?” Yo soy como yo, de ahí el chico. Nos vamos, pongamos nuestro punto y coma, vamos a ahorrar, y vamos a ver si funcionó. Eso podría ser suficiente. Podrías estar como hecho, seguir adelante. Pero si eres como yo y ves que el momento no hace exactamente lo que quiero, quizá te guste. Pero por el momento, quería moverme. Si alguien mirando en una pantalla más pequeña que la imagen todavía está sainted. Es una clase CSS realmente agradable, fácil que podemos usar. No somos un atributo de clase, se llama fondo, otro bueno, tamaño de fondos y ahí está este aquí llamado cover. cubierta de tamaño de fondo nos permitirá hacer eso. Vamos a darle una oportunidad. Cambiar tamaño, bonito. Ahora, mira no había oído hablar de repeticiones nativas porque la relación de esta cosa es un poco extraña y la imagen que tenemos no encaja del todo en el aquí, así que tiene que hacer algo en este momento, lo está repitiendo. Echemos un vistazo a deshacernos de la repetición. Va a ser la mitad de [inaudible] fijo. Decimos antecedentes, repite. Antecedentes me gustaría sentarme a no repetir por favor. Impresionante. Es bueno ir y se ha ido. Porque ahí cajas grises, tienes que decidir cuánto te molesta eso. Porque lo siguiente que tenemos que hacer es un poco extraño. Para que esto funcione, lo que haces son los cuerpos, la etiqueta con la que hemos estado trabajando, correcto. Pero hay una etiqueta general sobre todo HTML cool. Para que eso desaparezca, hay que poner otra etiqueta justo encima de ella y decir, me gustaría que la etiqueta HTML tuviera una altura de un 100 por ciento y eso arregla eso. Ni siquiera estoy seguro de por qué, pero eso es lo que hacemos. Al igual que a veces en diseño web, te lo voy a explicar y a veces no puedo así que ahí vas. Está cubriendo, encaja, es bonito. Una cosa más si te pones un quisquilloso es que santo y se queda ahí dentro, pero no es del todo santo. ¿ Te gusta por qué y bastante centrado? Puedes meterte con el fondo. ¿Cómo se llama? Línea de fondo. Si lo deletreo. Alineación de fondo, no es, posición de fondo. Eso es todo. Posición de fondo y tecleamos en centro; y eso debería arreglar eso. Ahora irá del centro, en lugar de izquierda y derecha, me gusta. Una cosa si estás siguiendo en una pantalla realmente pequeña que te gusta la miel lo haría hacerlo que entonces es verdad. Yo sólo pensé que ellos están en ellos, como si tienes una pantalla realmente pequeña, va a ser muy difícil de gustar arrastrarla lo suficientemente grande como para que haga todos los bits de redimensionamiento. Eso es algo que saber. Supongo que lo que estás haciendo, en por como probablemente puedas salirte con la suya casi todo eso desaparecido. El problema será cuando alguien como yo con una pantalla gigante lo abra y se vaya, no se ve bien. Si estás trabajando en una laptop realmente pequeña y lo estás, no puedo ni probar estas cosas. Más adelante en el curso te voy a mostrar cómo fingir ser una pantalla realmente grande. Tan solo quería agregar que tienen por si acaso te gustaría que eso funcione, pero es potencialmente necesario. Imágenes de fondo hechas y espolvoreadas. 25. Cómo hacer que una etiqueta div sea transparente usando HTML y CSS en VS Code: Hola a todos, vamos a mirar a hacer ver las cosas a través, normalmente referido a codificar como transparencia alfa u opaquidad. Entiendes lo que quiero decir, vamos a ir de esto a esto donde es un poco ver a través o mucho ver a través. Te voy a mostrar ahora cómo hacerlo en CSS. Está bien para hacer la transparencia lo vamos a hacer a este nav Actualmente, es rojo, primero cambiémoslo a un color que tenía que hacer negro. Entonces eso va a VS Code. Vamos a encontrar nuestro nav. Ahí está su color. Voy a teclear de negro. Realmente no necesitábamos hacer eso primero, pero asegúrate de guardarlo todo, previsualizarlo. Ahí está, es negro. Queremos que sea un poco transparente. De acuerdo, ya lo mencioné antes, pero si resalta la palabra negro o simplemente pulsa mejorar, un poco difícil para activar esta cosa. Yo encuentro hombres, aquí tienes. Eventualmente puedes conseguir que esta cosa vaya. Ahora bien, en realidad no importa. Puedes hacer un negro aquí sobre la marcha. Lo que termina pasando es que si escoges un color sólido, obtienes tres opciones. Rojo, verde y azul por el momento, si todos están puestos en cero, eso significa que te pones negro. Los pones todos a, 2,5,5, los consigues todos. Pero crea un color blanco. No tiene nada que ver con ensayo largo excepto que se puede agregar una cuarta dimensión. Entonces por aquí, si arrastro el deslizador hacia abajo para decir, estoy mirando aquí arriba, vale, que cuando vean 0,0,0 y hay esta nueva opción de edición extra. Piensa en ellos como porcentajes. Si voy alto, miro cuando estoy en sólido uno desaparece, pero si bajo 0.975 es como 97 por ciento eso es 50 por ciento, ver y conseguir justo aquí abajo, es como 10 por ciento opaco, 10 por ciento opaco es mejor explicación. Entonces estoy 10 por ciento de color en él 50 por ciento del color, 90 por ciento significa que es casi completamente negro otra vez, si te expliqué eso, vale, lo arrastras hacia arriba y luego, lo arreglarás. Entonces voy a tener el mío alrededor del 30 por ciento. Está bien, y ya verás ahí está. Por lo que 0.3 significa que es 33 por ciento negro. El no muy guardarlo, vamos a probarlo. Entonces mira aquí te vas Ahora si eres de la vieja escuela Diseño Web y usando esos números hexadecimales, recuerda ese hash, hicimos el hash meramente corrido, y yo elijo algunos colores aleatorios. No se puede hacer transparencia alfa con eso. Tienes que usar esta cosa llamada RGBA. El cual tiene rojo, verde, azul, y alfa, que es el ver a través del EBIT. Es así como hacer ver algunas cosas a través. Ahora lo hemos hecho por el color de fondo aquí en nuestro nav. Pero podrías hacerlo con Type. Puedes hacer cualquier color que hayas aplicado a las cosas y ligeramente opaco o mucho opaco. Eso es todo. Te veré en el siguiente video. 26. Cómo crear una navegación de texto simple en un sitio web con HTML y CSS: Hola ahí. Este video vamos a hacer de esta sencilla navegación de texto. En realidad vamos a construir, esa es la maqueta que realmente vamos a construir. todos modos vamos a llegar tan lejos en este video. Se acaba de agrupar en la parte superior aquí, la alineación aún no es perfecta, pero está ahí, todo está enlazando. Vamos a aprender algunos dulces nuevos atajos en el camino. Vamos a ir. En primer lugar, pongamos en nuestros enlaces. Aquí dentro de nuestro nav, voy a poner un retorno dentro, y quiero poner en cuántas opciones tenemos? Tenemos 1, 2, 3, 4, 5, 6. Quiero seis etiquetas a. Este va a ser un menú bastante sencillo. Vamos a construir probablemente cuatro en todo este curso, texto simple uno, hará botones en el próximo proyecto y luego será desplegable y fresco jQuery Burger menús para móvil. Nos pondremos más fantasiosos y más fantasiosos a medida que avanzamos pero solo uno sencillo para empezar. Lo que quiero hacer es agregar mis seis enlaces. En Visual Studio Code, quiero escribir una etiqueta, devolver. Vamos a poner en hash para que no vaya a ninguna parte. El primero es el hogar. Ahora, podemos hacer eso seis veces y eso está totalmente bien. Puedes copiarlo y pegarlo y cambiar el texto. Te voy a llevar en un atajo pequeño. Intentaré introducir pequeños atajos a medida que avanzamos. Simplemente son divertidas y son buenas y son útiles y los uso así que sé que son buenas. Lo que podemos hacer en VS Code es que lo podemos hacer en una etiqueta minúscula a, pero quiero tres de ellos. Podemos usar los tiempos seis de ellos. Tiempos en esto es la clave del asterisco. Está debajo, a menudo combinado con el número ocho así que mantenga presionada “Shift” y haga clic en “ocho”. Entonces un asterisco seis significa que quiero que estos seis de ellos peguen “Regresar” eso. Eres diseñador web y eres un hardcore y estás codificando rápido. Lo que quiero hacer es que quiero poner un hash y todos estos. Te imaginas si hay un atajo para hacer todo eso, ahí está. Eso es un proceso un poco lento. Mucha del tiempo terminas trabajando en estos múltiples grupos haciendo múltiples cosas de todos modos. Podemos hacer es, vamos a hacer una más. Un atajo más y simplemente puedes escribirlos obviamente, pero si estás en un Mac, está debajo de éste de aquí. Ese es el atajo que buscas. Está a la vista, no está bajo selección. Es éste de aquí, Añadir Cursor Abajo. En un Mac es el comando de opción y la flecha abajo. Los cursores arriba, abajo, izquierda derecha. En una PC, es Control Alt flecha abajo. Aquí donde estoy parpadeando, así que asegúrate de que el cursor esté parpadeando ahí. En mi Mac, voy a mantener la opción Comando, Alt, Comando y golpear abajo, abajo, abajo, abajo, abajo, luego voy a escribir hash. Si estás en una PC, es Control Alt down, down, down type hash. Yo quiero deshacerme de eso ahora porque no quiero casa y todos ellos. Sólo voy a dar click una vez en cualquier otro lugar. Estoy haciendo clic en el primero y en tu texto recuerda en los archivos de ejercicio es un archivo llamado Proyecto un texto. Yo sólo voy a copiar y pegar en absoluto. Copiar pegar, puedes hacer lo mismo, si puedes escribir, solo podrías escribirlo todo. No tienes que meter nada. Aceleraré esto. Está bien, gracias editor, es Jason por cierto, lo llamo editor todo el tiempo pero se llama Jason y es impresionante, Gracias Jason. Simplemente guardamos todo y lo previsualizaremos en el navegador y, ¿esta actualización? Ahí está. Tengo todo mi texto ahí dentro. No está del todo bien porque recuerden, es porque hay una etiqueta y nosotros peinamos el a tag aquí abajo. Estos tipos, oye, nosotros los mismos, hagamos lo mismo. Vamos a tener que hacer algún estilo específico para que esto se vea como mi maqueta aquí, pero podemos hacerlo. Lo primero que haremos sin embargo, es que queremos centrarlo. Lo que vamos a hacer es que ya hemos hecho esto antes. Queremos ir por y centrar usando centro de texto lo hará al nav, diremos todo el texto dentro de mí, Va a ser text-align, center, semi colon, guardar, guardar toda vista previa en un navegador, eso nos consiguió, pendiente para meterse con subraya con qué meterse, pero eso va a ser todo para este video. Al menos ponemos los navs y aprendimos algunos atajos. Está bien, tengo doble espalda. Terminé el video. Yo era como debería mencionar esto. Ya hemos empezado a hacer atajos. Sentí que era el momento de empezar a hacer algunos básicos. Si eres como, ¿cómo voy a recordar estas cosas? O tal vez ya empezaste a escribirlas. He creado una carpeta en tus archivos de ejercicios, archivos de ejercicios, hojas de accesos directos abren eso, y tenemos que ignorar esa por el momento. Lo veremos más adelante, pero estos dos serán útiles, código VS se verá primero. Hay un Mac o PC dependiendo de lo que estés usando. Voy a abrir mi Mac uno. Digamos que es una bonita página que puedes imprimirla y tomando a continuación tu computadora resalta las que encuentres útiles, no las vas a recordar todas, pero la que acabamos de usar puede ver selección multicursor, ese es el que uso para insertar cursor a continuación. Podrías simplemente resaltar ese ahora, imprimirlo, resaltarlo y decir que fue útil entonces voy a tratar de recordar que uno que podrías haber leído, tal vez más adelante en el curso podrías leer y conseguir, luego darse cuenta de que era el atajo, puede ser realmente útil. Bueno, éste salva todo. Si no puedes recordar, resalta esa. Está bien, eso es código VS. El otro de ahí dentro se llama emmet. Emmet del que realmente no hablamos, Tiene un nombre separado, los atajos que llamaban atajos de emmet. Pero para ti, son estos es cuando decimos que todos los emmet son cosas como una etiqueta. Si escribo un y golpeo retorno, emmet está haciendo eso, pero realmente no importa cómo se llame, pero emmet, es como se llama. Lo mismo antes hicimos a veces seis recordar. Eso es un emmet. lo podemos ver emmet abreviatura ahí vas. Probablemente lo hayas visto. Ellos lo llaman emmet y he hecho un pequeño atajo. Bueno, no lo he logrado. He recogido esto para ti. El problema con éste, son como 24 páginas. Tiene todo lo que podrías hacer. Me parece útil esta impresión fuera de las dos primeras páginas, porque el resto de ellas, es bastante duro. Han destacado los realmente importantes a los que es probable que uses. A lo mejor solo imprimes los dos primeros off. Me parece realmente interesante mirar estas estructuras que puedes hacer. Nos meteremos en estos más adelante, pero probablemente sea un buen momento para imprimirlos ahora para que puedas empezar a garabatear tus dulces nuevos atajos en él. Muy bien, ahora es el final del video. Nos vemos en el siguiente. 27. Cómo estilizar con css más de una etiqueta de clase por vez; clases compuestas: Oigan a todos. Vamos a llevar nuestro menú en este video, que actualmente se ve así a esto. Acolchado a ambos lados, algún espacio entre ellos, tamaños de fuente. Para hacer un esto, vamos a tener que aprender qué es un selector compuesto. Es bastante cool y agradable y simple. Nos va a permitir ser diseñadores web más fantasiosos. Saltemos y aprendamos qué hace. Selector compuesto. ¿ Qué es una clase compuesta? Es sólo más de uno. Tenemos un problema ahora, porque lo que quiero hacer es, quiero darle estilo a estas a-tags. Yo quiero apagar el subrayado, porque no lo quiero aquí. Pero ya he estancado las a-tags. Recuerda antes, dijimos, "a-tags, queremos irnos”. Eso lo apagamos, porque queremos dejar el subrayado. Tenemos un a-tag controlando un par de cosas. Lo que podemos hacer es usar algo llamado especificidad. Simplemente significa, anulará si vas más específico. Generalmente todas las a-tags hacen esto, pero si digo la a-tag específicamente en el nav, haz esta otra cosa, eso ganará porque es más específico. Genérico, un poco más específico, porque estamos diciendo las a-tags dentro del nav. Hagámoslo entonces código de Visual Studio. La forma en que estructuras una clase compuesta o selector compuesto, compuesto solo porque hay dos partes en él, puedes tener más de una. Nosotros sólo vamos a hacer uno. Lo que queremos decir es, si hay un nav, con un dentro de ella, solo pones espacios entre ella. Porque estamos tratando con selectores de etiquetas, el nav y el a, no es una clase, no necesitamos la parada completa. Lo hace todo por sí mismos, con espacios entre ellos. Si hay una etiqueta a dentro de un nav, haz esta otra cosa. Lo que queremos decir es, text-decoración está establecido en ninguno. Está bien, genial. Punto y coma, hecho, guardar. Echemos un vistazo; es eso, ¿verdad? Sí funciona, genial. Esa está bien, pero porque esa dice que las a-tags están dentro del nav, lo tienes. Selectores de compuestos. Súper útil. Lo hacemos de esta manera porque es la forma más sencilla y es agradable y limpia, y clara. Podrías haberte deshecho de esto. Voy a envolverlo en mi comando slash forward, para comentarlo. Lo que podría haber hecho es crear una clase llamada, “sin subrayar”. Yo quisiera mostrarles los dos caminos, porque no hay nada realmente malo en esta forma. Por aquí, voy a decir text-decoración se va a poner en nada, y por aquí podemos decir, en realidad me gustaría, después de la “HRF” allá, voy a poner en una clase llamada “no-subrayado. Guárdalo, y ojalá sólo uno de ellos esté funcionando ahora. Ellos te van. El problema con eso es que tengo que aplicar esa clase a todas estas etiquetas, y eso está bien. Si hago otro, tengo que entrar a su clase. No hay problema real con ello. Pero se puede ver la elegancia de este primero. ¿ Es elegancia la palabra? Siento que lo es. Impresionante. Hemos aprendido qué es el selector compuesto y la sintaxis para ello, espacios. Lo siguiente que quiero hacer es, quiero ordenar aquí el relleno. Centrado en una caja. Centrar horizontalmente es perfecto. Verticalmente es muy duro, sorprendentemente duro. No me preguntes por qué, pero lo es. Más adelante en el curso, cuando veamos algo llamado flexbox, será más fácil. Pero por el momento, en nuestro nivel de habilidad actual, es súper duro. Lo que vamos a hacer es fingir. Simplemente vamos a poner algo de relleno en la parte superior y la inferior, hasta que parezca que está en el medio. La forma más fácil de hacer esto, hay un par de maneras, pero la forma en que lo vamos a hacer es, vamos a añadir algo de relleno a este nav. Porque por el momento está justo en la parte superior por lo que vamos a añadir un poco a la parte superior y un poco a la parte inferior y tal vez nos deshacemos de la altura. Vamos a darle a eso un intento de mostrar lo que quiero decir. En primer lugar, vamos a deshacernos de la altura, eso lo hará un poco más claro. Aquí está mi altura de navegación. Puedes comentarlo o simplemente eliminarlo, porque no lo quiero. Ver su colapsado, pero si agrego algún relleno al exterior del nav, o podría añadirlo a las propias a-tags reales, realmente no importa. Se lo vamos a hacer al nav sólo porque me apetezca. y vamos a decir “relleno” y vamos a hacer “padding top”. Voy a hacer 14 píxeles en la parte superior y lo mismo para la parte inferior. Simplemente voy a copiarlo y pegarlo en la parte inferior. Impresionante. Vamos a guardarlo y vamos a previsualizar en un navegador. Se puede ver que llegamos al mismo punto. Se derrumbó, ahora hay relleno empujándolo hacia fuera. Si lo hiciéramos con márgenes, no funcionaría bien. Yo solo tambor esto en ti, la diferencia entre márgenes de relleno. Se puede ver que hay algo de relleno. Hay 14 píxeles arriba y abajo allá, porque si lo pongo a un 140, se puede ver que hay mucho espacio ahí. Pero como es el exterior de la caja, realmente no hace lo que necesitamos que haga. “ Deshacer”, “deshacer”, “guardar”, vista previa. Bonito. Arreglemos un par de cosas más que me están molestando, como el tamaño de la fuente es un poco grande, y el espacio entre los botones del menú es diminuto. Tenemos que ajustar eso. Vamos a saltar al VS Code. ¿ Qué debemos hacer? Se lo haremos al nav como, porque quiero que esto sea un tamaño de fuente de 12 píxeles. Nosotros lo queremos bastante pequeño para que coincida con mi diseño? Echemos un vistazo. Guardar. Eso es mejor. Ahora, hagámoslo al espacio entre todos ellos. Lo que haremos es un poco de relleno. No importará si es relleno o margen en este caso. “ relleno” y “izquierda”. Voy a poner en 10 pixeles, y haré lo mismo por el relleno correcto. “ Derecha”, 10 pixeles. Echemos un vistazo, impresionante. ¿ Por qué hice ambas cosas? Porque si hago eso, va a estar un poco equivocada. Se va a quedar bien, pero se va a empujar un lado, y supongo que realmente no se puede notar eso en esto. Imagina que tenemos un poco de relleno a un lado pero no al otro. En cada uno de estos. Visualmente no se ve diferente, pero tienes relleno a ambos lados ahora. Simplemente hago eso a menudo. Simplemente agarro mi cursor y hago clic sobre él y arrastre, para intentar resaltarlo, y me da una especie de vaga idea de lo que está pasando. Esa es nuestra navegación básica. No vayas a ninguna parte todavía. Tenemos una página de índice, tendríamos que crear una página de menú, y una página en línea de pedidos. Solo hemos hecho uno hasta ahora así que solo estamos usando esos hashes o símbolos de libra, solo para hacerlos activos, pero en realidad no hacerlos ir a ningún lado todavía. Eso es todo para nuestra navegación realmente sencilla. Pongamos al siguiente video. 28. Proyecto de clase 02: Pie de página: Sorpresa, es hora de la tarea. Tienes todas las habilidades ahora para recrear esta foto. En el momento en que se ve así en el navegador, esta cosa verde. No te preocupes por este gran mapa en el medio. Eso lo vamos a hacer en un rato. Quiero que te enfoques desde el mapa hacia abajo. Por lo que te vas a estar enfocando en esta parte. Entonces lo que quiero que hagas es que me gustaría que lo hicieras parecer así. ¿ Está pendiente? ¿Es margen? ¿ Cómo lo conseguimos en el centro? ¿ Cómo hago que la fuente sea más pequeña? Quiero que lo envuelvas en una etiqueta P y quiero que el fondo sea negro pero transparente, pero no tan transparente como eso. Entonces eso es un poco más oscuro. Esas son las reglas. Recuerda que en tus archivos de ejercicios hace mucho tiempo al inicio de los archivos de ejercicios, hay uno llamado proyectos de clase, y aquí hay un word doc. Eso es todo aquí. Se trata de proyecto de clase 2. Así que corre a través de esto. Ahí está el mark-up que acabo de explicar, no tiene por qué ser pixel perfecto. ¿ Algo más? Ignora el mapa, el espaciado por encima y por debajo del pie de página. Ahí está el texto para ello. Tan solo asegúrate de que esté en una etiqueta P. Podrías saltarte que los botones sean adecuados. Simplemente ponlo en una etiqueta de párrafo, y luego dale estilo a eso. Poco indicio, probablemente vas a necesitar un selector compuesto. Eso es lo que intento insinuar para que hagas en este. Colores de fondo transparentes, y eso es todo. Una vez que lo hayas hecho, toma una captura de pantalla asegúrate de que esté conmigo en el panel de asignaciones. Tan solo toma una captura de pantalla, métela ahí dentro. Dependiendo de dónde estés viendo esto, en los comentarios, en las asignaciones, y envíenme en Instagram. Mantenerte honesto. Mándelo y dile : “Mira, tengo este archivo y lo hice sin hacer trampa”. A lo que me refiero con hacer trampa es abrir los archivos completados y/o ver el siguiente video donde lo paso y te muestro como hacerlo. Te demostrará a ti mismo que puedes hacerlo. Compártelo conmigo. Asegúrate de usar este hashtag, #BYOLweb. Eso es todo. Ve a hacer tu tarea. Te veré en el siguiente video. 29. Proyecto de clase 02: pie de página COMPLETO: Bienvenido de nuevo. ¿Cómo fue la tarea? O estás sentado ahí presumido pensando: “Sí, lo hice. Soy diseñador web. Aplasté ese pie de página y se ve genial”. o estás sentado ahí yendo, “No eres tan buen maestro como crees que eres, Dan. Salió mal y el sitio no funciona en mi computadora se incendió”, lo cual de cualquier manera, estoy muy contento con. Porque es el principio, eres nuevo. Si te lo saltas, aquí es donde estoy tutting, estoy temblando el dedo. No lo puedes ver pero estoy tutting, sacudiendo mi dedo, tut, tut. Debiste haber hecho tu tarea. Pero si no lo has hecho, está bien, estamos todos aquí ahora, vamos a pasar por cómo lo haría yo. Hay un par de formas de hacer esto. Hagamos la forma en que lo hice. Si llegaste a una buena solución, eso es perfecto. Pero sólo veamos. Vayamos a VS Code, y por dónde empezamos? Me pregunto por dónde empezaste. Siento que, quiero colorear primero el fondo por alguna razón. Vamos al pie de página. Es uno fácil. Deshazte de esto, y podríamos simplemente escribir en negro, pero en realidad podríamos simplemente pasar por encima de esto y arrastrarlo hasta esta esquina inferior. Simplemente lo estoy arrastrando pase donde necesita ir, soltando y luego regresando y simplemente arrastrándolo hacia abajo. Ahora me siento [inaudible] alrededor del 80 por ciento pero ¿qué tal eso? Guárdalo. Vista previa en el navegador. Es transparente tal vez lo oscuro que la espalda realmente no importa. Pero tenemos la idea justo ahí hay un poco de negro y es transparente. Vamos a editar los tics y fuera de aquí. Encontremos el pie de página. Añadamos nuestra etiqueta p. Vamos a buscar el texto, ahí está y pegarlo. Impresionante, guárdelo, a ver cómo se ve. Ahí es donde estamos. Enfriar. Hagamos un par de cosas. Quizás lo hagamos más pequeño y lo centremos horizontalmente porque esa es la más fácil de hacer. En realidad podrías simplemente darle estilo al pie de página. Se podría decir, quiero que sea un tamaño de fuente aquí diga 10 píxeles, lo que sea que escogieras y funcionaría. El motivo por el que sugerí hacer un selector compuesto, así que algo así como pie de página que tiene una etiqueta p en él, es para que si tienes como una imagen dentro de ahí también, o decir algunos enlaces o montones de cosas diferentes, puedes ser realmente específico al respecto. Se puede decir que quiero los textos de párrafo que están dentro del pie de página. Realmente no importa cómo lo hiciste siempre y cuando funcionara. Haremos tamaño de fuente. Hice 10 pixeles. Demos a un eso una prueba cada vez. Asegurémonos de que esté funcionando. Hagamos el centro de alineación de texto. ¿ Cómo vas tan lejos? Hay, uh momentos o es como, “Sí, lo hice, lo clavé”. Echemos un vistazo, es perfecto. Hice el mío un poco más oscuro. No era blanco. Pero eso no lo sabías. Color Solo estoy haciendo esto porque quiero que sea un color ligeramente diferente. Estás cambiando las reglas, y quiero que sea un gris ligeramente silenciado porque ahí abajo se siente demasiado brillante. Muy bien, lo siguiente que quiero hacer es conseguir el espaciado correcto. ¿ Cómo lo hiciste? ¿ Dejaste el juego de fondo con las alturas, juegas con los márgenes? Así es como voy a hacer, voy a deshacerme de la altura del pie de página. Recuerda dónde al principio, agregamos montones de alturas, y poco a poco lo estamos quitando todo porque solo fueron útiles al principio para decir que mientras estamos aprendiendo, podemos ver las cosas, pero ahora está bien que Déjalo así porque sé más adelante mientras lo estoy construyendo, puedo decir: “¿Hago un pie de página P, o al pie de página”. Creo que se lo puede hacer a cualquiera. Me pregunto qué hiciste. Deja en los comentarios, lo que hiciste. Si te gusta, “Oye, hice esta otra cosa y aún funcionó”. hacer eso porque entonces otras personas podrían decir: “Sí, yo también, lo hice de otra manera. Ahí hay una mejor distancia. Dan lo está escribiendo mal”. Yo estoy contento por eso. Por el momento, voy a hacer algo de relleno fuera de la parte superior, 50 píxeles, y lo mismo para la parte inferior. Abajo 50 pixels. Vamos a comprobarlo, y es a donde quería llegar. Cumplí todo mi breve. Ignora el mapa, hizo espaciado arriba y abajo, perfecto. Pie de página, la etiqueta p, color de fondo, lo hicimos. Si el tuyo no funcionó, voy a guardar este archivo ahora y ponerlo en los archivos completados solo para recapitular esos archivos completados porque son súper útiles. Debajo de sus archivos de ejercicio, habrá una carpeta en ella para llamar, Archivos completados. estoy dando por separado mientras estoy trabajando en este curso, pero tiraré toda esta carpeta ahí cuando termine, y encontraras ésta, y puedes ver estos son todos los diferentes videos que hemos hecho. Ábrelos y deberías ver el código que tengo aquí y puedes comparar. Ese fue nuestro proyecto fotográfico terminado. Bien hecho usted. Vamos a entrar en algunas cosas nuevas de lujo. 30. Cómo añadir un botón simple de correo electrónico a un sitio web usando mailto en HTML: Hola ahí. Este video se trata de agregar un botón de correo electrónico realmente simple a la página web. Teníamos este enlace que hicimos antes, y cuando hicimos clic en él, se fue a Google, eso no fue tan útil. Lo que queremos hacer ahora es cuando hacemos clic en él, abre nuestra campaña de email, y como hay un sitio web pre rellena y las líneas de asunto hechas, es un lindo poco práctico truco rápido, súper fácil, rápido para agregar ese tipo de funcionalidad a su sitio web. Saltemos y hagamos que suceda. Para que funcione, lo vamos a hacer al botón que tenemos aquí en el momento en que no entre en Google. Se iría a otra página web, quiero conseguirlo para que al hacer clic en ella en el usuario, esté en este sitio web y la idea, quiero hacer clic en él, y enviar un correo electrónico para sobre una reserva. Yo estoy haciendo un formulario, lo haremos más adelante en el curso porque es bastante difícil de hacer. Lo hará más tarde, pero por el momento, un poco de correo dos cosas va a ser agradable y simple, rápido y fácil de hacer. Todo lo que tenemos que hacer es nosotros, hicimos este href antes, así que si no lo has hecho, busca hacer un video de hipervínculo antes, y todo lo que tenemos que hacer es cambiar este pote, así que en lugar de ir a Google.com, vamos a conseguir que se vaya al correo dos, colon, así que tiene que quedar exactamente así, luego pones en la dirección de correo electrónico, sin espacios. Si quisieras enviarme un correo electrónico, enviarías un correo electrónico a Daniel en mi website.com. Cuando alguien hace clic en eso, lo van a mostrar, blanco o no, realmente no importa en este caso porque se cargará y su propia cosa en blanco, y eso es lo que debería hacer que funcione. Vamos a guardarlo, vamos a darle una vista previa. Vamos a darle click, mira eso. Abrió mi sistema de correo electrónico en mi máquina. Estoy fingiendo que ahora soy el cliente, así que solo estoy buscando en Internet un restaurante y como, bueno, hagamos una reserva. Haga clic en el Botón, esto se abre, y así está abriendo correo, y quiere correr un tema y podría decir, ¿podría conseguir una reserva? Es una manera bonita, barata, fácil, rápida, por lo que son cinco segundos para implementar, y es más fácil que un formulario. Un par de cosas que podrían ser útiles es terminar una línea de asunto como prefijarla, así que lo que puedes hacer, puedes hacerlo un poco de extra al final de esto, así que el correo dos es genial, pero al final de la.com, pon un signo de interrogación. Tienes que poner un signo de interrogación y un tiene que ser deletreado como lo es el capital y tiene que ser sujeto. Un signo de interrogación mayúscula es para sujeto, y luego puedes poner un igual porque o tiene que lucir exactamente así, entonces puedes simplemente agregar la línea de asunto, para que puedas decir reserva, ir. Vamos a golpear Save, y vamos a previsualizarlo. Vamos a cerrarlo, está previsualizado en el navegador. Haga clic en él. Se puede ver mucho de mi correo electrónico y poner el tema en fresco. Puedes hacer algunas otras cosas como conseguir el CC y puedes poner copia de compañero y creo que también puedes. No los conozco de memoria, pero puedes ir y echar un vistazo a eso tú mismo ahora, todo lo que necesitas realmente buscar es, buscar correo a un HTML, y encontrarás una página sobre lo que puedes y no puedes agregar, y sólo serán cosas diferentes como esta. Imagino que será signo de interrogación, CC igual, pones otra dirección de correo electrónico y, pero eso es una conjetura y solo un lindo truco barato para agregar un email, así que eso es todo para este, vamos a la siguiente si eres pensando, ese será el último para esta noche, haré un poco más mañana. Haz el siguiente, el siguiente es impresionante. Embled códigos que nos van a hacer lucir impresionantes, es ese mapa, no va a tardar demasiado, o te veré en unos segundos, o te veré mañana cuando despiertes. Adiós ahora. 31. Cómo añadir Google Maps a tu sitio web usando códigos incrustados: Hola, gente guapa. Este video, vamos a mirar algo llamado código de inserción y vamos a empezar con este de aquí. Ver esto es? Es un mapa. Está en nuestra página web. Es interactivo. Nos muestra dónde está nuestro restaurante. Es súper fácil de hacer. Google hace todo el trabajo todo lo que hacemos es copiar y pegar cosas, ¿de acuerdo? Después añadiremos un video también, ¿de acuerdo? De YouTube a nuestra página web y vamos a añadir esta cosa de reserva genial donde alguien puede hacer una reserva. No lo estamos haciendo. No lo estamos codificando. No lo estamos peinando. Simplemente vamos a estos sitios web como YouTube, Google Maps, y OpenTable y nos están dando todas las cosas que necesitamos. Simplemente lo copiamos y lo pegamos y nos vemos increíbles, ¿verdad? Vamos a saltar ahora y a averiguar cómo. Esto es lo que queremos agregar, ¿verdad? Es solo una captura de pantalla en los momentos. En realidad no está funcionando, así que queremos e agregarlo a nuestra página web y lo genial de cosas como esta, vamos a hacer Google Maps aquí, pero podrías tener aquí un calendario de Google Maps, una hoja de cálculo de Google. ¿ Qué más? Podrías tener boletos de Ticketmaster o Eventbrite podrías tener feeds de Facebook o feeds de Twitter. Todos usan el mismo método. Se llama código de incrustación. En Alemania en algo llamado iframe. En primer lugar, vamos a buscar el código. Vamos a usar Google Maps, ¿de acuerdo? Acabo de cargar la versión de Nueva Zelanda pero ve a google.com/maps, ¿de acuerdo? Yo he ido a.co.nz, pero de todos modos no importa y luego teclea el negocio que quieres listar, ¿de acuerdo? Escríbalo y encuéntralo y digamos, así que aquí es a donde me voy a mudar, ¿verdad? Estoy bastante emocionado, como Adare. Adare Manor es algún estado grande de fantasía. Cosa casa señorial ahí. El Carruage House en Adare Manor parece un lugar realmente genial para agregar a mi mapa ficticio. Lo que voy a hacer es que voy a dar clic en él para que sólo lo esté aislando por aquí porque no quiero todas estas cosas por aquí también. Yo sólo voy a encontrar la Casa del Carruaje en Adare Manor. Porque lo que sea que veas aquí va a ser lo que hay en tu mapa. Me va a enseñar los otros restaurantes. ¿ Ir a donde los restaurantes? Se ha ido. Un par de cosas que debes hacer cuando estás haciendo un mapa es acercar y alejar, porque este es el tamaño si quieres mostrarlo en relación a como Dublín, ¿de acuerdo? Que está a kilómetros de camino, Adare irlanda, soy de Nueva Zelanda. Mi esposa es irlandesa. De todos modos, para que puedas decidir la báscula, ¿de acuerdo? ¿ Se puede ver esa distancia en coche entre Dublín? Dublín está ahí arriba en algún lugar o quieres mapas realmente localizados para que la gente pueda ver la calle que está en muy cerca. Eso lo consigues bien, haz clic y arrástralo hasta obtener la posición correcta. Entonces lo que buscas, ahora te voy a mostrar como es en este momento. Cada vez que imparto esta clase y hago un video, van y se mueven donde está este botón, ¿de acuerdo? ¿Sabes quejarse? Google lo cambia a mí, tienes que desenterrarlo y encontrarlo. Si está en un lugar diferente, escribe en los comentarios para que otros alumnos sepan a dónde se ha ido. Lo que busco es un código de incrustación. ¿ Dónde está en este momento? Está bajo este llamado Compartir. Te da opciones para compartir y estás buscando este llamado Embed, ¿de acuerdo? Embedeció un mapa, haga clic en eso. Entonces lo que quiero hacer es que tienes los diferentes tamaños. Voy a escoger una Talla Personalizada. Podrías simplemente escoger uno de estos como tamaño personalizado. Ahora, ¿qué tan amplio queremos que sea? Yo quiero que sea, sé que el ancho de mi sitio es de 1,024, así que también podría hacer que vaya ancho, 1,024 incluso. ¿ A qué altura? Yo sólo estoy adivinando 500. Eso es una vista previa a tamaño real. Eso es lo que se va a ver, ¿de acuerdo? Una vez que se carga eventualmente, impresionante. Todo lo que necesito hacer ahora es ir a copiar HTML y colocar esto en mi sitio. Es demasiado fácil, tan bueno. Google al respecto nos va a hacer quedar realmente bien si esto funciona. ¿ Dónde lo voy a poner? Lo pondré dentro de la principal, así que justo antes. Pondré un par de rutinas y voy a tabular a través y más allá allá. Genial, así que eso me da mi iframe. Veamos si funciona recto sin ninguno, a veces necesita ajustes. Vamos a revisar. No puedo recordar y previsualizar en el navegador. Voy a ver cómo va esto. ¿Estás listo? ¿ Cuál es? Sí, se ve genial. Adivina empujó hacia un lado, pero está ahí, míralo. Puedes acercar, alejar, gente puede comprobarlo, encontrar direcciones y se ve bien en tu página web. No tenemos que hacer ninguna de estas cosas hardcore. Google hace toda la fuerza de trabajo duro. Ahora bien, ¿por qué está todo en mal estado? Es principalmente porque le pusimos un par de cosas. Una es que lo pusimos dentro de esta etiqueta principal, que me olvidé. Teníamos una herramienta de relleno, ¿de acuerdo? Dejaré esto en el curso porque, estas son cosas que pasan y tú dices: “¿Qué pasó entonces?” Lo sé porque recuerdas nuestra principal, dijimos más tarde dijimos que agregamos relleno gigante. Lo que voy a hacer es que voy a decir: “No lo tengamos en lo principal. Tengámoslo después en una etiqueta”. De acuerdo, ¿qué etiqueta? Usemos una sección, ¿de acuerdo? Podríamos, sí sección. Sección es algo lindo de usar, ¿de acuerdo? Lo que haremos es, solo puedes usar un div. Solo explorando usando secciones, ¿de acuerdo? Ponlo ahí dentro. Se va a resolver algunos de nuestros problemas porque está en una diferente, el relleno no se va a afectar esperemos. Ve y eso arregló todos nuestros problemas, lindo. De acuerdo, entonces estos nuestro mapa, tenemos algunos problemas de relleno que necesitamos arreglar, ¿de acuerdo? Pero eso es genial. Simplemente tirarlo y se ve impresionante. Arreglemos el relleno y luego te mostraré un poco rápido a través de algunos de los códigos de inserción. Lo que voy a hacer es aquí mi sección y le voy a dar un nombre de clase, ¿de acuerdo? Voy a llamar a éste, lo que voy a llamar a éste mapas, cool. Por aquí lo que quiero hacer es decir si hay .maps, me gustaría que tuviera algún relleno o margen. Mira relleno todo el margen funcionará. Hagamos relleno de fondo y ¿cuántos? Pongamos 100 pixeles para ver cómo se ve. Aquí vamos. Un poco de espacio ahí. Mi imagen no es lo suficientemente grande como para llevarla. Si estás trabajando en una pantalla pequeña, probablemente no te vas a tropezar con problemas de imagen, pero aquí vamos. Echemos un vistazo a un par de otros códigos de inserción porque el proceso es el mismo. Haremos dos más. Uno real común es YouTube. De acuerdo, así que ve a YouTube, busca un video que te guste. Conozco un buen video y lectura a realmente esto para lanzar, porque te va a mostrar todo mi historial de búsqueda. ¿ Qué le gusta ver a Dan? No está tan mal. Hagamos espectáculos de autos y cosas de construcción de renovación de casas. Estás como, “¿Por qué hay montones de shows de diseño web?” Porque me gusta hacer videos de diseño web no verlos de todos modos. Añadamos un video. Tráelo aquí en la parte superior. Está obligado a ser un buen video ahí. Mira a este tipo. Genial, y vamos a agarrar este. De acuerdo, es uno de mis viejos videos en mis otros videos. Lo que haces es encontrar el video que quieres. Asegúrate de que tenga un guapo kiwi, ¿de acuerdo? Una vez que hayas encontrado que estás buscando el botón compartir. Ahora de nuevo, esto podría cambiar. YouTube cambia las cosas todo el tiempo también, por lo que buscando Compartir. Estará ahí en algún lugar e iremos a donde queramos. Share link embed ver que uno hay. Da click en esto, ¿de acuerdo? Este nuestro iframe como antes. Se puede empezar desde la posición. ¿ Quieres los controles del jugador? ¿ Quieres el botón de reproducción o no? Yo iba a copiar todo esto. Es solo una copia, aquí tienes y me meto en mi código de estudio. ¿ Dónde lo voy a poner? Lo pondré justo debajo de este iframe. Sí, solo ponlo debajo de aquí. Sé que vamos a deshacernos de él y sólo mostrarte por ejemplo, péguelo en. A ver si hay algún problema. Echemos un vistazo. Es el viejo. El nuevo se ve así. Ahí hay un mapa y hay un video debajo de él. Ahora puedes hacer cosas como convertirlo en un ancho 100 por ciento. ¿ Qué más se puede hacer? Echemos un vistazo al código porque hemos dicho que sería alto y ancho, ¿de acuerdo? Voy a hacer que sea un ancho de 124. ¿ A qué equivale eso? Ni siquiera estoy seguro. ¿Puedo eliminar la altura? Creo que solo puedes borrar la altura y dejar que lo haga por ti. No, hay que averiguar cuál es la relación y hacerla más grande. Es un video realmente flaco. No estoy seguro de qué es, así que lo voy a dejar por el momento. Es un desastre que mi cerebro no puede hacer ahora, hora de llegar las noches demasiado tarde para las matemáticas. Echemos un vistazo. Sí, agregando videos. Yo sólo voy a mencionar un par de otros ahora que se puede ir y hacer. Twitter hace lo mismo. Si quieres agregar tu feed de Twitter, para agregar un poco de vida a tu página web. Acude a Twitter y tienen un código de inserción para que puedas incrustar una corriente de tus tweets, ¿de acuerdo? Puedes ir a Facebook y poner a tu grupo de Facebook aquí también en diferentes publicaciones. ¿ Qué más se puede hacer? MailChimp tiene uno. Digamos que quieres agregar un email inscríbase, ¿de acuerdo? Verdadero rápido y fácil. Acude a MailChimp, regístrate y te darán un pequeño código de inserción que solo puedes pegar en tu sitio y ellos harán todo el levantamiento pesado. Agarrarán los correos electrónicos. Ellos los confirman por ti. Ellos los agregarán a una lista que puedes enviarles correos electrónicos o uno de los que quería mostrarte era OpenTable. OpenTable, no es ya grande aquí en Irlanda, pero no hablo en todo el mundo. Pero de todos modos, digamos que se quiere agregar una reserva, porque en el momento que acabemos de tener esta cosa razonablemente coja, mientras que? A lo mejor estamos ahí quien tiene un botón? De acuerdo, pero digamos si realmente quieren reservar un tiempo y un lugar y no quieres tener que codificar todo eso, porque es realmente complicado. Puede ser, puedes ir a OpenTable y si te han aceptado, di que eres el dueño del restaurante, ¿de acuerdo? O el diseñador web para el restaurante, vas a tener que conseguirlos para que se aseguren de que agreguen su restaurante y tengan que saltar por aros para decir: “Sí soy un restaurante y es un OpenTable”. Lo que puedes hacer entonces es que tienen creador de widgets, ¿de acuerdo? Encontré sólo un restaurante a estrenar, Filadelfia. Nunca he estado ahí. Pero este restaurante, porque está en OpenTable, te permite crear un widget realmente rápido y fácil, ¿de acuerdo? Se puede escoger la herramienta de tamaño. Copiemos el código, lo volquemos en tu sitio y esperemos que no lo rompa. ¿ Dónde voy a poner el mío? Lo puse justo debajo de aquí. Pega, mira lo que hace. Echemos un vistazo. Ahí está, genial. Se pasa y alguien puede ir, quiero hacer una reserva por ahora y para dos personas a las 7:00 PM y dar clic en “Encontrar una mesa” y enviará una solicitud de reserva a OpenTable. Supongo que te mostré todo esto, lo he puesto un par de veces, pero quería compartir este material de código incrustado porque no todo tiene que ser hecho por ti. Podrás pararte sobre los hombros de gigantes que han hecho cool pequeños códigos de incrustación. Solo puedes arrancarlos y pegarlos aquí. ¿ Hemos hablado de otros? Un par de otros que utilizo es Eventbrite. Creé mi negocio de salón de clases sentado basado en Eventbrites. Los códigos de incrustación me permitieron hacer a algunas personas para tomar boletos e irrumpieron en mis cursos sin que en realidad tuviera que hacer mucho. Voy a pasar por ahora y borrarlo. Lo guardaré para este video pero lo eliminaré para el siguiente. Cuando me despierte mañana y empecemos nuestro próximo video, estos tipos se van a ir porque el mapa se queda, pero el resto de las cosas es sólo cosas fueron arrojadas para aprender. ¿ Cómo fue eso la gente buena? Ya veré en el siguiente video. 32. Cómo activar tu sitio web en internet con tu propio dominio: Oye amigo, es vivir tú y yo. Sentí que esta mañana vamos a empezar el día, vamos a hacer unos videos en vivo porque siento que estamos siendo atrapados detrás de la pantalla demasiado tiempo. de hoy es un día muy emocionante, para lanzar este video es un video muy emocionante porque llegamos a pegar nuestro internet, nuestro internet. Nuestra página web en línea. Vamos a hacer dos cosas. Vamos a comprar un nombre de dominio y conseguir algún hosting y luego vamos a pegarlo y otras personas podrán verlo. El nombre de dominio es algo así como www.adarerestaurant.com revisaremos para ver si ese está disponible y lo compraremos. Entonces necesitamos algo llamado hosting y eso es solo un servicio donde van a decir, cuidaremos tu sitio web para ti, tus imágenes y tu HTML y CSS y lo cuidaremos y nos aseguraremos de que sea disponible para todo el mundo. Esa es la parte de hosting y el nombre el nombre del dominio es solo el nombre. Muy bien, tiempos emocionantes volvamos a saltar detrás de la computadora y a ver si podemos arreglarlo todo. Está bien, antes de que empecemos, quiero mostrarles lo que hacemos al final. Esto es todo. Ahora es de repente como lo he visto antes. Ya lo hemos hecho. Pero mira, ahora está en adarerestaurant.com. En realidad es en vivo en internet. La gente lo puede ver. La gente empezará a hacer reservas y revisarnos en nuestro mapa. Está bien, eso es lo que vamos a hacer. Vamos a saltar ahora. Está bien, así que empecemos esto. Va a ser de dos partes, necesitamos registrarnos para nuestro nombre de dominio y nuestro hosting. Hacemos eso juntos y luego necesitamos trabajar una forma de conectar nuestro Código VS con ese hosting para subirlo. ¿ Dónde vamos a comprar un nombre de dominio y hosting? Depende de ti. Son montones de sitios que lo hacen. Mi recomendación es un lugar llamado Bluehost, y eso es lo que haremos en este video, pero hay muchas otras alternativas. ¿ Por qué elijo Bluehost? Si quieres ir a Bluehost, ve a BringYouRownLaptop.com/Azul y te redirigirá allí. A mí me gusta Bluehost porque es al que uso. También me gusta porque dos razones ganamos los dos y tengo un trato de afiliado con ellos donde consigo un pequeño corte de tu inscripción así que cuando te inscribes, me pongo un poquito. Puedes ir a mi alrededor si no quieres, puedes ir a Bluehost.com, está bien. Pero si usas BringYouRownLaptop.com/Azul, pasan dos cosas. Yo consigo un poco extra y tú obtienes un gran descuento en tu inscripción. Si usas esto, mira, es Bluehost y tiene mi cara ahí puesta. Hacemos algunas cosas junto con Bluehost. Es un poco bonito, hicieron un pequeño sitio web para mí, lo cual no puedo creer. El cool al respecto es que obtienes tu nombre de dominio gratis como parte de él y tiene todas las cosas que vamos a necesitar para esta y futuras clases que he planeado dónde vamos a hacer WordPress. No estamos haciendo eso ahora mismo. Si estás buscando otras alternativas para hosting, hay un par de cosas que solo necesitas tener cuidado. No ten cuidado, solo asegúrate de que esté incluido. Necesitas un dominio y hosting. Esos son los fundamentos. Después de eso, sería realmente genial si tuvieran una instalación realmente simple de WordPress. No tienes que hacerlo para todo este curso porque no lo estamos haciendo. Pero si planeas seguir a cursos posteriores será súper útil. Las otras pequeñas cosas a tener en cuenta es algo llamado certificado SSL. Asegúrate de que tengan eso. La mayoría de ellos lo tienen ahora y debería ser gratis como parte de tu hosting, este Bluehost uno sí. Otras cosas nerdy es asegurarnos de que es un servidor Apache y que puedes ejecutar PHP en él porque más adelante en este curso en particular, vamos a ejecutar algún PHP básico para hacer algunas cosas cool de validación de formularios. Si eso fue todo lo que estás en él como de qué está hablando, solo usa Bluehost y sígueme. Muy bien, empecemos. Vamos a dar click Empezar Ahora. Muy bien, elijan nuestro plan ahora. Sí, siempre hay tres, ¿por qué es que siempre hay tres? Para ti, para esta clase, todo lo que necesitamos es el plan básico. Puedes hacer el plus o la elección plus. No es tanto más caro. Pero la razón por la que lo harías es si solo estoy diseñando un sitio web, digamos que soy el dueño de Adare Restaurant y no necesito tener otros 10 sitios web. Yo solo usaré básico porque eso es lo grande que aquí abajo es diferente. Dominio estacionado, subdominios, solo significa este de aquí puedo ser más un diseñador web y voy, bien, tengo 10 clientes y todos están usando el mismo host. Tengo que comprar 10 nombres de dominio así adarerestaurants.com y luego estoy haciendo algo para dentista de nuestro Dan y luego el diseño web de Dan y luego la mecánica de autos de Dan. Estoy haciendo muchos sitios para la gente, ahí es donde podrías decidir usar este plus o choice plus para que llegues a hacer montones de sitios web usando el mismo costo mensual en vez de, imagina como compré uno y luego tuve que comprar un segundo uno, ya estoy a 5 dólares al mes así que bien podría ir por algo como esto. Puedes encenderlo más tarde. Por el momento vamos a usar Select y vamos a escoger un nuevo nombre de dominio. Ahora en esta etapa, tienes dos opciones, tres opciones en realidad, tu nombre de dominio, donde llegas a escoger tu.com o lo que quieras. Si ya tienes un nombre de dominio, escríbalo aquí y Bluehost te ayudará. Básicamente son dos cosas separadas. El nombre de dominio se apunta hacia el hosting y si ya tienes un nombre de dominio, escríbalo aquí, Bluehost te ayudará a señalarlo al hosting en el que estamos por inscribirnos. Si no tienes uno, ponlo aquí si intentas salir donde está porque como a veces te gusta en realidad, no estoy muy seguro, t aquí vas. No sabía cómo activar esto, pero parece que cuando intentas dejar esto, dice, oye, no puedo decidir sobre un nombre de dominio, puedes hacerlo más tarde. Simplemente obtienes un crédito y puedes agregarlo más tarde. Si has pasado como ya una hora tratando de averiguar un nombre de dominio, vuelve más tarde y hazlo. Cómo activar ese pequeño popup, ni idea. Simplemente mueve el ratón por ahí. Creo que si vas hacia esto, cruzándolo, parece lanzarlo. Ahora vamos a comprobar si Adare Restaurant está disponible. Vamos a dar click Siguiente. Creo Adare, es una palabra rara, todos modos así que nadie la tiene, su disponible lo cual es impresionante. Lo siguiente que hay que hacer es obviamente que sabes qué hacer ahí. Detalles del paquete. El precio que nos dieron bien. Creo que es 2.95 para EU. Es un poco menos en euros, pero eso se basa en 36 meses, así que tres años y podrías ser como wow, gran compromiso. Se puede bajar a 12. Simplemente te costará más por mes eso depende de ti. La otra cosa en la que pensar son estas, ahora esto depende de ti tener un poco de lectura y la principal de la que hablaré es la protección de privacidad de dominio. Cuando rellenas los detalles de un nombre de dominio como esta cosa, en realidad es un conocimiento de dominio público. La gente puede entrar y averiguar quién es el dueño del nombre de dominio y averiguar la dirección. Lo que hace la gente, no yo es algunas personas simplemente pondrían en una dirección falsa que nunca había oído hablar de eso antes. Pero otra forma es hacer esta protección de privacidad de dominio. No tengo idea de cómo hacen un costo mensual que lo bloquea a la gente, pero sí, hay que llegar a Bluehost para obtener la información. Simplemente no está fácilmente disponible. Pero ten un poco de lectura de esto. Yo no uso ninguno de estos. Son solo extras opcionales tienen una lectura a través de ellos. Me pongo un poco más leí sobre algunas de estas cosas y así que ten un poco de lectura a través de ti mismo y decidir si son adecuadas para ti y qué más. No necesito el email hosting. Detalles de tarjeta de crédito. Firma tu vida, llena todos esos detalles y te veré en un segundo después de que hayas pasado por esta página, haré el resto. Muy bien, esta es la página en la que terminas. Recuerda si estás viendo esto en el futuro, todo podría ser ligeramente diferente, pero deberíamos terminar en un lugar similar. Vamos a establecer nuestra contraseña para la cuenta. Haré eso sin que mires. Miras hacia otro lado, prométeme, y te veré en un segundo. Contraseña completada. Vayamos a iniciar sesión. Está bien, voy a ir a mi login de hosting y voy a iniciar sesión. Te veré en un segundo. Está bien, está tratando de conseguir que instalemos WordPress, que es sólo una forma diferente de construir un sitio web. En realidad no estás, bueno lo estás construyendo, sí, pero usando plantillas. Lo que queremos hacer es saltar este paso hacia abajo. El tuyo podría ser un poco diferente. Cambian esta incorporación todo el tiempo. Nos están diciendo aquí que van a poner la instalación de WordPress en un dominio temporal. No lo vamos a usar así que vamos a saltar, dejar de construir, porque es dejar de construir ese sitio web de WordPress sólo vamos a ir a nuestra cuenta de hosting. Está bien y este es tu tablero de instrumentos. Empezando. No quiero comprar ahora. No, gracias. Seguro que no lo quiero. Muchas gracias. Lo que quiero hacer ahora es subir mi sitio. Lo siguiente que queremos hacer es que te voy a mostrar dos formas de subir tu sitio web a tu nuevo dominio. Usaremos los lenguajes de hombre cueva, súper simples y no se pueden romper. Entonces está la forma de hacerlo automáticamente directamente desde el código VS, lo cual es útil, pero un poco más difícil de configurar. Estamos buscando al Administrador de Archivos. Puede que no esté aquí, cuando vayas a aquí, podrían mover esto un poco, pero estás buscando al File Manager en alguna parte. El Administrador de Archivos se va a cargar. abre esta gran cosa. Esto está mirando, recuerda antes de tener algo llamado el sitio local. Déjame mostrarte. En nuestro escritorio creamos esta carpeta local llamada Proyecto 1, y dentro de eso está nuestra página web. El único problema es que tenemos una página de índice y la podemos ver, pero el resto del mundo no puede. Todo hosting es que hay una empresa como Bluehost que dice, tomaremos estos archivos y los compartiremos con el mundo y nos aseguraremos de que esté en vivo y conectado a tu nombre de dominio. Cuando la gente vaya a adarerestaurant.com, se les va a mostrar este índice y se comprometieron a tener siempre un tiempo 100 por ciento para que todos puedan verlo todo el tiempo. Lo que pasa es, esta es la estructura de carpetas que obtienes. Tu sitio web se mantiene en este llamado public_html. Haga doble clic en public_html para ir dentro de él. Esto es actualmente lo que hay en tu página web. No es lo que necesitamos solo, tiene un sitio web de placeholder aquí para nosotros. Vamos a seleccionarlo todo y eliminarlo. “ Selecciona Todo” y arriba aquí “Eliminar”. Vamos a sumar todo eso a la eliminación. Dejar en la basura. Puedes meter en la basura, depende de ti. Pero ahora tengo un archivo vacío. Ahora quiero subir algunas cosas. Recuerda que estamos en el public_html. Vayamos a subir. Aquí podemos arrastrar archivos o hacer clic en ellos de uno a la vez. Seleccione el archivo, hagamos índice, “Abrir”. No va a funcionar a menos que tengamos todo el resto de los expedientes. Nosotros [inaudible] medio trabajo. Tenemos que hacer tanto CSS como el HTML. O simplemente puedes arrastrarlo, depende de ti. No puedes arrastrar carpetas a esta cosa por alguna razón. Por eso es un poco cavernícola haciéndolo de esta manera. Pero tengo mi índice y mi HTML subido. Ahora quiero añadir una carpeta Imágenes y subirlas por separado. Volvamos atrás. Tengo esos dos y sólo necesitamos reconstruir esto. Necesitamos esta carpeta llamada imágenes. Asegúrate de que se deletree exactamente igual. Voy a hacer una carpeta, ponerlo en, “Crear carpeta”. Ábrelo haciendo doble clic en él, súbelo algunas cosas. Encuentra nuestras imágenes. No tengo mucho, dos. Voy a arrastrarlos a través. Las imágenes tardarán un poco más en subir. Estoy en algún internet terrible aquí así que, va bastante rápido. Soy el diseñador web que se está ejerciendo sobre la sombra junto a la oveja, con terrible Internet. De todos modos, es lo suficientemente rápido. Volvamos atrás. ¿ Estamos ahí dentro? Sí. Vuelve a public.html solo para ver, los tienes todos ahí dentro. Vayamos a comprobarlo. ¿Estás listo? Este es un momento bastante grande. Voy a ir a una nueva ventana. Vamos a teclear adarerestaurant.com. ¿ Estás listo? Sostenga el lugar. Esto es igual que un go [inaudible], hazlo cargar. Ahí hay un mapa. Lo bueno de esto eres tú ahora mismo, ya que un estudiante puede ir a adarerestaurant.com y probablemente esté aquí. Hazme saber si no lo es. Porque no he pagado mis cuotas de alojamiento, podría bajar en algún momento, porque por más que me guste este sitio web, no sirve ningún propósito real que no sea aprender. Eso es lo genial al respecto, es que ahora cualquiera puede ir a ver que tú. Puedes enviárselo a tu mamá, puedes enviárselo a tus amigos y decir, ve a revisar mi página web. Puedes empezar a publicar en redes sociales, hice un sitio web. Me emociono porque aunque sea como solo mi, he hecho un billón de sitios, y solo hay ese momento, es como el nacimiento de tu página web. Está vivo, todo ese trabajo duro, otras personas lo pueden ver. El problema es, es que nadie realmente lo va a ver. Nadie va a encontrar este sitio web, menos que empiece a compartir y a decirle a la gente y a añadirlo a listas, y ese tipo de cosas. Pero está vivo, es emocionante. Algo que podrías encontrar al empezar es que, sorprendentemente, asumo durante este curso lo íbamos a subir aquí, comprar nuestro nombre de dominio. Los nombres de dominio tardan mucho tiempo en poblarse. A menudo necesitas esperar un día o unas horas para que adarerestaurant.com trabaje. De verdad me sorprende lo rápido que Bluehost subió eso. No sé si es solo porque son geniales. Me ha llevado entre grabar esto y realmente hacer ese lanzamiento ahí, no sé, unos 15 minutos así. Eso es bastante asombroso. Si vas a tu host y tu nombre de dominio y tienes danswebdesign.com y aún no se está cargando está llegando con no reconocido o no lo puedes encontrar, dale el máximo de un día. Si sigue sin funcionar después de un día, comuníquese con Bluehost. Bluehost son impresionantes en el servicio al cliente. Esa es la razón por la que estoy realmente feliz de enviar a la gente a su manera porque apoyo las 24 horas de Bluehost es realmente increíble. ¿Dónde estamos? Estos chicos, puedes llamarlos, puedes usar chat en vivo, puedes enviarlos por correo electrónico. Están locos rápido en volver a ti. No es un cheque de mascotas, es solo más de, no todos los negocios son tan buenos como este, desearía que más lo fueran. El nombre de dominio vino a través. Es posible que tengas que esperar un poco. Yo solo quiero saltar aquí muy rápido, porque dije solo espere un poco. En realidad, no tienes que hacerlo, sí tienes que esperar un tiempo para que se complete el nombre de dominio, pero hay un nombre de dominio temporal que obtendrás. Te enviarán probablemente tres correos electrónicos; tu cuenta se registra, algunos detalles como este. Consulta a través de todos ellos, y encontrarás uno de ellos que tiene esta importante información de cuenta. Este es el que puedes usar temporalmente. Porque si estás un poco desinflado porque te gusta, tengo un nombre de dominio y no funciona. Usa esto, copia y pega esto en el navegador. Se trata de una retención temporal para tu nombre de dominio que más tarde se convertiría en vivo. Sólo usa eso. El tuyo no será más atrevido, tuyo será cualquiera que sea el nombre de dominio que estés usando, por lo que esto será diferente para ti. Volvamos a saltar al video. Nuevamente, si te encuentras con algún problema con esto, con el hosting, puedes ponerte en contacto conmigo y te ayudaré lo mejor que pueda. Pero debido a que esto es más cosa de Bluehost, y ellos cambian las cosas y mueven las cosas, se puede poner un poco, les será más fácil y más rápido probablemente para ellos que te ayuden. El hogar es donde empezamos. Solo recapitulemos. Lo que Bluehost quiere que hagas es inscribirte en WordPress. Eso ignoramos y borramos ese material con plantillas del sitio. Lo que quieres es File Manager y simplemente recrear las carpetas y subirlas manualmente. Otras partes interesantes sobre tu anfitrión está bajo este Avanzado. Da click en eso, volverás a ver todos estos, pero aquí hay algunas otras cosas útiles, depende de lo nerdy que quieras ir. Puedes configurar tu dirección de correo electrónico desde aquí, puedes configurar el seguimiento de cuántas personas han estado en tu sitio, todo tipo de cosas geniales. El otro es que algo llamado certificado SSL se creará y se le aplicará más adelante. Por el momento, si vamos a adarerestaurant.com, verás que dice no seguro. Eso es sólo porque aún no se ha hecho y hecho. Eso se convertirá en carta segura sobre. Si vas a tu sitio, dice que este es un sitio web de aspecto dudoso. Es porque aún no se le ha puesto la seguridad. Está bien que lo mires. Está bien que alguien mire, porque no es malicioso. Pero con el tiempo tendremos que estar ahí, porque a Google no le gustan los sitios no seguros. Pero eso sucederá automáticamente para ti. Si no lo hace, comuníquese con Bluehost y pídales que ayuden, pero parece ser un proceso automatizado con ellos. Te prometí que haríamos el largo camino que es usando cPanel y File Manager, y actualizándolo manualmente. Ahora sería bueno estar solo en código VS y simplemente enviarlo automáticamente. Hagámoslo ahora. Este video es épico, ¿verdad? Es bastante largo. Hagámoslo en el siguiente video, sepárelo. Te veré en un segundo. 33. Cómo conectar código de Visual Studio VS mediante sftp para alojar Bluehost: Hola ahí. En este video vamos a usar VS Code para conectarnos directamente a nuestro host en lugar de usar cualquier otra cosa. Entonces estamos usando su sitio web [inaudible] hecho dentro de VS Code, vamos a instalar este plugin llamado SFTP. Eso me va a mostrar todo en mi sitio muy bien, y cuando quiero subir cosas, solo hago clic derecho en él y digo Subir y termina en los símbolos de mi sitio web. Entonces en este video, nos vamos a conectar directamente desde VS Code. Vamos a usar algo llamado SFTP, y es una de las extensiones como lo hicimos antes. Recuerda que hicimos extensiones para HTML Pista y Lifesaver. Al igual que los otros, SFTP es el más común en este momento. Es la que usé y parece funcionar realmente bien. Tiene 4.5 estrellas, y tiene un trozo de descargas. Entonces, comprobarás cuando lo estés haciendo. Aquí hay otros que tienen listas estrellas, eso es lo que vamos a usar por el momento. Ten un poco de lectura a través de cómo funciona, te voy a mostrar cómo hacerlo. El principal para éste es el uso. Dice que necesitas hacer esto. Necesitas abrir la línea de comando, el pellet de comando y ejecutar esta cosa, y te mostraré cómo hacerlo en un segundo. Pero básicamente, ahí tienes, es donde tenemos que poner los detalles. Vamos a instalarlo primero, dale un segundo. Está instalado, en realidad no pasa nada. Podrían haber notado que hay un nuevo ícono por aquí que aún no funciona del todo, tenemos que configurarlo. Eso es lo que ven aquí. Dicen, haz esto, ejecuta el atajo en Windows o en Mac y luego escribe esto. Entonces lo haremos, y el largo camino está bajo Vista y Paleta de comandos. Por lo que Command Palette es que eres capaz de dar comandos a estos plug-ins. Es una forma cruda de hacerlo. Depende, podrías estar contento con la línea de comando terminal, algunas personas no lo son. Lo que quiero hacer es que quiero teclear SFTP, debería rellenarlo previamente. Para configurar este sea el software, esto es lo que necesitamos escribir. Vamos. Voy a cerrar mi HTML y mi CSS. Incluso cerraré esto haciendo doble clic en él, así que está bonito y limpio. Este pequeño archivo JSON son los detalles que debes poblar para que esto funcione. Ahora tú, “¿De dónde saco todos estos detalles?” Son las cosas que pasaron en un correo electrónico. O bien vienen de un correo electrónico de Bluehost o si vas a tu cuenta de Bluehost, las encontrarás desde Inicio, baja a Avanzado, ve a Cuentas FTP y las encontrarás al final de esto. Este top de aquí es el que se genera automáticamente y eso tiene que tener todos los detalles en él. Haz click en “Configurar cuenta FTP” y aquí te presentamos los conceptos básicos que necesitas. El nombre de usuario, el servidor que va a y el puerto. Alternativamente, si no quieres usar este plugin que estamos usando en VS Code, si estás más familiarizado con el FileZilla o Cyberduck para Mac, puedes usar esos. A geniales instrucciones de cómo usarlo, es solo otra forma. Entonces vamos a copiarlos y pegarlos a través. ¿ Qué tenemos? El nombre del servidor, se llama Bluehost. Esto no importa, puedes teclear cualquier cosa ahí. Esta siguiente, la dirección del host es realmente importante. Por el momento, es alojamiento local, en mi máquina, no es lo que quiero. Voy a agarrar éste de aquí, FTP. Ahora si estás usando algo que no sea Bluehost, a veces no puede tener el FTP frente a él y a veces lo hace. Entonces si estás usando alguna otra empresa de hosting, a veces está ahí, FTP, a veces no lo es, en este caso lo es. Ahora creo que en este caso sólo estamos usando FTP no SFTP. Vamos a revisar. Creo que puedes usar cualquiera en este caso. Pongo mi contraseña, ¿dónde está mi contraseña? Realmente no lo tiene, es una opción. Recuerdo esto cuando lo estaba configurando primero. Esto necesita una contraseña para entrar, contraseña. Por lo que sólo tienes que escribirlo dentro de las comillas, dos puntos y tu contraseña va entre comillas también y termina con una coma. Entonces tenemos un nombre, tenemos un host, tenemos una contraseña, tenemos FTP, el número de puerto, muchas veces es 22 en caso de Bluehost. Ahí están 21. Tu nombre de usuario, ¿dónde está mi nombre de usuario? Ahí está. Adareres, y el camino remoto. En este caso dicen que mi camino remoto es, ahora, eso no es todo. Generalmente para casi todas las empresas de hosting que alguna vez he tratado con su, déjame echar un vistazo, administrador de archivos. ¿ Te acuerdas de public_html? Ese es el que queremos. ¿ Te acuerdas de éste? Esa es la carpeta. Porque por el momento estamos iniciando sesión en esta gran cosa directiva que no necesitamos, queremos encontrar este public_html para llegar a nuestra página web. Entonces aquí, vamos a public_html y esto, uno depende de ti. Upload-on-Save Lo sintonizo a falso sólo porque el problema de tenerlo como cierto significa, cada vez que golpeo “Guardar” recuerda el archivo guardar todo, va a luego tratar de empujar mi sitio web en vivo a adare-restaurant.com. Si me falta un cinturón con él y todo está roto y medio despertar, el sitio web va a estar medio despertar a un costado. Entonces puse el mío en falso. De todos modos, eso es lo que ese tipo necesita. Entonces lo vamos a guardar y lo vamos a cerrar, y vamos a esta opción aquí para nuestro SFTP. Puedes ver a nuestro pequeño anfitrión ahí, lo vas a soltar, esta pequeña barra azul va a correr por un tiempo hasta que se conecte a tu servidor. [ inaudible] por supuesto que sí. Ahí vas. Por lo que ha encontrado mi índice y mi estilo y mis imágenes. El caso es que esto no está en mi computadora. Esto en realidad está mirando esta carpeta aquí en Bluehost la cual está conectada a mi URL, que es esta. Eso es lo que es. Entonces si entro aquí ahora y hago clic en esto, y hago clic derecho en él y digo borrar, ten mucho cuidado. Ves abajo aquí dice: “¿Estás seguro de que quieres eliminar tu página de índice?” A mí me parece bien, así que voy a pegarle una copia de seguridad en un segundo. Pero como lo he borrado aquí, mi sitio web va a enloquecer porque no tiene una página de índice. Voy a darle “Refrescar” Echemos un vistazo aquí abajo también, lo ves tarareando. Está pensando, está revisando el servidor. Nunca es un proceso rápido. Creo que se ha ido, luego borra. “ ¿Estás seguro?” Eliminar. El archivo no existe. Enfriar. Esta cosa podría tomar un poco de actualización, pesar de que hice clic en “Actualizar” todavía lo estaba listando. Ahí, se ha ido. Entonces ahora si voy al restaurante Adare, dice: “Oye, estoy enloqueciendo. No tengo página de índice”. Esa es la razón por la que necesitamos index.html. Me está mostrando otras cosas aquí. Tengo ver hojas de imágenes, pero eso no es muy útil. Entonces, ¿cómo volver a subir las cosas? Digamos que estoy en mi archivo Explorer, este top one, y aquí dentro voy a indexar página y estoy trabajando en ello. Este Explorer es mi material local, esto de aquí abajo, es el remoto. Remoto es considerado el disco duro del Bluehost. Eso es para tu sitio, como para otras personas, este eres tú. Entonces haz tu trabajo localmente y luego lo empujas en vivo. Para empujarlo en vivo, haz clic derecho en él y dices Subir. Off va, y debería estar subiendo. Ojalá en un segundo, pueda ir a adarerestaurant.com y debería estar de vuelta. Bonito. Ahora, eso va a funcionar bien para mitad de ustedes y el resto de ustedes que tienen hospedando otros lugares van a ser, “Oye, no está funcionando, estaba tan cerca”. ¿ Cómo lo arreglamos? Un par de cosas es que necesitas abrir lo mismo que antes, para volver a entrar a hacer la configuración. Eso es realmente raro. De todos modos, es solo la forma en que funcionan los plug-ins en VS Code. Puedo ir a View, ir a Command Pellet, y es lo último que hice, y puedo abrir este archivo JSON. Si no recuerdas cómo hacerlo, vas a la Extensión, voy a cerrar estos, y me muestra las que tengo habilitadas y le das click, y vuelven a leer la documentación sobre cómo hacerlo . Se puede ver que acabamos de hacer algunas cosas básicas, hay mucho más que pueden entrar ahí. Se puede hacer Watcher Folders lo cual es genial. Hay un montón de cosas que podrías necesitar hacer para que funcione, tal vez en tu escuela o en tu universidad o en tu trabajo. Entonces, ¿qué estamos haciendo? Ah sí, problemas. Entonces voy a cerrar todas las extensiones hacia abajo, y quiero ir a Ver, Comando Pellet y volver a abrir esto. Si no funciona, un par de cosas que puedes probar fácilmente tú mismo, es a veces que tu nombre de usuario tiene una dirección de correo electrónico. Podría ser esto en adarerestaurant.com, pero a veces pueden conseguir que algunos anfitriones hagan eso. A veces no necesitas el subrayado de barra inclinada pública. Simplemente puede ser levantado por sí mismo. Simplemente deja ahí la barra. A veces eso funciona. A veces necesita ser SFTP. A veces podrías obtener tu contraseña equivocada. Hablamos del host a veces no necesita el FTP al frente, se puede eliminar eso a veces. El nombre del host no hace nada. Apenas ambos se listan en esta pequeña carpeta aquí. Si eso aún no funciona, copia esto. De hecho copiaré y pegaré esto en un documento de Word ahora mismo y lo pegaré en tus archivos de ejercicios. Lo que haces es, contactas a tu anfitrión. Diga con GoDaddy, con su HostGator o con alguien más. Apenas viendo el boleto de apoyo y digan: “Oye, tengo una cuenta contigo y no puedo conectarla. ¿ Puedes decirme qué poner en esto?” Podrían decir: “Oh tú lo haces estás equivocado. Tienes que poner en puerto 23 o 22 o algo más”. O te dirán cómo cambiarlo redondo. El modo de probarlo es, una vez que lo hayas hecho, guárdalo. Eso podría ser algo que tú también has hecho mal. Es ir al archivo guardar, haga clic en esto, y haga clic en Bluehost, y ojalá esto eventualmente se poblará con las cosas en su sitio. Ahora qué pregunta intentas si aún no funciona y FTP puede ser bloqueado por tu internet provees , no tu proveedor de internet, pero di que estás en, no sé, una cafetería o un hotel que intentas hacer esto en? En ocasiones la infraestructura ahí, la red Wi-Fi, bloqueará las malas hierbas, cosas como esta, porque estás intentando conectarte con un servidor en línea y a veces se asustan. Entonces, si eso está pasando o al menos el tuyo está roto, intenta conectarte a un Wi-Fi diferente. Di que estás en el trabajo, pruébalo en casa. Si estás en casa, pruébalo en casa y prueba exactamente lo mismo porque a veces es tu internet lo que está mal. No son los detalles, no es el Código VS. Tengo ronda a veces haciendo un hotspot en mi teléfono como, ¿cómo lo llamas? El atado en un iPhone o un hotspot móvil en mi teléfono Android, y conecto mi laptop a eso y voy a probarlo y funcionó bien. Si aún no funciona, comunícate con tu anfitrión. Están ahí, son muy rápidos, Bluehost son realmente buenos en ponerse de vuelta a ti y ayudarte. Lo mismo. Pondré esto en un doc de Word ahora, intenta recordar [inaudible]. Lo pondré en tus archivos de ejercicio en un segundo y estará bajo el Proyecto 1 y lo llamaré Código FTP y eso es todo, lo he conectado, está en línea. Es emocionante que la gente pueda verlo, podemos actualizarlo, y si necesitamos hacer alguna enmienda, lo subiremos a nuestro sitio. Lo que tienes que hacer ahora es hacer click en él, realidad puedes agarrar un trozo de cosas, puedes decir que quiero imágenes y todo esto, haz clic con el botón derecho en todas ellas y decir Subir, y se subirá a tu anfitrión. Eso es todo para el Proyecto 1, ya terminamos. Eso es hasta donde vamos a llegar con este. Vamos a pasar a otro proyecto, Proyecto 2 incluso. Ahí hay taller de reparación de bicicletas, vamos a sumarle cargas más detalles. Vamos a agregar formularios, va a ser emocionante, va a ser líneas a tu descanso. Sacuda, yo también voy y nos prepararemos para el próximo proyecto. Nos vemos en un segundo. 34. Cómo configurar nuestro nuevo proyecto de diseño web y discutir nuestros temas: Hola a todos. Este video va a tener dos partes. Hablaremos de las cosas que realmente vamos a hacer en esta siguiente sección del curso y además conseguiremos configurar ese tipo de cosas geniales como la Carpeta Remota y conectando el CSS, ese tipo de cosas. Lo haremos primero arreglaremos todo y nos prepararemos, y después pasaremos por todo lo que vamos a hacer. Por el momento estoy en mi Explorer aquí. Actualmente estamos usando la carpeta local denominada Proyecto 1. No quiero poner aquí un segundo sitio web. Porque no queremos indexar archivos, porque no podemos. Vamos a ir a “Archivo” y vamos a ir a “Abrir”. Depende de cómo te gustaría hacer esto. Voy a ir a mi “Escritorio” y hacer una Nueva Carpeta. Voy a ir al “Proyecto 2". Emocionante. Haga clic en “Abrir”. En realidad no pasa nada. Consiguió una carpeta vacía, vuelta a la pantalla de bienvenida. Esquema. Voy a cerrar dando click en él. Voy a crear un archivo Index y Estilos y conectarlos a ambos. Archivo, Nuevo Archivo, éste se va a guardar y va al lugar correcto. Bonito. Index.html. Lo deletrearemos bien. Todo tiene que ser minúscula. Vamos a crear un segundo archivo. Este se va a salvar. Se va a llamar Estilo. Style.css o principal con estilos. Conectaremos a los dos hacia arriba. En realidad vamos a moverlas al otro lado agarrando la pestaña. Vamos a ponerlo todo bonito y con aspecto bonito antes de que empecemos. Conectemos dos. Recuerda, signo de exclamación, pulsa “Return”. Pone todo ahí dentro, debajo de esto. No tiene que estar debajo de esto. No sé por qué, siento que el título tiene que estar abajo, pero no tiene por qué serlo. Son algunos temas de orden. Más adelante, pero por el momento no importa realmente con los estilos siempre y cuando sea antes del cierre de la Cabeza. Entonces vamos a hacer enlace. Haremos un enlace de CSS. Vamos a escoger estilo. Recuerda, solo lo adiviné, pero eso es lo que conseguimos. ¿ Es eso? Creo que eso es todo. A mí me gusta torcer Open Editors porque me parece confuso y esa soy yo. Hablemos de las cosas que vamos a cubrir en este curso. Tengamos esto arriba. Este es el diseño que hice en Adobe XD. Si eres como, ¿qué hace este programa XD? Es un poco diferente de software y es solo el diseño. No es codificación, no es un sitio web real. Es como una maqueta. Es un programa realmente bueno. Tengo un curso sobre él si quieres ir a revisarlo. Busca mi curso XD. Pero, ¿qué vamos a cubrir en este? Vamos a hacer cosas como gradientes de fondo. Ahí hay una ligera. Vamos a construir este tipo de tarjetas. Donde tenemos, vamos a ver Icons. Vamos a ver cómo crear esos pequeños módulos. Probablemente lo más grande que vamos a cubrir en este curso es algo llamado Flexbox. Estaríamos instalando divs en este momento y tipo de moverlos por ahí. Vamos a tener que hacer un poco de cosas geniales donde todos se apilan uno al lado del otro y bits a la izquierda y bits a la derecha y el último proyecto para mantenerlo bastante simple para que podamos escenificar las cosas. No voy a mirar a través de mi lista aquí. Vamos a empezar con un restablecimiento de CSS. ¿Qué más vamos a hacer? Vamos a mirar a comentar en el código. Ya miramos eso. Altura mínima. Flexbox es el grande. Vamos a hacer fuentes porque en el momento que acabemos de conseguir ese Arial. Vamos a hacer Google Fonts de lujo y vamos a ver diferentes tamaños de fuente, cosas como Ems y Rem's. Veremos las imágenes correctamente, cómo crearlas. las diferencias entre JPEG y PNG. Haremos estos botones en lugar de solo texto. Ahí hay uno. Agregaremos algunas sombras de gota. Hay una sombra de gota en este tipo de aquí. Ahí hay esquinas redondeadas. Otro par de grandes es que haremos un menú desplegable. Cuando reserve en línea, eso se desplegará y en realidad tendrá una navegación adecuada. Nos fijaremos en crear un Formulario en lugar de solo ese mailto realmente sencillo que hicimos en el último. Eso va a ser por este proyecto ¿Qué más cubrir? Proyecto tres, recuerda va a ser un sitio web receptivo. Por el momento, éste no se va a ajustar para el móvil. Nos meteremos en eso en el tercer proyecto. El cuarto va a ser bootstrap. Está bien. Listo, set, adelante en este nuevo proyecto. Te veré en el siguiente video. 35. Qué es un reinicio en cero de CSS: Eric Meyers vs. normalizar: Hola ahí. En este video, vamos a discutir cosas como normalizar, reiniciar, HTML5, Reset del Dr. Eric Meyer. Básicamente todos son lo mismo. Ahí todos se llaman el CSS Reset. ¿A qué hacen? El verdadero versión rápida es que por defecto, mucho sobre etiquetas como h1's, h2's. como algunas de nuestras listas en etiquetas p que tendrán un estilo aplicado a ellas. A CSS Reset, editas tu CSS para que todos tengan el mismo aspecto. Estos siguen siendo h1's, todavía h2's y todavía listas desordenadas. Pero todos se ven igual y nosotros como diseñadores, llegamos a pasar y decidir cuáles son los tamaños, cuál es la fuente, cuál es el peso, sin dejar que los predeterminados ni luchar contra ellos. Eso es un CSS Reset, nota también en este video que viene. Digo mucho Eric Ries en lugar de Eric Meyer, porque estoy leyendo el libro de Eric Ries sobre Lean Startup por tercera vez y está en mi cerebro. Por lo que voy a alternar entre esos dos nombres a lo largo de este video. Perdón, Eric Meyer, saltemos. Está bien, sé que acabamos de crear estos archivos, pero se está cerrando. Vamos a crear como un archivo de tiro primero, solo para probar los puntos y luego volveremos a aplicarlo a nuestro proyecto real. Vamos a crear dos archivos, añadir dos archivos nuevos. Vamos a guardarlo. Este se va a llamar borrame 1, o simplemente llámalo deleteme.html. Yo uso la palabra eliminarme así que doy permiso a mi yo futuro para anclar esto sin ni siquiera comprobarlo. Ya sabes que haces estos archivos y los tienes en tu máquina, te gusta ese lazo? Si lo llamo eliminarme, me doy permiso, lo elimino sin siquiera comprobarlo. Voy a guardar esto y tengo deleteme.css. Tenemos dos, deleteme.html, deleteme.css. Vamos a conectarlos, separarlos como el último. Pon tus metadatos y conéctalos, es una buena práctica. De acuerdo link, CSS. No se llama estilo en este caso. Se llama delete.css. Muy bien, entonces, ¿qué hace esta cosa de CSS Reset de la que hablas? Básicamente cada vez que hacemos un documento en HTML que era cosas predefinidas. Entonces si hago un cada uno, y llamo a éste, mi rumbo y golpeo guardar y luego lo previsualizo y por favor ten en cuenta que no funcionaba para mí hace un segundo, no pude encontrar ese pequeño botón. Si no puedes encontrar ese pequeño botón, solo tienes que hacer clic derecho en tu página aquí y decir abrir con servidor en vivo. El gozo de los plug-ins. Un poco rápido para ello. Tengo que abrir aquí. Sabemos que si ponemos ese rumbo, lo hace grande, negro audaz Times New Roman. Ahí está acariciando por encima. Hay algo de espaciado a la izquierda. Definitivamente hay algo de espaciado debajo. Ahí están los incumplimientos. En algún lugar de los días de Internet, alguien decidió que así debería ser un h1 todo el tiempo. Lo primero que hago como diseñador, es que quiero cambiarlo y ahí es donde entra el CSS Reset. Yo quiero que el encabezamiento se vea exactamente igual que el encabezamiento dos, exactamente igual que un párrafo. Yo decidiré de qué tamaño son, no tipo de lucha contra los impagos. Echemos un vistazo a hacerlo para ver qué hace primero. Por aquí tenemos nuestro rumbo uno. Pongámoslo en un encabezamiento dos. Ahora, poner en marcha un encabezado toma como tarea, vale, porque tienes que pensar en algo para ponerlo como yo hago esto todo el tiempo. Entonces ponemos algunos textos falsos llamados Lorem ipsum. Probablemente podrías haberla encontrado otra vez en diferentes lugares. Pero básicamente si escribo lorem con una e, ok y hit return y pone un montón de palabras latinas mezcladas. Tiran palabras, pero están todo un poco revueltos. Pero como una especie de cool like, lo voy a guardar, ya ves es solo un bonito portabocado. Ese es un poco largo. Voy a hacer un par de cosas. Una es, voy a volver a encender mi envoltura. Entonces si alteras el envoltorio de palabras y lo que haré es, no quiero tantas palabras. Por lo que se pone aún mejor. Lorem, esto está usando emit. Recuerda que ya hablamos de ello antes. Tan poca abreviatura y digamos que sólo quiero cinco. Por lo que no emiten espacios, cinco, golpe retorno cinco anchos. Bueno, pongamos algún otro tipo de etiquetas por defecto o pongamos una etiqueta p. Yo quiero que este sea Lorem de digamos 20, hit return. Pondré un par de etiquetas más de las que aún no sabes. Vamos UL, dentro de esa UL, pongamos un LI. Se trata de una lista desordenada con un elemento de lista dentro de ella. Si te gusta, ¿qué es eso? Nos ocuparemos de eso más adelante. Por lo que UL y un OL con LI's en el interior. Si no puedes hacer que eso suceda, no te preocupes. No es realmente importante. Tengo que escribir algo en el medio aquí, voy a añadir algo en el medio. Me estás vigilando. A veces se pone un poco no fluida. De todos modos, así que lista desordenada es un punto de bala, lista ordenada y OL tiene un número, pero tenían sus propias cosas, es espacios entre éstos, esto está sangrada. Este de aquí tiene una gran brecha, el otro tiene incluso una brecha más grande. Este es audaz, éste no. Entonces, despejemos todos los predeterminados pero haciendo un CSS Reset. Ahora bien, ¿hay uno específico que puedas usar? No, hay un billón de ellos.Puedes hacer uno propio. El que más uso y es bastante popular alrededor de internet. Si miras en tus archivos de ejercicios, hay uno llamado proyecto dos y vamos a apoderarnos de éste aquí, CSS Reset, Eric Meyer. Era el más famoso. Este tipo de aquí. Desarrollador de onda, hizo un CSS Reset. Todo el mundo lo usó. Se está actualizando un par de veces. Todavía lo uso. A mí me encanta, pero hay otros. Hay cosas como normalizar, vamos a discutir en esta, pero hay otras que no vamos a cubrir ese solo tipo de alternativas para ello. Hay uno que se llama normalizado, estamos haciendo eso. Reboot, HTML5, doctor, ¿qué más? Esos son los que vienen a la cima de mi mente, pero hay muchos y si eres como yo, terminas empezando con alguien como Eric Meyer y luego ajustándolo como quieras. Voy a abrirla. Voy a copiar todo esto fuera de él. Solo lo estoy seleccionando todo, copiándolo, y volveré a Visual Studio Code. Ahora, ¿dónde lo pones? Lo que haremos, es ponerlo en este delete.css. Lo pegaremos y eso es todo. Eso es todo lo que tenemos que hacer. Voy a salvarlo todo, par de bandos. Ahora veamos el documento. Simplemente lo aclara todo. Simplemente dice que todos somos iguales, todos somos iguales aquí y ahora puedes pasar como diseñador y decir, está bien, ahora abajo aquí, después de todo esto, yo puedo decir, quiero que mi h1 sea arial y ahora vamos a poner una fuente, familia de arial, punto y coma. Entonces ahora llego a decidir y como que lo construyo a partir de ahí. ¿ Se puede ver el tipo de lógica en ella? Al menos puede que no te guste. Tal vez te guste empezar con todos los impagos y es totalmente divertido. ¿ Qué más estoy haciendo? Tratando de hablar y codificar. Ahí vamos. Yo lo hice más grande. Hago esto siempre que esté iniciando un nuevo sitio, voy a pasar, agarrar el de Eric Meyer y simplemente colocarlo en el principio y trabajar de abajo hacia abajo. Echemos un vistazo a este. Esto es decir normalizar. Voy a borrar todo esto, borrarlo, y mirar el normalizado. Sí le gusta un sabor diferente de la misma. Lo que hace normalizar, en lugar de reestablecer sus valores predeterminados, lo que hace es, voy a copiar todo esto, pegarlo, guardarlo, y echarle un vistazo. Eres como, eso se ve realmente similar a lo que era y como que es. Lo que intentaré y haré es, abriré esa. Volveré en un segundo para compararlos. Está bien, así que sub lado a lado y estás como, se ven igual, pero miran los emparejamientos diferentes por dentro ahí. Está bien. Supongo que la gran diferencia entre esto es, normalizar la consistencia de las cabezas en todos los navegadores. Sabemos que estamos usando Chrome, en este caso, es nuestro navegador, pero es posible que estés usando Microsoft Edge o Microsoft Internet Explorer, Mozilla Firefox, Safari. Hay muchos navegadores diferentes y el problema con todos estos navegadores diferentes, todos han decidido interpretarlo, nuestras etiquetas h1's o h2's o p. Todas estas cosas son ligeramente diferentes. Es un poco difícil mostrar lo extremo. Entonces te estoy mostrando en safari, solo se ve diferente. Firefox. Se ve diferente, el espaciado es un poco diferente. Ahora lo que hace normalizar, es que lo hará consistente a través de todos ellos. Todos ellos tienen el mismo relleno en el lateral, todos ellos tienen exactamente los mismos espacios entre ellos. Ese es el trabajo de normalizar. Ahí están ellos. En lugar de tratar de hacer cosas y probar en un navegador, y es como, "Por qué es diferente en esto, normalizar es una forma de realmente un poco bastante fuerte de CSS. Eso sólo intenta, supongo, hacer que todo parezca consistente. Se puede ver aquí que hay un montón de comentarios. Aquí puedes ver esta pequeña opción, esto con poco hack hará que los tamaños de fuente de h unos cuando estén en una sección y artículo sean consistentes a través de todos estos diferentes navegadores. Ese es su trabajo, consistencia. Sigue siendo un restablecimiento de CSS, pero está haciendo algo ligeramente diferente. Es sólo hacer que todo se vea igual mientras que el de Eric Ries lo hace todo, nada. Entonces vete todo lo que este solo ve hay todos ser igual ¿eso tiene sentido? A lo mejor la primera, pero no la segunda, esa es mala enseñanza entonces. Entonces lo que voy a hacer ahora es no aplicarlo lo haremos en un segundo en realidad, lo aplicaremos a nuestro proyecto para citar pero un par de cosas en las que pensar cuando lo estás haciendo nunca se pone esto a mitad de un trabajo porque es como una casa de tarjetas. Cuando dejas de construir cosas, todo depende de todo lo demás. Viste una etiqueta de cuerpo para ser una fuente, pero luego cambias la h para escoger una fuente diferente y está construida encima de esa etiqueta de cuerpo original y es una torre de tambaleo. Por lo que no puedes simplemente ir y tirarlo en la parte superior de tu documento y esperar arreglar algunos problemas, no funciona, solo dejarlo fuera. Si tienes un sitio que no lo tiene, lo mostré porque tendrás sitios que ya tienen ahí dentro. Estarías como, ¿qué es todo esto? Ni siquiera sé qué hace y empiezas a borrar cosas y va a ser como, Sí, no está haciendo nada. Es porque alguien ha usado un reset CSS como este. El otro punto a tener en cuenta es que es muy obstinado. gente no le gusta el de Eric Ries por X, Y, y Z y otra persona, piensa como bueno, pero deberían cambiar esto y no debería haber hecho eso y había muchos de estos diferentes reinicios, ya he te dio una pareja pero hay montones de ellos por ahí y vas a encontrar las veces que nos gustan en realidad que ve sus restablecimientos no está funcionando para mí así que vas a crear como un Eric Ries ', Eric Reese y modificado por Dan. Sigo diciendo Eric Reese, es una persona diferente de Eric Meyer, Eric Ries ¿es el tipo de startup magra? De todos modos, tienes lo que quiero decir, ¿verdad? Muy bien, así que vamos a poner en práctica esto. No lo voy a guardar porque era justo como una pequeña página de prueba desechable y lo que voy a hacer es eliminarla por aquí para que sea agradable y limpia para nuestras notas. Vamos a borrar, se fue. Está bien, así que abre ambos, haz doble clic en ellos. Abrirán dos pestañas en lugar de solo una y ya estamos de vuelta. Entonces para aplicarlas, no puedes simplemente volcarlas en el CSS y a la mayoría de la gente, a mí la gente incluida, le gusta mantenerla en su propia hoja separada. Entonces lo que haremos es crear otro archivo, llamado, guardarlo, y lo voy a llamar CSS reset pero sin espacios, CSS. Eso es descanso. Restablecer, vamos a hacer clic en Guardar. Entonces tenemos dos hojas de estilo, solo una de ellas está conectada y necesitamos agregarlas y esto es realmente importante adónde va. Tan bueno de CSS es que puedes tener tantas como quieras, puedes tener dos de ellas solo para separar todo lo demás. Para un sitio web pequeño, realmente no necesitas hacer esto a menos que tengas algo como esto, como un restablecimiento de CSS ¿cómo lo llamamos? Nosotros lo llamamos CSS, reset o rest? El gran cosa es este orden, restablecerás necesita estar frente a tu hoja de estilo lo contrario hará cosas realmente raras porque vas a decir como B H uno y el tuyo propio, digamos que está de vuelta al revés . Se carga la página de arriba a abajo. Lo primero que ve el navegador es como, Hey, soy HTML y va pulgares arriba y luego dice, hey, estoy escrito en el idioma inglés y va pulgares arriba. Entonces lo está leyendo desde arriba y llega hasta aquí entonces llegarás a tu estilo y dices, quiero que mi bateador sea blanco y en el reset dice: Hey, todos sean negros y luego sigue adelante. Para que veas cómo sería el problema, las cosas que llevabas son seguir restableciendo a la normalidad. Por lo que se asegura de que el reset esté por encima de tu CSS y tengo mis estilos no es nada en este. Mi reset CSS, voy a pegar el de Eric Ries. No normalizar, copia. Te voy a mostrar esto ahora porque se ve raro, vas a encontrar sitios web que lo tienen y cuando más tarde hagamos cosas como Bootstrap y eso lo va a hacer por nosotros, así que nos gusta presentarlo ahora. Se puede ver como que está haciendo cuando ve todas estas etiquetas? El margen cero cero cero cero cero, solo me deshago de todo juega y recuerdo las O L que teníamos? ¿Dónde estaban? ¿ Están aquí en alguna parte? Están ahí, la lista ordenada, listas desordenadas, dicen lista-estilo ninguno. Deshazte del punto de bala y del pequeño número que empieza acaba de despejar, por favor. Está bien y eso va a ser que ya los puedes cerrar. Lo salvaremos primero y ahora nada va a parecer cambiado pero tengo este pequeño conjunto de estilo reset en segundo plano, haciendo lo suyo. Entonces cuando agrego un H uno y practicando ahí pequeño atajo, guárdalo. Voy a abrirlo en un navegador, apagarlo, encenderlo. Ahí está un pequeño H uno, pero es agradable y pequeño y no está desestilizado. Está bien, vamos a deshacernos del H, él sólo era un pequeño tenedor del lugar y lo haremos comentando solo para dejarlo realmente claro para nosotros mismos. Hicimos comentando por aquí, ¿recuerdas? Hicimos cosas y luego lo envolvimos en esas etiquetas. Recuerda que es barra hacia delante Comando en mi teclado, o solo tienes que escribir los asteriscos de barra hacia delante. Para HTML, es un poco de código diferente. Lo que quiero hacer es decir que este es el restablecimiento CSS de Eric Meyer. Sólo para ayudarme más adelante mi futuro yo para ir sí, eso es lo que es. Entonces pero no puedo simplemente dejarlo así, tipo de envolverlo en mi etiqueta, puedes usar el mismo comando de atajo barra hacia delante en mi MAC, controlar barra hacia delante en un PC y puedes ver HTML comentando es mucho más grande. Es necesario poner entre corchetes, signo de exclamación, dos guiones y el otro lado es sólo dos guiones y corchetes angulares. Entonces una vez que lo tienes ahí dentro, esto es realmente útil, así que puedo ser un poco más específico con mi etiquetado nocturno. Esta es mi propia hoja de estilo, los separo con las devoluciones porque así ruge Daniel y título del documento que casi nos olvidamos. Se llama ciclos rugido y es Bike Reparar en Dublín. Bonita palabra clave jugosa rica lámpara de título, haz un guardar todo y te veré en el siguiente video. 36. Qué es una altura mínima comparada con altura para una etiqueta div: Muy bien, este video tiene dos partes. La parte principal es aprender qué es min-height en lugar de estatura. Entonces vamos a hacer sólo un poco de limpieza. Vamos a añadir alguna estructura a nuestra página. Agregaremos un contenedor y flotador en el medio, bateador y Main y estas cartas abajo aquí abajo. Es cosas que has hecho antes, pero tenemos que hacer antes de pasar al siguiente video. Aprendamos qué min-altura está en el código. Muy bien, primero arriba, necesitamos algo para darle algo de altura o min-altura a. En primer lugar, vamos a crear un div, llamado contenedor. Presiona “Espacio” o toca “Return” en tu teclado, clase div es igual a contenedor. Pondré un [inaudible] separarlo. Por aquí, vamos a darle estilo. Recuerda, parada completa frente a ella y contenedor, llaves. Entonces le daremos un ancho primero. Haremos lo mismo que antes, 1024 píxeles. No olvides los píxeles, y no olvides el punto y coma. Vamos a darle un color de fondo. Voy a escoger cualquier cosa, ¿de acuerdo? No voy a usar los nombrados. Voy a hacer variaciones de verde. Voy a empezar con verde oscuro, para empezar. Asegúrate de que el punto y coma vaya al final. Vamos a comprobarlo. No va a poder ser visible porque aún no hemos dado una altura, pero solo mantengamos esto en marcha. Tengo algo de mi otra pantalla. Ven aquí, amigo. Bien. Tenemos que darle una altura y aquí es donde entra min-height porque si le damos una altura regular y digo que quiero que sea, digamos, solo voy a decir 300 pixeles porque me facilita mi ejemplo. Echa un vistazo, pero nos topamos con este problema antes si empezamos a agregar cosas a esto, digamos que agrego una etiqueta P y pongo un montón de contenido, tenemos un gran artículo largo o un post de bug. Yo quiero poner en 500 palabras, que no es masivo. Golpea “Save”, salta aquí ahora. Se puede ver que se derrama. En lugar de usar una altura, es muy simple solo usamos una altura mínima. Solo estamos diciendo que el mínimo que puedes ir es de 300, pero puedes ir de cualquier tamaño más grande que eso si el contenido lo necesita. Eso lo ahorraremos. Vamos a previsualizarlo aquí. Aquí tienes. Dice estar a 300 a menos que necesites más, por lo que irá más grande. Siempre que estés pensando altura ahora más o menos para todo, piensa min-height. Yo lo quiero centrar. Pausa aquí, escribiendo el centrado. ¿ Recuerdas Centrado? Yo quiero que lo pausas, a ver si puedes hacerlo. Ve. Está bien. ¿Estás de vuelta? ¿ Recuerdas qué era? Fue margen izquierdo. Mi margen, izquierda. ¿Qué fue? Eso fue auto. Ya lo tienes. Buen trabajo. Entonces margen a la derecha, margen a la derecha. Está bien, vamos a comprobarlo. Está en el centro. Está bien, así que vamos a tirar algunos otros trozos. Ahora, veamos el simulacro hacia arriba. Está en tus archivos y Exercise Files, Proyecto 2, hay uno en llamado Mock up ejemplo. Mira primero la página de inicio. Eso se puede abrir. Estoy usando el archivo XT sólo porque es una directiva, pero lo mismo. Vamos a tener nuestro contenedor. Vamos a tener un encabezado en la parte superior. Vamos a tener una sección principal, vale, entonces vamos a añadir algunas cartas también. el principal va a ser este título. Este texto aquí lo harían por separado, vamos a hacer estos tres pequeñitos aquí. Algunas personas se refieren a ellos como fichas, o tarjetas. Nos vamos a referir a ellos como cartas, pero los azulejos no importan. Cajas pequeñas puedes llamarlas como quieras. Tan solo pon esos y lo discutiremos más adelante en el curso. Está bien, así que vamos a tirar esos bits en mi envoltura de nuevo en, tomó un envoltorio de palabras, que estaba haciendo clic en el equivocado. Me hicieron clic aquí así que es el envoltorio de palabras en CSS, que es separado. Ahora, lo hace aquí, y quiero deshacerme de ese pedacito gigante de la etiqueta P. Estaba justo ahí como ejemplo. ¿Qué necesitamos? Necesitamos cabecera, predefinido uno, encantador. ¿ Qué más necesitamos? Necesitamos una parte principal. ¿ Tenemos incluso un pie de página en este? No tiene pie de página. No tienes que tener un pie de página. Yo no diseñé este, con uno así que no tenemos uno. Lo que me gustaría hacer es poner en tres cartas. Va a estar fuera de este principal porque quiero que no forme parte de este contenedor principal. Yo quiero que esté en todas las páginas y tú vas. Está en esta otra página es una cajita separada. No existe tal cosa como un predefinido como el contenedor. No hay nombre para las tarjetas que tenemos que darle. Creo que se llama tarjetas paralelas. Ya se hicieron y vamos a hacer las tres pequeñas tarjetas separadas y un segundo va a hacer como una caja en la que van a entrar todos. Vamos a diseñar envoltura de etiqueta que va alrededor de todos estos tipos, es el principal este de aquí y luego vamos a poner los pedacitos individuales dentro. Lo mismo con el encabezado. Hemos hecho esto como grande chunky aquí en la parte superior dentro de ella va a ir, el logo, dentro de ella van a ser estas pequeñas etiquetas, lo siento pequeños botones. Está bien, así que tengo cartas, vamos a las cartas de estilo. Tenemos contenedor, tenemos cabecera. Vamos a tener un color de fondo de qué? Nos vamos a poner visiones de ese verde. color de fondo, iba a ir más claro y más claro a medida que voy. Nosotros; re vamos a poner en un min-altura, min-altura. Ahora, se puede ver esto, no está funcionando. No lo está pre-llenando. [ inaudible] o bien empieza a hacer eso es porque hemos olvidado cerrar esa propiedad en la parte superior de ahí. Ahora, si empezamos a escribir, está de vuelta. Va a ser un 100 pixeles. Eso es todo lo que quiero hacerle. Ahora, vamos a revisarlo antes de ir más allá, ¿qué hice? Yo no le pegué a “Guardar todo”. Ahí están. un contenedor que es el verde oscuro es un encabezado y al final. Echemos un vistazo. Ahora, los colores están aquí sólo por su placer de visualización para que pueda ver dónde arriba las cosas y darle estilo principal y [inaudible]. Este de aquí va a ser aún más ligero. Agradable. Este de aquí tiene una altura de 300. Haremos lo mismo por las tarjetas. Ahora me estoy poniendo realmente perezoso. Impresionante. Este lo llamó.tarjetas. Este de aquí va a ser aún más ligero de nuevo. Guárdalo. A ver qué tenemos. Está bien, entonces hay un contenedor escondido en el fondo. Ya está cubierto. Después hay un encabezado, luego hay un principal, y luego están mis tarjetas. Mis tarjetas son demasiado grandes, ¿verdad? Cambiemos eso en un segundo. Está bien. Está bien, para que eso nos saque la estructuración básica. Siguiente video, vamos a ver cómo agregar tarjetas y trabajar con algo llamado Flexbox. Muy bien, nos vemos entonces. 37. Cómo poner etiquetas div en una línea usando Flexbox en HTML y CSS: Hola ahí. En este video vamos a hablar de apilar cajas uno al lado del otro. Parece sencillo. En el proyecto anterior y yo apilé todo encima uno del otro por una razón sólo para que esa parte del curso sea agradable y fácil para que empecemos. Pero muy rápidamente vas a querer poner cosas al lado del otro lo cual es bastante natural. Pero por defecto, Si empiezas a apilar cosas, hice estas casitas, y las meto en mi HTML y por defecto realmente quieren estar encima el uno del otro. Te gusta simplemente ir allá, vamos a usar algo llamado Flexbox para que peguen uno al lado del otro como queremos. ¿ Estás listo? Ya estoy listo. Vámonos. Antes de poder agregar nuestro flex, necesitamos crear un par de contenedores. Voy a crear dentro de esta clase de tarjetas fuera de, toma aquí, vamos a crear tres nuevos divs dentro de ella, y lo vamos a llamar tarjeta uno. Vamos a tener otro parece, sólo voy a hacer trampa, copiar, pegar, pegar. Los tres, tengo uno, les voy a llamar tarjeta uno, dos, y tres. Ahora, les estoy dando nombres específicos porque más adelante en el curso, estoy adelante pensando un poco, realidad están para hacer cosas diferentes, porque éste tiene un fondo de esa imagen, éste tiene un imagen, esa tiene una imagen diferente. Hacen cosas diferentes. Voy a darles nombres específicos. Si eres tarjetas son genéricos, no tendría que darles nombres separados. De todos modos, bueno, al menos podría llamarse toda tarjeta uno. Ahora, empecemos todas estas cartas. Empezaremos con tarjeta uno y luego lo copiaremos y pegaremos unas cuantas veces. Le daremos un color de fondo y una altura mínima, la misma que ésta. Cambiaremos el color para que sea algo aún más ligero. En realidad, vamos a cambiar esquemas de colores porque mi plan verde no está funcionando perfecto. Voy a ir por el, ni siquiera estoy seguro. Yo quiero decir melón de agua? No, [inaudible] no. De todos modos, rosa. Vamos a ir este y a tirarlo todo y escogiendo un color, y vamos a usar la misma altura, pero altura mínima en caso de que necesite hacerse más grande. Vamos a darle un ancho porque quiero tres de ellos ahí dentro. Yo quiero, podrías darle un ancho de píxel, tiene un ancho absoluto. Podrías ejercitarte. No quiero ir 1024 divididos por tres, es impidiendo para ello, y tú puedes hacer eso. O un lindo truco fácil es, no importa si usas píxeles o en este caso, podemos hacer un ancho de, lo haces por todo, no solo por estas tarjetas. Podemos hacer ancho de porcentajes. Si hicimos 33.3%, va a otro que, perdimos un poco ahí pero va a caber tres a través fácil. Echemos un vistazo a lo que tenemos, guardemos todo y vamos, estos mi primero. Voy a duplicar eso unas cuantas veces, dos veces. [ inaudible] Tengo tres de ellos. Tú, eso tienes que ser tú, y tú, eso tiene que ser tres. Voy a cambiar los colores. Encendedor. No lo suficiente cambió entonces. Este de aquí se va a ir súper ligero. Tengo tres tonos diferentes de mi rosa y por defecto siempre se alinean uno encima del otro, que es justo la forma en que funciona en tarjeta. Si no haces nada más, todos intentarán apilar bien uno encima del otro. Es donde Flexbox va a entrar en este video en particular. vamos a apilar muy bien juntos, y la forma en que funciona Flexbox es nueva para, como si hubieras hecho un curso mío anterior, estuviéramos flotando izquierda y derecha. Eso aún funciona, pero es más difícil de implementar porque tienes que despejar flotador y ese tipo de cosas. Si nunca has oído hablar de flotadores, no te preocupes, Flexbox solo facilita las cosas y es nuevo para HTML5 y funciona en todos los navegadores en este momento, lo cual es genial. Todo lo que necesitas hacer es que haya una etiqueta de padre. Por eso este grupo, estas tarjetas tienen su propia pandilla ligera, o su propio pequeño padre. Ellos son etiqueta de padres, estos son los hijos, porque están dentro del padre. Este padre necesita que le digan que se flexione y todos los que estén dentro de él se alinearán muy bien juntos. Simplemente mucho más fácil de hacer. Encuentra tarjetas y vamos a decir exhibición. Gracias. Vamos a decir flex. Asegúrate de que el punto y coma vaya al final y ojalá, mientras el trabajo está hecho por nosotros. Mira eso. Ahora, si eres nuevo en el diseño web y eres como, sí, eso es genial. [ inaudible] Vamos. Si lo has hecho antes y eres como yo y detente, no, eso es increíble. Me encanta, pero flotar antes de despejar carrozas fue un drama. Ahora no lo es. Pero no voy a seguir porque probablemente seas nuevo y probablemente no te importe tanto y tanto como a mí. Pero lo que hay que recapitular es que porque podría haberme escapado con no tener este envoltorio aquí porque no hay razón real porque los principales acabados y luego empiezan estos tipos. Pero quería esta envoltura porque todo este padre porque quiero aplicarle flex a ella. No se pueden aplicar de forma individual a los tíos eran dudet. Tienes que hacerlo al padre en su lugar. Eso es lo que vamos a hacer con Flexbox en los momentos. No puedes apresurarte y aprender más sobre Flexbox. He doblado en este curso para intentarlo y, no sé, no tirarlo todo en un solo video. Viene más acerca de Flexbox, pero por el momento, mayoría de las veces lo estoy usando es solo para conseguir que las cosas se peguen en su propia línea. Sí, y eso es todo para este video y te veré el próximo. 38. Añade espacios uniformes entre etiquetas div usando flexbox sin márgenes externos: Está bien, regresarás, estoy de vuelta con este video. Vamos a hablar de espaciar y entre nuestras casitas aquí abajo. Súper fácil de usar Flex Box. El tramposo es solo agregar eso y eres el dominio del padre. Pero hablemos de ello un poco más en el video para que realmente lo entienda. Además pasar el rato, hay una hoja de atajos al final. Nos vemos en un segundo. Podría haber visto esto en el último video, pero antes de que podamos empezar, necesitamos arreglar mi problema de sintaxis. Habría notado que se me olvidó poner estos, los puntos y comas al final. ¿ Por qué no lo rompieron todavía funcionando bien. Es porque, Es lo último de esta lista. Entonces como fondo, necesita el punto y coma para saber que está terminado. Entonces lo mismo con altura mínima, necesita conocerlo. Entonces éste para empezar, pero no hay nada después, así que está bien. No es hasta que te vayas, quiero hacer algo con la pantalla, pero simplemente no funciona. Es del color equivocado y no se rellena previamente. Es porque tengo a estos tipos. Eso está bien. Ve por ese otro lado. Entonces lo que queremos hacer es, queremos agregar algo de espaciado y te mostraremos el mal camino y luego la manera realmente fácil. De acuerdo, podríamos simplemente pasar porque necesitamos hacer las cajas un poco más pequeñas porque por el momento no hay espacio para espaciar. Entonces podríamos simplemente entrar aquí ahora y vamos a hacer que sea un 30 por ciento para todos estos. Ahora voy a usar mi multi cursor. ¿ Ya he hecho multi cursor? Si no lo hemos hecho, puedes aguantar el honor Mac. Es la clave Opción. En un PC es la tecla Alt. Puedes hacer click una, dos, tres veces, ver el parpadeo de mi cursor o todas ellas. Lo hicimos de una manera ligeramente diferente. Si no estás seguro del atajo o no está funcionando para ti, Es éste de aquí. Se puede cambiar entre Comando click para multi cursor, o hay otra opción que es alt click. Puedes alterar entre esos dos, solo tienes que averiguar cuál funciona para ti. Iremos a tu práctico atajo de dandy PDF que te dimos. ¿ Recuerdas eso? Tomemos un 30. Guardar todo, vista previa. Ahora tenemos algunos espacios por todas partes, así que queremos ponerlo en el medio. Podríamos hacer esto, podríamos ir margen. Entonces el primero va a tener un poco de margen a la derecha, y digamos que queremos que sean 20 píxeles. Entonces éste, quiero 20 píxeles a la derecha de éste también. Entonces en este te gusta pedir demasiado, así que se incrementa. Este sube un poco hasta que lo lleguemos al borde y terminas, el mayor problema es cuando se mezclan porcentajes con tamaños físicos. Lo realmente fácil de hacer es eliminar esto. Otra de las bondades de Flex Box. Vamos a aprender muchas bondades de Flex Box. Necesitamos los anchos. Todo lo que tenemos que hacerle al padre es decir, me gustaría que justificaras el contenido, y quiero que sea, hay un montón de diferentes. Vamos a usar el espacio. Ahora hay dos que usarás espacio alrededor de ellos entre. Hagamos alrededor, y luego pongamos otro punto y coma. Entonces todos los niños van a espaciarse bien, echemos un vistazo. Entonces pongamos espacio a ambos lados. Por lo que ambos tienen cantidades iguales a ambos lados. Se doblan en el medio porque ambos se están conectando entre sí. El otro modo que puedes hacerlo es el otro. Entonces hicimos espacio alrededor, y al otro se le llama espacio entre. Guárdalo. Ese es el que yo quiero. Ahí vas. Entonces sólo los separa muy bien. Gracias, Flex Box. Si eres como, esta cosa de Flex Box, nunca voy a recordar eso también, porque yo hago eso. ¿ Se justifica el contenido? Ahí hay otro llamado justifican artículos. Lo que he hecho es que te he dado en tus archivos de ejercicios, en tu hoja de atajos, esta cosa llamada hoja Flex Box por Joni Trythall, eso servirá. Esto es realmente genial, muy bonito también, buen trabajo. Es posible que quieras imprimirlo. Tal vez quieras solo míralo así, y sólo me da algún entendimiento básico de ellos. Se puede ver aquí para activar los poderes de Flex Box, el contenedor necesita tener display Flex en él, y luego los niños digamos éste aquí. El que queríamos era, ¿qué hacemos? Sí justificamos el espacio de contenido alrededor, el espacio entre ir derecho a los bordes. Por lo que tiene un bonito poco de visuales de la misma que me parece súper útil y se puede simplemente pasar. Vamos a cubrir mucho de esto en el curso. Pero volveremos a referirnos a este. Gracias por este Joni. Está bien, eso es todo por este que hemos hecho nuestro espaciado, vamos a entrar en el siguiente video. 39. Cómo tener 2 etiquetas div de diferentes tamaños en la misma fila html css flexbox: Hola ahí. En este video, vamos a hacer etiquetas div que sean de diferentes tamaños. Hemos hecho cosas espaciadas uniformemente, bonitas y fáciles, pero en este caso quiero que este sea dos tercios y éste sea un tercio de esta parte principal principal de mi página web. No se va a ver esto bonito, nuestra versión va a verse así, pero es el mismo principio. Dos tercios, un tercio usando Flexbox y display flex. Para empezar, necesitamos agregar dos cajas. Esta caja aquí que va a tener mi H1 y la etiqueta p y este botón en ella, y esta otra caja por aquí para tener la imagen en ella. Aquí van a haber dos cajas grandes. Pongámoslos en nuestro HTML. ¿A dónde van a ir? Van a ir adentro principal y poner un regreso, y yo voy a meter. ¿ Cómo voy a llamarlos? Podría llamarlos secciones. Sólo voy a llamarlos div tags. Secciones, artículos, me confundo con. Este va a ser div de herobox1. Pongámoslo primero. A menudo esta zona, el cabezal principal se puede llamar herobox. Bueno la imagen de héroe o la imagen principal principal, héroe se acostumbra un poco, lo uso un poco. Entonces tenemos dos cajas. Vamos a tener esa, voy a copiarla, pegarla. Entonces tenemos dos, y les voy a dar nombres diferentes porque queremos que sean de diferentes tamaños. Agradable. Separemos un poco estos. Yo digo que lo estoy haciendo por ti, pero realmente por mí soy. Soy una persona visual haciendo código. En el herobox quiero agregar un par de cosas. Yo quiero agregar un H1, cool, y quiero agregar tal vez Lorem, tal vez anchos completos para el hitting, y voy a añadir un p-tag, y esa p-tag va a tener tal vez 30 pesos. Impresionante. Guárdalo, vamos a comprobarlo en el navegador. Ahí lo tienes. Enfriar. Yo quiero hacer lo mismo para el siguiente cuadro. Voy a agarrar eso, robarlo, y sólo poner las mismas cosas dentro, herobox2. Esas son mis dos cajas, tienen exactamente el mismo contenido, tienen nombres. Un par de cosas que tenemos que hacer es primero arriba, necesitamos básicamente hacer lo que hicimos en los últimos videos, conseguir que se apilen uno al lado del otro. Sólo se apilarán uno al lado del otro si tienen un ancho. Entonces tenemos que decir: “Ustedes tienen un ancho”. Hagámoslo primero. Haremos una cotización herobox1, y le voy a dar a esto un ancho de digamos 50 por ciento. Suena como un buen número porque es la mitad, y haremos lo mismo con el segundo cuadro. Este va a ser herobox2. Les damos a ambos diferentes colores de fondo. Color de fondo, y éste va a ser, vamos a deshacernos de estos colores pero azul aciano. Agradable. Este va a ser color de fondo, y éste va a ser de color aleatorio el siguiente, crema de menta. Tomémoslos arriba. En realidad todos están trabajando. Sí. Entonces tienen un ancho que es que apilar uno al lado del otro. ¿ Cómo hacemos eso en primer lugar? No estamos preocupados por las alturas en este momento porque estos palos y es mantener estas cajas abiertas. Si lo estás haciendo sin este h1 y p-tags, pon algo de contenido ahí, o dale algunas alturas. Por lo que apilarlos uno al lado del otro. ¿ Te acuerdas de pop quiz, listo, ciudad, qué hiciste? ¿ Pausa? Ve a intentarlo, apilándolo uno al lado del otro, así es. El padre necesita ser llamado flex de pantalla. Entonces en este caso el padre es principal. Tan principal, diré display, y diremos flex, por favor, y así tenemos que hacer, todos los niños, vale, que son estos dos tipos, entrarán, apilados uno al lado del otro. El otro punto a saber de Flexbox es que lo que quiere hacer es, antes eran realmente cortos, por lo que sólo llegaban al fondo del texto, ahora llenan todo el espacio proporcionado. Eso es como una característica de Flexbox. No se puede apagar eso. No voy a cubrirlo ahora mismo, pero puedes ir a tu hoja de atajos y puedes hacerlo para que solo se alineen en la parte inferior del texto. Depende de ti explicarme así. Lo que quiero hacer es este tipo de aquí, recuerda que este tipo ocupa cerca de dos tercios y esto es alrededor de un tercio. Fue fácil con estos tipos, porque Flexbox los apilará uno al lado del otro. Yo quiero que se separen, y me vendría bien porcentajes. No hay nada de malo en hacer eso. Puedo hacer flexbox1 70 por ciento, y este de aquí 30, eso funcionaría. Pero quiero mostrarles cómo lo hace Flexbox. Es otro método para hacerlo, y verás que se carga en línea. Por lo que necesitas saber cómo hacerlo, sobre todo más adelante en el curso cuando hagamos Bootstrap y algunas otras cosas, otros frameworks, usarán este método. Lo que dirán es, “quiero ser flex de”, así que esto es flex: y tú decides lo grande que quieres que sea este. Yo quiero que sean 2. Yo quiero que este sea un flex de 1. Es una relación. Yo quiero que tomes dos partes y esta una parte. Vamos a guardarlo y vamos a comprobarlo. No olvides punto y coma hechos. Echemos un vistazo, ahí tienes. Se trata de dos partes, es decir una parte. Ahora, no necesito getters por el momento en este, tengo colores aquí ahora, pero vamos a deshacernos de ellos. Estoy feliz de que esto se compre justo al lado, y vamos a añadir algo de relleno al interior para que el texto vuelva a reaparecer. Para recapitular, si quieres formas regulares, puedes dárselo, más adelante podrías usar píxeles. Los píxeles son malos porque cuando tratamos de redimensionar para una tableta, la que nos meteremos en el siguiente proyecto, ala que nos meteremos en el siguiente proyecto, y es mejor usar porcentajes o usar esta opción donde dice “Flex”, uno u otro, no importa. Solo quiero mostrarte ambos métodos porque flex es impresionante y verás que se carga en línea o en sitios web de otras personas, o sitios web que heredes, depende de ti de qué manera quieres trabajar. El modo en que funciona es que este flex solo funcionará si el padre tiene el flex de pantalla activado. Se plantea la pregunta como por qué esto no agarra el cuerpo y dice en realidad quiero que todo el cuerpo se convierta en flex, solo ponlo en flex y luego todo funcionará. El motivo por el que no quieres hacer eso es un par de razones. Una es que no va a funcionar. Lo que termina pasando es que el padre tiene que ser el padre directo. No puede ser el abuelo, y esta cosa padre-hijo con la que voy a estar bien, pero tienes que ser como ves esto es herobox aquí? Display flex tiene que estar en este compañero. No puede estar en el contenedor que está fuera del cuerpo. Estos están anidados dentro de uno del otro. Tiene que ser el descendiente directo. Perdón. Entiendes la idea, ¿verdad? Por lo que no va a funcionar. Además, flex hace cosas, mezcla las cosas. Digamos que quiero alinear bien todo. Podría usar display flex en el cuerpo y decir: “Todo el mundo alinee hacia la derecha”, pero luego todo está alineado a la derecha, todo el sitio. En este caso llegamos a ser muy específicos. Llegamos a decir solo lo principal, solo haz esta cosa en nuestro caso, como la última fue el espacio entre las cartas, ya sea. Por eso. Yo hice esa pregunta por eso te estoy diciendo la respuesta. [ inaudible] fue como, “Esto ha dado la vuelta a todo el asunto”. No se puede. Está bien. Eso es todo por tener tamaños irregulares en HTML. 40. Cómo centrar contenidos verticalmente en una etiqueta div de html usando flexbox css: Hola ahí. Este video trata de centrar verticalmente, súper fácil usando Flexbox. Este texto aquí está dentro de este color púrpura más grande aquí, y está centrado verticalmente. Lo mismo con esta imagen, es una especie de flotando aquí en medio. Vamos a saltar ahora y a trabajar como hacerlo. Está bien, recuerden en el último video como que conseguimos este tema centrado. Ponemos relleno en la parte superior y en la parte inferior para una especie de falsificarlo. Está bien. Entonces lo que vamos a hacer ahora es usar Flexbox porque es súper fácil de hacer. Entonces lo que queremos hacer con nuestra otra maqueta, queremos el contenido, voy a revisar estas casitas que agregué, para estar como centradas en este tipo de div principal aquí. Ahora hay un par de cosas que debes hacer. En primer lugar, el div principal, eso va dentro de, por lo que estos dos pequeñitos están dentro. Este div principal necesita una altura, una min-altura. Por lo que tiene una min-altura de 300 que va a funcionar perfectamente. Entonces lo que necesitamos hacer es decirle que haga algo. Queremos utilizar los artículos de alineación, alinear artículos al centro. Vamos a guardarlo, vamos a comprobarlo. Adelante. Está bien. Entonces por defecto vimos en el último video, si solo atiende el Flexbox encendido, tipo de estira para ajustarse a su padre, ¿de acuerdo? Con eso, déjame solo comentar eso fuera, guárdalo en realidad. A lo mejor nuestros contenidos son solo así de grandes, pero se estira, lo que se puede anular haciendo cosas diferentes. Entonces estamos diciendo en realidad, ve la misma prueba, así que asume que voy a renunciar a todas las cosas extra y sólo vamos a correr por el medio aquí. Adelante. Ahora bien, este es el que hay que marcar. Este es de lejos el que más le escribo como : “Oye, ¿cómo te centraste en el medio otra vez? De acuerdo, verticalmente, sí, es difícil recordar hacer. Pero de todos modos ¿cómo te acordarías? Está bien. Ya sea que marque este video o en su hoja de tramposos, como que simplemente pasen por esto, y tienen un vistazo y están como, “¿Es esto lo que quiero?” Justificar contenido hasta el final, no es lo que quiero. Justificar centro de contenido, eso es interesante porque centra todo tu contenido. La mayoría de la gente no usa eso. Simplemente hacen texto alinean centro. Eso lo hicimos antes por nuestra imagen, eso se ve igual de bien. Pero de todos modos, espaciando entre, hicimos eso, simplemente te desplazas a través, y me encanta que todo esto sea visual porque yo estoy como, “Oh, mira eso”. Ves, podríamos hacer alinear flex-end, pero estamos haciendo centro, solo probar flex-end, solo [inaudible]. Entonces nuestra etiqueta de padres, hagamos flex-end, que sea un flex-start. Flex-start es por defecto y vista previa, go flex-end. Flex-start sería útil si no quisieras que se estire. Echemos un vistazo. Se puede ver que va a la cima sin tipo de llenar el resto del espacio. Voy a deshacer eso. Hay un par de cosas que queremos hacer antes de que vayamos solo a ordenar porque acabamos de obtener texto de marcapasos. Antes de hacer eso, solo recapitulemos. Para que esto funcione, necesita un padre de familia. Está bien. Entonces estas dos chicas en el medio aquí o chicos, son mis hijitos y quiero hacerles lo [inaudible]. Por lo que lo aplicas al padre. Por lo que no tenemos un padre en la caja. Digamos que estás viendo este video más adelante y estás como, “Mi sitio web no tiene etiqueta para padres”. Tan solo pon uno alrededor. Simplemente envuélvala y di llámalo etiqueta envoltura. Todo lo que vas a hacer es aplicarle una altura, y vas a aplicar. Display flex tiene que estar encendido. Está bien. Encendimos el nuestro por defecto en los últimos videos. Si solo estás viendo este video, eso tiene que estar encendido también. Por lo que necesita una altura, un flex de visualización, y luego alinear los elementos al centro, y todo lo que dentro de él hará eso. Muy bien, ¿qué quiero hacer ahora? Quiero empezar a quitar algunos de mis colores. Entonces, ¿dónde está eso? Yo quiero deshacerme del color principal, guardarlo, o simplemente seguir probando esto a medida que avanzamos. Está bien, y ves el fondo, ese es el color que usamos para el contenedor. Yo también me voy a deshacer de eso ahora. Si los estás encontrando más útiles, vamos a empezar a deshacernos de los pedacitos. ¿ Dónde más? Nos desharemos del azul. Es de un color muy alto ver que uno, cono azul pálido y crema de menta, adiós crema de menta, ve porque eso es lo que quiero. Vamos a llenar el fondo y un poco con este gran gradiente de fondo en esta imagen. [ inaudible], quiero sustituir aquí el texto y la imagen. Por lo que el texto es fácil. Está en tus archivos de ejercicios. De acuerdo, hay uno en el proyecto dos. Hay uno llamado texto o es proyecto dos texto? De acuerdo, y luego aquí, reparaciones de bicicletas móviles. Podría igualmente escribir eso y guardarlo. Este es el cuerpo, copia tipo de debajo de la etiqueta p. Asegúrate de que cuando estés haciendo esto, a menudo perderé accidentalmente ese último corchetes angulosos, y hago esto, y luego todo sale mal. Seamos cuidadosos. Se puede ver que se pone en esto. Entramos aquí porque lo copié y lo pegué de este software [inaudible] ahí dentro. No importará cuando pase al otro lado. Simplemente algo que lo ignora. Puede que no te guste eso aunque solo lo ordenas si quieres. Si quieres estar en dos líneas, ese es un buen punto. Nunca cubrimos eso. Entonces si quieres estar en dos líneas separadas porque no lo fue, solo será en una línea grande. Aunque pongas un retorno o retornos delgados, no importa, ¿de acuerdo? Entonces lo que hay que hacer es ponerlo en dos etiquetas p individuales. Voy a cortar eso. Intentemos que sea agradable y claro. Este es ese tipo. Muy bien, pongamos un alto completo. Entonces necesito otra etiqueta p aquí. Está bien. Entonces p, lo voy a pegar en esto. Ahí tienes, dos etiquetas separadas. Está bien. Vamos a sustituir este texto por una imagen. Entonces, ¿dónde estamos? Yo quiero algo de eso aquí. Voy a poner una etiqueta de imagen tan img, ¿ y de dónde viene? En realidad aún no lo hemos puesto en nuestra carpeta local. Entonces lo recuerdas. Ahora los archivos de ejercicio, hay uno llamado. No tengo ni idea de cómo se llama. Espera ahí. Ahí está ahí. Vamos a usar este de aquí, el servicio-a. Deja éste por el momento. Eso lo vamos a ver más adelante. De acuerdo, solo usa este. Image-Bike-repair, guardar como un. voy a copiarlo. En realidad, no. Usa la que no tiene la a. realmente no importa, pero [inaudible] por el momento, usas ésta. Vamos a ver estos cuando hagamos imágenes responsive en un poco, y lo pondré en mi escritorio, en mi proyecto dos. Yo quiero ponerlo en ella, carpeta Imágenes. Está bien. Por lo que una nueva carpeta aquí llamada Imágenes. Ábrelo, pégalo, sí recuerda eso. Voy a quitar el error, no está destinado a estar ahí, aguanta. Oye, tío, se ha ido. Ahora en VS Code, deberíamos poder iniciar imágenes/notar qué hay. No olvides poner algún texto alt. Está bien. Recuerda el texto alt es lo que se carga. Si la imagen no se carga, pero principalmente es lo que a Google le gusta ver. Pongo en persona reparando una bicicleta en Dublín porque realmente sí explica la fotografía, pero realmente metiendo buenas palabras clave en mi sitio web para que potencialmente pueda clasificar mejor. Está bien, así que eso es todo. Echémosle un poco ahora. Está bien, tengo una imagen, y tenemos algo de texto que necesitamos formatear lo cual haremos en un poquito. Está bien, para que podamos [inaudible] en. Se va a mejorar, te lo prometo. Pero por ahora, eso es todo. Te veré en el siguiente video. 41. Proyecto de clase 3: encabezado de flexbox: Está bien. Es tiempo de proyecto de clase otra vez. Ahora voy a establecer algunas tareas, y tú puedes hacerlas por tu cuenta. En el siguiente video, te mostraré cómo lo hice, pero asegúrate de que cuando termine este video, vete a hacer tu trabajo, y luego mándame una captura de pantalla y envíala como tu tarea para que sepa que lo has hecho. Lo que estamos haciendo es esta estructura en la parte superior aquí. Entonces la imagen y el texto. El texto simplemente puede ser texto antiguo sin formato. Te mostraré los ejemplos terminados. Así es como se ve el tuyo. No realmente agradable pero comparado con lo que tenías, mejor. Este encabezado aquí, quiero que pongas una imagen en un lado, por lo que va a ser una etiqueta div yendo de este lado con tu imagen en él. Va a ser un nav div por este lado con algún texto en él. Ahora el texto es sólo texto antiguo plano. No hay hipervínculos ni [inaudibles] en botones en un video futuro, así que no hay etiquetas P, solo texto viejo plano sentado ahí, y las reglas son, quiero que tenga un poco de relleno ya sea superior e inferior. Vamos a quitar la altura una vez que metan el logo, quitar la altura del encabezado porque es superfluo, porque vamos a añadir un poco de relleno a la cabecera superior e inferior. A los grandes les está consiguiendo que esto quede y esto sea correcto. Ese es uno complicado. Ya lo hemos hecho antes. Te daré una pista. Es hacer cosas, lo mismo que le hicimos a esto, para que éstas se separaran. También queremos que se centre en este div. Por lo que el encabezado está empatado a este espectáculo, pero el encabezado es alrededor de este alto, estos están sentados en el centro, Así es la imagen tipo de la misma que esta. Echemos un vistazo rápido a los requisitos aquí. Recuerda, en tus archivos de ejercicios, en tus proyectos de clase, está el doc de Word. También tengo en tu proyecto dos file class project tres. Es justo como una captura de pantalla de lo que necesitas dirigirte. Cambia también el color de fondo. Habrías notado un gran cambio. Ese es el color ahí. Retira el color del encabezado siempre que estés listo y agrega el sin logo y la caja de navegación. La imagen está en tus archivos de ejercicio por lo que tendrás que copiarla a través de tu carpeta local. Este es el texto a poner. Recuerda desestilizarlo. El nav necesita estar alineado a la derecha. Elimina el color de fondo y la altura del encabezado, agrega relleno a la parte superior y asegúrate de que ambos estén centrados verticalmente. Cuando termines, ya sea publícala en las asignaciones. De acuerdo, solo toma una captura de pantalla, no tiene que ser todo el código. Simplemente muéstrame que lo has hecho, y o bien lo publicas aquí en las asignaciones o puedes publicarlo en los comentarios de esta página o redes sociales y etiquetarme. Está bien. Entonces en mi Instagram, soy @bringyourownlaptop, Twitter soy danlovesadobe y en grupo de Facebook, hay un grupo de Facebook. Ve a revisar eso y simplemente etiquetarlo con esto para que sea fácil encontrar las cosas de la web para mí. Está bien. Disfruta del proyecto de clase. Ya veremos cómo te llevas. Alinear a la derecha va a ser la más dura. Si eso te resulta frustrante, está bien, lo haremos juntos en el siguiente video. Buena suerte. Te veré en un rato. 42. Proyecto de clase 3: encabezado de flexbox COMPLETO: Está bien. Recuerda, así es como se va a ver cuando hayamos terminado. Hay un logo a la izquierda. El nav de la derecha en realidad no está haciendo mucho material marino, pero se obtiene lo que quiero decir, sólo colocar más viejo toma por el momento. Empecemos. Veamos cómo va esto. Sería interesante ver si hiciste la tarea y compararás la tuya con la mía. Sí. Vamos a ver cómo el tuyo es diferente. Parece que lo describimos, no importa, no hay bien ni mal. Está roto. Eso está mal. Pero si se ve bien, está bien. En primer lugar dentro del encabezado, vamos a poner dos divs. Ahora el primero no hay logo predefinido, vamos a crear en realidad uno llamado logo y vamos a poner nuestra imagen ahí y vamos a crear otra llamada nav. Pero hay un nav. Si fuiste y lo llamaste clase div es igual a nav, eso también está bien. No te preocupes por ello. Dentro del logo aquí, voy a poner en mi imagen. Necesito copiarlo y pegarlo porque está en mis archivos de ejercicios, proyecto 2 y se llama logo, Estamos usando el png. No te preocupes si usas el svg. Veremos svgs más adelante en el curso, por el momento, lo voy a copiar en mi escritorio, encontrar mi carpeta local, e ir al proyecto 2, en mis imágenes. Yo lo voy a pegar aquí. Ya lo he hecho o lugar. Lo siguiente que quiero hacer es editar, así que las imágenes se inclinan y ahí está el logo. Asegúrate de editar todo el texto. Este es el logotipo para taller de reparación de bicicletas rugido. Vamos a comprobarlo en el navegador. Impresionante, nuestro logotipo está en. A continuación, agreguemos el nav. Ahora, acabo de decir añadir el texto. Esto podría haber sido un poco confuso. Se lo va a copiar fuera del archivo del proyecto. Voy a pegarla y me voy a deshacer de eso. Guárdalo. Echemos un vistazo. Tengo algo de texto. Ahora, necesito que esté aquí a la derecha. ¿Cómo lo hiciste? Hay un par de maneras y la forma en que lo voy a hacer es que voy a decir el padre, que es el encabezado, voy a decir que me gustaría que mostraran y me gustaría mostrar flex, por favor. Ahí vas. Están uno al lado del otro. Lo siguiente que quiero hacer es que lo empuje hacia la derecha y lo meta en el centro. Hagamos eso yendo bien. A mí me interesaría saber si lo conseguiste yendo de manera diferente a mí. En el código VS aquí, voy a decir cabecera, y quiero que los dividas por mí. Yo quiero ir a cabecera, y quiero decir justifique. Yo quiero justificar el contenido y quiero decir y espacio alrededor. Yo quiero el espacio entre, los separa. Esa podría ser la que si vas a ser como, “ni siquiera pensé en eso”. En ve los espaciados y ponen espacios entre ellos agradables y uniformemente y no hay huecos en el lateral. Podrías haberlo hecho de una manera diferente. Tratando de pensar en otra forma. Podría haber alineado a la derecha el nav, escribe los comentarios si se te ocurrió de otra manera, oh, yo sé de la otra manera lo podrías haber hecho, podrías haber hecho flex. Flex uno y luego flex dos, podría haber conseguido recross y luego alinear a la derecha el texto en él con un selector compuesto. Ahora me interesa. Hazme saber lo que hiciste. Lo siguiente que quiero hacer es ponerlo en medio aquí. Vamos a usar algo similar. Lo hicimos antes, alinear artículos y vamos a ir al centro. Echemos un vistazo. Ahí está. veces te confundes. Puedes ver que hay un contenido de alineación y elementos. Básicamente, los ítems son de una sola alineación, contenidos son grupos de alinea. Probablemente sea más fácil mostrarte. Voy a alejarme para que el editor pueda acercar. Alinear contenido al centro. ¿Puedes ver? Se trata de más de una fila de contenido. Es como grupos de cosas ahí dentro. Todavía está alinear centro en el div mientras que si me desplaza hacia arriba, las cosas se ponen un poco salteadas, hay alinear elementos al centro. ¿Puedes ver? Es sólo una fila. Se apretará en una línea. Artículos, individuales, contenidos, grupos de cosas, no te preocupes, me olvido, te olvidarás. Prueba ambos y lo actualizaremos más adelante. Gracias, Microsoft. ¿Qué más dije que hiciera? Dije, vamos a deshacernos de la altura mínima y agreguemos algo de relleno superior e inferior. ¿Cuánto relleno? No puedo recordar, sólo voy a añadir, ¿qué hiciste? Hice repading-top, y diremos 20 pixeles. Podríamos cambiar esto, arriba y mismo fondo completo. Probablemente la altura podría quedarse ahí pero quiero. Sí, no necesitamos la altura, entonces ¿por qué tenerla entonces? Tengo un poco de relleno a ambos lados. ¿Dije algo más? Dije colores. Dije un color de fondo. Ahora bien, ¿cómo hiciste color de fondo? Ojalá lo hiciéramos, al cuerpo porque Es todo en la página, fuimos color de fondo, ahí vamos, y vamos a poner en eso, ahí vamos. Observe que hay un par de espacios extra ahí dentro, no importa. Ahí vamos. Deshaznos del color de cabecera, adiós. Manejándolo. Eso es todo. Tenemos todo lo que necesitamos, echemos un vistazo. Enfriar. Esa era nuestra tarea. Me pregunto cómo llegaste ahí si es un poco diferente. Déjame un mensaje, mándame un comentario envíame unas capturas de pantalla. Sí, eso es todo. Te veré en el siguiente video. 43. Cómo hacer un gradiente de fondo completo en un sitio web con CSS: Hola ahí. En este video, vamos a aprender a agregar un gradiente al fondo de un sitio web. Vamos a asegurarnos de que vaya todo el camino. Vamos a jugar con la dirección, vamos a terminar así con un bonito gradiente sutil. Pero vamos a ver los malos, vamos a mostrarte dónde conseguir inspiración para gradientes en diferentes lugares frescos. Cómo elegirlos de un sitio web usando un pequeño plug-in fresco. Si crees que los gradientes son suficientes, puedes saltarte totalmente todo este video. Son como 10 minutos de vida que puedes tener de vuelta. Si estás interesado en gradientes escucha. Agregar un gradiente es bastante fácil. Se lo vamos a hacer a la etiqueta del cuerpo porque eso cubre todo el fondo. Tenemos un color existente por el momento. Eliminemos eso. Enfriar, por lo que color de fondo. Imagínese si sólo pudiéramos escribir en background-grad. No existe. Usaremos imagen de fondo para hacer esto. Imagen de fondo y luego se empieza a escribir en cualquiera de los lineales, por lo que l Se puede ver eso en la parte superior ahí. Gradiente lineal mientras r, para gradiente radial. Depende de ti si quieres un círculo o una línea recta. Vamos a utilizar un gradiente lineal y entre los corchetes aquí escribimos dos colores separados por una coma. Sólo vamos a hacer rojo y amarillo. Porque notarás que cuando empiezo a escribir no es pre-llenar los colores como normal, solo porque es un caso de uso raro así que de todos modos. Ponga en su punto y coma de cierre, Guardar todo, previsualizar en el navegador. Ahí está, ardiente. No te preocupes que se detenga aquí. Vamos a hablar de eso en un segundo. Pero por el momento, sí, eso es todo. Gradiente lineal y por defecto va de arriba a abajo. Puedes meterte con eso poniendo un valor justo delante del rojo. Ya sea puedes usar 90deg, por lo que 90 grados. Guárdalo y ahora va de izquierda a derecha, o hay alguna sintaxis extraña donde puedes hacer. Es raro, es bueno. Se puede decir a la derecha. Algo de esto es realmente raro como, hey, tienes que usar esta imagen de fondo aleatoria para hacer un gradiente. Pero entonces lo vamos a usar como intervalo diverso como, no sé, código fonéticamente correcto. Eso hará lo mismo. A la derecha, a la izquierda. Echemos un vistazo. Va al revés. No importa. Puedes usar grados o eso. Lo que sea que funcione para ti. Voy a dejarlo apagado. Yo sólo quiero ir derecho arriba y abajo. Se puede agregar más de una parada. Por el momento va de rojo a amarillo, pero podríamos decir de rojo a amarillo a azul. Esto se va a quedar bien. Boom. Si has usado algo como Adobe Illustrator, siento que aquí es donde obtienen ideas para gradientes predeterminados. Son terribles en eso. En fin, hay más cosas que puedes hacer. Nunca puedo recordar toda la sintaxis para ello, así que he puesto un enlace en tu documento de texto. Está en tu proyecto 2 archivo llamado Texto. Ese es todo el contenido que hemos estado usando hasta ahora. Puse ese enlace aquí. Para w3schools.com y esta es una muy buena explicación de todo lo que puedes hacer. Se pone encantador, mira eso. Mira, puedes poner montones de colores. Para separarlos, puedes ver aquí para separarlos de una coma. Se puede poner transparencia, se puede hacer cosas repetidas. No lo voy a cubrir todo porque podrías estar buscando, no sé, repitiendo. Guau, algunas buenas. hay un montón de cosas diferentes que puedes hacer Aquíhay un montón de cosas diferentes que puedes hacery solo tener una lectura a través para conseguir lo que necesitas. Deja de desplazarte entonces. Estás mareando a la gente. Las otras cosas que quiero mostrarles son, donde consigo mis ideas para gradientes. Ahí hay un par de lugares. Grabient es uno realmente bueno. En realidad, antes de entrar en esto, porque puede que no te importen los gradientes, pero puede que te importe dónde se detiene esta cosa. Un par de cosas es, ésta se detiene aquí porque nuestro contenedor termina aquí. Porque por el momento es un sitio web bastante pequeño. Simplemente termina ahí y en realidad se está repitiendo. Se está repitiendo por el fondo. Podríamos probar un agregar un no repetir, pero entonces sólo tienes una caja de colores diferente aquí abajo. El modo de redondear esto es, sé que como estoy construyendo este sitio, se va a hacer más largo y esto va a desaparecer. Solo está ahí porque mi pantalla es realmente grande. Si lo hago más pequeño, si estás usando una pantalla más pequeña, probablemente ni siquiera vas a tener este problema durante este curso. Eres como, “No hay problema”. Pero en las pantallas de algunas personas como esta, eso es un problema. Si yo estaba construyendo el sitio, sólo lo dejo sabiendo que mi sitio web se va a hacer más grande y no va a ser un problema. Porque mira, aquí es a donde vamos. Esta es la versión de sabor que hice. Porque es tan grande, se va todo el camino fuera de la pantalla y no tiene sentido hacer esto siguiente. Pero podría encontrarse con este problema, y todo lo que necesita hacer para solucionarlo es Visual Studio Code. En la parte superior aquí, lo vamos a etiquetar en nuestra etiqueta HTML. Corchetes incorrectos. Recuerda, nuestro HTML es todo el documento. Entonces el cuerpo es todo lo que usa esto. Se pueden hacer cosas al HTML. Esta cosa de aquí, si hago la altura 100 por ciento, realmente no sé por qué funciona esto. Yo sólo sé que soluciona nuestro problema. Veo que se carga cuando la gente está como, “Oye, pon un gradiente”. Ponte el escondite. Nadie explica nunca por qué, y aún no sé por qué. Mira, volvamos a nuestro original. Ahí vamos. Mi espectacular gradiente, todo el camino. Alejémonos de suficientes colores y veamos de dónde saco mis ideas de gradiente. Un lugar realmente bonito se llama Grabient. Gradient.com y solo tienen colores realmente geniales. Tienes un montón de páginas y si has hecho alguno de mis cursos, probablemente verás algunos de estos porque solo las uso como idea o como guía. A mí me gusta este de aquí. El modo en que me meto en VS Code es, ¿ puedes ver aquí abajo si paso por encima de este color? Eso me da. Puedo hacer click en él, decir “Tú amigo mío, vienes conmigo”. Voy a agarrar el hash y todo. Todo lo que necesito hacer es reemplazar el rojo por eso. Este de aquí, copiar y pegar. Es simplemente bastante fácil. Pega y luego me desharé del azul. Gracias, azul. Aquí vamos. Tenemos aplicado ese gradiente. Esa es una manera fácil. Pero están bien. Es agradable verlos in situ. Te mostraré un par de lugares que obtengo mi inspiración en general para el diseño, para el diseño web, pero también para los colores. Dos lugares que uso. Yo uso Dribble, regate con dos bs, y Behance, que es la de Adobe. Yo entro aquí y cualquiera de estos. Son muy diferentes. Por alguna razón están haciendo un trabajo similar, pero tienen una apariencia o tipo de usos muy diferentes. Tienen diferentes tipos de contenido. He hecho una búsqueda en esto para gradiente. Simplemente trae algunos gradientes, pero no tienes que hacerlo. Pero digamos, se pueden ver mis sentimientos los gradientes han venido sólo de este tipo de trabajo. Esto cambiará. Si estás viendo en el futuro y estás como, “Los gradientes son tan 2019. [inaudible], sal de aquí”. Eso también está bien. Sáltate todo este video. Pero digamos que te gusta algo de esto y dices : “Oh, realmente quiero hacer algo con un color”. Sólo me estoy desplazando, desplazando. ¿ Dónde estamos? Simplemente escogeré uno que me guste. Diga que te gustan algunas de estas cosas y yo solo voy a escoger una y me voy. Yo elijo este. Ver esta naranja a esta otra naranja. Yo quiero conseguir esos dos colores. Es difícil sacarlo. Si conoces Photoshop e Illustrator, puedes hacerlo de manera fácil. Haz una captura de pantalla, tráela, usa la herramienta cuentagotas. No todos van a tener esas habilidades sin embargo. En Chrome, Chrome tiene algunas cosas geniales donde el navegador se puede instalar algo llamado extinción. Uno realmente genial es este llamado FileZilla. Pero si vas a las extinciones de Chrome, así que solo haz investigación para las extensiones de Chrome y luego mientras estás ahí, busca el recolector de color. Un recolector de color es la palabra general para todo esto. Encuentra uno que tenga críticas altas y muchas descargas y luego diga Instalar y simplemente aparecerá en la parte superior justo aquí. Se puede ver mi recolector de color. Entonces solo iré, seleccionador de color, escojo color de página y luego me moveré hasta que pueda ver aquí. Es difícil de hacer porque mi ratón está aquí abajo, pero tú con los ojos mira aquí arriba. Mira, aquí tienes y lo escoges. Impresionante, y solo se agrega en la parte superior aquí a mi seleccionador de color y también se copia automáticamente en mi portapapeles. Todo lo que necesito hacer ahora es entrar aquí y decir Eliminar, Pegar todo. Pegar. Eso es naranja. Voy a escoger un color aleatorio, porque si escojo algo cercano a ese rosa, no va a ser un buen ejemplo. Yo sólo voy a recoger este verde oscuro aquí. Haga clic en él. Vamos a copiar en mi portapapeles, pegar, guardar. Echemos un vistazo a nuestro sitio. Oye, genial. Estoy indeciso. Pero te das la idea. Behance es sólo bueno para mientras estás aquí. En cuanto a mis presumidas ideas para el diseño web y como prueba construyendo los temas para esta clase. Tenía que construir una tienda de bicicletas falsa. ¿ De dónde saco las ideas? A menudo hay kit de interfaz de usuario o diseño de interfaz de usuario. La interfaz de usuario suele ser un buen lugar para obtener ideas y colores y esquemas y estructura. Úsalo como inspiración. Haz lo mismo en Dribble. Podrías tener tu propio lugar para conseguir ideas geniales, pero esas son mías. Antes de irnos, vamos a sumar los gradientes adecuados de nuestro marcado. A lo mejor son estos colores y están en tu texto aquí. Este de aquí. Voy a copiar y pegar esos en, y vamos a seguir adelante. Ya puedes seguir adelante mientras los pego. Pegar, Guardar, Texto documento. Si preguntaste o como: “Oye, ¿cómo hace esa cosa de saltar de un programa a otro?” Ya te lo dije antes, pero quizá te hayas olvidado. En un Mac, es comando y tab. la tecla de comando y solo toca la tecla de tabulación hasta que llegues a la derecha, o puedes apuntarla con el ratón y simplemente suelta las teclas. En un PC es muy similar. Es pestaña de control, o es que mantenga Tab. o PC. No estoy seguro. Pruebe los dos. Echemos un vistazo. ¿ Tenemos nuestro precioso color rico? Nosotros sí. Tan sólo un gradiente sutil. No demasiado. Eso va a ser, te veré en el siguiente video. 44. Cómo cambiar el tamaño, color y tipo de una fuente predeterminada de un sitio web usando HTML y CSS: Hola ahí. En este video vamos a hablar de la fuente predeterminada y cambiarla, porque por defecto es negra y es Times New Roman. Queremos cambiar eso por cada etiqueta que esté de lado, lugar de hacerlo individualmente. Hasta ahora lo hemos estado haciendo por etiquetas, la h1 ahora es Arial, y luego la etiqueta p ahora es Arial. Hagámoslo una vez por todo el sitio. Es bastante fácil. El versión corta es solo editar familia de fuentes a la etiqueta de cuerpo, trabajo hecho. ¿ Por qué este video es tan largo? Es porque también quiero hablar de especificidad, así que quédese por eso. Sí, vamos a ir. Tenemos nuestra fuente predeterminada, es Times New Roman negro, y es de 16 puntos, ese es el predeterminado, queremos cambiar eso. Porque lo que hicimos en el último proyecto es cada uno que hicimos Arial luego hicimos la p tag Arial, así que lo hicimos individualmente, pero sería genial solo cambiarlos todos por defecto. Es bastante fácil, usamos la etiqueta del cuerpo. Body tag es todo lo que hay en la página. Entonces en esta etiqueta aquí, necesitamos decir la familia de fuentes y va a ser Arial en este caso. Haremos fuentes de lujo en el próximo video, pero eso ahora será este, el encabezado, así que tenemos un h1 por aquí, ¿dónde está? Ahí hay un h1 y la etiqueta p, todos son Arial. Además, quiero que el valor predeterminado para el sitio sea un color de blanco, no de trigo. Eso es lo que debes hacer al principio de todo o inicio de una página web. Es sólo que están en algunas cosas por defecto en general. Entonces más adelante lo puedes anular. Quiero volver a hablar de especificidad en CSS, porque esto es bastante genérico, está en la parte superior de la etiqueta body, todo está en la etiqueta body. Esto es muy genérico. Todo lo que necesitas hacer es poner algo muy específico, como, un h1. Sólo di, en realidad quiero que el h1 sea de un tamaño diferente. Vamos a ir par tamaño de fuente y vamos a recoger como 80 píxeles porque en la parte superior en realidad no dijimos el tamaño aquí arriba, ¿verdad?. Digamos que queremos cambiar el color del mismo en lugar del tamaño de la fuente. Vamos a decir que vamos a usar una fuente, o vamos a usar el color. Lo bueno de VS Code es que porque he usado estos en el código antes, me los ha sugerido. Entonces lo voy a hacer negro ahora. El top que decía ser blanco, pero aquí abajo decía ser negro. Debido a que esto es más específico, genérico de cuerpo y h1 es un poco más específico, lo va a anular. Ahora cuando no hay una especificidad realmente clara para ello, di que tienes dos h1, así que esto termina pasando. Parece tonto ahora cuando están justo al lado del otro pero cuando tienes un documento CSS realmente largo o que estás usando el sitio de otra persona y no sabes dónde hay en algún lugar este código el h1 siendo convertido tal vez en blanco o negro o morado. Simplemente no puedes trabajar dónde, todo lo que necesitas hacer es ir más abajo de la cascada, así que es Cascading Style Sheet, el navegador lo lee de arriba a abajo. Si hay cosas que son igualmente específicas, entonces gana la última. Entonces aquí abajo, si digo ser rojo, éste va a ganar porque es después de esto. El top está siendo blanco, va a algo así como, no sé, se lo contarían muchas cosas. El top dice ser blanco, todos sean blancos y dice ser negro, y luego ser rojo. El rojo ganará porque está más abajo en la lista. El h1 ganará la etiqueta de cuerpo cada vez, no importa dónde esté porque es más específico. Vamos a probar eso. Vamos a agarrar el h1, vamos a cortarlo. Ya no está ahí abajo, está justo por encima de todo. Aquí vamos, pegarlo, guardarlo, y aún debe ser rojo. Es una mezcla del flujo, la cascada, y eso puede ser preocupante a veces porque estás tirando cosas por todas partes y estás como, ¿por qué es esto? Yo le he dicho que sea blanco porque es lo último en la cascada Así que es una mezcla del flujo, la cascada, la cascada, bajando a una mezcla de especificidad. Es una manera difícil de decir esa. Voy a deshacerme de este rojo y voy a cambiar el color de nuevo a blanco, sólo voy a dejar ahí el tamaño de la fuente. De acuerdo, vamos a entrar en el siguiente video donde empezamos a añadir algunas fuentes de lujo porque todos estamos cansados de ti Arial. Es hora de irse. Te veré en el siguiente video. 45. Cómo elegir e instalar fuentes de Google en tu sitio web HTML o CSS: Es hora de pasar de la aburrida Arial a Playfair y Roboto. Puede que no estés tan emocionado como yo pero es doloroso, esta clase. Se trata de las fuentes básicas reales durante mucho tiempo. Ahora llegamos a hacer tipografías bonitas. Vamos a usar algo llamado Google Fonts. Te voy a mostrar cómo elegirlas, cómo incrustarlas y conseguir que funcione el código, así como formas de cómo elegir fuentes y cómo peinarlas. Dónde conseguir algo de inspiración. Suficiente charla, más hacer. Te veré en el video. Para empezar con Google Fonts, primer lugar, ¿por qué estamos usando Google Fonts? Entonces fonts.google.com, hay competidores, Font Ardilla, 1001 Fonts, Star Font, hay competidores a ello. Todo lo que necesitas hacer es asegurarte de que sea una fuente que está alojada para que lo uses en un sitio web. Es diferente a las fuentes que descargas para usar en tu máquina. Si vas a DaFont y descargas una fuente gratuita, no es algo que puedas usar en tu página web, tiene que ser algo que viva en Internet. Un buen lugar para encontrarlos es algo así como fonts.google.com, son gratis. Pasaré por cómo elijo los estilos, el emparejamiento de fuentes y algunas otras cosas después de que hagamos los verdaderos fundamentos de cómo ponerlo y codificar porque eso podría ser todo para lo que estás aquí. Entonces voy a usar un par de fuentes. Por lo que aquí arriba en la búsqueda, voy a teclear en Roboto. No lo estoy porque está ahí mismo, pero puede que tengas que escribirlo y dar click en plus. Eso se agrega a esta pequeña, aquí abajo, esta pequeña fuente, seleccionó mi pequeño grupo de fuentes que voy a usar en mi página web. El otro que quiero está aquí arriba, va a ser Playfair. ¿Son dos palabras? No, tengo juego de hechizos. Cerebro trabajando. Entonces es Playfair, es una palabra. Ahí lo puedes ver, estoy usando sólo el Playfair Display. Voy a editar. Vamos a editar aquí abajo. Eso no hace mucho. Pongamos este pequeño botón para abrirlo. Lo que queremos hacer ahora es que queremos personalizar. Entonces el momento, digamos Playfair, ahí está, y Roboto, por el momento, sólo va a cargar una versión de esa fuente. Ahora tienes que decidir en base a tu diseño, y eso es realmente importante cuando estás usando un programa para diseñar tu sitio web, digamos que es este XD o Sketch o Illustrator o Photoshop. Usar montones de diferentes fuentes va a ser un poco doloroso cuando tu sitio tiene que cargarse. Entonces por el momento, solo tengo una talla. Es el tamaño regular que he usado en mi diseño. Aquí abajo donde llega al Body Copy, he usado Roboto y he usado la versión ligera y no he usado nada más. Pero probablemente encuentres que quizá necesites usar una negrita también, tal vez una cursiva. El único problema con eso o lo que hay que preocuparme es decir que sí necesito la versión audaz y la cursiva regular, se puede ver esta cosa aquí diciendo: “Oye, tu sitio web va a tomar un tiempo moderado para cargar”. Por eso eres naranja, pero aquí abajo y dices: “En realidad quiero regular y tengo luz, y también quiero medio y he usado negrita”. Se puede ver aquí, mal, se ha puesto rojo aquí y dijo que su sitio web va a tardar una eternidad en cargar. ¿ Por qué es eso malo? Es malo para el usuario en general. Por lo que la persona va a tu sitio y tarda años en cargarse debido a las fuentes, y eso probablemente no va a valer la pena o al menos una consideración que debes tener en cuenta. El otro es que Google utiliza velocidad de la página o la velocidad de carga como uno de sus ticks de algoritmo de búsqueda. No es lo único, pero es una de las cosas a considerar si estás construyendo un sitio que realmente necesita clasificar bien en los resultados de Google, que hace la mayoría de los sitios, solo necesitas asegurarte de que no te estás matando poniendo demasiados las fuentes de ahí. Entonces tengo por el momento justo lo regular y solo necesito la versión ligera. Probablemente necesitaré audaz en algún momento porque mi sitio no es muy grande en este momento, realmente no se ha llegado a ese punto, pero vamos a mantenerlo ligero. Lo hemos personalizado, lo queremos, ahora necesitamos añadirlo a nuestro sitio. Algo genial que puedes hacer justo mientras estemos aquí es, no, voy a cubrir un poco eso, vamos al sitio. Haga clic en embed. Entonces como lo hicimos cuando importamos ese Google Map, es realmente fácil. Hacen todo el trabajo por ti. Agarras este pedacito y lo copias. Estoy usando Command C en mi Mac, Control C en una PC, y dice: “Pon esto en tu cabeza”. Yo puedo hacer eso. Entonces vamos a copiarlo aquí en Visual Studio Code. Recuerda, aquí está nuestra etiqueta de cabeza, abre, cierra. ¿A dónde va a ir? Voy a pegarlo en el fondo ahí. No dijeron dónde ponerlo. Entonces solo lo voy a pegar ahí. Se puede ver dónde se agrega. Decía: “Oye, cuando esta página se cargue, ve a buscar las fuentes”. Estas fuentes, quiero conseguir Roboto y Playfair, y los blancos. Yo quiero que descargues este. Eso debe ser para ambos. El otro se llama Display. Entonces puedes cambiar estos, decir más adelante estás como, “En realidad, no quiero usar eso, quiero usar el 500”, que es la fuente más pesada. Te darás cuenta de que no uso, dicen negrita, pero el código se refiere a ella como 700. Entonces si quería 700 ahora y no los 300, solo puedo editar ahí en lugar de volver a Google e intentar personalizarlo de nuevo. Es medio editar, así que lo agregas al HTML y luego tienes que editar a donde quieras que se aplique. Entonces en nuestro caso, tenemos mi Body Copy. A mí me gustaría que todo fuera Roboto. Por el momento la tengo puesta a Arial. Entonces solo voy a entrar aquí y agarrar la incrustación. Para que en la cabeza, esto en el CSS, y voy a agarrar el Roboto uno, copiar todo eso, y simplemente reemplazar todo esto. Ahorra ahora, y ojalá en mi navegador que ahora es Roboto, y estás como, “No se ve muy diferente a Arial”. Es tan bueno, Roboto es el más genérico, Open Sans, Source Sans, y Roboto son el Body Copy para en línea. Es el más utilizado. Apliquemos uno que sea un poco más específico o al menos un poco más visualmente diferente. Entonces es este Playfair, click copy y voy a editar a mi sitio, así que lo voy a agregar a mi h1. Entonces aquí abajo, lo voy a pegar, guardarlo, previsualizar. Mira eso, Playfair. Todos se perdieron los márgenes, vamos a jugar con esos pronto. Pero así es como implementarlo, volcarlo en la cabeza y luego editarlo en el CSS. Ahora ya dije, te diré cómo escojo fuentes. Entonces esto es un poco más solo creativo, cómo voy y escojo mi fuente, así que nada técnico. Te quedas solo aquí para que puedas acelerar al siguiente video si estás contratando. Pero si no, anda por ahí, hablemos de porque estoy haciendo este proceso de diseño. Estoy usando Adobe XD. Podrías estar usando algo así como. No sé, PowerPoint, si ahí es donde están tus habilidades o Photoshop para hacer diseño web, Illustrator para hacer diseño web. Tengo cursos de todos estos si quieres ir a revisar esos. Pero digamos que estás usando XD y no vas a tener Roboto o Playfair en tu computadora, para realmente empezar a usar, pero quieres burlarte de tu diseño real antes de ir a implementarlo al sitio web. Entonces lo que haces es en el mismo lugar, en Google Fonts, llegas al mismo bit exacto. Tú vas, yo quiero descargar todos estos, y tú los agregas al grupo como lo hicimos nosotros. Arriba aquí arriba, en la parte superior de esta pequeña, mira flecha aquí, eso era lo que iba a intentar mostrarte antes, pero nos separamos. Haga clic en esto. El genial de esto es que descargará esas fuentes en tu computadora. Puedes hacer doble clic en ellos, abrirlos y se instalarán, y son libres de usar, son realmente geniales. Es una buena forma de conseguir fuentes gratuitas. Lo que podrías hacer si los estás descargando para tu propia computadora en realidad va a personalizar y pasar y simplemente tomarlos a todos. El genial de ellos es que puedes usarlos para el diseño gráfico así como para el diseño web, solo un gran recurso para las fuentes. Para que sepas descargarlos. Hablemos de cómo elegirlas, cómo eliges estilos. Entonces vamos a volver a Google Fonts, así que solo estoy haciendo clic en el logo aquí. Google en sí tiene algunas características bonitas, mientras que dicen que estamos haciendo algunos encabezados, y quiero encontrar algunas fuentes de encabezado, Display es el término general para fuentes un poco más creativas. Para que puedas pasar por esto, April , me gusta, y encontrar la cosa que te va a funcionar. Lo mismo con Body Copy, o vas a hacer un Serif o un Sans-Serif. El diferencia es que una fuente Serif es como Times New Roman. Tiene todos los pequeños pies extra en los ins que se llaman Serifs y Sans-Serif está sin pies. Entonces es una más común y una cosa realmente fácil de hacer. Esta no va a ser Font 101, pero una forma básica real de escoger fuentes para tu sitio es escoger siempre un opuesto. Entonces si eres encabezados son fuente Serif, escoge un Sans-Serif Body Copy, hay suficiente cambio visual en ellos para. Es un punto de partida realmente bueno. Es muy difícil conseguir que dos fuentes Serif sean el encabezado y la fuente Body Copy porque muchas veces sus cambios no son lo suficientemente grandes como para tener una bonita distinción visual entre ambas. Por lo que una manera agradable y fácil es escoger uno para el título y luego uno para la Copia Corporal. Otra regla es simplemente escoger dos fuentes. Una fuente puede funcionar si hay suficiente de, una fuente Sans-Serif como Roboto, podrías usar para todo el sitio. ¿ Por qué? Porque hay un montón de diferentes tamaños para ello. Entonces el negro es realmente pesado y muy distintivo. Por lo que podrías usar eso para los encabezados y luego usar el medio o el regular para la Copia Corporal. Eso también funcionará bien. Algunas de estas fuentes simplemente no tienen mucha variedad, tal vez solo tengan un par de tamaños. Otra cosa que puedes hacer aquí es que el positor marca aquí, en realidad puedes hacer clic en él. Puedes teclear mi nombre. Digamos que estás haciendo un diseño para alguien y necesitas aplicar a todas las fuentes. Porque a veces descargas una fuente, estás como, “Eso se ve impresionante”. Entonces lo descargas y en realidad escribes tus litros, Estás como, “Hombre, luce bien en la línea, pero cuando lo descargaste, no se ve bien”. Puedes hacerlo todo aquí, jugar con los tamaños y los pesos, y eso es divertido. Otras cosas que puedes hacer cuando estás escogiendo, especialmente una fuente de encabezado, para nuestro diseño aquí, no está tan mal. ¿ Puedes ver que tenemos tres palabras en la parte superior? Pero afuera es bastante pequeño. Digamos que estás haciendo un sitio y está lleno de entradas de blog, o artículos, o recetas o, no lo sé, pero vas a tener muchos tamaños o longitudes de títulos variados. Algunos podrían ser solo 20 caracteres y algunos podrían ser 40 caracteres. No tienes que hacerlo, pero es una consideración que definitivamente tomaría en cuenta es ver con el ancho. Si enciendo el ancho y lo arrastro hacia abajo, me voy a dar acceso a, vamos a encenderlos, me voy a dar acceso a fuentes que son simplemente más delgadas, y solo puedes conseguir más en línea. Así que diga éste aquí o éste de aquí y luego todo genial. Pero digamos que hacemos como, subamos uno más para darle más variedad. Realmente no importa, yo solo escojo uno. Vea este aquí, en lugar de usar el que estamos usando Playfair, este de aquí tiene un potencial de encajar más personajes en una línea y no romper en dos. Por lo que el ancho es algo a mirar. Pero digamos que eres como, todavía no sé cómo escoger, y uso el término emparejamientos de fuentes. Los emparejamientos de fuentes son un consejo realmente útil. Acabo de poner en los emparejamientos de fuentes de Google y lo pongo en la fecha de este año. Porque hay algunas cosas viejas alrededor, solo quiero cosas contemporáneas. Haz una búsqueda de eso. Hice clic en los dos primeros resultados. No te preocupes por estos sitios web, haz lo mismo y a ver estamos en 2020. Se puede ver lo genial de los emparejamientos de fuentes es que alguien, y este caso es un DB Morgan. Ella ha pasado y recogido fuentes que van muy bien juntas y las ponen in situ, lo cual me gusta mucho. Porque puedes conseguir algunas ideas de diseño geniales y ella es escogida, puedes ver Serifed, Sans-Serifed, Sans-Serifed, Sans-Serifed, no siempre es cierto, pero puedes ver San-Serifed, Serifed. Emparejamientos de fuentes, solo puedes irte, voy a usar Raleway y Lato. Estas dos o combinaciones del todo, eliges las tuyas, pero solo es útil encontrar a otras personas. A mí me gusta este. Nunca había visto ese movible. emparejamiento de fuentes es útil, las fuentes de Google es un lugar, es el lugar principal. Hay otras opciones para esto. Dobby hazlo, Font Ardilla lo hace, hay algunos otros lugares que hacen fuentes gratis o incluso fuentes pagadas. Pero para implementarlos como súper fáciles, simplemente agrega el código a la etiqueta de cabeza y luego agrégalo a tus CC de lo que quieres estilizar. Buddies, eso fue todo para las fuentes. Nuestro sitio web está empezando a lucir un poco más bonito ahora con nuestro gradiente y nuestras fuentes, nos vemos en el siguiente video. 46. Cuál es la diferencia entre tamaños de fuentes PX, EM y REM: Hola a todos. En este video vamos a hablar por qué ya no puedes usar píxeles para tamaños de fuente. Vamos a usar rems y ems. Sí. Veremos las diferencias entre ellas, cómo calcularlas. En este video, me pongo realmente consciente de mi acento. Siento que tengo un acento realmente neutro, hasta que empiezo a hablar de rems y ems. Tu gusto, “no tienes acento neutral Dan”. Siento que sí. Hombre internacional. Nota al margen, ¿sabes si me presento en Irlanda y digo, “Mi nombre es Dan”, siempre dicen “Hola Dean”. Sí. Recibo mensajes de texto, “Oye Dean, te veré el fin de semana”. Mi nombre es Dan. Dan. Por lo que soy Daniel en Irlanda principalmente. Cosas que no necesitas saber, pongámonos en rems, ems, pixels. En primer lugar, vamos a cerrar lo que estamos tramando ahora. Simplemente vamos a mover esto en su propio pequeño documento porque vamos a hacer un poco de experimento. Entonces vamos a Archivo Nuevo. Voy a salvar a éste, y voy a llamar a éste fontcraziness por html. Ahora, vamos a estar lidiando con las fuentes porque se acostumbra bastante para esas, pero es una medida en general. Se puede utilizar para dimensionar cajas. Añadamos todas nuestras cosas de tipo doc regular. Entonces abajo aquí abajo, vamos a tirar un par de cosas. Vamos a lanzar dos etiquetas P. Ponga su nombre en ellos, duplicarlos. Ahora bien, ¿ya hemos hecho duplicar antes? Si no, lo cubriremos de nuevo. Mantienes presionada la tecla Mayús, y luego mantienes presionada en un Mac es la tecla Opción, y en un PC, es la tecla Alt. Después golpea la flecha hacia abajo. Eso duplica la línea tu on. Entonces tenemos dos de ellos. Llamemos a éste, ¿cómo deberíamos llamar a éste? Demos a éste una clase, y llamemos a éste de mala talla. Este de aquí va a tener una clase de buen tamaño. Por lo que arriba aquí vamos a darle estilo. Deberías usar una hoja de estilo externa, pero vamos a volver a la vieja escuela. Solo vamos a darle estilo y el hit aquí, solo para que sea fácil. Entonces vamos a darle estilo a ambos. Hasta ahora, los hemos estado peinando diciendo que mal tamaño es el tamaño de la fuente es, digamos que queremos que sea, no sé, 30 píxeles. Desafortunadamente ese es un mal tamaño. Los píxeles son lo que llamaron fuentes absolutas. Son iguales en todas las computadoras y no se pueden cambiar. Son como, tienes que tener 30 años. píxeles son una fuente absoluta, no pueden meterse con ellos. Lo que necesitamos es algo llamado fuente relativa, y ahí es donde entran ems y rems. Entonces, solo comprobemos lo que está pasando primero, probémoslo en un navegador. Ciérralo, hazlo volver a abrir. Por lo que le hemos hecho 30 pixeles. Entonces en lugar de usar píxeles, hagamos otra fuente, y hagamos ésta es del buen tamaño. Este de aquí va a tener el tamaño de fuente de, vamos a usar, digamos tres R-E-Ms. Esos son los rems de usuario. Estos ems y rems, hablaremos de la diferencia de dos, pero rems es lo que vamos a estar usando y probablemente lo más común contemporáneo a usar. Ahora, veamos cómo se ven primero y luego hablaremos de lo que son. Entonces guardándolo, probando el navegador. Lo que podría hacer por este video, es solo tenerlo aquí, para que todos podamos ver todo. Agradable. Por lo que tres rems es más grande que 30 píxeles. ¿ Por qué es eso? Un rem o un em. Son muy comunes, al menos muy similares. Entonces tres em o tres rem, no importa. Son tres de cualquiera que sea el tamaño de fuente predeterminado que esté en el navegador. Entonces el navegador, si lo pongo en una etiqueta P sin nada en ella. Entonces una etiqueta P, y le puse a Daniel Scott en el fondo aquí. Ese es el tamaño de fuente predeterminado. Yo no lo peiné, no le he hecho nada, eso es sólo una talla. Se trata de 16 píxeles, generalmente sobre eso. Diferentes navegadores tienen miradas ligeramente diferentes a su fuente, pero Google Chrome, que estamos usando tiene 16 píxeles como tamaño de fuente predeterminado, 16. Lo que hace un rem o un em es que dice: “Soy tres veces lo que sea el defecto”. Entonces, ¿tres veces 16 es? No puedo hacer matemáticas tan bien como puedo deletrear, es 48. Por lo que tres rems en este momento, es decir, 48 pixeles de alto. ¿ Por qué hacemos eso más que eso, porque sólo podemos teclear 48 y debería ser lo mismo? Cuarenta y ocho píxeles, mismo tamaño. Tan solo tipo 48 parece más fácil. Ahora la razón por la que hacemos esto, es para las personas que tienen dificultades para ver el sitio. Entonces di que estoy con discapacidad visual y eso me parece demasiado pequeño. El tamaño de fuente predeterminado es demasiado pequeño. Puedo entrar a Chrome y decir Preferencias, y puedo decir en realidad aquí, voy a decir, “lo voy a hacer más grande, lo voy a hacer muy grande”. Porque eso es lo que necesito, justo lo que necesito para ver las cosas. Lo que notarás es muy grande. Vámonos a revisar nuestro documento. Ahora, lo que termina pasando es que este tipo se hizo más grande, este tipo no. Recuerda que eran del mismo tamaño. Comprobemos esa configuración, volvamos a ponerla hacia abajo. Mediano. Por lo que son exactamente del mismo tamaño. Yo he dicho, “tú tienes 48 y terminas siendo 48", pero en realidad son más justas veces en el defecto, mientras que yo lo hago más grande. Se hace más grande para mí. Se puede ver si tengo discapacidad visual, eso no es bueno. Esto es genial. Entonces eso es lo que pasa. Esa es la razón por la que Google realmente quiere alentarlo. Entonces usaremos esto para que la gente pueda usar mejor nuestro sitio. Una de las otras razones, es que Google basará su sitio en lo accesible que es para las personas que necesitan algunas de estas ayudas extra. Por lo que de nuevo, de vuelta a los rankings. Si estás construyendo un sitio, quieres que Google lo ame, para que te clasifique, y una de sus mediciones, junto con un millón más, es tu sitio accesible para las personas que necesitan que se hagan estos cambios. Entonces por eso usamos rems o ems. En realidad volvamos a mi talla normal, normal. Por aquí el mismo tamaño. Si cambio esto de rems o ems, no va a cambiar. Hablaremos de eso a continuación, la diferencia entre rems y ems, pero antes de entonces, hay que superar mi acento, porque rems y ems probablemente suena muy mal. Ya sé, es mi acento. Sé que rems y ems suena raro. Rems, ems, allá vamos. Esto va a ser un poco de doblador cerebral. Entonces, empecemos. Entonces tengo esos dos. Vamos a deshacernos de esta etiqueta P aquí. Guárdalo, así que se ha ido. Entonces digamos que tengo una etiqueta P abajo aquí. Tab a través. Aquí va a tener una palabra diferente, va a tener pepinillo sólo porque. Este pepinillo me gustaría darle una clase de, ya tengo algunas clases. Voy a usar let say badsize, no, goodsize. No queremos usar malsize, así que tengo una buena talla. Se ve exactamente igual que el resto de éstos, pero sabemos que en un sitio web, tenemos etiquetas corporales, pero nunca solo tenemos etiquetas p colgando solos. También están dentro de contenedores, que están dentro de las etiquetas principales, que están dentro de secciones. Digamos que este tipo está dentro de una etiqueta, así que voy a poner una etiqueta por fuera de él. Voy a llamar a esta etiqueta 'Mi caja'. Voy a agarrar la etiqueta div, así que se abre ahí y se cierra del otro lado, para luego hacer que todo se vea bonito. Estamos de acuerdo con eso. Este tipo está dentro de un div llamado 'Mi caja'. Se ve igual. Ahora, empecemos con mi caja. Digamos que estamos usando ems. Se ve exactamente igual. Aquí es donde viene la diferencia. Yo quiero mi caja aunque para hacer algunas cosas. Va a hacer algunas cosas por mí, va a decir, voy a hacer 2ems. Lo que termina pasando es que terminan compaginando. Mi caja es 2ems y luego buen tamaño se aplica también, así que terminamos con 5ems. Estamos como compuestos arriba. La diferencia es que si solo uso rems. Tan buen tamaño ahora, si es un rem, ignora el tamaño de las etiquetas rápidas y simplemente va y dice: “No me importa lo que hagas ni lo que el resto del mundo me esté diciendo que haga. Voy a volver a la fuente”. R es raíz, por lo que root em. Va todo el camino de regreso al principio y dice: “Está bien, el default sigue siendo 16 así que tengo 3 veces 16”. No es tan complicado al nivel que estamos en este momento porque no tenemos mucho que hacer, sobre todo en este video, pero incluso en nuestros otros sitios web, simplemente no es tan grande. Pero cuando llegas a frameworks y WordPress y cosas grandes, enormes que estás usando o tratando de editar, a veces eres como, “¿por qué eres tan grande o pequeño?” Están pasando todas estas cosas. Si lo haces rem, dice: “Olvídate de todas las demás cosas que me han dicho. Yo sólo voy a ser tres veces el predeterminado”. Ahora bien, ¿puedes usar píxeles? Totalmente puedes. Si estás como, “Hombre, eso fue como Narnia. ¿Qué fue eso? Incepción? Hay demasiada información, cosas dentro de las cosas, rems, ems, su acento loco”. Solo puedes usar píxeles. El sitio web no va a explotar, pero estoy tratando de hacer dos cosas, una es que necesitas ser un buen diseñador web para las personas con discapacidad visual y además, te vas a encontrar estos rems y ems más adelante cuando estés trabajando con otros sitios y plantillas. Otra cosa útil es saber, ¿es útil?. ¿ Qué es tres em? Digamos que quiero escoger un tamaño de copia de cuerpo para este de aquí, y quiero que sea de 20 píxeles porque en eso lo diseñé. ¿ Qué es en rems? Hay calculadoras en línea. Se puede hacer calculadoras ems a pixels o rems a pixel calculadoras. Pero extrañamente, mi pequeña calculadora aquí, si quiero que sean 20 pixeles, puedo multiplicarlo por 0.0625. Escríbelo, pospítelo y anote y te dará los rems o ems, misma cosa. Entonces eso es lo que va a ser. Usaremos los rems adecuados. Eso son 20 puntos. Si quiero que sea 48, escribo 48 veces 0.0625, y de nuevo, 3 rems. Pero eso probablemente no te va a meter en la cabeza como si tuviera la mía. Hay calculadoras, solo Google ellas. Son fáciles de hacer, sepan que uno tiene alrededor de 16. Cuando digo alrededor de 16, diferentes navegadores tratan el tamaño de fuente predeterminado un poco diferente. Te das cuenta de cómo Google no dijo 16 pixeles, dijo medio? Deberías decir 16 pixeles avisos medio. Muy bien, así que voy a guardar y cerrar esto, y vamos a ir por y editar nuestro gran sitio ahora. Cierra esto, hazlo más grande, ábrelo todo, nuestro explorador necesitamos índice, estilo, porque tenemos que volver ahora y arreglar las cosas que hicimos. Hicimos nuestros tamaños de fuente, así que lo que voy a hacer es cambiar mi tamaño de fuente predeterminado de 16 para ser un tamaño de fuente de 1.125 rems. Podrías simplemente poner 1.1. El 0.25, el extra 25, ¿realmente está cambiando mucho? Depende de ti. Es lo genial que eres sobre ese tipo de cosas. Echemos un vistazo. Todo mi tamaño de fuente predeterminado ha subido un poco. Echemos un vistazo a este de aquí. En mi documento XD, es 52. Entonces aquí voy a encontrar a mi 'H1' y digo, “80 no es lo que quiero”. Voy a hacer 52. Por lo que 52 veces 0.0625. Es un poco más grande que 3 rems. ¿ Cuánto me importa ese 0.25? Probablemente no lo suficiente para preocuparnos, pero pongámoslo todo. REMS, echemos un vistazo ahora, y es del tamaño correcto. Sí, se ve bien, pero al menos coincide con mi maqueta aquí. Ahora una de las otras cosas que acabo de mencionar al final de esto es que cuando estoy viendo este diseño aquí, esta fuente se siente realmente ligera, y se muestra de manera diferente a lo que está en mi página web. Simplemente renderiza de manera diferente. Ese es el peso correcto porque he ahorrado la parte superior aquí en Visual Studio Code, y recuerda aquí arriba, yo diría que Roboto tiene 300. Por lo que está mostrando el peso adecuado. El problema es, es que en XD usará Roboto 300 de manera diferente a lo que hará tu sitio web. El modo en que la cosa es que si miraba esto en Safari y luego en Firefox, todos lo harán un poco diferente. Me molesta como diseñador que las fuentes no se vean exactamente iguales en muchas cosas. Supongo que eso es lo grande que necesitas dejar ir si vienes de un fondo de diseño más tradicional. Sólo hay que dejar ir las cosas porque no se puede forzar el alias de las fuentes, y una cosa que me recordó es que sólo hemos tenido una talla en la mano. Digamos que sí tienes dos, hay 300 y 500 y 700. Por lo que tienes diferentes tamaños. No los implementamos porque no teníamos que hacerlo. Pero digamos que sí tienes diferentes tamaños que recogiste en las fuentes de Google. Aquí, puedes pasar por en sección el cuerpo a usar, es éste de aquí, es el peso de la fuente, y dices: “En realidad, quiero que sean 600”. Eso es todo. 600. Será una fuente 600 si tienes múltiples opciones. No tenía que hacerlo porque sólo tengo uno. Está bien, sigamos adelante. Arreglemos todas estas cosas con ferina e ignorando las brechas y los espacios intermedios. Qué es incrustar, espacio tras párrafos, todas esas cosas divertidas en el próximo video. 47. Espacio de altura de líneas entre párrafos, también llamado "espaciado posterior": Hola a todos. Vamos a pasar de un terrible espaciado de línea y todo tipo de racimos hasta agradables y transpirables y legibles para que coincida con nuestra maqueta. Vamos a aprender algo que se llama line-height. Entonces vamos a ver el espacio entre párrafos, el espacio después, pero en realidad sólo se llama margen inferior. Vamos a saltar ahora y a trabajar como hacerlo. Muy bien, entonces el espaciado de línea y la altura de línea. Primero vamos a hacer espaciado de línea. Es el espacio entre. Entonces este es un párrafo justo ahí. Es una etiqueta p, sólo dividirlos en dos líneas. Ese es el espaciado de líneas. El espacio entre párrafos está entre estas dos etiquetas p separadas, y son diferentes. Siempre comienzas con line-height primero porque line-height afecta todo y luego podemos mirar hacer el espacio entre párrafos. El espaciado de líneas es bastante fácil, vamos a ir a Visual Studio Code. No tenemos un estilo para tu p tag get. Vamos a decir que la etiqueta p es, ¿qué vamos a hacer? ¿ Qué vamos a hacer? Se llama line-height. La altura de la línea depende de las mediciones. Depende si estás usando rems como nosotros. Utilizamos rems para line-height porque queremos que se correspondan. Si estás usando píxeles para tamaños de fuente, usa píxeles. Ahora bien, ¿qué tan grande es la altura de la línea? Hay muchas conjeturas. Uno va a ser nada. Bueno, cualquiera que sea el tamaño de la copia del cuerpo. Ya hemos decidido todo aquí, que significa que la etiqueta p es 1.125. Ahí es donde empezamos, así que cualquier cosa por encima de eso, va a mostrar una brecha. Entonces si conseguimos un 1.5 rem, va a ser un pequeño hueco. Rem incluso. Vamos a comprobarlo. Ahí hay un diminuto espacios abiertos. Echemos un vistazo a 2.5 solo para mostrarte, gran brecha. Tú decides. Sea lo que sea que talla, alrededor de la mitad se están haciendo más grandes. Ese siempre es un buen punto de partida en mi cabeza, y funciona para mí. Pero quiero que este párrafo espacie un poco, cool. Para hacer este espaciado entre párrafos, no hay uno especial real que hayas usado en el margen, ni relleno en la parte inferior. No importa. Margen inferior o relleno inferior. ¿ Por qué? Porque se va a ver visualmente igual. Sabemos que hace cosas diferentes, empuja desde el interior o desde el exterior, pero no importa. Ahora esto básicamente cualquier cosa por encima de cero te va a mostrar algo que el valor predeterminado es cero a partir de nuestro reset CSS. Echemos un vistazo a 0.5 rem. Eso es probablemente lo que quiero. Sólo un hueco más grande aquí. Puedes poner un hueco realmente grande ahí dentro, depende de ti. Aquí tienes. Deberías poner un cero delante de él. Encuentro que si dejo el cero fuera del frente siempre funciona, pero apuesto a que hay un caso donde no lo hace. Seamos sintácticamente correctos. De acuerdo, lo siguiente que quiero hacer es la etiqueta h, vale, la h_1 al menos quiero empujar un poco de brecha debajo de ella. Tengo que encontrar mi h_1, vamos a hacer lo mismo, vamos a hacer. Ahora, mi h_1 no se rompe a dos líneas. Si lo hiciera, tendríamos que empezar a mirar la altura de línea. Pero no lo hace, así que sólo voy a usar margin-bottom. ¿ Qué tan grande debería ser? Ni idea. 0.5 rem, demasiado grande. Cierro algo ahí. Ustedes lo consiguen todo de vuelta al cuadrado uno. Eso fue demasiado grande. ¿Qué debemos hacer? 0.1 a 0.2 entonces. Echemos un vistazo. A lo mejor todavía un poco grande, vamos a hacer 1 rem. Esto es bonito. Ese espacio debajo del h_1 me funciona. Está bien, y lo que podríamos hacer aquí solo para ordenar todo, puedes ver esta etiqueta div va hasta el borde aquí. ¿ A qué se llama esa etiqueta div? No puedo recordar, herobox1, podríamos agregarle algo de relleno. Entonces herobox1, agreguemos algo de relleno y lo añadiremos a la derecha. Voy a adivinar por algunos píxeles, eso funciona para mí. Muy bien, line-height, el espacio entre líneas se llama line-height. Lo llamé espaciado de líneas antes, altura de línea. No existe tal cosa como el espacio después o un espacio entre párrafos como en algo como Word o InDesign, ok usa margen o relleno inferior. Y luego solo asegúrate de que la medida que estás usando sea la misma que, o al menos la unidad de medida sea la misma que la unidad que estás usando para el tamaño de fuente. Entonces pixeles, esto serían píxeles también. Muy bien, al siguiente video. 48. Cuándo utilizar una imagen svg en vez de jpg o png en diseño web: Oye, ahí. Este video va a estar hablando de las diferencias entre JPEG, PNG, y SVG; incluso mencionaremos GIF al final. Si sabes todo eso, puedes saltarte. En realidad no vamos a hacer nada en esta clase. Mucho de mí hablando y explicando. Pero si tal vez nunca has oído hablar de un SVG, Scalable Vector Graphics, hangout porque este es impresionante. Te mostraré un ejemplo. Ver, PNG borroso. Realmente bonito SVG, y escala para siempre. Reloj. Sigue escalando en. Oh, mira lo bueno que es. Muy bien, saltemos y resolvamos todo esto. Muy bien, hablemos de los principales tipos de imagen: JPEG, PNG y SVG. JPEG y PNG han estado por ahí desde hace tiempo. JPEG es probablemente el más común. JPG, JPEG; como quieras llamarlo. Es increíble para imágenes como esta. Hola Dan. A las fotografías les va muy bien como JPEG. ¿ Por qué? Porque el tamaño del archivo es muy pequeño en relación a la calidad que se puede obtener de él. Se puede conseguir algo que se vea realmente bien, montones de colores; hay millones de colores en un JPEG, pero el tamaño del archivo en comparación es muy, muy pequeño, así que usamos eso. ¿ Dónde se detuvieron los JPEGs, y tú dices : “Vale, solo usaremos JPEG para todo”. El gran problema con los JPEG es que no hay transparencia. No se puede ver a través de un JPEG. No hay forma de tener un agujero en él para mostrar las cosas a través y ahí es donde comienza PNG. De acuerdo ahora, vamos a ver nuestro logo que hicimos. Este logo aquí. ¿ Puedes ver nuestras Bikes Roar? En realidad es una imagen. ¿ Se puede ver cuando lo arrastro por ahí? En realidad es ver a través. Entonces puedo cambiar el color detrás de él y el color cambia ahí. Si esto fuera un JPEG, escoge un color para el fondo y eso sería todo para siempre. PNG son impresionantes. También tienen montones de colores. Puedes usar millones de colores en un PNG, pero también tiene transparencia. Podrías estar diciendo: “¿Por qué no usamos esos?” Debido a que los tamaños de archivo son enormes para los PNG en comparación con un JPEG. Tienes que hacer un intercambio. ¿Necesito transparencia? Enfriar. Si lo haces, entonces tienes que dejar atrás a JPEG. Si no lo haces, como esta imagen de aquí, definitivamente un JPEG porque no hay transparencia así que bien podría tener toda la bondad de los colores con el tamaño de archivo bajo. Ahora, la tercera opción, el SVG. Es bastante nuevo. Si no has oído hablar de esto, es un gráfico Vector escalable, y vector es el bit cool. Si sabes de los gráficos vectoriales, vas a ir, “En serio, puedes hacer vector en línea”. Sí, totalmente puedes. Si nunca has oído hablar de vector antes, podrías buscar el término. Es vector, V-E-C-T-O-R, porque aquí no lo vamos a cubrir demasiado, pero el beneficio de ello, siempre y cuando sea una forma realmente simple como un icono o un logotipo, un SVG sería terrible para esto, aunque quisieras transparencia, sería terrible porque solo hay tanto detalle. Pero para formas simples, los SVG son brillantes. Por lo que el logo está aquí. Vamos a cambiar esto por un SVG y ver las bondades. Vamos a apagarlo primero y ver la diferencia y luego voy a explicar los beneficios para cualquier SVG. En tus archivos de ejercicios, así que si vas a “Archivos de ejercicios”, “Proyecto 2", había un PNG león que usamos anteriormente. Vamos a usar este llamado SVG. Copiarlo. Acude a tu escritorio, póngalo en tu carpeta Project 2, en tus imágenes y pégalo en. Ahora en tu código, ve a Visual Studio Code, pulsa debajo de tu etiqueta de imagen en tu logo div. Cambiar PNG por SVG. Echemos un vistazo a la diferencia. Este es el original y prepárate, mira el segundo. Listo, crujiente y claro. Obviamente estás viendo este video. A veces dependiendo de tu internet, a veces la gente escribía comentarios en la parte inferior como, “Se ve igual”. Podría estar mirando una resolución realmente baja del video. A menudo, si haces clic en la parte inferior derecha de tu video, puedes subir o bajar la calidad del video que estás viendo. Sólo para que puedas ver estos detalles, pero hagámoslo un poco más obvio. Puedo acercar, así que si hago zoom en este, estoy sosteniendo el mando más golpeándolo un par de veces. Eso es en un Mac, Control plus en un PC. Haciendo zoom en mi sitio web para que puedas ver la gran diferencia real. Un PNG utiliza píxeles para hacer su gráfico. Si bien era realmente pequeño, estaba bien. Tenía un borde un poco borroso pero vector, este SVG, escala al infinito. Puedes escalarlo tan grande como quieras y lo genial al respecto es que siempre será nítido y claro por fuera y aún así tendrá un tamaño de archivo muy pequeño. Podrías conseguir un PNG con un aspecto realmente bueno en este tamaño. Puedes hacerlo más grande o hacerlo genial, pero el tamaño del archivo se va a hacer realmente grande. Encontrarás muchos sitios web ahora usando SVG, compatibilidad de navegadores es realmente buena ahora. Si se trata de un icono o un logotipo, utiliza un SVG. Esa es una buena regla de manta. Si es decir una imagen, te mostraré un buen ejemplo. Este de aquí. Este es un gráfico que hice para una parte posterior de la clase y digamos que quería verme exactamente así. Mi yogur gigante de carne de hierba que hice para ustedes chicos. Pero tiene un color de fondo. Esto funcionaría mejor como un JPEG. Te mostraré cómo exportar todas estas en un segundo, pero vamos a entenderlas primero. Esto sería genial como un JPG porque tiene muchos colores aquí y es razonablemente fotográfico y el tamaño del archivo será bonito y pequeño. Pero digamos que lo necesito para tener fondo vacío. Esta cosa del tablero de ajedrez es la forma que tiene la computadora de decir que no hay nada detrás. Esto tendría que ser un PNG. ¿ Por qué no sería un SVG? Un SVG necesita esos detalles realmente simples. Si esto fuera un SVG, el tamaño del archivo sería enorme y se vería terrible y simplemente no funcionaría. No puedo hacer esto en SVG. SVG perfecto para este tipo de cosas cuando hay unas líneas realmente simples. Cualquier cosa que se haga en Illustrator se puede exportar como SVG porque eso es realmente básico. Formas básicas, colores simples, fáciles. JPEG para imágenes, PNG para imágenes que necesitan transparencia y cualquier cosa que sea líneas realmente simples como iconos y pequeños gráficos, flechas, ese tipo de cosas sería perfecto para un SVG. Eres como, “No ha mencionado GIF”. El único motivo por el que utilizas GIFs en estos días si necesitas animarlos. Los GIF tienen un verdadero gran inconveniente. Sólo tienen 256 colores lo cual es un dolor. Solo se pueden hacer cosas pequeñas y los colores no pueden ser demasiado amplios. No hay razón para usar eso a menos que quieras animarlo e incluso entonces, animando GIFs, son realmente caso de uso nicho. Se puede animar en CSS y muchas otras formas mejores. No voy a cubrir GIFs aquí. Yo sí cubro mucho más y mi otro, dicen clases de Photoshop e Illustrator. Hacemos todo tipo de GIF animados ahí, pero ahora no vamos a usar ese tipo de diseño web tradicional. Lo que haremos es ahora que entiendas estas cosas. En realidad podría cambiar la siguiente parte de este video a otro video que solo puedes ver eso bonito y por sí mismo. Posteriormente puedes volver y mostrarte cómo exportar estos SVG, PNG y JPEG fácilmente. Sí, así que hagámoslo en el siguiente video. 49. Cómo exportar svg png jpg desde XD Photoshop Illustrator para diseño web: Hola a todos, este video les va a mostrar cómo exportar gráficos de un montón de productos de software de Adobe. Vamos a ver a Illustrator, Adobe Photoshop, y Adobe XD. Ahora sé que no todos van a tener el software, pero es realmente común en, como diseñador web tener acceso a esto. No tienes que pagar unos productos pagados. Hay pruebas gratuitas para ellos, van a ser probablemente veces que vamos a tener que encontrarnos con este software, o al menos para arrastrar los gráficos fuera de ellos. Te voy a mostrar cómo hacer todo eso, en este video. Está bien. Esto va a ser sólo una carrera rápida. Yo quiero darte algunas habilidades básicas. Como diseñador web, vas a necesitar saberlo a menudo. Digamos que estás trabajando con un diseñador más gráfico, eso es hacer el layout que diseña de la misma. En realidad solo estás haciendo la codificación. Aunque, sólo tienes que entregarte un documento de Photoshop, esos están ansiosos por hacer eso, o un documento SD, y decir arreglarle eso a Illustrator, o podrías estar haciendo todo el asunto como yo. Me gusta hacer la parte de diseño, así como la codificación. Vamos a correr por los programas que yo uso. No van a ser todos ellos, pero son realmente comunes para la industria. Empecemos con XD. Adobe XD, es como UX Design Program. Es una nueva está ganando popularidad, es un competidor realmente grande para bosquejar. Está bien. Exportar de esto es muy fácil. Da click en el gráfico que has diseñado en XD, y golpeas “Comando E” en una marca o “Control E” en una PC. O Exportar archivo, y vamos a utilizar exportar seleccionado. Tan solo asegúrate de que esté seleccionado, y debería salir. En este caso, vamos a darle un nombre. Voy a llamar a éste, motociclistas. Utilizas guiones bajos, o guiones. No se pueden usar espacios donde es mala práctica usar espacios, porque a algunos navegadores más antiguos les gusta empezar. Entonces solo voy a poner mi industria en el escritorio solo para mostrarte, y aquí abajo, puedes decidir tu formato, Easy-peasy. PDS no va a funcionar para nuestra página web. Entonces queremos PNG, SVG, que un JPEG. En este caso, por este, ya hemos hablado de ello. ¿ Cuál queremos? Sí JPEG. Después está la calidad. Para un sitio web, nunca 100 por ciento.Esta es sugerencia, entre 40 y 80, realmente depende de la gráfica. Esta es una imagen de stock. Está bien. Es realmente bonito que de otra manera, pero recuerdas, es realmente bueno poder ir bastante bajo si tienes algunas imágenes de los clientes, y se muestra en un celular, a menudo, la calidad puede bajar tan baja. Básicamente, lo que significa es el tamaño del archivo se va a hacer más pequeño, y eso es lo que quieres. Hablaremos de que la velocidad de carga de página es una parte importante del ranking en Google. Entonces mi caso, porque esto es toda una imagen de plomo, probablemente obtendría el 80 por ciento. Para estos chicos de aquí abajo, que sólo gráficos de apoyo detrás, probablemente bajaría a entre 40 o 60. Simplemente puedes escribirlo y realmente hacer una sinfonía. Ahora no vamos a cubrir como 2x y 3x, el momento, vamos a mirar imágenes responsivas un poco más adelante en el curso. Pero por el momento así es como consigo mi JPEG. Aquí vamos, y haremos un par más desde XD y luego pasaremos a otro programa, ahí vamos. Acabo de hacer clic en mi escritorio ahora, tengo JPEG, solo pasar el rato haciendo nada, esto son 36 kilobytes, es de buena calidad. Así es como sacar a JPEG. Este de aquí. Ahora, ¿qué debería ser esto? JPEG o un PNG o un SVG. Entonces replicar, puedes hacer clic con el botón derecho en ellos, a veces depende este está siendo marcado para exportación, así que vamos a usar un atajo, comando E. Voy a usar largo camino. Este de aquí, va a funcionar realmente bien no es SVG, deja todos los valores predeterminados, vamos a hacer clic en exportar, y ojalá en mi escritorio, tengo SVG. Aquí vamos. SVG no previsuó muy bien. Está bien pero solo éste, me olvidé de cambiarle el nombre. Yo lo puedo hacer después. Puedo ponerle guiones. Yo no lo hago ahora. Sólo recuerda hacerlo. Ahora, probablemente no haya razón para exportar realmente un JPEG, PNG en este caso, pero ya sabes cómo hacerlo. Está en ese mismo pequeño desplegable, y no hay ajustes reales para PNG, solo vas y lo exportas. Estos de aquí, para el dimensionamiento de malas hierbas es cuando llegamos a hacer aplicaciones móviles. Cuando exploramos para Android iOS, no lo necesitamos por el momento. Eso es lo básico para XD. Ahora hay mucho más en ello, si haces mis cursos Full HD, todo un capítulo al respecto, no vamos a hacer todo eso aquí. Te está dando eso, ponte por cosas. Echemos un vistazo a usar Photoshop, muy común usar Photoshop, a pesar de que es como un programa de edición de fotos, es realmente común usar esto en el diseño web todavía. Entonces quiero exportar esta cosa como, y ¿queremos el fondo completo? Eso va a ser perfecto como JPEG, porque quiero transparencia. Va a ser PNG. El motivo por el que esto no es un SVG, es porque no es realmente gráficos simples está pasando demasiado aquí. Está bien. Para exportar desde Photoshop, hay un par de maneras, la mejor manera es exportar archivos, y este nombre insignificante aquí, se llama Exportar Como es brillante. Si estás usando, Safe For Web, está bien. Simplemente no es tan bueno como esto. Algunas personas por ahí podrían estar peleándome por eso, pero esto es lo nuevo, y mi experiencia es lo mejor. Entonces lo genial de esto es que no necesitas redimensionarlo antes de entrar aquí. Mucha gente irá, “Oh, tengo esta gran imagen. Ahora necesito ir a imagen, tamaño de imagen, hacerla más pequeña, y luego la exportarla. Después deshacen el tamaño de la imagen para que vuelva a ser grande. tanto que XD, lo que significa que se puede hacer aquí. Está bien. Formato aquí arriba. JPEG, GIF, SVG. Esto es todo lo que realmente necesitas. Te mostraré un par de otras pequeñas ventajas. Se podría decir: “Está bien que necesita ser un JPNG, pero necesito que tenga 500 píxeles de ancho”. Eso se puede hacer en esta etapa, lo cual es bastante bonito. Pero digamos que necesitas una versión más pequeña también para algunas cosas que puedes darle un poco más allá. Entonces puedes tener uno que sea la mitad del tamaño, así que 0.5, bueno, tal vez uno que sea el doble del tamaño lo haga. Este es un diseño más receptivo. Se pueden agregar diferentes versiones del gráfico, diferentes versiones, diferentes tamaños del mismo. ¿Algo más? No. Haga clic en “Exportar”, y acabo de vincular a mi escritorio. Voy a tener un montón de SVG al tamaño correcto. Ahora, realmente no necesitamos cubrirlo, pero hagámoslo de verdad rápidamente. Exporta un JPEG justo ahí, y los deslizadores de calidad justo a lo largo de la parte superior aquí. Como dijimos antes, las mismas reglas aplican este caso, porque tiene un trasfondo completo. Ahora ves la transparencia porque es el JPEG, digamos que está bien es lo que necesitamos, y voy a conseguir el 60%, y la calidad va a estar bien, porque es una buena imagen se modeló en Adobe. Yo lo voy a hacer en dimensión, lo cual es genial, pequeño programa 3D que tienen. Yo sólo voy a tener una talla. Muchas gracias, y golpea” Exportar”. Ahora bien, SVG funcionará. Este de aquí no es eso realmente, está en un gráfico vectorial. Necesita ser algo dibujado con vector ahora en, lo siento, en Photoshop necesitará ser algo dibujado con estas herramientas. Tienes un montón de estos, todas son formas vectoriales, y puedes ver que esto es realmente simple. Estos exportación grande es un SVG, esto no lo es. Ahora hay mucho más que puedes hacer por Photoshop, por diseño web. Tengo un curso completo sobre eso también. Si quieres buscar mi curso de Photoshop para diseño web. Pero lo último que quiero mostrarte, es que en realidad solo puedes encontrar la capa, hacer clic con el botón derecho en ella, y decir, “Exportar como”, o usar la Exportación Rápida. El tuyo probablemente va a decir, “Exportación rápida”, JPEG completo. Eso está bien. Yo también cambié mis preferencias, porque exploto principalmente como un ser JPEG ir a aquí. Acabas de exportar esa capa. Tan sólo otra forma de llegar a ella. Hay muchas otras cosas geniales de las que quiero mostrarte. Nuevamente, es todo un capítulo más, y eso lógico. Echemos un vistazo al último de nuestra pandilla va a ser Adobe Illustrator. Por lo que este pequeño logo de aquí, quiero exportar este add es uno esos gráficos aquí. Ahora en ilustrado como panel fresco, ventana fresca, y está bajo exportación de activos. Está bien, se abre este pequeño panel. Hay un ya por alguna razón. Está bien. Entonces se ve así, y lo que tienes que hacer es agrupar lo que quieres mantener unido. Si no está agrupado, termina haciendo cosas raras. Entonces este es un grupo. Yo sólo lo arrastro aquí, y lo hay. Si está desagrupado, te mostraré lo que pasa en caso de que lo hagas. Aquí, porque son unas pedacitas si lo grafico todo, y lo arrastra en ya ves, será como solo pequeños gráficos que se exportan. Entonces vamos a deshacer eso. Enfriar, para que pueda arrastrar esto, digamos, he hecho un diseño completo de página web en un Illustrator. Es totalmente perfecto para hacerlo. Bueno, debería agrupar esos 10, agruparlos. He agrupado a un par de ellos, tirándolos todos aquí, después como un grupo grande que es Co. Puedo decir que en realidad los haría todos para ser PNG o SVG, y voy a exportarlos, y pegarlos en mi escritorio. Se está poniendo un poco, dame un [inaudible]. Está bien. Se lo va a exportar. Ahora, ¿qué es realmente genial de esto? ¿ Dónde están mis SVG? Ahí están. Ilustrar como ponerlos en un pequeño grupo agradable. Hay uno, en realidad, ese fue un buen punto. Se puede ver que éste va a la línea azul a su alrededor. Por lo que sólo exportó esa, eso te atrapará. Por lo tanto, seleccione ambos, haga clic en uno, mantenga presionado el turno con el siguiente. O creo que si no tienes nada seleccionado, y vas a un selecto ellos todos. Yo cambiaría en mi teclado, les pincharía en ambos, golpeaba exportación, y deberíamos conseguir los dos ahora. Sustitúyalo. Ahí está en mi escritorio. Enfriar. Activo 2 y activo 3. Está bien. La otra cosa genial que puedes hacer aquí. Bueno, lo que es bueno de este panel de activos es ver esto. Si cambio esto a otro color, en cambio teniendo el gradiente, solo escojo otro color. ya ves actualizado aquí, no necesito arrastrarlo y hacerlo. Yo también puedo darle un nombre aquí dentro, así puedo llamarlo cohete. Puedo volver a golpear exportación, y sólo me ahorra tiempo. Tengo que arrastrarlo de nuevo, e identificarlo de nuevo. Simplemente se actualiza al instante. Simplemente hago clic en exportar, y aquí está mi cohete. Las mismas cosas si necesitas, PNG o JPEG, depende de ti. Diga tres contra software, son viejos Adobe. Es bastante común usar productos de Adobe. El único otro que se acostumbra con bastante frecuencia es algo llamado sketch. Todavía no tengo un curso de boceto. Pero si ilustras conseguiré cursos genéricos ilustrados como esenciales y avanzados. Pero tengo uno realmente específico, para el diseño web que podría ser útil para ti. Se llama ilustrador para diseño web, es la interfaz de usuario de estrategia más cool, y diseño web, lo mismo para Photoshop. Esta clases genéricas es un Photoshop herramientas esenciales y avanzadas. Pero hay uno específicamente para el diseño web y XD. Tengo a XD solo es útil diseño web. Por lo que sólo hay un curso en que debe escoger uno. Pero espero que haya suficiente en este video para mostrarte cómo conseguirlos, al menos lo básico de esos. Pero es el software, y no fue demasiado de una venta cruzada tratando de adelgazar otros cursos no tienes que hacerlos, porque muchas veces simplemente, en lugar de hacer mucho el diseño, podrías ser sólo haciendo la codificación en la creación. Está bien. Pero es todo lo que te veremos el próximo video. 50. Imágenes de bloque vs. imágenes de fondo en HTML y CSS: Hola ahí. En este video vamos a poner en el fondo de bacalao imágenes similares al fondo que hicimos en el proyecto 1. Vamos a añadir un poco de caprichos extra con posición de fondo y vamos a hablar la diferencia entre las imágenes a nivel de bloque y estas imágenes que establecí como fondos CSS. Vamos a saltar y a trabajar hacia fuera. En primer lugar, queremos poner estos gráficos de fondo en. Ahora, quiero traer un punto porque hay momentos en los que simplemente pondríamos la imagen en el HTML. Eso lo hemos hecho hasta ahora con este de aquí, es fuente de imagen y lo hemos puesto en el lado HTML real, y lo hemos hecho cuando lo hemos puesto como imagen de fondo. Recuerda que lo hicimos en el último proyecto, teníamos ese gráfico de fondo gigante. ¿ Por qué harías las dos? Ahora, lo que pasará es que tendrás una mezcla de ambos. El motivo por el que lo tienes aquí en el HTML es porque, si está en el HTML es lo que se llama una imagen a nivel de bloque. Significa que lo ve el navegador, o al menos el motor de búsqueda. El motor de búsqueda viene como Google o Bing y viene aquí y dice: “Oye, mira, hay un sitio web, todo se trata de reparaciones de bicicletas”. Porque ahí lo tenemos en nuestro título. También dice: “Ah, también hay un texto sobre las reparaciones de bicicletas. Incluso hay una imagen, Tiene tomas del tipo sobre hacer cosas con bicicletas”. Todo se suma a la capacidad de los motores de búsqueda para entender cómo es tu sitio web y para qué debes clasificar. tanto que aquí en el CSS lo ignora, dice : “No me importa si has pasado años jugando con el encabezamiento superior porque no agrega ningún valor a la búsqueda. Con tu caricia es eso, o con tu interlineado, el mismo problema son las imágenes en los gradientes de fondo. Serán ignorados. Lo mejor es tener tantas imágenes como puedas en el HTML porque quieres contarlo contra tu sitio web o en contra de ella hacia ti sitio web, digamos. tanto que la razón por la que pones imágenes en segundo plano como vamos a hacerlo, en este caso es porque dos cosas.Una es, [inaudible] apoyando gráficos realmente no son tan útiles. No son partes clave de la página web. Simplemente son estilo. El otro motivo es esto, queremos poner cosas por encima y lo hace súper fácil cuando se trata de un gráfico de fondo CSS. Sólo hazlo y es donde pones las cosas por encima. En tanto que si lo haces con una imagen, es realmente difícil poner cosas encima de ella. Vamos a tener un pequeño vistazo rápido con mi imagen aquí. Ahí está mi imagen, quiero poner una etiqueta P justo encima de ella. Voy a poner una etiqueta P y voy a poner un texto. Pero debido a que ambas son cosas a nivel de bloque, texto a nivel de bloque, imágenes a nivel de bloque, tratarían de pelear entre sí. Aquí se puede ver el texto ha empujado a este tipo a la siguiente línea. Realmente no importa si este texto está delante o detrás de él. Realmente no quieren mezclar, son como el aceite y el agua. Hay formas de hacer que eso suceda. Tienes que empezar a jugar con cosas como posicionamiento y el índice Z y es mucho ajetreo. Para alejarnos de ese ajetreo, sólo vamos a usar una imagen de fondo. Para hacerlo, necesitamos copiar los gráficos sobre. Encontremos ese expediente de ejercicio. Vamos al proyecto 2, y quiero estos tres. Fondo de imagen 1, 2 y 3, vamos a copiarlo. Vamos a mi escritorio, busquemos el proyecto 2, lo pongamos en nuestra carpeta de imágenes y miren, ya están ahí dentro. tuyos no lo serán, los míos lo son. Pega el tuyo aquí, los míos ya están aquí porque ya tenía un par de como va en este video y se ha ido mal. Tratando de explicar nivel de bloque versus fondo CSS, me ha llevado un par de pases pero siento que lo he clavado esta vez, así que es la última vez que lo voy a hacer de todos modos. Imágenes de la, sumémoslas. Vamos a ir a la tarjeta 1 y hagamos un par de cosas, vamos a deshacernos del color de fondo de todas estas. Aquí, aquí, aquí, aquí. Ya no los necesitas. Tarjeta 1, vamos a poner en un fondo, ¿recuerdas qué era? Imagen de fondo. Esa es una fácil. La siguiente parte de esto es rara. Es URL. URL, un par de corchetes y dentro de aquí necesitas escribir la ruta a la imagen. En nuestro caso son imágenes, y luego puedo hacer clic en “Imagen Fondo Tarjeta 1, y al final aquí, poner en punto y coma. Guárdalo. Vayamos a revisar. Funciona. Se puede ver que se repite ahí, la imagen no es lo suficientemente alta como para caber. Nunca vas a conseguir que la imagen encaje perfectamente. Se puede forzar, pero porque estamos usando un porcentaje, es decir 30 por ciento, va a ser muy difícil conseguir que sea perfecto. El modo de lograr que se ajuste perfectamente al fondo es, ¿recuerdas cuál era la cosa? Se llamaba fondo, ¿me acuerdo? Tamaño de fondo, tal vez éste, cubierta. Es realmente útil la propiedad CSS que solo se ajusta a la caja en su extremo. Si la caja se hace más pequeña, digamos que son 250. En realidad lo haré sustancialmente más pequeño, solo para que puedas ver. Un ancho de, dejémoslo en eso como una altura mínima. ¿ Por qué sigue siendo alto? Tarjetas aquí. Originalmente agregamos una altura a las cartas, y esto realmente ilustra por qué es un poco un dolor agregar alturas en. Lo hacemos en esta clase sólo porque me hace fácil mostrarte, “Oye, hicimos una etiqueta div y sabemos que está en el lugar correcto porque le dimos una altura y un color”. Pero siempre que estoy trabajando, nunca estoy sumando alturas. Las alturas provienen del contenido. Yo voy a borrar tarjetas, tú haces lo mismo. Esperemos ahora, ¿sigue funcionando? No. Todos estos tipos están peleando. Estos tipos están manteniendo su caja bonita y alta. No es lo que quiero, así que lo que voy a hacer es deshacerme de la altura mínima sobre ti y tú, y vamos a ver. Aquí vamos. El chulo al respecto es que si hago estos 100 pixeles de ancho ahora y lo hago 50 de ancho, ¿ puedes ver la imagen intenta estirar para llenar el hueco? Si hago este 10 por ciento de ancho, cubierta aún intenta caber la caja ahí dentro. Esa fue una terrible explicación. Lo que quiero que hagas sin embargo es que me gustaría que tuvieras una altura mínima de, digamos 250 por el momento para los tres de estos. Creo que se fijó 300. Vamos a cambiarlo aquí, y me gustaría que no tuvieras altura en las cartas. No hay color en ninguno de estos. Echa un vistazo. Tienes que guardarlo y echar un vistazo. Nosotros lo vamos a hacer. Yo quiero mostrarte un poco extra. Ahora L imagen tiene hazañas siendo cortadas porque lo que pasa es esta portada por defecto trata de santo todo. No, usa la parte superior izquierda. Porque si hago esto, no ya no voy a meterme con lo alto, es usar la parte superior izquierda y si hago la caja más corta, sólo verás su cabeza. Hay una forma de obligarlo a hacer lo que quieras. En lugar de que sea de arriba a la izquierda, puedes conseguir que sea la parte inferior. Usarías algo llamado posición de fondo. No quiero decir abajo por favor, y ahora, ojalá debamos ver sus pies. Estoy usando botón porque esto en la parte superior de aquí, me importa que me corten. Se puede utilizar centro. Digamos que quieres cortar la diferencia porque tu imagen tiene un poco de ambos, puedes usar centro y eso significa que va a cortar un poco de la parte superior y un poco de la parte inferior. Echemos un vistazo. Voy a volver al fondo. Se va a deshacer. A mí me gustaría que eso estuviera en todos ellos. Voy a agarrar esto y hago lo mismo aquí, y lo mismo para tres. Pero necesito pasar y cambiar aquí a dos y aquí a tres. Veamos qué tan bien lo hizo. Ese funcionó, uno no funcionó. Bueno, porque puse 12. Usted lo vio. Ese tipo podría ser diferente. Podrías decidir ir al centro por esa u otra. Supongo que la gran ventaja de esto es que a medias sabemos lo que es una imagen a nivel de bloque frente a una imagen de fondo CSS, y aprendimos algunos trucos adicionales como jugar con la posición de fondo. Esto podría ser bueno ahora. Recuerda nuestro primer proyecto, la gran imagen de fondo, podrías pasar por ahora y cambiar la posición para decir centro en lugar de estar en la parte superior. Lo dejaremos ahí para este. Lo envolveremos como ser específicamente las imágenes de fondo. En el siguiente video, terminaremos el, o al menos empezaremos, o al menos haremos un poco más de las tarjetas. Pondremos los tics, conseguirle estilo, haremos algunas cosas divertidas con tarjetas clicables completas. Te veré en el próximo. 51. Terminar nuestras tarjetas: Está bien. Con toda honestidad, este video no es súper emocionante. Vamos a sumar los H2's aquí abajo. Vamos a añadir nuestras etiquetas p y hacer un poco de estilo. Es la carne y las papas del curso. Haciendo eso sabemos hacerlo. Voy a lanzar algunos consejos y trucos. Vamos a hacer algunas cosas divertidas con márgenes pero cuando digo diversión, quiero decir, vale la pena ver es a lo que me refiero. Vamos a sumar estos. Saltemos a ello. Realmente no lo he vendido pero es la verdad. No son momentos eureka en este, es solo conseguir cosas hechas video. En este video vamos a añadir una etiqueta H2 y una P a todas nuestras cajas. ¿ Por qué un H2? Pareja de razones; una es que visualmente va a ser más pequeña como golpear a una es nuestra más importante y estas y es importante para la importancia del papel del sitio web, porque no es esencial, pero es más importante darle tu H 1 todo el poder que pueda al no diluirlo. Si terminas teniendo como diez H1's en tu página principal, se vuelve difícil para los motores de búsqueda saber de qué se trata tu sitio. Guárdalo a uno o dos y estos tipos van a ser de H2's Tienes H2's, 3's, 4's, 5's, 6's para que puedas repartirlo todo. Vamos a agregarlas. No tengo copia porque es solo libro en línea. Podríamos escribir eso. Vamos a meterlo dentro. Tiene tarjeta 1, tengo que poner un retorno y luego a un H2 y éste va a ser libro en línea. Guárdalo. Echemos un vistazo. Siempre saboreamos a medida que pasamos. Esto sólo va a ser una etiqueta P y vamos a poner en algún lorem ipsum básico y 15 palabras es lo que funcionó. Va a ser agradable por un poco de mirada, eso va a funcionar bien. Vamos a darle estilo a este H2. En mi CSS, solo los mantengo juntos. No hay razón por la que el H2 tenga que estar por encima de la etiqueta P, pero solo es agradable cuando lo estás buscando para encontrar todos los H's juntos. Es barato y agarra todas las cosas H1 y simplemente juega con el tamaño. Ahora, ya he trabajado a mis tallas. Es tal vez mi relación loca, los tiempos 0.0625. Van a ser dos resmas por el tamaño que yo quiera. Yo quiero que se coloque aquí y un margen por el que no he decidido. Eso voy a borrar. Echemos un vistazo. Esta es mi H2, mi etiqueta P. Por el momento está usando todo lo que he hecho actualmente para la P pero en mi caso, quiero que sean realmente pequeños. ¿ Puedes ver mi diseño aquí? Este texto es mucho más pequeño que esta etiqueta P. Empezaré la etiqueta P genérica. Yo quiero cambiar este y vamos a usar un selector compuesto. Ya hemos mirado estos antes. Lo que quiero decir es que depende de lo específico que quieras ser. Se podría decir que quiero que esté en la tarjeta 1. Si hay una etiqueta P, haz esto pero porque va a estar en todas las tarjetas, lo que voy a decir es que voy a usar esta. Voy a decir ese envoltorio que usé por fuera. Puedo decir, Si hay una etiqueta P en cualquier parte dentro de toda esa etiqueta div gigante que se abre ahí y se cierra ahí, que incluye cartas 1, 3, y 3 debería funcionar. De lo que quiero hacer, he resuelto que quiero que el tamaño de la fuente sea alrededor de 0.85, guárdelo. Echemos un pequeño vistazo. No funciona. Guárdalo, jig it, sigue sin funcionar. ¿ Sabes por qué? No sé por qué. Voy a pausar y averiguarlo y volveré. Todos ustedes lo vieron. Aprendizaje. Olvidé poner un rem y el punto y coma. Sí levanta la mitad de este índice. Uf, fácil uno. Ahora, vamos a tener que pelear con la altura de la línea porque la configuramos aquí para que sea perfecto, pero ahora no está del todo funcionando. Vamos a usar una altura de línea de nada más grande que 0.85. Ya trabajé la mía a 1.2. Ahora, quiero ver en esto y esto. Lo que podría hacer es que pudiera decir: “Está bien, quiero que seas centro alineado con texto”. Pero tengo que hacerlo dos veces. Tendría que hacerlo vista para que trabajes, copiarlo, entonces puedes hacerlo y luego pegarlo aquí y eso funcionaría bien. Totalmente. Pero seamos astutos y no tenerlo en estos y tenerlo en el envoltorio en el exterior. Vamos a decir que todo en las tarjetas se va a pegar el centro de línea. Echa un vistazo ahora hace el mismo trabajo. El genial de ello es que lo va a hacer por esto, y en el próximo video cuando agreguemos el ícono, también será sencillo. Tan solo un poco sé más inteligente. Un par de cosas más que quiero hacer es ir demasiado cerca de los bordes más el rubro por encima de eso y todas esas cosas. Añadamos un poco de relleno y quiero mostrarte una cosita de atajo genial. Hasta ahora hemos estado haciendo esto. Si queremos algo de relleno arriba y abajo e izquierda y derecha. Ya puedes ver quiero algo de relleno arriba, izquierda y derecha y abajo y eso puede ser doloroso cuando lo estás haciendo. Quieres un poco de relleno o un margen. En este caso, no importa. Voy a hacer margen, arriba, y luego tú haces eso y lo igualas abajo, izquierda , derecha, y tienes muchas líneas. Lo que normalmente haces ahora que todos estamos yendo un poco más allá en esto, es que solo tecleamos, “Margen” Hay alguna taquigrafía. Básicamente, empieza en la parte superior. Digamos que queremos que sea un diez en la cima. Aquí hay diez píxeles, sin coma. Esa es la parte superior, y solo pon un espacio y quieres 30 a la derecha. Me gustaría que fueran 20 al fondo y luego 30 a la izquierda. Siempre funciona de esa manera, arriba, y luego va en el sentido de las agujas del reloj. El arriba, derecho, abajo, izquierdo. Eso tiene sentido. En sentido horario, y guárdelo. Echemos un vistazo. Vamos a editar los diez en la parte superior, 30 ahí, 20 en la parte inferior, y 30 ahí. 20 en la parte inferior no tiene sentido por el momento. Posteriormente en el curso, cuando agregamos el icono de arriba que empuja. Es solo un poco de espacio debajo de él para que no se sienta a la derecha en la parte inferior aquí. Eso es un poco de taquigrafía fresca. Digamos que queremos 20 porque por el momento tenemos diez en la parte superior y 20 en la inferior. Digamos que no nos importó. Es realmente común hacer lo mismo en la parte superior. Yo quiero 20 arriba y abajo, quiero 30 a la izquierda y a la derecha. Se puede conseguir aún más corto, hentry. Si hago 20 y 30 y solo tengo dos medidas, supone que te refieres a arriba e abajo, izquierda y derecha. ¿ Eso tiene sentido. Simplemente puedes escribir en margen, abajo, arriba a la izquierda y tener cuatro líneas. Pero esta es la versión super taquigrafía. No podía usar eso porque quería que la parte superior fuera diferente de la inferior. 20px y luego 30 otra vez. Enfriar. Vamos a agregar un poco de relleno en el H2 también porque quiero que no solo esté fuera de la parte superior de esta caja, sino que va a estar fuera del ícono que vamos a agregar más adelante. Nos vamos a ir. Esta funda y su forma perfecta, margen top, porque no tenemos otras medidas que queremos agregar. Estamos sumando a 20 píxeles. ¿ Por qué estoy usando píxeles y no rems? Esa es una buena pregunta porque a veces se pueden usar anillos para tamaños como este también pero no veo la razón para tener rems que si alguien escala una fuente, que el espaciado desde arriba necesita cambiar. No creo que tenga que hacerlo. Realmente no importa si esta fuente se hace más grande. Todavía puede permanecer 20 píxeles desde la parte superior. Encuentro cosas como espaciado, dejaré como píxeles, tamaños de fuente absolutos, y para cosas como las mediciones de fuente reales. Es lo que llamó un tamaño relativo. Es un rem es relativo a cualquiera que sea el tamaño predeterminado que se establezca en el navegador. Relativo, absoluto. Vamos a editar a estas otras cajas y luego vamos a seguir adelante. Voy a agarrar todo esto. Ustedes copian, lo voy a pegar ahí dentro. Yo lo voy a pegar aquí y se iba a cambiar. ¿Qué tenemos? Tipos de servicios. Muchas gracias. El último, por favor, vamos. Estoy tratando de usar atajos, pedir consejo. Va a ser el último. Solo tienes que teclear estos. Aquí vamos en nuestros H2's Debería ser en los tres. Echemos un vistazo. Agradable. Eso será todo para este video y el siguiente video vamos a hacer que todo el asunto se pueda hacer clic, lo cual es genial. Nubes llegando a lo largo. Te veré en el siguiente video. 52. Cómo añadir íconos a tu sitio web usando código VS Font Awesome: Hola allá, este video que vamos a poner en iconos. Estás como, “Oye, eso sólo se parece al logotipo o a la imagen, ¿qué tan difícil puede ser esto? ¿ Por qué el video es tan largo entonces?”. Es porque vamos a usar fuentes para hacer iconos. Vamos a ver algo llamado Font Awesome, veremos el material de Google para los iconos. Es una forma inteligente de implementar iconos en tu sitio sin usar imágenes. Hay pros y contras, y es solo otra forma de usar cosas como PNG o imágenes para iconos. También tenga en cuenta que al final tengo un falso final. Yo estoy como, “Sí, gracias y ya estás todo listo” luego sigue un poco y te muestra algo de relleno extra en la parte superior. Así que quédate el último trozo. Entra entonces. Entonces, ¿qué habríamos hecho en el pasado? Habríamos agregado una imagen; un PNG o un SVG a nuestro gráfico, o a nuestro código y luego en mi vista en vivo aquí, ahí está el ícono aquí, y eso es cargar un JPEG, o un PNG, o un SVG, por lo que se está descargando. No son muy grandes, así que solo puedes usar imágenes, eso está bien. Pero vamos a ver el uso de fuentes o fuentes de iconos en este video en particular. Quiero mostrártelo porque hay muchos frameworks más adelante que podrías encontrarte con que los usan y lo otro genial de ellos es que solo hay mucho cool, no tienes que diseñarlos tú mismo. Están todos en bonitos grupos pequeños, son gratis, hay todo tipo de buenas razones para usar fuentes pero para mí personalmente, lo primero que quiero hacer cuando descargue una de estas fuentes es abrir en Illustrator y cambiarla y lío alrededor con. Te lo mostraré también pero usemos estos iconos de fuentes que son realmente fáciles de usar. Entonces, veamos a los dos principales jugadores en esto. Bueno, la principal es Font Awesome. Font Awesome funciona de la misma manera que nuestras Fuentes de Google, recuerda antes en el curso cuando estábamos como, “Ojalá tuviera algunas fuentes nuevas geniales en mi página web”. Agregamos este bit de CSS, para ir a Google Fonts y descargamos Playfair y Roboto. Es exactamente el mismo principio aquí para usar Font Awesome, excepto la fuente que han cambiado el ABC a tocino, pastel, hamburguesa. Entonces eso es todo lo que realmente está pasando. Vamos a hacerlo, hagamos una búsqueda. Ahí hay una pro-versión, y básicamente la pro-versión te consigue diferentes pesos. Te mostraré lo que quiero decir en un segundo, vamos a usarla de forma gratuita. Voy a buscar fuentes, voy a decir, “Bike”. Ya me preparé, así que encontré una fresca que es una bicicleta. En realidad ignoré a estos de aquí. Traté de encontrar unos, acabo de escoger al azar. No eran buenos iconos, estoy recogiendo unos nuevos, bicicletas. Entonces la diferencia entre pro y pagado, esa es una fuente gratuita, esa es una fuente pagada y ser como, “¿cuál es la diferencia?” y solo hay pesos diferentes. Se puede ver que uno tiene uno bonito delgado, que uno es más delgado, que uno está un poco lleno. Tienes que decidir si puedes vivir con eso, o si realmente quieres este. Entonces esa es la diferencia y ves que el precio no es enorme. Suscripción, obtienes mucho más iconos, todos los grisáceos, son los que no puedes usar, pero hay una versión gratuita de todos ellos. Ahora para usarlos, haga clic en uno. Esta página se carga, parece cambiar de color cada vez que recargue esta página, rosa por el momento, la tuya será diferente. Entonces lo que necesitamos son las cosas a lo largo de la parte superior aquí, principalmente. En realidad, es una especie de mostrarte algunas cosas geniales, lo puedo ver como un color sólido, como blanco sobre negro, diferentes tamaños, todo muy cool. Entonces, empecemos a usar este ícono. Hay dos partes que necesitamos, necesitamos esta parte y necesitamos, ¿dónde está? No tengas instalado un proyecto. Está un poco escondido. Hagamos este bit primero. Entonces, empiece aquíy básicamente este es el CDN, es una red de entrega de contenido, es exactamente lo mismo que hicimos para las fuentes de Google. Todo lo que necesitamos hacer es copiarlo, y entrar en nuestro código. Ponlo aquí, lo pondré justo debajo. Lo que realmente necesita hacer es simplemente estar debajo de tu style.css. y realmente no importa de qué manera las fuentes de Google y esta Font Awesome van, pero solo necesita estar en la parte superior ahí. Muy bien, lo siguiente que tengo que hacer es que voy a volver. Entonces una vez que eso está dentro solo necesitas hacer eso una vez por página. Eso tiene que estar en cada página en la que tengas un icono. No necesita en páginas que no usen iconos, por lo que no necesita estar en todas las páginas, pero a menudo simplemente tirarlos al rol. Entonces lo que necesitamos es esta cosa de aquí, este pedazo de código, esto entra en nuestro HTML, lo voy a copiar. Realmente no importa si lo consigues de ahí o de aquí, lo mismo. Copia y vamos a entrar en nuestro código y ponerlo donde lo quieras. Entonces me voy a deshacer de ese ícono de imagen y lo voy a pegar aquí. Voy a pegarle y alinearlo bien y pegarle a Save y vamos a ver cómo funciona y tú estás ahí. Aquí está mi diminuto icono. Entonces por defecto, es muy pequeño, en realidad lo raro es que tienes que pensar en esto como una fuente, lo cual es realmente difícil de hacer. Estás como, “bien, quiero dimensionar esto, voy a hacer que sea un ancho de 100 píxeles”. No va a funcionar. Lo necesitas para que sea un tamaño de fuente de 100 píxeles, vale, porque esta es una fuente, por eso es tan pequeña. El tuyo podría ser más grande porque está usando lo que sean los tamaños predeterminados que venían en los navegadores 16, ¿a qué cambiamos ese predeterminado? Creo que es a 18 píxeles, sea lo que fuera, es el tamaño de fuente predeterminado. Entonces para ir y darle estilo a esto, echemos un vistazo a nuestro HTML. Entonces podemos darle estilo a esto, tenemos una etiqueta i, es lo que se utiliza para icon, recuerda p para el párrafo h2 para golpear dos, i se usa para iconos y se le aplican un par de clases que vamos a hablar en un segundo. Por lo que puedes apuntar a cualquiera de estos, porque solo tengo un grupo de iconos en toda esta página. Son sólo uno, dos, tres. Yo sólo voy a etiquetar todos los iconos. Es posible que tengas que ser un poco más específico. Entonces voy a decir, “todos los iconos tienen un tamaño de fuente de, voy a usar 100 píxeles”. ¿ Por qué estoy usando píxeles a pesar de que hicimos anillos antes? Principalmente porque, si le echo un vistazo, no va a ayudar a los discapacitados visuales si esto se hace cada vez más grande. No lo va a hacer más legible, es una imagen de una moto realmente estilizada, sencilla. Podrías argumentar que sí necesita hacerse cada vez más grande, tal vez estás usando un tamaño más pequeño. Por lo que realmente podrían ser anillos o lo estás usando en línea con el texto, digamos que llega al final, estás usando esta motorita al final de una frase, entonces sería una buena idea ser un anillo y así es como empezar a usarlos. Entonces lo genial de ellos, haremos un poco más de detalle pero básicamente, es cargar una fuente que pasa a ser en lugar de letras, son iconos, hay cargas que escoger de Font Awesome, y significa que son escalables así como vector, ya sabes, hablamos de ser, dónde está todo mi material, hablamos de ser escalable. Si hago zoom en esto, verás que mi moto se escala, como una SVG, pero está cargada como fuente y si alguien ha estado en un sitio que usa Font Awesome, que montones de sitios sí la usan, significa cuando llegan a tu sitio, podría simplemente cargarse aún más rápido porque ya están precargados pero si estás pensando, “hey, ¿por qué no lo cargo como una imagen parece algo fácil de hacer en lugar de llamar a la CDN en la parte superior y, toda honestidad, eso es lo que hago. Te muestro esto porque vas a encontrar sitios con esto en y esta pequeña i etiqueta implementada y la razón por la que no lo haría de esta manera es porque lo primero que quiero hacer es descargar la motocicleta de Font Awesome como SVG y creo que se puede descargar desde aquí desde un SVG, donde está, aquí está en la parte superior aquí dice “descarga, SVG”. acuerdo y descargo y conseguirás solo un gráfico viejo regular porque lo que quiero hacer es descargarlo, abrir eso en illustrator y luego empezar a jugar con él y cambiarlo. Entonces no hay forma correcta o incorrecta de hacerlo pero hemos aprendido a hacerlo. Entremos un poco más de detalle. Echemos un vistazo a la estructura de la misma. FAS, por lo que se da a sí mismo dos clases, así que bueno, se sugiere dos. FAS, y FA- motocicleta. Entonces FAS es Font Awesome, así que está escrito dos veces ahí, Font Awesome esta es una versión sólida, hay una versión regular y una versión ligera, así que si hubiera pagado por esto, podría conseguir la versión FAR la versión FAL y la cosa es que no tengo que apagarme y cambiarla, no tengo que usar el sitio web para hacerlo. Puedo entrar aquí y decir en realidad lo he pagado ahora y estoy usando... Te darán un CDN diferente en la parte superior aquí para los pagados y puedes entrar aquí y cambiarlo a R, o ligero pero estamos usando versión sólida de forma gratuita. Este otro bit aquí, la FA dice que esto es Font Awesome y moto es muy claro lo que eso hace. De acuerdo, vamos a echar un vistazo. Entonces le voy a editar a estos dos otros- lo voy a hacer mal a otras tarjetas. Ahí vamos, hombre, estoy en una mala mañana. Vamos, puedes hacerlo. De acuerdo, así que ahora lo que podemos hacer es pasar y decir en realidad que quiero, estaba buscando un COG. ¿ Cuál va a ser el COG? ¿ Qué tenemos? Tenemos Tipos de Servicio, Llamada para Asesorar, por lo que haremos servicio será Cogs. Entonces encontré que algunos Cogs y yo me gusta este y en lugar de tener una copia y pegar el código, solo puedo decir, oh mira esto, si un Cog.Así que eso es lo que está escrito ahí y yo sólo voy a ir por aquí, voy para decir que eres Cog y estoy adivinando esto, estoy totalmente adivinando teléfono. No he preparado éste. ¿Hice una obra? ¿ Que lo guardo? Guardar. Oye, mira, había un teléfono. Se puede esperar lo mejor y tratar de adivinar excepto bastante bien nombrado. ¿ Qué escogí en realidad? usé teléfono, mi ejemplo preparado, el RNA-SEQ, vivíalo en. Entonces así es cómo usarlos y cómo implementarlos si necesitas colorearlos, ¿cómo los colorearías? Piénsalo. Detener, pausar, pausar el video, pensar. ¿Hiciste una pausa? ¿ Qué opinas? Yo lo hago así? Recuerda que solo es una fuente antigua regular, por lo que la peinarías usando todas las cosas que puedas para las fuentes. Entonces tendríamos ahora las azules, la única razón por la que la mía un blanco es porque me arriba en mi etiqueta de cabeza aquí arriba decía todas las fuentes que están en la etiqueta de cuerpo son blancas a menos que yo diga lo contrario. Entonces por eso viene a través de White, no necesito decirlo de nuevo aquí. Esa pequeña caja de color lo ignoré, me he acostumbrado a él. Probablemente no lo harás. Empiezas a borrar cosas y esa pequeña caja blanca es como que desaparece. Solo está ahí por un rato y desaparece. Si te resulta molesto, también I. Molesto caja de color que no parece llegar a conocer la forma en que las cartas dicen cool, pero también es un dolor. Ahora otra cosa que solo quiero mencionar brevemente es que Font Awesome es una opción y podría no ser en el futuro por la que podrías pasar y podría haber algo más impresionante. Otro que es bastante común es Material. Entonces material.io es más que solo iconos. Font-Awesome es sólo fuentes, iconos, y Material como un montón de cosas. Hemos hablado de ello en otros cursos como nuestro curso UX de UI pero también tiene iconos realmente buenos. Entonces si vas a material.io y pasas por ahí y un vistazo, estoy tratando de adivinar dónde está. Normalmente sólo Google material.io icono, ahí está, son populares. Esto va a cambiar también, te apuesto para cuando llegues aquí pero si los iconos de Google Material terminarás aquí o algo que se parezca razonablemente a esto. ¿ Por qué usaría esto sobre Font Awesome? Este de aquí lo usas para mucho más tipo de, si estuviera haciendo la página web de un Banco o una App por algo contable sabio, algo que necesita más iconos institucionales, aquí hay muchos más iconos institucionales. Plus Font Awesome es divertido, pero algunos de los iconos son un poco ambiguos, mientras que este Material Design parece, tiende a tener un poco más. Coinciden con todas las cosas que se utilizan en las aplicaciones de Android. Tan a menudo estos iconos se están enseñando al mundo a través de las aplicaciones de Google; Gmail, Chrome, es una especie de cosa universal que Google usa por lo que es bastante útil. Es libre de usar. No hay versión de pago de esto pero no hay tantas fuentes. ¿ No vas a encontrar una excavación o habrá un ícono de Instagram? Dudo que haya. Probablemente haya un Instagram encendido, no va a haber un payaso en una moto, mientras que probablemente haya un payaso en una moto en Font Awesome. Por aquí, puedes hacer similar a lo que hiciste en Font Awesome. Hay diferentes estilos, así que hay una versión de Relleno, lo puedes ver ahí, me desplazaré hacia arriba. Hay una versión redondeada que no se ve demasiado diferente, dos tonos, versión Sharp. Para que puedas escoger uno de estos, hacer una búsqueda en la parte superior aquí. Entonces digamos que necesito una foto de un Cog, no va a tener una. No Cogs, pero son es una Cartera, no hay una cartera [risas] Hay cog de tarjeta de crédito. Entonces hago clic en él y es un tipo de cosa muy similar, ya sea puedes descargarlo como un SVG por aquí, para que puedas decir SVG, por favor descarga. Ya click Descargar yendo o puedes dar click en la flecha pequeña aquí, ver pequeño chevron, y puedes incrustarlo. Por lo que necesitas hacer dos cosas. Ve a las instrucciones, se abrirá tipo de cómo hacerlo y solo te desplazas porque te gusta, soy hardcore no necesito todas estas cosas, solo te necesito. Entonces solo agárralo, así que es el mismo tipo de fuentes de Google que antes, pero la familia de fuentes es Iconos de Material, digamos pero la familia de fuentes es Iconos de Material, copiar eso, mételo en la cabeza de tu documento. Por lo que aquí arriba, probablemente podrías combinarlo con éste. Sí, definitivamente podrías o podrías tener un separado no importa. Carga dos veces, y luego pegas el HTML y al igual que lo hicimos antes, así que ahí está. Muy bien, así que son sólo dos de ellos. Hay mucha opción diferente, pero dos más populares en este momento. Está bien, ya basta con los iconos y las fuentes. Pasemos entonces al siguiente video. Date prisa. Está bien, aguanta. Aguanta. Aguanta. Mira el ícono ahí. Están tocando la parte superior, no los pueden dejar así. Entonces vamos a pasar por ahora y sólo empujar el relleno. No es muy divertido ni emocionante. ¿Cómo lo vamos a hacer? Planeo hacerlo con mi, ¿cómo tenemos que hacerlo? Podría hacerlo a, si se lo hago a la tarjeta, si digo que la tarjeta estaba pendiente ahí dentro, todavía lo haré una, dos, tres veces porque tenemos tarjeta uno, dos y tres. Entonces voy a hacer el ícono y sólo lo estoy haciendo a esto porque tengo el lujo de tener sólo esos que soy, los iconos una vez en una página y eso es todo lo que estoy usando. Si estás usando son sitio pesado muy ícono. Esto se siente como una muy mala idea porque entonces más adelante en el diseño de tu sitio web estarías como, oh, voy a añadir un icono y será el relleno de la sesión en él. Entonces vamos a hacer, lo que podríamos hacer es remar y diremos el relleno en la parte superior de esto, no tengo ni idea. Pixeles. Echemos un vistazo, vas ahí. No, demasiado, 30. Está bien. Sí. Yo estoy ahí. Yo estoy ahí y una cosa que podríamos hacer sin embargo es que no hay daño en decir ahora hacer un selector compuesto, así que quiero etiquetas pero sólo si están dentro de una tarjeta. No debí haber usado tarjetas, y va a hacer lo mismo. Se va a funcionar. Pero más adelante, si usas el icono fuera de estas tarjetas, esto no va a aplicarse. Por lo que podría ser que sólo esté a prueba de futuro en sí mismo. Este es el tipo de cosas en las que pienso cuando estoy como, eso es algo realmente fácil que funciona en este momento. Eso me va a causar un gran dolor de cabeza más adelante. Está bien, ahora, este es el fin. Te veré en el siguiente video. 53. Cómo hacer un enlace oprimible de toda una caja contenedora DIV: Hola ahí. En este video vamos a pasar y hacer que cada parte de esta tarjeta sea clicable. Todo en una sola vez en lugar de agregar un texto, cada elemento separado, todo va a ser agradable y clicable, yendo a un solo lugar. Vamos a saltar y a trabajar como hacerlo ahora. Quiero que todo esto se pueda hacer clic y quiero que el icono se pueda hacer clic, el texto se puede hacer clic, todo ello clicable a la vez yendo al mismo lugar. Por lo que podría pasar y despacio pero seguro ir, podría envolver mi h2 en una etiqueta A. Por lo que el inicio ahí voy a escribir en un A. Necesita un espacio para esto todo el pre-insinuación para funcionar. Entonces necesito el espacio entre mi h2 a mi A. Entonces el envoltorio va de aquí. Pongo la etiqueta A se abre antes y después. No necesita los espacios justo ahí para dejarlo claro. A dónde más se va a ir. Se va a ir a este lugar aleatorio que aún no he decidido. Eso funciona. Se ha ido morado porque este es un enlace visitado el cual no es genial, pero lo arreglaremos. Pero puedo seguir haciendo eso por esta fuente, por esta etiqueta P. Podría hacerlo para siempre, pero es más fácil envolver todo el código en una etiqueta. Algo de deshacer, retírese. manera tan problemática. Entonces al principio de ahí hay A tag, voy a decir, inicio de este código uno, voy a envolver todo esto, ¿de acuerdo? Haga clic en el “Div” y debería resaltar, acuerdo, así que hay un principio y el final. Por lo que quiero empezar como llevo aquí. Se va a ir a hachís. Y si has conseguido lo que hace el hash, o el signo de la libra, recuerda, es solo un lugar sostén el enlace porque no tengo otras páginas. Este proyecto en particular hará otras páginas porque lo haremos. Pero eso ahora lo va a hacer todo un eslabón, que normalmente funcionaría, está funcionando, todo se ha ido morado, porque es un enlace visitado lo haremos blanco. Pero en realidad está funcionando. Puedo hacer clic en ellos todos, está todo activado. El problema es que me destrozó las cajas, te gusta, ¿qué pasó ahí? Recuerda cuando hablábamos de flexbox porque estas tarjetas usan flexbox, ¿de acuerdo? [ inaudible] decimos display flex. De acuerdo, y les hicimos 30% a estos tipos. Y lo genial de flexbox es que es solo general en una línea y luego los espaciamos uniformemente. Por lo que estamos usando muchos atributos de flex box. Y recuerdo que uno de los roles era que tus tarjetas tienen que ser hijos directos del padre. El padre dice que te flexionarás y luego estos tipos tienen que estar directamente debajo. Lo que hemos ido y hecho es que hemos atascado una etiqueta A entre la familia feliz. Códigos uno, necesita ser directamente el siguiente descendiente de los códigos. He llevado demasiado lejos lo de la familia. Tengo una terapia familiar disfuncional, terapia para nuestras etiquetas div. Entonces lo que vamos a hacer es que lo vamos a deshacer. ¿ Cómo podemos sortear eso en este caso? Lo que vamos a hacer es que vamos a decir, no necesitamos la etiqueta A para envolver a estos tres. No necesita estar alrededor de esto. Estaremos bien porque me encantaría que todo el asunto se pueda hacer clic. Pero por el momento sólo van a ser todos los ingredientes, todas las cosas dentro, y estoy bastante contento con eso. Nuestra etiqueta A, se va a ir al hash. Voy a agarrar todo eso. Pega ahí, hazlo en el lugar correcto ¿qué te vas a hacer? Ahí, vamos a tabular esto un poco. No estoy haciendo nada ahora más que tabbing. Realmente se ve bien. Entonces codifica uno dentro de ella, luego mi etiqueta A, y luego todas estas cosas. Todos estos son igualmente importantes para no dentro de los demás. Todos están en el mismo tipo de margen de lado aquí. Si le das una vista previa un cheque; y funciona. Eres como, todo es morado, no está funcionando. El color predeterminado para los enlaces que se han visitado, son morado. Eso vamos a cambiar. Entonces vamos a cambiarlo. Este es un quiz pop también, ¿estás listo? Pop quiz, tienes que tirarlo en un segundo e intentar trabajarlo por tu cuenta y luego volver a ver si te has acercado. Está bien, quiero que hagas un blanco y quería que te deshicieras de lo subrayado. ¿ Cómo lo harías? Pausa ahora y te veré en un segundo. Está bien, vuelves; hay un par de maneras en que podrías hacerlo. Si bien podrías hacerlo, puedes decir si estos códigos, plural, ¿de acuerdo? Ahí hay una etiqueta A con un h2 en ella, podrías hacerlo como una multi combinación, hay h2-s, están dentro de una etiqueta A que son códigos. Yo quiero decir que el color va a ser blanco? Todo esto es blanco. Ahí se puede ver; si es un h2 está ahí dentro, es blanco. Y puedo decir decoración de texto. Este podría ser, lo tienes, ¿verdad? Estás como, ¿cómo te deshaces de lo subyacente? Decoración de texto. Está bien. Ninguno. Ni siquiera. Muy bien, entonces la línea se ha ido por debajo de ella. No lo es, porque he hecho algo mal. ¿Qué hice mal ahí? Decoración del texto, a menudo necesito que el código ayude a asegurarme de que mi sintaxis es correcta, mi ortografía es correcta y la línea se ha ido. Está bien, para que eso no funcione [inaudible] bien aunque eso parezca bueno. Pero entonces tengo que ir a través de ella, hacer una para la etiqueta A, y un icono y entonces eso está a un tambor de distancia. Por lo que podría haber ido por esa ruta. Podría tener un par de clases diferentes. En realidad podrías simplemente decir en realidad, no necesita ser tan específico, solo A tags dentro de clases. Vamos a darle una oportunidad a eso, jackpot. Ahora lo que también podrías hacer es ir; me voy a topar con esos lotes problemáticos. Nunca quise ser morado y nunca quise subrayar. Lo que podrías empezar a decidir es que recuerden, ya veré que dice reciente en la parte superior aquí. Hicimos nuestro propio reset CSS? El de Eric Meyers, podríamos llamarlo el slash de Eric Meyers Dan Scott, porque podríamos entrar en este restablecimiento de CSS y dejar de hacer nuestra propia versión. Podríamos entrar aquí y decir en realidad, quiero que todas las etiquetas A sean, blancas por favor y no tengan subrayado. Se puede editar a esto, entonces no lo necesito aquí. No necesito decirlo. Por lo que podría encontrar que cada vez que hago una página web, nunca quiero el subrayado. Por lo que puedes dejar de hacer tu propio restablecimiento de CSS. No lo voy a guardar. ¿Te dije reset Meyer esta vez? Ni siquiera estoy seguro. Está bien. Perdón, Eric Meyers. Está bien, si lo hicieras de una manera diferente, me encantaría verlo en los comentarios. Hazme saber cómo lo hiciste, toma una pequeña captura de pantalla de cómo hiciste una obra. Y sí, así es como hice que funcionara. Podrías encontrar incluso una mejor manera y tener una buena razón para ello. Pero lo que realmente me importa en este momento es que se puede hacer clic, y es un blanco sin subrayados. El resto de este video no va a ser muy emocionante y vamos a pasar y hacerlo. Bueno, una cosa que quiero hacer sin embargo, mientras estamos aquí, empezamos a llegar a un punto en el que, no sé, depende. Podrías ser como esto sigue siendo realmente duro y no sé qué estoy haciendo. Pero si te sientes un poco menos nervioso por ello, y mirando tu sitio te gusta, y has hecho este puerto. Yo quiero que estés orgulloso. Quiero que pases y vayas realmente mira, [inaudible] hay código pasando. Estoy codificando un sitio web, hay un montón de cosas que aprender. Se puede ver que hay montones de videos que se hicieron cargo en este curso, pero ojalá, se pueda tener una sensación de desplazarse hacia arriba y abajo kickback y ir, “mírame”, entiendo cómo funciona la mayoría de eso en este momento. No la semana que viene, pero por el momento estás como, “en realidad, podría pasar y empezar a ajustar cosas o al menos hacer otro sitio de igual complejidad de éste”. No quiero que te olvides de eso. Yo quiero que estés orgulloso porque siempre hay cosas que aprender. Yo estoy bien como diseñador web. Pero hay mucha gente mucho mejor que yo. Pero no importa aunque termine un sitio web y es bastante sencillo, siempre [inaudible] estoy como, “mírame haciendo la codificación”, se siente bien. ¿ Cómo te sientes bien? Y eso es suficiente. Ahora vamos a terminar los últimos pedacitos. Voy a envolver todo el resto de estos tipos en etiquetas. Voy a copiar eso; voy a poner un cursores múltiples. Uno justo aquí, uno justo ahí, aguantando, en mi Mac, es “ALT”. Lo sentimos, en mi Mac su tecla “Opción” para dar click dos veces. En tu PC probablemente sea “ALT”. Pero recuerda, puedes hacer multi cursores. Se puede ir y comprobar qué es aquí. Puedes poner un espacio dentro, y colocarlo en, voy a Tab it back asi que es como donde yo quería estar. Tab todo esto, todos los cursores son a mano, ¿verdad? Acerca de ahí y luego cierro mi etiqueta A. Entonces lo haré multicursores y lo voy a poner en mi etiqueta A. Clausura de la A, ahí vamos. Agradable. Está bien. [ inaudible] y el navegador no lo han roto. Es todo clicable. No va a ninguna parte. Si eres como, “hombre, esto lo del hashtag no funciona”. Basta con escribir HTTP, barras inclinadas de dos puntos [inaudible] punto, obtener un [inaudible]. Ese es mi sitio. Y si ya lo sabes, te redirigirá a mi sitio, al menos parte del look, click. Asegúrate de golpear “Guardar”. Haga clic, codigo dos y luego codigo dos. Está bien, ya basta para este video y las travesías. Te veré en el siguiente video. Hola me. 54. Cómo usar un borde de tamaño de caja de Flexbox en código VS y diseño web: Hola a todos, este video es sobre box-sizing y border-box y es magicalness. Tenemos estas cajas aquí. Quiero agregar algo de relleno al interior para solo alinear todas estas cosas pero cuando hago eso, relleno agregó y las cajas van más grandes. Agregas relleno y parece hacer las cajas más grandes, raras. Vamos a agregar tamaño de caja, border-box, y mágicamente tenemos relleno, pero no se hicieron más grandes. No más minando el relleno del tamaño y ancho de las cajas. Su magia, veamos cómo hacerlo ahora en VS Code. ¿ Qué hace este mágico caja-dimensionamiento, border-box bondad? Se relaciona nuevamente con flex box. uno de sus bonitos complementos para HTML5. Tiene gran compatibilidad de navegador, y lo que significa es que podemos agregar relleno sin romper cajas. Te darás cuenta de que hemos bailado por ahí, hemos puesto relleno en la parte inferior de la etiqueta p para empujar el fondo hacia abajo. Agregamos relleno a la parte superior de nuestro icono. Agregamos relleno a la etiqueta p aquí la izquierda y a la derecha para mantenerlo alejado de los bordes. ¿ Por qué no lo agregamos a la propia tarjeta? Tan solo pon una frontera alrededor del exterior. Eso es fácil, porque lo rompe. Lo que vamos a hacer es demostrar el punto. Vamos a nuestro código. En realidad vamos a agregar un par de clases, hazlo una a la vez. Hagamos card1, card3, card3. Puedes hacerlas todas de una sola vez. Ahí hay una coma. Te darás cuenta antes de hacer un compuesto mientras que en este de aquí. Esto significa que estos tipos tienen una relación entre sí, unas etiquetas dentro de tarjetas. En tanto que esto que estamos haciendo ahora es esta coma y esto y aquello. Les gustarán las pequeñas cosas separadas. Una coma los separa. Si fuera sin las comas, estaría buscando una card3 que esté dentro de una card2, esta dentro de una card1, que no existe. Vamos a agregar relleno, y lo vamos a hacer todo el camino a solo 20 píxeles. Guárdalo, y echemos un vistazo. Se voló los bordes aquí, se fue demasiado lejos. No lo sumó al interior. Extrañamente últimamente termina con el tamaño general. Si lo hacemos aún más grande, digamos que lo sacamos hasta 50, notamos que solo se va plátanos. Dejarán de empujarse entre sí y eso no se está rompiendo demasiado mal, pero el relleno está ahí, 50 píxeles pero lo agrega al tamaño, y ahí es donde funciona border-box. Podemos decir que en realidad es agregar ese relleno, pero vamos a hacer box-size y vamos a usar border-box, y hit save. El genial de ello es que ahora lo quita de los anchos. Es sólo una manera agradable y fácil de hacerlo. Vamos a quitar las cosas del relleno, y eso hemos hecho. También después de la etiqueta p, tan limpia poco porque bailé alrededor de ella durante mucho tiempo porque siento que estás leyendo ahora. Listo para border-box. Sí. Porque lo que podrías hacer es pasar por aquí y decir realmente bien. Nosotros vamos a hacer eso y luego vamos a dejar de menospreciar el ancho. Voy a decir que el ancho es igual a menos, y puedes empezar a intentar menos a lo que añades el relleno y simplemente te escondes. Eso es lo que tenías que hacer. Arreglemos esto. Tenemos border-box, remontada border-box. Primero que nada nos deshagamos de todas las demás cosas que hicimos. Debajo de la etiqueta p, hicimos margen inferior que sí necesitamos eso. Es cartas de fondo y lo hicimos, así que hicimos margen alrededor de esta cosa. Todavía necesitamos el margen justo por encima de él. Haremos margin-top de manera diferente. Margin-top, pero no necesitamos todo el resto de esto. ¿Qué utilizamos? Utilizamos en 30 izquierda y derecha y 20 en la parte inferior. Estás como, “¿Por qué no seguimos haciéndolo así?” Porque no llegamos a aprender border-box si lo hacemos. Simplemente déjalo de esta manera y te vas a encontrar con él en Code y te vas a encontrar ese problema de igual manera, “Oye, esto solo pon relleno alrededor”. ¿ Por qué se está sumando a ella? Lo mismo con ese margen, sólo se suma a él, pero si quieres por arte de magia menos el margen del relleno fuera del ancho general de la caja, usa border-box. Vayamos a hacer eso. Ahora me estoy perdiendo un poco. Podría ser el mismo. Si acabas de poner en un atributo, va todo el camino, recuerda. El top en este caso, ¿y si ponemos sobre la etiqueta i? Padding-top 30, porque eso es lo que ponemos en este top lo aquí. Vamos a hacer este tipo y decir, top va a ser lo que acabo de decir, 30. Treinta píxeles o g píxeles. El izquierdo y la derecha van a ser 30. No uses punto y coma al final de ellos. Arriba, derecha, abajo, ni siquiera puedo recordar ahora, ¿ 20? Lo vamos a echar un vistazo. Pon eso ahí dentro. El último es de 30. Impresionante. Eso debería funcionar. Echa un vistazo, aquí vamos. Si lo guardé, tengo bonita, una forma al revés de hacerlo. Simplemente me quedé con esto un poco más tarde en el curso. Ahora, probablemente cuando meto mis tarjetas por primera vez, añadiría el relleno antes de arrojar todas las cosas en él, y sólo asegúrate de usar border-box en esas tarjetas. Puedes usarlos de forma individual. Esto podría estar dentro podría cortar eso y ponerlo dentro de todas las cartas. Lo tengo en los tres tiempos. Acabo de mantener esto separado para este video, y poco mejor. No estoy seguro de que esté ahorrando mucho tipo, pero de todos modos ¿eso tiene sentido? Espero que lo haya hecho. Sin que apague, echemos un vistazo. A las cajas sólo le dan su 30 por ciento original más este relleno. Podría menos el 30 por ciento, pero menos 30 píxeles de porcentajes es alucinante. Para mí al menos, es mejor sólo agregarla y mantener puesto border-box. Trabajo hecho alto cinco. Te veré en el siguiente video. 55. Cómo hacer un botón coloreado en código VS usando HTML CSS: Hola ahí. Vamos a hacer un botón. No un viejo y feo botón como éste. Un botón guapo como este. Ignora el encabezamiento superior, lo arreglaremos en el siguiente video. Pero tenemos un botón, se puede hacer clic, y tiene un bonito fondo. Saltemos y trabajemos como hacerlo. Alerta de alerón, es solo una a-tag con algo de relleno, pero hagámoslo juntos de todos modos. Para hacer nuestro botón, lo que podría estar realmente inclinado a hacer es averiguar dónde lo vamos a poner. Yo quiero ponerlo justo después de este p-tag aquí. Ahí está, ahí herobox1, aquí está mi p-tag. Entonces justo después, voy a poner en lo que suena sensato como botón. Voy a dar clic aquí y golpear “Guardar”. Voy a previsualizarlo y conseguimos esa cosa. Ahí está el botón de formulario. Eso no es lo que queremos aquí porque queremos que se vea como nuestro simulacro aquí arriba y es demasiado difícil de hacer usando ese botón. Puedes formatear bastante para que se vea así, pero es más fácil simplemente comenzar con una a-tag para darle algo de relleno y color de fondo. Entonces no vamos a usar el botón. Vayamos al botón Eliminar. Botón Adiós. Todo lo que queremos es una etiqueta a. Hemos usado eso montones de veces. ¿ A dónde va a ir? Hagámoslo realmente para ir a algún lado. Seguro que estás harto de solo poner hachís. Entonces hagamos nuestro Archivo, Nueva página. Voy a salvar este y a esto se le va a llamar mi página de prueba. Podemos enlazar a ella desde nuestros enlaces ahora. Eso va a be.html. Voy a ponerlo en un dicho h1: “Yippy lo hicimos. Nueva página”. Voy a cerrarlo. Entonces lo hice, lo cerré, y voy a enlazar con él ahora. Entonces, ¿cómo lo llamamos? Página de prueba. En realidad va a algún lugar. ¿ Qué va a hacer este botón? Se supone que vaya a nuestro Libro en línea. Entonces entre las a-tags, vamos a decir Book Online. ¿Yo quería mayúsculas? No. Entonces estamos usando el caso del título y así es como se ve en el navegador. Estás como, “¿Cómo es eso mucho mejor que el botón feo real?” Es fácil de peinar como uno. Vamos a hacer esos conceptos básicos. Depende si fuiste y recuerdas antes que peinamos nuestra a-tag potencialmente en la cabeza o en el CSS, lo que llamamos el restablecimiento CSS. Eso hubiera sido útil, pero no lo hice. Voy a decir, en realidad no voy a ser realmente específico. Voy a ser bastante amplia. Voy a decir todas las a-tags aquí arriba. ¿Por qué está en la parte superior? Porque siento que es un trazo realmente amplio por lo que debería estar en la parte superior. Voy a decir, bueno a-tags ahora necesitan tener un color de blanco. Esto probablemente va a volver y mordernos en el culo. Siempre parece suceder cuando hago estilo libre así. Color y vamos a decir que la decoración del texto está ajustada a ninguna. Eso nos va a poner en marcha, esperemos. Ahí vas. Nada va realmente a casa. Muy bien, démosle un color de fondo y coloreemos el texto. En realidad lo que podríamos hacer es empezar a crear nuestra propia clase porque no vamos a configurar todas las a-tags para que sean botones. Lo que voy a hacer es, justo después de las comillas aquí, voy a dar un nombre de clase de mybutton. Por aquí, voy a decir que mybutton hace algunas cosas. Eso es totalmente inútil ahora. ¿ Podemos deshacernos de ella? Podemos. Porque pongo todas las a-tags ser blanco sin decoración de texto. Guarda un pequeño cheque rápido y asegúrate de haber trabajado cualquier cosa. Sí, perfecto. Mybutton necesita un periodo frente a él y le vamos a decir a este botón “Quiero un color de fondo de, déjame usar el blanco”. Se va a grabar. Asegúrate de que haya punto y coma al final y asegúrate de guardarlo todo. Ahí vas. Está destrozado. Si no puedes ver nada, es o no has guardado en absoluto, o no hay texto en tu botón. Si acabas de dejar esto pensando que volverás a eso más adelante, y como no se puede ver o no hay cosas que envolver, necesita algunas tomas en la a-tag. La otra cosa que podría ser, dependiendo de dónde estés viendo esto y sí, realidad vamos a lidiar con ello en el siguiente video. Pero si todavía estás gastado aquí y estás atascado ahí es posible que tengas que hacer display inline-block o display block. Vamos a hablar de esto en el próximo. Pero eso podría estar causando problemas también. Entonces haz eso, eso podría arreglar el tuyo. El nuestro está funcionando bien. El problema con el nuestro es que el color del texto es blanco también. Entonces vamos al color del texto de, utilizaremos este top aquí para formar nuestro gradiente. Eso es lo genial de VS Code es que mira a través de tu CSS y dice: “Oye, ya has usado estos antes. ¿ Quieres volver a usarlos?” Yo soy como, “Sí”. Ahorra tiempo para echar un vistazo. También me gustaría que fuera Playfair. Entonces familia de fuentes, vamos a ser play-fair. En realidad no puedo recordar toda la sintaxis para ello, así que voy a ir a robarla. Voy a usar la función Buscar, que es Comando F en un Mac o Control F en un PC. Voy a teclear “Play”. Hay mucha jugada. Ahí está Playfair. Entonces la razón por la que no puedo recordar, probablemente podría adivinar Playfair, pero nunca puedo recordar si es en dos palabras o una palabra. Recuerda si es en dos palabras, se pone estas citas a su alrededor. Si la fuente que estás usando no tiene dos palabras, no tendrá esas citas a su alrededor. Entonces te va a cagar. Echemos un vistazo ahora. Es bueno y bonito. Vamos a ponerle un poco de relleno a su alrededor. Entonces haremos relleno. Ahora, vamos a hacer nuestras cosas de atajos. Vamos a usar un acolchado riguroso y vamos a hacer la parte superior y la inferior. Creo que ya hemos cubierto esto antes. Entonces si pones una fuente vieja va arriba, y estamos usando 11 y 25. Por lo que píxeles para la parte superior, 25 para la derecha. Por lo que va en el sentido de las agujas del reloj empezando por la parte superior. Podemos ir todo el camino. Pero porque es muy común tener el mismo eje x e y, por lo que las tapas y los fondos son los mismos en la izquierda y la derecha es la misma. No necesitas escribir toda la repetición extra que hay ahí dentro. Se asumirá que si hay dos, te refieres arriba y abajo para el primero e izquierda y derecha para el segundo. Eso debería funcionar. Aquí vamos. Necesitamos un poco de margen por encima de él, pero esto no va a funcionar. Hablaremos más de ello en el próximo video. Margen superior. Va a tener 10 píxeles, porque sé que lo vas a probar. No va a funcionar. Me enloqueció también cuando al principio cuando estaba funcionando lo que eso hizo. Entonces, no te preocupes por eso por el momento. Vamos a volver con él. Es algo que ver con la bondad de los bloques en línea de visualización. En realidad, lo voy a separar para otro video, pero si solo quieres arreglarlo, agrega el margen y solo escribe “display”. Porque sé de todos modos todos van a pasar al siguiente video. Entonces display, ve inline-block. Si estableces eso y ahora haces el margen, funcionará. Pero hablaremos de ello con más detalle en el próximo video. Está bien. Entonces tenemos relleno, te tenemos, tenemos eso. Eso es todo lo que vamos a hacer por este porque tenemos un botón. Hacemos clic en él y funciona. Va ahí tu nueva página Yippy. Yippy nueva página par. Desapareció, espera. Sí. ¿Qué vamos a hacer? Eso es todo para este, solo podrías agregar algún margen a la parte inferior de la p-tag, pero no funcionará hasta la parte superior. Vamos a hablar de elementos en línea y en bloque en el siguiente video para saber realmente lo que estábamos haciendo cuando estamos escribiendo en display inline-block. Hagámoslo en el siguiente video. 56. Por qué no puedo añadir margen o espacio adicional al botón superior de mi etiqueta: en línea vs. elementos en bloque: Hola gente frustrada. No podemos agregar margen a la parte superior de nuestro botón. Hemos estancado una etiqueta a y queremos empujarla ya sea desde el margen superior o desde el margen inferior, pero no está funcionando. ¿Por qué no funciona? Se debe a que la propiedad display está establecida en línea. La versión rápida de este video es solo poner display inline-block en tu botón y asegúrate de guardarlo y luego podrás hacerlo. Anda por ahí para todo este video porque vamos a hablar de las diferentes propiedades de visualización, bloque en línea, y vamos a hacer algo de CSS de lujo donde conectamos un par de clases y una etiqueta juntos. ¿ Estás listo? Añadamos margen superior a nuestro botón. Recuerda en el último video, tuvimos problemas poniendo margen por encima de esto y tiene algo que ver con su propiedad de display. Hemos creado este pedacito desechable de HTML. No tienes que hacer esto. Puedes jugar si quieres. Es sólo un simple documento HTML ticks. Hay un montón de propiedades de visualización. Vamos a hablar de las principales que te quedarán como principio, diseñador web, y que está en línea y en bloque. Hay algunas cosas que se muestran por bloque por defecto. Lo que eso significa es que veamos una etiqueta p con algún texto, en realidad, vamos a añadir un texto fragmentado. Lorem, pongamos a 50. Otra es h1 que es por defecto lo que se llama un nivel de bloque, y todo esto realmente significa es, vamos a agregar un par más. Voy a poner en una lista desordenada, que es una lista de viñetas con algunos ítems de lista, pero quiero 10 de ellos. Dentro de esto, voy a poner artículos. Estos son todos a nivel de bloque. Lo que eso significa es que si miro esto, puedes ver que ese tipo empuja a ese tipo hacia abajo a su propia línea. Este es su propio bloque de cosas. Este es un tipo tan grande como cuadra también. Todos estos tipos que corren cuadra pequeña, se empujan unos a otros. Lo contrario para estos chicos están en línea. Son útiles para cosas como, digamos una etiqueta a. Voy a poner una etiqueta, y ésta va a hachís, y va a ser mi enlace. Es un inline. Lo cual nos está dando ese problema. La diferencia entre en línea es, puedes ver, no alejó a todos los demás. Juega bien con los demás. Funciona en línea, mientras que bloque dice, “Tienes que estar en tu propia línea”, propia línea, en líneas, misma con una imagen, si necesito agregar una imagen aquí IMG, las fuentes, imágenes, slash ponen esa en y le dan una altura a menos así que no es demasiado grande. Se pueden hacer alturas en el HTML, lo cual es raro. Está en línea para que puedas cambiarlos. Se puede decir: “En realidad, me gustaría aquí arriba mi estilo”. No estoy usando una hoja CSS para esta en particular solo para ahorrar algo de tiempo. Voy a decir: “Quiero que las imágenes sean propiedad de visualización sean bloqueadas”. Bloqueas las cosas. [ inaudible] haciendo lo suyo. Enfriar. Una de las propiedades para, digamos, una etiqueta aquí, porque está en línea por defecto es que no se puede poner una altura, se puede hacer izquierda y derecha. Puedo decir en realidad quiero una etiqueta que tenga un gran margen a la derecha. Eso funciona perfectamente, 200 píxeles. Echemos un vistazo, tiene un gran margen a la derecha, pero no puedo hacer un gran margen viejo a la parte superior, que ya conocemos por nuestro último video. Vayamos 100 pixeles a la parte superior, por favor. No hace nada, no lo empuja unos 100 píxeles hacia abajo. Pero lo que se puede hacer es que se puede decir. “ En realidad, una etiqueta me gustaría que dejaras de estar en línea y quiero que seas un display”, no quiero que sea bloque porque block en este caso no haría lo que yo quiero que haga. Dios, hombre, teniendo problemas. Vamos. Ahí vamos, porque está empujando hacia abajo a su propia línea, y tú dices: “En realidad es lo que quiero. Yo quiero un poco del entremedio”. El entremedio es, quiero que te mantengas en línea, pero también seas un poco bloqueoso. Hace un poco de ambos. Básicamente, lo que va a hacer por nosotros es, va a mantenerse en línea. Sigue en esa misma línea que nuestro párrafo. Deshacernos de la etiqueta de imagen. Está haciendo que todo parezca un poco confuso. Permaneced en este párrafo, pero permítanme hacer cosas como golpear o margin-top. Todos tienen su capacidad natural. Diga estos elementos de la lista aquí. Recuerda que estos chicos realmente quieren estar en sus propias líneas que se llaman nivel de bloque. En realidad se les llama, ¿cómo se llaman? Tengo uno especial para ellos. Enumerar elementos. Vamos a decir, “Muestra, por favor”. Tienen este llamado, ¿dónde está el elemento de una lista de uno? Que hace lo mismo que el bloque, con unos pocos pokes extra. En lugar de ser bloque, quiero que estés en línea. Echemos un vistazo a lo que hace. Ve esos pequeños elementos de lista, todos están apilados en la misma línea ahora, así que habrá un montón de veces en las que necesitas dejarlo como predeterminado. Aunque de vez en cuando, eres como, “En realidad sólo se parte de la pandilla”. Quiero un h1 con la etiqueta p justo al lado porque he hecho algunas cosas de diseño cool y necesito implementar eso. tanto que los hittings' realmente quieren estar en su propia línea porque tienen elementos de bloque. ¿ Eso ayuda a recapitular? A tags por defecto están en línea, lo que significa que permanecen en la misma línea que todos los demás. Etiquetas P, h1s, bloque, hay propiedad de bloque de visualización, por lo que todos podrían estar en su propia línea. Si quieres un poco de ambos, inline-block es un gran poquito de ambos, poco de inline, un poco de bloque, y principalmente lo que nos va a permitir hacer ahora es que vamos a volver a esta página. Doble click ti, doble click ti, arrastrarlo por ahí, vas por aquí te voy a decir a mi, ¿dónde estás? MyButton. No lo voy a hacer por todos ellos porque podría decir en la parte superior aquí quiero que todas las etiquetas sean inline-block, pero no quiero hacer eso por todos ellos. Yo solo lo voy a hacer por esta y tú llegas a ser inline-block. Ahora, llego a hacer un margen en la parte superior. Vamos a ponerlo, no tengo idea, 20 píxeles, echemos un vistazo. Ahora éste es un genio. Este no está funcionando. Guardar todo. Para echar un vistazo. Todavía no funciona, MyButton. No está funcionando para esa clase aplicada a mi etiqueta a, así que lo que voy a tener que hacer es decir, “En realidad, quiero que haya una etiqueta con MyButton aplicada”. Esto aún no va a funcionar. Esta es una buena información jugosa. Si agarro a estos dos, y digo: “Tú, me gustaría que hicieras eso”. Probablemente aún no va a funcionar, todavía no. Genial, porque lo que está pasando es, lo que está buscando en términos de la sílice que acabo de hacer, es decir, “quiero encontrar un MyButton dentro de una etiqueta”. Pero no está dentro. Tengo una etiqueta que es MyButton. No está dentro de ella como lo hemos hecho en el pasado donde tenemos un h1 que está dentro de una caja de héroe que está dentro de mi principal no dentro de ella, en realidad es solo una etiqueta con una etiqueta de MyButton. ¿ Cómo arreglas eso? Es raro. Espacios te muestra esta miga de pan de MyButton está dentro de la etiqueta a. tanto que si me uno a ellos, así que no hay espacio entre ellos, ve una, una etiqueta que es un MyButton. Aplica las cosas. Vamos a guardarlo, a ver si funciona. Todavía no funciona. Vamos. Todavía no funciona. ¿Qué más hacemos? Tenía un ligante cerebral ahí y lo estoy dejando en el curso porque es realmente útil ligante cerebral. Pensé que sabía lo que estaba haciendo. Yo estaba como, “Sí, así que solo hacemos esto y podemos unirnos a ellos. Por eso estaba rota y aún no funcionaba”. El motivo por el que no funcionaba, siempre ajustaba esto. Yo soy como, “Hombre que funciona”. Estaba comprobando la sintaxis. El motivo por el que no funcionaba código era perfecto. Fue porque hicimos este pequeño curso de tiro abajo. Abro esto, ¿recuerdas el pequeño probador? Lo abrí y lo probé en el navegador, y había hecho una conexión entre VS Code y esta página. Entonces simplemente lo cerré y me fui a mi negocio y seguí con éste y lo cerré. Lo que olvidé es que esa conexión, esa conexión en vivo se rompió entre mi página original aquí y VS Code porque me fui e hice algo más, sólo se puede atar a una a la vez. Ahora, me estoy regateando en este ir, rascando mi cabeza diciendo: “No sé cómo funciona esto”. Eso es porque fui a esta otra página, previsué ahora voy a tener que cerrarla, abrirla de nuevo para que la conexión y conexión entre el sitio existente. Ahora me lo va a mostrar, pero conmocionado, estoy. Ahora funciona. Aprendimos algunas cosas. Yo quiero envolverlo y quiero dejarme en la maldad ahí dentro solo, te toparás con ese problema. Es una de esas cosas que nos gustan, “Simplemente no está funcionando, me voy a la cama”, y te despiertas por la mañana y empezará a funcionar como, “No estaba despertando anoche, te lo prometo”. Es porque has cerrado y reabierto eso. Aprendimos un par de cosas. Aprendimos sobre las exhibiciones. Mostramos bloque, que es nuestro material a nivel de bloque. Por eso establecemos etiquetas de laboratorios a nivel de bloque como esta cuando he estado hablando. Tienes en línea, que son cosas como nuestras etiquetas de imagen y ahora unas etiquetas, son muchos atributos en línea, elementos, pero hay algunos de ellos hacen un poco de ambos. Eso es lo que queríamos en este caso. Quieres que MyButton me permita hacer algún margen en la parte superior. La otra cosa bonita que arreglamos fue este otro poco de forma de escribir CSS. Hemos hecho comas. Lo hicimos aquí. Dónde estamos, comas, dijimos, “me gustaría que apuntes card1 y card2 y card3". comas hacen las andadas. Si pones un espacio entre las cosas, estoy tratando de encontrar uno que tenga un espacio, ahora, tiene que haber uno. ¿Tenemos siquiera uno? Nosotros lo hacemos. Quiero etiquetas p dentro de tarjetas, y aplico estas cosas, pero sólo si hay una etiqueta p dentro de ella. Este de aquí es, me gustaría una etiqueta con esta clase aplicada a la misma. Se puede usar eso. Se le aplica literalmente está atascado justo al lado. Se aplica a un costado. No hay espacio, espacio malo. También aprendimos que necesitas reiniciar la vista previa de tu navegador si saltas entre diferentes proyectos. Buena suerte después perderse frente a la gente. Lo usarás como experiencia de aprendizaje, así es como lo llamaré. Al siguiente video. 57. Cómo añadir esquinas redondeadas a un botón o etiqueta div en HTML y CSS: Hola a todos, este video va a ser todo sobre radios alrededor de las esquinas de los botones. Pero lo haremos a las imágenes y lo haremos a las etiquetas div también. Haremos radios grandes y feos como este y bonitos sencillos como éste, bonitos y pequeños. Además haremos las aleatorias como ésta o esta o esta te dan la idea, esquinas redondeadas. Este video tiene como cuatro minutos de duración pero en realidad solo agrega el radio de frontera a tus botones y ya terminarás. Pero si quieres bajar la carga completa, veamos hasta el final. Para agregar pequeñas esquinas redondeadas a los bordes de nuestras etiquetas de botón o div o cualquier caja, es súper fácil. En el código VS, vamos a encontrar mybutton y voy a decir que tienes un radio de frontera de lo que quieras. Voy a usar pixeles y voy a decir, quiero que sean dos pixeles y eso hará las cuatro esquinas. Echemos un poco de mirada y miren, tengo pequeñas esquinas redondeadas. Hagámoslas un poco más obvias solo para que puedas ver, 12 esquinas redondeadas gigantes. Puedes hacer rincones individuales. Te mostraré un par de cosas que hacer con el radio fronterizo mientras estamos aquí. En primer lugar, no importa a qué se lo aplique, siempre y cuando sea una caja y tenga bordes. Qué tenemos, estas tarjetas; tarjetas 1, 2, y 3. Funcionarán, tarjetas 1, 2, y 3. Te pegas. Es card1 esquinas redondeadas. Esta imagen un poco más extraña. Está en una caja. Pero si lo hago en herobox2 que es la caja en la que se sienta mientras que herobox2. Si se lo hago a esto, no va a funcionar. El cuadro es pero luego está esta imagen dentro de la caja. Tenemos que hacer es decir, si hay una imagen, si está dentro de herobox2 entonces realmente la aplicas a la imagen. El único motivo por el que lo estoy convirtiendo en una clase compuesta es solo porque no quiero hacerlo a todas las imágenes del documento. Eso podría gustarte. Imagen dentro de herobox2. Hazlo a todas las imágenes, herobox2. ¿ Está aquí en herobox2 o solo estoy inventando nombres a cosas? Eso va en hero2, se llama herobox2. Aquí vamos. Eso es todo, podría ser cualquier cosa. Entiendes la idea. Otra cosa que puedes hacer con el radio fronterizo es que acabamos de hacerlo para las cuatro esquinas, como hicimos con el relleno. Puedes usar cualquiera que los haga todos, dos que hace arriba e abajo, izquierda y derecha. Podría hacer 12 y digamos tres o cero. Hagamos cero para arriba e abajo para que tengas el primero. Entiendes lo que quiero decir, difícil de explicar. Arriba a la izquierda es la primera, luego ésta se salta. Lo consigues. Sé que lo entiendes, no puedo explicarlo. Eso es lo que eso hace. Si quieres hacer cuatro así que arranca en la parte superior izquierda, da la vuelta la siguiente va a ser tres o seis pares, y entonces la siguiente va a ser 100. Se va a pasar por todos estos. Ahora, lo que termina pasando por 100 es, que en realidad no son 100 píxeles. Va y tan lejos como puede así que es lo más lejos que puede. Puede ser 1000 y no importaría. Puedes usar eso a tu favor. Yo solo puedo hacerlos todos 1000 pixeles y te da esa caja de forma redonda pálida porque solo trata de ajustarla hasta que entra en un círculo y luego no puede ir más allá. Puedes hacer trucos aseados con él. Podrías ir a cero píxeles, 1000 y 1000 y luego 0. ¿ Está bien eso? Aquí tienes. Puedes hacer pequeñas formas interesantes con él. A ti te llega la idea sin embargo. Voy a poner en dos píxeles porque este justo como verdadero sutil como pequeño borde en él. Eso es radio fronterizo, amigos míos. Agradable y fácil, pero lo he estirado por unos minutos. Pasemos al siguiente video. 58. Cómo añadir una sombra paralela css a un botón de sitio web con etiquetas div y encabezados de fuentes de texto: Hola a todos. Este video es todo sobre sombras caídas. Deja sombras, deja caer sombras. Apagado, encendido, apagado, encendido. El problema conmigo es que me gusta mi sutil sombra de gota, así que es un poco más difícil maquetar en pantalla así que toggled entre ellos te hacen volver loco. Pero lo haces bien. Coloca sombra en textos ya sea en botones o hazlo en grandes etiquetas div viejas, es una extravagancia de sombra de gota. [ inaudible] ahora y resuelve cómo hacerlo en CSS. Empezaremos agregándolo a nuestro botón. Tenemos nuestro botón ahí está aquí, no está ahí, ¿dónde está? Aquí está éste de aquí. Al etiquetar href en nuestra clase llamada “mi botón”, ahí está mi botón y todo cuando lo haces es agregar box-shadow lo cual es raro. Caja-sombra. Funciona la sintaxis. Ahí hay x, y, desenfoque, y luego color. No se puede simplemente poner una x e y Se puede decir en realidad que quería ser cinco píxeles a la derecha y luego quiero cinco píxeles abajo. No pones comas. Basta de poner espacios. Simplemente asume eso, puedes dejarlo ahí. Simplemente puedes poner una sombra de gota, poco abajo y a la derecha de ella. Echemos un vistazo. Lo ves ahí dentro. Básicamente, lo que está usando es realmente difícil y logrará que el editor haga zoom y se puede ver la cosita rosada ahí dentro? Es porque está usando el mismo color que mi texto. En este caso, voy a necesitar agregar un color, que es el tercero. Voy a decir negro. Aquí vamos. Puedo añadir otra porque eso es como una sombra de gota, fea. Lo que queremos es desdibujarse un poco, y así x, y entonces la tercera va a ser borrosa. Voy a decir que me gustaría desdibujarme por cinco píxeles también. Simplemente le pone una borrosa. Pero también se puede hacer con las sombras de gota como hemos usado el negro. El negro es genial. Pero si hago clic en blanco y negro para eso con color lo recojo aquí, quiero jugar con la opacidad. Voy a usar un color RGBA solo para bajar la opacidad para que simplemente no sea tan violento. Entonces de nuevo, creo que es un gran botón gigante. Podría gustarte. Prefiero realmente simple así, no me gusta nada en x Esto es lo que hago normalmente. No tienes que hacerlo. Pero, algo como esto me da un bonito como tan cero a través, así que sólo sale por el fondo. Tiene un poco borroso muy corto y la opacidad baja baja. Es como el 22 por ciento. Démosle una prueba a eso y veamos cómo se ve. Al igual que un pequeño botón sutil y a veces lo necesitas. Creo que esto es bastante claro que es un botón, pero muchas veces diseñaré algo que simplemente no parece un botón. Tienes que darle algunas sombras de gota solo para que sienta que se puede hacer clic. Ahora, lo hemos hecho por este botón aquí. En realidad no estamos por un botón. De verdad acabamos de hacer por una etiqueta. Puedes hacerlo por cualquier etiqueta. Digamos h1. Agarremos todo esto. Copiarlo. Entérate h1. Correcto amigo, está aquí, y pegas. Tenemos lo mismo y lo enviamos a la cuadra. Hemos hecho sombra de caja. Sombra de caja va a funcionar bien para las cajas. El texto va a funcionar bien para la sombra de texto, ya lo sabes. Aquí vamos. Ahora, ve ese poco sutil [inaudible]. Lo pondré muy alto, así que si estás viendo y la calidad no es genial, y voy a poner hasta un 90 por ciento se puede ver verdadera sombra de gota fuerte. Caja para cajas, texto para sombras de texto. Voy a volver a mi simpática sombra de gota sutil. ¿ Qué más queremos hacer? Lo hemos hecho por nuestro a tag, lo hemos hecho por nuestro h1. Lo haremos por nuestras tarjetas también. Yo voy a hacer lo mismo. Tarjetas 1, 2, y 3. Ahí hay 1 y 2. No quiero aplicarlo a las tarjetas plural ni a la recapitulativa porque va a estar justo por fuera. Se puede ver que todos estos tipos tienen una sombra de gota y no es probablemente lo suficientemente fuerte que ni siquiera para mí. Voy a pasar y en realidad empujar esto hacia abajo a izquierda y derecha. Yo me voy, tal vez. Ni siquiera lo sé. Vamos a enloquecer 10 y vamos a tener un borrón 10. Ojalá, si la opacidad es lo suficientemente baja para la Tarjeta 1, probablemente, la distancia para esto es demasiado alta. A lo mejor con un desenfoque, pero cinco. Ya puedes seguir adelante. Yo sólo voy a ir y venir hasta que esté contento con la tarjeta. Esa franja blanca por el exterior molesto. Yo lo he estado ignorando así que en realidad es de mi imagen lo que hice. Acabo de hacer una mala imagen. No se puede deshacer de. Tengo que entrar y golpear a ese JPEG. A mí me gusta esa. Hagámoslo por todos ellos. Copia. Enfriar. Suelta sombras en todos estos tipos. Se ve bien. Ahora una cosa te voy a mostrar aunque es que hemos hecho lo básico y hay más. Necesitas prepararte para la cantidad de drop shadow que puedes hacer. He ido a w3schools.com/. Ahí se puede ver la URL. Lo pondré en el texto vía proyecto. Está bajo sombras caídas. Si quieres echarle un vistazo, hay algunas cosas terribles que puedes hacer. Simplemente pasa por toda la sintaxis diferente. Se puede hacer sombra de gota. Hay un borrón a su alrededor. Puedes ver, si pones 0, 0, es borroso alrededor del exterior si necesitas eso. Podría ser bueno si tienes texto encima de una imagen. ¿ Qué más tenemos? Múltiples sombras. Mira eso. Se puede poner una coma y poner dos sombras. Se ven muy similares, esos dos colores. Pero, de todos modos, se te ocurre la idea. Echemos un vistazo a esto. Ahí hay una sombra más otra sombra. Se puede poner una frontera alrededor del exterior. Hay montones. ¿Se pone peor? Sentí como si recordara haber mirado esto yendo. Están mal. Sepan que hemos cubierto unos pedacitos de ella, pero no todo el asunto. A mí me gusta esa sombra de caja. No tanto de un fan de ése. Haremos el flotador en un poquito y vamos a ver pseudo-clases en un próximo video. No del todo siguiente, [inaudible]. Eso es todo. texto, sombras de caja. Va x, y, desenfoque, color. Eso es todo. Te veo en el siguiente video. 59. Cómo hacer copia de seguridad de tu sitio web mientras lo estás construyendo: Oigan a todos. Vamos a ver cómo hacer copias tu sitio web en caso de que todo salga horriblemente mal, necesitas restablecerlo, o te hackean, o tu hackeo tú mismo rompiéndolo. Hay una forma oficial donde se hace automáticamente todos los días. Si estás usando Bluehost, se llama CodeGuard. Es una cuota cada mes, pero se encargan de todo. Te lo envían como archivo zip, solo puedes reinstalarlo, retroceder a una fecha diferente o finalizar. Te mostraré el cavernícola camino para hacerlo. Acabas de hacer una copia de seguridad, básicamente solo enrollarlo en un zip, dale una buena cita, y tienes dos formas de respaldarlo. Echemos un vistazo a cómo hacer ambas. Hay dos formas de hacer copias de seguridad de su sitio. Ahí está el camino cavernícola y luego está el camino automático, y probablemente solo hagas ambas cosas. Mi forma cavernícola es solo hacerlo localmente tú mismo manualmente cada vez que tocas tu sitio web. Eso es lo que hago. Mi proceso es este, me enteraré de escritorio. Iré como un juego, a punto de meterme con los sitios. Por si acaso lo rompo todo, lo que hago es seleccionarlo todo. Doy click en la parte superior, mantenga pulsada Mayús, haga clic en la última, haga clic con el botón derecho en ella. En un Mac es comprimir, vale, en un PC se le ve y luego hay como una carpeta zip. Si puedes resolverlo, echa un vistazo a cómo comprimir un archivo en tu plataforma. Tengo el zip aquí en mi Mac. Lo que hago es llamarla la fecha, así que archiva y va a ser la fecha al revés. Hoy es el 19. Cuál es el día de hoy, es el junio, ni siquiera sé qué fecha es hoy. Creo que el 19, 20, creo que es hoy. Ahora, sé que los estadounidenses lo hacen al revés, pero necesitas hacerlo de esta manera. El 20 de la sexta, 2019, significa que cuando haga otro día, digamos que es la próxima semana. Está en el mes y lo comprimo. Hice lo mismo y acabo de fijar la fecha está en así que sigue siendo este mes, pero es el 30. Significa que se pegan Alfa numéricamente. Si hago otra, lo haces bien. Voy a pensar que es típicamente lo que estoy haciendo aquí. Diecinueve dice, es más tarde en el año, es casi el final del año. Significa que el de abajo siempre es el último. Sé que cuando estoy mirando las copias de seguridad, las puedo ver en orden cronológico, tan nuevas, segundas más nuevas, más antiguas. Te mostraré un poco más en la práctica. Dónde está uno de mis archivos, uno de mis sitios web, sí, éste de aquí. También ponlo en una carpeta Zold, que hablaré en un segundo también. Se puede ver este es un sitio web antiguo. Sólo trataré de imaginar cuando haya recordado que tengo y se puede ver ahí que es un respaldo realmente viejo y este es uno nuevo, este es uno nuevo. Esto es realmente útil porque es 2019 ahora y puedo decir, este es uno viejo. Hay uno de más temprano y esto significa que puedo volver atrás. A veces solo saltas a un cambio rápido y luego subes el sitio y luego te vas y después te das cuenta de que has destrozado alguna otra página. Se puede retroceder. Zold, te mostraré lo que hago Zold. Escritorio, Proyecto 2. Siempre pongo las copias de seguridad, en su lugar bajo archivo, las pongo en algo llamado Zold. Zold acaba de ser viejo con una Z al frente, así que termina en la parte inferior de tu lista alfanumérica, ya que estaba en la parte inferior, y luego, haré mi pequeña cosa de archivo y luego los tiraré ahí cuando termine, pon el fecha con ellos y luego sólo los mantendré en Zold. Sí. Me pongo un poco raro organizacional por cosas así. Lo lees en. Esa es la manera cavernícola. la forma automática, debes hacer ambas cosas. Nunca confío en ninguno de ellos. Bluehost tiene un servicio bastante cool, donde están sus Bluehost. Ahí estás. Este es tu panel de control cuando inicias sesión en Bluehost. Si estás usando una empresa de hosting diferente, todos tienen algo similar. Bluehost llama a esto, tengo un par de nombres por alguna razón, pero si tienes un mercado, es una solución de pago. Esto se llama, vamos a ir a los Complementos. Sí, Complementos y esto se llama Bluehost CodeGuard. Ya lo he visto referido como un pro de respaldo. También es un costo. Es casi tanto como mi hosting. Tienes que decidir si esto es adecuado para ti. En tu escenario, tal vez solo seas feliz haciendo el estilo cavernícola, pero tal vez quieras este bit extra y solo se suma a tu cuenta mensual. Gracias Bluehost. Recuerda, si no te has inscrito en Bluehost, puedes ir a bringyourownlaptop.com/blue y eso te va a llegar y obtener un descuento en ello y yo consigo un pequeño porcentaje de tu primera Regístrate, no cuesta costo extra que arrendas, pero sólo un recordatorio. Eso es todo, y sólo espero a que se cargue mi foto. Bastante orgulloso de que [RISAS] Estoy de este lado, mírame. Eso es todo. Te veré en el siguiente video. 60. Reutilizar una clase de botón en la navegación: Oye amigo, simpático y sencillo. Hemos hecho este precioso estilo de botones que queremos reutilizar para nuestra navegación, para cambiarlo de esto a esto. Entonces lo vamos a reutilizar y vamos a añadir un poco de extra solo para espaciarlo. Es bastante sencillo. Vamos a saltar y hacerlo. Está bien, así que quieres repetir nuestro trabajo de fantasía que hicimos aquí abajo a lo largo estos pequeños botones de aquí abajo además de hacer un poco de extra para separarlos. Entonces para reutilizar nuestro estilo, vamos a abrir VS Code. Nosotros vamos a apenas arriba por aquí. Acabamos de poner en esto básico para empezar, ¿recuerdas? Vamos a teclear, necesitamos tres enlaces, así que necesitamos unas etiquetas. Ahora podría empezar a escribirlos todos. Te voy a mostrar una cosita genial. Entonces cuando se les aplicó unas etiquetas con mi botón. Entonces mientras estén unidos, eso dirá que voy a tener una etiqueta con mi botón colgado. También quiero tres de ellos por favor. Retorno y cola. Voy a tener mi cursor múltiple. Ahora bien, no tengo PC, tengo un Mac. En mi Mac, es opción de comando y solo uso mi flecha abajo e hice múltiples cursores. El tuyo será Control Alt en un PC. Yo sólo voy a tener un hachís dos todos estos tipos. Ahora necesito texto, no puedo recordar qué era, ¿qué era? Teníamos, alejar. Fue libro en línea sobre en contacto. Entonces puedo hacer eso, reservar en línea sobre yo sería tiper realmente rápido si puedo deletrear. Yo lo cerré, traté de impresionarte con mis atajos. No funcionó. Fue un gran fracaso. Estoy escribiendo bastante rápido. Vamos a comprobarlo en el navegador. Ahora porque he ido y almorzé entre este video y el último solo voy a apagarlo y volverlo a encender solo para asegurarme de que no vuelvo a encontrarme con el mismo problema. Está bien, y no actualizando. Entonces, adelante. Entonces acabamos de reutilizar la misma clase por aquí, pero quería hacer algo ligeramente diferente. Yo quiero que haya un poco más de brecha entre ellos. Entonces lo que voy a hacer aquí es que voy a decir en realidad me gustaría si aparece ese boton.my, si está dentro de un nav. Entonces recuerda, espacio significa esto dentro de esto. Yo quiero que hagas algo y tal vez un poco de margen a la izquierda, quiero izquierda. Sí. Izquierda. ¿Cuántos pixeles? 30 píxeles. Así que mira un poco, genial. Entonces no quería que ambos lados obviamente, ese es el derecho, ese es el lado izquierdo está un poco ahí, un poco ahí y en realidad hay cosas colgando por aquí. Hay un margen por ese lado, pero no está haciendo ninguna diferencia en mi diseño, así que estoy feliz. Está bien, así es como reutilizarla. Lo que vamos a hacer en el siguiente es que lo vamos a personalizar un poco. Bueno, vamos a personalizar un enormemente por venir. Vamos a bajar los menús y todas las cosas geniales. Sí, así es como reutilizar una clase que has hecho más añadir un poco de extra. Muy bien, siguiente video. 61. Proyecto de clase 04: botón personalizado: Se lo puede decir por el nombre [inaudible]. Es otro proyecto de clase. No te preocupes, esto es divertido. Yo decirlo no lo hace cierto. Vamos a aprender. Proyecto de Clase 04. Si estás buscando las E-Notes para esto, está en la Carpeta de tu Proyecto de Clase. Ahí hay un documento de Word. Un par de cosas que quieres hacer. Lo principal es hacer que se vea así. Actualmente se ve así con estos botones que hemos reutilizado. Yo quiero que hagas que se vea así. Hay una línea alrededor del exterior. No hay relleno. Estamos usando Playfear en el medio ahí. Las garrapatas blancas, no hay subrayados. Simplemente haz que se vea así. Mantendremos este aquí abajo. Deja solo mi botón y crea uno nuevo. He sugerido un botón de navegación de código. Puedes llamarlo como quieras, pero esas son las cosas. Una de las grandes cosas es que, aún no sabes hacer fronteras, no lo hemos hecho. Por lo que a propósito lo he dejado apagado por el momento. Enseñarte a pescar esa cosa, donde o simplemente Google o buscar Stack Overflow y una forma de poner una línea alrededor del exterior. Estoy evitando el lenguaje que realmente se encuentra porque quiero que puedas encontrarlo e implementarlo tú mismo. Hay un par de formas de hacerlo. Exploraremos todos los de la próxima. Cualquier otra cosa que necesite entrar. Todos van a ser etiquetas, que ya son. Vamos a crear botón nav. Vamos a poner un borde blanco, Playfair, tomar este blanco, sin subrayado, fondo, sin color de fondo. Cuando hayas terminado, antes de pasar al siguiente video, quiero que tomes una captura de pantalla del mismo y solo la compartas conmigo en redes sociales para decir: “Sí, lo hice. Lo clavó”. Si sale horriblemente mal, también puedes compartir esa imagen. Yo sólo quiero que se te haga rendir cuentas y sé que no tengo manera asignar realmente que no estás haciendo una foto de eso. Es un poco virtual esta cosa de video, pero podemos conectarnos a través de redes sociales. Sólo recuerda usar el hashtag byOlWeb. Trae aquí tu propia web de laptop y el grupo de Facebook. No te olvides de esto. Lo volveré a mencionar porque es muy útil y está creciendo muy bien y hay mucha gente respondiendo. Me encanta que sea el último proyecto de Stephen Butler. Es uno de los moderadores. Convirtió a sus sobrinos dibujando en eso. Mira lo genial que es. Ahí hay cosas de video, puedes ver aquí que es algunas de las cosas de UX de XD. Aquí hay todo tipo de cosas geniales, pero quiero algunas cosas más web aquí. Por el momento es muy gráfico para nuestros otros cursos. Así que echa un vistazo, es trae tu propia laptop en línea. Es un grupo, hay que pedir unirse, pero hay que publicar poca captura de pantalla ahí. Te veré en el siguiente video. 62. Proyecto de clase 04: botón personalizado COMPLETO: Está bien. ¿Cómo fue? ¿ Lo hiciste, en primer lugar? En segundo lugar, ¿salió bien? Los pulgares arriba. ¿Se fue mal? Los pulgares hacia abajo. Está bien. Vamos a trabajar a través de cómo hacerlo ahora. Echemos un vistazo a este código. Lo que vamos a hacer es que vamos a quitar mi botón, de todos estos y aplicar nuestra propia clase. Un pequeño atajo genial es, realmente no importa si lo tienes selecto que solo hará un cursor dentro de algo como una clase, puede estar dentro de cualquier cosa. Pero si quieres algo más adelante por la página, puedes golpear Command D en un Mac, Control D en un PC y ver este Command DD cerrar ese. Si quieres el de aquí abajo otra vez, D. Puedes verlo solo salta a versiones antiguas de eso. Eso puede ser súper práctico. En nuestro caso, debido a que están apilados uno encima del otro, podrías usar múltiples cursores pero DDD. Es Control D en una PC, Comando D en una Mac. A éste se le va a llamar botón de nav. Bonito, aquí abajo, voy a crear nuestro botón de nav. Poner una parada completa o un punto, botón de navegación, conseguir los aparatos ortopédicos, ¿qué necesitamos hacer? Ahora, hay dos formas en que puedes hacer esto dependiendo de qué edad de la escuela sea la solución que encontraste, hay una nueva forma y una vieja manera. Ambos son perfectamente tan buenos como el siguiente, así que el estilo de borde y lo pones a sólido, eso es uno y medio de ella. Entonces dices peso de borde luego tamaño de borde. ¿ Es talla? Vamos a revisar. No, es ancho de borde. Sí. Ancho del borde. Enfriar y voy a poner el mío en un píxel. Eso debería acercarnos. Echemos un vistazo. Se va a ver un poco raro, pero aquí tienes, ese es el tipo de conceptos básicos que hay en él. Ahora, necesitamos agregarle relleno y todo el resto del mismo. Pero hablemos de la otra manera. En lugar de hacer eso, realidad puedes simplemente escribir en borde, colon y luego puedes ponerlo en un orden para que vaya por el peso alrededor del exterior, el estilo. Solo estoy usando espacios entre todos ellos. Voy a usar el blanco. ¿Necesito escribir blanco? No puedo recordar, pero eso hará exactamente lo mismo. Esa es solo una sintaxis más corta que hacerlos por separado como tamaño de borde, estilo de borde, color de borde. Creo que por defecto toma el color del texto dentro de él, un 100 por ciento. Pero esa es una forma de hacerlo. Vamos a agregar relleno y vamos a usar nuestro acolchado de lujo. ¿ Usaste el acolchado de lujo? O la parte superior acolchada, relleno izquierdo, relleno derecho? No importa que llegues al mismo lugar, pero recuerda, como los márgenes, comienzas por la parte superior. Yo quiero que la parte superior sea de 11 píxeles de espacio. Entonces vamos a usar la derecha, y yo voy a hacer 25 píxeles. Si lo dejo así como dos recuerdan, eso terminará siendo arriba y abajo, estarán a la izquierda y a la derecha. Guárdalo. Echemos un vistazo. Enfriar. Yo quiero que sea Playfair, y así estilo de fuente No, no tamaño, estilo, y lo quiero. Vamos entonces. Font-familia. No finjas que es una prueba, en realidad, solo ve a robarla. Aquí tienes. Probablemente lo hiciste también. Apuesto a que sí. Porque siempre me olvido son dos palabras, es una palabra de todos modos. Guarda eso. Echemos un vistazo. Creo que lo hemos hecho en absoluto, es una etiqueta. Echa un vistazo a nuestra lista es una etiqueta. Creamos nuestra propia clase llamada botón nav. Tenemos un borde blanco alrededor del exterior. Es Playfair. Es blanco. No hay subrayado y no hay color de fondo. Ahora, el texto es blanco y subrayado, podría depender de cómo hayas implementado tu sitio. El tuyo era morado y estaba subrayado o azul y subrayado. El mío no es porque antes en el curso, me ocupé de ello recuerden, dije, solo agreguemos una etiqueta. Todas las etiquetas a en todo nuestro sitio web son blancas, y no tienen subrayado, decoración de texto, ninguna. Si no lo has hecho, tendrías que editar aquí. Pero ojalá eso funcione para ti, y si eso aún no funcionó. Solo estoy pensando, si sigue subrayado en azul, bueno, tienes que hacer esto. Tendrás que conseguir un, una etiqueta que se une al botón nav y darle estilo para que sea de color blanco, y lo haré con todo el asunto. Acabamos de ir, hemos llegado tan lejos. Decoración de texto ninguno. Le estoy culpando a parte de mi ortografía, no puedo ver mi teclado. Cuando vas a videografiar estos cursos, bueno, no lo eres, yo lo soy. Ahí hay un gran micrófono justo enfrente de mi cara. puedes escuchar a mí y a mi gran sonido. Porque si estoy demasiado lejos, me oyes por aquí, y no es tan guay, así que me tengo que sentar bien y cerrar, lo que significa que está justo enfrente de mi teclado así que o estoy mirando a su alrededor así, o simplemente no puedo ver lo que estoy escribiendo y no soy un tipo lo suficientemente bueno como para no poder ver, de todos modos. Ahora sí encuentro que más adelante en estos cursos, bueno, obtengo bazillion de video, y siento que hemos cruzado más allá del Dan es ser un súper profesional en el principio y estamos en compartir demasiado. Se puede decir compartir demasiado Dan, y yo lo enderezaré por un rato, al menos. Ahora estamos hablando de familias y mis problemas con mi micrófono. Vamos a saltar ahora y subirnos al siguiente video antes de que me baje en otra tangente. Adiós ahora. 63. Cómo añadir una regla horizontal usando HTML5 y CSS3 en código VS: Oigan, todo el mundo. Bonito, sencillo. No tenemos línea. Ahora tenemos una línea. Súper simple. Vamos a añadir un borde a la caja del rumbo. Hablaremos de la <hr> etiqueta '' así como saltar al VS Code y hacer que suceda. En primer lugar, hablemos de la línea que necesitamos es ésta de aquí, ¿verdad? En mi simulacro arriba, tengo esta línea que recorre el documento hasta la página superior, entre el encabezado y este cuadro de héroe principal aquí y es portada como un gris claro. Yo he escogido ese color el C-C-C-C-C, y vamos a mostrarle cómo hacerlo. El mal camino, bueno, no es una mala manera, es que no parece usarse tanto muy a menudo y tiene algunos inconvenientes por lo que entre el encabezado y el principal, sólo voy a destacar aquí en el medio y vamos a usar esta etiqueta . Si has hecho alguno de mis cursos anteriores, esta <hr> etiqueta '' es la que usamos, la regla horizontal. Aparece en la página. Es perfecto. Tiene mucho de pie sobre él, que es el probablemente el mayor problema con él. Extrañamente sobre una etiqueta '' también, no tiene un '' de cierre, no lo necesita. No sé por qué. Sólo magia. No hace falta hacer todo eso. Hay un par de etiquetas que hacen eso, y así la razón por la que no hacemos eso es que no estoy en la documentación HTML5 dice: “Oye, ya no estamos usando esto como regla. Lo estamos usando como una ruptura de contenido y lo vamos a ocultar”. Deberías hacerlo para que estile no lo puedas ver y está acostumbrado a descomponer contenido. Todavía funciona, pero simplemente no lo usemos más y te mostraré la forma más fácil de moverte, súper fácil porque el otro inconveniente con '' es su algo en tu página, y voy a tener que tener esto en cada sencillo página debajo de cada encabezado. Una buena forma de moverse es o vamos a agregar un borde como lo hicimos para botones aquí en la parte inferior de ya sea del encabezado o de la parte superior de la principal, cualquier manera nos llevará al lugar correcto. Vamos el encabezado y notarás cómo estaba el corchete ahí, no está roto. Simplemente me molesta. A mí me gustaría que se separara así. Vamos a usar 'border'. Hechizo justo hoy. Border bottom, y al igual que hicimos antes, podemos poner una fila para que el primero sea lo ancho que es, y luego va a ser sólido y luego va a ser gris. Me encanta esto. Puedes usar gris con una A o una E. Es del mismo color. No creo que haya ni versiones americanas o inglesas de la ortografía. Creo que son sólo dos deletreos de la misma palabra. Probablemente me equivoque con eso. Pero de todos modos, ahí tienes. Ahí hay un gris claro para ambos. Ambos hechizos lo mismo. Se pueden tener ambos los deletreos. Se puede ver que está haciendo exactamente el mismo trabajo y es sólo una cosa más sencilla mientras que el otro tenía toda esta extraña profundidad a ella. El '<hr>' le tiene algún estilo de peso, especie de vieja escuela. Tienes sólido, tienes punteado. Hay un montón de estilos diferentes para ello. Es estilo es bastante pequeño. Yo lo haré bonito y grande para que lo veas en caso de que quieras puntos gigantes, pero eso es todo. Bonito video corto, líneas fáciles de hacer. Ya no uses el '', solo tienes que encontrar una de las casillas que aplique. Ahora, van a haber momentos en los que estás como, “En realidad quiero una pequeña línea al otro lado”, y podrías usar el '<hr>'. Podrías simplemente darle estilo para deshacerte de todos los bits extra. No voy a cubrir cómo quitar todo el estilo construido sobre para ello. Es posible que encuentres que en realidad hay una buena línea recta usando el '' porque el restablecimiento de CSS que estás usando podría haberla aclarado pero el que estamos usando de Chris Meyer no lo es. Está bien, eso es todo. Te veré en el siguiente video. 64. Cómo hacer que las etiquetas div se envuelvan en líneas independientes usando HTML5 CSS3 Flexbox: Oigan, todos. Este video, te darás cuenta de que aquí tenemos todos estos testimonios. Están aquí porque quiero mostrarte cómo funciona Flex-wrap. Tenemos a estos tipos todos en una sola etiqueta de padres. No están en filas individuales. Todos están en su propia etiqueta y hay una pequeña característica fresca llamada text-wrap, o al menos Flex-wrap que los romperá en sus propias líneas. Sí, así que aprendamos a hacer eso y sumamos algunos testimonios. En mi maqueta, me he burlado de cuatro testimonios diferentes aquí. Lo que me gustaría hacer es que este sitio solo crezca, ya que sigo agregando testimonios para que se hagan más y más largos. En lugar de hacer una fila, podría hacer una etiqueta div como un padre, y poner estos dos en ella, y dividirlos usando Flexbox, y luego hacer una segunda. problema con eso sin embargo es que tengo que hacer un padre para cada uno y lo que quiero hacer es mostrarte el atributo Flexbox llamado text-wrap. Significa que vamos a hacer un gigante o un padre para que todos entren y lo que vamos a decir es que los chicos simplemente se envuelven en la siguiente línea. Si hay demasiados de ustedes y no caben, vaya a la siguiente línea. Porque por defecto lo que trata de hacer como estos becarios aquí sólo trata de exprimirlos a todos en la misma línea. Ahora nos va a llevar un rato construir esto. Si solo quieres cortar a la hoja de atajos en tus archivos de ejercicios bajo Flexbox, este es el atributo aquí. Se puede ver lo que está haciendo ahí. Se va a la etiqueta de los padres. Sólo tienes que añadir esa condición de envoltura. Pero si estás trabajando conmigo, vamos a pasar por el resto de este tutorial porque quiero añadir unos pedacitos y piezas. Porque hay algunas cosas más adelante en este curso, si estás pensando, “saltemos esta”. Se va a volver, porque quiero hacer pseudo clases y todo tipo de cosas divertidas más adelante. Dónde agregarlas, se pone confuso aquí abajo y estás como, ¿dónde está todo esto? Yo encuentro solo pinchando en ellos y se puede ver que es una especie de casado arriba a su compañero ahí arriba. Tarjetas ahí dentro. Después de que terminen las tarjetas, quiero que comiencen mis testimonios. Voy a ponerle un buen descanso para que sea más fácil para todos. Voy a crear una clase llamada testimonios. Funciona bastante para mí y dentro de ahí, voy a hacer, ¿cuántos? Necesitamos tres de ellos. Ahora voy a crear todas las clases. Este, lo voy a llamar T Box y a diferencia de nuestras tarjetas. Tenemos tarjeta uno, dos, y tres. Porque estos son exactamente los mismos, todo el camino. Sólo voy a usar la misma clase para controlarlos a todos. Enfriar. Dentro de estas T-boxes van a haber algunas garrapatas que tengo en tu carpeta de proyecto dos. Busca texto del proyecto dos y tengo mis testimonios. Te voy a mostrar esto. testimonial-generator.com, no uso esto para mí. Pero buscaba algo para esta clase y solo necesitaba pasar y encontré testimonial-generator.com. Te pones en tu servicio de proyectos, el masaje de espalda de Dan. Nadie quiere uno de esos, y ahí tienes, genera. Desde que he invertido en el masaje de espalda de Daniel, lo he hecho más, Wow 100,000 ganancia, me perdería [inaudible] Pero te das la idea, ¿verdad? Se pueden generar todas estas cosas. Yo lo hice por estos, pero no lo hago por mis propios particulares. Pongo ciclos de matriculación y lo que me gustaría hacer es que esto. El nombre separado de la copia del cuerpo en dos etiquetas P separadas. Voy a copiar este primer bit y voy a entrar aquí, y lo voy a poner en una etiqueta P y pegar eso, y voy a arreglarlo porque ese es el tipo que soy. Ahí vamos y haremos otra etiqueta P con, solo podría inventar el nombre correcto. Otra etiqueta P, y voy a poner esta ahí dentro. Está bien, así que quiero eso para tres de ellos. Entonces sólo voy a duplicarlos. Copiar, pegar, pegar. Todos están consiguiendo. Mis pestañas se mezclan todas. ¿ Te acuerdas de lo que hicimos antes? Voy a seleccionar mientras que todo esto y un clic derecho en él y voy a ir a Selección de formato. Ahí se ve el atajo. Si estás encontrando, ya sabes, quieres hacerlo todo el tiempo. Ahora es bonito y espaciado. Está bien, va a cambiar el texto. Haré que el editor lo acelere. Ahora el editor lo está, Jason. Gracias Jason. Por alguna razón, decidí que necesitábamos tres. Claramente necesitábamos cuatro, vale. Aquí vamos, pegarlos y poner el último dentro y nos vemos en un segundo. Está bien, estás de vuelta. Lo que habrías notado es cuando hice mi limpieza, limpiando mi código. Es una cosa rara al poner esto ahí dentro y no estoy seguro de por qué. A lo mejor es el apóstrofe. No estoy seguro. Realmente no lo limpié. Tengo mis pestañas bien. Pero eso es una cosa rara con la etiqueta P. Recuerda si el tuyo fluye fuera de la página, obtén una vista y alterna el word-wrap. De acuerdo, si se va todo el camino, podría haber como te guste, yo no. De acuerdo, así que tengo mis cuatro cosas adentro. Echémosle un vistazo en mi página. Tengo estos cuatro testimonios. No los he peinado para nada. Entonces vamos a hacer eso. Voy a darle estilo a la T-box primero, vale. Porque son los que tenían como el ancho y la altura. Ve a T-box. Voy a hacerle un par de cosas. Yo quiero darle un ancho. En este caso, voy a usar porcentajes y voy a hacer. Ya probé esto, ¿de acuerdo? Voy a hacer que sea 37% para echar un poco de mirada. Recuerda, en realidad eso es un poco pequeño sí buen trabajo, Dan probándolo. Por lo que son perfectos. A mí me gustaría ponerle un poco de relleno a su alrededor. De acuerdo, así que relleno todo el camino, voy a hacer 50 pixeles. Yo quiero levantarlos en la misma línea. En realidad pon primero la línea en el exterior solo para que podamos hacer ese poco. Así lo hará frontera. Lo deletrearé mal como la millonésima vez. Frontera. Y vamos a hacer lo mismo que hicimos para los botones. Va a tener un ancho de uno. Va a ser una frontera sólida, va a ser blanca. Entonces echa un vistazo. ¿Qué tan cerca está eso? Eso es bastante bueno. De acuerdo, ahora quiero levantarlos en su propia línea. Nunca va a pasar por el momento porque tenemos el nuestro un poco grande. Se puede ver que lo hice 47%, está bien. Pero, es mucho más allá de eso, es mucho más allá de los 50. ¿ Por qué es eso? Ya sabes, ¿por qué? Porque agregamos el relleno. Recuerda el relleno añadido al ancho total. Tú eres como, bien. Podría, por eso tenía 37 en la cabeza porque 37 más mi relleno, lo hace menos de la mitad. ¿ O es, menos de la mitad? De acuerdo, y solo estaba siendo truco astutivo. No queremos hacer eso. Queremos ser todos oficiales. Recuerda cómo hacerlo. Lo hacemos a la caja o a la caja de envoltura. Creo que podemos hacerlo a. Ni siquiera estoy seguro. La mente se ha ido en blanco. Vamos a revisar. Vamos a editar nuestros testimonios. Recuerda lo que fue. Recuerda border-box. No, su tamaño de caja. Caja-dimensionamiento, caja de borde. Ahí vas. No, en realidad tienes que hacerlo a las cosas mismas. Por supuesto que sí. Eso tiene sentido. Ahí vas. De acuerdo, así que al hacer eso, eso menos de eso y estamos bien para irnos. De acuerdo, lo siguiente que queremos hacer es levantarlos en esta misma línea. ¿ Cómo hacemos eso? Yo quiero que lo pausas y solo pienses un poco. No algún examen. Es amable como un quiz pop. Muy bien, lo que hicimos antes. Recuerda configuramos la pantalla en Flex. De acuerdo, y por defecto que todos intenten apretar en la misma línea, que es, cool. Lo siguiente que vamos a ver es el poco que tenemos. Bueno, no tuvimos que mencionarlo ni totalmente apuntarlo. Está bien. Desde tu hoja de tramposos Flexbox. Desde tus archivos de ejercicio y configuramos el flex-wrap para envolver porque eso es lo que queremos hacer. Está bien, y echemos un vistazo. Vamos a, aquí. Vamos a configurar el flex-wrap para envolver. Ahí vamos. A ver si funciona. Bonito. Bueno de alguna manera, quiero separarlos. Podría empezar a agregar relleno entre ellos. Puedo hacerlo un poco duro. Está bien. ¿Recuerdas la clase que agregamos desde Flexbox solo para separarlos a todos? Lo hicimos por éste. Puedes hacer trampa e ir a revisar esa. De acuerdo, ¿dónde están mis tarjetas? Ahí está arriba, está bien. ¿Te acuerdas de éste? Justificar, contenido, espacio entre, está bien, tarjetas. Simplemente se estaba estancando porque no podía recordar un poco. Pero eso es lo que es. Justificar, contenido, espacio entre, Ok. Debería separarlos a todos. Ahora quiero un poco de margen a la parte superior, de acuerdo. Entonces de estas casitas T de aquí, voy a decir margen. Margen hará top. ¿ Cuánto vamos a hacer? 50 píxeles. Aquí vamos, hay un poco de fronteras. De acuerdo, tenemos esta cosa rara pasando con la altura aquí. De acuerdo, sin que el gradiente vaya al azar en segundo plano. arreglemos eso. ¿ Qué lo está controlando? El top aquí. Agregamos esto antes para solucionar un problema en el que nuestro sitio web era demasiado pequeño. Está bien, y está hecho que esa vista inicial sea 100%, lo que nos lleva al fondo de mi pantalla. El tuyo podría no tener este problema porque tu pantalla podría ser más pequeña o más grande. Está bien, pero ya no necesitamos que la altura sea un 100%. Porque mi página web es bonita y larga. Haciendo algo de relleno debajo de estos tipos. En realidad, ¿dónde añades ahora el relleno? Está bien. No tenemos pie de página en este sitio. En realidad simplemente no diseñamos uno con uno. Entonces no tengo que tener uno. ¿ Dónde debo hacerlo? Podría ponerlo al fondo de los testimonios. Soy reacio a agregar relleno a la parte inferior del cuerpo solo porque soy tímido con armas, como. Metir con la etiqueta del cuerpo puede hacer cosas raras especialmente si estás trabajando con cosas como Bootstrap, Flexbox. Todos consiguieron sus mitos por querer hacer cosas con cuerpo. De acuerdo, voy a ser súper cuidadoso y solo usar el que hice. Sé que no se van a meter con ello. ¿ De acuerdo? Voy a decir margen, fondo. Voy a decir 50, tal vez un 100. Vamos a duplicarlo. Echa un vistazo, esa es mi maqueta. Aquí vamos. Algún relleno en la parte inferior, o al menos margen en la parte inferior. Muy bien, entonces miramos lo que hace flex-wrap. Significa que estos tipos son todos chicos llenos, todos en una sola caja. El chulo de ello es que si hacía más pequeños a estos tipos o añadía más de ellos. De acuerdo, así que vamos a copiar. Voy a añadir unos cuantos más pegar, pegar, pegar, hacer cargas más. El chulo de ellos es echarle un vistazo. Simplemente pueden seguir envolviéndose en la siguiente línea. Está bien. No quiero que todos esos tipos vayan. Agradable y limpio. Volver a donde empezamos. Tú por ahí, agarra el Mike. Ya estamos hechos. Está bien, te veré en el próximo video. 65. Cómo cambiar el color del efecto hover y animar mi botón en HTML y CSS: Hola ahí. Hasta ahora, nuestro botón se acaba de poner ahí no haciendo mucho. Pero ahora mira cuando muevo mi mouseover, se desvaneció en verde. A eso se le llama pseudo-clase. Vamos a usar el pseudo hover. Te mostraré cómo hacerlo ahora en este código. Actualmente, mi botón no tiene el cursor. Cuando lo paso el mouse, consigo el tipo de mano de ratón Mickey pero no consigo que se cierne como viste en la intro. El modo de conseguir eso es algo llamado pseudo-clase. Porque esto Una etiqueta aquí tiene más de un estado. No se ha tocado estado y tiene un estado estacionario. Tiene cuando le hago clic estado y ha estado ahí antes de estado. Está bien. Hay otras palabras técnicas pero consigues lo que quiero decir, hay un código, hace algunas cosas diferentes y puedes detectarlas creando una pseudo-clase. El pseudo-clase funciona así. Se lo voy a hacer a mi botón porque eso es lo que tengo aplicado a esta cosa. Creas otra clase y dices, mi botón. Está bien. Escribirlo bien, necesitas, me gustaría tomar el hover, y la forma en que funciona una pseudo-clase es que sólo la velocidad se unió y se necesita ahorrar eso. Voy a estar tomando el hover, el estado del hover de este botón. ¿ Qué vamos a hacer? Cambia el color de fondo. Voy a escoger probablemente algo. Selecciónelo. Está bien. Esperemos que ahora cuando lo previsualice, pueda pasar el cursor por encima y tú te vas. Eso tiene un pseudo estado de hover que he encontrado y cambiado. Enfriar hackeo. Puedes hacer, te habrías dado cuenta en la intro, hice que se desvaneciera. Hagámoslo. En CSS3, podemos hacer una transición, una duración de transición. Se va a hacer cuánto tiempo haría un segundo. Por lo que va a tomar un segundo para que esta cosa se active. Démosle un adelanto. ¿ Listo? Ahora hemos mirado el estado de hover, aquí están los otros. Solo te estoy mostrando w3schools.com para las diferentes pseudo-clases. Esa es la de la que hemos hablado. Echemos un vistazo al hover hecho. Es lo principal cuando vas a hacer. Nunca toco enlace visitado ni activo. Pero echemos un vistazo para decir que sabes lo que son. Entonces por el momento está listo, si no lo has hecho clic, ya lo has hecho clic y es verde. Visité esto por lo que es verde. Cuando muevo el ratón, es rosa caliente. Entonces te vas, eso es lo que hemos hecho, el hover. Este de aquí, cuando está activo, se pone azul. Mira esto, cuando hago clic en él. Se pone azul por un segundo. Nunca color eso porque ¿quién va a ver? Porque hago clic así, como una persona normal, súper rápida y nunca se ve el cambio de color. Depende de ti aunque podrías estar amando cambiar el color activo. Se puede ver sólo la sintaxis. Es un colon, y luego estos están predefinidos. Se va a asegurar que ese es el colon en el medio. Hay muchas otras pseudo-clases. En el fondo de esta escuela W3 hay un montón de diferentes. Está bien. Vamos a cubrir algunos más de ellos en el próximo video. Entonces sí, cubriremos los que uso de todas formas. Muchas de ellas por aquí. Nunca he tenido la oportunidad de usar. Pero sí, hay un montón de pseudo-clases fuera de solo hover. Saltemos al siguiente video y revisemos algunos de ellos. 66. Cómo ubicar etiquetas específicas en HTML para aplicar css al uso de pseudo-clases: Hola ahí. Vamos a llevar pseudo-clases a un siguiente nivel. Vamos a apuntar a esta segunda etiqueta P y ahora testimonios y vamos a hacerla más pequeña, vamos a darle un toque. Te darás cuenta ahora HTML no le hemos aplicado una clase, porque eso es lo que habríamos hecho hasta ahora. Habríamos ido P tag conseguir una clase, pero mira que simplemente las viejas etiquetas P simples, pero de alguna manera en nuestro CSS mágicamente podremos aislar esto usando una pseudo-clase. Lo hacemos con nuestro testimonio, lo hacemos con esta cosa de buen aspecto, cada tercer elemento de la lista es rojo. Pseudo-clases son el lugar para estar es donde está sucediendo. Acompáñame en este video y tú también puedes estar bien con pseudo-clases. Aprendimos el verdadero flotador básico de pseudo-clase en el último video pero hay muchas otras cosas geniales que puedes hacer con pseudo-clases. El W3 schools versión de explicarlo todo puede ser muy seco y eso a veces es realmente lo que quiero, pero a veces es bueno ir y echar un vistazo a algo como CSS-tricks, Chris Coyier es realmente bueno solo dando cosas una aplicación práctica y a veces dirá que hay que hacer algo de acuerdo al manual. Pero entonces eres como “Realmente” y luego entras aquí y a veces Chris dice: “Sí, eso es lo que querías hacer”, pero no es lo que la gente no hace lo que hacen los diseñadores regulares o desarrolladores. De todos modos este es bastante bueno, css-tricks.com/pseudo-classselectors, solo haz una búsqueda en este sitio y te da explicaciones más prácticas. Ahora, voy a pasar por ellos yo mismo porque hay mucho en esto pero sólo saber que hay más que podemos cubrir en este video en particular. Tiene uno realmente común. Como hemos hecho esos veamos estos. El puesto y la numeración son realmente útiles, porque lo que me gustaría hacer por nuestros testimonios es esto último aquí, esta última etiqueta P. A mí me gustaría hacerlo más pequeño, sangría un poco, aquí está mi maqueta. Ni siquiera hice eso en mi maqueta, pero quiero que el más pequeño empuje hacia la derecha y tal vez cursiva para que podamos apuntar cosas como esa usando pseudo-selectores. Echemos un vistazo así que vamos a usar este que se llama primer hijo primero y luego veremos el último de tipo tal vez. Es algo para nuestro Visual Studio Code. Empieza a trabajar con las pseudo-clases ligeramente más complicadas. Echemos un vistazo al primer niño uno, porque lo que me gustaría hacer es decir estilo el H1 dentro de este herobox. Podemos hacer es podemos decir dentro de herobox 1 Me gustaría darle estilo al primer niño. Recuerda que hablamos de padres e hijos que ahora tiene un poco más de sentido. Yo quiero encontrar al primer hijo y ahora lo que haces con él es un aquí arriba, veamos uno anterior. Cuando queremos encontrar una etiqueta P dentro de tarjetas ponemos un espacio y es lo mismo con estas pseudo-clases. No quiero adjuntarlo directamente a esto y hacer primer hijo, porque eso no es lo que quiero lo que quiero hacer es encontrar al primer hijo dentro de. Tan solo tener este espacio aquí como lo hemos hecho antes para clases compuestas anteriores. Yo quiero encontrar al primer niño dentro de una caja de heroína, me gustaría hacer el color del azul. Es muy abajo habíamos mandado texto a nuestro, me parece una manera también. Enfriar. Encontré al primer niño dentro de ahí se podría decir el último niño. Se va a mirar herobox y encontrar lo último ahí dentro, y lo último en él es este botón aquí y se le aplica el color azul al texto. Nos va a funcionar, lo que queremos hacer no es herobox queremos encontrar nuestras tarjetas. Aquí estamos y vamos a decir, me gustaría dentro de tbox, me gustaría encontrar al último niño porque es lo último en su, último hijo eso es lo que quiero. Algún poco de sintaxis, menos llaves y hagamos font-size, solo asegúrate de que funcione. Font-size, voy a sintonizar a tal vez 0.8 ems o rems. Guardémoslo, echemos un vistazo. ¿Eso funcionó? Aquí tienes. He salvado al último hijo de esta caja aquí para hacerle esto. Lo que yo podría hacer también es si estas mas ya que es cajas bastante simples lo puedes hacer, vamos a comentar eso fuera así que está ahí y vamos a ver manera un poco diferente porque tu etiqueta div podría ser más complicada que eso. Hay otros aquí dentro vamos a echar un vistazo. Haremos enésima de tipo o tipo esta es una buena. Niño solo está tratando con quien esté dentro del padre y de tipo, digamos que queremos encontrar el último de tipo y ¿qué tipo de tipo? Vamos a decir dentro del tbox, espacio, porque yo quería que fuera dentro de tbox quiero que encuentres un último y no último niño encontrará el último de tipo. ¿ Qué tipo de tipo? Yo quiero que sea la etiqueta P estos dos se ponen articulación. El último tag P dentro de tbox va a hacer lo mismo. Voy a hacer tamaño de fuente, tamaño fuente de 0.8 rems y vamos a hacer un poco de relleno en el, qué lado es que vamos a ocultar se queda. Simplemente empujarlo un poco. ¿A qué distancia? lo voy a adivinar por el momento. Echemos un vistazo y nuestro tipo está ahí. Es el último del tipo P terminamos en el mismo lugar pero te puedes imaginar si después tienes muchas cosas. Después de esta etiqueta P tal vez haya una imagen nuestro último hijo no va a trabajar, porque ese es el último niño ahora. Por lo que puedes ser un poco más específico con él. Ahora, de nuevo no los voy a cubrir a todos porque tendrá, supongo, su propio lugar. Veamos tal vez sólo unos pocos más pero lo que podríamos hacer es que podríamos dejar eso porque está funcionando y voy a dejar que ahí puedes decidir cuál quieres usar. Simplemente voy a cerrar esto y crear un nuevo documento. ¿ Qué hice que acabo de crear como un documento desechable. Ahí hay una lista desordenada la cual es una lista con punta de bala y hay 10 pequeños artículos dentro de ella, y se ve así. Puedes jugar a lo largo, puedes crear esto si quieres y luego voy a hacer mi peinado en la etiqueta de cabeza por el momento. Echemos un vistazo a algunas otras cosas. Digamos que quiero apuntar al tercer tipo hacia abajo justo este tipo. Lo que puedo hacer es que puedo decir dentro de la UL poner un espacio porque algo dentro de él, me gustaría apuntar al nésimo niño. En los paréntesis escribes el número que quieras, así que quiero apuntar al tercer hijo dentro de este tipo. Yo lo voy a poner en mis tirantes rizados, voy a decir que te hagas un color de un rojo que hemos usado demasiado azul. Vamos a darle una prueba en el navegador ahí tienes. El genial de esto es que si dejo de poner cosas aquí manzanas, aceleraré esto. Eso sí vamos a salvarlo vamos a echar un vistazo. Entonces la naranja es roja pero la cosa al respecto es que si muevo el orden de esto, voy a hacer las naranjas la parte superior, realmente no importa en realidad, puede ver el plátano ahora se ha vuelto rojo. Es una gran manera de enfocarlo y puedes volcar cosas en la página y no importa que la tercera persona se vuelva roja. Entonces también se puede hacer en lugar de sólo el tercer hijo, en realidad se puede decir que quiero la letra n después. Será la segunda versión de él y solo repite lo mismo podrías poner en tercero. Hay muchas otras cosas que puedes hacer y en cuanto a tratar de encontrar específicas. Podría estar volcando montones de datos en una página y necesitas darle estilo a cada fila 20 pero solo si, y eso es lo que podrías saltar a algo como Chris Coyier es un poco más, se sumergirá en bonitos ejemplos. Pero creo que eso dicho te da una buena explicación. Pero lo grande que hay que saber es que diferente a nuestra otra clase a menudo hay un espacio en el medio. Porque quiero encontrar al enésimo niño dentro de esta cosa. Pero si quieres ponerte realmente específico si quiero encontrar el LI, quiero encontrar al nésimo niño solo apuntando a las LIs dentro de la UL que se une. Extraño pero cierto. ¿En realidad hacemos L? Nosotros sí, escribimos esos en eso es lo que realmente quería hacer y por eso creamos nuestros testimonios. Para que podamos aprender un poco más sobre las pseudo-clases. Si eres como, “Hombres que parecían grandes. ¿ Para qué estamos haciendo esto?” Porque más adelante en el curso, vamos a necesitar saber un poco más sobre las pseudo-clases. Es una buena base para nosotros lo hará realmente fácil más adelante. Eso es todo por este video te veré en el siguiente. 67. Cómo crear un botón de menú desplegable simple en HTML y CSS: Hola ustedes. ¿Estás listo para la parte más complicada de diseño web que vamos a hacer hasta ahora? menú desplegable parece fácil, y es fácil. Paso a paso, realmente fácil. Todos juntos esa cosa. Un poco de CSS que necesitamos para que funcione, pero lo haremos paso a paso para conseguir el no tan aterrador como estoy amenazando. Yo lo estoy haciendo necesito ser un poco descortés sobre eso para que sí, no, está bien. Es fácil y es sólo hazlo muy rápido. Entonces miras la duración del video y estás como si fueran 20 minutos, ¿Son 20 minutos? Probablemente se trate de eso ahora. Pero de todos modos, menú desplegable en una navegación todo por sí mismo. Por eso lo estamos haciendo por aquí, para que podamos simplemente mirarlo y es puro yo y puedes mantenerlo separado. Entonces lo doblaremos en el sitio web real que estamos construyendo en el próximo video. Empecemos. Vamos a hacer esto de manera aislada primero, y luego en el siguiente video lo integraremos a nuestro sitio web de video de bicicletas de rol, lo siento. Cierra el sitio web y hagamos uno nuevo. Podemos ir Archivo, Nuevo. Vamos a crear dos archivos. Uno va a ser HTML y otro va a ser CSS. Mantendremos esto por separado, sé útil para que te guardes por ti mismo también es que tienes un menú desplegable de trabajo todo por ti mismo. Vamos a guardarlo, y vamos a llamar a este menú desplegable CSS. Hay muchas formas de hacer menú's. Lo estamos haciendo en CSS porque son algunas de las habilidades que ya conocemos, te mostraremos más adelante usando jQuery, pero esta es realmente buena, fácil, bueno , fácil, fácil, es fácil de entender. Esto va a ser HTML dot. Voy a hacer un segundo documento que va a ser el CSS del mismo nombre. En realidad, le voy a dar el mismo nombre para que quede claro. Conéctate a dos. Aquí, signo de exclamación, retorno, aquí arriba bajo título, vamos a decir estilo, no vamos a decir enlace y vamos a enlazar el CSS. Vamos a llamar a los nuestros algo más, no estilo. Vamos a llamarlo, es hacer algunas cosas raras. Eso está bien, quiero menú desplegable CSS, bonito. He conectado a estos dos, arrastrado el tabulador hacia un lado para poder verlos de lado a lado. En nuestro HTML, primero pongamos en nuestros retornos locos y se pone en un Nav. Apenas el contenedor Nav para ponerlo todo dentro. No lo vamos a hacer en súper aislamiento, sólo poco aislamiento. Ahora, en el último video, lo que hicimos fue poner una etiqueta y luego le dimos un nombre de clase llamado mybutton y empezamos a parecer un botón. Aquí vamos a hacer algo parecido. Vamos a hacerlo, en lugar de hacer una etiqueta y fingir una caja alrededor de ella, en realidad vamos a hacer una etiqueta div y poner de color y poner la etiqueta a dentro de ella. Te mostraré lo que quiero decir. Simplemente hará que sea menú desplegable, chunky más fácil. Vamos a hacer una etiqueta div y vamos a llamar a este uno navbutton. Dentro de esa etiqueta div, vamos a crear una etiqueta. Se va a ir a ninguna parte hachís, y a éste se le va a llamar hogar. Estamos poniendo el a tag, eso es lo que hicimos de la última manera que hicimos nuestra navegación, hicimos una etiqueta y luego le pusimos algo de relleno alrededor y un color de fondo. Este caso, vamos a hacer un pequeño rectángulo, una pequeña etiqueta div, y vamos a llenarlo con un color de fondo, principio muy similar. Vamos a darle estilo a eso. En realidad veamos qué tenemos hasta ahora. Voy a Guardarlo, me voy a ir a vivir. ¿ A dónde se fue? En mi otra pantalla y tenemos esta cosa bonita. Hagamos que parezca un botón primero. Por aquí vamos a decir, voy a apuntar primero a la clase. Vamos a decir navbutton, va a hacer un color de fondo y vamos a escoger cualquier cosa, desplazarnos hacia abajo, escoger tu color favorito, verde césped, me queda bien, punto y coma al final. ¿ Quién lo va a acumular lentamente? Vamos a darle algo de relleno, así que hacemos relleno todo el camino y haremos lo que hemos hecho antes. Once píxeles y 25 en la parte superior e inferior. Bueno, izquierda y derecha, aquí vamos esto se llama relleno, vamos a darle un ancho. Haré el mío un ancho de, supongo que esta es una de las grandes diferencias entre hacer con la etiqueta a. El a tag era sólo el ancho de lo que fuera. En este caso, en realidad tuvimos que dar comida para llevar para darle una talla. Porque realmente quiere estar al 100 por ciento en todo el camino. También quiero asegurarme de que el alineamiento de texto esté en el centro. Vamos a darle estilo al color más adelante, lo vamos a dejar sólo para que podamos dejar de construir esta cosa. Vamos a crear Todos los Tres Botones. Tenemos este pequeño grupo aquí, un botón de inicio, voy a hacer otro, y luego voy a hacer un tercero. De lo que tengo Home, éste le van a llamar Productos. Este va a ser Contáctanos. Separados uniformemente, ahora deberíamos tener tres botones pequeños Go. Debido a que puede ser un tags están en línea, había técnicas entre sí que estas son opuestas, esto es un nivel de bloque, estas son etiquetas div, se apilan uno encima del otro. Yo quiero apilar uno al lado del otro. Yo quiero decir que eres mi amigo, nos gustaría mostrar bloque en línea. Está un poco arriba. Apila el uno al otro, impresionante, pero se empuja el uno al otro. Lo siguiente que quiero hacer es que quiero construir el pequeño desplegable. Lo que vamos a hacer es, vamos a poner aquí para que podamos verlo todo el tiempo, y vamos a apagarlo por defecto hasta que tengamos una pseudo-clase de hover en este botón de productos, que va a girar vuelve a encenderse. Echemos un vistazo a unos verdaderos fundamentos de lo que estamos haciendo. En primer lugar, necesitamos poner algunas cosas dentro de los productos. Después de la etiqueta a, pero antes del cierre del div, eso significa que va a estar dentro de esta caja, y vamos a meternos en bajada de esa caja después de la palabra Productos. Sólo voy a poner un par de melodías en que sea un poco más fácil. ¿Qué va a entrar aquí? Vamos a poner un contenedor nuevo, una nueva etiqueta div, y vamos a darle un nombre, voy a llamar a éste, ¿cómo vamos a llamar a éste? El desplegable. Se llama caja sólo para tratar de tener claro lo que estamos haciendo. Dentro de esta caja, al igual que lo hicimos antes, quiero un montón de estos botones. Se puede ver cómo nos estamos metiendo en la inscripción [inaudible], vamos a diferentes niveles. Navegación, hay un botón, segundo botón, este medio tiene el enlace, pero tiene otro contenedor justo después de ese enlace. Lo estamos llamando cuadro desplegable, vamos a darle estilo, y vamos a escoger un color diferente para ello, y vamos a tener, ¿cuántos menús desplegables aquí? Tres. Dentro de nuestro botón, nuestro botón de producto, tenemos el pequeño enlace que termina, y luego antes de que todo el botón se cierre, tenemos este otro pequeño grupo anidado por dentro. Lo hemos llamado, cuadro desplegable, y tenemos uno, dos, tres botones dentro. ¿ Estás conmigo hasta ahora? Sí, ¿tal vez? Tratando de que se vea limpio para echar un vistazo a cómo está apareciendo. Ha, se puede ver lo que está haciendo, es poner estos botones dentro de este botón de producto, y está atascado ahí. Lo que haremos a continuación, es que solo lo apagaremos por defecto. Tenemos esta cosa llamada cuadro desplegable. Vamos a apuntarlo, era un desplegable par, cuadro desplegable. ¿ Qué queremos hacer con él? Queremos exhibir, y vamos a ir Mostrar ninguno. Vas a ir por cualquiera de los bares posteriores. Hemos hecho display, hemos hecho otra pantalla, tenemos display flex, display block, display inline-block. Todavía no hemos hecho nada. ¿Qué hace? Simplemente lo apaga, se ha ido. Este es el truco, vamos a volver a encenderlo usando una pseudo-clase flotante. Por qué pasamos tanto tiempo aprendiendo pseudo clases, va a ser útil y útil a medida que siga la clase. Si la palabra producto se ha ido, te gusta, ja, se ha ido. Probablemente sea porque accidentalmente tuviste esa visión del aire, Irá, necesita estar fuera de ese cuadro desplegable que apagas, justo encima o justo debajo de él, realmente no importará. Lo que podríamos hacer es agregar algunos comentarios, porque sería sólo para explicarnos a nosotros mismos, ¿qué hace esta cosa? Recuerda toda mi marca, su barra delantera de comando me da mi asterisco de barra delantera, y luego termina con una barra inclinada hacia adelante asterisco. En una PC es igual o similar, es barra hacia delante de control y mi barra hacia adelante está abajo por mi signo de interrogación. Aquí dentro, voy a ser muy poco para mi yo futuro. Esto aquí lo apaga cuando no se usa el desplegable. Ese es su trabajo. Ahora lo que queremos volver a encenderlo, voy a añadir un poco de CSS para decir que esto lo vuelve a encender. Lo que quiero hacer ahora es el cuadro desplegable, lo que me gustaría hacer es volver a encenderlo, mostrar y el bloque. Puede aparecer, por favor. Bloque y ninguno tiene una sensación muy similar a la forma en que ese nombre, pero entendemos bloque ahora, debido a las clases anteriores, inline-block, es solo un trozo de cosas. En el momento en que estos tipos lo están peleando, lo que podemos hacer es decir, este tipo solo está encendido cuando paso por encima de mi botón de navegación. Mi botón de navegación, y ahí está, adoptan botón de navegación con la pseudo-clase de hover. Cuando esta cosa se cierne, me gustaría entonces activar este k que es display block, y tiene que ser así alrededor de este no puede estar debajo de este k porque recuerda que corre desde arriba, es primero que nada, se pone apagada. Entonces si se cumple esta condición, es el estado anfitrión, va a activar esta clase para hacer otra cosa, anular esa a decir ahora mostrar bloque. ¿ Eso tiene sentido? Tan solo echar un vistazo. Voy a ser bonita. Bueno, ¿no lo haríamos? Ya me dieron el suyo. Lo dejé por ahí solo faltaba por ahí. Aquí vamos. No lo es, Rosie. Simplemente se me olvidó guardarlo. Eso es lo que tengo que hacer. Vamos entonces. Está bien, ahora pruébalo, flotamos. Aparece en el lugar equivocado, pero aparece. Es hacer algunas cosas raras. Lo que está haciendo es, por defecto, todas estas casillas aquí tienen una posición de algo llamado relativo, todas son relativas entre sí. Cuando estos tipos aparecen, todos se despliegan y son como: “Bueno, yo soy pariente contigo y tú estás en la parte superior, así que voy a ir al fondo y luego voy a empujar todo lo demás por ahí”. Eso podría no explicarlo muy bien, pero es relativo a su compañero. Para apagar eso, puedes decir: “Haz un desplegable, no quiero que seas un pariente posicional”, que es ése. “ Yo quiero que seas diferente, algo llamado absoluto”. Eso es lo contrario, es la némesis para relativo. Dice: “No me importa dónde estén mis amigos, sólo voy a ir a donde me digan”. Echemos un vistazo, ahí está. Está funcionando. Al menos no es meterme con mi menú superior, necesito apilar, pero eso está bien. Le dijimos al menú desplegable, esa clase desplegable. En realidad cuadro desplegable ser posición de absoluto. Pero lo que me gustaría hacer es, me gustaría decirle al navbutton : “Me gustaría ponerte en relativo”. Posición a relativa. Yo quiero que estos tipos sean relativos el uno al otro y eso significa que estos chiquitos se van a nobular unos a otros y a apilar sobre otros. Por lo que el propio desplegable, el contenedor, se establece en absoluto, pero los propios botones de navegación reales, se nobizan unos a otros y se apilan uno tras otro. Que mis amigos es un menú desplegable bastante crudo, en el hover. Nos lo arreglaremos un poco, pero esas son las mecánicas para ello. Básicamente apágalo, a menos que tengas una pseudo clase que diga hover, actívame y luego hay un montón de jugando para conseguir que todo se alinee. Si eres como yo, básicamente mirando que esto va, ¿qué hace todo esto? Puedes copiar y pegar esto, mantenerlo separado, para que cuando lo hagas empieces a construir un sitio, en realidad agarrar todo el nav y agarrar este CSS, y simplemente empezar desde ahí. Si soy honesto, algunas de las veces eso es lo que hago. Una de las cosas que podrías tener que hacer es, porque hay un aislamiento, este menú está apareciendo encima de este fondo blanco porque aquí abajo no hay nada. En ocasiones lo que puede pasar es, esto aparece y el Hogar, Hogar, Hogar termina por estar debajo del contenido, así que tienes una gran imagen aquí, el menú desplegable aparece debajo, una solución fácil para eso es algo llamado el índice z. El z-index piensa en que tienes X e Y en tu página, hemos hablado de eso. Z viene hacia ti, así que puedes decir, en realidad quiero que sea z-index de, siempre y cuando sea uno o superior, si aún no está funcionando, puedes subir hasta cien, solo tiene que ser alto. Básicamente todo está ajustado a cero, y mientras lo hagas por encima de uno, debería funcionar. Ocasionalmente hay momentos en los que solo necesitabas tener 99 o algo más alto. Siempre y cuando sea superior a cero. No va a cambiar el mío por el momento, pero tiraré [inaudible] porque siempre tengo problemas con los menús desplegables, buceando detrás de las cosas. Lo siguiente que quiero hacer es que ahí se superponen, por lo que estos botones se superponen. Cambiemos la palabra Inicio porque eso es confuso y posicionaremos un poco el menú desplegable. Por aquí, en lugar de la palabra Inicio, Hogar, Hogar, vamos a poner en el Ítem 1. Comando + D, agarra ambas, Ítem 2 y resolveré este último fuera, tres. Está bien, lo mismo, sólo con poco unos números ahí dentro y hagamos el posicionamiento. El dropdown-box, depende, quiero que esté un poco abajo, así que si uso margin-top, y digo: “Solo baja como 10px”. Probablemente nos vamos a encontrar con un problema en realidad, echemos un vistazo. Diez píxeles lo hicieron. Está alineado al fondo ahí, es duro porque todos son del mismo color. No voy a hacerlo, pero lo que podrías hacer es que todos usen navbutton, así que todos están siendo ese célebre verde. Podrías crear un segundo botón de navegación, tal vez llamarlo botón desplegable y solo darle un color diferente, para que tal vez sea un poco más claro y aplíquelo por aquí. Todavía necesita todas estas cosas, pero puede que tengas dos colores diferentes. O podrías ser elegante, oh maldición, no seas elegante. Ser un poco elegante? Muy bien, seamos un poco de fantasía. Si hay un botón de navegación que sucede que aparece dentro de un cuadro desplegable, pero solo si está dentro de un cuadro desplegable, cambia el color de fondo. Este va a ser azul cadete. mí me parece ideal. Está bien, empieza a poner personajes aleatorios, echemos un vistazo. ¿ Enfriar? Lo arregló. Ahora, ponemos 10px, digamos que ponemos 20, veamos qué pasa. Esto es un poco raro, si floto por encima de él, y me puse rápido, puedo llegar a ello. Pero si voy despacio hay este vacío vacío que va ah, que es un poco molesto. Para sortear eso podemos usar margen en eso, porque la caja está alrededor del exterior, la caja desplegable no le está dando este color. Este color verde viene del botón en sí, no del reper box, la caja no tiene ningún color. Puedo usar el relleno y nadie se dará cuenta, que es como una cosa interna porque no tiene ningún color. Lo que podría hacer es, en lugar de hacer margin-top, voy a hacer remo. Esa es una de las cosas con el relleno, es el insider. margen es el exterior, relleno es el interior, así que ojalá se vea igual, pero mira esta zona aquí, en realidad es parte de esa etiqueta div. Está bien, entonces espero que eso tenga sentido. Si estuviéramos usando el menú desplegable para agregar el color de fondo, no va a funcionar porque sería algo raro empujando fuera de eso, así que usamos relleno en lugar de margen. Ahora, quiero empujarlo así un poco, a la izquierda. Se pueden utilizar márgenes negativos o relleno negativo. ¿ Se puede hacer relleno negativo? No creo que en realidad puedas. Intentemos remar a la izquierda y hagamos un 30 negativo sólo para hacer un punto. No. Pero se puede hacer margen negativo. Margin-izquierda, negativo 30, guarde eso, vamos a darle una prueba. Ahí lo tienes, muévete al otro lado. Todavía no he conseguido uno ahí, pero dependiendo de donde quieras que se siente. Todo lo que podríamos hacer es hacer un poco de rollover, lo hemos hecho antes cuando aprendimos pseudo clases. Los botones de navegación que están dentro de este desplegable, hemos cambiado el color de fondo, pero en realidad, cambiemos, estamos ahí. Yo quiero todos estos, pero quiero añadir un hover. Dentro de una caja desplegable, cuando hay un botón de navegación que se ha flotado, me gustaría que hiciera algo más. Escogeré un color aleatorio diferente aquí. Voy a escoger mi propio color aleatorio, magenta-ish. Guárdalo. Vamos a darle una oportunidad. ¿Funciona? Hagamos que se desvanezca también. En realidad la duración es lo que queremos, ¿no? Duración de transición y ponerlo durante un segundo. Un segundo es largo. Es una hermosa mezcla de colores. Puedes usar milisegundos. Sí, milisegundos. Un milisegundo es probablemente demasiado corto, ¿qué es, son miles? Creo que son miles, así que 500 es medio segundo, mil es un segundo. Creo que es como funcionan los milisegundos. Se puede decir sólo dos veces más rápido que un segundo, y si lo consigues, algo pequeño como un milisegundo, es 0.1 de segundo. Sí, súper rápido, ni siquiera lo verás. Yo sólo quería mostrarte milisegundos porque, no hay verdadera razón buena. Está bien, eso va a ser, tenemos las bases dentro. Para que ésta funcionara, usamos una etiqueta div como caja con una etiqueta dentro. Más temprano, obtengo el a tag y acabamos de darle estilo a eso para mantener las cosas más fáciles. Se ve un poco más complicado por aquí, ¿verdad? Ojalá pudiera simplemente hacer con todas las etiquetas a. Pero las clases div son necesarias y pones la etiqueta a dentro de ella. Después está este grupo anidado al que le dimos su propio pequeño nombre, y apagamos eso, dijimos, “Mostrar ninguno”, o está ahí. Entonces más tarde dijimos: “En realidad, si ese menú desplegable tiene dentro un botón de navegación que se pasa por encima, cámbialo de display none a display block”, entonces lo enciende. Después tuvimos que jugar con algo del posicionamiento, tan absoluto para conseguir que los empujen hacia abajo desde abajo, y luego usamos este posicionamiento relativo para conseguir que se apillen encima con respecto al otro. Pero eso lo sabes, acabas de terminar el video. Está bien. Es una recapitulación, eso es lo que fue. Está bien, vamos a guardar esto, así que Archivo, Guardar Todo y vamos a cerrarlo todo. Voy a cerrarlo después de que empiece el video. Haremos otro básicamente, pero lo doblaremos en el sitio web existente porque hay algunos pequeños trucos para asegurarnos de que eso funcione. Hagámoslo en el siguiente video. 68. Agregar nuestro menú desplegable CSS al sitio web Roar Bikes: Hola, buen guapo Diseñador Web. Básicamente vamos a tomar las técnicas del último video, en lugar de hacerlo de forma aislada, lo vamos a hacer en nuestro propio sitio. Vamos a ir al menú desplegable e integrarnos a un sitio existente, y va a ayudar a reforzar lo que hemos aprendido, pero también a recoger un par de peculiares que sucede cuando estás trabajando en un ejemplo más grande. Saltemos y trabajemos como ponerlo en marcha. Hemos cerrado nuestro último proyecto, abramos índice, y lo reiniciaremos todo porque a veces es bueno sólo recordar cómo va todo. Abrir índice, puede hacer doble clic para abrir un segundo archivo. Haga doble clic en ellos ambos, se abren por separado en styles.css esta pestaña, arrástrela por aquí , el html, me gusta volver a encender mi envoltorio, así que se envuelve, y te voy a arrastrar por ahí. Estamos listos. Lo vamos a volver a hacer, pero te vamos a mostrar algunos atajos también porque lo que hacemos es, creamos una <nav> y luego creamos solo <a> etiquetas con estas clases puestas. Pero recuerda en el último video, no podemos simplemente usar las <a> etiquetas. Tenemos que envolverlos en una <div> etiqueta. Las cosas de envolver, solo puedes empezar a escribirlo aquí y puedes decir en realidad quiero poner aquí, lo llamaremos botón de navegación, eso funcionaría. Pero entonces el <div's> allá y yo puedo cortarlo y lo puedo poner después de mi ahí, y se puede ver el lento proceso ahí. ¿ Estás listo para atajo? Lo que hacemos es resaltar este color. Vamos a envolver la selección. Te mostraré el largo camino. Vas a “Ver” y vas a “Paleta de comandos”. Ya lo hemos usado antes de una vez. Este tipo lo hace todo, es como el do-it-all. Lo que estamos buscando es, que debería haber esto. ¿ Es mayor que símbolo, ahí? Los corchetes de cierre, y aquí dentro hay un montón de cosas. El mío acaba de ser usado recientemente. Esa es la que quiero envolver con abreviatura. Eso es lo que quiero, pero no vas a tener eso ahí comienzas a escribir wrap, y lo corta a las cosas que puedes hacer que tienen la palabra wrap en él, y queremos esto encendido con abreviatura. Te mostraré el largo camino. Ahora bien, esta es la abreviatura. Ahora, piensa en Abreviatura como, ¿qué quiero nombrar a esta etiqueta? Me gustaría envolverlo en una <div> etiqueta llamada “botón nav”. Vas a ver qué está haciendo ahí abajo. Mira, qué guapo es eso. Entrar para confirmar. Hecho. Es sólo una cosa realmente útil. Echemos un vistazo a hacerlo una vez más con un poco de atajos extra. Destacarlo, luego en mi Mac, voy “Command Shift P.” Estoy asumiendo en una PC que es “Control Shift P.” Si no estás seguro, ve a “Ver”, es cualquier atajo que haya en tu PC. Volvamos atrás. Tratemos de que el flujo baje. Yo lo he envuelto, sintiéndome bien, Comando Shift P y porque ya está ahí, no tengo que hacer nada. Podrías escribir “Rep.” Estoy haciendo esto lento. Pero solo puedo presionar return en mi teclado y luego irme, quiero envolver esto en “nav button”. Suavizar entonces. Eso lo destruyó totalmente. No estaba mirando. Listo para el flujo. Flujo, resaltándolo, Comando Shift P, envolver con abreviatura, poner en “botón nav”, pulsar “Return”. Mira eso. Eso fue mejor. Destaca a este tipo, “Command Shift P”, “Return” y pongamos un punto, pongamos “botón de navegación”, y estamos haciendo algunas envolturas geniales. Se puede ver entrar en eso. A ver cuando hablo despacio. ¿ Eso ayuda para alguien? A lo mejor no. Yo lo estoy separando solo para tener muy claro lo que estamos haciendo. Tenemos tres botones. hemos envuelto todos en una <div> etiqueta. Echemos un vistazo a lo que hemos terminado. Voy a abrir en mis puertos porque estoy trabajando en otra cosa, básicamente lo voy a cerrar y luego volver a abrir de nuevo. Se va a abrir en este video de aquí, y lo he roto todo. Nos rompimos totalmente en un montón de cosas con nuestro código, así que vamos a pasar. Supongo que por eso quería hacerlo en su propia Ventana separada. Si lo estás haciendo al principio, puede ser más fácil, pero cuando estás agregando cosas más adelante, está este hackeo pasando para intentar reproponerlo o rearreglarlo. En realidad, ya hemos usado “botón de navegación”. Vamos a deshacernos de esto aquí. Estas <a> etiquetas, porque se está aplicando dos veces. Tratando de hacerlo dos veces. <a>Ya no lo necesitamos en estas etiquetas porque lo estamos usando en nuestra <div class>. Voy a deshacerme de todo esto, voy a golpear “Comando D” para deshacerme de ese. Nosotros no, casi. Voy a mi multi cursor. Lo estoy sosteniendo en mi tecla “Opción” en un Mac, o la tecla “Alt” en un PC. Ahora acaba de conseguir clases de Plano envueltas en estas <div> etiquetas con ese mismo estilo en ella. Echemos un vistazo ahora. Mejor. Lo siguiente es, vamos a meternos en la estaca lado a lado. Vamos a decir, ustedes amigos míos, ¿quién es ese? ¿"Botón Nav”? ¿ Tenemos clase de “botón de navegación”? “ Botón Nav”, va a ser, ¿cómo lo vamos a llamar? Vamos a decir que es Display, y está bloqueando por el momento, así que se está apilando a nuestro borde. El otro está en bloque de línea, aquí está ahí. Deberían alinearse uno al lado del otro. Enfriar. Ahora vamos a hacer el menú desplegable. Va a estar dentro de este libro en línea. Vamos a flotar por encima de él y se va a caer. Echemos un vistazo al código. Eso está bien. Reserva en línea, está dentro de esta <div> etiqueta llamada “botón de navegación”. El inicio, la apertura. Justo después de la <a tag> es donde voy a poner todo. Voy a ponerlo en unos retornos para que se vea bien. Ahora podemos simplemente hacer eso, agarrar ese, copiarlo, y poner tres botones dentro. Eso realmente funciona. No hay nada malo en eso. abren las etiquetas y se cierran, pero el tabbing es todo raro. Podría hacer clic con el botón derecho y decir, vamos a formatear la selección, pero quiero tratar de ser elegante y afinar nuestras habilidades. Yo solo hago estas cosas cuando gente está caminando detrás de ti y tú estás tratando de impresionarlos, eso es lo que hago. Porque me lleva un poco trabajar. A mí me gustaría una <div> etiqueta llamada “botón nav”. Dentro de eso, me gustaría algunas <a> etiquetas. ¿ Cuántos quieres? Quieres tres. Sé que esto no va a funcionar, pero digamos, hagámoslo. Hice lo que dije. Hacer “botón nav” y luego sólo veces la A por tres. Lo que puedes hacer es que vas a envolver todo esto. Se puede decir, abrir corchetes, cerrar corchetes. Haz todas estas y luego las veces todas por tres. No sólo la A, todos ellos. A veces, cuando elimines ese último bit tres, vuelve a escribirlo para que la abreviatura vuelva a aparecer, pulsa “Return”. Oye, estamos haciendo cosas. Multi cursores, vamos a poner en hash. Vamos a poner los tres pedacitos. Voy a agarrarlo del texto que tengo en tus archivos de ejercicios. Dentro de la etiqueta A, voy a pegar eso, Parts Delivery, y la última va a ser Solicitudes Callback. Yo los repaso mayormente en el lugar correcto. Echemos un vistazo donde terminan pasando. Entonces estás dentro y funcionó bien. Pero sé que esto necesitaba ir dentro de la etiqueta A ahí. Ahora lo genial al respecto es que este Div tiene una etiqueta A dentro de ella y es exactamente lo mismo que hacerlo de esta manera. Donde tenemos un Div con una etiqueta A dentro de ella exactamente lo mismo solo se ve un poco diferente aquí. Especialmente, cuando lo he roto. No lo rompí, sólo lo doblo en dos líneas. Hagamos esto un poco más ancho para que encaje. Muy bien, entonces tenemos a estos tipos, ¿qué les queremos hacer? Nosotros queremos apagarlos porque en este momento están apareciendo. ¿ Me he roto algo? A Div. Este código me ayudó a poner un Div de cierre justo ahí, que no es lo que quería. Aquí vamos. Entonces todo se ve bien ahora, apaguemos a estos tipos. Estos tipos necesitan estar dentro de algo que pueda apagar porque no lo es. Recuerda el largo camino, vista, paleta de comandos, pero vamos a usar un atajo. Estoy tratando de impresionarte aquí. Comando, turno, P. Mira eso, solo pasando el rato. El último uso recientemente fue [inaudible]. Genial, voy a teclearlo. Voy a llamar a este desplegable. Mira eso, vuelve a golpear. ¿ Qué tan casual? Míranos envolviendo etiquetas, luciendo bien, sangrando y apagémoslo. Vamos a decir desplegable, ¿es como lo llamé? ¿ Lo es? Diremos mostrar ninguno, vete amigo. Entonces ahora si lo guardo todo, se ha ido. Ahora, quiero volver a encenderlo. Por lo que me gustaría desplegable, volver a encender, por favor. Mostraré bloque, se convierte en un bloque que podemos ver, pero sólo si este botón de navegación se está colocando sobre, este botón de navegación. Entonces si el botón de navegación tiene una especie de clase de hover entonces haz esto, y anulará la pantalla de ninguna para convertirse en un bloque. No funciona. Bueno, funciona, pero el formato es un poco raro. Intentemos arreglar eso. Supongo que así se hizo eso. Eso fue algo difícil, solo lo recuerdo realmente porque soy maestra de ello. Lo que termino haciendo es terminar haciéndolo una vez, trabajando a través de un tutorial y luego copiarlo y pegarlo una y otra vez en muchos de mis proyectos. Entiendo cómo funciona, pero escribirlo cada vez, es bastante largo. Ni siquiera estoy seguro de cuánto tiempo estamos en este video todavía. Probablemente es qué? Estoy adivinando 10 minutos, tal vez. A lo mejor no tanto tiempo. Entonces para conseguir que se posicione, vamos a decir la posición, en lugar de ser relativos el uno al otro y todos sus amigos haremos posición como absoluta. Ojalá ahora se distanció, no es relativo a sus amigos y eso está funcionando. Estos pequeñitos que salen, para arreglarlos necesitamos encontrar nuestro botón de navegación. Está ahí. Recuerdo que hicimos esto antes de decir, ahora tu posición, familiar, vas a trabajar abajo. Tenemos que ser un poco más amplios. Tenemos que hacer algo de centración, pero eso es lo básico de ello. No es necesario ajustar mi índice Z porque las cosas están apareciendo después así que está arriba. Pero quizá tengamos que ir y decir, por si acaso, tu menú desplegable tiene un índice Z de uno, solo para obtenerlos, o 99 justo por encima de cero. Lo que queremos hacer ahora es que queremos que empuje un poco hacia abajo. No vamos a usar margen, recuerda porque el margen dejó un hueco que esta cosa cerró, así que vamos a usar relleno. Hacemos relleno top y vamos a sumar un poco, ¿cuánto? 20 píxeles y ver cómo va eso. Entrar ahí y queremos centrar todos estos botones de navegación. ¿ Puedo hacerlo solo al cuadro desplegable? Porque estos tipos están todos bien porque caben dentro de sus cajitas. Pero este tipo de aquí podríamos tener que decir, bueno pruébalo juntos. Por lo que toma una línea, puede ser centro. Eso se ajustará a todos los pequeños chicos internos también. Entonces eso es lindo. Podríamos hacer esas cajas más anchas. ¿ Podemos ir al menú desplegable? Dudo que podamos. Si decimos mezclar ancho de, digamos, 200 píxeles solo para ver si podemos hacerlo. Empezó a funcionar, pero no les está obligando a ser una talla, es darle a esa caja bonita y grande y les está permitiendo ser el tamaño que les guste. Eso podría funcionar si solo es texto, pero está haciendo que las cajas de tamaño extraño. Entonces sí y no, funcionó. Entonces vamos a necesitar un selector compuesto. Quiero darle estilo a estos botones de navegación, pero no a todos, solo a los que están dentro del desplegable. Entonces aquí hay un espacio para decir esta cosa dentro de esta cosa. Estás consiguiendo el ahorcamiento de ella. Yo quisiera decir que como un ancho de 100 pixeles, si es lo suficientemente grande como para caber a todos estos chicos. No es lo suficientemente grande. A 200 píxeles, probablemente demasiado grande. Yo levanto los dos. Va demasiado rápido. Aquí vamos. Totalmente hice el camino equivocado. Por lo que no son los desplegables los que están dentro de los botones de navegación, son los botones de navegación los que están dentro de los desplegables. Pasa a los mejores de nosotros. Aquí vamos. Ahora los 200 píxeles son demasiado grandes. Entonces quizá 90. No es lo suficientemente grande. Ciento veinte, bien, eso es perfect-ish. A lo mejor un poco más grande, voy a dejar eso en dos líneas. Si quisiéramos, porque esas líneas colindantes, podría usar margen pero se va a abrir un poco de huecos. Podría decir que el color de fondo de estos tipos va a ser color de fondo. Va a ser un poco diferente. Vamos a usar el blanco. Por lo que todos son blancos. Color del texto. Acuérdate de cambiar el color del texto Voy a usar esto. No funciona. Entonces tiene que ser, no tú. Debí haberla dejado ahí. Pero vamos a límites. Entonces si hay un desplegable dentro, pondré el color aquí abajo. Voy a decir que me gustaría esto, pero quiero que haya una etiqueta A que esté dentro de un botón de navegación, eso está dentro de un desplegable Quiero que hagas un color de magenta. Aquí tienes, ya estamos llegando. Entiendes lo que quiero decir. Ahora solo estoy jugando tratando de que se vea bien. Puedes agregar tu transición de flotación. Puedes jugar con tu margen moviéndolo hacia la izquierda si quieres. Yo me voy a parar ahí aunque porque este video se está haciendo largo y sólo estoy mucking por ahí. Son de 10 minutos para las 11:00 p.m. de la noche y probablemente apenas empiece a waffling. Entonces vamos a terminar ahí y te veré por la mañana. 69. Atajos, consejos y trucos útiles para acelerar el flujo de trabajo en código VS: Buenos días a todos. Este video va a ser como un video de consejos y trucos. Vamos a ver atajos geniales que no hemos cubierto antes, además al final de este video, tiraré los que hemos cubierto. Sólo para que haya un video con todas las cosas en un pequeño lugar. Nuestro primer pequeño atajo va a ser la forma de cortar las etiquetas de los padres. Voy a dar clic en el menú desplegable, he hecho clic en la palabra in situ. En un Mac, es Command, Ctrl, y Shift. Es un atajo raro pero vale la pena aprender. Comando, Ctrl, Shift en un Mac, si estás en un PC, es Ctrl y Alt. Sostén los dos hacia abajo. Sosténgalos hacia abajo y utilizas la flecha derecha, y puedes verla expandida. Si estaban en mi selección estaba parpadeando aquí dentro, se expande para agarrar la palabra. a golpear la flecha derecha. Esta son tus flechas de teclado como que están en tu teclado, hazlo de nuevo agarra todo dentro de esa etiqueta, agarra una más, agarra al padre de esa etiqueta entera que es mi a, derecha otra vez, agarra el div, agarra toda la línea, agarra todo el camino hasta aquí, agarra el desplegable. Es sólo una buena expansión. Puedes usar la flecha izquierda para volver a entrar. A menudo si quieres agarrar todo el desplegable, solo tienes que hacer clic ahí y aplastar hasta agarrar todo el asunto. Entonces puedes eliminarlo o envolverlo con otra etiqueta. Comando, Ctrl, Shift en un Mac y en un PC es sólo Shift y Alt, y luego usa esa pequeña tecla de flecha a la derecha, y luego a la izquierda si necesitas volver a entrar. Sugerencia útil número 1. Sugerencia útil número 2 es líneas plegables. Si pasas por ahí, ¿ puedes ver estas cosas aquí arriba? Significa que en realidad puedo, vamos a cerrar la cabeza, flotar arriba. ven esta pequeña línea aquí. Se puede ver que se abre ahí y se cierra en la cabeza. Si hago clic en el pequeño menos, solo lo colapsa. Se puede cerrar el cuerpo, y yo solo consigo una bonita y sencilla página HTML. Realmente útil si quieres. No estoy trabajando en la cabeza, la voy a cerrar. No estoy trabajando en el principal, solo estoy trabajando en estas tarjetas. No los testimonios, solo mantén todo ordenado. Están todos ahí. Ya verás que el código no desaparece. Va de 58-68, simplemente lo colapsa. Puedes hacer lo mismo por esto si tienes algunas cosas realmente largas. Nunca lo hago realmente en mi CSS. Pero sí, el código colapsando. Útil. El consejo número 3 está actualizando todas las ocurrencias de algo. Digamos que voy a regañar todo esto hacia abajo. Digamos botón de navegación. Lo he deletreado mal o quiero cambiarlo. Por aquí en nav button, voy a hacer un hallazgo. Comando F en un Mac, Ctrl F en un PC, y botón de navegación. Ese no es realmente el atajo. El comando F estaba apenas en la edición. Encuentra, he encontrado mi botón de navegación, y digamos que lo he deletreado mal. mayúsculas y minúsculas es muy importante. No puedes usar arriba por aquí y luego abajo en HTML nuevo, no igualarán. A veces a la gente le gusta usar esta cosa llamada camel-case, donde empieza bajo y luego se hace grande en el medio. Me encanta camel-caso, gran palabra. Pero como lo he cambiado aquí, necesita actualizarse por aquí. lo que puedo hacerlo solo encuentra uno de ellos, y sé que está a lo largo de esta página, así que voy a hacer clic derecho en él y decir, vamos a cambiar todas las ocurrencias. Entonces lo voy a eliminar, y luego voy a escribir la versión adecuada. Enfriar. Una forma rápida de actualizarlos a todos. Voy a deshacer eso porque no quiero destrozarlo. La otra cosa que podríamos hacer es, está atada a esto lo hemos aprendido antes, es hacer click 1 y pulsar Comando D o Ctrl D en una PC. Simplemente salta hacia abajo recuerda, y agarra la siguiente ocurrencia de eso. Porque a veces no se quiere cambiar todo el documento de una vez, se quiere ir, sólo voy a cambiar este hashtag pero por estos tres, no por todos ellos. No es un hashtag, sólo el signo de la libra. Pero Comando D D D no es la forma rápida y fácil de agarrarlos a todos y decir, ahora se va a ir a la página de contacto con nosotros. Esa es una manera rápida y fácil. Pero ya lo hemos hecho antes. Esa es la punta número 3, pasemos a la cuarta. Este siguiente truco es una manera de salvar toda la molestia. Nos olvidamos, me olvido todo el tiempo para realmente guardar estos dos documentos. File, Save All, y vas en tus pruebas, eres como si no estuviera funcionando entonces olvidas que no has guardado. Digamos que queremos actualizar este enlace de navegación aquí. Lo que podemos hacer es encender archivo y encender. Debería estar en VS Code, e ir a guardar automáticamente. Ahora, si cambio esto, mira esto, lo voy a hacer todo en mayúsculas. Hazlo parejo en mayúsculas. Reserva en línea. puede ver que es solo lenta pero seguramente siempre auto saving. De la misma manera entonces voy y cambio su h1 aquí. ¿ Dónde está mi h1? Yo lo voy a hacer negro. Ponga mi punto y coma. Se está guardando y actualizando automáticamente. Auto-saving, me voy a ir por el resto de este curso. Voy a apagar los cambios que he hecho, algunos deshacer. Deshacer es Editar, Deshacer. Ya está guardado. No tengo que hacer nada. Hagamos nuevo esta pantalla completa y pasemos al siguiente paso. El siguiente se llama Zen Mode. Estás codificando, no necesitas toda esta basura y todo lo demás. Lo que puedes hacer es ir a Ver, y puedes ir a Apariencia, y puedes ir al Modo Zen. Entonces recuerda ese atajo. Es una que vale la pena anotar. En un Mac es Command, K, luego Z. En un PC, es Ctrl, K, Z. Te sientes un zen. Pantalla completa consigue mucho más espacio para mi código, y he quitado todos los paneles en el lateral. Para salir de ella tienes que golpear la tecla Esc. En la parte superior izquierda de tu teclado dos veces, extrañamente. Toca dos veces eso y vuelves a salir. Ahora, ese atajo Comando, K, Z, es uno raro. No vemos demasiados programas que usen atajos de esa manera. El modo en que funciona es que no es Comando, K, y luego seguir sosteniendo Comando, Z. Tienes que soltar los comandos, ver esto. Es lo mismo para un PC. Mantienes presionada ya sea tu Comando, desde el Mac, Ctrl en un PC, punta K, luego inicia todos los atajos yendo. Está esperando la segunda cosa. Hay unas cuantas diferentes. Comando, K es para muchos atajos, lo pone en marcha. Después tienes que soltar la tecla Comando y presionar Z. No puedes esperar tanto tiempo mientras estás charlando. Comando K y luego presionar Z. No puedes mantener presionada la tecla Comando y tocar ambas teclas. Lo mismo con la tecla Ctrl en un PC. ¿Conseguir lo que quiero decir? ¿ Cómo salimos? Esc, Esc, no más zen. El siguiente va a ser pan rallado. Hagamos clic dentro del menú desplegable de mi botón de navegación. Voy a ir a ver y quiero encender pan rallado. ¿ Dónde estás? Por ahí abajo. migas de pan son paralelas en la parte superior y es realmente útil cuando estás tratando de construir como selectores compuestos para saber dónde estás en el mundo. Voy a cerrar esto para poder ver mis migas de pan completas. Mi texto es igual de acercado. Entonces Comando, menos, mi teclado, probablemente así se ve el tuyo. Se trata de Ctrl, menos, en una PC, Ctrl, plus, para acercar, para hacer tu código más grande o más pequeño dependiendo de lo que necesites. Voy a dejar el mío sobre eso de grande. Me dice que estoy dentro de una etiqueta que está dentro de un botón de navegación de código div, que está dentro de un desplegable de código div. Aquí lo hemos dejado bastante claro. No eres tan gracioso acerca de hacer todo espaciado bien así que no es tan fácil de ver. Si quisiera algo de stylus aquí, podría decir que quiero un selector compuesto que esté iniciando el desplegable div y el botón div que está dentro de la etiqueta a. Eso son migas de pan. Lo dejaremos encendido o apagado para el resto, no estoy seguro. Yo lo uso a veces, depende. Si es mi propio sitio, a menudo no lo hago. O bien un sitio en el que no he trabajado desde hace mucho tiempo y estoy como, ni siquiera sé cómo construí esta cosa. Bueno, cómo se construye. Donde está realmente desordenado aquí abajo. Entonces hay migas de pan. Otro cool para documentos más largos está bajo vista y este es uno llamado minimapa. Voy a volver a dividir mi pantalla. Entonces voy a poner los estilos por aquí y tengo mi HTML por aquí. Tienes un minimap para ambos paneles. Eso todo es, es el minimap. Está muy claro lo que hace. Se puede ver para el CSS, es página bastante larga. Significa que puedo saltar al fondo. El nuestro no es demasiado grande, en serio, el nuestro es bastante pequeño. Te meterás en enormes webs con montones de montones de código. Simplemente puedes usar el minimap para desplazarse. Lo mismo con aquí, quiero bajar al pie de página. No lo necesito por el momento porque mi sitio web no es lo suficientemente grande. Entonces voy a apagar el minimap. Eso es todo por los que no has visto antes. Voy a cubrir los que tienes, sólo que están todos en un solo lugar. Envolver etiquetas, lo hemos hecho con diversos éxitos a lo largo del curso. Este desplegable aquí, quiero envolver toda esta etiqueta. Voy a empezar con todos mis atajos, Ctrl, Comando, Mayús, y la flecha derecha para agarrar todo el desplegable. Ya nos enteramos de eso. Recuerda que es Ctrl, Alt, flecha derecha en un PC. Agarra todo el asunto y luego yo estoy como, quiero envolverlo todo. En Mac, es Command, Shift, P, y obtienes nuestra línea de comando. En realidad, aquí se llama la paleta de comandos. Ese es el atajo ahí. En una PC, paleta Command, estoy asumiendo que es Ctrl, Shift, P en una PC. Pero ten un poco de mirada a la vista, paleta de comandos. Queremos envolver. Haga clic en él. Entonces puedo envolverlo en algo. Voy a ponerlo en una nueva etiqueta div. Puedes usar tu código de emisor aquí, por lo que no tienes que escribir clase div igual. Yo quiero envolverlo en mis nuevos bloques. Se puede ver aquí abajo todo está sentado y es encantador. Ahora, hay otras cosas que puedes conseguir que esa paleta de comandos haga, solo uso la etiqueta rep muy a menudo. Echemos un vistazo. Abre la paleta de comandos y puedes echar un vistazo aquí. Aquí hay un montón de cosas que podrías decidir que es más fácil. En lugar de tratar de averiguar cuál es el atajo de este menú, en realidad puedes ir, ¿qué quiero aquí? Digamos que quiero salvar todo porque no se me ocurre uno bueno de arriba en la cabeza. Se quiere guardar todo y no se quiere utilizar los atajos. Lo que puedes hacer es decir, Comando, Turno, P, y luego hacer guardar todo. Está ejecutando el mismo comando que hacer clic en esto. A muchos desarrolladores les gustaría hacer ese método. El genial de esto es que si me meto de nuevo en ello, se puede ver que es el último material menos usado recientemente. Significa que no tengo que entrar y escribirlo y encontrarlo de nuevo. Yo sólo puedo ir Comando, P, y luego golpear “Guardar todo” y eso está funcionando. Multicursores, hemos cubierto, y mi Mac en este momento, puedes cambiar esto. Pero bajo selección, o será Comando click en un Mac o mi caso es Opción, click para multicursor. En un PC, es la tecla Alt. Opción en un Mac, Alt en un PC, y significa que puedo poner en un montón de diferentes. Voy a añadir una clase aquí. Quiero que el cursor parpadee ahí. También quiero agregarla a éste sin razón alguna. Entonces lo sumaré para este. Yo voy a teclear en clase, y se puede ver que se lo está aplicando a todas estas cosas. Tan multicursor, útil. Otro muy práctico, en lugar de hacer multicursor donde tienes que mantener presionada la tecla Opción, y hacer clic, tienes que ser muy específico con tu ratón, y en realidad tienes que estar usando tu ratón. Todo el tiempo cuando estoy codificando, no quiero tocar el ratón, solo quiero usar mis atajos de teclado. Digamos que quiero agregar un cambio este hashtag, así que voy a hacer clic en él y voy a, en un Mac, voy a mantener presionada Comando y Opción y golpear mi flecha abajo dos veces. Ahora puedo pasar y hacer contacto con nosotros. Eso lo hemos hecho un par de veces, pero hay momentos en los que necesitas esto. A lo mejor el Comando, D o Ctrl, D, en una PC. En un PC, es algo muy parecido. Haz click donde quieras empezar. la tecla Alt y la tecla Ctrl y presione la flecha hacia abajo. Lo he hecho dos veces, y te dan multicursores. Los dos últimos, limpiando todo. Si tienes pedacitos por todo el lugar y sangría no está funcionando del todo y estás como, ojalá tuviera todo esto limpiado, puedes agarrarlo todo fácilmente e ir a hacer clic derecho y puedes formatear todo el documento, pero probablemente sea más común solo formatear la selección. Simplemente ordena todo. Hace que todo se vea sangrada. No coincide con todo, se puede ver que lo empujó a lo largo hasta el borde aquí. Cuando estés haciendo todo el asunto, podrías seleccionar todo el trozo y hacer esa selección de formato. Sí lo cambia un poco de lo que podrías haber querido naturalmente que fuera. puede ver que todo está sangrada muy bien. Encuentro cuando estoy abriendo tal vez un documento en el que alguien más está trabajando o es una plantilla, y es un gran desastre. Lo primero que hago, seleccionarlo todo, formatearlo, para que al menos pueda ver alguna estructura. El último es Word Wrap. Se apaga cada vez. Enciéndelo solo para que las líneas se rompan en el borde aquí, no hacia el final de la línea. Pero terminas con estos divertidos huecos por aquí. Depende de ti. Eso es todo por nuestras cosas acelerando consejos y trucos hoja de trucos. Yo metí las palabras clave en ese título. Pero espero que hayas encontrado algunas cosas útiles. Al igual que todos los buenos atajos, solo funcionan si los practicas un rato. A lo mejor escoge uno o dos de esos al día y vete, hoy voy a hacer el día multicursor y, solo hazlo. Al final de un par de días, si eres como, hombre, sigue siendo sólo doloroso, entonces nunca estuvo destinado a serlo. Es un atajo que nunca se supone que recuerdes. Simplemente escoge otro y ve bien, voy a hacer eso hoy porque va a ahorrarme un poco de tiempo cada día cuando estoy codificando, y puedo usar ese tiempo extra para hacer otro en Dan's cursos, eso es lo que harás. Te veré en el siguiente video. 70. Cómo añadir una imagen de fondo grande a un diseño de sitio web: Hola, ahí. Este video, vamos a poner al león gigante en el fondo, así que no hay león, león grande. ¿ Por qué pasarías el rato? Porque hemos hecho imágenes de fondo. Vamos a hacer algo ligeramente diferente, vamos a hacer posicionamiento y no repetir y si te interesa, vamos a hacer las cosas del sitio web de codificación VS durante aproximadamente los primeros tres minutos. Notarás que hay mucho más tiempo en este video. Durante los últimos minutos, en realidad te mostraremos cómo construirlo en Photoshop con esta transparencia y sombra de gota. En realidad no es tan esencial, así que ten cuidado los primeros tres minutos y luego salta si no te importa Photoshop, pero si lo haces, vamos a hacer un pequeño viaje de campo, así que necesitarás una nota de tus padres. El autobús llega a los tres minutos a este video. Estén listos. Te veré ahí. Tengo mi página de índice abierta y mi style.css abierta. Quiero agregar mi imagen de fondo. Ahora [inaudible] pero no puedo agregar dos imágenes de fondo y estás como, “No tenemos una imagen de fondo”, pero recuerda, extrañamente, tenemos que usar el gradiente como imagen de fondo. No podemos hacer dos en la etiqueta del cuerpo. Lo que vamos a hacer es agarrar esta imagen de fondo, que es mi gradiente. Vamos a agregarlo a la etiqueta HTML. No vamos a estar usando eso actualmente porque, creo que estábamos haciendo un 100 por ciento, así que si no lo tienes, tienes que agregar la etiqueta HTML y funciona bien. Echa un vistazo, todavía funciona, tengo mi gradiente de fondo, bonito. Por aquí, llego a hacer mi otro gradiente de fondo, fondo, no gradiente, imagen de fondo. Recuerda su URL y necesito ir y agregar la imagen a mi carpeta local. En tus Archivos de Ejercicio bajo el Proyecto 2, hay uno ahí dentro llamado fondo de león imagen. Es un poco difícil de ver. ¿Se puede ver en el video? Yo hice esto. Te mostraré cómo hacer esto al final del video, pero solo es cosa de fondo transparente. Voy a copiarlo, ponerlo en mi Escritorio, Proyecto 2, dentro de Imágenes. Vamos a pegar aquí y vamos a ir por aquí. Iremos a imágenes slash o es imagen de fondo león. Vamos a asegurarnos de que entre el punto y coma y vamos a ver cómo se ve. Tipo de cómo lo quieres. Podrías decidir que eso es impresionante y así es como quieres hacerlo. Yo quiero sólo uno en el medio. Se puede hacer imagen de fondo o posición de fondo. Se puede hacer un top de posición hacia atrás en su lugar. Yo sólo voy a ir a hacerlo de arriba y centro. Es top, está centrado, quiero que no se repita. En realidad, solo desactiva eso, porque va a tener más sentido con esto apagado. Haremos repetición de antecedentes. Voy a ir a ninguno, oh no, no es una repetición. Bondad a la sugerencia. Sin repetir, solo termina donde esté tu sitio web, solo termina en el lado izquierdo. Ahora, quiero volver a encender esto. Ah, atajo, no agregué la última hoja de atajos o el video de atajo fue nuestra barra inversa de comando. Lo seleccionas, mantienes el control en un PC, comandas en un Mac y golpeas barra inclinada hacia adelante. Mi barra inclinada hacia adelante está abajo por el signo de interrogación. Enfriar. Ahora, es donde quiero que esté. Bonito. En realidad, lo que quiero hacer es darle la vuelta. Lo haremos ahora cuando te enseñemos realmente cómo hacerlo porque puedes ver, está bien con la sombra de gota alrededor de la espalda, pero puedes ver a través del gradiente de fondo. Ahora bien, si no tienes habilidades de Photoshop, no te preocupes. Ya tengo la imagen obviamente lista para ti y puedes saltar al siguiente video, pero si quieres ver cómo se hace en Photoshop, ahí es donde buscar. Te mostraré en un segundo. Vuelve enseguida. Tengo Photoshop abierto. Estoy usando CC 2019. Funcionará en casi todas las versiones de Photoshop. ¿Por qué estamos en Photoshop? Siento que necesitábamos un viaje escolar. Aléjate de VS Code solo por la mitad del video. Al menos, necesitaba hacerlo, de todos modos. Sé que hago videos como este y si uso cosas como media línea invisible, gente preguntará: “¿Cómo lo hiciste?” por lo que también estoy respondiendo su pregunta aquí mismo. Si eres como, “No me importa Photoshop. Yo quiero volver a mi proyecto web”, podrías saltarte totalmente ahora. No vamos a hacer nada en código ni en web, sólo estamos haciendo una imagen. Si quieres hacerlo, hagámoslo. Vamos a Archivo, Nuevo. Por aquí, cámbialo a Pixeles y escoge una talla. Estoy haciendo mi línea bastante grande. Recuerda que mi página web es de alrededor de 1024 de ancho, así que estoy haciendo este 1000, gran plaza. La resolución realmente no importa, lo que realmente importa es RGB. Haga clic en eso. Demos clic en “Crear”. Tenemos una caja grande blanca. Vamos a ir al Archivo. Vamos a ir a Place Embedded. Vamos a traer algo de tus Archivos de Ejercicio bajo el Proyecto 2, y se llama, icono león negro. Haga clic en “Colocar”. El genial al respecto, es que es un SVG, lo que significa Gráfico Vectorial Escalable. Significa que puedo hacer esto. Realmente no importa lo grande que sea, puedo hacerlo más grande. Si estás usando 2019 y superiores, probablemente ya sabrás que solo agarras las esquinas y arrastras, no tienes que mantener presionadas las teclas. Podría mantener presionada la tecla de opción en un Mac, tecla alt en un PC, para que vaya desde el centro. Si estás usando CS6 o una versión realmente antigua, tienes que mantener pulsado el turno para asegurarte de que escala sin hacer esa distorsión. El mío lo va a llenar ahí. Voy a hacer el mío un poco más pequeño porque necesito la sombra de gota para dar la vuelta al exterior. Yo he pegado retorno. Lo que podría hacer antes de ir más allá, es que voy a ir a Editar y voy a ir a, lo siento, Editar par y vamos a ir a Transform y vamos a voltear horizontalmente, porque en mi actual, yo siente como si se estuviera enfrentando de la manera equivocada. Se enfrenta a lo mismo que el logotipo, pero está escondido detrás de todo eso. Yo los volteé a través. Le vamos a añadir una sombra de gota. Con eso seleccionado en tu panel Capas, ve a fx, vamos a ir a Drop Shadow. Sí, Drop Shadows, vamos a darle la vuelta, para que todos podamos ver la opacidad y luego para que todos podamos ver la opacidad y luego la principal herramienta con la que vas a jugar es Distancia y qué tan lejos se siente esa sombra gota como si estuviera lejos de la sujeto y luego el Tamaño es lo borroso que es. Si golpeo el “Tamaño” abajo a cero, se puede ver, es uno muy fuerte, crujiente, de borde. En mi caso, ya lo he metido. Yo quiero que ambos sean bastante bajos. El Distancia es bastante bajo, el Tamaño bastante bajo, y es esta pequeña sombra de gota y tal vez un poco más grande en cuanto al tamaño pero más flufante. Voy a tener la Opacidad bastante baja, que va a hacer bastante difícil de seguir en este tutorial, porque va a ser súper baja. Apenas lo puedes ver ahí ahora, pero definitivamente está ahí. Hagamos click en “Ok”. Ahora, el truco mayor es, de alguna manera, encenderse, porque hemos permitido la opacidad de esta capa. Todo se apaga. Ahí es donde viene éste. Todos en Photoshop dicen : “¿Cuál es la diferencia entre estos dos?” y estás como, “Hacen lo mismo excepto cuando tienes una capa que te gustaría bajar la opacidad, pero no el Efecto”. Echa un vistazo a esto. Poner en el Relleno hacia abajo a cero. Se puede ver la capa real en sí misma rechazada, pero el Efecto sigue ahí, ya las puedes ver. Lo siguiente que quiero hacer antes de exportarlo, es que no quiero este fondo blanco, así que con él seleccionado, voy a golpear en mi papelera y eso está listo para salir. Todo lo que necesito hacer es asegurarme de que escojo el formato de archivo correcto. Nosotros vamos a ir a Archivo, yo voy a ir a Exportar, Exportar Como, pero JPG, sin transparencia, mal. Vuelve a meter el blanco, estás como, “Vete”. El que quiero es PNG. ¿ Por qué no estoy usando SVG? Porque SVG es bueno para los gráficos vectoriales, todas esas cosas de borde duro. Cuando empiezo a meterme en este asunto de fondo borroso, simplemente no va a funcionar. De acuerdo, entonces PNG. Ahora, también, lo que podría hacer por este PNG es que este PNG tiene muy poca información en él. Tiene unos grises, eso es todo, y algunos bloques transparentes. Puedo usar el archivo más pequeño que es solo PNG de 8 bits. Va a hacer los tamaños de archivo, echar un vistazo, así que va de 83 a 46, y no hay diferencia visual. Si estás lidiando con una imagen real de súper alta calidad, quieres apagarla y lo predeterminado es, qué es, de 16 bits. Perdón por ello. Simplemente enciende 8 bits, estarás bien. PNG, ¿dónde lo voy a meter? Voy a pegarlo en mi Escritorio en mis archivos de Project 2 en mis Imágenes. Voy a renombrarlo, imagen de fondo león, ese es el que teníamos antes. Este tipo es el mismo, pero está enfrentando al revés. Hagamos clic en “Guardar” y Reemplácelo. Dale un segundo. Echemos un vistazo a nuestra versión. Oh, mira eso, ahí está nuestro tipo. Está en segundo plano y está enfrentando el camino correcto o nuestro camino. Así es como hacer ese tipo de cosas. El cool al respecto es que se muestra a través del gradiente en el fondo. Por supuesto, si no tuvieras un gradiente, solo un color sólido, realidad podrías simplemente poner ese color sólido en, en Photoshop. Hice una nueva capa, la puse debajo. Puedes ir a Imagen, perdón, Editar, Rellenar, y con esa capa seleccionada, puedes escoger un color y en mi caso, escojo “Color” y puedes pasar y tal vez teclear el número hexadecimal que estás usando. Ni siquiera puedo recordar cuál es uno, pero eso es lo que podrías hacer. Podría arrastrarlo por ahí. Haga clic en “Ok”. Se podría poner eso ahí, entonces podría ir como JPG porque no hay transparencia. Muy bien, nuestro viaje de campo por la parte de atrás en el autobús. Pasemos al siguiente video. 71. Cómo enlazar dos páginas en diseño web HTML: Es hora de nuestra página Contáctanos y la enlazaremos con la página de inicio. Saltarán a través usando nuestra navegación. Creo que he borrado una de las letras del botón de contacto pero básicamente, vamos a duplicar la página de inicio y te voy a mostrar lo que hay que buscar cuando estés duplicando páginas y luego te voy a mostrar como enlazar ellos juntos en este pequeño video. Vamos a saltar. Vamos a crear nuestra página Contáctenos. Ahora, no iría a File new y empezaría hacer una nueva página HTML porque no tiene sentido volver a escribir todo esto. Porque nuestra página Contáctenos utiliza el mismo logo y el mismo nav a lo largo de la parte superior y tener un dulce menú desplegable. Hay montones de pedacitos que quiero reutilizar. Básicamente, sólo voy a cambiar este trozo en el medio. Aquí está. Página de índice, asegúrate de que esté seleccionada. Archivo, Guardar como, darle un nuevo nombre. Voy a llamar a la mía Contáctanos o Contáctanos. Asegúrese de que no haya espacios, guiones o guiones bajos. A la única página que tienes que llamar explícitamente a algo como índice se tiene que llamar índice. Todo lo demás depende de ti. Enfriar. Lo primero que debes hacer cada vez que dupliques una página es cambiar el título. No quieres dos páginas con el mismo título. Es muy difícil saber qué poner en la página Contáctenos, pongamos una dirección, detalles, número de teléfono, ese tipo de cosas. Si la gente está buscando el número de teléfono de Roar Cycle, podría llegar a la página correcta sin tener que ir a la página principal y volver a salir. Deberíamos estar agregando nuestra meta descripción. No lo hemos hecho a toda esta página web. Ese es nuestro verdadero gran descuido para mí. Es una de esas cosas que necesitas, donde es realmente bueno tener pero no esencial. Meta descripción no tiene un atajo realmente bueno. No es que solo vaya a teclear meta y golpear tab por el momento al menos, o no puedo resolver una manera. El meta descripción, solo lo robas de un sitio antiguo. Eso es lo que hago. Pero tiene la misma estructura que la ventana gráfica, como esta de arriba aquí. Esa a menudo es una buena manera de hacer trampa. Meta nombre, este se llama descripción. Tiene lo mismo, dice contenido, y ahí es donde va la meta descripción. Deberían ser unos 150 caracteres, así que empezaríamos a hablar de los datos de contacto de, no sé cómo escribirías 150 caracteres. Lo que podría hacer es acelerar esto y te mostraré lo que he puesto. Ya estoy de vuelta. Asegúrate de que al final de tu meta descripción haya unos corchetes angulares de cierre. Voy a encender mi envoltorio. Añadí esto para que si hubo un resultado de búsqueda, recuerden, nuestros resultados de búsqueda, la meta descripción es esta cosa, es esta cosa gris de aquí. Ya sabes cuando estás trabajando en un sitio web, a menudo, no necesitas entrar en un sitio como, de acuerdo. Podrás conocer toda la información desde la descripción. Lo que hemos hecho por nuestra gente. Necesito volver atrás y editar la página del índice, lo cual no voy a hacer, debería. Ahora bien, algo interesante es quién es el responsable de esto? Digamos que eres el dueño de Ruge Cycles. Eres responsable de escribir todas las metadescripciones. Encuentro que es fácil hacerlo sobre la marcha. No te vayas, lo haré más tarde. Nunca lo harás. Esa ha sido mi experiencia. Si estás trabajando con un cliente, pregúntale o diles que tienen que decir que es crítico, necesito el título de cada página y decirles que tiene que ser corto, tiene que ser este muchos personajes, necesita tener esta buena descripciones en ella, y necesitas una descripción correspondiente para cada página. Puede ser un poco difícil sacar meta descripciones de los clientes, pero tu página puede vivir sin una descripción, pero no puede vivir sin un título, o al menos, si realmente querías clasificar en cualquier buscador. De hecho conectemos las páginas. Vamos a necesitar dos de ellos abiertos. Voy a cerrar mi CSS y voy a tener la página de índice y la página Contáctenos. Yo los voy a separar por aquí. Tengo uno y el otro. Conectemos la página de inicio. Vamos a conectarlo cuando alguien usa este desplegable, bueno, en realidad usa esto, la página Contáctenos porque el momento no va a ninguna parte, va al hash. Sólo usamos ese símbolo de libra porque significa algunos navegadores, si haces clic en un botón y no hay nada aquí dentro, se le ocurrirá un error, y eso no es realmente lo que quieres. Se quiere estar probando solo sin errores. Encontremos nuestro contacto con nosotros. Ahí está. En lugar de hash, vamos a decir eliminarte, vamos a empezar a escribir en contacto y ojalá, vaya, ¿te refieres a esta página? Sí lo hago. Vamos a ahorrar. Vamos a previsualizar esto en el navegador. Vamos a dar click en él y mirar eso. Hemos ido a la página Contáctenos. Nada ha cambiado. Ves en la parte superior aquí, eso cambió. Hagamos alguna diferencia obvia. Vayamos a Contáctenos, y por aquí, estas dos cajas de héroes, ya no quiero. Ahí hay uno, así que me voy a deshacer de todo en lo principal. Adiós. Vamos a guardarlo. Esa es una gran diferencia, echemos un vistazo ahora. Volvamos atrás. Con mi página de índice, podemos dar click en Contactar y salta a la página Contáctanos. Ahora, queremos volver a la página principal. Algunas páginas tienen casa y eso está bien. Se puede tener un botón de inicio. La mayoría de los sitios web sin embargo, solo tienes que hacer clic en el logotipo. Podría haber experimentado eso. Para agregar un enlace a nuestro logotipo, vamos a envolver esta imagen en una etiqueta A. Vamos a envolverlo. Vamos a usar nuestro dulce nuevo atajo. Voy a encender el envolver, envoltura de palabras. Voy a seleccionar todo eso. Voy a usar Command shift P o Control shift P en un PC, y luego me envolveré con abreviatura. Podría tener que escribir Wrap y lo vamos a envolver en una etiqueta A, y no voy a darle nada más. Sólo voy a llamarlo A tag, pulsa Enter en mi teclado. Ya puedes ver, este color separado, por lo que te hace fácil ver. Esta imagen ahora está envuelta en una etiqueta A. ¿ A dónde se va a ir? Se va a ir al índice. Vamos a guardarlo y vamos a tener un pequeño cheque rápido. En realidad, volvamos a la página principal. No está funcionando. Debería haber guardado auto. HOFU. El imagen tiene una etiqueta A envuelta alrededor de ella. Haga clic en él, sí funciona. Queremos que sea por ambos lados. Por el momento, se hace clic en el logotipo, en la página de índice, se remonta al logotipo, que no es del todo lo que queremos. Vamos a agarrar todo ese asunto. ¿Dónde está ese logotipo? Logo empieza ahí, termina ahí. Voy a copiarlo y pegarlo en ambas páginas. ¿ Dónde está el logo? Está ahí, va a reemplazar todo ese asunto. Está en ambos. Ahora, vamos a darle una vuelta. Vayamos a nuestras pruebas. Si hago click en Contactar, no se conectó. Ni siquiera sabía cómo voy a romper eso. Volvamos a la página de inicio. Contacto, Página de inicio. Hay un poco de drama de como lo haces en uno y tienes que copiarlo y pegarlo en ambos con la navegación. Ya es bastante fácil. Se puede seleccionar toda la navegación o todo este trozo o todo el encabezado. Agarra ese encabezado entero y cópielo y péguelo en ambos. No va a ser enorme Java para nuestro sitio porque solo son seis botones. Potencialmente sólo tenemos seis o siete u ocho páginas. Lo siguiente que quiero hacer es realmente agregar algún contenido a nuestra página web. Vamos a ponerlo en el principal. Ahora, esto va a tropezar con un problema. Hice esto a propósito, lo prometo. Tenemos un problema donde main hace algunas cosas. Dijimos principal ser una altura, que está perfectamente bien para lo que quiero, una altura mínima. Pero dijimos hacer algunas cosas como flex box y artículos de centro porque queríamos hacer algunas cosas divertidas en nuestra página de inicio donde queríamos que estos tipos se sentaran uno al lado del otro. Hicimos algunas cosas específicas a main. El problema es que no quiero hacer esos a main ahora, pero quiero seguir usando main, así que podemos o llamar a esta sección una ahora y sección de estilo por aquí, o hacemos lo que todo buen diseñador web que se pierde, cualquier especie de persona en cualquier lugar de una computadora lo hace. Terminamos haciendo cosas como solo llamémoslo Principal 2, y tenemos otra llamada Principal 2 por aquí. Ya lo has hecho, has llamado a tu cosa final. Serías como, es mi documento final y lo llamas final, y es como la maldición de la muerte. Te ríes porque lo has hecho. Tú lo llamas Final 2, incluso, tienes Final Final en tu computadora en alguna parte, apuesto. Sí. En ocasiones terminas con Main 2. Ahora, la cosa es que no podemos llamar a esto Main 2 porque main es una etiqueta HTML real como cabecera, está predefinido, por lo que necesitamos llamarlo. Necesitas hacer esto. Necesitas decir que este se llama Main 2, por lo que necesita ser una clase div llamada Main 2. Hay algunas otras formas de hacer esto, es lo que vamos a hacer por el momento. Es como el realismo, también conocido como mala codificación. Principal 2. ¿Qué queremos hacer para Main 2? Aquí, vamos a darle estilo. La otra cosa que realmente quiero para Main 2 es darle una altura mínima para que no se aplasta. Eso va a hacer bien. Creo que necesitamos que algunos nos contacten. Probablemente necesitamos algo de relleno en la parte superior, pero ya veremos cómo va. Añadamos aquí, un H1 y debajo de eso, una etiqueta P. Vamos a copiar algo de texto de nuestro proyecto a archivo de texto. El H1 se llama Contáctenos. De nuevo, solo escribiré eso ahí dentro. Contáctanos, recuerda, no puedo ver mis dedos cuando estoy escribiendo. ve bonito y ordenado. Vamos a comprobarlo en el navegador, demasiado cerca de la parte superior. Podría simplemente agregar Principal 2, algo de relleno en la parte superior, por favor, amigo. Padding-top, 150. Probablemente demasiado. Demasiado. 50. Ahí vamos. En realidad, antes de que nos vayamos, vamos a adivinar, darle el por ejemplo. Ignoremos esto. Finjamos que Main 2 no existe, y sólo estamos usando la etiqueta principal otra vez. Principal, éste de aquí necesita terminar con principal, pero predefinido, prefabricado. Funcionó en la Página 1, la página de inicio, pero veamos qué hace en esta página. Ya ves, es flexión, así que significa que se pega a ella lado y tú eres como, no es lo que yo quiero. Por eso tenemos esta caja separada. Acabo de explicar por qué sin mostrarte realmente que los malos resultados. Principal 2. Pasemos al siguiente video. Empezaremos a buscar formularios. Va a ser una buena, una buena larga. Es una buena parte abundante de la clase. Ni siquiera tenemos que salvarlo. ¿ Qué nos está ahorrando? Pongamos al siguiente video. 72. Cómo hacer que un formulario php simple funcione en tu sitio web HTML: Para empezar, hay dos partes para crear un formulario que te envíe, el propietario del sitio web, un correo electrónico. El lado HTML de las cosas, que es razonablemente fácil, lo aprenderemos bastante rápido. La parte más difícil es qué hacer con esa información. Alguien acude a tu página web, rellenan el formulario, golpean enviar ¿qué pasa? Tenemos un poco de solución y vamos a enviar los datos del formulario que hicimos clic a un mejor PHP que está alojado en nuestro servidor y que nos va a enviar, dueño del sitio web, un correo electrónico con todos los datos. Pero es un poco un hackeo, principalmente porque es bastante difícil configurar un servicio de correo electrónico adecuado. Necesitas una base de datos, tienes que hacer clic en los datos y debes asegurarte de no romper ninguna de las reglas de envío de correo electrónico pero está fuera del alcance de este curso. Pero no quería llegar al final simplemente o tampoco hacer formularios, te gusta silbar por aquí y ojalá no pregunten por formularios y si hacen los formularios, simplemente no hacemos nada con ellos, eso no es divertido. Sólo tienes que saber que es un poco un hackeo y al principio, lo que va a terminar pasando es, cosas como Gmail y Hotmail recibirán un e-mail de ti y se irán, oye, esto es un poco sospechoso y lo meteré en spam. Tú como propietario de un sitio web, por el primer par de e-mails que recibes de tu sitio web, vas a tener que entrar en tu carpeta de spam, decir no spam, y luego eventualmente aprende. Está bien, así que empecemos. En realidad antes de empezar, lo otro que extrae al principio de éste, es que se tiene que hacer en un anfitrión. No puedes probar esto localmente porque el PHP necesita vivir en tu host como Bluehost, para que realmente envíe ese e-mail. Podemos hacer que todo funcione aquí y si no tienes configuración de hosting, aún no puedes probarlo. Todos los extractos está todo hecho vamos a empezar. Primero lo primero, ¿dónde lo vamos a poner? Lo vamos a poner aquí, justo debajo de aquí, así que encontremos eso en tu código. ¿Dónde está? Ahí está mi H1, ahí está mi etiqueta P, justo después de que se cierre. Nos vamos a pegar en un formulario y vamos a utilizar el formulario post. Hablaremos de acción un poco más tarde, ahí es donde ponemos nuestro PHP pero lo haremos en segundo lugar. Todo dentro del formulario es lo que se enviará en el correo electrónico. Si tienes campos de entrada como nombre y correo electrónico fuera del formulario, no saldrá. A las cosas que entran en ella, se les llama campos de entrada, bueno la mayoría de ellos. Se puede ver que hay un montón de ellos, vamos a cubrir algunos de ellos en este video y el siguiente pero no vamos a cubrir cada uno de ellos. Haz un poco de investigación para las entradas de formularios HTML y puedes echar un vistazo a todas y cada una de ellas. Los principales son, vamos a empezar, texto, vamos a usar este para reunir el nombre de la gente. Tienes nombre y DNI, nombre, lo que sea que pongas entre estas marcas de cotización será lo que te llegue en un correo electrónico. Si le pedí su dirección y la persona la llena, voy a conseguir un correo electrónico como dueño del sitio web para decir que la dirección es igual a lo que llenó. Podrías escribir A, podrías escribir esto, solo vas a recibir un e-mail de tu sitio web diciendo, estos datos llegaron y es igual a lo que escribieron. Ahora el primero va a ser, un nombre así que quiero un nombre. Vamos a usar nombre y correo electrónico y botón enviar, forma real simple para empezar. Ahora el ID es un poco más especial. Puede ser cualquier cosa que quieras, asegúrate de no usar guiones bajos ni guiones. El ID es un identificador único que lo usas para escuchar un CSS. Si quiero darle estilo a esta forma o vamos a tener una pequeña vista previa. Eso es lo que es, ese es el campo. El ID está por aquí, le daría estilo a esta cosa llamada nombre, usamos un hash cuando lo peinamos. Decimos el nombre me gustaría que fuera una caja más grande y que tenga un color de fondo de rosa. Los identificadores se acostumbran a identificar este campo de entrada en particular. Podrías acostumbrarte más adelante también si vas a usar la validación para JavaScript, el ID es bastante importante. Esto es lo que te viene, esto es lo de fondo nitty. Lo siguiente que haremos es, haremos el correo electrónico, entrada de correo electrónico dondequiera que compongas el correo electrónico, ¿no? Ahí está. Lo mismo con el nombre por lo que vas a recibir un e-mail de este formulario diciendo, el e-mail es dan@sample.com. y el DNI muy a menudo son iguales, hacerlos igual. Echemos un vistazo a cómo forman su lado a lado, está en nuestro botón y arreglarlo. Simplemente vamos a conseguir que vaya realmente crudamente para empezar. El siguiente insumo que queremos es el botón enviar, por lo que entrada enviar, allá vamos, impresionante. Ahora el valor en este caso es lo que va a aparecer en el botón, así que si me pongo, forma de fuego, esa es la garrapata para que no sea tan importante. Es estructuralmente diferente a estos campos de entrada, así que voy a dejar el fuego camino y tenemos que volver a doblar también. Vamos a echar un vistazo rápido así que ¿qué tenemos? Tenemos nombre, correo electrónico y esto. Hablaremos de etiquetas y cosas en un segundo, hago clic en el botón y no sabe qué hacer con el botón. Básicamente lo que el botón sí envía es, publiquemos esta cosa y hagamos esta acción. No tenemos nada ahí dentro. Ahora vamos a hablar del PHP requerido. Lo que vamos a hacer es crear un archivo PHP. No vamos a pasar por la sintaxis de cómo escribir PHP, como tenemos HTML y CSS porque sólo vamos a copiar y pegar este, porque ese es un curso todo otro aprendiendo PHP. Es solo un lenguaje diferente, es un lenguaje muy diferente, es un lenguaje de programación donde esto es más un lo que se llama lenguaje de marcado y cada uno existe y no hace nada, solo se sienta ahí y hace cosas y muestra el cliente, igual que el CSS. En realidad no hace nada, no hay cálculos dinámicos en marcha, solo es muy descriptivo, así que PHP, hagamos uno. Vamos a archivar nuevo y guardarlo, puedes llamarlo cualquier cosa siempre y cuando no tenga espacios ni guiones pero vamos a llamar a éste PHP. Hit “Save”, irá al documento PHP. Ves pequeño icono cambia allá arriba al ícono de PHP, el elefante pequeño. Está bien, y vamos a hacer trampa. Ya tengo algún código para ti. En tus archivos de ejercicios bajo el proyecto 2, hay uno llamado forma 1 simple. Tenemos a este tipo, vamos a copiarlo y pegarlo y voy a pasar por lo básico. Básicamente está buscando en mi documento una identificación de nombre y luego me va a mandar el nombre, sea cual sea el resultado de entrada. También está buscando una identificación de un e-mail y luego me va a enviar el e-mail para seguir agregando estos. Haré otra en su dirección. Pegaré este aquí y escribiré dirección siempre y cuando coincida el nombre del ID. No lo rompas aún. Se va a agarrar de este nombre aquí, se va a receptor. Este me va a mandar, aquí es donde pondrías en tu dirección de correo electrónico. Pongo en Dan a ejemplos para que nadie me envíe trillones de correo electrónico de prueba. Si tienes tu dirección, por lo que la tuya podría ser bob@gmail.com. ¿ Quién tiene la dirección de correo electrónico? Ojalá, pero poniendo tu dirección de correo electrónico como el dueño del sitio, y eso es todo. Ahora necesitamos conectarlo, así que vamos a guardarlo. Ciérralo y ahí es donde entra aquí bajo acción y di, me gustaría que fuera a mail.php, por favor pulsa “Guardar” y no va a funcionar. ¿ Por qué? Como dije al principio, necesita estar en tu servidor. Te mostraré cómo lo voy a hacer. Si tienes instalado Bluehost, ya estás listo para salir. Lo único que sí necesitas para comprobar eso, digamos si hospedas y no funciona, solo asegúrate de que PHP esté configurado en el servidor. Es bastante común. Es muy raro no hacerlo. Lo digo porque tenía algún hosting barato que no tenía configuración de PHP o al menos entrar por inactivado. De todos modos, si no funciona, comunícate con tu host y digamos que es PHP habilitado en mi servidor. Dirán, por supuesto que lo es y probablemente sea más un problema sintáctico. Vamos a subirlo a nuestro anfitrión. Para conectarte con tu anfitrión, y lo conectamos con nuestro último miembro del proyecto, proyecto 1 lo cargamos a Bluehost, fue más emocionante. Este de aquí, te das cuenta de los iconos que ya no hay. Es porque no lo hemos configurado para esta nueva carpeta local. Está en nuestro escritorio llamado proyecto 2. Podrías simplemente ir y usar el camino cavernícola e a tu cuenta de hosting de Bluehost en el sitio web, encontrar al administrador de archivos y simplemente subir los archivos. Quieres subir contáctanos y correo más probablemente todas las imágenes y todo lo demás. Pero voy a patear mi respaldo, lo haremos juntos porque necesitarás saberlo. Lo que vamos a hacer es que vamos a cerrar todos estos. Vamos a cambiar del proyecto 2 a nuestro otro proyecto anterior. Vamos a conseguir archivo, abrirlo y en nuestro escritorio. Este es ese otro proyecto en el que estamos trabajando, el proyecto 1 parpadea y se abre. El que buscamos es esta cosa llamada sftp.json, que tenía todos los detalles que nos propusimos para conectarnos a nuestro FTP o a nuestro host. Voy a dar clic en esto y la edición va a desenfocar mis detalles, seleccionar todo lo que hay aquí, copiarlo. Si ya estás aquí y dices: “Oye, yo no hice ese video”, salta más temprano en el curso. Trabajamos, había un video sobre cómo subir a un host, copiarlo, cerrarlo. Volvamos a cambiar a nuestra otra fuera del proyecto 2. Tan abierto Proyecto reciente 2 está ahí dentro. Regresa a nuestros archivos regulares y lo que queremos hacer es ir a nuestras extensiones. Encontremos SFTP y dice que está habilitado, pero no puedo ver ese pequeño ícono. Simplemente volvamos a desactivarlo, vamos a habilitarlo. Entonces como lo hicimos antes, tenemos que pasar y correr esto. Comando Shift P, hemos estado usando. Recuerda, lo usamos para antes para envolver una etiqueta. Es lo mismo que quisiéramos configurar nuestro SFTP. Básicamente estás haciendo lo mismo otra vez. Vamos a recorrer el largo camino. Paleta de comandos y aquí, es posible que tengas que empezar a escribir SFTP. Pero el mío ya está ahí dentro. Voy a agarrar todo esto, borrarlo y pegar en mi otro, listo para cosas borrosas. Borroso. Vas a guardarlo, lo vas a cerrar y volver a hacer clic en mi servidor aquí. Yo quería un pequeño ícono para pagar de vuelta. Desactivar. Se requiere recarga. Yo quiero volver a encontrar eso, vuelve SFTP y vamos a habilitarlo. Se ha mudado. No está apareciendo por aquí. Está bien. A veces estas extinciones me vuelven loco. Parece que está funcionando ahora excepto por los iconos que no están ahí. Por aquí, y explorador, voy a ver si puedo subirlo. Probaremos la página contact-us. Vamos a hacer clic derecho en él y desaparece abajo. Si esto no lo aparece, vas a tener que desactivarlo y para activarlo de nuevo, posible que tengas que reiniciar el código VS. Voy a subirlo. Va a haber ese solo una prueba. Está revisando abajo, está conectando. Se ha ido, hecho. Impresionante. ¿Qué más necesitamos? Necesitamos esto. Eso es realmente importante. También me meto las imágenes hacia arriba. ¿Qué más necesito? Voy a mantener presionada la tecla de comando en mi Mac Control en un PC usted. Si conseguimos eso, reiré las imágenes. ¿ Qué más hay que subir? Y también a la página de índice, el style.css. Todo lo demás fueron solo pequeñas cosas que hicimos. Todo el reinicio de estilo que necesitamos. Ya lo he hecho a una, haga clic con el botón derecho en cualquiera de ellos. Subir. Off, va para nuestra Silva. Volveré en un segundo. Ya estoy de vuelta, se sube, la imagen se toma para siempre, FTPS es súper lento. Pero ya está hecho. Vayamos a revisar la página web. Recuerda que hemos estado probando localmente. Puedes decirnos tu dirección IP local virtual, está bien, pero queremos encontrar adarerestaurant.com. Yo medio lo cargé mientras estaba a mitad de camino subiendo por si haces lo mismo que te gusta. Duro el lado viejo sitio medio nuevo. Voy a golpear “Refrescar” y ver encaja todo subido. Ahora no lo es, en realidad se sube. El problema es, es que está en caché, un montón de cosas de las que hablamos de almacenamiento en caché un poco antes, pero es realmente bueno cubrirlo de nuevo. Es como si el navegador llegara y se va, oye, ya he estado en adarerestaurant antes. No voy a volver a buscar la imagen de fondo, porque ya tengo eso. ¿ Con qué frecuencia va a cambiar? Nosotros como diseñadores web cambiamos todo el tiempo mientras estamos aprendiendo, pero regularmente, el sitio web simplemente se mantiene igual. Lo que tenemos que hacer es hacer uno de esos duros refrescos. Lo hacemos a vista. Nos vamos a desarrollar, vamos a inspeccionar elementos y hacemos clic derecho en esto y decimos recarga dura. Estamos haciendo caché vacía recarga dura. Va a pasar y desechar todo lo que sabía antes. Ya está de vuelta. Voy a cerrar esta pequeña cruz abajo abajo a la derecha para volver a mi página web. Ve vamos a la página de contacto-us. ¿Se conectará? Estos son realmente forma básica. Nosotros lo vamos a probar. Lo único que voy a hacer antes de ir y comprobar si funciona es que aquí, recuerden, esto se puede usar porque ahí es donde va a ir el correo electrónico. Aquí es donde lo puse en dan@, mi dirección de correo electrónico. Pusiste en tu dirección de correo electrónico. Te veré en un segundo una vez que haya escrito mis detalles secretos. Ahí lo he hecho. He actualizado el mail.php, y luego hice clic derecho en él y lo subí. Ahora viene a mí. Vamos a darle una prueba. Estoy viendo el sitio real en vivo ahora. Este PHP es casi servidor. Voy a poner en Daniel Scott, el nombre. Voy a poner en mi dirección de correo electrónico, pero si hago clic aquí, ya lo he probado. Enumera todas las diferentes direcciones de correo electrónico que tengo. No soy que no confíe en ti como no confío en ti. De cualquier manera, las redes sociales son la mejor manera de entrar en contacto conmigo porque recibo demasiados correos electrónicos. Voy a poner en mi dirección de correo electrónico. Editor, ¿se puede desenfocar un poco? Doy click lejos y sale correo electrónico enviado. Esa es la forma PHP cargando. Ahora esperamos. Voy a pasar por mi correo electrónico en un segundo. Lo que podrías encontrar es que está en tu carpeta de spam. Eso podría suceder por el primer par de veces. Entonces algo como Gmail o Outlook entrar dicen que esto no es spam. Después de un poco empezará a recordar e ir. El material que viene de un querido servidor restaurant.com no es spam. Obtuve esta dirección de correo electrónico de mi misma, de mi página web. Vino del adarerestaurant. Esa fue la dirección de correo electrónico que escribo. Es una falsa y sí, vino de mí. No hay tema. Mantendré ese código en el PHP, bonito y limpio. Pasaremos y le agregaremos un poco más de detalles una vez que trabajemos unos cuantos más de esos y pongamos campos. Pero sí, así es como enviar un e-mail. El mío no fue al spam. A veces lo hace. No lo hizo en mi caso, sólo vino directo por Gmail, dijo que se fue. Nuestro correo electrónico acaba de tener del nombre que escribí, que es mi nombre. Pero puedes tener montones y montones de campos de texto diferentes, siempre y cuando todos tengan su propio nombre e ID, puedes tener muchos datos entrando. Éxito. Pero recuerda estas dos adversidades. Necesitas estar probando en vivo en tu servidor real para asses en realidad el servidor en línea de PHP. Si te encuentras con problemas, muy a menudo la gente se olvida de subir realmente mail.php desde VS Code. Asegúrate de que realmente las subas. La otra cosa que la gente olvida está en la página contact-us aquí en el formulario, ¿dónde más lo hace? Esto aquí, ya que formamos post método acción y la acción tiene que ser no sólo montado PHP, tiene que ser lo que has llamado bien. Si lo has llamado mi mail.php, entonces pon mi mail.php. También se asegura de que el nombre como separado. Si tiene dos nombres o dos correos electrónicos, en dos entradas separadas, va a tener problemas y tiene que haber un botón porque nadie puede enviar la forma de eso un botón. Eso es todo por el momento. Una última cosa aunque, a veces, puede tomar una eternidad, la mía puede [inaudible] de distancia. Pero lo he tenido dependiendo del servidor y dependiendo de mi filtro de spam, he tenido que no aparezca desde hace una hora. No estaría saltando ahora mismo yendo, no está funcionando. Yo le daría un poco de tiempo dependiendo de, ¿ hospedarás tus correos electrónicos, si usas Outlook o usando quizás 365 de Microsoft. Dale un poco de tiempo para que pase. Pero si aunque después de un par de horas que no ha pasado, probablemente esté roto. Lo que puedes hacer es descargar los archivos completados para este en particular y debería tener todo aquí como va ahora mismo. Si aún no funciona, es posible que tengas que llegar a tu anfitrión. Bluehost parece funcionar perfectamente. Si estás usando un anfitrión diferente, tal vez comunícate con ellos y diles: “Oye, esto es lo que estoy tratando de hacer. No está funcionando. ¿ Me puedes ayudar?” Está un poco fuera del alcance de probablemente su ayuda normal. Pero podrías obtener alguna persona de apoyo útil que podría apuntarte en la dirección correcta porque podría ser algo que ver con el servidor. Por eso esta es una solución yucky. Funciona, pero no está destinado a hacerlo de esta manera, pero lo uso todo el tiempo. Es encantador. Entremos al siguiente video donde empezamos a hablar de muchos más de estos campos de entrada. 73. Agregar marcador de posición, textos y etiquetas a un formulario web, campos de texto en HTML: Está bien. Empezaremos con placeholder y haremos etiquetas en segundo lugar, porque placeholder, es súper fácil. Entonces si quiero que este campo aquí tenga texto de marcadores de posición, solo escribes marcadores de posición iguales y lo pones entre comillas, y luego solo pones lo que quieras. Ahora, esto puede ser cualquier cosa aquí dentro. Voy a pegarle a “Guardar”. Porque estamos abriendo y cerrando archivos, solo asegúrate de cerrar y luego volver a abrir tu página de pruebas. Asegúrate de no trabajar en el vivo, porque eso no se va a ajustar ni cambiar, a menos que hagas clic con el botón derecho en él en tu Explorador. Eso lo estoy viendo en línea, solo lo voy a cerrar para dejarlo claro, que no me confunda. Se puede ver el texto de marcadores de posición, al hacer clic en él, va por encima de la parte superior. Pero sí. Simplemente llena ahí. Por lo que puedes hacerlo en cualquiera de estos. Entonces Marcador de posición. Marcador de posición. Pondremos tal vez dan@sample.com. Ahorra y lo puedes ver ahí. Longitud fresca. Ahora una etiqueta es diferente. Es texto el que va por encima de él. Lo que haremos es, hagámoslo por el nombre aquí. Entonces, eliminemos el Marcador de posición. Puedes tener ambos, tomemos ambos. Poniendo algunos espacios entre ella, sólo para dejarlo claro para mí principalmente. El sello puede ir a cualquier parte de la página, puede estar justo delante de ella, a veces justo después de que sea más apropiado. Todo lo que es etiqueta. Etiquetar par y para. Este es el camino, porque estas son cosas totalmente separadas. El hecho de que estén encima el uno del otro, porque podríamos simplemente escribir una etiqueta p y decir en realidad esto es una etiqueta p de tu nombre. Eso funcionaría, está ahí y describe esa cosa. Pero queremos esta etiqueta, porque esta etiqueta hace otras cosas. Por lo que etiqueta y asegúrate de usar el ID. Entonces la etiqueta por nombre, porque está asociada a esto ahora vinculado. Aquí es donde pones las garrapatas para ello, así que este es Nombre. Vamos a hacer estilo un poco más adelante, pero digamos Nombre es para esto, ¿por qué es esto diferente? Es porque principalmente para lectores de pantalla y accesibilidad. Porque puedo hacer click en Nombre ahora y eso realmente puede ver resaltaron el cuadro Nombre Nombre. En realidad está conectado a ella, podría tenerla donde quiera. Voy a cortarlo y ponerlo a mi botón Enviar. Todavía está ahí, pero mira cuando hago clic en él, se ilumina. Nunca lo tenía aquí atrás, pero solo quería mostrarles la conexión, siempre y cuando la ID coincida para, entonces eso está asociado a ella. Queremos algunas buenas prácticas para formularios porque esas pueden ser probablemente una de las cosas más difíciles para alguien con discapacidad visual, eso es usar un lector de pantalla, necesita ayuda con. De nuevo, podríamos hacer uno por esto. Tú ahí. Pero éste sólo necesita asegurarse, dos cosas, el For va a la idea del correo electrónico y éste va a ser correo electrónico. Bien. Enfriar Así que eso son los posicionadores y las etiquetas. Antes de irnos, todos están en una línea, he estado ignorando. Por el momento, por defecto estas entradas de formulario son un tipo de visualización. ¿ Qué tipo de exhibición son? No están bloqueados, porque están en la misma línea. ¿ Sabes cuáles son? Son elementos en línea. Queremos cambiar eso. Básicamente lo que vamos a hacer, en lugar de decir etiqueta o etiqueta y entrada o todo tipo de cosas separadas, lo que vamos a hacer es crear una etiqueta div rápida, etiquetas div por defecto son a nivel de bloque. Lo que vamos a hacer es, ¿qué debemos hacer? Va a envolverlo alrededor de ambos. Voy a usar mi Command Shift P o Control Shift P. Usaré el wrap y lo voy a envolver. Voy a crear una nueva clase llamada inputwrapper, porque es un nivel de bloque y eso está dentro de ella, ver, guardarlo, termina en su propia línea. No tenemos que hacer nada y voy a hacer esto porque quiero peinarlo en línea, aplicando los stylers más adelante para peinar las cosas dentro de ella. Podría decir hacer todo el texto aquí dentro más pequeño o más grande. Sólo voy a reutilizar eso un par de veces. Estos dos tipos van a ir juntos en su propio poquito. Comando Shift P, Control Shift P, envolver. Nos vamos, bueno, éste era un código. Hombre, si son demasiado largos entonces lo copiamos y lo pegamos. Lo mismo con el botón Enviar. En realidad, porque está al final aquí no necesita estar en su propio div, porque este div aquí lo aleja. Está bien. Va a hacerlo un poco más agradable. En realidad vamos a separarlos sólo porque están demasiado unidos. Vamos a hacer el peinado correctamente un poco más adelante. Pero solo por el momento, solo por mi cordura como diseñadora, voy a abrir mi CSS, no reiniciar. Voy a buscar styles.CSS. Muévete por aquí. Voy a darle estilo al inputwrapper. Voy a decir, sólo tengamos algún margen. Pon tu margen en la parte superior, margin-top. Empecé a hacer esto, me pongo realmente perezoso. Se puede ver que acabo de poner una martop y lo tengo. No sé cómo, su magia. Pondré tal vez 20 píxeles solo. Yo también quiero mi fondo, no mi top, margin-bottom. La sintaxis es incorrecta. Creo que está bien, está bien. No, tiene línea garabata. Ahí vas, abajo, tan malo. Está bien. Ahí vamos, así que tengo algunos márgenes debajo de ellos, solo para que sea un poco más fácil para el resto de los próximos videos, veremos algunos de los otros de entrada. Tenemos garrapatas uno está hecho, o el botón de enviar está hecho. Echemos un vistazo a los otros comunes. Pero lo haremos en otro video, te veré ahí en un segundo. 74. Cómo añadir un cuadro de texto multilínea grande en un formulario HTML: Hola ahí. Este video te va a mostrar cómo poner en una caja grande de ticks con múltiples líneas y texto de marcador de posición. Si por la vida de ti, no lo puedes encontrar, es porque no es una entrada como estas otras. Se llama simplemente área de texto antiguo plano. Pero vamos a trabajar cómo hacerlo juntos ahora en el video. En primer lugar, pongámoslo dentro de su propio div como tenemos aquí, el rapero de entrada, y simplemente mantenerlo en su propia línea. ¿ Cómo lo encontramos? El raro es, es que no es un tipo de entrada. Entonces hay un montón de insumos. Pero extrañamente no es uno de esos. Sólo se llama área de texto. Extraño porque mucha de la misma funcionalidad, solo nombre raro. Ahora nombre y ID son los mismos. Este va a ser nuestro mensaje y en el mismo para mensaje. Columnas y filas es interesante. Voy a volver a encender el envoltorio. Columnas y filas. Las filas son fáciles, solo es lo alto que es y las columnas no son columnas como hemos estado hablando en esta clase es apenas cuántos personajes de ancho. Tiene 30 letras de ancho. Echemos un vistazo por defecto y vamos a echar un vistazo. No he lanzado hoy. Nos vamos a vivir. Ahí está, esa es mi área de texto. Ajustemos las filas, hasta unas cinco solo para que podamos ver e iremos columnas. Tiempos locos, ahí tienes. Se le pueden hacer otras cosas igual de antes. Esto es que somos en realidad nada entra dentro de esto porque ahí es donde la gente real escribe, pero justo antes de que se cierre ahí. Después de las filas cinco, voy a poner en el espacio, y voy a poner en el placeholder. Este es solo el texto de Marcador de posición como antes. Ahí está. Bonito, nada más. De verdad te puedo decir de eso. Eso es lo que vamos a darle estilo y las garrapatas dentro de ella más adelante, después de haber pasado por algunas de ellas. Mantendré todas estas separadas para que las encuentres fáciles. Esa es la caja grande en la que puedes escribir múltiples líneas, también conocida como área de texto. Siguiente video. 75. Cómo añadir cuadros con marca de verificación a un formulario HTML: Es hora de hacer una casilla de verificación, casilla de verificación, casilla de verificación, quieras llamarla, es esta cosa y un spoiler es su casilla de verificación de entrada. Pero hay algunas cosas extra que debes hacer para este, como un valor. Te mostraré cómo hacer eso ahora en este video. Está bien. Lo vamos a poner debajo de esto aquí, que es nuestra caja de área de texto, así que vamos a poner en nuestra casilla de verificación. Ahora estamos envolviendo todo en este solo para que se rompan en su propia línea. Si te gusta volcar de nuevo en este video en el futuro, no durante todo el curso, este rápido realmente no hace nada más que estallar en su propia línea. Lo que realmente estás buscando es una entrada llamada checkbox. Está ahí. Le daremos un nombre. Esta va a ser, ¿te gustaría inscribirte en mi suscripción por correo electrónico? El nombre en ese id, como lo han hecho todos los demás, muchas veces son realmente igual. El que esto necesita que no se prellena ahí como valor porque vamos a decir, el momento este nombre es la pregunta, pero hay que saber si se está revisando o no, y ese es el valor. El valor en este caso va a ser, sí, inscribirme. Cuando reciba mi e-mail para mi PHP, va a decir que hay un nombre llamado e-mail sign-up y va a tener este valor. Me inscribe. Enfriar. Vamos a comprobarlo. Entonces mira, ahí está mi pequeña marca de cheques. Ahí va. Enfriar. Marca de verificación, es una de esas cosas que realmente necesita una etiqueta. Algunos de estos otros podemos poner en su lugar titulares para ayudar a explicarlo, por lo que no necesitamos etiquetar potencialmente, éste sí. Ahora, la etiqueta puede ir antes o después porque es extraño tener la etiqueta ante ella en este caso. El gran cosa con la etiqueta recordar, el para y el id necesitan para coincidir. En mi caso, el nombre y el id son los mismos, copié el equivocado. Pero mientras estos dos coincidan, se corresponderán. El sello para este es inscribirte al boletín de correo electrónico. Enfriar. Echa un vistazo. Ahora recuerda que esta etiqueta no tiene por qué estar al principio, puede ser justo después, siempre y cuando esto para, esto es lo mismo que el id para lo real. Enfriar. Para conseguir la garrapata. Lo último que puedes hacer es que puedes pre-ticket. Entonces sí, ya estás inscrito para mi boletín de correo electrónico. Está en VS Code y sí, inscríbase casilla de verificación tipo entrada, no la etiqueta. Separar eso, hacer que se vea bien. Después de este fin, basta con escribir comprobado. Por defecto, se comprobará. Está bien. Vamos a guardarlo. Echa un vistazo. Voy a refrescar la página. Mira eso, ya está comprobado. Lo apagas. Ahí vas. Está bien. Eso es todo para marcas de cheques. Ahí algunas cosas de diseño que quiero hacer como alinear las cosas y tamaños de fuente, pero no te preocupes, lo haremos en un video futuro próximo muy pronto. Por el momento, a los botones de radio. Nos vemos en el siguiente video. 76. Cómo añadir un botón de radio con punto en el medio a un formulario de sitio web en HTML: Hola ahí. Vamos a hacer un botón de Radio. Esto es como una cosita oscura extraña que puedes hacer clic en una pero no puedes hacer clic en ambas al mismo tiempo. Es un todo, uno u otro. Es una entrada de radio. ¿ Entiendes? Simplemente se siente un poco de peculiaridades para que funcione. Vamos a saltar ahora y aprender a hacerlo en VS Code. Muy bien, pongamos nuestro botón de radio. Al igual que el resto de ellos lo vamos a poner dentro sólo nuestros episodios en su línea. Dentro de esto, haremos una entrada de radio, es una bonita y sencilla, radio. Aunque la radio no le tiene peculiaridades. El nombre, éste va a ser, digamos “contacto”. Usted vio al principio su preferencia de contacto. Este es un genérico para ambas opciones. El id es específico para este pequeño botón en particular. Llamemos a este teléfono. Guardémoslo y echemos un vistazo. Nos faltan pedacitos, pero echemos un vistazo. Tengo nuestro botón de radio, le doy clic. El problema con él es que si solo tienes un botón de radio, no se puede deshacer clic. Es lo que se llama botón Todo. A marcas de verificación es un fin. Si tienes más de una casilla de verificación, hagámoslo rápidamente. ¿ Dónde está mi casilla de verificación? Tendremos dos de estos. Espacio. Las casillas de verificación es genial. Puedes tener yo quiero esto y aquello y luego un poco de aquello, puedes tenerlos todos los y, A-N-D. tanto que un botón de radio necesita ser o yo soy esto, o algo más. Necesitas al menos otro botón ahí dentro. Tengo éste, y lo copio, lo pego. Lo grande que necesitas, estos tienen que ser lo mismo. El nombre necesita ser el mismo, pero la idea necesita ser diferente para hacerlos únicos. También necesitan valores, para que cuando recibas tus e-mails, vaya a decir, pongamos valor, va a decir correo electrónico. Voy a recibir un e-mail diciendo que la preferencia de contacto es igual al correo electrónico, o dependiendo de lo que escoja el usuario, preferencia de contacto es igual al teléfono. Eso viene de este valor aquí. Ambos lo necesitan. Este necesita un valor de multa para éste. Ya casi estamos ahí. Ahora lo grande es, ¿ es necesario que estos sean los mismos? Nombre y nombre, porque marcan, son todos. Este o éste. No puedes tenerlos puestos. Es como un botón de radio como tú podría no ser demasiado viejo para recordar estos altos. Radios, solo te gusta tal vez un poco antes de mi tiempo. Nace en 1980, así que estos fueron en algunos autos, pero en la salida, pero básicamente elegiste una estación. Si escogiste otro, si empujas ese dentro, este botón se salió, ya era mecánico. Por eso continúa ese botón de radio y lenguaje. Pop este en. Este tiene que salir. Es o esto o aquello. Puedes tener cargas más de estas siempre y cuando usen el mismo nombre. Necesitas darles diferentes identificaciones, lo contrario, no sabrás qué. Cómo está la señal de contacto y humo. Poniendo guiones aquí, debería usar minúsculas también. Pero esa es una estúpida, luego común. Una cosa que vamos a hacer para ordenarlo es que necesita etiquetas, porque es como botones misteriosos. Etiquetas, las vamos a poner justo después como hicimos nuestra casilla de verificación. Vamos a poner en etiqueta, etiquetar para y necesita ser lo mismo que el id Esta es la etiqueta para el teléfono. ¿ Qué va a decir? Se va a decir un teléfono. Debería usar minúsculas, solo que no tienes que hacerlo, pero más adelante si estoy tratando de controlar esto con algún otro código, tienes que ser consistente con las cosas porque de lo contrario estarías como : “Oye, ¿por qué no funciona?” Es porque has usado mayúsculas al azar cuando no tienes el resto del curso, porque la gente no ve lo que hay en estas cosas. Ven entre la etiqueta aquí. Se puede utilizar hasta como en el más bajo. El sello de nuevo para el botón hace justo arriba va a ser por correo electrónico, coincide. De lo que va a ser correo electrónico. Teléfono o Correo Electrónico. Ahora en términos de como una etiqueta más grandiosa, no hay como la etiqueta maestra. Lo que vamos a tener que hacer es justo encima de él poner en una etiqueta p que dice: “¿Cómo te gustaría que te contactaran?” Es solo una etiqueta p sentada encima para ayudar a explicar esto. Mis botones todos atascados ahí. No vayas a ninguna parte por el momento. Eso son botones de radio. Un poco todo, tú o tú. Lo grande que hay que recordar, la gran comida para llevar para sellar en mente es que estos necesitan ser los mismos. Eso es realmente comprobar qué pasa si no se llaman a sí mismos, así que a esto le llamas otra cosa. Dos, lo que termina pasando es que tienes dos cosas que se pueden encender y no se pueden apagar nunca. Porque no hay toggle. Ah, una cosa más antes de irnos, en realidad terminé el video. Tenía que volver a doblar porque alrededor de media hora después me di cuenta de que esto pasaba. Una línea verde poco garabateada y eso viene de un plug-in que tenemos corriendo llamado sugerencia HTML. Básicamente si hago clic en él y floto al respecto, el correo electrónico debe ser único. Los identificadores necesitan ser únicos. Este id e-mail es único para esto como pequeño grupo que hicimos porque el otro se llama teléfono. Pero recuerda antes, realmente usamos el email id ya. Porque eso necesita ser único. Ves esta pequeña advertencia aquí abajo. Me está diciendo que debe ser único. Diciéndome que es en línea 95 y su carácter 60. Noventa y cinco y un poco de línea garreta. Esto podría llamarse correo electrónico 2 siempre y cuando sea único y su etiqueta deba coincidir también con él, el valor no tuvo que coincidir. Guárdalo, ahora terminamos con botones de radio. Pasemos al siguiente. 77. Cómo hacer un menú desplegable en un formulario para un sitio web en HTML: Hola a todos. Este video va a ser sobre los menús desplegables. Tenemos que escoger uno, empezar con uno. Es muy emocionante. El versión corta es, básicamente, es una etiqueta llamada Seleccionar y tienes estos valores de opción, y eso es lo que construye tu menú desplegable. Al final de esto, lanzaremos un par de tipos de entrada porque no vamos a pasar por cada uno de ellos jamás creado, porque sería un video muy largo, pero veremos rápidamente el picker de fecha y el recolector de color porque eso es emocionante. Conseguir que funcione. Tienes que escoger un bonito color. Vamos a trabajar cómo hacer el menú desplegable. No es difícil, saltemos ahora y trabajemos como hacerlo. Voy a ponerlo dentro de mi envoltorio div, envoltorio de entrada. Escribe así demasiado tiempo para escribirlo cada vez. Por lo que se llama Seleccionar. Es raro. No es un desplegable. No es un valor de entrada como la mayoría del resto de ellos, se llama Seleccionar. Dale nombre y DNI. Esto es como un nombre genérico para todo el asunto. El mío va a ser el condado en el que estás. Diferentes condados de Irlanda. Condado par. Voy a estar usando el mismo nombre para el DNI. Enfriar. Ahora dentro de esto están los valores para el menú desplegable. Estas se denominan opciones. Por lo que las opciones le dan un valor. Esto es lo que te va a llegar en el e-mail. Entonces el valor para éste va a ser numérico. Ahí es donde me muevo. En ese poco espacio aquí, es lo que el usuario va a ver. Vamos a tener un par de ellos. Salta ahí porque intentaba usar mi atajo, me equivoqué el. Por lo que estoy duplicando la línea en la que tengo mi cursor seleccionado manteniendo presionada la tecla Mayús y Opción en un Mac, y usando la flecha hacia abajo en un PC. Se trata de Shift y Alt y utilizar la flecha hacia abajo. Entonces tengo a estos dos, Comando D para conseguir a los dos, porque voy a estar usando el mismo nombre. Voy a poner en Galway. Simplemente estoy recogiendo aleatoriamente en lugares a los que pueden ir nuestras bicicletas de rol. Probablemente alguien para Dublín también. Condado de Dublín. Esos son todos caídas. Echemos un vistazo. Ahí vamos. Por lo que muy a menudo, estos son los. Eso es genial. Muy a menudo aunque no tendrás el primero prellenado, tendrás una opción aquí. También se puede duplicar arriba. Estamos usando los mismos dos atajos mediante el uso de la flecha arriba. Eso es Opción de cambio en un Mac, Control de Shift Alt en un PC. Voy a darle a éste un valor de no elegido, elegido, elegido, elegido. Por aquí, voy a usar este como escoge condado. El motivo por el que no me han elegido es porque es el primero, va a ser el predeterminado, y si no escogen nada, lo va a cerrar en lugar de ahorrar. Abrámoslo de nuevo. Tener un buen día. Su previsualizacion del navegador. Podría tener que cerrar esto. Volver a abrir de nuevo. Entonces echemos un vistazo. Entonces puedes ver este es el primero, dice elegido, elige County. Si lo dejan en esto, no quiero que vuelva un valor de elegir County, quiero un valor para volver dentro de, no escogieron nada. Entonces no se selecciona nada ni algo así, si puedo encontrarlo. ¿Dónde estás? Enfriar. Puedes pre-llenar las cosas, digamos que querías empezar con Galway, no quieres usar esta opción aquí, solo tienes una predeterminada. Se puede, aquí dentro, después de las comillas, sólo decir seleccionado. Ese puede ser el que se escoja primero y pueden ir y cambiarlo a partir de eso. Echa un vistazo. Restablecerlo. Está recogido, vete. Deja que se vaya. Menús desplegables. Ahora podríamos ir para siempre por todas las diferentes opciones. Entonces lo que puedes hacer sin embargo es, hay montones más, solo voy a descremarlos rápidamente. Entonces los que uso, sean los datos realmente rápido, no voy a llenar todos los datos porque algunos de ellos no necesitan mucho. Simplemente los usas sin hacer nada, pero supongo que solo quiero darte una idea rápida de los que es probable que te encuentres. Fecha unos a mano, mientras que fecha hora. Vamos a guardarlo. Echemos un vistazo. Entonces fecha-hora. Pueden escoger una cosa de fecha y hora. Pueden escoger un color. No estoy seguro de cuándo van a estar escogiendo un color y no tengo ni idea de dónde está ese par. ¿ Qué campo es ese? Fecha-hora. Utilicé fecha. No sé qué es ése. Debe ser más valores. Pero hay mucho más. El mejor lugar para ir y echar un vistazo es el lugar de la escuela W3. Por lo que la forma de la escuela W3. Entonces navegando por este sitio en cuanto a formas, empiezo con hacer clic en este botón aquí, digamos que vine, quiero cosas sobre HTML. Después echando un vistazo por aquí, hay un montón de diferentes subgrupos en este caso formas. Puedes empezar por arriba y te da estructura de forma general. Entonces te da los diferentes elementos que van dentro de ella, tipos de entrada. Ahí se puede ver y yo voy a pasar y explicarles y cómo funciona su sintaxis. No en mi adorable acento Qui, solo escrito en texto plano, pero no podemos pasar por cada uno de ellos, pero se obtiene la idea de la mayor parte de ella. Cosas como nombres, valores, identificaciones, son todas importantes. Hemos trabajado en etiquetas. Creo que ya tienes suficiente para salir y poder implementar todos estos otros tipos de entrada. Eso es todo para las formas. Nos vamos a meter en el estilo de las formas, porque hay forma es espantoso. Mira nuestra forma. ¿Dónde está? Consíguelas. Todos son iguales. No hermosa. Tenemos que darle estilo a estos y hacer que la parte de forma se vea un poco más agradable. Te veré en el siguiente video. Nosotros vamos a hacer eso. 78. Cómo estilizar cuadros de texto y casillas de verificación en un sitio web HTML: Hola, ahí. Dato divertido, diseño web te hace lucir mejor. Totalmente lo hace. Realmente no está funcionando para mí personalmente pero definitivamente está funcionando para este formulario. Forma fea, forma guapa. Exactamente misma forma simplemente va a cambiar el CSS. Hay algunos objetivos divertidos que tenemos que hacer para unirnos a estos chicos y darles estilo. Pondremos un poco de espaciado entre las cosas, etiquetas con huecos en ellas. Haremos que nuestro botón se vea un poco más bonito. Actualizaremos el texto de muestra aquí. Vamos a estar mejor luciendo. Empezaremos con los cuadros de texto aquí, el texto de entrada. ¿ Cómo se llama? Es inicio de mi forma, así que vamos a empezar todas las cosas dentro de esto hasta. Se está poniendo bastante grande. Aquí está el formulario. Esta es mi primera, no la etiqueta, vamos a hablar del texto de entrada. Para hacer esto en nuestro CSS, necesitamos agregar alguna sintaxis especial. Es entrada pero entonces hay que ponerlo entre corchetes, no entre corchetes rizados, entre corchetes. Tú decides qué tipo de tipo es y en nuestro caso es el tipo de texto. Aquí lo puedes ver. Básicamente solo estamos escribiendo esto en la entrada de estos dos, el tipo es igual a texto. Simplemente formato diferente aquí en CSS, luego agregamos nuestras llaves, y así es como lo diseñamos. En primer lugar voy a agregar algo de relleno alrededor del exterior solo para hacer el cuadro de texto un poco más grande. Yo quiero que sean 12 arriba y abajo y tendré 20 y [RISAS] arriba y abajo, izquierda y derecha. Guárdalo. Echemos un vistazo, y ahí tienes, es ese. Ahora dices: “ Tengo que hacer este también porque éste tiene un nombre ligeramente diferente”. Esto tiene entrada de tipo correo electrónico. Podríamos hacer es simplemente copiar eso y poner una coma. Haré las dos. Tan solo tengo que asegurarme de que éste sea correo electrónico. También, hacer textarea mientras estamos aquí. Ahora no es exactamente lo mismo. Está estructurado de manera diferente. Recuerde, estos tipos de entrada eran diferentes a este ancho de lo que hicimos textarea que es solo su propia etiqueta. Aquí va lo mismo. Simplemente hacemos textarea y está ahí. ¿ Qué necesitamos hacer? Yo quiero darle estilo al textarea. Para echar un vistazo. ve bien, tengo mi relleno. Va a ser más agradable. Puedes dar anchos a estas cajas. Todos estos tipos podrían tener un ancho de, podrías usar porcentajes o píxeles, digamos 40 por ciento. Ahí vamos. Son todos 40 por ciento del espacio disponible. Los textos dentro de ella. Es bastante pequeño y es la fuente equivocada. Nosotros también podemos hacer eso. Nosotros los hemos apuntado. Vamos a decir familia de fuentes, y usaremos la que ya hemos usado. ¿ Qué estamos usando? Estamos usando Roboto, no lo rellena previamente, lo voy a robar. El cuerpo es Roboto. Muchas gracias. Vamos a comprobarlo. Ahora es Roboto solo necesita ser un poco más grande, tamaño de fuente. Echemos un vistazo a 1rem, veamos cómo se ve. Es lo mismo que el resto de ellos. En realidad podría hacer esto. ¿ Lo hago un poco más pequeño? Siento que si lo hago, se siente bien como diseñador teniendo esto como un poco de jerarquía para, texto grande es lo más importante. Esto es lo siguiente y luego estos chicos bajan otro tamaño de fuente. Pero las formas son notoriamente problemáticas para las personas con discapacidad visual. Lo estoy haciendo más pequeño y es bastante gris claro, estamos bordeando algunos temas de accesibilidad. Tenemos eso. Una de las cosas que podrían estar volviéndote loco es que esto está en la misma línea que esta. Eso depende de ti. Hay un par de formas de arreglarlo. Nosotros usando este envoltorio, podría decir que en realidad la etiqueta podría estar en su propio envoltorio. Lo haremos juntos. Solo para mostrarte las diferentes formas porque hay diferentes momentos que necesitas a ambos. Esta etiqueta sólo puede salir de ese envoltorio. Ahí está y tener el suyo propio. Sube usted por aquí. Voy a envolverlos en mi, ¿cómo lo llamamos? Se llama envoltura de entrada. Copiarlo ahí. Tenemos que envolver primero con abreviatura, luego ponerlo. Ahora está en su propia línea. Eso es en el segundo. De repente nos ensuciamos en términos del HTML. esa es nuestra manera. Simplemente te mostraré una manera diferente. Lo que podríamos hacer, pero probablemente no va a funcionar, es que podríamos atacar estas etiquetas. Podríamos decir: “Etiqueta Me gustaría que estuvieras en su propia línea”. Esto es como yo pop quiz. Póngalo después de que haga la pregunta y vea si puede resolverlo. Yo quiero estar en su propia línea, por el momento está en línea con este tipo. ¿ Cómo conseguiría que fueran por su propia línea? Dale una vuelta. Si no tienes ni idea. Recuerda que voy a exhibir. Por defecto está en línea, podríamos decir bloque de visualización. Todas las etiquetas se muestran bloque. Eso va a funcionar, pero tú bajes aquí y estás, “En realidad, yo quería a estos tipos al lado”, no del todo lo que quería. Lo que podría hacer es que diga, lo dejaré ahí, pero en lugar de usar la etiqueta voy a crear una propia. Vamos a decir newline. Voy a usar esto y solo aplicarlo como clase a las etiquetas específicamente. Este en particular justo antes del pequeño etiquetado, voy a decir clase de newline. Un poco de mirada. Este tipo tiene su propia línea. Lo que podría decir es que es nueva línea con algún margen en la parte inferior de 20 píxeles. Demasiado. Digamos 10 píxeles. Sí, eso funciona para mí. Asegúrate de cerrarlo. La otra cosa que podría hacer es simplemente se ve mejor creo que con más espaciado entre ellos, y probablemente necesite algo de espacio después de esta etiqueta p. Eso lo veremos en un segundo, pero hagamos éste. Consigo reutilizar este y porque lo he mantenido razonablemente genérico. Podría usar newline a lo largo de toda mi página web, no tiene que ser para esta forma en particular. Te puedo decir que lo quiero en correo electrónico también. Antes de que esta pequeña etiqueta cierre, vas a tener una clase de newline. ¿Qué sigue? Podría centrar más laboratorio, hay algunos otros estilos que quiero hacer. cuarenta por ciento es lo suficientemente grande? Se puede hacer 100 por ciento. ¿ Dónde está? Código VS? Nos pusimos a un ancho, todos estos campos para tener un ancho de, ahí tienes. Cruzan y es 100 por ciento más el relleno. Recuerda hemos añadido 20 cualquiera de los lados o 30. Eso hemos agregado más el 100 por ciento. Acaba yendo demasiado lejos. Otro quiz pop. ¿ Cómo lo conseguimos? Podríamos simplemente dejar de minusarla. Podríamos menos. Yo puedo despegar, podemos hacer que sea 97 por ciento o fingir. Recuerda, había una propiedad que por arte de magia lo hizo por nosotros. Toma el tamaño general y los menos fuera de los márgenes y el relleno. Tenía un nombre raro, lo volveré a presentar. ¿ Te acuerdas? Pausa, piensa, dale una prueba incluso. Es realmente difícil de recordar. Siempre lo olvido, se llama box-dimensionamiento, ve border-box. Esperemos que nos haga el trabajo y ahí tienes. Cortado el relleno. Eso es un bonito, necesito agregar una etiqueta a esta de aquí, cosa que aún no he hecho, está bien. Una de las cosas que quiero hacer. Todo esto se ve bien. Haremos algunas cosas de fuentes en un segundo, pero el espaciado entre estos dos, me alegra que estén en su propia línea. Hagamos que los empujen un poco. Podríamos hacer trampa. Mi cerebro perezoso instantáneo dice engaño. En este curso, somos como si no te debiéramos mostrar cómo hacer trampa, pero te voy a mostrar el tramposo porque te vas a encontrar con él. Alguna otra persona perezosa lo hará y tú los tutorarás. Dirán: “No puedo creer que hayan hecho eso”. Pones un ampersand y pones un espacio que no rompe, punto y coma. Sabemos si ponemos espacios, eliminaré esto. Si lo pongo en un espacio como este es ignorado por el código. No te da espacios que regresa. Sigue siendo lo mismo, vamos a deshacer eso, deshacerlo incluso. Podría ir sin romper el espacio y puedo pegar algunos de estos en, y va a empujar a través. El único problema con eso es que lo estás haciendo en el HTML y los estilos es desagradable pero funciona. [ RISAS] Lo puse ahí porque mi cerebro se fue, “Esto se ve mejor”. Entonces pensé, te lo mostraré porque vas a tropezar con nuestros sitios web que la gente lo ha hecho. Gente perezosa como yo, hazlo por espaciar. Deberíamos hacerlo en código. En este caso, vamos a crear una nueva clase. Tengo algunas clases de ayudantes que uso. Voy a llamar a esto muy genérico. Esto se va a llamar margen. Quiero margen a la derecha o a la izquierda? Ni siquiera estoy seguro. Yo quiero margen, lo voy a aplicar a la etiqueta. Margen a la derecha para empujar a través. Se va a llamar margin-derecha. Voy a llamar a éste a porque voy a hacer algunos de ellos. Este de aquí va a ser, como se puede imaginar, margin-derecho. Voy a poner en 20 pixeles, solo echa un vistazo a qué es éste. Voy a usarlo porque no confío en mi ortografía ni en mi mecanografía al menos. Copia eso y voy a ir por aquí y aplicarlo a esta etiqueta. Justo antes de que se cierre, voy a decir que tienes una clase de ésta. Cuando estés copiando y pegando, asegúrate de no agarrar la parada completa porque la parada completa no es necesaria por aquí. Lo dejas adentro para echar un vistazo, no apareció, no está funcionando. En ocasiones puede aparecer en el HTML. De todos modos ahí está mi pequeña clase , he agregado dirigido a ella. Si quieres apuntar, di ya eventos, tienes muchos botones de radio. Quieres decir empuja el espaciado lejos de aquí. Recuerda entrada y luego es corchetes. Después trabajas el tipo al que estás tratando de apuntar. Vamos a hacer las de radio en este momento como radio tipo. Así es como apuntas a esos becarios. Entonces voy a decir que quiero un poquito de margen a la derecha también, mi derecha. Se puede ver que se puede conseguir realmente perezoso con los ayudantes. Acabas de teclear mar para acercarlo y luego acabo de empezar a escribir r y entonces eso es todo lo que necesitaba. Nos dieron hacer lo suficientemente cerca. Yo quiero sólo tal vez 10 píxeles a la derecha de ellos. Tan sólo para abrirlos un poco porque simplemente no hicimos ya forma sencilla. Podrías tener una gran forma gigante. Lo último que haremos es darle estilo a este botón Fire away. Nuestro botón Enviar. Esto debe ser correo, no mail2. No tengo correo. Botón Enviar. Ahora puedes empezar a peinar el tipo de entrada enviar por aquí, eso funcionaría. No vamos a ser perezosos. Vamos a ser ingeniosos. Vamos a añadir una clase de se llama mybutton? Es hace un poco ahora, no puedo recordar. Ahí lo tienes. Ahora, notarás que no es exactamente igual al botón que teníamos en nuestra página de inicio. Es muy similar. Tenemos cerca, pero hay algunos estilos que vamos a tener apagar inn particular para este botón. Para mí, ya está lo suficientemente cerca. Pero podrías hacer otro estilo y empezar a aplicarlo. Pero el botón Enviar tiene este extraño contorno, vas a tener que apagar y las esquinas redondeadas que vas a tener que apagar. Podrías crear otra clase. Empieza con mybutton y luego agrega algunos estilos de borde de ninguno, esquinas redondeadas de cero. Yo sólo voy a dejar la mía. Yo sí necesito algo de espacio debajo de él. De lo que podría hacer la forma en general, necesito algunas cosas en la parte superior y la inferior. Podría simplemente darle estilo a la forma. Podría decir forma por favor, ¿ puedes tener algún margen? Usaremos resolución máxima, escribiremos margen, y usaremos una taquigrafía. Arriba y abajo van a ser 40 píxeles y la izquierda y derecha van a ser cero. ¿Ves cómo va eso? Un poco de la parte superior, un poco de la parte inferior. Ya estoy bastante contenta con ello. ¿ Eres feliz? Yo soy feliz. Tenemos un formulario. ¿ Me falta una etiqueta? Está bien lo hemos peinado. Tenemos un menú desplegable dulce. Eso también se puede darle estilo. Nuevamente, solo entrada. En realidad, es diferente se llama seleccionar, no una entrada. Eso va a ser todo sobre las formas. Acabamos de rayar el servicio en cuanto a formas. Hicimos un pequeño hackeo para que algún PHP nos enviara un correo electrónico. Pero hay mucho más como poco de un conejo warren todas las formas. Pero buena visión general espero. Dejaremos ahí los formularios por ahora y los veré en el siguiente video. 79. Qué significa el diseño de un sitio web responsivo: Hola, amigo. Este video es el inicio de nuestro próximo proyecto. Se trata del Proyecto 3. Vamos a construir un sitio de portafolio realmente rápido, realmente simple y lo grande de lo general para este va a ser sobre esta cosa llamada diseño responsive, y hablaremos de eso en un segundo. El tema general para nuestro primero fue, esto solo estaba haciéndonos empezar. Fue realmente simple. Yo lo hice realmente simple para que pudiéramos simplemente conseguir lo básico en. Después aprendimos una tonelada real en este segundo proyecto. Aprendimos cargas y el tema general para esta primera fue la introducción. El segundo fue realmente, el gran trozo de ello era Flexbox, así que acostumbrarte a eso y lanzamos tantas partes diferentes, ese tipo de la nitty gritty de fundación, HTML y CSS. Este próximo proyecto por lo menos va a ser todo sobre responsive. ¿ Qué significa ser diseño receptivo? Literalmente, significa que tu sitio web va a responder a diferentes tamaños de dispositivo. En una pantalla de escritorio, se va a ver así, pero cuando se carga en una tableta, va a hacer el mejor uso de la pantalla inmobiliaria. Sí, esa es la forma en que usamos. A pantalla inmobiliaria. Esto probablemente sea mejor para una tableta, retrato y los cambios son que vamos a pasar de tres a tres y tres a este de aquí, que es de dos a través y cuatro hacia abajo. Te darás cuenta de que nos falta uno porque allí teníamos números desiguales. Vamos a apagar uno para hacer el mejor uso de la pantalla. Los bienes raíces también harán esto. Se trata de que esperes. Estás como, “¿Cómo es que aún no hemos hecho el menú grande?” Siguiente imagen se acerca en este fragmento de video, Proyecto 3, poco más adelante. Cuando vamos a diseñar este para mi [inaudible] y sólo va a entrar en un arroyo de uno va a encender ese tipo que apagamos de nuevo, tenemos nueve de ellos. Nuevamente lo va a anotar en la pantalla. Ese es el diseño receptivo. Déjame mostrarte una soy m práctica. Echemos un vistazo a mi página web. Bringyourownlaptop dot com, así es como se ve en una pantalla gigante. Tengo un montón de espacio con el que jugar así puedo conseguir montones de estas miniaturas, les llamo cartas. Entonces el fondo aquí muchos testimonios. Pero cuando se reduce a un tamaño más pequeño, bajemos. A ver qué pasa, así que hubo un descanso ahí para echar un vistazo a estas tarjetas. Puede caber seis a través en una pantalla grande. Pero cuando se llega a la pantalla más pequeña, sólo cuatro. No mejoró, tres, dos. Eventualmente, si vas al móvil, no puedo arrastrarlo al móvil. Necesito un clic derecho en él, tengo que inspeccionar la parte superior aquí y se va, ves, ahí está nuestra palabra puede ir a recoger el iPhone 6. ves, lo he reducido a una de las cartulinas que puedes recorrer y a uno de los pequeños testimonios de aquí. Hemos cambiado mucho el tamaño de la fuente solo para hacer el mejor uso de nuestros bienes raíces de pantalla. Ciérralo. Eso es el diseño receptivo solo cambia. Ahora, para que esto suceda, las dos cosas clave que vamos a aprender en esta pequeña sección es algo llamado consulta de medios y vamos a volver a usar Flexbox y un poco más suman a nuestro conocimiento de Flexbox y en menor grado, imágenes receptivas que ajustan tamaños, pero realmente las grandes son consultas de medios y luego Flexbox. Ajustar realmente la estructura, para que sepamos qué es Flexbox y media query es solo con el sitio web, pide al navegador que diga qué tan grande eres? Porque tiene que preguntar cada vez que hay que decir: “¿Qué hay de ti?” Dice, soy digamos, 700 píxeles de ancho y luego lanza algo de CSS basado en lo ancho que es y eso se llama consulta de medios. Si esa no fue una gran explicación, es un poco más fácil solo hacerlo, y eso es lo que haremos salto en el inicio de este tutorial, necesito hacer un poco de imagen. Está cortada en este. [ inaudible], gran diseño web. Está bien, así que vamos a ir a construir este. Este sitio web de cartera guapo para diseñador de logotipos. ¿ Cuáles son algunas otras cosas geniales que puedes ver repeticiones de fondo? En realidad, se trata de ajustar para diferentes tamaños de dispositivo. Siente como si solo estuviera divagando ahora. Espero que estés emocionado. Yo estoy emocionado. Es agradable entrar en una nueva página web. Estoy harto de la rosa. Entremos y construyamos un sitio web de portafolio de logotipos. 80. Cómo cambiar la disposición, tamaño y color de un sitio web usando consultas de medios: Consigamos las cosas primero. Tenemos que poner orden a partir de nuestro último proyecto. Ya no estamos haciendo proyecto 2, estamos haciendo proyecto 3. Voy a abrir un archivo, voy a hacer una carpeta en mi escritorio, Proyecto 3. Haga clic en 'Abrir, perfecto. Es una forma de empezar. Vamos a crear, voy a cerrar Welcome, y cerraré el Esquema. Voy a hacer dos archivos, archivo nuevo, guardar este. Te estás acostumbrando a esto. Eres como, yo sé hacer esto. Vamos a Archivo, Guardar, vamos a crear otro, archivo Nuevo, guárdelo. Vamos a llamarlo style.css. Conecta los dos para mejorar, poner signo de exclamación, regresar, debajo del título, vamos a escribir un enlace. estilo CSS coincide con el mismo nombre y arrastra esto hasta aquí, listo para ir. Excepto que no hemos cambiado el título, sé que necesitamos hacerlo. Hagámoslo realmente rápido. Está bien. Ahí está mi título, todo está listo para rodar. Excepto View, Word Wrap. Eso se ve más bonito. Lo primero es que necesitamos agregar algo al estilo. En tu etiqueta de cuerpo aquí, voy a agregar solo un h1 llano, y dentro de ese h1 solo agrega un poco de texto. Por aquí vamos a darle estilo. Vamos a darle estilo a nuestro h1 y vamos a decir que eres un color realmente simple de, encontrar color loco, trabajos verde lima, punto y coma. Hemos hecho esto cargas lates prueba en el navegador. Lo que termina pasando normalmente es que esto no aparece si inicias un nuevo proyecto, solo puedes volver a ponerlo en marcha haciendo clic derecho en cualquier parte de tu HTML, e ir a abrir con servidor en vivo, hace lo mismo excepto, ¿dónde está el mío? A donde se ha ido, ahí está. Enfriar. Tengo un gran trozo de h1 que es verde lima. Lo que me gustaría hacer ahora es configurar un gatillo que diga si el navegador es sobre esto de grande, cambiar el color. Para hacer eso, agrega algo llamado consulta de medios. Por lo que una consulta de medios al menos entra en tu CSS y se ve así. Es esa consulta de medios, ahora lo raro de VS Code es normalmente realmente útil con sugerir mucho código. Confío tanto en ello ahora. No es para consultas de medios a algo que no está en la lista de características en este momento. Esperemos que para cuando llegues aquí, se haya actualizado y sí tiene un montón de cosas útiles. Porque la sintaxis es un poco rara, pero no es algo como lo hemos hecho antes. Esta cosa lo desencadena, los medios, y luego está buscando un ancho máximo. De lo que vamos a usar colon y luego una talla. Está buscando un ancho máximo de vamos a usar 768 píxeles. Es solo un tamaño de tableta realmente común, tableta en retrato. Después ponte tirantes rizados y pon el tune-in, eso es todo. Se va a decir, está bien estoy mirando y revisando el tamaño del navegador desde cero hasta un ancho máximo de esto. Ahora recogemos 768, puedes usar cualquier talla que quieras. Sea lo que sea que estés apuntando, si estás viendo esto en 10 años probablemente no hay posibilidad de que una tableta siga siendo de este tamaño. Probablemente ni siquiera son tabletas, coches voladores esperemos. De todos modos. Lo que vamos a decir es una vez que esto se active, así que básicamente esto es cuando todo esto está siendo emparejado, es de 0-768 gatillo todo el CSS aquí dentro. El CSS que vamos a escribir es un h1, voy a colorear, vamos a escoger un color, naranja oscuro. Mira eso. Démosle una prueba primero. Vamos a revisar nuestro navegador. Ahí está, es verde, pero si se pone por debajo de 768, ¿listo? Enfriar. Ahí hay todas las consultas de medios. Esa es la estructura real que vamos a construir el resto de nuestro sitio web receptivo. Vamos a encender y apagar las cosas, palear los tamaños alrededor, apagar la navegación, todo basado en estas consultas de medios. Si el tuyo está funcionando, siéntete muy orgulloso de ti mismo. Cuando trabajo esto por primera vez, yo era como el humo santo, mírame. Vamos a entrar en un par de cosas. Una es, vamos a añadir algunos comentarios para que sepamos lo que estamos haciendo, y deshacernos de todas tus devoluciones y cosas. Iba a usar anchos de banda, no usemos anchos de banda. Todo bien por encima de esta consulta de medios, voy a agregar algunos comentarios. Recuerda que es Command forward slash en un Mac, Control forward slash en un PC te da el comentario, y esta va a ser mi vista de tablet. Ahora una cosa que no tienes o asegúrate de tener si estabas como, sigue sin trabajar, ¿por qué no funciona? Tienes que asegurarte de que la sintaxis esté bien, a veces mis alumnos, escribirán con en lugar de ancho. Necesita tener un colon ahí, el tamaño, necesitas corchetes dobles también, puedes ver llaves ahí, que terminan ahí. Este pequeño h1 tiene sus propios tirantes rizados. Podrías simplemente hacer esto. Bueno, mis devoluciones podrían ser solo, deshaciéndote. Se ve un poco más bonito así. Todavía funciona. Enfriar. Nosotros vamos a hacer eso, vamos a hacer la vista móvil a continuación. Si eso es móvil y eso es tablet, ¿qué hace esto? Esto se considera la visión global. Wish va a conseguir que me pegue, como ese. De todos modos, a esto se le llama la visión global. En nuestro caso, aka la vista de escritorio. Hablaremos de móvil primero versus escritorio primero en poco tiempo, pero todo aquí dentro es como el material genérico. A menos que pase a ser, esto era más pequeño. Siete sesenta y ocho o más pequeños, haz esto. Lo mismo para un móvil, engañemos, y que lo llamemos eficiencia. Voy a decir esto, pero en lugar de decir 768, vamos a usar un móvil realmente común en tamaño de retrato. Cuatrocientos es lo que uso, mucha gente usa 360, 320, 380, es alto porque los teléfonos móviles son todos tamaños muy diferentes. Yo uso 400, en este video sin embargo, no podemos usar 400 por este problema. En realidad puedo arrastrar mi navegador más corto, lo suficientemente flaco como para ser 400 píxeles. Simplemente no me dejaría más. Acostumbrado a, solía ir por aquí, pero la nueva corriente no lo hará. tuyo podría, podrías estar bien, pero por el momento sólo tenemos que irnos, yo sólo iba a fingir que sean 500, que podamos probar aquí localmente. El otro es que te mostraré en un video que viene en un segundo, cómo probar en todos los dispositivos móviles, pero por el momento, solo hazlo 500. Pero, ¿puedes colorear? Algo que contrasta todo lo demás. ¿ Qué tenemos? Pongámoslo de negro, ahí tienes. Eso es muy contrastia. ¿ Estás listo para hacer nuestra genialidad receptiva? Ya es demasiado pequeño. Pretende que no viste eso. Es un verde, naranja, y negro. Esta es una configuración realmente sencilla del mismo, vamos a encender y apagar las etiquetas div, vamos a jugar con el tamaño, pero espero que estés orgulloso de tu pequeña configuración fresca. Realmente simple, no terriblemente complicado por un lado, y estamos haciendo tres consultas de medios, depende de ti. Cuando soy perezoso y sólo estoy haciendo un sitio realmente rápido, sólo voy a hacer estos dos. Diré, no me importa la tableta, solo haré global y móvil. Eso es malo sin embargo, mal practicado en. Buenas prácticas si estás trabajando en una empresa realmente grande, una empresa más grande como desarrollador o diseñador, y podría esperarse que hagas cinco o siete tamaños diferentes para sacar el máximo provecho de cada vista. Pero si estás haciendo un sitio web rápido para un amigo que te está pagando en cinco altos, solo está consiguiendo un móvil y un global y yo no estoy haciendo nada más. Una última cosa antes de irme es esto, realmente va a necesitar esto. Esta cosa es meta nombre, viewport. Esto viene para nosotros por defecto cuando estamos usando ese signo de exclamación de fantasía, para luego regresar. Hay otras formas de hacer atajos de imagen. Puedes hacer html5 y golpear Tab. ¿Eso funciona en esto? No, html:5, eso hará lo mismo y se pone la ventanilla en un poco diferente. No es que pueda ver qué. Pero a veces este viewport no se pone por defecto donde podrías estar haciendo en el tutorial de otra persona, estoy deshaciendo así que vuelve, aquí estamos. Sólo asegúrate de que esto esté ahí dentro. Necesitamos simplemente decirle al navegador cuál es la vista inicial, para que toda esta capacidad de respuesta funcione. Muy bien eso es todo. Yo quiero explicarlo solo una vez más, por lo que va el flujo CSS. Muy bien, todos están en h1. En realidad hagamos un último poquito solo para conducirlo realmente a casa. Digamos que h1 va a tener una fuente de familia de fuentes de Courier New. Lo que termina pasando es, empieza aquí lo chicos, h1 tu color de verde lima, tu fuente de Courier llega hasta aquí y dice, Hey, así que digamos que bajamos el navegador a html5. Eso es tirarlo de aquí. Dejaré esto en la clase porque tu gusto, Oye, ¿esto es un html5? Apágalo, enciéndalo de nuevo. Oye, eso funciona. Estamos diciendo, sé verde y Courier a menos que cambien los navegadores. Lo que pasa es, llega hasta aquí y dice, el navegador es menos de 768, así que dice, te contradigo, así que te voy a anular porque soy más específico y estoy más abajo del CSS. Pero llega a h1 y dice, Está bien, una familia de fuentes, no hay nada que lo contradiga aquí, así que flota a través de ella. No se ha tocado porque no hay nada más aquí que diga font-family, se baja hasta aquí y dice: Oye, ¿debería ser una fuente diferente aquí? Dice: No, no te voy a decir nada. Si va a la cima, flotará todo el camino. Si tengo la familia de fuentes aquí abajo, va a hacer algo muy diferente. Necesito bajar mi corchete, apriételos ahí dentro. Por lo que tenerlo hecho aquí es muy diferente. Se va a empezar, y esto sólo se va a activar cuando es ese tamaño? Echemos un vistazo. Llega hasta aquí y aún no se ha activado, porque ese disparador, esa consulta de medios no se ha activado, igual que aquí, pero aquí abajo puedes hacer algunos cambios realmente grandes. Si quieres que sea global en todo a menos que se diga lo contrario, hazlo en este trozo superior aquí. No necesita una consulta de medios, acabo de agregar ese poco para que sea un poco más fácil explicarlo. Muy bien, ¿cómo vamos? Consultas de medios? Yo soy feliz, tú eres feliz. Si eres sintaxis no está funcionando, haz una revisión de los archivos completados, estarán en los archivos de ejercicio, y solo comprueba el nombre de este video. Habrá un bit de código correspondiente ahí dentro, que se ve exactamente así. Muy bien, al siguiente video. 81. Cómo probar tu sitio web en una tablet o celular con código Visual Studio: Está bien. Tenemos que probar esta cosa. Si bien estamos trabajando, a menudo, sólo es más fácil de probar en un navegador, dónde está, como lo hemos estado haciendo, pero necesitamos un falso un poco más. Vamos a emular un iPhone, en tablet y escritorio a través de Chrome, lo haremos en un segundo. Ahora otra forma de hacerlo es en realidad solo tener como un nombre de dominio desechable y cuenta de hosting. Ve a Blue Host, usa esa misma cuenta que te sientas junto un nuevo nombre de dominio llamado sitio web de pruebas de Dan, algo más bien. Algo profesional si se lo vas a mostrar a clientes potenciales. Blue host dividirá tu cuenta de hosting en dos partes para que puedas usarla. Obtendrás diferentes detalles FTP de inicio de sesión, platicar con ellos al respecto. Di, diles lo que quieres hacer, dos nombres de dominio, mismo hosting, y luego simplemente lo subes como lo tenemos antes en este curso. Simplemente lo subimos usando su pequeño FTP. Tendrás diferentes detalles para ello, entonces solo puedes probarlo en cualquier cosa. Simplemente puedes cargar ese sitio web en tu teléfono o tu iPad, tu nuevo iPad, y solo comprobarlo de esa manera. Otra forma, la forma más oficial es utilizar un servicio de pruebas local. No vamos a pasar por cómo configurarlo en este curso, está un poco fuera del alcance. Si estás en Mac, es muy común usar MAMP. Se trata de Microsoft Apache-MySQL y PHP. Eso lo leí totalmente desde ahí abajo. MAMP, ya es palabra. Ahí está XAMPP, ahí está WAMP. En un Mac MAMP sería el más común en un PC. ¿ Es el WAMP o XAMPP, probablemente XAMPP. Básicamente es un software que se instala en tu computadora y te permite fingir un servidor en tu máquina como si se dijera, host azul, pero nadie más en el mundo lo puede ver para que puedas mantenerlo agradable y cerca. Pero hubo un poco de molestia conseguir que se instalara. Pero en cuanto a las pruebas, mayoría de las personas simplemente probarán localmente en el navegador y emularán mientras [inaudible] y solo harán más pruebas oficiales un poco más adelante. En el momento que acabamos de hacer esto, estamos haciendo la antigua opción drag y eso funciona. Estoy fingiendo que soy un escritorio, estoy vagamente fingiendo en mi tablet y ahora casi soy un teléfono móvil. Para redondear eso o emularlo correctamente es hacer clic derecho en cualquier lugar o participar para inspeccionar o ir a View Developer e ir a Developer Tools o inspeccionar elementos, ya sea o estos lo logran funcionar.Estos dos, Lo que estamos buscando es algo esto por lo que esta pequeña barra de diapositivas probablemente todo el camino aquí para ti. No estoy muy seguro pero tal vez tengas que hacer es que no me gusta volver a cero absoluto. He intentado restablecerlo para este curso, pero no estoy exactamente seguro de cuál es el valor predeterminado. arriba en la parte superior aquí, establece un responsive si no lo es ya y puedes arrastrar esta pequeña línea doble por aquí y puedes ver que puedo arrastrar un pasado, puedo arrastrar un diminuto pequeñito así que ya no tengo que usar esos 500. En realidad puedo llegar a algo un poco mejor para probar como 400 completos. Lo genial es que puedes encenderte que podría ser útil está aquí arriba, ver estos pequeños puntos, estos son todos útiles. activemos “Muéstrame las consultas”. Me está mostrando mis consultas de medios, esas son las que agregué. Se puede ver si yo [inaudible] por encima de ellos, es el 768, es 400. Puedes arrastrarlo al menos, sabes exactamente cuándo se activa esta cosa. Esto me parece realmente útil cuando he abierto otra página web y te gusta cuántas consultas de medios hay y puedes verlas todas. También puedes hacer clic en ellos, para saltarlo, para echar un vistazo a través de las diferentes opciones. ¿ De qué manera las cosas útiles es esto? Échale un vistazo a esto, parece un iPad Pro. Eso se acerca un poco porque quiere mostrarte todo, pero es el ancho correcto en relación al exterior, 400, 600. Por lo que el iPad Pro es de unos 1000 píxeles a lo largo de 1024. ¿ Qué más tenemos, veamos, no los tienen todos aquí dentro. Puedes editarlas y añadir las tuyas propias. Sé que esto es razonablemente viejo, tiene todo el nuevo iPhone, pero no los nuevos píxeles y no la nueva galaxia, así que vamos a buscar X. Aquí está la idea. Porque está tratando de encajarlo todo en su escala bajarlo un poco por lo que podría simplemente mantenerlo al 100 por ciento. Entonces no eres una especie de eso, esto es lo que nuestro [inaudible] luce raro, se alejó el 41 por ciento, podría decir que en realidad solo quiero verlo a tamaño real en mi iPad Pro. Estrasando, podrías meterte en eso. Si lo pones bajo en el móvil y golpeas reset ahora lo que va a hacer es que va a intentar imitar cuánto tiempo tardaría en una conexión a internet realmente mala y esa soy yo. O podemos dar la vuelta a nuestro iPad Pro. ¿ Qué más podemos hacer? Otras cosas útiles, marco de dispositivo. Aquí realmente nos vamos a quedar así, en realidad sí tienen, no saben aunque tengan un marco de dispositivo, donde se muestra, marco de dispositivo, no tienen para el iPad Pro, es ir al iPhone 4. Parece que tengo esa. A lo mejor tengo que volver a encenderlo y ocultar el marco del dispositivo. Marco de dispositivo seguro. Eso funciona cada dos veces que lo estoy haciendo. Tendrá la imagen en un iPhone o en el exterior. Aleja, tal vez necesiten alejar un poco. Funcionará para ti, te lo prometo. Funciona quizá en otro momento. ¿Qué más? No es tan importante sin embargo, Simplemente se verá como un iPhone. Puedes hacer capturas de pantalla. Relación de píxeles, hablaremos más adelante. A tipo de dispositivo, no necesito eso, eso es todo.Sólo estoy leyendo, ya sabes hacer eso. Esa es la forma súper fácil de imitar cómo se va a ver y eso es lo que vamos a estar usando cada vez más, sobre todo cuando empecemos a hacer cosas como el móvil. Ahora lo otro es que esto podría no verse exactamente igual cuando lo estás haciendo. Podría estar haciéndolo en el futuro con los autos voladores. Eso podría no estar en los lugares correctos, pero probablemente se encenderá en un lugar similar, en la vista y algunos de estos botones podrían haber cambiado y estar actualizados, pero el núcleo del mismo estará ahí podrías decidir a Google donde a la que se ha trasladado todo. A Google le gusta mover las cosas. Eso es todo para este video. Pasemos al siguiente. 82. Cómo cambiar la disposición de un sitio web responsivo, celular vs. máquina de escritorio: Hey ahi, en este video vamos a llevar nuestras dulces nuevas habilidades de consulta de medios junto con algunas de nuestras habilidades de flexbox pasadas. Para ello, ve desde la vista de escritorio donde es de tres cursos, ya estás listo para la tableta dos y móvil uno. Ahora esto es una respuesta adecuada pero empezamos a cambiar la estructura de un sitio para hacer el mejor uso de esta pantalla del estado medio disponible. Vamos a saltar al código VS y a averiguar cómo hacerlo. Primer paso, vamos a deshacernos de estas cosas. No necesitas el h1, no necesitas el estilo. Después dejará las consultas de los medios. Cuando esté eliminando el h1 en la consulta de medios, no elimine los segundos corchetes. Porque tendrá donde el navegador es bastante inteligente y dice: “Wow me falta esto, pero seguiré trabajando. Sólo asegúrate de que no los dejamos. Vamos a añadir un contenedor. Recuerda contenedores, aprenderíamos dónde se siente que debería haber como una etiqueta HTML5 específicamente llamada como un div y el encabezado no lo es, tenemos que llamar a una clase llamada contenedor. Aquí es donde todo va a ir. Vamos a darle estilo a este contenedor. Vamos a hacer todo eso en global. Vamos a decir contenedor. A mí me gustaría que lo fueras. Ponemos un color de fondo y primero nos aseguramos de que en realidad esté apareciendo color de fondo. Estoy harto de estos colores. Voy a recoger las mías pinchando sobre ella y luego lidiando con el recolector de color. Color de fondo, vamos a previsualizar y asegurarnos de que está funcionando. Nada está funcionando. ¿Por qué no? Porque no tiene altura. Eso lo sabía. Necesitamos una altura y no vamos a usar como altura regular y que vamos a usar min-height, en altura incluso vamos a tirar en 500 pixeles solo para que haya algunos se le metan. Ahí está. Eso no es, puede ser de cualquier tamaño. En realidad, probablemente a menudo dejaría de construir sabiendo que aparecerá en algún momento, pero es ancho para las clases. Vamos a añadir un ancho como lo hicimos antes. Vamos a decir un ancho de 1,024 píxeles de ancho. Ahora, el problema de hacer eso, un ancho por sí mismo como ese es un tamaño absoluto. Siempre va a ser 124. No me importa si eres móvil o tablet. Lo que vamos a hacer es que vamos a decir que puedes ser un máximo de hasta eso porque eso se ha decidido mi gusto. Ah, que el ancho. Ahí vamos. Tener problemas de computadora. Un max-width sólo va a decir, sube a eso pero no más allá pero puedes hacerte más pequeño porque este es el ancho máximo. Lo último que haremos es ponerlo centrado. Puedes recordar qué fue esto y que estaba margin-izquierda y derecha ajustada a auto? Vamos a usar nuestro atajo. Vamos a marchar hacia arriba y abajo va a ser cero, pero la izquierda y la derecha, puede ser auto. Este es el espacio entre ellos. Eso debería funcionar bien. Ese es mi contenedor. Yo ahora dentro de este contenedor, voy a añadir un montón de esas cuadras que viste ahí dentro. Hasta ahora les hemos estado llamando tarjetas y algunas instancias, cajas. En este caso vamos a empezar a llamarlos cols, abreviatura de columna. Por ninguna buena razón, no es gustarle una etiqueta predefinida aquí. Simplemente es muy común usarlo. Cuando empezamos a mirar las cosas más adelante, algo llamado bootstrap, usan la palabra col como caja en lugar de título de caja o tarjeta. También nos limitamos a tener el hábito de hacer eso. Yo quiero 10 de ellos y quiero dentro de esas cajas quiero h1. Voy a tratar de impresionarte con alguna imagen. ¿ Qué queremos? Queremos un col. Dentro de ese col, el mayor que corchete y dentro de ella va a tener un h1. Te mostraré otra cosa elegante. Si pones llaves aquí y dices caja celular ahí dentro, las llaves se van a poner dentro de esa h1 va a poner algo de texto como texto viejo plano llamado box. Esa es la mitad de lo que quiero. El rizado tirantes y 10. Eso es lo que quiero. Pero si hago veces 10, no va a funcionar bastante porque me va a dar un col y luego 10 h1s. Recuerda, hicimos esto antes. Lo pones entre paréntesis. La codificación ayudó a intentar poner dos en ellos. Todo esto para estar trabajando y tú eres que no valía la pena y no lo era totalmente. Supongo que te estoy acostumbrando a esta sintaxis, mostrándote unas cosas útiles geniales como poner llaves. La otra cosa extraña de ello es que una de ellas, me está dando alguna estructura bonita, pero en realidad se ve un poco más bonita si solo lo hago por el largo camino. Voy a hacer col y vamos a usar el caso correcto. Simplemente lo duplicaré. Parece más fácil, en este caso. El col dentro de aquí es un h1 y esto va a ser caja. Eso es lo que yo quería. Enfriar. Para duplicarlo, mantienes presionada la tecla de opción del Mac y la tecla Mayús, y presiona la flecha hacia abajo. Esa es la opción Desplazar flecha hacia abajo. Eso fue para un Mac. Si estás en un PC, es Alt, Shift flecha abajo y debes contar. No conté entre ellos. Voy a añadir numeración a ellos. Eso me ayudará y la forma elegante que conozco por hacer esto, excepto que miraré eso no terminó bien. Déjame conseguir algún número correcto también. Apenas había flecha abajo y empezar a escribir. Tenemos un vistazo lo que tenemos. Un montón de cajas. Ahora vamos a darle estilo a esas cajas. El llamado col, por aquí mi global, voy a decir punto col. Vas a ser un color. No, necesitas ser un color de fondo. Color de fondo. Voy a escoger cualquier color para poder dar click en él y escoger un color que me guste. No hace ningún propósito real de ellos. Ahí vamos. Escoge un bonito colores en. Almacenamos el aspecto col varios, vamos a darle un ancho y una altura. Perdón, yendo muy primero. Es sólo hacer eso porque no le he dado ninguna dimensión. Vamos a darle una altura mínima de, no sé, 200 píxeles. Bonito. démosle un ancho. Porque están retomando todo el asunto, veamos si el ancho lo arreglará. En lugar de hacer un max-width o un min-width, podríamos hacer tamaños absolutos y dejar de jugar con max-width. Pero vamos a usar porcentajes, que básicamente es lo mismo, porque no es un tamaño fijo. Lo que quiero en este caso es, veamos nuestro mark-up. Esta la vista de escritorio. Yo quiero que sea sobre eso así que tres a través, y dos a través y uno a través. Consiguió un ancho del 100 por ciento. Este va a ser 50 por ciento de ancho, éste iba a ser 33.3. Dejaré un poco de espaciado entre ellos, solo podría hacer que este 50 por ciento de ancho. Mira, no va a funcionar. El motivo por el que no va a funcionar es, por qué se apilan uno encima del otro y no a su lado ni en línea. Ya lo tienes. Podríamos decir que las columnas se muestran en línea, y estarías totalmente en lo correcto, bloque en línea. Eso funcionaría, pero lo que vamos a usar es volver a nuestro Flexbox. ¿ Recuerdas qué podríamos hacer con Flexbox? Acerca de display, y vamos a usar Flex. Su va a poder las cosas para nosotros. Oh, he ido al equivocado. Tiene que ser el padre. ¿ Te acuerdas de eso entonces? No puedo probar por ti. Vamos a fingir que fue una prueba. Se lo aplica a la contención, entonces, se aplica a todos los niños, cuál de estos cols. Entonces como ahora, ese tipo de funciona. Por defecto, apretó a los 10 en la misma fila, y lo hizo 100% del padre. Lo que me gustaría hacer es realmente hacer flex wrap, y ¿qué tipo de envoltura? Apenas la vieja envoltura regular. Guárdalo, impresionante. El 30%, están envolviendo. De acuerdo, entonces, 30, 30, 30, llegamos a 90, dejando aquí un hueco. Entonces un par de cosas, en realidad, antes de irnos, envuelven reversa. Entonces la caja 10 está en la parte superior, nunca uso eso, botón parecía. Sentí que quería compartir eso ahí. Ahora lo que quiero hacer es poner el espaciado. Podríamos jugar con márgenes, pero ¿recuerdas lo elegante que hemos aprendido antes? Podemos justificar los contenidos, y vamos a usar “Espacio entre”. Aquí tienes. Aquí lo verás. Tenía que señalártelo antes, pero teníamos un fondo blanco, así que el espacio alrededor es uniformemente a ambos lados. Ni siquiera quiero eso. Siempre quiero espacio entre. Añadamos un poco de relleno al fondo de ellos. Entonces las llamadas, vamos a tener un poco de relleno, margen inferior de 40 píxeles. Está bien, se ve bien. Lo bueno de ellos, por el 30%, son responsivos por sí mismos. Van a un ancho máximo, pero se les permite ir más pequeños. El contenedor se hace más pequeño, pero no pueden ir más allá de eso. Nos va a funcionar en este momento. Podrías diseñar para un tamaño un poco más grande, y depende de tu público, pero podrías estar diseñando un sitio web completamente grande para personas que simplemente nunca lo van a ver. Podrían no ser tantas personas que tienen esta vista de escritorio ginormosa. Está bien, eso es todo por eso. Ahora estoy listo para ajustarlos para las diferentes consultas de medios. Entonces aquí abajo, voy a usar lo mismo. Entonces col, en nuestros tirantes rizados. Voy a decir, col, qué vas a hacer el ancho. Por lo que el ancho aquí abajo va a ser un porcentaje diferente. Entonces recuerda el 50% para nuestra vista de tablet, pero un poco menos para esto. Entonces tal vez el 45%. No tienes que reiterar cosas, como justifique, o Flex wrap, porque ya se aplica globalmente a todo. Entonces echemos un vistazo. Está bien, entonces, vamos a usar nuestra propia fantasía, haga clic derecho, inspeccione. Vamos a mostrar nuestras consultas de medios, luego encendido por defecto, mostrar, mostrar, mostrar. Estamos ahí en azul. Vamos a este tamaño más grande. No se está ajustando. Es por esto. Lo levanto al iPhone 4, y no va a cambiar. Haga clic en él para responsive, y cambiará. Entonces vamos. Visión grande, tres cajas, ve a la pequeña. Eso es sólo 45. El hueco es grande en el medio ahí. Entonces tal vez 47 podría ser un mejor porcentaje, pero te das la idea. Lo hicimos con llano viejo H1s antes. Ahora lo estamos haciendo en realidad con la estructura del sitio, que es equipos para ser más lo que haces, y lo hemos hecho por tablet. Tableta, escritorio, tablet. Móvil, hagámoslo a continuación. Entonces echemos un vistazo a nuestra consulta de medios aquí. Sigues tú. Pongamos al 100%. Entonces no tenemos ningún hueco, y va a llenarlo probablemente. Aquí tienes. Ponte un poco más pequeño, más grande. Tres, dos, uno. Qué buenos somos. Está bien, y ese es el tipo de comida para llevar realmente grande para este video, es que estamos usando exactamente lo mismo. Teníamos que hacer un poco de estilo para que pareciera un sitio web. Hicimos algunas cajas, pero para hacerlo con estructura, todo lo que realmente necesitamos hacer es agregar estos dos bits, realmente, solo necesitamos estos dos para ponerlos en línea, y luego para envolver a la siguiente línea. Entonces acabamos de decir, a este tamaño diferente, quiero cambiar eso. No quiero ser ancho más del 30%, va a ser 45. Por lo que realmente no decimos dos filas, o dos en una fila, sólo lo hacemos para que eso suceda dándole un tamaño que solo permite que dos caben. Muy bien, un par de cositas. Uno que ignoré se hace aquí en el móvil. Te darás cuenta de que sigue siendo una línea blanca alrededor del exterior. Esa es una de las primeras cosas que hago. Por lo que por defecto, ahora tienes un defecto. El H1 es negro, y es Times New Roman, y es bonito y grande y audaz. Lo mismo con el cuerpo. El cuerpo tiene un margen global. Ni siquiera sé qué es, pero siempre paso, y digo margen 2-0. Para que no haya ninguno en el exterior en ningún punto de vista. No lo quería para ninguno de ellos, y llega ahí desde arriba, desde los lados, y para el móvil, lo consigue justo por fuera. Es bonito, y tipo de unido, porque en el móvil cada píxel cuenta, así que, quieres conseguir tanto detalle como puedas en ese ancho. Lo hicimos aquí, y estamos peleando con los incumplimientos. Entonces esa es una muy buena oportunidad para decir, en realidad, estoy haciendo esto, estoy a punto de construir algunos restablecimientos CSS yo mismo. ¿ Qué tal si solo uso ese restablecimiento CSS que ya tenemos? Ya tenemos uno, ¿recuerdas? Tenemos uno, entonces, voy a borrar eso. Entonces volverá. Tengo uno, recuerda lo [inaudible] Así que sólo voy a copiar, y pegar eso, y usar eso. Entonces te mostraré, lo que hago ahora, es cavar en mis archivos para una carpeta vieja. Entraré aquí, y diré recordar el Proyecto 2 en mi escritorio, había ese restablecimiento de CSS. Voy a copiarlo de mi Proyecto 3. El mío está en mi escritorio, necesito algunos atajos para acelerar las cosas. Voy a pegarlo aquí, y agregarlo a mi CSS. Es un enlace, y uno CSS. Si borras el texto aquí, esperemos que lo sugiera, CSS reset. Yo lo he hecho totalmente mal, y tú estás como, él lo ha hecho mal. Si no lo has hecho, discutiremos lo que he hecho, porque en realidad se hizo lo que queríamos, deshizo del margen alrededor del exterior para todas las vistas, también se deshizo del texto gigante. Ahora es sólo un tamaño viejo regular, pero lo que no hizo, lo que va a tropezar con problemas más adelante, es digamos que quiero estancar el H1. Entonces voy, de acuerdo, H1 ahora, vas a ser un tamaño de fuente de 100 pixels. Impresionante. Comprébalo. Comprobarlo, comprobarlo, no funciona. ¿Por qué no funciona? Pausa. Hay que pensarlo, despausarlo. Estás sin pausa ahora. No lo detuviste, sé que no lo hiciste. Es esta cosa. Están en el orden equivocado. Por lo que se está aplicando mi estilo. Recuerda el flujo, sigue, y dice, está bien, sé un H1 de font-size 100, entonces éste carga, y si le echamos un vistazo a eso, tómalo aquí, dice, H1 es un tamaño de fuente del 100%, y las otras cosas que les están diciendo qué hacer, no, esa cosa nos está haciendo simplemente ir al 100% del one-in. Entonces, ¿sólo vamos a asegurarnos de que el pedido sea el camino correcto? Entonces eso está ahí. Ahora, ese atajo, debes cortarlo, y pegarlo encima de él, pero si haces clic en él en cualquier lugar, y mantén presionada la tecla “Opción” en el Mac, la tecla “OP” en el PC. No, resalta toda la línea, y mantén presionada la tecla “Opción” en el Mac, "OP” en el PC. Puedes ver, puedo como que simplemente toque mi clave de error, siempre y cuando mantenga presionada mi opción, o PC definitivo, puedo simplemente mover esta cosa a lo largo. Así que asegúrate de que el CSS se restablezca primero, luego haz eso. Ahora mi tamaño de fuente es bonito, y grande. No quiero eso. Obtén la idea. Guárdalo. De acuerdo, así que ese es el tipo de fundamento real para nuestro sitio web receptivo. Hay mucho más por hacer, pero ese es el núcleo de ello. Estamos usando Flexbox, de la que ya conocemos o un poco, y estamos usando consultas de medios para afinar, pero es un CSS encendido y apagado. Muy bien, espero que te sientas bien con el diseño web receptivo. Te veré en el siguiente video. 83. Cómo prender y apagar cosas en sitios web responsivos para celulares, tablets y máquinas de escritorio: Hola ahí. Te puedo decir por tu cara que desearías que este fuera un video sobre encender y apagar las cosas, dependiendo de si fuera móvil o tablet, estás de suerte amigo mío. En mesa de vista, tenemos la casilla 1, 2, todo el camino hasta 10, todos ellos. Pero en el escritorio, porque tenemos tres columnas a lo largo quiero nueve, quiero 10 de descuento, y se ha ido, mira. Después en el móvil, queremos que la caja 1, 2, 3, 4 y luego atender un trozo de ellos apagado y simplemente encender 10 solo para patadas. Este video te va a mostrar cómo encender y apagar las cosas usando CSS y consultas de medios, dependiendo si estás en móvil o tablet, la versión corta es básicamente solo aplicar una clase especial con display, ninguna aplicada a las cosas que quieres apagar y se apagará. Pero para la versión larga y todas las cosas buenas, espera, saltemos y trabajemos como hacerlo. Para editar necesitamos crear una clase en nuestro CSS que apague y luego aplicar esa clase a lo que quieras apagar. El estilo en nuestro caso es recordar en vista de escritorio, vamos a alejar. Es que quiero nueve de ellos mostrando, así que es lindo y ni siquiera quiero que ese extra pasando el rato, que actualmente sí, es este tipo y te quiero ahí. Estos y entonces así cuando lleguemos a esta vista, podemos sintonizar 10 de nuevo a pesar de que sólo tengo ocho aquí 10 lo llenarán todavía muy bien. Pero en un móvil quiero volver a encenderlo todo, porque realmente no importa cuantos tenga. Echemos un vistazo a hacer eso. Vamos a crear una clase, ¿de acuerdo? Vamos a llamar a éste sólo ocultar escritorio. Es un poco largo y no lo llamaría así, probablemente lo llamo H u me escondo D. Solo para hacerlo más pequeño, pero trataremos de hacerlo realmente explícito por lo que es realmente fácil trabajar en esta clase, vale. Lo que vamos a hacer es decir display, hemos hecho block, hemos hecho inline-block, hemos hecho flex, no podemos hacer ninguno. Adiós. Está en mis cosas globales, lo que significa que estoy apuntando a escritorio, está bien. Si quisieras apagarlo para tablet, probablemente cambies el nombre de la misma, tenerlo aquí, en realidad podríamos hacer eso en este video solo para realmente explicar lo que estamos haciendo. Ahora, necesito hacerlo porque es bastante largo, sólo voy a copiarlo, aplicarlo a algo. casilla 10 aquí, queremos sumar dos clases. Así que asegúrate de que haya un espacio entre las dos clases separadas, asegúrate de que esté dentro de tus comillas. Esperemos que ahora, en esta vista aquí se va a apagar. Se ha ido, bueno sólo de ustedes, pero también se ha ido en esta vista. Tableta y móvil. Es por ese tipo de flujo. Fluye por aquí y no hay nada más diciéndole que vuelva a encenderse. Tenemos que hacer es agarrarnos a todos, incluyendo el corsé rizado y asegurarnos de que cuando estés pegando esto deja ahí a ese tipo, tiene que estar ahí con el tipo de cierre de esta consulta de medios y lo pegaré. Yo quiero girarlo display a block, para volver a mostrarlo. No necesito decírselo por esto porque va a fluir a través del móvil, ojalá. En el escritorio, consigo nueve y no puedo desplazarme más hacia abajo. En tablet aunque aquí vamos, apareció la caja 10 y luego en el móvil, debería estar ahí también. Digamos que en el móvil, tenemos que apagar un montón de ellos porque es solo que tal vez se está desplazando muy largo. A lo mejor tienes como 50 y en tablet tienes 40, pero un móvil usa 10. Solo finjamos que eso es lo que queremos hacer. En el código VS, necesitamos crear otra clase, y no quiero activarla en el móvil. Para el último corsé rizado allá, voy a decir que quiero uno llamado, ocultar sólo móvil. Pero debería ocultar sólo móvil, solo llamado, eso parece más sencillo. Lo mismo, display, ninguno. Porque está ligado a este CSS, es sólo a lo que lo aplicas, que va a surtir efecto, tipo de sentido. ¿Qué voy a hacer? Voy a hacer algunos cursores múltiples, que es Command Option y mi Mac, o opción de control en un PC. ¿ Estás harta de que lo diga [inaudible]? Espacio y voy a llamarnos mientras lo voy a llamar, voy a agarrar el móvil de escondite. Esperemos que todos estos se vayan a apagar, 10 no va a estar ahí porque dejé eso fuera este pequeño grupo. Echemos un vistazo. Toda esta vista, vale, tengo nueve, vista de mesa tengo los 10 y luego un móvil, tengo, tenemos 1, 2, 3, 4 en 10. Estamos haciendo cosas receptivas. No es muy bonito, pero sabemos agregar tomas en imágenes. Tenemos que hacerlo por el sitio porque las imágenes receptivas son bastante importantes. Nos pondremos a eso a continuación. Pero espero que te acostumbres a las consultas de medios de uso tanto para hacer cambios de ticks, sino también para hacer cosas como cambios estructurales y encender y apagar las cosas. Acabamos de hacer cosas sencillas como encender y apagar cajas. Podrías cambiar completamente tu sitio web por móvil. Podría ser importante que cuando la gente esté buscando tus sitios como lo hice para mi negocio de Nueva Zelanda. Es más como un negocio de salón de clases siéntate, ¿verdad? La gente viene a hacer cursos de Adobe o cursos de diseño web. Pero en realidad físicamente volvemos a lo que hacemos es cuando el visualizarlo en el escritorio, les mostramos información porque sabemos que probablemente está capó y están buscando comprar un curso, les damos información sobre eso. Pero cuando están en el móvil, cambiamos la página de inicio para que quede muy clara, nuestra dirección y número de teléfono, porque eso es más útil para alguien en su móvil cuando normalmente se apresuran a intentarlo y llegan tarde para la clase o no pueden encontrar el edificio. Podrías encender un enorme, puedes encender y apagar divs completamente que tengan un bonito mapa fresco en él. O direcciones o hacer que el número de teléfono realmente claro en la página de inicio. No es realmente útil en la vista de escritorio, pero sé realmente genial tenerlo en el móvil. Se te ocurre la idea, pero encendiendo y apagando las cosas usando display. Ninguno, ese. Te veré en el siguiente video. 84. Qué es densidad de píxeles; proporción de píxeles dppx de imágenes responsivas en diseño web: Hola ahí. Este video, es todo sobre imágenes responsive. El motivo por el que es tan largo es porque hay algunos métodos diferentes. Este video sólo va a ser un resumen mostrando los pros y los contras de cada uno de ellos. Es un mundo un poco turbio. Si lo estás encontrando duro hasta este punto, no te preocupes, no eres tú, es Internet. Las imágenes sensibles son un poco duras. Vamos a hablar de SVG. Vamos a encontrar pequeños trucos como ajustar la imagen al 100 por ciento. Estamos usando el método de cubierta CSS. También veremos el método de conjunto de fuentes, donde cambiamos nuestras imágenes dependiendo del tamaño del navegador y para entenderlo todo, necesitamos hablar de algo llamado densidad de píxeles, o la relación de píxeles, o los puntos por píxeles, DPPX. Hay un montón de palabras para ello. Básicamente, es lo buena que es una calidad el dispositivo en el que tu público está viendo tus imágenes. Hablemos de todo eso ahora en el video. Está bien. Entonces primero, describamos por qué necesitamos imágenes responsivas y luego cubriremos las diferentes formas de hacerlo. Básicamente, queremos, cuando nuestro público llegue a nuestra página web, queremos darles la imagen de la mejor calidad que podamos para el tamaño de su dispositivo. Si estás en un celular realmente viejo, solo necesitan esta versión pequeñita porque la pantalla no puede mostrar ninguna mejor igualdad que ésta, así que solo le das exactamente lo que necesita. ¿ Por qué te molestas en hacer eso? Debido a que los tamaños de archivo. Esta cosa de aquí es, se puede ver, es enorme. No tiene sentido obligar a esta persona que está en un teléfono móvil que está usando Internet quizá lento a descargar este archivo gigante cuando sólo van a poder ver la calidad de algo de este tamaño. Tenemos que trabajar una forma de decir dispositivos de pequeño presupuesto, pantallas de porquería, obtiene este, pero dispositivos súper sexy de densidad de píxeles realmente alta, obtiene este muy grande y bonito. Se ve hermoso en la pantalla en la que gastaste cantidades increíbles de dinero. Responsible solo significa que cambia para las imágenes. Eso lo conseguimos. Eso es bastante fácil, ¿verdad? Ahora bien, ¿cómo decidimos? Aquí es donde se pone un poco turbio. El tamaño físico es una cosa. Todos sabemos que el tamaño físico no significa una calidad increíble. Todos tenemos nuestro teléfono sentado en ese segundo cajón abajo en nuestra recámara que tiene tipo en él y es viejo y es presupuesto y lo enciendes y te sorprende lo mal que se ve. Cuando lo compraste por primera vez, hace muchos meses, se veía muy bien como, “Hombre, este iPhone 3. Mira la calidad”. Pero ahora lo comparas con modelos más nuevos y estás como, “Wow, puedes contar los píxeles”. Por lo que no se trata solo de tamaño físico porque tu teléfono viejo y tu nuevo teléfono están físicamente, en tu mano, son aproximadamente del mismo tamaño. Depende de la edad que tuviste. Si tuviste un solo toque [inaudible] o un Nokia viejo, eso es diferente. Pero solo cualquier smartphone viejo versus nuevo smartphone. Son del mismo tamaño. ¿ Qué es diferente entonces? Se trata de densidad de píxeles. Vamos a hablar de eso. Se trata de una mezcla de densidad de píxeles y tamaño físico y es una combinación de ambos para decidir qué imagen se carga. El tamaño físico es fácil. Realmente no necesitamos discutir eso. Si tienes un iPad Pro realmente grande, necesita una imagen más grande porque simplemente es más grande. En tanto que el tamaño físico de un celular es mucho menor. Se puede utilizar una imagen más pequeña. La densidad de píxeles es el oddball. Discutamos eso. Está bien, así que voy a discutir la densidad de píxeles. También se conoce como la relación de píxeles. Algunas personas lo llaman los puntos por píxeles o DPPX. Esa es la versión acortada de puntos por píxel. Todos estamos hablando de lo mismo. Estamos hablando de lo buena calidad que es esta cosa en diferentes pantallas. Ahora te voy a dar mi buen panorama. Bueno, lo mejor que pueda hacerlo. Si quieres bajar un poco más este hoyo de conejo, este es probablemente un artículo realmente bueno de Peter Nowell, he dejado un enlace para ello en tus notas, en tus archivos de ejercicios bajo el Proyecto 3. Ahí está. Medio y se puede ver lo que está haciendo, ¿verdad? Este es un ejemplo razonablemente bueno. Esta es una pulgada, digamos y es un bloque grande de color. Pero si divido ese bloque de color en cuatro partes, consigo un poco más de detalle. Yo puedo hacer algunas cosas. Yo puedo colorear este, no éste, éste. Obtengo un poco más de detalle con esta densidad de píxeles. Esto es el doble de lo que esto. Entonces puedo hacer tres veces más cortando en tres píxeles. Te imaginas si corto esto en como 1,000 pequeñas líneas y cubos, realidad puedo empezar a dibujar fotos. Me da mucho más cuadrados, así que en realidad puedo conseguir algunos detalles ahí dentro. Esa no es razonablemente una buena imagen. Este me gusta más sin embargo. Si me desplazo hacia abajo, esto lo muestra. Este es tu viejo teléfono, este es tu nuevo teléfono y esto solo está mostrando la pantalla para uno y luego dos. Sube a tres, algunos teléfonos van cuatro. Te puedes imaginar que siguen cortando estos pequeños cuadrados, solo puedes conseguir un detalle realmente, realmente increíble. Hablamos de la relación de píxeles. A veces se llama retina. Mac, creo que soy dueño de la palabra retina. Nadie más parece usarlo. Google parece usar algo llamado alto DPI. Todos estamos hablando de lo mismo otra vez, la relación de píxeles, densidad de píxeles y la retina es la forma en que Mac lo trata. Pre-retina y son como mi MacBook Pro que tengo delante de mí aquí, tiene una pantalla retina. Se llevó al viejo estilo Mac a este nuevo y hermoso. Estas casitas son de gran tamaño obviamente, por ejemplo. Ahora, ¿por qué es importante? Aquí está mi pequeño ejemplo. Esta pequeña imagen aquí de la que hablamos antes. Podemos tener algo que sea físicamente de este tamaño, digamos un celular, voy a acercar, pero en realidad necesita una imagen mucho más grande el doble del tamaño que pueda encogerme. Porque si hago zoom en esta imagen, si acerco lo suficiente, se empieza a ver en realidad está compuesto de cubos pequeños, como vimos por aquí. Pequeños cubos. Pero desde lo suficientemente lejos, nuestros cerebros humanos no pueden distinguir la diferencia entre la vida real y un montón de puntos. Lo que tenemos que hacer es, si quiero una imagen así que este es mi teléfono realmente asqueroso, digamos, ahora es mi hermoso teléfono, necesito darle una imagen diferente. No puedo darle eso, lo siento. Necesito darle esta imagen que está aplastada a cerca ese tamaño porque necesito todos esos píxeles extra y a veces eso no funciona. Probaré mi explicación por aquí. Digamos, este es mi mejor teléfono y necesito una imagen para ello que sea alto DPI o retina o tenga una relación de píxeles de dos en lugar de uno, voy a copiarlo y pegarlo y alinearlo. Necesito doble pixeles. Lo que hago es tenerlo que aplastarlo y luego necesito copiarlo y pegarlo así que tengo esto. Se puede ver la relación. La imagen sigue siendo del mismo tamaño, pero tengo muchos más puntos con los que puedo jugar. ¿ Eso ayuda con la densidad de píxeles? A pesar de que esta imagen de aquí es del mismo tamaño que el original, ¿Dónde está? Pero digamos que tenemos dos imágenes, la pequeña y la más grande que he aplastado. Esta es físicamente del mismo tamaño, pero tiene una mayor densidad de píxeles. El tamaño del archivo es mucho más huger. Cuando cargo mi teléfono móvil malo, le doy esta imagen que tiene una densidad de píxeles de uno. Pero mi teléfono elegante consigue algo que es físicamente del mismo tamaño, pero tiene una densidad de píxeles de dos o tres o cuatro. Te puedes imaginar que seguimos agarrando estos y lo copiamos y lo pegamos y lo hacemos una versión más pequeña y seguimos haciéndolo más pequeño hasta que el teléfono consiga la imagen que quiere. Simplemente significa que puedo hacer un mejor detalle. Espero que consigas lo que quiero decir, mismo tamaño físico, pero la densidad de píxeles es mucho más apretada, para que el tamaño del archivo sea mucho más grande. Dos cosas que consideran el tamaño físico del dispositivo simplemente podría ser más grande, pero también el mismo dispositivo podría tener densidad de píxeles de dos o tres o cuatro y la parte loca es, puedes tener 1.5, 1.75. Se pone desordenado en términos qué imagen es perfecta para qué dispositivo porque es tantos dispositivos. Sigamos adelante y en realidad solo te enseñamos cómo implementarlos en lugar de simplemente hablar de lo que es. Necesitábamos cubrir esto para poder decidir qué método en este momento es el mejor. Hablemos del método número 1 para exportar unas imágenes de respuesta realmente buenas. El mejor es un SVG, eso es lo que estos pequeños iconos aquí problema SVG necesita ser una mirada realmente sentada puedes decir estos son realmente iconos, estilo clip art, logos con realmente buenos para SVG y escalan, tú no tienen que hacer diferentes tamaños como vamos a tener que ver con imágenes sin embargo, para escalar para el infinito. Se harán más y más grandes luego yendo al tamaño de una montaña si quieres que lo hagan, y el tamaño del archivo seguirá siendo minúsculo, principalmente porque se trata más de una ecuación matemática de lo que son reales, un grupo de píxeles de colores estos ajusta puntos de anclaje en coordenadas x_y y les va muy bien como un SVG como un JPEG o un PNG, es sólo una forma de exportar a estos tipos. Lo he hecho en un video anterior en este curso, cómo explotarlos de todos los diferentes programas. Vamos a dejar SVG entonces ese siguiente método y el que más uso es el método de ancho 100 por ciento, estirándolo para que se ajuste al dispositivo. No es el mejor método la única razón por la que uso esto tan a menudo es que no había una manera realmente buena de hacerlo en este momento. Habrá. Nadie ha descubierto aún la regla absoluta asombrosa. Justo cuando sienta que eso resolverá todos los problemas. O bien no tiene buen soporte para el navegador o es realmente difícil de implementar con toda honestidad, me vuelvo mucho a este método. Tiene algunos picotejos porque es súper fácil de hacer. Tiene algunos grandes inconvenientes. El principal es este es mi sitio web, ver a este guapo hombre de fondo aquí. Si estoy en una pantalla grande, me muestra una versión de la misma de calidad razonablemente buena, pero si bajo a una pantalla pequeña, ahora derecho derecho podría inspeccionar, si el tuyo no se ha encendido en este pequeño dispositivo de vista previa para ir desde no verlo hasta verlo como mi teléfono. Voy a hacer un iPhone cuatro. Ver esta imagen aquí es exactamente la misma que aquella gran imagen que estaba ahí. Esto es eso de aquí. Lo he puesto en otra ventana. Este genoma es imagen, lamentablemente carga en una pantalla realmente pequeña. Si esta persona está en una conexión a Internet realmente lenta y tienen que descargarla. Eso se hace en la versión gigante, pesar de que no lo pueden mostrar en el dispositivo. Eso es sólo la imagen ajustada a un 100 por ciento. Cualquiera que sea el contenedor en el que esté va lo llena hasta un 100 por ciento. La otra cosa que hemos hecho en este curso es muy similar, por lo que un 100 por ciento es muy similar a la portada tal vez cuando el CSS lo vemos en esta imagen aquí decimos, está bien, esta imagen, queremos que cubras como una propiedad CSS para que cuando ajuste el tamaño, puedes ver que se ajusta, se hace más pequeño y más grande. Portada sí hace un 100 por ciento, pero hace algunas cosas de lujo cuando puede moverlo en el medio y centrarlo y esas cosas. Ese es el método número 2 fácil, pero puedes decir que tiene algunos inconvenientes, principalmente que ver con solo cargar una imagen para todos. No es realmente bueno para la velocidad de carga de página. Google no le va a gustar tu página tanto como lo haría si se pusiera tan pequeño como los tamaños de archivo como puede conseguir. El siguiente método es similar al del que acabo de hablar, un ancho 100 por ciento puedes simplemente forzar un tamaño. Este es el proyecto en el que estamos trabajando. Simplemente voy a lanzar una imagen sensible a mayúsculas y minúsculas, vamos a agregar una imagen, tengo algunas imágenes en mi carpeta. Tengo el pug está de vuelta. Lo que puedes hacer es echarle un vistazo un poco a él como una la parte inferior cuelga y lograr esto apagado realmente apagó mi vista previa del dispositivo. Este mi pug. A mí me gusta el pug y está exhibiendo en su yo gigante lo más grande que puede. Desafortunadamente, está en una densidad de píxeles de uno y es un poco difícil de ver en pantalla, pero probablemente en tu video, puedo decir que no es una imagen de buena calidad. Lo que puedes hacer es machacarlos como lo hicimos aquí e ilustrador. Recuerda que agarramos esto y dijimos, solo hagamos esto más pequeño y los aplastamos para obtener la densidad de píxeles de la puja, pero el intercambio es que el tamaño físico se hace más pequeño. Eso es algo a considerar cuando estás explotando imagen, probablemente vas a tener que explotar más grande de lo que necesitas, el doble del tamaño si planeas aplastarla a la mitad. Echemos un vistazo. Puedes en tu HTML hacer algo interesante. Se puede decir que puedo agregar un estilo y puedo agregar un ancho, normalmente hacer esto y CSS, pero esto es hackear para que esto vaya y diga, quiero que sea de qué tamaño es? Creo que tiene 500 píxeles de ancho. Ya lo he comprobado. Si no estás seguro de cómo comprobar en un Mac bajo mi Proyecto 3 de compite en la cruz de imagen, haz clic con el botón derecho en él, obtén información en un PC, es algo parecido. Debe haber algunas buenas propiedades. Puedes decirle que tiene 500 píxeles. Lo que voy a decir es en realidad un 250 ahora. Sólo voy a obligarlo a ser la mitad del tamaño como era y ojalá ahora. Él es la mitad del tamaño, pero el doble de calidad y mi pantalla que estoy viendo físicamente en el mundo real tiene una densidad de píxeles de dos, es un DPI alto o pantalla escrita. Esto se ve mágico si los aplasto otra vez eso es un cuarto, pero la calidad no es mejor, no es extra como la profundidad al pug. No hay necesidad de que yo vaya tan bajo en esta pantalla, eso es un lindo, fácil arreglar libre alguien fue el último. Simplemente le daré a la mía un ancho y el navegador ha adivinado la altura. El siguiente método es éste aquí llamado la fuente it. Hemos hecho la fuente para las imágenes. Vamos a ver esta cosa llamada fuente it y esto es en mi opinión, la mejor manera las imágenes implementadas que cambian tamaño dependiendo del ancho del navegador. Cuenta con un buen soporte de navegador y en cuanto a ser diseñador, no es enormemente impactante en cuanto a la cantidad de trabajo que necesitas hacer. Hay otros métodos que no vamos a cubrir en este curso, y los he dejado fuera principalmente por el mal soporte de navegadores todo super complicado requiere una codificación que está fuera del alcance de este curso. De qué vamos a hacer en lugar de que este pequeño video se alargue épicamente, voy a cubrir la fuente lo en el siguiente video con mejor detalle. El quid de ello es que estas diferentes imágenes se cargarán en un ancho diferente del tamaño del navegador 500, 1000, 1500. Si esta fuente no puede ser utilizada por el navegador porque es un navegador antiguo, solo usará la imagen antigua regular que tenemos. Vamos a darle la versión pequeña porque si tienes una verdadera navegación, probablemente tengas una realmente en pantalla, pero es tallar esto en su propio video y se tomó sobre tan set. 85. Cómo exportar imágenes responsivas para el sitio web desde XD Photoshop Illustrator: Está bien, quería duplicar de nuevo en este video a las imágenes. Hemos hecho imágenes en un video anterior, pero realmente quiero resaltar las imágenes responsivas. Ahora que entendemos lo que es responsive, vamos a necesitar algunas imágenes diferentes. Ahora por nuestro método de estiramiento 100 por ciento que haremos a continuación. Sólo necesitamos una imagen muy grande y vamos a reducirla. Eso es bastante fácil. El método después de eso llamado el método SRC sit, eso está todo establecido, va a requerir diferentes imágenes físicas diferentes en diferentes tamaños. Vamos a encenderlas y apagarlas dependiendo del ancho físico y la densidad de píxeles. Entonces primer paso vamos a trabajar con Photoshop. Asegúrate de que la imagen que deseas redimensionar esté abierta dentro de ella. Photoshop no es el mejor programa de imagen de diseño web absoluto, pero se acostumbra tan comúnmente para hacer diseño web. Eso lo cubriremos primero. Ir a Archivo. Ve a Export y vamos a utilizar explore as. Es posible que tengas que restablecer el tuyo. Tu calidad es probablemente en 100. Se quitará lo último que hayas hecho. Podrías volver a ajustar tu báscula a 100. Podrías haber ido a algunos de estos si lo tienes. Lo que quiero hacer es que sea un JPG porque es una imagen que parece que necesita ser un JPG. Voy a tener la calidad tal vez abajo a los 60, se ve bien. Ahora el tamaño más pequeño, comenzaremos con el más pequeño. Digamos que quiero que sea un ancho. Necesitas tus dimensiones generales. El mío tiene por defecto 300 píxeles de ancho, siempre y cuando sea más grande de lo que lo necesitas porque quiero ser el tamaño pequeño para ser 400, muy bastante pequeño. El ratio funciona fuera de [inaudible]. Tienes que asegurarte de que tu trabajo donde si se pone un poco de descuento. Vamos a tratar de poner nuestro teléfono móvil en esa pantalla, y ese va a ser nuestro tiempo uno. Entonces lo que hago es añadir uno más. Esta va a ser las veces dos o alto DPI. Se puede ver que se puede hacer veces tres. Voy a decir que eso es lo que voy a hacer y golpear exportación y en mi escritorio, voy a poner, los agruparé ahí. No les he dado un nombre muy bueno. Esperemos que lo hagas. Ahí está esa primera imagen y ahí está mi segunda. Ahora, los voy a abrir de nuevo en Photoshop sólo para mostrarles la diferencia de tamaño. Ese es el pequeño ahí y ese es el grande al doble de tamaño. Es así como sacar dos versiones de Photoshop. XD es muy similar. Digamos que tengo esta imagen de mi Mac aquí arriba. Yo lo selecciono, hago doble clic en él. Tengo la imagen parte de la misma y voy archivo, exportar. Voy a exportar el seleccionado y aquí abajo, este es el cambio. Aquí abajo, en lugar de solo diseñar, vamos a llegar a la web y me va a dar, se puede ver esa pequeña escritura. El editor acercará el zoom. Alguna vez lo verías bien, pero puedes ver que obtienes un 2_x y un 1_x si estás haciendo cosas para iOS. Es decir iPhones o iPads, requerirán una vez tres. Android requiere tantos. Pero vamos a hacer sólo una y dos veces. Yo también voy a exportar eso a mi escritorio. Dale un nombre. Es un mal nombre. Se va a volar por esto porque ya lo hemos hecho. Sólo quería mostrarte eso. Por eso terminas con este con el 2_x hasta el final. Es sólo el doble del tamaño del original. Los abro en Photoshop solo para mostrarte una versión grande, un pequeño verson. Para un método del 100 por ciento solo vamos a usar este y reducirlo. Cuando hagamos método sit, vamos a cambiar entre estas dos imágenes dependiendo del tamaño del navegador y la densidad de píxeles. El último es Illustrator que se acostumbra comúnmente. Este de aquí, no tenía un gradiente y no lo era, bueno esta sombra de gota, probablemente solo uso SVG. Lo que tenemos que hacer es ventana. Necesitas abrir tus activos, exportar, seleccionar lo que quieres exportar, arrastrarlo a este panel, darle un nombre mejor del que tengo. Entonces aquí abajo es donde usted decide. SVG no va a funcionar en este caso. Voy a tener que escoger un JPG. Estoy escogiendo un 50 por ciento JPG, no me da 60, así que me llevaré 50. Dijo que necesita un sufijo a ella. No necesito eso. Puedes tenerlo, es justo como agregar al nombre del archivo. Voy a tener una versión uno, voy a tener una versión que puedes ver. Puedes ponerte realmente alto. Voy a tener sólo una versión dos. Se va a agregar ese sufijo al final para que coincida con el resto de ellos. También hazlo ese. Está golpeando el menos. Dice menos 50, realmente sólo dice que estoy al 50 por ciento de calidad JPG. Haremos esos dos. Yo voy a hacerlo. De lo que vamos a hacer. Voy a dar click en él para que se ponga azul. Entonces voy a dar clic a exportar y terminamos en el mismo lugar. Escritorio, exportación. Debería tener dos fondos geniales. Incluso lo puso en pequeños grupos. Gracias Illustrator. No estoy seguro si eso es gracias. Pero de todos modos, tengo dos de ellos uno, dos los abriré los dos en Photoshop para que pueda ver la diferencia de tamaño. No sé por qué. No creo que confíes en mí. De todos modos, versión pequeña, versión gigantesca y en realidad eso es un Zoomed out. Esa es la versión pequeña al 100 por ciento y esa es la otra versión. El doble del tamaño masivo. Tenemos nuestras imágenes. Trabajemos por el resto de esta sección de imágenes responsive y empezaremos a implementarlas. Nos vemos en un segundo. 86. Cómo añadir imágenes responsivas a un sitio web usando 100% de ancho en HTML y CSS: Hey ahi, este video es sobre imágenes responsive. Este en particular está trabajando con el ancho 100 por ciento. Lo hemos hecho en el curso y pensé, no necesitamos una tapadera otra vez, pero siento que deberíamos solo para realmente un conseguirlo en un buen lugar para que lo puedas encontrar más adelante en este curso, y también solo para confirmar lo que sabemos aquí lo estamos tomando de un método ligeramente diferente. Ahora, tengo estas imágenes y puedes ver que cambian los diferentes tamaños en diferentes navegadores por lo que estoy haciendo con mis columnas y realmente puedes ver ahora cómo funciona el 100 por ciento. En tanto la columna cambie, la imagen se ajustará para ajustarla. Tenemos que poner una bonita imagen grande, escalarla para que se ajuste a la columna y es una forma realmente rápida y fácil de hacer imágenes receptivas. Vamos a saltar a VS Code y trabajarlo. Para empezar, eliminemos la BOX1 y es la etiqueta h1, así que todo el asunto. Porque ya no quiero el bateo, lo voy a poner en una imagen. Ahora no tenemos las imágenes encima en nuestros archivos de ejercicios. Vamos a los archivos de ejercicios, encuentra tu archivo de Project 3. Usemos las imágenes en grande. Porque los vamos a poner en grande y simplemente reducirlos. Voy a agarrar todos estos, copiarlos, y vamos a nuestro escritorio, vamos al Proyecto 3 y pongamos esa carpeta de imágenes. Dentro de esa carpeta de imágenes, vamos a pegar todas nuestras imágenes. Vamos a cargar al menos el primero, así que IMG y SRC es la fuente. Esta va a ser una carpeta de imágenes. Voy a llamar a todos estos images1.png. Siempre debes agregar tu texto todo. No lo soy porque simplemente no lo soy. Deberías. Guardémoslo y echémosle un poco en el navegador. Apagarte. Vuelve a encenderte. Enfriar, esta es una imagen gigante. Es demasiado grande. Es incluso el doble del tamaño que necesita ser. Para reducirlo, vamos a usar un poco de CSS. Tenemos nuestra vista global, y antes de que comience la vista de escritorio, voy a poner eso ahí para que pueda editar aquí. Lo que quiero hacer es que quiero hacer todas las imágenes la mitad del tamaño. Sé que quiero hacer las que están dentro de la col la mitad del tamaño, no la com, la col. Imágenes sólo si están dentro de este div llamado col, me gustaría que lo fueras. Un ancho de un 100 por ciento. punto y coma, ahora, eso funcionará mayormente. Necesitas poner en una altura también. Necesitas una altura y yo no quiero la altura. Yo quiero que la altura sea automática. Un 100 por ciento lo va a tratar de estirar, mientras que sólo lo voy a dejar como auto y eso no está funcionando. ¿ Por qué estás trabajando? Restablecer. Está funcionando. Es una bonita imagen grande. Se hizo a la vida como una densidad de píxel, pero debido a su escala hacia abajo, ahora es recoge una densidad de dos o es el doble de la resolución o DPI alto, como quieras llamarlo. El problema es que puedes ver ese rosa escogiendo el fondo ahí y cuando lo redimensiono, puedes ver que no es del todo hacer lo que yo quería. Es como encogerse ahí y la caja no se está haciendo más pequeña porque digo una altura física a esta caja. Deshaznos del fondo rosa y de la altura, de esa columna. Eso lo hicimos antes. Color de fondo, altura mínima. Adiós. Guárdalo. Mira ahora, está funcionando y las cajas se han derrumbado, y no hay color en ellas. Impresionante. Esa es la forma fácil de implementar imágenes receptivas. Es más grande de lo que necesita ser y está abrumado. En diferentes dispositivos, va a cargar el tamaño físico correcto, pero hay más escala para que se convierta en una imagen de alto DPI o imagen de PPI, ¿cómo lo llaman? Puntos por píxel. El ratio de píxeles puede ser mayor. Todas esas palabras realmente significan lo mismo. Solo estamos tratando de obtener la calidad de imagen adecuada para la pantalla del dispositivo diferente. Ahora puedes saltarte adelante porque solo voy a sumar todas las imágenes aquí dentro, hasta ti. Puedes quedarte por ahí si quieres. Va a ser bastante aburrido. Se equivocaron todo el tiempo. Es opción de comando en un Mac o control O en un PC y vamos a eliminar todo eso, incluyendo el H1 y voy a agarrar esta imagen. Haz lo mismo, mi atajo, pégalo, y solo voy a cambiar las imágenes, imagen 1, imagen 2 perfecta. Es uno que va a ser 2. El siguiente va a ser 3. Este va a ser 4. Es doloroso mirar, es doloroso hacerlo. Hagamos un par de imagen, que es slash o ponerlo en todos ellos. Es un poco más amplio por lo que podemos hacerlo agradable y fácil y vamos a deshacernos de todos los números y dejar de escribirlos de uno en uno. ¿En qué estás tramando? Uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve. Se me olvidó de este tipo de aquí abajo. Es solo a quienes somos. Simplemente agarra todo eso, copia. Podemos utilizar nuestra selección o nuestras etiquetas thou. A lo mejor eso está a la vista y dice cuando amplía selecciones un montón de atajos. Comando Shift+ Control en mi Mac, voy a pegar en ese tipo y éste va a ser 10. Todas mis imágenes en, lo que había sido montones más fáciles de hacerlo antes de empezar a editar estos, pero hey, no es fluir el curso. Vamos a revisar y asegurarnos de que estén todos ahí dentro. El cool de ellos es mirarlos responden. Tengo que cambiarlo a un dispositivo móvil, inspeccionar, llegué a atender el dispositivo. Vuelve a encender y así se ve en un teléfono móvil. No son muchos de ellos, pero al menos es un 100 por ciento. Voy a ir a responsive y me voy. Adelante. Aquí estamos. Eso es una escala 100 por ciento. En el siguiente, veremos el otro método, el otro método principal es usar la fuente sit. Te veré en un segundo. 87. Cómo usar srcset para cambiar imágenes de HTML para un sitio web responsivo: Hola ahí. Este video va a cubrir srcset. Es una forma de lidiar con imágenes receptivas como este pequeño de aquí. Mira lo que pasa cuando llego a un dispositivo más grande, hey se convierte en una visión de tamaño mediano. Lo que está pasando es que en realidad estamos cambiando la imagen en lugar de simplemente cambiarla porque tenía un sombrero rosa, ahora tiene un sombrero verde. ¿ Listo para sombrero naranja? Sombrero naranja gigante. En realidad, la imagen se está cambiando dependiendo del ancho del navegador. Es bastante fácil de implementar en HTML un poco más difícil de probar en Chrome, pero descubriremos ambos de los que están afuera ahora en el video. Para empezar con esto, vamos a cerrar todos los demás documentos y vamos a crear un archivo desechable sólo para mantener esto agradable y aislado. Vamos a guardarlo, darle un nombre, llamarlo image-srcset. No importa cómo se llame, va a ser un archivo HTML. A lo mejor no necesitamos SCSS para que esto funcione, para esta parte particular del srcset, sí necesitamos todos los datos hit. Doctype, el idioma inglés dejará, el principal es éste. No puedes vivir sin que se establezca la ventana gráfica, así que asegúrate de que eso esté en tu documento. Lo siguiente que vamos a hacer es poner una verdadera etiqueta de imagen simple, y tengo una copia de algunas imágenes a través, por lo que en tus archivos de ejercicio y proyecta tres debajo de tu pug. Pug está aquí, he hecho tres de ellos que vamos a usar. Aquí está el original, esto es de Charles, de Unsplash, Si necesitas un recogerme. Ve a aquí, Unsplash y busca el trabajo de Charles con su pug. Cosa que quiero es pequeña, mediana, y grande. Voy a copiar esos, ponerlos a mi carpeta local en la carpeta Imágenes. Echemos un vistazo a esas imágenes que sabes lo que viene. Eso es visión pequeña, esta es una visión media y una visión grande. Haré un poco de texto y cambiaré el color del sombrero. Normalmente no harías eso; solo lo dejas la misma imagen, pero yo quería dejar muy claro cuando cambian estas cosas. VSCode ¿qué hacemos? Primero pongamos en la imagen, carpeta de imágenes y voy a empezar con pug pequeño. Te pones todo el texto. Vamos a darle una vista previa y echar un vistazo en el navegador. Voy a dejar ir el archivo y apagarlo, volverlo a encender. Ahí está. Genial, así que empezamos con esto, esto es lo que hemos hecho hasta ahora, así que no hemos hecho nada de fantasía todavía. Ahora viene por el nicksport”. Después de todo nuestro texto. Vamos a poner en srcset y aquí es donde ponemos en todos los diferentes tamaños. Realmente no hace texto predictivo muy útil aquí dentro, así que voy a hacer trampa y me voy, agarrar esa copia y ponerla dentro de aquí. Ahora tenemos que darle un ancho. Vamos a decir, se activa a un ancho de 500 píxeles de ancho. Hay un montón de mediciones diferentes. Hemos hecho ems y rems y pixels y percents. Ahí hay otro, W4 width va a funcionar para este caso. Ahora todo lo que necesito hacer es poner en los diferentes tamaños. No hace bien el material predictivo otra vez, vamos a copiarlo y ustedes los separan por comas. Pegarlo en una coma, pegarlo en. Tengo tres visiones, mis tres imágenes, va a cambiar dos cosas. Tenemos medio, y éste va a ser 1,000 pixeles, no 10,000. Este de aquí se llama grande, cheque jpg, y éste va a ser 1,500. Miramos como los llamé. Grande, mediano, pequeño, genial. Vamos a darle una prueba, se va a trabajar. Comprobando el navegador, técnicamente está funcionando, pero es difícil previsualizar en un navegador porque lo que termina pasando es que el navegador descarga el HTML y digamos, genial, lo consiguió. No tiene sentido ir y revisar la pantalla con ella, lo hace a la carga. Se necesita cargar la página de caché y luego la comprobará, si la saco bastante pequeña y golpeo “Recargar”, aún no funciona porque está almacenada en caché. caché solo significa que una vez que el navegador ha descargado una imagen, no la vuelve a descargar, va. Ya tengo esa imagen. Se llama el mismo nombre. No me voy a molestar en hacerlo. Vamos a obligarlo a hacerlo. Hay un par de maneras en que lo hemos mirado antes, Si haces clic con el botón derecho en él, ve a Inspeccionar. Dependiendo, la vista previa de tu dispositivo podría no estar encendida; este pequeño botón aquí abajo. No se puede seguir golpeando haciendo clic derecho en esto e ir catión vacío tenía recarga, decir alguna vez, consiguió una red y encender esto, deshabilitar caché. Vamos a restablecerlo ahora, haga clic derecho en él, restablezca la caché para que no la vaya a guardar. Cada vez que lo recarguemos o redimensionamos la página, va a intentar volver a buscar la imagen. Lo que vamos a hacer es encender nuestra vista previa del dispositivo. Vamos a ir a responsive en la parte superior aquí, y vamos a empezar a arrastrarlo. Si comienzas a lo grande, no se va a hacer más pequeño ampliamente. Sí, ese pequeño, algo de tamaño más o menos móvil. Yo estoy mirando aquí arriba, es alrededor de 300'. Voy a refrescar la página y funciona bien. Se carga la página, ya no tiene imagen. Va y se ve, comprueba, hace algunos cálculos y dice, este es el ancho que necesito, así que voy a usar esta imagen en particular. Empezando pequeño, puedo arrastrar un más grande, reloj. Ves, voy más allá de cierto punto y se hizo más grande. Me acerqué un poco más y eventualmente va a la gran imagen. Así es como cambiarlos. Algo que podrías haber notado aquí arriba en cuanto a los pixeles, si vuelvo a bajar a algo pequeño, pulsa “Refrescar” de nuevo al pequeño. Recuerda, vemos en vivo a los 500, vemos ir en vivo a 500. Mira esto cuando estoy arrastrando. Mira cuando cambia ahí, es la mitad de donde lo teníamos. ¿Te pregunto qué está pasando? Es como la densidad de píxeles, o una relación de píxeles o las pantallas Dots Per Pixel, DPPX, alto DPI, retina, hay un montón de palabras para lo mismo. Bueno, seguro que no son idénticos, pero sí se refieren a hacer lo mismo con nuestras imágenes. Es porque la pantalla que estoy mirando tiene una densidad de píxeles de dos. Puedes fingir aquí, di que quieres volver a ponerlo a uno; ese es el básico. Puedes entrar en estos tres pequeños puntitos, no ese, éste. Quiero mostrar la relación de píxeles del dispositivo. aquí, el valor predeterminado es de dos, voy a ponerlo en uno y hacer exactamente lo mismo. Empieza pequeño, pulsa “Refrescar”. Se puede ver ahora es tan pequeño hasta que llego a 500. Ahora, nunca es perfecto porque está haciendo un cálculo y mirando cuál debería ser, pero ahí tienes, cambió a 100. Yo salgo a 1,000 y lo veo cambiar, tú tienes el grande, pug gigante. A veces eso ayuda. Encuentro en clase a veces el dicho en este caso, podemos ver los píxeles frente a la relación de píxeles y se puede imitar. Tenía un teléfono LG ahí por un rato y era una densidad de píxeles de cuatro. Fue bastante loco mirar también, así que fue ultra vida, así que tres serían realmente comunes por digamos, tu iPhone si tienes un iPhone 10. Voy a dar click en este. Baja pequeño y lo que notarás es que si golpeo “Refresh”, es medio ya a este tamaño pequeñito. Mira, cuando me levante a sólo un regular enrollado. Ver arriba va. Ves ahí, tu iPhone X ¿a qué sube? No sé el ancho de la misma, pero ya es grande en este tamaño de archivo realmente pequeño porque está atascado y tantos pequeños pixeles porque la relación de píxeles del dispositivo. La gente que tiene muchos nombres para esta cosa, es realmente alta y puede llegar más alto. Por eso si estás previsualizando y un MacBook Pro, su DPI es dos pero si haces una vista previa en un iPhone X, tres, y dices : “¿Cómo puede ese MacBook Pro ser menos de un tres?” Eso también lo pensé, pero resulta que es porque tu teléfono te sujetas muy cerca de tu cara, así que realmente notas la calidad extra. Mientras que el iPad está diseñado para sentarse en tu regazo o al menos en la longitud del brazo para que pueda salirse con la suya luciendo increíble con una menor proporción de píxeles. Además estoy seguro de que hay consideraciones para la duración y el costo de la batería, todo tipo de cosas. ¿ Fue útil esto? Un poquito de hoyo de conejo. Ahora, hay más a este srcset, ¿es este 90 por ciento? Yo quiero decir que te he dado el 90 por ciento de las reglas para ello. Hay otras cosas que puedes hacer. Se puede ignorar el todo también y trabajar, no me ha gustado levantarte con algo que no funciona. Es posible que te encuentres con instancias en las que necesitas aprender un poco más. Este artículo aquí fue probablemente el mejor que leí al respecto. Es otro de Chris Coyier en trucos de CSS, definitivamente un hombre a seguir. Esto pasa por el conjunto de imágenes con un poco más de las tuercas y pernos. El otro cool que puedes hacer con él es porque en las imágenes receptivas siguen cambiando. Cada vez que rehago un curso y estoy como, “Está bien, ahora estamos haciendo a veces también, ahora estamos haciendo esta otra cosa, ahora estamos haciendo esta nueva cosa”. En lugar de simplemente volver a este artículo, puedes ir a esta cosa llamada imágenes responsive y ese es un tracto suyo. Él etiqueta artículos basados en imágenes responsivas. Cuando estés viendo este curso, este es 2019, será 2020 para cuando estés viendo esto, probablemente. Ve y lee esto, solo ve cuáles son las últimas cosas. No sé qué es eso. Buscaré qué es FUIF y solo pasaré y a ver porque podrían decir, podrías encontrar un artículo llamado Fuentes Muertas, por qué nunca debes usarlo. Esta cosa evoluciona, sigue cambiando, pero te he dado una buena comprensión Jim de esa fuente. Es bastante útil, requiere que crees múltiples imágenes y nos hace mirar cosas como la densidad de píxeles con un poco más de detalle y ojalá arrojar algo de luz sobre ella tal vez. Es difícil atravesar. Eso va a ser por imágenes. Vamos a salir de nuestro sitio. No vamos a salvar a éste. Estará en tus archivos completados. Voy a dejar este método. Simplemente escalamos eso hacia arriba y hacia abajo y de nuevo sigo uno. Ya veré en el siguiente video. 88. Cómo añadir un estilo css a la primera línea de una etiqueta p en un sitio web: Hey allá, en este video vamos a ver agregar una clase CSS para hacer las cosas atrevidas sólo para la primera línea. No importa lo que esté en la línea, todo se volverá audaz. Puedes hacerlo por la primera letra o por la primera línea, es un poco gracioso de CSS. Vamos a trabajar cómo hacerlo ahora en VS Code. Mirando mi marca hacia arriba, eso es lo que quiero hacer. Yo quiero hacer negrita la primera línea y luego la segunda o el resto de las líneas no negrita. Vamos a ver lo que hicimos, nuestra pequeña clase CSS tan Visual Studio Code. Lo primero que tenemos que hacer es agregar un poco de texto, en caso de que lo vamos a agregar a todas las casitas de momento, no tenemos nada. Para limpiar todo, vamos a deshacernos del color de fondo. Lo voy a usar para en la mano en el fondo. Voy a ir a VS Code, mi contenedor tiene un color que quiero robar y luego volver a las columnas. Antes quería deshacerme de él, ahora quiero editar. Eso está recogiendo en la parte inferior de ahí, pero está bien, voy a agregar texto y hacerlo realmente grande. lo que vamos a hacer, en realidad hagámoslo en. En la columna aquí se va a tener algún texto dentro de ella. En el momento en que tenga una imagen después de la imagen, por lo que mi etiqueta de imagen termina ahí, voy a poner en una etiqueta p, y voy a poner un Lorem Ipsum uno sobre pocas palabras y quiero el comienzo aquí. Estoy poniendo la palabra branding. Eso es lo que quiero protagonizar, quiero apuntar a esto. Echémosle un vistazo aquí. Se puede ver lo que he hecho aquí, he hecho la columna. No tiene altura por lo que se expande para que las cosas lo quepan. Es una imagen en ella porque no pueden caber juntos, se exprimen y la columna se hace un poco más grande. Podría hacer que se hunda debajo de él, llamar nombre, instalar ese verde y fondos pero de esta manera es un poco más simple. Yo quiero ir y darle estilo, todo se ve realmente bien, pero pongamos lo audaz primero porque eso es lo que viniste a buscar. El modo de atacarlo es que lo vamos a poner en nuestros estilos globales. No es una locura sintaxis diferente excepto que usamos dos puntos para unirnos a ellos. Yo quiero darle estilo a la primera línea, se puede hacer la primera letra, la línea, realmente quiero la primera palabra, pero esa no es una opción. Voy a hacer primera línea, voy a hacer que el peso de la fuente. Voy a hacerlo audaz. Debería poner en 700, es un tamaño audaz muy normal, pero aún no he escogido una fuente. Solo estamos usando Times New Roman. Puedes poner cualquier estilo que te guste siempre y cuando sea estilo de texto y vaya a funcionar, echemos un vistazo, luzcamos perfectos. El motivo por el que digo tipo de es que estoy atacando todas las p tags primeras líneas y en nuestra maqueta aquí, vamos a tener más de un poco de caso de texto. Va a haber texto aquí, aquí, aquí, estoy obligado a tener otra página, solo en realidad tengo una etiqueta p en este sitio web pero si voy a la página de contacto dush y construyo eso fuera y usamos un montón de etiquetas p. No quiero que todos sean audaces. Vamos a ser muy específicos, así que vamos a decir sólo la primera línea de etiquetas P que están dentro de las columnas. Espacio entre esas dos columnas para unirse a esas dos arriba. Esa es la forma de hacer esa. Vamos a pasar e instalar una fuente, vamos a conseguir que se vea así. ¿ Vamos a cubrir algo nuevo? No. Solo vamos a poner algo de relleno, hacerlo ancho, convertirlo en la fuente correcta, puedes saltarte si eso te suena fácil, pero si no continúa, lo harán juntos. En primer lugar una fuente, voy a ir a Google Fonts, google.com/fonts. El tipo de letra que he decidido es algo llamado ASP. Sólo un realmente bueno todo terreno libre, entra, condensado también, lo cual es realmente genial. Yo sólo voy a usar el regular. Va a tener plus, ya lo hemos hecho antes, pero es bueno recuperar estas cosas, poco menos, puedes descargarlas ahora solo no usando en tu computadora, sino para usarlas en tu sitio web, usas el embed. Personalizarlo porque he decidido usar regular y audaz y ninguno de los otros. Yo lo voy a incrustar, te voy a agarrar, copia eso porque hasta que golpee etiqueta. Mientras sea antes del cierre de la cabeza y te vayas, notarás en este sitio web cuántos, supongo que es un sencillo sitio web. Pero he decidido en cambio usar como una pantalla para la fuente Honduras Serif, solo estoy usando la versión negrita y la luz para salirme con la suya tratando de organizar la jerarquía de la información. Tengo las fuentes, vamos a aplicarlo. Lo que voy a hacer es que voy a aplicar a todo. Te acuerdas de cómo hacer eso. Todo en este documento quiero ser ASP. Se lo haces al cuerpo. El tag del cuerpo aquí va a ser familia de fuentes, y voy a agarrar esto de la familia, guardarlo. Vamos a echar un vistazo, y voy a previsualizar, ahí tienes es la fuente correcta al menos. Escojamos una talla y un color y algunos paddind. Voy a revisar mi marcado, tú eres font-size off 14. Ahora voy a crear una propia, porque no quiero que se las viejas etiquetas p, esto, quiero que las etiquetas p que están dentro de las columnas hagan esta cosa. En realidad, probablemente podrías hacerlo a la columna, todo dentro de ellos, pero lo haremos de esta manera. Vayamos a color. Va a ser blanco y es do tamaño de fuente. Recuerda, calculadora va a ser 14 veces 0.0625 al azar, y eso va a ser, y van a ser anillos, vamos a hacer algo de relleno, y vamos a hacer nuestra fantasía todo el camino, así que top no va a ser idea y de lado a lado no va a ser idea. Sólo buenas conjeturas echemos un vistazo. Está bien, no se ve tan definido como eso así que vamos a sumar un poco más. Supongo que te muestro esto porque podría pasar y antes de la clase y supongo escribir esto para mí mismo para que parezca más suave, pero esto es lo que termino haciendo y estoy como, nope aquí atrás, no, aquí atrás. Prueba de ensayo, tal vez 25 para la altura. Eso me va a servir. Notarás que se fue un audaz. Podrías haberte dado cuenta ya. Basta con notar ahí que k es y porque estamos tratando de aplicar un peso de fuente que no existe. Este usa 700, no la onda audaz. Algunas fuentes usan negrita. Supongo que eso fue todo, sólo se asegura de que voy a refrescar, haga clic con el botón derecho. ¿ Por qué no estás cargando ahora? P llamada de primera línea, eso sigue siendo cierto. Tiempo de confesión, me fui por un gran conteo rápido de etapa de cinco minutos, ¿qué pasó? Es posible que ya lo hayas notado. Es un problema de sintaxis. El problema ahí es que a este tipo le faltaba su pequeño, soy una parada completa de clase frente a él. Aunque me tomó un poco de tiempo, y supongo que quiero dejar lo mismo porque le pasa a todos. Me voy a dar la versión flaca de lo que traté de defectos, cómo eventualmente lo hice. Básicamente, ¿qué al revés y sales, qué fue lo último que hice? Yo era como si fuera lo último que hice. Sólo apaguemos eso. Recuerda Command font slash en Mac, Controla la slash de fuente de p y lo agrega a comentar, significa que lo apaga para que ya no sea leída por el navegador. Es tan bueno como borrarlo, excepto que sigue ahí. Ustedes van a ser geniales. En realidad vamos a añadir ese problema arreglado. Ese era el problema. Eso haremos caso omiso. Yo lo apagué y aún no lo estaba haciendo. Yo estaba como bien. Entonces con ella puesta, No funciona, con ello apagado no funciona. No eres tú. Dice como, tal vez necesito ir y sigo apagando las cosas, y luego estoy como aquí arriba, tal vez necesito sentarme las pesas de la fuente aquí arriba para ser 400 puño. Cuatrocientos y después lo convierten a 700. Eso tampoco funcionó. mí me faltaba un rebote, eventualmente llego al punto en el que no tengo idea, nada visualmente así que acabo de empezar a escribirlo. Enciende y apaga eso, no funcionó y luego estoy como, “Está bien, vamos a volver a escribirlo”. Acabo de pasar y empecé a escribir, y al instante puedes empezar a ver, ya es un personaje fuera y yo estaba como [inaudible]. Eso fue todo. No pierdas tu parada completa, así que tus periodos. ¿ Estamos de vuelta? Estamos de vuelta. Voy a darle la espalda a tus esfuerzos muy bien. Simplemente enciende y apaga estas cosas, nos vemos bien. Otra cosa que haremos es que está atascado, porque estamos usando un reset CSS por lo que esta columna p también va a tener alturas de línea. Es casi, está por encima de una altura de línea. Es un buen lugar para empezar, 1.5 rem a grande 1.25, impresionante. En realidad en este caso siempre y cuando esté por encima de eso, ni uno. Siempre y cuando esté por encima de lo que sea el tamaño de la fuente esté siendo semilla. Mientras esté por encima de 0.8, se hará más grande. Cualquier cosa menos que eso, y se hará más pequeño. Altura de línea negativa. No algo que yo haya hecho. Ahora voy a pasar por ahí y solo seguir agregando a estas cajas para que puedas saltarte. Yo sólo voy a copiar y pegar, pero podemos quedarnos por ahí si quieres. Nunca se sabe qué va a desenterrar en términos de atajos o perderse y arreglarlo. Voy a conseguir una vista, estoy en realidad podría cerrar esto ahora, obtener una vista completa, hacerlo un poco más fácil. Voy a usar esta etiqueta p repetitivamente. Yo lo voy a copiar. Déjame usar mi multi cursor para ir manteniendo presionada mi tecla Opción en un Mac o mantenga pulsada la tecla en PC. Agarrando a todos estos tipos, ese tipo ahí y pegándolos. Ojalá todos deban seguir trabajando si lo pego en el lugar correcto. Agradable. El beneficio de la clase de primera línea, en lugar de envolver esta primera etiqueta p y tal vez tener que p tags aquí y simplemente poner un puesto en la primera es que si las garrapatas se hacen más largas o cambian, así que uno es branding. Hagamos esto en realidad. Si pones un más de uno Lorem ipsum, entonces Lorem, estamos haciendo una prueba juntos. Si vuelvo a poner ocho palabras te vuelves diferente, Lorem ipsum? No, exactamente lo mismo cada vez. Mi clase de mecanografía de bachillerato, te abrazaste. Está bien y es duro, no puedo ver mis dedos. Pero tenemos esta tercera y aquí vamos porque está haciendo la primera línea, no importa lo que escribas ahí dentro. Va a ser a granel, lo cual es útil. Sé dulce. Si pudieras hacer un estilo de agarre. Estilo donde se puede obtener la primera palabra. Eso es todo lo que queríamos hacer. Un poco de video de producción aunque empezamos aprendiendo algo de CSS cool y luego nos fuimos un poco de jurado. Pero nosotros aquí, lo logramos. Entra en el siguiente video. 89. Cómo hacer ancho completo para encabezados y pies de página, pero con el interior centrado: Hola ahí. Este video vamos a hacer una navegación por la parte superior aquí, esa parte de ella se extiende hasta el exterior, pero parte de ella está alineada. El logotipo y la navegación aquí se alinean con la estructura del resto de este sitio web. La codificación no es particularmente difícil. Acabamos de conseguir un contenedor envoltorio que va 100 por ciento, anidado por dentro es su hijo, y se acaba de arreglar con caja. Parece sencillo, pero soy malo cuando intenté hacerlo por primera vez. Es un tipo raro de inscripción vieja de cosa a dónde, ¿quién va a dónde? ¿ Dónde está qué? ¿Dentro de qué? ¿ Aquí? Toda esa locura se explica en este sencillo video. Te veré en un segundo. Se puede ver mi dilema. Tengo dos cosas. Yo quiero que esto vaya todo el camino hasta los bordes, pero las partes interiores para quedarse aquí. Básicamente son solo dos divs anidados, nada que ver con este tipo de aquí abajo, este tipo no podía existir y seguiría funcionando. Nos vamos a olvidar el contenedor, y lo vamos a mover hacia abajo, y vamos a agarrar un poco y hacer que se vea bonito. Simplemente va, para mi selección, ahí vamos. Ahora está sangrada bien. Este es el inicio de la página. Voy a agregar otro contenedor llamado contenedor de cabecera. Ese tipo, todo lo que va a hacer es estirar 100 por ciento de ancho, que es exactamente lo que hace de todos modos. Simplemente lo voy a poner muy por encima del principio del eje. Este tipo es contenedor de cabecera. Consistentemente deletreó ese mal. No tenemos que hacer un ancho, porque por defecto debe llegar a izquierda y derecha. Pongamos un color de fondo. Iba a recoger gris, recoger negro y arrastrar esto por ahí. Sí, eso servirá. Tenemos un gris ahí dentro y necesitamos un poco de altura, así que solo lo pondremos en un minuto de altura por el momento, solo para que podamos verlo, ponerlo en un 100 píxeles. Echemos un vistazo en el navegador. Ahí vamos. Por defecto se estirará todo el camino. Se trata de un elemento de nivel de bloque porque es un div para que lo empuje hacia abajo, y tiene un color de fondo. Pongámosle un poco de margen mientras estamos aquí. Vamos a ir margen, abajo. Voy a poner, ni siquiera estoy seguro, 40 pixeles, echemos un vistazo. Mantengo [inaudible] el equivocado, sí 40 píxeles está bien. Ahora necesitamos poner este contenedor interno, así que solo necesitamos dentro de nuestro contenedor. En realidad, no vamos a usar el encabezado, por lo que podemos usar la etiqueta prefabricada. Puedes entrar aquí y le vamos a dar estilo. ¿ Qué tenemos que hacer por este compañero? Vamos a conseguir un color de fondo para él primero. Un encabezado, no necesita el stock completo, recuerda, porque es una etiqueta HTML5 vieja y regular, y voy a hacer dos cosas. Voy a darle un ancho, así que vamos a igualar para lo que tengamos fuera contenedor, así que vamos a robarlo. Vamos a hacer ancho, vamos a darle un color de fondo. No por ninguna buena razón. Sólo porque quiero mostrarles dónde termina. Usaremos violeta azul, va a ser emocionante. Echemos un vistazo. Seguro aunque no lo haga. Necesita una altura mínima. Voy a deshacerme de estas alturas mínimas, ambas en un segundo porque no las necesito y ya casi está ahí, así que es el ancho correcto. Está dentro de esto pero necesita ser sincronizado. ¿Recuerdas cómo hacer eso? Este encabezado necesita ser margen, la izquierda necesita ser auto y la derecha necesita ser auto, pero la parte superior e inferior tienen que ser cero, por lo que cero, auto debe hacerlo. Aquí vamos, ahora ponemos cosas aquí y estará en el centro. Pero si nos deshacemos del color de fondo, no va a ser visualmente verable. No es una palabra, lo sé, pero lo que vamos a hacer ahora por el resto del video es que haces lo mismo por el pie de página, solo necesita estar fuera del contenedor. No lo queremos dentro de ahí porque ese contenedor lo está obligando a tener un ancho así que solo asegúrate de que eso está fuera de este tipo y ponlo en un pie de página en lugar de encabezado, haz exactamente lo mismo. Necesitamos un contenedor de pie de página y luego tu pie de página dentro de él. Lo que quiero hacer ahora sin embargo, es agregar algunos elementos básicos para que pueda establecer algunas tareas para que usted haga por su cuenta en el siguiente video, así que vamos a poner algunas partes cool. Por el momento, tenemos un encabezado con un gran fondo morado, que ya no necesitamos. Adiós. En realidad, dejaré eso al final comentado, para que en caso de que el tuyo no estuviera funcionando, puedes revisar el mío. Dentro del encabezado, quiero dos etiquetas, pero recuerda que no hay tal cosa como un logotipo, como uno predefinido como encabezado, así que hay que agregar nuestra propia clase. Dentro de esto va a ser algún texto. Bueno, es sólo mi nombre, pegado ahí dentro y también ahí justo después va a haber otra etiqueta div llamada nav pero recuerda que hay un nombre específico para ese código nav. Y si no tienes. No importaría. Funcionaría igual de bien, pero deberíamos intentar usar el marcado semántico correcto. Hay algún texto sobre el contacto de precios. Simplemente puedes escribir esos en. ¿Cómo se ve ahora? Suficiente para siempre, pero es suficiente para que vayamos por nuestro próximo proyecto, prepárate la hora de la tarea en el siguiente video, te veré en un segundo. 90. Proyecto de clase 05: diseño de un encabezado: Está bien, es tiempo de proyecto de clase otra vez. Vamos a llevarnos nuestro pegajoso golpe a, oh, mira eso, el cambio de color de fondo, tenemos un golpe diferente aquí arriba, acabamos de darle estilo. Los requisitos son como siempre en nuestros archivos de ejercicios en una carpeta llamada Proyectos de Clase y abrir, que atracaría, y estos son los requisitos. Esto es lo que estamos haciendo. El texto debe ser blanco en el momento en que sea negro. Esta cosa de aquí es un proyecto de investigación. No hemos cubierto las etiquetas span ni las clases span antes, pero quiero que echen un vistazo en línea, vean qué pueden averiguar al respecto, y vean si pueden implementar esto. Básicamente la parte superior aquí, y se puede ver parte de ella es audaz y parte de ella no es audaz. Va a ser realmente útil aprender etiquetas span para hacer cosas como esta. Un término span tag & span class son los mismos, mira ambos. El gran cosa es que están en la misma línea. tanto que, podría hacer CSS, dos etiquetas diferentes y estarán en líneas separadas y luego podría mancharlas para que se alineen juntos, pero las etiquetas span o las clases span son realmente útiles para esto. Esa es toda la ayuda que estás recibiendo. Yo quiero que veas si puedes averiguarlo e implementarlo. A continuación las cosas que vas a hacer son cosas que hemos hecho antes. El logo debe quedar a la izquierda y la navegación por aquí en el lado derecho, por lo que izquierda y derecha. ¿Qué más vamos a hacer? Quiero que centres estos a, centro en el bateador, no a lo largo de la parte superior, verticalmente, caso centrado bien. Haz eso por los dos. Instala los botones como lo hicimos. Ya lo hemos hecho un par de veces. Se puede ver estas son ocho etiquetas que son viables, tengo un hover encima de ellas, puedo hacer click en ellas, y tienen un liner en el exterior. Yo quiero que hagas eso. El último es sentar aquí todo el fondo a este color. Se ve la diferencia ante la luz, ésta va a simplemente gris claro para separar estas cosas. Cuando lo hayas hecho, envíame una captura de pantalla, tu prueba de que lo he hecho y se ve bien. Antes de pasar al siguiente video, recuerda que puedes ponerlos en la sección de asignaciones de este sitio web dependiendo si lo tiene o no. Todos los comentarios de esta página similares a una captura de pantalla, pulgares arriba, cara sonriente o cara enojada si no funciona. También viendo esa misma imagen, etiquetarme en Instagram, etiquetarme en twitter, usar estos hashtags, hashtag B-Y-O-L, es lo que uso para separar los diferentes grupos de cursos que estoy haciendo, y unirme al Grupo de Facebook. Es solo una invitación, por lo que solicita ser aceptado y serás aceptado, después publicar tu captura de pantalla. Ve y hazlo. Si no quieres, lo haremos todo en el próximo video, como lo hacemos nosotros. Pero conozco a la gente, se molestan en tomar este tiempo extra y meterse con él y perderse y encontrar el camino, son otras personas que realmente encontrarán diseño web, se pegará mucho mejor cuando tengas que ir realmente y implementarlo en lugar de seguirme paso a paso. Estoy tratando de culparte para que lo hagas esta vez, he intentado amenazar, decepciones, tengo en mi cara decepcionante, lo he enseñado un par de veces, esta voy por una culpa recta. Está bien. Off, haz tu trabajo y te veré en el siguiente video. 91. Proyecto de clase 05: diseño de un encabezado COMPLETO: ¿ Cómo fue? Me pregunto dónde te quedaste atascado, qué pedacitos fueron fáciles, ¿cómo fuiste con tu pequeño proyecto de investigación? Lo haré junto con ustedes ahora, y pueden comparar notas. A mi manera no va a ser la mejor manera de hacerlo, va a ser una manera de hacerlo. A ver. Empezaremos con la fácil, pondremos el texto en blanco. Ese texto es blanco, pero ese es blanco, lo que yo podría hacer es ser inteligente y decir en realidad, en vez de tratar de decirles a todos que sean blancos, voy a encontrar a este tipo, deshacerme de él, y todos se vuelven negros. Voy a decir aquí arriba mi etiqueta corporal, en realidad, todos pueden ser blancos, por favor. Bonita, fácil. Ahora necesitamos separar a estos tipos porque son etiquetas rodadas regulares, sientan uno encima del otro, queremos dividirlos a través. ¿ De qué manera usaste? qué camino voy a hacer? Usaremos Flexbox. Necesita ir en el padre, y el padre en este caso es contenedor de cabecera. Vamos a decir, mostrar, y usaremos flex. Veamos cómo lo hace. ¿ Qué hace? Eso no funcionó. Podrías haber empezado de la misma manera, echemos un vistazo. Por eso. Lo puse como padre, agregué Flexbox a este tipo, contenedor de cabecera. En realidad, eso afectará todo lo que hay dentro de ella o a los niños directos, y en este caso es la cabecera. Quiero a estos tipos atacados, no a este tipo, así que tenemos que ponerlo en la cabecera, no esta envoltura exterior. Lo siento amigo, te equivocas uno. Necesita ser cabecera, necesita ser flex. Veamos cómo funciona. Mejor, el lado a lado, ahora queremos que funcione el espaciado y usaremos el mismo que aquí, justificaremos contenido. Deberías dividir todo, justificar contenido, espacio entre. Echemos un vistazo a eso, izquierda y derecha. Ahora vamos a conseguir que se centren en el medio. Entonces haremos alinear artículos, y lo haremos centrar. A ver cómo va eso, bonito. Vamos a dejar la etiqueta span hasta el final, principalmente porque quiero separarla en su propio video, justo al final para que podamos platicar psique memorable. Cuando estés cambiando de nuevo a este video curso sobre cómo hacerlos, serán su propio video separado. Lo que vamos a hacer ahora es darle estilo a estos. Ya lo hemos hecho antes. Si engañaste y fuiste a tu antigua misión y los agarras, estoy orgullosa de ti. Eso es eficiencia. Aunque lo vamos a hacer juntos. Antes de que realmente podamos pararlos, necesitamos separarlos porque el momento y la etiqueta de nav aquí que son sólo pedacitos de texto. Lo que vamos a hacer es meter unas cuantas devoluciones, luego despejarlas. Quiero tres etiquetas A, y usaré mis pequeños atajos, Opción de comando, Flecha abajo en un Mac, y es Alt, Ctrl, Flecha abajo en un PC. Voy a poner mis hashtags, y en realidad sólo voy a trabajar en estos uno a la vez, solo los copio y los pego aquí, aquí, y aquí. Mi etiqueta de navegación vuelve a subir, sube aquí amigo. Haciendo fila por fin. Eso se ve bien. Ahora, puedo atacarlos en la parte inferior aquí antes de mi vista de tableta, los voy a peinar ahora. No voy a detener todas las etiquetas A en mi caso. Podrías hacer nav A, así que podrías decir que quiero todas las etiquetas A que están dentro de nav, y podríamos hacer eso. Entonces podrías haber ido por ahí, eso está perfectamente bien. Podrías subir aquí y decir, voy a crear una clase porque tal vez vas a reutilizar este botón. Por lo que a este le llamas “mi botón”. En realidad lo hacemos por los tres al mismo tiempo. Entonces la clase va a ser mi botón, y vamos a dejar eso por aquí. De cualquier manera, no importa. Realmente depende de si planeas usar estos botones en cualquier otro lugar, entonces este método en particular podría ser un poco mejor. Echemos un vistazo primero. Están por aquí, morado. Voy a hacer en primer lugar el color blanco. Lo que podría hacer es hacer que todos los enlaces activos sean de color blanco y apagar el subyacente. posible que no lo hayas hecho de esta manera, puedes hacerlo en la clase en la que solo estamos trabajando. Sólo tienes que hacerlo una vez porque te apuesto todo lo que tengo que hacer esto un par de veces. Todas las etiquetas A van a tener un color de blanco y la decoración del texto no tienen ninguno, lo que se deshace del subrayado. Aquí tienes. Podrías haberlo hecho aquí abajo, habría funcionado. Acolchado en este caso, realmente no importa lo que adivinaste. Creo que hice 10 arriba y abajo y 25 izquierda y derecha. Echemos un vistazo. Realmente no funciona hasta que se agrega el borde. En este caso, el estilo de borde va a ser sólido, y vamos a tener un tamaño de borde. Me da cada vez ancho de borde, y sólo vamos a tener un píxel. Echemos un vistazo. Eso es más o menos lo que quiero. ¿ Cómo se verá en mi maqueta? Tenía un poco más de espaciado, así que sólo voy a poner algún margen a la izquierda de todos ellos. Pongamos algún margen a la izquierda. ¿ Cuánto tengo? A lo mejor unos 20 píxeles. Echemos un vistazo. Guárdalo, se ve bien. Cliccionable, puedes ir a cualquier parte en este momento. ¿ Algo más en nuestra lista? Etiqueta Span, lo haremos en un segundo. El logotipo debe estar alineado a la izquierda, deben estar centrados verticalmente en el encabezado. botón de navegación debería estar funcionando. Todo el fondo, hagámoslo. Ese es el color que quiero que sea, y todo lo que necesitamos hacer es decir, “Amigo, eres un color de fondo de eso”. No olvides los puntos y comas al final, y ojalá sea ese color gris claro. ¿ Por qué no funciona eso? Porque olvidé mi hachís. Ahí vas. ¿Es eso? Ahora es el momento de nuestra etiqueta span. Te veré en un segundo en el siguiente video donde te explicamos etiquetas span en su propio pequeño y sabroso video. Nos vemos en un segundo. 92. Cómo usar una etiqueta span o clase span en HTML para cambiar el texto: Hola ahí. En este video, vamos a hacer que esta parte de la sola línea sea negrita, dejando esto no en negrita, usando algo llamado etiqueta span. De acuerdo, parece que usamos una clase span en este caso, simplemente envuelve solo las palabras que queremos cambiar. No se rompe a dos líneas, y lo peinas en tu CSS. Saltemos a trabajar. ¿ Cómo hacerlo, y luego por qué querríamos hacerlo? Además, si ya has hecho una etiqueta span, no necesitas ésta. Voltear al final de este video, tengo como un poco extra secreto que vamos a hacer en cuanto a cambiar nuestras preferencias. Poco sabroso manjar al final. Empecemos. De acuerdo, así que hablemos de envoltura de palabras, quiero envolver justo alrededor de esta línea aquí con sólo estas palabras aquí. Averigüemos cómo hacerlo. Hay dos formas, así que dependiendo de tu proyecto de investigación, depende de quién tengas. Te voy a mostrar los dos caminos, así que antes que nada, encuentra el texto. De acuerdo aquí, y tenemos que envolverlo en una etiqueta de span. De acuerdo, entonces voy a usar mi dulce comando turno P, o turno de control P. Vale, y voy a escribir en envoltura. Vamos a envolver sin abreviatura, y vamos a escribir en span. Cualquiera de los lados necesita lapso, S-P-A-N, es mi ascenso. No tienes que envolverlo, solo puedes escribirlo en cualquier lado. Ahora tienes dos formas de implementarlo. Tienes directamente en línea CSS, o puedes hacer lo que se llama una clase span, así que haremos el CSS directo aquí. Lo que haces es darle estilo, y empiezas a hacer, ¿qué es? Se llama CSS en línea, vamos a ir a nuestro audaz, y eso esperemos que lo haga. Echemos un vistazo, refresquemos, o si no está funcionando, váyanse a vivir. Ahora está funcionando, impresionante. Está bien, así que toda versión, no estoy seguro de por qué murió eso, pero de todos modos estamos de vuelta, y eso lo ha hecho audaz, y eso es perfectamente buen trabajo hecho. Si lo hiciste de esa manera, estamos en el negocio. El único problema con esta forma es, digamos, también queremos colorearlo, así que vamos a cambiar el color, así que tienes que poner un punto y coma, tipeando color como, normalmente lo hacemos, colon, y voy a escoger un aleatorio color de pantalla lejana, guárdelo. Echemos un vistazo, y es para pantalla. Digamos, también queremos hacer otra cosa, y se puede ver cómo. Feo es la palabra. Simplemente se hace largo, y aquí está pasando tanto. Esto debería estar aquí en nuestro CSS. El otro problema es que no es reutilizable. Diga que quiero volver a hacer esto, vale, quiero envolver otra cosa, así que voy a tener que agarrar esa parte. De acuerdo, y digamos, quería hacerlo a esta última palabra en nuestra primera pestaña aquí. Ahí envolveré el principio, y me da automáticamente mi lapso, y el cierre final de los tramos. Se abre, dice permitir cosas. Estos hacia afuera, se cierra con un lapso de corte, y funciona, pero ahora lo tengo dos veces, y está empezando a hacerse grande, y pesado. Esencialmente nada malo en eso, pero vamos a mostrarte una forma más clasificada de hacerlo, y esa es una buena palabra a clase, porque su clase, a ver qué hice ahí. Muy bien, vamos a darle un nombre a esta clase. Vamos a llamarlo audaz, y por aquí vamos a darle estilo, tal vez justo antes de que comiencen las tabletas. De acuerdo, así que el final de mi global, así que este va a ser llamado audaz, y especie de ver la amabilidad de esto, entonces qué es, peso de las fuentes, y vamos a recoger 700, y esa es sólo una forma más clasificada. No puedes usar la jarra dos veces, vamos. Simplemente una forma más agradable de aplicarlo, en lugar de en línea es esto, y lo genial de ello, es que es reutilizable, porque podríamos llamar a esto audaz, y así podemos llamar a éste como un punto culminante. Entonces llegamos a agregarle un montón de cosas. Destacar, y podríamos decir, está bien, va a ser un color aleatorio. ¿ Qué es hoy? Púrpura medio, y podemos hacer tamaño de fuente. Entiendes lo que quiero decir, bien, 20 píxeles solo para risas, así que esto es bastante bonito. Es un poco más pesado aquí. Echemos un vistazo a cómo le va. De acuerdo, pero puedo reutilizar eso también, así que puedo decir aquí abajo, también vas a ser una etiqueta span de atajos aleatorios. Ahí vamos, vas a tener mi comando turno P, turno control P. Vas a tener una etiqueta span, y vas a tener un span plus de lo más destacado. Echemos un vistazo. Ahí vamos. Está bien, voy a cambiarlo de nuevo a negrita, y una cosa haremos antes de ir un poco de delicia sabrosa al final de este video, te voy a mostrar algo genial, así que déjame recuperar esto también. Voy a dejarlo como punto culminante. De acuerdo, y solo deshazte de esto. ¿ Cómo se ve ahora? Perfecto, pero los últimos es audaz. Eso me parece bien, pero eso era lo que quería hacer. Una cosa antes de irnos es, explicar por qué no lo estamos haciendo en como, digamos dos clases separadas, o etiquetas P, vamos a echar un vistazo, y voy a cerrar el estilo por el momento solo para mostrarte cómo se se ve así. Voy a duplicarlo. Estoy haciendo clic en cualquier parte del div, y estoy usando su opción shift down arrow en un mac, y eso será ALT shift down arrow en un PC, y miraré haciéndolo de esta manera, y los imprimiremos, para que puedas ver. Digamos, nos desharemos de nuestra clase de span, y vamos a hacer de una manera un poco diferente, y fingiré que sólo me gusta la palabra Daniel, y que sea audaz de solo Daniel. Lo que podría hacer, es que podría crear una etiqueta div para logo. Puedo hacer dos etiquetas P. Voy a envolver eso en una etiqueta P. No, equivocada. Vamos [inaudible] P, envolver con la abreviatura etiqueta P. Genial. Eso es un poco agradable. De acuerdo, voy a terminar eso. El primer gran problema es, pesar de que está en la misma línea, porque una etiqueta P es una etiqueta de nivel de bloque, pesar de que está en su propia línea. De acuerdo, vamos a envolver esto en una etiqueta P diferente, y vamos a envolver, y etiquetar anterior. Vamos a ordenar eso. Ahora cuando me muevo en estos grandes trozos, algunos en un Mac, no sé si esto es cierto en un PC, probablemente lo sea. Lo tenía en la tecla de opción, y usa mi flecha izquierda, y derecha, así es como saltar a través de estas líneas. En una PC dale una oportunidad. Podría ser ALT, flecha izquierda o derecha, y si mantengo pulsada la tecla Mayús al mismo tiempo, por lo que mi Mac es turno de opción, selecciona ese salto grande, para que pueda mantener la opción y el turno, y hacer clic en mi izquierda flecha, puedes verlo solo resalta todo eso. Eso no era lo que estaba diciendo, pero estas son dos etiquetas P separadas, y ahora llego a darle estilo a esto con una clase de punto culminante. Funcionará excepto que ahora aquí, ahí está mi segundo ahí. Está en dos líneas separadas. Por lo que quería estar en una línea, y una etiqueta span hace eso está en línea, no en bloque. Ahora podría ir, y encontrar mi etiqueta P, y decir si es etiqueta p dentro de Display de Logo, bloque en línea o en línea, para que no caiga en sus propias líneas, y eso funcionaría. Mi problema con ello sin embargo es que Google, su motor de búsqueda verá eso como un poco separado de contenido de esto, así que digamos que lo hicimos por logo, así que logo fue audaz, pero esto no lo fue. Eso terminan en dos líneas separadas, y Google no conectaría las dos fácilmente. No sabe que eres todo sobre el diseño de logotipos. Sabe que eres todo sobre el diseño de logotipos. Entonces los dos tipos separados de partes a la página, así que me gusta asegurarme como, sobre todo para cosas como H y calentamientos, muy a menudo todos ellos en dos líneas, y quiero hacer algún estilo diferente a esos dos líneas solo, porque soy diseñadora, y desafortunadamente separando con etiquetas P, o 2H1s va a romper el contenido, que no se unan para el motor de búsqueda, y esto es sólo un poco más bonito. Adiós, salgamos de tu regazo. Ah, prometí un pequeño trato al final. Voy a abrir mis estilos, hacer doble clic en él, arrastrarlo por aquí. Cada vez que cerraba VS Code para ir a almorzar, o ir a dormir, me despierto de nuevo, y tengo que hacer esto. Te das cuenta de que antes tenemos que ir a ver. Estamos como, esto es un atajo, pero imagina si solo lo encendimos para siempre, así que te voy a mostrar algunas partes de pasar y editar esta cosa, y cambiar las preferencias. Es raro comparado con otros programas, así que lo que haces, es ir a ver comando pellet. Hemos estado usando un atajo, comando shift P en un Mac. Es turno de control P en una PC, y terminas en esto, y lo hemos estado usando para hacer envolturas de emisión. Lo que queremos hacer es ir a las sentadas. De acuerdo, y de todas estas, queremos ir a esta que dice, configuración de usuario, así que abre eso, y aquí, vale la pena tomarse algún tiempo para ir a echar un vistazo a través. Cosas como eras, me gustaría cambiar esto. El que quiero es envoltorio de palabras, así que este pequeño cuadro de búsqueda de aquí arriba está buscando las sentadas, y puedo decir, una envoltura. Estos ajustes de palabras y controles están desactivados por defecto, vamos a encenderlo por defecto, y podemos desactivarlo si no es necesario. También hay otras cosas divertidas ahí dentro, pero esa es la que quería en este momento. Es configuración de cierre, y ahora cada vez que lo abro para el resto de este curso, es envoltura de palabras, ojalá. Eso es todo. Etiquetas de Span, hicimos span en línea CSS. Entonces solo una etiqueta span, y ahora hemos hecho una clase span. Si hiciste algo ligeramente diferente, ¿de qué otra manera podrías haberlo hecho? Si hiciste algo diferente, y funciona, mándame una captura de pantalla del código que hiciste que funcionara. Ponlo en los comentarios, o etiquetarme en redes sociales, me interesaría ver cuáles son las formas creativas que hiciste que funcionara. Eso es todo para etiquetas span. 93. Cómo fijar la navegación a la parte superior de un sitio web, nav fija: Hola ahí. Vamos a hacer nuestra navegación fija a la cima. Vamos a empezar con esto donde se desplaza hacia arriba y desaparece, y luego vamos a hacer esto, donde se queda fijo y cosas se desliza por debajo de él. Es súper fácil de hacer. Vamos a saltar y hacerlo ahora en CSS. En primer lugar, necesitamos identificar lo nuestro que vamos a anclar. No queremos anclar sólo este pequeño trozo de aquí. Queremos toda la caja grande gris. Echemos un vistazo a cómo hacerlo. El gran cuadro gris es que lo llamamos contenedor de cabecera, ese es este tipo. Encabezado contenedor, tiene algo de estilo por aquí ya. Todo lo que vamos a hacer es agregar dos bits, bit principal es posición y fijo. Súper simple. Vamos a darle una vista previa, y funciona. Eres como, wow, eso no funcionó en absoluto. Necesita un ancho también. Porque por defecto era un ancho de un 100 por ciento, pero obviamente posición le hace algunas cosas extrañas, no viudas, necesitamos ancho. Haremos ancho y diremos un 100 por ciento. Ahora debería funcionar. Cuando me desplaza, no pasa mucho. Necesitas fingir el desplazamiento para subir y bajar. Eres como, sí funciona. Es ignorar que todo se resbaló por debajo. Al ponerlo fijo, significa que ha salido del flujo y ya no está bloqueando. No está bloqueando al resto de los chicos y empujándolos hacia abajo. Entonces vamos a tener que fingir la brecha ahí dentro. Quiero que paren el video ahora y solo tengan un poco de pensar, tal vez prueben algunas ideas de cómo podría resolverlo. Porque lo que más me gusta del diseño web es que es un gran rompecabezas viejo y grande y hay una solución para todo. Si lo has visto en la página web de otra persona, significa que existe. Todos sabemos que puede suceder que puedas tener un encabezado en la parte superior y cosas que no se deslice por debajo. Simplemente vas a pensar y tratar de averiguar cómo hacerlo. En fin, eso es lo que me encanta del diseño web. Es un Cubo de Rubik solucionable. Tengan una pausa, piensen, y lo haré con ustedes en un segundo. ¿ Lo pausaste? ¿Tuviste un pensamiento? ¿ Hiciste que funcionara? ¿ O discutió algunas buenas conjeturas? Echemos un vistazo. El modo en que pensé en hacerlo es que el contenedor está debajo. Solo necesita ser empujado un poco hacia abajo. Si encuentro el contenedor y agrego algunas cosas a la parte superior, relleno o margen, creo que ambas funcionarán. Intentaremos ambos por si acaso, pero algo de relleno a la parte superior. En mi cabeza, ambos deberían funcionar. Pongamos como 150 píxeles. Echa un vistazo. Aquí vamos. Funcionó muy bien. ¿Eso es suficiente? Sí. Ciento cincuenta píxeles. Genial. Se desliza por debajo, pero empieza con un poco de espacio. Básicamente, estamos poniendo en lo alto que fuera. Bueno, ¿a qué altura estaba el contenedor de cabecera? Tenía una altura media de 100 más algo de relleno en la parte inferior. Entonces digamos que 140 debe coincidir exactamente con lo que solíamos tener. Entonces esos dos juntos. Ahora bien, ¿cuánto necesitamos para margin-bottom? Ya no necesitamos eso para nada. ¿Nosotros? No. Siempre cuando estás arreglando una cosa, intenta eliminar las otras cosas, porque más adelante estarías como, ¿hay alguna razón por la que pongo en margin-bottom? ¿ Eso es esencial? Si bien estás en medio de ello, eres como, en realidad, no necesito eso. Es así como hacemos una navegación fija a la parte superior. Bastante fácil. No olvides el ancho. Encendido al siguiente video. 94. Cómo hacer un menú móvil responsivo simple usando solo CSS: Está bien. Vamos a hacer un menú responsive. No va a ser el gran menú desplegable, lo haremos en el siguiente video, vamos a ver un CSS simpático, fácil, simple, simplista, sin habilidades adicionales basadas en lo que hemos aprendido hasta ahora, solo reorganizar las cosas. Porque en el momento en que hace esto, se baja y se va, Oh sí genial, y se llega a escuchar va, Ah también malo. Lo vamos a cambiar en este video, que cambie de formato a partir de esto cuando baje a cierto nivel, boom. Es bueno en el móvil. vamos a cambiar, así que no está fijo a la cima. Los botones son fáciles de hacer clic, y es solo una simple remodelación de CSS basada en una consulta de medios. Vamos a saltar ahora y a trabajar como hacerlo. Nuestro menú que has visto, lo estamos haciendo por esto. Se reduce a un tamaño de tableta o tamaño móvil y simplemente se desmorona. Tenemos que decidir cuándo esto se desmorona. Vamos a previsualizarlo en un iPad y el teléfono. Vamos a hacer clic derecho en él, vamos a Inspect, vamos a encender aquí abajo, una pequeña vista previa del dispositivo, y en la parte superior vamos a mirar el iPad. En el iPad, está mirando al 50 por ciento, vamos al 100. En realidad está bien en un iPad. Podría empujar un poco ese logo, pero es totalmente utilizable. Echemos un vistazo a mi lata de iPhone y no es totalmente utilizable. Todo está colapsando y cayendo en pedazos. Eso es lo que vamos a apuntar, nuestro teléfono móvil, eso es alrededor de 375. Echemos un vistazo a nuestra consulta de medios. ¿Dónde está? Nuestra consulta de medios de tableta va a ser ésta, en vista móvil. Vamos a estar trabajando dentro de estos tirantes rizados. Justo después de nuestro pequeño móvil de escondite, vamos a empezar a astillar en él. Lo primero que vamos a hacer es que necesitamos anular. Antes dijimos display flex cauteloso. Nuestro encabezado, no ese, éste de aquí. Dijimos cómo cabecera, que tiene nuestro logotipo y nuestra navegación en él, quiero que muestre flex y eso lo hizo alinear uno al lado del otro. Lo que podríamos hacer por este video es, no voy a estar tocando el HTML, así que lo voy a apagar, y sólo voy a arrastrar esto, y me muevo esto a través, el lujo de trabajar de mi parte significa que lo podemos ver por aquí. Lo trasladaré a un 100 por ciento y podría acercarlo para su uso para que el editor no tenga que alejar demasiado. Probemos eso. Lo primero que queremos hacer es no queremos lado a lado. Hay muchas cosas que hacer, no tiene que ser esta primera. Este compañero de cabecera está mostrando flex, vamos a anular eso abajo en mi móvil. Aquí abajo, voy a decir, encabezado, no no no es una clase, es una etiqueta HTML predefinida, por lo que el encabezado se va a mostrar, en lugar de flex, vamos a volver al buen bloque viejo, por lo que se apilan encima de el uno al otro. El logo está ahí ahora el nav está debajo. Ahora estos pequeñitos nav tampoco están mostrando bloque, pesar de que el encabezado dijo que los artículos de nav ven estas pequeñas a-tags que usamos, parecen estar haciendo sus propias cosas. Diremos, ¿y qué queremos? Las a-tags que están dentro del nav puedes mostrar bloque también? Bloque de pantalla. Ahora todos están encima el uno del otro. Perfecto. Eso es primero en hacer que todo centrado. Podría hacerlo por el nav y el encabezado, pero también debemos hacerlo por cada cosa, bueno el logo, así que lo hacemos por el encabezado porque eso va a hacer tanto el texto del logo ojalá todo el texto dentro de los botones. Vamos a alinear texto e intentaremos mantenerlo en el centro. Ahí vamos, lindo. El logo, diremos .logo, recuerda que no es una etiqueta HTML predefinida aunque se sienta como debería serlo. Vamos a darle una altura media de 50 píxeles. Queremos un poco de relleno en la parte superior también. En realidad, podríamos hacer relleno superior e inferior en lugar de una altura mínima, hagámoslo. Hacemos relleno y lo haremos, arriba e abajo, vamos a hacer 40 pixeles, e izquierda y derecha va a ser cero. En realidad no tienes que poner px, solo pones en cero y cero es cualquier medida que vayas a usar, punto y coma. 40 arriba e abajo y cero izquierda y derecha. Eso nos ha dado algo de espacio. La única otra cosa real es que esto necesita cambiar a nuestro verbage. Hay algún margen de ancho en estos tipos. Me imaginé que sería margen para estos becarios. Margen a la izquierda lo pondré a cero. Eso no funcionó, así que lo intenté porque había mirado el HTML ya ahí, ambos es una a-tag dentro de un nav, pero también tenemos esta clase aplicada. Eso es lo que probaré a continuación. En lugar de estar en esa, diré yo, y nuestra clase llamó botón de navegación, lo intentaremos igual aquí. Diremos, margin-izquierda es cero. ¿ Funciona? No funciona. Yo lo llamé lo correcto, pero nav, se llama mi botón, y lo estiré. Que mis amigos es una forma sencilla y agradable de redefinirlo solo en el móvil. No es grande, quiero decir que lo harás en el siguiente video pero es bastante fácil de implementar. Echemos un vistazo. Ipad, estoy escribiendo a distancia puedo dar click en todas estas cosas, hagámoslo 100 por ciento. Puedo tocarles a todos, pero cuando bajé a mi teléfono, simplemente apaga el diseño, sigue luciendo bien, una cosa que no se ve bien, está escondiendo muchos trozos así que necesitamos empujarlo hacia abajo, o en este caso, Probablemente quiero apagar el menú fix porque está ocupando una cantidad tan enorme de los bienes raíces en mi teléfono. Echemos un vistazo a hacer eso. ¿ Qué lo controla en la parte superior aquí? Se llamaba posición fix, ahí está. Mi contenedor principal tenía posición fija aquí abajo en mi contenedor de cabecera. ¿ Tengo un contenedor de cabecera? Yo no. Haremos éste. Encabezado contenedor, no quiero reiterar todo eso. Yo quiero deshacerme de eso. En lugar de fijar la posición, los vamos a hacer relativos. Relativo significa que soy relativo a todas las demás personas de la página, así que estoy al tanto de lo que están haciendo. Por el momento, ¿puedes ver esta gran brecha? Esto viene de antes en adelante, recuerda dijimos contenedor, pon un enorme relleno grande en la parte superior. Ahora necesito decir relleno de contenedor en la parte superior, por favor vete. Aquí abajo, no estoy poniendo ningún orden real, sólo tratando de poner algo de jerarquía en él. Haremos la parte superior acolchada. Creo que probablemente puede ser cero. Vamos a ponerlo en cero. Echemos un vistazo. Se desplaza hacia arriba lo cual es genial, pero quiero un poco de relleno, tal vez solo 40 píxeles para que coincida con el hueco debajo, y eso es un verdadero simple. Echemos un vistazo en responsive. Móvil, hay un poco de una brecha rara pasando aquí. Lo que podría tener que hacer es realmente implementar todo esto mucho antes de lo que pensaba. Ipad, pero no hay tierra de hombre de teléfono probablemente horizontal. Arreglemos eso. Todo lo que necesito hacer es que vengas antes y estas son las cosas que hemos hecho. Te voy a decir que te bajas, en realidad eres mejor antes de los tirantes rizados de cierre de éste, probablemente va a ser mejor hacerlo ahí. Viene abajo Poof, y se mete en un bonito botón gigante. Se ve bien justo arriba en tierra pequeñita. Impresionante. Bonito CSS simple solo, cambiando el diseño del CSS, pero eso no es para lo que viniste aquí. Quieres hacer ese menú poco más grande, hacemos clic en él y hace un poco cool cosa desplegable en nuestro teléfono móvil. Recuerda que no tienes que tener eso, pero es bastante guay. Para ello, vamos a aprender un poco de jQuery y lo haremos en el siguiente video. 95. Qué Javascript vs. Jquery en diseño de un sitio web: Hola tú, no me he visto desde hace un rato cara a cara, estamos atrapados detrás de la pantalla desde hace mucho tiempo. Este video va a estar hablando de algunas cosas. Hablaremos de lo que hace JavaScript, la diferencia entre JavaScript y jQuery. Veremos por qué no podemos usar CSS, como lo hemos estado haciendo hasta ahora, y luego veremos alternativas para jQuery. Existen diferentes bibliotecas competidoras. Entonces, saltemos y hablemos de esos. Primer paso, ¿qué es JavaScript? Es fácil de entender cuando lo comparamos con lo que ya sabemos. Tenemos HTML, CSS, estamos de acuerdo con esos. HTML son las cosas. Son los encabezados que están en la página, las etiquetas div, las casillas, los ítems de navegación, el pie de página, son las cosas que están en la página y no hacen mucho, son muy estáticas. CSS es el estancamiento de esas cosas. Los hacemos azules o un 100 de ancho. Por lo que almacenamos esos bloques HTML. Ahora donde JavaScript encaja en él es la interacción entre el sitio web y yo como ser humano, porque por el momento nuestro sitio realmente no hace mucho. Se puede hacer clic en enlaces y saltar, pero todo es muy emocionante. Empezar cosas es qué? JavaScript sí. En este caso en particular, vamos a estar buscando crear Mobile Menu y hacer clic en eso, y conseguir que se baje. Esa es una interacción indirectiva. Eso sí lo hicimos en CSS sin embargo, y discutiré por qué no podemos hacerlo en este caso, pero eso es un poco de interacción humana. Podría ser un deslizador de imagen. Entonces haz clic a la izquierda y a la derecha, te desplazas por las imágenes. Eso lo haremos más adelante en el curso también. Hagamos que JavaScript haga esos clics, tirando de imágenes y luego deslizándolas, parte de la interacción humana. Menús con tabulaciones. ¿Qué más? Módalos pop-up [inaudibles] en pantallas. Eso es todo JavaScript. Eso es JavaScript. Ahora, ¿qué hace jQuery en relación con él? Se ve en línea lotes, que se pueden plegar juntos. JavaScript es el hardcore detrás de bambalinas, visión big boy de este lenguaje de programación. Eso es lo que la gente usa durante mucho tiempo, para hacer todas esas cosas interactivas, los deslizadores de imagen y los modelos pop-up. Algunos diseño inteligente es que los desarrolladores web decidieron en realidad escribir un Menú Móvil, desplegable aquí. Para activar y desactivar eso, teníamos que escribir tal vez, 5-6 líneas de código para que eso funcione. El caso es que lo que vieron fue como si estuviéramos haciendo esto cada vez. ¿ Por qué tenemos que aprovechar todo esto? Entonces lo que decidieron es, hagamos que esta otra cosa, le pase al código jQuery, y es una biblioteca de, tomaremos las seis líneas, las aplastaremos todas y las pondremos en una pequeña función o poca clase. Esta clase aquí se llama un toggle. Para mí como diseñador web, solo tengo que decir el pequeño ícono para el menú, quiero que alteres. Lo que ve el navegador, ve cambia y luego desempaqueta todo el código que se está abarrotando en toggle, y lee las seis líneas de código. Entonces es solo que una abreviatura del lenguaje de programación más grande, que es JavaScript. Esperanza que eso lo explicara. De acuerdo, terminé ese video y me imaginé que era una explicación promedio. Vamos a mostrarte rápidamente cómo es el código. También quiero mostrarles esa página web jquery.com. Este es el pie de base hogareña y puedes entrar en la documentación de la API, y me voy a desplazar. Estas son todas las diferentes cosas que puede hacer. Voy a desplazarme hacia abajo para cambiar. Encontremos el viejo toggle regular. Dentro de un toggle, que vamos a usar para nuestro menú, va a ser, ¿dónde está la versión larga? Entonces esa es la versión larga de la misma. Lo que digo es, quiero que esta etiqueta div llamada “foo” conmute la pantalla. Eso es fácil de escribir. Esto es lo que realmente está sucediendo en el JavaScript. puede ver que la sintaxis es más fácil, Sepuede ver que la sintaxis es más fácil,tiene más sentido, no es tantos iguales, y el lenguaje es simplemente más fácil de entender. Por lo que jQuery solo está empaquetando esto y atándolo en sintaxis un poco más pequeño, más fácil de entender. Ya lo tienes, ¿verdad? Volver al tipo sin afeitar en sus clases de lectura. Una de las otras cosas que quiero que discutamos es ¿por qué no podemos simplemente usar CSS? Porque hicimos un menú desplegable más temprano. Recuerda, y utilizamos para nuestra bicicleta, un taller de reparación de bicicletas. Acabamos de flotar por encima de él y llegó el desplegable. ¿ En qué puedo simplemente hacer eso por el voleibol? Ahora una de las razones es que puedo flotar como dejarme agarrar mi teléfono ahí mismo. Puedo flotar con el ratón, puedo coger mi ratón y flotar, pero no puedo flotar con mi teléfono. No sabe que tus dedos se cierren, así que no podemos usar esa sencilla función. Tenemos que hacer click en él. A CSS no le gusta hacerlo. Se trata de un código de estilo. Podemos pedir CSS a pedazos para tratar de conseguir que haga las cosas que queremos, pero para eso está construido JavaScript. Este tipo de interacción humana. así que vamos a usar eso. Pero aún usando JavaScript vamos a hacer trampa un poco y usar una de las bibliotecas. Vamos a usar jQuery en este caso. Por eso no podemos usar dulce CSS hover o roll-over. Muy bien, siguiente punto. Lo último que quiero cubrir es jQuery es solo una opción. Por lo que JavaScript siempre está ahí en la parte inferior, y encima de eso se está construyendo jQuery. Ha existido mucho tiempo, hace exactamente lo que necesitaba hacer como diseñador web. Pero a otras personas inteligentes me gusta jQuery, pero quiero hacer algo ligeramente diferente. Entonces algo como React es más nuevo y hace cosas diferentes para jQuery. Es sólo un comparar no es el camino correcto pero sólo una manera diferente de interactuar con el JavaScript. También hay marcos como Angular y View. Todos están usando JavaScript y haciendo más fácil construir otras cosas como, es increíble lo que puedes hacer con JavaScript en términos de productos SAS o en software de navegador. Eso es lo que es jQuery, una opción que puedes usar para interactuar con JavaScript. Eso es todo. Necesito afeitarme aquí es donde dispara mientras estoy entrenando. ¿Qué pasa con él? Saltemos atrás de la pantalla y construyamos el menú real. 96. Cómo hacer un menú de hamburguesa de 3 líneas; navegación de un sitio web para celular: Hola ahí. En este video vamos a crear un Mobile Nav Sandwich que al hacer clic en él, sale un móvil. Se vuelve a hacer clic de nuevo en cuando vuelves a hacer clic en él. Estamos gong para usar jQuery para hacerlo todo en VS Code. Vamos a saltar ahora y a trabajar como hacerlo. Para éste, vamos a cerrar nuestro sitio web actual y lo vamos a meter en sus propias páginas sólo para que tengas una versión de esto, como una versión vainilla. Porque si empiezas a implementarlo ahora en nuestro sitio, ¿de acuerdo? Hay muchos de estos restablecimientos con los que podríamos tener que lidiar y un montón de cosas que tal vez no así que va a hacer una bonita versión pura de la misma. Entonces en el siguiente video, lo integraremos de nuevo a nuestra página web. Hagamos un nuevo documento, ¿de acuerdo? Archivo, Nuevo. Este lo va a salvar. Voy a llamar a éste, ¿cómo vamos a llamarlo? Vamos a llamar a este Jquery-nav.html. De acuerdo, vamos a salvarlo. Vamos a poner en nuestras cosas normales de etiqueta de cabeza y vamos a vincular dos archivos a ella. Vamos a tener algo de CSS. Vayamos a Nuevo Archivo. Voy a guardar esto y lo llamaremos jquery.nav.css. Bonito, y tendremos un archivo más, ¿de acuerdo? Eso no hemos tenido antes es un archivo JavaScript. Voy a llamarlo this.js. Probablemente sea más común llamarlo tal vez script o scripts plural k.js. Realmente no importa cómo lo llames. De acuerdo, se trata de tres expedientes. Vamos a vincularlos a todos con el HTML. Arriba en la parte superior aquí antes del cierre del HID, vamos a enlazar CSS, por lo que un link CSS. Al no ser estilo frío, se llama j. Déjame ir, jquery.css. Ahora queremos vincular nuestro JavaScript, ¿de acuerdo? En este caso no es enlace, se llama script. Queremos a éste que se llama fuente de guión, ¿de acuerdo? El origen va a ser, por lo que ahora carpeta raíz y se llama jquery.js. Agradable, así que hemos conectado estas tres páginas. Vamos a separarlos un poco. Esta es una pequeña opción genial. Ahora que tenemos tres expedientes, ¿de acuerdo? Puedo arrastrar este y decir que lo quiero por aquí y luego agarrar a JS y tenerlo por aquí. Voy a tres arriba. Mira eso así que lo primero que tenemos hacer es que vamos a poner en el pequeño ícono de navegación. Se puede tener cualquier cosa. Puede ser un botón, puede ser texto. Nosotros sólo vamos a tener en nuestro cuerpo aquí, vamos a tener una imagen. De acuerdo, entonces vamos a usar una imagen y se va a, tengo esta para ti en tus archivos de ejercicios, ¿de acuerdo? Aquí hay uno. Proyecto 3 es un ícono aquí llamado Icon Burger Menu. Parece así, ¿de acuerdo? Ahora me llegó eso de la fuente impresionante. Acabo de descargar el SVG y es posible que decidas usar la versión de icono. Recuerda, aprendimos a hacer iconos en una página donde lo pusimos en la etiqueta de cabeza y enlazamos a ella usando la etiqueta i. No te preocupes. Solo estoy usando una imagen, puedes usar lo que quieras. Voy a copiarlo, encontrar mi carpeta local, y la vamos a pegar en mis imágenes. Uno equivocado, escritorio, proyecto 3, poner imágenes y pegarlo y ahí está. De acuerdo, así que vamos a buscar esa. Está en las imágenes. Imagenes/Ion-Burger-menu, ¿de acuerdo? Este va a ser mi icono de menú móvil. Conseguir el hábito de escribir texto viejo. Ahora vamos a previsualizar en un navegador. Apágalo de nuevo y enciéndalo de nuevo. Icono gigante. De acuerdo, porque esto es un SVG puede escalar hasta los límites del documento y ahora documento pasa a ser así de ancho, ¿de acuerdo? Se va todo el camino. Lo que vamos a hacer es que vamos a decir en realidad, antes de que esto cierre la etiqueta de imagen, vamos a añadir un estilo de ancho, ¿de acuerdo? Diremos tu ancho de 20 píxeles. Guárdalo, echemos un vistazo, 20 píxeles. Voy a hacer el mío un poco más grande porque estamos haciendo un tutorial podría ser un poco más fácil de ver en lugar de lo adyacente el editor teniendo que acercar y retroceder de nuevo. Probablemente no ayude en absoluto. Pero de todos modos, así que tenemos nuestro ícono, ¿de acuerdo? Podría ser sólo un texto con una etiqueta alrededor. No importa. Ahora necesitamos separarnos de eso, ¿de acuerdo? Necesitamos los elementos de menú reales. Voy a ponerlos en una etiqueta de navegación, ¿de acuerdo? Esa tiene que entrar en una etiqueta de navegación, pero es buena práctica de HTML5, ¿de acuerdo? Yo quiero cuántas etiquetas a? Voy a tener tal vez tres a tags vamos a igualar lo que estamos haciendo en la siguiente. atajos [inaudibles] ahí? Se va a ir al hash y dentro de esto igualaremos lo que estábamos haciendo antes en el último proyecto. Ir a sobre precios y contáctanos, cool. Echemos un vistazo a lo que tenemos. No vamos a darle estilo, van a ser cosas azules feas, pero sabemos cómo darle estilo a esas en botones bonitos. Hombres, tengo niebla en mi través no puedo deshacerme de ella así que voy a sonar un poco husky en este video. ¿ Qué vamos a hacer? Queremos apagar esto porque no quiero que aparezcan. Yo solo quiero que aparezcan cuando hacemos clic en el botón y eso es lo que JavaScript va a hacer. Dice: “Cuando se altere este botón, esto va a salir y luego se cierra de nuevo”. Lo que haremos es apagarlo con algo de CSS. Necesito controlarlo. Esto va a tener una clase de nav de, voy a llamar a este mobile-nav. Bien. Lo que me gustaría es, me gustaría darle estilo a ese mobile-nav. Mobile- nav sólo para estar apagado, ¿de acuerdo? Ya hemos hecho esto antes. Nosotros sí mostramos ninguno para apagar las cosas y lo encendimos con consultas de medios. Ahora lo vamos a encender y apagar usando JavaScript. No debe aparecer ahora. Impresionante, nada está funcionando ahora, como si nada estuviera conectado, ¿verdad? Es el JavaScript que va a conectar el a por lo que en el momento que sólo tenemos icono sentado por sí mismo, tenemos un nav debajo de él que está apagado por defecto, no conectado. En la siguiente parte, necesitamos llamar a nuestra biblioteca JavaScript o biblioteca jQuery. Porque JavaScript se entiende por defecto en el navegador, pero jQuery necesita un poco de edición de biblioteca en la parte superior aquí así que al igual que hemos cargado recordar las fuentes de Google en la parte superior, porque el navegador no sabe lo que Google fuentes para empezar. Tiene que cargarse en la parte superior aquí. Lo mismo con CSS recibido, lo cargamos en la parte superior. Tenemos que ir a encontrarlo y code.jquery.com es un buen lugar. Hay otros CDN por lo que una red de entrega de contenido, pero jQuery es una gran. Eso es lo que la mayoría de la gente usa y necesitamos cargarlo en la página. Por el momento, estamos en jQuery 3, ¿de acuerdo? Con 3.4.1 en el futuro será 3.5.1 o lo que sea, ¿de acuerdo? Actualiza esa última versión, pero no tienes que seguir actualizándola, ¿de acuerdo? El material que vamos a hacer en este momento es algo que lleva años en él. Podemos usar básicamente cualquiera de estos. Vamos a usar la versión sin comprimir y aquí dice: “Este es el guión para poner en tu sitio web”. Vamos a hacer clic en este pequeño portapapeles de copia. Ahora bien, si no tienes todo esto, he tratado de hacerlo más fácil. En tus archivos de ejercicio, proyecto 3 que tengo, ¿cómo se llamaba? jQuery Mobile Nav. Abre eso y ahí está la CDN. Ese es el enlace en el que estamos, ¿de acuerdo? Esto es lo que acabo de copiar. Puedes ir a agarrar eso si quieres. Pega esto en el código, vamos a escribir si quieres hacer trampa. En realidad, ese es el dos veces. El tuyo se verá más bonito, ¿de acuerdo? Tenemos que pegar eso en la cabeza de nuestro documento. Podría hacer esto un poco más grande. Lo que vamos a hacer es debajo de aquí, lo vamos a pegar. Ahora no estamos, agarró lo equivocado. Copiar al portapapeles. Copiado, vamos a ponerlo en código VS. No es copiar, mientes. Voy a agarrar esta versión, y va en la etiqueta de guión. Al igual que el guión se está enfriando, el guión se enfría a continuación. Ahora bien, este es un gran problema porque esto se está enfriando después. Esta es la biblioteca, esto le está diciendo al navegador todo lo que necesita saber sobre jQuery para que pueda ejecutarlo pero lo está cargando de la manera equivocada. Necesita aprender todo antes de que pueda correr el tuyo. Esto tiene que estar arriba, y luego esto va por debajo. Voy a cerrar aquí el panel CSS porque ya no lo necesitamos, y echemos un vistazo al JavaScript que se requiere. En primer lugar, empezaré a escribir ese JavaScript, y queremos decirle en primer lugar que estamos tratando con jQuery. Para que esto funcione correctamente, necesitamos asegurarnos de que antes de que empiece a hacer cualquiera de las cosas que quiero que haga, como el toggle, necesito asegurarme de que la página esté cargada. Entonces tenemos que decir que el documento necesita estar listo antes de que se ejecute, una función, o la función que voy a escribir. Una función es solo un marcador de posición para lo que quiero hacer. Le das algunos parámetros poniendo un par de corchetes, y dentro de aquí puedes ejecutar parámetros, lo dejaremos en blanco justo después de eso, pero antes del último corchete es donde ponemos nuestras llaves, y dentro de estos tirantes rizados es donde toda la magia necesita ir. Al final, pones un punto y coma como CSS para decir que he terminado. Por el momento, todo lo que está haciendo es decir, sí, estoy usando jQuery. Lo que me gustaría que hicieras es que no corras todas las cosas de esta llaves hasta que se cargue la página. Al igual que CSS, vamos a poner en un retorno solo para separarlos, no lo puedes tener todo juntos. Lo que me gustaría hacer es, de nuevo, quiero asegurarme de que sepa que estamos ejecutando jQuery, pero la taquigrafía de jQuery es solo un signo $. Entonces nadie escribe jQuery, simplemente escriben $ signo. Lo que nos gustaría hacer es dentro de corchetes, nos gustaría que lo hiciera, corchetes y luego dentro de paréntesis, ¿quieres decir esas comillas con puntitos simples. Ahora quiero adjuntarme al ícono. En el momento en que tenemos una imagen, hay un ícono y SVG, tenemos una forma de conectarnos a ella así que vamos a darle un nombre de clase. Vamos a decir que tienes una clase de, lo llamaremos menú de hamburguesas. Cuando el documento esté listo, quiero que busquen el menú de hamburguesas y cuando esté en click, me gustaría que ejecuten esta función. Igual otra vez, ponemos entre paréntesis, justo después y entre los dos últimos, ponemos unas llaves pero retenemos dentro. Estamos diciendo, espere a que se cargue el documento, luego ejecute esta función. Esta es la función porque está justo dentro de los tirantes rizados para que cuando esté listo, haga esto. ¿Qué está haciendo? Está diciendo, busca el menú de hamburguesas y espera un clic, y luego haz esta otra función. Esta función, misma sintaxis, $ signo, digamos que esto es jQuery dentro de nuestras comas invertidas, necesito averiguar cuál es el nombre de eso. Lo que me gustaría que hicieras es encontrar en mi página, mi mobile-nav y encenderlo. Vamos a asegurarnos de que sea mobile-nav, me gustaría que lo alteraras. Alterna los corchetes y luego termina eso. No quiero hacer nada más. Ahora, toggle realmente no hace otra cosa que vaya a buscar ese CSS que tenemos, y sintonizarlo a su opuesto. En el momento en que vea ninguna pantalla, va a cambiar eso y se convertirá en bloque de visualización. Impresionante, eso debería funcionar. Guárdalo, echemos un vistazo. Se alterna, y que mis amigos es una navegación móvil súper simple, súper efectiva usando JavaScript, realmente solo jQuery. Ahora un par de cosas más, cosas importantes que hay que saber sobre el uso de JavaScript está en código de Visual Studio aquí, y es muy común tener las etiquetas de script, es cualquier cosa que sea JavaScript así que tenemos dos partes, nosotros tengo mi que hicimos y luego tenemos esta que es la CDN que está siendo entregada por Code.jquery.com. Esto es todo JavaScript, es mejor tenerlo en la parte inferior de la página justo antes del cierre del cuerpo. Es raro, ¿crees que lo verás en la página? Echemos un vistazo. Nada cambia, sigue funcionando y no se puede ver porque está dentro de esas etiquetas de guión. Es solo que es una práctica realmente común no puedes tenerla en la parte superior, y solo es práctica común tenerla en la parte inferior. El motivo principal es la velocidad de carga de página. Esta es en realidad una biblioteca bastante grande para descargar, así que lo que puede pasar es que el navegador puede cargar todas las cosas en la página súper rápido para que el usuario pueda verlas, y luego más adelante, cuando llegue a ella finalmente para cargar las páginas, puede cargar los scripts y puede tomar tiempo para hacerlo pero estamos hablando como segundos aquí, milisegundos así que está bien tenerlo en la parte superior. Pero si tienes gente que está corriendo por tu sitio como click, click, click, click, lo que podría pasar es que llegaré a una página, intentaré dar click en algo y no aparecerá nada porque sigue tratando de abrirse camino a través de esto. El otro gran cosa es solo asegurarte de que el orden sea correcto. Por lo que necesitas cargar primero la biblioteca, luego tu guión. Tenemos lo básico y un par de pequeñas cosas que puedes hacer para ajustar el jQuery, este toggle y valor aquí realmente podemos agregarle algunos atributos. Podemos decir entre comillas, podemos decir ir despacio, guardarlo. Vamos a previsualizarlo. Vamos a darle click, va muy lento. Te puedes imaginar si pudieras escribir rápido. Es cierto, puedes hacer que vaya rápido. Da click en ese, bonito y rápido. Si eres realmente particular, puedes escribir en milisegundos. Te deshaces de las cotizaciones y solo tecleas directamente hacia arriba. Eso es un segundo, mil milisegundos, por lo que podría ponerlo durante tres segundos. Echemos un vistazo. Extremadamente lento. Aquí vamos, ¿qué más? Voy a volver a simplemente dejarlo. Por defecto, luce bien. Acabamos de utilizar el sencillo viejo toggle. Hay algunas otras formas similares de encenderlo y apagarlo, alterarlo. Yo sólo estoy en W3Schools.com, es realmente agradable y claramente descrito y colocado como los tutoriales. Veremos JavaScript, jQuery, y aquí estamos viendo estos efectos. Creo que cómo muestra sólo nuestro habitual viejo toggle, y está aquí. Se puede hacer un fade jQuery. Echemos un vistazo. puede ver que es un jQuery fadeToggle. Tiene que ser este caso de camello, que es extraño. No lo hemos hecho aún porque se puede entender por qué su camelizado, tiene una gran joroba en el medio o tiene altibajos ahí por lo que tiene que escribirse exactamente de esa manera. Puedo decir desvanecerse, mayúscula T para toggle y echemos un vistazo. Vuelve a mi menú ahí está, FadeToggle. Hay una diapositiva toggle, y slide toggle mayúscula T. Emocionante. No vamos a pasar y empezar a peinar esos menús porque tenemos esa estructura funcionando, pero ahora necesitamos implementarla en nuestro gran sitio porque por el momento sólo tenemos un mobile- nav. Queremos hacer todo el switch de escritorio a móvil, lo haremos en el siguiente video pero básicamente todo este grupo, lo vamos a deshabilitar y solo encender todo para móvil y vamos a tener un menú completamente separado para escritorio. Fácil de decir, vamos a ponerlo en práctica en el siguiente video. 97. Cómo cambiar un menú de navegación de máquina de escritorio a celular: Hola, ahí. Este video, vamos a implementar nuestro MobileNav realmente simple que construimos en el último video en nuestro sitio completo, donde va de esto a escritorio a móvil con un dulce pequeño desplegable. Ahora, mantuvimos este separado para que realmente pudiéramos enfocarnos en implementar jQuery, pero ahora, vamos a doblarlo en nuestro sitio más grande y como este sitio de aquí, esto es lo que tenemos actualmente. Tenemos botones y lo que hacemos es ajustar el espaciado en tablet y móvil y me gusta esto porque realmente nos va a mostrar lo que termina pasando en el mundo real cuando estás tratando de implementar cosas y es nunca tan simple donde acabas de conseguir esto limpio, claro. Tienes que hacer batalla con bits de código existentes como nuestro caso, tenemos esta extraña cosa desplegable aquí. Vamos a tener que desrecoger eso para intentar que esto funcione. Es más un ejemplo práctico del mundo real de las cosas con las que podrías encontrarte cuando estás tratando de implementarlo. Esa es una muy larga intro hecha, empecemos. Vamos a abrir nuestro sitio existente y vamos a abrir index.html, haciendo doble clic en él, abrir style.css, arrastrar estilo por aquí y empecemos. Lo primero que quiero hacer es que vamos a apagar el nav cuando llegue a la pantalla de la tableta. Mi maqueta decidió ir a este menú móvil incluso en tablet. Se va a poner para ambos. Vayamos y volvamos lo que actualmente tenemos apagado y en realidad sólo vamos a previsualizarlo, ¿qué tenemos? Aparece en la página equivocada y se baja a aquí y se apaga, eso es lo que hicimos anteriormente. Que definitivamente es una manera fácil de hacerlo. Lo vamos a hacer sin JavaScript ahora. Lo que quiero hacer es en lugar de pasear, solo quiero apagar todos esos botones y vamos a encender nuestra versión móvil. En el código VS vamos a encontrar nuestro nav. Este nav de aquí se va a apagar cuando llegue a la tableta. Yo llego a tablet view, voy a volver a comprobar no tengo nada más tratando de controlar nav esto aquí. Voy a decir, justo arriba de aquí, voy a decir, “Nav”, y se llega al modo tableta, "mostrar ninguno”. Ahora y tú dices: “Oye, ¿qué pasa con este?” Hicimos todo eso asombroso en los últimos videos para que hiciera todos estos extraños cambios de pantalla para móviles. Esta cosa de aquí es redundante. Hay un montón de cosas que es redundante y medio dejando esto en el curso porque no es tan fácil nunca es tan fácil como solo hacer lo que hice en ese primer video y simplemente agregarlo, siempre hay como, “oh, este bit lo controla todo, estos bits faltan con él. Este va a ser un poco desordenado”, pero por una buena razón, para que podamos aprender a arreglarlo. Vamos a ignorar todo eso. Vamos a asegurarnos de que realmente se apaga para, ¿listo? Aquí tienes. Cuando baja al modo tableta y baja al móvil, se apaga. Lo que queremos hacer ahora es tener algo más que añadir en una pequeña línea de rayas. Volvamos al código VS. Debajo de nav, lo que haremos es crear otra etiqueta, y llamaremos a este uno.mob-wrapper. Vamos a poner todo dentro de esto. Dentro de mi envoltorio de mob-, vamos a añadir nuestro icono de las tres pequeñas líneas de rayas de mi navegador móvil más otro conjunto de estos. Hagamos trampa, tomemos nuestra imagen, abramos jQuery nav, y este es el trozo que queremos. Ese es el ícono que trajimos en la imagen, SVG, agregamos un pequeño texto. Agregamos un ancho y le dimos una clase de burgermenu. Nosotros sólo vamos a hacer trampa porque estamos como, “ya lo hice”. Tenemos un dominio, simplemente pasa que está así de mal, aquí vamos. Vamos a comprobar que en realidad aparece, limpiarlo todo. Aquí está. Está en la página, pero quiero apagarlos porque está apareciendo todo el tiempo. Yo solo quiero que aparezca cuando lleguemos al móvil. Lo que hacemos es que tenemos tres ollas, ¿recuerdas global? Que es en nuestro caso este top. Después bajamos a la vista de tableta, después tenemos vista móvil y como lo hemos apagado para, lo vamos a encender una tableta. Encontremos aquí el fondo, sin embargo evitamos el último corsé rizado. Toda la clase media está todo envuelta y abriendo corsé rizado y se cierra todo el camino aquí abajo. Entonces siempre tendrás dos al final, si no lo haces, las cosas van a salir mal. Vamos a decir, ¿a quién queremos at.mob-wrapper? A mí me gustaría que tú, amigo mío y todo lo que hay dentro de ti giraran. En realidad, aún no queremos hacer nada por él. Yo quiero cortarlas y quiero que en vista de escritorio se apague. Justo antes del cierre o apertura de la tableta, voy a decir, "Mob-wrapper eres un display de ninguno por favor”. Está apagado en el escritorio, lo cual es perfecto, pero nunca vuelve a encenderse. Ahora tenemos que decir, "así que está apagado en el escritorio y luego a medida que pasa, va a decir, "De acuerdo, aunque en la tableta, me gustaría encenderlos”. Abajo de abajo aquí antes de que me pondré rizado, vas a decir, "Display block” y está de nuevo encendido. Está apagado en el escritorio y luego en el móvil, o al menos tablet en este caso y como no decimos apagar de nuevo, simplemente fluye a través del móvil,por simplemente fluye a través del móvil, lo que no tenemos que decir eso de nuevo en el móvil. Lo siguiente es que quiero todos los bits fuera del lado que vamos a apagar en sobre todos esos botones que van a saltar, que queremos activados por este pequeño click. Lo que necesitamos es que sólo podríamos ir y robar todo esto. Todos estos botones aquí, en realidad agarraremos estos botones. Ahí está mi imagen debajo de mi imagen antes de que se cierre nuestro envoltorio. Ahí está mi envoltorio, termina ahí, justo después de la imagen que voy a poner en estos tipos, estos tipos necesitan estar en su propia <div> etiqueta. ¿ Por qué? porque solo están flotando un poco por el momento no tienen ranurado. Este tipo está solo. Estos tipos, estos tres, estos tipos necesitan estar atados juntos. Comando Shift P, Control Shift P. Empieza a escribir wrap y mirando esta abreviatura de envoltura. Yo los voy a envolver en algo llamado, algo que voy a maquillar ahora mismo llamado, mob-nav, nav vamos Dan no puede ver las llaves, mob-nav y tiene que tener un periodo delante. REF abreviatura.mob-nav. Estos chicos de aquí echemos un vistazo, deberían estar apagados en el escritorio porque están todos envueltos en esta cosa llamada mob-wrap que estaban encendiendo y apagando, si aún los ves, es significa que probablemente tienes a estos tipos después de este cierre <div> Se necesita estar dentro. Escritorio abierto, tablet ambos se encienden. Toda la estructura es extraña. arreglaremos para lo último lo que queremos hacer es solo conseguir que esta cosa haga clic en puño y apagado. Apagémoslo por defecto. Abramos mob-nav, por eso tiene un envoltorio porque no los sacamos todos de una sola vez. Voy a decir en vista de tableta”, .mob-nav. A mí me gustaría que solo estuvieras fuera de pantalla, pantalla, ninguno”. No los puedo ver. Me gustaría encenderlos con JavaScript cuando se haga clic en esta cosa. Para implementar nuestro JavaScript o nuestro jQuery, en este caso, necesitamos hacer dos cosas, recuerda que necesitamos cargar la biblioteca, que es las todas las reglas alrededor JavaScript o jQuery y luego necesitamos poner realmente alrededor de la codificación personalizada. Al igual que lo hicimos antes, vamos a ir a nuestros expedientes de ejercicios. En tus archivos de ejercicios, hay proyecto tres hay uno aquí llamado jQuery Mobile Nav. Abre eso y esa es la CDN, que está vinculando la biblioteca para decirle a nuestro navegador cómo funciona todo esto y recuerda dónde lo ponemos, no podemos ponerlo aquí arriba en la cabeza, pero es más común ponerlo aquí abajo en el cuerpo. Hablamos de las razones por las que antes y una de las cosas que pasa es cuando lo pego, puedes ver mi archivo se pone verde aquí arriba y un montón de errores aparecen abajo aquí abajo. Es porque estamos usando un ayudante, una pequeña extensión para darnos errores comprobando por HTML y simplemente no reconoce esto. Está totalmente bien y legítimo. Está buscando un corchete de ángulo de cierre después del script, pero lo implementamos un poco diferente y funciona bien pero así que sólo vamos a tener que ignorar eso. Las extensiones son geniales, son construidas por otras personas. Es un bicho en este en particular. ¿ Esta persona que dirige esta extensión irá y la arreglará, Mike? No estoy seguro. A lo mejor es algo que no se puede arreglar porque sólo necesita revisar estas cosas diferentes. Supongo que son sólo un par de cosas. Una es, lo verán ponerse verde aquí, y tiene tres errores los cuales debes ir a revisar y en nuestro caso, en mi caso, esto está funcionando bien. Hemos cargado la biblioteca. Ahora queremos cargar el JavaScript personalizado. Vamos a crear nuestro propio archivo, Nuevo Archivo, lo voy a guardar y llamo a este scripts.js y voy a pegar en mi texto. Esto es lo que escribimos en la última, no vamos a hacerlo de nuevo. las cosas que tendrás que hacer es que no me gusta deslizar toggle y tenemos que cambiar. Notarás que el toggle por sí mismo no es mayúscula, es caso Camel. El primero siempre es la mayúscula inferior y media. Otra cosa que quiero hacer es asegurarme de que estos coincidan. Recuerda cuando se cargue el documento, me gustaría que buscaran un click en esta cosa. Este clásico burgermenu, que en nuestro caso va a ser ese pequeño icono de rayas. Cuando sí vea que haga clic en el icono de la franja, conmueva el NAV móvil. Necesitas asegurarte de que esto y este partido arriba. Editemos primero y después asegurémonos de que coincidan. En index.html, vamos a cargar nuestro guión. Vamos a ir al guión. Te van a conseguir un montón más de errores y vamos a decir que está sentado, sólo se llama script.js, ahí está. Tenemos que hacerlo está cargado. Lo siguiente que quiero hacer es asegurarme de que este burgermenu coincida con el envoltorio que tengo. La clase que tengo aplicar a mi ícono este es mi ícono y aplicar ese burgermenu clásico perfecto. Eso coincide con eso. El siguiente se llama Mobile-Nav. Yo quiero encender y apagar esto. No lo he llamado mob-nav, lo he llamado MobileNav. Mezclé el nombre, solo tengo que asegurarme de que la mafia nav esté aquí. Simplemente voy a alternar eso para tomar y quitar. A ver si funciona. Tengo grandes esperanzas. Vámonos. ¿Dónde estamos? Aquí estamos, toggle. Se enciende y apaga, las capas todas rotas, pero eso está bien, la mecánica funciona y eso es lo más importante por ahora. Ahora, la razón por la que esto está sucediendo, y si me estás siguiendo exactamente en este curso, probablemente vas a tener el mismo problema. Puede que no. Porque quiero a este tipo a su lado, y es en esta implementación puedes ver que estos tipos están atorados uno al lado del otro pero cuando están abajo, se desmoronan. El único motivo por el que están haciendo eso es porque lo descubrí y te mostraré mi proceso. Algo está haciendo que no se peguen y debería porque antes dije, recuerda ese bateador, dije display flex y si hay dos objetos en ella, y en este caso envoltura de mafia y un logo. Deberían por defecto sentarse uno al lado del otro. Pero más temprano cuando estamos metiendo alrededor tratando de hacer, recuerda a este tipo. Cuando hicimos una implementación ligeramente diferente donde acabamos de cambiarla por tableta de piedra. Aquí está mi tableta y acabo de leer todo lo que pudiera estar metiendo con ella. De acuerdo, entonces en mi caso, cualquier cosa dentro del contenedor de cabecera. Entonces en tablet me voy bien y golpeo a un contenedor o abajo para llamar a nada que ver con ello. Solo escritorio alto no parece tener nada aquí con el mismo nombre. Hit Podría ser, y aquí es donde está el problema. Dijimos anteriormente queremos que el encabezado y todo lo que está dentro del encabezado muestre el bloque, y eso significa que se apilan uno encima del otro. Podríamos realmente deshacernos de todo esto. Usamos eso solo para y construimos ese otro estilo de menú y ahí es donde entran los problemas. Parece raro que lo incluyera en la clase, supongo. Sé muy bien cuando estoy trabajando en un sitio que hay tantas cosas que se relacionan con otras cosas. Haces una cosa para solucionar un problema y destruye otra cosa. Entonces si tengo una clase que siempre funciona a la perfección, siento que es falso. Aquí está lo nuestro, ahora se baja a esto, apágalo, enciéndalo. Por lo que la exhibición uno al lado del otro, lo cual es genial. Entonces éste que está haciendo lo que yo quiero. Ahora quiero hacer es cuando esto clics, no está saltando vamos vamos a hacer un poco más de estilo, pero los fundamentos están ahí. ¿ Quién recuerda lo que hicimos por esto? Lo hicimos en un menú anterior, nuestro menú desplegable. Recuerda que solo se estaba empujando unos a otros. Vamos, antes que nada apilar estos botones y en realidad no usemos el mi botón porque bueno, quería cambiar el estilo de estos y quiero dejarlos con ese aspecto en el escritorio. No quiero estar cambiando el botón de mi. Entonces llamemos a este y navbutton. Comando D, control D en la PC, pégalos todos. Echémosles un vistazo ahora. Por lo que sólo se ven como texto viejo plano. Entonces vamos a apilar uno encima del otro porque en este momento están en bloque de línea, por lo que necesitamos que se apilen uno encima del otro. Estos tipos en vista de tableta, antes del cierre final del soporte rizado, voy a decir móvil navbutton. Me gustaría que exhibieran bloque. Muchas gracias. Esperemos, hey chico otro top el uno del otro. El otro extraño es que hacer es ahí cuando están apilando están presionando el botón del móvil, queremos dejar eso como estaba. Entonces lo que queremos hacer es que la posición sea absoluta. Entonces este tipo de aquí, en lugar de gustarle ser pariente de todos sus amigos. Cuando aparece dice: “Oigan chicos. Somos parientes, soy familiar contigo así que te voy a empujar por ahí así que encajo”. Entonces lo que decimos aquí es que dices mafia nav en realidad, quiero ser un posicionamiento, no un pariente. Absoluto significa que ignoro a todos los demás. Todos mis amigos, todos mis familiares, y sólo reconocí a mi padre, que en este caso es quién es padre? Envoltura de la mafia. Ignora todo el resto de las cosas y en nuestro caso sólo hay otra cosa, es esta imagen, por lo que lo ignora y simplemente vuelve a la cuadrada uno, que es este envoltorio. Está bien. Entonces mira, ¿puedes ver que lo ignora, pero reconoce el envoltorio, el padre a su alrededor, pero ignora a todos sus amigos dentro. Genial, está funcionando. Tenemos que empujarlo una y otra vez. Una de las otras cosas es que nav está atascado en el costado de ahí, lo cual es molesto. Encontremos a ese tipo. Por lo que el envoltorio de la mafia incluye el ícono, lo que debemos empujarlos por todas partes. Es un envoltorio de mafia y diremos, vamos a tener un poco de relleno. Un poco de relleno en el, lo he mecanografiado en pa-, que no es nada cercano pero me puso muy cerca del relleno correcto. Vamos al relleno de la derecha, voy a decir 30 pixeles. Sí. Echa un vistazo. Ya lo ha empujado lo suficiente. En realidad empecemos a previsualizarlo, haga clic con el botón derecho e inspeccionemos y veámoslo. En mi caso, voy al iPhone X o tal vez si no puede ver eso, haz clic en este pequeño ícono abajo aquí abajo, y vamos a usar este. ¿Qué más queremos hacer? Entonces es al otro lado, lo cual es genial y tal vez más de un poco lejos. Pero vamos, arranquen los botones. Entonces mi botón de navegación, hagámosle algunas cosas. Vamos a darle un color de fondo que servirá. Escoge un color. Eliges coral funciona con lo que estoy haciendo. Echemos un vistazo. Vamos a ponerle un poco de relleno a su alrededor y como esto es móvil, quieres asegurarte de que sean realmente fáciles de hacer click. Acolchado, voy a arriba y abajo, un poco más alto que lo que hicimos por el resto de ellos. Por lo que 15 pixels arriba e abajo y harán tal vez 30 izquierda y derecha. Cuando digo tal vez practico esto, hice esta corrida antes de la clase y estaba sí, eso es lo suficientemente grande. Ahora, está funcionando, pero quiero moverlo a través. Estamos editando todo nuestro relleno primero, por lo que sabemos hasta dónde moverlo a través. Vamos a sumar algún margen negativo. Hacer margen a la izquierda y vamos a hacer margen a la derecha no funciona sólo porque hemos puesto la posición a absoluta. Vamos a usar izquierda negativa en lugar de alguna positiva, derecha. En este caso, voy a decir nueve negativos 60 píxeles trayéndolo a través de su cierre. A lo mejor ir un poco más allá. Asumiendo. Se ve bien, alterna bien y el texto, hagámoslo centrar. Entonces alinear el texto, hagámoslo centrar. Muy bien, centro y cerca. Agradable. Yo quiero empujarlo tal vez hacia abajo de este tipo un poco. Entonces toda la envoltura, podría agregar algo de relleno a la parte superior. Por lo que todo el envoltorio y mi caso se llama nav. Mob nav va a tener, añadir algo de relleno. Top de 10 pixeles. Demasiado ahora se ve bien. Está funcionando bien. iPad funciona. Ahora la vista previa del iPad al 50 por ciento porque eso se ve un poco raro. Los botones son quizá un poco grandes en el iPad y diciendo con esto podemos cambiar el tamaño de esto. Obviamente aquí abajo. Para poner algo más pequeño y los botones tal vez no necesiten tanto relleno como pensé que lo hacían. Algo que me molesta es que es una línea de rayas negras. Tienes un par de opciones, puedes abrirlas. Utilizamos antes, recuerda que teníamos nuestros archivos de ejercicios, teníamos proyecto tres. Teníamos este svg bugger significa que tú y es una línea de rayas negras. Podría simplemente abrir esto en, digamos Illustrator sería el más fácil, o XD y simplemente cambiarlo a blanco y guardarlo. Esa es una manera. Te mostraré algo raro, será lo último antes en este video. Es SVG son algo extraño, pero no un archivo de imagen como lo conocemos. El código en realidad está habilitado para web y en realidad se puede ver cómo se construye un SVG. Echemos un vistazo, tiene un archivo y se va a abrir. Encontremos en nuestra carpeta de imágenes, es una carpeta de proyecto de tres imágenes. Estoy en mi carpeta local, no en el expediente de ejercicios. Aquí está el SVG con el que estoy trabajando. Cuando hago clic en abrir, se abre como un script real. Ahí está aquí. Cerremos a estos tipos sólo para que puedan ver y vendré a confundir. En realidad te muestra todos los estilos que acaban de envolver en esto. Es un poco diferente a un JPEG porque puedes empezar a ver qué, cómo está construido y está construido encima de la sintaxis web para que realmente puedas entenderlo. El que queremos, así que este es el POS, si eres del pathworld victor, estas son en realidad las coordenadas XY de todo. Está bien. Tiene algunos, esto puede ver estos son todos vienen de estos tipos de aquí. Se le agregaron clases, lo cual es raro Dentro de un archivo. Esto es font-awesome. Recuerda esas clases, fuentes barras fa, y lo que queremos es que buscamos el color, no lo podemos ver ahí, lleno de color actual. Vamos a cambiar esto a blanco. Hit save. Echa un vistazo, ahora es blanco. Podrías usar hashes regulares. Tan blanco es f, f, f, f, f, f o escoge cualquier color aleatorio que quieras coral, tal vez un empate con el nav, y aquí tienes, bonito. Tenemos nuestro nav de la mafia trabajando donde apagamos el escritorio y luego sintonizamos el menú móvil y esa es la parte fácil. Simplemente encendiendo y apagando y haciendo que el JavaScript funcione entonces hay mucha molestia al tratar de averiguar qué estilos los pueden apilar, cómo los empujamos a través y eso es lo real bajo las partes nerviosas de configurar un mobile nav y es por eso que las pruebas son realmente importantes. Porque lo que haré es hacerlo justo al principio y luego genial, ir a trabajar con cosas y luego empezar a ajustar cosas como las etiquetas de la cabeza para hacer cosas diferentes por diferentes razones. Entonces más tarde un día después, estoy revisando el navegador móvil no está funcionando que volver atrás y averiguar qué pasó y problema-resolver de esa manera. Si te encuentras en esto y eres como, hombre, soy un terrible diseñador web. No, solo eres un diseñador web regular. Hay mucho perseguir tu cola, sobre todo cuando eres nuevo y no puedes predecir problemas. Encuentro que mi mayor problema es cuando intento reutilizar cosas, en lugar de crear una clase separada o una clase compuesta, solo intentaré juntar cosas para tratar de ser inteligente y arruinar las cosas. Está bien, eso será todo. Te veré en el siguiente video. 98. Resumen de lo que es Bootstrap 4 en diseño de un sitio web: Oigan, amigos. Es hora del Proyecto 4. Esto es nixed chunk se dedica a entender bootstrap. Este video va a explicar qué es bootstrap esperemos. Bootstrap es, piénsalo, la gran palabra es marco y te contaré una historia. Imagínese, porque acabamos de pasar mucho tiempo construyendo ese último sitio web, nuestro sitio de portafolio. Pero había un montón de cosas que hiciste repetitivamente. Empezamos los botones, la navegación, recuerda eso. Había un montón de como, “bloque de visualización, apagar consultas de medios, conseguir consultas de medios en marcha, cargar JavaScript”. Ahora, si construiste otro sitio, probablemente te vuelvas a topar con todas esas cosas. Si construiste 100 sitios o 1,000 sitios. Vas a correr a casi todos ellos. Todos van a tener botones. Van a tener imágenes. Todos van a necesitar hacer algo muy similar. En lugar de empezar cada vez desde like 'll CSS re-set. Donde todo está en blanco y agregando todo a ella. Puedes ponerte bien en ello, pero te aburres en ello. O al menos te pugnan con la repetitividad de [inaudible]. Ya solo necesita hacerse por cada sitio. Ahí es donde entra Bootstrap. La gente inteligente en Twitter decidió, “estamos haciendo todos estos sitios y lo que haremos es agregar algo de consistencia a través de todos ellos, pero también hacer que sea realmente fácil de usar”. Yo como que lo divido en tres partes: ahí está la estructura, ahí están los componentes, y luego están los estilos. Básicamente, las estructuras dicen, “siempre vamos a tener consultas de medios. Siempre vamos a hacer que se descompongan de diferentes maneras en móvil, tablet, y escritorio y lo haremos en hoja CSS que ya existe. Acabas de empezar con esa. Ahí hay dispositivos móviles, hay tabletas todas cuidadas y están todas en esto. Eso al igual que la estructura del núcleo” y luego se fueron, “vamos a tener algunos componentes que sean reutilizables. Construimos el menú desplegable jQuery desde el móvil”. Se fueron, “vamos a hacer esto. Todo lo que tienes que hacer como diseñador es poner fragmento de HTML en tu página web y que Nav funcionará. Será Dropdown. Será bueno en todos los navegadores. No tendrás que hacer todas las consultas de medios. Donde lo bloqueamos y exhibimos nada y todo ese tipo de cosas divertidas”. Simplemente dicen, “vamos a hacer eso” y eso es un componente. También como un deslizador de imagen. Si quieres agregar un deslizador Imagen, definitivamente puedes hacerlo en jQuery. No es loco duro, pero había mucho violín. De lo que teníamos que hacer. De lo que han hecho para decir, “aquí tienes, listo para ir, Agrega la palabra carrusel a tu HTML y haremos todo el CSS y todos los jQuery listos para ir”. Por eso es un marco. Es como algo para que te pongas en marcha. Puedes cambiar todo el estilo pero harán el duro lifting pesado en términos de HTML, CSS y JavaScript. Componentes de rejilla como deslizadores de Navegación e Imagen. El siguiente es el estilo. hemos hecho las cargas donde nos gustan, “quiero que los enlaces no se vean tan terribles, azules y subrayados”. Ya te han hecho esos estilos. Puedes sobrescribirlo fácilmente pero han hecho mucho el estilo para que las cosas no parezcan apestosas para empezar. Parecen como si fueran bastante buenos. Bootstrap tiene un aspecto muy específico al mismo. Puedo ir a la página web y ir, “Bootstrap”. Porque el diseñador o desarrollador ha sido muy perezoso y acaba de utilizar todos los estilos desde el final. Lo bueno de ello es que puedes ser perezoso y puedes tener muy poco conocimiento de diseño y tener un sitio de buen aspecto. Pero sí les tienen cierta mirada, pero se pueden sobrescribir esos. Bootstrap nos ayuda con la cuadrícula, bueno la estructura del sitio web, luego nos ayudan con los componentes y luego hacen todo estilo. Todo se puede sobrescribir, pero está ahí para ir y es un buen lugar para detenerse a un sitio web. Tu siguiente pregunta podría ser, “¿por qué no hicimos esto al principio y nos saltamos un poco de cosas?” Pareja de razones. Una es que para usar realmente Bootstrap, necesitas una base en HTML y CSS y entender eso antes de poder realmente hacer algún cambio en Bootstrap. No puedes simplemente saltar a Bootstrap realmente, y empezar a intentar meterte con él. Es para que las personas que ya tienen esas habilidades vayan rápido. Necesitas tener esas habilidades para poder usar Bootstrap. La otra pregunta podría ser, “¿tenemos que usar Bootstrap?” La respuesta es, no. Bootstrap es solo una opción para la gente que, podrías llegar a este punto ir, “En realidad, me gustan todas esas cosas y voy a practicar esas cosas por mucho más tiempo antes de empezar usar Bootstrap y puedo volver a esta parte de denso curso”. Yo lo uso a veces y a veces no. Las veces que no lo usaría es que estoy mirando uno de mis diseños y estoy realmente tipo de, me gusta personalizar eso bastante. Yo quiero cambiarlo todo. Yo lo veo y estoy como, “en realidad, sólo voy a terminar cambiando cada cosa en la que lo pongo vía Bootstrap. No me va a salvar en cualquier momento. Simplemente voy a ignorar Bootstrap en esta construcción web en particular construida”. Pero entonces podría mirarlo. Voy en realidad, “Necesito hacer esto rápidamente. Tiene que verse bastante bien. Voy a confiar en Bootstrap sólo para construir un front end realmente rápido”. Podría ser un prototipo o podría ser algo donde lo estoy haciendo por amor o cutetas. Donde no estoy consiguiendo ningún tiempo ni dinero para gastar en ello. Solo necesito hacerlo rápido y se ve bastante bien. Ahí es donde podría entrar Bootstrap. ¿ Tienes que usarlo? No. ¿Por qué no empezamos ya? Es porque necesitamos ese conocimiento básico sobre HTML y CSS antes de empezar a usar Bootstrap. Ahora, otra buena razón para usar Bootstrap es, o al menos aprender Bootstrap es que van a haber muchas otras cosas que lo usen. Estamos construyendo nuestro propio sitio de clientes usando Bootstrap. Pero digamos que empiezas a usar Wordpress más adelante o Shopify o Drupal o Joomla o tratando de pensar en los CMS. Harán todo el levantamiento pesado en términos de creación de sitios web. Te quitarán eso. Pero lo que harán es que digan: “Estoy usando un tema de Bootstrap”. El genial de eso es que porque entenderías a Bootstrap puedes pasar por y ajustar Wordpress y moverlo y cambiarlo y hacerlo tuyo. Hay muchas otras cosas como CMS que usan Bootstrap. Estamos usando en este caso o el resto de este curso para dar estilo a nuestros propios sitios. Pero está acostumbrado a dar estilo a muchos otros sitios de CMS también. Otra cosa a mencionar es que Bootstrap es sólo una opción. Hay alternativas de Bootstrap, algo así como fundación sería una buena alternativa para ello. Bootstrap sería, en mi opinión, la opción más común. En la cuadra hay otros juegos. Ese no es el dicho, ¿verdad? Hay otras cosas, competidores a Bootstrap. No es el único. ¿ Qué más vamos a hacer? Lo que haremos es, recuerda Bootstrap es tres macetas grandes. Es el sistema de rejilla, que es la estructura. Ahí hay componentes, que son cosas como los deslizadores Nav y la Imagen y pie de página; hace esos por ti. Después está la parte de estilo de la misma. Esos tres. De lo que vamos a hacer en los próximos videos, vamos a instalar Bootstrap para empezar. Entonces no haré un breve resumen de esos tres aspectos antes de sumergirnos en la construcción de una página web completa. Porque siento que trato de explicarlo todo en este primer video. Pero sé que es un poco duro y abstracto algún tiempo. Cubramos esos tres, habrá tres videos de resumen de esos tres componentes. Vamos a saltar, empecemos a hacerlos ahora, y nos vemos en el siguiente video. 99. Cómo instalar Bootstrap 4 en un sitio web usando código Visual Studio: Hola ahí. En este video vamos a instalar Bootstrap 4 en nuestra página web usando VS Code. Es súper simple saltemos ahora y lo arreglemos. Primer paso, vamos a crear nuestra propia carpeta local nueva. Ya terminamos con el Proyecto 3. Muchas gracias. Ahora es hora de Bootstrap. Vamos a conseguir un archivo, vamos a abrir y vamos a en nuestro escritorio crear una nueva carpeta local. En este caso, lo vamos a llamar Proyecto 4 de manera no sorprendente. Vamos a hacer clic en Abrir, y vamos a cerrar la pestaña de bienvenida que se abre y vamos a empatar esto. Deshaznos de esa línea y vamos a crear archivo alphas. Vamos a crear índice. Nos hemos ido Archivo Nuevo, y eso funciona bien. Te voy a mostrar solo haciendo clic derecho en esta área aquí abajo, puedes ir a nuevo archivo y esta es de una manera diferente, me gustaría que fuera más lindo. Creé mi índice, está abierto aquí voy a girarlo abierto, no me gusta que abra tampoco esta cosa abierta, justo lo que estamos aprendiendo al menos. Archivo HTML necesita todas las cosas básicas. Necesitamos signo de exclamación, pulsa Return y eso nos dará la mayor parte del tipo doc y todos los bits que necesitamos. Ahora les voy a presentar la página web de Bootstrap. Se llama getbootstrap.com. Esta es la página oficial y la documentación y cuál fue la bondad que nos ayudará con Bootstrap. Ahora estamos usando Bootstrap 4, el momento si estás viendo esto a distancia camino futuro y le toca a Bootstrap 5, va a quedar completamente diferente, pero lo esencial probablemente será lo mismo. Lo que queremos es que queremos empezar. Puedes descargarlo localmente en tu máquina. Lo vamos a hacer de una manera diferente. Vamos a empezar, y básicamente se va a decir, se necesitan dos grupos de cosas. Necesitas, el CSS y el JavaScript. Si solo planeas usar say, el framework como la grilla, tal vez hablamos con la cuadrícula, la estructura, todo lo que necesitas es el CSS. Si no planeas hacer alguno de los menús desplegables de carbón o deslizadores de imagen, no necesitas este material hacia abajo o hacia abajo. Pero, vamos a instalarlo por completo por si acaso vamos a usar esto más adelante. Si no planeas usarlo, no lo pongas porque solo se va a sumar al tiempo de carga. Vamos a copiar el CSS y te dice dónde ponerlo ponerlo. Ponlo en un eslabón en tu cabeza, pero te han dado el código listo para salir. Yo lo he copiado. Aquí dice, “ponlo en la cabeza”, y ahí está. Esto lo hemos hecho un par de veces con diferentes CSS. Lo hemos hecho con Google Fonts. En última instancia nos ocupamos. Es todo lo que puedo recordar. Otra cosa a recordar es que si creas tu propia hoja de estilo, que haremos en un segundo, tiene que estar por encima de eso. Esto es en la parte superior, Bootstrap, siempre en la parte superior y tu estilo justo debajo. No tenemos eso todavía. Siguiente trozo es este JavaScript aquí. Ahí hay tres partes. Vamos a copiar los tres y vamos a pegarlo. Si lees a través de la documentación, dice, “hay un buen ejemplo de plantilla de inicio como. Simplemente puedes copiar todo esto y pegarlo en VS Code también. Pero dice asegúrate de que vaya al fondo. Al igual que JavaScript, como lo comentamos anteriormente. Iba a pegarlo abajo justo antes del cierre del cuerpo. Voy a poner el mío aquí. Ahí vamos. Aquí, voy a poner algunos comentarios. Recuerda Comando barra inclinada completa o Control Barra inclinada completa en un PC, y solo agrega algunas notas. Tan solo para volver a comprobar que el CSS realmente está funcionando, vamos a previsualizar la página y luego empezar a trabajar ahí abajo, así que se va a replicar y decir abrir el servidor en vivo. Hoy se va a abrir en la pantalla derecha. Ahí no hay nada. No está funcionando, veamos la forma de comprobar si Está funcionando es solo tirar un h1, y escribir de Hola mundo otra vez, y simplemente comprobar. Ya sabes que el CSS está funcionando porque no se parece en nada a nuestro viejo h1 regular. Había viejo H1 parece que voy a comentar eso fuera esa cosa. Dentro, se ve así, bonito. Ahora lo único que VS Code no lo pone, y ahora recuerda que usamos signo de exclamación para poner la mayor parte de la información para la página. Hay una cosa que sugiere aquí que no forma parte de ese Código VS inicial. A lo mejor hay diferente. Miramos a los diferentes editores de código y cómo implementaron. Nos limitaremos a la cabeza etiqueta. Este es uno de aquí. El encogedor para caber, no, falta. Tenemos todo eso pero necesitamos una coma y un encogedor para encajar no. ¿Qué hace? Ponlo en primero, así que va aquí antes del cierre de las comillas y creo que desactivó algo es un extraño sentado en Safari que falta con Bootstrap para que puedas apagarlo. Simplemente significa que vas a tener consistencia a través de diferentes navegadores. Enfriar, y eso es todo instalado. Ahora lo loco es que si miramos en nuestro escritorio, es que en el Proyecto 4, sólo tenemos la página de índice. Recuerda estos se están cargando en cuanto a mi red de entrega de contenidos. Bootstrap están controlando esto. Lo tienen en estos servidores, lo mismo con todos estos. Eso tan solo de cargarse a medida que se carga la página, puedes descargarlos desde getbootstrap. El único problema es que el navegador tendrá que cargarlos desde tu sitio cuando probablemente la persona que visita tu sitio probablemente ya haya descargado la versión CDN de otro sitio web, por lo que uno tiene que volver a, y hará que la página se cargue agradable y rápida. ¿ Cuáles son estos? jquery, hemos hablado para tener eso. Esto lo está cargando desde jquery. Ya hemos hecho esto antes. Se trata de una versión minimizada delgada ligeramente diferente. Lo mismo, este de aquí, popper, es un poco realmente útil de JavaScript que se acostumbra para el posicionamiento, cosas como Tool-tips y modales pop-up y todas esas notificaciones que aparecen dentro de los sitios web. Este de aquí es JavaScript específico de Bootstraps. Se está acostumbrando un poco y ustedes mis amigos han instalado Bootstrap. Ahora vamos a seguir con el curso, un par de notas es que se aseguran de que el CSS para Bootstrap esté por encima del tuyo. Pondrías ahora enlace, CSS, así que pones el tuyo debajo. Si dejas de hacer, aún no tenemos eso, así que me voy a deshacer de él. Vas a hacer tu propio JavaScript. Es necesario asegurarse de que la etiqueta de script termine debajo de estos. Estos van primero después los tuyos después. De lo contrario, el tuyo siempre puede empezar a entrar en conflicto con estos y ahora un gran lío. Guardémoslo y pasemos al siguiente video. 100. Resumen rápido de cómo funciona la disposición de cuadrícula de Bootstrap en código VS: Hola ahí. Bienvenido a la visión general para el sistema de diseño Bootstrap, bien, también conocido como el sistema de cuadrícula o tal vez la estructura. Son las cajas que conforman nuestra página web. Lo bueno es que vamos a escribir sólo un poquito de código, un contenedor con algunas etiquetas div en él, básicamente sin CSS en absoluto, solo un color de fondo. Mira lo que somos capaces de hacer. Tenemos cajas que ajustan tamaños que están sinterizadas. No hemos hecho nada de esto. Las consultas de medios ya están todas ahí dentro. Voy a tratar de sorprenderte con Bootstrap y es increíble sistema de diseño. Empecemos. Muy bien, primero arriba vamos a cerrar nuestra página de índice. Vamos a salvarlo para como nuestra página principal que vamos a construir hacia el final de esta sección. Vamos a crear un par de archivos desechables. Vamos a hacer clic derecho en “Nuevo archivo” y vamos a decir que éste es una visión general. Esta va a ser, ahora grid es una palabra clara Greeley de lo que estamos haciendo. Estructura es otra buena palabra, bootstrap se refiere a ella como el layout. Vamos a llamarlo así. Layout.html. Añadamos nuestras cosas. exclamación. Asegúrate de que aquí añadimos nuestro encogimiento de coma a caber. No, hay un par de otras partes que queremos. ¿Dónde lo queremos? Nosotros queremos esto. El CSS lo pop justo debajo del título. No necesitamos el JavaScript por el momento porque no lo estamos usando. Puedes usar todas esas increíbles consultas de medios en sistema de cuadrícula sin tocar ninguna de las JavaScript. Es sólo si quieres que la miniatura de fantasía pop up cosas. Primero que nada aquí abajo en nuestro cuerpo, pongamos en un recipiente. Ahora, pongamos en.container. Es una clase agradable. Vamos a agregarle un poco de estilo. Ahora, porque estamos haciendo un documento bastante desechable, no me voy a molestar en poner el estilo en su propia hoja. Yo sólo lo voy a poner aquí arriba en la cabeza. Es lo mismo, pero nota que digo por hoja. Voy a decir, vamos a darle al contenedor el talón completo. ¿ Qué vamos a hacer? Tan solo un color de fondo. El color de fondo va a ser aleatorio. El de hoy es cardo, eso no es lo suficientemente bueno para ver en pantalla. Necesito algo más oscuro, por favor. Spinning aleatorio, desactivado de nuevo, vuelve a empezar a escribir en color y debe rellenarlo previamente. Tienes magenta, precioso color rosa. Echemos un pequeño vistazo en el navegador, ahí está. Eso no es todo, porque es mi página de índice. Apagémoslo, vuelva a encenderlo. No pasa nada necesito poner algo en el contenedor, así que por aquí vamos a poner en nuestro h1. H1, pon algo ahí dentro. ¿ Estás asombrado? ¿De qué te asombra? Te gusta, dice el contenedor. Pero también es un ancho. Tiene un ancho en él. No le dimos un ancho. También ha sinterizado. Su sinterizado. Se está peinando el h1. ya lo habíamos resuelto. Ese es un gran beneficio real de usar Bootstrap you. Aunque solo lo uses para este sistema de diseño de cuadrícula, eso es simplemente brillante. El otro cool es, lo que pasa cuando lo encojo. Vayamos a hacer clic con el botón derecho inspeccionar. Vamos a cambiarlo para asegurarnos de que esto esté encendido. El dispositivo era un dispositivo en espiral, barra de herramientas de alternar. Enciende eso y asegúrate de que se sienta sensible en la parte superior, porque queremos ir así. Reloj. Yo lo he regalado, pero mira, ya se ajusta para muchas consultas de medios. Los puedes ver por la parte superior ahí, ya están listos para ir e incluso móviles. Se puede ver que hay algo de relleno ya en un costado del contenedor. Eso es Bootstrap diciendo a nadie nunca, una vez que se lleva atascado contra el costado y eres como que eso es cierto.Gracias Bootstrap. La otra cosa que dice es, pongamos ese contenedor justo a los bordes en los dispositivos móviles. Pero aquí afuera te dará un poco de rumor por fuera. Puedes hacer algún diseño adecuado en lugar de intentar estirarlo todo. Solo hay algunas cosas bonitas que hace Bootstrap. Ahora para usar Bootstrap, realmente necesitas asegurarte de que estás usando el lenguaje correcto. Esto lo que vamos a hacer en esta sección es acostumbrarte a usar el lenguaje correcto. He intentado prepararte para el resto del curso. Por eso lo llamábamos contenedor antes o envoltorio, como algunas personas lo llaman. Porque aquí dentro, vamos a nuestro layout. Vamos a usar la documentación cada vez más. Pero bajo diseño dice, se puede ver un contenedor es la palabra que usan para esta cosa. Contenedores de fluidos que veremos más adelante. Vamos a ir y venir por las documentaciones, solo para acostumbrarte a ello. Lo siguiente que quiero mostrarte es lo que puedes hacer dentro de aquí. Vamos a deshacernos de este h1. Dentro del contenedor pongamos en una.row. Las filas son lo que usan como los contenedores de envoltura que recorren cualquier cosa que contenga un contenedor tiene un uso realmente específico que se sainted cada vez. En tanto que esto es como un contenedor pero se acostumbra dentro del contenedor principal, muchos están deletreando eso mal. Simplemente no lo entendamos. Necesitas tener una fila por sí mismo. Siempre tiene cosas dentro de ella. Esas cosas dentro de ella normalmente siempre se llaman cols para columnas, filas y columnas. ¿Cuántos queremos? Tendremos tres. Recuerda que es opción de desplazamiento flecha abajo en mi Mac, y es alt-shift flecha abajo en una PC. Eso son tres goles. Escribamos algunas cosas dentro de ella. Este va a ser uno, éste va a ser dos, y tú lo adivinaste tres. Ahora bien, ¿qué es la fantasía? Tienes que asegurarte de que filas el otro Rapa y estas columnas sean las cosas que van dentro de ella. Vamos a guardarlo. Echemos un vistazo. En nuestro documento aquí, puedes ver, me he deshecho de la h1. Ahí hay un contenedor que aún tiene mi pestaña de imágenes. Pero ya ves lo que hizo, separó estos los puso en un pequeño grupo agradable. Qué está haciendo aquí, recuerda antes de cada padre Rapa, teníamos que añadir display flex. Bootstrap por sí mismo sin preguntar, asume si usas fila y dentro de una fila, todos los niños se van a flexionar. Eso es algo útil. Es sólo otra cosa que se corta. Notarás que nuestra hoja de estilo por el momento solo tiene contenedor y ni siquiera necesita este fondo de contenedor. Se puede ver lo lejos que hemos llegado sin haber tocado CSS como fondo aquí es solo para que lo veas en el medio. Ahora eso estuvo genial. Separándolos en tres grupos parejos, tienen otras cosas que lo hacen realmente cool. Digamos que queremos que la primera caja sea ocho de ancho. Tenemos la misma cuadrícula de 12 columnas. Puedes romper tu sitio web en 12 pequeños grupos o 12 columnas. Puedo decir -8 bajo este col, así col -8. Echemos un vistazo. Ya lo ves actualizado, es decir ocho, y estos tipos, porque no tienen un número, asumen que encajan con el resto del mismo. Entonces 8-19, así que estas son dos filas y 11,12 aquí. No teníamos que hacer nada. Recuerda antes teníamos los porcentajes y cosas así. Fue difícil ir. Esto es asombroso. ¿ Se puede conseguir algo mejor? Sí, [inaudible] no use sólo el llano viejo ocho. Podemos usar un poco más de consulta de medios específicos. ¿ A qué me refiero con eso? Quiero decir que en lets mirar en nuestra vista previa aquí. Antes miramos la locura mediática. Estos están todos aquí por defecto. Lo que podemos hacer es decir fácilmente, desde aquí hacia afuera se llama Excel. A esto de aquí se le llama grande. Este poco espacio aquí se llama medio. Este se llama Pequeño. En cualquier parte por debajo creo que fue 5, 7, 6 se considera extra pequeño. Podemos usar ese lenguaje para identificarlos. Porque en el momento en que hacen lo mismo con todos ellos. Nada cambia realmente. Digamos que quiero ponerme mi múltiple quiz solo lo haré. Este primero aquí voy a hacer -lg. Diremos, hagámoslo 10. Esa primera columna va a tratar de ocupar 10 columnas. Es agradable y simple, pero hay que usar esta sintaxis. Lg es para grandes y estos otros dos becarios comandan y mantén presionada la tecla de opción y úsalo flecha abajo para hacer múltiples cursores. En un PC, es control y flecha alt y abajo. En este caso voy a decir grande. Yo sólo voy a llenar estos otros dos. No, tiene que llenar uno. Así como el igual 12. Vamos a comprobarlo en el navegador, y se puede ver aquí. Estoy en pequeño por el momento y ahí está esta aquí, no hay medio y grande. Va 11, no 10 luego 11, 12. Puedo apuntar a más de uno. En general está haciendo eso, pero me gustaría dejar decir, poniendo múltiples conjeturas. En mi Mac, estoy manteniendo presionada la tecla de opción y haciendo clic en PC, es alt. Voy a decir en este, así que sólo hay un espacio. Tienes que usar minúsculas. Vamos a decir que la convocatoria, digamos la pequeña, va a ser seis, entonces estos dos van a ser tres y tres todos iguales 12. Echa un vistazo. Aquí arriba sigue haciendo mis 10, 11. Ahora aquí abajo, lo puedes ver ahí. Va seis y luego tres y tres. Se puede ver por defecto, solo Bootstrap realmente quiere que se apile uno encima del otro cuando está abajo en extra pequeño. Te darás cuenta de que algo que intentamos hacer mucho cuando estamos construyendo nuestra página web, todo estaba apilado horizontalmente hasta que llegó hasta aquí y los apilamos uno encima del otro. Eso se puede sobrescribir. Lo raro al respecto, y supongo que algo bueno a mencionar es que aquí no hay XS, [inaudible] XS. XS par. Se supone que si no escribes nada te refieres así que si hice col y esto va a ser cuatro, asume XS. Es lo que se llama puño móvil. Construimos nuestro último sitio web diciendo que asumimos que todo es de escritorio a menos que se diga lo contrario, Bootstrap se construye al revés. Asume que todo es móvil. Si solo pongo llamada sin ninguna indicación, asume el teléfono móvil. Aquí vamos allá, 3, 4, 4, 4. Enfriar. ¿Cómo fue eso? Esa fue una breve introducción. Hay mucho más en ello. Pero espero que puedas ver el poder de ella como, sobre todo porque nuestro estilo es así. El genial de esto es que todos tienen el mismo estilo. Si tomas el tema de otra persona o el CMS de otra persona o el sitio web de otra persona y está construido en Bootstrap, serías como si, porque sabes lo que hacen estas cosas y están escritas de la misma manera. Además muchas de las cosas de fiddly se hacen como este contenedor. Ya están ahí dentro las consultas de los medios. Hacen cosas bonitas por defecto. Puedes anularlos a todos, pero en su mayor parte hacen exactamente lo que tú quieres que haga. Muy bien, así que ese es el resumen rápido para la cuadrícula. Vamos a hacer más, pero siento que deberíamos pasar por las tres partes antes de meternos en las tuercas y pernos de construir nuestro sitio. Te veré en el siguiente video. 101. Resumen rápido de cómo funcionan los componentesde Bootstrap en código VS: Hola ahí. En este video, vamos a ver una visión general de los componentes de Bootstrap. Las partes más emocionantes de la diapositiva del reloj Bootstrap es mover, voy a dar en esto. Tenemos unos menús desplegables jumbotron realmente fáciles. El menú cambia a móvil cuando es más pequeño, tenemos estas tarjetas en marcha, y literalmente, lo hacemos en este video. Mira la longitud de la misma, está alrededor, ¿qué? 12 minutos, estoy adivinando. Hemos hecho todo esto muy rápido. Los componentes son increíbles. Saltemos y pongámonos a trabajar. Estamos terminados con nuestra visión general de maquetación. Vamos a cerrarlo. Volvamos a la página del índice. Lo que vamos a hacer es, vamos a tirar todo, vamos a deshacernos de h1, y vamos a tirar todos los componentes que vamos a utilizar para construir nuestro Proyecto 4. Lo primero que quiero hacer sin embargo, es agregar nuestro contenedor. Entonces vamos a punto contenedor. El miembro tiene que ser deletreado exactamente bien, para que coincida con el uso de Bootstraps de un contenedor, y dentro de esto, vamos a tirar nuestros componentes. Ahora, estamos hablando de componentes brevemente. Son cosas como deslizadores de imagen y navegaciones. Echemos un vistazo a dónde sacarlos. En Bootstrap, vamos a ir a la documentación, vamos a gastar mucho de esta sección del curso. Miramos el diseño, miramos los componentes a continuación. Entonces haga clic en eso. Aquí hay mucho, cosas emocionantes, geniales. No vamos a pasar por cada uno de ellos. Ahora mismo solo estamos tirando las cosas que vamos a usar. Vamos a empezar con un Navbar. No Nevs, Navbar. Entonces aquí, básicamente puedes desplazarte hacia abajo y solo buscar el que quieras. Ese tiene, creo que es la versión del fregadero de la cocina, tiene cada cosa. Muchas opciones diferentes, solo con garrapatas, solo con navegación. Agarremos la versión del fregadero de la cocina, justo en la parte superior aquí. Entonces es el primero. Justo debajo de aquí, vamos a agarrar esto, haga clic en “Copiar”. Hay un poco de código que va, en el HTML. Pero mira esto, vamos al código VS, dentro de un contenedor. Vamos a pegarlo, vamos a guardarlo, vamos a previsualizarlo en un navegador. Lo apagaré, lo volveré a encender. Echemos un vistazo. Mira eso, tenemos una navegación y un desplegable. A lo mejor estamos aquí para hacer una navegación. Ahí hay una barra de búsqueda que no funciona, botón con hovers, todas estas cosas las cuales están listas para salir. Ahora, en tu HTML, no lo vamos a hacer exactamente todo ahora, pero puedes pasar y decir: “En lugar de la palabra hogar, podemos llamar a éste el botón Dan”. Ya puedes ver que tienes un botón Dan. Vamos a tener algunas faltantes con el diseño, o mover y agregar cosas más adelante, pero, supongo que quiero excitarte con lo que Bootstrap puede hacer muy rápidamente. Ahora, lo siguiente que queremos agregar, es queremos agregar algo que, ¿funciona el desplegable en este? Sí lo hace. Porque no hemos agregado en nuestra página de índice, lo hicimos, por eso está funcionando. Recordamos que agregamos aquí este código JS, o esto dice, “código JavaScript”. En nuestro pequeño overview-layout desechable, solo agregamos el CSS y no pusimos en el JavaScript. Esta página de índice, si acabas de seguir junto con un archivo desechable, tienes que asegurarte de que el CSS esté en la piel, y todo el JavaScript está en la parte inferior aquí, ahí es donde están funcionando todos estos componentes. Entonces ahí está mi contenedor, ese va a ser mi Nav. Voy a añadir un poco de comentario, esta es la Navegación. Enfriar. Lo siguiente que quiero agregar, va a ser mi carrusel. Carrusel, ¿está cerca? De todos modos, vamos a buscar el carrusel. Entonces si queremos un carrusel, buscaremos componentes, y encontramos carrusel. De acuerdo,? Lo mismo. Echa un vistazo a algunos de los ejemplos. Ese es sólo un tobogán llano viejo, éste tiene algunas flechas, podemos hacer click a través de él. Decide cuál quieres. Siempre tengo botonitos aquí. Este tiene garrapatas en todos. Entonces decide cuál quieres. Voy a ir por este primero, porque coincide con mi diseño. Haz clic en “Copiar” del código debajo, y luego simplemente pegarlo en este código. Te gustaría una copia que facilidad otra vez. Sí, son amigos. Está buscando imágenes, un montón de imágenes que no están ahí. Por lo que vamos a agarrar algunas imágenes de nuestros archivos de ejercicios y tirarlas. Entonces vamos a ir a los archivos de ejercicios, vamos a ver el Proyecto 4 ahora, nuestro pequeño proyecto de yogur. Las imágenes, en lugar de copiarlas todo uno por uno, están funcionando [inaudibles]? Estás como, “¿Por qué no los copiaste por todas partes para soltero?” Eso es lo que voy a hacer ahora. Voy a agarrar la carpeta de imágenes y copiar eso. Ve a mi escritorio, en mi Proyecto 4, lo voy a pegar aquí, todo el asunto. Todas las imágenes para el proyecto. Ahora, lo que podemos decir, en lugar de cargar esta imagen llamada punto, punto, punto, vamos a decir imágenes y Producto 1. No puedo recordar cuál necesitamos estar usando. No, Yogurt 1. Por lo que Yogurts 1 perfecto. Hagámoslo. Debería hacer ambas cosas al mismo tiempo, sosteniendo “Option” en un Mac. Ahí vamos, sosteniendo “Option” en el Mac y haciendo clic dos veces en un PC, es “Alt” para obtener el cursor múltiple. Escribamos imágenes. Voy a ponerlo yogur en dos veces, que son sólo [inaudibles] tres. Ahora definitivamente pasa por y cambia tu texto todo para describir la imagen. Echemos un vistazo ahora. Ahora, es así de fácil. Espéralo, ¿tiene scroll automático? Espéralo. Estamos esperando a Dan. Ahí está. Ahí hay pocos errores, pero son blancos. No los puedes ver. Tendremos que cambiar el color de esos. ¿ Puedes verlos parpadeando ahí dentro? Pero [inaudible] Mira lo genial que es eso, una fácil que era implementar. Ahí está como un autotemporizador yendo, porque jQuerry bondad sin que hagamos ningún jQuerry. Entonces, básicamente, es un fragmento de código que pegamos, y podemos añadirlo más adelante sin locas habilidades CSS y HTML, haciéndonos quedar súper bien, súper rápido. Muy bien, el siguiente. Por encima del carrusel, olvidé que quiero el jumbotron. Entonces justo encima, lo voy a poner en mi CSS, estás como, “¿El qué?” El jumbotron. Al no ser de América, tenía que Google lo que era el Jumbotron, y tiene perfecto sentido ahora. Esa es una gran cartelera gigante que va en medio. Entonces echemos un vistazo a un jumbotron. Es tu imagen de héroe como. Es usted, “Bienvenido al mundo. Esto es lo que hacemos, compramos nuestras cosas”. Encuentra el que funcione para ti, este botón superior es. De acuerdo lo voy a copiar, y pegarlo. Jumbotron está en. Se puede ver h1, no sé cómo hacer eso. Hay algunas clases que son especiales para Bootstrap, que aprenderemos a medida que avanzamos. Pero lo bueno de ellos es que cuando se han implementado, echemos un vistazo. puede ver, es bonitos botones son bonitos, hay un bonito pequeño hover ahí. Cuando lo descompongo para hacerme más pequeño, se descompone muy bien. Ah, y la parte más emocionante que casi me perdí, estaba lista la navegación? Estás como, “Oh, eso es mucho más fácil que el video del curso jQuery de Dan que hizo. Tiene como 25 minutos de duración, pero necesitamos saberlo para que podamos hacer ajustes y arreglarlo si está roto. Para la gente, hay mucha gente que no va a usar Bootstrap, y tú dices: “¿Por qué no lo harías?” Es porque quiero personalizar todo, pero sí me emociono en el escenario cuando es agradable y fácil, y empezamos a vomitar las cosas, y estoy como, “Sí, debería usar más Bootstrap”. Muy bien, próximo proyecto, definitivamente Bootstrap. Volvamos a saltar de nuevo al Código VS. Añadamos una cosa más, para esta introducción. Tenemos edificio a un lado, así que voy a añadir algo llamado Tarjeta. Tarjetas plural en este caso. Echemos un vistazo. Bootstrap, lo haré más grande, para que podamos ver todos los bits, y quiero añadir una de estas cartas. Puede pensar en ellos como azulejo, simplemente agradable y fácil, cosa reutilizable y una copia de ellos. Voy a tirar tres de ellos, volver entre todos ellos. Ellos estamos haciendo algo raro, de mis retornos. Voy a asegurarme de que todos se alineen seleccionándolos. Ir a selección de formato. Bonito. Entonces echemos un vistazo a las cartas. Documento abajo aquí abajo, se están apilando uno encima del otro, las imágenes están un poco rotas. Nosotros hocico cambiándolos ahora mismo. Entonces aquí, mientras estamos aquí, voy a usar mi cursor múltiple [inaudible] dándome el atajo ahora. Es “Opción” en el Mac, “Alt” en un PC, me gusta, hacer un sueño de los atajos. Está bien. Entonces cambiamos este uno a dos, tres. Está bien, echémosle un vistazo, y puedes empezar a ver nuestra maqueta está aquí. Por lo que la navegación y algún desplegable, lo vamos a hacer simple, es fácil quitar las cosas, comenzando con el menú del fregadero de la cocina, y yendo mirándolo hacia atrás. Este va a ser mi jumbotron. Entonces voy a tener que darle estilo a esto bastante pesadamente. Esto, voy a hacer la costumbre. Esta cosa de aquí es mi pequeño slider, va a izquierda y derecha. Pero se puede ver con qué rapidez implementamos eso. Estas pequeñas tarjetas por abajo, las conseguimos bastante cerca para empezar. Por lo que Bootstrap es una forma agradable, rápida de lanzar juntos un sitio. Por lo que todo el tipo de funcionalidad está integrada, lista para usar, y solo puedes cambiarla. Muy bien, los componentes son probablemente la parte más emocionante de Bootstrap, y no vamos a pasar por todos ellos ahora, pero puedes empezar a echar un vistazo a todas las diferentes cosas que puedes implementar. El cool al respecto, es porque hacen el trabajador lo venden a tu cliente como una característica, sabiendo que puedes usar Bootstrap para hacer mucho del arduo trabajo. Muy bien, así que esa es la breve visión general de los componentes de Bootstrap. Echemos un vistazo al último bit. Por lo que hemos hecho una visión general del diseño, después miramos esta visión general de los componentes. Tengo una más que ir. Bueno, mira los estilos. 102. Resumen rápido de cómo funcionan los estilos CSS Bootstrap en código VS: Hola ahí. En este video vamos a ver una visión general de los estilos de Bootstrap. Hemos mirado su diseño, hemos mirado sus componentes, ahora vamos a ver esta tercera opción, por sus estilos. Todo lo que es, es estilos prefabricados que Bootstrap nos ha hecho que llegamos a aplicar con clases sencillas que nos van a hacer cosas tediosas rápidamente. Al igual que un botón gigante que tiene esquinas redondeadas en una línea alrededor del exterior y un flotante, podemos aplicarlo rápidamente. Hay un montón de diferentes opciones y estilos para elegir, Bootstrap hizo todo el trabajo duro, solo llegamos a trabajar en qué clase a Ed. Déjame mostrarte cómo funciona todo ahora en VS Code. Para este video, vamos a cerrar todo y trabajar en una caída desechable. Lo que podríamos hacer es ir al índice y en realidad solo agarrar todo esto, copiarlo para que fuera no tenga que hacer el encogedor para encajar no y volver a agregar el JavaScript. Vamos a robarlo hará un nuevo archivo por aquí. Vamos a llamar a este panorama general y llamaremos a éste styles.html. Pégala en e iremos y borraremos todo lo que hay dentro de este contenedor. Espero que vengan conmigo, están aquí. Todo lo que tenemos es un contenedor aquí. Vamos a tirar algunas etiquetas html básicas para que empecemos con un h1, debajo o dejemos poner algunas cosas dentro de ella, una etiqueta P. Pongamos algo de Loren ipsum, tal vez sólo 10 palabras. Pongamos un botón y presentemos incluso pongamos una etiqueta A. Eso no va a ninguna parte. Pero le pondremos algo de texto. Va a ser contáctanos página solo algunas cosas genéricas y vamos a ver qué hace Bootstrap por defecto. Después de cerrar eso, ábrelo de nuevo. Se puede ver que le tiene una mirada para un look bootstrap. Lo bonito de esto es, sobre todo si eres nuevo en el diseño o eso no es realmente lo que te encanta hacer. Te gusta la compilación, pero no tanto que escoger fuentes o al menos no eres bueno en ello. Bootstrap realmente puede ayudar en simplemente instantáneamente hacer que se vea bien. La otra cosa genial es que no sólo se queda así. Lo que puedes hacer es entrar a tu getbootstrap.com y empezar a buscar a través de la documentación. Sí toma un poco de tiempo acostumbrarse a todo. Pero aquí hay algunas cosas súper útiles. Echémosle un vistazo. Estilos que tomamos sobre el diseño. Tiene su propio bit, componentes, tiene su propio bit. Pero luego cuando se trata de los estilos que usa Bootstrap, está manchado a través de muchos de ellos. Muchas de ellas están dentro de utilidades. Pero algunos de ellos son componentes. Te mostraré lo que quiero decir a medida que pasamos. Ahora si hablas con otras personas, te podrán decir exactamente cuando digas: “Oye, cuéntame sobre el diseño de Bootstrap”. Sabrán exactamente de qué estás hablando. Lo mismo con los componentes. Cuando se trata de los estilos, es algo que he inventado para abarcar todas las demás cosas que hace. Todas las utilidades y bits extra, todos los estilos que le agrega libertad. ¿ Simplemente significa que estás en el saber. Utilidades comienza con fronteras. Se puede ver que se pueden agregar bordes de forma real rápidamente agregando solo estas clases. No vamos a pasar por todos ellos, pero echemos un vistazo al texto. Bonita, fácil. Alineación de texto, super fácil. También lo puedes hacer para consultas de medios usando, si quiero que se aplique, texto en pequeños dispositivos a la izquierda, pero luego nuevamente a la derecha. Para dispositivos más grandes, solo puede agregar esta clase en lugar de intentar editar dos consultas de medios diferentes. Hagamos algo en realidad. Echemos un vistazo y digamos que queremos todos mayúsculas. Aquí puedes ver mi clase P puede ser una clase de mayúsculas y eso es todo lo que necesito hacer. Vamos a desechar esto. En código VS, voy a decir que mi etiqueta p tiene una clase incluso de texto hasta un caso. Echemos un vistazo en el navegador y puedes ver, ojalá haya en todas mayúsculas y nunca hagas nada. Digamos que quiero que sea otra cosa. Echemos un vistazo. Tenemos garrapatas para el peso. Digamos que miramos la clase p. No tenemos que crear una clase audaz y luego aplicarla a ella. Ya está listo para ir ahí dentro. Se puede ver negrita, cursiva. Copia eso y entra aquí. Voy a decir que también quiero que sea mayúscula y digamos que le voy a poner un espacio. Yo quiero que sea un peso de fuente de negrita también. Eso va a ser mayúscula y audaz. Se puede ver la declaración de ticks por defecto está desactivada o la subyacente. Simplemente se sienta ahí muy bien. Los botones tienen algunas cosas bonitas. Echemos un vistazo aquí, aquí es donde se pone desordenado, pero Dios mío, Genial, bueno eso es una especie de estilismo personal está en utilidades, pero luego botones está debajo de componentes, botones. Ya puedes ver si agrego una clase de btn-primary, se va a quedar así, pre-hecho con colores y todo. Vamos a tener un botón de mirada y primaria. Dónde está mi botón, está bien, va a tener una clase de botón y primaria. Echemos un vistazo. Está listo para irse. Tiene esquinas redondeadas, tiene a HAVA Rico. No tan emocionante como la rejilla, definitivamente no tan emocionante como los componentes. Pero lo bonito de ello es que muchas de las cosas están listas para salir. Está muy claro lo que hace. A menudo están todos listos para ir en cuanto asegurarse de que están listos para diferentes consultas de medios y diferentes dispositivos como este. También hay un contorno primario de botón. Ahí hay un botón grande así que veamos. Simplemente hay agregar un poco más. Estoy tratando de hacerlo más emocionante. Como tal vez no, pero puedes ver es solo que no tienes que averiguar qué sólido el estilo de borde de malas hierbas y luego un píxel y luego solo agregarle eso. Tiene algunos incumplimientos. Cuando empecemos a construir nuestro sitio, te mostraré cómo anularlo. Pero se puede ver ahí puedo hacer un botón grande o un botón pequeño con sólo añadir otro. Dijo este último. Serás como, lo conseguimos en el último. Yo lo haré el botón grande. No tengo que ir a pick size es solo un botón gigante con un color primario con liner en el exterior. El tercero pero no como parte emocionante de Bootstrap. ¿ Cuál es el material? Prefabricado, listo para ir. Rápidamente termino antes de irnos. El panorama general de la cuadrícula fue la estructura real del sitio web. Las cajas en las que metimos cosas y que incluía todas las cosas como consultas de medios. Después hicimos el Super 61 donde teníamos componentes. Teníamos un deslizador de carrusel que se cortó a través de la pantalla en una navegación que se descompuso para el móvil y de nuevo en una navegación principal para el escritorio. Entonces este tipo, donde son solo montones y montones de clases prehechas para ayudarte a construir un sitio rápidamente. Se ha ido el problema tratando de recordar al topo. El genial del sitio web de Bootstraps, getbootstrap.com, lo de la búsqueda funciona razonablemente bien. Si necesito encontrar mi carrusel porque no puedes encontrarlo en ningún lado, ¿de acuerdo? puede ver si lo escribo, me lleva dos ejemplos de carruseles y puedo saltar ahí e ir allá. A veces tienes que intentar adivinar la palabra que te gusta. ¿ Cómo es la cosa que tiene la parte con el tipo audaz, de acuerdo? Simplemente puedes escribirlo y solo ver dónde puedes conseguir y este caso, falló. Fronteras en ya sea es sus pesos de fuente, audacia. Lo que haremos a menudo y puede ser un poco confuso cuando empiezas a usar el sitio por primera vez, es que le ha llegado. Hay toda una página sobre los pesos de las fuentes. En realidad acaba de llegar a esta página sobre garrapatas en las que estábamos antes y se deslizó por la página a este marcador, pesos de fuente completos en realidad en esa página donde estábamos antes. A veces haces clic en él y te lleva a una página general y luego te desliza hacia abajo y te pierdes un poco, a veces. La otra cosa que hacer es en realidad simplemente ir. En realidad, ¿cómo hago Bootstrap y me aseguro de usar Bootstrap para la última versión y cómo levanto la línea? motor de búsqueda Bootstraps dentro de su sitio está bien, pero a menudo es fácil simplemente ir aquí y Google lo encontrará en el sitio Bootstrap para usted, o bien viejo Stack Overflow. Está bien, eso es todo para los panoramas, vamos a entrar en ese edificio fuera de sitio. 103. Cómo personalizar los estilos predeterminados css de Bootstrap de 4: Buenos días a todos. Hoy vamos a ver cómo anular los estilos Bootstrap. Se ve muy bootstrappy para empezar. Vamos a personalizarlo un poco para cambiarlo para que se vea así. Ahí vamos, mucho menos bootstrappy. Vamos a hacer un par de cosas. Te vamos a mostrar cómo completar anular los estilos, pero también cómo simplemente trabajar dentro de los estilos que Bootstrap ha creado. A menudo, hay estilos que se han aplicado que queremos cambiar, y Bootstrap es bastante útil y en realidad han creado alternativas para ellos, así que vamos a hacer una mezcla de anular y simplemente encontrar alternativas, o en video donde tengo la voz más croakiana de la que puedo deshacerme porque es muy temprano. Nos vemos en el video. Para anular nuestros estilos, vamos a cerrar y voy a tirar HTML que estábamos usando. Vamos a abrir nuestra página de índice doblándola. Enfriar. Echemos un vistazo al CSS. En realidad puedes hacer clic en este enlace aquí si pasas por encima de él. En mi Mac es Command and click. Seguro que en un PC es Control y click. Vas a hacer clic en él, ábrelo, y que mis amigos es el CSS Bootstrap. Nos da humo santo. El magnificado versión, que se ve más complicado de lo que es, pero está todo ahí dentro. Solo recortemos al tamaño más pequeño posible. Si voy a “encontrar”, así que sólo estoy usando mi “encontrar”, y busquemos nuestro h1. Se puede ver que hay cinco ocurrencias, una, dos, tres, cuatro, cinco, y esta primera es más de código de puesta a cero por las miradas de la misma. Un montón de cosas consigue sus márgenes sentarse un poco. Margen cero superior, margen inferior queda anulado. Por aquí fuente uno, el tamaño h1 lo consigue a 2.5. Están pasando algunas cosas que puedo descifrar y luego empezar a anular. Ahora lo que no quieres hacer es realmente empezar a ajustar este archivo, porque puedes descargar bootstrap.min.css y en realidad empezar a editarlo. Get Bootstrap en realidad tiene una versión no minificada que puedes empezar a ajustar, pero lo mejor es simplemente dejar bootstrap hacer lo propio y anularlo. Se vuelve demasiado complicado para empezar a ajustar el archivo específico, así que lo que hacemos es en Visual Studio Code es que creas tu propia hoja CSS. Entonces vamos a crearlo primero por aquí, haga clic derecho, Nuevo archivo, llamémoslo Estilos. Simplemente llámalo style.css, lo voy a arrastrar por aquí, y en HTML, voy a debajo de mi CSS Bootstrap, voy a añadir mi propio enlace. Entonces link: CSS, y por casualidad lo llamó style.css. No por defecto, sólo por suerte. Entonces lo grande es que necesita estar debajo de Bootstrap para que funcione correctamente. Vámonos a cambiar algo. Entonces por el momento, echemos un vistazo, empezaré navegador. Se establece en una fuente específica. Vamos a cambiar la fuente de la copia del cuerpo. Entonces aquí podemos decir cuerpo, vamos a escoger un estilo de fuente en este momento. Sólo voy a escoger una de las, no de estilo de fuente, familia de fuentes. Vamos a escoger uno de los impagos, y éste va a ser algo extraño. Usaremos Impact. Voy a previsualizar en el navegador, y verás que todo se ha ido y cambiado. Entonces vamos a dejar el CSS todo el camino solo y solo trabajar en la parte superior de la misma. Vamos a tener que hacer a veces es averiguar lo que Bootstrap ha llamado cosas para anularlo correctamente, y te mostraré cómo hacerlo un poco más adelante. Déjame mostrarte lo que va a pasar y con qué vas a tener que luchar si consigues esto por debajo de tu style.css. Se puede ver, volver a la forma en que era, y estás, “Pero dije ser cuerpo, ser Impacto” o esa palabra. Entonces solo tienes que asegurarte de que eso sea por ahí. Entonces eso es invalidar un estilo. Aunque muy a menudo, en realidad no tendrás que anular un estilo, solo encontrarás otro estilo Bootstrap apropiado porque te están dando cargas. Entonces lo que terminas haciendo es, yo sólo lo voy a conseguir aquí. Esa cosa deslizante por el fondo me está molestando. Pero digamos que ese es el h1. Esto de aquí, vamos a averiguar qué es eso en primer lugar. Hay un pequeño truco que puedes hacer en Chrome. Puedes hacer clic derecho en él e ir a Inspect, y lo que sea que hayas destacado, te mostrará en el HTML qué es en realidad. Se puede ver que es una “p” con una clase de ventaja en ella, así que vamos a echar un vistazo a nuestro HTML. ¿Dónde está? Entonces Navegación, está debajo de Navegación, jumbotron. Entonces clase “p” con ventaja en ella. En realidad, solo quiero que sea una clase “p” regular, así que en lugar de intentar darle estilo a la clase principal, y quieres que se vea así, solo la vieja etiqueta regular “p”, solo entra y quita esto o averigua qué hace y mira si hay una alternativa que te gustaría. Así que agárrala, cópiala, y echemos un vistazo al sitio Get Bootstrap. Documentación, y veamos si podemos buscar su plomo. Un poco más rápido, está ahí. Entonces está en su Tipografía, así que está bajo Contenido, Tipografía, y hay un montón de opciones diferentes en cuanto a estilo. Entonces estos son los h1s por defecto, y esto es realmente una clase “p” con un estilo de h1 aplicado. Por lo que en realidad no tienes que tener el encabezamiento 1 para ser un buen poco grande de tipo. Otras cosas, aquí hay una clase para un texto silenciado, puede ver aquí se ha hecho que todo se desvaneció. Aquí es donde comienzas a explorar Bootstrap y a encontrar cosas que te gustan. Una opción de visualización, por lo que un h1 con una pantalla de uno se pone enorme. Plomo, hace un par de destacar por plomo. Puedes ajustarlo, puedes ir ahora y darle estilo esta clase porque quieres que todos los leads y todas las páginas sean ligeramente diferentes. Se pone en cursiva o algo así, o se puede pasar por él y en realidad sólo decir: “Quiero quitarlo”. Entonces vámonos, y en nuestro caso, sólo quita la clase, para que todo excepto los corchetes. Ahora solo debería ser un viejo trozo de texto regular como el de arriba, o podemos decir, usemos uno de los otros que encontramos. ¿ Qué encontramos? Usemos Display 1. No estoy seguro de qué pasa cuando pones Display 1 en una etiqueta “p”. Es emocionante, hagámoslo. Aquí, mi etiqueta “p”, va a tener clase. Clase de? No plomo, ¿cómo se llamaba? Display-1. Vamos a comprobarlo en el navegador. Eso es un gran primer párrafo, y luego esa fuente que elegimos, no te preocupes, no nos estamos quedando con esa fuente, era sólo un, por ejemplo, Impact. Tiene que haber un poco de tiempo al principio donde estás, “¿Cuánto tiempo quiero pasar yendo y aprendiendo estas cosas versus simplemente anularlo?” No hay nada malo en anular y sólo decir que voy a añadir mi propia clase y hacerlo, pero es útil empezar a entender lo que hacen estas cosas, averiguar si se está haciendo algo del duro trabajo por ti. Pero en nuestro caso, el plomo no es súper emocionante. Simplemente puedes anularlo o hacer uno propio. Pero echa un vistazo a través del resto de esto. Tipografía uno, se puede ver aquí hay un montón de cosas cool, negrita, cursiva. Se pueden ver todos los atajos para todo, se puede ver que hay uno más destacado. Podrías agregar eso como una pequeña etiqueta de span, envuelve por el exterior, y lo resaltará, fantasía. No vamos a pasar por todos ellos. Lo que realmente quería señalar fue que a veces lo anula en realidad simplemente yendo y haciéndolo por encima de la cima, y luego a veces en realidad solo averiguas cuál es la clase que actualmente se aplica, y luego vete y cámbialo. Hay un montón de cosas que vamos a cubrir más adelante en el curso. Esta es una rara y genial, realmente me gusta. Esto está sumando un margen de cuatro anillos al eje Y, por lo que arriba y abajo. Entonces hay una regla horizontal, que es este tipo de aquí. ¿ Dónde está mi gobernante? ¿A dónde se fue el gobernante? Ahí está. Ve esta línea corriendo por el centro ahí, tienes que acercarte ahí porque es bastante pequeña y delgada, pero hay un relleno de cuatro anillos, superior e inferior. No izquierda y derecha, arriba e abajo, porque utiliza el eje y. Entonces hay algunas convenciones de nomenclatura a las que nos vamos a acostumbrar a medida que avancemos. Entonces para el resto de este video, solo voy a hacer cosas que hemos hecho antes. Sólo para ordenar esta cosa. En primer lugar, voy a deshacerme de mi clase de display y volver a agregar mi ventaja. Voy a traer algunas fuentes. Ya hemos hecho esto antes, pero si quieres practicar, sígueme. Entonces google.com/fonts, y terminas en fonts.google.com. Busco dos fuentes para este sitio web en particular. Entonces los que quiero es este aquí llamado Abril Fatface y el resto del texto va a ser Open Sans Light. Probablemente Open Sans Light plus con un poco de Open Sans Bold. Creo que son los únicos dos que usé. Está bien, así que hagámoslo. Hagamos Abril Fatface, lo voy a sumar, y voy a hacer Open Sans. Echemos un vistazo aquí abajo y digamos Open Sans, vamos a personalizarlo. No creo que usara regular, acabo de usar eso en negrita, y cuando llego a Abril Fatface, me pierdo. Entonces eso es Open Sans, y debajo está Abril. Simplemente sólo hay un tamaño para esa fuente, así que sólo vamos a usar el regular. Lo que vamos a hacer es que lo vamos a incrustar. Vamos a agarrar esto en la parte superior, copiarlo, asegurarnos de que vaya por encima de nuestra hoja CSS.. Te acuerdas, ¿va por encima de Bootstrap o por debajo de Bootstrap? Funciona de cualquier manera. Vamos a salvarlo y ¿qué más necesitamos? Necesitamos realmente aplicar eso a nuestros estilos, así que vamos a agarrar ambos porque los usaremos a ambos. Entonces por aquí, sólo los voy a tirar aquí, de voluntad o de no ser, porque quiero que toda mi familia de fuentes sea un defecto de Open Sans, y lo haré por defecto. Necesito cambiarlo a blanco, pero probablemente un poco más tarde una vez empiezo a colorear mi sitio. ¿ Cómo se ve al momento? Si hago blanco demasiado pronto, no voy a poder ver todo este texto. Lo cambiaremos un poco más adelante, pero quiero que sea una fuente blanca de la Luz que estaba usando, y por aquí se describe como 300. Esa es la luz para esa, genial. Otra fuente que quiero hacer, quiero que haga un h1, y para eso quiero usar mi Abril. En realidad borré el equivocado, vuelve entonces. Recuerda, nuestra fuente solo dice: “Quiero que seas Abril, y si no puedes encontrarla, ve y encuentra esa fuente cursiva predeterminada”. Es la que va a ser la más fantástica de tu máquina. Este dice: “Abre Sans, si no lo encuentras, cualquiera que sea el predeterminado Sans Serif” que probablemente va a ser Aerial o Helvética. Pero debería cargarse porque lo hemos dicho aquí arriba, “Cargar desde Google”, y Google es bastante consistente. Entonces hemos anulado algunos bits, echemos un vistazo con el documento. Ahí está. Entonces todo lo que no es nuestro h1 es ahora Open Sans Light, y nuestro rumbo aquí es Abril. Muy bien, una última cosa que quiero hacer es agregar un gradiente de fondo. Vamos a saltar aquí y yo voy a decir, tú lo pausas ahora, y cuentas, y a ver si puedes hacerlo. ¿ Te acuerdas de nuestro gradiente de fondo? Tengo los colores en tus archivos de ejercicios en el Proyecto 4. Ahí hay un documento llamado Proyecto 4 Texto. Abre eso, y esos son los dos colores por los que quiero que vayas. A ver si puedes hacerlo sin revisar y solo a ver cómo vas si puedes recordarlo. Entonces ve y pausa ahora. Muy bien, ¿cómo te fue? ¿ Recuerdas dónde ponerlo cuando en el cuerpo? ¿ Recuerdas cómo se llamaba porque es raro? Es imagen de fondo. Entonces tú decides a dónde va. Vamos a usar gradiente lineal, y dentro de estos corchetes aquí, decidimos la dirección. Me encanta esto. Es todo cosa corta abreviada. A la derecha inferior, significa que va a ir de arriba izquierda a abajo derecha, coma, y luego lo vamos a poner en nuestros dos colores, así que estos dos. No puedes usar el guión, solo editaré eso ahí dentro. Debería sacarlo del texto en realidad, es confuso, y solo una coma entre ellos. Entonces no necesito ese pequeño guion ahí. Esos son los dos colores. Sólo voy a asegurarme de que lo cierro, no puedo ver el costado. Está todo el camino por aquí. Corre el borde ahí. Ahora que uno lo está haciendo por defecto, ¿por qué no se envuelve de este lado? Está justo al borde de donde debe envolver. Ahí vamos, vuelve a encenderlo. Está bien, vamos a guardarlo. Echemos un vistazo, y ahí vamos. Mira eso, hermoso. Muy bien, así que hemos personalizado nuestra hoja de estilo, un poco anulando las cosas, y también, vas a pasar mucho más tiempo probablemente descubriendo cuáles son estas clases. ¿ Qué es este “bg-light” y qué hace? ¿ Hay un “bg-dark”? Te apuesto que lo hay, y echando un vistazo a la documentación y o bien encontrando algo que ya existe, o al menos cerca de lo que quieres y luego haciendo un ligero ajuste por encima de la parte superior. Que mis amigos, es la vida de Bootstrap. Muy bien, al siguiente video. 104. Cómo usar la disposición de cuadrícula de Bootstrap, Experimento 1: Hola, ahí. En este video, vamos a ver un poco más el diseño de Bootstraps. Nos vamos a burlar de éste de aquí. Se va a convertir en esto por aquí. Va a haber algunos puntos clave que necesitamos aprender antes de empezar a construir un sitio web más grande. Saltemos y aprendamos a hacerlo. Para empezar con nuestro primer experimento de diseño de Bootstrap, vamos a cerrar nuestro sitio principal, y crear un poco de archivo desechable. Vamos a llamar a este layout-a.html. Añadamos nuestras cosas html en la parte superior, y recordemos, necesitamos actualizar este aquí. Siempre puedes volver a las cosas anteriores que hemos hecho en tus archivos de ejercicios aunque en Project 4, en tu documento de garrapatas que han realizado. Aquí hay un montón de cosas aquí para ayudarnos. Por lo que esta es la ventanal actualizada. Aquí arriba, y simplemente agregamos que extra de encogimiento a ajuste equivale a no para Safari. ¿Qué más he puesto aquí? El CSS, y yo debería conseguir esto de conseguir Bootstrap en caso de que las cosas cambien, pero tengo uno aquí para ti. Recuerda, yendo a la cima no vamos a poner todo el JavaScript en este momento, porque no lo necesitamos para la cuadrícula. Son sólo todos esos deslizadores de lujo, y las cosas. Vamos a poner en nuestro propio CSS, y en realidad podríamos simplemente ser perezosos en este caso, y simplemente darle estilo en este documento en lugar de una forma externa. Todavía tiene que estar debajo de este CSS, así que, todavía podemos hacerlo, pero tiene que estar debajo de él. Muy bien, pongamos en nuestro contenedor. Aquí vamos a pont.container, y dentro de él sólo vamos a poner cosas, porque quiero tener un pequeño adelanto rápido. Asegúrate de que todo funcione, Bootstrap está conectado, así que, voy a apagarlo, volverlo a encender. Se va a cargar en un documento diferente en pantalla diferente. Se ve que está funcionando, porque sé que está sinterizado. Está sinterizado en esta pantallas grandes, tienen un hueco por aquí. Ese es uno de los pectorales de usar Bootstrap, pero ya lo hemos vinculado. Entonces vamos a borrar el texto a nombrar, hemos demostrado que funciona. Vamos a poner en nuestra parte superior. Entonces me marearé aquí. Habrías visto que el principio, está en tu Proyecto 4, se llama wireframe. Eso es lo que vamos a estar construyendo en este caso. Este es Bootstrap layout A, vamos a poner una división 50-50 del logo, y NAV. Va a haber una caja al 100%, y va a haber tres cajas aquí abajo. Entonces pongámoslo en estos dos primeros el logo, y el NAV. El modo en que funciona son las filas, y los contenedores. Nunca puedes saltarte la fila. Entonces punto fila, y dentro de eso pones tus dos columnas. Recuerda el nombre de la fila es lo que le da a las columnas la potencia flexbox, y es una bonita envoltura para ellas para que no se rompan en otras partes, ni en otras filas, ni se conecten. Entonces quiero una columna, pero quiero por dos de ellos. Impresionante. Entonces ahora ponemos nuestro texto. Este va a ser el logo, y éste va a ser el NAV. Impresionante. Vamos a echar un vistazo, y dividirlos bien. Ahora digamos que quiero agregar algo de color a estas cajas. Esto va a traer un punto realmente bueno, y una muy buena explicación de cómo usar Bootstrap, es que no deberíamos simplemente confiar en el “col”. El “col” usa un envoltorio, y no deberías empezar a peinarlo. Si empiezo a agregar relleno al “col”, y hacer colores de fondo probablemente no lo haga daño, pero también hay cosas que lo harán. Esta cosita de aquí no lo intentes, y anular, solo deja que Bootstrap controle esa, y dentro de estos becarios, agregue tu propia clase. Entonces vas a tener como una cosa triple anidada. De acuerdo, entonces, dentro de “col” aquí vamos a poner en nuestra propia clase. Voy a darle un nombre de “mybox”. En realidad pondré eso en su propia línea. Lo haremos por dos de ellos seguidos. Comando, opción flecha abajo, o Control Alt flecha abajo para obtener dos de ellos. De hecho lo voy a poner en rutina, y luego pondré en “mybox”. De acuerdo, llamo a las cosas mi caja, o mi cualquier cosa cuando estoy lidiando con Bootstrap, si quería hacer una columna, llamo mi columna, por si acaso, porque Bootstrap tiene un montón de cosas que ya se llaman. Muchas clases, y estás como, si comienzas a ser inteligente, como llamar a algo audaz, eres susceptible de anular, o empezar a faltar con una de las clases de Bootstrap. Entonces siempre pongo mi delante de ella, para saber cuáles son míos, y cuáles son éstos? No tienen clase que empiece con mi en Bootstrap. Entonces solo significa que estoy a salvo, porque estaría instalando cosas, y no está funcionando, y luego te enteras de que Bootstrap consiguió algo llamado exactamente igual, tratando de hacer algo diferente. Ahora dentro de estos, aquí es donde puedo empezar a hacer mis cosas. Entonces multi casos, estoy usando la “tecla Alt”, o “Tecla de opción” en el Mac, “tecla OP” en PC para hacer clic dos veces, echemos un vistazo ahora. Se va a ver igual, pero ahora puedo irme, y empezar a peinar mi caja. Entonces aquí arriba en mi cosa de estilos aquí, voy a decir punto mi caja. Se va a, vamos a añadirle algunas cosas básicas. Añadamos un color de fondo para que podamos ver. De acuerdo, SV, minúscula, color de fondo. Puedes aplastar [inaudible] y eso es bastante bueno. Vamos a usar el rosa caliente para que coincida con nuestra pequeña maqueta de ahí. Le agregaremos un poco de relleno. Bueno, esa es una altura mínima también. Alturas mínimas que es de 200 píxeles. Todavía tengo mi voz crujiente. Empezó demasiado temprano esta mañana, y el café ni siquiera ayuda. Entonces haremos arriba, y abajo de unos 20 píxeles, solo para separarlos, así que hay un poco de espacio blanco entre ellos, y haremos arriba, e inferior de 10 píxeles. Echemos un vistazo, y entramos. buen aspecto, tal vez algún relleno en el interior de estos tipos. Por lo que un poco de relleno todo el camino alrededor de 20 píxeles. De acuerdo, cualquier edición de estas cosas aquí, no hace falta que esté ahí para nada. Yo solo quiero mostrarte qué hacer. Si sí quieres dar estilo a las columnas, realidad no des estilo a las columnas. Podrías poner punto col aquí arriba, y empezar a meterte con él, y se desmoronará. Lo estamos agregando para que realmente podamos verlo, lugar de solo yo, di: “No te preocupes, está ahí, confía en mí”. Muy bien, lo siguiente que quiero hacer es con mi maqueta. Yo quiero este gran cuadro de héroe en el medio. Esto trae otra buena extrañeza de Bootstrap. Lo que voy a hacer es poner unas cuantas devoluciones aquí para que tenga muy claro el envoltorio exterior, y todas estas internas. Entonces quiero una línea, no puedo simplemente ponerla en un col, y empezar a peinar eso. Se necesita ir dentro de una fila aunque solo necesites uno de ellos, porque recuerda la envoltura de fila le da al col es magnífica casa, con su bondad flexboxy, además de lo contrario, estos chicos, si pongo otro col debajo, van a empezar a rodar juntos, y vamos a tratar de apretar en las mismas líneas. Por lo que nuestra fila es como un salto de línea también. En este caso, va a ser mi Caja de Héroes. Echemos un vistazo. No va a funcionar. Bueno, va a funcionar. Yo quiero poner ese “div” en el interior. Entonces aquí dentro, voy a tener uno llamado “mybox”, y aquí dentro llamaré a este uno Hero Box. Agradable. Muy bien, la última parte de nuestra maqueta, es, echémosles un vistazo. Es uno, dos, tres todos cruzados uniformemente espaciados. De acuerdo, esta es una bonita, fácil de empezar en Bootstrap. Está bien, entonces, otra vez para hacer una fila, pero hagamos algo de fantasía. Hagamos una fila, dentro de ella que poco menos, mayor que. Dentro de eso, quiero un hijo de col. ¿Cuántos quiero? Yo quiero tres de ellos. Una fila, tres columnas, y esta va a ser la característica 1, 2, y 3. Echemos un vistazo a lo que tenemos en marcha. De acuerdo, vamos a borrar. Vamos a deshacernos de esas cosas. Digamos que quiero poner mis puntos, mi caja, y luego quiero veces eso por tres. No es lo que quiero hacer. Simplemente no estoy pensando, es temprano. Digamos que quiero hacerlo todo de una sola vez te gusta, muéstrame cómo lo haces todo de una sola vez. Entonces, vamos a deshacernos de eso también. Queremos una fila. Dentro de esa fila, queremos poner col. Dentro de ese col, queremos poner en “mybox”, pero quiero tres de ellos. Si solo lo hago así, me va a dar lo que quiero. Entonces lo que quiero hacer es envolver esta parte entre paréntesis. Eso es predictivo, e intenta poner en el corchete de cierre también. Entonces quiero todo esto envuelto juntos, y luego lo veces por tres. A veces tienes que empezar de nuevo. Está bien, me voy a poner aquí mi cursor intermitente, y voy a hacer la función 1, 2, y 3. Vamos a echar un vistazo, clavado. Esta es nuestra maqueta. Eso es todo en Bootstrap. Súper fácil, pero las comidas para llevar para este está asegurándose, usas filas aunque quieras usar solo líneas por sí mismo. Sólo una columna todo, o estirando todo el camino a través. El otro tipo de comida para llevar es asegurarse de no darle estilo a la fila, o a la columna, o al contenedor. Lo mejor es agregarle tus propias clases, y dejar que haga lo suyo. Podría darle estilo al contenedor aquí, pero podría ser bueno agregar una segunda clase llamada mi contenedor, o algo más, como quieras llamarlo. Entonces estas dos cosas se aplican, y no estás tratando de mezclarte con esa, que es una buena regla general para Bootstrap. ¿Por qué nos gusta? A, se hace las cosas de flexbox para nosotros, y es editar consultas de medios para nosotros, y se descompone muy bien a dispositivos más pequeños. Vamos a hacer clic derecho, inspeccionar, ver si sí mueve todo por defecto. Asegúrate de que la vista previa de tu dispositivo, pequeño interruptor de alternancia esté encendido. Voy a bajar al iPhone X, y se descompone muy bien. Está bien, ese es nuestro primer experimento hecho. Pasemos al siguiente. 105. Cómo hacer encabezados de anchos de 100% o desiguales en Bootstrap 4: Hola ahí. Vamos a construir este otro grupo aleatorio de cajas. ¿ Por qué? Para que podamos aprender diversas partes del diseño de Bootstrap. La primera parte en el tema de este video va a ser, se puede ver que este borde gris va todo el camino hasta el borde del navegador, pero luego estas cajas internas están anidadas y todos están en el centro. Este es el resultado final, va todo el camino hacia el exterior, y cuando se hacen más pequeños, las bonitas casitas reaccionan a las consultas de los medios, pero todas están atrapadas dentro de este contenedor interno. El atajo para este, si estás regresando a este video, es básicamente la envoltura externa necesita contenedor-fluido y luego un contenedor en el interior. Hablemos de ello un poco más en el video. Empecemos. En primer lugar, cierra todo lo que tengas abierto. Estábamos trabajando en layout-a antes, hagamos una segunda versión, otro archivo desechable solo para aprender cosas, y mantenerlo bien y ordenado para que puedas encontrarlo más adelante. A éste se le va a llamar “layout-b”. Vamos a sumar todo el texto. Simplemente lo vamos a robar de layout-a. Selecciónelo todo, cópielo, ciérrelo, vaya a layout-b, péguelo y eliminemos las cosas que no necesitamos. En primer lugar, vamos a estar empezando por la cabeza, probablemente voy a usar muchas de las mismas cosas, las principales cosas. Deshacernos de todo lo que hay en el cuerpo por el momento. Para saber que lo tienes todo, da click en la parte superior. puede ver ahí se hace ahí, se resalta parcialmente. Entonces tenemos todo ido en el cuerpo. Voy a crear un par de estilos. Este va a tener más de un estilo. Entonces vamos a tener mybox1 y 2. Usaremos todo desde antes, la misma altura mínima, los márgenes, el relleno. Simplemente escogeremos diferentes colores para que coincidan, donde está nuestro Wireframe Layout B. Así que “Exercise Files”, “Project 4" [inaudible] y este llamado “Layout B”. Entonces eso es lo que estamos haciendo. Vamos a necesitar un par de colores. Vamos a necesitar este rojo, necesitamos un verde y un gris. Este primero, he usado “jitomate”. Haremos una segunda. Copiar, pegar. Este va a ser mybox2, y éste va a ser “verde de primavera”. A mí me gusta el verde de primavera. Entonces dos cajas, y solo necesito esto sólo porque voy a poner un color de fondo en eso, ver este color de fondo aquí, en el gris, voy a agregar un color de fondo de gris a todo este gran encabezado de ancho completo. En lugar de llamarlo “encabezado”, sólo voy a llamarlo “punto bg1" o “mybg1". Ese sólo va a ser mi antecedente. Porque podría usarlo en algunos otros lugares. Soy reacio a llamarlo “cabecera de fondo gris” porque podría ser usado para algo que no sea el encabezado y podría no ser gris. Entonces mybg1, por si necesito un fondo de dos, y esto va a tener un color de fondo, voy a usar gris pizarra, hay un gris pizarra oscuro? Ahí hay gris pizarra oscura. Vamos a usar esos para hacer nuestro estilo. En primer lugar, hemos hecho el contenedor, y nuestro contenedor se sienta en el medio. Echemos un vistazo a las documentaciones de Bootstrap. Haga clic en la pestaña “Documentación”, y haga clic en “Diseño”. Te dará una breve introducción. Para eso estoy aquí. Hemos utilizado “contenedor de puntos” y lo centraliza en la página web. Este “contenedor-fluido” es lo que lo hace ir hasta los bordes. Entonces echemos un vistazo, veamos rápidamente la estructura. Vamos a tener inicialmente este contenedor de fluidos, y dentro vamos a poner el contenedor. Hicimos algo similar antes, anidando dentro de las cosas. Pero en lugar de usar nuestro auto de margen en ambos lados para que las cosas se centren, vamos a usar nuestro contenedor y nuestro contenedor de fluidos. Vamos a crear un div aquí llamado “contenedor-fluido”. Vamos a aplicar más de una clase. Entonces justo después este “contenedor-fluido”, vamos a añadir “mybg1". Solo pongamos “algún texto” solo para que podamos verlo, solo asegúrate de que realmente esté funcionando. Vamos a mirar, vamos a vivir. Entonces tenemos un contenedor de fluidos, se va todo el camino. Ahí dentro hay “algún texto”, simplemente manteniéndolo abierto por el momento. No le voy a añadir una altura. Voy a dejar que el encabezado dentro de ella haga eso. Entonces dentro de ésta, vamos a poner otra etiqueta div, pero esta se va a llamar “contenedor”. Esperemos que podamos poner algo de texto aquí, “algún texto”. En realidad, quería echar un vistazo, asegurarme de que esté centrado. Vista previa en el navegador, el texto es un poco difícil de ver, como que lo ves ahí. Se recorta hasta el exterior. Entonces hay un contenedor de fluido externo yendo al borde, y dentro de eso hay uno que opera en esas consultas de medios que tiene Bootstrap. A continuación dentro de este contenedor, vamos a deshacernos de “algún texto”, y vamos a poner en una “fila”. Dentro de esa fila, echemos un vistazo a nuestra maqueta, nos dieron dos columnas, pongamos esas en primera. Voy a tener un “col” veces por dos, e iba a poner algo de texto. En realidad, no vamos a poner algo de texto directamente en este, vamos a poner otro estilo dentro de él. Porque recuerda, quiero hacerlos de este color, quiero hacerlos rojos. No quiero agregarla a esta columna de envoltura exterior porque termina arruinando las cosas. Entonces lo vamos a poner como otra cosa anidada. Vamos a poner un div, usaremos “mybox1" en este caso. Necesitamos a dos de ellos. Necesitamos un contenedor. En nuestro caso, necesitábamos dos, porque queríamos hacer dos cosas muy diferentes. Queríamos que se estira hasta los bordes, pero también un contenedor que está anidado por dentro. Eso es lo que tenemos. Tenemos este contenedor, regular viejo, que tiene un ancho dentro de este elástico, que es el fluido. Dentro de eso, quería mis dos cajas. Estas dos columnas aquí no pueden existir sin una fila. Por lo que estas dos columnas tienen que estar dentro de esta fila de una, porque recuerden que la fila le da todo su poder. Entonces quiero hacer un poco de estilo elegante, meterme con los márgenes y el relleno. Si no necesitara, podría simplemente darle estilo a mi logo dentro de este “col” aquí. Pero porque quiero hacer algo con los márgenes, los remaches, y las alturas, es mejor no meterse demasiado con el “col”. Entonces lo voy a hacer dentro de éste. Aquí es donde se pone como si hubiera mucho pasando ahí dentro, pero espero que lo entiendas. Echemos un vistazo en el navegador. ¿Cómo le va? Genial. Debido a la magia de Bootstrap, deberíamos poder hacer clic derecho en “Inspeccionar”. Si no lo tienes encendido, activa el icono de “Vista previa del dispositivo”, luego vas a Responsive y debería saltar arriba y abajo en cuanto a tallas, mío está ajustado al 100 por ciento. Se pueden ver rompiendo las consultas de los medios. Bonito trabajo, Bootstrap. Pongamos al siguiente video. 106. Cómo crear anchos desiguales de columnas en Bootstrap 4: Hola chicos. El objetivo para esta clase es llenar esta navegación superior o terminarla al menos. Por el momento, están espaciados uniformemente. Yo quiero que el LOGO sea más pequeño que el NAV. Mi dibujo no es genial ahí, pero éste de aquí lo es, el ancho es apenas más corto que éste. Te voy a mostrar cómo tener cajas de diferentes tamaños. Entonces te mostraré sólo un ejemplo de donde estas cosas anidadas dentro de cosas que están anidadas, adentro son cosas que están anidadas. Simplemente tienen una muy buena comprensión de eso antes de que sigamos adelante. Espero que estés listo. Ya estoy listo. Vámonos. Lo que vamos a hacer es construir también esta parte media y aquí estamos haciendo unas cajas desiguales. Mi dibujo aquí eso significa decir que esto es más pequeño que esta caja. No estoy seguro de haberlo exagerado lo suficiente. Vamos a hacer anchos de caja desiguales y también haremos anidación dentro de anidación solo para mostrarte lo que hace y se ve todo. Primero toque en el código VS. Las cajas desiguales. Tenemos dos de ellos aquí, ¿verdad? Tenemos mi primera fila, que va a ser mi LOGO, y pongámosle un texto para que sepamos cuál, quién es este quién. Va a ser LOGO y éste va a ser la navegación. Mi dibujo aquí muestra alrededor de cuatro, por lo que el resto serán seis. Aquí arriba, miramos un poco antes pero quiero poner esto en su propio cuarto y un poco de video y mostrarles un par de maneras diferentes. Si digo que este primero es un “col-4">, tiene que escribirse exactamente así. Hará asombrosas cosas flexbox y será 4 y esto solo adivinará y llenará el resto de la misma, porque está en la misma fila que está dentro del contenedor, que dentro del fluido contenedor. Todo este anidamiento es útil, aunque se ve un poco desordenado en el HTML. No es necesario escribir explícitamente que este es el ancho de 6, solo hay que decir que esto es 4. Otra cosa que puedes hacer es no tener que usar las columnas solo para que lo sepas, te encontrarás con sitios web que hacen esto, de acuerdo. En lugar de “col-4">, se puede decir que es un ancho de, digamos 25 por ciento. W para anchura-25. Ahorremos, y obtendrá un tipo similar de resultado. Ancho 75, tiras que están al otro lado. No importa si quieres usar porcentajes o esas columnas, yo uso columnas. Algunas personas usan porcentajes, el único problema con los porcentajes es, solo tienen algunos impagos básicos reales. En la documentación bajo utilidades, bajo espaciado, se puede hacer ancho de 25 por ciento, 50, 75, 100, no hay como en el medio. Si intentas escribir 52, va a enloquecer. También hay una opción para la altura, lo que puedes hacer H 25 por ciento, una altura de 50 por ciento, 75, es el padre. ¿ Si lo hiciste dentro de nuestra cabecera o dentro de qué parte? Dentro de esto, le hemos dado una altura de 200. Usará eso ya que es como el 25 por ciento de este contenedor de habitación en el que está. Se lo he vuelto a poner a “col-4">, y quiero mostrarte un par de cosas más. Vamos a poner en este gran div héroe, y vamos a poner a estos dos tipos dentro para mostrarte cómo funciona ese tipo de anidación. No es terriblemente complicado, pero a veces es bueno sólo para verlo. Tenemos nuestro contenedor de fluidos y ahí se abre, y recuerda si haces clic dentro de él, lo resalta aquí abajo. Que es una especie de donde quiero que terminen. No quiero dejar de poner mi parte de nido dentro de ese fluido contenido, lo contrario, se pondrá gris aquí abajo y quiero dejar esa caja gris terminada justo ahí. Vamos a iniciar un nuevo contenedor después. No necesito que esto sea fluido. No necesito un color que vaya al exterior estirándose a través, y aunque lo hiciera, probablemente solo colorearía la etiqueta del cuerpo, que está debajo de todo. Simplemente probablemente colorea eso si quisieras hacer eso. Llegó a contenedor y sólo hay una caja en él. Vamos a hacer esto en un segundo. Tenemos una fila, tal vez tienes que tener una fila, y dentro de eso vamos a tener una columna. Siempre tienes una fila aunque solo quieras una columna. Dentro de esto, vamos a poner un poco de Lorem ipsum y vamos a poner en 100 palabras. Necesitan ir dentro de la etiqueta P, así que lo que podría hacer es hacer esa primera etiqueta P y luego hacer alarma 100. Echemos un pequeño vistazo en el navegador, perfecto. Es como que coincida con mi diseño al menos. También lo que quiero hacer es hacerlo rojo. Voy a envolverlo todo en esta mi caja 1. Todos ustedes van a ir dentro de eso y comando+Mayús+P, en un control [inaudible] +Mayús+P en un PC y luego un representante con abreviatura. Este va a ser un punto, mi caja 1. Echemos un vistazo ahora. Ahí vamos. Hay mucho anidamiento pasando, pero no está tan mal. Donde se complica aún más es donde queremos dividir mi caja en un par de partes extra. Queremos meter a estos dos tipos verdes dentro. Van a estar igualmente divididos a pesar de que mi mal dibujo parece que éste es más grande que el otro. Puedes hacer lo que quieras. Anidando de nuevo. ¿A dónde va esto? Tiene que ir dentro de mi caja, porque ese tipo está haciendo un poco de rojo. Mi caja arriba dice ser este color jitomate. Yo quiero dentro de eso. Voy a dar click en el div. Me dice que ahí es donde termina. Tiene que estar dentro de eso. Voy a meter un retener y voy a poner en otra fila y dos columnas. Pero tenemos fila, cada columna necesita ser el descendiente directo de una fila para que esto funcione, como hicimos en flexbox. Por eso pasamos un poco de tiempo aprendiendo flexbox. Necesitamos una fila, vamos a tratar de hacer fantasía aquí, y dentro de esa fila, necesito dos cols. Pero tendremos dos de ellos, lindo. En realidad aplicaré una clase a esta opción Comando flecha abajo para que tu tipo de cursor duplique hacia arriba o control+Alt+flecha abajo. Te estás cansando de los atajos, ¿verdad? Pero vas a soñar con los atajos, pero no los vas a olvidar. Este va a usar la otra clase verde. A éste se le va a llamar mi caja 2. Dentro de ellos, voy a escribir en función. No, ¿qué hace esa? Anidado uno, se llama nido 1. Yo estoy mirando mi pequeño dibujo aquí que dibujé a mano para ustedes muchachos. Nido 1, nido 2 echemos un vistazo en el navegador. Aquí vamos, eso es un poco extraño, ¿verdad? Anidación dentro de otras columnas existentes. Necesitas la segunda fila, eso es lo que necesitan estos tipos. Que obtengan su poder, y para que más tarde puedas quizás en móvil apilar estos tipos uno encima del otro y es realmente fácil de hacer cuando estas columnas están dentro de una fila. El gran comida para llevar para este video es de tamaños desiguales, ¿de acuerdo? Porque si lo dejas por defecto, se sentarán uno al lado del otro. cincuenta por ciento ocupando el espacio, a menos que pongas tres entonces ocuparán solo tres espacios, o siendo alrededor del 33 por ciento cada uno. Simplemente se dividirán entre ellos. Si quieres forzarlos, solo necesitas forzar a la primera. En nuestro caso hicimos el “col-4">, pero podrías hacer W-25 para conseguir algo similar. Amigos, los veré en el próximo video. 107. Cómo añadir espacios adicionales y márgenes usando Bootstrap 4 en código VS: Hola ahí. En este video vamos a hablar de espaciado en Bootstrap. Es similar a lo que hemos hecho antes cuando hicimos margen superior igual a 16 píxeles, margen inferior igual a 16 píxeles, ese tipo de cosas, excepto que la sintaxis es mucho simplificada, m para margen, p para relleno, t para top, b para fondo. Está muy bien. Echemos un vistazo a cómo aplicarlo ahora en Bootstrap. En este video, quiero que empecemos a trabajar con relleno y margen de la manera Bootstrap que lo hace. Digamos que quiero agregar un bonito hueco blanco grande entre el contenedor de fluido gris y esta caja roja debajo. El modo de la vieja escuela, todo el camino que hemos hecho anteriormente está en tus estilos CSS, se podría decir, quiero tomar el fluido contenedor y quiero darle un margen en la parte inferior, margen inferior de x, y, z, tal vez 20 pixels. Esa es la manera. Todavía funciona, funciona totalmente. Lo que vamos a hacer es usar la forma Bootstrap, y déjame mostrarles la documentación. En getbootstrap.com bajo documentación, bajo utilidades, este es uno llamado espaciado. espaciado funciona así, acabo de hacer algunas taquigrafía así que dije, lugar de escribir margen, en lugar de escribir margen,solo escribes m y para el relleno es p. Entonces para los diferentes lados, tienes arriba, abajo, izquierda, y derecha mostrar en t, b , l, r. Si quieres hacer x, que es izquierda y derecha al mismo tiempo, o superior e inferior es y al mismo tiempo. Ahora en cuanto a las tallas tienes seis opciones, 0, 1, 2, 3, 4, 5. Echemos un vistazo a cómo se aplican. La sintaxis es importante. Lo que quiero hacer es, digamos este contenedor de fluidos, quiero agregar algún margen al fondo. Lo que hago es otra clase. Se trata de uno predefinido. Margen, vamos a hacer fondo, b, guión y luego el tamaño. Vamos a hacer el máximo de cinco. Vamos a obtener una vista previa del mismo en el navegador. Esperemos que se pueda ver margin-bottom se ha extendido por cinco, y estás como, ¿qué es cinco? Básicamente utilizan el espaciado de ms. Sabemos que por defecto, el m es de unos 16 píxeles. Si usas tres, eso es usar un m entero Recuerda, el tamaño de fuente predeterminado es de 16 píxeles. Si alguien entra en Chrome y en su navegador y lo ajusta, estos tamaños también se van a ajustar. Cinco es el más grande y algunos de estos más pequeños se sienta a cero obviamente, pero encontrarás algunos de los componentes. Recuerda nuestros carruseles y tarjetas que hicimos antes, tendrán algunas por defecto. El valor predeterminado siempre será de tres en Bootstrap. Si encuentras un componente que tiene márgenes o relleno ya agregado, son tres. Si pongo uno encima de algo que ya existe en Bootstrap, realidad lo va a reducir en un 25 por ciento. O al 25 por ciento de ese espaciador predeterminado, que son los 16 píxeles. ¿Tiene sentido? Si lo agregas tú mismo, cualquier cosa por encima de cero va a ser más grande. Pero si encuentras algo que ya tiene margen aplicado, agregas tres en realidad nada va a pasar. Simplemente va a ser lo mismo. Si voy dos, va a ser un poco más pequeño. Cuatro va a ser un poco más grande. Uno de los problemas sin embargo, problemas para mí, supongo, no sucede muy a menudo pero, no hay seis, como 6, 7, 8, 9, 10. Se pueden ajustar los espaciados para agregar más medidas, pero es necesario entrar en el archivo Sass que se utiliza en Bootstrap. Es una salida del alcance de esta clase. Si lo haces como, si esto es imperativo y realmente quieres entrar en ello, puedes mirar este estilo Sass. Es lo que se llama un preprocesador CSS, y es una forma de tomar, en lugar de solo un simple viejo todo CSS, las cosas aquí, simplemente un marcado básico real en CSS programable real. Se pone un poco más nerdy, pero si quieres bajar por ese agujero de conejo, puedes ir a revisar. Tengo un curso o no un curso, un video que hice para Adobe. Me encargaron hacer uno, y si vas al helpx.adobe.com y buscas mi nombre en preprocesador, esto aparecerá. Paso algún tiempo revisándolo aquí si quieres ponerte al día. Le he puesto un enlace en sus archivos de ejercicios también bajo texto del Proyecto 4. Pero de nuevo, fuera del alcance de este curso, no los necesitas. Son útiles cuando se trata de diapositivas realmente grandes, principalmente. Muy bien, ahora agreguemos nuestras tres cajas de características y les añadamos algo de relleno y márgenes. Yo quería estar dentro del contenedor. Mi contenedor de fluidos termina ahí. Este contenedor, quería estar dentro de eso porque quería que estuviera centrado. Voy a tener una fila y dentro de esa fila, voy a tener una columna. Dentro de esa columna, voy a tener mybox, y necesito tres de ellos. En realidad necesito poner estos entre paréntesis. Gracias. Codigo ayudando, y quiero tres de ellos. Dentro de estas personas, voy a decir, me gustaría contar la función 1, 2 y 3. Muy bien, veamos un poco cómo va eso. Yo los tengo aquí. No se llama mybox, es mybox1. Está bien, así que estos igualarán. Digamos que quiero un poco de relleno al fondo de esta característica, todas estas cajas de características, podría hacerlo por uno de ellos. Yo también lo hago a la fila en la que está. A la fila, voy a decir, quiero un relleno o margen. No va a importar en este caso porque no hay color en la fila. Podría usar remo abajo o margin-bottom, y voy a usar los buenos cinco grandes. Mira, tengo un buen trozo grande en la parte inferior, lo que podría hacer por éste de aquí arriba también es que quiero que los lados se pongan un poco pequeños, un poco más grandes, porque son un poco demasiado pequeños a ambos lados. Estas cajas Nest se llaman mybox2. Lo que vamos a hacer es poner un margen de x, que va a hacer la izquierda y la derecha de tal vez tres. Lo haré por los dos, mx_3. Sorprendentemente difícil de escribir cuando no puedes ver el teclado. Debería mostrarte mi gran micrófono está en el camino. Echa un vistazo, ahí tienes. Tres no es suficiente. Es lo mismo que el default vamos, luego cinco, ahí tienes. Demasiado grande. ¿ Cuatro? Una de las otras cosas que quiero mostrarte es digamos que quieres agregar. Este de aquí vamos a trabajar porque hay un margen negativo. No estoy seguro cuando necesito margen negativo. Pero te lo mostramos de todos modos. Digamos que queremos tener un margen negativo en esta caja Nest aquí. En este, voy a deshacerme del mx_5, voy a decir, me gustaría un margen, digamos que es un margen de cinco, que lo va a hacer mucho más pequeño. Ves que hay un margen en el exterior empujándolo hacia adentro. Un margen negativo va a agarrar esa misma caja verde, en vez de empujarla, va a empujarla hacia fuera. Lo cual es extraño. Todo lo que necesitas hacer es poner un n frente a los cinco, que significa que es un negativo. Esa es la base de la sintaxis para el espaciado. Echemos un vistazo, m, n, p, k, t, b, l, r, x , y, para los diferentes tamaños , tallas, y hay algunas otras cosas para leer aquí. Pero eso es todo por el momento. Está bien, mentí, hay dos cosas más que quiero cubrir. Una de ellas son las consultas de los medios. Por el momento estaremos haciendo la propiedad, que es el, ya sea el relleno marginal, luego se suman los lados, que es superior, inferior, izquierda, o derecha, y luego el punto de ruptura, luego el tamaño. Vamos a añadir este punto de ruptura que no hemos tenido antes. Simplemente significa nuestras consultas de medios, recuerda trabajar con nuestro documento aquí. Voy a inspeccionar y enciendo la vista previa del dispositivo. Recuerda que estos son los puntos de ruptura. Eso es extra grande, grande, mediano, pequeño, y no hay consulta de medios para extra pequeño, solo asume. Es algo llamado mobile-first, simplemente asume todo lo que no se especifica, asume que es este exceso o este extra pequeño, pero cuando realmente lo escribes. Hagamos que eso suceda. Juguemos con un relleno para este P-tag. Sólo por risas. Echemos un vistazo. Mi P-tag aquí, voy a agregar una clase de, digamos por, pero una cosa que no cubrí es si pongo un m_5 sin arriba ni abajo ni x e y, asume las cuatro esquinas. Esa es la otra cosa que quería cubrir. Digamos que quiero un margen de cinco a su alrededor. Echemos un vistazo. Hay un margen de cinco en todos los puntos de ruptura. Se supone que estás usando pequeño y porque nada contradice fluye para todos ellos. Pero pongamos un espacio y digamos que quiero un margen de, digamos cero, pero no quiero poner el cero y quiero decir cuando llegue un medio, quiero llegar a cero. Simplemente agrega este bit extra interno. Voy a [inaudible] los márgenes a aquí abajo. Digamos a cinco. Pero cuando llego a medio, no ese, ese, se remonta a su tamaño estandarizado. Podrían querer hacer es cuando se llega a grande, tal vez ahí, es hacer algo loco. Márgenes en grande. Yo quiero hacer negativo cinco. loco Dan, viviendo de un filo, ahí tienes. Pequeño o extra pequeño. Pequeño es lo mismo, y llega a medio, y medio cambia de nuevo a cero. Cuando llega a grande, boom, y como no he especificado extra grande, fluye por el extra grande. Se inicia desde el centro, mobile-first out. ¿Eso tiene sentido? Espero que eso reitera todo lo extra pequeño es ése y luego porque no cambié pequeño, fluye hacia esto. No hay diferencia entre estas dos consultas de medios. Yo sólo lo cambié cuando llegué a medio, que es ese tipo de ahí. Se va a cero. Está bien, así que dos es un poquito es, si no pones la propiedad, ya sea que ponga los lados, asume las cuatro esquinas. Entonces puedes apuntar para diferentes consultas de medios. Ahora lo último que quiero hacer antes de seguir adelante es que he estado usando fila y columna y termina en estas clases div. Anteriormente en el curso que hemos trabajado tal vez un encabezado sea realmente útil, nav es realmente útil, artículo de la sección principal, no tan útil, pero esas son las etiquetas HTML5 específicas que deberíamos estar usando para marcar nuestros documentos. Para hacerlas buenas para los lectores de pantalla y los discapacitados visuales como Google sabe qué. Digamos que quiero hacer de este mi encabezado porque estas todas las cosas del encabezado van en esto. Tiene mi logo en ella, tiene mi navegación. Normalmente es lo que ponemos en el encabezado. Lo hemos llamado líquido de contenedor. Lo que podemos hacer es llamarlo div, fluido de contenedor. Simplemente no lo llamemos div. Vamos a llamarlo cabecera. Aquí abajo, has cambiado la diagonal de div a encabezados así sobre la apertura y el cierre al encabezado. Nada va a cambiar realmente en nuestro sitio. Echemos un vistazo, se ve exactamente igual que antes. Déjame volver a un 100 por ciento. Pero ahora está marcado correctamente. Lo mismo con nuestra navegación, las navegaciones aquí dentro, en lugar de llamarlo div voy a llamarlo nav. Tengo que asegurarme de que cambié el nav de cierre. Es así como lo mantuve separado para esta clase solo para que sea agradable y fácil. Pero ahora que nos estamos acostumbrando, vamos a poner en nuestro contenedor adecuado, todo es específico para HTML5. Necesito una etiqueta principal. En realidad voy a dejar la etiqueta principal. El encabezado, la navegación, el pie de página, realmente claro y útil. Aquí hay uno principal. Es útil. Pero consigues bien la idea. Simplemente puedes asegurarte de que estás usando clases de navegación. Golpea una clase con un fluido contenedor o clase div. Realmente no importa, pero deberíamos estar usando un marcado HTML5 específico. De acuerdo, eso es todo para este video, te veré en el siguiente. 108. Cómo cambiar la disposición de Bootstrap, en celular o máquina de escritorio: Hola ahí. En este video, vamos a ver cómo ajustar el diseño Bootstrap o la cuadrícula dependiendo del diferente tamaño del dispositivo. Entonces por el momento estamos en una pantalla muy bonita, grande, grande. Tenemos cuatro cajas de características abajo y dos, el logo y el nav lado a lado. ¿ Quieres bajar un poco más bajo, puedes ver que se rompe en tres cajas de características? Estos tipos siguen estando uno al lado del otro. Pero cuando llega a la pantalla realmente pequeña, todos simplemente van de ancho completo. Entonces logo, nav, y todas las características se apilan uno encima del otro. Ese es el objetivo de este video. Vamos a saltar y a trabajar como hacer cajas de características. Está bien, si lo estás siguiendo, cerremos nuestro último pequeño proyecto y hagamos uno nuevo. Esto se va a llamar layout-c.html. En este caso vamos a hacer un archivo CSS de layout C también porque vamos a ir un poco más lejos en cosas como las consultas de medios. Entonces vamos a hacer layout-c.css. Vincularemos a los dos juntos en un segundo. Entonces los voy a separar para que estén uno al lado del otro. Vamos a trabajar en el HTML. En realidad vamos a hacer trampa y agarrar la mayoría de las cosas del diseño B. Copiarlo todo, moverlo a través, pegarlo. Vamos a eliminar los estilos. En realidad, podríamos quedarnos con la caja 1, lo reutilizaremos. Pero todo lo demás en la etiqueta de estilo que vamos a eliminar. Todo en la etiqueta del cuerpo va a ir también. Estás muy justo por debajo de una bonita página sencilla que incluye un enlace al CSS Bootstrap. Ahora queremos enlazar a nuestro propio CSS. Entonces vamos a enlazar con el que acabamos de hacer ahí. Predictivo puede ser útil y a veces doloroso. Estaba tratando de agregar la cotización, la apertura y el cierre, que es genial, pero no realmente lo que quería entonces. Layout-c.css. Solo comprueba que es antes de que te vayas. Llamemos a este H1 con mybox aplicado. Por lo que H1 con una clase de mybox1. Pondré algo de texto aquí. Es mejor hacer esto, sobre todo cuando estás aprendiendo porque podrías llegar bastante lejos y estás como, “Oye, soy bastante bueno en esto”, y luego algo está roto y tú dices : “¿Dónde rompí eso, en qué etapa?” Vas a empezar el desempacarlo. Está bien. Entonces aquí vamos. Sé que está funcionando porque estamos en H1 con fondo de tomate grande. Entonces está funcionando. Para eso lo quería. Echemos un vistazo a nuestra maqueta. Es en tu proyecto cuatro expedientes de ejercicios. Este es el último de aquí. Vas a ser como, “No lo dibujaste”. Empecé a dibujarlo y dije : “En realidad, es fácil sólo mostrarte así, principalmente por los raros espacios y cosas aquí dentro y mostrarlos en comparación entre sí”. Mi página es demasiado pequeña. Entonces vamos a tener una versión grande, mediana y móvil. Esto es realmente importante cuando se trata de, se hace más fácil, eso lo sé. Entonces hice mi diseño en XD o digamos Photoshop o Adobe Illustrator, en lo que sea que lo hicieras, vas a tener que considerar lo que sucede en este dispositivo móvil especialmente. Se puede ver lo que hemos hecho en este logo top, logo lado a lado. En tablet, decidimos realmente efecto está bien todavía, pero en el móvil lo vamos a dividir para que el logotipo esté encima de la navegación. Eso es realmente importante porque quiero que estas sean seguidas aquí, pero no seguidas por aquí. Te voy a mostrar cómo dividir eso. Sí, esa es la razón por la que esta, ésta y esta tercera no están seguidas. Necesitan estar separados porque en ninguna etapa a través de todos estos diferentes diseños, el cuadro de héroes se une a estos tres. Entonces ahí es donde tienes que pensar : “¿Puedo poner una goma alrededor de estos tres en cualquier etapa, en una línea?” Ninguno de ellos. Están todos separados. En tanto que las cajas de largometrajes, todos estos tipos, pesar de que están separados aquí, están todos juntos en éste. Por lo que necesitan estar en una fila y sólo vamos a hacerles 12 columnas de ancho. Por lo que llenan todo el asunto en el móvil. No te preocupes si no lo haces bien la primera vez, pero puedes empezar a mirarlo y a ir, “Está bien, así que si todos estos van a estar de este lado, así que los voy a reventar en fila y pegar las pequeñas columnas y separarlos más adelante”. Muy bien, entonces hagamos primero este primer trozo. Es reiterar lo que hemos hecho. Haremos unos atajos a medida que avanzamos. Entonces vamos a empezar con un contenedor de puntos porque no necesitamos que sea fluido. Dentro de aquí vamos a poner nuestra fila y dentro de esa fila va a tener dos veces dos columnas y dentro de eso vamos a añadir el mybox. Entonces vamos a hacer otro contenedor llamado mybox1 así que “Enter”. Si esa sintaxis y tú dices : “Hombre, nunca puedo conseguir eso. Se tarda para siempre”. Sí lo hace. Ni siquiera soy tan bueno en ello. Sé que me ahorra mucho, así que vale la pena acostumbrarse. Como eso funciona, tengo un contenedor con una fila. Hay dos llamadas dentro de ella con mybox div dentro de esas. Echemos un vistazo en el navegador. Apágalo, enciéndalo de nuevo. Ahí está. Pasaremos de jitomate a otro color aleatorio. En realidad sólo tienes que hacer click en jitomate. Yo voy a escoger. Todavía no hemos usado el amarillo. Usemos un cálido sol, llamemos a ese color. Tenemos esa primera parte. ¿ Qué más tenemos que hacer? Tenemos que hacer la caja de héroes para que esto pueda estar en su propia fila, en su propia columna. Entonces digamos debajo, así que contenedor antes de que eso se cierre, voy a poner unos buenos espacios sólo para que sepa dónde está todo, lo mismo contigo. Bien. Te mostraré un poco de sintaxis de codificación. Entonces hemos hecho esto. Fila, quiero solo una columna dentro de ella, pero quiero algún texto dentro de ella, en lugar de tener que escribirlo. Lo pones en los tirantes rizados. ¿ Ya hemos cubierto esto antes? No lo sé. No puedo recordar si lo hice. Tirantes rizados al final de esto significa que va a poner algún texto de marcapasos. Vamos a decir, “Caja de héroe”. Al final de esto, vamos a dar vuelta, no. Nos vamos a poner otra vez un corsé rizado. Necesitas esto para activarse cada vez, lo cual es un poco molesto. Entonces simplemente lo eliminé y comencé de nuevo y fue : “Oh, te refieres a los atajos de imagen”. Eres como, “Sí”. Se puede ver que se pone en pantallas de texto texto texto automático si tienes corchetes al final. Echemos un vistazo a nuestro navegador. Tenemos otra caja. En realidad, lo olvidé. Estás como, “Eso no funcionó entonces”. Yo lo sé. Muy bien, ahora vamos a poner en mybox1 con las llaves dentro llamadas caja de héroe. No mucho de atajo ahora, pero consigues lo que quiero decir. Está bien, tengo un quiz pop para ti. Yo quiero que lo paren y quiero que vean si pueden hacer estos cuatro, todos en la misma fila. Va a ser una fila, cuatro columnas. Dentro de estas cuatro columnas va a estar nuestro div mybox y dentro del div mybox quiero texto todo diciendo característica. No pongas el uno, dos y tres. Simplemente pondrá lo mismo a todos. Simplemente escribe la palabra característica y puedes agregar uno, dos, y tres después. Así que pausa ahora y te frustras e intenta ver si puedes hacer que funcione con la sintaxis de suite. Simplemente puedes escribirlo. Te mostraré en un segundo. Ve tú hazlo. ¿Lo hiciste? Si no lo estás, voy a tratar de hacerlo contigo. Aquí es donde es un poco de flexión mental. Entonces quiero una fila. Dentro de esa fila, quiero una columna, quiero cuatro columnas. Ahí es donde la mayoría de la gente se equivoca. Agregan los tiempos cuatro más adelante, después de la mybox. Entonces quiero cuatro de ellos. A veces cuatro incluso. De acuerdo, dentro de eso aunque quiero una.mybox y dentro de esos mybox, quiero la palabra “Característica”. Voy a golpear retorno en el teclado porque es bonito. Se puede ver el pequeño punto para llegar a la pantalla. No me puedes ver señalando, pero puedes ver el pequeño predictivo. Voy a mover mi ratón. Ahí está, ahí. Ya está listo para irse. ¿ Eso funcionó? Tipo de. Voy a dejarlo. No lo sé, su característica de sonar exótico. Echemos un vistazo. No funcionó en absoluto. Yo lo llamé mybox y no mybox1. Eso está bien. Está mangueras abajo afuera, no estoy seguro si realmente puedes escuchar eso, es bastante guay. Poco de lluvia. Lo que queremos hacer es que en realidad solo agreguemos el texto a nuestro logo. Yo lo voy a agregar a nuestro Nav y mirar, y queremos hacer un par de cosas. Nosotros queremos, veamos nuestro ejemplo, en el escritorio, está dividido en dos, pero aquí no lo es. Es cien por ciento de ancho, se dividen en la parte superior están las líneas. Siempre comienzas a trabajar con el móvil primero en mente, cuando estás trabajando con bootstrap. Digamos que quiero que estas dos llamadas sean 12. En realidad no necesito decirle a éste que tenga 12 años, pero lo haremos de todos modos, solo para ser consistente. ¿ Por qué no estoy metiendo, digamos, xs? Porque yo quería ser una verdadera pequeña, recuerda, asumen que si no le das una medida, asumen que te refieres al tamaño más pequeño posible que es xs, o la vista móvil, echemos un vistazo y vamos a hacer clic derecho en él, vamos para Inspeccionar, asegúrate de que las previsualizaciones del dispositivo estén encendidas, y vayamos a responsive, bajemos a la más pequeña, y es verdad. Se ha hecho doce porque todo el camino al otro lado. Pero debido a que podríamos haber hecho 12 en el de abajo y fluye hacia arriba, todos son 12. Lo que tenemos que hacer en alguna etapa, tenemos que decidir en realidad necesita ser más grande. Lo que vamos a hacer es dejarlo como un cien por ciento ahí, pero una vez que lleguemos a este punto de vista, que es el xs, sm, md para medio, ahí es donde quería cambiar, un tamaño de tableta. Te voy a decir, vas a tener doce años hasta que llegues a llamar a md, y quiero que seas seis, que es la mitad de los 12. La otra cosa extraña es que no necesitas hacer, y en realidad no necesito nada en esto. Puedo dejar esto como llamada, porque primero vamos a echar un vistazo. Veremos la versión pequeña, es 12 de ancho, luego llego a este medio, y se divide en dos. El motivo por el que no tengo que hacer nada con el Nav, es el Nav simplemente va, haré lo que sea que me digan basado en el tipo que está delante de mí. Este tipo o chica dice: “Soy chicos sexys bien, voy a llenar el resto de la fila, si éste dice: “Tengo 12 años”, dice, “Bueno, voy a bajar a la siguiente fila porque no hay lugar”, muy obediente. Segundo hijo, no es cierto en mi familia, pero hey hoo. Lo siguiente que quiero hacer es que quiero meterme con estas cajas de características, y aquí box no necesita hacer nada, son 12, 12, 12, 12, son estos chicos de largometraje, así que por defecto, quiero que sean 12 al otro lado, así que llenarse en mi dispositivo móvil, pero después quiero que sean tres seguidas, y luego cuatro seguidas. Faltan uno de esto, que se apagará un poco más tarde. Tenemos que entrar y tenemos que decir, “cajas de características”. Tenemos que decir, “Oh, me gustas”, vamos a ver lo que hace por defecto y a veces, echemos un vistazo, bajemos. Se puede ver, cuando se reduce a un tamaño realmente diminuto, en realidad dice : “No puedo hackearlo” tus cajas de funciones necesitan ir al cien por ciento porque simplemente no hay espacio suficiente para que el texto encaje. El texto va, él es justo cuando se va el texto, si tuvieras un gran poco de texto aquí a lo largo del camino, se rompería antes, y tú estás como, oh, yo puedo dejarlo así, y tú estás como, no, vamos a ser realmente específico con él. Digamos cuándo está en xs. No necesitaba escribir xs, quiero que sean 12, y en realidad son 12 para ellos. Multi curser, manteniendo presionada la tecla Opción en el Mac, tecla Alt PC, y vamos a decir, me gustaría que la llamada sea 12. Todos estos tipos van a ser doce por defecto. Comprobando el navegador todo el camino hacia arriba, y no es cierto qué está haciendo, he hecho algo mal. Mi caja, esta llamada lo hice en la cosa equivocada. Lo hice aquí dentro de mi cajita interna, necesitas hacerlo este tipo. Vamos a pasar al Comando D sólo para lanzar más atajos. Comando D en un Mac, Control D en PC porque tengo, col, col, col, y voy a decir en realidad es llamada guión 12. Echemos un vistazo a la vista previa y puedes ver ahí es característica es todo el camino a través, 12 en todos ellos. Ahora, lo que quiero decir, tengo un flub streaming y así que en realidad cuando llegue a md, digamos llamar md, me gustaría hacer ¿qué estamos haciendo con ese? Tenemos que dividir 12 por 3, es 4, creo, vamos a echar un vistazo, aquí vamos. Entonces es pequeño, es de 12 de ancho, pero cuando llego a este medio ahí, se dividen en tres unidades, porque he dividido las 12 filas por 3, lo que equivale a 4, y vamos a apagar esa y en un segundo, Hagamos el último cuando se pone a grande, que es éste, quiero cambiarlo a cuatro filas a través, va a llamar a lg, y tiene que ser 3, 3, 3, 3, 3 es igual a 12, eso debería funcionar. Doce a través, cuatro a través, tres cruz. Estoy hablando de columnas aquí, confundiéndote, pero consigues lo que quiero decir bien y todo lo que necesitamos hacer es asegurarnos de que usamos esta sintaxis. Un par de cosas que quieres hacer, apagémoslo primero y apaguemos a este tipo, en realidad, y lo haremos en el siguiente video, quiero recapitular antes de dejar esto, es que, hey Dan, solo estás diseñando para estos tres. ¿ Por qué no has hecho una para xl, o sm, porque hay cinco consultas de medios. Hay extra pequeño, pequeño, mediano, grande, extra grande. ¿ Por qué no te has burlado de esos arriba en tu maqueta aquí? Encuentro que no puedo tomar realmente buenas decisiones de diseño sin que realmente lo vea siendo responsive, así que hago grandes paradas, haré pequeñas, medianas, grandes, y luego solo una vez venderé el cliente en esto y luego me ajustaré para los otros sólo si necesito. No voy a tomar decisiones conscientes realmente grandes porque hay tantos tamaños diferentes, así que me burlo para esto, y entonces sólo ahora o cuando empiece a conseguir algunas de las imágenes y algunos del texto en, voy a empezar a hacer, en realidad, es hacer cosas raras entre éste y éste, y yo sólo voy a ir sobre la marcha, lugar de volver a mis herramientas maquetas como xt, o un boceto, realidad sólo voy a hacerlo en el código de vuelo y salir bien, esa imagen parece que se hubiera alimentado pero no lo hace o se lleva de nuevo raro, así que voy a agregar para esta caja de características en particular, voy a decir que voy a hacer el, tal vez el xl porque puedo caber cinco de ellos a través. Por eso estoy ignorando las otras consultas de medios, puedes ignorarlas y solo usar llamadas, vale, y solo asumir que el móvil o va a ser para tu sitio, pero probablemente necesites un mínimo de lidiar con lo extra pequeño, el tamaño diminuto, y el grande. Esos son los dos como mínimos hacen versiones grandes, versión pequeña, y luego cualquier cosa en el medio, depende de ti si quieres gustarte cuánto tiempo quieres pasar y los diferentes in-betweens. Pero probablemente, son realmente comunes uno es pequeño o extra pequeño y mediano para tabletas y luego grande para cosas de escritorio y luego no te preocupes por las pantallas gigantes, o el extraño teléfono móvil paisaje, que es sm, el pequeño. Ahora, estos son solo los papeles de Dan. No pienses que podría estar mirando a una empresa más grande. Dirán, usan todas las consultas de medios y en realidad podrían agregar algunas de las suyas propias. Podrían sumar siete de ellos, diez de ellos. Tan solo para asegurarse de que su navegador funcione mejor. Amazon se va a preocupar por ello. Quieren pantalla completa, mejores usos de la pantalla, para mí y mis clientes, voy a pequeños trabajos para empresas más pequeñas, así que termino haciendo lo suficiente y no haciendo uso exacto basado de todos los diferentes tamaños de pantalla, sólo porque tampoco tengo eso, ni la capacidad ni el presupuesto para hacerlo. Esa es mi renta. Renta más, a continuación al siguiente video. 109. Cómo encender y apagar cosas en tu sitio web usando Bootstrap 4: Hola ahí. En este video, te vamos a mostrar cómo encender y apagar cajas usando Bootstrap 4. tienes cuatro cajas de características abajo. Vamos a hacerlo más pequeño. Todavía son cuatro. Una tableta es solo de tres porque eso es lo que cabe basado. Pero bajamos al móvil. El cuarto está de vuelta otra vez. Te vamos a mostrar cómo encender y apagar la pantalla para diferentes cajas usando Bootstrap. Queremos desactivar una de estas cajas de características en la vista de tableta, en nuestro MD. Porque por el momento, lo puedes ver aquí en MD. Tengo a este cuarto tipo que necesita desaparecer. Es súper simple. El documento es getbootstrap.com utilidades de documentación, y está en exhibición. Desplazándose hacia abajo, terminas con este llamado ocultamiento de elementos. Es simple y en la flexión cerebral al mismo tiempo. Lo que han hecho felizmente es que te han dado como todos estos casos de uso. Sólo pregúntate, ¿qué quieres hacer? Lee a través de ellos, escoge cuál, aplica estos. Básicamente está en d, es la abreviatura de visualización. Eso lo hemos hecho en cursos anteriores, quiero decir que no mostramos ninguno y display block. Vamos a estar cambiando entre estos dos. Si no escribo inmediata extinción de consulta como pequeña, solo escribo d-none. Se va a asumir que todos no son ninguno. Entonces d-none es básicamente la versión de teléfono móvil. Debido a que fluye móvil primero, fluirá a través de lo pequeño, mediano, grande y excel. Eso si los apaga todos. Se puede ver aquí escondido sólo en el extra pequeño. Está apagado para todos ellos, incluyendo extra pequeño. Pero entonces el siguiente código de medios lo has vuelto a encender diciendo en el bloque pequeño y como es MD y más grande después, todos se convierten en bloque y todos son visibles. Sí se pone un poco confuso. Hagámoslo solo por nuestro ejemplo en código VS. Es este cuarto. Voy a agregarles números. Hagámoslo un poco más fácil, 2, 3, 4. Acabamos de añadir otra clase a esto para decir en, ¿qué vamos a hacer? D para visualización. ¿ Cuál vamos a hacer por medio? No vamos a hacer nada. Guárdalo para echar un poco de mirada. En mi ejemplo aquí, se ha ido. En pequeño, está ahí. Nuestro extra pequeño está ahí. Entonces un pequeño, que es esta consulta de medios aquí. Está ahí. Pero luego un medio, se ha ido. Pero en libertad, también se ha ido. Porque fluye aguas abajo y porque empieza en el móvil primero, te das la idea. Vamos a volver a encenderlo después de medio porque hemos tendido un medio, volvamos a encenderlo en libertad. Digamos en la pantalla, en LG está de vuelta a bloquear. Ojalá, boom. Está encendido aquí abajo, apaga ese medio e incrustar en lo grande. Entonces otra vez en extra grande, sigue ahí por ese bonito flujo. Una última cosa que quiero mencionar justo mientras estamos aquí es que algunos de los enlaces que he tenido, o algunas de las búsquedas que haces en Google, podrías terminar en getbootstrap.com y los docs. En realidad tiene el número de versión aquí. Esta es la primera versión de cuando pasó a 4.0, tardó una eternidad en llegar, pero pasó de 3-4. En realidad estamos hasta, si tienes un hogar. Bueno, cuando hice este video, estamos en, ¿dónde estábamos? 4.3.1, probablemente vas a estar mucho más alto. Probablemente sigues levantado a las 4. Eso es 2019. Si estás viendo dentro del próximo par de años, no tengo idea realmente. Pero comprobarás esto y apuesto, sigue a las 4, pero esto va a cambiar. El documento, cuando lo cambian, realmente tienen que actualizar la documentación. Podrías terminar en una vieja mejor documentación como esa. Ese enlace que encontré me mandan al 4. Si voy en lugar de usar una búsqueda de Google para encontrarla, voy a Bootstrap y voy a la documentación. Yo voy por el largo camino. En lugar de usar Google para encontrarlo, entro en Utilidades, Display. Entonces más abajo aquí, está escondiendo elementos. Se ve exactamente igual, pero se puede ver que estamos en 0.3 porque uno de esos cambios de tal vez 4.2-3 podría ser, vamos a cambiar esto de la pantalla porque no está funcionando. Este índice podría ser completamente diferente, o podría estar trabajando en un sitio más antiguo. Estás trabajando en el sitio de otra persona, y han construido este sitio en una versión antigua de Bootstrap. Aquí puedes ver nuestra visión de Bootstrap es que estamos haciendo referencia al CSS desde su página web llamada 4.3.1. Si estoy lidiando con solo 0, algunas de las cosas nuevas que se han actualizado desde entonces podrían no funcionar, tendrán problemas. Básicamente la regla es, supongo que es sólo algo de lo que tener en cuenta. No te va a atrapar, probablemente. Porque lo que haces es cuando estás construyendo el sitio, lo vas a construir en cualquier versión y lo has escrito aquí explícitamente. Lo que pasa es que va a Bootstrap en busca de esa versión y utiliza tu sitio web en base a todas las reglas que aplicaron cuando eso se hizo. Esto podría ser de 10 años a partir de ahora ya que casi los sitios web de Bootstrap siguen yendo, tendrán el 4.3.1 allá arriba que hará referencia para usar este sitio web, por lo que seguirá funcionando. A pesar de que podrían estar después de la visión 20 por ellos. ¿Eso tiene sentido? Todo lo que quiero hacer es solo asegurarme, pasar por el largo camino, solo para asegurarme de dar click en la documentación, averiguar dónde está, o al menos solo echar un ojo aquí arriba para ver con qué versión estás interactuando realmente . Está bien, ya basta para este video. Saltemos al siguiente. 110. Cómo recrear las consultas de medios de Bootstrap en tu propio CSS: Hola ahí. En este video vamos a recrear todas las consultas de medios que Bootstrap utiliza en nuestro propio CSS que podemos hacer nuestros propios pequeños ajustes. Porque Bootstrap tiene algunos predefinidos, mira en las consultas de medios en la parte superior aquí, queremos recrear porque queremos que este texto aquí cambie de rosa a azul a rojo. Recreemos las consultas de los medios y pongamos una canción atascada en nuestra cabeza por el resto del día. Para este video queremos recrear las consultas de medios para que podamos anularlas. Queremos igualar el bootstrap una vez, no tienes que hacerlo, puedes hacer tus propias consultas de medios, pero sería raro y duro porque tendrías a Bootstrap luchando contra ti. Entonces si simplemente no quieres hacerlo, entonces podrías considerar como Bootstrap lo correcto para estar usando, o debería simplemente hacer lo mío? Dicen que nos encanta el MD, y nos encanta el SM y el ILG y ahí estaban bien, pero solo hay cosas que Bootstrap no puede hacer o no va a hacer no podemos resolver cómo hacerlo. Tenemos que recrear las consultas de medios CSS por aquí. Es bastante fácil de hacer. Voy a getbootstrap.com. y la documentación. Está bajo no puedo recordar. Contenidos? No, está bajo disposición. Simplemente desplácese un poco hacia abajo. Aquí voy a los puntos de ruptura. Simplemente puedes agarrar todo esto, copiarlo, pegarlo en código VS. Lo vamos a pegar en un par de cosas raras que tenemos que hacer es usar un comentario que es, esta barra de barra, es un comentario de una sola línea y no funciona para lo que estamos haciendo. Vamos a agarrarlo todo y simplemente envolverlo en l, como un correcto comentario CSS. Estoy usando el comando de acceso directo barra inclinada hacia adelante, y solo necesitas asegurarte de que el hash de barra hacia adelante vaya a cualquiera de los lados. Va a ser lo mismo para ti mi amigo. Creo que esto es para el archivo CSS. Nunca usé ese comentario de todos modos. La otra cosa que tiene que suceder es que esto realmente necesita estar en la cima porque esto es lo global. No, lo hicimos global antes. Extra pequeño, considerado global. Hicimos escritorio antes sobre Bootstrap le gusta hacer oficina móvil. Enfriar las otras cosas es estos puntos solo marcador de posición. Voy a mandar D ellos. Tengo todos ellos controlarán D en un PC y los eliminaré, se ponen sus diez para que tenga todos mis dispositivos multimedia separados listos para funcionar. Para demostrar su trabajo, entremos a nuestra caja de héroes del logo. El héroe box put es en un H1 dentro de esa caja un bateador clásico. Voy a decir que el default para ello va a ser algún H1 va a ser, digamos color de rojo. Simplemente vamos a trabajar nuestro camino a través de consultas de medios. Ya sabes cómo funciona esto para que eso sea predeterminado. Si no lo cambio en ningún otro lugar, va a fluir por el documento y eso va a ser no importa en qué tamaño de dispositivo esté encendido, va a ser rojo a menos que diga en pequeño. Te voy a hacer bucle. Hagámoslo en algunos de ellos. Saltemos medio. Hagamos éste. Escojamos un color más exótico. Te vas rosa y extra grande también ignorará. Debería funcionar. Echa un poco de mirada en debería empezar en rojo luego quedar anulado a azul, luego va a rosa en mi grande. Puedes tener esto aquí, encaja perfectamente bootstrap, así que va a cambiar con el, digamos, como en este caso L trataría de los cambios de estructura. Como tal podría tener que hacer del H1 un tamaño más pequeño o un color diferente , hay algunos tamaños predeterminados que puedes usar para el texto. Podemos verlo un poco más adelante pero habrá tiempo de comer como uno que me guste. Basta con hacer lo que yo diga por favor. Un par de cosas que poner en orden antes de irnos, realmente deberíamos llamar a este contenedor. Deberíamos llamar a esto en lugar de un div, deberíamos llamarlo bateador. Este de aquí debería ser bateador de corte. Con mi nav esta es caja dentro del bateador debería ser esto y debería ser aquello. Mi caja de héroe aquí debo llamar a esto es uno principal. El cierre de la principal. No tengo foto por el momento. Yo quiero acostumbrarme porque hemos hecho filas y columnas manteniéndolo separado, pero encontrarás esta clase aplicada a todo tipo de etiquetas diferentes en HTML. Eso va a ser. Gracias por ver. Gracias poco medular. Te veré en el siguiente video. 111. Cómo usar "Inspeccionar elemento" de Google Chrome: eliminar estilos invalidantes de Bootstrap: Hola ahí. Este video es todo sobre cómo las manos sé lo que está haciendo este fondo gris y este botón azul y ese tamaño de los textos y Bootstrap cuando no lo creé. Te voy a mostrar cómo usar la inspección de Chrome para cavar por ahí averiguar qué es CSS, y luego decidir si anular o no anular. Esa es la pregunta. La parte principal es usar la extensión de Chrome o las herramientas de desarrollador de Chrome. Pero en realidad vamos a quitar el fondo y cambiar el tamaño y el color de la H1 mientras estamos aquí. Está bien. Vamos a quedarnos atrapados. Está bien. Antes de que empecemos, vamos a hablar de la batalla que tenemos ante nosotros. Esta va a ser nuestra prueba más grande aquí, y va a ser lo último para este curso es el proyecto 4 nuestra bondad medi yogourt. Ahora, esto se va a poner a prueba aunque desconocido, vale, porque estamos haciendo no sólo construir en nosotros mismos, con cosas que sabemos, en realidad vamos a empezar a interactuar con Bootstrap. Empezamos construyendo solo lanzando y todos los pedacitos y piezas, tal vez un Jumbotron y cayó ahí abajo, y así lo tiramos todo ahí dentro, fue súper rápido. Ahora, vamos a hacer batalla con Bootstrap usando todo el conocimiento que aprendimos antes en el curso, y tal vez no lo pienses como una batalla, piénsalo como un rompecabezas. Todo se puede resolver, y te voy a dar trucos en esta sección mixta del curso para resolverlos, y vamos a trabajar un poco más Bootstrapiness. Está bien. Vamos a estar ocupados. Volvamos a saltar al código VS. He cerrado lo que estábamos trabajando antes y reabierto nuestro índice y style.css. Se ve así por el momento, y por si acaso porque saltamos y salimos de este archivo un poco consiguiendo que Buddy vaya y se meta con él. Si encuentras un poco a través de este curso o al menos a través de este video, eres como el mío no está haciendo lo mismo. Es posible que quieras ir a los archivos terminados y abrir el mío. He hecho uno especial, en lugar de guardarlo al final del video, he hecho éste que dice comenzar. Los archivos completados estarán en una carpeta en tus archivos de ejercicio, busca el que diga empieza si quieres igual, empecemos con la versión de Dan para que cuando yo siga, nada salga mal. Está bien. El primero que quiero hacer es que nos vamos a saltar el nav porque es un poco más complicado, y si aprendemos algunas de las partes más fáciles como este Jumbotron y estas tarjetas, entonces podremos volver a la barra de navegación y será mucho más fácil. Vamos a empezar con un Jumbotron, que es esta gran cosa de aquí. Vayamos al código VS. Lo que quiero hacer es que primero quiero deshacerme del fondo gris. Porque lo he mirado, no es lo que quiero en mi diseño, así que estoy revisando. Tienes una maqueta en tus archivos de ejercicios para ver qué estamos haciendo. Exercicio Archivos, proyecto para yogur y hay una maqueta. Ahí hay un PDF con tanto la versión móvil como la versión de escritorio. Voy a abrir el archivo real en XD. No hay color de fondo, voy a ver a través del fondo. Ya hemos agregado el gradiente antes, por lo que ahora necesitamos eliminar el color de fondo. Esto trae a la luz un punto realmente bueno como ¿cómo sé qué controla el color de fondo de un jumbotron? Vamos a usar Google Chrome. Vamos a usar esta inspección. Esta cosa de aquí me va a enloquecer. Se va a seguir moviendo, todo el camino, ¿no? Lo es. Está bien. Viviremos con ello. Aquí arriba, vamos a hacer clic derecho en cualquier parte del fondo gris. Vamos a ir a este dice inspeccionar. Lo que voy a hacer es que voy a apagar la vista previa de mi dispositivo, así que sólo me muestra todo el asunto. Voy a tener que mover un poco mi app. Voy a esconder esa cosa ligeramente, porque me molesta. Vamos a dar clic a este botón aquí. Esto de aquí es como un botón de movimiento interactivo que empezará a resaltar las cosas. Puedes ver el HTML, mantén un ojo aquí abajo. Simplemente salta y se abre dependiendo de lo que tengo rondado arriba. Voy a dar click donde siento que tengo el fondo del jumbotron. Te dice qué clases se aplican al div, así que algo llamado jumbotron. Por aquí, dice la clase jumbotron y usar estos pequeños tamaños le está dando algo de caricias. También, Jumbotron en general, sin una consulta de medios le está diciendo que tenga un margen en la parte inferior de dos resmas, y un color de fondo de este gris. Eso es lo que quiero abordar. Yo quiero abordar el jumbotron, el color de fondo y cambiar eso. Esa es la forma de indagar en el Bootstrap y de elaborar lo que necesitas para cambiar. Podrías ir a través de la documentación e intentar resolverlo, pero a menudo más fácil es solo un clic derecho e inspeccionar y luego encender esta, y luego hacer clic en ella. Vamos a buscar eso, hagamos una clase llamada jumbotron, así que ahora CSS. Voy a decir que dot jumbotron va a tener un color de fondo. Color de fondo de. Yo sólo voy a escoger cualquier color viejo, y luego poner mi punto y coma de cierre, luego un hover encima de él y sacar esta cosa aleatoria que aparece, entonces sólo voy a bajar directamente para ver completamente a través. Realmente no importa de qué color sea siempre y cuando sea completamente transparente. Este último tiene que ser cero. Vamos a comprobarlo en el navegador, y ahí vamos. Hemos quitado ese fondo, ese pequeñito sigue deslizándose, pero hemos quitado el color de fondo. Está bien. Lo siguiente es este H1, vamos a meternos con el tamaño. El tamaño y el color, y no está del todo coincidiendo con mi maqueta. Mi maqueta, quiero que sean unos 70 pixeles, y aquí dentro, lo que pueda hacer de nuevo, puedo dar click en este pequeño elemento inspeccionar y luego dar click en él. En realidad, sólo puedo pasar por encima de él. [ inaudible] Dice su fuente, ¿se puede ver justo encima de ella? Realmente no puedo hacer click en él. Pero dice que la fuente es de 56 píxeles, lo cual es raro. Eres como, oye, pensé que estaba siendo, puedes verlo por aquí, he hecho clic en él. Dice que se exhibe lleno, lo que lo está haciendo 1.5 resmas. ¿ Como por qué es 50 por aquí, o 54? Es porque en realidad esto es como decirle al navegador que debe ser 3.5 veces el tamaño predeterminado. El navegador hace el cálculo y termina siendo 54. Eso es lo que está diciendo el CSS, el navegador ve el resultado final. Yo quiero que sean exactamente 70. Este sería un buen caso de ir y decir en realidad solo voy a anular el H1 y digo que tus H1 son un tamaño de fuente específico de 70. Tamaño de fuente 70 píxeles es lo que equivale. Es 70 veces fue un 0.0625. Estás recordando eso todavía, ¿lo has escrito en alguna parte? Es un 4.3, así que va un poco más alto. Podría decir que ahora, quiero que sean cuatro puntos. Podría decir sólo 4.3 resmas. ¿Funcionarían? Probablemente no. Porque lo que hay dentro, echemos un vistazo. Puedo hacer clic con el botón derecho, inspeccionar. Se puede ver por aquí todavía es 3.5, y me está diciendo aquí abajo, mira, tu H1 está tratando de decirle que sea 4.3, pero ha sido tachado y anulado por este. ¿ Por qué? Volver a esta cosa llamada especificidad. Aquí, H1 es muy vago, puede ver que H1 es lo que se está aplicando a esto. Pero luego hay una clase encima que es mucho más específica decir, hacer esta otra cosa. Lo está anulando. Si queremos que eso surta efecto, necesitamos eliminar esta clase de la misma y funcionará, así que echa un vistazo. Ahora, se puede ver que es de 4.3 resmas o llantas, y haciendo clic derecho aquí arriba, inspeccionar realmente usa esta opción, y se puede ver que es de 68.8 pixels case porque dejé algo de eso debería haber puesto en 3.75 para conseguirlo exacta. Eso podría ser un caso, somos como en realidad esa es una buena idea. Voy a deshacerme de todo eso. Pero anular o no anular, eso simplemente funciona totalmente. Digamos que no quiero hacer eso. Yo quiero mantenerlo agradable y limpio. Porque nos arreglamos por aquí y lo deshacemos. Ese lleno estaba cerca, si pudiera subir hasta cinco. Lo que sí muestra cinco comprobará en un segundo, pero sólo vamos a ir. Es mucho más pequeño. Es la otra manera que queremos ir tres se pone un poco más grande. Se puede ver ahí, en realidad está a 72 píxeles ahora, lo cual es como si fuera bueno como lo era 68 en términos de estar un poco apagado, por lo que hay muchas clases para controlar cosas como tamaños de fuente. Echemos un vistazo. Nuestra documentación de bootstrap, saber dónde está, es un problemático en la documentación. Puedes empezar con la búsqueda, tal vez hacer una búsqueda en google, pero terminarás bajo contenido y tipografía. Aquí están nuestros H1, 2's y 3's, así se ven por defecto. Entonces debajo de ella un poco más abajo, están las pantallas, tocamos esto antes. Se puede ver 1, 2, 3, 4. No hay cinco, ahí tal vez sólo fallido de nuevo a ninguno cuando me pongo cinco. Se puede trabajar con estos. Si estos funcionan, perfectos, tu manera, no lo hacen, entonces vas a tener que dejar de anularlo con tus propios estilos personalizados. Diciendo con el color de la fuente, digamos que quiero pasar, podría darle estilo a esto y darle un color, así podría ir fuente color blanco, pero ¿hay alguna clase? Entonces aquí en adelante a la tipografía, creo que mencioné eso abajo, color, color, color, en algún lugar de aquí. ¿Dónde está? Creo que en realidad está bajo Utilidades. Colores está ahí. Colores de garrapatas primarios, se puede ver que hay un montón de ellas hay éxito primario, secundario. Estamos buscando blanco, lo que garrapatas blancas, va a funcionar. Vayamos a agarrar eso. En lugar de crear una clase por aquí, haciéndola blanca, podemos simplemente decir realmente tú con eso, y tú haces las garrapatas lo que dice? Texto de punto blanco. Echa un vistazo a nuestro navegador y es blanco. Este es un punto muy bueno. Eres como, ¿por qué lo hice, no , cuál? Sí importa. Te vas a medio acostumbrado a esto si vas a abrazar bootstrap, porque vas a trabajar en otros sitios potencialmente que tiene Bootstrap. Si bien hacer las garrapatas blancas no es tan importante, lo que tiende a pasar es que estas se hornean con otras cosas, no sólo lo hacen blanco o en este caso lo hace. Pero veamos recordar que usamos el color, para las columnas. Sabemos que hay muchas otras cosas pasando donde se descompone en diferentes consultas de medios, y también otras cosas geniales. Por regla general, intentaría hacerlo en tu HTML usando clases prefabricadas, te vas a encontrar menos problemas, hasta que si comienzas a intentar anular muchas cosas, puede causar como efectos de golpe . Está bien. Hemos quitado el color de fondo del jumbotron, hemos cambiado el H1 por aquí, usando cosas Bootstrap. Supongo que la gran razón por la que hicimos este video es mostrarte cómo usar la inspección de Google Chrome. Vamos a mostrarte otra cosita genial que puedes hacer es, digamos que esto sigue adelante, ¿qué son estos, qué controla estos? Vamos a hacer clic con el botón derecho en ellos, ir a Inspeccionar, y su va a resaltarlo y decir que lo es. ¿Qué decía aquí abajo? Está resaltado en azul, y dice que es la clase llamada carousel-control-next-icon. Eso es lo que eso hace. Estás como ¿cómo lo hago? Ahora, puedes salir y encontrar esa clase y hacer o anular amines o encontrar otras opciones usando la documentación de Bootstrap. ¿ Qué haríamos si escribimos, resulta que sé que es prev no anterior, y hago clic en otro lugar. Puedes ver aquí, se conmovió a ser al revés. Es solo un buen ejemplo de que en realidad puedo editar el código por aquí y por aquí mientras estoy en Chrome solo para probar las cosas en lugar de volver a aquí, hacerlo aquí en mi copia de trabajo como, y luego probarlo luego deshacerlo. En realidad puedes hacerlo en el navegador usando Inspect de Google Chrome. Digamos, queremos cambiar el color de esto, o el color de esta cosa azul. Voy a hacer clic con el botón derecho e inspeccionarlo. En lugar de volver atrás y averiguar qué es el botón primario, puedo entrar aquí y decir, está bien, hay un color llamado esto. Voy a apagarlo para asegurarme de que estoy tomando lo correcto. No parece cambiarlo para nada, color de borde apagado. tanto que, consiguiendo su color a partir de ahora porque ese era el hover. Ver aquí abajo. Ahí está. No quiero meterme con el flotador, quiero meterme con éste, porque de ahí está sacando su color inicial, y puedo cambiarlo aquí. Puedo decir en realidad tu, si blanco, blanco toma sobre un fondo blanco, buen trabajo entonces. Pero supongo que sigo, quiero mostrarte cómo puedes simplemente meterte con las cosas aquí dentro y solo probarlas usando la inspección de Google antes de ir y trabajar en tu propio documento. Está bien. Eso es todo para este video. Google Chrome Inspect, las Herramientas de Desarrollador, súper servicial. Pongamos al siguiente video. 112. Cómo agregar sombras a textos y apartados en Bootstrap 4: Hola ahí. En este video vamos a añadir texto al borde uno a lo largo de la parte superior aquí. Bonito pequeño sutil. También vamos a cambiar este texto principal para que sea más grande y blanco. Vamos a mover el botón hacia arriba, eliminar un trozo de cosas que no necesitamos de nuestro sitio actual. Pero realmente lo que queremos hacer en este video es mostrarte cómo hacer ejercicio. ¿Está en Bootstrap? ¿ Necesito hacer mi propio estilo personalizado? Los procesos de eso, al menos los que uso. Vamos a ir. Este video es realmente un buen ejemplo de lo que sucede cuando Bootstrap no lo hace todo y tienes que hacer tus propias cosas. Estos son los lugares por los que paso por donde se obtiene bootstrap.com. Eres como, cuando caigo sombras, voy a conseguir una documentación, y voy a teclear, gota esperando que ahora caiga sombras. Voy a tratar de soltar sombra. Ahí vamos, tenemos sombras, ejemplos, utilidades. Probemos uno de estos. Impresionante. Algunas sombras prefabricadas. Eres como, “Excelente”. En este caso hay ejemplos y los puedes ver aquí. Sombra, pequeña. Sombra debe ser la regular y luego la sombra grande. Vamos a poner en el grande fue sólo a ver. Vamos a agarrarlo y se pone en escuchar. Eres como, “Fácil, hombre”. Buen trabajo. Bootstrap. Ya sabes que es un punchline. Elimina eso. Sí se rompe en dos líneas. Enfriar. Echemos un poco de mirada y boom. No es lo que quiero, quiero ejecutar un texto no ejecutar el bloque, el bloque H1. [ inaudible] No encuentro una visión de texto. Hice una búsqueda en Google y nadie tenía respuesta. Por lo que eventualmente llegas al punto que dices : “Se siente como algo que debería tener”, pero no tiene por el momento, al menos al 4.3 o al menos que pueda seguir o encontrar. Aquí es cuando es buen caso como, “Está bien. Vamos a hacer lo nuestro”. Vamos a crear una clase [inaudible]. Vamos a crear algo que se llama sombra sombra. No existe por el momento, así que lo vamos a crear por aquí. Lo vamos a llamar sombra, coludio y sombras caídas antes. Ahora podemos usar Bootstrap para ir rápido, pero podemos usar nuestras propias escuelas de diseño web de suite para extender bootstrap. ¿ Tienes idea de cómo se llamaba? Tú haces lo que yo hago. Deberías volver al viejo documento que tenías drop shadow sobre él e ir a buscar la clase que lo haga funcionar. Hacemos búsqueda en Google. Recuerdo que tomo sombra por enseñar y porque usamos muchas sombras caídas. Recuerda, es lo borrosa que es primero, recuerda que es x, y, luego borrosa y luego color. Para la x, no quiero que vaya a ningún lado. Significado cero. Para el y quiero bajar solo un par de píxeles. Qué borroso quieres el tipo de sombra de gota. Voy a tenerlo como dos píxeles borroso. Ya he practicado esto. Voy a teclear el color para negro sólo porque quiero volver derecho y dar click sobre él y bajar por aquí en alguna parte. He usado 15 por ciento, así que 0.153, esto funciona para mí. Entonces veamos si todo eso funcionó y miremos ese Bootstrap y tú mismo trabajando juntos para hacer un poco de sitio web. Un par de cosas más que quiero hacer antes de irnos es, ¿recuerdas esto? Esto se llamaba, creo Lead. Yo lo hice un poco más grande. Yo quiero cambiarlo, quiero hacerlo blanco y tal vez un poco más grande porque quiero que coincida con mi mark-up aquí con trozos carnosos reales. No he reconocido el yogur de carne. No pensé que fuera una gran idea. Pensé que era una idea divertida. Ahora estás atascado con él como un proyecto de curso. Dedico demasiado tiempo diseñando logotipos y productos. [ inaudible] es, soy totalmente vegetariano, pero me pareció gracioso en su momento. Queremos hacer esto blanco y más grande. Lo que haces es mostrarte el proceso porque ya hemos visto esto, ¿qué podemos hacer con él? Recuerda que hacemos clic derecho en él. Voy a ir a Inspect. Voy a comprobarlo y está usando esta cosa llamada plomo. Vamos a Bootstrap y entramos aquí y decimos LED, cuéntame más de un bootstrap. Nosotros decimos que suena bien. Tipografía, plomo. Dice que el plomo hace todo esto. Entonces no hay nada más. Estás como, “No hay anuncios como el plomo 1, el plomo 2. Sé que voy a tener que hacer una cosa personalizada. Entonces voy a entrar a mi aquí. Voy a decir.plomo. Te voy a usar mayormente, pero me gustaría que fueras un color de blanco, no de trigo. Blanco parejo. Yo quiero cambiar el tamaño. He resuelto el tamaño de fuente usando mi cálculo loco es de alrededor de 2.2 rems. Tenemos que cambiar el estilo del texto, lo haríamos, y nos desharemos de algunas de las líneas aquí abajo. En tu documento de texto que te di, puedes teclear esto. Grueso y cremoso, va a entrar en lugar de hola mundo. Gruesa y cremosa y con trozos de carne reales. Deshacernos de todos estos pretextos. Asegúrate de que no perdamos ninguno de los registros. Aquí vamos. Guárdalo. Ahora echemos un vistazo. Se está acercando a nuestro marcado. Dónde está nuestro marcado, ahí está. Estamos llegando ahí. Otra cosa que quiero hacer es que quiero el botón porque eso está en mi marcado ahí, es el botón lo vamos a cambiar, pero no hay línea y no hay texto, así que quería deshacerme de estos. En primer lugar, pop quiz. ¿Qué es esto? Pausa, échale un vistazo. ¿ Cuál es el hr y ahí está mi [inaudible]? Estoy esperando. ¿ En pausa? ¿Vuelves? Te vuelves. Por lo que hr recuerde es una regla horizontal. Se va a través, pesar de que dije en un tutorial anterior que ya no se acostumbra mucho como hr como regla, en Bootstrap, ignoran ese rol y lo usan de nuevo. ¿ Qué significa el mi? ¿ Te acuerdas? Ya lo tienes. Es margen y es el arriba y el abajo, el eje y y cuatro es sólo el tamaño de la misma. Entonces si lo hacemos más grande, va a tener más espacio. Si hacemos uno más pequeño, va a tener un espacio más pequeño. Pero no queremos nada de eso. No te queremos todo. Adiós. Dejaremos el botón ahí dentro, pero en lugar de decir aprender más, dice, ¿qué dice? Dice precios. Eso va a ser todo por este video y menos te está mostrando todo lo que hace Bootstrap y más sobre cómo te ejercitas, qué hace Bootstrap, qué tal vez tengas que hacer tú mismo como nuestra drop shadow y nuestra ventaja y puedes empezar a ver cómo [inaudibles] habilidades pre-bootstrap un ahora realmente útil. En las clases no es cosa ahora crear nuestras propias clases personalizadas y un montón de drama, nos estamos poniendo bien en esto, tú y yo. Nos pondremos aún mejor en el próximo video. Te veré en un segundo. 113. Cómo cambiar el tamaño y color predeterminados de los botones de Bootstrap 4: Hola ahí. Aquí vamos a abordar este botón. Vamos a pasar de azul y sólido a blanco y delineado y más grande y mejor. Se va a tener un pequeño flotador fresco también. Vamos a hacer todo eso ahora usando una mezcla de nuestro propio CSS y la bondad de Bootstrap. Está bien. ¿Qué queremos hacer con este botón? En primer lugar, quiero empujarlo un poco hacia abajo porque en mi mark-up aquí, está abajo un poco más allá. Yo quiero ir y hacer eso. Bonito, fácil. De acuerdo, entonces el botón aquí, ¿dónde está? Jumbotron está dentro de ella, ahí está el botón. Vamos a sumar una clase de. Recuerda que estaba marginada y quiero agregarla a la parte superior. Yo quiero que sea. No estoy seguro. Voy a probar cuatro. Es bueno ir. manera diferente una bonita brecha más grande. Eso servirá para mí. Está bien. Lo siguiente que quiero hacer es esbozarlo. Porque es un color azul sólido, quiero que sea un contorno blanco como mi maqueta aquí. Al instante estaba como, ninguna manera Bootstrap hace eso. Qué buen botón de contorno. De acuerdo, así que empecé a hacer mi propia clase solo para descubrir más tarde en hacer este tutorial como lo hacen. Buena. De acuerdo, entonces a veces puedes ser como si no hicieran eso. A veces solo necesitas revisar. De acuerdo, entonces aquí dentro escribí botones. Está bien. ¿Qué obtenemos? Botones, etiquetas de botones. Oh, mira, hay un botón de contorno. Vamos a dar click en botón, botones. De acuerdo y llegar a la página correcta. Hay un montón de ellos. Está bien. Ahí hay botones delineados. Por lo que sólo necesito usar la clase de esquema de. Yo quiero este. De acuerdo, así que quiero el contorno de botones de probablemente blanco. Tenemos luz uno. ¿ Tienen blanco ahí? ¿ No parecen tenerlo ahí? Vamos a probarlo. A lo mejor no pudieron tenerlo porque no lo podías ver. Démosle un rollo. Entonces vamos a decir BTN, en realidad no ahí y quiero separar clase. Ya tengo uno ya hay algo aplicado a ella llamado BTN primaria, esquema BTN. Vamos a adivinar para que el blanco vea si lo hacen. Vamos a comprobarlo. Eso no es hacer blanco porque está asustado. Está bien. Hace una versión ligera y ahora tienes que decidir cuánto. Porque es una ligera, ¿cuánto quiero realmente que sea blanca? ¿ Por qué no tenían uno blanco? De acuerdo, así que echemos un vistazo ahora. Luz. Sí. Al igual que ahora tiene que ser blanco adentro. Está bien. ¿Cómo vamos y lo cambiamos? Ahora vamos a pasar y decir en realidad este tipo de como pensarlo a través. Entonces hay algunas cosas que se aplican a este botón es algo llamado como etiqueta A, hay algo llamado BTN, hay algo llamado esquema BTN. De acuerdo, entonces hay un botón Lodge por el aspecto de la misma. De acuerdo, entonces mido y puedo poner un SEM para conseguir uno pequeño y agregamos el margen al top de cuatro. Entonces por aquí podríamos decir, Está bien, solo hagamos todos los botones es hacer BTN. De acuerdo, Bueno punto BTN. Vamos Daniel, BTN. Digamos que quiero el color. ¿ O quiero el color o hago un fondo? Entonces echemos un vistazo. Color de fondo. Sé lo que es, pero estoy tratando de que me guste contar una historia aquí. Color de fondo blanco. ¿Eso es correcto? Al igual que no es lo que quiero. Yo quiero que el contorno sea blanco. El otro problema es que BTN fondo blanco. Vamos a cambiarlo a rojo sólo para mostrarte. Creo que es demasiado genérico porque como se está acostumbrando allá y por aquí. De acuerdo, entonces tenemos que asegurarnos que tal vez atacar el botón no sea lo que queremos hacer. Entonces en lugar de solo el botón, haremos esto un poco más específico. De acuerdo, luz de bosquejo BTN. Entonces este tipo va a ser esto y el' no va a ser el color de fondo. Entonces vamos a borrar eso, va a ser el color fronterizo del blanco. Muchas gracias. Agradable. Entonces es algo así como impresionante. Ellos lo tienen. Entonces eres como, no del color correcto. Entonces un poco de ambos. Para mí, un bootstrap high-cinco, estamos haciendo cosas. Una de las otras cosas que podríamos incluir aquí es el flotador. De acuerdo y esa es supongo que una de las bondades de usar Bootstrap es que podrías haber decidido. Oirás como por qué te molestas usando esta clase cuando no hace nada o realmente lo que quieres, hizo la línea. Está bien. Pero lo otro que este tipo de invoca es que se tira como la clase de hover porque recuerda cuando empecé a usarlo por primera vez, era azul con un fondo azul oscuro. Entonces cuando me enfrié en este, la versión ligera, vale, su tipo de apagó las clases de hover, aunque también pseudo-clases. Por lo que Bootstrap está haciendo un montón de cosas. Está bien. ¿Qué más queremos hacer? Queremos hacer una pseudo-clase. Entonces vamos a agarrar todo esto y tú emites una pseudo-clases, ¿no? De acuerdo, entonces te aplastas un colon al final sin espacio y tipeas en el hover. De acuerdo, así que quiero que esta clase en particular sea atacada. Por lo que quiero que se mire esta clase en particular y quiero que la pseudo-clase flotante funcione con ella. Entonces no quiero esto. Lo que quiero hacer es quizá ese color de fondo ahora, su color de fondo. Yo quiero que sea blanco, pero quiero que sea. Doy click sobre él y digo blanco pero bastante transparente. De acuerdo, tan temporal así, 20%. Por lo que se verá, ahora un hover. Ya ves que sólo un poco de insinuación ahí, buena insinuación Dan. Echemos un vistazo a algunas de las otras cosas de botones. De acuerdo, así que tallas. Yo ya era un botón grande. Parece ser solo botón grande y pequeño. Yo quiero que el mío sea extra grande. Aquí no hay extra grande. De acuerdo, entonces vamos a tener que darle estilo un poco más. Entonces hay salto de nuevo y estás como, Ok, solo voy a agregarlo a este de aquí, añadir algo de relleno somos como de ninguna manera tenemos clases para eso, para Bootstrap. De ninguna manera. De acuerdo, tenemos margen superior. De acuerdo, tal vez podamos agregar algo de relleno y la izquierda y la derecha bien entonces hay x y quiero que sean cinco. A mí me gustaría que el arriba y el abajo fuera algo que es un poco más pequeño de y. bien, así relleno, izquierda y derecha, cinco, arriba y abajo, tres. Podemos hacer un botón gigante. Nuevamente, trabajo en equipo, Bootstrap y yo haciendo cosas juntos, siendo rápidos, haciendo todos los patios duros. Pero entonces Dan el diseñador pasando edades tratando de pelear con Bootstrap para que haga lo que quiere. Pero con todos los cheques y equilibrios por lo que he podido lanzarlo muy rápido, sobre todo con la navegación y todas las consultas de medios creo que estamos tirados a un ganador con Bootstrap. Gracias Bootstrap. 114. Cómo hacer que imágenes responsivas estirables en Bootstrap 4: Hola, ahí. Vamos a trabajar con imágenes responsivas. lo hemos hecho antes, antes, así que vamos a utilizar esas nuevas y dulces habilidades para trabajar con Bootstrap. Aquí vamos a editar esta imagen, vamos a conseguirla para que sea estirada. Se puede ver que cambia de tamaño y un reloj de consultas de medios diferentes, se pega abajo. Vamos a trabajar a través de todas las diferentes opciones con Bootstrap 4 en VS Code ahora mismo. Estamos viendo la maqueta ahora. Tenemos nuestro texto y en realidad quiero poner esta imagen por encima de un lado. Hay un par de formas de hacerlo, y las cubriremos en este video y realmente depende de la implementación. Lo que realmente quiero hacer es que esta imagen se descomponga en su propia línea después de que baje a mi pelota. Se puede ver aquí se fue por debajo. Lo mismo con el mensaje fundador, se inicia ahí arriba, se mueve hacia abajo. Pero estos pequeñitos slider, sólo voy a apagar. Hay muchas implementaciones diferentes dependiendo de lo que quieras hacer. Añadamos la imagen al código VS. Yo quiero estar dentro de mi Jumbotron, que termina ahí, que no está del todo alineado. Ahí vamos. Yo quiero justo después, y voy a escribirlo aquí. Voy a decir, vamos a alinearlo con todo lo demás ahí dentro. Fuente de imagen, ésta va a imágenes/ y ésta se llama hero1.png porque necesita un fondo transparente. Voy a asegurarme de poner mi viejo texto ahí dentro. Yogurts de Carne de Dan. Se puede deletrear un par de maneras, estoy destinado a fallar en esa palabra. Pero ahí está mi viejo texto, tengo una imagen. Veamos cómo se ve de forma natural. Es masivo. Por defecto, en las imágenes de Bootstrap intentan estirarse hasta el final. Eres como, eso no es lo que quiero. Yo quiero uno pequeño por aquí. Hay un par de cosas que podemos hacer. Echemos un vistazo a la documentación de Bootstrap. Echemos un vistazo al contenido. Sé que está bajo contenido e imágenes. Vas a tener que dar click durante mucho tiempo o hacer una búsqueda. Está bien. En imágenes, te dice lo que debes hacer. En nuestro caso, si queremos hacer una imagen responsive, necesitamos añadir esta etiqueta llamada imagen o img-fluid para que se mueva. Hay otras formas. Podemos darle vuelta miniaturas llamándolo. Basta con echar un vistazo a esto sólo porque es interesante. Agregamos la miniatura de clase img a esta cosa. Te tenemos, antes del cierre de la etiqueta de imagen, hemos puesto en clase img-thumbnail. Echemos un vistazo a ellos ahora. Aquí tienes. Está en una caja grande blanca, fondo blanco, con esquinas redondeadas, todavía demasiado grande. Pero sólo para que lo sepas, hay algunas clases más extrañas, pero solo otros casos de uso. No tenemos más para esto. Esto podría ser interesante. Está bien. Yo quiero que sea en la clase de tal vez volteado a la derecha. Puedo empujarlo hacia el lado derecho. Veamos cómo funciona eso. Hagamos esa y veamos qué pasa. Está bien. Todavía no funciona porque es demasiado grande. Lo que mucha gente hace con Bootstrap es que solo le darán un ancho aquí. Digamos que es un ancho de, digamos 500 píxeles. Se ajusta a un lado, y le daré un auto de altura para resolver eso, sí, el ancho que definas y solo será la relación equivalente que sea para la altura. Esa es una forma de hacerlo. Estás como, vale, estamos llegando ahí. Ahora sé que en este caso quería enlazar. Vamos a tener que sumar como márgenes negativos y tratar de subirlo de esta manera, tal vez algún posicionamiento absoluto. Te voy a mostrar una manera diferente porque podrías ser exactamente lo que necesitas ser. Tienes una imagen, responde a diferentes tamaños. Echa un vistazo. Vamos a bajarlo. Está bien. No se baja lo suficientemente pequeño como para caber. En realidad no he agregado la imagen responsive. Está bien. Vamos a entrar ahí y hacer eso. Lo he doblado a la derecha, pero también quiero, así que el img-fluido. En realidad cambia de tamaño. Está bien. Se puede ver que cada vez son más y más pequeños. De hecho, enciendamos la inspección. Echemos un vistazo a la vista previa del dispositivo. Ahora lo vamos a deslizar dentro y fuera y se puede ver la imagen. Déjame bajar eso un poco. Está bien. Se hace cada vez más grande porque he añadido esa imagen responsive. Eso está funcionando para nosotros, ¿verdad? Llega hasta aquí y yo solo quiero reventarlo de esa manera. Podrías perseguir el margen negativo para tirarlo hacia arriba, tal vez absolutamente posicionarlo. Se olvida de esto y se mueve hasta la cima. Pero sé que eso me va a causar problemas cuando quiero en móvil, recuerda, dividirlo en su propia línea para separarlo aquí. Lo que quiero hacer en realidad es simplemente ponerlo en fila como hemos hecho un montón de cosas. Ponlo en fila y luego tener dos columnas que puedo romper en estas dos partes. Al igual que éste parece un poco más ancho que éste. Esto puede ser, puede ser en un siete y esta puede ser de cinco columnas. Entonces puedo solo en dispositivos móviles hacerlo 12 y 12. Vamos a darle una vuelta a eso. Echemos un vistazo. A menudo solo llegas a este punto, nos gusta realmente hacer mejor en dos columnas después de que has tenido una pelea con derechas volteadas y márgenes negativos y te gusta, me rindo. Eres como, en realidad. Vamos a deshacernos de altura, ancho, de acuerdo, esas cosas. Vamos a mantener fluida la imagen y vamos a deshacernos del blanco flotador. Estamos de vuelta a sólo tenerlo ahí sentado. Sin altura, sin anchura. Vamos a dejar que el ancho de la columna decida qué tan grande es. En primer lugar, vamos a necesitar esto. Voy a cortarlo en mi portapapeles. Yo he ido a editar, cortar. Lo tengo en alguna parte. Puedes pegarlo otro documento si te preocupa perderlo. Siempre lo hago. No te preocupes por ello al menos. Dentro de aquí, quiero una fila con, dentro de eso quiero dos columnas, por favor. Esta primera columna va a tener todas esas cosas que pegué. Va a tener mi H1 y mi etiqueta P y mi etiqueta E y todas esas cosas, excepto la imagen. E va a ir en esta otra columna de aquí. Ahora una pregunta que podrías tener es como, oye, ¿no pusiste el div interno? Hicimos la llamada y luego normalmente ponemos en miembro mi caja. Sólo entramos en mi caja si necesitábamos cambiar de alguna manera la columna. Hemos estado sacando mucho color al fondo y cambiándolo mucho. No vamos a hacer nada de eso. Simplemente lo estamos usando como un simple contenedor todo y estamos haciendo cosas con esto dentro de él. No necesito meterme con la columna. ¿Eso tiene sentido? Si quisiera agregar márgenes a la columna, a la parte superior o a la inferior, en realidad pondría un div interno aquí llamado mi caja en ella para hacer eso. Porque recuerda, no nos gusta meternos con la llamada. El llamado sabe dónde vives y te encontraremos. Está bien, así que eso va a funcionar. Bueno, espero que vaya a funcionar. Echemos un vistazo. Está ahí. Está bien. Está haciendo la mitad y la mitad. Ese tipo de 50-50. No es del todo lo que necesito. Necesito que sea en realidad, quiero que no sea 50-50, alrededor de siete y cinco. Llegamos a 12 columnas, lo cual es genial. Eso va a funcionar. Bueno, va a funcionar perfectamente. Excepto ahora queremos trabajar el móvil. Eso fue genial para esta vista. Pero cuando llego a este tamaño, me elige esta consulta de medios aquí. Esto es lo que fue esto. Me da una pista, qué consulta de medios es esa. ¿ Ese es el LG? No, no lo es. El SM, tan pequeño. lo sabes. Ya lo tienes. Está bien. Yo quiero tanto este como éste, probablemente quiero que se apilen encima porque la imagen se pone pequeña. Está rompiendo esto. Ya tiene suficiente espacio aquí. Se ve bien. Atacemos eso. Lo que quiero hacer es en lugar de decir que este de aquí va a ser mi medio y arriba. Probablemente escuchaste el trueno de fondo. Es muy emocionante aquí hoy. No tan bueno porque soy una atención [inaudible] bastante excitante. Estoy distraído por el trueno y la realización de que estoy en una hojalata gran sombra media. De todos modos. ¿Qué estamos haciendo? Está bien. Nosotros hemos decidido que en libertad, lo va a hacer. Pero aquí abajo, no está haciendo nada. Vamos a obligar a que sean 12. Tan fúnedo. Vamos a decir una llamada 12, que supone que te refieres a extra pequeña. Porque no digo pequeño, va a asumir que es 12 uno es pequeño también. Entonces finalmente, cuando llegue al medio, va a decir en realidad te voy a anular, voy a conseguir un cinco. Bueno primero, lo tienes. Echa un vistazo. Sé que lo hace por defecto, pero a veces es solo porque el contenido lo obliga a, realmente no lo estás haciendo. Está bien. Se ve bien. Está todo apilado uno encima del otro. Entonces boom, y llega hasta ahí, mueve esto. Por eso fui por el enfoque de dos columnas porque hace que esto sea agradable y fácil. Hay algunas otras cosas que quiero hacer, tal vez baja el tamaño de la fuente cuando llego a esta porque se está rompiendo en lugares raros. Tenemos que jugar con relleno y necesitamos centrarlo porque mi maqueta aquí tiene la garrapata centrada en el móvil. Eso haremos en el siguiente video. Eso por supuesto, si estoy aquí en el siguiente video y no golpeado por un rayo. 115. Cómo centrar etiquetas de texto y div en un sitio web con Bootstrap 4: Hola, tú. En este video, te vamos a mostrar cómo ir de izquierda alineada por defecto, hasta un dispositivo móvil donde es agradable y centrado. Vamos a agregar algo de relleno al botón porque de momento está atascado de verdad de cerca, porque esto es lo que vamos a hacer. Empecemos. Se ve bien en nuestros tamaños de escritorios más grandes, se ve bien en medios. Queremos bajar a los tamaños más pequeños donde trato de pegarlo encima del otro y necesitamos algo de espaciado aquí. Queremos que el texto esté centrado, porque eso es lo que he hecho en mi pequeña maqueta aquí. Es bonito y centrado. Hagamos esas cosas en este video. Se va a VS Code. Te mostraré mi proceso. Pasé y había mirado a través de Bootstrap, la documentación. Encontré utilidades y el mismo espaciado bueno y estaba, "Está bien, genial, eso está bien”. Por aquí abajo, hay uno llamado MX. Márgenes izquierdo y derecho o auto. Ya lo hemos hecho antes. Margin-izquierda, margin-derecha auto visto como cosas. ¿ De acuerdo? Intenté eso en el div de los padres. ¿ De acuerdo? así que te veo. Impresionante, trabajo hecho. Está bien eso no va a funcionar. Dogado por ahí y encontré algo más, es un poco de eso en Bootstrap. ¿ De acuerdo? Estamos tratando de averiguar qué va a funcionar. Este caso en el texto, si te desplazas hacia abajo, ese me queda bastante bien. Intento encontrar aquí qué hace que funcione. Text-center. Voy a ir text-center y agregarle eso y ver si eso funciona. Para tener un poco de mirada y se ha hecho el texto centrado. Este tipo va a ser raro. ¿ Qué haces por ahí? Oh no. Está bien. Está funcionando perfecto. Podemos encontrar en éste está funcionando muy bien en esto. Pero cuando salgo a estudiar de lado a lado, todavía se necesitan centros. Recuerda si no agregamos ningún reconocimiento mediático, asume la versión suave. A continuación quiero hacer es, digamos texto para medio y arriba se van a dejar. He visto centro hasta así entra para el pequeño en a través para centro para el extra pequeño por defecto, luego a través de lo pequeño que quiero. Entonces lo estoy cambiando cuando en realidad finalmente llega a md, por medio. Sm y luego medio, agradable. Eso va a funcionar para mí. Ahora esa imagen parece estar bien centrada también. De acuerdo, podría estar inclinado a ponerlo en el Jumbotron solo para que todo dentro lo considerara, pero en realidad se ve bien. Todo parece estar centrado bien. Algo que quiero hacer sin embargo es, quiero agregar algún margen inferior al botón. ¿ Dónde está mi botón? Ahí está él. Digamos, “Tú amigo mío” El fondo del margen va a ser, vamos a echar un vistazo a cinco. Margen de trabajo inferior cinco en el botón. El margen superior ya que estamos trabajando, margen inferior mientras estás trabajando. Diga eso, dijo mirada, magia, lo que guardo normalmente funciona. ¿ No fue esa etapa, yo quiero, yo no hice nada. Simplemente se arregló a sí mismo. Eso fue perfecto. Ahora probablemente debería apagarlo. Está bien. Cuando llego a esta etapa, pero es agregar algo de relleno aquí que nadie puede ver nunca pero seamos oficiales al respecto. Digamos que cuando me levante, así margin-bottom, cuando llegue al tamaño mediano, vuelva a ponerlo en cero. Está bien. Cambia la estructura de éste, realmente no lo puedes ver. Está encendido para extra pequeño y pequeño y luego se apaga para estos otros que no podemos ver. Está bien. Eso va a ser todo para centrar el texto en un dispositivo móvil, incluso dispositivo. Espero que te sientas un poco más cómodo con Bootstrap y solo HTML y CSS en general. ¿ Estás sintiendo que es bastante guay cuando miras esas cosas. En realidad sé lo que eso hace y estoy bastante seguro de que sé lo que hace. Hace cosas bastante asombrosamente buenas sin que tengamos que hacer mucho trabajo duro como lo hicimos al principio. Pero ese duro trabajo que puedes ver es dando sus frutos cuando empezamos a arreglar las cosas y ajustar las cosas y a mirar el lenguaje correcto. Estaría encontrando útil Bootstrap. Pongamos al siguiente video. 116. Cómo personalizar la barra de navegación de sitio web en Bootstrap 4: Hola ustedes. Este video, vamos a tomar nuestra navegación, que actualmente tiene todo en él. Muchas cosas, lo vamos a cortar para simplemente así. Nos vamos por el Nav al lado derecho también, y cuando todo se derrumba hacia abajo, va a tenderse todavía en un lindo pequeño movimiento todo el menú. Vamos a trabajar cómo hacerlo ahora en código VS y forma Bootstrap. Es tiempo de personalización Navbar. Tenemos montones de habilidades de Bootstrap y lo vamos a usar para que esta cosa funcione. En primer lugar, echemos un vistazo a la documentación y quiero ir a Utilidades. No quiero utilidades, quiero Componentes y quiero bajar, cerca del fondo. Ahí hay dos es Navs y Navbar. Hablemos de la diferencia entre ambos. Navbar es el que buscas, solo para que lo sepas, y Navs es como una versión recortada. Es una navegación, pero no es la navegación superior. Se ve así. Se trata de una navegación, pero también tiene versiones con tabulaciones para la navegación, se puede haber caído hacia abajo vertical Nav. El no como la navegación oculta de la que estás hablando, o al menos son parte de ella. Se puede ver que hay una navegación por tabulaciones vinculada diferente. ¿Qué más? Tienes casitas. Aquí hay todas las cosas, y lo que estamos buscando. Podrás usarlos pero son como internos, llegas a una página y al nuevo desplegable para categorías y redefiniremos tus búsquedas. El que buscas es Navbar. Incluye parte del Nav, pero el Navbar es como todo el trozo desarrollado. Lo miramos antes. Este es el todo uno. Tiene un cuadro de búsqueda, tiene un desplegable, tiene un montón de maneras diferentes. Ahora lo que quieres hacer es encontrar el que esté más cercano a lo que quieres. Ya ves aquí, sólo la marca. No es muy emocionante, acabas de conseguir Navbar. Puedes sugerir que para una imagen, puedes tener imagen en texto, y te muestra todas las cosas que se necesitan. No quieres que adivine, o trabajar en cada una de las clases que se han aplicado aquí, quieres encontrar una que se vea más cerca y resolver lo que necesitas para ajustar. Esto es cercano lo que queremos. Excepto uno quiero el que tiene el desplegable. No quiero tener que gustarme probar e incorporar un menú desplegable. Voy a encontrar uno. Eso encaja en un punto de partida realmente bueno. Tengo esta cosa llamada la marca, que veremos con un poco más de detalle, y tengo un montón de enlaces. Por alguna razón, por defecto, se inundaron a la izquierda. Nadie quiere ni siquiera que lo inunden a la izquierda. Pero esto ya en el código, así que probablemente mejor se detenga con éste. Porque tenemos uno bastante complejo, me gustaría dejar el que tenemos porque quiero mostrarles cómo modificarlo y trabajar. Eliminando los bits que quieras, quitando los bits que no. Eso es lo mismo, digamos dos veces bien rasgado. ¿Qué tenemos? Tenemos todas estas cosas. Ahí está la marca. ¿ Qué más hay ahí dentro? Echemos un vistazo. ¿ De qué quiero deshacerme primero? Echemos un poco de mirada y usemos Inspect. Voy a hacer clic con el botón derecho en esto, llegar a inspeccionar y golpear mi pequeña flecha aquí abajo. Simplemente trabaje y averigüe qué es eso. Ahí hay algunos, hazlo más grande. Hay control de formulario de clase de entrada. Está dentro de algo llamado clase de formulario. Eso luce lo que quiero. ¿ Qué más hay fuera de ella. Ya ves si voy a lo más alto, me meto en estas cosas aquí que quiero. Esta cosa llamada Navbar, Nav, las cosas de forma parecen terminar. Es difícil señalarlo por aquí y también señalarlo por aquí. Entiendes lo que quiero decir. Espero que si pueda eliminar todo en esta clase de formulario, podría deshacerme de ese gran trozo. Vayamos a buscar en este código. Eso está bien. Mi formulario, ¿dónde estás forma? Ah está ahí. Envuelve y activa y apaga para ver dónde se cierra. Cuando se alterna en realidad se puede agarrar todo y eliminarlo. Se puede ver que los números van de 48 y se salta unos pocos a 51 porque tengo algunas cosas seleccionadas ahí dentro. Es una buena forma de eliminar trozos grandes de una sola vez. Simplemente como un Nav. Podemos agarrar este Nav aquí, y cambiarlo hacia abajo. Si necesitamos eliminarlo, o al menos simplemente minimizar el Jumbotron, solo todo es como un tal vez un poco más fácil de trabajar. Yo escojo eso. Le checa y a ver cómo lo hicimos. Impresionante, se ha ido, ve y no hemos entrado. Vamos a comprobar, parece que todavía se dispara. Eso es algo grande con trabajar con un Navs es como intentar arreglarlo. Ah, intenta enmendarlo, pero luego siempre intenta comprobarlo para ver si esto todavía funciona porque puedes terminar rompiéndolo con bastante facilidad. Lo siguiente que queremos hacer es que esto vaya a la derecha, lo cual es sorprendentemente duro. Echemos un vistazo aquí. Voy a agarrar mi botón Inspect aquí, y voy a pasar el rato. Estoy tratando de encontrar dónde, porque ya ves, no quiero sólo esta maldita cosa. Yo quiero todo el bit y se parece. eso se le llama el colapso Navbar-. Lo que quiero, mover mi ratón alrededor, parece estar a la derecha. Navbar-colapso, dentro de eso parece ser, eso parece funcionar. Vayamos a revisar eso. Navbar-colapso ahí está. Corre a, ¿a dónde va? Todo el camino abajo a la línea 48. Todas esas cosas, lo que quiero hacer. Es echarle un vistazo un poco. Una orden de marginación derecha, parece una solución fácil. Demasiado fácil, de ninguna manera. No, no funcionó. Ah, ¿lo hizo? Lo hizo. Mira eso. Mi primer indicio sería como no buscar esos porque soy no uso Bootstrap para cada compilación. Yo soy como “Ok”, así que voy a ir a buscar. Podría estar buscando agregar texto. Después miramos este texto. Sé que eso no funciona porque probé que ya cuando estaba preparándome para este curso, podría empezar a usar flexbox. A lo mejor usamos flex en, y yo juego con al principio y solo se tropezó como, oye, ¿qué tal tú? Te ves bien. Echa un vistazo a lo que hay ahí primero antes de empezar a tratar de reorganizar las cosas. Buen viejo Bootstrap han hecho esto súper fácil. Tengo que salir del hábito de forzarlo para hacer cosas con mi CSS personalizado. Eso es todo para este video. Pasamos por navegación escogida. Al menos un Navbar que nos funciona. El Navbar incluye partes de Nav, pequeños trozos de Nav dentro de ella. Eso en tu documentación, si estás buscando aquí y yendo, esto parece realmente confuso porque hay mucho para ello. Mira un montón de cosas. Se puede leer a través de él , por supuesto, deberías, pero, supongo que usamos Bootstrap para saltar tratando de leer y hacer mucho de esto nosotros mismos. Lanza uno de estos cerca y haz algún ajuste, bueno, cosas de color y pocos otros pedacitos. Pero, sí, navegaciones, no terriblemente duras y en realidad súper fáciles cuando consideras cuánto tiempo nos tomó hacer ese pequeño magnate Nav aquí. Mira el desplegable solo funciona y tiene una bonita cajita alrededor y tiene un desplegable dentro de aquí. Gracias Bootstrap. Ah, una cosa más antes de irnos, asegúrate de cambiarla de nuevo a margin-derecha, o margin-izquierda incluso. Queda orden, así que está empujando todo el camino de esa manera. Todo el camino hacia la derecha. El correo electrónico es lo que necesitamos en este caso. Siguiente video. 117. Añade tu propio logotipo al menú de navegación de Bootstrap 4: Hola ahí. En este video vamos a ir de mí que me parece así a mí. Va a igualar bien nuestra marca, vamos a pasar por nuestra tarea donde también quitamos el color de fondo. ¿ Estás listo? Ya estoy listo, hagámoslo. Antes de que empecemos, vamos a resolver lo que pasó con los antecedentes. ¿ Cómo nos deshacemos de él? ¿Cómo lo hiciste? Mientras se haya ido, eso es todo lo que realmente importa, te voy a mostrar la forma en que lo hice. Voy a hacer clic derecho e ir a inspeccionar y echar un vistazo por aquí. Recuerda usar mi pequeño elemento selecto, puedo hacer click en lo que creo que es todo el nervio, se siente como esta cosa. Se puede ver aquí hay algo llamado luz de fondo, dándole su color de fondo y puedo encender y apagar. Eso es sólo un truco. Una vez que te acostumbras a usar las herramientas de Google Chrome, eso puede ser realmente útil solo para descifrar cosas. ¿Qué dice esto? No es muy bueno diciéndome dónde está, es referenciar al SSS, su referencia al archivo CSS, que no es lo que estamos usando, solo estamos usando CSS estándar. Pero debería poder sólo buscar eso. BG-light, mira un poco. Al hacer clic aquí, puedo ir a editar, encontrar y escribir en bg-light. Ahí hay dos ocasiones y ahí, no estoy seguro de cuál es. Ahora podrías entrar en la documentación y averiguar si hay una versión alfa cero de la misma, que no lo es, o tal vez crear una clase, agarrar bg-light, copiarla aquí. Justo en una clase, dice que el alfa es cero para bg-light, pero eso tampoco funciona realmente. El camino más fácil, es bastante simple. Voy a eliminar bg-light de este top one. ¿ Necesito eliminar el segundo? Vamos a comprobarlo. No, ahí tienes. Yo sí porque hay un fondo blanco detrás de este logo aquí. Ambos bg-lights necesitan ir porque estaba un poco oscuro. Sólo para que te pueda mostrar. Hay un primario y todos los demás colores que puedes usar pero no transparente, solo te deshaces de él. Buen trabajo. Si tienes alguna otra forma de hacerlo, me encantaría que compartieras en los comentarios solo para averiguarlo, esto es así: “Oye, lo hice de otra manera y funcionó”. Para mostrarle a estas otras personas, si encuentran de esa manera, una manera diferente, se pueden comparar notas, además para que yo pueda ver. Podrías encontrar una mejor distancia que hacerlo que yo. Lo siguiente que quiero hacer es personalizar estos botones. Quiero mantener aquí algunos de ellos como mi mark-up, ya que tengo un menú desplegable. Echemos un vistazo. Tienes razón, pero demasiado lejos. Desde aquí obtuve un menú desplegable y solo un botón sencillo. Voy a deshacerme de todo excepto de desplegable y tal vez este de aquí. No nos mantendremos deshabilitados, mantendremos el enlace regular y este desplegable uno, quizá estos dos porque coinciden con colores. Vamos a buscarlos en el código. Vamos a decir, ¿dónde estamos? El primero que no quiero. Separemos todo. Esa es mi marca, esa es mi primera. Este es el botón de activación. Este es el menú desplegable, cuando llega al móvil, así que no nos deshacemos de él, y todo el resto de esto es la navegación. Este de aquí estamos buscando a esta lista. Estos artículos y todas estas LIs son los botones. Eso es un botón LI, eso es un botón, ese es un botón realmente grande. El LI comienza ahí y se puede ver que termina todo el camino aquí abajo, y es nuestro menú desplegable. Se quiere mantenerlo a él y al justo delante de él. Deshacernos de este primero. Esa LI que tenemos, esa LI se quedará, y esa LI nos deshacemos. Es solo mostrarte por instancias y solo queremos los que son solo botones crudos regulares. No activadas ni ocultas o discapacitadas. Esperemos que ahora, siga funcionando, dropdowns funcionan para realzar sus propios colores. La navegación está haciendo cosas raras por aquí, lo arreglaremos. 118. Añade tu propio logotipo al menú de navegación de sitio web de Bootstrap 4: Hola ahí. Vamos a tomar nuestro aburrido texto de barra de navegación, y convertirlo en un poco de logotipo bruto. Vamos a seguir adelante y hacer eso ahora en Bootstrap 4 usando nuestro nav y hacer algo llamado marca nav. Está bien. Por lo que el momento son sólo algunos llanos o textos que copiamos cuando primero agruparamos en este sitio. Por lo que queremos ir a encontrar algo llamado la marca. Por lo que bajo la documentación, bajo los componentes , navbar, queremos intentar desplazarnos hacia abajo hasta encontrar marca. Hay diferentes formas de implementarlo. Depende de ti. Podrías merecer texto, y todo lo que necesitas hacer ahora es entrar y en VS Code, ve y cambia la palabra navbar por el yogurt de Dan. Ya verás que va a cambiar. ¿De acuerdo? Podrían ser geniales para ti. Podrías escoger una fuente diferente. A ver voy a estilizar nombre-marca. Probablemente le peinarás este aquí, marca navbar, y escogerás una nueva fuente. Probablemente usarías la cara de frente que hemos estado usando, y podrías estar lo suficientemente contento con eso, ya que son especialmente útiles si el cliente aún no ha conseguido un logotipo. Entonces es una nueva construcción y simplemente no tienen marca todavía. Puedes darles algún texto estilizado de fuentes de Google. Lo que queremos hacer es una imagen, y se puede obtener una imagen con algún texto, con esta imagen llana vieja. Vamos a agarrar todo eso, copiarlo, y vamos a reemplazar lo que tenemos. Tenemos una barra de navegación, solo marca navbar realmente simple, y parece terminar ahí. El toggler está fuera encendiendo una cosa de apagado de [inaudible] Sólo voy a poner ahí. Bonito. ¿Qué necesitamos cambiar? Echemos un vistazo. Se va a cargar probablemente el logotipo de Bootstrap, eventualmente. No quiere. No tenemos eso en nuestro sistema. Veamos en el disco duro de o al menos el sitio web de bootstrap. Lo que queremos hacer es apagarlo para nuestro propio SVG. Voy a borrar todo esto, y voy a guardar dentro de imágenes. Por lo que ahí está su logotipo está dentro dan's_meat_yorgurt_svg gross. Echemos un vistazo. Está ahí dentro. Se está forzando a ser de tamaño de lo que copiamos y pegamos. Ahora obtendrás algunos gráficos, algunos SVG que no tienen información de tamaño en ellos. Tendrás que darles un ancho y una altura. mío uno está haciendo porque vino de XD, o Illustrator, o Photoshop. En el código dan el tamaño dentro de ellos. No hay decir [inaudible] como un icono. [ inaudible] asombro. No lo tienen y necesitamos darle un tamaño físico. Para éste, no tenemos que hacerlo. Entonces vamos a ver el tamaño del que quería que fuera. Probablemente sea un gran aspecto ahora pero es del tamaño que hice y me estoy pegando a ella. Otras cosas que debes hacer especialmente para nuestro logo, es que realmente necesitas poner algunas tomas viejas que realmente describan lo que es esto. Este es el logotipo de Dan's Meat Yogurt Company. Bien. SEO, cosas de motor de búsqueda, y tenemos una imagen, tenemos una talla. Por el momento y se va a Href. Una vez que tengamos esto en marcha, se indexará a HTML, por lo que vuelve a casa. estamos ejecutando una página de inicio en este momento, y eso es todo. Bueno, eso es todo. Yo quiero decir un poco sobre la tarea. Este relleno en la parte superior parece funcionar bien como está. Pero lo que quería hacer es que me gustaría pasar y quitar el fondo. Voy a ponerlo como un pequeño proyecto para ti, simplemente no un proyecto de clase completo con un doc de Word tanto como puedas deshacerte del fondo. En el siguiente video, antes de que empecemos, te mostraré cómo hacerlo. Pero mientras tanto, después de este video, mira si puedes darle el fondo. Yo sólo quería ver a través. Para que pueda ver a través del fondo. Dale una oportunidad, y te veré en el siguiente video. 119. Cómo cambiar los estilos predeterminados para la navegación en Bootstrap 4: Hola ahí. En este video vamos a ir de menú que se ve así, para ser así. Va a coincidir con nuestra maqueta muy bien. Vamos a pasar por nuestra tarea, donde también quitamos el color de fondo. ¿ Estás listo? Ya estoy listo. Hagámoslo. Antes de empezar, vamos a averiguar qué pasó con los antecedentes? ¿ Cómo nos deshacemos de él? ¿Cómo lo hiciste? Mientras se haya ido, eso es todo lo que realmente importa. Te voy a mostrar la forma en que lo hice. Ahora, voy a hacer clic derecho, voy a inspeccionar y echar un vistazo por aquí. Recuerda usar mi pequeño elemento selecto. Puedo hacer click en lo que creo es todo el nervio que se siente como esta cosa. Se puede ver aquí hay algo llamado luz de fondo, dándole su color de fondo, y puedo encender y apagar. Eso es sólo un truco. Una vez que te acostumbras a usar las herramientas de Google Chrome, puede ser realmente útil solo para descifrar cosas. ¿ Qué dice? No es muy bueno diciéndome dónde está. Es hacer referencia al archivo CSS, que no es lo que estamos usando, solo estamos usando CSS estándar, pero debería poder simplemente buscar eso. BG-light, echemos un vistazo. Al hacer clic aquí, puedo ir a editar, encontrar, y escribir en bg-light. Ahí y allá hay dos ocasiones. No estoy seguro de cuál es. Ahora podrías entrar en la documentación y averiguar si hay una versión cero de la misma de Alpha, que no lo es, o tal vez crear una clase, agarrar bg-light, copiarla aquí. Justo fuera de clase, dice que el Alpha es cero para bg-light, pero eso tampoco funciona realmente. El camino más fácil es bastante simple. Cuelga y borra bg-light de este top one. ¿ Necesito eliminar el segundo? Vamos a comprobarlo. No. Entonces ahí lo tienes. ¿ Qué hago porque es un fondo blanco detrás de este logo aquí. Por lo que ambos bg-lights necesitan ir. Ahí hay un bg-dark y solo para que puedas mostrarte. Hay un primario y todo tipo de otros colores que puedes usar, pero no transparente, solo te deshaces de él. Buen trabajo. Ahora si tienes alguna otra forma de hacerlo, me encantaría que compartieras en los comentarios solo para descifrar solo para decir como, oye, lo hice de otra manera y funcionó. Al igual que hay otras personas, si encuentran su camino, de una manera diferente, puedes comparar notas plus, así puedo ver que quizá encuentres una mejor manera que hacerlo que yo. Ahora, lo siguiente que quiero hacer es personalizar estos botones. Yo quiero quedarme con algunos de ellos, como mi simulacro aquí arriba dice que tengo un menú desplegable. Echemos un vistazo. Zoom a la derecha en ¿qué encuentras? puedes ver tengo un menú desplegable y solo un botón sencillo. Voy a deshacerme de todo excepto de dropdown y tal vez este de aquí. No nos mantendremos deshabilitados, mantendremos el enlace regular y es desplegable uno, quizá estos dos porque coinciden con colores. Vamos a buscarlos en el código. Voy a hacer esto un poco más grande ahora. Vamos a decir, ¿dónde estamos? El primero que no quiero, así que separemos todo. Esa es mi marca. Esa es mi primera. Este es el botón de encendido, este es el menú desplegable, cuando llega al móvil, así que no queremos deshacernos de ellos, y todo el resto de esto es la navegación. Este de aquí. Estamos buscando a esta lista, estos artículos, y todos estos otros botones de lis'. Eso es un botón, li, eso es un botón. Ese es un botón realmente grande. El li comienza ahí y se puede ver que termina todo el camino hasta aquí abajo. Ese es nuestro menú desplegable. Quieres mantenerlos y al justo delante de él. Deshacernos del primero. Ese li tenemos ese li que nos quedaremos, y de ese li nos desharemos. Es solo mostrarte por instancias, y solo queremos los que son solo regulares todos los botones, no activados ni ocultos o desactivados. Creo que ahora sigue funcionando. Dropdowns tipo de trabajo aquí abajo son sus propios colores. La navegación está haciendo cosas raras por aquí, lo arreglaremos, pero está funcionando bien. Siguiente parte. Voy a cerrar mi búsqueda y quiero, ya ves, noto que he usado el mismo estilo que en este, como en éste. Voy a ir a robarle estilo y aplicárselo. He hecho una clase antes en llamado, ¿cómo se llamaba? Luz de contorno de botón, eso fue lo que usamos para el hacerla más ancha por fuera. Vamos a buscar eso y reutilizarlo. Fue en el jumbotron. Fue esto un botón de clase aquí y agregamos esta cosa. Sé que si agarro solo esta parte del estilo, muchas veces no funciona, necesita llamarse botón y el estilo que da por ahí. Voy a copiarlo y vamos a echar un vistazo, porque la parte de botón de esa clase le da su plenitud y es clickability, y esta es solo la línea alrededor del exterior. Vamos a agarrarlo. Encontremos el botón desplegable l. Ahora, ¿a dónde va? Ahí hay un ul que es toda la navegación. Ahí están estos elementos de la lista, como pequeñas partes a ella, ¿y a dónde va? O va a ir en la li o en la etiqueta A, una u otra. Ponlo aquí y ver cómo va eso allá. Echa un vistazo. Trabaja perfecto. Es ese y hagámoslo al otro li, éste de aquí, luz de botón, bonito. Voy a cambiar el texto en estos, realidad son el camino equivocado así que quiero el li para el menú desplegable, todo eso, lo quiero por encima de esto. Podría separarlos sólo porque se pone un poco confuso. Podría ser sólo yo. Necesito estas brechas visuales. Bajar primero y luego esta otra y las dos palabras son sabores y contacto. Aquí lo vamos a cambiar de desplegable, esa es la palabra a sabores, y, ¿dónde está éste? Contacto. En el menú desplegable, estas son las opciones para el desplegable, por lo que vamos a tener que poner en diferentes sabores. Hay un sabor a jamón, bruto. Ahí hay sabor a carne de res. Entendiste la idea, ¿verdad? Ah, eso es interesante. Esta clase divisor, echemos un vistazo al desplegable. ¿ Necesitamos el divisor? Ves esto aquí, obviamente puedes ver el uso del divisor, como cigarrillos, estos tipos a tal vez este de aquí es, no sé, otro. Voy a deshacerme de esto, divisor dropdowns cooler, y sólo tener estos, vamos a tener pollo. Volviendo de nuevo, ten una carne más. Estaba tratando de pensar en uno ahí, pollo, qué pasa con los otros grupos cárnicos. Oh, harían pescado. Creo que éste podría ser el peor. Sabor de pescado viejo. Echemos un vistazo al menú. Se ve bien. Un par de cosas que quiero hacer es que quiero hacer blanca la garrapata y poner algunos huecos entre ellos. Haciendo blancas las garrapatas. Extrañamente antes, estaba bien ser blanco. Recuerda aquí, como bien, ¿por qué no se pusieron blancos? Es porque la navegación está tratando de hacerle muchas otras cosas al mismo tiempo. Vamos a dar click en esto. En realidad vamos a hacer clic en el elemento inspeccionar en el extremo izquierdo aquí. Esperemos por encima de esto. Vamos a tratar de conseguir el, ya puedes ver yo sí quieres dar click en las garrapatas en el interior, porque quiero averiguar qué tal vez lo está controlando. ¿ Qué lo está controlando? Creo que aquí en la C es tan importante, luz navbar. Solo estoy buscando palabras clave, porque nombre de barra de navegación probablemente no lo va a hacer luz de barra de navegación parece bastante bueno. Enfriar. Vamos a intentar apagar la luz de la barra de navegación. Navbar, ¿dónde está? El top. Luz Navbar. Probémoslo a oscuras. Eso funciona. Yo puedo vivir con eso. El otro cool del navbar oscuro es que cambia, no lo suficiente, es demasiado ligero todavía. No hay, navbar blanco, lo cual sería realmente útil. Sólo dame navbar blanco y negro, no esta mitad en el medio. Se puede ver cuando se pone azul, dice, no puedo encontrar esta clase loca que estás haciendo. Entonces vamos a usar barra de navegación, vamos a poner en la oscuridad y vamos a ajustarlo un poco. Queremos ajustar el texto en el interior. El exterior parece estar bien. ¿ Eso está funcionando ahora? Navbar oscuro, ahí está. Vamos a hacer blanco ese texto. ¿ Cómo hacemos eso? Tenemos que añadir, lo hicimos antes, tal vez encontremos una opción de texto blanco. No recuerdo lo que usábamos antes. Pero vamos a pasar y aplicarlo. Ahí está mi li para el menú desplegable. Intentemos meterlo aquí como lo hicimos antes. Vayamos al texto dentro de este li va a ser blanco. Es bueno ir. Echa un vistazo, no funcionó. Entonces esa misma clase exacta. A veces hay que eres igual, que no tiene sentido. Lo intentas en una clase diferente estás como bien. Colóquelo en la etiqueta A, en este caso, eso es exactamente lo que quería. Hacemos lo mismo para este otro elemento de la lista, este de aquí. En la etiqueta A, voy a decir que hay una clase aplicada. Entonces es bueno, se necesita blanco. Agradable. Lo siguiente es probablemente agregar algunas caricias entre estos dos, y bien fusionarse entre ellos y tal vez hacerlos del mismo tamaño. Imagínese lo suficientemente fácil. Echemos un vistazo a nuestro código. ¿ Estás consiguiendo lo mismo que yo como el hombre que está mirando, la barra de navegación es tan grande, y como yo no lo construí, se vuelve como, se vuelve invisible. A lo mejor esta podría ser una muy buena oportunidad para ir realmente esto, porque lo trabajo eventualmente, pero voy a agregar algunos comentarios. Recuerda comando barra hacia adelante o control barra hacia adelante en un PC, y pongamos el botón. Voy a poner en desplegable de botones. Aquí voy a poner en el botón de este normal. ¿ Eso es útil? Es útil para mí. Lo que queremos hacer es sumar, ¿dónde lo agregamos? A lo mejor a este ítem de lista. Probemos eso. Vamos a margen derecha MR y vamos a hacer cuatro. Echemos un vistazo. No funcionó. Margen derecho 4, siento que debería, lo hizo. Wow, refresca. Normalmente no tienes que refrescarte porque ese Código VS, pero no tengas miedo de hacer clic en el botón de refrescar. Trabaja para mí, Just in. Tenemos nuestro desplegable. Te darás cuenta de que tenía esto arriba así, porque esa cosa de ahí me está volviendo loco. No sé por qué cuando estoy enseñando y eso sigue yendo, muy distrayendo. Yo quiero hacerlos del mismo ancho, así que vamos a forzar en un ancho, lo probaremos aquí para el li que diremos, ulira, no en esta clase, vamos a usar un estilo. El estilo va a ser un ancho. Estás como, ¿por qué estás haciendo esto por aquí, Dan, y estás como, eso es totalmente cierto. Debería simplemente crear un estilo por aquí que tenga un ancho. Pero supongo que quiero acostumbrarte a agregar aquí también porque a Bootstrap parece gustarle poner muchos de los estilos en línea están en realidad en el gráfico real en sí. Realmente no importa. Este ancho de tal vez 200 píxeles, echemos un vistazo. A lo mejor un poco demasiado. Ciento cincuenta, eso me funciona bien. No, todavía demasiado grande. Vamos 110, 120, cosas que debo organizar antes de empezar a grabar, ¿no? Vamos, Dan. Yo haría lo mismo por este botón aquí abajo. Agarra todo. ¿Dónde está nuestro segundo botón? Oh mira, comentario práctico. Estamos bien. Ahora tienen el mismo ancho. Se ve bien, se baja a Mobile. Consiguió un menú desplegable. Está apareciendo del lado equivocado. Eso lo solucionaremos en el siguiente video, y también saldremos bateando para ser pegajosos. Eso es todo por el momento. Pasemos al siguiente video. 120. Cómo fijar una barra de navegación adhesiva de Bootstrap 4 a tu diseño de sitio web: Hola ahí. En este video vamos a conseguir que nuestra navegación sea pegajosa. Cuando nos desplazamos, todavía se queda en la parte superior. También arreglaremos ese pequeño problema donde estamos en el móvil, y se acabó de este lado izquierdo aquí. Vamos a moverlo para que se alingue bien a la derecha. Recuerda que antes en el curso fuimos y arreglamos nuestra cabecera a la cima. Hicimos una clase que dicha posición fija en el nav y eso va a funcionar, pero hay algunas cosas de lujo que el bootstrap tiene. Encontrarlo siempre es la parte divertida y estás como, “¿Dónde está tu rumbo fijo?” Posición fija se ve bien. Este de aquí, navbar arreglado. Mira eso, es bueno en este. Terminas en esta página de ejemplos y eres como que no es del todo lo que quería, vuelve a la documentación. Vamos a buscar fijo de nuevo. Supongo que quiero asegurarme de que cuando lo estás haciendo empiezas a sentir que estoy haciendo esto bien? Eres como si. Simplemente está trabajando lo que bootstrap han hecho. Fixed-top sé perfecto. Sólo tienes que añadir eso al div. ¿ Qué div? Probablemente el primero. Esto lo envuelve todo. Mi navegación, vamos a editarlo aquí. Pega y eres como el bingo. Trabajo hecho, obras. Está fijo a la parte superior pero está roto mi navegación. Probablemente bootstrap siendo genial, tienen algo más. El pegajoso es la palabra. Echemos un vistazo. Posiciones pegajosas, pegajosas, en realidad está justo debajo de donde estábamos. Ahí está fijo-top y solo un poquito abajo, es pegajoso. Aquí vamos. Copia y probemos sticky-top en lugar de fixed-top. Démosle un camino a eso, y ahí vamos. Tú decides si te gusta nuestro fijo-top, sobre todo porque es ver a través y encubrir las cosas hasta ti. Pero así es como arreglas en la parte superior, navegación en forma de bootstrap. Lo último que quiero hacer antes de irnos es, esto me ha estado molestando. Ahí está este desplegable y aparece todo el camino por aquí a la izquierda y tú dices : “¿Por qué es eso? ¿Lo he roto?” Cuando miraba estaba como, “¿Puedo romper eso?” Después tuve que mirar hacia atrás a nuestro viejo cuando acabamos de instalarlo primero y ponerlo en marcha. Inspeccionemos este y en realidad es un predeterminado de bootstrap. Es así como salió de la caja y se puede ver que simplemente lo empuja por aquí con algún color de fondo que quitamos. Ese es el predeterminado, cómo arreglarlo. Pasé un buen trozo atando para arreglarlo. Traté de trabajar así que traté de usar margen porque hicimos auto margin-left tal vez anulamos eso para hacerlo ir todo el camino por el costado. Pero resulta que solo funciona para y recuerda que lo hicimos aquí, dijimos en el menú desplegable ul, dijimos que estaba a la derecha, y significa que se ve así. A lo mejor fue saltar contra un costado. Ajustamos eso y supondrías que también habría arreglado los botones pero no. Siguen aquí arriba cuando está abajo en el móvil todo el camino por aquí. Probé un par de cosas. Intenté texto a la izquierda, intenté aplicar el ml-auto a un par de elementos diferentes aquí, todavía no pude resolverlo. Eventualmente encontré esto. Existe la opción de flotar artículos. Para esto no es como una vieja escuela, sino una forma diferente de alinear izquierda y derecha. Voy a hacer flotador y voy a tener un look utilidades bajo flotador. Se puede ver flotar a la izquierda, flotar-derecha, flotar-ninguno, y los mueve a la izquierda o a la derecha. Puedes hacerlo para diferentes consultas de medios. Yo quiero que flote al lugar correcto. Vamos a darle una oportunidad a esto, y pongámoslo en nuestro código. ¿ A dónde va? Muy buen punto. Echemos un vistazo a inspeccionar dentro de Chrome. Vamos a bajar esto. Usemos esta pequeña opción para inspeccionar el elemento y estamos buscando el contenedor. No queremos los botones reales ellos mismos. Simplemente movimos el ratón hasta encontrar algo que se sienta como el contenedor. Voy a dar clic en él, luego aquí abajo, sólo voy a pegarle a esto y ver qué va. El mismo ul. ¿ Dónde está? A la clase ul, vamos a sumar esto también y ver cómo va eso. Desplegable, oye, lindo. Está siendo empujado hacia abajo un poco demasiado lejos. Mi logo es demasiado grande. Necesito hacer eso más pequeño para que este nav tenga este gran hueco entre aquí, pero eso es algo que puedo dejar que arregles, que el logo sea más pequeño. Trabajo desplegable, todo funciona. Es encantador. Encendido al siguiente video. 121. Agregar una imagen de columna completa en Bootstrap 4, y colorear el fondo de la columna: Hola ahí. En este video vamos a hacer este mensaje fundador. Del lado izquierdo aquí tenemos una imagen que nos va a ayudar a recapturar nuestro conocimiento de las imágenes responsivas, que hicimos hace bastante tiempo. Vamos a recapitular eso, vamos a construir este diseño de una fila, dos columnas aquí. Se va a descomponer nuestro móvil en dos líneas. Yo gigante, mensaje fundador, vamos a agregar relleno. ¿Qué más vamos a hacer? Vamos a conseguir que se centren dentro de la caja y es otra recapitulación todo de Flexbox consiguiendo que los artículos se centren en el medio como lo hicimos camino, camino, hace mucho tiempo atrás en el curso. Muy bien, vamos a poner este mensaje muy críptico de nuestro guapo fundador aquí. Vamos a hacerlo. Esta es la parte que quiero agregar este mensaje de fundadores y las partes únicas del mismo es que tengo esquinas redondeadas sin otra razón que quiero mostrarles cómo hacer eso. Haremos dos columnas separadas porque quiero que se descomponga en el móvil para estar encima de la otra. Está bien, así que veamos hacer eso. En código VS, va a ir por debajo de mi Jumbotron, pero antes del carrusel y voy a poner esto, este va a ser mi mensaje de fundadores. ¿ Qué quiero? Yo quiero al menos una fila, y dentro de eso quiero una columna, pero quiero dos de ellos. Yo quiero la primera columna. Porque es móvil primero, hay que decir, quiero que se rompa en sus propias líneas, así que quiero que sea un completo de 12 columnas de ancho para móvil. Pero después, cuando llegue a medio, quiero que sea, no estoy seguro, ¿qué es? Sobre eso, digamos cuatro y ocho, así que digamos cuatro. Este de aquí va a ser col de MD. Se va a subir a ocho. Ahora solo pongamos algo de texto básico aquí, sólo para que podamos ver qué está pasando. Para seguir probando mientras estamos trabajando. ¿ Dónde está? Ahí está, prueba. Camino hacia abajo a móvil con muestra. Refrescar. Extraño. Lo dejaré en el curso, pero normalmente se refresca bien. No tuve que dar clic en refrescar. A lo mejor porque tengo las pruebas abiertas. A lo mejor tener las Herramientas de Desarrollador y lo de Inspect pasando congela el código. Eso parece que está funcionando. Está en cuatro y me pongo al móvil y debería saltar hacia abajo para estar encima el uno del otro, con 12 columnas de ancho. Muy bien, lo siguiente que quiero hacer es agregar algo de este texto y luego vamos a añadir la imagen, en realidad hacemos la imagen primero. En este de aquí, vamos a hacer nuestras dulces imágenes responsive. Yo me voy a deshacer de eso. Este de aquí, esta es la primera caja. Vamos a poner un IMG. Y va a estar en nuestra carpeta de imágenes, y es el tiro a la cabeza de Dan. Queremos agregarle algunas clases. Recuerda que uno que dice img-responsive en realidad se llamaba img-fluid, alt-text. Este va a ser Daniel Walter Scott, fundador del yogurt de carne. Relleno de palabra clave ahora, pero espero. Echémoslo un poco. Vamos a comprobarlo. Está llenando la columna simplemente bien y llena la columna por aquí simplemente bien. Yo quiero bajar al móvil. Se reduce a un tamaño móvil sensible. Es un poco grande, pero hagámoslo de ancho completo. Añadamos el texto a esta parte. Va a ser un H2 y algún texto P, An H2, porque ya tengo un H1, esto sólo va a decir, “Mensaje de nuestro fundador”. Extraño texto pasando ahí. Enfriar, y quiero un poco de texto de p y la P, me gustaría tener algún lorem de apenas unos 60. Agradable. Echemos un vistazo. Está ahí dentro, móvil y está ahí en nuestra vista de escritorio. Lo que quiero hacer es no quiero que tenga este fondo claro, quiero poner en un color de fondo porque quiero que sea blanco y también quería mostrarte cómo agregar un color de fondo. No hemos puesto nuestra propia clase aquí. En realidad acabamos de pegarnos a nuestra clase. ¿Dónde está? Ahí está nuestra fila y él es nuestra columna, y es esta columna aquí que quiero hacer un fondo blanco. Si iba a agregar un poco de estilo al col 12 en este caso, iría por aquí, le haría un estilo. Ahora el problema es, recuerda, no me gusta peinar las cosas existentes de Bootstrap, así que lo que probablemente haría es hacer de su propia envoltura una etiqueta e insertarla aquí. Envolvería con abreviatura, que es esa primera que hay para mí y yo diría, hagamos, una clase fundadora. Después iría a darle estilo a esa clase fundadora para tener un fondo de blanco. Pero, sé que Bootstrap probablemente tenga una clase de fondo y en este caso va a ser BG de blanco y eso debería ser todo lo que necesito hacer. Tienen un BG, un fondo de blanco, negro, claro oscuro, primario, peligro. Son algunos otros colores que puedes usar. Añadamos un poco de relleno en todo el camino también. Vamos a entrar aquí y digamos que esta cosa de aquí tiene un fondo de blanco, pero también tiene un relleno. Recuerda si no pongo arriba, abajo, izquierda a derecha, asumió todos los lados, lo voy a poner al máximo y ahí vamos. Tiene un bonito relleno a su alrededor. En realidad, lo que podríamos hacer es intentar conseguir que se alinee en el centro de la propia columna real. ¿ Cómo hacemos eso? Lo hicimos con flex, recuerda la última vez. Si hago un centro, como buscar alinear. Diferentes tipos de alineaciones, vertical es lo que queremos. Echemos un vistazo a eso. Esto no va a funcionar. Align-middle funciona perfecto para objetos en línea. Lo dice aquí arriba, dice, funciona muy bien para inline, inline-block. Pero no nuestros elementos de bloque, que es nuestro H2 y nuestra etiqueta P. Tenemos que ir a la opción flex de hacerlo y aquí dentro, hay un montón de ellos. Simplemente desplácese hacia abajo hasta el pequeño ícono. Bueno, el pequeño ejemplo menciona lo que quiero, ese es el que quiero. Estoy asumiendo que es el tan d-flex. alinear el centro del elemento. Agradable. No tenemos que hacer el flex de pantalla porque eso está envuelto en esta clase aquí llamada d-flex. Recordamos que alinean los artículos centran desde antes y va a funcionar parcialmente. Echemos un vistazo. Todos están centrados, pero estos tipos se aplasta porque flex, recuerda, trata de alinearlos uno al lado del otro. El modo de moverse eso es ponerlos en su propio pequeño envoltorio. Estos tipos de aquí, fab. recuerda Flexbox quiere ponerlos uno al lado del otro. Si los ponemos en un div, los envolvemos en un solo div. Está protegido del padre, porque será de dos etapas de profundidad. Envolver todo esto en su propia etiqueta P. “ Comando Shift P” en un Mac, “control shift P” en un PC. Vamos a escribir wrap y encontrar wrap con abreviatura y vamos a poner, podríamos hacer una clase, pero sólo vamos a usar la etiqueta de sección porque, no necesito darle estilo en absoluto. Yo sólo voy a usar sección. Es un buen tirón. Whoop.Tienes que realmente golpear enter en eso. De lo contrario no funciona. Probémoslo una vez más. Haré que el editor acelere este pedacito. Muy bien, en realidad me pego vuelta. Ahora, porque hay en un bonito envoltorio pequeño protegido, esto debería funcionar. Pasemos al siguiente video. 122. Cómo añadir bordes y esquinas redondeadas a un apartado en Bootstrap: Hola ahí. En este video, vamos a ver sumar fronteras. Vamos a poner un borde negro a su alrededor, pero no hay frontera en esto. Vamos a sumar esquinas redondeadas por un lado, esquinas cuadradas por el otro. Es de borde y extravagancia de esquina redondeada. Queremos hacer un par de cosas. Añadí un borde negro alrededor del exterior de esto solo para que pudiera hacer esto en el tutorial porque necesitas trabajar las fronteras. También agregué esquinas redondeadas que realmente no quería sólo añadirlas al tutorial. Nosotros lo hicimos. El cool de las fronteras es que está redondeado por un lado, pero no por estos huecos internos. Vamos a resolver cómo hacer eso ahora, echa un vistazo a la documentación. Documentación, se llama fronteras y está bien que vamos. Eso me queda bien. Está bajo utilidades, fronteras, hay un montón de cosas. Se puede decir: “Border, sólo la parte superior o poner un borde alrededor de todo el asunto”. También hay un borde de colores. Por lo que quiero poner una frontera y luego es un buen doc fronterizo. Ambos van a ir en mi caja de garrapatas. Vayamos a VS Code. Añádalo a esta clase aquí. Bueno, este div tiene muchas cosas pasando aquí ahora. A ver si eso funciona. Éxito. Tenemos un liner negro en el exterior. Echemos un vistazo a las partes redondeadas, deben estar en el mismo bit. Nos desplazamos hacia abajo, ahí vamos fronterizo radio. Tienes dos opciones. O tienes solo un poco de círculo redondeado o completo para que puedas decidir si quieres redondeado, que es solo nuestras esquinas redondeadas, o puedes hacer círculo redondeado. En realidad eso lo convierte en un círculo completo. Hay otra llamada píldora, que hace eso comienza pero deja el extremo largo y redondeado cero, no se usa si digamos que uno de los componentes tiene una ronda por defecto, se puede apagar haciéndolo redondo a cero. Tienes dos tallas para estas esquinas redondeadas. Se ven exactamente iguales. Grandes y pequeños, no muy grandes diferencias. El otro es, recuerda cómo hicimos mi redondeado derecha e izquierda, así que empezaremos con el primer cuadro, que sería redondeado a la izquierda. Ahora, hemos jugado la otra a toda la columna para la segunda aquí. No funciona en este caso porque tenemos esta imagen, queremos aplicarla alrededor de la imagen, no de la clase real. Te mostraré lo que quiero decir. Tenemos que decir en primer lugar que es una frontera, no olvides esa parte, y tenemos que decir, “Una derecha redondeada o izquierda redondeada” Eso sólo va a funcionar parcialmente. Echemos un vistazo. Porque pone una vuelta al borde de la columna, eso no es lo que quiero. Yo quiero ponerlo alrededor de esta imagen para que las mismas cosas puedan ir en la imagen misma. Fuente de imagen tenemos clase de fluido, ponlos ambos ahí y allá vamos. Tenemos redondeado a la izquierda, cuadrado a la derecha. Vamos a utilizar el borde blanco. Pero hagamos grande también la frontera, lo cual no hace un cambio significativo, pero ahí está. Por último, se le da un liner blanco en el exterior. No es lo que quiero así que vamos a deshacernos del default. Aquí, echemos un vistazo, un color de borde así no hay color de borde porque no quiero agregar un color quiero probar y se puede ver ahí podemos agregar un tablero de cero. Agradable. Buenos ejemplos ahí arriba. En mi imagen aquí, frontera grande, deja que sea frontera cero y ahí vas. Tiene un poco de esquinas redondeadas en los bordes y no hay trazo a su alrededor. Hagamos las fronteras de la derecha aquí. Entonces en lugar de izquierda, lo vamos a hacer a esta columna de aquí. un montón de cosas, fuera a fronterizo doc. Se va a redondear a la izquierda, eso no funcionó lo que necesita ser redondeado a la derecha. Encantadoras esquinas redondeadas. Otra cosa que quiero hacer es asegurarme de que esté en la frontera grande, ahí tienes. Eso es todo para nuestro emocionante video fronterizo. Hicimos algunas esquinas redondeadas, agregamos algunas líneas alrededor del exterior. Pongamos al siguiente video. 123. Cómo editar el carrusel de Bootstrap para tiempo de fundido en celular: Hola ahí. En este video, vamos a meternos con nuestro carrusel. Obviamente, nos estamos metiendo con el tiempo porque está volando. También estamos fastidiando con la transición, por lo que puedes ver que se desvanece en lugar de deslizarse. Vamos a saltar y a trabajar lo que estamos haciendo. Carrusel, yo, tú. Me has estado molestando todo este curso. Me encantan los carruseles, solo que no cuando estoy enseñando. Están distrayendo. Pero queremos hacer un par de cosas. El primero va a ser, es apagarlo cuando llegue al móvil. Simplemente demasiado pequeño y no es lo que quiero en los dispositivos móviles así que vamos a desactivarlo. Hicimos esto antes, es una buena recapitulación. ¿Cómo desactivo? Sabemos que es como mostrar ninguno. ¿ Te acuerdas de nuestros días anteriores? Aquí bajo utilidades, hay uno llamado display. Se puede echar un vistazo a través. Esta pequeña lista me parece realmente útil. Te da una explicación y luego qué hacer. Oculto solo en xs, que es lo que quiero, voy a apagarlo para todos ellos y volverlo a encender para pequeños. En mi caso, sólo lo voy a volver a encender por medio. Entonces voy a agarrar todo eso. En realidad, no quiero todo el tope completo, lo pegaremos. ¿ Dónde está mi carrusel? Ahí tienes, amigo. Lo que me gustaría hacer es que tengo algunas clases, tengo tobogán de carrusel por el momento. Voy a poner estos sin las paradas completas ni periodos. Tú, tú y yo queremos que éste se encienda cuando llegue al dispositivo más grande, como un iPad. Echemos un vistazo. Está ahí. Ahí está el gran deslizador y luego se apaga en algún momento. Todavía ahí, todavía ahí, se fue. Lo hemos apagado y lo hemos vuelto a encender a este tamaño un poco más grande. Lo siguiente que quiero hacer es que quiero hacer el desvanecimiento. Echemos un vistazo a las diferentes opciones que están disponibles. Está en los componentes. ¿ Dónde está nuestro carrusel? Es interesante echar un vistazo a través de todo esto, explicando lo que hace, los diferentes controles. Lo que queremos hacer es que yo quiero encontrar al que tenga subtitulaciones, crossfade. El desvanecimiento de carrusel es lo que quiero hacer. ¿Qué aspecto tiene eso? Sí, eso funciona para mí. Ven aquí, amigo. Vamos a agregarlo y solo editarlo después de esto. Ahí vamos. Esperemos que tengamos uno bonito que se desvanece. A ver cómo va. Hagámoslo a un tamaño más grande. Espéralo. El mío no es perfecto. Porque tengo transparencia en el fondo mío, he usado PNG como estas pequeñas imágenes para que pudiera ver a través del fondo radiante. Si tienes una imagen completa, desvanecimiento se ve mucho más bonito. Un poco juguetón porque tengo fondo transparente pero, buen trabajo. Supongo que estamos en un punto ahora en el que realmente sabemos entrar, trabajar con la documentación, resolver las cosas por nuestra cuenta ahora y supongo que ese es el punto completo de esto. Podemos ir por cada característica de carrusel y tarjetas finales y todas ellas. Solo estoy llevándonos a un punto en el que nuestro maqueta se ve bien y ojalá te golpee las diferentes técnicas para encontrar lo que necesitas en Bootstrap y aplicarle tu sitio web en VS Code. Me estoy acercando al final de este curso. Es bastante emocionante. Espero que se estén acostumbrando a que esto lo encuentre y un poco de solución de problemas. Digamos que quiero trabajar con el tiempo. A mí me gusta este de aquí. El intervalo se ve bastante bien. El intervalo de datos se ve bastante bien. Ahora, recuerda esto son milisegundos, así que son 10 segundos, dos segundos. Parece que tiene que ir en algo llamado el carrusel ítem activo. Agarremos esa parte y veamos si podemos editar porque por defecto no tengo ni idea de qué es. Veamos qué es aquí. A lo mejor no tiene un defecto. Ahí está mi carrusel ítem activo, no hay por defecto. Digamos que puse este, y digamos que lo bajamos a algo realmente rápido. Se lo haremos a todos en realidad sólo para demostrar un punto. Medio segundo. En realidad lo he puesto en el lugar equivocado así que ponlo dentro de la clase. Solo echemos un vistazo a la documentación. Está fuera de la clase. En realidad es sólo otra propiedad. Haré lo mismo en este de aquí también y en éste. Pega a estos tipos en, y veamos cómo funciona. Echemos un vistazo a nuestro ejemplo. Ahí vamos. Tardó un poco en ponerse en marcha. Es como, ¿por qué no estás trabajando? Se puede ver que está paseando a través de ellos muy rápido ahora. Obviamente, puedes cambiar y ser individual. Podrían tener testimonios. Algunos de ellos son más largos que otros por lo que uno podría ser como un minuto y medio, mientras que los otros chicos podrían ser agradables y rápidos. No necesitas ver esto, ¿verdad? Obtienes lo que quiero decir. Nuevamente, nos estamos acercando al final del curso y estamos cubriendo cada parte individual de Bootstrap o diseño web en general. Espero que aunque estés obteniendo una buena idea de cómo encontrar y abordar y a dónde deben ir las cosas, qué necesitas hacer tú mismo, y en qué puedes confiar para cosas como Bootstrap. Entrémonos a una de las últimas partes donde empezamos a mirar las cartas y rematarlas. Nos vemos en el siguiente video. 124. Cómo poner tarjetas de Bootstrap en una línea usando grupos, juegos y columnas de tarjetas: Hola ahí. Vamos a tomar nuestras cartas que están todas apiladas una encima de la otra y hacerlas lado a lado usando grupos de cartas, mazos de cartas y columnas de cartas. Está bien. Hagámoslo. De acuerdo, entonces nuestra maqueta aquí tiene nuestras cartas lado a lado. Pero en nuestra versión actual, cuando los tiramos a todos antes, mira, todos están justo encima el uno del otro. Por lo que podríamos pasar algún tiempo metiendo en tratar de voltearlos, o probablemente podríamos hacer D-flex. Recuerda, display flex, utilizamos sólo el último video. Pero vamos a cavar un poco en la documentación para ver qué podemos hacer. Tarjetas bajo componentes, tarjetas tienen un montón de, como esta es probablemente la más larga aquí en Bootstrap. Desplazamiento, desplazamiento, desplazamiento, desplazamiento, desplazamiento. Entonces puedo entender cuando dices : “Hombre, eso es mucho por leer”. Tiene una lectura a través, también hay navegación que viene. En mi caso, lo que busco es que quiero mostrarte estos diseños de tarjetas. Por lo que veremos primero los grupos de cartas. Básicamente, si agregas un grupo de tarjetas, es solo aplicar el flex de pantalla, pero de una forma particular. Lo cual es una especie de agruparlos todos juntos, todos en la misma línea. Vamos a darle una oportunidad a eso. Por lo que dice envolverlos todos, estas son tarjetas individuales. Envuélvalos a todos en esta cosa llamada grupo de cartas. Entonces hagámoslo en este código. Aquí están mis tarjetas. Voy a agarrarlos a todos. Ahí vamos. Voy a ir Comando Shift P, empieza a escribir una envoltura. Envolver con abreviatura, y lo voy a poner en un punto, y voy a poner en grupo de cartas. Ya ves, lo envuelve todo en este grupo de cartas. Vamos a revisar para ver qué hace, y jackpot. Bueno, tipo de. Todos están en la misma alineación al menos. Por lo que grupo de cartas parecía funcionar. Pero olvídate de todo más, hay diferentes grupos de cartas. Mira esto. Se trata de una baraja de cartas. Ahora, se ha señalado en el pasado que probablemente el mazo de palabras para un kiwi sea malentendido. Entonces deck es lo que trato de decir. Pero si te estás riendo, probablemente no seas el primero. Sólo porque es gracioso, Google o ve a YouTube y echa un vistazo a Nueva Zelanda anuncio, deck, deletreado de esa manera. Se trata de PG. Si eres adulto, pensarás que es gracioso. No es crudo, no demasiado crudo. De todos modos. Ve a ver eso, pausa, vuelve. Está bien. Entonces si lo tienes, agréguelo tu sistema. Está bien. Entonces vamos a usar la baraja, y vamos a decir baraja de cartas. Yo lo sé. Echemos un vistazo. Mira esto. El mazo es el que queremos. Tiene espacios y vínculos con ella. Esa es una bonita. Echemos un vistazo a qué más se puede hacer. Entonces echemos un vistazo a algunas otras cosas. Ahí hay columnas de tarjetas. No vamos a hacer columnas, pero se podría ver que esto es genial correcto. A pesar de que está apilado uno encima del otro, diferentes tamaños. Eso hubiera sido bueno para, ¿recuerdas esta que hicimos antes? Por el momento, todos son del mismo tamaño. Pero digamos que mi diseño estaba todo dentado y arriba y abajo. Puedo ver cómo eso sería super cool usando las columnas de la tarjeta. Está bien. Entonces eso son grupos de cartas, tarjetas D-E-C-K, y columnas de tarjetas. Entrémonos en el siguiente video. 125. Cómo añadir sombra paralela a un apartado o tarjeta en Bootstrap 4: Hola allí.En este video vamos a añadir sombras de gota a nuestras tarjetas. Se puede ver señalando hacia atrás ahí. Vamos a añadir algo de relleno a la parte superior y la inferior. Vamos a tratar de ignorar este carrusel, que va demasiado rápido en la parte superior. Entonces aquí en mi marcado, he añadido algunas sombras a las cartas. Quiero ver si puedo hacer eso en Bootstrap. Nos hemos topado con esto antes, recuerden, así que buscamos agregar una sombra de gota al texto. Escribimos sombras. Yo me equivoqué, pero ese es el que queremos ahora. De acuerdo, entonces no son las Utilidades, y las sombras, y ahí tienes, algunos buenos ejemplos. Para que puedas ver la sombra pequeña como ésta, la sombra regular es, creo, justo sin nada, y esta es la grande. Vamos a usar sombra, y vamos a entrar en Visual Studio Code. Entonces, ¿dónde lo pongo? Vamos a darle una oportunidad. Pongámoslo debajo de éste de aquí, la baraja de cartas. Vamos a pegarlo. Eso lo estoy ignorando ahora. Eso es una sombra. Veamos cómo va. Ve, y está funcionando. Es agregar una sombra de gota al exterior de todo. No es lo que quiero. Necesito un poco de espaciado por el fondo así que hagamos esas dos cosas. Deshaznos de eso, y tal vez aquí, podemos agregar el margen a la x e y. estoy dibujando aquí. ¿ Alguien más hace eso? Nunca puedo recordar x e y. así que tengo que ir horizontal, vertical, x e y. lo dibujo aquí. Ese es el arriba y el abajo. Por lo que el margen arriba y el abajo de esto van a ser cinco. Vamos a darle una oportunidad, sólo para agregar un poco de espaciado entre ahí y el fondo, y veamos si podemos poner la sombra en alguna parte. Ahora no funcionó en nuestra baraja de cartas, va a ir probablemente en una tarjeta aquí. Entonces agreguemos sombra, en realidad hagámoslo todo una sola vez porque estoy razonablemente seguro de que esto va a funcionar. Ya he hecho esto. Vamos a guardarlo. Echemos un vistazo. Oye, tienes sombras caídas todo el camino. Bonito trabajo. Alto cinco, todos. Nos estamos acercando al final. Yo estoy un poco nerviosa, algo excitada, también. Es un curso largo, con ganas de terminar y sacártelo ahí fuera a ti. ¿ Sabías quién está probablemente más emocionado que nadie? Es el editor. [ RISAS] Jason probablemente esté más emocionado que nadie de que esto esté llegando a su fin. Hagamos uno de los últimos videos. Está saltando ahora. 126. Cómo convertir una etiqueta div en un enlace gigante oprimible en Bootstrap 4: Podría haber estado pidiendo los últimos 30 videos. “ ¿Ya estamos ahí?” Estamos ahí. Por último, tengo una cosita más que hacer. Vamos a darle estilo a estos botones primarios azules por la parte inferior. Vamos a hacerlos de este bonito color verde. Vamos a saltar y a trabajar cómo hacerlo ahora en Bootstrap y VS Code. Por el momento mi tarjeta aquí, lo único que puedes hacer clic es el botón y eso está totalmente bien, pero quiero hacer clicable toda la tarjeta. Bootstrap tiene una clase especial para eso, bajo utilidades hay una llamada estirada link. Básicamente, todo lo que tenemos que hacer es agregar esto a esta bonita pequeña clase a la etiqueta a. Hará lo aparente bien todo clicable, al parecer. Vamos a darle una oportunidad. Vamos a agarrar eso. Vamos a entrar en nuestro Visual Studio Code. Encontremos la etiqueta a. Ahí está, ahí dentro de mi tarjeta y la vamos a sumar a esto. Cambiemos el enlace para ir a algún lugar. No lo sé, no ir a ningún lugar se siente como un [inaudible]. Vayamos a cualquier sitio web antiguo y guárdalo. Vamos a darle una oportunidad. En primer lugar. Tenemos la mano de Mickey Mouse, ésta no, ver la mano de Mickey Mouse sólo aparece por ahí. Si no tienes la mano de Mickey Mouse, diferentes sistemas operativos tienen diferentes causas. Pero ahí vamos y si hago clic en él, oye, presto. Oye, soy yo. ¿De acuerdo? Realmente fácil, me encanta que parezca que fue una cosa tan agradable, fácil de hacer. Está bien, hagámoslo por los otros enlaces. Probablemente vamos a darle estilo al botón y entonces vamos a ser nosotros. Lo estaremos agregando a este enlace aquí. Vamos a hacer primaria. Nosotros vamos a hacer ambas. Asegurémonos de que funcionen primero. Retrocedamos uno. Ese funciona, éste no. ¿ Por qué no? Refrescar. Ah, refrescarse en que funcionó. A veces sí necesitas golpear refresco, lo hemos aprendido a través del curso. Es todo clicable vamos a cambiar este botón porque este botón en momento tiene un hover el cual no nos gusta y el color está mal. Creamos nuestros propios estilos para el contorno primario. Vamos a hacer lo mismo para este de aquí, solo botón primario, no queremos la versión de esquema. Hagamos una clase por aquí para dar una clase de final, lo llamaremos. En realidad vamos a hacer el color de fondo, y vamos a usar, es un color que he usado antes en alguna parte, O-O-B-B-C-9, nos va a dar el verde. Comprébalo. Perfecto. Va a necesitar cambiar el hover porque sigue poniéndose azul. Haremos una pseudo-clase, en realidad haremos un compuesto y pseudo-clase. Salgamos en un resplandor de gloria CSS, coma, quiero volver a hacer éste, pero quiero que éste sea el colon, se cuelgue. Recuerda, la coma se separa, así que estamos haciendo dos cosas separadas y las cosas separadas pasaron a ser el plus regular o primario, la versión pseudo de la misma, donde flotamos arriba. Vamos a comprobarlo y ahora hover es del mismo color, estoy esperando a que cambie. Yo no escogí un color diferente. Yo sólo quiero que sea lo mismo. Trabajemos también en el color de la frontera aquí. Color de borde. Vamos a hacerlo del mismo color que, ¿puedes ponerlo a ninguno? Vamos a echar un poco de mirada. No, tienes que ponerlo a un color. Probablemente podríamos bajar el tamaño en él. Pero en realidad sólo vamos a ponerlo en los mismos colores que todo lo demás. Ahí vamos. Míranos a nosotros. Eso va a ser todo para nuestra codificación juntos, quédate ahí para el próximo video donde discutiremos tus próximos pasos. Por supuesto, te llevaré tus datos de pago por el yogur que quieres pedir. Te veré en un momento. 127. Qué hay a continuación en nuestro curso de fundamentos de diseño web: Hola y bienvenidos al final. Santo humo. Ha sido un curso grande, largo. Enhorabuena. Si bien tus amigos tienen estar sentados en casa viendo Netflix, has estado mejorando, conociendo diseño web y espero que hayas disfrutado del curso, pero ¿qué hacer a continuación? Hay dos opciones que podrías ir, podrías hacer las dos. Aquí hemos creado este sitio web, pero el diseño se hizo para nosotros, ya lo hizo para nosotros. Podrías ir por esa ruta y aprender a hacer más el lado del diseño, antes de empezar a construir un sitio web. Hablaremos de Adobe XD para eso. O podrías ir donde estamos ahora, ¿cómo empujo este diseño web más allá y empiezo a mirar el desarrollo web? Eso sería algo así como mirar PHP o MySQL, donde realmente comienzas a interactuar con el usuario en tu sitio web tomando nombres y direcciones de correo electrónico, y registrándote, todo ese tipo de cosas. Hablaremos de los dos. El siguiente paso lógico probablemente va a ser ¿cómo se va más allá por este camino del diseño web? Hemos construido un sitio web muy estático. Es bastante visualmente atractivo, como un interactivo. Hace menús y este carrusel, y parece interactivo, pero no hay interacción real del usuario en términos de tirar de datos, y hacer cosas con eso. Podrían ser cosas como, estamos hablando, registrarnos en sitio web, registrarnos para cosas, tomar correos electrónicos para boletín de correo electrónico, y recortes de pagos, ese tipo de cosas. Para entrar en eso, necesitas mirar más desarrollo web. Definitivamente soy diseñador web y el desarrollo web es donde mis habilidades no empiezan. Lo que he hecho es que me he unido con otro instructor llamado Malcolm Knott, y se lo lleva desde aquí. El genial de su curso, toma el sitio web Meet Yoga que ya hemos construido, y en realidad añade una base de datos sencilla. Simplemente toma nombres y direcciones de correo electrónico para un correo electrónico, pero te llevará a través de los conceptos básicos de cómo configurar una base de datos usando MySQL. Te llevará por el lenguaje básico que usarás, PHP. Eso te hará empezar a agregar partes un poco más dinámicas e impulsadas por bases de datos a tu sitio web. Echa un vistazo a eso. Se llama Malcolm Knott. Pongo un pequeño enlace ahí, sus sitios web o su curso se llama, Creando un sencillo boletín de correo electrónico usando MySQL y PHP, algo así. Ahí está escrito. Lo he leído mal, ¿no? Echa un vistazo a eso. A continuación, hablemos de XD. Bases de datos es lo que puedes hacer siguiendo de este curso. Lo que podrías hacer y/o hacer es en realidad volver a la parte inicial, donde para este curso, en realidad he puesto mucho del trabajo de diseño ya y acabamos de construirlo. Recuerda, las diseñé todas y acabamos de codificarlas en este sitio. Podría estar mirando ese conjunto de cosas, como ¿cómo me meto en entender cómo tomar realmente un breve? Mira lo que va en este breve, y cómo conseguir la firma del cliente, cómo obtener ideas de diseño, y en realidad prototipo, antes de empezar realmente a construirlo. Para ti, eso sería Adobe XD. Tengo un curso llamado Experiencia de usuario, diseño esencial usando Adobe XD. Echa un vistazo a eso. Esa es la forma de empezar, como el precursor de codificar el sitio web. Podría ser útil para ti. El siguiente tema a discutir es cómo practicas. Depende de adónde vayas. Si estoy trabajando en mis propios proyectos, demasiado duro, porque el alcance, realmente no has decidido lo que quieres de todos modos, y terminas pasando días recogiendo fuentes y colores. Entonces saliendo a tu círculo realmente cercano de personas, y preguntando si la gente quiere un sitio web. Tienes un tío, tienes un equipo deportivo, padre de familia, alguien que podría usar un sitio web potencialmente, e involucrarse con ellos en un proyecto. Intenta hacerlo gratis. Libre siempre tiende a conducir a la mala sangre. Si le digo al tío John, oye, deberías conseguir un sitio web, porque éste es terrible, y él dice, claro, y esto es como, está este libre trato pasando. Le ha puesto cero compromiso. Has comprometido mucho tiempo. Vas a gastar mucho esfuerzo tratando de hacer esto, pero porque no hay valor real de él, bueno, compromiso para él, no va a responder a los e-mails. Ni siquiera va a terminar el trabajo, y luego termina este incómodo reencuentro familiar donde el tío John nunca me volvió. Nunca terminó este proyecto. Por lo que encuentro una pequeña cuota. Se puede descontar en gran medida. Di cosas como, oye, tío John, busco hacer este sitio web. Necesito un proyecto. Normalmente son 2.000 dólares. ¿ Te importaría cubrir algunas de mis horas? Lo haré por 500 o lo haré por un 100. Tan solo para cubrir algunos de los pequeños pedacitos de gastos que vas a cubrir para hacerlo. Si dice que no, entonces ese nunca iba a ser un buen trabajo. Solo se pujó para terminarlo ahí e ir a buscar a alguien más que tenga ese poquito de compromiso, eso te dará un poquito de dinero, porque entonces , su compromiso, cambiaríamos, donde la gente dice, aunque sea 5 dólares, hay un compromiso y la gente cambia de opinión sobre cómo ven el trabajo. Ellos responderán mucho más a los correos electrónicos y es más probable que se ponga en marcha el trabajo. Haz cosas como, oye, normalmente son 2,000, pero para ti, solo quiero un par de horas cubiertas, si te parece bien. A lo mejor 500 o 100, solo para que puedas conseguir un proyecto en marcha. Encuentro que esa es la forma más fácil, solo de encontrar gente en tu círculo cercano. Empieza a construir un proyecto, y esa es una buena manera de ponerte en marcha. Por último, sígueme en redes sociales. Todos estarán apareciendo aquí en un segundo. Facebook es probablemente el mejor. Más interactivo. Publica las preguntas que tengas sobre el curso. Publica tus proyectos. Trae tu propia laptop dot com, slash fb te llevará al grupo. También en Instagram, estoy Trae tu propia laptop, y en Twitter soy Dan ama a Adobe, así que inscríbete por esos y ese va a ser el fin. Voy a agitar un rato y conseguiré que el editor ponga un fade a negro, pero en realidad, intentemos desvanecerse a jitomate. ¿ Recuerdas esos colores? Probablemente sea, en realidad, un poco asesina. Intentemos desvanecerse a verde primavera. Esa fue una buena. Adiós ahora.