Introducción a las tecnologías de sitios web - HTML, CSS, JavaScript y Bootstrap

1. Introducción: Quiero agradecerles por tomarse el tiempo para consultar mi curso Introducción a mi curso Introducción a las tecnologías de desarrollo de sitios web. Soy tu instructor para war Williams y he sido desarrollador web y conferencia durante la última década. Ahora en este curso van a estar mirando todos los conceptos fundamentales que se requieren para ayudarte a ascender al papel de desarrollador web. Estaremos viendo HTML, que es un lenguaje de marcado Eso nos permite poner contenido en documentos que posteriormente se convierten las páginas web reales que se quemaron o en su navegador. También miramos el CSS, que se utiliza en tándem con HTML para hacer que el HTML sea hermoso. Por lo que la combinación de HTML y CSS nos permite 1 poner contenido y luego darle estilo. Es la forma que tanto deseamos. También estaremos echando un vistazo a JavaScript, que es promocionado como el lenguaje de programación más popular del mundo. Es muy fácil de aprender y es el idioma más popular utilizado en casi todo el Internet. Además de eso, echaremos un vistazo a los frameworks de UI y nos centraremos en Bootstrap, que es el marco de interfaz de usuario más popular, que es esencialmente una biblioteca de paquetes de CSS de uso más común estilos, métodos JavaScript, y código HTML. Con el fin de operar eficientemente. Como desarrolladores, estaremos usando Visual Studio Code, que es el editor de texto de código abierto de Microsoft, que está lleno de herramientas de productividad y plug-ins para ayudarle a maximizar su tiempo. Es muy potente y viene con integración para lenguajes y marcos de mayor nivel. Y sí permite nuestra integración de Git. Eso es correcto. Yo sí mencioné a Git. Git es una tecnología que permite a los desarrolladores realizar un seguimiento de sus cambios y mantener una secuencia lógica de copias de seguridad de cada versión de su código. Por lo que estaremos usando GitHub, que es una de las plataformas de control de fuentes más populares en Internet, que se basa en Git. Y se integrará muy fácilmente con Netlify, lo que nos permite desplegar a Internet directamente desde nuestro repositorio de GitHub. Know Netlify nos permite desplegar una vez más directamente desde GitHub directamente a Internet. Y nos permite hacer eso forma gratuita con algunas restricciones, pero es suficiente para que te des una sensación de lo que es construir algo y ponerlo en Internet. Entonces, sin más preámbulos, vamos a meternos en ello. Y una vez más, bienvenido a Introducción a las tecnologías de desarrollo de sitios web. 2. Instala código de Visual Studio: Muy bien, bienvenidos de nuevo, los chicos están empezando con la Sección 1 de este curso, que es donde estaremos aprendiendo los conceptos básicos de HTML, CSS, y JavaScript. Antes de hacer eso sin embargo, necesitamos configurar nuestro entorno, no querer pasar por unos conceptos básicos contigo antes de que ni siquiera no carguemos la herramienta. Uno. Estaremos usando Visual Studio Code para este curso o para esta sección de las puntuaciones. Estos Visual Studio Code es un editor de texto muy, muy potente que es capaz de manejar muchos idiomas. Por lo que es perfecto en mi libro para HTML y CSS, JavaScript a este nivel. Dicho eso sin embargo, es posible que ya tengas alguna experiencia o tengas preferencia por la herramienta. Y hay otras herramientas como corchetes, dot IO o incluso Bloc de notas, Bloc de notas Plus I. Sin embargo, estaremos usando Visual Studio Code y te recomiendo que uses. También es para que todos los plug-ins y todos los de punta centric, que yo esté a punto de mostrarles, puedan aprovecharlos al máximo. Por lo que llegar es sencillamente solo tienes que ir y navegar a través del código dot Visual Studio.com. Y luego en función de tu sistema operativo, puedes descargar para Mac, Windows o Linux. Yo uso Windows, así que definitivamente descargaría para Windows. Por lo que la instalación para esto es bastante sencilla. Todo lo que necesitas hacer Siguiente, Siguiente, Siguiente, Siguiente, y luego cuando esté completamente instalado y lo abras, serás recibido con una pantalla similar a ésta, la pantalla de bienvenida no, a tu izquierda. Y solo te dan un rápido recorrido por este IDE a tu izquierda. Vas a tener la opción de mirar y explorar, que te muestra todas las carpetas y archivos de tus proyectos actuales. Entonces eso es una cosa que quieres asegurarte. En cualquier momento que estés construyendo proyecto web, creas una carpeta que está dedicada a ese proyecto en particular. También podrás buscar en todos tus archivos de código. Cuando los obtienes, puedes conectarte al control de fuente y puedes mirar a ejecutarse en la depuración. Conoce, en el caso de un documento de sitio web HTML, no necesitas preocuparte por escribir y depurar. Esto es más para si tienes algún marco JavaScript complejo trabajando con o incluso Python R C en algún otro lenguaje que necesita ejecutarse para poder empezar a trabajar. No, la pestaña final aquí se llama extensiones. Y sólo voy a apuntarte en la dirección de unas pocas extensiones que definitivamente vamos a encontrar útiles. Entonces tengo un montón de extensiones porque llevo un tiempo usando esta herramienta. Pero para los efectos de este ejercicio, les animaría a conseguir servidor en vivo. Por lo que solo puedes golpear extensiones y luego escribir servidor en vivo, presionar Enter, y luego se filtrará , haces clic en él, y luego podrás instalar. Está bien, así que adelante y consigue Live Server. Y entonces también te animaría a conseguir el bootstrap para extensión, que también tengo instalado. Por lo que esto lo hará más adelante cuando nos acostumbremos al desarrollo y así sucesivamente. Y nuestro proyecto empieza a crecer. Url como un ya no tienes mucho tiempo para enfocarte en las pequeñas cosas. Por lo que estas herramientas te ayudarán con su productividad en general. Para que puedas seguir adelante y conseguir que esas dos extensiones incluso sepan. Y luego cuando volvemos, miramos a la autoría de nuestro primer documento HTML. 3. Escribe tu primera página HTML: texto y enlaces: Muy bien chicos, bienvenidos de nuevo. Entonces en esta lección vamos a empezar con nuestra autoría de documentos HTML. Recuerda dije que en cualquier momento eres un perno para hacer un proyecto en proyecto web o cualquier tipo de proyectos realmente, siempre uno crea una carpeta o al menos destinar en algún lugar que este proyecto sobre los activos relacionados con este se almacenará el proyecto. Entonces lo que vamos a hacer es en Visual Studio Code, vamos a abrir una carpeta, ¿verdad? No tienes la carpeta. Eso está bien. Una vez que tiendo a hacer es navegar a la ubicación donde sé que se almacenarán mis proyectos, luego crear una carpeta. Entonces solo voy a seguir adelante con el botón derecho diga Nueva carpeta. Y esto sería HTML, voy a llamarlo un Fundamentos HTML. Entonces después de crear la carpeta, entro y luego selecciono esa carpeta, sé lo que Visual Studio hará es, y estoy obteniendo esta confianza escaneable y eso está bien. Elegí a los autores de todos los expedientes. Está bien. Para ser honesto, a veces se olvidó esa advertencia antes, así que eso es bueno. Muy bien, Entonces, lo que hará el código de Visual Studio es null establecer la solución de forma predeterminada en esa carpeta. Entonces en esta Solución, Explorer o el explorador de cualquier manera que vas a ver es el nombre de la carpeta en la parte superior. Y cuando pasas el cursor en esa zona, obtienes las opciones para agregar un nuevo archivo, una nueva carpeta, Refrescar o colapsar. Entonces lo que queremos hacer es agregar un nuevo archivo. No hay regla de pulgar. Cada vez que eres un perno para construir un sitio web, un proyecto web, grupo de páginas web, lo que sea, sin embargo quieras clasificarlo en prácticamente todos los idiomas y nuestro marco. Tu primera página debe llamarse índice. La extensión puede diferir porque estamos haciendo HTML. Será index.html. Lo mejor es dejarlo como minúscula y todo en minúscula porque multiplataforma, algunas plataformas preferían a C minúscula, algunas no les importa, pero todos les quedarán satisfechos si es minúscula. Entonces minúscula yo o una palabra minúscula, index.html, ese siempre debería ser tu primer archivo. Entonces ahora que tenemos ese archivo creado, veamos lo que entra en este archivo. Entonces un archivo HTML es un documento, ¿verdad? Y como dijimos, esto es lo que se muestra al usuario. Entonces lo que sea que pongas en este archivo es lo que realmente se muestra al usuario. No obstante, hay ciertas reglas son hoyo propiedad en el que pones contenido. Entonces en el nivel muy básico, si dijera hola mundo, nada demasiado elegante, no se ve muy complicado, ¿verdad? Y luego puedo previsualizar esto usando Live Server. Así que basta con hacer clic derecho en el archivo y luego decir abrir con servidor en vivo. Entonces tu navegador se lanzará y verías Hello World. Y lo genial de los barcos Live Server es que si pongo estos dos uno al lado del otro y escribo cualquier cosa que hubiera tecleado al ascensor automáticamente se actualizará a la derecha. Tiene sentido Es un rato y si no se actualiza a la misma hora, entonces siempre puedes simplemente golpear Refrescar lo que siempre mantendrá a camión alejado lo que cambies aquí. Ahora si lo notas, cada carga no es posible sin un cuerpo o etiquetas de cabeza. Entonces por eso sigo teniendo que golpear Refresh. Entonces cada vez que escribo no pasa nada. Tengo que golpear Refrescar dinero o ellos entonces me advierte. Entonces eso es todo diciéndome que mi documento necesita algo de trabajo? Mi documento no cumple con las reglas de un documento HTML. Por lo que HTML tiene algunas pautas estrictas cuanto a cómo debe ser el contenido. Poco número 1, deberíamos tener esta etiqueta llamada nodo tipo doc. El ductus básicamente declara al navegador que hey, soy un documento HTML. Y es especialmente útil para el último tipo de documentos, que serían documentos HTML5, que la mayoría de los navegadores modernos lo supieran, vale, puedo poner en el renderizado HTML5 y saber exactamente cómo tratar lo que sea que entre en este documento. Voy a sí mismo que necesitamos otra etiqueta que diga HTML. Ahora nota la anatomía de estos tucks. Tienes un soporte de ángulo abierto o es eso lo que pone menos que firmo. Y luego tienes el nombre de la etiqueta, y luego tienes el signo mayor que o el corchete angular orientado a la derecha para cerrarla así que esté abierta. Tipo de soporte de ángulo abierto en el nombre de la etiqueta, cierre los corchetes angulares. Observe también que cuando escribí HTML, tenía uno arriba y luego otro se le ocurrió una barra. Por lo que literalmente estás abriendo el remolcador en el cerca cerrando la pestaña. Entre el remolcador, pones el contenido. Por lo que el único contenido que alguna vez va directamente dentro de la etiqueta HTML es otra etiqueta llamada head. Por lo que abrimos la cabeza tipo soporte angular, cerramos el soporte angular, y luego otro llamado cuerpo. Ahora nota que siempre se ha vuelto para ayudarte es solo que Studio Code siempre está tratando de ayudarte. Y hay limitaciones tanto que te ayudará por defecto. Son extensiones. Puedo aumentarlos a una fobia, conseguir lo que simplemente usaríamos lo que tenemos para no, Es bueno desarrollar la disciplina de escribirlos adecuadamente sin ayuda externa. Entonces tenemos la etiqueta HTML, y luego dentro de eso tenemos una cabeza abierta y cerrada. Tendré un cuerpo abierto y cerrado. Tanto como con cualquier otro documento. Tienes el encabezado y tienes el cuerpo, y luego también tienes un pie de página. Pero conceptualmente se puede poner el pie de página dentro del cuerpo en esta situación, pero sí tenemos la cabeza y sí tenemos el cuerpo. Entonces veamos lo que había en la cabeza, entre otras cosas. Ahora mismo, sólo me voy a centrar en el título. Por lo que el título sería mi primera página web. Está bien. Ese es el título del sitio web y todo el título es lo que se muestra en los boroughs o son cuando abres el navegador, estás en la tina y te verías como dash de Amazon.com, sea lo que sea esto todo lo que están haciendo. Simplemente están viendo el título es Amazon.com, título es google.com, lo que sea que escribas aquí, Eso es lo que aparece en el navegador. Somos un wearable para ver que el sobrino en el cuerpo, sin embargo, ahí es donde el contenido real para los objetivos del documento. Entonces aquí es donde hubiera escrito mi Hello World. Ahora que he hecho todo eso, déjame volver a mi Live Server y refrescar y notar que esta vez no hay quejas de Visual Studio Code, un barco, cualquier cosa siendo toda mala suerte. Entonces eso significa que si sigo escribiendo y digo, esta es mi primera página web, mira cómo lo hace el servidor en vivo. Actualizado eso para mí automáticamente. Y Visual Studio Code no se queja porque ahora está contento y satisfecho que tenga un documentos HTML totalmente estructurado. Entonces como dije, son reglas muy estrictas a su alrededor. Bueno, una vez que consigues eso bajo envolturas, entonces no tienes ningún problema. Aviso también en la pestaña del navegador, verás mi primera página web. Entonces eso es lo que ponemos en el título. Y luego en el documento están nuestros textos. Ahora. Sí, tenemos texto, pero entonces no es necesariamente ideal para nosotros solo escribir el texto en. A veces necesitamos estructurar que te lleve querido a la izquierda, lo queremos a la derecha. Queremos que este bloque de texto en particular se vea diferente al otro bloque de texto. Entonces tenemos que usar diferentes etiquetas para que puedan ser dirigidas en consecuencia. Entonces sí, tengo este trozo de texto, pero lo que voy a hacer es ponerlo en lo que llamamos una etiqueta p. Por lo que P es abreviatura de párrafo. Y lo genial de Visual Studio Code es que cuando pasas por encima de estos perros, en realidad te explicaría lo que representan. Por lo que el elemento p representa un párrafo. Por lo que cada vez que tengas un bloque de texto, te recomiendo que lo pongas dentro de un tipo p. Y luego puedes tener múltiples etiquetas p que digan cosas diferentes. Esta es la etiqueta p. ¿ Todo bien? Ah, esta es la etiqueta p. Está bien. Y tienes múltiples formas de conseguir texto. Entonces tienes la etiqueta p, también tienes lo que llamamos heterocigotos. Entonces podría decir cabecera y voy a poner el helloworld dentro de las etiquetas de encabezado, así que eso es h uno. ¿ Todo bien? Y luego tienes H1 a seis. Entonces uno es el más grande, seis es el más pequeño. Entonces sólo voy a duplicar estos. Entonces solo estoy sosteniendo Control presionando C. Y note que no estoy destacando el liner ni nada. Simplemente ve luego V y duplicará la línea para ti con un mínimo esfuerzo. Entonces voy a hacer H2, H3 por cinco y luego seis. Para que no, no esa traga. Yo sí abro y cierro así de ellos adecuadamente. Cambio éste a H2O y no lo estoy cerrando correctamente. Eso es una normal, siempre se trató de ser disciplinado. Los navegadores modernos en realidad trataron de compensar tus flechas. Entonces si mirarás en el navegador, verás que estás viendo ese tamaño decreciente como lo había mencionado de H1 a H6, y está disminuyendo. Eso es porque está compensando el hecho de que no cerré la etiqueta correctamente y está asumiendo que me refería a la etiqueta H2, así que ya está llenando el espacio en blanco para mí, pero eso es un no-no. Entonces eso es una cosa a la mente. Un barco lleva a editores. Algunos de ellos son mejores que otros en mostrarte esto, pero generalmente no te van a decir, oh, tienes un error sintáctico. Simplemente los dejarán manifiestos en la pantalla de la página, o se manifestará en cualquiera de las situaciones. Y entonces pensarás que tu código es bueno, pero siempre es bueno ser disciplinado y hacerlo bien la primera vez. Entonces cuando abro una etiqueta H1, la cierro. Si abro una etiqueta H2, la cierro. Si abro un H3, átala su ciérralo. Entonces solo estoy haciendo doble clic y copiando y pegando. Está bien, eso es todo lo que estoy haciendo aquí. Y luego te darías cuenta una vez más, nada se actualiza en la pantalla porque ya sabían me imaginé que me refería a cada 234, etcétera, etcétera. También tenemos las etiquetas p abajo, y esas son, vale. Ahora veamos algunos otros remolcadores. Seguro te resultará útil y probablemente sean las etiquetas o cosas más comunes que verías en los sitios web. Por lo que aparte de textos que van de grandes a pequeños, estoy seguro de que estás familiarizado con los enlaces porque tienes que hacer clic en un enlace para pasar de una base a otra, o hacer clic en un enlace para pasar de un sitio web a otro it, por lo que tienes una etiqueta llamada la etiqueta ancla. Entonces si pasas por encima de él, lo verás. Si el elemento tiene un atributo, entonces representa un hipervínculo. Entonces un hipervínculo, esa es la bonita palabra previendo tendrás un enlace o esa es una palabra completa obligando a tener un enlace, ¿verdad? Observe que decía un atributo llamado deriva. Entonces veamos qué es un atributo. Entonces tenemos el remolcador y hemos establecido que lo que entra entre la etiqueta de apertura y cierre es el contenido del tema. Entonces vamos a ver, tenemos esta etiqueta de ancla y quería vincularla a Amazon. Está bien, así que va a salir la palabra que aparece Amazon ¿qué? No se puede hacer clic, mira, no es un enlace, así que ese es el contenido de la etiqueta ancla. Pero entonces necesitaba ser clicable. Entonces lo que necesito hacer es agregar un atributo. Un atributo va por dentro de lo abierto, te mete que esta es la etiqueta abierta. Y fui de la barra espaciadora ANS. Y luego voy a escribir en ese atributo H ref. Ahora hay una serie de atributos que se pueden utilizar. Algunos de ellos son legales hasta ahora no. Algunos serán ignorados, otros lo estropearán. ¿ Está bien? Bueno, entonces en términos generales, mayoría de las veces se vería como un atributo llamado ID, que es como un nombre especial que le estás dando a esta etiqueta en particular. Está bien, para que pueda ver enlace, uno, esa es la identificación de este enlace. Pero entonces el atributo que realmente hace el vínculo common law es el atributo, atributo. Y entonces tendría que escribir en el, el enlace a donde quiero ir. Entonces solo voy a poner en la URL completa, https colon slash slash www.amazon.com. Muy bien, Después de hacer eso, nota cómo cambia automáticamente. Conoce el navegador sabe que este es un enlace que va a Amazon.com. Y cuando hago clic en eso lo suficientemente seguro, es a una carga Amazon. Por lo que acabo de hacer un clic en el medio para que subiera en la tina diferente. No obstante, si quisieras que apareciera en la pestaña diferente automáticamente porque si hago clic en ella, solo será Bros somos a veces no queremos que eso suceda con nuestros navegadores, ¿verdad? Queremos nuestra tristeza con nuestra página web. En ocasiones queremos que hagan clic en el enlace e vayan allí en un pH diferente pero no se alejen de nuestra página web. Entonces para hacer eso, puedo ver objetivo es igual a y luego decir subrayado en blanco. Entonces de esa manera, el navegador sabe cuando se hace clic en el enlace, abre otra pestaña u otra ventana que veo. Por lo que los atributos te permiten dar un poco de algo especial a la etiqueta en particular con la que estás lidiando. Ahora y si recuerdo que estamos construyendo en nuestra página web. Entonces nuestro sitio web es una colección de páginas web, ¿verdad? No, sólo tenemos una página llamada index.html. ¿ Y si quisiera navegar entre las páginas? Está bien, así que voy a crear otra página, y llamemos a ésta un punto de barco HTML. Entonces esta es mi página de barco. Y le voy a dar la misma estructura básica y lo voy a hacer desde cero para que puedas volver a ver. Entonces empezamos con el DOCTYPE HTML y luego abro la etiqueta HTML y después tenemos inserto de eso tenemos la cabeza y luego el cuerpo. Entonces en la cabeza que quería ver es una página de perno. Y luego en el cuerpo, sólo voy a poner algo sencillo. Y C, cada uno, un barco, un discurso. Muy bien, entonces ahí es donde nos encantaría navegar a su página de barco. Entonces si quisiera un enlace que navegara por ahí y solo voy a poner ese enlace arriba porque es por lo general donde la barra de navegación cita unquote ir de todos modos. Por lo que ese enlace para permitirle ir a ese balas o discurso, voy a ver edad ref es igual a un bote dot HTML. Y eso es realmente todo lo que se necesita, ¿verdad? Solo necesito poner en la herramienta AS el archivo al que quiero navegar. Observe que todavía no hay nada en la página. ¿Por qué? Porque no le di el contenido. Lo que entra entre abierto y lo cerrado son los contenidos. Entonces voy a decir un autobús en barco y luego podemos conseguir están vinculados en el discurso de Ibotta. Y cuando hacemos clic en él lo suficientemente seguro, aterrizamos en nuestra app perno de voz. Entonces ese es este agujero. Se puede enlazar una página a otra. Muy bien, Entonces cuando volvamos, lo que vamos a estar haciendo es mirar algunas otras etiquetas de valor agregado como cómo conseguir una imagen y cómo llegar a una lista en y sostener para empezar a sentar formularios. Entonces mantente atentos. 4. Explora más etiquetas HTML, imágenes, formularios y listas: Bienvenidos de vuelta chicos. Seguimos aprendiendo sobre las etiquetas HTML básicas. Sepan, lo que vamos a hacer es echar un vistazo a cómo podemos meter una imagen en nuestro proyecto. Entonces lo vamos a hacer con la página sobre, ya que hace mucho menos contenido e índice página. Entonces para conseguir una imagen, solo voy a saltar a uno de mis sitios web favoritos que usan, que es pixabay.com. Por lo que tienen hermosas fotos de stock de forma gratuita. Está bien, así que vamos a agarrar el primero que veamos. Puede que no estés viendo la flor, pero los conceptos son medios independientemente de la imagen que estemos usando, Descarga y descarga gratis. Tamaño bastante pequeño. Así que sigamos adelante y golpeemos Download. Y cuando obtengas el archivo, notarás que va bien, va a tu carpeta de descargas o donde los archivos descargados se predeterminarán en tu computadora. No obstante, una vez más, cuando estás construyendo un sitio web, quieres todos tus activos, todos los archivos relacionados con el sitio web en la misma carpeta y la misma ubicación para facilitar el acceso. Porque como viste cuando estábamos creando la edad ref para la etiqueta de anclaje, fue tan fácil como sólo ver el nombre de la página. Y si el spandrel no está en la misma carpeta, entonces tendría que calificarlo completamente después de barra de dos puntos, cualquiera que sea la barra de carpetas, cualquiera que sea la barra de carpetas cualquiera que sea su carpeta de descargas esté lejos desde donde carpeta de tu sitio web podría ser arte. Por lo que ponerlos en el techo de DCM, por así decirlo, es tu mejor apuesta para tenerlo fácil. Para que puedas seguir adelante y encontrar esa imagen en tu sistema de archivos. Puedes copiarlo como en arrastrar y soltarlo desde esa carpeta en tu código de Visual Studio. Y automáticamente entrará en esa carpeta con todos tus activos web. De acuerdo, para que puedas seguir adelante y hacer eso. Y una cosa que quiero señalar antes de seguir adelante es que puede obtener un nombre de imagen. Pero entonces ese nombre de imagen podría complicarse porque cuando hay que escribirlo dicho imagen y arriba en tipo Watson, Florida dash dot alfanumérico o lo que sea código, dot JPEG. Por lo que siempre quieres intentar cambiar el nombre de tus archivos a algo simple o algo muy indicativo para que puedas recogerlo fácilmente. Entonces solo voy a renombrar este despegue todos esos números y llamarlo girasol dot JPEG. Las extensiones son muy importantes si es P&G, no lo cambies. Si es JPEG, no lo cambies. Si es GIF, no lo cambies. Sea lo que sea que llames, siempre devuelve una rutina, ese punto y lo que alguna vez podría alfabetizar los puntos. De acuerdo, así que el punto de girasol JPEG, o JPEG es lo que llaman esa combinación de letras. Sepa que tenemos nuestra imagen de girasol dentro de nuestra carpeta y lista para su uso. Puedes ir a tu página y luego solo puedes usar lo que llamas una etiqueta IMG. Esta etiqueta es especial porque a diferencia de las otras etiquetas, es autocierre. No tiene IMG abierto y cierra IMG. Cuerpo se abre y cierra, se abre y se cierra. Isquémico. ¿Esa H1, todas las que hemos mirado hasta este punto, abiertas y cerradas. No obstante, IMG es autocierre. Ahora, ¿cómo le decimos al IMG qué imagen debe mostrar? Bueno, usamos atributos. Entonces los primeros atributos, y probablemente el más importante es el SRC. Dice Src, ¿Dónde está la fuente? ¿Está bien? Por lo que la fuente de la imagen sería, y sería el camino de la imagen. Entonces un barco está justo además en piso, así que la fuente es girasol, ¿verdad? No noté que el código de Visual Studio en realidad hará la sugerencia de que todo lo que estás tratando de conseguir el piso de tugurios presione Enter y automáticamente lo hará para ti en vivo servidor está viendo servidor en vivo será agradable y fácil. Ahora si querías ajustar el tamaño de esto, siempre puedes ver fue otro atributo llamado width. Por lo que podrías reducir esos 200, podrías aumentarlo a 900. Bueno, claro que quería tener mucho cuidado con esto porque la imagen que obtuvimos estaba en este 64 para comprar algo pixeles. Entonces no me gustaría aumentar el ancho a más es la imagen porque entonces empieza a pixelarse. Entonces eso es una cosa a tener en cuenta. Al elegir imágenes para diferentes propósitos, asegúrate de que sean lo suficientemente grandes para la sección en la que las quieres. O si van a entrar en una sección más pequeña es peros se llama impresionante a ese tamaño en particular para que ocupe menos espacio en su disco duro en general, y toma menos tiempo cargar el activos para un sitio web. Imagina intentar cargar este archivo de megabyte B3 que en realidad solo va a estar mostrando un 200 anchos, ¿verdad? Cuando si lo comprimiste, entonces probablemente sería un archivo de 200 kilobyte. Estás molesto con Lord Foster. Conoce, al igual que con el ancho, también puedes ajustar la altura y puedes divertirte un poco con este. No hay mucho más que pueda decir respecto es que solo puedes divertirte un poco. Juegas con las dimensiones si necesitas. Por lo que encontrarás diferentes imágenes e intentarás ponerlas, alinearlas en consecuencia. Pero así es como te metes una imagen. Una vez más, esa es una etiqueta de autocierre. Son varios de estos. Entonces algunas de ellas nunca usarás hasta que tengas dos almas. O sea, no se mencionó eso, no, pero sepan que están ahí. Y aunque no pueda enseñarte alguna vez sola etiqueta, es que no vería que es posible enseñar cada etiqueta en cada escenario en el que se usan. Simplemente te animaría a experimentar y practicar, y eso es todo lo que realmente desarrollarás tus habilidades de desarrollo web. Ahora la próxima vez que queremos mirar, bueno, en realidad son dos etiquetas son tipo de ir de la mano porque hacen cosas muy similares serían listas? No. Estarías familiarizado con las listas si usas Microsoft Word y él quería una lista de viñetas o querías 123, cualquier forma de listado, puedes lograr eso con HTML y sus participantes. Simplemente tienes la etiqueta UL, que es abreviatura de lista desordenada. Y una lista desordenada siempre tendrá un elemento de lista, uno o muchos elementos de lista. No, nada debe entrar dentro de esta etiqueta UL excepto nuestra etiqueta de elemento de lista. Después de poner en la etiqueta de elemento de lista, entonces puedes volverte loco con lo que quieras otra vez, ponerte una etiqueta p, ¿verdad? Lista, punto uno. Podrías ponerte otro tipo de corbata. Podrías ponerlo en H algo blanco, ¿verdad? Podrías ponerte una toalla de cinco años si quisieras. Cualquier tipo de tipo puede ir, pero nunca querrías poner esa etiqueta h5 directamente en esa lista, en esa etiqueta UL rhabdo porque mira la diferente nieve, esa bala desaparece y luego estoy seguro se va a Crayola, se trata de otra cosa. Entonces como dije, puede que no te diga en la edición terrible ante esos errores. En su mayoría definitivamente se manifestará en la pantalla. De acuerdo, así que solo quieres seguir las reglas. Ally UL, lo siento, abre la lista desordenada, luego comienzas con el ítem de lista y luego pones lo que quieres en el ítem de lista. Por lo que p tag, edad 59, poner una imagen en la etiqueta de ítem de lista. Realmente no importa. Está bien, entonces sólo queremos saber la otra versión de la lista sería la, OH, que sería la lista ordenada. Entonces cuando queremos 1, 2, 3, ahí vamos. Entonces vemos OLC. Ves que estos dos son realmente idénticos. Son como primos muy cercanos, ¿verdad? Lo harás. Y el petróleo, ambos tienen la misma estructura en su interior. Tanto los elementos de la lista de cavar y luego lo que necesites entra dentro de esa etiqueta de elemento de lista. Conoce. Y echemos un vistazo al siguiente artículo importante del boleto, que es la forma. Entonces lo que voy a hacer crea un nuevo documento, y éste se va a llamar contact dot HTML. Contactos punto HTML. Voy a poner en marcha la misma estructura por noaa. Espero que hubieras practicado un 10 años familiarizado con ello, cabeza y el cuerpo en este punto también, sinceramente pido disculpas por haber olvidado mencionar que necesitas guardar tu documento con cada cambio. Supongo que lo has averiguado. Ya lo sé, pero yo esto fue un descuido de mi parte. Pido disculpas. Pero necesitas ver los cambios que estás haciendo antes un servidor en vivo escoja a adultos y mayores. Algo que he hecho porque no siempre me acuerdo de ver si soy como, oh, no, no he mencionado que hay que ahorrar. Es porque había habilitado el autosave. Por lo que en Visual Studio Code, te permiten decir autosave. Entonces, cualquier cambio que hagas se reflejará, razón por la cual mi servidor en vivo siempre se está actualizando porque siempre está guardando automáticamente en la propensa a los bichos. Por lo que pido disculpas por no mencionar eso antes nulo. No obstante, sigamos adelante. Por lo que dentro de nuestra página de contacto tenemos el título. Entonces esto son tomates divertidos. Y luego en el cuerpo voy a poner una etiqueta H1 que diga font ductus, para que cualquiera que aterrice en esta página sepa en qué página están ¿verdad? Ahora, por lo general un formulario de contacto tiene bien, forma, un contacto de habla tiene fuera de la granja. Entonces veamos también cómo formulamos las formas y las formas son realmente fáciles. Pero debo mencionar que los formularios son la puerta de enlace entre un usuario y sus sistemas internos. Porque cada vez que un usuario escribe algo en o escribe algo en el formulario y luego haz clic en Enviar. En realidad están enviando más de d Theta a tu sistema. Por lo que más adelante cuando llegues a un nivel más alto de desarrollo y construyendo sobre bases de datos, construyendo interfaces web encima de una base de datos. Y como cuando estamos haciendo desarrollo de núcleo ASP.Net, entonces veremos ciertas características de seguridad que necesitamos para asegurarnos de que incrustar nuestros sistemas. No obstante, por ahora, sólo sigamos adelante. Entonces para llegar a formar, tenemos la etiqueta de formulario, ¿verdad? Y dije simple, lo suficientemente sencillo. Entonces déjame simplemente escribir eso apropiadamente. Forma. No, la forma tiene tres tipos de etiquetas que puede tomar. Digamos que liberalmente son al menos cuatro tipos de blancos, ¿verdad? Tenemos lo que llamamos la etiqueta. Etiqueta es importante porque nos dice o nos permite ver. El campo está a punto de ser editado. Déjame que haga bien mi ortografía. Y nota que estoy tratando de hacer todo en minúsculas, ¿verdad? Las etiquetas es qué campos, así que esto sería FirstName, esa es mi etiqueta, ¿verdad? Entonces voy a decir qué control quiero aceptar el nombre y voy a qué control sería mejor si dijeras cuadro de texto, entonces estás justo en el dinero porque normalmente cuando estás escribiendo en tu nombre, es texto. Y obtienes una caja que te permite ingresar texto. Entonces es un cuadro de texto. Entonces probablemente estés pensando, Vale, así que hay un cuadro de texto Doug sabe que toma ahí es diferente. Tienes una etiqueta de entrada. Está bien. Lo cual también es autocierre. Conocer la entrada toma atributos que le ayudan a definir nuestra identidad de ruido. Por lo que yo diría que el tipo es igual a 0. Y entonces aquí vemos toda la lista de tipos de insumos, ¿no? Por lo que a partir de arriba, puede ser una casilla de color, hizo todas estas cosas maravillosas. Pero ahora mismo para el nombre de pila, el que es más adecuado sería el cuadro de texto. Por lo tanto, el tipo es igual al texto. Está bien, te voy a mostrar otra cosa. Recuerda que mencioné antes el atributo ID. Este es un nombre especial que le damos a esa etiqueta. Bueno, si veo fname, entonces eso me permite usar esta etiqueta y etiqueta C para. Y luego le doy el mismo F9. ¿ Todo bien? Y aunque atributo importante que va con las etiquetas de entrada, sobre todo cuando se trata código del lado del servidor es el nombre. Por lo que dirías nombre es igual. Y si nombre, entonces el nombre es muy importante para cuando vas a estar poniendo la inteligencia usando Python, PHP, C-sharp, como vamos a estar haciendo con dotnet Core. Permite que ese lenguaje vea realmente el valor proveniente de ese particular, de ese control particular. Por lo que tenemos el formulario donde sea etiqueta, tenemos un cuadro de texto. Entonces FirstName, eso está hecho. Podemos hacer dirección de correo electrónico. Entonces vamos, vamos a ver en sólo el nombre completo en lugar de los nombres también es un fname. Fname puede ser nombre completo, ¿verdad? Este, Vamos a ver, correo electrónico. Por lo que quiero la dirección de correo electrónico del usuario que está tratando de contactus dirección de correo electrónico. Y luego voy a ver tipo es igual a lo y he aquí, hay un tipo de email, los ID email. Entonces solo estoy llamando a estos correos electrónicos. Podría haber calificado completamente su dirección de correo electrónico de inicio y el ID y el nombre no necesariamente tienen que ser lo mismo. Está bien. Entonces solo estoy jugando un poco aquí. Permítanme ampliar esta vacante el código por completo. De acuerdo, entonces tenemos nuestro nombre completo, tenemos nuestra dirección de correo electrónico. ¿ Qué más necesitamos en nuestro formulario de contacto? Digamos que necesitabas la consulta. Entonces una vez más, más de esta etiqueta y lo voy a llamar consulta o queja, sea lo que sea. Y la mano de obra va a decir consulta. Conocer la consulta sería cuál sería el párrafo viendo? Yo estoy descontento por esto. Es por eso que me pongo en contacto. Quieres permitirles leer el ensayo que vinieron aquí, de todos modos, leer. Entonces ahí es donde lo vas a ver área de texto, porque toma área te da un espacio mucho más grande para escribir, toma, así que eso toma la flecha. Y entonces una vez más, no necesitamos tipo porque ya saben que es lo que toma área. Pero podemos darle una identificación y yo solo diré consulta. Y una vez más, queremos darle el nombre para que podamos ver consulta. Muy bien, ahora echemos un vistazo rápido a todo nuestro arduo trabajo hasta ahora. Entonces lo que voy a hacer, volver al índice y crear otra URL. Y éste voy a llamar al contacto dot HTML. Y es divertido. Habla con nosotros. No hay buena regla de oro con diseño de sitio web y sitio web porque hay múltiples documentos, múltiples páginas, se quiere poder llegar de cualquier página a cualquier página de cualquier otro pH, ¿no? Entonces lo que tendrías que hacer es uno, añadir una nueva etiqueta de ancla que haga referencia a la página de inicio. De acuerdo, Así que sí, es la página de inicio que hace referencia la página de inicio igual que todo lo que estarías en la página de inicio de nuestros sitios web. Tú lo inicias de sesión. Escala de grises simplemente te trae de vuelta a la página principal. No fue a ninguna parte, ¿verdad? Por lo que tenemos ese enlace a la página de inicio, pero luego podemos copiar esta sección. Está bien, no quiero hacer es solo usar un var o lo que le llamaremos pipa en el medio. Entonces si estás usando teclado western, entonces eso será turno en la barra invertida, que suele estar por encima del botón Enter que te da esta tubería, ¿verdad? Por lo que se separan en las etiquetas de anclaje. Y luego voy a poner estas etiquetas de anclaje en cada página, ¿verdad? Entonces tanto el contenido, viendo en qué página estoy. Tengo esta navegación improvisada por eso con fugarse para moverse entre las páginas. ¿Ves eso? Entonces así es como estos conceptos se unen para el diseño hip decide, ¿verdad? Poco a poco, se ve cómo todo interconecta nodo y ese nodo que es yo he resuelto esta navegación entre las páginas. Si me refresco o vuelvo a navegar, veré que si hago clic en Inicio, estoy en el conjunto, pero mira eso, puedo llegar a quien pueda llegar a esa maltosa. Puedo volver a casa, puedo ir a Contáctenos, mira eso, entonces puedo volver a un barco también. Centrémonos en un contacto con nosotros ahora mismo. Entonces tenemos nuestros libros de texto Eso es genial. Mira eso, toma cajas y luego podemos escribir nuestra consulta. Eso es bueno, pero no estoy todo satisfecho con el diseño y estoy seguro de que tampoco lo estás porque estoy seguro de que no estás acostumbrado a ver contacto esos formularios todos yendo en una línea así. ¿ Está bien? Entonces lo que quisiéramos hacer es poner un descanso entre ellos, ¿verdad? Por lo que para levantarse Brick Nueva alerta TAG, tenemos la etiqueta de autocierre BR. Br sólo significa BreakLine, ¿verdad? Simplemente representas resumen. Entonces eso será como cuando presiones Entrar en Microsoft Word, ya sabes, estás escribiendo, escribiendo, escribiendo, querrás ir a la siguiente línea. Presiona Intro, vuelve a escribir. Por lo que BR es lo que te permitirá poner línea de freno de ladrillo entre bloques de contenido en tu página. Tenga en cuenta, sin embargo, en la página de índice que no tuvimos que romper cuando hicimos el H1 y los p's porque tipo de vienen con su propio mecanismo de frenado. Entonces dentro de una etiqueta P, si quisiera tener un bloque de texto, entonces otro bloque de texto, pero dentro de la misma etiqueta p, entonces podría simplemente inyectar esa etiqueta BR. Y te voy a mostrar eso rápidamente. Entonces digamos que tengo, esta es mi primera página web. Puedo saber decir que esto es lo que quiero en la nueva línea. No como he dicho que si vuelvo a mi página de índice, noten que todo está ahí dentro. El renglón, si presionaba Entrar stint en la Pieta, aquí hay una etiqueta P abierta y cerrada. Y pongamos tres espacios para espacios entre ellos y yo vuelvo, sin cambio, ¿verdad? Todavía va en un ojo. Y por eso necesitamos ese tiempo de descanso para luego decirle que vaya a la siguiente línea y tantos descansos como pongamos, tantas líneas como él va a introducir, pero todavía estamos en la escena. Etiqueta P. Está bien, así que eso es mantener esta etiqueta de ruptura realmente funciona para nosotros en estas situaciones. Por lo que volver a nuestro formulario Contáctenos. Nosotros hemos dicho nombre completo y su nombre completo. Dame una breve luego siguiente etiqueta. Ingresa lo que necesitas para entrar, dale a Maverick, y luego Enter. ¿ A qué se necesita para ingresar? nuestra página Contáctanos se ve así. No. Bueno, hay diferentes interpretaciones de cómo pueden verse las formas. Todavía no estoy satisfecho con este. No quiero mis etiquetas y mis cuadros de texto son mis controles en la misma línea tampoco. Entonces adivina qué puedo hacer. Introduce un descanso. Ver, bonito y sencillo. Entonces etiqueta, dame una nueva línea, luego dame el cuadro de texto, dame una nueva línea, luego dame el siguiente nivel y aterrizas eso, correcto. Entonces al hacer eso, ahí vamos, Eso se ve mucho mejor forma de aspecto. Esa es una forma mucho mejor parecida que acabamos de tener nula. Y si queremos más espacio, solo rompemos la línea dos veces en el medio. Tan nombre completo y luego nos metemos algo de luz del día entre ellos. Ahí vamos. Está bien. Podemos leer bien. Entonces lo siguiente ahora sería un botón. Si estabas mirando y me dijeron, vale, bueno, ¿dónde está el botón? Eso es bueno. Necesitarías un botón llamado Solis. ¿ Se van a presentar? Necesitan un botón de enviar. Entonces en todo esto, solo puedo poner dos ladrillos más y luego puedo ver tipo de entrada se presenta. Muy bien, entonces puedo decir que el volumen es igual a, y entonces esto me permite dictar lo que quiero que se imprima en el libro para que pueda decir enviar tu consulta y escribirla tan verbosa como tú necesita estar en el momento Es autocierre. Entonces slash y el go bracket y ahí vamos, envía tu consulta. Conoce cada formulario tiene lo que llamas una acción. Por lo que estoy seguro de que más stands cuando rellenas un formulario y haces clic en Enviar, suele ir a otra página. Por lo general, o bien hace una de dos cosas. Perdón. O bien te dirá que el formulario que enviaste no es válido porque los datos no cumplen ciertos requisitos o irá a otra página hasta que los datos se hayan guardado con éxito. Entonces puedo decir que la forma de oxígeno es igual a y entonces puedo renunciar a ella página. Entonces si dije que la subasta de granja es igual a index.html, eso significa que irá a la página de índice después de que se haya presentado. En cualquier lugar que sea lo que he puesto aquí es donde navegaría herramienta. Entonces si digo enviar su consulta, note que acaba de navegar. Normalmente no seríamos el diseño de la página de índice sería como. Éxito, PJ o algo que tenía que decir salvó con éxito. Pero entonces no tengo clase de discurso. Entonces estoy consiguiendo lo que se llama un 40 para flecha. Y es ver no puede obtener la página. Observe también que los nombres de los controles que había agregado al formulario están listados ahí en la URL. Entonces esto es lo que llamas una cadena de consulta, ¿verdad? Entonces si vas en Google o YouTube y escribes lindos gatitos, estoy seguro de que lo que vas a ver es youtube.com slash search. Con ese signo de interrogación. Entonces tal vez la búsqueda es igual nuestra consulta de búsqueda es igual a lo que sea que escribiste. Entonces eso es todo lo que realmente está haciendo, aunque eso sea una forma. ¿ Está bien? Por lo que los formularios están en todas partes cada vez que escribes información y haces clic en un botón, enviaste un formulario. Entonces así como una prueba, sólo voy a poner en nombre de alguien, enviar la consulta y ver si nombre es igual al nombre que acabo de ingresar. La dirección de correo electrónico es igual a la dirección de correo electrónico que acabo de introducir en las consultas en blanco. No ingresé una consulta. Bueno, solo te estoy mostrando lo que pasa. Entonces eso es mantener esos lenguajes del lado del servidor. No, puedo decir que me consigas esta variable y cualquier valor que fuera posible para ella. Todo eso se envía cada vez que envías un formulario. Por lo tanto, permítanme volver atrás y configurar la página de éxito para nuestro envío de formularios. Entonces sólo voy a decir nuevo archivo. Entonces otra forma de crear una nueva moda es hacer clic con el botón derecho en el Explorador. Entonces si hago clic derecho, obtengo la misma opción para crear un nuevo archivo o una nueva carpeta. Entonces voy a decir nuevo archivo, no quiero ver éxito dot HTML y luego subsetss dot HTML. Una vez más, quiero que sea capaz de navegar a cualquier parte de mi sitio. Entonces le voy a dar el mismo esqueleto HTML. Y en esta etapa, hemos escrito el esqueleto algunas veces. Por lo que Visual Studio Code, una vez más, siendo la herramienta de productividad que es, nos permite simplemente decir HTML colon cinco y mirar lo que genera para nosotros. Entonces estamos viendo un poco más entonces donde vas a seguir, pero no te desanimes por eso porque es muy, muy, muy conveniente, ¿verdad? Por lo que aún vemos nuestro doctype, todavía obtenemos nuestra etiqueta HTML. Seré no tiene un atributo donde le dice al navegador en qué idioma va a estar el sitio web. Obtenemos algunas etiquetas Meta que veremos más adelante. Entonces como casi todos los FADH, estos son destrucción o analógicos, simplemente elimínalos. Y entonces sí conseguimos el título y el cuerpo. Por lo que el título aquí sería el éxito. Y en el cuerpo, voy a poner en el navbar links, citar unquote links navbar, para que podamos navegar a por donde queremos ir. Dale la etiqueta H1 para ver que has tenido éxito o tus datos han sido vistos como pecaminosos, se ha guardado. Muy bien, así que probemos nuestra forma una vez más. Entonces voy a poner en eso, y esta es mi consulta. Presentar, sus datos han sido guardados. Así que conoce nuestro éxito está trabajando una vez más, si miras en la cadena de consulta, verás la consulta con los datos que se enviaron. A partir de aquí. Puedo elegir ir por peine. Puedo elegir ir a Amazon, puedo elegir ir por todas partes. Entonces ya ves, las formas realmente tampoco son tan complicadas. Existen muchos tipos de controles de formulario que puedes usar. Puedes seguir adelante y explorar, solo ponerte en tipo, y ellos pueden ver lo que obtienes para cada uno de estos tipos. Te acabo de demostrar que las más comunes. Pero se puede obtener número de teléfono, se puede obtener rango de búsqueda, contraseña, todo tipo de tipos de control. Entonces te animo a que sigas adelante y crees un foro por razón más compleja y experimentes con los diferentes tipos de control que hay. 5. Aún más etiquetas HTML, tablas y estilos de línea: Oigan chicos, bienvenidos de nuevo. Por lo que seguimos viendo HTML y algunas de las etiquetas más populares o más usadas. Y lo siguiente son las mesas. Por lo que las mesas pueden ser un poco complicadas. Es y las formas suelen ser las más complicadas, pero por eso estamos aquí para derribar esas barreras en nuestro conocimiento. Entonces echemos un vistazo a qué son las tablas y estaremos usando la página HTML de los botes dot para hacer eso. Entonces sólo voy a acurrucarme. Entonces en Visual Studio Code, si pasas el cursor sobre los botones, ves zanahorias y luego en realidad puedes simplemente hacer clic en los remolcadores de colapso. Vean eso. Entonces, empecemos con eso. Entonces es un inicio la mesa. Sí, lo adivinaste. Tenemos mesa abierta y cerrada. Ese es su artículo. No, una mesa es pensar como una hoja de cálculo de Excel o estoy seguro que estás acostumbrado a lo que es una mesa en un pedazo de papel si tienes filas y columnas. Ahora conceptualicemos que en primer lugar comienza con nuestro papel. Por lo que dentro de la mesa, no entra ningún otro contenido. Pero para un TR, que es abreviatura de mesa, rol. Muy bien, papel de las células en una mesa. No, rollo tiene columnas o prefiero llamarse modos es que también se llaman a sí mismos. ¿ Por qué se llaman células? Porque son literalmente unidades individuales. No necesariamente son las columnas que van todo el camino hacia abajo. El rol tiene células. Por lo que solo estás poniendo una celda o TB o datos de tabla en el rol dice muchas celdas o como probablemente lo limpiarías para analizarlas columnas ya que vas a tener que pongas tantas etiquetas td. Entonces si iba a ser un listado o tal vez el nombre, edad, y digamos fecha de nacimiento de varias personas fuera de los miembros del personal para con nuestra empresa, un barco que esta página está dedicada, escribir una bala de discurso. Entonces estamos listando a todos los miembros del personal. Entonces déjame cuantificar esto y ponerlo en tal vez una etiqueta h3 que diga cosas detalles de miembro. Está bien. Entonces detalles del miembro del personal, Digamos que teníamos un TR y luego lo que querrías hacer es dar un rumbo para los datos que estarán a continuación. Entonces en lugar de td, vamos a empezar con th. Th es la abreviatura de cabecera de tabla, ¿verdad? Porque generalmente tienes una regla que dice lo que representa cada columna. A nombre, Nombre, apellido, edad de nacimiento. Bueno mesa para que cuando estés en la quinta columna, recuerdes, Oh, eso es lo que esto representa, ¿verdad? Entonces vamos a tener un nombre. Vamos a tener, digamos algo sencillo, imagen y identificación del personal. De acuerdo, así que esa es nuestra mesa, esa es nuestra primer rollo, y ese es el conjunto de columnas para todas las celdas que estarán en las otras filas. Entonces ese es el rol uno para la segunda regla o el miembro real del personal, solo tengo otro TR luego abrir td y luego el nombre aquí sería lewis sentida en. Está bien. Lo que voy a hacer es solo usar control CV, ese pequeño atajo para duplicar líneas. Lewis tiene 29 años y su identificación personal es 77. Algo son y todas esas cosas. ¿Te acuerdas? Por lo que tantos miembros del personal, tantas filas como dinero vende datos, solo puedo seguir copiando y pegando y simplemente cambiando los datos. Ahora obviamente esto no es muy dinámico, sobre todo si esta nato debería estar viniendo de la base de datos de empleados. Entonces cuando lleguemos a usarlo dotnet Core, miramos cómo exactamente vamos a automatizar toda esa generación. ¿ Qué extranjero? Ah, es muy dinero. Bueno, así que sólo tengamos a Hannah, Cómo Milton y este número es 32, y su identificación de cosas sería la herramienta 234. Está bien. Echemos un vistazo a nuestra página sobre para que pueda simplemente hacer clic derecho y decir Abrir con Live Server. Y ahí viene arriba y ahí está nuestra mesa abajo. Entonces lo que quería hacer es una especie de comentar todo lo demás que no está directamente relacionado con esta actividad. Entonces es un comentario doc. Y comentar significa que el código se queda, pero lo ignorará cuando hablemos de comentar. Entonces para hacer un comentario en HTML, está bien, abre el corchete angular. Yo uso la exclamación cuerdo, y tengo dos guiones y un aviso de que tipo de completó eso para mí. Entonces lo que vaya dentro de esta flecha, ¿qué Visual Studio? Está representando como texto verde será ignorado. Entonces aunque me refresque, no verás todo ese galimatías que se renderizan en la playa, ¿verdad? Entonces eso significa que si quiero tener un poco de código ignorado, todo lo que tiene que hacer es abrir el comentario y luego ves que está poniendo todo esto en verde. Y luego cerraré el comentario en el punto donde quería que me ignoraran. Entonces todo esto es Sin comentario el cual puedo simplemente colapsar. Yo, cuando me refresco, ves todo eso se ignora, la imagen se ha ido, las listas se han ido solo la etiqueta H1, el comentario, y la etiqueta h3 y Compañía debajo de los comentarios. De acuerdo, así que esa es suya, ¿Cómo se ve nuestra mesa? No muy atractivo, pero oye, así que tenemos nombre, tenemos edad, tenemos identificación de personal. Esa es la regla de cabecera, ¿verdad? Y entonces esto es así, así, así, así, y así. De acuerdo, por lo que la mesa puede usar un poco estable, puede usar algún embellecimiento. ¿ Cuáles son el nivel más básico? ¿ Es así como se crea una mesa? No, sí mencioné estilo y en la introducción no recuerdas que mencioné CSS. Por lo que CSS es la abreviatura de Hojas de Estilo en Cascada. Y en cualquier momento queremos que nuestro HTML busque hacia arriba, particularmente empleamos los servicios de CSS. Entonces cuando dije que la tabla necesitaba cierta cantidad de estilo, significa que puedo agregar CSS a los documentos poder determinar cómo debería ser la tabla. Entonces este es un buen segue para introducir trasero de pie. Entonces sólo lo vamos a mirar a un nivel muy básico para luego volver y mirarlo más a fondo. Entonces para darle estilo a la mesa, lo primero que voy a hacer es agregar un atributo llamado estilo, ¿verdad? No, la sintaxis que entra en este atributo es tal que tienes lo primero que teclear es un selector, y luego tienes dos puntos y luego los valores anteriores, así que los llamo pares de valores selector. Entonces el selector es, ¿ qué quieres cambiar? Qué barco este toggle quieres cambiar, ellos quieren trazar, cambiar el color. Se desea cambiar el color de fondo. ¿ Quieres cambiar la frontera que puedas ver todos estos son selectores que son cosas potenciales que podríamos cambiar. No todas son aplicables porque realmente no cambiaría el vamos a ver. Realmente no cambiaría el tratar de encontrar algo sobre esa mesa. Probablemente no cambiaría. Pero yo no cambiaría un tamaño de fuente de nuestra tabla. ¿ Verdad? Yo cambiaría más un tamaño de fuente de una etiqueta p o algo que esté sosteniendo textos, ¿verdad? Pero no cambiaría necesariamente el tamaño de fuente fuera de la etiqueta de la tabla. Ahí es donde el seleccionado que usas es relativo a la etiqueta que estás usando. Por lo que quería cambiar, ver el ancho de la tabla. Entonces le doy un valor. Puedo decir 100%, lo que significa que quiero que esta tabla se estire lo más lejos posible por toda la página. Entonces echemos un vistazo atrás a esto. Y luego vemos aquí que eso es lo que se ve, ¿verdad? Por lo que el nombre está centrado, por lo que la etiqueta th va automáticamente al centro. Pero entonces si le echas un buen vistazo, aquí es donde empieza el contenido para ese nombre así, aquí es donde empieza éste, aquí es donde ese sitio. Entonces si quisiera todo alineado al centro, también podría poner en un estilo que diga centro alinear el texto. Por lo que podría decir stat es igual a ancho 100%. Después se encendió múltiple después, asegúrate de separarlos vía punto y coma. Por lo que también podría decir texto alinear centro. Y así te estoy diciendo que alineas todo el texto en el centro de la mesa, ¿verdad? Entonces solo te estoy mostrando que todo CSS funciona siempre que queremos modificar cómo se ve algo en la página, empezamos con esa estadística Ok, Entonces cuando regresemos, veremos más en profundidad. Dije que la etiqueta de estilo nos permite dictar el aspecto y la sensación de nuestras páginas. 6. Introducción a CSS: hojas de estilo inline, en línea y internas y externas: Entonces en la última lección, estamos viendo el CSS y cómo funciona. Y vimos que el ancho más simple aplicar CSS es usar el atributo style. Por lo que vamos a jugar con nuestra página de índice y explorar atributos enteros nos ayuda a dar estilo a los diferentes bloques de textos o diferentes áreas o diferentes elementos quieras pensar en ello, pero podemos apuntarlos de forma individual. Por lo que volviendo a nuestro código, podemos ver que en la página de índice tenemos todas estas son etiquetas de encabezado. ¿ Y si quisiera que la etiqueta H1 fuera roja? Por lo que fácilmente puedo decir que el estilo es igual al sermón estilo de presumir es igual a, esos son nuestros atributos. Entonces decimos, qué es, un barco, este elemento que quisiéramos seleccionar. Me gustaría seleccionar el color, luego un colon, y luego me gustaría cambiar este color a rojo. Entonces con CSS, en realidad puedes escribir el nombre de ciertos colores, pero no creo que tengan cada color, cada tono por nombre. Entonces ves malva, malva no era una opción, ¿verdad? Entonces si conoces el color por nombre y es un color simple, puedes escribirlo en rojo, bien. Pero entonces hablando en términos generales, lo que usarías es hexadecimal o RGB. Por lo que RGB es la abreviatura de rojo, verde y azul. Por lo que pondrías a casa mucho entre 0 a 255 de cada uno que quieras. Entonces quiero 255 rojos, 0 verdes, y 0 azules. Está bien, mira, me dice que es raro. También usando Visual Studio Code, obtienes este selector de color. Entonces lo que escribí en la palabra rojo o lo escribí en RGB. Una vez que detecta el color, puedes obtener ese selector de color. Y si aún no es del todo el tono que quieres, siempre puedes simplemente arrastrarlo y ves que valor RGB cambia en consecuencia. Está bien, así que si quería atar ese tono ofrecido, entonces ese es el RGB. Tan rojo es rojo, eso habría sido 255 0, 0. Pero entonces para los diferentes tonos, puedes ser muy específico usando tus valores RGB. Entonces voy a dejar este usando RGB. Voy a cambiar el h3 para ser de estilo color es, vamos a probar un color simple, azul, ¿de acuerdo? Y entonces la otra forma en que en realidad puedes obtener un color es usando lo que llamas hexadecimal. Entonces dirías un hashtag, y luego tienes una combinación alfanumérica de caracteres. Por lo que alfanumérico significa que se puede elegir entre 0 y 9, y se puede elegir entre a a F en las letras. Está bien, entonces, y luego tienes seis de ellos. Para que pueda ver como 000, sólo soy un azar con esta borrosa. No sé qué me voy a poner artsy. Aquí me estoy poniendo una sombra de verde, ¿verdad? 000 F6 1D me da la sombra de verde. Una vez más, si no te gusta, siempre puedes cambiar, pero entonces código de Visual Studio siempre lo hará, oh, ahí está. Está reteniendo el hexadecimal. Entonces si comienzas con hex, se pasará sobre T En hex realmente pensó que lo iba a cambiar. Entonces el RGB, así que mira eso. Yo también estoy aprendiendo. Está bien, entonces si seleccionas y puedes mover nuestra propia y así llegas a tu hex. Puedes usar tu palabra y puedes usar RGB. Ahora con todo eso hecho, fui a guardar, una vez más lo que tengo en todos para ver si así sí asegúrate de guardar tus cambios. Y luego cuando saltes a tu página, vas a ver los diferentes colores. Hola mundo, hola mundo, y hola mundo. Muy bien, así que eso es todo CSS le permite peinar. ¿ Cómo quieres que se vea tu HTML? Entonces si quisiera cambiar la fuente después del punto y coma, podría poner otro selector, que sería divertido. Digamos que el estilo de fuente. Por lo que tienes fuente. ¿Qué fuente te permite poner en todas estas individuales? personal, no me gusta usar fuentes porque tienes que ser muy específico con dónde pones qué valores. Entonces en cambio, me gusta ser muy específico y ver hago exactamente seleccionando el estilo de fuente. Y entonces puedo decir cursiva, pero eso es un autor realmente quería, yo quería fuente. Familia. Ahí vamos a cambiar la fuente real. Por lo que estás familiarizado con algunas de estas fuentes de Microsoft Word. Y algunas de ellas puede que no necesariamente conozcas, pero te darás cuenta de que es una especie de batearlas. Entonces esto es ver elegir RL. Si IRL no está en el sistema que está cargando la página, entonces elige Helvetica. Si eso no está en la página, entonces por defecto un sensor que 90, Es a menudo las máquinas deben tener de todos modos, ¿verdad? Entonces eso es más o menos lo que se ve esa familia de fuentes. Como se puede ver. Sólo los estoy encadenando. Por lo que selector de valor de colon. Entonces quiero otro punto y coma selector. Después selecciona Oregon y vuelve a valorar el punto y coma. Y en algunos Selectores pueden tomar múltiples valores separados por comas. De acuerdo, entonces cuando hago todo eso y miro hacia atrás, ves que esto no es un helloworld arial en cursiva , lo cual es bueno. Por lo que puedes agregar tantos estilos al mismo elemento que necesites en la situación. Entonces esto es lo que llamamos CSS en línea, ¿verdad? Porque está en línea, está en línea en la línea del TAG real. Ahora el problema con CSS en línea es que está limitado en lo que puede hacer. Significado, ¿y si quisiera que todas las etiquetas de encabezado tuvieran este tipo de estilo? Ahora lo que tendría que hacer es tomar todo esto y pegarlo aquí, y luego tomarlo y pegarlo aquí y pegarlo aquí. Y en todas partes que quería tener que pegarlo. No soy parece bastante simple. Un poco de copia y pega. Está bien. Bien. Y todos aunque parezca uniforme, pero luego y si tu cliente volviera y dijera, oh, yo lo quiero, no lo quiero esa sombra para ello. Yo quería otra sombra fuera para ello. Entonces no, tengo que ir a buscar la sombra para ello con uno de ellos. Digamos que es un encendedor o más rosa. ¿ Verdad? O cualquiera que sea el color que sea? No, después de cambiar eso en todas partes que lo copié y pegué. Entonces si bien puede parecer simple porque son solo seis, es si fueran 20 lugares, si estuvieras a través de múltiples páginas en toda la página web, sería muy ineficiente ahora tratar de meta, copiar y pegar cada lugar. Muy bien, así que esa es la limitación del CSS en línea. Por lo que la solución a esto sería que vas a usar hojas de estilo internas. Por lo que una hoja de estilo interna iría en el área de la cabeza fuera una página y luego dictaría los estilos CSS para todo el melocotón. Entonces echemos un vistazo a cómo se ve eso. 1, tenemos un tiro estático, por lo que está en la sección de cabeza y abrimos y cerramos estilo. Dentro de estilo de vida. Lo que vamos a hacer es decirle a qué etiquetas son etiquetas queremos apuntar. Entonces voy a empezar de manera sencilla. No voy a molestar el styles.css. Voy a decir etiquetas p. Quiero que todas las etiquetas p de mi página tengan el color morado para, por ejemplo. Entonces tenemos dos etiquetas p, ¿verdad? Como habríamos visto si estamos usando adentro afuera, he tenido que tomar el estilo, pegarlo en esta etiqueta p y pegar en esta etiqueta p. Y para cada otra etiqueta P en la página, solo discutimos por qué eso es ineficiente. Entonces lo que puedo hacer dentro de la hoja de estilo interna es C p, lo que significa que quiero apuntar al elemento PTHrP. Entonces voy a abrir y cerrar los tirantes rizados. Está bien, entonces se ve, está bien, Claramente aquí selector está apuntando a la etiqueta p. Eso es lo que Visual Studio Code nos está haciendo saber, pero no deberíamos tener ningún conjunto de reglas vacías, razón por la que ves que es para los nueve. Entonces está tratando de decirte, oye, si no estás dispuesto a leer CSS, donde no declaras ninguna sección de elementos para ello, ¿verdad? Pero vamos a escribir CSS. Entonces voy a decir todas las etiquetas p, quiero que tengas el color y fui a mantenerlo sencillo, morado. Está bien. Aviso nueve se ha ido. Y si vuelvo a la página, entonces no estoy seguro de lo que acaba de pasar. Eso es un refrescado para llegar a Mach, pero eso está bien. Aquí vamos. Esta es mi primera página web. Ahora note que esto es una etiqueta p y esta es una etiqueta p y ambos son morados. Todo de mi escritura tenía un solo lugar lo que quiero para mis etiquetas P. Está bien, entonces si quería todas las etiquetas p, el estilo cursiva, Es el mismo formato tener el selector y tenemos el punto y coma de valor. Y luego destello legibilidad de llamaradas deber de Candace en las diferentes líneas. Entonces en lugar de tratar de leerlo ahí mismo, cruz astuta, ¿verdad? Al igual que se representa aquí, que yo era confuso para mí, ¿verdad? Se pone confuso para mí cada intermedio justo a través de eso, que esto es mucho más legible. De acuerdo, así que todos los Beatles, quiero morado y cursiva. Ahí vamos. Entonces con muy poco esfuerzo acabo de hacer alguna vez p tag en esta página, morado y diatónico. Entonces vamos a transferir ese tipo de marcado nulo a nuestras etiquetas. Entonces tenemos seis perros H y quiero que todos tengan el mismo estilo. Muy bien, todos ellos necesitan tener lo mismo. Entonces lo genial de esto es que puedo encadenar etiquetas a lo largo. Por lo que puedo ver H1, H2, H3, H4 tienen 456 brace rizado abierto y cerrado. Y entonces adivina qué? Puedo poner todo este estilo. No necesito las comillas, así que solo tomo esto como la llamada, aparecen los valores selectos. Y sólo los pondré en sus respectivas líneas desde el remoto, en la línea con punto y coma. Por lo que en realidad puedo eliminar estos atributos de estilo de todas estas etiquetas. Y luego notarás que UP empieza a lucir mucho más ordenado. Es mucho más mantenible. Y cuando miras hacia atrás, fue muy efectivo. Por lo que todos los perros de borde y todos comparten el mismo estilo. Y la cosa es que aunque quieras algo especial para uno de los htdocs, Digamos que todos ellos deberían tener una familia de fuentes, pero solo quieres etiquetarme H1. Oh lo siento. Todos ellos deben tener el mismo color y familia de fuentes, pero solo son las etiquetas H1, cursiva. Siempre puedes, después de especificar para toda la familia, siempre puedes volver atrás y decir cada uno por ti mismo. Yo quiero que tengas eso. ¿ Está bien? Entonces cuando vuelvas vas vas a ver que todos del mismo color y la familia de fuentes, pero sólo uno está en cursiva. Entonces eso es lo que CSS trae a la mesa. Eso es lo que las hojas de estilo internas aportan a la mesa. Y saber lo genial es que si necesitas compartir estos estilos a través de múltiples páginas, ¿verdad? Porque digamos en todas partes en cada una de las cuatro páginas hasta ahora tenemos una etiqueta de imagen, tenemos alguna forma de encabezado. Todd. Muy bien, y tenemos etiquetas P por todo el lugar y todas esas cosas. Quieres que todas estas páginas tengan las mismas reglas de estilo, lo cual es muy importante para la consistencia porque la mayoría, si no todos los sitios web en los que vas, notarías que siempre hay un tema común entre el texto y cómo se muestra en cada uno de los tiempos. Entonces eso es lo que llamamos una plantilla que sólo se logra asegurándose de que el CSS sea consistente en todas las playas. Novela. Si quisiéramos eso, fácilmente podríamos usar esta zona de estilo y simplemente pegarla en la cabeza de cada pij, ¿verdad? Por lo que ponte en contacto con un éxito de barco y el índice NOL tienen el mismo estilo. Entonces si navego por todos ellos, cada etiqueta h va a verse igual. ¿ Todo bien? Todo es consistente, ¿verdad? Y si pongo etiquetas P en cualquier otro lugar, todos van a mirar así. Ahora esto trae otra ineficiencia, ¿verdad? ¿ Qué pasa cuando tienes 20 páginas y el cliente dice, ya no tenía ganas de que la etiqueta H1 fuera de Ayatollah. Probablemente lo quiera. Vamos a intentarlo, voy a probar otra cosa. Voy a decir texto, la decoración está subrayada. Muy bien, así que en el discurso de éxito, lo cambié. Yo quiero que se haga cada página. Eso significa que no después de esto. Y ya ves que estamos pasando por el mismo tipo de copia y pasta sostenida que acabamos de tratar de promocionar fuera cuando hicimos nuestro miedo de hoja de estilo interno. Entonces ahora tengo que copiar y pegar esto a través cada página que necesite tener este estilo. Y eso una vez más, es ineficiente. Funciona. Pero no es muy eficiente en cuanto a mantenimiento porque si me pierdo una página, entonces me fui a volver y tratar de arreglar eso. Entonces traemos la siguiente forma en que hacemos CSS, que es hojas de estilo externas. Por lo que hojas de estilo externas significa que vamos a tener un archivo baby creado todo el CSS, pero no vivirá dentro del archivo HTML. Simplemente haremos un tweets de referencia. Entonces veamos eso. Entonces en nuestro Explorer, vamos a tener un nuevo archivo, y lo voy a llamar styles.css. Realmente no importa lo que nombre el archivo como algunas personas lo llaman su sitio dot CSS. Algunas personas lo llaman estilos CSS que CSS, realmente no importa siempre y cuando lo termines con CSS de punto. Esa es nuestra nueva extensión de archivo, ¿verdad? Entonces styles.css. Y luego lo que vamos a hacer, déjame simplemente aumentar un poco la interfaz. Lo que vamos a hacer en styles.css está etiquetado todo nuestro código CSS. Está bien, así que en styles.css, realidad estamos puestos en las cotizaciones son etiquetas p son etiquetas. Todo el estilo CSS que habría tenido en cada página desde el interno. Entonces esa sintaxis se ve igual que la interna, excepto que es conocer su propio archivo. Entonces eso significa que el índice ya no tiene el estilo porque si vuelvo al índice, todo se vuelve a la normalidad. Ahora que tengo Está todo en un archivo dedicado, lo que necesito hacer es hacer ralentí. Y voy a decirle que el link rel es igual a hoja de estilo. Y entonces sería un viaje, ¿ dónde encuentro el estatuto que hemos visto que antes con la etiqueta de ancla, todo lo que tenemos que hacer porque están en el mismo nivel. Sólo tenemos que ver hf es igual a los nombres de archivo. Entonces el nombre de archivo aquí es styles.css, y luego esta es una etiqueta de autocierre. Después de hacer todo eso, nos refrescamos y miramos eso. Ningún orden se restaura el universo. Está bien, así que ahora podemos repetir esta hazaña a través de todas las demás páginas que tienen hojas de estilo internas, soy vientos se quitan del cerrojo. Yo lo voy a quitar del contacto. Y fui a quitarlo del éxito. Está bien. Entonces solo estoy haciendo eso para mostrarte cuando navego a un perno nos todo lo que sabes, y yo le digo que haga una referencia a esta ficha técnica, se pone estilos de cubo. Cuando voy a contactarnos, contacto dosis bazo, le digo hacer referencia a la hoja de estilo. Todo está en lucir uniforme, ¿verdad? No es el sitio web más elegante y lo verás. Pero al menos vemos cómo la uniformidad juega un papel enorme. ¿ Está bien? Entonces así es como podemos conocerme. Nuestros estilos son un poco más globales porque con una línea, podemos acceder a todo lo que hay dentro de este archivo, que tiene mucho más estilos que uno. ¿Está bien? Entonces eso es todo CSS realmente funciona. Y yo, hacer un video que te muestre cada posibilidad individual de un selector de valor peer sería casi imposible. Son tantas y son útiles varias cosas y a veces pueden usarlas. Algunas etiquetas no pueden. La única manera de realmente ponerse cómodo. Yo no diría un masterizado porque llevo años haciendo esto y todavía no he cotizado sin comillas, lo dominé. Lo que me siento cómodo porque tengo subdominante han explorado, ¿verdad? He explorado qué selectores hay ahí. Y con una herramienta como Visual Studio Code las evaluaciones en la lista todas a las que puedes explorar y ver. De acuerdo, entonces si veo índice, ¿cuáles son los valores? Puedo probar los dos. Yo puedo probar esto. Yo puedo probar eso. A ver cómo se ve. No, si necesito usar su R nada y entonces nada mejor que investigar. Cuando se tiene una visión en particular, siempre se puede investigar. Siempre encontrarás material que te ayude con esa visión. Entonces esa es una introducción muy rápida al CSS y cómo funciona. Está bien, Entonces cuando volvamos vamos vamos a ver un poco más en todo el fin de semana. Usa CSS para apuntar a partes particulares de su sitio web. Es decir, si tengo etiquetas H1, pero arriba particularmente etiqueta H1, quería tener una mirada y sensación en particular de lo que realmente puedo apuntar de una manera específica. Entonces estaremos viendo eso cuando regresemos. 7. CSS más avanzado: clase, etiquetas y selectores de ID: Muy bien, entonces la última vez que estamos aquí, estamos viendo cómo funciona CSS. Nos dieron una agradable introducción rápida a su aspecto y tacto en general. Y como dije, es casi imposible enseñar todo sobre CSS en unos cuantos videos, pero hay que explorar y espero que hayan estado haciendo eso. Entonces sigamos adelante. No. Y en esta lección vamos a estar haciendo bien dos cosas. Una, vamos a estar viendo cómo podemos apuntar a etiquetas particulares. Y queremos ver, sí, tenemos etiquetas P, pero no quiero cada petabytes de ella de esta manera. Quiero arriba particular p tag o un elemento en particular. Tengo esta mirada y sensación. Y también estaremos mirando todo el fin de semana realmente estilo nuestra mesa porque nosotros con el ancho 100 y text-align center, pero realmente no hay nada que ver. Es una mesa ahí, no hay líneas de cuadrícula que son características principales de cómo debería verse la tabla. Por lo que vemos que la tabla por defecto es un poco anémica en su pantalla y quisiéramos que pareciera como debería verse. Entonces, empecemos con cómo apuntamos a lenguas particulares, ¿verdad? Entonces lo que hemos hecho hasta ahora es decir que todos los heterodoxos deben tener este color y todas las etiquetas H1 deben estar subrayadas. Ahora, ¿y si no quisiera necesariamente que todas las etiquetas H1 fueran subrayadas, verdad? Entonces nikon, la página de índice que tengo, tengo dos perros. Uno que dice hola mundo. Y voy a decir que este es el índice. ¿ Verdad? Ahora, digamos que tenemos esta etiqueta H1 en este tipo de etiqueta H1 en cada página donde decimos en qué página estamos. Entonces podríamos pensar en esto como un título, ¿verdad? Entonces esas son nuestras etiquetas de título o cualquier etiqueta H1, esa es la etiqueta de título que dice la que queremos tener atributos particulares. Las otras etiquetas H1 no necesitan tener atributos, ¿verdad? Entonces digamos que el texto está subrayado. Está bien, dejémoslo que lleva subrayado por nulo. O intentemos hacer otra cosa para decir que el color equivocado de cualquier cosa que sea una etiqueta de título debe romperse. Y veamos cómo se verá eso. Por lo que aquí vemos esta sería la etiqueta del título. Este es el índice y helloworld no es el título, así que no quiero que se vea igual que la etiqueta del título. Fotos ahí está. Y me acabo dar cuenta de que puse ese objetivo o lugar equivocado. Entonces déjame moverlo abajo nuestra cotización unquote nav bar, ¿verdad? Por lo que esta es la página de índice. Este es el título, permítanme decir que éste es el título. A cada uno. Está bien. Por lo que quiero que mi título H1 se vea así. Tanto el helloworld no debe en ninguna otra etiqueta H1 en el tamaño de página no es, el título no debe verse así. Entonces lo que puedo hacer en mi archivo CSS es en lugar de solo apuntar a las etiquetas H1, puedo apuntarlas por nombre o ID más bien. O podemos establecer lo que llamamos nuestra clase. Entonces primero te voy a mostrar por DNI. Después miramos el concepto de identificaciones cuando estamos haciendo nuestra forma. Y te mostré el id fname, ¿verdad? Cada DEN, diez obtiene una identificación. Por lo que puedo ver fácilmente en esta etiqueta H1, tu DNI es título. ¿ Verdad? Entonces la cosa es que ningún dos elementos en misma página debería tener alguna vez la misma identificación, ¿verdad? Piénsalo como si no quisieras ofrecer a tus hijos del mismo nombre. Pred tienes gemelos, siempre vas a nombrar dos nombres diferentes. Te gustaría necesitar gemelos del mismo nombre. Así que tipo de tratar los IDE así. No quieres que los elementos de la misma página tengan el mismo nombre. Por lo que tengo título en la página de contacto. Eso está bien. También lo puedo hacer en la página sobre. Eso también está bien porque es el único aquí. Pero lo que nunca debo hacer es tener este llamado título y otro elemento llamado título en la misma página. Eso es un no-no. Muy bien, entonces ahora tengo este elemento llamado Título. Quiero apuntar a cualquier elemento con el título ID para tener unos estilos en particular y el archivo style.css, puedo ver hashtag o Polonia o un número de registro. Le llamas título hashtag, ¿verdad? Entonces ves aquí es ver elemento id es igual a que cualquier elemento, cada TAG, etiqueta p, imagen sin cortar, sea lo que sea. Una vez que dice ID es igual a título, le estará aplicando este estilo. Entonces si vuelvo atrás y miro, sé ver que la etiqueta del título tiene el estilo y la otra no porque dije que quiero sólo el título para tener ese estilo un barco nosotros solo el título, conductores, sólo el título. De acuerdo, así que esa es una forma de que podamos hacer ese tipo de focalización. Ahora dada la limitación con el ID es igual a título, y creo que los navegadores modernos pueden compensarlo. Pero solo toma mi consejo una vez más, estoy siendo de la vieja escuela viniendo de los días en que los navegadores no te ayudaron y ayudaron a encubrir tus errores. Te estoy aconsejando que no hagas que dos elementos tengan el mismo ID en la misma página. Hay otras repercusiones, sobre todo cuando se trata de JavaScript, donde podrías, te encontrarás con donde podrías, te encontrarás con problemas si tienes más un elemento con el mismo ID. ¿ Está bien? Por lo que dada esa limitación, podría haber momentos en que lo necesites. Los bloques son dos elementos diferentes que tienen el mismo tipo de estilo, pero no lo quieres a través del tablero. Entonces, vamos a ver. Contamos con múltiples etiquetas p. Golpear 12345. ¿Está bien? Por lo que tenemos múltiples etiquetas p. ¿ Y si no quisiera que todos fueran morados y cursiva, verdad? Yo sólo quería que 135 fueran morados y ayatolá es lo que los riesgos de ellos deberían parecer normales. Por lo que una vez más, siempre puedo ver todas las etiquetas p deben tener una postura particular. Entonces les voy a dar a todos familia divertida. Por lo que cada etiqueta p en mi página, quería tener a la familia de fuentes Arial, no hay problema. Todos ellos deben ser RL. Enfriar. No obstante, quiero que 135 sean morados y cursiva. Está bien, así que en realidad puedo crear lo que se llama una clase. Entonces una clase con es como un estilos reutilizables. Entonces mientras el título o usar el ID está apuntando al elemento uno o las ganancias, buena práctica los pocos elementos con el mismo valor ID, ¿verdad? Cuando hablamos de clases donde crear algún valor abstracto que se puede difundir a través de cualquier tipo de elemento tantas veces como sea necesario. Entonces voy a crear una clase aquí donde veo punto. Digamos en por mí Sean. Muy bien, entonces el punto significa su subclase y la inflamación es el nombre de la clase. Y si pasas el cursor, ves elemento y dirá que clase es igual a información. Entonces cualquier elemento quiero aplicar que a todo el postgusto hierba iguala inflamación como los atributos ahí dentro, ¿verdad? Entonces clase de información, quería tener color, morado. Y los textos. No era decoración de texto, no lo era, era estilo de letra para ser cursiva, ¿verdad? Entonces ves incluso a veces tienes que segundo adivinar, no los memorizarás todos pero tu campo se pone cómodo, ¿verdad? Por lo que la información debe tener color, morado y estilo de fuente. Saber si miras a través de nada tiene aplicado el, esos estilos. No que los remolcadores lo hagan, ni las etiquetas de anclaje y sepan que esas de ahí lo mantienen cambiado de color, pero aquí nada tiene aplicada esa clase. Pero si quiero usar este vaso en una particular o en etiquetas particulares, todo lo que tiene que hacer es ir y decir que la clase de etiqueta es igual a información. Yo lo quería, está en 1, 3, y 5. Conoce cuando vuelvo, ves aquí 1, 3 y 5 tienen la, ya sabes, la clase o los estilos aplicados directamente a ellos. Entonces ese es el poder de la clase, ¿verdad? que pueda crear saber, cualquier estilo, darles una clase, pero puedo ponerlos en los elementos particulares. Una vez más, no siempre se aplica a cada elemento solo porque si pongo ese dicho en la etiqueta IMG, así que déjame descomentar el IMG. Por lo que voy rápido estamos para descomentar es Control y barra hacia adelante. Entonces solo voy a Todo este control barra hacia adelante en él entra, ¿verdad? Por lo que el control de barra delantera comentará poco común para ti. De acuerdo, así que digamos que traté de poner esa clase en la etiqueta IMG. No hay nada en esta clase que realmente afecte a la exhibición de la flor, ¿verdad? Entonces a pesar de que la clase está ahí, si voy aquí, no hay nada que va a ser diferente. Y tanto la flor porque no tiene que mostrar un color, ¿verdad? Y no tiene ninguna toma para ser cursiva. Entonces aunque puedas crear la clase, quiero decir que se puede usar en cualquier lugar. No está dispuesto a tener siempre nuestros mixins en ninguna. Estamos sin embargo, si tienes un montón de fotos y luego querías aplicar el estilo a un conjunto particular de características puede ser una galería de arte y no todas las imágenes tu sitio web. Por lo que no querrías aplicar a la etiqueta IMG. Pero pico particular eligió tal vez mostrar imágenes, entonces siempre se podría crear un estilo o crear esa confianza o que soy Windsor, llámalo un DP para mostrar imagen. Y luego veamos, el ancho de las imágenes de visualización debe ser de 300, y voy a usar píxeles. Y la altura debe ser 200 píxeles son todas las imágenes de visualización deben tener estas dimensiones. Entonces puedo ir a mi imagen y puedo ver tu clase es dp. Entonces cuando regrese, Así es como luce esa imagen. Y luego por tantas imágenes como quiera tener, todas van a parecer imágenes de exhibición, ¿verdad? Porque todos tomaron DP. Entonces si tengo 50, aquí no se usa la imagen. Y viejo problema, el hecho es que todos van a reutilizar esa clase. Entonces ves que es bonito y reutilizable. Por supuesto, esa clase no se aplicaría a algo que es rojo basado en texto. Entonces si quería que este artículo de la lista fuera grosero para mí Sean. Y si tú, si comienzas a escribir un 0 en la parte superior, siempre puedes usar Control y espacio y como que hará adiciones para ti. Por lo que en condrules formados misión espacial ingresó lo llena para mí. Entonces voy a ver aquí que este artículo no es información shimmy. Está bien, así que eso es realmente todo ahí está el CSS, como dije, te pones mejor con la práctica. Así que solo tienes que explorar, probar cosas nuevas y así es como realmente te pones cómodo con ello. De acuerdo, así que saltemos al estilo de nuestra mesa. Tenga en cuenta que bueno un poco en el impresionante todo un fin de semana, apunte a elementos particulares para que podamos, ya sabes, desarrollar estilos específicos que sean reutilizables a través de muchos elementos. No, vamos a ver como podemos anidar nuestro entrar en la parte juntos elementos dentro de elementos, ¿verdad? Entonces una mesa es una forma perfecta de demostrar eso porque hemos visto que hace una jerarquía de remolcadores. Tienes la mesa, luego tienes el TI en cualquiera de los TAs y tienes el T D. Así que sí, que tienes que perforar hacia abajo en la mesa para conseguir ciertas cosas para lucir un cierto manera. ¿ Está bien? Entonces voy a quitar en primer lugar este estilo de la mesa. Voy a devolverlo a su defecto. Mira y siéntete sin problema. Entonces digamos que le vamos a dar una identificación. Así que cosas de identificación, ¿verdad? Cosas de mesa de estilo, miembros, ¿verdad? Eso es lo que dijimos que estaba aquí. Se trata de miembros del personal. Entonces estamos en el CSS. Puedo apuntar menos miembro del personal estable viendo tabla de personal hashtags. Está bien. Sólo déjame verificar que eso es lo que dije. Mesa de cosas. Bien. Sólo asegurarme de girar es lo correcto. Y el CSS también es muy sensible a mayúsculas y minúsculas. Por lo que desea, si usa caso común, retener claves comunes. Pero por supuesto, como hemos visto, minúsculas oyó a SNL compañero. Así que solo guárdalo todo en minúsculas. Por lo que quería parar tabla para haber ganado una familia de fuentes de, vamos a probar una fuente diferente para que podamos ver una diferencia. Mensajero Nuevo. Está bien. Voy a decirle trueque. Entonces no tiene fronteras, ¿verdad? No. Entonces déjame no hacer el trueque todavía. También voy a estirar el ancho a 100. Entonces estoy casi, casi rehaciendo los estilos que tenía inicialmente, ¿no? Para que podamos ver que la fuente ha cambiado. No es estirarse justo a través de la página. Y una vez más, déjame poner en el centro de alineación de texto para que todo esté centrado, correcto, con buen aspecto. Ver, todo eso logrado. Nuestra propia aquí. Entonces si tienes múltiples tablas, bueno entonces probablemente ahí es donde querrías usar esa clase. Si tienes múltiples mesas en la misma pieza, necesito moverme de esa misma manera. Te gustaría usar una clase en lugar del Id. De acuerdo, entonces ahora que tenemos eso, quiero decirle al TDS y un sermón qué es esto el d Hn y éste será el televisor o el celular, ¿no? Entonces yo quería a cada uno Eso es todo debe tener una frontera. Por lo que ahora quiero arreglar esas líneas de cuadrícula. Vamos a ver tabla de personal o tabla de personal hashtag. Yo quiero el TD dentro de tu elemento así como el th. Entonces ven que estamos aquí, estamos combinando y estamos combinando nuestro concepto anterior donde se pone uno nuevo, ganó trabajo en muchos en la fuente. Casi puedo separar múltiples etiquetas y compartir estilos. Enfriar, buscamos con unas etiquetas de encabezado. Sabes que también estás viendo que puedes ver, dame el elemento padre y mira por dentro y sácame los elementos dentro de él de ese tipo. De acuerdo, así que en otras palabras, tráeme la mesa del personal y luego tráeme el diagrama T-H que está dentro de esa mesa. Por lo que tenemos td tags DE LOS estilos dentro de la tabla llamada Tabla Staff. Por lo que esta es otra forma de enfocar color específico, que 101 hilo. Y luego dentro de eso voy a decir que me des una frontera. Entonces recuerda que mencioné antes que con la fuente, podrían especificar múltiples valores a través de la frontera de tablero es muy similar. Por lo que puedo decir frontera. Yo quería un ancho de píxel, un en su mayoría sólido, y debe tener el color. Pero también podría haber dicho frontera. Dash, el ancho es de un píxel. Podría haber dicho el estilo de guión de borde es sólido, y también podría decir color de guión de borde. ¿ Eso es correcto? Entonces solo te estoy mostrando que hay ciertos elementos. Pueden batear los valores y hay ciertos que no lo pueden romper se venden como vimos con fondo, font-family, font-size, etc Así que quería tener un borde, un pixel de ancho, sólido en color, y debe tener datos como sólidos en estilo, lo siento, y ese tono de gris en su color y relleno. Por lo que el relleno significa que quiero empujar elementos a mi alrededor. Nosotros ocho pixeles somos más bien yo quería conocerme. Píxeles más gordos de lo que sería, ¿verdad? Entonces si miras hacia atrás a la mesa, esto, empezaremos a ver ese espacio porque recuerda antes de que todo se ahogara. Y luego nos llevamos todo el brote y te mostramos lo que hace el cuerpo. Entonces con todo el ponche, todo está ahogado. Cuando puse el relleno, entonces todo el mundo se puso más gordo, ¿verdad? Por lo que puso en poemas de ayuda que ocho libras de trigo en todas direcciones. De nuevo, piénsalo así. Entonces no, Todo es nuestro. Pero luego te das cuenta de que sí, todo el mundo tiene su frontera porque como dije, estas son realmente células. No son realmente filas y columnas, son realmente células. Entonces estas células tienen su propio trueque, nuestro propio ellos. Déjame acercar para que puedas ver un poco mejor. Se trata de células con fronteras propias. Ninguna mesa lee parece que es porque esto no se ve bien. Simplemente parece un montón de cajas. Entonces volviendo a la mesa de cosas, puedo decir guión fronterizo, guión fronterizo, colapso. Allá vamos, trueque derrumbar dash y anunciamos un colapso. Entonces no todas las fronteras se derrumban unos sobre otros. Para que ya no parezcan cajas. No, se parece a esa mesa. Muy bien, consejos y trucos. Una vez más, la práctica hace permanente. Ahora lo último que voy a hacer a esta mesa es hacer, hizo que el área de cabecera se viera diferente. Entonces quiero que esto tenga tal vez el mismo tipo de color que la etiqueta H1 sin razón en particular, solo me falta la suya propia y explorando. Entonces ya le dije a la televisión y a la th, el puro estilo, pero luego quiero un estilo particular para sólo el th, bien, así que voy a decir que vas a EL que quiero que tu color sea el mismo, mismo Valor RGB. No es color porque el color cambia los textos. Entonces ese es un buen punto. No, a pesar de que estoy apuntando al th, parecería como si dijera color para el th, entonces el th mismo tomará el color. No obstante, lo que sucederá es que el texto real dentro de la etiqueta th. Por lo que el color refiere las garrapatas que todas las veces el color se refiere al texto. Lo que te gustaría hacer es cambiar el color de fondo fuera del th, si quisieras que EL, para tener un color diferente y ese punto, obtendrías ese color. Muy bien, por lo que el color siempre por defecto se bloqueará. Si dices que el color es otra cosa, que siempre será el texto si quieres el bot gemido artículo de los elementos justo al otro lado del tablero cambie, entonces tienes que usar color de fondo. Entonces mientras un botón creció colores que quiero que el color sea blanco, que me voy a enloquecer. Norma.Dist usa los ceros hexadecimales 0000, lo siento, eso será fff. Pido disculpas fff por ponerme blanco. Está bien. Entonces podría decir FF, FF, usualmente son seis, pero luego algunos colores, cuando llegues al tercero, automáticamente lo sabrá, vale, te referías a blanco, así que sabré que es blanco solo como 000, 000 cuadra. Y podría tener seis ceros, eso sigue siendo bloque. Y luego a medida que empiezo a cambiar los diferentes colores no hay números dentro de esto, empecé a conseguir hojas diferentes, ¿verdad? Entonces si dije 0, 0, f, entonces consigo la sombra de azul. Sí te muestra. Entonces RGB se desarrolló después de Higgs me para ser un poco más consistente, menos confuso, lo que sea, cualquier hogar, déjame simplemente hacer todo FFF. Entonces el texto es nulo, blanco. Entonces tengo eso. Yo quería llamarlo coral, pero gemido con blanco se lleva la mesa. Y entonces todas las reglas tienen eso, ¿no? Entonces hay una serie de cosas que puedes hacer como hay tantas opciones, tantas cosas que hacer, es casi imposible una vez más, para mostrarte en uno o pocos videos, solo tienes para explorar. Entonces te animo a hacer una pausa y empezar a jugar con ciertos elementos y ciertos estilos y ver qué se puede llegar con lo que funciona, dónde lo que no funciona, estamos y eso es todo lo que obtienes cómodo con CSS. Cuando volvamos estaremos echando un vistazo a JavaScript. 8. Explora JavaScript y la consola de navegador: Hey chicos, En esta sección vamos a empezar a explorar JavaScript. Javascript es un lenguaje de scripting que nos permite como programadores interactuar con los elementos HTML. El caso es que cuando el navegador carga nuestro sitio web, ya sea el Lipset en el que estamos trabajando o cualquier cosa que se esté construyendo con código HTML. Una vez que ese código es renderizado por el navegador, como hemos visto hasta saber, no hay nada que podamos hacer para cambiarlo. Por lo que cualquier modificación que tengamos que hacer, tenemos que volver al código y modificar el código. Y luego podremos ajustarlo cuando actualicemos la página. No obstante, con JavaScript, podemos permitir que nuestros usuarios realmente tengan una experiencia interactiva con nuestro pH poniendo en cierta cantidad de inteligencia detrás de él. Entonces eso es lo que realmente hace el lenguaje de scripting. Agrega inteligencia a nuestro contenido estático. Lo que tengo aquí es sólo un navegador. Vamos a una especie de desmenuzado código de Visual Studio un poco. Y lo que vamos a estar haciendo es mirar JavaScript dentro del contexto de una consola interactiva que realmente tiene cada navegador. Estás usando Chrome. Estoy usando Edge retinal. Estás usando Opera, Firefox, Safari, la mayoría, si no todos los navegadores tendrán esa consola interactiva y usable para explorarla. Entonces lo que he hecho es abrir una ventana privada para edge. Y sólo voy a hacer clic derecho y luego voy a bajar a inspeccionar. Después de hacer eso, sí, nos muestra el código HTML mínimo desnudo. Y la razón natural es que las instancias privadas por las que la página que llegamos aquí no está tan ocupada como sería si solo cargaras nuestra página regular. ¿ Verdad? Entonces esa es la página regular en el borde irregular. Este es el privado, por lo que no está tan ocupado. No obstante, en lo que quiero que nos enfoquemos sería la consola. Cuando hacemos click en Consola, vemos aquí que el cursor está parpadeando y está esperando que hagamos algo. Por lo que esta consola realmente nos permite interactuar con JavaScript. Podemos enfriar nuestro JavaScript aquí y obtener comentarios inmediatos basados en el código que estamos escribiendo. El caso es que al refrescar esta página, volverá a cargar la consola. Entonces cualquier código que hayas escrito sería borrado. Pero después de llegar a interactuar con JavaScript y entender el idioma más adelante, agregaremos algo de JavaScript a nuestro sitio web con el que estamos trabajando. Y verás cómo puede persistir un guardar el código que estás escribiendo y reutilizarlo en consecuencia. Pero por ahora, como dije, estamos realmente explorando. Lo primero que la mayoría de los programadores, ¿verdad? Y ya hemos hecho eso es HelloWorld. Entonces ves esa vez que empecé a escribir y ves que está actuando como Visual Studio Code está haciendo sugerencias. Es posible que no necesites algunas de estas sugerencias, pero si solo las miras, verás que todas estas cosas son de lo que el navegador es capaz. Así que cada navegador en realidad tiene bibliotecas integradas para JavaScript. Y es por eso que cuando escribes tu código JavaScript aquí, un sitio web en el navegador se carga en el navegador puede actuar según las instrucciones porque JavaScript es realmente solo un montón de instrucciones diciendo el navegador sostiene el sitio web debe comportarse más o menos. Si quisiera imprimir algo a la consola. Entonces esta consola se usa para muchas cosas. Se puede utilizar con fines de depuración mientras estás construyendo tu sitio web. Se puede utilizar para la interactividad como aquí. Si quiero imprimir, puedo ver consola dot log, log L-O-G, luego abrir paréntesis, y luego ponerlo entre comillas y cerrar y luego generalmente en JavaScript y termina con punto y coma. Por lo que puedo decir helloworld dentro de esas cotizaciones individuales. Eso es un poco más grande. Así consola dot log y helloworld. Entonces esto básicamente está diciendo consola en el navegador, cualquiera que sea el navegador y que tenga una consola, por favor escriba el mensaje de registro hola mundo. Entonces cuando presiono Enter, Mira eso, realidad imprime Hello World. Este comando le dijo al navegador que imprimiera que se lleve dentro de la consola. Podría cambiar eso fácilmente. Mi primer script Java, int enter. Tenemos que mi primera impresión JavaScript. De vez en cuando, verás esto indefinido, pero realmente no tienes que preocuparte por eso a menos que veas cosas apareciendo en rojo. En realidad no tienes que preocuparte demasiado por eso, ¿verdad? Entonces más adelante veremos que solo te estoy dando algún contexto para que no te sientas abrumado por nada más que aparezca en la pantalla. Entonces así es como escribiríamos el registro de la consola del navegador. Ahora hay otras herramientas interactivas que puedes usar. Puedes usar JSFiddle. Hay una serie de herramientas de JavaScript que permiten escribir el código y luego ejecutarlo y ver el efecto inmediato. Creo que el uso de la consola en los navegadores, tan simple como puede conseguir porque estás obteniendo la misma experiencia. Entonces una vez más, más adelante veremos cómo editamos nuestra página web. Entonces esa es una introducción rápida y sucia a JavaScript, pero tenemos bastantes lecciones por venir. Fuimos a ver diferentes cosas que podemos hacer en JavaScript. Y verás que si alguna vez has hecho programación, se parece a otros lenguajes de programación. Si nunca has hecho programación, entonces este podría ser tu primer lenguaje de programación. Y los conceptos aquí son transferibles a cualquier otro lenguaje de programación que aprenderás en tu carrera. 9. Declaraciones de JavaScript y declaraciones de variación: Muy bien chicos, así que en esta lección vamos a estar mirando las declaraciones de JavaScript, mirando cómo podemos declarar variables. Y solo entender las reglas generales del lenguaje fue como hemos visto con HTML y CSS hasta ahora, cada una de ellas tiene su propio conjunto de reglas, ¿verdad? Entonces HTML, se espera que abras y cierres ciertas etiquetas, a veces no tienes que hacer eso. Pero en última instancia hay reglas a las que debes cumplir si quieres el resultado deseado de tus esfuerzos. Lo mismo con TSS. Entonces JavaScript tiene reglas y una vez más, lo que vas a estar aprendiendo con JavaScript, mucho de eso es conocimiento transferible. Entonces con esta ventana de consola, solo voy a arrastrarla todo el camino hacia arriba para hacerlo lo más grande posible en la pantalla. Y lo que vamos a hacer es que sólo voy a, ya sea puedes simplemente hacer clic en esto o haces Control L, o simplemente refrescar tu página en cualquier momento vamos a refrescar la consola. Entonces este es el código de la lección anterior. Sólo voy a limpiarlo todo y luego tenemos una nueva consola con la que trabajar. También puedes hacer otras pequeñas cosas que viven los filtros de expresión. Algunos de estos es posible que no necesites necesariamente. Saber. Puedes mostrar y ocultar ciertas barras laterales de la consola y mensajes en cosas basadas el rendimiento del sitio web en el que te encuentres. También puedes filtrar, puedes mirar cosas diferentes. Entonces como dije, la consola se utiliza para el registro. Así que más tarde, cuando eres bilinear enormes sitios web, realmente te acostumbras aquí para monitorear ciertos errores que podrías estar subiendo a un sitio web. Como usuario final asiste al hacer clic en un botón y no funciona. Por lo que en realidad se podría decir si el usuario hace clic en el botón y algo no sucede como debería, podría iniciar sesión error en la consola para que pueda servir como una advertencia de que esto podría estar mal. Entonces la consola es muy poderosa, pesar de que la estamos usando para aprender a escribir código. Y esto es posible debido a los navegadores modernos. Solo te estoy haciendo saber que cuando estés construyendo tu sitio web, puedes usarlo para ayuda real a nivel de producción. Muy bien, así que como dije, estamos viendo declaraciones. Declaración en la mayoría, si no todos los lenguajes de programación es como una declaración, ¿verdad? Entonces cuando dije consola dot, lo siento, console.log, escribe cualquier cosa. Y nota que estoy usando mis teclas de flecha arriba y abajo que me permiten recorrer todos los comandos que ejecuto por última vez en la consola durante el tiempo que la ventana esté abierta. Entonces eso es otra cosa. Bueno, si refresco sí. medida en que la ventana esté abierta. Entonces si claro, refresco, puedo limpiar, y luego vuelvo a estar aquí. Esta es una declaración, no una declaración generalmente, en JavaScript debe terminar con un punto y coma. Puedes tener múltiples declaraciones por las que pasaste y ver si quería hacer Hello World y luego quería escribir algo más, solo puedo ir a la siguiente línea, que en los confines de esta consola en particular significaría que difícil presionar Shift and Enter. Eso significa que quiero ir a la siguiente línea, pero no, aún no ejecutes la línea. ¿ Puedo empezar a escribir otra declaración. Entonces éste podría decir, Hola. Nuevamente. Esa es otra declaración. Y para tantas declaraciones como quiera ejecutar, solo puedo presionar Shift Enter. Por lo que en general terminan con semi-colones. Esas son declaraciones. Otras cosas que harías, no mencioné variables. Entonces otra cosa que harías es declarar una variable. Entonces una variable es como un área de almacenamiento temporal por un valor. Muy bien, así que si quisiera almacenar, ver un nombre, podría decir let, esa es una palabra clave, let, y luego el nombre de la variable. La variable es el nombre del espacio de almacenamiento temporal. Por lo que podría decir nombre iluminado ya que pretendo almacenar un nombre que fui a llamar a mi espacio de almacenamiento temporal acuerdo a lo que pretendo almacenar. Si quisiera almacenar edge, podría decir dejar envejecer. Entonces puedo darle un valor diciendo igual. Por lo que aquí llamamos al signo igual al operador particular y de asignación. Mientras que arena, lo que se suscribe en nuestro espacio de almacenamiento con ese nombre. Entonces nota que estoy usando comillas dobles, y estoy usando comillas simples, casi puedes usar cualquiera de las dos. Son situaciones muy específicas en las que usarías una y no la otra. Casi los voy a usar indistintamente, pero más tarde verás cuándo usarías una y no la otra. Pero en JavaScript, puedes salirte con la suya en otros idiomas, es posible que no puedas salirte con la suya tan fácilmente. Pero como dije, cada idioma era similar, tiene sus matices y sus reglas. Pero dejé fuera el conocimiento es transferible. Deja que el nombre sea igual a, y luego puedes poner en tu Poniendo tu nombre, sólo voy a poner en un nombre aleatorio. Una vez que obtengo alguna declaración de este tipo con un punto y coma, quiero algo más que ese borde. Y le voy a asignar un valor igual a puntearlo con un punto y coma. Y entonces, ¿y si quisiera imprimir los valores de esta herramienta? Esto te permite ser dinámico porque soy justo, solo estoy viendo, estoy poniendo en estos valores, sin embargo, en una situación real como en nuestra página web, cuando alguien llena tu formulario, piensa en a ti mismo como usuario. Cuando rellenas un formulario y presionas Enviar, esos valores, se almacenan en algún lugar porque cuando estás cerrando sesión hacia, realmente ves tu nombre. Es el mismo nombre, dirección de correo electrónico sobre los valores que habías puesto en el foro que verás presentado a ti. Tan claramente están siendo almacenados en alguna parte. Por lo que estas áreas de almacenamiento temporal llamadas variables, en realidad están diseñadas para almacenar temporalmente esos valores mientras estás en nuestro sitio web. Nuevamente, se complica más que eso. Simplemente trabajaremos con lo que estoy viendo en este momento. Sólo estoy viendo, déjame ser igual a ese valor, que h sea igual a ese valor. Entonces si quisiera imprimirlos de nuevo, entonces podría consola log y ver nombre. Puedo agregarle. Literalmente lo estoy agregando. Este es un signo más. Sabemos que para ser usado para matemáticas. Pero aquí esta es una palabra o dos palabras, este es un número. Entonces JavaScript es lo que llamamos un lenguaje poco escrito, lo que significa que no se va a fijar en qué tipo de datos estás asignando. Sólo estoy viendo crea un espacio de almacenamiento temporal , almacenar ese valor. En otros lenguajes de programación, habrá estricto donde si estás almacenando un nombre, la mitad para indicar que se trata de una variable de nombre. Si estamos empezando por la numeralidad, tengo que decir que esta es una variable numeral. En JavaScript no es tan estricto. Una vez más, los diferentes idiomas tienen reglas diferentes, pero conocimientos transferibles independientemente. Entonces todo esto es un montón de declaraciones que todavía estoy por ejecutar. Esos. Sigo viendo Shift Enter, Shift Enter y entro a la siguiente línea. Al mismo modo lo estás escribiendo, lágrimas y viendo lo que tendemos a escribirlo en el Editor de Texto cuando lleguemos hasta que realmente ejecutemos. Entonces cuando presiono Enter, en realidad se va a ejecutar. Todo eso va a imprimir hola mundo, hola otra vez. Y luego mirar portador, Está sprinting sido escondido 50 porque declaramos a espacios de almacenamiento temporales. Y dijimos imprimir el nombre más la edad. Está imprimiendo el nombre más la edad. Ahora, ¿qué notas como problema? Estoy seguro que estás ahí viendo por qué están los 50 apegados a lo oculto? Entonces la razón de eso es que necesitamos formatear bits de datos para que podamos decir console.log. Y entonces puedo apetearlo un poco. Entonces de la misma manera podemos más una variable más una variable, puedo más cadena literal. Así es como lo llamaremos así cuando abras la comilla y escribas tu propio mensaje y lo cierres. Eso es lo que llamamos una cuerda literal. Puedo console.log y abrir aquí mi cadena literal, donde veo nombre colon, hacerla más presentable, ¿verdad? Y luego agrego la variable de nombre a eso. coma es un comunicado. Y luego eso lo hará en otra línea, console.log. Y puedo prudente envejecer colon. Observe este espacio, el espacio, esas columnas dentro de estas comillas. Y entonces lo puedo ver más edad. No hice punto y coma presionar Enter. Ahí vamos. El nombre es lo que está en la variable y la edad es lo que está en la variable. No, nada. No espacié este viejo tanto como espacio este tiene. Eso es otra cosa en términos fuera no está en las comillas. Javascript no le importará si pones un espacio o no mientras la sintaxis sea correcta. Estas son pequeñas cosas sobre JavaScript que lo hacen tan flexible y tan fácil de aprender porque es un lenguaje de scripting muy indulgente. Pero luego hay ciertas reglas que pueden romperse, romperte como desarrollador potencial transicionando a otros idiomas. Pero por ahora, eso es todo lo que vamos a pasar por cuatro declaraciones y cómo funcionan. Sabemos que tenemos que terminar con punto y coma. Sabemos imprimir a la consola, sabemos declarar variables y asignar valores, y sabemos cómo y sabemos cómo imprimirlas de nuevo y guarda un formato lo que imprimimos libro. Y si quería cambiar un valor, el nombre existe para que pueda darle a nombre un nuevo valor. Muy bien, por lo que podría decir nuevo valor, diciendo eso por nombre. Muy bien. Entonces si vuelvo a decir console.log nombre y edad, no, va a imprimir nuevo video. Entonces ahora ya sabes asignar y cambiar después de la asignación, ¿verdad? Esta segunda línea es más como una confirmación de que esta línea funcionó. Porque si haces algo que no funciona, recibirías como un cierto tipo de error. Si escribí esta declaración en un monitoreado incompleto y me va a dar un error de sintaxis no capturado y traté de decirme qué le pasa. Me mandan, me estoy perdiendo eso. ¿ Perdón? Esta es la consola sí te da retroalimentación interruptiva. Empieza, a diferencia de lo que hemos visto con Visual Studio Code y un HTML donde realmente intentará compensar. Éste no lo hará. Te dirá que tienes un área que necesitas ir a arreglarla. Muy bien, entonces cuando volvamos, estaremos mirando algunas opciones aritméticas. Operación, lo siento, en JavaScript. 10. Operaciones de Arithmetic en JavaScript: Hola chicos, bienvenidos de vuelta. En esta lección, vamos a estar mirando operaciones aritméticas en JavaScript, no lo es. Las operaciones aritméticas generalmente se referirán a una característica clave de la mayoría, si no todos los lenguajes de programación es la capacidad realizar algunas operaciones matemáticas. Puedes sumar, puedes restar, puedes multiplicar. Sólo vamos a echar un vistazo rápido a cómo se ve eso. ¿ Utilizaríamos JavaScript? Voy a despejar la consola. Veámoslo para que pueda sumar dos números fácilmente. Puedo decir uno más uno. Ya ves que es, la consola me está recibiendo retroalimentación interactiva. Eso son dos. Entonces uno más diez, eso es 11. El signo más cuando estamos tratando con numerosos anuncios, los números como cabría esperar, ¿verdad? Por lo que ya vimos que el signo más también es amor añadiendo una cuerda o dos cuerdas o un número y una cuerda. Con una cadena o una palabra, cadena se representa por las comillas con comillas simples o comillas dobles. Ambos representan una cadena. Así que siempre puedo ver la cadena uno porque hay momentos en que se está utilizando un numeral o un número, pero no es necesariamente para fines matemáticos como un número dividido de licencia o algo así. Realmente no va a ser usado para matemáticas, lo llamas un número. Por lo que podría terminar con algo así como A1, R1. Pero en si ese número termina siendo usado con fines no matemáticos y lo estás agregando a, digamos un numeral, entonces vas a terminar con algo así como uno, setenta, cinco, setenta y seis. Porque esta cadena más el numeral te va a dar la cuerda y el numeral. No obstante, si tuviera que sumar dos números, uno más 75, entonces obtendrías el resultado matemático de 76. Esas son pequeñas cosas sobre JavaScript que no verás en muchos otros idiomas, pero esa es una de las características clave que probablemente puedas aprovechar cuando, cuando corresponda. Y si no, entonces solo sé cómo usarlo y cuándo. Eso es suma, multiplicación, es bastante lo mismo. Entonces siete veces h, eso nos da el producto, ¿verdad? Entonces en matemáticas regulares, cuando estamos escribiendo, ¿usaríamos el símbolo de x o un x buscando? En la informática y los lenguajes de programación , en términos generales, se utiliza el asterisco, y así es como se representa la multiplicación. Veamos qué pasa cuando tratamos de multiplicar una cadena por veces un numeral. Si hago una cadena de veces en numerosos, mira eso, me estoy poniendo buck 76. No parece bastante la adición, la operación de adición cuando tenemos la cadena más otra cadena o un numeral o más cualquier otra cosa cuando es una cadena más algo, llamamos a esa concatenación. Entonces nuestra concatenando la cuerda, concatenando algo a una cuerda. Obviamente, cuando estamos haciendo la multiplicación, ya sea una cadena o en realidad es un numeral, estamos obteniendo los mismos resultados. Eso está claro. Echemos un vistazo a la división. Entonces si hago diez divididos por C5, esperaríamos ver herramientas. Entonces lo visual en la programación estaría usando ese signo, Eso es slash. Por lo que diez divididos por dos. Si lo hiciera con cuerdas, ¿qué obtendríamos? ¿ Obtendrían los mismos resultados? Esa es la visión. Y el siguiente básico sería, sería la resta. Por lo que 45 menos cinco nos da 40. Si hago cadena 45 menos cinco, sigo recibiendo 40. Entonces el signo más es el único que realmente opera de manera diferente cuando se trata de números versus numeral y stream. Como podemos ver, todos nos están dando resultados muy similares. No obstante, siempre es bueno ser consistente. Entonces mezclar y emparejar que esto generalmente se desalienta. Creo que sólo están compensando el hecho de que podría suceder. Pero en general, solo quería lidiar con números cuando estás haciendo matemáticas y dejarlo en eso. ¿ Está bien? la misma manera que podríamos asignar a una variable, valor R1 a una variable es de la misma manera que podemos decir dejar producto igual. Y luego te damos los dos números 15 veces. No, te está diciendo indefinido porque le diste una declaración y estoy rompiendo mis propias reglas que terminaron con un punto y coma, pero acabo de crear una declaración. No le dije que hiciera nada con el valor. Cuenta con productos. Tiene un valor en los productos, pero no sabe qué, no obtuvo un directorio. Por lo que ahora probablemente diría que quería ver qué hay en los productos. Entonces déjame console.log. Entonces escribiría protocolo. Cuando hago eso, entonces puedo ver el valor dentro de los productos. Muy bien. Sólo, sólo otra cosa a señalar. Yo no puse semiccolones y al final de esto, ése me compran y rompen reglas, ¿verdad? El punto es artefacto es porque es sólo una declaración que estoy escribiendo a la vez. Me está dividiendo salir con la suya. No obstante, si estuviera escribiendo múltiples declaraciones en múltiples líneas en esta declaración o declaraciones para correr juntos, entonces probablemente terminaría en problemas. Por lo que siempre quieres, y con tu punto y coma antes. Eso es más o menos como se vería eso. Partiendo de las simples operaciones aritméticas, sí tienes alguna acumulativa. Entonces qué, qué quiero decir con eso es, digamos que tenemos, vamos, vamos a normalizar uno. Esa es una variable b igual a diez. Y entonces quise aumentar esto en cinco. Entonces el aumento de uno por cinco, significaría que tendría que decir num uno cualquiera que sea el valor o no un año nuevo valor va a ser cualquiera que sea su valor fue más cinco y así es como yo podría hacerlo 15 porque lo aumenté en cinco. No. Una forma de hacer la mano más corta que sería usar el acumulador o la forma acumulativa. Si quisiera aumentarlo en cinco, podría decir más igual a cinco. Muy bien, entonces esta declaración va a evaluar a lo mismo que decir, nadie, llévate y agrega cinco a ella y cumple ese es tu nuevo valor. Una bastante normal. Cuida el valor y suma cinco, y luego sea lo que sea, eso es lo que le estamos asignando. Entonces si aumento, si ejecuto esto, esto no debería convertirse en 20. Ve a ver a qué me refiero. Entonces eso es un acumulador y esto cierto para todo tipo de operaciones. Si quisiera aumentarlo cinco veces, significa que lo multiplicaría por cinco. Entonces, en términos generales, dirías que el num uno es igual a la norma una vez cinco. Versión acortada, puedo sólo c veces igual a cinco, entonces eso debería traerlo cinco veces más. Si quisiera disminuirla en cinco veces, entonces sería dividida igual por cinco. Y lo estoy disminuyendo cinco veces. Lo mismo iría para la resta. Entonces norma uno menos igual y luego cinco. Eso significa quitarle cinco. Una vez más, todos estos siguen aumentando el valor que se almacena en num uno en relación con el número que estoy declarando aquí. Muy bien, entonces así es como funciona la aritmética en JavaScript. 11. Declaraciones de decisión en JavaScript: Muy bien chicos, En esta lección vamos a estar mirando declaraciones de decisión, sin embargo, en la vida cotidiana, olvidemos que ambos están programando. En la vida cotidiana, tenemos que tomar decisiones con ciertas cosas. Si se obtienen ciertos factores, entonces tomamos ciertas acciones. Ese mismo tipo de lógica. Si entonces, ¿o cuál es el caso? El caso podría ser que hagamos esto o tomamos esa acción basada en tal vez un valor. Entonces, ¿cuánto dinero tengo? Si tengo 500 dólares, entonces voy a hacer esto. Si tengo 200 dólares, entonces lo haré, etcétera tomamos muchas decisiones sobre diversas cosas en la vida real. Entonces es lo mismo con la programación. Estamos viendo estas variables, que estamos viendo estos valores. Y luego solo piénsalo. Si estás comprando algo en línea y proporcionas ciertos valores en determinados momentos, puede afectar el precio del artículo. Si has proporcionado un código de cupón, entonces el artículo se disminuiría en una cierta cantidad de dinero. Todas esas cosas son realmente solo programando y podrían lograrse usando el mismo tipo de lógica que estamos viendo son el mismo tipo de frío que estamos mirando en JavaScript. Si un código de cupón está presente, entonces ejecute esta matemática. Disminuir el precio cinco veces o restar si el precio correcto? Sólo te estoy dando unos escenarios. Entonces lo que vamos a estar mirando es que ya hemos echado un vistazo a la aritmética. Vamos a mirar las decisiones ahora. La forma más común de declaración de decisión que verías son las declaraciones if. Porque al igual que lo veríamos en nuestras mentes, si esto se obtiene, entonces que es una constructa muy similar en la programación. Entonces en realidad comenzaría viendo si abres paréntesis y cada vez que abro paréntesis, lo cierro porque si no lo cierras, fue a terminar con un error de sintaxis y se puede poner muy molesto. Por lo que cada vez que abro un paréntesis o incluso actualmente breves, abro y cierro al mismo tiempo. Por lo que notarás que estoy haciendo eso. Si dentro de los paréntesis es donde usted declara su condición. Así que tengo las variables num uno ya porque está dentro de la misma ventana de consola, todavía existen hasta que cierro el navegador. Entonces nadie está ahí. Entonces fui a decir si entumecido uno es mayor que diez, entonces, y luego mi entonces entra de estos tirantes rizados. Entonces si, si paréntesis abiertos, entonces tenemos una condición. Sin previo aviso estoy usando lo mismo mayor que la arena en U-Dub aprendió en la escuela. Estoy seguro de ello en el momento en que estábamos haciendo este curso, habrías aprendido de mayor que, menos que signos. Entonces esto es mayor que decir que esto es menos que firmar. Se puede ver mayor que, igual e igual a. Si es mayor o igual a diez. puede ver si lo es, si num uno es menor o igual a diez. Se puede ver si no es igual en absoluto. No igual se ve así. No es igual. Y luego se puede ver si es equivalente. Debería haber estado viendo equivalente o no igual, pero eso está bien. Se puede ver equivalente usando el signo de doble igual y luego equivalencia nosotros, vamos a estar mirando algunas variaciones diferentes de agujero que pueden mirar porque JavaScript puede conseguir muy preciso cuando se trata de equivalencia. Pero lo que estoy viendo es que esos son sus operadores lógicos mayores que, menos que, no iguales, mayores o iguales a, menores o iguales a R, iguales a R equivalentes. Observe que es un doble igual, no un solo, un solo significa asignación. No puedo ver si num uno es igual a. Eso no correrá F para ver si es equivalente. Así que estoy revisando este lado, este valor, sea cual sea la declaración condicional O operador, y luego ese lado. Y luego si es cierto, entonces me voy a quedar en lo que voy a hacer. Por lo tanto, ten en cuenta que sigue ejecutándose. Necesito hacer Shift Enter, así que vamos a empezar la siguiente línea. Y luego en términos generales, quieres sangrar tu código para que puedas ver claramente que este código que estoy a punto de escribir encaja en esa declaración if. Entonces si ese es el caso, entonces consola dot log. Sólo voy a hacer un console.log. Pero lo cierto es que dentro de estos tirantes rizados se hace casi cualquier cosa que sea necesaria. Si esto es cierto. ¿ Qué vas a hacer? ¿ Vas a hacer algunas matemáticas? ¿ Vas a imprimir algo a la pantalla? ¿ Vas a mandar alerta a algo en algún lugar? Para que pueda hacer console.log. La maderera es diez. Conoce qué otros escenarios Bolt, qué pasa si es mayor que y qué pasa si es menor que en la misma declaración if, realidad puedo encadenarlo y decir otra cosa. Puedo hacer tantos otros si segundos dicen más si, decir si esto no es cierto, entonces éste. Muy bien, entonces estamos creando diferentes escenarios. Si esto es cierto, haz esto más. Si algo más es cierto en este escenario, ponemos todo mi punto y coma. Entonces haz eso y podemos hacer tantos otros escenarios usando else if, de lo contrario si entumecido uno es mayor que el estaño. Y luego se aplica la misma sintaxis. Corsé rizado abierto. Recuerda usar Shift Enter cuando vayan a una nueva línea. Y luego voy a probar un tipo diferente de impresión. Entonces en lugar de un console.log, voy a hacer una alerta. Alerta en realidad aparecería en un navegador. ¿ Alguna vez has estado en un sitio web y quisiste tal vez seguir adelante y no guardaste tus cambios en esa alerta aparecieron en el navegador para ver click, tienes que hacer click fuera antes de poder proceder. Eso es más o menos lo que hace la alerta. Por lo que puedo ver el número de alerta es mayor a diez. Entonces puedo decir otra cosa, señor, mi moto y hacer como muchos más. Si las declaraciones como una necesidad. Pero a veces te acabas los escenarios y luego si ninguno de esos escenarios vamos a extruir y querías hacer una cosa final. Entonces hay un último recurso si nada más es cierto. Muy bien, creo Global, 500 dólares que tengo para cenar, si tengo 400 dólares, iré a una película por 300 dólares. Iba a hacerlo. De lo contrario, me quedo en casa. Eso de lo contrario habría, o si simplemente dices otra cosa, abre el corsé rizado, y luego declaras lo que quieres hacer. Si nada de lo que usted declaró anteriormente es cierto, entonces esto es lo que fui a hacer. Entonces quise hacer un console.log y decir algo como nada puede pasar, algo así. Entonces esta es tu última puntada. Entonces eso es un simple si más, si no puedes tener sólo el si puedes tener si no es injusto. Por lo que no tienes que tener más ifs en el medio igual a si esto, lo contrario que está bien, Incluso podría tener una declaración if para ver si eso es cierto, entonces haz esto. Si no es cierto, solo salta por encima y va a la siguiente línea de código de todos modos. Entonces esas son cosas que puedes hacer para cumplir con las decisiones. Entonces si ejecuto esto y presiono MTC aquí, va a la consola log numero es diez porque habíamos establecido num uno para ser diez. Entonces si digo num uno, tu valor no es 25. Veamos qué pasa. Entonces voy a volver a ejecutar esta declaración si. Norm ones valor no es 25s va a correr a través de la sentencia if otra vez. Y luego presiono Enter, mire esa alerta, para que ese número sea mayor a diez. Entonces eso es lo que hace esa alerta. Y luego si me siento en uno para ser igual a cinco. Entonces no, no es igual a diez y no es mayor de diez. Esperamos que se vaya, oh, lo siento. Sí, ahí vamos. Va a decir si no había pasado nada porque esto no es cierto, eso no es cierto. Entonces de lo contrario, eso es lo que vamos a hacer. Eso es que tomas decisiones simples en JavaScript. Conocer el siguiente que vamos a mirar se llama interruptor. El interruptor es relativamente fácil. Es bastante similar, pero se usa en diferentes operaciones. Por lo que probablemente sea más como cuatro cuadrículas. Entonces digamos que digamos que las calificaciones siempre fueron marcadas intensas. Si llegas a 100, el apóstrofe consiguió 50, apenas lo lograste. Y si tienes 0, bueno, eso no son decenas, ¿verdad? Digamos que tienes tres posibles calificaciones, tres valores posibles. Tendrás ya sea un 150 son 0. Por lo que puedo decir encender la variable. Así que vamos a usar la norma uno o vamos a ser más carro y usar rejillas. Entonces fui a dejar la codicia igual a 900. Empecemos con eso. Por lo que tenemos grid siendo igual a 100. Entonces fui a tomar nuestra decisión con base en ese valor, esa rejilla Maya dura. Fui a decir cambiar la codicia. Entonces abre mis llaves rizadas como de costumbre. Por lo tanto, ten en cuenta que los tirantes rizados juegan un papel enorme en estos bloques y estas declaraciones de bloques. Esta es una cuadra entera, Steven. Eso es todo un asunto. Es multi-línea y es muy estricto en esta estructura. Una vez que entiendas esa estructura que usan paréntesis y llaves rizadas, o en el interruptor usa una vez más entre paréntesis, el valor y los tirantes rizados, entonces deberías estar bien. La sentencia switch mira el valor para ver cuál es el valor, cuál es el valor, y qué debo hacer este valor? Entonces en lugar de si y otra cosa y lo que tengamos interruptor y tenemos caso. Y luego miramos el valor. Entonces si el caso es 100, lo que significa que este valor tiene, esta variable, tiene este valor. Entonces digo colon. Entonces debajo de ese caso tomo una acción. Entonces console.log, pasaste tantas líneas como necesito puedo poner debajo de ese caso, pero cuando haya terminado, solo voy a decir break. No, estoy tabulando porque estoy muy interesada en formatear. Puedes, es mucho más legible cuando sangras tu código y puedes ver dónde comienza y se detiene todo. Cuando eres principiante. El editor de texto se disparará fácil. Sólo lo estoy haciendo en la consola interactiva para que podamos verlo sucediendo en tiempo real. Interruptor de grado. Y luego hacemos ese caso. Y luego tomamos una acción o tantas acciones como necesitemos. Y luego cuando terminemos, tenemos que decir break. Si no decimos break, lo que sucederá es que cuando definamos respiraciones a presión en prematuridad. Entonces cuando definimos un segundo caso, si la cuadrícula es 50 y luego digo consola, console.log y veo que apenas pasaste. Y luego si no tuviera un breve, realidad pasaría a través de ambos. Así que déjame quitar el descanso y mostrarte eso. Entonces lo ves hizo esto e hizo esto porque no hubo descanso, posiblemente apenas pases. Por supuesto que eso no es cierto. Verías la naranja en nuestros 50 ya sea pase o no pasó. Por lo que necesito tener esa palabra clave break al final de un caso para que sepa que debe detenerse ahí. No. ¿ Qué hace el VC dijimos que si tienes 0, entonces sientes para que podamos sumar otro caso. Para que puedas sumar tantos casos. Recuerda, cada caso es viendo este es el escenario. Esto es lo que quería hacer en caso de que todo este estrés o console.log, entonces podemos ver que falló. Entonces rompemos. Entonces si ninguno de los anteriores. Entonces al igual que con la declaración if o podemos decir más, Nada más era cierto. Así que sólo haz esto. Si nada más es cierto, entonces es de la misma manera que en realidad puedo ver default, no escuches. Por lo que el default significaría que si ninguno de estos casos se cumpliera, entonces simplemente omitiría esta acción. Entonces podría console.log. Y por lo general para cuando llega aquí, suele ser, suele ser porque algo no es válido. Entonces en nuestro caso podemos decir que es rejilla inválida porque deberías estar recibiendo 150 o 0. Cualquier cosa que no esté en estos casos podría ser un valor inválido, algo así. Por supuesto, sólo te estoy dando un escenario. Espero que estés pensando en ello y viendo. Así es como podría aplicar esto a otra cosa, ¿verdad? Por lo que sería rejilla inválida. Eso es lo que le vamos a decir al sistema que si no detectamos la calificación en base a los casos que todos hemos aprendido, entonces es una calificación inválida. Si presiono Enter, claro, ya definimos grid para ser 100s. Entonces por supuesto pasaríamos si cambio el valor de las cuadrículas de 50 y luego vuelve a ejecutar esa sentencia switch, apenas pasaste. Entonces si cambio el valor de la cuadrícula una vez más a 0, entonces la sentencia switch evaluará que falló. Muy bien, para que veas que está golpeando cada uno de esos casos. Ahora probemos un caso por defecto. Entonces si no es 150 o 0 basado en toda nuestra línea, entonces en base a nuestro esquema, debe ser visto como una cuadrícula inválida. Entonces cuando hacemos eso, calificación no válida, y eso es básicamente mantener las decisiones están cumpliendo con JavaScript, por supuesto, cuán complejos se obtienen se basa en el escenario y tu contexto siempre determinar qué código se necesita para resolverlo. Pero es bueno saber cuáles son tus opciones y cuándo usarlas. 12. Declaraciones de petición en JavaScript: Hola chicos, bienvenidos de vuelta. En esta lección vamos a estar mirando declaraciones de repetición. Entonces déjame seguir adelante y despejar nuestra consola y empecemos. La repetición entra cuando tienes algo que querías hacer repetidamente y no quieres hacerlo manualmente cada vez, ¿verdad? Entonces digamos que queríamos escribir, imprimir los números uno a diez. Podrías fácilmente console.log. No queremos imprimir console.log. Entonces dirías, vale, Para en un punto y coma y luego ir al siguiente entonces, y luego console.log. Y luego nos imprimiríamos herramienta. Estoy seguro de que te dan la idea de saber que tendrías que hacer esto hasta las diez, que cuando presionas Enter, realidad obtendrías el 12345, etcétera trayendo a la consola. Eso obviamente es muy dinero. Bueno, yo declaración de repetición es lo que sugiere. Nos ayuda a repetir ciertas operaciones. Y al escribir esta estructura de repetición, podemos poner en un comando que dice hacer algo por X cantidad de tiempo o X número de veces más bien, o hasta que se cumpla una determinada condición. Entonces estaremos mirando demasiado tipos de repetición. Y esos son, los conos son controlados y la condición-controlada. Así que empecemos con los conos están controlados. se encuentra un bucle contador controlado Por lo general,se encuentra un bucle contador controladoen forma de lo que llamamos for-loop. Entonces es por X número de veces. Haz esto, ¿verdad? Digamos que queríamos imprimir de uno a diez. Y por supuesto que no queremos repetir esa declaración, así que vamos a decir cuatro, luego abrir paréntesis. Y entonces tenemos una variable que va a ser nuestra Colin son, así que inicializamos una, voy a llamar, lo compré no tiene que llamarse. Me podrían llamar cono. Se podría llamar básicamente cualquier cosa. Perro cachorro Xyz. Realmente no importa. Yo es la variable más comúnmente utilizada que verá aquí sin embargo, porque soy abreviatura de iterador y el comentario también se llama iterador. Entonces no hay nada significativo en el ojo. Es solo el nombre de la variable que se utiliza para mantener los conos fuera del número de veces que se ha repetido la acción. Entonces esto está inicializando nuestro contador. Entonces tenemos un punto y coma seguido esa condición para decir que debo subir hasta x número de veces. Ahora nota que voy a empezar a las 0. Podría comenzar a las diez, podría comenzar a los 20, realmente no importa. No obstante se quiere empezar por alguna parte, que la condición tenga sentido. Así que obviamente no comenzaría con ese 20 y luego le diría corra hasta que sea menor que r, lo siento, Rowan, siempre y cuando sea menos de diez, porque eso no tendría sentido. Yo ya es mayor de diez, por lo que esta condición habría sido violada ahí mismo. Lo que querías hacer es decir, empezar en 0. Típicamente es 0. Podría ser uno, pero ¿por dónde empiezas? Eso afectará la condición. Entonces si empiezo en 0, entonces la primera fila, y va a tener un valor de 0. La segunda fila va a tener un valor de uno, la tercera fila y un valor de dos. Entonces eso significa que cuando llego a diez años, cuando subo al valor de diez, ya no soy menos de diez, por lo que no correrá esa. Pero si llamas a esto, si llamas a Antonio dedos desde 0, llamas a tu mesita derecha 0, luego 12345 abierto a nueve, entonces habrías contado con los diez dedos. Entonces entre 09 inclusive es de diez carreras. A qué lo hacemos verás a qué me refiero. Tan frío invierno, se llama i Entonces porque empieza a las 0, estoy viendo asegúrate de que nunca iguales a diez porque quería correr diez veces. Acabamos de establecer eso. Entonces voy a decirle que incremente cada vez Celsius I plus, plus. Esto también podría ser yo más dos. Yo lo plus. Depende de cuántas veces quise incrementar. Entonces si dijera yo más diez, se incrementaría de 0, hacer lo que tenga que hacer para el 0 R1 llamado Mackenzie entero minuto. Por cuánto debería aumentar, aumentar en diez, entonces eso sería si quisieras que viniera por dos, dices más dos. Aquí. Estamos haciendo para hacerlo por plus, además porque sólo queríamos aumentar de uno a la vez. Y luego cierro los paréntesis. Entonces voy a abrir las llaves rizadas y saltar a la siguiente línea, por supuesto usando Shift Enter y luego sangrar dentro de mis llaves rizadas. Una vez más, estamos empezando en 0. Queremos correr desde 0 hasta la lata número más cercana, porque no queremos violar esto. Y estamos contando por uno cada vez que corre. Entonces, ¿qué queremos repetir? Lo que quisiéramos repetir, vamos a colocar dentro de estos tirantes rizados. No dije dónde queríamos contar. Estaño o imprimir los números uno a diez. Voy a decir console.log. Y luego imprimiré los números. Tan obvio que Types van e imprimen manualmente porque esto va a imprimir uno a n veces z solo te está mostrando uno. Pero lo está agrupando porque se lo imprimió diez veces. Ese es un buen ejemplo porque lo está acumulando, pero eso es lo que realmente está pasando aquí. Entonces si vuelvo a intentarlo, quiero 12345, no sólo 110 veces. Entonces eso significa que querría imprimir el valor de lo que hay en la IA, porque la IA está cambiando cada vez. Entonces creo que esa es una buena fuente de números como cualquiera estar contando para mí. Entonces si presiono Enter, mira eso y todo lo que obtenemos 0123456789. Aún no los números uno a diez. Ese fue el objetivo, pero estamos llegando allí. Pero si cuentas, esta fue la primera carrera. Yo tenía 0, luego volvió en bucle, aumentado en uno. ¿ Volvió a hacer la acción? No, porque aumenté en uno. No es uno. Vuelve a ir. Es 234. Si hago un recuento 12345678910, sí imprimió diez números, pero nuestro objetivo era imprimir uno a diez. Entonces una manera fácil de lograr eso sería que si sé que siempre voy a ser uno menos del número que espero. Entonces solo puedo decir cuando estás imprimiendo imprimo I plus uno. Añadir uno a i Cada vez que seamos capaces de imprimir, eso significa que habría sido 0, va a ser uno, etc, etcétera Y ahora tenemos sobre a diez. Muy bien. Ahora veamos esto otra vez. Yo sí dije que empezamos al 0 y vamos hasta que sea menos de diez. Y luego por eso, tenemos que estar agregando uno. ¿ Y si no quisiéramos este trabajo adicional de sumar uno? Así que eso está bien. Sólo podría decir log de consola, imprimir el ojo. Quería que el primer número se imprimiera para ser uno. Entonces cuando haga eso, sólo va a imprimir 123456789. Eso son nueve números. No voy a conseguir el diez. Entonces después de ajustar la condición aquí, tengo que decirlo y saber que estamos empezando en uno y quería correr hasta que sea menor o igual a diez. Por lo que una vez más, correrá hasta que se viole esta condición mientras está contando desde cualquier número que nos sentemos. Cualquiera que sea el número que esté en la condición. Entonces si hago eso, entonces obtenemos 12345678910. Muy bien, eso es un bucle controlado por contra-control. Estos son útiles cuando tienes listas que querías pasar. Como dije, todo lo que quieras repetir por cierto número de veces. Por eso lo llamamos bucle contador controlado. Y este bucle, aparte de la definición verbal aquí, se ve igual en la mayoría de los idiomas. Así que con solo entender esto, has dominado este tipo de bucle para al menos seis idiomas más. Muy bien, ahora veamos la siguiente. Éste sería un bucle while o un bucle controlado por condición. Y en realidad tienes dos de ellos. Tienes el tiempo y el otro do-while. Conociendo el bucle while, comenzamos con la palabra clave while, y luego se controla con condición-controlada. Entonces todo lo que tiene es una condición. Diría que mientras no se cumple alguna condición, digamos que todavía queríamos hacer eso contando hasta diez. Por lo que diría mientras tengo menos de diez. Y luego algún tipo de sintaxis, tenemos nuestros tirantes rizados. Y luego dentro de nuestros tirantes rizados queríamos sangrar lo que queríamos repetir. Entonces fui a decir, mientras que tengo menos de diez console.log. Muy bien, entonces esperamos que imprima yo diez veces cosas no numéricas. Me falta Altera, y vamos a estar explorando eso. Primero. Cuando intentes ejecutar esto, le va a decir que no estoy definido. Entonces esto no está definido significa que estás tratando llamar a una variable que aún no existe, No lo declaraste. Nos fijamos en declarar variables antes. Tenemos que decir dejar que el nombre de la variable y luego usarla. También miramos el hecho que variables que hemos declarado, no tenía clara la consola aún existen. Entonces podemos usarlos porque estoy seguro que el nombre todavía está aquí. Muy bien. Todavía puedo acceder a nombre de todas esas lecciones atrás porque estoy en las mismas incidencias de la Consola, probablemente se estén preguntando, está bien. Entonces, ¿por qué acceso de contacto? A pesar de que lo declaramos aquí. Entonces esto es lo que llamaremos scope. Dentro del ámbito de este for-loop, existe. Una vez hecho el for-loop, ya no existe. Por lo que no me declararon a toda la consola y todo el navegador y a toda la aplicación. Realmente se acaba de declarar a este for-loop. Al igual que cualquier otra variable que hemos hecho, tengo que definir la variable. Deja que le dé un valor predeterminado. Voy a decir que deje que sea igual a 0. Entonces puedo llamar al bucle while para interactuar con la IA. Pero mira este nulo mientras se está ejecutando, corriendo, corriendo y ven ese número. Esta condición no va a detener el bucle. Entonces es aquí donde los bucles controlados por condiciones pueden ser muy peligrosos. Esto es lo que llamaremos un bucle aún finito. Un bucle infinito es un bucle que se va a correr a la condición se cumple, pero la operación que se está llevando a cabo no está orientada a detener la condición. Entonces estoy viendo tonelada de colon hasta que yo sea menos de diez, que ya establecimos. Aquí está lo mismo, ¿verdad? Pero no estoy cambiando el valor de yo, yo, mi, todo lo que estoy haciendo es decir mientras tengo menos de diez, que será para siempre porque todo lo que estoy haciendo es log de consola. No estoy viendo yo más, además no estoy viendo nada que en realidad pueda estrellar sitios web, aplicación de bloqueo, bloquear computadoras en general. Por lo que quieres ser muy cuidadoso, especialmente al interactuar con aplicaciones más grandes, una condición a granel controlada bucles. ¿ Está bien? Es posible que tengas que terminar, si sigues ese comando, podrías tener que terminar en tu administrador de tareas e ir a matar a ese Burroughs entero esta sesión porque en realidad no se detendrá corriendo. Entonces si le causo algún daño a su computadora, me disculpo, pero sólo puede seguir adelante y eliminar y reiniciar su navegador, saltar de nuevo a la consola y vamos a intentarlo de nuevo. Entonces creo que hemos aprendido nuestra lección. Esta es una nueva ventana del navegador, así que no tengo absolutamente ningún historial de ninguna lección anterior. Así que empecemos de nuevo. Entonces vamos a igualar 0. Por supuesto, siempre comienza definiendo nuestras variables. Entonces las variables tienen que existir antes de usarlas. Entonces voy a empezar de nuevo mientras tengo menos de diez. Y luego tensión la siguiente línea, abre y cierra mis llaves rizadas, tote y luego sangría. Por supuesto, asegúrate de que cuando vayas a la siguiente línea, Shift and Enter. Si terminas corriendo de nuevo este bucle, lineal se apagó para matar la sesión y volver a la consola. Así que ten mucho cuidado. Pero lo que quería hacer aquí es realmente cambió el valor de i con cada iteración para que podamos estar seguros de que el valor o la condición se cumplirá eventualmente. Por lo que puedo usar un acumulador aquí donde miramos esto, donde acabamos de decir que más igual a, lo siento, uno, estamos aumentando en uno. ¿ Está bien? Yo más es igual. Recuerda que esto será lo mismo que lo que estoy haciendo aquí es escribir lo que llamaremos comentario. Muy bien, así que igual yo más uno es lo mismo que escribir esto. Ahora lo que pasa con un comentario es que puedes poner en un comentario y en cualquier lugar tu código donde puedas necesitar recordarte lo que está sucediendo. Hay blancos pasando, pero no es código real. Entonces cualquier cosa que vaya detrás de estas barras dobles será ignorado cuando todo el bloque de código sea Ron. Pero puede llevar a una mejor legibilidad para usted o para quien más esté mirando su código. Para que puedas meterte en el hábito de hacer eso, pero lo miramos más adelante. Entonces console.log i Así que después de que registres yo, aumente el valor de I por uno y luego verifica si no es menor a diez. Si aún es menos de diez, si aún es menos de diez, entonces adelante y corre nuevo y sigue haciendo ese cheque. Entonces por eso es un control de condición o no sabe cuántas veces debe correr. Si era negativo diez, diez negativos aumentaron en uno. Negativo nueve dice, no es decir que sólo voy a correr diez veces, es sólo revisar esta condición. Por lo que podría ser una situación en la que los valores sean impredecibles. No sé qué valores espero obtener, ¿verdad? No sé cuántos valores hay, así que solo quería correr hasta que sepa que estoy satisfecho por la condición para salir. Entonces por eso lo llamamos bucle controlado por condiciones. Entonces más allá de eso, ese es un bucle controlado por condición previa a la comprobación. Se comprueba primero la condición. Vamos a revisar, está bien. Sepa que estoy modificando el valor cada vez que es igual a 0 porque empezamos a partir de 0, Jake's it, es 0, luego log de consola, luego aumenta, luego vuelve a comprobarlo. Todavía es uno menos de diez? Sí, lo es. Ok. Amor, etc. y luego continúa y continúa hasta el final donde esto se convertirá en diez. Y entonces comprobaría y vería que, vale, esto ya no es diez ya no es menos de diez, así que no lo hagas más. Entonces es más o menos por eso que pasó de 0 a diez esta vez, a diferencia del for-loop que en realidad fue exactamente diez veces. Veamos otro escenario. ¿ Y si empecé con el valor de diez? Entonces fui a dejar que yo igual a diez. Y luego fui al mismo bucle. Cuando haga eso, luego presione Enter. Fíjate que no pasó nada porque ya me han tomado. Un ojo no es menos de diez. Por lo que no tengo nada que ver con esta condición ya está violada. Así que salta por encima de eso y pasa a la siguiente línea de código o en minúsculas. Entonces por eso lo llamamos bucle comprobado precondición. ¿ Está bien? No, está cerca. Relativo es el bucle do-while, que es solo una versión invertida del mismo. A ese se le llama bucle post check porque en realidad hace la acción y luego comprueba la condición. Entonces fui a dejar yo para ser el valor de diez. Aviso cuando empecé a las diez, revisó la condición y no hizo nada porque esa condición fue violada. Así que vamos a seguir adelante. No obstante, si digo hacer, sintaxis para ello es muy similar. Yo siempre digo que se debe. Y entonces estamos diciendo ¿qué hacemos? Así que abre nuestras llaves rizadas. Y luego después de ese cierre de corsé rizado decimos mientras que con la condición. Entonces haz esto o estas acciones mientras yo sea menos de diez. Bueno, adivina lo que va a hacer antes de que sea incluso cheques si como esta dentina, así que si tomo el mismo log de consola, está bien, me alegro ahí dentro del do-while, deberíamos ver, imprimir el valor de I al menos una vez. Y entonces no más porque no tengo menos de diez en ese punto porque tengo diez. Así que probemos eso. Esto termina con un punto y coma aquí. Muy bien, vamos a probarlo. Uno. Ahí vamos. Al menos conseguimos el valor diez antes de que saliera y nos dio ese indefinido. Indefinido solo significa que he terminado. Está bien, corre al menos una vez, así que déjame hacer uno. ¿ Está bien? Y luego probemos el do-while. Esta vez lo va a hacer y hacerlo y hacerlo en ese ECM. Acababa de envolverme en otro bucle infinito. Así que no vayas tan lejos. Asegúrate de poner el I plus es igual a uno antes de ejecutar ese código. Entonces voy a reiniciar mi consola. Muy bien, entonces reinicié ventana de mi navegador y reescribí el código. Aviso lo hice en una línea. Eso es perfectamente legal, pero estoy seguro que lo estás mirando y pensando que eso es un poco más confuso que el chico parecía inicialmente. Entonces sí, es legal, pero no es muy legible. Entonces es por eso que sigo sugiriendo que los espaciamos fuera y sangrías. Muy bien. Así que sólo voy a volver a ponerlo de la misma manera a la que estás acostumbrado. Y lo que he hecho esta vez es asegurarme de que me puse el I plus igual. Así que solo te estoy mostrando que si no escribes el código aquí apropiadamente y no lo haces, no tienes la condición correcta. Usted puede envolver en un bucle infinito, que eventualmente conducirá a una memoria en general un error en cualquier máquina. Querrías tener mucho cuidado. Así que déjame intentarlo de nuevo. No fui muy cuidadoso la primera vez, así que por eso te estoy dando el consejo. Muy bien, así que vamos a empezar en uno, derecho a la consola, el valor de i y luego incrementa y luego verifica después de incrementar, ¿cuál es el valor? Son dos para inculcar menos de diez. Así que hagámoslo de nuevo, registro de consola. Y luego va y va y va hasta que yo los incrementos tomé diez, luego comprueba que diez es menos de diez. Entonces dice, está bien, ya he terminado. Déjame cortar ahí mismo. Esas son declaraciones de repetición, por supuesto, con práctica y más exposición, verás cuándo usarlas y sostenerlas son útiles. Pero te animo a pensar escenarios que querrías repetir. Problemas matemáticos pensables que son manuales y en realidad podrías repetir algunos pasos usando nuestro bucle y seguir adelante y obtener la sensación de ellos. 13. Funciones de Javascript: Muy bien chicos, así que estamos viniendo muy bien. Estamos aprendiendo las estructuras de control de la programación general. Pero en el contexto de JavaScript. Como dije, la mayor parte de esto es en realidad conocimiento transferible. Así que cuando empieces a aprender otros idiomas, te darías cuenta que mucha de la sintaxis igual o muy similar y son, podrás transferir el hecho de que está bien, necesito tomar una decisión o hacer un bucle, etc., en ciertos puntos. No, vamos a cambiar marcha y movernos a otro tema, que es un poco más complejo pero muy divertido, muy fácil de entender una vez que lo cuelgues. Y eso es métodos. Un método en cualquier lenguaje de programación es una forma escribir código una vez pero reutilizarlo muchas veces. Por ejemplo, consola dot log. Ese es un método. ¿ Por qué digo que es un método? Porque es una línea de código que me permite pasar en casi cualquier cosa, cualquier número de veces. Y nunca tengo que escribir nada más que estas dos palabras. Entonces log es realmente el método y consola es realmente solo decir consola, que es esta pantalla negra que estamos escribiendo grabar, registrar cualquier mensaje. Muy bien. Este es un método que toma un valor y luego realiza una acción. No sé cómo lo hace. Detrás de esto, estas dos líneas de código están estas dos palabras en el código que parecen tan mágicas e incluso podrían parecer complicadas. Hay mucha más complicación sucediendo porque toma el valor aquí, hace algo le dice a todo este navegador que debe presentarle este mensaje a usted, el usuario final, de una manera particular. Muy bien, entonces por eso estoy diciendo que no sabemos cómo lo hace. Simplemente sabemos que decimos console.log y lo hace. Entonces esto realmente está haciendo ese bloque de código que podría ser 102050, más líneas de código, muy utilizable. Llegará un momento en el desarrollo de tu aplicación en que necesitarás hacer métodos. Sin embargo, no tienes muchos métodos incorporados, porque tienes métodos que te permiten manipular cadenas, tienes métodos que te permiten manipular los números que tienes matemáticas integradas, etc. Hay varias de ellas. Podemos explorar todos ellos y de verdad y verdaderamente, algunos de ellos puede que nunca uses, y algunos de ellos solo usas cuando sea absolutamente necesario. Pero lo que haremos es ver cómo podemos crear nuestros propios métodos en JavaScript para nuestros propios fines. Empecemos a escribir nuestro propio método. Y a veces los métodos se llaman funciones. revés, cada vez que escuches a alguien decir función o método, generalmente son lo mismo. Entonces la palabra clave es realmente función. Entonces empiezas viendo función, como ves en esa mayoría de las veces después, cuando vamos a estar haciendo algo, tenemos una declaración o una declaración declarativa, ¿verdad? Entonces digamos que estoy a punto de declarar una variable. Si declara, quiero una declaración if, etcétera Así que quiero una función, voy a decir función. Y luego fui a darle un nombre. ¿ Y si quisiéramos una función que añada dos números? Empecemos sencillos. Queremos una función que siempre va a imprimir hola mundo. Entonces en lugar de escribir console.log hola mundo, cada vez que quieras que suceda, solo quieres llamar a este método y simplemente imprime hola mundo. Puedo decir print hola mundo. Entonces fui a darle nombre a esta función. Las funciones se caracterizan por sus paréntesis, ya sea o no un valor entra aquí, no son opcionales. Después de los paréntesis, tenemos llaves rizadas abiertas y cercanas con el cuerpo de la función. Entonces aquí escribimos lo que queremos que haga esta función. Como dije, lo estamos manteniendo sencillo. Quiero un console.log, Hola Mundo. Muy bien, no quiero simplemente decir hola mundo desde la función. Imagina cada vez que quisieras hacer eso, tendrías que escribir esta línea de código y querías hacerlo en múltiples lugares en tu código, tienes un gran sitio web. Tienes una serie de lugares en los que querías imprimir mensaje articular. No quieres tener que escribir esto cada vez. Y luego si algo cambia y querían decir hola universo, entonces si rotas 50 veces, tienes que cambiar. Si 50 veces. Cuando lo pones todo en una función, solo tienes que ir a la función y cambiarla. Muy bien, así que déjame, déjame volver a hola mundo y mostrarte. Cuando presiono Enter, estoy registrando que existe esta función. No. Si quisiera imprimir este mensaje, tengo dos opciones. Puedo imprimirlo manualmente porque no conocía una función y existía. Y por tantas veces como quería tener que hacerlo y hacerlo y hacerlo. Simplemente puedo llamar a printf hola mundo, abrir y cerrar paréntesis. Y mira eso. Esto es todo lo que necesito. Esto es lo que se llama una llamada de función. Entonces esta es la declaración de función, lo siento, la definición es la definición, la explicación de cuál es la función, cuál es su nombre, qué debe hacer. Y luego esta es la llamada a la función, lo que significa que quiero que el código dentro de una función suceda en este punto. Por lo que tantas veces como hago esa llamada de función, siempre hará lo mismo. Así que sólo soy control y control V e inter espaciando todas las puertas. Cada vez que llames a esto, hará lo mismo. Entonces eso es lo que estaba viendo tantos lugares como lo podrías necesitar en tu sitio web, escribiste a la vez en JavaScript y él solo puede usar este método en cada página, cualquier otro lugar que quieras saber, digamos al director general o por quien le iba a molestar. Dije: Está bien, no queremos más. Quería decir hola mundo, quería decir hola universo. Todo lo que tienes que hacer es esto claro, este objetivo a la definición de función. Y ya no es imprimir hola mundo, no es imprimir Hola universo. Pero me gustaría dar un nombre a mi función de acuerdo a lo que está haciendo. Así que estoy viendo imprimir Hola Mundo, pero estoy cambiando esto para decir hola universal un poco quería renombrarlo para que si tengo que pasar por encima de este sitio web a mi colega, no lo sean confundido. ¿ Por qué print hello world está diciendo Hola universo, verdad? Por lo que siempre quieres tener en cuenta que nombrar tus funciones y variables y todo debe reflejar siempre para qué sirve. que cuando te vayas de vacaciones a Bali y vuelvas a una hendidura y mires hacia atrás. No te confundes en preguntarte, Espera, ¿por qué hice esto? ¿ Qué es tan lejos otra vez, los nombres te dirán, verdad? Entonces digamos que actualizé este método, cambié el nombre del mismo y cambié lo que se suponía que debía hacer. No, en todas partes en mi código que tenía Gran Bretaña hasta o, imprimir hola mundo tendría que actualizar para decir universo de impresión porque sé cuando ese bit de código causa imprimir hola mundo, todavía se va ser. Lo siento. Eso es un poco de desinformación. Déjame retroceder. En realidad no eliminé print hello world ya lo hago es modificar el nombre. Y entonces esta es en realidad una función completamente nueva. Entonces hay print Hola mundo que aún existe. Pero sabiendo si quería imprimir Hola universo, tendría que decir print hello universe. Y luego verás Hello universe from function. Tan conocido que me hace de dos funciones que hacen dos cosas diferentes. Uno imprime hola mundo, britaña, solo, universal. Dondequiera que yo quisiera hacer tampoco. Puedo hacer esa llamada de función. Porque estamos en nuestra consola y realmente no estamos editando un archivo de texto. Es por eso que modificar la definición de función como lo hice, no eliminó la otra funcional y acaba de agregar una nueva. Si se tratara de un archivo de texto, por supuesto sería simplemente como cambiar frase y eso toma archivo. Una vez que cambies esa frase, Esa intensidad se modifica para el resto de los documentos porque no estamos trabajando con un documento, pero más adelante verás cómo funciona eso. Pero mi punto es que sabemos que tenemos dos funciones y podemos simplemente llamar a cualquiera a voluntad. No tenemos que escribir este comando Alt manualmente y preguntarnos si es universal nuestro mundo, porque sabemos cuando llamamos éste imprime Hola universo, qué esperar y lo mismo de imprimir Hola Mundo. Muy bien. Ahora veamos otro escenario en que tal vez querrías pasar un valor. Entonces como con console.log, en realidad pasamos un valor. Llamaré a esto un parámetro. El parámetro es como un diseño variable para la función. Y luego cuando pasamos, un valor, se almacena en esa variable y luego podemos procesar lo que queramos con ese valor. Entonces digamos que queríamos darme cualquier número y siempre le agregaré cinco, algo así, o darle una representación porcentual de la misma. ¿ Está bien? Si digo una función y digamos calcular por ciento, me están dando un decimal. Sí, calcule decimal. Hagamos eso. Calcular decimal. Muy bien. Siempre dividiré cualquier número que me des por 0. Fácilmente puedo decir num uno. Num que estoy viendo crea una llamada a función que se calcula decimal, y espero que se pase un número o algún valor llamado num. Entonces justo de la misma manera. La única diferencia entre esta función y las que hicimos para la impresión. La única diferencia será que éste tome ese valor como parámetro. Pero lo que puedo hacer aquí es volver, ¿verdad? Entonces esto es lo que llamaremos una función de retorno de valor donde va a hacer algo y esto suele ser útil las matemáticas son alguna manipulación. Por lo que envías sobre el valor original y estás esperando obtener algún valor de desplazamiento de versión manipulada. Lo que su función haría es devolver el valor manipulado. Por lo que sólo diría volver num veces. 0.01, que si mi matemática es correcta, es sólo la representación de 100 en decimales, ¿verdad? Otra forma en que podríamos hacer esto es dividiendo directamente por un 100. Lo mismo. Muy bien. Dejémoslo en esa. Tan normal dividido por un 100. Y eso nos debe dar la representación decimal. Por lo que acaba de declarar esta nueva función. Y luego si lo llamo calcule decimal y pase en estaño. Yo pasando esto significa que cualquier valor que ponga aquí se va a almacenar en num. Por lo que debería devolver lo que esté manipulando o cualquier manipulación de aplicada a entumecida. Entonces cuando llamo a esto, obtengo 0.1. Siéntate. Si lo vuelvo a llamar con 101, siempre lo hará sin falta. Haz eso matemáticas por mí. Entonces es por eso que dije, puedes escribir el código una vez y luego usar el teléfono SHA-1 tantas veces con tantos otros valores como puedas necesitar. Muy, muy práctico. Entonces no importa en qué valor pase, siempre voy a estar obteniendo buck la representación decimal. Vamos a probar uno más. ¿ Y si dijera función? Calcular producto? Se supone que éste tome dos números. Entonces digamos num1 y num2. Y luego quiero calcular el producto de estos dos números. Entonces los productos serían yo devolviendo el valor después de multiplicar num1 y num2. Eso es todo lo que calculamos productos. Muy bien, Enter. Entonces ahora tenemos esa función también, tantas funciones que estoy creando. Entonces no estás limitado, No es como si una función pueda existir. Puedes tener tantas funciones porque una vez que es algo que puedes terminar repitiendo, quieres asegurarte de tener múltiples funciones en todos los planos que pueden manejar la situación aquí mismo. Si digo calcule, no decimal esta vez sino producto, y le doy 532, entonces devolverá cinco veces 30 para darme el volumen. Muy bien, entonces si dije calcule decimal para 32, me devolverás 0.32. Ahora mira esto. Y si dijera, quería, quería la representación decimal de cinco veces 30 herramienta. Muy bien, mira este nodo. Puedo llamar a calcular esto bien, porque el resultado final que quiero es el decimal calculado. Dentro de eso puedo calcular producto porque va a estar devolviendo un valor. Para que pueda tratarlo como si fuera un número o una variable. Para que pueda verlo producto calculado, luego darle los cinco los 32. Y adivina qué? Cinco en 32 serían los parámetros tal y como esboza la función para nuestros productos calculados porque eso es lo que hicimos en la definición. Necesito dos valores para llamar a calcular producto. Tengo que darle dos valores. Cuando se devuelva esto. Ese valor que se devuelve no va a servir como el volumen para nuestro decimal calculado, que definimos para ver darme un valor y me almacené en esta variable llamada adenoma y luego dar te respaldas los resultados. Entonces esta es sólo una gran llamada de función donde estoy viendo, dame el valor de esto. Necesitaré conseguirlo, seguir adelante y usarlo como valor para eso. Y eso va a simplemente cadena margarita. Por lo que cumplirá con esta llamada de función que devuelve un valor y luego hace esta llamada a la función y que devuelve los resultados finales. De acuerdo, puedo hacer varias cosas. Cuando estás devolviendo un valor. Si es que querías almacenarlo en una variable, se podría decir, Deja que la variable b sea igual a, y luego dices calcular producto. Así que dejemos que la variable b sea igual a cualquier valor que se devuelva. Sólo se puede hacer esto con funciones que devuelven nuestro registro de consola para Intel world y lo que sea. Eso no va a devolverlo. No está regresando, es sólo imprimir. Está llevando directiva y un final. No obstante, éste lleva a cabo la directiva e intenta devolver el valor después. Muy bien, entonces cuando devuelve el valor, siempre puedes atraparlo en una variable o como vimos, podemos reutilizarlo de diversas maneras. Pero es solo una forma más rapida de multiplicar dos números cualquiera que estar escribiendo esto por todo el lugar porque es, la fórmula cambia. Si se calculó el precio y cada precio se debe marcar un 10%, entonces hay que hacer eso por cada producto en la página web que sería tedioso. Considerando que si escribiste una función, solo llamas a la función cada vez. Si, si la fórmula cambia la próxima semana, solo tienes un lugar para cumplir con el cambio. No tienes que ir a cada lugar donde hice el cambio. Hiciste el único cambio en la función, entonces eso es todo. Muy bien. Siempre puedo decir simplemente dame el producto de 49. No sé si lo señalé antes, pero cuando tienes múltiples valores, siempre las comas los separan. Tener valor uno, valor dos, coma, valor tres, coma hasta en número de valores que pueda tener que necesita para esa función en particular. Para esta cuenta, calcule el producto de un solo número. Necesito herramienta mínima. Si quisiera tres, sólo tengo que cambiar la definición y decir coma tres, coma cuatro, etcétera hago eso. Se calculará el producto, lo almacenará en el producto variable. Y luego si acabo de hacer un registro de consola o el mismo producto, me mostrará que ese es el valor en lugar de productos. ¿Está bien? Eso es todas las funciones funcionan y eso es todas las funciones pueden hacer tu vida mucho más fácil. Muy bien. 14. Variables y Alcance de JavaScript: Muy bien chicos, así que hemos mirado variables, hemos mirado las declaraciones condicionales, hemos mirado la repetición, y hemos mirado las funciones. Si bien no hemos discutido es un concepto llamado alcances. Entonces antes de ir más allá, quiero que veamos lo que queremos decir cuando decimos alcances. Cuando estoy en la ventana general de la consola y digo que deje que algún nombre de variable sea igual a, y luego le doy un valor. Por sólo nombrar. Esta variable existe dentro del alcance de todo el navegador, dentro del alcance de toda la ventana I'm console. Para que pueda usar el nombre donde quiera. Si quisiera escribir una función que imprima nombre, nombre impresión, valor, está bien. Ni siquiera necesito tomar un parámetro para eso porque puedo acceder al nombre una vez que el nombre existe dentro de la consola, solo puedo decir consola dot log y nombre de impresión. Entonces eso es lo que llamaremos un alcance para que no mezcle el alcance de nombre globals. Si digo valor de nombre de impresión, siempre es bueno probar nombres. Entonces eso es global. Cualquier función, cualquier cosa puede acceder a necesidades. Esa es una variable global. ¿ Está bien? Sabes, si defino una función y digo print, eso es un valor de cadena, tomo un valor aquí, así que llamémoslo, llamémosla cadena de prueba. Eso es lo que llamo a esta variable. Se supone que imprimirá lo que el interior esté dentro de las cuerdas de prueba. Entonces voy a decir stream de prueba de registro de consola. Siempre que llamamos a esta función, solo quería imprimir el valor que estaba en test stream. Esa es mi definición. Entonces en persona PARA saber tenemos la función que existe. Entonces si digo valor de cadena de impresión, y luego le doy un valor como probar la función de impresión. Sea lo que sea yo hasta que sea, déjame conseguir mi división. Prueba de la función de impresión. Dale la llamada a la función de valor, se pronosticará exactamente lo que envié. Entonces eso es algo que compré dosis de registro de consola, ¿verdad? Cuando se envía a través de algo consola registrarlo, lo imprime en la consola. Entonces eso es lo que he hecho. He creado mi propia función donde puedo pasar en cualquier cadena y la imprimirá a la consola. Se puede pensar en eso. Pero lo que no puedo hacer es acceder a cadena de prueba desde cualquier lugar. Aparte de la función. Si intenté hacer algo con la cadena de prueba por sí sola, si traté de consola de registro de la cadena de prueba fuera de los confines de esta función, voy a obtener este error. Eso es lo que llamaremos una vez más alcance. Entonces éste no es global. La cadena de prueba está dentro del alcance de esta función. Entonces cualquier variable que se declare ya sea en los parámetros aquí, se declara dentro las llaves rizadas fuera de cualquier estructura de control, ya sea si declaración, switch, declaración, repetición, cualquier cosa. Una vez que está dentro de los límites de esa definición de declaraciones enteras está dentro del ámbito de esa declaración. Recuerda cuando estábamos haciendo nuestras declaraciones de repetición y yo había hecho el porque yo iguala bla y lo que sea. Pero entonces cuando lo intentaron con un tiempo, tuve que definir el ojo específicamente porque era único en el for-loop. Entonces eso fue en realidad el alcance de las obras de arte. Simplemente no lo mencioné esa vez. Muy bien. No, estás llegando a entender por qué tuve que volver atrás y decir deja que sea igual a 0 y luego escribir el bucle while porque tuve que hacer una variable global llamada yo en ese momento vi que el bucle while pudo ver que existe. Una vez más, puedes definir variables fuera de todo lo demás, globalmente al navegador y globalmente a cualquier otro bit de código que alguna vez se escribirá. Así como se puede definir una variable y utilizarla dentro del ámbito de una estructura de control particular. Puedo definir fácilmente otra variable aquí y decir let, vamos, déjame, déjame hacer eso. Así que permítanme cambiar esta cadena de prueba por lo que sabemos que eso está dentro del alcance de la función. Pero fácilmente podría romper, lo siento, rompiendo mis propias reglas. Ahí vamos. Así que podría decir fácilmente dejar que el sufijo igual En el ámbito de la función. Y entonces vamos a empezar a mezclar y emparejar saber porque estamos llegando a ser profesionales. Por lo que voy a decir registro de consola sea cual sea la cadena que se haya pasado. Muy bien, más el sufijo. Por eso puse esos dos espacios ahí. Entonces eso es podemos tener un espacio entre cualquier valor que pase manualmente. Y entonces esto va a existir dentro del ámbito de esta función. No significa modificar una definición de función. Presiono Enter y luego cualquier cosa que pase al valor de cadena de impresión, ¿verdad? Si digo, estoy probando, solo probando TO en el ámbito de la función, ¿verdad? Si llamo a esto, si le doy mi nombre, cadena, alcance de la función, si trato de cambiar el valor del sufijo, sufijo, no eres igual al alcance global. Ver que el sufijo es igual al alcance global, pero no quería traer esta mirada a eso. Así que a pesar de que creó una variable llamada sufijo y que una vez más script demo, eso es todo se sale con una gran cantidad de ceniza que debería haber sido iluminado sufijo, pero vamos a trabajar con él. Entonces a pesar de que definí sufijo arriba arriba aquí con el alcance global de la cadena, cuando llamo a mi función, el valor que está ahí del que sabemos viene. sufijo sigue en el ámbito de la función. Porque cuando llamo a la función aquí, le di el valor para la cadena de prueba. Esta cadena nula tiene su valor. Y luego defino mi versión de función de esta variable llamada sufijo. Entonces me encantó cualquier valor se pasara más eso es sufijo. Eso es solo un ejemplo de cómo funciona el alcance. Cuando tienes llaves rizadas. Cualquier cosa que hagas dentro de las llaves rizadas se limita a eso, esas llaves rizadas, si declaración, funcionan por bucle, sea lo que sea. Si necesitas nuevas variables solo para llevar a cabo esa operación particular dentro de un conjunto de llaves rizadas. Siéntase libre de hacer eso porque esa variable se va a limitar a esa estructura de control particular. 15. JavaScript y HTML DOM: Muy bien chicos, así que hemos estado mirando el lenguaje Javascript únicamente en el contexto y los confines de nuestra consola en nuestro navegador. Veamos esto en el contexto de cómo realmente podría ser utilizado, que es interactuar con el PH HTML regular. Lo que voy a hacer es traer una nueva ventana para el código de Visual Studio. Si quieres una ventana nueva, en realidad puedes ir al archivo y simplemente ir a Nueva Ventana. Por lo que no quiero que modifiquemos el sitio web que hemos estado construyendo hasta este punto, al menos aún no. Porque como dije, JavaScript es algo que usas cuando lo necesitas. No lo es. Oh, voy a experimentar en mi página web con ella. Pero es bueno saber el poder que tiene. Entonces abramos una nueva ventana, y luego vamos a crear un nuevo archivo. Y vamos a crear una nueva carpeta en algún lugar. Sólo voy a crear una nueva carpeta llamada G está probando y esa es la que vamos a usar R voy a usar puedes crear la tuya propia. Y luego voy a crear un nuevo archivo, que por supuesto siempre llamamos index ya que es el primer archivo. Sólo voy a hacer girar el HTML5 Boilerplate. Y voy a crear unas cuantas etiquetas de prueba. Así que sólo voy a decir probar JavaScript en una etiqueta p. Muy bien, ya miramos a nombrar a nuestros elementos. Podemos tener el ID probando JavaScript. Simplemente llamaré a esta prueba de identificación en alcohol, esta prueba JavaScript con atributo ID. Voy a dar estos a la misma clase. Así que una vez más, esto está más centrado en JavaScript no es todo el sitio web todavía, al menos. Entonces solo estoy dando estos valores. Fui a mostrarte cómo puedes interactuar con tus elementos. Cuando lo tengan, cuando se desea solo las etiquetas p versus que desee un elemento específico con un ID frente a uno o pocos ancho, la misma clase, la misma manera que podemos interactuar con ellas usando CSS cuando podemos orientar el elemento particular basado en toda su etiqueta de elemento o ID o clase es muy similar a todo JavaScript nos permite apuntar a lo que necesitamos, cuando necesitamos. Muy bien. Sólo lo estoy manteniendo simple con todo esto. Sólo voy a ir a vivir, ¿verdad? Entonces ahora estamos vivos. Tenemos nuestra pequeña página. Y luego cuando hacemos clic derecho y vamos a Inspeccionar y simplemente no vayas ventana, podemos ver nuestras cosas HTML. En realidad podemos saltar a la consola y en realidad podemos empezar a interactuar con ella. Así que déjame despejar la consola y acercar un poco. Muy bien, así que digamos que queríamos ver todas las etiquetas p en nuestro pH, ¿verdad? Por lo que claramente tenemos unos petabytes. Eso es todo lo que ponemos en la página. Etiqueta Peta Guan P con id y clase o clases, ¿verdad? Entonces si quiero acceder a algo, tengo que decir un documento que no quieres balancear ese tipo de documento, resaltó toda la página. No sé si tomó nota de ese documento representa la página en la que se encuentra. ¿ Verdad? Entonces, gracias al navegador, tenemos un montón de funciones disponibles para nosotros. Como dije, JavaScript es vasto. No puedo sentarme aquí y pasar por cada cosa y así sucesivamente. Estas cosas que quieres decir nunca usar o usarías en circunstancias muy especializadas. Entonces en este caso, voy a ir a conseguir, entonces vamos a ver que obtenemos elemento por ID, recuperar nombre de clase, obtener por nombre, obtener por nombre de etiqueta, y obtener por nombre de etiqueta. Empecemos por hablar de nombre. Nombre de etiqueta significa que quiero especificar a qué etiqueta estoy segmentando, así que estoy apuntando a las etiquetas p. Mira eso. No, me está mostrando tengo una colección de cuatro de d Tau aquí, p con la prueba de ID y P2 con la clase de prueba. Y entonces está viendo prueba tiene eso. Entonces es como si fuera universidad y esto es lo que llamaremos una matriz. Más tarde cuando estamos modificando nuestro propio sitio web, trabajaremos con una matriz. Pero solo estoy trayendo su prisión a ese escenario se caracteriza por las llaves cuadradas. Entonces si dije obtener elementos por nombre de etiqueta, entonces voy a decir let p tags. Entonces eso es sólo la variable b igual a. Entonces llamo a este código no hay etiquetas P tiene todos los elementos ahí. Entonces puedo llamar a prueba. Puedo llamar, llamemos a las pruebas. Y qué pasa si quisiera cambiar el valor en ella para que no pueda llamar a ningún texto interno, interno. Tenemos esa inteligencia. Que sea igual b igual a restableciendo un texto desde la consola. Mira lo que va a pasar. Entonces una de las etiquetas p, cuando presiono Enter, tenemos ese texto de configuración de la consola. Por lo que en realidad puedo usar JavaScript para cambiarlo. Así que recuerda cuando la página se carga, todo no es estático, está ahí. La única forma de cambiar algo es volver al código de Visual Studio y cambiarlo. Pero ahí es cuando estamos diseñando. ¿ Y si quisiéramos poner algo del poder en manos de nuestros usuarios? Entonces por eso escribimos JavaScript dentro de nuestro código para permitir que esas cosas sucedan. Aquí estamos viendo restableciendo texto desde la consola. Muy bien. Si queríamos apuntar a específico, estoy viendo demasiado aquí. Si quisiera específicamente ser específico con qué etiquetas de destino quiero, puedo decir get element by ID. Al decir get element by ID, especificaría ese nombre de ID, que me permitiría orientar cualquier valor de id que haya, ¿verdad? O si quisiera conseguir los que tienen un nombre de clase, puedo decir obtener elementos por nombre de clase, que en este caso nos daría la clase de prueba. Fue para llamarlo Sean. Si bien lo hicieron fue imprimir toda la colección. Por lo que puedo decir dejar B igual a, luego reutilizar este comando o esa declaración. No, tenemos etiquetas de nombre de clase que tienen esos dos. Entonces desde aquí podemos ver realmente cuál es la longitud. Tenemos dos de ellos. Podemos ver una serie de cosas e incluso podríamos poner esto como un for-loop donde vamos a cambiar el valor. Entonces hay número de cosas que podemos hacer y como dije, no puedo agotarlas, pero estas son algunas pepitas que estoy compartiendo contigo en su conjunto. Javascript le permite interactuar con la página real. Después uno donde no llegué a nuestra página web. Veremos cómo podemos modificar la página real para poner scripting ahí, cómo podemos ponerla en su propio archivo. Y voy a pasar por algunos de los conceptos básicos contigo a medida que pasamos agregando el JavaScript real a nuestro proyecto de sitio web real en el que tenemos trabajando. Así que estad atentos. 16. Cómo usar JavaScript: Hola chicos, bienvenidos de nuevo. En esta lección, comenzaremos a mirar JavaScript. Javascript es otro de esos lenguajes que solo tienes que explorar realmente. Pero es uno de esos lenguajes con los que es realmente fácil ponerse al día y empezar a entender cómo funciona la programación en general. Por lo que JavaScript es algo que realmente está incorporado en el navegador y te permite la capacidad de modificar en tiempo real lo que se está mostrando en la pantalla. Como hemos visto una vez o en HTML, respuesta agregar el CSS. Se parece más a un ciudadano. Olvídalo. Mientras el navegador se está ejecutando, sólo va a renderizar lo que se ha escrito. Javascript nos permite modificar que mientras el pH es LPS después de que el Berlín ya nos haya dado nuestro documento HTML, es sorta vio el contenido, estándares de TI y todo. No podemos cambiar nada. Volví a atornillar, pero entonces podemos permitir Java o JavaScript u otros permisos todos todavía hacen modificación en el reloj se está mostrando casi a voluntad. Entonces, hagamos algunos experimentos aquí y veamos cómo funciona JavaScript. Entonces lo primero a tener en cuenta es que necesitamos una nueva etiqueta. Y eso iría normalmente al final de la etiqueta del cuerpo. Por lo que o va a ir dentro la etiqueta de la cabeza o al final de la etiqueta del cuerpo. Número uno, la razón por la que no lo pondrías en la cabeza es más como renderizar. Cuando la página se está renderizando, quieres todo en la playa, luego quieres ejecutar el script porque el navegador renderiza yendo no. Entonces si el Oncotype DX primero en la página, eso es lo que termina aquí primero. Lo mismo para CSS. Siempre es bueno renderizar de arriba a abajo. Entonces si tienes un estilo de etiqueta p aparece y luego te calmas aquí en itera otro estilo de etiqueta P que contradice el anterior, entonces en realidad lo anulará. Por lo que querrás todo en tu página antes de que se ejecute el script, razón por la que normalmente lo ponemos al final de las etiquetas de cuerpo en base a la naturaleza de mi trabajo descriptivo. A veces puede que no funcione si se coloca en la parte superior. Entonces solo voy a bajar aquí, digamos guión, etiqueta de guión abierto y cerrado. Muy bien, muy importante. Y entonces lo que puedo hacer es crear una función o déjame, déjame hacer la más simple. Perdón, quería hacer una alerta. Por lo que en alerta nos permite abrir un mensaje en la pantalla. Por lo que una vez cargada la página, página cargada alerta J S. Está bien, así que veamos cómo se ve eso desde nuestro navegador. Entonces si navego hasta la página del índice va, ahí es donde pongo el guión. Está en la página de índice y navega y mira esa página cargada de alerta JS, ya que, eso incluso está apareciendo ante ella y los directores ejecutivos, ¿verdad? Entonces eso es lo que hace esa alerta. Nos permite modificar cosas. Entonces si pongo algo así como un botón, porque en términos generales, JavaScript se activa en función de un evento. Te gustaría que algo pasara cuando algo más sucede o así si tengo botón pulsado, digamos tipo igual botón. Y eso es muy importante porque los botones por defecto para enviar botones. Entonces onclick, que es el evento. Entonces estoy viendo cuando se hace clic en este botón, quería llamar a la función. Voy a guardar botón clicado. Y esa es la función. Entonces voy a decir que me critique. De acuerdo, así que tenemos nuestro botón encendido hasta que se supone que el botón de llamada se hizo clic como la función. Está bien, así que déjame refrescar esta página y aquí está nuestra camarilla. Yo. Cuando hice clic, no pasa nada. Si inspecciono elemento, verás que estoy recibiendo un montón de errores de consola porque está viendo ButtonClicked no está definido. Por lo que sabe que debe volverse al algo en una camarilla. Pero ButtonClicked no está definido por lo que no sabe qué hacerlo viendo. De acuerdo, ya veo que se supone que debo hacer algo, pero no hay indicación. Entonces en el área de script Java, puedo seguir adelante y definir esa función. Por lo que vería literalmente función y el nombre de la función con los paréntesis abiertos y cerrados. Entonces esos son muy importantes. Y luego dentro de esa función, Vamos a ver, creo las alertas de tuercas para ver. Yo soy criticado. Muy bien, Así que vimos que el JavaScript se disparó automáticamente cuando acabamos de poner la alerta ahí, simplemente fue ¿acabas de disparar? No obstante, esta vez estoy tratando de decirle que solo se dispara cuando se hace clic en el botón. Entonces cuando regrese, voy a recargar la página. Observe que la página se está recargando, no aparecen alertas. Pero cuando hago clic, obtengo la alerta, me hacen clic. Entonces este soy yo, ya sabes, superponiendo, siendo dinámico. Y este es el primer paso para hacer algo dinámico en el diseño web usando JavaScript. Entonces haz click conmigo. Tantas veces como hagas eso, obtendrás la alerta cada vez. Entonces eso es un evento. Está bien, así que empecemos a conseguir, como dirían, jig te con ello. De acuerdo, veamos qué podemos cambiar en la propia página cuando se hace clic en el botón. ¿ Y si quisiera cambiar el texto de una de estas etiquetas cuando se hace clic en el botón. Entonces haz click conmigo para cambiar texto u otro, déjame crear otro botón. Entonces haz click conmigo. Y luego voy a ver a cambiar de texto. Entonces puedo tener múltiplo. Por lo que haga clic en botón para cambiar el texto, se hizo clic. Está bien, así que esa es otra función que quiero. Por lo que tantas funciones como necesite hacer, puedo reunirme con ellos teléfonos celulares encendidos para mí y luego tener nuestra función para cambiar. Toma una camarilla. Bueno, ¿qué voy a estar cambiando? Digamos que quería cambiar el texto de esta P por etiqueta P para, quería cambiar esa se pega para ver me han hecho clic. Esto son, esto es, esto es texto JavaScript. Muy bien, uno, necesito poder apuntarlo. Por lo que necesito saber por DNI. Por lo que fui a darle una identificación para ver objetivo. Está bien. Nada fondos para solo target tag. Recuerda, te veré en que no tengas dos elementos con el mismo ID en la misma página porque eso puede dar lugar a problemas. Entonces aquí está exhibir a. Cuando quiero obtener el elemento por la etiqueta de destino ID, si ve dos o tres o dos o más, no sabe cuál está realmente apuntando, así que simplemente no funciona. Muy bien, así podremos probar eso más adelante. Pero ahora voy a apuntar a esta etiqueta P y decir etiqueta objetivo. Y luego en esta peta o en esta función más bien voy a decir documentos. Entonces documento significa en esta página, quiero obtener elemento por ID. Para que veas todas estas las puedes conseguir por un remolcador imitado y conseguir mi nombre. Puede obtener mi nombre de clase, siendo el nombre de la clase igual a lo que sea. Entonces si quisieras afectar múltiple, entonces otra vez conseguir mi nombre de clase y conseguir por inflamación se obtendría todas esas etiquetas p. O puedes conseguir por DNI, es decir, el específico, ¿no? Por lo que consigue elemento por ID. Y luego dentro de los paréntesis tienes comillas abiertas y cerradas. Y luego pones en el nombre o los valores de ID, esa etiqueta de destino es la ID. ¿ Verdad? Entonces voy a decir lo que quiero modificar. Quiero modificar el HTML interno en HTML significa lo que hay dentro de esa etiqueta. Entonces el HTML interno aquí va a ser igual a, quería decir texto de script Java. Muy bien, así que veamos qué cederá todo eso. Entonces tengo mi barco extra ahora recuerda que estamos apuntando a Todd por mirar ese texto JavaScript. Yo todavía funciona. Todo está funcionando y vamos a hacer clic en él. Siempre solo cambiará a tomas JavaScript basadas en lo que escribimos. Pero si refresco la página siempre va a rehacer el documento HTML original porque eso es lo que sabe. Una vez que vuelva a hacer clic, lo cambiará sobre la marcha, pero no lo cambia permanentemente a través de la página web. Todo lo cambia dentro del contexto de mi navegador. Ahora en pocas palabras, eso es lo que ofrece javascript, ¿verdad? Ahí hay, hay mucho más porque las declaraciones IF, tienes bucles, tienes una serie de cosas que puedes hacer. El contexto determina lo que hay que hacer en JavaScript, para ser honesto, es una de esas cosas de las que es bueno tener los conocimientos básicos. Pero realmente no terminarás usándolo en tu cara con una situación la que las alternativas pueden no ser tan favorables. Por lo que no voy a pasar tiempo explorando cada uno de los aspectos de este lenguaje. De verdad solo te estoy mostrando un todo. Te ayuda a modificar el HTML que ya se ha ingresado son tu DOM. Así se llama, ¿verdad? solo puedas tener esa sensación dinámica a tu página web. No. Habrá situaciones en las que se desee que el mismo tipo de script se ejecute en múltiples páginas. Nos estamos topando con el mismo tipo de territorio, saber, como con nuestro CSS cuando agregamos nuestro CSS en el área de cabecera y queríamos que sea en múltiples páginas donde ponerlo en nuestro archivo. Entonces ahí es donde vamos a ir. Y a continuación, queremos nuestras cosas de guión en un archivo para sí mismo. Entonces voy a agregar un nuevo explorador de archivos o lo es, o Explorador de archivos. Y voy a llamar a este punto de guión, y nuestra nueva extensión es js. Por lo que nota es el código de Visual Studio. Siempre te da un poco de indicadores que pueden saber con qué tipo de archivo estás lidiando, ¿verdad? Entonces en un archivo JS, no necesitamos las etiquetas de script. Todo lo que necesitamos es la sintaxis cruda de JavaScript, ¿verdad? Entonces script.js, y solo tendría esas funciones ahí. Entonces buck en el archivo HTML o una etiqueta de script sabrá que se parece algo a este guión abrir y cerrar. Este lamentablemente no es autocierre. Sí viene con un atributo llamado SRC que me permite hacer referencia al archivo script.js. Entonces puedo tomar esto y aplicarlo a cada ritmo. Por lo que el contacto también tiene un botón, digamos Contáctenos. Botón y click. Yo quería ver esto es una alerta, ¿verdad? O me hacen clic más bien, ¿verdad? Por lo que ButtonClicked debe ser llamado en el botón de contacto haga clic también, derecha, por lo que incluye este script. Y entonces tengo este tipo de entrada, envía lo que me está dando un botón. Pero, ¿adivina qué? Puedo decir, onclick. Onclick, quiero que llames. Perdón, olvidé los nombres de las funciones. Entonces al click quería llamar a ButtonClicked. De acuerdo, así que veamos cómo va a funcionar eso. Por lo que sé que en mi página de inicio tengo discreto me llamará la alerta. Eso está bien. También en el Contáctenos, tengo este botón que al hacer clic llama a la misma función. Por lo que ahí podemos hacer que el JavaScript sea reutilizable a través de múltiples páginas. Tienes necesidades de JavaScript para aplicar a múltiples lugares. Haces eso, ¿verdad? Y entonces continuará con su operación como lo haría normalmente. Por lo que JavaScript es compartible y puedes ir en su propio archivo. No hay nada que voy a mostrar y luego podemos cerrar esto para no es lo que pasa cuando empiezas a mezclar rápido. Entonces como ves aquí, tenemos imágenes un solo lugar, tienes CSS, archivo JavaScript, archivos HTML web. En términos generales, me gustaría ver archivos mezclan semáforo que cada archivo debe ser su propia sección. Ellas ischium alphas son las más importantes, por lo que necesitan estar en la carpeta raíz, pero las otras necesitan estar un poco separadas porque podrías terminar con múltiples archivos CSS, múltiples imágenes para su sitio web, múltiples archivos de script, etcétera. Entonces lo que hago es separarlos, digamos que crea una carpeta llamada CSS. Por lo que tienes el archivo, Nuevo archivo y Nueva carpeta, o puedes hacer clic derecho y decir Nueva carpeta. Creo una carpeta para JS o JavaScript, y luego creo otra para imágenes ídolos llaman a eso IMG. Y ten cuidado porque acababa de crear el IMG bajo las carpetas js. Yo. Déjame rehacer esa. Por lo que GS así que asegúrate de no seleccionar ningún otro archivo o carpeta y estás creando. Y luego IMG. Ahí vamos. Entonces puedo mover script a los datos. Entonces solo estoy arrastrando y soltando. Sí, obtengo el movimiento puntual. Seguro. Yo voy a mover este CSS aquí sin embargo. Pregúntame de nuevo, muévete y luego la imagen o las imágenes pueden entrar ahí. Entonces no, se ve un poco más ordenado, ¿verdad? Sé dónde están mis archivos HTML y tantas imágenes como tengo, están todas en una carpeta. Todos los archivos CSS son carpeta conocida, etcétera. Pero mira lo que le pasa a la página web y todo vuelve a la normalidad. El cocinar no funciona, las imágenes se han ido, todo se ha ido. ¿ Por qué? Porque movemos las ubicaciones de los archivos. Entonces eso es otra cosa. Recuerda que siempre dije porque estaban en el mismo nivel, siempre podíamos llamarlos por su nombre. No, hay suficiente carpeta y en otro lugar. Entonces lo que tengo que hacer es llamar a la carpeta, luego llegar al ayuno. Por lo que para las hojas de estilo, la carpeta se llama CSS hasta decir HF es estilos de barra inclinada CSS. Entonces para la página Contáctenos, ahora sabe dónde sacar bien las hojas de estadísticas. Entonces eso es solo una actualización rápida que necesitamos hacer en cada página. Por lo que todas las hojas de stat no son de estilo CSS. Déjame subir y modificar eso. ¿ Verdad? Por lo que todas las páginas conocidas o que deberían ir en la carpeta CSS para obtener las hojas de estilo. Muy bien, lo mismo para los Javascripts. Aviso que no hay clic está funcionando. Por lo que el archivo JavaScript está conociendo scripts js slash. ¿ Verdad? Entonces solo entro ahí, obtengo el archivo JS y actualizo en todas las referencias por todas partes. Y una vez hecho eso, el click vuelve a funcionar. De acuerdo, así que eso se llama caminos relativos, ¿verdad? Siempre se desea mantener sus rutas en relación con el archivo enrejado cepas acceder a los otros archivos. Entonces la página Contáctenos es esa raíz, pero luego tiene que entrar en j para llegar al guión. De acuerdo, así que esa es otra regla importante. Tan mismo para las imágenes en el barco. Esto no es una slash IMG, ¿verdad? Por lo que sólo voy a quitar estos y sólo voy a duplicar este por tantas veces y luego se restaura el orden. Entonces eso es sólo otro principio que yo pensaba. Ah, puedo colarme ahí mientras la variedad de archivos empieza a crecer en tu proyecto web, quieres asegurarte de que los estás separando con clara delineación para que sepas exactamente dónde encontrar agua y entera. 17. Uso de jQuery: Muy bien chicos, bienvenidos de nuevo. Por lo que acabamos de echar un vistazo a JavaScript en el agua que puedes hacer por una nieve. Tomémoslo un poco y empecemos a lamer en un marco llamado jQuery. Conocer un framework es resultado de un grupo de desarrolladores, generalmente desarrolladores de código abierto, que básicamente han estado en esta cosa durante años. Siguen haciendo lo mismo una y otra vez. Y piensan que si siguen haciéndolo, entonces hay alguien más por ahí que sigue haciéndolo también. Entonces lo que hacen es tipo de lenguaje de paquetes o ciertos comandos de uso común de un lenguaje en particular. Los empaquetan en un solo archivo y luego te dan ciertos conjuntos de reglas sobre cómo puedes reutilizarlos al usar una fracción del código. Entonces jQuery es ese tipo de marco. Por lo que JavaScript, como dije, es muy poderoso. Hay un montón de cosas para ello. Pero luego hay ciertas cosas que requerirían cinco, 10 líneas de código. Y luego lo que hicieron fue tipo de paquete que soy lo pone en lo que llamamos un archivo jQuery o una biblioteca. Entonces puedes acceder a esas 10 líneas de código usando una línea de código llamando a la función jQuery. Entonces eso es lo que vamos a estar viendo hoy. Entonces el primer paso para meter jQuery en tu proyecto sería, bueno, hay dos opciones realmente, puedes descargar el archivo. Por lo que en realidad puedes simplemente ir a JQuery.com. Y sólo podemos hacer eso aquí, JQuery.com. Y desde aquí verás que es ligero, cumple con CSS3, y es cross-browser, ¿verdad? Y te da algunos ejemplos fuera de la sintaxis. En realidad pueden ir aquí y obtener alguna muy buena documentación de un barco, la API, ¿verdad? También puedes descargar los archivos. Entonces si descargas el archivo, entonces solo vas a estar consiguiendo otro archivo js como vimos. O puedes hacer lo que llamamos o usar lo que llamamos CDN, que es abreviatura de red de entrega de contenido. Por lo que estos son archivos alojados en Internet. Así que acabo de escribir ese enlace, Google Apis.com, y es una versión alojada de los archivos JavaScript. Entonces ves que el JavaScript ahora que hemos pasado es básicamente nada. Todo esto es hacer algunas cosas locas que nunca podría sentarme y enseñar en una sola sesión. Esto son años y años de hacer lo mismo en JavaScript todo combinado y lo que llamaremos minificado. Si te quitas el Min del link, entonces se vería un poco más legible, pero incluso entonces, sigue bastante desbloqueado. Se puede ver lo enorme que es este archivo. Entonces la minificación es realmente el proceso de tomar notas todos estos espacios en blanco, lo que en de forma variable reduce el tamaño, el tamaño total del archivo en sí, ¿verdad? Entonces por eso terminamos con el min. Entonces lo que estaba diciendo es que en lugar de no cargar este min y tratar de ponerlo en el proyecto. También tienes la opción de simplemente referenciarlo directamente desde la página web. Por lo que esto realmente se cargaría más rápido cuando tu proyecto se vea en internet porque sería Lord Foster, desde el servidor de Google, alguien se computa y lo haría desde tu servidor a su computadora o a su navegador, ¿verdad? Entonces lo que haremos es solo usar la opción CDN e incluir jQuery en nuestra página web como la tenemos. Entonces entra en el índice. Empecemos con el índice. Lo que haré es usar la misma etiqueta de script excepto que el SRC va a ser la URL al archivo. Entonces si no estás trabajando con una conexión a Internet, entonces es posible que no tengas esa opción. Vas a querer ir así de rápido. Entonces si tienes que descargar el archivo y eso no es problema, tienes una serie de opciones. Para mí, la más fácil sería ir aquí onload. A veces lo que hago es simplemente ir a la semilla en, copiar todo esto de todos modos, volviendo de nuevo, crea un nuevo archivo JS. Entonces esto crea un nuevo archivo y lo llamaré jQuery dot js, ¿verdad? Y luego pega ahí el contenido del archivo. Y entonces ese es mi archivo jQuery js. Lee esto. Es difícil de mirar, pero eso es lo que es. Entonces, en lugar de usar el CDN, y diría que usa ya sea nuestros cultos en lugar de usar el CDN, ese punto punto punto, podrías simplemente decir que estás haciendo referencia tu archivo jQuery dot js o como llames esto, ¿verdad? Por lo que tienes una serie de opciones. Una vez más, eso debería ser slash jQuery. Ahí vamos. Muy bien, entonces tienes una serie de opciones a la hora de hacer referencia a este marco. Tenga en cuenta también que lo estoy poniendo tanto mis propios guiones porque lo que pasa es que esto proporciona como una base. Entonces una vez que lo consiga hace un 100, bastantes comandos comunes en JavaScript. Podría necesitar hacer referencia a todos estos comandos en mi propio archivo de script. Por lo que el orden importa. Deja que se cargue primero y luego puedo hacer referencia a las cosas menos 2 jQuery en mis cosas. Así que siempre ponga esos archivos jQuery arriba y todas las demás dependencias en bibliotecas y así sucesivamente. Siempre comienza con aquellos antes de llegar a su código personalizado porque podría confiar en el código de esos otros archivos. De acuerdo, así que echemos un vistazo a lo que jQuery puede traer a la mesa. Está bien, así que yo soy, no soy uno para usar mi archivo de script para esto. Voy a escribir mi propio código jQuery justo debajo de aquí. Y voy a seguir apuntando a esto cuando se haga clic, ¿verdad? Entonces déjame quitarme este onclick o vivir crea otro libro. En realidad, permítanme simplemente crear otro botón para que podamos retener todos nuestros ejemplos. Esto no tendrá un onclick. No quiero verme para ocultar título. Entonces recuerda que tenemos el título. Teníamos el título. Aquí está nuestro título, estaba consiguiendo armas, altavoces, justo todo así queremos ocultar este título cuando se haga clic en este botón. Está bien, así que para empezar con jQuery, lo que quieres hacer es decir cuando el documento esté listo, entonces estoy listo para correr. Por lo que se puede ver documento de signo de dólar. Esta es una marca comercial de jQuery. Entonces recuerda que ves en documento antes de que pase en archivo de script R, sí vimos un documento, ¿verdad? Entonces en jQuery ves un signo de dólar, abre paréntesis, y luego lo que sea que sea más fácil apuntar. Entonces donde está discutiendo todo el documento, si se quisiera una etiqueta p, vería p. ¿ Verdad? Lo sentimos, no hay comillas. P. Tengo, me quedo con una sola persona cosa equivocada, ¿verdad? Si quisiera apuntar. Por lo que es casi como CSS. Si quería apuntar, eso está bien. Sólo puedo ver ese signo de dólar superior, abrir paréntesis y luego ese alternar ¿verdad? Culo, correcto. No, estoy apuntando a todos los documentos. Estoy diciendo document.ready. En este documento está listo. Quiero ejecutar esta función. Entonces dentro de esa función al final con punto y coma, ¿verdad? Por lo que la sintaxis puede tomar una curva de aprendizaje, la herencia puede tomar otra e incurrir, razón por la cual sigo viendo que la práctica hace permanente. Entonces signo de dólar, abra paréntesis la toalla que desea los objetivos, que en este caso, someto primero el documento. Y luego estoy viendo al Dr. Reddy, significa que esto es lo que estoy esperando en relación con esta etiqueta. Ejecutar esta función. Para que dentro de esa función pueda tener tantas otras funciones son, como muchas otras cosas que quiero hacer. Conoce la forma más corta de hacer esto en realidad sería solo la función C. Entonces, en realidad hay una forma más corta. Entonces estoy disparando todo bien, conoce todos los, todos los secretos del universo. Entonces la mayoría de los ejemplos que verías tendrían document.ready porque durante años Eso es todo lo que jQuery lo hizo. Pero en tiempos más recientes, han proporcionado o abreviado versión de esa palabra un poco decir signo de dólar, paréntesis abierto, ejecutar esta función porque ya inferirá que puedo solo ejecute esta función cuando el documento esté listo. De acuerdo, así que veamos algo como el evento click de botón. Por lo que ya vimos cómo podemos obtener un evento onclick usando JavaScript regular con jQuery. Puedo conocer C, signo de dólar, abrir paréntesis, y luego ver el botón o para eliminar en busco como simplemente nos sentaríamos. Y luego si digo un botón, esto va a apuntar a cada libro de aquí, que no es realmente lo que quiero. Yo quiero apuntar a este botón en particular. Entonces, o bien puedo darle una identificación, que sabemos es nombre totalmente único. Entonces voy a decir Ocultar Título, btn. Por lo que tiendo a hacer eso con mis títulos son con mis identificaciones más bien. Entonces sé de qué tipo de elemento es. Así Ocultar Título btn. Entonces si quiero decir que quiero apuntar a Ocultar Título BGN, lo que realmente haría es abrir comillas. Al igual que CSS, uso el hashtag, pongo el ID de los elementos a los que estoy apuntando. Entonces digo un punto, Click, ¿verdad? Entonces estoy viendo cuando se hace clic en este elemento , ejecute esta función. De acuerdo, entonces verás mucho de eso en jQuery. Verás el signo del dólar o metope, el elemento que está buscando y luego ¿en qué estoy esperando? Entonces esto son eventos en vivo. Entonces vimos con document.ready cuando el documento está listo, está bien, correr. Bueno, cuando se hace clic en este elemento , ejecute esta función. Entonces, ¿qué estamos poniendo dentro de esa función? Entonces puedo ver, y antes de que vayamos más lejos, he estado haciendo todo mal esto. Si viste el error antes que yo lo hiciera, entonces felicitaciones, eres oficialmente más inteligente que yo, pero estamos escribiendo un guión, así que necesitamos nuestro guión. Me disculpo sinceramente por ese descuido. Y así empezarás a ver que el código insinuando los colores empieza a parecer un poco más acogedor que solo el blanco toma. Está bien, así como estábamos y sólo voy a asegurarme de que haga mis indentaciones. Puedo ver donde todo empieza y se detiene. Entonces esta es la función principal, y entonces este es el evento dentro de esa función principal. Entonces ahí vamos. Esto se ve un poco mejor. Ahora que estamos en el guión, empezarás a ver algunas pistas de código más. Y si necesitas ayuda extra, siempre puedes obtener los inviernos y fragmentos de jQuery de las extensiones. Digamos que si solo vas hoy sentido y luego buscas jQuery, verías diferentes fragmentos y puedes obtener algo de ayuda, ayuda adicional con tu codificación de las extensiones. Muy bien, entonces volvamos a esto. Así Ocultar Título btn. Haga clic una vez que voy a hacer es entonces apunta a este elemento de título por su ID. Entonces una vez más, signo de dólar, comillas abiertas, comillas simples, paréntesis abiertas u otros. Y luego comillas y puede ser singular, se puede duplicar. Realmente no importa en esta etapa, pero en hashtags que D de los elementos punto. Y luego estoy viendo todas las posibles funciones que pueden llevar a cabo en jQuery. Voy a probar este que dice Toggle. Por lo que dice mostrar u ocultar los elementos. Entonces toggle. Ahora mismo imagina que estás para leer, Eso es todo lo que está en JavaScript para ver. Cuando se haga clic en este botón, compruebe si se muestra el título. Si se muestra, entonces ocultarlo. Si no ha desaparecido, entonces muéstralo. Eso son dos si las declaraciones son y eso es todo un bloque de texto como te acabo de decir, a diferencia de cuando se hace clic en el botón. Fina, título y objetivo. Simple, ¿verdad? Entonces eso es lo que jQuery trae a la mesa ese tipo de condensa. Mucho del código habría estado escribiendo extensamente. Entonces déjame saltar de nuevo a mi página de inicio y mi Live Server dejó de funcionar. Por lo que siempre puedo simplemente hacer clic derecho e ir en vivo o simplemente hacer clic en Go-live en la esquina inferior derecha. Y estamos de nuevo arriba. Aquí está mi nuevo botón y mira eso. Cuando hago clic en él, lo está alternando. Agradable y sencillo. Mira todo lo que logramos a través básicamente de tres líneas de código. Muy bien, para que siempre puedas monitorizar, tienes eventos abundantes, y no se limitan a botones, sino solo para mostrarte todos los eventos potenciales, puedes obtener el valor de alguna lata de TA Díselo a la clase, ¿verdad? Se puede buscar a los hermanos. Se puede cambiar la clase, quitar la clase, y ella tiene una clase o quitar atributos y agregar atributos, derecha, entonces ¿qué pasa si, cuando se hizo clic en lugar de cambiar, quería agregar la clase, Tendría clase, y luego puedo especificar la clase. Entonces en el styles.css, ¿ qué clases tengo? Tengo dp, tengo, déjame crear otra clase. Entonces voy a dar esto, quería crear una clase llamada punto sub título. ¿Todo bien? Y lo que pasaría con un subtítulo es que tome la curación será digamos huelga a través de puntos, sólo algo diferente. Y el color de fondo será negro. Y el color en sí, color del texto sería blanco. Está bien, así que intentemos eso. Entonces al hacer clic, quería agregar el subtítulo de clase. Por lo que soy musulmanes y digamos agregar el subtítulo de clase. Y una vez más, traté de ser lo mejor posible sensible a mayúsculas y minúsculas. Entonces veamos qué produciría eso. Así que volviendo, refrescado para mí, claro, todo el mundo es agradable. Yo sabía cuando hago eso, mira eso. Así son las garrapatas cambian a blanco, así que Algo pasó. Entonces voy a inspeccionar el elemento para ver por qué no cambió todo. Entonces si inspecciono y echo un vistazo, ver a la clase de eso sí lo consiguió. Entonces déjame refrescarme y volver a hacerlo. Entonces en la carga inicial, Ahí está nuestra etiqueta H1, título y todo. Ahora cuando haga clic, verás que cambió. Se. Puso en el subtítulo, digamos cambiado en tiempo real para nosotros, correcto. No obstante, si miramos a los derechos, vamos a ver que el título sigue teniendo precedencia sobre el subtítulo. Muy bien, así que no se dieron todos los elementos porque estos siguen siendo anulados o reemplazados por título o por el elemento de origen CSS. Entonces por eso no apareció la línea punteada, el bloque no apareció. Color azul blanco, está ahí. De acuerdo, así que sí, puedes jugar con él y puedes ver cómo puedes modificar qué va hacia dónde y cómo manipular los diferentes elementos. Una vez más, esto es algo que usas cuando lo necesitas. Podrías sentarte y hacer botones y hacer que modifique el DOM todo el día. Podría decir cuando se les haga clic, quiero todas las etiquetas p. Todas las etiquetas p para tener la normalidad HTML interna en nuestro ancho o altura, ¿ sería HTML? Entonces a veces hasta tengo que entrar y solo teclear en C, vale, cuál mejor se adapte a lo que me gustaría. Está bien, así que esta es la consulta J, ¿verdad? Entonces esta soy yo viendo cuando hago clic en este botón, el mismo para ocultar titulado btn, quería agregar esa clase. Entonces cambiemos sobre el toggle. Desde toggle funcionó perfectamente. De acuerdo, entonces debería ocultarlo y debería cambiar todos los pétalos HTML para decir que este es texto jQuery. Por lo que actualizó la página I. Cuando hago clic, vemos el toggle funciona pero el texto no está cambiando. Está bien, bien, no hay problema. Entonces eso significa que vocal HTML, esos son suscritos, hay algo más? ¿ Hay textos? Probemos un texto. Entonces vuelvo, me refresco, y eso aún no funciona. Veo mi error. Debí haber tenido las comillas alrededor de las etiquetas p. Entonces intentemos eso una vez más. Y todo esto es solo para demostrar que estás trabajando ahora, ¿verdad? Entonces todo esto son aquellos para mostrarte que a veces solo tienes que entrar y explorar para encontrar la solución que necesitas, ¿verdad? Entonces aquí vemos que cada vez que queremos seleccionar todas las etiquetas de un determinado tipo, necesitamos las comillas a su alrededor. Cuando es documento, sí necesitamos eso, está bien. Pero entonces cuando queremos apuntar a una identificación en particular, necesitamos nuestro hashtag. Si quisiéramos apuntar a una clase en particular, como quería p, r, quería la clase de información, entonces será lo mismo. Información de puntos, ¿verdad? Entonces punto información, cualquier cosa que tenga información. Entonces voy a decir que esto es para mí, Sean. Está bien. Entonces estoy cambiando todas las etiquetas p para decir eso. Pero cualquier cosa con la clase de información que quería decir esto es inflamación. Haz eso. Se ve texto jQuery. Esto es información. De acuerdo, así que hay bastantes cosas que puedes usar jQuery para hacer a la hora de manipular. Pero una vez más, para mí es un uso ya que necesitas tipo de biblioteca. Y hay toneladas más que no vamos a poder explorar en unos cuantos videos. Una vez más, la práctica hace permanente. 18. Introducción a Bootstrap 5: Chicos, bienvenidos de nuevo. Por lo que estamos terminando nuestros conceptos básicos en HTML y CSS. Ya echamos un vistazo a los conceptos básicos en JavaScript, y echamos un vistazo al marco llamado jQuery, que se basa en la parte superior del B6. Entonces de la misma manera que jQuery fue diseñado para reducir algunas de las repetidas tareas JavaScript en código. Es lo mismo con que Bootstrap, que es lo que estaremos viendo NO, está diseñado para especie de reducir parte del repetido código CSS que los desarrolladores tienden a hacer cada vez que construyen un molesto, tienden a hacer estas cosas. Entonces lo que hicieron los desarrolladores de Bootstrap fue compilado todas esas funciones CSS básicas en un solo archivo. Y luego simplemente te lo proporcionan de forma gratuita. Y solo puedes usarlo a voluntad. Por lo que es excelente lo documentado. Podrás conseguir que su guardia llegue a este sitio web yendo a conseguir bootstrap.com. Y la última versión es la versión 5, 1, 0. Pero entonces son mayormente usados uno que probablemente verías en internet no. Sería 4.6. Desde que esa ha existido por mucho más tiempo y trajo a bote algunos cambios significativos desde la versión sobre la que lo precedió, que era la versión tres. Pero nos estaremos centrando en la versión cinco en este punto. Y la instalación para ello es bastante sencilla. Es el mismo concepto. Puede integrar el archivo en su sistema local o en su conjunto de activos de su sitio web. O simplemente puedes usar el CDN. Por lo que en realidad te dan los enlaces CDN que tendrías CSS CDN link, y te dan un archivo JavaScript, enlace CDN. Entonces, una vez más, si solo resalta esa URL en ese enlace CDN y navega allí, entonces realmente verías ese archivo completo. Y esta es la versión minificada. Si tomo el viejo Min y solo miro el CSS y se ve un poco más legible. Y ves que es el mismo tipo de meta que hemos estado escribiendo hasta este punto aquí mismo. Tan solo unas cosas más y un poco más de detalle porque han cubierto un gran número de escenarios más o menos. Está bien. Pero para esta situación, sólo vamos a utilizar el enlace CDN para integrarlo nuestra página web que hemos ido construyendo hasta este punto. Entonces empecemos copiando esta URL para que solo pueda copiar aquí. Y luego pasaré al archivo del sitio web y luego el desgaste en los bits de índice. Entonces lo que haremos es ponerlo donde sepamos que ponemos nuestros archivos CSS. Entonces tengo mi CSS local, que sigue siendo importante porque podría tener hace lo que quiero. Por lo que escribiría mi disfraz para mis estilos personalizados y pondría mi propio CSS. Pero me gustaría incluir el, el archivo bootstrap para el estilo general. Está bien, así que de nuevo dirán link rel stylesheet que había pasado por disparidad en césped es igual a. Y oh, en realidad, me acabo de dar cuenta de que tenemos todo el eslabón. Entonces déjame pegarle disculpas. No me di cuenta que teníamos todo el enlace. Pensé que solo eran la URL. Entonces ven aquí es la misma etiqueta de enlace, solo un poco más grande. Entonces tenemos el HRF es igual a esa referencia CDN, ¿verdad? Una vez más, si no tienes o no tendrás conexión a internet consistente mientras construyes y pruebas, siempre puedes obtener ese archivo, guardarlo localmente y seguir el mismo procedimiento como lo que hicimos por nosotros o hoja de datos de bajo costo. Entonces obtienes la CDN, tienes la hoja de estilo rel, y luego tenemos algunas otras cosas de esta bandera de integridad, que básicamente usa como cadena codificada para ayudarnos o ayudar a los boroughs o para camión al borde encendido, fuera del archivo para asegurarse de que se trata un cinco legítimo porque hay gente ahí que pondrá archivos maliciosos en servidores CDN y luego anunciará, Oh sí, tú obtienes el Archivo bootstrap Javascript, pero entonces el código de integridad no coincide con el dado por el distribuidor original. Por lo que entonces se invitaría. Entonces eso es lo que esa comprobación de integridad es una especie de ello y el origen cruzado solo significa que se puede acceder desde diferentes recursos se cruzan por internet. Entonces no hay necesidad de cambiar esto, lo que sea que nos dieron, lo usamos ¿verdad? Y estos son generalmente importantes para los enlaces CDN, razón por la cual se aseguraron de darnos. Entonces el otro sería este paquete, los archivos JavaScript, para que podamos copiar eso también. Y sé que estoy recibiendo todo el guión. Entonces no necesito escribir mi propio archivo de script, así que aún tengo el CDN para jQuery comentó todo lo que haré es incluir este archivo JavaScript encima del jQuery por ejemplo. Para que ese archivo JavaScript ahí, no hay problema. Y luego tenemos otros guiones. Entonces orden, una vez más, siempre importa si tienes algo que depende de jQuery, jQuery necesita proceder con él. Entonces estoy diciendo que porque en versiones anteriores de Bootstrap, bootstrap 4, En realidad ha tenido una dependencia jQuery es si nos fijamos en el paquete o las partes de JavaScript que se van a insertar, verías el archivo jQuery siendo referenciado arriba. El archivo bootstrap. Eso se debe a que el Bootstrap JS tenía dependencias en el archivo jQuery. De la misma manera que nuestro archivo de script tiene dependencias en el archivo jQuery. Entonces jQuery tiene que venir primero, luego el nuestro. En Bootstrap 5, sin embargo, han desplazado de jQuery a un punto donde solo necesitan un archivo JavaScript. Y así es todo lo que necesitamos. Por lo que puede venir antes que el jQuery. Ahora que hemos hecho todas esas inclusiones, echemos un vistazo. No voy a cambiar más código. Después la división en hojas de estilo y el guión. Y yo sólo voy a pasar a la página del índice para que podamos echarle un vistazo. Y si con mucho cuidado, notarías ligeras diferencias con los botones. Deja los enlaces diferentes con solo poner en ese archivo CSS, ciertas cosas han cambiado. De acuerdo, así que una vez más, ese archivo CSS tiene bastantes estilos que cubren una amplia gama de cosas que tienen algunos textos por defecto que realmente buenas fuentes por defecto más bien tienen algunos colores por defecto son realmente se ven bien. Y sólo por poner en Bootstrap, es un cambiador de juego fuera del bate. Entonces si comparo casa con los dedos de un barco, entonces vas a ver, vale, Es de vuelta a nuestro estilo regular. Entonces por supuesto, hay otro refinamiento sobre la OMS esta página luce en comparación con las otras. Si bien seguimos en el tema de Bootstrap, también vamos a empezar a echar un vistazo al general Lee, ¿verdad? Por lo que te habrías dado cuenta de que la página está estirando el contenido de la página más bien nos está estirando muy izquierda y en la medida de lo posible. Eso lo indica claramente un todo despedido este lo que era este granate pero gemido, OMS muy a lo largo de la página puntos se extiende porque todo lo que hicimos fue establecer este texto. Pero etiquetas H, p tags, un div, ciertas etiquetas que siempre irán tan lejos a través de cualquier contenedor en el que estén lo más posible. No, esa es la palabra clave contenedores porque lo que pasa es que no hay molesto de que realmente sigas menos que tengan contenido llenándolo hasta el borde. Pero en términos generales, dejan un pequeño margen a la izquierda y un pequeño margen a la derecha. Pero no estiro extremadamente izquierda y a la derecha fuera de ciertos sitios web, ¿verdad? Entonces con Bootstrap, es bastante fácil lograr algo así. Entonces vamos a ver un nuevo elemento y se llama div. Un div realmente no representa nada, pero solo lo pienso como divisor, ¿verdad? Entonces un div sería como caja. Por lo que div generalmente se estira tan lejos a la izquierda, tan lejos como sea posible a la derecha. Lo bueno de esto sin embargo, es que en realidad se puede dictar la longitud y el ancho, la altura y el ancho de un div o la altura suele estar determinada por el contenido que poner en él más bien, y el ancho se puede determinar eso. Y luego puedes usar estos divs o cajas de contenido y pegarlos uno al lado del otro, debajo uno del otro y manipular cómo quieres que se muestren los datos. Por lo que en términos generales, con los diseños de sitios web, tendrías un div, llamarías a un contenedor o a una envoltura que todo en el pH suele ir dentro de. Entonces llamemos a este uno div id es igual a contenedor. En este punto es muy, muy importante usar IDs. Funcionará, pero es mucho más fácil de leer. Cuando usas ID, el nuevo mero DFS entonces cuando no lo haces, porque entonces cuando tienes divs en divs en dibs en devs, devs, etcétera. Ahora no sabes qué div es para lo que la ID te puede ayudar a decir que vivimos es para el agua, ¿verdad? Por lo que dentro del contenedor, generalmente tienes una sección para la barra de navegación. Entonces solo voy a decir div id es igual a cool. Y dije que es más fácil y luego tengo div, id es igual a causar debajo de la barra de navegación, por lo general tienen el contenido, así que solo diré contenido, ¿no? Y entonces tal vez tendría otro que diga div, id es igual a Footer. Ahí es donde pongo soy una información de copyright , ese tipo de cosas. Por lo que en términos generales, un sitio web o una página web más bien tiene tres secciones. El NAV, el contenido, y el pie de página. Por supuesto, puede agregar más porque entonces cuando quieras lado a lado usando el contenido o columnas lado a lado en el contenido que puedes agregar más detalles según necesites. Pero por ahora lo mantendremos muy sencillo. Entonces voy a tomar mi barra de navegación y poner el interior del div llamado nav. Y luego me voy a llevar todo lo que supuestamente era son contenido de citas sin cotización. Voy a tomar todo eso y poner dentro del div contenido, ¿verdad? Ninguna sangría ayuda a la legibilidad también. Entonces siempre estoy, siempre me vas a ver una especie de sangrar mi código para asegurarme de que pueda ver por dónde empieza uno y donde se detiene lo que se puso dentro de él. Muy bien, entonces div para el nav. Enlaces de navegación. Está bien, déjame ponerlos uno al lado del otro. Por lo que tengo mis enlaces de navegación y luego tengo título y todos los contenidos dentro del contenido. Y luego aquí abajo sólo voy a decir que este es el pie de página. ¿ Verdad? Ahora cuando miro hacia atrás a la página, nada cambia. Leer, todo parece igual. Entonces divs no realmente, no pones en el xylem mágicamente consigue estructura. Es realmente por tu estructuración y tu propia habilidad manipuladora, ¿verdad? Entonces si quería el contenedor no fuera tan ancho como el pH, fácilmente podía ver estilo y ya lo hicimos. Por qué no usamos la hoja de estilo en línea porque entonces la estructura va a tener que estirarse a través de múltiples páginas y sería ineficiente usar la guía de estilo directamente dentro de aquí, pero nosotros estará mirando eso es suficiente para entender, para mostrar lo que sucede cuando se lo diga a 800 píxeles. Por 800 píxeles significaría que sea cual sea tu tamaño de pantalla o tu resolución a la vez, es bueno tomar hasta 800 píxeles de izquierda a derecha de eso. Y por eso ves a esa espina dorsal granate cortando. Entonces para mí, aquí es donde son 100 pixeles paradas en la pantalla que estoy usando. ¿ Todo bien? O si no lo quisieras, eso estrictamente podría decir el 80 por ciento, cierto. Entonces porcentaje significa que no conozco el tamaño de la pantalla. Y aquí es donde comienzas a hablar de diseño web responsive, cual Bootstrap está en pleno apoyo. Cuando se inicia todo el porcentaje de Humboldt, significa cualquier tamaño de pantalla en el que estoy, trataré de ocupar el 80 por ciento de eso. Por lo que el 80 por ciento en mi pantalla puede verse diferente al 80 por ciento en su pantalla. De lo que siempre serás 80 por ciento respecto al tamaño de la pantalla. Ahora lo siguiente es que querrías un margen a la izquierda. Y una vez más, estas son cosas que los desarrolladores web siempre hacen cuando empiezan a diseñar sitios web. Siempre hacen estos pequeños trucos para que la estructura sea correcta y así sucesivamente. Y entonces eso es entre mucho tiempo dedicado rehacer esta actividad porque el número tendría que hacer esto, un estilo, al menos en mi hoja de estilo y luego asegurarme que refleje en todas las páginas. No es algo bueno de Bootstrap es que viene con unas clases preestablecidas. Puedo decir que kras es igual y sólo voy a decir contenedor. ¿ Está bien? No, contenedor. Puede encontrar documentación para contenedor en la documentación de Bootstrap. Está bien, así que si miras en los docs y luego verás cómo empezar inicialmente esperaba configurar adicional. Eres básicamente viejo cuerpo helloworld, todas estas cosas maravillosas. Pero en el, déjame ver si puedo encontrarlo ahora. Y solo te voy a mostrar mi tratando de encontrar esto para que puedas encontrar maquetación y contenedores. Ahí vamos. Y tener una clase llamada contenedor establecería un ancho máximo en cada punto de ruptura sensible, decir, con solo usar contenedor, evaluará el tamaño de la pantalla y centrará automáticamente la línea y márgenes en lo que sea que pongas dentro del div que dijiste es el contenedor, ¿verdad? Y te dan ejemplos de código. Por lo que diferentes tamaños de pantalla nuevamente dicen que es un contenedor para nuestra pequeña pantalla dice un contenedor para este contenedor para eso. Pero sin especificar el tamaño, ¿sólo será un contenedor a través del tablero? No, solo agregando contenedor, mira lo que sucede. Creo que esto es probablemente más como 60 o el 70 por ciento de la pantalla. De lo que estoy obteniendo márgenes de cualquier lado solo haciendo referencia a esa clase llamada contenedor. Está bien, así que como para mi título, cada uno título, me voy a quitar eso. No dejo que mi estilo personalizado que mi ruibarbo crezca más. Quiero usar un estilos Bootstrap. Entonces voy a decir que la clase es igual a, y creo que tienen uno llamado jumbotron. Y sólo haciendo eso, oh, bueno, no pasó nada. Y creo que eso es porque jumbotron es realmente de versión 4.6 mientras estamos en la versión 5. Entonces mi botón, sigo viviendo en el pasado, no hay problema. Pero una vez más, por eso la documentación es tan cool. Siempre puede ir aquí y ver cuáles son tus opciones. Tan correcto. No, estoy en el documento. Estoy mirando la tipografía sobre el contenido, y estoy viendo las diferentes clases de display. Entonces digamos mostrar uno. Esa es la clase que voy a usar inserto de jumbotron. Entonces digamos que la clase es igual a mostrar uno. Fui a bucketed. puede ver que es significativamente más grande de lo que era antes, ¿verdad? siempre puedas ir y venir a la documentación y ver qué opciones están jugando con ellas y ver qué puedes lograr. Ahora, bootstrap es una vez más gran framework, por lo que es bueno tener una buena base en CSS, al menos apreciar todos los selectores se llamaron los valores funcionan. ¿ Qué tipo de elementos en HTML pueden tomar? ¿ Qué tipo de estilos son un entendimiento algo general de eso. Y luego con Bootstrap, puedes construir a partir de ese conocimiento. Y en realidad solo juega por ahí si necesitas lograr algo e ir lo que es una documentación y miras a través de veces literalmente tengo una idea y no sé cómo lograrla. Voy aquí y hago click en hasta ver algo que es útil. Entonces hablemos de los botones para que no te aburra demasiado, pero veamos los botones y el enlace. Y si quisiéramos tipo de modificarlos para que veamos que se modificó DEAP por defecto. Pero luego con Bootstrap, tenemos diferentes estilos de botones que podemos aplicar. Entonces se ve el botón, voy a decir fea ahora mismo. ¿ Y si quisiera que se viera un poco más bonita? Si yo quería un botón rojo y lo primero que dices BTN, entonces dices BTN dash, y luego qué tipo de lo que quieres. Por lo que tienen diferentes esquemas de color, tipo de dolor incorporado y solo tienes que ir a componentes, ir a Botones y verás las diferentes opciones de botones. Todo lo que necesitas hacer, clase es igual a btn y btn dash ese tipo de qué matiz quieres. Un botón azul que es primario. Esto es secundario, por lo que existe peligro, etcétera, etcétera. Entonces voy a tratar de jugar con estos. Entonces clase primaria, fui a este. Veamos peligro. Yo quiero nuestros botones rojos, es peligro. Y quiero que éste sea un botón oscuro, ¿verdad? No hay razón en particular. Solo estoy jugando con mis opciones. Entonces cuando voy veo que éste es primario, éste es peligro, y éste está oscuro. No es fácil, ¿verdad? Si quería cambiar de oscuro a verde, sólo lo cambio al éxito. Está bien, así que una vez más, esto es algo que puede no comprometerse con la memoria. Llevo años haciendo esto. Estoy cómodo, pero aún termino en la documentación y no estoy seguro. Entonces esto es algo con lo que tienes que jugar y explorar. Entonces si quería que mi enlace, que es esa etiqueta de anclaje, pareciera un botón, en realidad puedo hacer lo mismo. En realidad sólo puedo ver btn, btn dash. Y digamos que quería que éste fuera secundario, ¿verdad? Entonces eso significa que debe ser un tono de verde. Ahí vamos. Amazon no es sombra de gris. Por lo que alguien viniendo a tu página web nunca miraría esto realmente. Un ruido, sólo una etiqueta de ancla, negro en la barra de navegación. Es claramente sólo un montón de etiquetas de anclaje, pero esto también es una etiqueta de anclaje y estos son botones y la carga de la misma manera. Y si quiero que un botón parezca una etiqueta de ancla, puedo decir BTN dash link. Y mira eso. No camarilla me parece una etiqueta de ancla, así que solo te estoy mostrando que con un esfuerzo muy mínimo, puedes manipular tu contenido bastante facilidad usando Bootstrap. sólo poner la clase de contenedor en este contenedor div. Transformó el look y sensación con sólo poner en el CSS, transforma el look y la sensación. Entonces antes de irnos, sólo voy a tratar de aplicar algún estilo agradable a los conductores. Entonces, en primer lugar, todas las páginas deben tener la misma estructura. Entonces lo que voy a hacer es copiar los nuevos divs que creé y los voy a pegar en cada página. Y luego dentro del área de contenido, solo voy a reemplazar ese contenido por lo que estaba en la playa. Entonces ya tengo el nav, así que no necesito repetir que se alimenta con las perillas. Puedo quitar el nav en la página del barco, pero todo lo que estaba en ese pij barco, no voy a cortar y lo voy a pegar dentro del área de contenido. Está bien, una vez más, recuerda sangrar en todo momento para que puedas ver dónde empieza y se detiene el contenido. Y yo voy a hacer lo mismo con nuestra página de contacto. Entonces pega, quita el área de navegación, y luego marca este contenido atrapado y pega dentro del div contenido. Muy bien, entonces ahora todo el mundo tiene la misma estructura de página. No obstante, cuando lo miramos, no vemos diferencia. Literalmente no hay diferencia. Todo sigue igual. La única diferencia es que no, hay un área de pie de página. Está bien. ¿ Cómo hacemos que todos se vean iguales en cuanto al nodo, una mirada tangible y se sientan bien, todos ellos necesitan tener el archivo CSS para uno. Entonces vamos a poner en ese archivo CSS y la página de boletines, ponerlo en la página Contáctenos. Ahí vamos. Y por supuesto necesitamos nuestro archivo JavaScript. Entonces sólo voy a copiar esa referencia de las Escrituras. Por lo que cada página que necesita hacer referencia a bootstrap necesita tener estos dos archivos siendo referenciados. Está bien, entonces después de hacer todo eso, si miramos hacia atrás a nuestro pH, vemos que no, el contenedor está funcionando. Está bien, y vemos que esa fuente se ve un poco diferente. Y Navbar se ve diferente. Y entonces hasta la forma se ve un poco diferente, se ve un poco más limpia. Está bien, entonces bootstrap tiene algunas cosas geniales que son formas? Hay algunas cruces geniales que puedes usar hasta ahora. Entonces así es como puede verse tu forma potencialmente con incluso el flotante y todas esas cosas maravillosas. Es tan fácil como ver formar nuestra clase, mientras que una clase es igual al control de forma. Entonces voy a decir probabilidades crudas es igual etiqueta de forma para la etiqueta y Krazy va control de forma para el control. Entonces intentemos eso. Entonces al contactarnos, vamos a decir al sistema operativo es igual al control de forma. Y solo voy a hacer eso a través de todos los controles de formulario en primer lugar. Y luego solo ves la diferencia automáticamente mira eso. Está bien, se ve mucho mejor en mi opinión. Y entonces tenemos este feo botón. Déjenme este barco feo y bonito así clase es igual a btn y suelo enviar botones Me gusta verde o algo para indicar M y estás bien para ir. Entonces empiecen este btn-éxito. Está bien, y con un esfuerzo muy mínimo, has peinado nuestro formulario si queríamos que el botón fuera más grande o buscarlo justo a través de como segundos lo bloquean btn, derecha, entonces se estirará derecha a través de la tabla de páginas. O eso no funcionó. Déjame revisar mi documentación. Y en la documentación, dice que necesitamos botones de bloque. La sintaxis necesita verse así. Está bien, una vez más, estoy viviendo en el pasado como Bootstrap 4, así que no hay problema para revisar la documentación y seguir adelante. Muy bien, así que hagamos eso con nuestros botones. Entonces solo estoy, literalmente acabo de copiar esto desde el sitio de Bootstrap, pero obviamente no necesito todo este código. Todo lo que necesito es mi botón de entrada dentro de esta área. Y luego necesito asegurarme de que estoy usando las mismas clases. Entonces si vuelvo a mi Enviar consulta, es un todo BTN bloques, puedo quitar el código de exceso. Entonces a veces eso es lo que hago. Mientras he estado en esto. Simplemente voy a conseguir la muestra reajustada a lo que necesito para luego retirar el exceso. Y ahí vamos, tenemos nuestro botón de bloqueo. Entonces solo para mostrarte lo fácil que es manipular tu página web. Una vez que estás mirando la documentación en Bootstrap, tienes una buena comprensión de todos los CSS en el trabajo de las clases. Y luego solo puedes aplicar el código a tu archivo HTML en consecuencia. Ahora lo último que quería señalar antes de irnos es el zorro que a pesar de que tenemos Bootstrap, y Bootstrap claramente tiene el suyo propio, digamos citar y citar agenda sin cita para lo que el El pH debe verse así. Te darías cuenta de que nuestros estilos siguen prevaleciendo. Entonces, una vez más, el orden importa cuando se trata de tus archivos, es decir, CSS y tus archivos de script, ¿verdad? A pesar de poner a Bootstrap en primer lugar, siempre podemos anular ciertos estilos usando nuestro propio archivo CSS. Entonces si Bootstrap no tiene un botón morado o no te gustó la ceniza, cierto tono de un color que usa Bootstrap. Siempre puedes ir a tu clase de pila, C, cualquiera que sea la clase que quieras abordar y decir si quería abordar ese BTN, solo puedo decir dot btn y luego poner mis propios estilos. Y entonces en realidad anularía el estilo de punto BTN dentro del archivo bootstrap. Por lo que es fácil de poner en tu propia agenda junto al archivo bootstrap. Entonces esa es otra introducción rápida y sucia a Bootstrap. medida que avancemos y nuestras necesidades se hagan mayores, veremos cómo Bootstrap realmente nos ayuda como herramienta de productividad para pasar ciertas tareas meniales en cuanto al diseño de la interfaz de usuario y ponernos en marcha. Entonces después de esto, vamos a ver cómo podemos publicar nuestro sitio web en GitHub y luego por extensión en Internet. 19. Añadir sitio web a GitHub: Muy bien chicos, Entonces en este punto hemos mirado cómo podemos desarrollar un conjunto web básico, estático pero básico y usando HTML, CSS, y JavaScript. Por lo que también has echado un vistazo a los frameworks en JavaScript y CSS en forma de jQuery y Bootstrap. Entonces en este punto conoces los conceptos básicos, tienes una comprensión general de cómo crear nuevos archivos hold para vincularlos. Hold para enlazar a otros sitios web. Hotel poniendo tus imágenes sostienen para darle estilo a todas esas cosas. La única forma real en que crecerás es si trabajas por tu cuenta y exploras. Por lo que eso es primordial para tu desarrollo como desarrollador web. Ahora lo estamos dando un paso adelante y estamos mirando a GitHub. Conoce github es una herramienta de código abierto utilizada por millones de personas, nuestra, el mundo. Y lo usan realmente para almacenar sus proyectos así como los colaboradores con otros desarrolladores. Por lo que crea una bonita plataforma para que pongas tu código para realmente rastrear todos los cambios que estás haciendo a tu código. Porque lo que pasa es que puedes venir mañana un hacer un cambio y luego te pierdes algo, y luego sí recuerdas lo que cambiaste o por qué lo cambiaste. Y es difícil deshacer todo. Tan buen trabajo y herramientas de gestión de control de fuentes como GitHub porque hay otras. Pero este tipo de herramientas te ayudan a hacer un seguimiento de todos los cambios que están realizando tú y tus compañeros de equipo a un proyecto en particular y todo enviar es muy fácil. En primer lugar, vas a Github.com, pones en tu dirección de correo electrónico, te registras. Creo que probablemente tengas que verificar tus conos y esas cosas, pero una vez que haces eso , tienes una cuenta , es gratuita al menos en un nivel básico es gratis y es fácil conseguir comenzó. Entonces en esta lección, lo que vamos a estar haciendo es conseguir nuestro proyecto web en GitHub. Y luego solo exploraremos y seguirá whoa, nos ayuda a hacer un seguimiento de dónde los cambios a medida que avanzamos. Ahora esta es mi cuenta de GitHub, y puedes ver que está bastante activa fuera de bastantes proyectos y está abierta. Puedes saltar a mi perfil si lo necesitas y mirar algo. Tengo estudiantes de todas las demás personas colaborando y puedo ver todas las actualizaciones ocurriendo en tiempo real en todo. Pero por ahora, centrémonos en crear un nuevo repositorio para nuestra página web. Por lo que solo tienes que hacer clic en ese nuevo botón, crear nuevo repositorio. Voy a decir sitio web de prueba. Está bien. Puedes llamarlo mi nuevo molesto, sea lo que sea, es solo un contenedor es Es solo ver cuál es el nombre del proyecto. Déjame crear un contenedor con ese nombre para este proyecto, puedes poner en una descripción, está bien, y puedes hacerlo público o privado. Voy a hacer mi propio privado. Pero si quieres compartirlo con otros porque ciertas personas o firmas que quisieran contratarte realmente les encanta ver que tendrás un perfil activo de GitHub. Para que sepas que tienes un proyecto, trabajas en él, lo pones en GitHub. Puedes hacerlo público y puedes compartir fácilmente esa URL con alguien y que sepa, podrías terminar ayudando a otras personas con tu código. Para más empeños privados ley, si estás trabajando en algo que es grave, todos querrían hacerlo privado para que no sea públicamente accesible a la gente. Estoy haciendo mi propio privado, pero siéntete libre de hacer tu como público para que puedas mostrarle tus amigos y a tu familia a medida que avanza. Entonces, después de elegir las opciones de visibilidad, realmente no necesitas hacer nada más, pero solo puedes hacer clic en Crear repositorio. Conoce una vez que se crea el repositorio, obtienes ese espacio de prueba. A diferencia del ácido, de nuevo, esa URL que pueden compartir con la gente. Si es público, pueden navegar bien si está extendido, pero entonces hay que invitarlos especialmente a verlo. Si así lo deseas. Hay una serie de formas de obtener tu código de tu máquina a GitHub. Una, puedes seguir adelante y hacerlo por una línea de comando y el tipo de manualmente, puedes empujar un repositorio existente, es decir, si lo tenías en otro lugar, R y otro código abierto plataforma o plataforma de control de fuentes más bien, también podrías simplemente copiarlo. Y luego se puede importar de algo que no se llega a relacionarlo en absoluto. Entonces GitHub, Git es el protocolo, get es la tecnología detrás de GitHub. Y tienes otro tipo de tecnologías que brindan servicios similares como platas en el corral y Team Foundation Server. Muy bien, lo que estamos usando. Entonces con Visual Studio Code, es, es muy fácil, al menos en tiempos más recientes, porque en realidad puedes simplemente copiar esta URL y luego ir a Visual Studio Code y hacerle saber que este es tu Repositorio de Git. Fuera de eso sin embargo, si no estás usando Visual Studio Code, también puedes usar el escritorio. Por lo que puedes hacer clic en configuración en escritorio y te traería descargar la herramienta de escritorio si aún no la tienes. En realidad lo tengo. Y en realidad se ve algo así. Entonces este es otro proyecto que estoy viendo ahora mismo. Pero lo que hace, me da esta bonita interfaz de usuario. No tengo que escribir ningún comando ni nada. Tengo una interfaz. Y puedo ver todos los cambios que están pendientes y puedo comprometerme, lo que significa que puedo empujar de mi máquina a GitHub at-will. Puedo tirar hacia abajo los cambios. Entonces cuando estás trabajando en equipo, Digamos que vomites, estabas construyendo este sitio web. Una persona trabajó en la página de inicio en otra y arriba ambos en otra, en el contacto. O tal vez una persona que debía integrar bootstrap o descargar los archivos Bootstrap y poner en el proyecto y no lo han comprometido. Y lo necesitas para continuar con tu trabajo, entonces solo puedes hacer clic en pull y se iría automáticamente, automáticamente y conseguiría cualquier cosa que sea nueva en GitHub que no tengas ya en tu máquina y actualizar automáticamente sus archivos en la máquina. Por lo que es una gran manera de mantenerte sincronizado una vez más con los miembros de tu equipo. Entonces sigamos adelante y llevemos este sitio web de nuestra computadora y a GitHub por lo menos en este momento propósitos Baco, ya que somos el único desarrollador en el proyecto, ¿no? Entonces vamos a volver a Visual Studio Code. Vamos a dar clic a esta pestaña de Control de fuentes aquí mismo. Por lo que hemos explorado la búsqueda y el control de fuentes. Y lo que haremos es inicializar repositorio. Podría que me pidieran que necesitas instalar Git localmente en tu máquina. Porque lo que sucede es que git es un control de monitoreo de fuentes distribuidas, lo que significa que vas a tener tu propio control de administración de fuentes en tu máquina, pero también puedes sincronizarte con nuestro repositorio remoto. Y si cumples 510 cambios en tu máquina y mantienen conos más cortos cuando obtienes conexión a internet, entonces puedes sincronizarte con el remoto. Y en realidad obtendría todos los puntos de control históricos que tienes en tu máquina y sincronizaría. Entonces ese es el polar de kit. Entonces cuando hacemos clic en eso y decimos inicializar repositorio, Tendrías que poner un mensaje. Entonces soy mensaje Asientos de casa y todos caminaron este chicanos o ambos. Entonces voy a decir compromiso inicial, ¿verdad? Me vas a escuchar decir pollo incompetente tipo de indistintamente porque he usado dos Team Foundation Server donde la nomenclatura vería check-in, lo que realmente son iguales cosa. Entonces después de eso fui a esta garrapata que dice comprometer. Y entonces sólo me preguntará saber Steve cambia y enseñar los cambios. ¿ Te gustaría escenificar y luego compromete y voy a decir que sí, adelante. Y luego después de que se haga eso, creó el repositorio local. Entonces si miro hacia atrás en el Explorador de Archivos, si hago algún cambio en los archivos aquí mismo, entonces se va a empezar automáticamente a camiones para decir, vale, la página del barco ha sido modificada y En realidad puedo quedarme con cambios constantes. Puedo abrir los cambios. Puedo ver exactamente lo que se modificó entre los dos archivos. No fue una modificación significativa, pero digamos que había puesto un nuevo bloque de texto. Está bien, y luego digo, está bien, déjame abrir los cambios entonces me va a mostrar que esta línea fue modificada. Ese es un texto nuevo. Entonces eso es lo que la fuente controlada trae a esta ecuación. Entonces sólo voy a quitar el exceso. Eso realmente no importa. Lo que quiero hacer saber sin embargo, es sincronizarlo con lo que hay en Internet o con GitHub, ¿verdad? Por lo que al hacer clic en esas tres flechas, puedo desplazarme hacia abajo a esta parte que dice remoto y luego agregar remoto. Y dice add remote from GitHub, ¿verdad? Entonces tengo dos opciones. Puedo hacer clic en eso o simplemente puedo saltar nuevo a mi repositorio de GitHub. Consigue este enlace, solo copia eso. Y luego vuelve a Visual Studio Code siempre que esa URL, presiona Enter, right, y luego quita Nim. En términos generales, verás que la gente llama en el primer origen remoto o mezquita o algo que yo sólo lo llamo su origen. Presiona Enter y luego no, me está impulsando. ¿ Te gustaría ejecutar periódicamente git fetch? Entonces eso significa lo que me gusta monitorear periódicamente el repositorio de informes para detectar potencialmente cualquier cambio. Entonces Fetch vería que tienes estos cambios pendientes, lo que significa que son estos cambios en GitHub pero no los tienes en tu máquina, entonces pull me permitiría conseguirlos. Por lo que acabamos de ver todo un pool funcionaría en la versión de escritorio. Entonces voy a decir Sí, me gustaría ejecutar recuperaciones periódicas ¿verdad? Ahora después de haber hecho eso, puedo saber empujar al repositorio remoto es que puedo hacer clic derecho en eso y decir tirar, empujar o no hacer clic radicalmente en los tres puntos. Yo puedo hacer jalar, puedo hacer empuje. Y si vengo aquí como un pull push, puedo hacer una sincronización. Entonces automáticamente empujaría lo nuevo de mí al repositorio y plu qué hay de nuevo de ahí para mí, ¿verdad? Por lo que automáticamente hace esas dos cosas. Entonces si solo digo Sync, diría que no tengo aguas arriba. ¿ Te gustaría publicar esta sucursal, voy a decir que está bien. Entonces es sólo un gueto estaba vacío pero tengo contenido. ¿ Te gustaría empujar el contenido, solo una confirmación. Entonces después de que se haga eso, si actualizo mi página de GitHub, no, veo todos mis archivos en GitHub en este repositorio, ¿verdad? Una vez más, esto está disponible para su visualización pública si es necesario. Pero si no, eso está bien. Pero puedes ver todos tus archivos y todo. Entonces digamos que no, que creé una nueva página. Por lo que creé una nueva página y llamo a este post. Buen trabajo. HTML de punto de carga útil, ¿verdad? Cada una página, bien, eso es todo lo que va a tener esta página. No hay problema. Por lo que en este punto verás que está resaltado verde. Significa que está en comprometido, lo que significa que es nuevo, ¿verdad? Entonces si hago clic en el control fuente va a estar ahí S cambios. Puedo ingresar mi mensaje y vamos a modificarlo una de las páginas, cualquier cambio o cambio o el contenido o a contenido existente, agregando algo nuevo. Entonces si agrego una línea más off, mostrar imagen en las velocidades orbitales, Eso es un cambio que vas a ver siendo rastreado. Por lo que siempre está rastreando los cambios que estás haciendo para que puedas tener rendición de cuentas porque entonces tal vez 23 versiones en la línea, algo deja de funcionar. En realidad puede retroceder a este punto en el tiempo antes de que hicieras ese cambio. A ver, esta es la versión desde la que fui a seguir trabajando. Entonces vamos a comprometer esto localmente. Por lo que sólo voy a hacer clic en la garrapata. No hay etapa las ediciones Fan dice que sí o puedo decir siempre solo para deshacerse de ese mensaje y luego saber que está comprometido localmente. Yo quería en el mando a distancia, solo hacer una sincronización, algunos sincronizando todos los commits entre los dos lados. Y después de eso, pequeñas barras azules no. Si vuelvo a mi repositorio y refresco, entonces voy a empezar a ver cambios, ¿verdad? Por lo que hace 20 segundos, se envió este commit. Está bien, así que si hago clic en añadí más archivos en él, entonces me muestra una sinopsis de todos los cambios realizados al archivo existente así como de lo que se agregó. Por lo que una vez más, es una herramienta muy poderosa. Podrás invitar a colaboradores. Si tú y tus amigos o compañeros necesitan trabajar en algo juntos, él puede ir a la configuración o al repositorio e ir a Administrar acceso. Y luego tienes que confirmar tu contraseña. Pero después de que hagas eso, entonces podrás invitar a un colaborador. Entonces si tienes un colega que también está en GitHub y quieres trabajar con ellos en este proyecto en particular, solo tienes que seguir adelante y poner alguna de estas opciones, encuéntralas, envíales la invitación era que aceptaran, entonces este repositorio también formará parte de su ejército fuera de los repositorios. Pueden hacer commits y empujar y tirar al igual que tú en ese momento. Entonces eso es todo lo que GitHub trabaja como herramienta de colaboración. Ahora después de esto, te voy a mostrar cómo también nos ayuda a publicar nuestro sitio web tranquilamente y de forma gratuita utilizando otra plataforma llamada Netlify. 20. Crea sitios web públicos con Netlify: Muy bien chicos, bienvenidos de nuevo. Por lo que estamos pasando al siguiente reto, que es publicar o sitio web a internet para que el mundo lo vea. Entonces lo que estaremos haciendo que usando eso hasta la final Netlify es una plataforma maravillosamente estable que nos permite hacer bastantes cosas de forma gratuita. Y creo que es un gran comienzo para ver cómo tu obra se puede poner fácilmente en Internet y publicar con un esfuerzo muy mínimo. Lo primero va a Netlify.com. Y entonces querrías apuntarte si no tienes ya un oponente, que a estas alturas, si no lo haces, eso sería comprensible. Ya lo hago es que solo puedo iniciar sesión en mi cuenta. Y ven aquí que tengo cuan pocos sitios web entre proyectos personales y proyectos de estudiantes, pero sí tengo una serie de proyectos inicialmente en casa y él construyó minutos. Tienes cuántos miembros si quieres colaborar. Y entonces por supuesto, por poco, un poco de dinero, puedo empezar a sumar en diferentes características a tu, tu ejército de tu suite de herramientas más bien. Entonces vamos a saltar a un nuevo sitio de get CEO fácil. Eso es nuevo sitio de bueno. Así que simplemente miramos a Get Hub y luego permiten el despliegue continuo de GitHub, GitHub y Bitbucket. Por lo que el despliegue continuo significa que estoy haciendo cambios en el sitio web y lo estoy llevando a nucleófilos de Github monitoreando este repositorio de GitHub y automáticamente yendo adelante y publicándolo. Por lo que en realidad reduce la cantidad de tiempo entre hacer un cambio y tener que ir a actualizar el sitio web. Todo lo que tienes que hacer es revisarlo en GitHub y Netlify hará el resto. Entonces para la publicación inicial, claro que tenemos que conectarla a GitHub. Entonces una vez que haga eso, me autorizará porque ya me conoce, pero quizá tengas que hacer algunos otros pasos. Entonces llego a elegir cuál de estos repositorios. Y estoy tratando de recordar lo que llamé mío y fueron sitios web de prueba. Simplemente puedo seguir adelante y golpear prueba flip side branch para desplegar. Lo dejamos arriba maestro y dejamos todo como está y desplegamos sitio. Ahora recuerda, desde el primer día que dije, va a hacer mucho más fácil la vida cuando quieras usar minúsculas en todos tus nombres de archivo y usar el índice de palabras para nombrar tu primer discurso, lo que sea que tu página de inicio necesite ser siempre debe ser índice. Aquí te mostramos una. Netlify va a buscar automáticamente index.html o índice. Bueno, está hospedando sitios estáticos, así que index.html, si tu archivo no se nombra índice o tienes mayúsculas, reduce la probabilidad de que sea un despliegue exitoso en el primer objetivo. Por lo que seguir las mejores prácticas realmente están ahí. O el concepto de seguir las mejores prácticas está realmente ahí para protegerte y ahorrarte el tiempo y los esfuerzos de depurar algo que podría haberse evitado solo con un nombre adecuado convenciones, ¿verdad? Por lo que seguiré adelante y haré clic en Desplegar sitio. Y esto podría tardar unos minutos. Y una vez que eso esté hecho y es posible que tengas que actualizar la página unas cuantas veces solo para asegurarte de que no esté ya publicada, Antony, aún se está desplegando. Pero una vez que se despliega, ves que tienes una URL. Habían generado una URL aleatoria para ti, Eso es ni B. Siempre puedes configurar tu dominio personalizado. En qué punto tendrías que comprar un dominio, WW dot, ya sabes, mi nombre.com, ese tipo de dominio que tendrás que comprar realmente y puedes comprar seguridad también, ¿qué? De forma gratuita? Tienes una página web que está en Internet. Entonces si hago clic en esta URL, realidad va a mi sitio web asegurado por HTTPS. Y puedo navegar, ¿verdad? Y todo lo que tenía en el archivo web, los archivos CSS, los archivos JavaScript, las imágenes, todos esos no son publicados en Internet, ¿verdad? Entonces digamos que hice un cambio a mi página de inicio, ¿no? Entonces voy a hacer esta herramienta en tiempo real para que veas exactamente lo que quiero decir todo solo se racionaliza desde tus calles de máquinas hasta Internet. Por lo que quería ver el mundo Hola. Mi página web. Mi sitio web es nulo. Está bien, Esto toma claramente no está en la página en este momento. Entonces aquí está mi cambio. Yo hice ese cambio. Voy a decir página principal actualizada, ese es mi mensaje. Entonces los mensajes son importantes. Es importante ser descriptivo porque te ayudan en el futuro a saber, oh, esto es lo que hice esta vez frente a los miembros de tu equipo que apreciarán una sinopsis de los cambios que entró con este pollo. Entonces voy a hacer este compromiso, ¿verdad? Y una vez que haya hecho ese compromiso, entonces voy a empujar o dejarme simplemente empujar, tirar y hundir. Y yo sólo voy a estar bien, No vuelvas a aparecer porque ya sabes, esas indicaciones después de un tiempo, siguen diciendo lo mismo y otra vez. Pero una vez que haya hecho eso, sólo voy a saltar por encima, jaque mate mi trabajo rápidamente sólo para asegurarme. Está bien, y veo aquí solo 30 segundos o van, he actualizado la página de inicio, así que eso no es en GitHub. Si salto al panel de Netlify y refresco, entonces vas a ver que la última publicación fue 119 leída. Y si lo miras, despliega, ves que la primera implementación no tenía implementar un mensaje para la segunda implementación tiene el mismo mensaje que acabo de registrar en GitHub. De acuerdo, así que solo revisándolo en GitHub, Netlify lo supervisó, consiguió un cambio y no es publicarlo. Entonces si refresco el sitio web, Ahí está mi cambio vidas. Ya ves que todo lo que hay que hacer es actualizar mi archivo y comprometerse y luego sincronizarse con GitHub y se cuidó la muñeca. Así que esa es una forma agradable y fácil de poner en marcha tus sitios web estáticos. Ya sabes, entender HTML y CSS. Ya sabes usar jQuery analítico bootstrap. Por lo que puedes construir unos sitios web hermosos y nadie puede colaborar en ellos usando GitHub con bastante facilidad y para publicarlos Internet usando GitHub y Netlify con bastante facilidad. 21. Reorganizar una página inicio con Bootstrap Slider y diseño: Muy bien, así que ahora tenemos una clara comprensión de páginas enteras eran tema básico frío dentro de CSS y JavaScript, todas combinadas para usar una página dinámica. Hemos empujado a GitHub e incluso hemos publicado en Internet. Entonces esa fue una buena primera cuota. Ahora pongamos todo este conocimiento para usar y construir algo que sea factible, ¿verdad? Entonces vamos a estar construyendo vieja, mejor plantilla con algún contenido real usando Bootstrap. Entonces empecemos con modificar el encabezamiento o la parte superior. Lo que vemos en la tina de la madriguera que así ya sabemos que título es lo que realmente nos da la redacción, ¿no? Entonces mi primera página web, eso está bien. Tenemos nuestra hoja de estilo CSS, pero ¿qué doble entonces el icono que normalmente ves en el navegador, verdad? Entonces este pequeño ícono de aquí, porque no hay nada prisión hecho este punto, se llama ícono. Entonces en este sitio web, iconos, 8.com y puedes filtrar a iconos, luego iconos fav, solo puedo buscar iconos. Tendrán un montón de muestras. No digo que debas usar uno de estos porque esto generalmente podría funcionar o ser como un logotipo de empresa o algo más. Pero sólo voy a conseguir uno de estos que creo que es lo suficientemente cool y lo suficientemente general. Vamos con este código para que pueda descargar este ícono. Y me daría los diferentes tamaños que están disponibles. Por lo que generalmente para nuestro ícono fav, tienes el punto de extensión ICO, que es la abreviatura de icono. O en realidad puedes usar PSP y G's, ¿verdad? Por lo que sólo podemos seguir adelante y descargar este PNG. Y una vez que tengas ese archivo, conocemos las reglas sobre dónde Dina con imágenes. Queremos meter este archivo a nuestro proyecto en primer lugar, por lo que encontramos el archivo donde quiera que esté en nuestro sistema de archivos, y luego por favor la carpeta correspondiente, que será la carpeta IMG. Y luego por extensión, quiero asegurarme de que sea una palabra o un nombre que pueda identificar fácilmente. Entonces sólo voy a llamarlo un iPod, o podría haber sido local, lo que sea, ¿verdad? Si encuentras otra imagen, siempre y cuando sea isu o dot PNG, deberías estar bien. Entonces ahora que tengo este ícono fav en el hogar o en cualquier página para ese caso. Es decir, quiero que se muestre este ícono y empiece a escribir el enlace de código. Rel es igual a iconos es así que eso es tipo de que se parece al código CSS. Y luego toma un H ref es igual a, sé que fue apuntado a los iconos de fav, así que esto no sería barra, lo siento, imágenes, donde está, ¿ dónde está mi carpeta de imágenes? Img, discúlpate. Cortar favicon dot PNG, o cerrar esa etiqueta. Y solo con fines de vista previa, veámoslo en vivo servidor solo para ver cómo será nuestro tabú. A nombrar una mirada a eso, ¿verdad? Entonces este es el antes y el después. Esto fue antes. No dejes que esos pequeños documentos no, realidad empiezas a ver ese ícono. Entonces eso está bien, ¿verdad? Entonces eso es lo que se necesita para llegar a una imagen dentro de la parte superior. No, esa es una operación relativamente simple, pero sube a lo grande. Pasemos a otra cosa. Entonces configuremos una barra de navegación adecuada y estaremos usando el código Bootstrap para hacer esta barra de navegación. Por lo que para referencia, una vez más, puedes ir a Bootstrap. Estamos usando Bootstrap 5 y puedes consultar tu documentación en espera las barras de navego deben lucir así que si quieres buscar algo paso ghetto específico ahora, ves navbar y luego lo salta sin embargo y nos muestra las muestras. Entonces estas son todas las posibilidades. Puede conseguirlo navbar a casa, estos son los enlaces. Se puede obtener una búsqueda desplegable, ¿verdad? Puedes dejar que se vea en diferentes colores. Entonces esto está tratando de encontrar la parte donde los colores. Ahí vamos. Se puede conseguir lo oscuro, el tema azul. Está bien, eso es todo lo que realmente necesitas para hacerlo. Simplemente necesita cambiar esas clases. Entonces lo que voy a hacer es pedir prestada una de estas muestras y voy a mantenerla sencilla. Entonces voy a usar esta muestra aquí. Basta barra tres enlaces y el enlace desplegable. Entonces sólo voy a copiar eso. Muy bien, salta de nuevo a nuestro código y a toda esta sección que decía Ahora voy a reemplazar el código que estaba ahí y ver mucho más código. Pero es un poco sencillo en mi libro leído. Entonces esta parte de aquí que dice que ese es el remolcador, es un líquido de contenedor. Después se abre a una clase en rejillas fuera XOR con marca navbar clase. Y entonces aquí sería donde pondrías tal vez el nombre de los sitios web no sean un nombre de empresa, sea lo que sea. Entonces solo voy a decir mis sitios web porque eso es lo que es este sitio web. ¿ Está bien? Y luego tiene algunos otros botones, sermón de un hablado sobre diseño responsive. Entonces esta sección de botones aquí es por la razón si el pH se redimensiona hacia abajo para que le guste un tamaño de aplicación móvil, entonces Empezarías a ver pastillas pequeñas. Si alguna vez utilizas nuestros sitios web un redimensionarlo, ¿no? Ves esas pastillas lo suficiente comprando un boleto y luego la barra de navegación cae. No este bit de código hace eso para ti automáticamente, ¿verdad? Por lo que podemos previsualizar eso en unos pocos navbar colapsando. Eso también son algunos JavaScripts corriendo contra buck crecido para ayudar con la barra de navegación que viene y no lo hacen cuando se condensa entonces. Y luego tenemos nuestras etiquetas de anclaje. Entonces realmente no debería haber borrado el alcalóxido, Qué es saqueo de ellos en páginas diferentes. Por lo que la primera etiqueta de anclaje sería casa. Entonces solo estoy exponiendo ese código. Y aquí el H ref dice index.html, Es artistas es casa a modo de vista previa. Eso está bien. El siguiente tag de anclaje era para el perno. Entonces voy a cambiar este por barco. Entonces solo les estoy mostrando que no hay razón para preocuparse realmente por copiar y pegar. A veces es necesario. Pero al punto que estás copiando y pegando yo no estás entendiendo nodo ese es el problema. Por lo que queremos asegurarnos de que a pesar estamos tomando prestado el código de bootstrap, sabemos lo que estamos modificando porque están familiarizados y cómodos con esa cotización. Por lo que el siguiente sería contactar a alguien para cambiar esto de precio a contacto. Ahí vamos. Y luego para nuestro desplegable, quiero decir, esta es una buena muestra, así que solo voy a decir sitios externos, ¿verdad? Y por vista previa, uno podría ir a Amazon. Se podría ir a, creo, bueno, el enlace Amazon aquí abajo. Sí, sí lo hacemos. Por lo que podemos enlazar a cualquier cosa por demasiado en los enlaces externos. Estos son sólo para algunos de todos modos. Por lo que Amazon y esto podrían ser EB. Y entonces éste podría ser AliExpress o lo que sea, esas muestras. Para que puedas poner esas cosas si así lo deseas. Para la práctica. No hay problema. Los dejaré en blanco donde tengan el Amazonas, pero solo soy rutinariamente todos ellos. Todos esos para mostrar cómo sería la lista desplegable. Entonces eso es todo para la barra de navegación, eso somos nosotros tick vista previa de eso. Entonces sólo voy a saltar de nuevo al lado que ya estamos construyendo un comienzo viendo la diferencia, ya miré esa barra de navegación. Sepan que es un poco poco poco conspicuamente, es una especie de acuerdo. Como estaba diciendo, si cambias el tamaño de los sitios web, verías que suficiente por auto se condensa mágicamente y empezará a caer hueso para ti, ¿verdad? Todo eso, no escribimos mucho código para que eso sucediera. Eso es un poco fuera de las cajas bootstrap. No me gusta ese color en la barra de navegación va. Por lo que quería saltar de nuevo a mi documentación. Veo las diferentes opciones de color y realmente me gusta el tema oscuro. Entonces estas son las clases que necesito para conseguir el tema oscuro. Y te das cuenta de que si aún tienes otro color en mente, realidad puedes poner tu color personalizado usando el estilo en línea, ¿verdad? O puedes crear una nueva clase y anularla. Mira, puede usar el estilo en línea como se recomienda aquí. Aunque como sí quiero ese navbar dash Dark, BG dash dark. Entonces voy a saltar de nuevo a mi barra suficiente y es dash navbar, Light, BG dash. Deja que alguien reemplace eso por una variación oscura. Y ahí vamos. Eso empieza a verse un poco mejor a mis ojos. Entonces digamos que se pone bastante bar, agradable y fácil. Y entonces por supuesto, si tenemos la barra de navegación en el hogar, queremos la misma barra de navegación a través de las otras páginas. Alguien que sustituya todas las barras de navegación en todas las demás páginas por la nueva barra de navegación. ¿ Está bien? Entonces ahora cada página tiene la misma barra de navegación como nosotros hemos estado trabajando, y no es nueva y mejorada. Entonces ese es excelente trabajo. Ahora una cosa más que quería señalar, pusimos la barra de navegación dentro del contenedor. Bueno, hay momentos en los que probablemente quieras que esa barra de navegación se estire lo más lejos posible a la izquierda y lo más lejos posible, ¿verdad? Por lo que verías algunos sitios web donde la barra de navegación realmente está buscando en toda la página. El contenido se limita dentro del margen. Entonces eso en realidad es posible simplemente no poner el nav dentro del contenedor, ¿verdad? Entonces está esta vista previa, cómo sería eso, y eso es lo que nuestra barra de navegación haría camilla derechos en toda la página. Y entonces de nuevo, puede que desee que el distrito de franja negra a través de la página, pero no necesariamente el logotipo esté tan lejos a la izquierda y que los enlaces sean así. Entonces entonces es cuando empiezas a mezclar en mucho me puedo conseguir un poco, un poco creado. Por lo que aquí dentro del nervio verías que en realidad tienen un div con el fluido de guión del contenedor. Fluido significa que estirará el ojo por toda la página. Si retiramos líquido y simplemente lo hacemos un recipiente regular. Y verás que el viaje se extiende a través de lo que el contenido está dentro de los confines de cómo sería el contenedor. Entonces solo te estoy mostrando cómo puedes mezclar y emparejar lo diferente. Soy clases y la disposición del azufre solo para obtener el efecto deseado. Bueno, tienes que experimentar. Está bien, así que voy a dejar mi suficientemente violeta, eso es en realidad como cuando mi barra de navegación se extiende justo a través, pero los enlaces están empezando por donde son nulos. Está bien, así que eso es todo para nuestra novela. Pasemos ahora a nuestro contenido. Y lo que voy a hacer es eliminar este contenido. Entonces para hacer un trabajo rápido de eso, solo voy a colapsar ese div, resaltar esos dos lentes presione Eliminar. Y para que el viento de término completo mueva esto fuera del contenedor porque un fenol quería estirarse a través como el navbar. Pero volveremos al filtro más adelante. Y lo que vamos a hacer dentro de nuestra era de contenidos, al menos para nuestra página de inicio, se pone en un carrusel y tal vez unos encabezados. ¿ Todo bien? Una vez más, no espero que necesariamente comprometan todo esto a la memoria, simplemente rodaría con los golpes uno, encontrara lo que necesitamos cuando lo necesitemos. Tan poco golpe a la documentación de Bootstrap. Voy a buscar carrusel. carrusel es básicamente como ese slide-show, ¿verdad? Y aquí está el ejemplo para un tobogán, diapositiva ciclina. Puede tener controles de ancho en o puede hacer clic y navegar o permitir que los usuarios naveguen entre las diapositivas. Y creo que me gusta ese, el de la navegación. Entonces el código aquí veríamos que tenemos un div con una clase, unas clases, y tenemos algunas etiquetas de datos. Está bien, y luego tienes carrusel interior. Con cada diapositiva, tenemos artículos de carrusel. Entonces si lo quieres 50 fotos, tendrías 50 de estos divs. Si querías tres. Tengo tres de esos. Bastante. Y luego tenemos botón para retroceder y botón a poco adelante. Y eso es realmente todo. Por lo que solo rellenas los espacios en con las etiquetas básicas con las que ya estás familiarizado, sabes, sobre la etiqueta de imagen o, ya sabes, aguanta para conseguir el camino a la imagen en. Está bien, así que para que sea fácil, una vez más, podemos copiar y ya ves, podemos mirar los otros ejemplos en los que tienes con subtítulos. Puedes conseguirlos con subtitulado, ¿verdad? Y una vez más, solo siéntate y mira el código porque no es nada que no hayas visto antes, ¿verdad? Todo lo que es es una combinación de botones, ¿verdad? Por lo que estos botones corresponderían con estos indicadores aquí en donde, de qué lado estamos. Por lo que solo agregas tantos botones como tengas diapositivas. Todavía tenemos el mismo formato que acabamos ver con los artículos del carrusel. Está bien, sólo eso en lugar del elemento, así que tienes la imagen así como un div que está almacenado en el texto que se está mostrando. Está bien, y entonces aún tienes tus botones de navegación. Entonces creo que en realidad voy a usar esa y entrar aquí y mirarlos todo el día porque aquí hay otra Oda, animación cool. Puedes mezclarlos y emparejarlos, ¿verdad? Por lo general la diferencia entre las opciones son tal vez como algunas clases. Entonces al igual que la alimentación de Carrusel, que uno no está presente en este este dice carrusel y luego deslice. Está bien, Este dice carrusel, deslice luego alimenta. Está bien. Por lo que podríamos fácilmente tomar esta plantilla y luego convertirla en un desvanecido. Solo te estoy mostrando que puedes mezclar y emparejar. Está bien, así que voy a copiar este. A mí me gusta el que tiene los botones en ella. Y no ensuciar una y otra vez en el contenedor fue a simplemente pegar. Ahora pongámonos a trabajar en el cambio primero. Eso sí dijo que me gusta un tobogán de carrusel, así que voy a buscar nuestro ajuste ISO Dash, lo siento, el auto así alimentan, correcto. Entonces conoce este auto. Por lo que sabemos que se supone que se alimenta tanto como al siguiente tipo. ¿ Verdad? Ahora tenemos los botones. Esos son los pequeños botones de pestaña en la parte inferior. Y luego estos están viendo que están apuntando a los subtítulos de ejemplo del carrusel. Por lo que note ese hashtag. Muy bien, Entonces estos atributos de datos son una especie de lo que JavaScript está usando en propenso a los errores a ver. Cuando se haga clic en esto, voy a obtener estos datos de ella y usarlos para cumplir con mis decisiones. Por lo que más adelante cuando estemos construyendo operaciones más complejas, tendremos que usarlas cuando estemos escribiendo algunos jQuery. Entonces, no te preocupes por demasiado ahora mismo. Pero para eso son. Muy bien, entonces tenemos nuestros div, carrusel, ejemplo, subtítulos, BS, indicadores de paseo. Como dije, si queríamos más diapositivas, tenemos que sumar más y ketose, no hay problema. Después tenemos el interior el carrusel, cena de guión de carrusel y cada artículo. Por lo que el elemento número 1 necesitaría la fuente de la imagen. Entonces voy a usar el piso de mi hijo. Por lo que todo esto es IMG slash girasol dot JPEG. Y fuera, por lo general te anima a escribir una alternativa que nos diga con el ranking del sitio web en los motores de búsqueda. Y también ayuda con la legibilidad los lectores de voz para personas que podrían estar con discapacidad visual. Entonces se anima a decirlo solo para que cuando llegue el lector no supiera eso, Oh, está arriba cada uno de nosotros en el piso. Entonces quería saltar, bueno, ¿qué es un pico sub B? Ese es el sitio web que solía obtener mis imágenes y solo estoy tomando tres imágenes que estaban en la pieza frontal. No tienen que usar estas imágenes. Entonces lo que les animaría a hacer sin embargo, es usar el by menciones que el tiempo que estamos recomendando porque mira lo que está pasando con piso de Arslan o girasol es un archivo enorme. Estos después del dinero, ya sea 0s la talla, o simplemente asegúrate de que obtenemos una imagen que tipo de encaje en el área en la que esperamos que entre, ¿verdad? Entonces lo que haré es conseguir todos como 1280 por 53. Creo que eso debería ser lo suficientemente inteligente. Y solo seguiré adelante y los descargaré y luego los trasladaré al proyecto. Entonces simplemente muévalos a la carpeta de imágenes y luego renombralos. Y así conseguí una foto de la playa, un pájaro y un trébol, que es otra clase de ave. Más problemas. Entonces voy a usar entonces esas imágenes aquí. Entonces soy z slash beach, ¿verdad? Y luego el out dice playa. Entonces IMG slash ave. Dice Símbolo de ventas de aves. Esto es, conoce tus encías arriba. más difícil. ¿ Está bien? Y por supuesto, si quieres cambiar, se necesita, siempre puede seguir adelante y cambiar el texto. Si no quieres el texto, sólo tienes que quitarlo. Entonces solo lo estoy mostrando. Sí. Yo no hago lo que tú quieres. Tu jugada votó todo quiere aunque la parte más difícil, comillas, sería la fuente que tenemos cuatro imágenes, y solo tengo tres diapositivas, así que eso significa que necesito agregar una cuarta. Muy bien, entonces veamos un proceso de extensión de éste. Necesito un auto nuevo, así que el artículo, así que solo necesito tomar este div y solo lo voy a replicar. No voy a intentar volver a escribir que podría cometer ese error. Soy un legal a clase. Por qué volver a escribirlo cuando tengo un ejemplo perfectamente bueno que seguir aquí. Muy bien, entonces solo puedo poner lo que necesito en esta cuarta diapositiva. ¿ Todo bien? Y esta es la cuarta diapositiva. Ahí vamos. Entonces cambias. ¿ Qué necesitas cambiar? No hay problema. Ahora, después de poner en esa barra delantera, recuerda que tenemos los indicadores de botón. Entonces si no elegiste una plantilla con un botón indica eso y eso está bien. Si querías quitar la botánica indica a medida que cambias de opinión, eliminas los indicadores de botón. No obstante, voy a extender mis indicadores de botón para saber que deben tener un cuarto. Por lo que acabo de tomar la tercera y estoy asqueroso mirando cualquier cosa en ella que no adopte. Entonces aquí se ve el patrón 0 es uno. Y aprenderías en cualquier lenguaje de programación que cono suele empezar a 0 en computadoras, ¿verdad? Entonces 0 es la primera diapositiva, uno es el segundo lado, dos es la tercera diapositiva. Entonces obviamente, tres serían la cuarta diapositiva ¿verdad? Ahora, después de poner mi presentación de diapositivas, Volvamos a saltar de nuevo al sitio web y cerrar todo el ruido. Y luego está nuestro piso de tugurios. Ahí está nuestra playa. Ahí está nuestro pájaro, y ahí está el trébol, que es un pájaro que se escucha. Vemos que las etiquetas están apareciendo. Tenemos nuestros indicadores y todo por lo que está funcionando bien. Pero entonces las imágenes siguen siendo un poco grandes. Alguien para empezar en algún CSS personalizado para simplemente reducir las dimensiones de la imagen es un poco hilo. CSS personalizado. ¿ Por qué? Porque después de hacerlo encendido para imágenes en absoluto, quería hacerlo cuatro veces. Entonces no voy a poner en línea CSS 4 veces. En cambio, es más fácil para mí hacerlo es saltar a mi clase de estilo personalizado y crear una nueva clase. Y lo llamaré deslizamiento imagen trineo. Yo soy G. Y voy a cambiar la altura porque eso es lo que realmente tiene un problema con algo así como 550 pixeles tal vez. Y luego con esta clase, fácilmente puedo volver atrás y dejar que cada imagen no. Entonces, ¿eso es un IMG? Sí, eres d block. Sí, estás con 100 o w dash 100, eso son bootstraps. Hemos visto ancho 100, pero voy a decir También eres diapositiva IMG, que luego reduciría lo alto que eres y ahí vamos. Está bien, así que se ve un poco mejor. Entonces como dije, siempre es mejor conseguir imágenes que ya son hacer menciones que quieres o las redimensionas a dimensiones que quieres que sean para esa sección en particular. Porque mira cómo las imágenes tipo de aumentaron cuando las estoy obligando a ser un tamaño diferente a su tamaño natural. Entonces volvamos a entrar en nuestro código. Por lo que tenemos nuestros autos están en marcha. Copia y pega unos mods en donde estamos corriendo, en donde vivo. Ahora echemos un vistazo a algún diseño avanzado. Digo avanzado porque va a ser, va a quedar muy limpio y gente mira sus sitios web y cosas para hacer algo en bonos. Pero una vez más, Bootstrap hace tantas cosas tan alcanzables. No es gracioso. Está bien. Entonces voy a ir debajo del auto. Entonces así que este era nuestro auto, así que este es nuestro contenedor, este son nuestros carruseles o silane configuran nuestro contenedor. Voy a romper la línea y luego voy a introducir un nuevo div. Este div va a conseguir que GOS llamado roll know. Una vez más, consultemos la documentación. Por lo que hay un sistema de cuadrícula integrado en Bootstrap el cual te permite dividir tu contenido en diferentes columnas. Está bien, así que aquí hay un ejemplo para 13 columnas, que es lo que estamos a punto de hacer. Puedes usar la regla y los nietzscheanos dicen col, col, col. Francamente, tantas llamadas como pongas, hará todo lo posible para dividir ese espacio de izquierda a derecha de manera uniforme entre tantos da que tengas esa llamada de decir. Si quieres tamaños fijos, en realidad puedes decir col dash bajo números. Entonces en otras palabras, quieres 5050, podemos usar color si quieres 123, llama, llama CAFO llama. Pero entonces si quieres, déjame ver si puedo encontrar uno que sea exactamente el ejemplo del que estoy hablando. Aquí vamos. Por lo que hay 12, básicamente concentrados ahí, 12 columnas de izquierda a derecha. Para que siempre se pueden dividir los uniformemente, ¿verdad? Entonces puedes dividirlo en cuatro, ¿verdad? Cuatro columnas, que serán cada una siendo la talla tres. O puedo dividir esto en tres, que cada uno siendo talla para ti otra vez, dividió 5050. Por lo que ambos serían psi busca. O si quieres, quieres ser significativamente más ancho que el otro, puedes ver que eres, Es bases en UR para especies. Pero cualquier combinación de números que sumen hasta 12 es una buena combinación para esas divisiones. Está bien, así que si te desplazas, empezarás a ver otros ejemplos. Se puede ver un col, md y el MD y el LG y los diferentes nombres que estás viendo esos realmente se refieren a eso como tamaño de pantalla. Por lo que podrías estar viendo eso en una pantalla media, que sería como un despegue de pantalla de computadora regular para las especies. Pero en verás como col, dash ASM, que significa pequeño. Por lo que mientras en una pantalla de computadora debe ocupar hasta x número de especies en una pantalla más pequeña como un teléfono móvil, ocupar más espacio porque probablemente quieras que ese elemento se estire a lo largo de todo a diferencia de Diigo pop fuera la pantalla como lo harías en una computadora. Eso es tan fácil de hacer estos diseños. Entonces como dije, sí quería que algo pareciera más a esto, tres columnas. Entonces aquí hay una regla de clase div ejemplo, llamar, llamar, llamar. Entonces en realidad sólo voy a pedir prestado este código ya, tener los robots. Eso está bien. Simplemente lo anularé y pondré eso. De acuerdo, entonces mis tres columnas, no hay problema. Ahora en lugar de las tres columnas, ¿qué quiero? Sólo voy a poner un texto de muestra, y esto es encabezamiento y una etiqueta de párrafo y un botón. Y eso es todo lo que estoy metiendo. Entonces voy a teclear eso desde cero contigo, ¿verdad? No. Para que puedan entender exactamente lo que está pasando. Observe que se trata de garrapatas de muestra. Comienza en latín, es una especie de basura. Pero te mostraré cómo conseguir ese tipo de texto con bastante facilidad. Entonces para llamar, para la segunda columna, cuándo tener una etiqueta H2. Mel va a ver está pegando Es lo que sea que quieras como tu rumbo. Si estás construyendo sitios web promocionales son protocolos, ahí es donde platicas los puntos de conversación sobre este pan avena, ya sabes, cuesta amigable, eficaz, eficiente, et cetera, ¿verdad? Sólo dándote ideas. Entonces ese es el rubro. Entonces en la etiqueta p, quiero algún texto de muestra para que en realidad pueda simplemente escribir la palabra lorem, presionar Enter, y generará todo un párrafo apagado alarma toma así que estoy seguro que has visto esto en algún lugar de tu vida, en algún lugar de Internet. Si no, eso está bien. Pero el punto de esto se lleva a cabo titular, así que aquí es donde se pone lo que sea, se transforma eso en la información útil. ¿ Todo bien? En términos generales, cuando estás wireframing y quieres mostrar vatios a un cliente, el sitio web se verá como si quisieras poner ese tipo de lugar. Bueno, un soluto C, vale, si los lleva ahí, eso es lo que parece. Entonces para la última, solo voy a tener esta etiqueta p que tiene esto en unidad crypto y no me fui a reescribir eso va, creo que la combinación de esas etiquetas, ya sabes cómo hacer eso a una etiqueta p con una etiqueta ancla, btn secundaria. Entonces sí, estoy de acuerdo botón y el rol es botón. Entonces sabe que es sólo un botón, ¿verdad? O debería actuar como doble u otro y esto interfiere ir a ninguna parte. Ver Detalles. Eso está bien. Está bien. No, verás este tipo de ¿qué debo decir? Estos símbolos son estos texto Unicode, diferentes lugares están en Internet. Estos son, él mete símbolos especiales en tu sitio web. Entonces, por ejemplo, generalmente en el pie de página, se vería algo así como información de derechos de autor. ¿ Y cómo se obtiene un letrero de derechos de autor? Entonces lo haces ampersand y creo que es C. Así que si acabas de hacer un arrebatos y yo uso scroll, verás todo el tipo de personajes especiales que vienen en el IntelliSense, lo que representan. Entonces si digo algo, esa copia, ahí vamos, Eso es un sentido de copyright. Entonces ampersand copia, punto y coma. Entonces cuando ves un rock de Lamberson cool, no sé It Rock cool en inglés se traduce a sobre UC, ahí es donde estás sacando esa pequeña flecha doble. De acuerdo, así que solo replicemos esta sección o este código para nuestra tercera columna. Y luego echemos un vistazo rápido. El OK, tranquilo, Ahí vamos. Entonces ahora tenemos nuestros tres encabezamientos debajo diapositivas y nuestro texto de muestra, y nuestros botones de cuadrícula que navegan por ninguna parte. Entonces UCO, todo se está juntando, ¿verdad? Entonces espero que estés tan emocionado por lo que estamos logrando. Retinoides que conozco para el pie de página y luego solo lo voy a tapar ahí mismo por lo que estamos haciendo en el filtro fotográfico del discurso. O al menos al final de esto, voy a poner una regla horizontal para que tengamos una pequeña línea. Muy bien, y luego fui a cambiar este filtro para ser algo más como un verdadero tirones de filtro. Por lo que verás las etiquetas de pie de página, verás las etiquetas de encabezado. Y eso es lo que llamamos HTML semántico. Y es solo un estilo diferente de escritura, pero sigue siendo algo así en última instancia básicamente se reduce a parecer como si fuera solo un contenedor. Y semánticamente, este contenedor es para el contenido del filtro o así dentro del contenido del filtro. Bueno primero, luego una vez que le das una clase llamada container, sabemos que Container va por un bootstrap más. Y entonces en lugar de esta etiqueta p, voy a agregar R o copyrights y así ampersand copiar, ¿no? Y luego veré mis sitios web. Esto es 2021. Está bien. Entonces volvemos a ver nuestra página web, algo que es así que tenemos nuestro nav, tienes rumbo y entonces tenemos eso. Sin aviso cómo en esta diapositiva son una especie de mart. Entonces esas son pequeñas cosas que pueden empezar a buscar si quieres algo de luz del día entre ellas. Básicamente es tan fácil como poner una etiqueta de ruptura entre el nav y el contenedor. Por lo que consigues ese pequeño BH3. Ahí lo tienes. Agradable y fácil, ¿verdad? Lo que algunas personas hacen también es realmente crear un div o algo así, o crear una clase que diga automáticamente, dame X cantidad de margen desde la parte superior. Por lo que se dividirán eso está en el contenedor div Excel margen modelo desde la parte superior. Entonces si alguna vez quisiste cambiar ese margen, solo los genes de clase porque él realmente no puede cambiar cuánto descanso y llegar a con nuestro punto de interrupción. Entonces eso es realmente todo por lo que estamos haciendo con la página de inicio. A la página de la morada puede usar algún trabajo. Definitivamente, la página de contacto puede usar algún trabajo. Entonces cuando regresemos, veremos el estilo del melocotón anterior. 22. Reorganizar la página sobre la página con Bootstrap Grid y botones: Muy bien chicos. Bienvenido buck. Por lo que ya miramos a restudying o homepage. Pongamos nuestra atención a nuestro perno o discurso. Conoce, una vez más, estos no te están dando prescritos con cosas que debes hacer experimentos si no te gusta la forma en que hice algo, siéntete libre de explorar e intentar otra cosa, ¿verdad? Estos son meramente lineamientos. Tengo un punto de vista diferente a ti como lo harías con otras personas. Entonces está bien experimentar e intentar otra cosa. Muy bien, así que primero llevemos un perno nos hasta el mismo estándar que la página de inicio, decir en cuanto al diseño, recordar que la consistencia es clave. Entonces habíamos tomado prestada la barra de navegación, pero habíamos hecho cambios en la barra de navegación de la página principal que hemos interpretado creado. También tenemos cambios en nuestra zona de pie de página que no hemos replicado. Entonces, centrémonos en hacer eso. Entonces en la sección Navbar, había quitado su viejo del contenedor o el medio Contian es solo voy a copiar el nuevo código de barra de navegación para que sea fácil. Y solo voy a colapsar este código de barra de navegación, eliminarlo. Y entonces este navbar-default activó el contenedor div. Mientras estoy aquí, sólo voy a hacer lo mismo en la página de contacto, ¿verdad? Entonces en realidad me gusta hacer eso cada vez que hago un cambio, es, sé que es global y ha tratado de hacerlo tantos lugares como sea posible, al mismo tiempo. Entonces no me olvido más adelante. Entonces después de que lo hayamos replicado, navbar, vemos, vale, bien. Está trabajando en el barco nosotros, también necesitamos hacer eso en el pie de página. Entonces estamos en el código de filtro y debe tener un EHR. Entonces vuelve a la lancha, se derrumbó y fui a simplemente quitar este contenido div por completo. Pero podemos quitar este filtro. Voy a poner en que cada uno son y poner en nuestro pie de página, ¿verdad? Entonces cuando miramos hacia atrás, vemos que el pie de página ve como lo que queremos. Ahora podemos eliminar este contenido y empezar con el rediseño. O no recuerden que tuvimos un descanso aquí mismo entre el contenido o el área de contenedores y el nav Hero. Entonces con todos esos cambios realizados, visuales para eso, ambas páginas más como una página de perfil, derecha. Yo quiero ver, Hey, este es un párrafo sobre mí y luego probablemente tener como algunos enlaces sociales. Y luego justo como un perfil, ya sabes, solo estoy pensando en las diferentes cosas que podríamos hacer. Entonces dentro del contenedor, creemos nuestro papel. Entonces en cualquier momento vamos a tener la separación de columnas, así que si tenemos que empezar con clase igual rollo, son, entonces dentro de esta fila, voy a tener un div. Y este div tendrá clase igual. Y nota cómo particularmente Amabile mi sangría. sangría es muy importante cuando se trata de la legibilidad más adelante, ¿no? Por lo que siempre trata de asegurarte de que tu código se vea limpio. Por lo que quería dar este llamado dash ocho. De acuerdo, estoy dividiendo la playa en ella y tal vez tres. Entonces voy a ver llamarlo para este y solo voy a duplicar esa línea y hacer col dash tres, pero también quería tener un desplazamiento col dash. De acuerdo, en realidad estoy olvidando cómo el código de desplazamiento hace bucle a alguien saltar por aquí y buscar compensaciones, ¿verdad? Entonces el desplazamiento, compensaciones aquí, un gol, así que el desplazamiento es en realidad en las columnas estaban en cuadrícula. En realidad está en columnas. Y aquí hay una cotización para el offset. Por lo tanto, offset dash, cualquiera que sea el tamaño de pantalla, dash, lo que sea que diga compensa que significa espacio en modo de espera. ¿ Quieres entre yo y el que estoy al lado, verdad? Entonces si lo estamos usando y déjame simplemente copiar eso si lo estoy usando. Y tres, eso significa que al menos puedo tener un desplazamiento de uno. Por lo que uno más tres más ocho equivale a 12. Bonito, ¿verdad? Por lo que dentro de la primera, voy a tener un pequeño filo cuatro. Diosa es igual a tal vez texto, dash info. Está bien, entonces ya verás lo que eso significa. Nuestra primaria, déjame que sea primaria para que veas el color se pone y esto sería un barco me en eso. Esto es para TAG. Y se fue a tener un párrafo, como dije de mí, lorem de texto marcador de posición, y dejar que sólo genere ese texto. Para este texto, le voy a dar una clase. Texto. Silenciado. Está bien, Así que si lo estás, si no estás tan familiarizado con las cosas de la tecnología. No hay problema. Bootstrap. Entonces si solo escribes texto, salta a esa documentación es el autor de las maravillosas formas en que pueden transformarlo para establecer el tamaño, los diferentes colores que pueden obtener con el texto. Todas estas cosas maravillosas, ¿de acuerdo? Y en términos generales, cuando se habla la primaria o éxito o una advertencia o peligro para parecer clases que vas a estar viendo para BG dash o BTN, esas parecen palabras clave y el resultado colores están disponibles para tus garrapatas. Entonces si quieres texto azul, texto dash primer toma info, texto verde, texto, Fluxus, etcétera, ¿verdad? Entonces solo estoy señalando ese dedo del pie. Es por eso que verás mucha concurrencia entre cómo se están utilizando estas palabras clave en todo el lugar. Entonces ahora que tengo al menos una columna, no lo hagas. Fui a saltar hacia abajo y empezar a construir columnar. En esta columna, lo que quisiera sería información de contacto, ¿verdad? Entonces voy a tener otra edad para lengua que tenga la misma toma primaria. Pero éste va a decir info de contacto, ¿verdad? Y luego voy a tener, en lugar de una pita, déjame usar una lista desordenada donde sólo voy a algunos de mis enlaces de redes sociales. Entonces ya ves, solo estoy juntando todas estas etiquetas y solo las estoy combinando para obtener mi resultado deseado. Entonces es cierto o si, oh lo siento, déjame solo abrir y cerrar esta TAG de hambre para que pueda deshacerme de algunas de esas flechas, ¿verdad? Entonces f es igual a, y solo pondré un hashtag para nulo para que ese enlace se vea vivo. Clase igual, tal vez podría ver texto SSH silenciado o guión de texto en su totalidad, ¿verdad? Simplemente para que se haga. Y quiero decir, una vez más, eso depende de ti tomar garrapatas tan oscuras, blancas, quieres enlace ya que sabes que una URL va a tener un bucle en particular. Entonces si quieres cambiar ese look, entonces no hay problema. Está bien. Por lo que quería hacer que mis enlaces parecieran oscuros. Muy bien, veamos cómo se verá eso. Y veré a un tutor. Y entonces solo duplicaré esto. Entonces uno es Twitter, otro es Facebook. Y ganado podría ser. Buen trabajo. Muy bien, así que echemos un vistazo a lo que estamos consiguiendo con esta página. Entonces esto es lo que un perno significa flamenco para parecer que tenemos ese perno me algún bool. Esto es un gráfico de barras me molestan. Y entonces tenemos nuestros enlaces de bloque, ¿verdad? Entonces una vez más, mixin mucho y experimentos. Por lo que quería seguir adelante. Voy a crear otra sección debajo de eso. Y voy a llamar a esa sección tal vez que mi portafolio para algo que acentúe en lo que llevo trabajando todos estos años, tal vez. No lo sé. Pero digamos que tenemos así que seguimos dentro del contenedor div, estamos terminados con este rol. Entonces déjame simplemente colapsarlo y sacarlo del camino. Está bien. Y luego bajo eso, sólo voy a tener una madre, otro div. Una vez más, siempre es bueno dar tus ID de DBS. Por lo que podrías llamar a esta sección de portafolio por si acaso o era cartera, lo que sea que quieras. Siempre es bueno darles. Por lo que al menos se puede decir qué es en qué sección. Por supuesto, no es obligatorio como hemos visto. Por lo que en esta sección voy a tener una etiqueta H1. Y como un poco de separación, sólo voy a usar un alternador de recursos humanos entre estos dos. Entonces soy yo, solo estoy usando un hey, solo estoy probando cosas aquí, ¿verdad? Por lo que un ladrillo en blanco de HR, otro descanso. Y luego empiezo mi portafolio. Entonces voy a decir mi portafolio. Ese es el rubro. Está bien, entonces ya sabes en qué sección estamos. Entonces tengo una etiqueta p. Y luego veamos, quiero darle a éste la clase. Tienes otro llamado plomo. Y yo quería hacerlo toma Dash silenciado también, sólo por efecto dramático. Está ahí pero es, ya sabes, una especie de círculo. Y yo solo le daré este Lorem. Entonces ese es mi párrafo sobre mi cartera. Y tal vez pueda tener dos botones? Los llamamos como un llamado a la acción en el desarrollo web. Yo sólo seguí adelante y las hice. Entonces tenemos clase, lo siento, H ref, nada realmente va a ir en su clase BTN primaria. Y luego verás em Y2. Por lo que un montón de pequeñas clases únicas que ves de vez en cuando, sobre todo si vas por un ejemplo de bootstrap. Entonces éste está viendo margen en el eje Y de dos espacios, y eso es todo lo que ve. Por lo que Bootstrap tiene muchas de estas cosas que prevenir. Se reduce la necesidad de que realmente vayas y escribas clase solo para tener un margen de dos. El eje y son de arriba a abajo a la derecha. Entonces para solo darte margen, ¿por qué herramienta, si quieres solo sobre el tema diría vacío o MB, etcétera, ¿verdad? Entonces esas son las políticas que puedes mirar y usarlas a tu favor. Ahora después de hacer todo eso, tengo las herramientas quieren decir, contratarme, quería decir dejar retroalimentación, ¿verdad? Y uno es primario, otro secundario. Una vez más, puedes mezclar y combinar tu ropa, pero solo voy a saltar y ver cómo se ve eso. Está bien, mi portafolio. Entonces ven aquí que mi texto de encabezado está un poco por defecto a lo que toma mi estilo personalizado golpear es. No quiero mezclarlos mucho. BTN-primaria y descendientes entienden eso, ¿verdad? Tengo dos opciones. Podría simplemente eliminar todo mi estilo personalizado, o podría una vez más simplemente anular este hasta que sea tu clase es x86 dash primary. Entonces solo sabe cuando te renderizan, renderizas como azul y todo lo demás puede lucir en línea, ¿verdad? Si quisiéramos que todo esto estuviera alineado al centro para que en sólo levantarla en un trineo que pudiera saltar buck. Y podría decirle a este div que su clase es igual al texto, el centro, para que nosotros, todo el texto ahí dentro no esté alineado, ¿verdad? Entonces solo te estoy mostrando lo fácil que es simplemente empezar a hacer algunas modificaciones locas con código muy mínimo al usar Bootstrap. Entonces pasemos a algún otro contenido que pudiera ser útil en el discurso. Ahora estamos mostrando un portafolio, por lo que sería de nuevo un novelista prudente. Ah claro, como una galería de la obra o algo así. A lo mejor nuestro fotógrafo o un diseñador web o incluso sólo ese diseño cercano o lo que sea, quienquiera que seas, No hay problema. Lo que podemos hacer en realidad es simplemente crear una mini galería justo debajo de este div para el portafolio. Entonces solo voy a crear otro div. Yo quería darte la galería de identificación. Y luego dentro de este div, voy a tener nuestro papel son, ya sabes, en realidad podría simplemente cumplir con este rol div. Por lo que quería sólo decir que la cruz es igual a gobernar y su galería de ideas y la perspicacia o cuatro rollo, vamos a tener div. Entonces aquí hay otra cosa, null cuando usamos la llamada. Entonces, ¿y si quisiéramos filas con tres elementos cada uno? Muy bien, así que ya miramos cómo podemos establecer un tamaño usando el color. Está en lo que sea. Y también vemos que si solo decimos llamarlo, automáticamente sección analizará el rol para muchas columnas. Entonces en este caso quiero dos filas con tres elementos cada una. Para que yo pueda hacer las matemáticas. Si es 12 de ancho, quiero tres, eso significa POR columnas E a B para tamaño para ello. Por lo que puedo decir que los autos son iguales a col dash cuatro. ¿ Está bien? Y puedo replicar eso tantas veces. Entonces lo que quiero hacer múltiples roles. Entonces lo que un patrón es que hagas múltiples reglas y 3 cada una o puedes desaturarlo pone a todas ellas en la misma regla. Porque lo que sucederá es que la regla asignará automáticamente cuatro espacios para espacios para especies en una línea, luego irá a la siguiente línea de forma automática y continua abasteciendo el espacio disponibles son necesarios. Entonces no tenemos que preocuparnos realmente por esa parte. Todavía no estoy listo para duplicar esto porque el código entre ellos va a ser bastante consistente. Entonces solo haré uno correctamente y en esta copia y la pegaré a través, ¿verdad? De hecho, creo que voy a usar hasta tarjeta Bootstrap para esto. Entonces saltemos a la documentación y busquemos que las tarjetas sean rojas. Por lo que ven aquí es un ejemplo de cómo se ve la tarjeta. Entonces imagina tener tu galería y tienes de una sola vez esto. Y tienes tres por regla. Y tienes tu pequeña imagen y tal vez el nombre de la descripción del proyecto y algo para que muerdan o pocos detalles más, nuestro contacte tu barco, es correcto. Y tener todos los ejemplos de tarjetas. Es decir, si no quieres otra vez la imagen, hazla simple. Tienes esta versión del mismo, etcétera, etcétera, ¿verdad? Entonces creo que voy a ir con el primer ejemplo donde habríamos tenido esa imagen y el cuerpo. Entonces eso es, aquí está la cotización que necesitamos. Yo sólo voy a copiar eso. Salta a nuestro código. Y luego dentro de col dash 4, ponemos esa tarjeta. Entonces esa es la primera columna. Está bien, no tenemos ninguna imagen. Se puede ir a conseguir la imagen en Putin. Yo sólo voy a llamar a este carrito de compras. Entonces ese es mi primer portafolio. Y luego puedes dejar ese viejo problema. Y entonces sólo voy a copiar esto. Dos veces más. Está bien. Entonces uno es carrito de compras, éste es joyero, y éste es sistema de asistencia. Entonces estos son mis proyectos en los que he trabajado a lo largo de mi portador teóricamente ponente. Por lo que sólo mostrarlos a los visitantes para la página web. Y luego cuando salto atrás y veo cómo se ve mi página, ella es ver carrito de compras o restaurar sistema de asistencia. En base al tamaño de estas tarjetas? Probablemente no podría llevarte más. Probablemente podría apretar a otros. Podría fácilmente decir nuestro Jacob tres espacios en lugar de cuatro. Y luego sumar otro solo para que podamos llenar ese espacio. Está bien, eso se ve un poco como un mejor uso del espacio. Eso se llama el cisne. Perdón, checkout. Está bien, así que no soy extraño ejemplo fortalecido donde es para usar. Entonces solo te estoy mostrando cómo puedes hacer eso. Y luego si quería una segunda regla, si solo replicaba las cuatro de estas, mira lo que pasa, simplemente crea automáticamente la nueva regla. Por supuesto, probablemente querré algo de luz del día entre ellos. Entonces sería en ese punto es cuando la gente tendería a querer tener un div separado para la regla, ¿verdad? Entonces en ese punto, lo que voy a hacer es quitar este DNI porque esto no es sólo regla de revuelo. También eliminaré el exceso que ya hice. Entonces simplemente voy a crear otra regla o más bien fuera de esas, duplicar esto ya que los estábamos duplicando todo este tiempo de todos modos. Entonces solo refactorice nulo, ¿verdad? Que es aparte de partes del proceso. A veces haces un diseño como yo acabo de hacer. Pensé que me vendría bien la regla única y lo que sea, pero no me gusta lo que se ve. No problema. Por lo que div tu DNI Es galería. Y luego dentro de la Galleria tienen múltiples roles con múltiples columnas, como este código de rollo completo. Y lo pego dos veces dentro de la vista de la galería. Entonces tengo esta regla, que es la primera fila y la nueva regla del ciclón. Y eso, Cuando lo miro hacia atrás, sigue siendo una especie de looks todavía está ahogado, pero ¿adivina qué? Porque ahora tengo los dos papeles distintos. Puedo fácilmente poner ladrillo entre las vidas y mirar eso. Yo consigo esa luz del día. Entonces eso son todos los contenedores en la ayuda de Dave a tipo de mantener juntas las secciones y luego moverlas como una sola unidad. Entonces tengo toda esta fila en un div, todo este deseo. Entonces si solo pongo un punto de descanso entre los dos divs, entonces consigo esa luz del día que busco. Por supuesto que no tenemos ninguna imagen, así que por eso sólo estamos viendo esos enlaces rotos. Puedes poner imágenes y embellecer y modificar esto como quieras. Pero creo que esto es, creo que esto es genial. Creo que hemos hecho bastante y miramos una serie de opciones. Pudimos dividir nuestras reglas en nuestras columnas. Y vemos donde dividiendo aún más y mezclando y emparejando los diferentes elementos que se unen para hacer un sitio web. Entonces ahora estamos, puedo llamarlo hecho con la página de Apple. El hogar se ve así y eso me queda bien. El morada, por supuesto, consistencia una vez más, estos clave, por lo que solo puedes asegurarte de que todos los encabezados sean colores consistentes en todo tu sitio web. A menos que deliberadamente quisieras que fuera de un color diferente, entonces eso está bien. Eso depende de ti. Entonces, cuando regresemos, veremos rediseñar nuestro formulario de contacto. Esa definitivamente va a ser una actividad muy divertida. 23. Revisa la página de contacto con Bootstrap: Muy bien, entonces estamos de vuelta y estamos modificando nuestro formulario de contacto. Entonces lo que pasa con las formas es que hay personas que lo toman como su trabajo diurno tan desafiado como un rito de paso para asegurarse de que puedan diseñar un formulario. forma puede ser tan compleja como necesita ser simple porque esa es la forma en que un usuario realmente se siente invitado a interactuar contigo. Esta es la puerta de entrada a tu aplicación o en el nivel básico donde no necesariamente estamos recolectando nada demasiado sensible. Está bien. Podemos simplemente escolarizar con esto. Pero después cuando empezamos a buscar desarrollo más complejo en dotnet, entonces definitivamente empezarás a pensar en la seguridad en su conjunto. Tener forma adecuadamente diseñada es esencial. Por ahora, sin embargo, sólo estamos enfocados en el diseño. Sabes lo que voy a hacer es saltar a Bootstrap y ver qué forma ideas tienen para nosotros, ¿verdad? A veces quieres hacer algo, bueno, necesitas inspiración y no hay nada de malo en eso. Entonces si solo salto a la documentación del formulario, miramos a través de los controles del formulario ya, habíamos mirado algunos de estos y vimos que tenemos la clase de control del guión del formulario que podríamos usar. Pero luego vimos también que tienes algunas muestras como si saltas poetas de control de forma, ves, vale, Tienen un ejemplo donde, quiero decir, esto es realmente todo lo que necesita para nuestro formulario de contacto. Está bien, así que literalmente podríamos pedir prestado estos genes son pocas cosas y estaríamos citando, hecho, ¿verdad? Si miro los diseños, seguro de tener algunas buenas ideas para OK. Whoa, podemos tener un diseño de cuadrícula, ¿verdad? Para que podamos hacer mucho las etiquetas de entrada con las columnas, ¿no? Holy puede conseguir que lo que se llaman canaletas sepan, tener un ancho de canaleta no están todo seguros de lo que eso haría, pero eso está bien. Aquí hay una forma compleja agradable usando el diseño de cuadrícula respondida. Entonces si se quiere email password o tal vez email número de contacto, dirección, y todo para que alguien inicie sesión o se registre. Tienes toneladas de opciones y formas de hacer esto. De acuerdo, entonces lo que en realidad voy a hacer es pedir prestado este complejo diseño. Se trata de diseños complejos. Por supuesto, podemos encontrar otras cosas que poner. Entonces ahora mismo, lo que tenemos para nuestro formulario es sólo el nombre completo, la dirección de correo electrónico, y lo que sus consultas. Si tomáramos prestada esta compleja forma, fácilmente podríamos decir FirstName, LastName. Cambia esto a la tal vez la dirección de correo electrónico, y deja que esta sea la consulta y luego elimina esas líneas excedentes. Y entonces por supuesto tenemos el botón para presentar. Entonces yo, voy a hacer eso. Yo sólo voy a copiar este porque me gusta. Voy a saltar a nuestro código. Y luego voy a saltar a la página de contacto también notar que el filtro necesita alguna modificación. Entonces déjame solo Caleb esta nev, entrar al contenedor, quitar el contenido, todos los contenidos. Recuerda que tenemos que terminar con esa es nuestra línea. Y luego voy a pedir prestado el pie de página para navegar rápido, ¿Qué es eso? Es solo colapsar lo que necesito ver en ese momento, pedir prestado el pie de página, y luego lo voy a colocar aquí. Entonces ninguna etiqueta dos veces, una vez más, existe en Charlotte. Todos los RPGs tienen los elementos muy similares. Entonces así es como luce nuestra página. Sí necesito esa etiqueta de ruptura entre el nav y el contenedor. Ahí vamos. De acuerdo, así que empecemos a modificar o a formar. Por lo que tenemos nuestra forma, entrada, correo electrónico. Está bien. Yo sí dije que vamos a cambiar esto para que sea nombre, apellido, y dirección para que sea el correo electrónico. Entonces en lugar de cambiar uno por uno, estoy dispuesto a ser burbuja estratégica es que sí tengo la entrada para email ya. Y sí quería cambiar la dirección a correo electrónico, así que sólo voy a copiar la etiqueta y la entrada para correo electrónico. Y voy a anular la primera línea de dirección. Observe que se llama doceavos, no lo he superado en el div, solo los dos controles. Por lo que he conservado el control de correo electrónico. No, puedo seguir adelante y modificar esto, el nombre y apellido. Y por supuesto, quieres asegurarte de que tus etiquetas mucho lo que se está pidiendo. Entonces FirstName input, FirstName para mano de obra para mucho es el ID, ¿no? Entonces si es entrada FirstName para mí primero, lo siento, creo que está girando en rojo FirstName para. Entonces. Tenemos que asegurarnos de que tenemos el DNI, correcto. Lo mismo para éste Eso fue esa contraseña. No es apellido. Así apellido. Y el tipo era contraseña no es texto y tu tipo era correo electrónico. Es todo un texto para ello. El correo electrónico aún se conserva. Entonces FirstName, apellido, correo electrónico, no hay problema. Y luego no aquí, podemos quitar las que sabemos que no necesitamos, así que no necesito nada de la ciudad y del zip y nada más. Tampoco necesito esa casilla de verificación. Alguien astilla, mueve todas esas cosas. Está bien, pero luego dirección dos. Definitivamente voy a modificar. Entonces esto va a ser entrada, consulta. Y no hay soporte para este. Como casi todos pensaron, esto no es inmune a estar en el cuadro de texto. Este va a ser un área de texto. Pero esta es la consulta, ¿verdad? Por lo que el área de texto, abrir y cerrar etiqueta. No hay problema. Toma área. Te voy a dar el control de clase. Por lo que el control del foro como tu clase y tu ID va a ser la nueva idea que es la consulta de entrada. Voy a quitar esta entrada. Y la etiqueta aquí es una vez que veas tu consulta para el botón, fui a renombrar esto de ver a San en enviar consulta. Además de eso, quiero que se estire a través alguien para que sea btn block. Y cuando le eche un vistazo a lo que obtenemos, así niños, así que el ojo, está bien. Está bien. Esto es bueno. Esto es bueno ver. Significa que en algún lugar del camino tengo remolcadores tan desemparejados tienen el nombre y apellido bien. El correo electrónico. Está bien. Pero entonces estoy sincronizando dirección a través y viendo la entrada dentro de algunas cosas. Entonces algo salió mal en el camino. Tenemos que arreglarlo y eso es más problema. Así que vamos a tratar de averiguar que totes. Y estoy mirando y honestamente no veo nada malo. Entonces probablemente solo necesitamos actualizar la perra y DFS de la actualización la página se está mostrando mejor. Entonces creo que eso fue sólo un blip en el servidor en vivo. Pero ves las consecuencias de no cerrarlo correctamente a veces, a veces cuando haces eso, la página no muestra lo que esperabas y el editor no te dirá por qué. Está bien, Así que solo ten alerta cuando veas esas pequeñas cosas. Y a medida que crezcas, te pondrás más cómodo y aprenderás a modificarlas mejor. Pero creo que esto parece una buena forma. Se puede poner algo de verbiaje en la página, no sólo la forma roja, sino que probablemente podamos usar como algo que tenemos arriba por el perno oh, sección de habla. Entonces en la página de fotos, teníamos toda esta fila plática botes quiénes somos, e información de contacto. Creo que eso podría ser útil en esa forma también, una vez más, depende de ti. Puede estar en desacuerdo. Entonces en realidad sólo voy a poner todo eso por encima de la forma. Entonces cuando alguien navega a la granja, están viendo que soy yo, así es como puedes contactarme o puedes llenar el formulario y enviar tu consulta. Está bien, creo que eso es agradable y fácil de hacer. Ahora, obviamente, el alcance o las modificaciones está a la altura tu imaginación y de tus objetivos. Entonces no estoy siendo prescriptivo, solo te estoy dando lineamientos y mostrándote cómo todo puede juntarse con varios elementos Bootstrap para hacer tus páginas. En este punto, creo que el sitio web se ve bien. Lea mi página web. Obviamente, al hacer clic en él, debería navegar a casa. No es navegar. Estoy haciendo clic en render no está navegando. Entonces eso es una cosa que me gustaría cambiar definitivamente mientras estoy aquí para tener esto probablemente vaya al index.html. Está bien, y entonces si lo hago en esa sección, definitivamente voy a tener que hacerlo en las otras. De acuerdo, así que acabo de hacer el mod espinal, deberías poder simplemente seguir adelante y copiarlo y pegarlo y cambiarlo, ¿verdad? Pero después de hacer el módulo, ver que funciona, ¿verdad? Y esas son pequeñas cosas que mejoran la usabilidad de tu sitio web. Y quieres asegurarte de que tus usuarios estén satisfechos. Y quién hubiera tenido una buena experiencia en otra cosa a tener en cuenta es que menos, es más. De acuerdo, así que cuando regresemos, solo revisaremos todos nuestros cambios a GitHub y luego echaremos un vistazo a nuestro sitio web en vivo. 24. Completa y actualiza el sitio web de vivo: Ahora vamos a estar registrándonos en GitHub y sólo voy a buck chuck un poco y sugiere o ver idealmente, lo que querrías hacer es entrar a GitHub cada vez que lleguemos a un hito. Entonces siempre es peligroso cuando haces todos estos deseos, todas estas páginas y vas y te abrocha TVA, ¿verdad? Entonces después de saber que no hemos tenido una hebilla o al menos desde estos últimos conjuntos de modificaciones, no teníamos una hebilla. Si mi computadora se encendiera entre la última lección, esta lección, todo ese trabajo se habría perdido. Entonces es en tu mejor interés que al menos después de que termines de trabajar en una página y la tengas puesta en marcha, y está funcionando que lo revises en GitHub. Por lo que ahorras ese espacio en el tiempo. Cada vez que te registras en GitHub o en tu monitor de control de fuentes, es como si hicieras un marcador en la cantidad de trabajo que estás haciendo o tienes que hacer. Por lo que siempre es bueno mantener conos cortos. Y ya sabes, siempre tendrás una versión reciente encendida para retroceder a un en caso de que pase algo. Entonces con todo lo dicho, sigamos adelante y actualicemos nuestros cambios. Y si ustedes espero que hayan pasado y pongan en otras imágenes y actualicen otras cosas. No hay problema. Te voy a mostrar algunos de los otros cambios que hice. Algún modo muy menor. Por lo que en las velocidades de índice todo se cambió estos encabezamientos. Sólo algo. En lugar de golpear, golpear, golpear también arreglar el espaciado entre los encabezados y el deslizador simplemente introduciendo nuestra etiqueta de ruptura entre esos dos divs. Agradable y sencillo. la página sobre en realidad fue y me dieron mi pequeña imagen que está atascada para que se mire eso es lo que puede parecer si no fuiste a conseguir la imagen. Esto es lo que puede parecer. En este punto, no obtuve una imagen enorme, sólo. Obtuve la imagen de tamaño más pequeño en realidad de Pixabay. Para este particular aquí lo es. Acabo de descargar el 640 grande así sucesivamente o ella porque no necesitaba esa enorme imagen para caber en ese espacio diminuto. Por lo que siempre querrás asegurarte de que tu tamaño de imagen esté lo más cerca posible de lo que lo necesitas. No quieres que haya archivos enormes en tu sitio web para obstaculizar la experiencia del usuario en todo de forma rápida o cargas de sitios web. Y lo otro que hice fue simplemente mandar estos dos botones que son discurso de contacto. En ese punto, podría decirse que eso podría ser redundante porque más desalineada Página de contacto, frondosa BAC lo va a enviar a la página de contacto. Entonces en realidad, lo que voy a hacer aquí mismo, sé que parece un contratarme para realmente activar un e-mail. Está bien. Por lo que alguna vez hizo clic en barquero sabe sitios web? Fui a darle click. Está tratando de lanzar el correo electrónico o trae la dirección de correo electrónico a la que enviar la consulta. Eso es lo que vamos a hacer aquí. Entonces estoy saltando a mis botones y ambos van a los contactos. Pero éste que me contrate, voy a dar una directiva masculina 2. Y luego una dirección de correo electrónico. Voy a decir test example.com. Y nos dejarán ver lo que pasa cuando hacemos click. Entonces deja retroalimentación, vale, navega, está bien. No obstante, contratarme en realidad va a lanzar mi cliente de correo electrónico. No tengas más tú, el cliente completo, pero en realidad es lanzar mi cliente de correo electrónico e intentar enviar el correo electrónico allí. ¿Ves eso? Entonces eso es lo que el conjunto, ya sabes, puedes hacer que tu URL intentara enviar una herramienta de correo electrónico y dirección. Agradable y fácil, ¿verdad? Entonces como vamos adelante, como dije, a menos que aparezca un escenario a veces, quieres decir nunca tener que hacer algo cuando sube aquí, es bueno estar cómodamente y muchas veces todo entero. Puedes maniobrar la situación y conseguir lo que necesitas último. No obstante, no hay curso en la Tierra que sólo te vaya a enseñar cada cosa que necesitas saber en una sola sesión. Tienes que experimentar. Tienes que encontrar ciertas cosas por tu cuenta. Y así es como crecerás como desarrollador. Entonces con todo lo dicho y hecho cosa consiguió paseos para que se bajara. Adelante y verifiquemos nuestros cambios. Entonces vamos a ser tan importante para conseguir sección. Voy a decir mejor estilo a las páginas web. ¿ Todo bien? Y entonces sólo voy a seguir adelante y comprometerme. Di que sí. Y necesitamos sincronizar cuando 23 puntos tire, empuje y haga clic en sincronizar. Y luego voy a navegar al sitio en vivo. Entonces no voy a ir a GitHub a ver si funciona. Entonces esta es la prueba que fui a navegar al sitio en vivo. Todavía me encantan las URL en algún lugar y mira eso. Se actualiza automáticamente. Por lo que ya caminos que pasan por esa etapa de asombro donde simplemente difícil de GitHub actualiza nuestro sitio web. Bueno, solo te estoy mostrando esto es nuestra obra en vivo en internet. Ahora todos pueden ver qué es watt. Está bien. Otra modificación que creo que me gustaría hacer es cambiar la barra de navegación, el enlace activo cada vez que nos bro, así que para el contexto, déjame simplemente acercar lo más práctico. Por lo que te das cuenta de que toda la señorita tipo de resaltado y los demás son tipo de adultos. E incluso cuando hago clic en un perno, hogar sigue resaltado y contacto home sigue resaltado. Y la otra cosa también, que es una solución fácil, es que el favicon solo está en la página de inicio, que estoy seguro que conocemos el remedio a esa. Sólo tenemos que asegurarnos de 50 icono está en cada bala de playa. Creo que el tema de la barra de navegación es un tema más grande. Es algo que no es tan grande de un trato, pero al mismo tiempo queremos asegurarnos de que la experiencia del usuario sea buena. Por el momento que vamos a tener que emplear algunos Javascripts. Por lo que de vuelta en nuestro archivo de código, sabemos que tenemos script.js y ese es nuestro archivo de script para todas estas cosas. Tenemos algunos métodos costeros que en realidad sólo voy a borrar a los que son muestras. En ninguna parte va a hacer algo que realmente tenga sentido. Y vamos a estar mezclando algo de JavaScript y algunos jQuery para hacer esto. Y en esa nota, también queremos asegurarnos que nuestros archivos de script estén presentes en cada pH. Por lo que solo puedes copiar todo eso. Tenía que hacer eso. El bootstrap, el jQuery y el archivo de script, solo puedes copiar todo esto y asegurarte de que esté en cada página justo debajo de la sección de pie de página. Por lo que en un barco, debería estar debajo de la sección de pie de página. Simplemente colapsaría todas estas cosas, ¿verdad? Él lo puede colocar ahí. Y lo mismo para el contacto. De acuerdo, para que solo podamos escribir el guión una vez y sirva a través de todas las páginas. Entonces volvamos a nuestros guiones. Quería estar usando jQuery, alguien para hacer mi documento dot sintaxis de herencia. O simplemente podemos decir función de signo de dólar, abrir y cerrar, abrir y cerrar, abrir y cerrar, y luego cerrar. Por lo que siempre abran y cierran. Sólo refresco. No olvidamos cerrar. A pesar de que el editor pueda insinuarlo. Hay algunos editores que no necesariamente SE en dos así. Por lo que solo te enfades de hecho nuevo para que puedas reducir la probabilidad de obtener errores en función de tu entorno. Entonces lo que quiero hacer es una especie de cargar dinámicamente qué página tiene la octava. Entonces para el contexto, en nuestra barra de navegación, un poco removido que ya está comprado en la barra de navegación. Habrías notado que el enlace de inicio tenía activo. Creo que aún lo tengo en los contactos solo por referencia. El enlace local tuvo que dar su objetivo. Por lo que ataron el pasto activo y un dentro de esta zona, el coreano PJ. Entonces porque copiamos el código de bootstrap, se vino con eso en el ejemplo de que una página de inicio estaba activa. No obstante, en un sitio web real, no quieres, o puede ser tan fácil como tomar este código y ponerlo en el pH relativo, ¿verdad? Entonces si estoy en la página de contacto, entonces voy a ver el enlace de contacto es el activo y esa es la playa actual. Si quería morar página, no me parecía bien DO por supuesto, no, eso es introducir variación en la barra de navegación repentina. Por lo que saca una nueva página para ser lo suficientemente meticuloso como para recordar hacer eso. Y para mí eso es sólo un duro mantenimiento. Entonces sí tienes esa opción y esa opción funciona, funcionará bien. No obstante, quería ser un poco más dinámica. Entonces lo que voy a hacer en el archivo de script es primero sacar nuestro registro todos los caminos o a pj es que tengo. Entonces, solo vayamos tan lejos. Páginas. Y estoy dispuesto a hacer una arteria, ¿verdad? Por lo que las páginas tendrán una matriz que tenga los diferentes nombres de página. Indice habla de una bala tiene una página. Perdón, déjame conseguir mi contacto rojo derramado. Y entonces tenemos enlaces externos. Pero esa no es realmente una página PHP que acaba de hacer URLs. Entonces estas son las páginas con las que me estoy ocupando. Y si agrego otra página que acabo de añadir a ella, no estoy poniendo éxito porque también es un bar suficientemente montañoso, así que no necesito hacerla para institutos. Está bien. Entonces cualquier cosa que sea Atlanta dentro de la barra de navegación, solo extenderé esta lista en consecuencia. Entonces lo siguiente que quiero hacer es obtener el nombre de la ruta. Entonces var pathname, que cuando decimos path me sería la ubicación de punto de ventana. Creo que es pathname. Ahí vamos. Entonces, en otras palabras, dame la URL, ¿verdad? Entonces cuando estás navegando, estás en esta página, en esa página, etcétera, etcétera. En qué URL estás bien? Ahora, después de hacer todo eso, voy a armar un pequeño evento agradable o un evento click. Entonces voy a decir, Bueno en realidad estoy pensando hábitos. Entonces hago click evento podría ser un poco más de trabajo porque entonces tendría que averiguarlo. qué enlace se hizo clic. Y luego intenta localizar esa URL exacta y denotar a refactorizar lote. Entonces voy a hacerlo, voy a cambiar mi estrategia. En cambio voy a decir, dame todo el NovaLink, así nav link. Y luego voy a decir punto cada uno. Y espuma de mayor Sean, donde estoy tomando cada uno que se está iterando de nuevo, es aseverar se mete en una variable llamada i Muy bien, así que en otras palabras, consigue todo con el enlace de navegación de clase. Ésas son nuestras reuniones de clase. Entonces nada no es pestañeo. Novalink es la clase que se da a cada ítems de navegación ya sea nav link, link, ¿verdad? Entonces los estoy consiguiendo a todos. Entonces tantos enlaces como tal vez en la playa, sólo voy a conseguir todos ellos y pasar por cada uno. Y para cada uno Eso es lo que estoy mirando, lo estoy llamando I.Muy bien. Entonces entonces en ese punto fui a ver si el nombre de la ruta o, o simplemente obtuve la URL en la que estamos. Si el punto tema de la ruta incluye, es decir, sea cual sea el tema de la ruta, si de alguna manera incluye este elemento de navegación en particular. Muy bien, así que voy a comparar el nombre del elemento de navegación con el nombre de la página. Y si el que estoy en alguna espera ese nombre está involucrado están incluidos en el pathname. Entonces, ¿qué quiero hacer? Entonces esta es una declaración if. Entonces si, si esto es cierto, entonces haga esta afirmación esta subasta. Y luego voy a tener un otro si para ver este nombre de clase de punto. Dot incluye, es decir si el elemento en el que estamos, no, si el nombre de la clase ya incluye hasta entonces queremos hacer otra cosa. Entonces solo te estoy dando las condiciones son el esqueleto. Entonces tienes una idea de lo que estamos tratando de lograr. Entonces si la página en la que estamos no mucho es una de estas del índice, entonces yo quiero, o de la ironía es lamentar. Entonces quiero ver a ese dalda diciendo este sermón. Pero cuando alguna vez se quiere conseguir el elemento que estamos en durante el desencadenamiento apagado en evento nuestra función, tenemos la palabra clave, esta clase de punto. Entonces esa es una de esas cosas dinámicas que podemos hacer. De lo que vemos sobre la marcha. Por favor agregue la octava clase. Y luego vimos eso para tocar algo de antes. Aria página actual, alguien para agregar en atributos que dice REO, página actual también. Está bien. Ahora si la segunda condición es verdadera media en el nombre de la clase incluye activo ya, entonces solo voy a decir eliminar la clase activa. Entonces no queremos que tenga dos octavas si ya está viendo hasta el corte t, pero asegúrate de agregarlo si estamos en esa playa de carrito. Entonces creo que eso está hecho. Vamos a probar y ver y quieres asegurarte de que tus páginas estén en el mismo orden que aparecerían en la barra de navegación. No los mezcles y emparejen. Está bien, Así que indexa luego un barco y contacto. Entonces en el código en cualquier lugar Eso es yo tenía todo el activo siendo codificado duro y el área pj siendo codificado duro. Yo voy a quitar eso. Entonces no, fui solo el jQuery para hacer todo ese trabajo arduo en el bug crecido para mí. Por lo que lo quité del filo. Y también se retira de esa tabla de páginas, el área según pij. Y entonces hagamos esto para dar una vuelta. Entonces nos embarcaremos aquí, o lo es, o en el índice supera los puntos destacados que hacemos clic en nuestros barcos todos miran eso. Cambió. Hacemos click Contactar, se cambia en un barco. Nuestro hogar en ella genes. Por lo que dondequiera que vayamos, se ve que definitivamente cambiará. Entonces no, con todo eso cambiaron amanecer y anochecer por integridad antes de no conocer el pollo, solo voy a asegurarme de que todas las páginas del ícono o el logotipo de la empresa en su código, entonces solo saltaré para conseguir y luego pondré mi mensaje. Hice dinámicas, nav links, seguir adelante y comprometerme localmente. Dirán siempre. Y luego después de que se complete ese comité, solo seguiré adelante y sincronizaré para que empuje nuestros cambios y luego podamos darle tal vez unos minutos o 30 segundos como tallo. Y entonces deberíamos poder ver nuestros cambios reflejándose en la página web en un orden muy corto. Y ahí vamos. Entonces ya estoy navegando y ves que las páginas se están cambiando en consecuencia. Está bien. Y luego porque hay un retraso en cuando sucede, porque la página se carga que los drones de guión que ves tipo de alimenta, ¿verdad? Entonces es un bonito efecto, el beige cargado sin él y se dan cuenta, Oh, necesito hacer esto. Entonces simplemente parece un efecto de desvanecimiento. Está bien, así que creo que eso es todo para las actividades del sitio web de código OBC. En este punto, has aprendido mucho. Tienes, debes estar al menos cómodo con la sintaxis HTML básica. Pero una vez más, solo tienes que practicar y la mitad de los experimentos. Y esa es la única forma en que realmente, de verdad, verdad creces en esta disciplina.