Codifica tu propio sitio web (fundamentos de HTML y CSS)

1. Introducción: Hola, soy Matthew de códigos Brandon. ¿ Alguna vez has querido crear tu propio sitio web pero piensa que podría ser demasiado difícil? Bueno, en este curso, te voy a enseñar que la codificación puede ser divertida y fácil que eso. Podrás crear un sitio web profesional y un lodo nuestro. En este curso, vamos a crear este increíble sitio web usando sólo HTML y CSS. En este curso, aprenderás las herramientas que necesitas para crear un sitio web. Fundamentos de HTML, CSS, fundamentos, tipo progreso en un Bootstrap. Altura de juntar todo y crear tu primer sitio web, yo Omega mobile responsive. Y por último, Haida albergó. Si todo eso suena bien y ya estás listo para aprender, entonces vamos a sumergirnos enseguida. 2. HERRAMIENTAS: Echemos un vistazo a las herramientas que vas a necesitar para crear tu primer sitio web. El primero dicho que necesitamos, probablemente ya lo tengas, y eso es un navegador web. Entonces para esto, puedes usar Firefox, puedes usar Chrome, o puedes usar una gama de colores. Por ejemplo, Safari. Para este tutorial, voy a estar usando firefox, ¿está ahí como mi Fraser preferido. Pero te voy a mostrar cómo puedes resolver algunas de las cosas que requerimos en Chrome también. Lo siguiente que necesitamos como Herramientas de Desarrollador o DevTools para abreviar. Estos son programas Bell en pastores modernos que te permiten crear, probar y depurar código. Navegadores actuales como Firefox y Chrome tienen estos integrados y permiten inspeccionar el sitio web. Podrás cambiar el HTML, CSS, y JavaScript de la página. No te preocupes si aún no sabes lo que significan esos. Estaré enseñando que vigilen cada una de esas puertas muy pronto. Pero por ahora, déjame mostrarte cómo abres DevTools en Firefox y Chrome. Empezaré con Chrome aquí. Y todo lo que necesitas hacer es hacer clic derecho en cualquier parte de la página web y presionar Inspeccionar. Ya sabrás que el DevTools ha cargado para Firefox. Es proceso similar. Haga clic derecho en cualquier parte de la página y haga clic en Inspeccionar elemento. Sabrás que el DevTools se ha cargado. Como demostración rápida. En DevTools, podemos realizar cambios en el HTML de la página. Por ejemplo, puedo cambiar este botón para decir clases, o podemos hacer cambios CSS. Por ejemplo, puedo cambiar este color de encabezados para que se lea. De nuevo, no te preocupes si aún no entiendes completamente qué HTML y CSS. Esto es sólo una demostración de lo que podemos hacer. Y DevTools, de nuevo, algo que puedes cambiar con DevTools es donde la posesión de esta barra de herramientas ya que al hacer clic en los tres puntos aquí, puedes optar por oscurecer a la tasa, por ejemplo, o puedes acoplarla a la izquierda. También puede separar la barra de herramientas eligiendo ventana separada. Y esto permite ponerlo en un segundo monitor. Por ejemplo. Para este tutorial, voy a ensamblar acoplarlo al fondo de las páginas. La última herramienta que necesitamos una posiblemente la más importante, es un editor de código. Te recomiendo y utilizo el editor de código gratuito, cual puedes descargar un diodo. Pero si otros de USU como Sublime Text, Vamos a la fama ya que podrás seguir menos tutorial, es todos los editores de código son vagamente iguales. Entonces para recapitular y para asegurarte de que estás listo para empezar. Los dedos de los pies que necesitamos son un navegador, Firefox o Chrome DevTools en ese navegador, y un editor de código como arm. 3. Materiales: Antes de continuar con este curso, necesitarás descargar los materiales que he preparado para ti. Eso se puede hacer desplazando muriendo e yendo a la pestaña de proyectos y recursos. Y luego a la derecha bajo recursos dirás necesario para curso perros app. Para descargar este archivo conjunto, basta con hacer clic en el título necesario para el concepto core. Una vez que hayas iniciado esta carpeta, puedes hacer click en la carpeta necesaria para el curso y encontrar todos los materiales del curso que necesites. Verás una carpeta de ejercicios la cual incluye un archivo HTML de inicio, una imagen que nos usaremos para nuestro primer ejercicio. También verás una carpeta de sitio web que incluye un archivo HTML inicial y las imágenes que necesitamos para este curso. Y por último, dirás que necesitaba para carpeta de ejercicios que contenga el marco Bootstrap. Entraremos en esa capa con más detalle. Una vez que tengas descargada esta carpeta, ya estás listo para continuar en este curso. 4. Fundamentos de sitio web: Por lo que antes de empezar a construir nuestro sitio web es realmente importante para entender los fundamentos. ¿ Cuáles son los sitios web? Madoff. Para que esto sea fácil de entender y querer usar una metáfora. Y es decir, un sitio web es como una casa. Podrían explicar. Cuando pensamos en los componentes principales que conforman un hace, podemos pensar en la libertad, el look, y las piezas en movimiento. Cada uno de estos componentes principales de un anfitrión en realidad es igual a un componente importante de la construcción de un sitio web. Entonces cuando pensamos en la libertad de un anfitrión y términos de un sitio web, ese sería el HTML. Html significa Lenguaje de marcado de hipertexto. Html para abreviar. El marco del anfitrión compone las habitaciones, compone el diseño, y compone la estructura de la misma manera que un sitio web tiene secciones, cabeza u cuerpo para. Y cada sección contiene imágenes y textos. Por ejemplo, hay maquetación, hay libertad. La estructura está definida por HTML. Entonces si echamos un vistazo a este ejemplo HTML, Es importante tener en cuenta que estos no son elementos HTML reales, pero el diseño es correcto en cuanto a cómo usarías HTML. Y creo que esto realmente ayuda a ilustrar exactamente cómo lo usarías. Html tiene una etiqueta de apertura y cierre y terminarlas etiquetas, tendrías elementos. Por lo que se puede ver una etiqueta de apertura y una etiqueta de host de cierre con n que tenemos el segundo piso. Y dentro del segundo piso, tenemos la recámara con en el primer piso, tenemos 11 habitación. Tenemos una entrada, y dentro de las habitaciones, tenemos la puerta principal. Por lo que se puede ver cómo HTML definiría la estructura de un atraco. Con este ejemplo, vamos a estar usando HTML exactamente de la misma manera para definir la estructura de nuestro sitio web. A continuación se trata del look de los términos de la casa y del sitio web, estaremos usando CSS para definir el look. Css significa Cascading Style Sheets o CSS para abreviar. Se trata de un lenguaje de acordes el cual nos permite definir la apariencia de los elementos HTML. En nuestro ejemplo de casa, no todas las habitaciones, mesas y sillas lucen igual. Palabras e imágenes traviesas en un sitio web. Css define cómo se ven los elementos, describiendo sus colores dice Posesión, nave, y más. Aquí te dejamos otro ejemplo rápido de cómo reducimos CSS para diseñar el look o para los hosts. Podemos ver que hemos definido un elemento, así recámara. Y luego dentro de ese elemento con definido como ancho, su altura, las paredes, y el piso. Nuevamente, se puede ver que tenemos golpe de interruptor tardío definiendo un elemento HTML o el interruptor de luz apagado de su casa. Y se puede ver tenemos la distancia del piso y la nave. Nuevamente, estos no son elementos HTML reales. Esto es solo una simplificación excesiva para ayudarte a entender el vínculo entre CSS y HTML. Por lo que por último, en un host se ha movido de piezas como muestras tardías serían JavaScript. Javascript se utiliza para crear elementos interactivos en nuestro sitio web. Agradécele a los deslizadores, piensa pop-ups. No nos vamos a centrar en JavaScript y este tutorial. Entonces por ahora, todo lo que necesitas saber es que JavaScript carreras y son elementos activos en un sitio web. Entonces, para recapitular, cuando se trata de los elementos que conforman un sitio web, piense en una colmena. Para la libertad, para la estructura, utilizamos HTML, para el look y la apariencia. Utilizamos CSS. Y para mover piezas, usarías JavaScript. Entonces en este tutorial, te voy a mostrar cómo usar HTML y CSS para crear tu primer sitio web. Vamos a crear la estructura del sitio web o el marco del sitio web utilizando HTML. Y luego vamos a usar CSS para definir cómo se ve el sitio web, los esquemas de color, los granos de bolsa, la topografía, y la apariencia general. Esto te permitirá tener un sitio web altamente personalizado y además tuvo las habilidades para poder crear cualquier diseño de sitio web y cualquier apariencia de sitio web que desees en el futuro. 5. Conceptos básicos de HTML: parte 1: Es hora de empezar a codificar. Empecemos con HTML. Html, como ya se mencionó, es enmarcar o estructura de nuestro sitio web. Cada sitio web tiene cinturón con elementos HTML. Cada elemento tiene algo en él, como texto o una imagen. Tenemos diferentes tipos de etiquetas HTML con las que podemos jugar. Y cada una de estas etiquetas representa diferentes tipos de contenido. Por ejemplo, tenemos encabezados, párrafos, imágenes, y más. Entonces a la hora de escribir nuestro HTML, es importante utilizar elementos semánticos. ¿ Cuáles son los elementos semánticos? Los elementos semánticos son elementos con un significado. En HTML, cada etiqueta tiene su propio significado, tiene un ejemplo de elementos HTML semánticos. Si quisiéramos escribir un párrafo, abriríamos con la etiqueta p. Al ser éste el elemento HTML párrafo. Escribiríamos nuestro párrafo y luego cerraríamos con un cierre p, donde párrafo, elemento HTML. Este ejemplo es la codificación semántica. Es hora de empezar a codificar. Antes de empezar a codificar nuestro propio sitio web, Hagamos un rápido ejercicio HTML y CSS para aprender lo básico. Después la LU completa, verás dos carpetas, ejercicio y página web. Abre la carpeta de ejercicios. Y he incluido un archivo HTML de escala e índice a su escritorio en su editor de código, simplemente haga clic y arrástrelo al brazo, están en los datos centrales o están utilizando. Y verás que la escala en el ejercicio HTML falla se abre. Entonces déjame hablarte a través de lo que ya está incluido en este archivo HTML. En la parte superior, tenemos una declaración de tipo doc. Esta declaración no es una etiqueta HTML. Su información al navegador sobre qué tipo de documento esperar. Esto debe incluirse en todos los archivos HTML. Y le permite al navegador saber que está cargando un archivo HTML. El siguiente elemento es la etiqueta HTML. El tag HTML es un contenedor para todos los demás elementos HTML excepto el tipo doc. Por lo que n de m con n, la etiqueta HTML se renderizará en tu sitio web. Aviso hey, hay una etiqueta HTML de apertura y una etiqueta HTML de cierre. ¿ Cómo sabemos que se trata de una etiqueta HTML de cierre? Por la barra delantera. Y la etiqueta de apertura no tiene barra. Una etiqueta de elemento HTML de cierre tiene una barra inclinada hacia adelante. Por lo que tenemos nuestras etiquetas HTML, y si suficiente de ellas las etiquetas HTML se renderizarán como nuestra página web. A continuación tenemos las etiquetas de cabeza, y muchas veces se incluye dentro de las etiquetas de cabeza no se renderiza en la página web. En cambio, esta área se utiliza para incluir metadatos o información sobre la propia página HTML. lo primero que he incluido aquí es el juego de caracteres. Por ahora. Sólo vamos a saber que esto es súper importante haber incluido. Pero no voy a entrar en detalles de una palabra personaje decir es porque creo que simplemente te confundiría en esta etapa. Simplemente sepan que es importante tener eso incluido. Tenemos el título incluido dentro de la cabecera, y eso es muy Asamblea el nombre de la página HTML. Ahora obviamente no queremos que eso se muestre en la propia página. Pero es importante que el navegador sepa cuál es el nombre o título fuera de las páginas. Por lo que está incluido en la cabeza. Otros ejemplos de elementos que incluirías en las etiquetas del encabezado son las descripciones fuera de la página. Entonces si alguna vez has hecho una búsqueda en Google, las descripciones de página que ves en los fragmentos están realmente incluidas en el encabezado de una página. También podemos usar el cabezal para incluir archivos externos, algo que vamos a estar haciendo más adelante en este curso. Por lo que podemos incluir archivos CSS externos para ayudar con el aspecto de nuestra página web. Y esto está todo incluido en las etiquetas de cabeza. Por lo que de nuevo, este es un área de información o ambos. El área benigna de la página para cosas que queremos que se muestre en la página 49 para irse, esto es todo lo que necesitas tener incluido dentro de las etiquetas de la cabeza. A continuación tenemos las etiquetas del cuerpo. Y si los empleadores para defender las etiquetas del cuerpo se mostrarán y renderizarán en su navegador sitio web de Azure. Esta es la zona que ponemos todos nuestros elementos HTML, como encabezamientos, párrafos, imágenes, tablas, etc. En realidad, cualquier cosa que cinta y aquí se mostrará en tu página web. Por ejemplo, si una cinta algo, y ver si lo que se puede hacer al ir a fallar. Mar de o presionando control y S y descargando nuestra página HTML y nuestro navegador. Qué puedes hacer yendo a la carpeta de ejercicios y haciendo doble clic en el index.html. Se puede ver que en nuestra página web, cualquier cosa se está mostrando. Obviamente, esto no se ve muy bien y no sería para una muy buena página web. Pero no sólo eso, no acordamos esto semánticamente. Veamos cómo podemos acortar el texto semánticamente en nuestro documento HTML. Al volver a subir el editor de código, voy a quitar cualquier cosa. Y ahora voy a añadir un encabezamiento, 2 partidas yadda. Vamos a abrir nuestra etiqueta. Vamos a tomar la edad para dirigirnos y vamos a panear uno. Se pueden utilizar los números uno a seis para los encabezamientos. Por lo que H1, H2, H3, etc. Sin embargo, H1 es la etiqueta de encabezamiento más empoderante. Entonces si estuviéramos escribiendo el encabezado de un artículo, usaríamos H1 porque ese es el elemento de encabezado HTML más importante. Y vamos a calificar un rumbo. Bienvenidos, alumnos de Skillshare. ¿ Qué falta en este carril HTML? Eso es tasa, debemos cerrar la etiqueta HTML. Para hacer eso. Volvemos a abrir la etiqueta HTML, pero esta vez usamos una barras inclinadas hacia delante, hacia adelante que denota un elemento HTML cerrado. Y luego volvemos a tomar el elemento HTML CMB. Para que veas tenemos una etiqueta H1 de apertura y una etiqueta H1 de cierre. Antes de encabezar entre los dos elementos. Voy a ver si esta página presionando Control S. Y voy a volver a subir el navegador. Y voy a refrescar la página. Se puede ver lo que acabamos de agregar en nuestro archivo de código está mostrando en nuestra página web. Déjame mostrarte rápido, oye, DevTools funciona ahora. ¿ Recuerdas cómo abrir DevTools? Hacemos clic derecho y presionamos Inspeccionar Elemento. Si echamos un vistazo a nuestro documento HTML aquí, se puede ver tal como describí, cualquier elemento dentro de las etiquetas HTML head no se muestra en nuestra página. Después puedes ver nuestras etiquetas corporales y el encabezado que acabamos de agregar. Podemos hacer cambios talentos simplemente haciendo clic en el elemento HTML. Queríamos cambiar. Hacer clic en el elemento y agregar, por ejemplo, texto. Yo puedo cambiar. Bienvenidos, por ejemplo, a hola. Al presionar Enter, verás que se ha hecho este cambio. Algo realmente importante para entender un poco dev dice que sólo estamos haciendo estos cambios localmente y estos cambios no se están guardando. Entonces eso es cambio. Acabo de espejear página TR. Cuando una actualización, verás que el cambio no ha sido mar de. Eso se debe a que solo estamos haciendo los cambios y nuestro navegador. Y sólo somos magnum localmente. Para que este cambio suceda, necesitamos volver a nuestro editor de código. Tenemos que hacer el cambio en nuestro documento HTML real. Necesitamos un mar del documento HTML. Y luego cuando refresquemos nuestra página, se puede ver que el cambio ha sido medido permanentemente. 6. Conceptos básicos de HTML: parte 2: Vamos a crear un sitio web realmente básico que incluya un encabezado, párrafo, imagen, un enlace a otro sitio web, y un último salto de vuelta al archivo index.html del ejercicio. Si has cerrado el index.html muriendo de nuestra última lección a bolsa escolar en la carpeta de paquetes, ve a hacer ejercicio y luego arrastra el archivo index.html a tu editor de códigos. Eso elimina el rubro que agregamos en el ejercicio anterior ya que queríamos empezar de nuevo y crear este sitio web muy básico, voy a añadir un nuevo encabezamiento. Otra vez. Voy a usar una etiqueta H1 como el rubro más importante. Y yo solo voy a tomar esto como un sitio web básico, pero puedes agregar donde sea que vayas. De lo que falta. Nuevamente, necesitamos cerrar la etiqueta HTML. Eso lo hacemos con una slash hacia adelante. Y luego el H1. Ahora queremos añadir un párrafo. Para eso, usamos la etiqueta p, P de pie para párrafo. Y luego queremos agregar algún texto de párrafo. Aquí puedes escribir lo que quieras. Pero si necesitas algunos textos muy rápidamente como marcador de posición, Hay algo realmente útil en el desarrollo web llamado Lorem Ipsum. Si vas a Google y escribes lorem ipsum generator, encontrarás una gama de sitios web que generan textos de blog para ti muy rápidamente. Vamos a utilizar este en esta demostración y generar un párrafo. Ahora bien, esto no es inglés y no tiene sentido, pero se utiliza en desarrollo web para bloguear áreas de un sitio web muy rápidamente. Cuando no estamos del todo seguros de qué texto vamos a fingir allí todavía. Entonces voy a copiar y PSD para mi párrafo. Voy a perforar como n. y sabemos como un problema molesto. El texto es tan grande que se empuja los Chordata están todo el camino hacia el lado derecho. Ahora puedes llamar al vaso, sin embargo, lo encontrarás bastante irritante. Por suerte, sin embargo, Adam y casi todos los editores de código tienen una característica para detener esto. Todo lo que tienes que hacer es ir a View y alternar soft wrap. Lo que es este Dawes agarra el texto dentro la ventana del editor de código y detiene que tengas que moverte a izquierda y derecha para ver. Qué falta de este elemento de párrafo. Eso es correcto. Tenemos que cerrarlo. Veamos ahora de esto y veamos cómo se ve en el navegador. Voy a volver a ver esto presionando control y S. Y voy a cargar nuestra página web y actualizarla. Se puede ver el encabezado se muestra y el párrafo se muestra. Para ver estos elementos HTML en DevTools, simplemente haga clic derecho, vaya a Inspeccionar elemento. Y se puede ver dentro de nuestro cuerpo tenemos un encabezamiento y un párrafo. Ahora vamos a conseguir, permitirles más avanzados y añadir una imagen a nuestro sitio web. Dentro de nuestro editor de código, voy a tomar un nuevo carril y voy a añadir la etiqueta HTML de imagen. Esta es una etiqueta más avanzada. Y así hay algunas cosas que debes saber sobre la etiqueta de imagen. Al no ser un CME como etiqueta de párrafo y encabezamiento, la etiqueta de imagen requiere un atributo. Un atributo es información dentro de la propia etiqueta HTML. Para una imagen, necesitamos agregar SRC, que significa fuente, la fuente de la imagen. Entonces necesitamos poner un igual y dentro de los corchetes, necesitamos escribir el camino de la imagen. ¿ Cuál es el camino de la imagen? Echemos un vistazo a nuestra carpeta de ejercicios. Dentro de nuestra carpeta de ejercicios, verás que hay una carpeta de imágenes. Al mover la carpeta de imágenes, hay una imagen que es la ruta que requerimos. Caminos pueden ser bastante complicado, sobre todo como principiante de entender y manera fácil de recordar cómo hacerlo como imagina que estabas describiendo a index.html, cómo encontrar el daño. Por lo que le dirías a index.html primero ir a la carpeta de imágenes y luego terminará la imagen. eso se le llama ejemplo dodge JPEG. Entonces de nuevo, imaginemos que lo estamos describiendo a index.html cuando lo agregamos a nuestra fuente, primero, tenemos que ir a la carpeta de imágenes. Después agregamos una barras inclinadas hacia adelante. Y dentro de esa carpeta de imágenes, queremos el ejemplo de la imagen JPEG dot. Entonces tenemos la carpeta y luego tenemos el nombre de la imagen dentro de esa carpeta. Por lo que tal vez sepas diciendo, necesitamos cerrar esta etiqueta HTML. Al hacer esto, sin embargo, estarías equivocado. Las etiquetas de imagen difieren de las etiquetas de encabezamiento y las etiquetas de párrafo porque se conocen como elementos vacíos. Los elementos del vacío no pueden tener ningún contenido. Piénsalo. Una imagen no puede tener ningún texto con Anna porque es una imagen. Por lo tanto, es un elemento vacío. Entonces en cambio tenemos que cerrar la etiqueta un poco diferente. Para cerrar elemento de evitar o cerrar una etiqueta de imagen, simplemente agregamos una inclinación hacia delante antes del corchete angular final. Esto ahora es una dolencia de vacío cerrado o una etiqueta de imagen cerrada. Veamos un vasto NIH presionando control y S y refrescando nuestro sitio web. Podemos ver que la imagen como NIH, mostrando que hay sin embargo, un atributo más que siempre debes incluir en tu etiqueta de imagen. Si volvemos a nuestro editor de códigos, voy a tomar ALT. Alt significa texto alternativo. ¿ Por qué necesitamos texto alternativo dentro de nuestra etiqueta de imagen? Por lo que la razón principal de esto es para la accesibilidad. Usuarios que no pueden ver las imágenes y utilizan un programa de texto a voz. Utilizar texto alternativo para entender cuál es el daño, como. También es útil para cuando la imagen no se carga. Por ejemplo, si falta el daño o tienes la ruta lanzada, se mostrará el texto antiguo para que los usuarios sepan qué debería haber allí. Para agregar texto alternativo, simplemente escribe ALT, que ya tenemos, es igual a un proveedor EMR marcas de voz simplemente agrega una descripción rápida de lo que los daños. Entonces me voy a llevar. Esta es una imagen de ejemplo. Veamos si STI y vuelve a nuestro navegador y refresca la página usando DevTools, puedes ver que ahora se incluye este texto alternativo para darte una demostración de cómo se ve esto. Si, por ejemplo falta la imagen o se puede cargar, voy a romper el camino. Entonces voy a hacer que el camino apunte a una imagen que no existe. No voy a pegarle a Enter. Y se puede ver que debido a que la imagen no se puede cargar, el texto alternativo se muestra como un resto. Cualquier cambio realizado en DevTools no se guarda, por lo que podemos revertir su ensamblado de espacio actualizando la página. Ahora agreguemos un enlace. Vuelve al editor de códigos. Voy a añadir este enlace arriba o imagen. Entonces voy a agregar una línea por encima de la etiqueta de imagen y cinta angular corchete a. La a etiqueta define un hipervínculo que se utiliza para enlazar de una página a otra. El modo en que funciona la etiqueta a es con otro atributo. Y vamos a tomar RREF, que significa referencia de hipertexto. Básicamente es el enlace a la página web al que quieres que te lleve el botón. Para esto, voy a enlazar con Skillshare. Por lo que voy a teclear www.skillshare.com dentro de las marcas de discurso. Podemos entonces cerrar la apertura una etiqueta. Ahora necesitamos cinta lo que queremos que sea el texto del botón. Entonces voy a filmar esto es un enlace. Y entonces tenemos que cerrar esta etiqueta, el CME como encabezamiento o elemento de párrafo. Hacemos eso por el corchete angular, inclinada hacia adelante, luego a. Entonces lo que tenemos aquí es una etiqueta de enlace. Tenemos la apertura un elemento. Tenemos un atributo H ref, que nos va a llevar a skillshare.com. Tenemos el texto del botón y luego tenemos el cierre un elemento HTML. Voy a conocer C de esto e ir a nuestra página para refrescar la página. Cuando actualizamos nuestra página del navegador y buscamos un enlace, tal vez te preguntes si falta. Cuando desplázate hacia abajo, notarás que está al lado izquierdo del daño. ¿ Por qué es esto? Esto se debe a que no especificamos que queremos que la imagen esté en un nuevo carril. Por lo que el enlace y la imagen están en la línea de costura. Defectos esco volver a nuestro editor de códigos. Y en medio de la a tag para un link y la etiqueta de imagen para nuestra imagen. Agrega un nuevo carril y cinta BR barra inclinada hacia adelante, soporte angular. Br significa break o line break es evitar elemento de un CV no puede agregar nada dentro de un salto de línea. Por lo tanto, pistas evitamos elemento mediante el uso una barras inclinadas hacia adelante antes del soporte del ángulo de cierre. No necesitamos etiquetas y abrir y cerrar etiqueta, muy parecido a una imagen. Agregando este salto de línea, ningún medio del daño estará en una nueva línea. Ahora si tocamos Control S para ver si volvemos a nuestro navegador y refrescamos la página. Se puede ver que ahora tenemos el enlace, un salto de línea y la imagen debajo de él. Ahora vamos a probar nuestro enlace y a ver qué pasa. Este es un enlace. Es posible que sepas que hay mensaje de error y que en realidad no nos llevan a través del sitio web de habilidadescompartir, cual ingresamos para el enlace. Echemos un vistazo al código y comprendamos por qué estamos recibiendo este mensaje de error. Construyendo el editor de códigos. Podemos ver que no pusimos un HTTP que acabamos de empezar con www dot. Debido a esto, el enlace piensa que es una URL relativa. Arraylist de URL asume que la longitud que agregó está en el mismo sitio y como parte del dominio de deshacerse de CME. Por lo que cuando miramos nuestro elevador y lucir en el link trató de llevarnos. Se puede ver que en realidad es buscar en, en la carpeta de ejercicios para www.skillshare.com. Esto está mal. Debemos utilizar una URL absoluta. Por lo que debemos agregar puntos HTTP, barra inclinada hacia adelante, barra inclinada hacia adelante. Ya puedes ver el enlace en AM cambia azul ahí muestra que es una URL. Nuevamente, voy a ver si voy a mi navegador, regreso a nuestra página de ejercicios y refresco. Ahora cuando haga clic en el enlace, verás que te lleva a skillshare.com. Ahora por fin, agreguemos una lista a nuestra página web, construyendo el editor de códigos. Y vamos a tomar una nueva línea. Y voy a añadir UAL. Podemos usar las etiquetas OL o UL para nuestra última. Ol significa lista ordenada y GL significa lista desordenada. Empecemos con nuestra lista desordenada. Después de nuestra etiqueta UL de apertura, vamos a añadir otra etiqueta HTML. Y eso es ALA. El tag LI es un día menos m con n LST. A esto se le llama elemento HTML hijo. Por lo que tenemos un último honrado. Después terminaremos la lista desordenada. Contamos con un ítem de lista. Voy a enumerar todas las cosas que vas a aprender en este curso. Entonces voy a escribir HTML para el primer elemento de mi lista y luego voy a cerrar esa etiqueta de la misma manera que cerraríamos un encabezado o una etiqueta de párrafo. Voy a añadir un segundo artículo a nuestro último. Por lo que agrego otra etiqueta abierta ALA y voy a añadir otro en cubitos soy, voy a añadir otra etiqueta de cierre. Voy a añadir un tercer artículo. Y lo voy a cerrar, y voy a sumar una cuarta. Y finalmente, um, así que ahora tenemos cuatro o menos DEM fueron entonces nuestra lista desordenada. Pero debemos cerrar nuestra lista desordenada. Para ello, tomamos una etiqueta UL de cierre. Entonces, para recapitular, tenemos una etiqueta UL de apertura. Tenemos cuatro hijos, etiquetas LI con elementos HTML de apertura y cierre. Y luego tenemos nuestra etiqueta UL de cierre. Conozcamos CFS y acceda a nuestra página web. Vamos a refrescar la página. Y la imagen borrosa que verás son todos lista desordenada. Si queremos una lista ordenada, algo llamado de nuevo al editor de códigos y cambia URL a tu, bueno, vamos a ver si eso vuelve a nuestra página web y refresca. Ya verás que tenemos una lista ordenada. 7. Conceptos básicos de CSS: Ahora echemos un vistazo a los conceptos básicos de CSS, un nuevo CSS en el sitio web de ejemplo que hemos estado creando. ¿Qué es CSS? Css, si recuerdas, es el aspecto de tu sitio web. Entonces cuando el anfitrión Mao para que usamos al inicio de este curso, el HTML era la libertad y el CSS era lo que dan a mirar a nuestra libertad están ahí a nuestra página web. Entonces si echamos un vistazo a nuestro sitio web en el Bennett, estarás de acuerdo en que se ve de manera. No es genial. Pero ahora vamos a afectar con CSS. Cuando se trata de usar CSS, hay tres formas en las que podemos usarlo. Al lado de nuestro HTML. Tenemos n ln, CSS y código CSS de fallo externo y CSS incrustado en HTML. Para este curso, sólo nos vamos a centrar en uno. Y eso es usar un archivo CSS externo. Entonces, ¿cómo creamos ese archivo CSS? Abre la carpeta de ejercicios, crea una nueva carpeta. Puedes ponerle el nombre que quieras. Pero para mantener las cosas fáciles de entender, llamémoslo estilo. Dentro de esa carpeta, Vamos a crear un nuevo archivo CSS. El modo en que me gusta hacer esto es simplemente crear un nuevo documento de texto. Voy a llamarlo hoja de estilo. Voy a cambiar la cinta de documento rasgar documento CSS. Y lo voy a hacer simplemente colocando un punto y enredo CSS y teniendo un error, obtienes un mensaje, entonces sabes que vas a cambiar la cinta de extensión y que la cinta fallida va a cambiar. Pero queríamos hacerlo. Entonces vamos a pegarle Sí. Y sabemos que tenemos un documento CSS. Abramos ahora su documento CSS. Un archivo CSS en nuestro editor de código. Alguien arrastra hojas de estilo o CSS sobre átomo o los datos centrales o estás usando. Y verás abierto tu documento de Hoja de Estilo en Blanco para que quisieras buscar nuestro archivo HTML o index.html y o una hoja de estilos, archivo styles.css al mismo tiempo. Para hacer lo que, voy a hacer clic derecho en hojas de estilo o CSS, y voy a golpear Tasa de Split. Ahora podemos cerrar la hoja de estilo dot css y la ventana izquierda PM. Y aquí tenemos el documento HTML en el lado izquierdo y nuestras hojas de estilo o CSS en el lado derecho. Se podría notar que el texto es permitir grande aquí. Sí lo tengo más grande que estándar en cuanto a este video. Pero puedes cambiar la etiqueta dice yendo a Ver y aumentar o disminuir el tamaño de fuente. También puedes usar Control Shift más o menos. Entonces voy a reducir el tamaño de S Ahora solo para que sea más fácil ver más de ella en la pantalla. Entonces, ¿cómo funciona CSS? Aquí tienes un ejemplo realmente simple de un carril de CSS. puede ver que está conformado por un selector, una declaración. Y dentro de esa declaración tenemos una propiedad y un valor. Si miras el selector, verás que dice H1. Y eso vincula directamente al elemento de encabezado HTML H1 que agregamos en nuestro documento de ejemplo. Esto básicamente significa que cualquier declaración que tengamos dentro del selector CSS afectará a todos los encabezamientos H1. Al mirar la declaración, podemos ver que tenemos dos. Debajo de la primera, tenemos una propiedad de color y un valor de azul. Si aún no lo has adivinado. Eso significa que estamos cambiando el encabezado H1 elemento HTML para tener el color del azul. Y también tenemos tamaño de fuente 12 pixels. De nuevo, si aún no lo has adivinado, eso significa que estamos cambiando los encabezamientos A's a 12 píxeles. Esa es mi tarifa. Algunos CSS, por ejemplo, sitio web. Al mirar a nuestro editor de códigos, quería cambiar el tamaño de fuente del párrafo. Entonces voy a tomar P como eso vincula directamente al elemento HTML. Y luego vamos a tener un soporte rizado abierto y un soporte rizado de cierre. Al golpear Enter, puedo tomar una declaración y un valor dentro de estos corchetes rizados. Entonces voy a escribir tamaño de fuente. Y voy a hacer que las etiquetas realmente embolsen solo para que podamos ver realmente fácilmente el cambio conmigo. Y así lo voy a hacer por una pérdida de paquetes, que es realmente grande. No voy a ver de la hoja de estilo presionando Control S. Y voy a ir a nuestro navegador. Voy a refrescar la página. No pasó nada. ¿Por qué no ha pasado nada? Esto se debe a que no tenemos archivo CSS de hojas de estilo enlazadas o externas en nuestro index.html. Sí. Por lo que nuestra página web no tiene idea de que hay una hoja de estilo para que la use. Para que las colas de caballo surtan efecto, debemos vincular o hoja de estilo externa a nuestro index.html. Hagámoslo ahora. Vuelve a nuestro editor de códigos. Will entonces el titular de nuestra página web, que de nuevo es para un ciervo o información no mostrada en el sitio web. Queremos utilizar esta zona para enlazar nuestra hoja de estilo externa. Entonces toma un nuevo carril y quisiste copiar esta línea. Esta línea de HTML es un enlace. Rel es sinónimo de relación. Obviamente estamos cargando una hoja de estilo. Y luego tenemos edad ref. Para la edad ref, vamos a volver a utilizar un camino. Esta vez, el camino es a la hoja de estilo. Nosotros lo creamos. Al mirar nuestra carpeta de ejercicios, podemos ver que nuestra hoja de estilo CSS está dentro la carpeta de estilos y el nombre es stylesheet dot CSS. Usando el método realmente fácil que te dije antes, entendiendo cómo contraseña fingiendo que estás describiendo a index.html cómo desmayarte o fallar. Vamos a usar este método para volver o encaminar. Entonces, en primer lugar, index.html tendría que entrar en el estilo de carpeta. Entonces tomaremos eso y grabaremos edición. Y entonces tendría que mirar el nombre del archivo, hoja de estilo punto CSS. Por lo que también no vamos a cinta que conoceremos sombrero C o Control S. Vuelve a nuestro navegador y refresca. Y ahora se puede ver que el texto es masivo. En nuestra hoja de estilo ha entrado en vigor. Si inspeccionamos o párrafo. También verás que la declaración CSS que agregamos también está incluida dentro de los narcisos y ha surtido efecto. Una de las mejores características de DevTools es que podemos hacer cambios de vida al CSS si un sitio web, tres DevTools, por ejemplo, hay impuesto es demasiado bolsa una anemia que hay grande. Por lo que puedes ver fácilmente que el CSS surte efecto. Esto puede hacer que sea un tamaño más razonable, que podemos hacer tasa y DevTools para ver cómo se vería. Voy a dar click en tamaño de fuente para un párrafo. Y voy a cambiar el tamaño de la fuente a 20 píxeles. Ya puedes ver que el CSS ha entrado en vigor y podemos ver cómo se ve eso en nuestra página web. Recuerda sin embargo, que este cambio no se ha guardado como gaussiano es un cambio medio solo localmente en tu navegador. Y así si refresco la página, se puede ver que no ha surtido efecto. Cambiemos nuevamente el tamaño de fuente del párrafo a 20 píxeles. Y ahora puedes copiar y perforar la declaración en tu editor de código. Mar de tu hoja de estilo punto css. Y saber cuando refrescas tu página web, puedes ver que el CSS cambia. Tú me tienes, queda. Escribamos algo más de CSS y lo vamos a calificar directamente en DevTools. Sería realmente bonito. Por lo tanto, se envió rubro se refiere. Para ello, voy a dar click en H1 y DevTools. Voy a ir al editor de CSS o a Pian. Voy a hacer clic en el Plus para crear un nuevo conjunto de reglas CSS. Y luego voy a dar click bajo el LSAT. Y como propiedad, voy a escribir texto alineado. Se puede ver que DevTools te da una pista en cuanto a lo que puedes elegir por un valor. Y voy al centro, no voy a pegarle a Enter. Se puede ver que nuestro rubro ha sido centralizado en nuestra página web. Para que este cambio surta efecto, debemos añadirlo a nuestra hoja de estilo, que sin duda podemos hacer copiando a este Sam real yendo a nuestro editor de códigos y perforando en nuestras hojas de estilo o CSS por no guardar su estilo hojas o CSS y refrescando nuestra página del navegador. Se puede ver que hay conjunto de reglas CSS se ha agregado. Recuerda, podemos añadir múltiples declaraciones a tu rol. Sam, digamos que queremos que nuestra fuente de encabezado Weird sea ligeramente capa y no se vea como calva. Podemos hacer click en el conjunto de reglas y esto nos permitirá añadir una nueva declaración. Ahora una pregunta que podría tener es, ¿cómo puede un recordar todas estas diferentes propiedades para CSS? Y la respuesta es, en realidad, se reduce a la práctica. Se trata de crear sitios web y recordar las propiedades que usaste cuando las creaste. Mientras tanto, sin embargo, hay un sitio web realmente genial, CSS reference dot IO, que te muestra todas las propiedades que puedes usar NCSS y se agarra en conjunto y colecciones. Entonces en nuestro ejemplo de querer que nuestro encabezado sea una fuente ligeramente más delgada, estamos, vamos a ver qué propiedad CSS podríamos usar. Hagamos click en tipografía. Y luego el lado izquierdo, se puede ver tenemos fuente, peso, Click font. Se puede ver la propiedad y los valores que se pueden utilizar. puede ver que también te da los valores que puedes usar. Para una familia. Se, vamos a usar más ligero como ser 1 octavo, luego tirándolo. Tomemos esto hacia arriba volviendo a nuestra página web, yendo a dab tells, asegurándonos de que tenemos nuestro encabezado H1 seleccionado. Podemos hacer click en una regla Sam, golpe de cinta, somos una política nueva. El DevTools en realidad también te da pistas sobre qué valores podrías usar. Decidimos que queríamos usar capa que seleccionara Capa y tierra. Y se puede ver que nuestra fuente de encabezado somos, es de buena manera. Para agregar esta hoja de estilo terrorista. Simplemente copia la declaración que acabamos de añadir. Acude a nuestro editor de códigos. Y fueron entonces nuestra regla H1 dice crear un nuevo carril y PSTN o nueva declaración Control S para ver si van a volver a nuestro navegador y refrescar la página. Se puede ver que hemos logrado lo que queríamos de tener una diversión más delgada en nuestro rumbo. Entonces cuando se trata de usar CSS, si no estás seguro de si las propiedades o valores que deberías estar usando para lograr el look que quieres. Dar CSS punto de referencia IO o búsqueda usando sus colecciones o buscando propiedades CSS, por ejemplo, color. Debería poder encontrar las propiedades y los valores que necesita estar utilizando para lograr el cambio U1 y CSS a lo largo del tiempo y a través de la reputación. Y al declarar tus propios sitios web, estas propiedades y valores se convertirán en segunda naturaleza y podrás usarlos sin tener que hacer referencia al, digamos, el cristal. No obstante, como principiante, digo que el vidrio es fantástico para aprender las propiedades y valores que necesitas para crear hermosos sitios web en CSS. 8. Conceptos básicos con CSS: Vamos a profundizar en el uso de CSS en nuestro sitio web de ejercicios. Lo siguiente que queremos echar un vistazo es el espaciado entre los elementos. Si le das un vistazo a este enlace y a la imagen de abajo, notarás que están muy unidos. Para solucionar esto, vamos a usar lo que se llama márgenes. Entonces si inspecciono elemento, haga clic en mi imagen o simplemente puede hacer clic en la etiqueta de imagen en DevTools. Y vamos a pasar al cuadro CSS y hacer clic en el Plus para crear un nuevo rol, Sam. Y voy a empezar a grabar margen dash. Ahora podemos usar margen arriba, izquierda, derecha, abajo. Pero porque quiero agregar un espacio entre la parte superior de la imagen y el enlace. Y vamos a sumar margen superior. Y luego quería tomar 30 píxeles. Se puede conocer C, tenemos un bonito espacio entre la parte superior de la imagen y el enlace. Se pueden ver los márgenes visualmente representados en el modelo de caja de DevTools. Y también puedes hacer cambios al margen en esta zona de herramientas de pantanos. Por ejemplo, si hago clic en el margen superior, podría hacerlo 25, por ejemplo. Y verás esto representado en tu página web de ejercicios. Creo que 30 píxeles parecían oso. Entonces solo voy a eliminar la regla CSS que ese modelo de pantanos agregó. Y voy a copiar la imagen real Zan. Voy a abrir mi editor de código y voy a agregar y ver de estos cambios en la hoja de estilo dot CSS. Cuando actualicemos el sitio web de ejercicios, verás que ahora hay cambio ha entrado en vigor. Y eso es el sitio web de brillo arriba. Se está rezagando un poco de color. Podemos aplicar colores a elementos así como texto. Entonces echemos un vistazo a los antecedentes de este sitio web de ejercicios. Yo quiero seleccionar cuerpo, que es todo el fondo fuera de la página web. Y voy a añadir una nueva regla sentada dentro del verdadero San. Voy a cinta de nuevo drenado. Y cuando tomes antecedentes, verás que DevTools te ofrece una gama de opciones desde las que puedes empacar. Por ejemplo, nuestro gla. Verás que el cambio entra en vigor en tu sitio web al hacer clic en uno de estos colores. Ahora esto es genial. Olvídate del color en tu página web rápidamente, pero en realidad no te da un control fino sobre los colores. Por ejemplo, digamos que quiero colorear a partir de esta imagen. Para un control de color más específico, NCSS, usamos lo que se llama un código hexadecimal. Si ya has trabajado con fotografía o edición de imágenes antes, posible que ya estés familiarizado con qué es el código hexadecimal. Pero básicamente el acorde hexadecimal es un código de color que comienza con un hashtag y luego es seguido por el sexo. Las capas son números. Las dos primeras capas son números se refieren a leer, las dos siguientes se refieren al verde y la última a referido a jugar. Es básicamente una representación de un color RGB. Por ejemplo. El hashtag seguido de las ganancias sexuales es blanco, o el hashtag seguido de seis ceros es negro. Los códigos hexagonales son geniales porque te permite escoger un color de, por ejemplo, una imagen de Photoshop o un acorde con alguien más puede que ya te haya dado, basado en algún mercado y material que te hayan dado. Y al instante agrégalo como color al fondo de tu sitio web. Si no conoces un código hexadecimal, no temas. Devtools nos da un recolector de colores realmente agradable. Si hacemos clic en el color junto al código hexadecimal, verás que aparece un recolector de color aquí. Podemos elegir un color sobre la iluminación. O simplemente podemos hacer clic en el cuentagotas y hacer clic en un área de nuestra imagen. Verás que a esto le toca un color y se le asigna un código hexadecimal para ese color basado en el área que he seleccionado en la imagen. Ahora todo lo que hacemos para que estos cambios surtan efecto es copiar la verdadera caja fuerte. Vuelve a nuestro editor de códigos, PSTN, el verdadero set. Y a ver si, de nuevo, cuando volvamos a nuestra página web de ejercicios, verás que estos cambios han entrado en vigor. También podemos aplicar color al texto. Entonces si echo un vistazo al elemento de cabecera, primer lugar, verás que ya tenemos un juego de roles definido. Entonces simplemente voy a sumar a eso. No necesito crear uno nuevo. Y voy a la cinta de color. Otra vez. Devtools te dará una gama de opciones entre las que puedes elegir. Pero conozco el código hexadecimal para el peso, que es hashtag, seguido de seis f. Entonces voy a grabar hashtag y sexo Fs. Se puede ver que esto está espejado se dirigen. ¿ Forma divertida? No, porque esta regla dice ya definida dentro de nuestro documento CSS. No necesito copiar todo el conjunto de reglas. Solo necesito copiar la porción de color del mismo, el CSS que acabamos de agregar. Voy a entrar a mi editor de códigos. Simplemente voy a agregar ese final al conjunto de reglas que ya está definido para el encabezado. Y voy a ver si el documento hay cambios no etiqueta un efecto. También voy a cambiar el color de la fuente para nuestro enlace. Entonces voy a inspeccionar o un elemento de enlace o simplemente hacer clic en la etiqueta a. Entonces somos DevTools. Voy a añadir un nuevo conjunto de reglas ya que no tenemos ya 14. Y voy a volver a hacer el color blanco. También quiero que este enlace sea un poco más audaz para destacar. Entonces voy a añadir fuente nosotros lo, y cinta negrita. Ya puedes ver que este enlace está en negrita. Y vamos a copiar de nuevo nuestro conjunto de reglas y nuestro escritorio a nuestra hoja de estilo. Nuevamente, ahorrando. Esto se ve genial. Lo último que quiero hacer es enviar relés todo al minuto, todo está bastante fuera del centro. Entonces para hacer eso, voy a seleccionar nuestra etiqueta de cuerpo, que es todo y nuestra página web. Y voy a tomar texto, Elaine. No, se puede elegir matriz de centro izquierdo, pero descentralizar todo y querer centro de cinta. Se puede ver que ahora todo se ha centrado en nuestra página web. Nuevamente, porque como estamos todo listo ya existe, simplemente voy a copiar el CSS que acabo de grabar. Acude a nuestro editor de códigos y agrégalo a nuestro cuerpo. Verdadero triste cuando veo de esto y vuelvo a nuestra página web de ejercicios, se puede ver que estos cambios ahora han entrado en vigor. 9. Selectores y clases de CSS: Juntos la mayoría del Día de CSS, ahora necesitamos echar un vistazo a qué son los selectores de CSS y por qué son importantes a la hora de peinar tu sitio web. Y nuestra página web de ejercicios. Fingamos que queremos dos párrafos, pero sólo queremos que el primero sea blanco. Queremos que el segundo sea negro como un actualmente como. Entonces vamos a nuestro editor de códigos y vamos a añadir un segundo párrafo. Para ello. Es realmente simple. Yo sólo voy a copiar y perforar la etiqueta de párrafo, el contenido dentro de la etiqueta de párrafo y la etiqueta de párrafo de cierre. Y sólo voy a pegarlo abajo. Por lo que sabrás que tenemos dos elementos de párrafo. Primero aquí y el segundo elemento párrafo debajo de él. Simplemente voy a escribir primer párrafo y segundo párrafo, sólo para que podamos ver fácilmente los dos. Cuando echemos un vistazo a nuestra página de ejercicios, no voy a ver de esto y sacar nuestra página de ejercicios y actualizarla. Por lo que puedes ver ahora tenemos nuestro elemento de dos párrafos, pero ambos son de estilo negro. Entonces si entro en la hoja de estilo, bueno nuestro elemento de párrafo y cambio el color a blanco, que es hashtag seguido del sexo AF. Y guárdalo. Cuando refresco nuestra página de ejercicios, se puede ver que ambos o un elemento de párrafo se han estilizado peso. Si los inspeccionamos, verás que el primer párrafo tiene el color del blanco, pero también lo hace el segundo párrafo. ¿Por qué es esto? ¿ Y cómo podemos enviarnos por fax para entender por qué está sucediendo esto? Necesitamos saber, aprender sobre los selectores CSS actualmente y nuestra hoja de estilos, cada conjunto de reglas que hemos creado ha utilizado el elemento selector CSS, p, H1, imagen, cuerpo a. Estos son todos los elementos selectores CSS. ¿ Cómo sabemos esto? Esto lo sabemos porque no hay punto ni punto antes del nombre del elemento. Un selector de elementos hace los cambios a todos los elementos será entonces una página web. Entonces, por ejemplo, si usamos elementos como HDR pagamos cada elemento de párrafo, entonces el sitio web tendrá ese CSS aplicado a ellos. Por lo que en nuestra página web de ejercicios donde tenemos dos párrafos, el selector de elementos p y CSS aplica a todos los elementos de párrafo, incluyendo los dos par gas que tenemos en el sitio web. Y más, podríamos agregar usando el selector CSS de un elemento no nos da un control específico sobre los elementos HTML usando las mismas etiquetas. Por esa razón, necesitamos usar clases. Las clases nos permiten asignar un estilo CSS específico a etiquetas HTML específicas. Déjame guiarte por cómo hacer esto mientras explicas al mismo tiempo, MC SAS, definimos una clase usando un punto o un punto antes del nombre del selector CSS. Y luego definimos ese nombre de clase como un atributo dentro del elemento HTML. Para entender esto, déjame guiarte a través de cómo configurarlo. Y creo que tendrá mucho más sentido una vez que veas una acción. Entonces lo primero que queremos hacer al mirar nuestro editor de código es agregar una clase a nuestro elemento de segundo párrafo. No hay clases y atributos. Por lo que lo agregamos con etiqueta HTML de apertura interna. Entonces voy a añadir un Spears y voy a escribir clase igual y m de n a marcas de habla. Voy a añadir una clase llamada párrafo blanco. Entonces voy a ir a nuestra hoja de estilo y voy a añadir un nuevo conjunto de reglas. Esta vez. Voy a añadir un punto o un punto antes del nombre de la clase. Entonces voy a escribir punto y luego párrafo blanco dentro de nuestros corchetes rizados y quería tomar color. Y voy a añadir hashtag y sexo AF, que sabemos es el código hexadecimal para el blanco. Lo último que quiero hacer es quitar el color blanco que agregamos al elemento de párrafo en la parte superior de nuestra hoja de estilo es que este actualmente pondría todos los elementos de párrafo en blanco cuando sólo queremos que el segundo párrafo sea blanco. Entonces sólo voy a quitar esto. Por lo tanto, permítanme volver a explicar rápidamente cómo funciona esto. Por lo que ojalá quede claro en tu principal, hemos agregado una clase a nuestra etiqueta HTML de apertura para nuestro segundo párrafo. El nombre de la clase como párrafo blanco. No, no necesitamos un punto o punto antes del nombre de la clase. Al agregarlo a nuestra etiqueta HTML, simplemente escribimos clase igual y luego pasamos a marcas de voz o ClassName, que podemos definir como cualquier cosa que queramos. Pero en este caso lo hemos llamado párrafo blanco. Después en nuestra hoja de estilo, hemos agregado unas nuevas reglas. Son detrital dice deferente de un selector CSS de elementos, porque estamos usando un selector CSS de clase. Por lo que hemos agregado un punto o un punto seguido de un ClassName y SCS, Es párrafo blanco, que vincula directamente a nuestro párrafo de peso de clase HTML y se mueven en el conjunto real, acabamos de agregar un cambio de color ensamblado para que el texto sea blanco. Digamos que c de la hoja de estilo. Y también ver si el index.html. Bueno, nuestra página de ejercicios y refrescar. Ahora puedes ver nuestro primer párrafo es negro y nuestro segundo párrafo es blanco. Si echamos un vistazo a estos elementos dentro de DevTools, se puede ver el primer párrafo extrae del elemento selector CSS p. Y si echamos un vistazo a nuestro segundo párrafo con el nombre de clase párrafo blanco, se puede ver que tira del párrafo de peso reglas dicen en el que creamos para esta clase, se pueden crear tantas clases como se desee con el nombre que sea que quieras. Y también puedes tener múltiples elementos HTML, usa la misma clase. Ni siquiera necesitan ser iguales. Permítanme mostrarles esto como ejemplo. Añadamos un rubro soplador segundo párrafo. Añadamos un encabezamiento H2. Y voy a escribir esto como un encabezamiento blanco, seguido de una etiqueta de cierre. Cuando veamos de esto y cargamos nuestro sitio web de ejercicios y refrescamos, verás que esta no es una manera que te dirijas como de hecho negro. Para hacer esto blanco, volvamos a nuestro editor de códigos. Añadamos otra vez una clase. Y usemos la clase de párrafo de peso que ya hemos creado. Para hacer esto dentro de la etiqueta HTML de apertura, de nuevo, tipo clase igual y luego pasar a marcas de voz sólo hey, espera párrafo. Igual que la segunda clase de párrafo que ya hemos creado. Veamos si eso vuelve a nuestra página web de ejercicios y refresca. Ya verás que el rumbo es Nye White. Cuando inspeccionamos este elemento. Y se puede ver está tirando de la regla de párrafo blanco del CMB, Sam, ya hemos creado. Por lo que ahora ojalá puedas ver el par de usar selectores de clase CSS. Podemos crear conjuntos de reglas que luego podemos aplicar a múltiples elementos HTML, lo que nos permite darle estilo a un sitio web realmente rápido, pero también nos dan mucho más control sobre elementos HTML específicos que queremos darle estilo. 10. Tipografía en CSS: Ahora echemos un vistazo a la topografía. Queremos divertirnos bien en este sitio web de ejercicios para realmente hacerla soportar un. así que echemos un vistazo a cómo agregamos y cambiamos las fuentes entonces CSS. El primero que tenemos que hacer es importar una diversión, que podemos usar para hacer esto. En primer lugar, necesitamos encontrar un fondo que nos guste para hacernos realmente simples. Te voy a mostrar cómo importar y usar fuentes web desde Google. Ir a fuentes dot google.com. Y aquí verás miles de fondos que podemos utilizar. Simplemente vamos a seleccionar un fondo que nos guste. Por ejemplo, Oswald, donde puedes elegir dónde te reembolsa uno. Para este ejemplo, nos desplazaremos hacia abajo y escogeremos, seleccionaremos su estilo. Y habíamos ganado una diversión ligera, regular y audaz. Entonces solo voy a seleccionar la luz de una diversión regular y una granja audaz para que podamos cubrir todos los pesos de golpe con MRSA. Y la ventana VRE no se abre automáticamente a la tarifa. Sube hasta el rayo superior y haz clic en este botón aquí que dice ver tu sitio y familias. Y verás que se abre esta ventana. El primero que tenemos que hacer es importar diversión web de escritorio a nuestro sitio web. Simplemente seleccionamos y copiamos todo el texto en este primer cuadro. Vamos a nuestro editor de códigos y en la hoja estilo soplador de cabeza, perforamos. Conoceremos c de eso. Y volver a Google Fonts. Y vamos a Copiar CSS Brill en el segundo cuadro. Volvió a nuestro editor de códigos. Y dentro del rollo de cuerpo SAM, que aplica todas las reglas CSS a toda la página. Crearemos un nuevo carril y perforado. ¿ Qué hace esto? La regla CSS que acabamos de agregar como especificando que la familia de fuentes que queremos usar para toda la página de ejercicios es la diversión de Oswald. Y como hemos importado la diversión de Oswald al frente de nuestra página web, está disponible para su uso. Entonces voy a ver si la hoja de estilo y ver si el index.html. Y ahora si vuelvo a nuestra página web de ejercicios y refresco, se puede ver que toda la página web está usando la diversión de Oswald. Eso se ve genial. Pero ¿y si queremos usar más de una diversión? Digamos que queremos que los párrafos se diviertan diferente al resto de la página web. Volvamos a los fondos de Google y eliminemos todo de nuestra familia seleccionada. Y volver a la página de inicio. Vamos a empacar nieve una fuente para párrafos. Yo quiero que sea diferente al que acabamos de empacar. Entonces omega, buen contraste. Pero de nuevo, puedes elegir donde sea divertido que más te guste. Voy a elegir a Labster. Labster sólo tiene una fuente. Estamos así que sólo vamos a elegir Regular, seleccionar su estilo. Vuelve a hacer clic en el botón superior derecho a pocas familias seleccionadas. Y de nuevo, necesitamos una copia. Las etiquetas en el primer cuadro, que es TM pobre huérfano, van a nuestro editor de códigos y biloba proporcionó el código para importar la primera diversión. Voy a añadir el segundo. Y voy a ver si volviendo a la página web de fondos de Google, voy a seleccionar y copiar la regla CSS para la familia de la diversión de langostas. Y voy a ir a nuestra hoja de estilo. Ahora, queremos que la segunda diversión se aplique a los párrafos solo lo hará entonces nuestra página de ejercicios. Entonces voy a ir al elemento p. Y la razón por la que estoy eligiendo el elemento p o no, la clase de párrafo blanco que creamos es porque la clase de párrafo de peso, si recuerdas, solo aplica al segundo párrafo. Y quiero que esta fuente se aplique a ambos párrafos. Entonces voy a usar el elemento que se aplica a todos los elementos de párrafo y cuándo crear un nuevo carril dentro de las reglas ahí. Y peer Stan, la declaración font-family no especifica que todos los elementos p usarán la familia de fuentes Lobster y el resto del cuerpo para usar la familia de fuentes Oswald. Y quiero ver si la hoja de estilo, asegurándose de que index.html se guarde también. Vuelve a la página de ejercicios y actualiza. Se pueden ver los encabezamientos y todos nuestros elementos están ahí en los párrafos. Usa el primer fondo que empacamos, que fue Oswald. Esto se puede ver yendo a los elementos dentro de DevTools. Se pueden ver los metros H1 y Oswald. H2 está usando Oswald. Incluso el enlace de ref edad está usando Oswald. Pero se puede ver que los elementos de párrafo están usando Labster. Y de nuevo, puedes usar la fuente que quieras de Google. Solo estoy usando estos como una rápida ilustración de cómo puedes usar la tipografía y fácilmente y portar fondos de Google dentro tu sitio web para que se vean mucho más profesionales. 11. Bootstrap: Para casi listo para iniciar el proyecto medio del sitio web. De lo último que necesitamos aprender como Bootstrap. ¿ Qué es Bootstrap? Bootstrap es básicamente una colección de útiles bits reutilizables de código y CSS y HTML. Y es la biblioteca HTML y CSS más popular y del mundo. De hecho, al momento de mendicigar este curso, más de 18 millones de sitios web utilizan Bootstrap. Hay muchas razones para hacer uso de Bootstrap. Estos incluyen ahorro de tiempo. Es fácil de usar, es personalizable. Te ayuda a hacer sitios web consistentes y de aspecto profesional. Pero la razón principal y la razón por la que te lo voy a demostrar en este curso es que cuenta un fantástico sistema de posgrado el cual te permite plasmar fácilmente tu página web. Y tal vez aún más importante, permite que tu sitio web sea móvil responsive con IA, mucho trabajo, puedes leer más sobre Bootstrap it, getbootstrap.com. Pero te voy a enseñar cómo incluirlo en tu página web y cómo usar el sistema de cuadrícula al colocar en tu página web. Por lo que lo primero que tenemos que hacer es incluir trampa en nuestro sitio web. Es básicamente un archivo CSS. Entonces ve al paquete de ejercicios que hemos estado trabajando desde un exterior de la carpeta de ejercicios, verás una carpeta llamada necesaria para el ejercicio, comprobado que hay una carpeta llamada bootstrap, cual quiero que copie. Vuelve a nuestra carpeta de ejercicios. Y perforados saben que necesitamos incluir muertes dentro de nuestro documento index.html. Para ello, acude a nuestro editor de códigos. Y abajo donde hemos incluido nuestra hoja de estilo. Simplemente voy a copiar esta línea, crear un nuevo carril y PS2 a CLS escribiendo toda la línea. Y queremos eliminar el contenido de H ref. Y ahora necesitamos agregar la ruta para el archivo Bootstrap. Si miramos nuestra carpeta de ejercicios, podemos ver que hay una carpeta Bootstrap. Y dentro de Bootstrap, hay un archivo bootstrap.css. Entonces de nuevo, al presumir se te dan indicaciones a index.html y altura. Nuevamente, sin falta, tendríamos que entrar en la carpeta bootstrap. Entonces voy a tomar bootstrap forward slash, y luego el nombre del archivo es bootstrap.css. Entonces voy a tomar ese strap dot css y ver si no tienes bootstrap incluido en tu página web de ejercicios. Entonces, ¿cómo sabemos use strap fail que acaban de incluir y qué es el Bootstrap fail? Acabamos de incluir el archivo bootstrap.css que acabamos de agregar a nuestro sitio web de ejercicios es básicamente una gran lista de conjuntos de reglas CSS predefinidos que podemos usar al hacer nuestro sitio web. Entonces para usarlo, tenemos que usar clases CSS. Pone link hasta el archivo bootstrap.css con recién incluido. Entonces cambiemos el diseño de nuestras webs de ejercicios TODOS bate, que te pueda demostrar, Hey, esto funciona. mirar nuestro sitio web de ejercicios, quiero agregar un tercer párrafo por 12 a tres párrafos para estar en la misma fila. Al lado uno del otro. Entonces lo primero que tenemos que hacer en nuestro editor de código es agregar un tercer párrafo. Por lo que sólo voy a copiar uno de los elementos de párrafo que hemos agregado en nuestra página web de ejercicios. Y voy a compañeros a soplar el elemento segundo párrafo. Yo solo quiero que el elemento de párrafo metálico sea blanco. Entonces voy a quitar la clase para el elemento de tercer párrafo. Acabamos de agregar este bonito C de S. Y echa un vistazo a nuestra página web de ejercicios. Ya puedes ver nuestra página web ahora se ve así. Esto se ve muy roto. Entonces, ¿qué hemos hecho mal? Volvamos a nuestro editor de códigos y desplázate hasta la parte superior donde hemos incluido el CSS Bootstrap. De qué ha pasado como porque el bootstrap.css está por debajo de nuestra hoja de estilo. Eso significa términos de codificación. Cualquier estilo que provenga de bootstrap.css anula los estilos que hemos agregado y nuestra hoja de estilos dot CSS. Entonces cuando echamos un vistazo a nuestro sitio web de ejercicios y echamos un vistazo al cuerpo, se puede ver que el color de fondo que hemos agregado en nuestra hoja de estilos hace CSS está siendo anulado por el color de fondo que ha sido agregado por el bootstrap.css. Entonces es muy importante. El bootstrap.css va por encima de nuestra hoja de estilo dot css y el encabezado. Nuevamente, para que quede claro, la razón de esto es el puerto final más bajo en hojas de estilo o archivo CSS siempre anulará aquellos que están por encima de él. Entonces, a menos que KS, ahora que los hemos intercambiado redondos, los conjuntos de reglas bootstrap.css serán anulados por cualquier hoja de estilo o conjuntos de reglas CSS que hayamos agregado. Entonces voy a guardar esto, volver a nuestra página de ejercicios y refrescar. Ya puedes ver los conjuntos de reglas que hemos agregado en nuestra hoja de estilo dot css han reaplicado. Por lo que ahora tenemos elemento de tres párrafos. Pero quiero que estén uno al lado del otro y una fila. Para ello, vamos a utilizar el sistema de rejilla Bootstrap. El sistema de cuadrícula Bootstrap utiliza filas y tenemos n m filas, columnas. Puedes tener 12 columnas dentro de una fila, y luego una sola columna puede ocupar tantas de esas columnas como quieras. Por ejemplo, podrías tener dos columnas de sexo. Podrías tener tres columnas o cuatro. Podrías tener cuatro columnas de tres. O podría tener una columna de 71, columna de cinco. Podrías tener tres columnas a tu 5 y 1 de 2. Y como puedes ver, esto te da un control ilimitado sobre las redes de columnas con Anna row. Entonces pongamos esto en práctica. Voy a subir el editor de códigos y necesito añadir una fila. Los tres párrafos bien estar dentro de esa fila. Por lo que arriba del primer párrafo. Y vamos a iterar dev, que es un elemento HTML genérico. Y voy a escribir clase igual fila. Entonces tenemos un elemento div HTML, que de nuevo es un elemento HTML genérico. Y dentro de eso, tengo un atributo de clase, que he agregado por raza y clase igual. Y dentro de las marcas de discurso he añadido fila. Tenemos que cerrar esta etiqueta. Pero porque queremos los tres elementos de párrafo dentro de él. Y vamos a bajar a debajo de la etiqueta de cierre del tercer párrafo. Y voy a cerrar la etiqueta div para que las cosas se vean bien en nuestro editor de código. Lo que voy a hacer no es sólo los elementos de párrafo sobre a la derecha permitir. Esto no tendrá ningún efecto en nuestra página web real, pero afecta cómo se presentan las cosas dentro del editor de código y hace que sea fácil entender dónde están los elementos dentro de los demás. Para ello, sólo voy a seleccionar todos nuestros elementos de párrafo. Y voy a presionar Tab en mi teclado. Se puede ver que no hay hace las cosas más fáciles de entender desde el editor de código es punto de vista. Visualmente se puede ver que tres elementos de párrafo están dentro de una fila, dev. Entonces no voy a ver si esto y cargar nuestra página web de ejercicios y refrescar. Y se puede ver que nada ha cambiado realmente. Eso es porque todo lo que hemos hecho es agregar estos tres elementos de párrafo a tu fila. Tenemos que saber los agrego en columnas. Entonces quiero tres columnas igualmente espaciadas dentro de esa fila. Y debido a que Bootstrap tiene un ancho máximo de columna de fila de 12, eso significa que cada columna de párrafo debe ser cuatro columnas de húmedo. Entonces, ¿cómo hacemos eso? Volvamos a nuestro editor de códigos. Y por encima de nuestro primer párrafo, voy a añadir un nuevo Dev, que como recuerdan como elemento HTML genérico, voy a añadir una clase igual a marcas de voz. Y evitar eso. Voy a calificar la CLL por columna dash cuatro para una red de columnas de cuatro. Y voy a terminar esa etiqueta HTML de apertura. Ahora sólo queremos que nuestro primer párrafo sea una primera columna ness. Por lo que debajo de la etiqueta p de cierre para nuestro elemento de primer párrafo. Y cuando tenía un cojo y voy a cerrar esa etiqueta div. De nuevo para mantener las cosas que pueden agradar dentro de nuestro editor de código, voy a seleccionar todo el primer párrafo y golpear Tab. Entonces de nuevo, mega visualmente obvio que el elemento de párrafo se teje la columna de la clase dev. Por lo que ahora hemos agregado nuestro elemento de primer párrafo en una columna de cuatro. Tenemos que ser los párrafos segundo, tercero y hacer sus propias columnas. Para que esto sea rápido, todo lo que necesitas hacer es seleccionar y copiar la columna de la clase dev para la etiqueta HTML que acabas de agregar. Y agrega esto arriba del segundo párrafo creando una nueva línea sobre RTC. Entonces justo después de la etiqueta p de cierre para el segundo párrafo, cierra esas etiquetas div. Nuevamente, voy a seleccionar todo el elemento de párrafo y presionar Tab en mi teclado. Y por último, por encima del tercer párrafo, crear un nuevo carril y un PS dado, la columna de la clase dev para el elemento. Y de nuevo, justo después de la etiqueta p de cierre, voy a cerrar esa etiqueta div. Y de nuevo, voy a seleccionar todo el tercer párrafo y presionar Tab en mi teclado. Nuevamente solo para que quede claro, cuando estoy pretendiendo elemento a través en el editor de código no está cambiando su posesión o diseño en la página web real. Ensamblaje para referencia visual dentro del editor de código. Como puedes ver, hace que sea fácil de ver. Tenemos tres columnas. Tenemos un div con una clase de columna cuatro, con un párrafo dentro. Tenemos un segundo div con una clase de columna para antes párrafo blanco dentro. Y tenemos un tercer div con una clase de columna para el primer tercer párrafo dentro. No voy a ver si esto vuelve a nuestra página de ejercicios y refresca. Se puede ver que tenemos una fila, y dentro de esa fila tenemos tres casillas de columnas de casados iguales. Y dentro de ahí tenemos nuestros párrafos. Si echamos un vistazo a las herramientas de desarrollo solo para entender esto más, puedes ver que tenemos nuestra fila de clase div. Si abro esto haciendo clic en la flecha de la izquierda, se puede ver con Anna fila, tenemos tres columnas de igual anchura. Y dentro de cada columna, tenemos nuestros elementos de párrafo. Como se mencionó, el ancho máximo de una fila es 12. Por lo que podemos tener un jugador por y lanza estos de manera diferente si lo deseamos, siempre y cuando nos quedemos dentro de la columna max mientras de 12. Entonces por ejemplo, podemos tener que los dos primeros párrafos sean muy pequeños, por lo que sólo dos columnas de pan. Y nuestro último párrafo sea realmente grande de columnas IOT con él. Más dos, más dos es 12. Entonces esa es nuestra web max real. Voy a salvarlo. Y cuando refresco la página, se puede ver ahora tenemos dos párrafos pequeños y el tercero es muy grande. También puedes cambiar S prevent DevTools para obtener una representación visual rápida y fácil de cómo se vería esto simplemente yendo con n o una clase de fila y cambiando las clases de dev para tener diferentes webs de columna. Entonces por ejemplo, podría hacer este 1, 4, podría hacer el metal 13, y podría hacer el último, 5. Si incluye más columnas de 12, que puedo hacer aquí NIH, hacer de este nueve, por ejemplo, se puede ver que rompe la fila. Es necesario asegurarse de que todas las columnas dentro de la fila sumen hasta 12. Entonces para hacer esto, cambiaría esta columna de nuevo a cinco. Se puede tener tan poco como una columna dentro de una fila y un máximo de 12. Bootstrap viene con muchas otras cosas que puedes usar simplemente usando clases CSS, como botones, tarjetas, dropdowns , formularios, incluso navegaciones. Pero para este curso, somos Assembly va a hacer uso del sistema de grid ya que es una manera realmente poderosa de reunir sitio web móvil responsive, que estará tocando más adelante en este curso. Juntos rápidamente. 12. Qué vamos a crear: Entonces antes de escribir cualquier código, Echemos un vistazo a la página web que vamos a estar creando. Entonces para este curso, creo un escenario divertido donde tenemos un negocio en el mundo que es dirigido únicamente por perros. Y han venido a nosotros para crear su primer sitio web. Es un escenario un poco divertido y de Sally, pero nos da una dirección creativa para despegar. Entonces echemos un vistazo a la página web que vamos a estar creando para ellos. El primer apartado que verás en la página web es la navegación. Y esto contiene algunos enlaces que nos permiten navegar por la página web. Entonces por ejemplo, si hago clic ahí bi-sección, nos lleva a ahí por área de la página web. O si hago clic en la sección Contáctenos, nos lleva a la sección Contáctenos del sitio web. Esta será nuestra navegación. El siguiente apartado que tenemos al sitio web es el área de reducción. Esta es una gran sección negrita, contiene mucho color. Se ve realmente bonito, tiene una imagen de mendigo, tiene un encabezado de bolsa, y tiene una pequeña cantidad de etiquetas de párrafo, que básicamente describe nuestro ENT reduce el negocio al sitio web de la oficina del espectador, dice que será la sección de introducción a RSA. El siguiente área de la página web que tenemos es la sección Acerca de Nosotros. Se puede ver que tiene tres columnas. Cada columna tiene un daño cerebral más pequeño, un encabezado, y un párrafo. Y cada columna es básicamente alguna información sobre un miembro del personal fuera como negocio. Para que puedas ver tengo top dog el perro incluso manejar a tu perro, dice estará ahí por nuestra sección de la página web. El siguiente apartado que tenemos es la sección YR también dicen, y hace exactamente eso. Se describe por qué alguien debe elegir como negocio revisión de la FDA en la página web, se puede ver que tenemos tres filas con todo Ernie y por granos la sed y la tercera tienen este fondo azul púrpura. Y el medio tiene una barra más gris granulada. Terminar cada fila tenemos un encabezado y un párrafo y una imagen. Y se puede ver eso es drenaje de solapa para la fila de metal dice que será la sección y OS de la página web. El siguiente apartado que un discutiblemente el más importante porque es realmente perjudicar a la gente puede ponerse en contacto con su negocio. El apartado Contáctenos. Se puede ver en el lado izquierdo tenemos el correo electrónico y también la dirección de la empresa. Y luego del lado derecho tenemos dos imágenes más. Esta será la sección Contáctenos de la página web. Por último, tenemos el pie de página. Esto es realmente simple y sencillo. Simplemente contiene el año, que obviamente es 2021 en el momento de Magnus coerce y el nombre del negocio. Entonces esta es la página web y toda una, y esto es lo que vamos a codificar y estilo a la hora de crear nuestro primer sitio web. 13. Construir el sitio web: Ya estás listo para empezar a codificar el proyecto de sitio web medio usando todo lo que hemos aprendido hasta ahora y nuestro archivo HTML de ejercicio, vamos a juntarlo todo y hacer un sitio web de aspecto profesional. Para empezar, necesitamos despejar comensal Chordata o un abrir unos cuantos archivos nuevos para ponernos en marcha. Voy a cerrar la hoja de estilo para el sitio web del ejercicio. Y voy a cerrar el index.html para nuestra página web de ejercicios. Abre la carpeta del paquete de ejercicios desde la que he estado trabajando y sube un archivo. Bueno entonces ahí verás nuestra carpeta de sitio web. Haga clic al final de la carpeta del sitio web. Y agreguemos nuestro index.html a nuestro editor de códigos. Se puede ver que estamos empezando con, rezo, en blanco, nuevo archivo HTML. Mucho verlo como nuestro archivo HTML de ejercicio. El primero que tenemos que hacer es incluir una hoja de estilo. Pero antes de hacer eso, necesitamos crearlo. Vuelve a nuestra carpeta de sitio web, crea una nueva carpeta llamada estilo. Dentro de esa carpeta, crea un nuevo documento de texto, pero llámalo hoja de estilo dot css. Y queremos cambiar la extensión de nombre de archivo. Entonces sí. Y ahora hemos creado un archivo CSS de punto hoja de estilo que se sabe incluir que dentro de la cabecera de nuestro documento HTML. Entonces voy a cinta enlace REL para una relación igual a hoja de estilo porque es una hoja de estilo, H ref. Y dentro de las marcas del discurso, necesitamos sumar nuestro camino. Al mirar nuestra carpeta de sitio web, se puede ver que la carpeta se llama estilo. Y hemos entrado por intentar cargar las hojas de estilo o documento CSS. Por lo que escribiremos estilo para la investigación, Hojas de estilo o CSS. Y cerraremos la línea HTML. Háganoslo saber ver de eso. Queremos abrir nuestra hoja de estilo para que podamos agregar estilos a medida que desarrollamos o sitio web. Haga clic derecho en la pestaña index.html, vaya a Dividir tasa, luego abra nuestra carpeta del sitio web y arrastre nuestra hoja de estilo y hasta el PM correcto. Podemos entonces cerrar nuestro archivo index.html en el agarre del pin derecho. Hemos incluido nuestra hoja de estilo y tenemos una abierta lista para agregar estilos. A continuación, necesitamos incluir Bootstrap. Recuerde, el archivo bootstrap.css debe ir por encima de nuestra hoja de estilos y nuestro documento HTML para que cualquier regla CSS sea tasa y nuestra hoja de estilos anula cualquier estilo preexistente que venga con Bootstrap. Entonces voy a añadir una nueva capa por encima del lamer. Hemos incluido nuestra hoja de estilo. Voy a copiar ese carril y compañeros a arriba solo para ver si algún tiempo. Y voy a abrir nuestra carpeta de ejercicios de página web. Si subimos una a nuestra carpeta de sitio web, puedes ver que no tenemos una carpeta bootstrap incluida. Por lo que necesitamos volver a subir a la carpeta del paquete, entrar en la carpeta necesaria para el ejercicio y copiar la carpeta bootstrap. Volver a la carpeta del sitio web. Y perforó la carpeta bootstrap. Y dentro de esa carpeta Bootstrap, se puede ver que se incluye el archivo bootstrap.css. Entonces papá, ahí está el documento de lágrima index.html. Cambiamos el camino para ser bootstrapped, forward slash bootstrap.css y vemos si griot, ahora estamos listos para ir en la creación de nuestro sitio web principal, lo primero que queremos hacer es agregar una navegación a la parte superior de su sitio web. Entonces vamos a escribir eso. Vamos dentro de las etiquetas de cuerpo para documento HTML. Y vamos a crear lo que se llama un comentario. Un comentario es Elaine hará entonces tu editor de código, que no se renderiza en tu página web. El propósito simple es permitirte agregar notas a tu documento HTML, que se puede utilizar para explicar tu acorde, lo cual es realmente útil si vuelves a un documento HTML, alelo o D it para ayudarte a refrescar tu memoria. Para escribir un comentario, es necesario escribir un signo de exclamación menos que signo, guión, guión. Se puede ver que la línea ahora se va gris en su editor de código. Y yo sólo voy a volver a la navegación y a las pistas. Tu tasa de comentarios, dash, dash. Mayor que demencial. Se puede ver que esta línea está gris. Eso significa que el DES no es ningún comentario y bien no se muestre en su página web. Y un delgado añadido en las líneas de abajo. Bueno se muestre sólo texto entre los guiones. Comentador de bienestar I, no hay etiqueta, un nuevo carril y tasa o navegación HTML. Por lo que queremos una lista ordenada, por lo que una etiqueta UL. Voy a cerrar esa etiqueta de lista desordenada. Y luego dentro de nuestra lista desordenada, necesitamos una última etiqueta soy LI. Y pensemos en qué artículos van a ser en nuestra navegación. Vamos a tener casa. Para que puedas volver a la página de inicio. Y voy a cerrar la etiqueta ALA HTML. Voy a tomar un nuevo carril. Y cuando agrego otra etiqueta LI en nuestra página web, vamos a tener una sección de mordedura. Por lo que voy a escribir un barco incluye la etiqueta LA. Esto se puede acelerar simplemente copiando y pegando las filas ALA. Entonces voy a sumar dos más. Voy a tener una sección de SO manera. Y vamos a tener una sección de contacto. Podrás tener lo que quieras en tu navegación. Pero creo que primer ejemplo, estos funcionarán perfectos. Esto y veo de esto. Y por primera vez, Eso es traer nuestra página HTML y nuestro navegador. hoy que alguien vaya a la carpeta de ejercicios, vaya a la parte del sitio web de nuestra carpeta de ejercicios y haga doble clic en nuestro index.html. Se puede ver que el HTML que se agrega se ha cargado y son más brillantes. Vamos a abrir DevTools. No los necesitamos para NIH, pero solo mantengámoslos abiertos ya que los vamos a necesitar a través de ocho mejores procesos de desarrollo. Ahora cuando se trata de diseñar sitios web. De verdad dos formas en las que puedes hacerlo. Puedes o bien escribir todo tu HTML y uno ir y luego volver y permanecer en silencio levantando tu CSS antes ciervo. O bien puedes escribir juntos tu HTML y CSS a medida que vas bajando por la página web en desarrollo. Vamos a usar la escalera para este curso porque creo que tiene mucho más sentido escalar cada sección del sitio web valoración azul el HTML para darte una mejor imagen de cómo se está juntando la página a medida que la desarrollas. Entonces vamos a estilo o una navegación. Al minuto no se parece en nada a una navegación que se parece a una lista. Entonces vamos a convertir nuestro último en una navegación. Volvamos a nuestro archivo index.html dentro de nuestro editor de código. Y agreguemos una clase a nuestra honrada explosión. Llamémoslo navegación. Y C de mirar nuestra navegación, lo primero que tenemos que hacer es meterla en la página de ofertas del centro. Eso es bueno nuestro editor de código y ve a nuestra hoja de estilo dot CSS. También podemos usar comentarios dentro de nuestras hojas de estilo o CSS. La única diferencia es la forma en que los escribes como ligeramente diferente a cómo los califica en un archivo HTML. Para CSS, escribes una barra inclinada hacia delante asteriscos, que es el inicio de nuestro comentario, y una matriz y navegación 1D. Y luego para cerrarlo, urate astérix slash hacia adelante. Por lo que cualquier etiqueta entre los dos asteriscos es común a mí y no se renderizará en tu página web. Esto de nuevo, es ideal para escribir notas sobre tu código, lo que te ayudará a tener sentido. Ofrezca FU, vuelva a ello antes, querida. Vamos a crear un nuevo carril que sea un punto o punto. Y en la palabra navegación, que es en referencia a la navegación de clase, simplemente la creamos para nuestra lista desordenada. Y somos camionetas o corchetes rizados. Añadamos texto alineado centro y veamos que he vuelto a nuestra página web. Ya puedes ver que nuestra navegación está centralizada. El siguiente tema necesitamos llover ya que necesitamos cada uno no sea que yo esté en el mismo carril a la navegación más elegante. Y hay como un último. Para ello. Volvamos a nuestra hoja de estilo y vamos a crear un nuevo selector. Y cuándo o un periodo o dieta de navegación para la clase de navegación. Y luego voy a escribir, ALI, ¿Por qué he hecho esto? Por lo que echando un vistazo a nuestro selector de hojas de estilo, puedes ver que puedes iniciar selectores juntos. Por lo que mediante el uso de la navegación de puntos o periodos para referencia y la clase de navegación en nuestro documento HTML. Pero entonces hemos usado un selector de elementos de ALA. Si recuerdas, el selector FS no tiene un punto o punto antes de él, es un selector de elementos y afectará a todos los elementos HTML de ese tipo. Por lo que hay selector LI afectará a todos los elementos ALA de nuestra página. Pero como lo hemos puesto después de la navegación del selector de clases, solo afectará a todo el elemento LI con n, la navegación de clase. Entonces, ¿qué afectará a todos estos elementos LI con n? Esta clase de navegación, me permite agregar corchetes rizados, y vamos a añadir display y ln block. Recuerda cuando dije algunas propiedades CSS, solo tienes que aprender. Desafortunadamente, esta es una de ellas. Entonces, por ahora, solo nos cinta ND o hoja de estilo dot css y guárdalo. Vuelve a nuestra página de ejercicios y refresca. Ahora puedes ver tenemos algo que se parece más una navegación ya que cada último día m está en el mismo carril. El único es h último elemento es un poco demasiado cerca el uno del otro. Entonces a los hechos como voy a sumar un margen a la derecha. Por lo que voy a dar clic en LSTM elemento de evento DevTools. Se puede ver nuestra navegación, no ser que soy real set está mostrando desde nuestra hoja de estilo. Por lo que voy a dar click para añadir una nueva propiedad. Y voy a re margen izquierdo 15 pixels. Se puede ver que se trata de lanzas. Estos elementos son muy bien como la experiencia. Entonces solo voy a copiar esta propiedad y valorarlo bien o el editor de código y crear una nueva capa con navegación interior, ese es día y RSTN y tenía C de 10. Voy a refrescar o página web. Por último, nuestra navegación se está estableciendo demasiado cerca de la parte superior de la página web. Necesito rellenarlo. I FA haga clic en la etiqueta UL de la navegación de clase. Se puede ver ya tenemos una declaración cargada de nuestra hoja de estilo. Entonces voy a crear un nuevo carril y voy a calificar el relleno. Top. El relleno funcionaba muy parecido a los márgenes. Por lo que voy a añadir un relleno de 20 pixeles. Tenemos más elementos, página de tardiness, y no queremos que se atasquen justo arriba contra el fondo de su navegación. Por lo que también voy a agregar relleno de fondo, y voy a tapar la parte inferior por 20 píxeles también. Puedes ver si pasas el cursor sobre la etiqueta UL, el morado muestra el relleno. Por lo que podemos ver que sabemos tienen relleno morado de 20 píxeles en la parte superior y relleno morado de 20 píxeles en la parte inferior. Copiemos las dos propiedades de relleno que acabamos de crear. Acude a nuestro editor de códigos dentro de la navegación, crea un nuevo carril. Y hombre del PSD, no voy a tener que ver si volver a nuestra página y refrescar. Y esto se ve genial. Tenemos los inicios de nuestra página web y en navegación y jugadores. 14. Construir el sitio web: introducción: Ahora tenemos un editor de navegación o sitio web. Queremos agregar la siguiente sección, que es nuestra página web y fila. Vamos a nuestro editor de código y azul o en ordenado menos etiqueta. Añadamos un nuevo comentario, que de nuevo es un signo de exclamación menos que signo dash, dash. Y vamos a volver Andrew, reducción de amigos. Dash, dash. Más grande que decir ese comentario no, nos deja saber que lo voló en un nuevo carril. Vamos a sumar sección R y rho. Entonces lo primero que quiero en nuestra sección de intro es una imagen. Por lo que voy a añadir la etiqueta de imagen. Voy a escribir SRC para fuente igual. Y dentro de la coma, ahora vamos a incluir una toma de perfil o cualquier imagen que desee. Al final de sección, si miras la carpeta de ejercicios, verás que he incluido todas las imágenes que necesitarás con una carpeta de imágenes para esta página web donde Meghan en este curso. No es necesario usar estas imágenes. Puedes usar cualquier imagen que uno, para hacer las cosas bonitas y fáciles. He incluido estos para que simplemente puedas usar las imágenes que estoy usando. Y hay manera más gorda, bueno decir como si sí quieres usar tus propias imágenes, una recomiendo que las agregues a esas carpetas de imágenes, lo que solo hará que agregar los caminos y a la fuente de imagen sea mucho más sencillo y mucho más fácil de seguir junto con el curso. O como yo, si solo quieres usar estas imágenes, simplemente haz exactamente lo que hago en este curso. Entonces aquí he incluido un perfil JPEG dentro de la carpeta de imágenes. Por lo que nuestro camino va a ser imágenes para la carpeta de imágenes, perfil de slash forward, JPEG. Para ser claros, es el nombre de la imagen dentro de la carpeta de imágenes. Entonces voy a escribir para alt texto igual y pasar a marcas de voz. Yo sólo voy a re perfil tiro. Y voy a cerrar nuestra etiqueta de imagen. Yo entonces quiero encabezar. Entonces voy a escribir H1 para un elemento de etiqueta H1. Y voy a volver, bienvenido. Y voy a cerrar la etiqueta H1, un sobre que quiero un párrafo corto. Entonces voy a leer el elemento de párrafo y voy a volver, somos el primer negocio del mundo. Y por perros. Porque como saben, este es un sitio web para un negocio de base canina que se crearon en este curso. Y luego voy a cerrar la etiqueta de párrafo. Ya que no hay mar de eso y echar un vistazo a cualquiera de los enlazados en nuestra página web. Volviendo a nuestra página web, y voy a refrescarme. Por lo que se puede ver que la imagen está cargada. Tenemos nuestra etiqueta de encabezamiento y tenemos nuestro párrafo. Pero esto no se ve bien en absoluto. Entonces lo siguiente que quiero hacer es agregar un fondo para esta sección de intro. Por lo que mirando nuestro código y nuestro editor de códigos, se puede ver que estos elementos al minuto no están agrupados junto con una etiqueta o una clase. Yo también puedo aplicar un fondo. Entonces voy a crear un nuevo carril de ambos la imagen. Y voy a escribir sección como el elemento HTML. También podrías usar Dev aquí, pero sección como un elemento HTML semántico. Sección significa que el contenido y decir que está agarrado o realmente dice tema único, elevar un elemento HTML dev es más genérico porque S es una sección de intro de nuestro sitio web, siempre m con n, este elemento HTML que estamos escribiendo como vamos a ser agarrado y como va realmente a dar fe tema único, el Endrew, entonces tiene más sentido a la sección y SKS. Y voy a añadir una clase. Y lo voy a llamar fondo de color. Porque queremos que la sección desenrollada tenga un fondo coloreado. Entonces voy a ir por debajo del elemento de párrafo, y voy a cerrar la etiqueta de sección. Nuevamente para que las cosas se vean bien en nuestro editor de código, voy a dañar levemente la etiqueta de encabezado H1 y el párrafo y hit tab. Sólo para que podamos ver visualmente en nuestro editor de código que esos elementos que eran van o sección de fondo coloreado. Ahora voy a ver si esto, voy a ir a nuestra página web y voy a golpear refresco. Se puede ver si nos fijamos en el HTML, que nuestra clase de sección fondo coloreado tiene el encabezado de la imagen, etiqueta y párrafo con Anna. Añadamos un fondo a esa sección y vamos a pasar al CSS pn de DevTools. Haga clic en Agregar nuevo real. Y dentro de esa regla dijo que es sólo crearlo. Voy a escribir antecedentes. Ahora en lugar de solo usar un color, es hora, voy a usar una imagen para hacer esto. Se quiere escribir URL, corchete y dos apóstrofes. Conoce qué N, estos apóstrofos, necesitamos sumar el camino a nuestra imagen. Entonces echemos un vistazo a nuestra carpeta de ejercicios. Y se puede ver con n la carpeta de imágenes, he incluido un daño de mala calidad, punto de grano fino PNG. Por lo que necesitamos sumar el camino para esto por daño cerebral y entre los dos apóstrofos. Por lo que hay imágenes de fondo dentro de la carpeta de imágenes, y tiene una ninfa por punto de grano PNG. Por lo que puede presumir el camino que necesitamos volver como imágenes hacia adelante slash fondo dot PNG. Pero vamos a equivocarnos. El motivo de esto es porque si pensamos en las matemáticas que te enseñé de caminos hurra, de presumir que estás describiendo dónde está el daño en cuanto a index.html. En realidad no lo estamos describiendo a index.html. Simplemente lo estamos dando a la hoja de estilo dentro de la carpeta de estilos. Entonces en realidad lo que tendríamos que hacer es subir una carpeta, luego a la carpeta de imágenes, y luego por punto verde PNG para escribir una carpeta, lo que haríamos es ser dre dot dot forward slash, lo que significa con NIH fue arriba una carpeta. Después imágenes, luego por punto de grano PNG. Cuando entro el decimal, no mostrar hasta que lo hayamos agregado por primera vez a nuestra hoja de estilos. Entonces voy a copiar a este verdadero Sam. Voy a abrir nuestro editor de códigos y voy a añadir un nuevo comentario dentro de nuestra hoja de estilos. Entonces voy a hacer asteriscos de barras hacia delante porque recuerden que es diferente para las hojas de estilo. Y voy a calificar Y volver a gobernar en relación con nuestra tía sección HTML real. Siempre que una barra Asterix y hacia adelante. Y luego voy a perforar son reales sáb em. Nuevamente, punto, punto o punto punto inclinado hacia adelante significa que tenemos una carpeta superior. Entonces si echamos un vistazo a nuestra carpeta de hojas de estilo y nuestras hojas de estilo o CSS, que es a lo que estamos describiendo el camino a. Vamos a estar subiendo o carpeta. Entonces tenemos imágenes hacia adelante slash porque estaríamos entrando a la carpeta de imágenes. Y luego queremos el bg dot PNG, que tenemos aquí. A ver si eso vaya a nuestra página web y refresquemos. Se puede ver que nuestra imagen de fondo es agradable mostrando esta imagen de fondo es semitransparente. Lo que eso significa es que las secciones de peso que puedes ver actualmente son transparentes. Por lo que cualquier cosa debajo de ella se mostraría a través. Eso significa que podemos agregar un color a nuestro fondo y el color establecerá imagen del soplador. Entonces si echamos un vistazo a nuestra sección de fondo de color y nuestra propiedad de fondo, y hacemos clic para editar el valor. Y si un después del corchete de cierre se mostrará debajo de la imagen. Por lo que podemos agregar un color. Por ejemplo, podríamos agregar un espacio y calificar rojo, que se puede ver. O podemos usar un código hexadecimal para un color, 90, el color que quiero usar, y ahora es 33225 b, que es un color púrpura. No es necesario usar este color. Puedes usar el color que quieras. Puede que no sea una palabra como rojo o azul o un código de color hexadecimal, pero ella ha llegado de otro lugar. Pero si quieres seguir adelante, solo usa 33, 22, cinco B, y ella y ella. Lo siguiente que notarás es que los granos de la bolsa parecen cortar el nivel a la tasa. No es de ancho completo, está repitiendo de nuevo. Entonces para arreglar esto, lo que re, es por tamaño de grano y calificamos un 100 por ciento. Lo que eso significa es que la imagen ocupará un 100 por ciento del ancho del fondo. Eso no es una copia. Estas propiedades van a nuestro editor de código y compañeros a mentor o fondo coloreado arena real. De nuevo, estoy manteniendo todo bien alineado solo para que sea fácil de entender. No voy a ver esto bueno nuestra página web y golpear Refresh. Y se puede ver nuestro fondo ahora se está mostrando. Lo siguiente que queremos hacer es que le queremos mandar los elementos dentro del fondo de color. No se ven muy bien, aplastados a la izquierda aquí queremos que en el centro se vean bien. Entonces volvamos a nuestro editor de código y necesitamos agregar la imagen H1, etiqueta de encabezado y párrafo dentro de un dev. Por lo que voy a añadir un carril debajo de esta sección. Voy a escribir dev y voy a calificar clase igual, y luego a marcas de habla. Y ahora vamos a hacer uso del sistema de rejilla Bootstrap. No quiero que esta sección sea de ancho completo. Yo quiero que sea una caja en el centro de mi sección de intro. Por lo que quiero que sea una columna con un húmedo definido. Entonces los voy a llamar si el barco favorece sobre tarifa. Podemos cambiarlo antes, D7, no lo es. Entonces voy a escribir C, O, L para columna dash f5 para una columna de cinco. Y voy a cerrar nuestra etiqueta de sordos. Queremos el daño H1 encabezamiento de elementos de párrafo dentro de este div. Entonces voy a etiquetar un nuevo párrafo de golpe de carril y cerrar esa etiqueta div. Entonces voy a seleccionar la imagen H1 y etiqueta de párrafo, de nuevo, golpeando Tab para empujarlos para mostrar que hay dicho dentro de esta etiqueta div, no voy a golpear C of Good nuestra página web y refrescar. Y se puede ver que no ha cambiado mucho. Pero si nos fijamos en DevTools saber con fondo de color acción MRSA, se puede ver la etiqueta dev con la columna 5. Cuando se cierne sobre él. El ancho es de arcos , todas cinco columnas. Es y yo sólo necesita centro-oriente. Para ello. Vamos a traer a nuestro editor de códigos y vamos a añadir una segunda clase. Se puede agregar más de una clase con n, una etiqueta HTML. Y todo lo que tienes que hacer es separarlo por una especie. Entonces voy a añadir una segunda clase llamada pantanos centrados. Y voy a crear eso como selector CSS dentro de nuestra hoja de estilos. Entonces voy a dibujar un cuadro centrado en punto o punto, y voy a escribir margin-left 0. Y tasa de margen de cuando se define algo de auto margino-izquierda y margin-derecha, Eveleigh centro médicamente esa dolencia. Entonces ahora voy a ver si la hoja de estilo y ver del index.html. Vuelve a nuestra página y toca refrescar. Se puede ver que hay columna se ha centrado dentro de nuestro Andrew, que se ve muy bien. No obstante, los elementos terminarían la columna no se han centrado. Por lo que tal vez quiera enviarle la imagen, el encabezado y el párrafo entonces estarán centrados caja que es columna. Entonces simplemente voy a agregar una propiedad a nuestra caja centrada. Ya lo diremos. Y voy a escribir texto alinear centro. Se puede ver que no hay centro es nuestra imagen se encamina en nuestro párrafo, el cual se ve fantástico. Voy a copiar esta propiedad. Voy a ir a nuestro editor de código y voy a atacar cualquier margen de lane bluer que acabamos de agregar y agregar endline porque copiado de text-align center, lo siguiente que quiero hacer es reinar sobre esta imagen. Entonces hay dos cosas que tenemos que hacer. En primer lugar, tenemos que asegurarnos de que la imagen también. Si has agregado una imagen realmente grande a la página web, posible que ya hayas notado que eso es muy grande porque al minuto no tenemos webs definidas. El tamaño que la imagen estará en la página web es el mismo que la imagen realmente es. Entonces si tienes una imagen grande, alguna vez te ves realmente grande en la página web. Y si es realmente pequeño, realmente pequeño y la página web, necesitamos definir una web y CSS. Entonces vayamos a nuestro editor de códigos. Eso es bueno, nuestra hoja de estilo. Y queremos seleccionar el elemento de imagen dentro de la clase centro a pantanos. Entonces para hacer eso, el primer rayo, el selector CSS para la clase de caja centrada. Y luego escribimos el selector de elementos CSS de IMG para el daño. Por lo que cualquier propiedad que agreguemos aquí dentro de los corchetes se aplicará a todas las imágenes dentro de la clase de caja centrada. Y eso es tasa con 300 píxeles. Y a ver si no lo hace, vuelvo a nuestra página y refresco. Y se puede ver que nuestra imagen ahora es mucho más pequeña ya que es el ancho de 300 píxeles. Simplemente conóceme quiero escribir esta imagen sobre. Así que vamos a hacer clic en el elemento HTML de la imagen y luego en la imagen de pantanos centrados, sentido real que se hace clic en una nueva propiedad. Añadamos radio de borde. Y podemos agregar cualquier porcentaje que queramos para el radio fronterizo. Simplemente reinó sobre el forense. Por lo que podrías usar 10 por ciento, como puedes ver aquí. Podrías usar 20 por ciento. Podrías elegir 30 por ciento. Puedes usar cualquier porcentaje que laves, Havre. Tus imágenes cuadradas y tu imagen debe ser cuadrada. Si tu imagen no es cuadrada, simplemente puedes cargarla en Photoshop o software de edición de imágenes amnesia que tengas. Haz cuadrado el daño y ve si, si tu imagen es cuadrada y haces que el radio fronterizo sea 50 por ciento, hará circular la imagen. Eso apesta fantástico. Voy a copiar esa propiedad, abrir la hoja de estilo y estamos centrados en el vendedor conjunto de reglas de daños pantanos. Y cuando un PSTN y ver si es, voy a volver a esta página web y refrescar. De acuerdo, Eso es una estrella en que son realmente geniales. Una cosa, te darás cuenta de inmediato ya que el texto negro es realmente difícil de ver en este fondo. Por lo que voy a hacer clic en la sección de fondo de color. Voy a entrar en las propiedades del verdadero Sam. Y voy a escribir color, hashtag y sexo a HFS, que es el código hexadecimal para el peso. Y eso de inmediato hace que una etiqueta soporte mucho oso. Entonces voy a copiar ese verdadero bien. Nuestra hoja de estilo y PSTN como nuevo carril, estamos entonces son juego de reglas de fondo de color y ver si voy a volver a nuestra página y refrescar. Lo siguiente que necesitamos echar un vistazo es que la imagen está colocada demasiado cerca de la parte superior de la sección de intro y del párrafo en la parte inferior, una frase demasiado cerca de la parte inferior de la sección anthro. Entonces si hago clic en el elemento HTML clase pantanos centrado, eso es pad este Rabat. Entonces dentro del conjunto de reglas de bugs center y ¿cuándo son ocho relleno? Y si no defino una izquierda, superior, derecha o inferior, los Pexels que aplique van a aplicar a los cuatro lados. Así que izquierda, arriba, derecha, e inferior. Voy a añadir un relleno de 50 pixeles. Y se puede ver que al instante se ve mucho mejor. Voy a copiar las propiedades de relleno. Simplemente lo creo y los agrego a mis pantanos centrales en hoja de estilo y veo si volví a la página web, hay una última cosa que creo que se necesita hacer aquí, y esa es la etiqueta de encabezado de bienvenida simplemente no destaca lo suficiente. Entonces si hago clic para elegir un elemento, el cursor sobre la etiqueta H1, seleccione la etiqueta H1, haga clic para crear un nuevo Sam real. Voy a hacer que el tamaño de la fuente sea de 70 píxeles, pero puedes hacerlo lo que quieras. Y voy a hacer audaz la fuente para destacar más. Voy a copiar eso realmente triste. Vuelve a mi hoja de estilo. Pero porque acabamos de cambiar el tamaño de la fuente y estamos fuera de una etiqueta H1 de encabezado. Voy a ir a la parte superior de mi hoja de estilo. Voy a añadir un nuevo comentario, avance slash pass trucos. Voy a escribir tamaños de fuente astérix forward slash para cerrar el comentario. Y voy a aparecer esa regla establecida y ahí. Y voy a usar esta sección para agregar cualquier otra diversión, sentido real a medida que avanzamos. Voy a salvar esto. Vuelve a nuestra página y pulsa Refresh. Un último retoque que se necesita. Acabo de notar dentro de la navegación, ya que notarás que la navegación no está configurando central para el resto de la página. Vamos a investigar manera. Entonces si echamos un vistazo a nuestra navegación de clase de lista desordenada y pasamos por encima de ella. Se puede ver si se mira en la parte superior de la página y el morado que está mostrando el relleno. Tenemos un relleno aplicado a la izquierda y no al rayo. Este es solo un estilo CSS predeterminado, que es aplicado por braseros porque es un último. Obviamente queremos que esto sea una navegación. Por lo que vamos a añadir relleno izquierdo 0 pixels a nuestro rol de navegación sam. De lo que se asegura que no haya relleno a la izquierda para empujar la navegación. Voy a copiar esa propiedad de relleno izquierda que acabamos de agregar. Acude a nuestra regla de navegación, establece un nuevo carril, un PSTN, y mira si voy a volver a la página y refrescar. Se puede ver que casi estamos ahí. Todavía es un poco demasiado a la tasa. Entonces si le echo un vistazo a los últimos ítems cuando se puede ver que agregamos un margen a la izquierda, enseñar último ítem para crear las cosas de lanza. Pero lo que esto está haciendo es empujar la navegación hacia la matriz porque el primer elemento tiene un margen que no es necesario. Para solucionar esto, vamos a utilizar un selector CSS llamado primero fuera cinta para quitar el margen que queda solo de la primera, esté dentro de la navegación para calificar a este editor de código Goodyear y soplar la navegación el último día. Y diremos en, vamos a añadir otro. Añadamos navegación de punto o punto para la clase de navegación. Añadamos que no sea por el que no soy elementos colon. Y luego escribimos primero fuera de la cinta. Entonces, ¿cómo funciona esto? Al inicio, tenemos nuestra navegación, que es nuestro selector de clases. Entonces tenemos LI. Por último soy un selector de elementos, por lo que selecciona todos los elementos LI fueron entonces la clase de navegación. Pero entonces hemos agregado llamada en primero de cinta. Entonces eso significa que solo afectará al primero para no ser que yo sea la clase de navegación del proveedor como otros corchetes rizados. Y no queremos margen dentro del primer ítem de lista en nuestra navegación. Entonces vamos a volver margin-izquierda 0 píxeles. Lo que esto significa es el primero para que no lo haga entonces, o clase de navegación no tendrá margen de risa ese mar de eso. Vuelve a nuestra página web y refresca. Y se puede ver son la navegación ahora se alinea perfectamente si inspeccionamos o navegamos y vamos a nuestro último día. Y se puede ver que el primero tiene el primero de cinta regla-set que acabamos de agregar para quitar el margen para cada otro nido que estoy después de eso tiene el margen agregado porque no utiliza el primero de tipo real Sayer. 15. Construir el sitio web: cambiar el fondo: Cuando se trata del fondo coloreado o de su página web, necesitarás usar la imagen de fondo incluida para este curso. Puedes encontrar y usar cualquier fondo U1. Déjame mostrarte cómo hacer eso. Primero, Vamos a encontrar una imagen diferente para el fondo de nuestra página web. Te recomiendo un sitio web como Unsplash, que tiene imágenes libres de regalías, utilizables, pero puedes usar cualquier imagen que quieras siempre y cuando tengas permiso para hacerlo. Y yo sólo voy a buscar fondos. Puedes desplazarte hacia abajo y encontrar cualquier imagen, imagina fantasía. Yo sólo voy a elegir uno que me guste. Por ejemplo, ese es uno de los bosques. Y solo voy a dar clic y descargar daños. Entonces esta es mi carpeta de descargas y este es el daño que acabo de descargar. Voy a arrastrar esta imagen a la carpeta de imágenes de la página web en la que estaban trabajando. Y voy a renombrar este bosque por granular. Pero puedes ponerle el nombre que quieras. Es mi ir a nuestro sitio web y somos eventos DevTools con la sección de fondo coloreado seleccionada. Puedes ir a la URL de fondo, dar clic para editarla. Y voy a cambiar el punto de fondo PNG por el bosque por grano, dodge JPEG, razón por la cual acabo renombrar el daño que descargamos dentro de la carpeta Imágenes. Entrar. Y se puede ver que esta imagen ya ha entrado en vigor en nuestra página web. Y es tan simple como eso. Puedes encontrar cualquier imagen que quieras usar para el fondo fuera de tu sitio web y asignarla al fondo usando el método que acabo mostrarte de un say para que este cambio surta efecto, necesitamos copiar el cojo. Acude a tu editor de códigos y reemplaza el carril de imagen de fondo en color. Previene el set real y ve si ahora cuando te actualices, verás que tu nuevo fondo ha entrado en vigor en tu sitio web. 16. Construir el sitio web: Acerca: Eso no es, crea la sección Acerca de este sitio web. Esta va a ser una fila con tres columnas, similar a lo que creamos durante la demostración bootstrap. Carguemos nuestro editor de códigos y creemos un nuevo comentario. De nuevo, es menos que decir signo de exclamación dash, dash. Y vamos a volver a guión, guión mayor que lo mismo. Y azul esto vamos a escribir el HTML para o una sección de mordedura. Entonces lo primero que quería hacer es tener una etiqueta abierta de sección y una etiqueta de sección. A continuación vamos a usar Graduado de Bootstrap. Entonces lo primero que necesitamos como fila, por lo que creamos una etiqueta HTML dev con la clase de fila. Y voy a cerrar esa etiqueta div. Y luego tenemos ns, voy a crear tres columnas de cuatro ancho. Entonces para hacer eso creamos un div con la clase CORREL para columna dash forward. Y voy a cerrar esa etiqueta div. Voy a copiar esto y pegarlo dos veces. Por lo que ahora tenemos tres columnas. Somos entonces nuestra fila con una bisección aura. Entonces lo primero que quiero tener con la columna Anna, porque una imagen, así que voy a crear la etiqueta HTML de imagen y un SRC para fuente. Y tenemos que sumar el camino para nuestra imagen. Nuevamente, dentro del paquete siempre y cuando tenga daños, los vamos a utilizar. No necesitas usar estos como he mencionado antes, pero si quieres seguir con exactitud, Entonces los daños están en esta carpeta para que los uses. Vamos a utilizar las 123 imágenes. Entonces por ahora vamos a centrarnos en el arriba por una clavija J. Entonces voy a escribir la ruta, que es la carpeta de imágenes barra hacia adelante sobre dash one dot JPEG. Y voy a tener el texto alt de un byte dog 1. Y voy a cerrar la etiqueta HTML. Lo siguiente que quieren es un rumbo para esto, voy a usar el encabezado h3 y sólo voy a escribir top dog. Voy a cerrar la etiqueta de encabezamiento. Y por último quiero un párrafo. Entonces voy a escribir el elemento P HTML. Y sólo voy a ir a nuestro generador Loren Ipsum, que hemos utilizado antes en este curso. Y apenas enero en algún texto de párrafo ejemplo. Voy a copiar esto. Vuelve a nuestro editor de código y ps a m. nuevamente, como se mencionó anteriormente, cuando estés trabajando con grandes cuerpos de texto, moverá tu editor de código o hacia la izquierda. Entonces para tenerlo gordo todo en una ventana, simplemente ve a Ver. Toggle soft wrap. No hay guarda todo lo contenido dentro de tu ventana de editor de código. Y sólo voy a cerrar el elemento HTML de párrafo. No sólo voy a copiar lo que hay dentro de esta columna y a la segunda, tercera columna. Y quiero que las imágenes sean diferentes para cada columna. Entonces tenemos un barco a una morada, tres imágenes dentro de nuestra imagen para ahí, que podemos usar. Entonces solo voy a cambiar la segunda columna, 272 daños y la tercera columna para usar su mordida tres imagen. Nuevamente, voy a cambiar el texto antiguo, con ello dog2 y acatar perro 3. Y los encabezamientos, yo sólo voy a cambiar, permiten la variación. Entonces voy a hacer que este perro sea tardío. Y voy a hacer el tercer párrafo, perro gerente. Y voy a ver si el documento HTML ahora cargando nuestra página web y refrescante. Si nos desplazamos hacia abajo, se puede ver que las columnas estaban en nuestra fila están funcionando correctamente. El encabezamiento del texto del párrafo es con columnas n m. Pero lo primero que notarás es que se permite que las imágenes se amplíen. Por lo que necesitamos volver a nuestro editor de código y necesitamos agregar una clase para la acción de RSA. Entonces como atributo dentro de nuestra etiqueta HTML de sección, voy a decir que la clase es igual a marcas de voz. Y voy a escribir sobre y quiero ver si hay un salto final sobre terroristas hoja Ale, donde voy a añadir un comentario. Nuevamente, recuerda, comentar documentos CSS es diferentes documentos HTML. Necesitamos usar asteriscos de barra inclinada hacia adelante. Y siempre que una, uh, por astérix barra hacia adelante. Y luego voy a escribir una nueva regla, samp, ya que quiero reducir el tamaño de las tres imágenes con reacción anaeróbica. Primero voy a usar la clase de barco, y luego voy a usar la selección de elementos IMG. Y esto apuntará a todas las imágenes eran entonces con ello clase. Y luego voy a poner corchetes rizados. Entonces dentro de eso, voy a hacer la imagen con unos 140 píxeles y ver si ahora voy a ir a nuestra página web y refrescarme. Y se puede ver que estas imágenes no son mucho más pequeñas. Ahora quiero enviarle Elaine todo lo que puedo hacer haciendo click en el elemento HTML de sanción con la clase un barco y cuándo agregar un nuevo conjunto de reglas. Y voy a tomar el centro LN y vamos a copiar este conjunto de reglas en nuestra hoja de estilo y ver si no voy a refrescar la página. De acuerdo, este es el ingrediente. Pero uno de los temas que estoy viendo es que son barcos acción está demasiado cerca del lado izquierdo y derecho de la página. Para solucionar esto, necesitamos usar una función bootstrap llamada containers. Contenedores simplemente continuum elementos HTML, pad ellos y Elaine ellos en tu página web. Entonces, ¿cómo contenemos la bisección? Vayamos a nuestro editor de códigos. Y justo encima de su comentario de barco, Vamos a añadir un nuevo elemento HTML Dev con el contenedor de clase. Entonces vayamos al final, ofrezcamos una sección de mordida fuera del nuevo carril y cerremos la etiqueta div. Para que veas que nuestra sección de abate, no hay sets. Vamos a continuación el div de apertura y cierre, elemento HTML con el contenedor de clase. Al guardar esto, ir a nuestra página web y refrescar, puedes ver que hay una sección de bytes se ha contenido dentro del contenedor. Al mirar nuestras DevTools, puedes ver el contenedor de clase dev y somos vanidad o una sección de mordida. Lo siguiente que quiero hacer es moverme ahí bi-sección muriendo para crear espacio entre la sección de intro y con ello sección. Entonces para hacer esto, voy a seleccionar el elemento HTML byte, ir al rol sam y agregar un margen superior de alrededor de 40 píxeles. Voy a copiar esto. Buena nuestra hoja de estilo y añadir esto al barco real SAT y ver si volver a nuestra página web y refrescarlo. Lo siguiente que quiero hacer es redondear las imágenes para que coincidan con la imagen y RN RO. Nuevamente, para que trabajemos, las imágenes necesitan ser perfectamente cuadradas si estás usando otras imágenes que las proporcionadas en el paquete del curso, por favor asegúrate de que sean cuadradas. Nuevamente, puedes hacer esto en Photoshop o cualquier software de edición de imágenes ya que necesitan ser perfectamente cuadrados para el radio de borde para que se corten esto vaya a una de las imágenes en narcisos. Y puedes ver eso trae arriba el conjunto de reglas que ya tenemos creado en nuestra hoja de estilos. Y sumemos un radio de frontera, 50 por ciento, igual que lo que hicimos en la sección de intro. Esa es mi copia. Esta propiedad y valor. Acude a nuestra hoja de estilo y a nuestro editor de códigos. Crear una nueva línea bajo un daño de mordida entonces los corchetes rizados y pegar. Eso es muy bonito de eso. Volviendo a nuestra página web y refresca y puedes ver que casi estamos ahí para la sección de bytes. Lo último que quiero hacer es hacer que los rubros sean audaces. Entonces para hacer esto, voy a volver a nuestra hoja de estilo. Voy a crear cualquier Sam real y quiero seleccionar todas las etiquetas h3 con una clase cercana para hacer eso. Y siempre que un punto o punto y un byte para con ello clase. Y luego voy a escribir h3 para afectar a todos los elementos h3 de una clase cercana. Corchetes rizados, fondo B, es audaz. Y quiero ver si esto, finalmente, voy a volver a la página y refrescarme. Y se puede ver que esta sección no es ni ingrediente. 17. Construir el sitio web: por qué: Estamos haciendo grandes avances en nuestra página web. Nombremos MEG, la forma en que Us sección. Esta sección va a contener tres filas. Y cada fila va a tener una ligera variación de las redes de columnas. Entonces vamos a crear la primera fila con la forma en que nuestra sección. Entrémonos a nuestro editor de códigos y debajo de la sección de mordida. Pero con n, el dev contenedor, vamos a crear un nuevo comentario. Y vamos a Ray Y ofs. Pregunté sabía que todo el mundo de abajo es la forma en que nuestra sección, de nuevo, lo diré dos veces sólo porque es súper importante. Estamos agregando esto a continuación la sección sobre, pero con n, el contenedor de clase dev, ya que queremos la forma en que nuestra sección esté contenida dentro de ese contenedor, vamos a agregar un nuevo elemento HTML de sección. Y vamos a sumar la clase por nosotros. Y vamos a añadir una etiqueta de cierre para esa sección. Y O de n, Esta sección, vamos a sumar nuestra primera fila clase div. Y vamos a cerrar ese dev. Ahora tenemos a menos que primera fila a través de 12 columnas. Queremos una columna para el texto y encabezamiento. Y queremos llamarlos por los daños. Y queremos que la columna que contiene el encabezamiento y un párrafo sea un poco más grande que la columna de la imagen. Entonces vamos a agregar una clase dev cURL para columna. Y eso son megavatios de siete. Eso tiene una etiqueta div de cierre. Y ahora agreguemos una columna por daños. Por lo que voy a agregar otra columna de clase dev. Y si recuerdas, cada fila y Bootstrap deben sumar hasta 12 columnas de mié. Por lo que ya hemos gastado siete. Por lo que nuestra segunda columna debe ser de un ancho de cinco. Voy a cerrar la etiqueta div de apertura, y voy a añadir una etiqueta div de cierre. Entonces lo que tenemos aquí como nuestra sección de alambre, bueno entonces la forma en que nuestra sección tenemos una fila y dentro de la fila tenemos dos columnas. Entonces dentro de la primera columna, eso es o bien rumbo y cuándo hacer de esto un rumbo de etapa 2. Y voy a volver, somos los mejores perros y cerrar estos etiqueta h2. Después de todo, esta es una Y tiene sección off como cervezas de perro sitio web de negocios como megavatios, somos el mejor perro. A continuación voy a añadir un párrafo y sólo voy a copiar algunos de los Loren Ipsum que hemos utilizado anteriormente en la página web, tiene un marcador de posición. Entonces voy a cerrar la etiqueta de párrafo. Entonces esa es nuestra primera columna ordenada. Ahora quiero agregar una imagen a la segunda columna. Entonces por debajo de la segunda etiqueta de apertura div con anaerobe y salió una nueva capa. Y voy a añadir un elemento HTML de imagen. Entonces voy a imagen SRC para fuente igual y cuando el discurso marca y quiero agregar una ruta para la imagen. Si miras la carpeta de imágenes dentro del paquete proporcionado, puedes ver te he dado tres imágenes para usar por la forma en que nuestra sección. Por lo que puedes usarlos si lo estás siguiendo. Si estás usando tus propias imágenes, siéntete libre de hacerlo. Nuevamente, tiene sentido ponerlas en esta carpeta de imágenes para que puedas seguir fácilmente y usar rutas similares a las que estoy usando. Entonces vamos a agregar la primera imagen del sistema operativo en la forma en que nuestra sección. Es cuando la carpeta Imágenes y el nombre de la imagen es y dash, dash one one JPEG. Por lo que las imágenes para la carpeta, barra inclinada hacia adelante guión, guión uno JPEG. Y voy a añadir alt texto de nosotros somos los mejores perros también. Voy a cerrar esa etiqueta de imagen. Veamos si esto va a nuestra página web y refresca, desplácese y apunte. Se puede ver que nuestras columnas están ahí y nuestra regla está ahí. Pero lo primero que notarás es que la imagen es demasiado grande, por lo que nos afecta. Eso es genial. Editor de código Java. Vamos a crear un nuevo comentario en nuestra hoja de estilo. Por el momento es último astérix. Por qué OS astérix forward slash diciéndonos saben que cualquier Rawls dice a continuación este comentario están en relación con la forma en que nuestra sección. Y quiero escribir un conjunto de reglas para las imágenes de n El camino nuestra sección. Entonces voy a leer punto o punto manera de punto nos corrió para la clase Y ofs. Y voy a escribir IMG, así afecta a todos los elementos de imagen dentro del YR, nuestra sección, corchetes rizados mié. Pero en lugar de usar un ancho de píxel menos domesticado y cuando matriz un 100 por ciento. Y a ver si regresamos a nuestra página web y actualizamos, ahora puedes ver que el tamaño de la imagen es mucho mejor. Y FA, inspecciona este elemento, se puede ver que está usando casados un 100 por ciento. ¿ Qué significa esto? Bueno, si nos fijamos en la columna 5, que las imágenes, y se puede ver que la imagen no es un tramo a mié formas de ser un 100 por ciento de esa columna de ancho. Entonces para demostrar esto aún más, si hago clic en el elemento HTML de imagen, bueno de la forma imagen del sistema operativo, real set y el CSS PM, y cambio el ancho al 50 por ciento. Se puede ver cuando se pasa el cursor sobre la columna cinco dev que los daños eran entonces el daño no es un 50 por ciento el ancho de su política de desarrollo principal no está de acuerdo. Entonces cambiaremos eso de nuevo a un 100 por ciento. Lo siguiente que quiero para esta fila como granos de barra de colores y querían coincidir con el fondo de color que tenemos en nuestra sección de intro , de mano, ya hemos escrito el CSS para un grano de barra S. Entonces solo necesitamos agregar esa clase a nuestra fila para hacer sí, ir al editor de código y vamos a agregar una segunda clase 2 o fila. Entonces tenemos bajo marcas de habla, solo voy a añadir un espacio tras fila, y voy a añadir un fondo de color. Y lo que esto significa es que esta fila ahora se ha ido a utilizar también el color por clase creciente. Lo creamos para la sección de intro del sitio web, lo que significa que no necesitamos escribir más CSS para que ese fondo coloreado surta efecto. Vamos a ver si el HTML falla. Buena nuestra página web y refrescar. Y puedes ver que nuestro fondo ya se ha hecho efectivo y la sección YR, si coleccionamos inspeccionamos este elemento, verás que no solo se tira del fondo a través, sino que también ha traído el color de fuente del blanco a través como bien. Sólo hay dos cosas más como sección como lío en la primera, como relleno, como lo puedes ver, al minuto los elementos están demasiado cerca de los saids, sé mucho más agradable si tuviéramos algún relleno lluvia abajo. Ahora, podrías pensar que deberíamos agregar el relleno al sello real de fondo coloreado. Pero podemos hacer esto. Déjame mostrarte por qué. Entonces si agrego un relleno de 50 píxeles en nuestro conjunto de reglas de fondo de color. Escritorios, GRI it. Pero recuerda que el fondo coloreado también es utilizado por la sección de intro. Entonces si nos desplazamos hacia arriba, se puede ver que la sección Endriw tiene demasiada noche de fiesta. Al quitarlo, se puede ver lo que era antes. Por lo que en realidad sólo necesitamos aplicar el relleno a la sección YR para hacer eso. Y vamos a ir a nuestra hoja de estilo. Nos vamos a desplazar hacia abajo y vamos a escribir el selector de clases punto y ofs. Y luego voy a añadir la fila de clase. Entonces, ¿qué significa esto? Esto significa que en primer lugar estamos buscando en la sección clases de fila NA. Esto afectará a todas las clases de fila dentro de la clase de la Casa Blanca. Y luego voy a añadir relleno para un Pexels. Se puede ver. Ahora cuando refresco la página, se puede ver que la y, nuestra sección tiene un relleno realmente bonito. Lo último que falta aquí es que el encabezado es un poco demasiado pequeño y creo que se vería mejor si fuera audaz. Por lo que voy a dar clic en el elemento HTML. Y queremos agregar un conjunto de reglas. Y vamos a hacer que el peso de la fuente sea audaz para empezar. Y luego voy a cambiar el tamaño de la fuente a 50 píxeles. Eso parece mucho oso. Y cuando una copia ese papel sam. Y cuando vaya a mi hoja de estilo, y voy a desplazarme hasta donde tenemos la sección de tamaños de fuente. Voy a crear un nuevo carril y PSTN y ver si volví a la página web y remoda, se puede ver que no hay, eso es realmente bueno. Entonces esa es una de las tres filas, sin completador. Para que esto sea rápido y fácil, por qué realmente voy a hacer es que voy a seleccionar toda la fila y su contenido. Por lo que voy a seleccionar de la etiqueta dev rel de apertura a la etiqueta div ru de cierre y cuándo copiarla. Y lo voy a pegar dos veces más. Eso nos va a dar nuestras tres filas. Lo primero que voy a hacer es cambiar la segunda, tercera imagen por una segunda tercera fila. Entonces si miras nuestra carpeta de imágenes, tenemos un Y ofs t y un Y ofs tres Boucher. Voy a cambiar la forma AS1 a ballenas dos en la segunda fila. Y el camino OS1 para pesarnos tres en la tercera fila. Y voy a cambiar el rumbo de la segunda fila. Tiene esta es la forma en que nuestra sección, voy a agregar otra forma razón del sistema operativo. Alguien u ocho, el único negocio dirigido por perros, como de nuevo, este es un negocio de perros BAS. Y para la tercera fila, sólo voy a re perro. Y como nace, de nuevo, recuerda el nivel superior, el texto antiguo para las imágenes. Entonces sólo voy a hacer que coincida con los rubros. En este caso. El único negocio corrió un perro para la segunda imagen y oscuro y ha soportado para la tercera imagen. Entonces vamos a ver si esto va a nuestra página web y actualicemos. Y ahora se puede ver que tenemos nuestras tres filas y por favor tenga en cuenta la tercera fila y la primera regla que otorgan por uno una ligera variación en la segunda fila. Yo quiero que el fondo sea de un color diferente. Yo quería que fuera un fondo más claro para que la diversión pueda ser más oscura. Y también quiero la imagen del lado izquierdo y los textos y el lado derecho, pero sólo para la segunda y fila metálica. Entonces hagámoslo yendo a nuestro editor de códigos. Y primero cambiemos la imagen y las etiquetas por llovido, porque estamos usando la rejilla Bootstrap, esto es realmente sencillo de hacer. Todo lo que voy a hacer es que voy a seleccionar la columna siete, eran camioneta o una segunda fila. Voy a copiarlo y luego borrarlo. Y luego lo voy a pegar debajo de la etiqueta de cierre columna de oferta favorable. Entonces no, para la segunda fila se puede ver que lo primero que tenemos una camioneta, Es nuestra columna fav una imagen. Y lo segundo que tenemos a Anna es nuestra columna siete encabezamientos y etiquetas. Veamos si ese código o una actualización de página. Y ahora se puede ver la imagen para la fila media, o la segunda fila está a la izquierda y los textos y la tasa exactamente como la queremos. Por lo que ahora solo necesitamos que la capa de fondo y el texto sean oscuros. Voy a entrar al editor de códigos. Y para la segunda regla, sólo, voy a cambiar fondo de color, fondo demasiado tarde. Entonces ahora cuando veo de esto, si rápidamente echan un vistazo a la página web por refrescar eso, se puede ver que tipo de logra lo que queremos. Pero la única razón por la que está haciendo esto es porque está buscando un juego de roles dentro de nuestro archivo CSS llamado barra tardía granular. No puede encontrar eso. Por lo que es solo por defecto y hacia la normalidad en la página la cual tiene un fondo blanco y texto negro. Yo quiero un fondo, como un fondo gris claro. Entonces ahora agreguemos una regla establecida para nuestra clase tardía por grano. Para ello, voy a entrar en mi hoja de estilo. Voy a desplazarme hacia abajo a la sección Y ofs. Voy a añadir un nuevo selector CSS para nuestra clase de fondo ligero. Y dentro de los corchetes rizados, voy a hacer del fondo un valor hexadecimal de F1, F1, F1. Ahora puedes hacer que el fondo sea el color que quieras. Incluso podrías convertirla en otra imagen, lo que sea que te guste. Pero para mí, quiero un fondo gris claro. Y el código hexadecimal, que da un fondo gris claro si estás siguiendo, porque F1, F1, F1. Y van a salvar esto. Vuelve a nuestra página web y pulsa Refresh. Y se puede ver tenemos una bonita barra gris claro granulada para la fila media, mujeres en el camino nuestra sección. Y luego nuestra primera fila y tercera fila, usando la barra Cn granulada como nuestra intro para mantener las cosas agradables y consistentes de la forma en que nuestra sección ya que ninguno puede crear. El único que queda es agregar un poco de margen desde la parte superior de la sección de alambre para lanzar así entre sus lanchas acción y la forma en que nuestra sección. Entonces para hacer eso, solo voy a ir al camino nuestra sección y DevTools. Voy a crear un nuevo conjunto de reglas. Y voy a agregar margen top para un Paxos, MSX Greer. Solo nos copiemos. Nay, bien. Nuestra hoja de estilo, RSTN y tenía mar de día. Cuando actualizamos la página, puedes ver la forma en que nuestra sección está ahora completa. 18. Construir el sitio web: comunica: Una de las partes más importantes del sitio web, y algunos argumentarían que todo el propósito de un sitio web es atraer a la gente a ponerse en contacto contigo. Entonces por esa razón, debemos tener una sección Contáctenos a tu página web. Echemos un vistazo a la codificación ahí y NIH dentro de nuestro editor de códigos y debajo de la sección de alambre. Pero de nuevo, con n, la etiqueta de cierre del div con el contenedor de clase, vamos a agregar un nuevo comentario y vamos a hacer contactarnos. Por lo que sabemos que NF-1 a continuación hay común es la sección Contáctenos del sitio web. Ahora vamos a añadir una sección y sólo vamos a darle un contacto de clase. Vamos a cerrar esa etiqueta de sección porque bueno, voy a añadir un nuevo carril con n, la sección Contáctenos. Y para la primera parte de la sección Contáctenos una Asamblea quiere un encabezamientos y contáctanos. Y un pequeño párrafo abajo que dice Gan toque hoy. Entonces, agreguemos eso. Voy a agregar H1 para rumbo y ayuda de invierno, contáctanos. Y cuando una etiqueta cerrada H1 y por debajo de eso y sólo va a agregar una etiqueta HTML de párrafo y re, ponerse en contacto día. Y voy a cerrar esa etiqueta de párrafo. Tan solo conoce C de eso. Refresca nuestra página web. Y se puede ver que esto ha sido agregado a nuestra página. Y en lo siguiente que quiero abajo, esta es una fila, y quiero significar columnas a esa fila. En el lado izquierdo, solo quiero datos de contacto como correo electrónico y dirección. Y en el lado derecho una de dos imágenes más que quieren agregar, una tendencia, la carpeta de imágenes, las puedes ver bajo contacto, una, contacto también. Entonces eso es agregar eso a nuestro HTML. Entonces voy a añadir un nuevo carril, azul el párrafo. Y voy a agregar un div con la clase de fila porque vamos a estar usando el sistema de filas y columnas bootstrap. Y luego dentro de esa fila, quiero dos columnas. Y quiero que la columna de la izquierda sea un poco más pequeña en la columna de la derecha, especie de lo que hemos estado haciendo con la sección de alambre. Entonces para la primera columna y luego agregar un div con la clase cURL para guión de columna. Y voy a tener el ancho de columna de cinco. Voy a cerrar esa etiqueta div. Y luego para la segunda columna, y cuando nuestro div con la clase de la columna siete, porque 5 y 7 equivale a 12. Y la columna max donde podemos usar fila de par y Bootstrap es de 12. Y cuando termine la etiqueta de apertura, y voy a añadir una etiqueta div de cierre. Por lo que ahora tenemos nuestras dos columnas para una sección Contáctenos. Cuando la primera columna, solo quiero agregar algunos datos básicos de contacto. Entonces voy a añadir una etiqueta de párrafo y voy a escribir correo electrónico. Y por el email solo voy a maquillar uno. Tan top dog en el perro business.com. Y voy a cerrar ese elemento HTML párrafo. Y quiero otra capa. Entonces voy a hacer otra etiqueta de párrafo y vamos a escribir y nada, llamar llovido y sentido o agua pobre. Porque como negocio de perros. Y voy a cerrar la etiqueta de párrafo y ahora quieres calificar la dirección. Entonces voy a empezar por escribir otra vez una etiqueta de párrafo. Y voy a calificar la primera línea de la dirección. Pero como ustedes saben, las direcciones atraviesan carriles móviles, pero estos no son párrafos separados. Es simplemente un nuevo carril dentro de un párrafo. Entonces, ¿cómo escribimos un nuevo carril? El rayo un nuevo carril por calificación BR, BR para salto de línea o pan. Por lo que acabo de lanzar una etiqueta BR. No es necesario cerrarlo. Y voy a leer el segundo carril de la dirección. Ahora quieres tomar un carril nuevo final. Entonces sólo voy a ser r otra vez para Greg o cojo break. Y voy a escribir el ln final de nuestra dirección. Y luego voy a cerrar los elementos HTML del párrafo. Y vamos a ver esto. Acude a la página web y refresca solo para ver cómo se ve esto. Entonces esto se ve bien. Y quieren sumar daños a la tarifa de esta sección Contáctenos. Para ello, voy a volver al editor de códigos. Y debido a que queremos agregar dos imágenes, voy a añadir otra fila con otra columna. Por lo que tenemos correa n-bit. Se puede agregar una regla dentro de una columna, que es exactamente lo que voy a saber, para que podamos tener dos imágenes lado a lado, evitar la sección de tarifas de la página Contáctenos de nuestro sitio web. Entonces somos entonces nuestro ancho de columna de siete, que es al ritmo de nuestros datos de contacto que acabamos de agregar. Y vamos a crear un nuevo carril. Y voy a añadir una clase div de fila y añadir la etiqueta div de cierre. Porque queremos una fila. Entonces vamos a esta columna a la derecha. Y redes que parecen nuestra primera fila, tenemos 12 columnas que podemos usar dentro de fila NASW. Entonces porque quiero que las imágenes sean de igual tamaño, voy a añadir dos columnas de sexo. Entonces voy a crear un div con una columna de clase sacos de tablero y cerrarlo. Y voy a crear otro div con la columna de clase dash sex y una etiqueta div de cierre. Entonces tenemos dos columnas de sexo dentro de una fila. Bueno entonces nuestra columna de siete. Entonces esa capa es un poco más avanzada y cosas que hemos estado haciendo hasta ahora, pero esto nos permite poner dos daños ordenadamente dentro del lado derecho de nuestra sección Contáctenos. Simplemente queremos agregar una imagen a cada una de estas columnas. Entonces voy a escribir la etiqueta de imagen, SRC para fuente. Y como siempre, pondríamos el camino entre las marcas del discurso. El camino es el mismo de siempre. Es prevenir nuestra carpeta de imágenes. Y tenemos un dash de contacto uno J peg 2s, y un contacto dash dos J peg a usar. Como siempre, puedes usar cualquier imagen que quieras, cama que estás siguiendo. Se pueden utilizar estos para los daños proporcionados. Entonces somos la carpeta de imágenes, barra de bosque, contacto, dash one, JPEG. Como siempre, recuerda calificar algunas etiquetas viejas. Por lo que alt es igual y luego el discurso marca y se fue a un Contáctenos Imagen 1. Y voy a cerrar esa etiqueta de imagen. Y de pronto sólo voy a copiar esta etiqueta de imagen. Y fueron entonces nuestra segunda columna, voy a pegar y cambiar la una a dos porque la segunda imagen se llama contacto dash dos. Y voy a cambiar las etiquetas alt por el Contáctenos Imagen 2. No voy a ver una página de ROR menos buena y refrescar. Por lo que en este momento se puede ver que está tratando de encajar las imágenes eran entonces nuestras imágenes de barra de columnas son simplemente demasiado grandes. Por lo que vamos a utilizar un camión CSS se utilizó antes para hacer que las imágenes sean un SIG 100 por ciento web. Vamos a ir a nuestra hoja de estilo. Vamos a ir al fondo. Vamos a añadir un comentario. Contáctanos. Por lo que sabemos que cualquier SAT real que ponemos debajo de él se relaciona con la parte de contacto de nuestro sitio web. Vamos a leer la clase de contacto. Y en imágenes como el selector de elementos. Como siempre, lo que esto significa son nuestros roles ya que se va a aplicar a cualquier daño dentro de la clase de contacto. Y cuando agrego corchetes rizados y voy a repetir palabras un 100 por ciento y ver si vuelvo a nuestra página web, se puede ver que estas imágenes están realmente bien contenidas dentro de cada columna. Entonces si te confundiste un poco, el avanzado diseño de la habitación que acabamos de utilizar, déjame intentar mostrártelo visualmente, se desahogará dice. Si voy a la sección de contacto de nuestra página web y lo abro. Se puede ver que aquí se muestra una fila. Si entro en esa regla, se puede ver nuestro primer conjunto de columnas. Tenemos una columna donde para cinco a la izquierda y un ancho de columna de siete a la tasa, terminarán esa segunda columna, incómoda siete. Tenemos una fila, y dentro de esa fila tenemos dos nuevas columnas de igual ancho, columna y sexo de columna. Para que puedas ver cómo una fila de escritorio tiene columnas con Anna. Y esta fila está dentro de una columna, dentro de una fila con dos columnas. Y así solo hay realmente dos retoques que quiero hacer aquí a la sección Contáctenos para que se vea mucho más bonito. Y eso primero es enviarla y marchar el Contáctenos y ponerse en contacto hoy texto. Entonces para hacer eso, una primera necesidad de ponerlos en un dev. Entonces vamos a nuestro documento HTML y vamos a añadir una nueva capa por encima de la etiqueta de encabezado H1. Vamos a crear un div con el encabezado dash de contacto de clase. Y voy a poner el div de cierre justo debajo las etiquetas de párrafo de cierre. Voy a salvar esto. Y voy a saltar a través de nuestra hoja de estilo y añadir un selector de clases, contacto guión encabezado. Pero realmente es exactamente a la clase que acabo de agregar para el dev, que puse ahí encabezado H1 y párrafo anti y corchetes rizados. Y voy a agregar texto alinear centro. Entonces centraliza el texto. Y voy a añadir un margen a la parte superior de 40 píxeles. Y vamos a ver de s, buena nuestra página web y refrescar. Y se puede ver que ahora tenemos como margen bien y centralizado. Lo último que quiero hacer es hacer que la parte de la dirección sea audaz. Esto es realmente sencillo de hacer. Simplemente ve a través de tu documento HTML. Y justo después del párrafo de apertura, etiqueta para un vestido. Y cuando agregue otra etiqueta, B, que significa negrita, y justo antes de la etiqueta de párrafo de cierre, para y justo antes de la etiqueta de párrafo de cierre, luego agregar una etiqueta de cuerpo de cierre, que de nuevo representa negrita. Ahora cuando veo de este documento HTML de alta costura y refresco, se puede ver la dirección está en negrita. Esta sección Contáctenos ya está completa. 19. Construir el sitio web: pie de pie: El último apartado que queremos añadir a nuestra página web es un más allá. Entonces cargemos nuestro editor de códigos. Y por debajo de la sección Contáctenos. Nuevamente, agregue una columna del tercero derecho. Y vamos a cerrar el comentario. Y vamos a añadir una sección donde si la clase centro y quieren agregar la etiqueta de sección de cierre. Y lo primero que quiero dentro del primer año es una línea a través de la pantalla. Para ello, sólo escribimos HR. El elemento HR HTML pondrá una línea a través de la pantalla. Es sinónimo de real horizontal, y es lo que usamos cuando solo queremos poner una línea a través de la pantalla como hacemos en la figura. Y eran alguien va a agregar un párrafo con los pares del año actualmente 2021. Voy a poner un guión y voy a poner el nombre con el negocio, que en este ejemplo es el negocio del perro. Puedes ponerlo donde quieras en la figura. Y vamos a cerrar la etiqueta de párrafo y queremos ver si esto va a la página web y refrescar. Y puedes ver que ahora tenemos un dedo en nuestra página web. Cosas demasiado pequeñas que quiero hacer aquí. En primer lugar, quiero centralizar las etiquetas de pie de página. Y en segundo lugar, quiero un margen desde la parte superior de esta línea que acabamos de sumar a la sección Contáctenos. Entonces voy a saltar a la hoja de estilo. Voy a añadir un comentario como lo hacemos nosotros. Voy a escribir cr y voy a cerrar el comentario. Y luego voy a usar la clase trabada porque el selector CSS, simplemente lo creamos. Y cuando tenía corchetes rizados y cuando agrego texto alinear centro para alinear las etiquetas de pie de página que acabamos de agregar al centro. Y luego voy a añadir margen top 40 pixels para el espaciado entre la parte superior izquierda de ahí y la sección Contáctenos. No voy a ver si nuestra hoja de estilo. Voy a ir a nuestra página. Y se puede ver las etiquetas no está centralizada y tenemos un margen entre el filtro y el público sección Contáctenos. Lo último que quiero hacer es simplemente hacer calvo este 2021. Voy a hacer eso de la misma manera que lo llamamos parte de dirección del apartado Contáctenos. Entonces voy a ir a mi editor HTML y justo frente al 2021. Y cuando agrego la etiqueta b y justo después de la sección 2021 y luego agrego la etiqueta p de cierre. No voy a ver si esto vuelve a nuestra página y refresca. Y puedes ver ahora tenemos un completo para en nuestra página web. 20. Construir el sitio web: fuentes y enlaces: O sitio web es más o menos completo. Tenemos nuestra navegación en su lugar. Tenemos nuestro Endriw, tenemos la sección abate, tenemos la sección YR. Tenemos una sección Contáctenos, y tenemos una feria, todo esto se ve realmente bien. Algo que quiero hacer es importar una fuente de Google. Sólo para que tengamos una agradable diversión personalizada en nuestra página web. Para que eso sea un poco desnudo, vamos a utilizar el mismo método que usamos cuando Creon o sitio web de ejercicios. Y eso fue importar una diversión de Google. Entonces vamos a fuentes dot google.com. Y voy a encontrar una diversión, un lago, un realmente como Leto como una diversión. Y bueno. Los biles modernos son profesionales. Entonces voy a elegir eso. Y como antes, voy a dar clic en seleccionar como estilo sobre la luz, regular y audaz. Entonces a la tarifa máxima de la página de fuentes dot google.com, voy a dar clic en ver tus familias seleccionadas. Y en el primer cuadro, voy a seleccionar toda la referencia del enlace y copiarla a nuestro editor de códigos e ir al jefe de nuestra página web justo debajo donde hemos agregado la referencia de enlace CSS de punto de la hoja de estilo. Voy a crear una nueva capa. Voy a pegar el enlace de referencia para la diversión de Google. Yo sólo voy a empujar esta línea a través. Yo solo para que esté por debajo de la de arriba solo para que las cosas se vean bonitas y aseadas. Y voy a ver si mi index.html, voy a volver a la página de Google Fonts, y voy a seleccionar la regla CSS y copiarla. Entonces voy a volver a mi hoja de estilo dot css y crear un nuevo selector de elementos bajo mi comentario tamaños de fuente. Entonces solo voy a crear una nueva línea por debajo del conjunto de reglas H2. Y porque quiero menos diversión para aplicar a todo el sitio web y cuándo usar el selector de elementos del cuerpo. Voy a añadir corchetes rizados. Y voy a pagarnos entonces mi referencia font-familia. Y no voy a ver esto. Acude a mi página web y refresca. Se puede ver que ahora hay diversión ha entrado en vigor. Pero sólo para estar seguro, voy a ir a Inspect Element y sólo voy a seleccionar el encabezado. Y si me desplaza hacia abajo hasta la referencia del cuerpo, se puede ver que la familia de fuentes es Leto. Ahora se ve realmente bien y no tienes que usar la diversión posterior. Puedes utilizar cualquier fuente que desees para tu propia página web. Pero si estás siguiendo a lo largo se utilizan la granja posterior. Lo último que realmente queremos hacer es si le echas un vistazo a nuestra navegación y le das click en alguna de las palabras, realidad no se divierten Deana al minuto. No hay una navegación real. Por lo que nuestro sitio web es un sitio web de una página. Entonces cuando hacemos clic en estos botones, en lugar de que nos lleven a una página web diferente, queremos que nos lleven a una sección de la página web de Desk. Entonces, por ejemplo, si hago clic de la forma en que nuestra sección, quería desplazarme hacia abajo para nosotros y llevarnos a la sección Por qué Nosotros. Entonces, ¿cómo hicimos eso? Si vamos a nuestro editor de códigos, lo primero que tenemos que hacer es agregar un AD o un identificador a las secciones. Entonces si echamos un vistazo a nuestra navegación, tenemos una sección de casa y una sección de embarcaciones. Uh, ¿por qué nuestra sección? Y una sección de contacto. Por lo que necesitamos agregar un ID en nuestra página web para cada una de estas áreas que luego podamos vincular estos botones para que la página web se traslade a estas áreas al hacer clic en ellas. Entonces la primera idea que voy a añadir es para casa. Y lo voy a agregar a nuestra sección Andrew porque queremos que el botón de inicio nos lleve al principio de la página. Por lo que voy a añadir un atributo N2, nuestra sección para la enésima fila. Entonces lo voy a agregar antes de la clase de resección doblada. Y yo sólo voy a ray AD es igual a marcas de habla. Y para el AD de su sección o el identificador, me voy o un hogar cuando necesito añadir una identificación para nuestro barco. Entonces voy a desplazarme hacia abajo hasta la sección de bytes y como atributo en la etiqueta de sección de apertura para el área cercana. Y vamos a añadir otro AD. Y voy a escribir un byte para nosotros. Voy a desplazarme hacia abajo hasta la etiqueta de sección de apertura de cables. Y de nuevo voy a añadir una identificación, que de nuevo es AD igual y en habla y marcas de habla Ravenna y cada vez que una manera Dash nos, asegurándonos de que cada vez que haya un espacio en lo que estás leyendo, estás usando un guión en lugar de las lanzas. Y por último, voy a desplazarme hacia abajo hasta el área de contacto. Y nuevamente en la sección de apertura, etiqueta HTML para la sección Contáctenos, voy a escribir águilas AD, marca de voz, contacto, marca de voz. Por lo que ahora hemos agregado identificadores únicos son identificadores para la acción Contáctenos y hogares. Entonces, ¿cómo hicimos estos botones? No hay enlace a ellas áreas para que al hacer clic en ellas, la página web se traslade a esa zona, se inicie leyendo un enlace de la forma en que normalmente utilizaríamos una ref H. Por lo que frente al día de escritorio y para casa y cuándo escribir la etiqueta a href. Y después de la etiqueta HTML de cierre para casa, voy a cerrar la etiqueta a href, el final, el ejercicio te enseñé a usar un, a, , una trampa para enlazar a un EKG, iniciar una página web, por ejemplo, google.com. Pero en realidad queremos enlazar con los identificadores que acabamos de crear. Entonces, ¿cómo hicimos eso? Dentro de las marcas de voz, derecha, hash, y luego el ID al que desea que se vincule la edad ref. Entonces menos es el botón de inicio. Por lo que queremos que se vincule a la casa AD. Simplemente lo creamos para que escribamos a casa. Ahora lo que voy a hacer para que las cosas sean rápidas y fáciles es que solo voy a copiar esa etiqueta de apertura HREF, y la voy a pegar frente a los otros tres últimos artículos. Y luego voy a copiar el cierre, AH, etiqueta href. Y voy a pagarnos que después de los tres restantes, Eso son datums, uh, nombre va a entrar y cambiar las identificaciones por cada uno de los tres restantes. Entonces para la sección About Us, el ID que creamos era un byte. Entonces lo voy a hacer hachís. Y en un barco por la forma en que nuestra sección, la ID, lo creamos con nosotros. Por lo que voy a re, re dash bus un M para la sección de contacto o AD fue contacto. Por lo que voy a hacer el contacto hash H ref. No voy a ver si S va a nuestra página web y refresca. Por lo que aquí han pasado algunas cosas. Hemos perdido el estilo. Eso se debe a que agregamos una H ref antes del último artículo. Entonces vamos a necesitar arreglar eso. Pero también los botones en la navegación ahora deberían funcionar. Entonces si hago clic en un barco, se puede ver la página web se mueve hacia abajo a su bisección. Ahora si hago clic por qué OS, se puede ver que se mueve hacia abajo a la forma nuestra sección y ética que contactan y se mueve hacia abajo a la sección de contactos. Por lo que la navegación que funcionan, solo necesitamos afectar el estilo. Entonces si elijo un elemento de la página usando DevTools y selecciono uno de los últimos ítems en nuestra navegación. Se puede ver lo que está pasando. Se pueden ver los márgenes que lo creamos todavía se están aplicando a los últimos ítems. Pero la razón por la que el espaciado y no hay cerrado nuevo es porque el último elemento es el lado Naim, un elemento HTML H ref. Por lo que los márgenes deben aplicarse a la ref H y no al último ítem. Entonces si entramos en nuestro editor de códigos y vamos al conjunto de reglas de navegación, lo creamos para los últimos ítems. Tenemos que añadir un SAT real para el, AH, balsas y la navegación. Entonces debajo de donde creamos el conjunto de reglas ALI de navegación, voy a calificar la navegación post-op. Y luego voy a utilizar el selector de elementos para el, AH, refs eran entonces o navegación. Y voy a añadir corchetes rizados. Y entonces de repente sólo va a copiar ese margen se rió que teníamos para LA y le puso a la navegación un papel, dilo. Y yo voy a quitar eso de LA. Verdadero triste. Y a ver si ahora cuando volvemos a nuestra página web y actualizamos, nuestros márgenes están de vuelta. Pero se puede ver que las longitudes no son de color azul, que no eran antes. Esto se debe a que por defecto Bootstrap como Sainz, un color azul a tu enlace. Y porque acabamos de agregar enlaces a nuestra navegación en forma de trampas. Bootstrap está asignando automáticamente un color azul. Se puede ver que en DevTools de usted selecciona el último día y se puede ver que está heredando este color azul del bootstrap.css. Por lo que solo necesitamos agregar una propiedad CSS de color y nuestra hoja de estilo para anular eso. Entonces en la navegación, un conjunto de reglas, simplemente lo creamos. Voy a añadir el color de la propiedad y el valor de los ceros de sexo, que es el código hexadecimal para negro. Voy a ver esta hoja de estilo. Vuelve a nuestra página web y refresca. Y puedes ver nuestros enlaces y nuestra navegación no son negros de nuevo. 21. responsividad móvil: Por lo que nuestros sitios web y ellos pueden jugar y un escritorio tampoco. Es increíble. Pero como mucha gente hoy en día ve sitios web en su móvil, es importante que los sitios web o móviles respondan. ¿ Qué significa la respuesta móvil? Significa que el sitio web se ve bien en cualquier tamaño de pantalla, incluidos los móviles. Después de todo, ¿cuál es el punto de tener un sitio web de aspecto realmente bonito en el escritorio? F no es agradable en un móvil. Entonces, ¿cómo nos aseguramos de que este sitio web se vea bien también en el móvil? Dentro de DevTools, en la parte superior de la barra de herramientas, verás este icono. Parece un móvil y un iPad juntos. Si pasas el cursor sobre él, dice Modo Diseño Responsivo. Dale una grieta a eso. En Chrome. Está en el lado izquierdo de la barra de herramientas Herramientas de desarrollo. De nuevo, si pasas el cursor sobre él, verás la barra de herramientas del dispositivo de toggle, parece que en el móvil y un APR juntos dan esa hora y es como accederás al modo de respuesta móvil en Google Chrome. Por lo que hay dos formas en que podemos usar como respuesta móvil más que DevTools. El primer camino es que podemos subir a la parte superior de la barra de herramientas y hacer clic responsive y elegir un tipo de dispositivo. Por lo que podemos elegir el iPad por ejemplo. Y puedes ver que reducirá el ancho de tu sitio web a cómo se vería tu sitio web en un iPad. El otro camino es que podemos ir a la derecha de la página web cuando no se pasa por encima de ella hasta que se ve un deslizador horizontal. Y podemos ajustar manualmente el ancho del sitio web. Por lo que hidras nuestro sitio web mira una vez que empecemos a morir a las webs más pequeñas. Entonces sigamos disminuyendo. Y se puede ver para cuando llegue a un ancho móvil, nuestro sitio web empieza a desmoronarse, permitir la sección de intro y la navegación puede verse bien. Pero son bisecciones quebradas. Definitivamente se rompieron las secciones Y ofs. Y la sección Contáctenos no toma mucho oso. Entonces, ¿cómo nos vamos a enviar por fax? ¿ Cómo vamos a hacer que nuestra página web se vea bien en el móvil? Por suerte, Bootstrap viene una campana y características para hacer que tu sitio web sea fácilmente móvil sensible. Y literalmente sólo nos va a llevar unos segundos implementarlo. Pero primero, es necesario entender las características de respuesta altas que móviles dentro de Bootstrap trabajo con filas y columnas r. Cuando se trata de las columnas, lo creamos dentro de nuestro archivo HTML. Utilizamos el prefijo dot cURL para columna, guión, y luego el número de webs tranquilas que lo queremos. Entonces si queremos una columna fue para uno, usamos una. Si queremos una calma cuando cinco, usamos fav, etc. Pero en realidad hay unos prefectos adicionales que podemos incluir dentro de nuestras clases de columna, que nos permiten hacer que nuestro sitio web sea fácil de móvil. Estos son Sam para pequeño, md para mediano, LG para grande, y exilio para extra grande. Y agregamos estos entre el guión CoA L y el ancho de la columna. Entonces, por ejemplo, escribirías CoA L dash S, N para pequeño guión uno para el ancho de columna de uno. Entonces, ¿qué significan estos ensayos, MMD, LG , y huevos AL, prefijos, y qué hacen? Cada una de estas referencias son casados fuera de tu sitio web, en cuyo momento, sin importar qué desplazamiento al rojo defina para tu columna, se convertirá automáticamente. 12 o de ancho completo. Por lo que si echas un vistazo a tu sitio web dentro de DevTools, medida que cambias el ancho de tu sitio web, te darás cuenta en la parte superior en el primer cuadro, podrás ver el ancho de píxel de tu sitio web. Entonces por ejemplo, aquí puedo ver como 902 píxeles de palabras. Aquí puedo ver son 1112 pixels de web y tener un mega realmente pequeño. Aquí puedes ver son 432 pixeles de mojado. Este es el ancho de su sitio web. Por lo que si lo estás viendo en un móvil, probablemente estará en algún lugar alrededor de 590 a 600 píxeles de web. Y si estás para ti Ana en un escritorio, podría ser de hasta 1400 píxeles de mojado. Entonces, por ejemplo, si tomamos los prefectos extra grandes, que podemos agregar dos columnas, cualquier tamaño de ventana por debajo de 1200 píxeles, y la columna se convertirá automáticamente en 12. Grande, cualquier tamaño de ventana por debajo de 982 píxeles. Y la columna cuando se convertirá en 12 medio, cualquier web de navegador bajo 768 píxeles y las columnas se convertirán automáticamente en web completa. Y pequeño extremo de un menos de 576 píxeles y columna, no importa lo que hayas definido como, se convertirá en cuña completa o en una columna de 12. Entonces si eso es un poco confuso en este momento, tengo mucho más sentido una vez que pusimos en práctica, que eran byte NIO hoy. Entonces echemos un vistazo a nuestra página web y averigamos en qué momento necesitamos las columnas para ir web completa para que se vea bien en el móvil. Entonces si echamos un vistazo a sus picaduras acción y poco a poco comenzamos a reducir el ancho de nuestro sitio web. Se puede ver a 1100 píxeles, pero aún así se ve bien. Y si seguimos adelante, se puede ver un 130 píxeles de mojado. Todavía se ve bien. Pero luego alrededor de la marca de 750 píxeles, empieza a realmente aplastado y no tan agradable. Entonces si echamos un vistazo a nuestro sistema de cuadrícula que Bootstrap nos ofrece, queremos buscar un tamaño prefectos que haga que nuestras columnas pasen automáticamente a un ancho completo o ancho de columna de 12, alrededor de 750 píxeles marca. Y podemos ver que el medio es el que probablemente va a funcionar mejor para nosotros porque automáticamente hará que las columnas vayan por mié a cualquier talla menor de 760 en Pexels. Entonces esa es la que vamos a usar. Entonces, ¿cómo implementamos esto fue realmente solo un caso de cambiarlas clases de columna para incluir ese tamaño prefectos como parte del nombre. Entonces si echamos un vistazo a la sección R por R, se puede ver al minuto tenemos guión de columna 4, no tenemos el prefijo de decir incluido cuando esta clase. Entonces, para agregarlo, todo lo que haríamos es tomar esta columna dash cuatro. Y después del primer guión en md para medium, y luego otro guión para que ahora parezca columna, dash, AMD, dash 4, y fester work. Tenemos que cambiar los tres. Impresionante. Entonces para la segunda columna y con ello nuestra sección y la clase después del primer guión, voy a añadir md para medio y otro guión. Y el CME para un postre después del primer guión y el nombre de la clase. Entonces CRL dash, AMD, dash four. Yo sé que c de eso. Ahora si volvemos a nuestra página web y actualizamos, se puede ver porque estamos en 750 píxeles ahí por nuestra sección columnas tienen automáticamente cuando de ancho completo. Por lo que si empezamos a aumentar gradualmente el ancho de la página, puede ver son más de 768 píxeles. A las columnas se les define como una red de cuatro. Por lo que somos tres columnas de mojado para cuatro. Y si un honor 768 píxeles, automáticamente se convierten en ancho completo. Y podemos ver que si los inspeccionamos, se puede ver que la columna es ciudadana de ancho completo. Vamos a hacer que nuestra página web sea fácil y rápida, móvil, receptivo. Pero no queremos tener que pasar por tus otras clases donde agregamos columnas y dyad MD entre ellos todo es que ataque le permitan su tiempo. Entonces vamos a hacer lo que se llama hallazgo y reemplazo. Entonces para que esto funcione, lo que queremos hacer es en los cambios de clase que acabamos de hacer y con ello la sección OS, no te preocupes, vamos a volver a aplicarlos. Pero por las matemáticas que voy a usar, que es básicamente un hallazgo y reemplazar. Tenemos que volver a revertir la sección bio antes de añadir el prefijo medio anti it. Entonces para las tres clases, solo voy a quitar el AMD y el dash para que las tres clases y yo lea columna dash cuatro y voy a ver si, así que no voy a hacer un find and replace. Lo que voy a hacer es buscar y reemplazar columna dash. Y lo voy a cambiar a columna dash, d dash, que agregará el prefijo medio a todas las clases de columna que hemos agregado dentro de nuestro index.html. Entonces, ¿cómo hacemos eso? Bueno entonces nuestro editor de código, vas a ir a tu barra de herramientas y bueno de fingido un y encontrarlo buffer. O simplemente puedes presionar Control y F. Esto cargará nuestra barra de herramientas Buscar y reemplazar en la parte inferior de nuestro editor de código. Entonces lo primero que queremos agregar es lo que queremos encontrar. Por lo que queríamos encontrar cURL y dash. Queremos reproducir evalúo y queremos reemplazarlo por CLL dash, AMD dash. Entonces de nuevo, para que quede claro este cristal, vamos a encontrar y reemplazar todas las clases de tablero de COO L eran van o index.html. Y lo vamos a reemplazar por SEO L dash, dash. Por lo que encuentro luego haga clic en Reemplazar todo. Se puede ver mirar en nuestro documento si acabo de cerrar como barra de herramientas en la parte inferior es que ya no lo necesitamos. Hemos agregado el prefijo medio a todas nuestras clases de columnas, por lo que se lo agrega a su acción de motos como lo hacíamos antes. Además, si nos desplazamos hacia abajo, se puede ver que lo ha añadido a la sección Por qué Us para ambos el ancho de columna de 75. Se lo agrega a la sección Contáctenos otra vez por su área de vestimenta y por las imágenes y también por los daños fueron entonces la sección Contáctenos. Entonces no voy a ver si esto vuelve a nuestra página web y refresca. Y si solo fuéramos nuestro tamaño de ventana hasta un tamaño móvil, y echa un vistazo a nuestra página web. medida que nos desplazamos por, puede decir que son por nuestra sección se ha ido de ancho completo, que es excretar. El tramo de alambre ha ido hacia adelante, que también se ve muy bien. Y la sección Contáctenos se ha ido de color rojo completo, lo que también se ve genial. Por lo que ahora tenemos una página web que no sólo se ve hermosa en el escritorio, sino también en el móvil. Y como puedes ver, no sólo se ve muy bien en dispositivos móviles y de escritorio, sino que también se verá bien en dispositivos como iPads. Porque a medida que aumenta la cuña fuera de nuestra página web, se puede ver que las columnas se adaptan bien al ancho. Entonces esto es lo que permite que nuestro sitio web sea receptivo en cualquier tamaño de pantalla y que Gloria en cualquier dispositivo, gracias a Bootstrap y el sistema de columnas, ahora hemos girado nuestro sitio web el cual solo se ve bien en el escritorio. Y dos son sitio web responsivo totalmente móvil. Y cuestión de minutos. 22. Cómo hacer que el sitio web sea propio: Por lo que nuestro sitio web ahora está desaparecido y se ve fantástico. Algo por lo que quería correr muy rápido es cómo puedes hacer el sitio web en el que estás con unos sencillos retoques. Yo puedes terminar con una noche de sitio web de reservas completamente diferente para esta parte del curso, no voy a ir tan profundo, pero los cambios, soy Meghan, solo voy a hacer los cambios muy rápidamente y te permitiré para venir conmigo. Para que puedas ver qué tan rápida y fácilmente puedes tomar lo que acabamos de crear y convertirlo en algo propio, hacer en algo completamente único y diafragma. Entonces lo primero que quiero hacer es encontrar un nuevo daño de fondo. Tocamos esto brevemente durante la creación del sitio web. Y va a ser el mismo proceso. Voy a ir a Unsplash cuando una barra de búsqueda granos. Y voy a encontrar una imagen, un lago. Esta naranja es realmente contraste en realmente agradable. Entonces voy a descargar eso. Voy a ir a mi carpeta de imágenes. Voy a añadir la imagen que acabo de descargar a la carpeta de imágenes. Y yo sólo lo voy a llamar nuevo fondo. Voy a volver a la carpeta del sitio web y voy a copiar y pegar o duplicar el index.html. Y sólo lo voy a llamar índice dash T2. Entonces voy a abrir nuestro editor de códigos. Y voy a arrastrar esto y guión, guión dos y al pin izquierdo de nuestros datos centrales. Entonces lo primero que voy a hacer es enlazar esta nueva imagen de fondo. Por lo que lo he llamado Nuevo fondo de guión. Entonces voy a ir a donde hemos agregado nuestro fondo y nuestra hoja de estilo. Y voy a cambiar esto a un nuevo fondo. Y esta imagen también es un J peg y C de S. Y luego voy a volver a nuestra carpeta de sitio web. Voy a hacer doble clic y nuestro guión de índice para cargar el sitio web y nuestro navegador. Para que veas tenemos nueva imagen de fondo australiana. Lo siguiente que quiero hacer es mover las etiquetas de encabezamiento y párrafo por encima de esta imagen. Entonces sólo voy a ir a nuestro index.html y voy a llamar a b el encabezamiento y párrafo H1. Voy a quitarlo cuando aparezca para evolucionar nuestra imagen y ver si la misma. Lo siguiente que voy a hacer, en lugar de tener tres columnas aquí, quiero bosque por más de dos filas. Entonces simplemente voy a quitar una de las columnas. Y vamos a hacer las columnas de Sexo. Voy a copiar estas dos columnas y las voy a pegar, soplar las dos columnas ya están ahí y solo los daños son diferentes. Voy a usar su mordida tres MHz y con ello una imagen. Voy a ver si eso y refrescar. Y ya sabes, mira tenemos cuatro columnas mostradas aquí. Por la forma en que nuestra sección, voy a quitar la tercera fila. Entonces voy a bajar a la tercera fila y quitarla de la sección de capas. Y también voy a Spears dos columnas fuera un poco diferente. Entonces voy a hacer más pequeño el texto. Entonces voy a hacer que la columna sea una para el texto para una imagen más grande. Y cuándo hacer la columna de imagen E. Y voy a replicar ese Diablo. Por lo que para la segunda fila, los voy a hacer cada colonia y la columna de texto cuatro. Y voy a guardar esto y refrescar nuestra página. Y se puede ver que no hay piernas mucho definitivamente consiguió imágenes mucho más grandes y texto mucho más pequeño para hacer el texto Valle hay área y eso va a soportar. Yo sólo voy a hacer estos párrafos un poco más grandes. Entonces voy a encender aplicación de software, y voy a simplemente copiar y pegar el párrafo que ya teníamos debajo del párrafo que ya estaba en su lugar. Y yo voy a hacer lo mismo para la segunda fila. Voy a perforar el párrafo que acabo de copiar. Golpe el párrafo que ya estaba ahí. Nos vemos a ti y página web de VR. Se pueden ver las etiquetas y cayeron Zai esta zona mucho desnuda. Para la sección Contáctenos, voy a hacer que estas dos imágenes sean más grandes también. Por lo que voy a ir a las columnas para la sección Contáctenos. Y la columna que la TMJ está puesta con n, voy a hacer 12. Y luego voy a hacer la columna que tiene el correo electrónico y los detalles de la dirección 12 también. Por lo que cada echa un vistazo a la página web. Se puede ver ahora tenemos imágenes mucho más grandes por 12 centavos retransmite el texto Contáctenos. Entonces si voy a nuestra hoja de estilo, ángulo hacia abajo al comentario Contáctenos, puedes ver que no tenemos un verdadero dicho o NPS para el contacto. Entonces solo voy a crear uno rápidamente. Entonces voy a crear un selector para un contacto corchetes rizados. Y voy a poner text align center y ver si vuelvo a nuestra página y refresco, puedes ver los datos de contacto oh, no, centralizados. Y creo que, en lugar de tener daños por la lluvia, voy a hacer que las imágenes sean más rectangulares, pero con un radio de frontera. Entonces si enciendo DevTools y selecciono una de las imágenes, se puede ver el radio fronterizo 50 por ciento, que presentamos durante la construcción de un sitio web teme. Voy a hacer este 10% para ver cómo se ve eso. Y creo que eso se ve bastante bonito. Entonces ahora lo que voy a hacer es ir a la hoja de estilo. Rara siempre que el radio fronterizo sea para daños y cuándo cambiarlo de 50 por ciento a 10 por ciento. Para que veas tenemos un radio de frontera para la imagen de pantanos centrados, voy a hacer nuestro 10 por ciento. Y para los diámetros, voy a hacer nuestro 10 por ciento también y ver si no voy a refrescar esta página. Y se puede ver que nuestras imágenes ya no se reinan. Nativo consiguió radios fronterizos. Y así NMR de minutos, he creado una página que se ve completamente diferente a la página web, crearía durante el curso. Y usando sencillos y rápidos retoques al HTML y CSS y fondos. Puedes hacer el sitio web que lo creamos en el curso, completamente único para ti mismo. Como dije, por lo que acaban de pasar no estaba destinado a estar sumamente adaptándose a los cambios que hicieron. Fue simplemente para mostrarte que puedes hacer rápidamente este sitio web en el que estás. 23. Consigue tu sitio web en línea: Entonces ahora terminamos de grabar nuestra página web y queremos lucir porque se ve muy buena tarifa. Pero a menos que nos enganchemos, mandaron a la gente frente a nuestra computadora, no vamos a poder mostrarle este sitio web a familiares o amigos o incluso a otros negocios. Esto se debe a que no está alojado en línea. Entonces, ¿cómo podemos conseguir que nuestro sitio web se hospede en carril para que podamos dejar que otras personas lo vean a menos que necesitemos hosting. Ahora desafortunadamente, el hosting va a costar. No es gratis. Se trata de un servicio el cual generalmente causan una pequeña cuota mensual. No obstante, he puesto en marcha una fantástica oferta para estudiantes son curso de fest. Y haciendo clic en el enlace en la descripción de este video, me he asociado con say graned para ofrecer escritorio tipo de hosting para permitirte conseguir en línea de manera barata y económica. Por lo que recomiendo decir graneado. Nuevamente, utiliza el enlace en la descripción de como video para obtener un tipo de precio de escritorio en hosting. Entonces cuando estemos en, digamos graneado, vamos a dar clic en Empezar en el alojamiento web. Y por suerte para nosotros, podemos usar el paquete de hosting star up más barato y asequible. Y es importante decir en este punto, puedes usar los hosts que quieras. No hace falta decir graneado, a pesar de que han ofrecido un escritorio como cristianos en línea de su curso, cada hosting tiene sus propios paquetes web. Y si encuentras un portador 1, siéntete libre de usarlo. También hablando libremente, un Lewis procesos específicos para decir, graneado Porque les recomiendo todas las empresas de hosting trabajan escuchando verlo. Por lo que podrás seguir junto con este curso con cualquier proveedor de hosting, te vas porque todos los sellos que te voy a mostrar o ser igual sin importar en qué anfitrión utilices. Entonces voy a hacer clic en ese plan y voy a llenar este formulario para el plan de inicio. Entonces sólo siendo tres y filtrando todos los detalles. Y acabo de hacer el pedido del plan de inicio con digamos, graneado. Ahora voy a dar clic a SAP, digamos. Por lo que si compras un nombre de dominio junto con tu hosting, siéntete libre de hacer clic en nuevo dominio donde puedes elegir un nombre de dominio como brand y coats.com, por ejemplo. O si solo quieres una libertad y puedes elegir demanda temporal y hacer clic en Continuar, ahora obtenemos la opción de iniciar nueva página web o migrar sitio web. Pero en realidad queremos hacer clic en el botón abajo que dice SCAP y crear sitio web vacío porque ya hemos creado un nuestro, solo queremos ponernos en línea. Entonces haga clic en SCAP y cree sitio vacío. Entonces vamos a cobrar desaparecer. Dirá crear tu sitio. Esto puede tardar uno o dos minutos. Después de unos minutos verás este mensaje que dice tu L Sam. Y ahora si vamos a Administrar sitio, verás esto. Ahora de nuevo, si estás siguiendo junto con un host diferente, algunos de los botones y menús pueden tener una redacción diferente, pero el proceso será holgadamente el CME, como ya he mencionado, todas las empresas de hosting utilizan los mismos procesos que estoy mostrando. Pero por decir, grano a más débil etiquetado a esta página. Lo siguiente que vas a querer buscarlo como gestor de fallas. Aquí Es pend, por lo que solo puedes hacer clic en Administrador de archivos. Y esto nos ha llevado al sistema de carpetas fuera de nuestra página web. Noche, esto no es un curso de hosting y servidor, así que no voy a entrar en demasiados detalles sobre trabajos altos o menos. Pero básicamente un sitio web no es diferente a la carpeta que tenemos dentro o paquete en el que hemos estado trabajando para un sitio web. Entonces, cuando cargas un sitio web en línea, básicamente estás accediendo a una carpeta como la que hemos creado con una carpeta de paquetes R en nuestro equipo. Entonces cuando estamos viendo el gestor de archivos aquí, básicamente estamos mirando una estructura de carpetas dentro del servidor con recién comprado. Y vas a ver esta carpeta, subrayado público HTML. Esta es nuestra carpeta de sitio web. Por lo que NF-1 nos jugamos con carpeta interminable, así que se muestre como nuestra página web. Entonces vamos a dar click en esta carpeta. Y se puede ver que ya hay un archivo HTML punto predeterminado ahí dentro. Por lo que por defecto, la mayoría de las empresas de hosting apilarán automáticamente un simple archivo HTML dentro de la carpeta. Entonces cuando ves que sabes que estás en la carpeta correcta, de nuevo, es el subrayado público HTML. Al tener nuestro propio sitio web ya creado, no necesitamos esto, así que vamos a eliminarlo. Entonces voy a dar clic en esto y luego voy a entrar a la banda y hacer clic en Eliminar. Nos preguntará si queremos proceder y lo hacemos Voy a dar clic en Confirmar. Por lo que ahora agreguemos nuestro propio sitio web. Ingresa esta carpeta. Lo primero que voy a hacer es hacer clic en Archivo Subir. Y voy a ir a la carpeta de la página web en la que hemos estado trabajando en este curso. Y voy a seleccionar el index.html y voy a subirlo. Se puede ver que hemos subido este archivo index.html en nuestro hosting, en nuestro servidor de sitio web, pero aún no hemos terminado. Al mirar nuestra carpeta de sitio web, también necesitamos importar nuestras imágenes de estilo y carpeta Bootstrap. Entonces pregunté Voy a dar click Carpeta Subir. Entonces no subir archivos, subir carpetas. Y primero voy a aplaudir nuestra carpeta Bootstrap y vamos a preguntar si quieren subir todos los archivos de Bootstrap qué hacer. Por lo que voy a dar clic en Subir. Y se puede ver que la carpeta bootstrap es un ojo en nuestro servidor también. Voy a hacer clic en Carpeta subir otra vez. Y esta vez voy a subir nuestras imágenes. Otra vez. Queremos subir todos los archivos dentro de esa carpeta. Por lo que voy a dar clic en Subir. Esto puede tardar un poco más que la carpeta bootstrap porque esta carpeta contiene todas nuestras imágenes, Es una carpeta ligeramente más grande. Se puede ver que estos ahora se suben con éxito. Y por último, queremos subir nuestra carpeta de estilo. Entonces voy a seleccionar la carpeta de estilo y voy a subir. Y voy a confirmar que quiero subir carpeta dest. Se puede ver esto es noche cargada con éxito. Para que puedas ver el nombre de nuestro servidor de hosting coincide con nuestra carpeta en la que hemos estado trabajando para este curso que acabo de ponerlos lado a lado. Se puede ver que tenemos nuestra carpeta Bootstrap, tenemos nuestra carpeta de imágenes, cualquier carpeta de estilo, y alguna vez index.html. Nuestro sitio web ahora está alojado en línea. Si vas a tu dominio, el IBM Watson dice granos, puedes ver en la parte superior de esta página. Pero el dominio que ingresaste al comprar tu hosting será la URL de tu sitio web o el nombre de dominio, o el nombre de dominio y URL son los mismos. Entonces voy a ir a mi URL y presionar Enter. Y puedes ver nuestro sitio web está alojado en línea. Realmente tan simple como eso. Podrás conocer arena, tu familia, amigos, nuestros clientes empresariales, a la dirección de hosting o URL que acabas de comprar. Y podrás ver la página web que has creado en este curso online y caer. Por lo que ahora has creado un sitio web, y tu sitio web está en vivo en la World Wide Web para que todos lo digan. Como se mencionó, no entré en demasiados detalles de lo que el hosting actúa como servidor o lo que es un dominio porque este no es un curso de hosting asegurándote hola, sencillo y ensamblador como para conseguir tu sitio web alojado en carril rápidamente. 24. Palabras finales: Has llegado al curso de fin de oficina. Durante este curso, has aprendido cuáles son los fundamentos de la página web, los fundamentos de HTML, CSS ser ESX, selectores en clases, topografía, lo que es Bootstrap. Y entonces hemos juntado todo eso y Bella son muy propia página web. Te he mostrado cómo puedes hacer orina de nuestra página web. Y por último, te he mostrado cómo puedes albergar nuestro sitio web para compartirlo con familiares, amigos y negocios. Espero que hayas disfrutado de este curso y hayas aprendido que el recubrimiento puede ser divertido y fácil. Y estás equipado con las habilidades y conocimientos para poder crear tus propios sitios web profesionales. Quiero agradecerles por participar en este curso, y me encantaría ver los sitios web que han creado. Entonces por favor sí envíalos para que pueda verlas. Si tienes alguna pregunta, puedes contactarme en Twitter en codificaciones cerebrales. Muchas gracias por participar en este curso. Espero que lo hayan disfrutado tanto como yo lo he creado, y les deseo a todos la mejor y feliz codificación en el futuro.