Programa manualmente tu primer sitio web: conceptos básicos de HTML y CSS

1. 0 Introducción: Oye, mi nombre es Rich Armstrong de Tap Tap Kaboom. Y he estado diseñando y construyendo sitios web desde 2007. Y en este curso, te voy a mostrar cómo codificar a mano tu primer sitio web desde cero usando HTML y CSS. Para mí, poder escribir mi propio HTML y CSS es más que solo codificar. Es una forma moderna de crearme y expresarme de manera digital. Un sitio web es algo real que cientos de personas pueden visitar y usar e interactuar con. Poder codificarlo por ti mismo te da una ventaja increíble. No tienes que depender de otras personas, hackear plantillas, esperar que la IA lo haga bien o intentar usar aplicaciones complejas para dar vida a tus ideas. Saber codificar es súper divertido y gratificante. Y cuando usas plantillas y sistemas de gestión de contenido e IA para ayudarte a crear tu sitio web, saber cómo codificar hará que todo sea más fácil de entender. Es como una superpotencia. Durante el curso, te llevaré paso a paso a través creación de un sitio web sencillo para tu personaje favorito de dibujos animados, héroes o películas. Te explico todo una manera accesible y dejo fuera las cosas que no necesitas saber Al final del curso, habrás hecho tu primer sitio web que podrás compartir con el mundo. Conocerás los conceptos básicos de HTML y CSS. Tus amigos estarán celosos. Tu mamá estará súper orgullosa, y tendrás una base sólida para construir encima. Entonces, ya sea que seas un novato absoluto o hayas incursionado en algún diseño y desarrollo web antes, ven a tomar el curso Todo lo que necesitas es una computadora y una conexión a Internet. Bien. Te veré en el siguiente video. 2. 1 Bienvenidos: Hola. Mi nombre es Rich de Tap Tap Kaboom Durante este curso, te voy a llevar paso a paso a través de la creación de un sitio web sencillo para tu héroe de dibujos animados favorito, o personaje de película o personaje de serie. Te explico todo de una manera accesible, y dejo fuera las cosas que no necesitas saber Al final del curso, habrás hecho tu primer sitio web que podrás compartir con el mundo. Conocerás los conceptos básicos de HTML y CSS. Tus amigos estarán súper celosos. Tu mamá estará súper orgullosa. Y estarás listo para aprender un montón más de cosas porque tendrás una base sólida para construir encima. Empezaremos por conseguirte todas las aplicaciones adecuadas para obtener codificación. Entonces empezaremos a codificar, como simplemente saltar directamente a ella. Y luego voy a añadir en teoría y más práctica. Por último, sabremos lo suficiente como para crear un sitio web para nuestro héroe de dibujos animados favorito o personaje de película. Entonces, vamos a meternos en ello. 3. 2 Qué descargar: Para facilitar la codificación, necesitarás descargar e instalar algunas cosas. Un editor de código, un navegador de desarrollo y una forma de hacer una copia de seguridad de su código y publicar su sitio web. Lo primero que necesitarás es un editor de código. Hacen sugerencias, completan tu código y hacen que partes de tu código sean de diferentes colores para que sea fácil de leer. Básicamente, te ayudan a codificar más rápido y con menos errores, lo cual es simplemente increíble. Uno de los editores de código más populares se llama Visual Studio Code, o código VS para abreviar. Está hecho por Microsoft y es gratuito, lo cual es perfecto. Puedes descargarla desde esta URL. Lo segundo que necesitas es un buen navegador de desarrollo. Cada navegador tiene un montón de herramientas que te ayudarán a crear sitios web. Pero Google Chrome es el mejor, en mi opinión. Con él, podemos detectar errores, entender por qué ciertas cosas están sucediendo o no están sucediendo, y podemos ajustar nuestro código para actualizaciones instantáneas en el navegador Puedes descargarla desde esta URL. Si ya tienes Google Chrome, solo puedes saltarte el paso. Lo tercero que necesitas es una forma de hacer una copia tu código para que si tu gato cruza tu teclado, puedas restaurar fácilmente una versión anterior. Aquí es donde entra algo llamado Git. Git realiza un seguimiento de todos los cambios que realizas en tus archivos. Es poderosa. Y con Git Hub, podemos hacer una copia de seguridad de todos esos cambios en línea para que si tu gato decide empujar tu computadora justo por la ventana, no todo se pierda. Además, GitHub te permite publicar sitios web simples usando el código que le envías, lo cual va a ser muy útil más adelante. Me gusta usar una app llamada Git Hub Desktop para trabajar con Git y GitHub en lugar de con la terminal. Hace que todo el asunto del respaldo sea mucho más fácil y mucho más visual. Entonces, crea una cuenta en github.com y descarga GitHub desktop desde Una vez que hayas descargado, instalado e iniciado sesión en VS Code, Google Chrome, Gitub y Github desktop, tendrás lo que necesitas para desarrollar como un Y así entonces puedes simplemente pasar a la siguiente lección y comenzar a hacer tu primer sitio web. Si necesitas más instrucciones paso a paso, pasaré el resto de esta lección mostrándote cómo descargar, instalar e iniciar sesión en VS Code, Google Chrome, GetSub y Gitub Bien, entonces lo primero que necesito es el código de Visual Studio. Entonces voy a abrir un Safari. Puede abrir el navegador de su elección y buscar código VS o Visual Studio Code. Siri está sugiriendo este , código de Visual Studio. Entonces ahí vamos code.visualstudio.com. Descarga para tu sistema operativo, Tada. Y ahí vamos. Se está descargando, así que voy a volver a Finder, y ahí vamos. Voy a arrastrar esto a mi carpeta de aplicaciones. Así Baa Ahora voy a ir a mi carpeta de aplicaciones y solo tocaré VS en mi teclado y me acerqué bastante, llegué al clima. A lo mejor lo hice mal. Código de Visual Studio. Voy a darle doble toque a eso, abrirlo. Necesita verificar. Es una app que descargo de Internet. ¿Estoy seguro de que quiero abrirlo? Sí, abierto. Bien. Ahí vamos. Está hecho. Es abierto, fantástico. Puedes elegir tu tema aquí. Prefiero este tipo de tema oscuro y moderno, tipo de tema oscuro y moderno, el tipo de defecto con el que se envía, pero puedes elegir lo que más te guste. Hay un montón de maneras de personalizar esto, pero no voy a cubrir esto en este curso. Bien, lo siguiente que tenemos que hacer es ir a descargar Google Chrome. Si ya lo usas, salta al siguiente paso. Bien, vamos por Google Chrome. Aquí vamos. Google Chrome. Serios sugieren éste. Y bien. El navegador construido para ser rápido y seguro. Y el tuyo. Genial. Bien, descarga Chrome. Gracias por descargar. Bien, vamos a Finder. Volvamos a Descargas. Google Chrome necesita ser instalado. Consciente como gota de dragón. Así que vamos a arrastrar esto a nuestra carpeta Aplicaciones. Proceso de instalación bastante rápido. Bien. Entonces podemos volver a las aplicaciones, e iré por GO para Google Chrome y luego tocaré dos veces eso. Dip, dip dip dip. Bien. Sí, también se descarga de Internet Abre eso. Google Chrome está listo para completar tu instalación. ¿Quieres configurar Google Chrome como tu navegador predeterminado? Yo sí. Voy a comprobarlo. Ayuda a mejorar Google Chrome enviando automáticamente estadísticas de uso e informes de fallas. A mí me gusta hacer eso. Me gusta que Google Chrome y otras aplicaciones sean mejores. Entonces si puedo ayudarlos a ser mejores, entonces genial. Bien. Inicie Google Chrome y, a continuación, las notificaciones pueden incluir sonidos de alertas e insignias de iconos. Eso voy a permitir. Bien. Entonces ahora en este punto, puedes iniciar sesión. Si tienes una cuenta de Google, a lo mejor tienes con tu negocio , a lo mejor tienes una personal, puedes iniciar sesión. No voy a iniciar sesión por ahora. No necesito, así que voy a tocar No iniciar sesión. Bien, motor de búsqueda predeterminado. Voy a ir por Google. Fantástico. Establecer como predeterminado. Tono en agregar característica de privacidad. No, gracias. Uf. cosas por las que tenemos que pasar. Otras funciones de agregar privacidad ahora disponibles. Lo tengo. Gracias. Bien, entonces tenemos a Chrome. Tenemos código VS. Ahora, en Google Chrome, podemos buscar github.com Pero voy a hacer click derecho sobre Safari y salir de él. Ya no necesito eso. Bien, vamos a buscar GitHub C. Ta da, da, da. Bien. Esto puede parecer diferente de vez en cuando, esto se ve bastante genial, en mi opinión, regístrate en Github. Bien, en tu correo electrónico. Ya tengo una cuenta. Así que solo pasa por este proceso con tu cuenta. Voy a registrarme con una cuenta de prueba ahora mismo. Entonces voy a ir por prueba o prueba Rich plus en Tap Tap kaboom.com Regístrate en Github. Bienvenido a Github. Comencemos la aventura. Ingresa tu correo electrónico, sí, continúa. Crea una contraseña. Yo uso una contraseña para muchas de mis cosas, pero ahora mismo, solo voy a usar algo realmente simple. Guau. Creo que puedo recordarlo. Bien. Continuar. Escriba un nombre de usuario. Sólo voy a decir Rich. Bien, vaya holandés, rico, tap, tap, boom. Prueba. Bien, y continúe Bien, verifica mi cuenta. Bien, vamos a resolver este acertijo. Usa las flechas para girar el objeto manera que mire en la dirección de la mano. Sí, creo que eso es bueno. Bien. Bien, guarda mi contraseña. Uh, sí, vamos a guardar eso. Entonces no tengo que recordarlo. Nuevamente, utilizo una contraseña para recordar y crear mis contraseñas elegantes, pero ahora mismo no la estoy usando , así que guardemos eso. Bien. Ya casi terminaste. Enviamos un código de lanzamiento a Rich en prueba en taptapkaboom.com Sólo voy a comprobarlo en mi teléfono. Rápidamente, rápido, rápido. Vamos a abrir la app de Gmail. Por lo que debe recibir un correo electrónico enviado a esta dirección de correo electrónico que acaba de suministrarlo. Y vamos por Rich taptapkaboom. Bien, mi código de lanzamiento de Github es 058, dos, cinco, dos, uno, dos Ahí vamos. Bien, nombre de usuario o dirección de correo electrónico, Rich. Creo que fue como prueba Rich plus en taptapkaboom.com, mi contraseña, la ha recordado por mi. Iniciar sesión. Contraseña segura. Sí, a salvo. Lo tengo. ¿Cómo te describirías a ti mismo? Probablemente puedas tocar en estudiante. ¿Cuántos miembros del equipo trabajarán contigo? Puedes rellenar esto con mayor precisión si quieres, pero por ahora, solo yo. Y, bien, continúa. También puedes saltarte esta parte de personalización si quieres. Las dos cosas principales que quieres hacer con Github, iniciar un nuevo proyecto. Bien. Continuar. Bien, aprende a enviar software como un profesional. Sólo tienes que ir gratis. Pero un bar, continúa gratis. Uf. Muchos pasos por los que recorrer. Bien. Configurar. Tenemos a Github. Tenemos Chrome. Así que vamos a mover Chrome al lado de Safari. Vamos a deshacerme de Safari. Salud, tengo el código VS aquí. Y luego GitHub. Tenemos github.com. Ahora necesitamos GitHub desktop. Entonces busquemos Git Hub. Escritorio. Bien, acepto todo esto. Bien, desktop.github.com. Descarga para macOS, descargas para tu sistema operativo. Patta. Bien. Vamos a Finder. Vamos a Descargas. Vamos a abrir esta. Bien, arrástralo a aplicaciones. Ir a aplicaciones. Escriba en el escritorio GIF GitHub, y luego toque dos veces eso, ábralo. Sí, es de Internet. Quiero abrirla. Fantástico. Bien, bienvenido al escritorio de GitHub. Inicia sesión en github.com. Triste a Sí. Firmado como prueba Rich Tap Tap Kaboom. Continuar. Lo que estás haciendo aquí es que estás dando permiso de escritorio de GitHub para acceder a tu cuenta de GitHub. Escritorio autorizado. Bien, abre la aplicación de escritorio GitHub. Voy a comprobarlo. Siempre permita ese escritorio GitHub abierto. Sí. Bien. Configurar Git. Esto es para usar. Esto se utiliza para identificar los commits que creas. Cualquiera podrá ver esta información si publica commits. Usar el nombre y la dirección de correo electrónico de mi cuenta de GitHub. Sí. Nombre, correo electrónico, acabado. Whoo. Bien. Tienes lo que necesitas para rock and roll o para desarrollarte como un ninja. En la siguiente lección, harás tu primer sitio web. Te veré ahí. 4. 3 Haz tu primer sitio web: Antes de saltar a la teoría, ensuciémonos las manos y hagamos nuestro primer sitio web. Y esta para mí es la mejor manera de aprender haciendo primero. No voy a explicar demasiada teoría durante la lección, eso vendrá después de esta lección. Bien, codifiquemos nuestro primer sitio web. Lo que quiero que hagas es abrir Github desktop, tada. Y si aún no has iniciado sesión, vamos a la configuración aquí arriba, inicia sesión en github.com, continúa Y si has iniciado sesión aquí en tu navegador, puedes tocar Continuar. Si no lo estás, entonces necesitas iniciar sesión. Es posible que deba volver a autenticarse , es posible que deba completar una contraseña o una clave o algo así Luego presione Continuar. Bien, escritorio GitHub autorizado. Sí. Bien. Ahí vamos. Estamos dentro. Si quieres verificar que estás en, vuelve a la configuración, vuelve a la configuración, y luego deberías ver tu nombre de usuario aquí y una opción para cerrar sesión en github.com Bien, ahorre. Ahora lo que quiero hacer es crear un nuevo repositorio. Así puedo crear un nuevo repositorio en tu unidad local aquí, o puedo ir a presentar nuevo repositorio o presionar Comando N o Control N. Así que vamos por un nuevo repositorio. Y debido a que este es nuestro primer sitio web, voy a decir mis primeros sitios web y localizarlo correctamente, va a decir que se creará como mi sitio web dash first dash. Eso es porque no le gustan los espacios. Y entonces lo que recomendaría tampoco es usar espacios, sino usar guiones en lugar de espacios Y déjame revisar algo aquí. Eso está bien. Si quieres usar mayúsculas, puedes, pero prefiero no hacerlo Prefiero no usar mayúsculas todas minúsculas y guiones Esto se llama caso Kebab, y te mostraré un par de otras opciones más adelante en el curso Bien, entonces mi primer sitio web, la descripción es este es mi primer sitio web, el camino local, voy a elegir Descargas. Ya tengo una carpeta de repositorios, que tiene un montón de sitios web en ella. Así que las descargas son realmente fáciles de usar para mí en este curso, pero puedes elegir donde sea que tenga sentido para ti. No quiero inicializar este repositorio con una lectura me, se ignora, ninguna licencia, ninguna Vamos a crear este repositorio. Bien. Y ahora vas a estar como, Bien, ¿qué pasó? Bueno, mira esto. Dentro del Finder, ahora tenemos mi primer sitio web. Se trata de una carpeta sin nada en ella. Uh, eh. Pero hay un archivo secreto oculto en él. Así que vamos a arrastrar esto al código VS o al código de Visual Studio. Esta es la primera vez que lo abres, verás un pequeño bar. Entonces tendrás que decir que sí, ábrela. Vamos. Sí, genial. Y entonces, ¿ confías en los autores de los archivos de esta carpeta? Sí, lo hago. Pero también tal vez revisa esto. Confíe en los autores de todos los archivos en la carpeta padre descargas. Sí, confío en los autores. Bien, temas, no nos preocupemos eso de aquí. Obtener atributos. Este es tu archivo oculto, que tiene que ver con Git y gestionar todos tus commits, todos los cambios, todo por el estilo. No hace falta que te preocupes por esto. Está oculto por una razón. Lo que quiero que hagan aquí es que toquen este pequeño botón, que es un nuevo archivo o vayan aquí y digan archivo nuevo archivo de texto. Así que vamos a por éste. Bam, y voy a llamar a esta mi primera página web punto HTO Y ya ves, a medida que cambiamos eso, este pequeño icono de la izquierda cambió a estos tirantes naranjas. Bien. Mi primera página web, la tenemos abierta. Voy a tocar dos veces por aquí, así que nos da un poco más de espacio, y voy a presionar Command plus. Así que ahora ustedes pueden ver lo que en realidad estoy escribiendo aquí. Entonces lo que voy a hacer aquí es ir por un símbolo menos que. Habrá un montón de opciones que van a aparecer, pero sólo voy a ir por H uno, que es un encabezado uno, el encabezado más grande, más genial, y luego un símbolo mayor que Ahí vamos. Y lo que debería hacer es crear la etiqueta de cierre de este elemento. Entonces tienes tu etiqueta de apertura, y tienes tu etiqueta de cierre. Fantástico. Y dentro, se puede decir, mi primer sitio web. Bien. Después al final, vamos a presionar Retorno o Entrar, hacer lo mismo. Entonces menos de P mayor que. Y esta es una etiqueta de párrafo, un elemento de párrafo, y vamos a decir, Oye, qué genial es este mi primer sitio web. Y luego Comando o Archivo Guardar. Bien, ya verás que aquí está pasando algo. Esto es control de fuentes, básicamente Github, diciendo: Oye, las cosas han cambiado, así que vamos por aquí. Quién, hay un montón de cosas realmente geniales pasando aquí. Genial, pero todavía quiero usar GitHub Desktop por una razón porque es mucho más fácil de ver visualmente. Y cuando empezamos a usar github.com para alojar nuestras páginas web, todo funciona muy bien Bien, volvamos al Explorador y bajemos a Finder. Y ahora vamos a ver mi primera página web punto HTML está ahí. Doble toque en eso. Whoo. Mi primer sitio web. Oye, ¿qué tan genial es esto? Mi primer sitio web. Se puede cerrar esta pestaña. Ahí vamos. Acabas de crear tu primer sitio web, tu primera página web. No parece mucho. Claro, y solo tú puedes verlo en tu computadora local. Claro. Pero aún así, este es un primer paso épico. Lo que quiero que hagas ahora es ir a Github desktop, y verás aquí los cambios. Un archivo de cambio, mi primera página web, lo has agregado. Bien. Aquí, quiere que le des un título a este cambio. Entonces podemos decir que creó el repositorio y creó el primer archivo. Tendrás que hacer esto si estás creando más de un archivo. Pero si acabo de cortar todo esto, solo puedes ir a crear mi primera página web dot HTML. Es como, Si, eso es genial. Así que voy a pegar eso de nuevo. Descripción. Honestamente, no tienes que describir todo lo que haces. Pero bueno, este va a ser nuestro primer compromiso. Así que vamos a cuatro. Hm. En primer lugar cometer. Sí. Y luego comprometerse con Maine. Solo tenemos Maine y Maine es una sucursal. Y vamos, Bam. Comprometerse con Maine. Lo cual es genial, ¿verdad? Sí, es genial. Ahora bien, esto es solo en tu computadora local. Empezaremos a enviar esto a la versión en línea y verlo en línea más adelante en este curso. Acabas de crear tu primer sitio web. Claro. Solo tiene una página web, y solo tú puedes acceder a ella, pero eso no lo descuenta como sitio web. Enhorabuena. Deberías estar orgulloso de ti mismo, en serio. En la siguiente lección, te voy a decir qué es realmente un sitio web. 5. 4 Qué es un sitio web: Entonces, ¿qué es un sitio web? Básicamente es una carpeta que contiene una o más páginas web que a menudo están relacionadas entre sí Al ingresar un nombre de dominio como taptapkaboom.com en tu navegador, te llevarán a esa carpeta Y en esa carpeta, habrá una o más páginas web a las que podrás acceder. La mayoría de las veces, se le mostrará la página web predeterminada si no especifica qué página desea ver. Ahora bien, ¿qué es una página web? Una página web es un documento de texto que está escrito de una manera que los navegadores pueden entender. De esa manera se llama HTML. Y basado en el HTML dentro de una página web, un navegador entonces sabe qué mostrar, cómo hacer que tu página se vea, cómo responder a las interacciones del usuario, qué información mostrar los motores de búsqueda y un montón de otras cosas. En la siguiente lección, cubriremos más de lo que es HTML. Te veré ahí. 6. 5 Qué es HTML: ¿Qué es HTML? Es sinónimo de lenguaje de marcado de hipertexto, pero eso no es útil, ¿verdad? Entonces me gusta pensar en HTML como el lenguaje principal que usamos para decirle al navegador qué hacer. Los bloques de construcción de este lenguaje son elementos HTML. Una página web está compuesta por elementos HTML. Para cada tipo de elemento, el navegador hace algo diferente. Este es un elemento encabezado uno. los navegadores les gusta, Oh, el encabezado más importante de la página. Este es el texto del encabezamiento. Voy a hacerlo grande. Yo lo conseguí. No te preocupes. Este es un elemento audaz. los navegadores les gusta, voy a mostrar esto en un estilo fon más gordo Voy a hacer que destaque. No te preocupes. Y este es un elemento link o un elemento ancla. A los navegadores les gusta, Es un enlace. Lo haré azul, y lo voy a subrayar. Y cuando alguien haga clic en él, los llevaré a la URL que se encuentra aquí. Impresionante. Y esto es un elemento de imagen. Y el navegador es como, voy a mostrar esto como una imagen, y la imagen que voy a usar se encuentra aquí. Elementos HTML específicos le dicen al navegador que haga cosas específicas. En su mayoría estos elementos HTML instruyen al navegador a mostrar información de diferentes maneras, como listas o encabezados y párrafos e imágenes Pero también hay otros usos, como decirle al navegador cómo darle estilo a la página con CSS o decirle al navegador cómo responder a las interacciones del usuario con JavaScript o decirle al navegador cuál es el título de la página para los motores de búsqueda o qué imagen usar cuando alguien marca tu página web Hay toneladas de diferentes elementos HTML, y no te preocupes, no vamos a pasar por todos ellos en este curso. Si quieres averiguarlos, ve a buscarlos en Google o pregunta a Chat GPT La siguiente lección, voy a explicar la teoría de cajas HTML, que es una manera fácil de entender cómo funcionan los elementos HTML. 7. Modelo de caja de HTML: Me gusta visualizar elementos HTML como cajas. En la mayoría de las páginas web, hay cajas dentro de cajas dentro de cajas, y la caja que contiene las otras cajas es la ventana de nuestro navegador Esto es lo que yo llamo teoría de cajas HTML. Dentro de cada caja, puede haber uno o más cuadros, texto, una combinación de texto y cuadros, o nada en absoluto. Por defecto, la mayoría de las cajas son tan altas como su contenido y tan anchas como la caja en la que están dentro. Otras cajas son tan altas y tan anchas como su contenido, y la mayoría de las cajas se encuentran tan lejos a la izquierda de la página y lo más lejos posible de la parte superior de la página. Y claro, hay cajas que se comportan de manera completamente diferente, como algunas cajas son invisibles para los humanos. Y luego, claro, puedes cambiar todo esto al peinar tus cajas con CSS. Pero voy a cubrir eso más adelante. En la siguiente lección, te mostraré cómo escribir HTML. 8. 7 Cómo escribir HTML: Entonces, ¿cómo escribimos o codificamos un elemento HTML? Bueno, la mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Una etiqueta de apertura se compone de un símbolo menor que, el nombre de la etiqueta y un símbolo mayor que. Una etiqueta de cierre se compone de un símbolo menor que, una diagonal hacia adelante, el nombre de la etiqueta y un símbolo mayor que Entre estas dos etiquetas, puedes poner uno o más elementos HTML, texto, una combinación de elementos y texto o dejarlo en blanco. Todo el elemento HTML se compone entonces de la etiqueta de apertura, el contenido y la etiqueta de cierre. Y por defecto, un navegador mostrará elementos HTML desde la parte superior del documento hacia la parte inferior, tal como están en tu archivo HTML. Pero la forma en que tu navegador muestra un elemento y los elementos dentro de él depende de qué tipo de elemento sea. ¿Esto es todo lo que puedes estar pidiendo? Bueno, no del todo. Hay una cosa más en los atributos HTML. Los atributos HTML son importantes detalles adicionales agregados a los elementos HML que le dicen al navegador cómo mostrarlo y qué funcionalidad agregar Usamos atributos para darle estilo a los elementos para decirle al navegador a dónde ir al hacer clic en un enlace, qué elemento de archivo e imagen debe mostrar, y mucho más. Un atributo se compone de un nombre, un símbolo igual y un valor, que está envuelto en comillas simples o dobles. Los usarás todo el tiempo cuando escribas HTML. Bien, ahora entiendes HTML en teoría. En la siguiente lección, comenzarás a escribirla con un poco más de conocimiento que antes. Te veré ahí. Um 9. 8 Cómo escribir HTML: Bien, comencemos a escribir algo de HTML. Esta vez, con una mejor comprensión de lo que realmente está pasando, vamos a crear un nuevo repositorio que te pongas cómodo con el proceso, y también empezaremos a hacer algunas cosas divertidas en Chrome. Bien, entremos al escritorio de Github. Y ya tienes tu repositorio actual. Pero ahora queremos crear un nuevo repositorio. Consulta la nueva configuración de accesibilidad. Bien, gracias. Vamos Archivo, Nuevo repositorio. Y vamos a crear uno nuevo porque queremos meternos en la caída de hacer esto de hecho. Llamemos a esto un experimento. Ahí vamos. No necesitamos una descripción. Descargas de ruta local. El resto es genial. Crear repositorio. Fantástico. Volvamos a Finder, arrastremos experimentos al código de Visual Studio. Bien, es todo grande otra vez. Voy a crear un nuevo archivo, y lo llamaré test HTL, Return Bien, ahora sabemos un poco más, ya sabes, de lo que está pasando. Entonces, menos de H uno mayor que, y decimos encabezando uno. Bien. Voy a presionar Menos hecho, P, presionar regresar aquí, y luego presionar la mayor hacia abajo, y luego párrafo. Bien. Entonces, al encabezamiento, un párrafo. Lo que quiero hacer a continuación es un enlace que vincule en otro lugar. Entonces, en vez de párrafo, déjame decir, Oye, este es un artículo genial. Y artículo genial, quiero vincular eso en alguna parte. Así que mayor o menor que. Y voy a ir por A por ancla. Entonces no es un vínculo. Es un ancla, y luego mayor que, y voy a seleccionar esto y cortarlo. Entonces Comando X y lo puso después de esa parod. Pero antes de esta etiqueta de cierre de mi elemento P, y entonces esto realmente no hace mucho. Es solo un elemento ancla hasta que tengamos un atributo que es HRF, que es donde queremos que vaya este enlace Entonces comienza a poblar algunas opciones aquí. Voy a ir por HRF Entonces debería ir igual con dos pequeñas comillas y HRf Vamos por HTTP colon slash Bien, este es un artículo genial. Podemos actualizar esto bastante pronto. Y luego Comando S. Vayamos a nuestro Buscador. Experimentos Interiores. Haga doble clic en la prueba. Rúbrica uno. Oye, este es un artículo genial. Bien. Y si tocas esa, te lleva a google.com Ooh. Entonces lo que está pasando aquí es que hay un elemento dentro de este elemento P. Y dentro de este elemento P, también hay algún texto. Bastante genial, ¿verdad? Sí, creo que es genial. A continuación, lo que quiero hacer es poner una etiqueta de imagen o un elemento de imagen. Entonces soy G, voy a presionar Regresar. Y luego aquí, SRC para fuente y luego necesitamos una imagen. Y entonces ésta es en realidad una especial. No necesita otra etiqueta, así que sólo voy a ir por eso o voy a ir por slash y esto mayor una señal Es una sola etiqueta. No se puede poner nada dentro de una etiqueta de imagen o de un elemento de imagen. Bien, entonces fuente, necesitamos una especie de imagen. Entonces vamos a Chrome. Y, oye, ya estamos en Google, así que voy a buscar gatos gatos son geniales. Vamos por las imágenes. Bien. National Geographic cat. Hmm. Éste está bostezando ¿Qué pasa con esta pequeña monada? Bien. Entonces ahora mismo, voy a hacer clic derecho y ver si puedo guardar esto. Se trata de un enlace. Guardar imagen como. Ahí vamos. Así Guardar Imagen Como. Vamos por las descargas. Bien, vamos a llamarlo ese nombre raro. Vamos a las descargas. Ponlo en experimentos. Bien, y llámalo cat dot JPEG. Podrías hacer clic derecho y tocar Cambiar nombre o simplemente presionar Volver en Mac de todos modos. Entonces tenemos CAT JPEG. Eso significa que en fuente, podemos ir por cat dot JPEG o podríamos ir dot slash, lo que significa, oye, mira en esta carpeta, esta carpeta muy actual en la que está este archivo para cat dot JPEG Bien, Comando S, volvamos a Chrome. Y oye. Vamos. B, B, B, B. Refrescar. No es necesario porque nuestro Catimage está ahí. Guau. Bien. Eso se ve genial. Entonces esa es una forma de darle a tu elemento de imagen un atributo source. Otra es, vamos a hacer esto de nuevo. Cat. Vamos a buscar imágenes. Vamos a elegir, éste, este verde, sí. Voy a darle un toque a eso. Haga clic con el botón derecho en su dirección Copiar imagen. Bien, voy a ir por una nueva pestaña y después la voy a pegar aquí Y presiona Enter. Y ves que me lleva a una imagen. Ahora, podríamos volver a descargar esto o simplemente podríamos usar esta misma URL que nos dio y crear un nuevo elemento de imagen, fuente, y ponemos todo ahí. Bien. Comando S. Entonces tenemos esta imagen de gato local, y luego tenemos esta imagen CAT que existe en línea. Ahora bien, los beneficios de tener algo a nivel local es que, bueno, tenemos el control de ello, así que no solo lo quitamos. Los beneficios de esta en línea es que no necesitamos almacenar esa imagen en nuestro servidor o nuestro sistema de archivos. Pero si quieren quitarlo, ya no está. Así que guarda eso. Si aún no lo hemos hecho, vayamos a Chrome. Volvamos a abrir nuestro punto de prueba HTM. Todo bien. Tenemos dos imágenes, grandes de gatos, no obstante. Ahora bien, si algo sale mal, entonces tal vez en lugar de gato, buscamos a Doug. Voy a salvar eso. Volvamos a Chrome, refrescar. Verás que obtienes este pequeño icono de imagen rota. Es porque no encuentra lo que busca. Entonces tal vez quieras ser como, Bien, gato, genial. Si vas por un JPEG, por ejemplo, y aquí sólo voy a presionar Comando R. Otra vez, eso no va a funcionar. Entonces, lo que debes hacer aquí es asegurarte de que lo estás deletreando correctamente. Comando S. Bien. Comando R aquí, el pequeño gato lindo está de vuelta. Lo mismo aquí. Si quito el guión de Felv y CAT, Command S, vamos a refrescar Chrome Obtendrás de nuevo este icono de imagen rota. Bien, así que ten cuidado con eso. Bien, Comando Z. volvamos a salvo A ver si todo está funcionando. Es fantástico. Ahora, vamos a crear otro párrafo hazlo por aquí. P, y voy a decir, Guau, estos gatos son tan súper lindos. Y así quiero ser audaz o tal vez gatos. Quiero ser audaz. Entonces puedo usar el elemento B que está en negrita. Y yo sólo voy a cortar eso. Oh, ¿a dónde van los gatos? Estos gatos son tan súper lindos. O lo que puedo hacer es cambiar esto a fuerte y asegurarme que también cambies la etiqueta de cierre. Fuerte es más elegante, pero audaz también funciona. Entonces, si bien estos gatos son súper lindos, quiero curalizar esto o enfatizarlo Entonces vamos por EM para énfasis. Gato esto. Bien. Comando S. Volvamos a Chrome, refrescar. Y aquí vamos. Vaya, estos gatos son tan súper lindos. Ahora, mira esto. Voy a hacer click derecho en Chrome, y voy a decir inspeccionar. Y podría aparecer a la derecha si lo hace, y estás bien con eso. Genial. De lo contrario, me gusta tocar estos tres puntos y hacer que aparezca en la parte inferior. Además, tal vez hagamos un doble toque en esta barra de aquí, y hará que todo sea más grande. Bien, entonces aquí puedes comenzar a ver los elementos. Voy a presionar Comando plus para que esto sea un poco más grande para que lo veas. Bien. Y podrías ser como, Whoa, cabeza HTML, cuerpo, ¿qué son todas estas cosas? Sí, bueno, Chrome hace algunas cosas muy elegantes. A pesar de que no hemos escrito eso, es ponerlo ahí porque supone que esto es lo que queríamos hacer. Entonces, lo que es realmente genial de este inspector de elementos aquí es que a medida que pasas el cursor sobre cada elemento, luego lo resalta en la página de arriba, lo cual es realmente genial También puede entonces, hacer clic derecho en él y luego editar como HTML. Así que entonces podríamos simplemente quitar ese plato otra vez y luego hacer click hacia fuera. Y luego popó, se va. Hmm. Entonces podríamos presionar Comando Z o Z, y vuelve. Si no quieres hacer clic derecho sobre algo y decir inspeccionar, también puedes usar este pequeño botón de aquí. Si coloco el cursor sobre esto, entonces dice, seleccione un elemento en la página para inspeccionarlo o Comando Mayús C. Y luego solo pasa el cursor sobre las cosas y puede ser como, Bien, inspeccione esta Muy bien, tan fuerte. Veamos si negrita funciona, haga clic derecho en Editar como HTMO cambie esto a B Bien Eso no pareció cambiar nada. A lo mejor vamos a cambiarlo a EM. También puedes simplemente tocar dos veces. Bien, estos gatos son súper lindos. Uf. Entonces, lo que está pasando aquí es que solo estás cambiando la versión local que te está dando el navegador. En realidad no estás cambiando nada en tu sistema de archivos. Ahora, también puedes hacer esto en cualquier sitio web del mundo. Puedes editar lo que te está dando el navegador. No vas a cambiar nada. No estás hackeando. No vas a ir a prisión del FBI, nada de eso. Totalmente ruidoso, totalmente legal. Simplemente es realmente poderoso. Entonces, cuando te refresques, todo va a volver a lo que era También puedes eliminar elementos, como, vamos a tocar esta imagen por aquí, y solo voy a presionar retroceso Oop. Se ha ido. Entonces es una forma realmente poderosa y visual codificar y ver lo que estás codificando, mira cómo se ve tu código. O sea, incluso aquí, se puede arrastrar este énfasis arriba de ahí. Entonces, guau, estos súper gatos son tan lindos, lo cual tiene sentido, supergatos Pero, sí, incluso puedes arrastrar este elemento fuerte fuera de esta etiqueta P o elemento P. Fresco. Eso se ve genial, ¿verdad? Sí. La otra cosa que Chrome ha hecho es que en realidad es poner mucho más código aquí. Entonces, si hacemos clic derecho y vemos la fuente de la página, verás aquí H uno, P, P, imagen, imagen. Genial. Fantástico. Pero, ¿cómo hizo realmente todo este tipo de cosas, cabeza HTML, cuerpo, todo ese tipo de cosas, te voy a contar más sobre, pero estas van a tener sentido para una página HTML. Así que vamos a escribirlos. Vamos al código de Visual Studio. Y todas estas cosas realmente van dentro de nuestro cuerpo. Lo primero que vamos a ir y queremos poner es HTML. Ahí vamos y lo ponemos al final. Ahora, cuando un montón de elementos están dentro de otro elemento, es realmente útil simplemente presionar tab y luego sangrarlo Simplemente hace que leerlo sea mucho más fácil, y luego queremos poner nuestro elemento cabeza aquí. Dentro del elemento cabeza va un montón de elementos invisibles u ocultos como el título, el pequeño icono que aparece a tu vista, cosas así. Y luego dentro de tu elemento corporal, aparece todo tu código visual. Así. Muy bien, tan rápido antes de guardar aquí, aquí, esto se llama test dot HTML, y de vuelta en código de Visual Studio. Llamemos a éste. Voy a poner un elemento de título aquí. Vamos a llamarlo Página de prueba. Bien. Seguro. Volvamos a Chrome y actualicemos. Ahora tienes una página de prueba dentro de tu elemento head, tienes una página de prueba con un elemento title. Fantástico. Una cosa más que Chrome no ha hecho en realidad es darnos un tipo Duc y es posible que lo hayas visto un par de veces ya que he estado tratando de escribir esto Si empiezo a escribir aquí, dice tipo Duc. Ahí vamos. Tipo Duc, HTML. Realmente no necesitas esto, pero solo hace que algunos navegadores más antiguos den cuenta de que esto es en realidad HTML. Entonces ahí vamos. Vamos a guardar eso. Vamos al escritorio de GitHub. Y aquí necesitamos un resumen porque tenemos al menos dos expedientes que necesitamos comprometer. Entonces solo diremos compromiso inicial y nos comprometemos con main. Ahora, en cualquier momento, si estás como, Oh, quiero agregar algo, sí, ve a agregarlo. Así que tal vez en algún lugar por aquí, como encabezar una en realidad quiero que sean dos líneas, pero no quiero crear un elemento entero 'otro. Yo sólo quiero una nueva línea. ¿Cómo hago eso? Bueno, si no estás seguro de nada, ve a Chrome, abre una nueva pestaña y sé como, ¿Cómo creo una nueva línea en HTML? Y aquí para crear una nueva línea HML, puedes usar la etiqueta BR Bien. Habrá un montón de enlaces que puedes consultar. A veces están en desbordamiento de pila. Incluso puedes usar Chat GPT si quieres. Entonces vamos a copiar eso o simplemente podemos escribirlo y vuelves al código de Visual Studio, y luego BR Bien Encabezado uno, Comando S. Vamos a comprobarlo. Bien, crea un pequeño salto de línea agradable. Fantástico. Bien. No, vuelves al escritorio Gitybe y te gusta, agregó salto de línea en Comprometerse con principal. Bien, así como empiezas a cambiar las cosas, solo adéntrate en el hábito de ser como, Sí, se ve bien. Comprometer. Quieres asegurarte de que cada cambio significativo, como, tenga su propio mit. Es la mejor práctica. Significa que si tu gato pasa por encima tu computadora o pasa tu computadora, ya sabes, fuera de tu ventana o derrames tu cerveza de jengibre sobre tu teclado, no has perdido un montón de cosas A lo mejor solo has perdido, como, dos líneas de código o, ya sabes, un ligero cambio un elemento de imagen o algo así. Así que acabas de escribir un montón de diferentes elementos HTML. Te sugiero que bombee el aire a puño o dejes escapar un grito. Vaya, popó. Celebra de alguna manera. En la siguiente lección, te voy a mostrar cómo compartir tu sitio web con el mundo, lo cual es bastante emocionante. Nos vemos ahí. 10. 9 Comparte tu sitio web: Por suerte, para nosotros, GitHub hace que sea muy fácil usar las páginas web de las que realiza un seguimiento para crear sitios web simples desde. Vamos a meternos en ello. Bien, entonces, ¿cómo conseguimos esto en línea para que otras personas lo vean ahora? Bueno, vamos a GitHub Desktop. Y tenemos este botón de repositorio publicado, ya sea en la parte superior aquí o en medio de la pantalla aquí. Entonces, publicar repositorio. Experimento de nombre GitRub.com. Se le puede nombrar otra cosa. Se le puede dar una descripción. Mantenga este código privado. No tienes que hacer eso. Si quieres compartirlo, entonces te recomendaría desmarcar esto Así que no mantengas este código privado. Especialmente si quieres mi ayuda o la de otra persona mirando tu código o revisando tu código. Sí, solo desmarca eso. Publicar repositorio. Boom. Ahora bien, lo bueno de esto es que si tu computadora, arde espontáneamente, está Ya no puedes acceder a él. Tu código ya está en línea. También significa que si tienes otras tres computadoras, puedes acceder al mismo código desde esas computadoras, y puedes sincronizarlas usando github.com Quién. Eso es genial. Bien, ¿y ahora qué? Ha hecho lo suyo. Sí. Bien. Vayamos a github.com en nuestro navegador Y ya verás por aquí. Este será tu nombre de usuario slash Experiments o como sea que llames tu repositorio Vamos a darle un toque a eso. Bien. Entonces este es Github, lo cual es genial. Aquí es donde se almacena su código. Puedes ver el HTML de prueba CTJPEG, e incluso puedes hacer alguna edición aquí Pero lo que queremos hacer es publicar nuestro código, nuestro sitio web para que el mundo lo vea. Entonces vayamos a la configuración. Y luego páginas a la izquierda. Esto puede verse diferente de vez en cuando. Bien, Despliéguese desde una sucursal. Sí, la experiencia de páginas clásicas. Acciones de GitHub. No, lo mejor para usar frameworks y personalizar tu proceso de compilación, cosas complicadas. Entonces despliéguese desde una sucursal. Fantástico. Bien, las páginas de GitHub están actualmente deshabilitadas. Seleccione una fuente a continuación para habilitar las páginas de GitHub para este repositorio. Sí. Bien, ninguno. Sólo tenemos una sucursal, lo cual es genial. Principal, raíz seleccionada, genial. Guardar. Bien. Tu sitio de página GitHub o sitio de Páginas se está construyendo actualmente a partir de la rama principal. Bien. Salsa de GitHub Pages guardada. Voy a refrescar esto para ver si algo cambia. Bien. Creo que eso es bueno. Bien. Entonces ahora necesitamos copiar nuestro nombre de usuario, así comando T. voy a ir más allá ese punto github dot IO, slash, y luego vamos a ir a Experimento Voy a copiar eso. Y luego volvamos a nuestra base de código aquí. Tenemos test dot HTML. Así que slash test dot HTML. Guau. Ahí está. Está en línea para que el mundo lo vea, señoras y señores. A veces lleva un poco de tiempo llegar a todas partes del mundo en realidad , ya sabes. A veces estás ahí refrescante, refrescante, refrescante. Pero si eres como, Bien, esto no está funcionando después de 10 minutos, posible que desee volver a la configuración, y luego volver a las páginas. Y luego solo echa un vistazo debajo la sección de compilación e implementación de aquí. Debería ser bastante simple. E incluso por aquí, dice, Tu sitio está vivo por aquí vamos. Entonces vamos a ir, Bam, visitar sitio. Esto sucederá si no tenemos un archivo de índice. Entonces por eso necesitaríamos entonces poner en prueba el HTML punto. Bien, así que probemos esto ahora. Quiero actualizar un poco mi página. Quiero obtener un pequeño icono favorito, y también quiero cambiar este enlace, así que cuando lo presiono, no se carga en la misma página Bien, entonces, ¿cómo hacemos esto? Bueno, vamos a investigar un poco, y quiero meterte en el hábito de investigar porque todo está ahí fuera Así que quiero icono cuatro página HTML. Fav icon, ¿cómo creo el icono para la página HTML? Para insertar un icono agrega el nombre de la clase icon a cualquier elemento HTML en línea que realmente no lo parezca. Uh icono de tabulador. Tabicón. Sí. Bien, vamos a ver esto. Bien, excepto las galletas. Hay dos formas de agregar un ícono favorito a un sitio web, 13 respuestas Simplemente agregue el siguiente código al elemento head. Bien, vamos a copiar eso. Vayamos a Visual Studio. Bien. Icono. Quiero que mi gato uno sea el ícono favorito. Hagamos eso. Comando S. Pero decía que había dos formas, PNG favicons favicons Así es como se llama yo soportado por mayoría de los navegadores a excepción de IE diez y menores. También puedes usar favicones ICO. Ya no tienes que proceder con un atributo de icono y rollo con atajo, bla, bla, bla Todos los navegadores modernos siempre solicitarán un ICO favicon dot a menos que hayas especificado un acceso directo a través de un enlace Este es en realidad un elemento de enlace, diferente de un elemento de anclaje. Bien. Así fa icono punto ICO. Ahora, en realidad no sé cómo hacer un ICO, así que sólo voy a seguir con mi JPEG o PNG. Probemos si esto funciona. Este es el online. Este es el local. Así que vamos a refrescarnos. Oh, ahí está. Se puede ver. Fantástico. Entonces en el escritorio de Gita, digamos, uh, actualizado icono de fav Ahí vamos. Comprometerse con Min. Ahora bien, este primer Commit to Min es solo para tu computadora local. Pero si luego empujas origen, esto empuja a la versión en línea de tu sitio web. Bien. Y podemos comprobar esto yendo al código en github.com, y probar el punto HTML es aquí Ahí está. El CatJPEG como el icono real o el ícono de enlace, el ícono de Fav para refrescarla Entonces sube, refréscate de nuevo. No parece estar funcionando en este momento, puede llevar algún tiempo. Lo que quiero mostrarles mientras tanto es si editamos esto un poco, así que edita este archivo. Vamos por encabezar ¿Quién? A lo mejor podamos hablar. Los gatos son realmente geniales. Y luego comprometerse con los cambios, actualizar prueba HML con nuevo encabezado Comprometerse directamente con la rama principal, tripulación, sí, sí. Comprometerse con los cambios. Bien. Entonces ahora en realidad he hecho un cambio en línea, pero a nivel local, eso no refleja. Así que volvamos al escritorio de GitHub. Y lo que queremos hacer aquí es ir a buscar origen. Y dice, Oye, saca uno Commit del mando a distancia Origin. Entonces esto es realmente útil si trabajas en múltiples computadoras, o hay, ya sabes, personas que trabajan en el mismo proyecto ya que todos ustedes se comprometen en código a ese, ya sabes, repositorio de fuente de verdad en línea. Entonces entonces tocas pull Origin. Y eso luego actualizará tu versión local. Así que vamos a ver esto. Los gatos son realmente geniales. Fantástico. Ahí vamos. Probemos si este ahora tiene un favicon poco actualizado. Lo hace. Fantástico. Bien. Ahora bien, lo último que quiero hacer aquí es donde dice HRF ¿Cómo consigo que esto se abra en una nueva pestaña? Entonces otra vez, hagamos un poco de investigación. ¿Cómo código core para abrir en nueva pestaña? Obviamente puede, por supuesto, preguntar a HatiPT. Pero aquí, agregando el atributo blanco objetivo. Bien. Bien, bien. Entonces, sé que esto funciona, pero si no funciona para ti, solo prueba otra cosa. Así que vamos aquí. Objetivo. Bien, esa es una buena señal cuando empieza a autopoblar retorno. Aquí tiene un par de opciones. Así que vamos a por el blanco. Ahí vamos. Comando S. Volvamos a Chrome y repaso. ¿Bien? Nada debería cambiar visualmente, pero vamos a tocar el artículo genial. Y abre Google en una nueva pestaña. Whoo Eso es genial. Bien, así que volvamos al escritorio de Github e hicimos que el enlace se abriera en una nueva pestaña. Comprometerse con Maine, que está, de nuevo, todavía en nuestra computadora y luego presione Origin. Y en poco tiempo, nuestros sitios web en línea deberían actualizarse también. Acabas de publicar tu primer sitio para que el mundo lo vea, y está sincronizado de forma segura con Github. Ahora, cada vez que empujes tu código a Github, tu sitio se actualizará. Además, si tienes más de una computadora, puedes usar el repositorio en Github como tu fuente definitiva de verdad Puedes empujar cambios a Github y obtener cambios de Github muy fácilmente Ahora estás en camino de apoderarte de Internet. Pero antes de saltar a sitios web de estilo, quiero repasar carpetas, partes de archivos y nombres de archivos Sé que suena aburrido, pero esta es la causa de muchos bichos y errores y dolores de cabeza. Si entiendes estas cosas, todo va a ser mucho más fácil. Te veré en el siguiente video. 11. 10 Nombres y rutas de archivos: Bien, vamos a cubrir algunas cosas que te harán la vida un montón más fácil una vez que las entiendas. El primero tiene que ver con la sensibilidad de mayúsculas y minúsculas. La mayoría de las veces en tu computadora local, la que estás codificando, no le importa si usas mayúsculas, minúsculas o una combinación de las dos Puedes probar si le importa cambiando el caso de un nombre de archivo de imagen, ya sea en el sistema de archivos o en tu HTML. Si las cosas se rompen cuando cambia el caso, entonces su computadora es sensible a mayúsculas y minúsculas. Por qué esto importa es que la mayoría de las computadoras y servidores en línea sí se preocupan por el caso que uses. Son sensibles a mayúsculas y minúsculas. Por qué esto importa es que todo puede verse increíble en tu computadora local pero estropeado y roto cuando lo ves en línea En tu computadora, acceder a cat dot JPG puede funcionar porque cat dot JPG y cat dot JPG se ven como lo mismo porque el sistema de archivos de tu computadora es insensible a mayúsculas y minúsculas Pero los servidores de Gitub los ven como archivos separados porque Github es sensible a mayúsculas y minúsculas Así que revisa los nombres reales de archivos y carpetas versus el que has escrito en tu HTL y CSS si empiezan a suceder cosas como esta Sin embargo, para evitar que esto suceda, elija una forma estándar de nombrar sus archivos y apéguese a ella Prefiero nombrar todo en minúsculas y usar guiones A esto se le llama caso Kebab. Otras opciones populares son el estuche camel y el estuche de serpiente. Lo segundo que te va a hacer la vida más fácil es usar carpetas. Las carpetas hacen que tu proyecto sea más ordenado. Esto es especialmente útil cuando tu proyecto crece en tamaño. Claro. Puedes cambiar tu código y crear carpetas y poner archivos en ellas a medida que codificas, pero esto lleva tiempo y muchas veces lleva a errores. Así que trato de mantenerme organizado desde el principio. Tengo una carpeta IMG para imágenes. Tengo una carpeta CSS para archivos CSS. Si tengo mis propias fuentes personalizadas, tengo un archivo de fuentes, y si tengo archivos JavaScript, tengo una carpeta JS. Todo lo que quiero en la carpeta principal son archivos HTML y carpetas. Puedes crear tus carpetas en código VS o en tu sistema de archivos. La tercera cosa que te va a hacer la vida mucho más fácil es entender las rutas de archivos. Ya que estamos usando carpetas y archivos dentro de carpetas, ¿cómo le decimos al navegador dónde está un archivo? Al escribir el nombre del archivo, le informamos al navegador dónde encontrar el archivo usando una combinación de instrucciones antes de llegar al nombre del archivo. La primera instrucción que puedes usar es indicarle al navegador que busque en la misma carpeta en la que se encuentra actualmente este archivo. Use un período seguido de una barra diagonal hacia adelante. La segunda instrucción es mirar dentro de una carpeta. Usa el nombre de la carpeta seguido de una barra diagonal. El tercero es subir al par y a la carpeta. Usa dos periodos y una barra inclinada hacia adelante. El cuarto es comenzar en la carpeta raíz o en la carpeta principal. Se escribe una sola barra hacia adelante. Es posible que esto no funcione como se esperaba en su computadora local porque su carpeta de proyecto puede estar dentro de varias otras carpetas. Entonces, cuando le das instrucciones a un navegador para que vaya a la carpeta raíz, va todo el camino hasta el inicio del árbol de carpetas Pero en línea, donde hay un Urel, funciona maravillosamente. También puedes, por supuesto, comenzar con un dominio o URole con una barra hacia adelante al final como taptapkaboom.com forwardslash final como taptapkaboom.com Y lo bueno de estas instrucciones es que puedes combinarlas como empezar en la carpeta en la que se encuentra este archivo, luego subir a la carpeta padre, luego ir a la carpeta de imágenes, y dentro de esa carpeta, hay una imagen llamada cat dot JPEG. Bien, esas son las tres cosas que van a ayudar mucho. Vamos a refrescarnos rápidamente. La sensibilidad K es importante. Usa las carpetas desde el principio para mantenerte organizado, y usamos la ruta del archivo para indicarle al navegador dónde están los archivos. Lo siguiente es aprender a cambiar el aspecto de nuestros elementos HTML con CSS, y aquí es donde las cosas empiezan a ponerse súper divertidas. 12. 11 Qué es CSS: Así que hemos escrito algo de HTML, pero no se ve bonito. Aquí es donde entra CSS. El CSS que escribimos hace que nuestro HTML se vea bien al sobrescribir los aburridos estilos predeterminados proporcionados por el navegador Escribimos CSS para decirle al navegador cómo deben verse los elementos HTML. Para ello, escribimos un nombre de propiedad y un par de valores, separados por dos puntos con punto y coma al final Podemos darle estilo a un elemento con tantos pares de propiedades como queramos. Y hay toneladas de propiedades que puedes escribir para cambiar cómo se ve y se siente y funciona un elemento. Propiedades como altura, color de fondo, familia divertida, tamaño de fuente y un montón más. Ahora bien, hay dos métodos para escribir CSS. El primero es mediante el uso de estilos en línea, donde le damos estilo a un elemento usando un atributo HTML llamado style. El segundo es mediante el uso de conjuntos de reglas, donde seleccionamos elementos a estilo, seguido de las propiedades CSS y valores para esos elementos. Cubriremos ambas opciones y algunas otras cosas importantes de CSS en las próximas lecciones. 13. 12 CSS en línea: En esta lección, nos pondremos prácticos y comenzaremos a escribir CSS con estilos en línea, los cuales escribimos en un atributo HTML. Ahora bien, tenga en cuenta, todo se deletrea a la manera americana al escribir HTML y CSS Sí, así que lo que vamos a hacer aquí es crear algunos estilos en línea. Quien hoo hoo. Así que vamos a arrastrar los experimentos al código de Visual Studio. Y sí, se ve bastante grande. Puede cerrar esta pestaña de bienvenida. Así que tenemos HTML de prueba. Lo que quiero hacer aquí es crear un nuevo archivo. Y llámalo estilo inline dot HTML o estilos inline dot HTML. Todo bien. Presiona para tono. Y aquí verás, Oh, ¿tenemos que volver a hacer todo esto? Sí, tenemos que hacer todo esto otra vez, pero está bien. Entonces vamos por A, tipo Doc. Ahí vamos. Entonces voy a hacer HTML. Y luego la cabeza. Sí. Bien. Y luego aquí, tenemos un título, y el título debería ser estilos inline. Eso es genial. Y luego tenemos un cuerpo. Bien. Eso se ve bien. Así que puedes acostumbrarte, ya sabes, a hacer eso, practicar hacerlo, escribir la cabeza HTML, cuerpo, cosas así. Ahora, escribamos uno H. Y aquí, si no quieres, no tienes que escribir la corbata de apertura. Simplemente puedes escribir H uno, y debería, ya sabes, darte algunas opciones aquí. Y esto se llama abreviatura ET, y solo voy a presionar Return, y debería ir por H una etiqueta a la izquierda, H una a la derecha, y luego mi cursor debería estar en el medio. Si no hace eso, entonces vas a tener que, ya sabes, escribir toda tu etiqueta al principio y al final o tu elemento. Bien, H uno. Así que vamos por encabezar uno. Voy a hacer esto cuatro veces. Y entonces lo que voy a cambiar aquí es ir por la partida dos, tres, cuatro, y cambiemos esto a partida dos, tres y cuatro. Bien. Eso se ve bastante bien. Y luego voy a duplicar esto otra vez. Y luego Comando S o guardar eso. Puedes ir a Archivo y luego Guardar o Guardar como si lo deseas, pero Comando S o Controles si estás en Windows. Y luego volvamos a Finder. Tenemos estilos inline dot HML. Toquemos dos veces eso para abrirlo . Y esto es lo que obtienes. Encabezando uno, dos, tres, cuatro, todos son de diferentes tamaños, lo cual tiene sentido porque hay diferentes niveles de rumbo. Bien, genial. Entonces vayamos al código de estudio o al código VS. Y vamos a crear un atributo llamado style. Y aquí, voy a ir por fuente tamaño de fuente y cambiar esto a 30 pixeles. Ahí vamos. Eso se ve bien. Voy a copiar y pegar eso. ¡Oh! Mucho copiado y pegado. Y luego estos, iré por 20 pixeles. Y voy a salvar eso. Bien. Vayamos al cromo y al refresco. Y verás que nuestro primer grupo de encabezados son todos del mismo tamaño divertido El siguiente grupo de encabezados también son del mismo tamaño divertido. Uf. Bastante genial, ¿verdad? Sí. Así puedes hacer que las cosas se vean igual, aunque no sean lo mismo. Bien. Podemos seguir agregando más propiedades aquí, así que vamos por el color. Esto es color de texto, no súper intuitivo, lo sé. Hay un montón de maneras en las que puedes hacer color. Puedes ir por código hexadecimal, así puede ser como, hash, ff00 00, que es rojo, o simplemente podrías escribir rojo así Pero cuando escribes la palabra rojo, no hay tantas variaciones de rojo. Entonces si querías algo así, bueno, no hay una palabra para eso, no creo. Entonces, vamos a guardar eso. Vamos por el color aquí, no por el contador, sea lo que sea que fuera. El color tiene que ser americano, ¿recuerdas? Y aquí podemos ir por Alice Blue. ¿Eso es una cosa? A ver. Entonces Alice azul. Y la razón por la que se queja es porque no tenemos un colon o un punto y coma al final Entonces intentemos esto otra vez. Color, ahí vamos. El azul Alice es como una blanca. ¿Y qué pasa con la aguamarina? Ahí vamos. Fresco. Y deberías ver que los colores aparecen justo antes del valor real también. Bien, aquí el color. Vamos por el rojo. Bien. Y luego finalmente, este de aquí. Color, bajemos, usando mis teclas de flecha en mi teclado. Carmesí es bastante genial. ¿Y un rud dorado oscuro? Whoo. Qué nombre de color. Bien. Guarde eso. Así que puedes ver aquí, si quieres que todos estos tengan este color, simplemente puedes copiarlo y pegarlo. Pero entonces si quisieras cambiarlos a todos, podrías estar como, Oh, bien. Vamos a por otra cosa ahora. ¿Qué pasa con el RGB relativo? Mmm, ni siquiera sé qué es eso, para ser honesto. Pero RGP o RGBA, podríamos hacer eso. Tan rojo. Vamos por 255, valor verde. Vamos por 120, y un valor azul, vamos por 100. Estos son valores 0-255, y luego un valor Alfa, vamos por 0.5 Entonces es algo opaco, semitransparente en el medio Entonces ahí vas por un número 0-1. Normalmente es una fracción. Entonces se podría decir 0.5. Ah, y aquí mira esto, viene con un pequeño y bonito recogedor de color ¡Oh! Fair Fancy. Entonces, mira eso. Bien. Fresco. Entonces lo estaba diciendo antes es que si quisieras entonces cambiar todos estos colores, tendrías que luego copiar y luego pegar, pegar, pegar, lo que puede llegar a ser un poco irritante Puedes tener dos puntos y comas al final, pero no es necesario Bien, digamos eso. Volvamos a Chrome y refresquemos. Bien, para que veas que estos cuatro inferiores tienen el mismo color. Aquí tienes algunos colores diferentes en la parte superior. Fantástico. Ahora bien, lo que es realmente interesante es que cuando empiezas a cambiar cosas dentro de un elemento. Así que vamos por encabezar uno. Voy a poner esto en una nueva línea, que no debería cambiar nada. Y luego cambiaré este número uno por una letra uno. Y solo quiero mostrarte que nada cambia realmente. Es un repaso, solo el texto. Y éste, también quiero cambiar su color. Entonces la forma en que lo hago es poniendo un elemento span alrededor de él, y luego podemos poner un atributo de estilo ahí y cambiar el color a azul. Bien. Voy a guardar eso y luego refrescarme. Entonces, a menos que realmente especifique el color, debería heredar el color de su elemento padre Entonces si escribo Cliqre y digo inspeccione, verá que este lapso tiene un color azul y su padre tiene un color de ese color listo Bien, si quieres cambiar esto muy fácilmente, solo tienes que seleccionar este color, y luego aquí debería decir estilos, y debería mostrarte de dónde vienen todos los estilos. Así heredado de H uno es el color rojo. Entonces si desmarqué azul, entonces el color rojo o este color listo de su elemento padre viene a través M Bien. Lo que quiero mostrarte ahora es si le das a un elemento múltiples propiedades del mismo nombre. Entonces echa un vistazo a esto. Pasemos al código de Visual Studio. Y agreguemos otro color aquí. Vamos por algún tipo de verde amarillo. Se ve bien. Bien. Y entonces tal vez por la partida dos, cambiamos esto a color, y vamos por un azul pizarra oscuro. Bien. Ahora, a lo mejor ya sabes lo que va a pasar , a lo mejor no lo hagas mientras estamos en ello, realmente no me gusta cuando las cosas simplemente continúan y siguen hacia la derecha. Entonces, ¿cómo puedo cambiar esto? Bueno, quiero ir por algún tipo de ajustes. Entonces creo que es comando y coma. Ahí vamos, o vas por el código y la configuración, y luego simplemente tocas la configuración de allí. Ahora, lo que quiero hacer es buscar rap, envoltura de palabras. La línea debe envolverse, y quiero que eso esté encendido. Entonces veamos si eso envuelve. Sí. Eso significa que no continúa y sigue y sigue hacia la derecha. Simplemente envuelve bastante bien. Entonces esto es mi edad dos, y todo sigue en la línea 14. Bien, gracias. Digamos eso. Comando S y Comando R para refrescar. Bien. Así que yendo hacia aquí, echemos un vistazo. Hmm. Entonces verás que el color de la propiedad, el que se agregó último es el que aplica el navegador , y puedes verlo por aquí. Es color rojo, ese rojo, y luego va de color amarillo verde, está tachado éste porque hemos puesto esa propiedad al final. Lo mismo para el rubro número dos por aquí. Entonces, si inspeccionamos este , el color oscuro, azul pizarra tiene prioridad sobre este otro color RGBA porque fue escrito Pero este lapso con el color azul todavía tiene el color azul porque es su propio elemento, y el color que heredaba de este H uno se sobrescribe por su color azul, sobre todo porque es un estilo inline Ahora bien, ¿qué más podemos hacer? Bueno, mira esto. Si solo toco uno de estos valores de propiedad y presiono Retorno, entonces puedo comenzar a ingresar otro. Así que vamos por los antecedentes. Vamos por el color. Y entonces aquí, ¿qué es Azure? Vamos por Azure. Realmente no aparece. Entonces tal vez para varilla dorada luz amarilla. A realmente no aparece muy bien. ¿Qué tal si solo vamos por, como, un rojo oscuro, rojo indio Ahí vamos. Es bastante genial. Y nuevamente, si refrescas aquí, ese estilo no va a persistir. No va a guardarse en tu archivo. Solo estás probando cosas en esta versión que el navegador te está enviando aquí mismo. Bien, así que entremos y pongamos un par de colores de fondo. Así que código de estudio visual. Bueno, vamos por el color de fondo. Bien, vamos por un gris verde, verdes frescos. Asegúrate de tener tu punto y coma entre las propiedades Entonces el color de fondo aquí, pero lo que pasó con el tamaño de la fuente tipo de desaparecido. Entonces vamos por el tamaño de fuente, y por alguna razón, simplemente borra esos 30 píxeles. Entonces, aunque sea autollenando cosas por ti, solo revisa lo que está haciendo Y entonces podemos copiar y pegar esto por aquí y tal vez por aquí. Bien. Éste, vamos por el color de fondo. Guau. Un índigo. Bien. Si algunas de estas cosas que aparecen se ponen irritantes, puedes apagarlas en ajustes Es posible que solo necesites buscar cómo se llaman o, ya sabes, simplemente pasar por la configuración y cambiar algunas cosas a tu preferencia. Como, todas estas cosas como, Gus, vamos. Sólo estoy tratando de escribir cosas aquí. Índigo, índigo, índigo. Y se puede ver cómo, como, realmente confuso se está poniendo esto. Como, ¿Dónde está mi texto? ¿Dónde están mis estilos? Como, Whoa. Y todo esto nos lleva a la siguiente lección. No te preocupes. Por eso vamos a progresar. Bien, vamos por Google Chrome, repaso. Bien, ahora todo tiene un color de fondo. Fantástico. Y si tuviéramos que cambiar esto, tendríamos que cambiar cada línea. Entonces, una, dos, tres, cuatro, cinco líneas para la púrpura, una , dos, tres, para los verdes. Guau. Bien, ahora vamos a Github Desktop. Tenemos un nuevo archivo de estilos en línea, así que cree estilos en línea llamados HTML. Comprométete con Maine, y luego presiona Origin. Lo que es realmente importante ahora es que si necesitas mi ayuda para cualquier cosa, me gustaría que la llevaras a tu cuenta de GitHub para que puedas decir, Oye, las cosas no están funcionando. Aquí está mi enlace, por favor. H, yo. Y entonces puedes enviarme una URL. Entonces puedes ser como, Bien, vamos a GitHub. Punto com, y puedes ir a tu repositorio de Experimentos. Luego puedes ir a tu configuración. Puedes ir a tus páginas, y luego puedes ir a tu sitio como Live por aquí. Y luego porque hemos estado trabajando en estilos inline dot HTML, entonces puedes compartir esta página conmigo, y luego puedo echarle un buen vistazo, ¿sabes? Espero que estés empezando a ver lo divertido genial y poderoso que es esto. Puedes hacer que las cosas se vean épicas e increíbles con bastante facilidad, pero es posible que hayas notado que esto podría tener piedad y que podría llevar mucho tiempo cambiar el CSS por múltiples elementos que quieres que se vean igual. Entonces, en la siguiente lección, te voy a mostrar cómo usar los conjuntos de reglas CSS y te diré por qué suelen ser mejores de usar. 14. 13 conjuntos de reglas CSS: Con el conjunto de reglas CSS, especifica qué elementos desea aplicar estilo y, a continuación, escribe los nombres y valores de las propiedades dentro de las llaves Déjame decirte los nombres oficiales de todas las partes de un conjunto de reglas. Hará que todo sea más fácil explicar y entender en el futuro. La parte en la que especifica qué elementos HTR desea aplicar estilo se denomina instrucción selector o selector Es donde seleccionas qué elementos diseñar. Este selector está dirigido a todos los elementos H one. Este está apuntando a todos los elementos de la imagen. Cubriremos ejemplos más complejos de declaraciones selectoras más adelante en el curso. La parte dentro de las llaves se llama bloque de declaración Contiene una o más declaraciones separadas por punto y coma, y un par de valores de propiedad se denomina Al final de una declaración, pones un punto y coma. Entonces, lo que dice este conjunto de reglas es seleccionar todos los elementos de encabezado uno y hacer que su texto sea de color rojo y su tamaño de fuente 50 píxeles. El uso de RuleSets hace que tus archivos HTML sean mucho más claros y fáciles Y puedes hacer algunas cosas poderosas con selectores, que me referiré más adelante en este curso Bien, comencemos a escribir algún CSS basado en conjuntos de reglas. Entonces, en lugar de escribir y un archivo HTML completamente nuevo con los elementos head y body, solo voy a duplicar este. Entonces haga clic derecho y duplique, y luego presionaré Raton o haga clic derecho y luego toque renombrar Y yo lo llamaré RuleSet. Estilos de conjunto de reglas punto HTML. Bien. Y luego dentro del código de Visual Studio, abriré estilos de conjunto de Rul Y verás que es verde porque es nuevo. Entonces eso es como decir, Oye, es nuevo. Así que entremos aquí. Cambiemos a estilos de RuleSet. Bien. Y luego dentro de tu elemento cabeza, vamos a crear un elemento de estilo como ese. Así que abriendo y cerrando la etiqueta, y dentro de tu elemento de estilo, vamos a escribir algo de CSS. Entonces quiero cambiar todos los elementos H uno. H uno, cuando presiono el corsé de apertura, debería crear un corsé de cierre para mí así. También puedes poner un espacio en el medio. A mí Qui me gusta hacer eso. Hace que sea un poco más fácil de leer. Y luego al presionar tabulador, así pone mi cursor por aquí. Y luego quiero cambiar el vamos por el color de fondo. Así que el color de fondo. Bueno, vamos por el negro porque eso es realmente genial, ¿verdad? Entonces Comando S. Ahora, vayamos a Google Chrome, y no tenemos eso abierto. Así que toca dos veces los estilos de conjuntos de reglas. Y aquí nada ha cambiado. Interesante. Entonces, si inspeccionamos esto porque esto va a suceder, escribes algo, esperas que algo suceda, y entonces no cambia. Entonces echamos un vistazo a este H one, ¿de acuerdo? Interesante. El color de fondo es negro, pero ha sido tachado, y se ha aplicado el amarillo verde Eso es color, pero se ha aplicado el color de fondo del verde. Hmm. Entonces, lo que está pasando aquí es que cuanto más específica sea una propiedad y un valor, más favorecerá el navegador a eso. Va a elegir esa sobre algo que no es tan específico. Entonces estamos diciendo, Hey, todos los H, quiero que tengan un color de fondo de negro. Fue este elemento estilo está diciendo, Oye, este elemento muy específico, quiero que tengas un color de fondo de verde. Entonces, si tuviéramos que desmarcar el color de fondo aquí, ah, entonces se vuelve negro, lo cual es realmente genial Así que volvamos al código de Visual Studio. Vamos a sacar el color de fondo, el color de fondo de todas estas cosas. P. P. Y se puede ver cuánto tiempo lleva esto hacer cualquier tipo de edición de valores CSS. Poof. Bien, esto se ve un poco más manejable ahora Así que voy a salvar eso. Volvamos a Chrome y refresquemos. Bien, entonces ahora solo tus elementos de encabezado uno tienen este fondo negro, lo cual es genial. Probemos otra cosa aquí. Volvamos aquí y digamos H unos, coma, H dos, H tres, H cuatro Así que básicamente estás diciendo aquí, Cualquier cosa que sea una H uno, una H dos, una H tres, o una H cuatro, quiero aplicarle esta propiedad CSS a usted o a estas propiedades CSS. Entonces comando S, volvamos a Chrome. Y ahora todos tienen ese fondo negro. Bien, volvamos al código de Visual Studio aquí. Eso se ve genial. Fantástico. Ahora quiero cambiar los colores de solo H unos. Entonces, en vez de poner un valor de color y una propiedad aquí, voy a ir por H uno, y vamos por el color. Y qué clase de tal vez un coral. Coral. Sí. Impresionante. Y nuevamente, aquí, probablemente no va a funcionar porque ya hay estilos de color en línea. Así que vamos a Chrome, refrescar. Nada debería cambiar. Gotcha, gotcha, gotcha Así que vamos a eliminar las propiedades de color. Bien. Todos estos. Adiós. A pesar de que ese era un color bastante genial. Entonces lo que voy a hacer es que la voy a poner aquí, pero solo quiero, ya sabes, hacerla invisible, pero aún así quiero verla. Entonces, ¿cómo hago eso? Bueno, se llama comentario. Entonces seleccionas un montón de texto, y luego presionas Comando y hacia adelante, slash, y eso crea un comentario para ti También podrías escribir tu propio comentario yendo hacia adelante slash Asterix y al final, Asterix y hacia adelante slash Asterix y al final, Asterix y slash hacia adelante. El navegador no lee esto. Bastante genial. Bien, saquemos esos colores. Bien. Eso se ve bastante bien. Mucho más manejable. Entonces, vamos a guardar eso. Bien. Volvamos a la actualización de cromo. Bien, entonces encabezando uno, encabezando uno, rejillas. El resto de ellos tienen un color de negro. Bien, entonces volvamos al código de Visual Studio. Pongamos un color por defecto para H uno, H 2h3h4. Vamos por una especie de verde. Vamos por el verde. Bien, ahorra. Entonces lo que debería pasar aquí es que H uno, H 2h3h4, deberían tener un color verde, y luego H uno debería obtener un color de coral porque sobrescribe este Y debido a que este fue escrito el último, el navegador debería entonces elegir ese sobre el que no se escribió el último. Bien. Refrescar. Ahí vamos. Eso funciona. Entonces, encabezando uno. Inspeccionemos. Se aplica color de coral. Ahí vamos por el color verde que se aplica a H uno, H dos, H tres, H cuatro. Bien. Ahí vamos. Ahora, span todavía tiene un color de azul porque todavía tiene un estilo inline. Genial. Bien. Volver al código de Visual Studio. ¿Qué pasa con los tamaños de fuente? Bueno, bien, vamos a cambiar algunas cosas aquí. Vamos por un tamaño de fuente de 30 píxeles. Y entonces lo que podemos hacer aquí es eliminar todos estos. Guau. Tanto trabajo tratando con estilos en línea. Pero puedes hacer uso de ellos si quieres. Bien. Podría quejarse de estas cosas aquí, así que vamos a sacarlas. Bien. El único estilo inline que tenemos es en el lapso. Guardar ahí. Ahora, todo se ve exactamente igual, o el color de fondo. La mayoría de los colores, el tamaño de fuente es un poco más como espaciado alrededor de este H cuatro o el H tres o algo así. Entonces lo que podemos hacer es ir a este H uno, h2h3, h cuatro, y voy a cambiar el margen a cero Quién. Ahí vamos. Eso es, ya sabes, cambió todo a exactamente lo mismo. Ahora no hay margen. Todo es como heterogéneo, lo mismo. Excepto por el color, claro. Bien, así que si quisieras cambiar eso, podrías. Sí, eso se ve bastante bien. Ahora lo que tenemos que hacer es ir al escritorio Github y crear estilos de conjuntos de reglas con HTML, comprometernos con Maine y empujar. Bien. Así que eso es lo básico del uso de conjuntos de reglas CSS. Son superiores a los estilos en línea por algunas razones. En primer lugar, tu CSS es más fácil de leer. En segundo lugar, es más fácil cambiar el aspecto de un montón de elementos usando el mismo código. Copiar y pegar entre atributos de estilo es una enorme pérdida de tiempo y es propenso a errores En tercer lugar, esa declaración selectora puede ser poderosa. Nos pondremos en esto en la siguiente lección. 15. Declaraciones de selectores CSS: Si bien los conjuntos de reglas CSS hacen que todo sea más limpio y fácil de leer, hemos perdido la capacidad de cambiar los estilos de elementos individuales Aquí es donde brilla el poder de las declaraciones selectoras, especialmente cuando se usan atributos class e ID en sus elementos HTML. Puedes ver las declaraciones del selector como profesor seleccionando qué alumnos deben ponerse de pie. Aquí hay algunos ejemplos. ¿Pueden ponerse de pie todas las chicas por favor? ¿Pueden ponerse de pie todos los niños mayores de 11 años? ¿Pueden ponerse de pie todas las chicas de ojos azules menores de 11 años? ¿Pueden ponerse de pie todos los alumnos que tocan un instrumento musical, pero no la guitarra? ¿Pueden ponerse de pie todas las chicas llamadas Susan? ¿Puede el alumno con número de estudiante 876221 por favor ponerse de pie? Se puede ver qué tan genéricas o específicas pueden ser estas declaraciones. Incluyen o excluyen. Y eso es lo que hace una sentencia de selector CSS. Aquí hay algunos ejemplos de lo que puedes seleccionar todos los tipos de encabezado, enlaces mientras están rondados, párrafos que vienen después de los encabezamientos, imágenes dentro de párrafos, anclaje directamente dentro de elementos NAV Las declaraciones selectoras son particularmente útiles cuando quieres cambiar los elementos con el mismo nombre aspecto de los elementos con el mismo nombre en diferentes partes de tu sitio web, como los enlaces en tu barra NAV versus los enlaces en los párrafos de tu artículo, o la imagen en tu barra lateral versus las imágenes en el resto del sitio. Para que esto sea aún más fácil, puedes usar los atributos class e ID. En cualquier elemento HTML, puede agregar una clase y un atributo ID. Un atributo ID debe ser único en una página web. No puede tener más de un elemento con el mismo atributo ID. De lo contrario, las cosas funcionan de manera impredecible. Un atributo ID no puede tener ningún espacio. Si quieres que un atributo ID esté compuesto por varias palabras, usa estuche para kebab, estuche de camello o estuche de serpiente Una vez que un elemento tiene un ID, puedes seleccionarlo en CSS usando el símbolo hash seguido del valor del atributo ID, como seleccionar todos los elementos con el ID de banner de héroe. Esto debería ser solo un elemento. Ahora bien, un atributo de clase es una forma de agrupar elementos o clasificar los elementos. Piensa en cosas como el color de ojos, el género y la edad. Se clase de elementos HTML dándoles uno o más nombres de clase en su atributo class. Un nombre de clase no tiene espacios porque un espacio significa otro nombre de clase Al igual que un atributo ID, si quieres que un nombre de clase esté compuesto por varias palabras, usa estuche para kebab o estuche de camello o estuche de serpiente Una vez que un elemento tiene un nombre de clase, puede seleccionarlo en CSS usando el símbolo de punto seguido del nombre de la clase. Al igual que, seleccione todos los elementos con el nombre de clase de fondo azul o seleccione todos los elementos de párrafo con el nombre de clase de subtítulo y fondo azul. Ahora, juguemos con nuestro nuevo conocimiento de clases e identificaciones. Entonces esto es lo que tenemos, pero ahora he perdido ese tipo de manera de decirle a un elemento específico, Oye, quiero que seas rojo o quiero que seas azul, o quiero que seas amarillo verde o verde amarillo. ¿Cómo lo hacemos con clases e identificaciones? Bueno, vamos a meternos en ello. Entonces en el código VS, ve a cambiar este color de fondo de negro a nada en este momento. Entonces, vamos a guardar eso. Volvamos a Chrome y refresquemos. Se ve mucho más fresco. Parece mucho más fácil de leer, lo cual es genial. Y luego, sí, para un par de estos, en realidad quiero hacerlos rojos. Así que entremos aquí. Y lo que vamos a hacer es decir cualquier cosa con una clase de rojo o importante. Vamos a darle un color de fondo o tal vez un color de rojo, muy rojo. Ahí vamos. Entonces esto es punto Importante. Es una clase. Bien, genial. Entonces, ¿cómo escribimos una clase en HTML? Lo hacemos como un atributo, y le damos una clase de importante. Ahí vamos. Voy a copiar eso, ponerlo en H cuatro, H uno, H tres. Bien. Voy a salvar eso. Vayamos al cromo y al refresco. Bien. Entonces un par de nuestros encabezados ahora son rojos porque tienen esta clase de importantes, y eso viene de esta importante clase CSS También podríamos cambiar esto a algo como naranja, naranja, rojo. ¿Qué pasa con el color de una orquídea? Ahí vamos. Y puedes ver lo rápido que esto actualiza todo. Es mucho más fácil cambiar un montón de estilos HTML. Así que vamos a poner eso ahí o niño Orquídea o niño. No estoy muy seguro de cómo decirlo. Bien. Eso se ve bien. ¿O qué pasa con este color que teníamos en un comentario? Además, podrías estar como, ¿Cómo hago un comentario HTML? ¿ Porque no es lo mismo? Bueno, si quisieras comentar en HTML, selecciona el texto que quieres comentar, presiona Comando o Control y hacia adelante slash, y hace un comentario HTML, que es un símbolo menos que Es un signo de exclamación, y son dos guiones al inicio Y luego al final del comentario, vas dash, dash, mayor que. Y también puedes alternar esto realmente fácil solo ir Comando y slash hacia adelante Lo mismo con el comentario CSS. Bien. En este caso, es bastante sencillo leer que este color en realidad va a sobrescribir Este color, es un conflicto muy sencillo. Entonces podemos dejar que eso suceda. Entonces Comando S, veamos qué pasa aquí. Bien, entonces eso cambió muy ligeramente, sólo porque lo inspeccionamos. Ahí vamos. Ese color coral se sobrescribe por este color más bonito. Ni siquiera sé qué tipo de color es este. El que tiene un poco de opacidad. Bien. Ahora, volvamos al código VS. Aquí tenemos algunas clases. Que pasa si en este caso, tienes tu orquídea, pero también le pongo un verde, como H uno, H dos, h tres, h cuatro. Bueno, si es una clase y hay un conflicto, entonces sobrescribe la que no es tan específica Entonces las clases son más específicas que solo los nombres de elementos. Pero lo que es genial es que también podemos ponerle un color de fondo aquí. Vamos por vara de oro oscuro o naranja oscuro. Ahí vamos. Y podemos ver cómo se ve eso. Probablemente va a quedar bastante asqueroso. Y lo que esto hace es que pondrá un naranja oscuro a los importantes, lo cual es genial. Pero lo que realmente quería mostrarte aquí es que si pones este color de fondo en estos h1h2 h38 cuatros y ahorras que los pone Y así cuando tienes una propiedad o declaración de color, no sobrescribe todo el montón de declaraciones anteriores Se suma a ello. Sólo si hay un conflicto, entonces va, Bien, ¿ cuál vamos a elegir? Tenemos que hacer una elección aquí. Ahora, todavía tenemos este estilo inline azul. Vamos a deshacernos de eso. Y en lugar de una clase, podemos usar una clase. Podemos poner una identificación aquí y podemos decir, la. Me gusta usar estuche para kebab. Podrías hacer algo como el indicado, eso es camelcase. Vamos a usar eso por ahora. Y como sabes, haz una ID en CSS. Hacemos un símbolo hash, y luego pondremos el uno y luego pondremos en nuestro CSS por aquí. Y el color era azul. Ahí vamos. Y así esta es una manera muy agradable de separar tus estilos de tu HTML. Así Comando S repaso. Nada debería cambiar porque si inspeccionamos éste, eso viene de esta declaración CSS del uno. Bien. Lo que podemos hacer es que también podemos agregar múltiples clases, dos elementos. Entonces mira esto. Vamos al código VS aquí. Y para un par de estos, vamos a ir por clase y mayúsculas. Y voy a copiar eso. Y así para este rubro dos y este rubro tres, voy a poner aquí una clase adicional, y verán que hay un espacio. Un espacio en este atributo de clase significa que es otra clase. Y tenemos Importante, que tiene un color de orquídea. Y luego tenemos una clase de mayúsculas, y podemos decir text transform e ir por mayúsculas, así Entonces Comando S, y luego refrescar y Google Chrome. Bien. Entonces, encabezando uno está en mayúscula partida dos es mayúscula. Eso es genial. Sí. Y también puedes simplemente hacer que esto sea súper confuso por ti mismo. Así que la mayúscula solo podría tener una transformada de texto de mayúsculas, pero también podría tener un color de qué color es simplemente Rosa intenso. Vamos por eso. Y tal vez un color de fondo de negro. Entonces tal vez la idea aquí detrás la clase mayúscula es hacer que sea realmente fácil de leer Entonces Comando S. Volvamos aquí. Bien. Ahí vamos. Entonces, si nos fijamos en la rúbrica tres, veremos que tiene un par de cosas sucediendo aquí. Tiene este H uno, h2h3, H cuatro, manojo de CSS Lo único que se guarda de ahí es el tamaño de fuente de 30 píxeles. El color y el color de fondo se sobrescriben por otros estilos. También tiene una clase importante, por lo que tiene ese color de orquídea, pero también se sobrescribe por esta clase en mayúsculas porque viene último en el elemento style Entonces si cambiamos esto, así que pon eso primero e importante último y guarda ahí, entonces el color debería cambiar a orquídea nuevamente. Entonces es repaso, y así lo hace. Entonces esa es la partida tres, inspeccione. Porque importante es ahora más abajo en el archivo, viene más tarde, dice el navegador, genial, usaremos ese color en lugar del color que se encuentra en la declaración en mayúsculas Entonces finalmente, mira esto en la rúbrica tres, si tuviéramos que agregar una idea aquí de decir, señor Jones. Realmente no se me ocurre un mejor nombre de identificación. Y vamos a copiar eso. Y diga, señor Jones, ¿qué vamos a hacer por usted? ¿Te va a dar un color de tal vez vamos por una madera corpulenta marrón Vamos por Burly wood. Bien. E incluso si el señor Jones está justo en lo alto de tu elemento de estilo, y lo guardas, lo que debería pasar es que se aplique. Así que inspecciona tu ves que el señor Jones, porque es una identificación, porque es súper específico, obtiene este color de madera corpulenta. Eh. incluso anula las clases mayúsculas, y ciertamente sobrescribe la declaración H one, H 2h3h4 Incluso sobrescribe lo importante, incluso anula las clases mayúsculas, y ciertamente sobrescribe la declaración H one, H 2h3h4. Bien. Pero supongo, finalmente, porque esto tiene una identificación de Mr. Jones, lo que aún puede sobrescribir esto es un estilo inline Entonces si decimos estilo, color, vamos por un No, pero un violeta azul. Aquí vamos. Guarde eso. Verás por aquí, y ahora es azul violeta. Porque el estilo del elemento es azul violeta. Entonces eso tiene prioridad sobre todas las demás cosas. Ahora bien, la única otra cosa que puede sobrescribir este estilo de encabezado tres en línea es una palabra importante Entonces déjame mostrarte cómo escribir eso. Realmente no aconsejo hacer esto, pero a veces necesitas saber cómo hacerlo. Entonces esto tiene una clase importante y mayúscula. También cuenta con una identificación del señor Jones. Entonces en la identificación de Burly wood, lo que podemos hacer es entonces poner un signo de exclamación y escribir importante y vamos a guardar esto y refrescar, y ya ves que la propiedad CSS color madera Burley viene color madera Lo mismo se podría hacer tal vez en el H un color, el H tres color, el albaricase Vamos por el rosa intenso. Bien, voy a guardar ese refresco aquí. Entonces el rosa intenso viene a través. Eso quiere decir que el violeta azul, la madera corpulenta, la orquídea no llegaron a través Rosa intenso. Sea que tenga esa palabra clave importante, viene a través. Ahora, también podrías poner importante en este valor de color, este valor de color o ese valor de color. Y luego por donde está, el navegador sería como, Sí, voy a elegir ese en lugar de este en la clase mayúscula Vamos a probarlo. Así que subamos aquí y vayamos por Importante y guardemos eso y luego volvamos a Chrome y actualicemos. Así que ahora de vuelta en Burywood porque tiene esa identificación del señor Jones, y de ahí viene Y también tiene esa palabra clave importante. Y sobrescribirá esta importante palabra clave en la clase mayúscula Así que las cosas se pueden complicar mucho aquí. No sugiero usar la palabra clave important, pero puede ser útil cuando estás trabajando con el código de otras personas, o estás trabajando con CSS de algún otro equipo, algún otro servicio, y especialmente si están usando palabras clave importantes. Ahora, hay muchas más formas de escribir declaraciones selectivas, y pueden volverse complejas y confusas. Pero si mantienes tu sitio web simple y bien estructurado, no deberías necesitar meterte en las cosas complejas. En la siguiente lección, voy a cubrir conflictos CSS y qué declaraciones obtienen preferencia y por qué. Esto evitará tantos dolores de cabeza, lo prometo. 16. Teoría de conflictos de CSS: Por defecto, un navegador aplica todos los estilos que se dirigen un elemento de todos los diferentes conjuntos de reglas con diferentes instrucciones seleccionadas y estilos en línea. Pero, ¿qué sucede cuando un elemento tiene varios estilos conflictivos aplicados a él, como el color azul de este conjunto de reglas, color rojo de ese conjunto de reglas y el color verde amarillo de un estilo en línea ¿ Sabe el navegador qué color hacer el texto de este elemento? CSS significa hoja de estilo en cascada. La idea detrás de la cascada es determinar qué estilos se aplican a un elemento cuando hay declaraciones contradictorias cascada se refiere a la forma en que los conjuntos de reglas CSS caen en cascada desde la parte superior hasta la parte inferior de una página y cómo interactúan entre sí para crear el estilo final de un elemento Entonces, ¿cómo decide el navegador qué estilo aplicar? Hay tres cosas que busca el navegador. En general, el primero es qué estilo se escribió el último. El último es generalmente el aplicado. En segundo lugar, cuanto más específica sea una declaración, mayor será la probabilidad de que el navegador la elija sobre otras declaraciones. Una declaración dentro de un conjunto de reglas aplicada a todos los elementos de anclaje no es tan específica como una selecciona todos los anclajes dentro de los elementos de la lista dentro de las listas desordenadas dentro de los elementos NIV Y eso no es tan específico como una declaración dentro de un conjunto de reglas, aplicada a todos los elementos con un ID de enlace especial. Y aún más específico es un estilo inline. Los estilos en línea son los más específicos. Los selectores de ID son los siguientes más específicos. Los selectores de clase son los siguientes más específicos y los selectores de elementos son los menos Por supuesto, las declaraciones selectoras conflictivas pueden incluir todas estas Entonces mi consejo es mantener las cosas simples y cuando algo no esté funcionando como se esperaba, eche un vistazo a lo específicas que son sus declaraciones selectoras. En tercer lugar, la palabra clave importante se puede agregar a una declaración CSS para darle la máxima prioridad, anulando todas las demás declaraciones, independientemente de cuán específica sea la sentencia selectora, o el orden de las declaraciones Y si hay múltiples declaraciones conflictivas con la palabra clave important, el navegador vuelve al orden y lo específica que es una declaración Bien, es importante saber esto, porque cuando tus elementos no parecen que los codificaste para que se vean, este suele ser el primer lugar para comenzar a buscar. Esto es aún más importante si alguna vez tratas con el código de otra persona, tal vez el código de un miembro del equipo o algún código de plantilla que podrías estar modificando. En la siguiente lección, repasaré traslado de tu CSS a un archivo separado, que hace que todo sea más fácil de leer y escribir con algunos beneficios adicionales. 17. 16 archivos CSS independientes: A pesar de que HTML y CSS aman y funcionan súper bien entre sí, hay buenas razones para separarlos en sus propios archivos. La primera razón es porque hace que todo sea más ordenado y más fácil de leer y escribir Te beneficias. No es necesario desplazarse hacia arriba y hacia abajo al cambiar entre escribir HTML y CSS. Incluso puedes escupir tu editor de código para ver el archivo CSS en una ventana y el HTML en otra La segunda razón es que si tienes múltiples páginas web que quieres que tengan el mismo aspecto, no quieres tener que copiar y pegar el CSS de archivo a archivo a archivo Especialmente no cada vez que haces un pequeño cambio. Esto consume mucho tiempo y es propenso a errores. Tener tu CSS en archivos separados permite que varios archivos HTML usen el mismo CSS. Ahora bien, ¿cómo hacemos esto en realidad? El primer paso es crear un archivo CSS. Guárdalo con una extensión de archivo CSS de puntos. Puedes dejarla en la carpeta principal o meterla en una carpeta. Me gusta poner mis archivos CSS en una carpeta llamada CSS. El segundo paso es mover tu CSS de tu archivo HTML o escribir tu CSS en este nuevo archivo CSS. El tercer paso es decirle a su archivo HTML que realmente le gustaría usar este archivo CSS para darle estilo a su página web. Lo hacemos agregando una línea como esta, tinta con un atributo roll de hoja de estilo y un atributo HRF de donde está ese archivo CSS Y si bien podemos agregarlo en cualquier lugar, el mejor lugar para ponerlo es dentro del elemento head de tu página web. Esto significa que el navegador sabe cómo mostrar tu página web antes de que se procese lo que necesita mostrar. Es un elemento de enlace real, no un elemento de anclaje. El atributo role le dice al navegador que se trata de una hoja de estilo, y el atributo HF, igual que con el elemento anchor, le dice al navegador dónde encontrar el archivo CSS. Si necesita un repaso sobre cómo escribir rutas a archivos, vea la lección de nomenclatura, carpetas y rutas de archivos Y recuerda que el caso importa en línea, y que la ortografía y los errores tipográficos son la mayor causa de errores y errores Pongámonos prácticos sobre esto. ¿Deberíamos? Entonces las cosas se ven interesantes. No necesariamente codificaría un sitio web como este, pero ojalá estés entendiendo lo que es posible, cómo funcionan las cosas, especialmente usando todos estos colores, colores de fondo, cosas así. Oh, quiero limpiar un poco las cosas. Voy a dejar de usar las palabras clave importantes porque solo hace que las cosas sean confusas, irritantes Y si. Podemos mantener eso ahí solo para mostrarlo. Bien. Pero ahora, ya sabes, has visto lo que he estado haciendo. Tengo mi HTML aquí. Tengo mis estilos aquí arriba. Tengo que seguir desplazándome entre ellos. Y sí, hay formas de abrir el mismo archivo en dos pestañas diferentes o tener una pantalla dividida, cosas así. Pero hay una manera más fácil. Así que vamos a crear un nuevo archivo, llámalo estilo punto css. Ahí vamos. Debería tener este pequeño hachís azul como icono, ¿de acuerdo? Y aquí. Vamos a cortar. Todas estas declaraciones y ponla aquí en este expediente. Bien, y guárdalo. Y luego guardaremos este, estilos de conjuntos de reglas, volveremos a Chrome y actualizaremos, y todo se ha ido. ¿Por qué? Porque no hemos vinculado este archivo HTML al archivo CSS. Entonces, ¿cómo hacemos eso? Bueno, si estás como, Oh, no lo sé, solo búscalo en Google. Entonces, ¿cómo vincular el archivo HTML al archivo CSS. Vincular archivos CS a HML el tutorial definitivo para ti. ¿Y qué pasa con las escuelas W tres, HML? Todo bien. Vamos a probar eso. ¿Qué es CSS? Ta ta, ta, CSS interno. Ya hemos cubierto ese CSS externo. Aquí vamos. Enlace RL hoja de estilo href estilos Bien. Entonces voy a copiar esto. Volviendo al código VS. Y en lugar de un elemento de estilo, voy a decir Rl stylesheet Genial en este elemento de enlace. Y hemos cubierto un enlace para un ícono favorito. Ahora bien, esto es algo un poco diferente. Está usando el mismo elemento, pero es diferente. Y porque estamos diciendo que es una hoja de estilo y el HF, donde encontramos este estilo punto CSS. Als se llama estilo punto CSS. Así que vamos a renombrarlo estilo punto CSS. Comando S. Volvamos a Chrome. Refresca, y estamos de vuelta en el negocio. Impresionante. Muchas gracias, Google y W three Schools, que generalmente es un recurso bastante bueno. Bien, ahora, lo que quiero mostrarte es que es muy fácil lidiar con tu HTML aquí. Incluso haz que un miembro del equipo haga el HTML, y luego tus estilos existen en una hoja de estilos separada. Incluso podrías tener varias hojas de estilo. Pero lo que quiero mostrarles es, crear un nuevo archivo aquí, y llamémoslo conjunto de reglas dos. Estilos de punto punto Html. Y dentro de aquí, escribiremos nuestro tipo Duc o simplemente escriba Duck Ooh. Mira eso. Entonces, si tienes esto, eso sería de mucha ayuda. ¿Quieres que vuelva a cubrir eso? Sí, solo escribe Duck para tipo Duc o documento. Y si tienes instalada la abreviatura Emmet, lo cual creo que deberías hacer, entonces solo presionas Return, y crea un montón de cosas para ti No hemos cubierto este set de meta autos. No hemos cubierto esta cosa de las ventanas gráficas. Entonces, si quieres puedes sacarlos, y se le ocurre un documento de título. Entonces tal vez solo puedas decir Rule set dos. Y luego ponemos en nuestra tinta Vinculación. Ahí vamos. Rollo de hojas de estilo ya, y luego diremos estilo punto css. Y dentro de nuestro cuerpo, vayamos por una H one. Genial. Hola ahí. Y yo sólo voy a ahorrar. Comprobemos dos veces que esto funcione. Y voy a copiar esto. Voy a pegar esto. Vamos a establecer dos estilos. Bien, funciona. Para que veas lo poderoso que es esto. Significa que puedo crear múltiples archivos HTML y solo tener un archivo CSS que luego controla todos los estilos en esos archivos HTML para que signifique que si queremos cambiar de CSS en todo el sitio, bueno, entonces solo podemos decir color de fondo. Vamos por un morado. Volvemos a Chrome, actualizamos, cambios en esta página, y también cambia en esta página. De verdad, muy genial. Y también podemos agregar un par más aquí. Entonces vamos por los dos años. Guau, esto es esto, esto, esto es genial. Y a los tres años, esto es importante. Y recuerden, podemos decir clase Importante. Y luego, finalmente, los cuatro años. Esto es mayúscula. Y tal vez para mayúsculas, podemos poner esto en un elemento span Bien, vamos a guardar esto. Ahora volvemos al conjunto de reglas dos. Bien, esto es mayúscula. ¿Eso cambió algo? Interesante. Echemos un vistazo. No, porque no le pusimos la clase. Uh, eh. Entonces pongamos una clase de Mayúsculas Ahí vamos. Es muy importante probar tu código antes de enviarlo. Ahí vamos. Esto es mayúscula Bien, ahora, finalmente, en realidad necesitamos comprometer nuestros archivos. Así que vayamos al escritorio de Github e hicimos un montón de escritura de sets y nos comprometamos con Maine y luego empujemos a Origin. Fantástico. Ahora, eso debería estar en línea en tan solo unos segundos o unos minutos. Y ahora una cosa más que sí quiero mostrarles es agregar otro archivo CSS a un archivo HTML. En Visual Studio, este es el conjunto de reglas dos. Bueno, agreguemos otra. Así que vincula las hojas de estilo Roll, y vamos por el estilo CSS rojo. Bien, vamos a guardar eso, luego vamos a crear un nuevo estilo de punto rojo CSS. ¿Y ves lo que hice aquí? Dije Res. Así que probablemente sea muy bueno copiar y pegar. Así estilo rojo. Voy a copiar eso. Y luego solo tocaré dos veces esto o presionaré Retorno. Ahí vamos. Estilo rojo. Quieres copiar y pegar para que aunque tengas el nombre equivocado o lo hayas escrito mal, será lo mismo aquí y allá Si empiezas a escribir cosas varias veces, esto conlleva a más errores. Bien, entonces estilo rojo. Lo que quiero hacer es decir cuerpo. Vamos a hacerte el color de fondo rojo, o eso va a ser realmente dolorido para nuestros ojos. ¿Y un salmón? El salmón debería ser bueno. Bien, Comando S. Volvamos a Chrome. Regla s dos. Bien, conjunto de reglas. Estilos. No lo tiene porque no incluye ese nuevo archivo CSS. Bien. Entonces eso se vuelve bastante genial y significa que para páginas particulares, puedes incluir diferentes estilos. Así que tenemos los estilos generales, y luego tenemos el estilo rojo punto CSS. Pero ahora con estilo en CSS, si en la parte superior aquí, ponemos un selector de cuerpo y luego cambiamos el color de fondo a un verde amarillo, ¿qué va a pasar aquí? Probablemente conozcas la respuesta. Entonces, vamos a ahorrar. Vayamos al cromo y al refresco. Regla establece dos estilos, tienen el color salmón. Estilos de conjunto de reglas, deben tener el color verde. Bien. Pero si vamos a establecer reglas dos estilos y cambiamos el orden de las hojas de estilo, ¿qué va a pasar? Bien, estilos de conjuntos de reglas, eso sigue siendo el mismo porque solo tiene una hoja de estilos que incluye. Conjunto de regla dos, es verde. ¿Y por qué es esto? Vamos a echar un vistazo al cuerpo. Es porque el estilo rojo es primero, estilo en CSS es el segundo. Entonces dice, El verde amarillo llegó último, así que voy a usar eso. Hay un conflicto. Voy a usar el que fue escrito el último. Y ahora vamos a comprometernos todo esto. Agrega una nueva hoja de estilo. Sí, eso es genial. Bien, viaje a Maine. Empujar al origen. Ahí vamos. Ahora puedes crear tantos archivos HTML como quieras que todos usen los mismos estilos. Esto es poderoso. Y puedes agregar múltiples archivos CSS a una página HTML. A veces, una página necesita estilos adicionales, o necesita vincular a una hoja de estilos que existe en línea. Cuando vinculas múltiples archivos CSS a tu archivo HTML, el orden en que los escribas será importante si hay algún conflicto de estilo. Ahora, conoces a un montón sobre CSS y HTML y cómo se juntan para crear sitios web increíbles. Es hora de bailar. Oh, whoo. Bien, en el resto del curso, vamos a estar creando un sitio web real, uno que se vea genial y otro que tenga sentido cuando lo compartes con el mundo. 18. 17 comentarios: Antes de crear un sitio web, quiero mostrarte cómo escribir código que el navegador ignora Esto significa que puedes dejarte notas o comentarios y también ocultar un montón de código que no quieres que lea el navegador. Esta función está disponible en todos los lenguajes de codificación, pero se ve diferente en cada uno. Entonces en HTML, escribes un comentario como este. Eso es un símbolo menos que, un signo de exclamación, dos guiones, el comentario, seguido de dos guiones y un Para activar y desactivar un comentario para una línea completa en el código VS, presione comando hacia adelante slash en Mac y Control forward slash en También prefiero dejar un espacio antes y después del comentario para que sea más fácil de leer. Ahora, en CSS, creas un comentario como este. Eso es un slash delantero y astérix, el comentario seguido otro astérix Nuevamente, para activar y desactivar un comentario para una línea completa en VS Code, presione Command forward slash en Mac y Control forward slash en Bien, ahora que entiendes los comentarios, sigamos también haciendo nuestro sitio web. 19. 18 Creemos un sitio web: En las próximas lecciones, estaré codificando un sitio web para mi personaje favorito de dibujos animados, Reckitt Quiero que hagas lo mismo y sigas, excepto con tu personaje ficticio, tal vez de una película, una caricatura, una serie, un cómic o un libro Incluso puedes hacer el tuyo propio. Así que empieza por elegir un personaje para codificar un sitio web. medida que avanzamos por la creación del sitio web, siéntete libre de desviarte, jugar, experimentar y probar cosas cuando quieras Quiero que hagas tuyo este sitio web. Y cuando cometes errores y luego los averiguas, ganas mucha experiencia valiosa. Así que vamos a ir. Y la siguiente lección, te mostraré cómo planificar el código para tu sitio web. Sí, suena aburrido, pero te va a ayudar a convertirte en un ninja de codificación. 20. 19 Planificación de tu sitio web: Sé que no quieres escuchar esto, pero la planificación hace que la codificación sitios web sea mucho más fácil y rápida. Incluso con un sitio web simple, la planificación ayuda mucho. Para mí, planear es como mirar un laberinto desde arriba y esbozar una raíz Es un mapa, y la codificación es como correr por ese laberinto siguiendo el mapa. Es posible sin un mapa, pero mucho más fácil con uno. En serio, sin un plan, podríamos estar codificando innecesariamente por días, no queremos eso Entonces, si aún no lo has hecho, elige un personaje para el que hacer un sitio web sencillo. Estaré haciendo un sitio web para Record Rolf. No importa qué sitio web esté creando y no importa si estoy haciendo el diseño solo o tanto el diseño como el cono, esbozo algunas opciones de cómo podría ser un sitio web Esto lo hago rápidamente y dejo fuera detalles. Las pizarras blancas, los diarios y los blocs de papel son excelentes para esto. A continuación, a partir de los bocetos que hice antes, creo lo que llamo un wireframe de caja Es donde dibujo los elementos HTML como cajas, les doy nombres e indico qué cajas van dentro de otras cajas. No intento planear todo de una vez, y a menudo dibujo una flecha de una caja y rellenar los detalles más adelante, en una parte separada de la página o incluso en una página nueva. Nuevamente, las pizarras blancas, papel y las revistas son geniales para esto Puedes usar una app en tu computadora o tu iPad si quieres. Todo lo que necesitas son campos de texto, rectángulos y círculos. Crear su estructura de alambre de caja digitalmente le permitirá adaptar su planificación a medida que avanza, lo cual es útil cuando es un principiante, pero no se distraiga con los detalles en Necesitamos un mapa aproximado, no un diseño perfecto de píxeles. De hecho, estaremos diseñando nuestro sitio web en el navegador mientras codificamos en este curso. Escogeremos los colores, las fuentes, los tamaños, etcétera, mientras estamos codificando Bien, déjame llevarte a través de mi planificación de estructura de alambre de caja. Bien, empecemos a planear. Voy a usar algunos marcadores aquí. Tengo uno rojo. Tengo uno negro. Lo que uses en realidad no importa. Pero comience con una especie de tipo amplio de planeación del sitio web. Va a tener un encabezado, vaya a tener la parte principal, y luego el pie de página. Déjame hacerlo así. Encabezado. Quién está arriba. Principal. Y entonces todo eso va a estar dentro del elemento principal del cuerpo. ¿Bien? Bien, ahora, dentro de cada uno de estos, ¿qué va a ser qué? Así encabezado. Hagamos esto primero. Vamos por un encabezado. Y quiero, como un avatar o una foto de perfil aquí de Rece Ralph Y luego quiero una H. Ahí va a ser donde está su nombre. Bien. Entonces lo que podemos hacer aquí es que ya sabes , en términos generales, este entra en detalles más específicos aquí. Entonces esto puede ser un div con una imagen de fondo, o podría ser una imagen. Voy a cubrir ambas opciones. Esta va a ser una H con su nombre. Foto de perfil. Bien. Podría necesitar sacudirlo un poco. Entonces la sección principal, esta podría ser, tal vez una H dos. Dice sobre Ralph. Entonces tenemos, como, un párrafo sobre él. Entonces podemos poner una imagen tal vez con él y sus amigos o tal vez una bonita por sí mismo. Entonces tenemos otra H dos aquí. A lo mejor esas pueden ser sus características, luego un par de artículos, ya sabes, como características. A continuación, a los dos años con sus amigos. También una lista. Bien, y todo esto va dentro del elemento principal. Bien, entonces tenemos H dos sobre Esto puede ser un párrafo sobre una imagen. H dos, Carácter dis. Vaya, qué palabra tan larga. Esto podría ser una lista desordenada o una lista ordenada. Voy a ir por una lista ordenada solo porque es diferente a una lista desordenada, y habrá elementos de lista ahí y H dos, amigos Y esta puede ser una lista ordenada con artículos I o elementos de lista ahí, además de anclas para que podamos vincularlos a ellos. Bien. El siguiente es el pie de página. Entonces piensa que tiene que ser particularmente difícil o complejo. Oh, pongamos ahí como una etiqueta de párrafo. Entonces el elemento footer y luego esto solo puede ser P más etiquetas de anclaje o elementos de anclaje. Bien, entonces tenemos nuestro cuerpo. Entonces tenemos encabezado, pie de página principal dentro del cuerpo. Dentro de la cabecera, va a haber una paloma o una imagen en H uno Conseguimos nuestros elementos principales. Hay bastantes cosas dentro del elemento principal. Entonces tenemos el pie de página, y dentro del pie de página, solo hay una etiqueta P con algunas A's ahí o elementos de anclaje. Bien, entonces esa es mi planeación. Podrías limpiar esto. Esto se podría hacer digitalmente. Se puede ver cómo pasé de amplios a detalles específicos, y no es un sitio muy complicado. No hay tantos elementos dentro de elementos dentro de elementos. La mayor cantidad de elementos dentro de los elementos a los que vamos a llegar es por aquí cuando hay un montón de elementos de anclaje dentro de elementos de lista dentro de elementos de lista desordenados Pero ahí solo habrá un elemento de lista desordenado. Si quisiéramos, podríamos separar cada una de estas secciones en una paloma o un elemento de sección, pero realmente no necesitamos hacerlo La otra cosa que tal vez quiera agregar es solo un pequeño pie de foto por aquí, así podríamos ir a llorar y poner eso ahí y P punto Leyenda. Entonces un párrafo con una clase de pie de foto, y puede haber cosas que agreguemos a medida que avanzamos, pero esta es nuestra planeación aproximada. Sabemos lo que tenemos que hacer. Está bastante claro. 21. 20 Configura tu sitio web básico: Pongámonos nerd y configuremos nuestro repositorio y escribamos el código HTML y CSS básico para el sitio web de nuestro personaje Puede hacer referencia a los elementos HTML comunes PDF al escribir su HTML y las propiedades CSS comunes PDF al escribir su CSS. Y voy a repasar todo el código mientras lo escribo. Pero si quieres, puedes pedir ayuda a Google o pedir ayuda a algo como Chat EPT Bien, entonces voy a configurar mi sitio web. Lo primero que quiero hacer es abrir Github desktop e ir Archivo Nuevo repositorio. Voy a escribir Ralph para la descripción de Rect Ralph , los sitios web Reck E El camino va a estar en las descargas. No quiero leerme, que te ignoren, no, licencia, no. Así que vamos a crear ese repositorio. Ahora lo que quiero hacer es abrir esto en código VS, así podríamos arrastrar esta carpeta a VSCode, o podríamos ir a repositorio y Mostrar en Finder y luego arrastrarla desde ahí, o podríamos ir repositorio y luego abrirla en Visual Studio A. Bastante genial, ¿verdad? Ahora bien, lo primero que quiero hacer es crear un nuevo archivo, y lo llamaré index dot HTML. La razón por la que voy por un archivo HTML de punto índice es porque si el navegador llega a nuestro sitio web y no hemos especificado qué archivo HTML cargar, busca un archivo HTML de punto índice. También podrías nombrar un HTML de punto predeterminado, pero el HTML de punto índice es bastante estándar. Bien. Entonces voy a escribir Doc o tipo doc. Ahí vamos. HTML, y luego voy a escribir Doc y luego usar esta abreviatura de TI para obtener todo este tipo de cosas. Las etiquetas HTML. Entonces me dieron las etiquetas en la cabeza, y también tengo las etiquetas del cuerpo. Realmente no necesitas preocuparte por este idioma ES porque puede que no hables inglés, así que en realidad podríamos sacarlo. No hace demasiada diferencia. Este juego de autos UTF ocho no hace mucha diferencia en este momento, pero voy a dejar eso en esto podría ser útil cuando comencemos a hacer algunas cosas receptivas más adelante en el curso El título, voy a ir por Raqueta. Ralph. Entonces voy a poner en un enlace pero en vez de hojas de estilo, voy a ir por un icono, y el HRF Bueno, en realidad todavía no tengo ningún archivo o carpeta. Así que vamos a entrar en Finder. Dentro de la carpeta Ralph. Vayamos por una nueva carpeta. Vamos a llamarlo IMG. Si no quieres crearlos en tu buscador, también puedes crearlos dentro de un código VS. Y voy a crear otro llamado CSS. Y aquí, voy a decir dentro de esta carpeta actual en la que estamos, que es la carpeta raíz principal, después ir dentro de la carpeta IMG Quiero encontrar Rolf icon dot PNG, tal vez. No estoy seguro. Tendremos que comprobarlo. Vamos. Encuentra algo. Estoy ahorrando a medida que voy. Por cierto, tú también deberías. Es realmente, muy útil por si acaso presionas cerrar o algo así y no hayas guardado. Bien, en Google Chrome, voy a buscar Reck it Rolf Cool Vamos por las imágenes. Este es bastante genial. Bien, vamos por esta Voy a hacer clic derecho, y luego podría usar esto tal como está. Entonces podría decir copiar dirección de enlace, pero en realidad quiero que sea un ícono favorito o un ícono en mi estructura de archivos o carpetas Así que vamos Copiar dirección de enlace o Copiar dirección de imagen. Ahí vamos. Quiero pegar eso y luego Comando S, guardar para descargar. Fantástico. Y luego pongamos eso en la carpeta de imágenes. Bien, es un JPEG, y luego voy a cambiar el nombre a esto como lo llamo, Rolf icon dot JPG Así que solo voy a copiar todo eso, volver al código VS, y luego pegarlo. Bien, entonces tenemos el ícono. Comprobemos dos veces que eso funcione. Voy a guardar entrar en Chrome, entrar en Finder, en realidad, y luego hacer doble clic en índice punto HTML. Y ahí vamos. Es aquí. Guau. Allá. Fantástico. Ahora, lo siguiente que tenemos que hacer es agregar algo de CSS y comenzar a configurar nuestro sitio web. Entonces volvamos al código VS. Pongamos otro enlace aquí. Tiene un rollo de hoja de estilo y luego HRF, esta carpeta actual Después mira dentro de la carpeta CSS. Entonces busca estilo punto CSS. Fantástico. Guarde eso. Vamos a ir a la carpeta CSS aquí, crear un nuevo archivo llamado estilo punto CSS. Y aquí, lo que quiero hacer es ir por mi cuerpo y solo verificar que esto realmente esté funcionando. Vamos por un color de fondo de chocolate. Fresco. Guarde eso. Después dentro de Chrome. Vamos a refrescarnos. Fantástico. El color chocolate viene a través. Eso significa que el CSS está funcionando. Ahora, de vuelta en el archivo índice, voy a ir a mi cuerpo porque necesitamos agregar algunas cosas aquí. Entonces voy a añadir un comentario. Voy a decir aquí es donde quiero mi encabezado. Aquí es donde quiero mi elemento principal, y aquí es donde quiero mi elemento footer. Esto nos ayuda a configurar las cosas muy bien. Entonces también puedo escribir en mi elemento de cabecera. Voy a añadir algunos espacios ahí o nuevas líneas. Entonces pondré aquí mi elemento principal. Puedo conseguir una escritura escrita. Y luego Puta Bien, así que eso se ve bastante bien. Voy a comandar S, guardar eso, luego ir al escritorio Github, y luego voy a decir Commit inicial. Y entonces tal vez para la descripción, puedo decir configuración, CSS, Imágenes y h2m básico arriba. Bien. Comprometerse a main y luego publicar el repositorio. Bien, aquí es donde dice, mantén este código privado o no porque es donde lo estamos publicando en github.com Voy a mantener esto revisado por si acaso lo revises. Pero si es posible, desmarque esto. No quieres que este código sea privado, quieres que sea público porque queremos convertir este repositorio en una experiencia de páginas a este repositorio en una experiencia de páginas que cualquiera pueda acceder. Bien, pero voy a comprobar esto por si acaso lo haces y quieres saber qué hacer. Bien, publicar repositorio. Bien. Genial. ¿Y ahora qué? Ahora vamos a Google Chrome. Abrimos una nueva pestaña, escribimos gitab.com, y después aquí verás tu nombre de usuario recortando tu personaje de dibujos animados, tu personaje de película, para quien hayas decidido hacer un Así que vamos a darle un toque a eso. Vamos a la configuración. Y aquí, bajar a páginas. Y aquí. Ooh, actualice o haga público este repositorio para habilitar páginas Entonces si has comprobado, quiero mantener mi código privado, ahora tienes dos opciones. Puedes actualizar, lo que significa que tienes que pagar, o necesitas hacer público este repositorio. Hmm. Bien. Entonces, ¿cómo hacemos esto si no queremos pagar o vamos a general, a la cima aquí. Desplázate hacia abajo hasta la zona de peligro y luego cambia la visibilidad del repositorio. Cambiemos a público. Hay bastantes cosas que necesitas atravesar o aros que necesitas para saltar por aquí Entonces sí, quiero hacer eso. Bien. Entiendo. Hacer público este repositorio. Bien. Una vez que hayas hecho eso, si hiciste que tu repositorio sea privado o si no lo hiciste, entonces ve a las páginas. Y luego aquí, despliéguese desde sucursal. Eso es exactamente lo que queremos. Y entonces la rama que vamos a desplegar es principal. Bien, ahorra. Ahora, esto llevará un poco de tiempo, tal vez un minuto. Así que de vez en cuando solo refrescar. Sé que quieres que las cosas sean ahora mismo instantáneas, pero solo ten paciencia. Bien, intentemos refrescar. Veamos qué pasa aquí. Bien, todavía se está construyendo actualmente desde la sucursal principal. Pechuga. Bien, vamos a refrescarnos. Mmm Bien, vamos a darle unos segundos más. Dejar fresco. Bien, ahí está. Tu sitio está vivo en HTTPS, Colon forward slash forwardslash, tu nombre de usuario punto github dot IO barra el nombre del repositorio de tu personaje Bien, entonces voy a tocar en Visitar sitio. Y ahí vamos. Todo debería estar funcionando. Tienes tu pequeño ícono de favoritos. El fondo también es naranja. Ahora en este punto, se puede empezar a ver si las cosas funcionan o no. Si tu color de fondo no es el que especificaste, entonces tienes un problema de CSS. Si no puede ver su icono favorito, posible que tenga un problema de ruta de archivo o un problema de sensibilidad de mayúsculas Ahora bien, podría haber un par de cosas que empiecen a pasar aquí. Así que vamos a entrar en el código VS. Vamos al estilo. Cambiemos este color de fondo a Marrón, o vamos por el verde o el amarillo verde. Es bastante diferente al chocolate. Guardar. Y ahora voy a volver al escritorio Github. Actualizar estilo en CSS. Genial. Comprometerse con main, push origin. Bien, volvamos a Chrome. Y luego dentro de Github, dentro de tu repositorio, vamos al código. Vamos a CSS. Vayamos al estilo CSS. Bien, entonces eso se ha actualizado. Es de color verde amarillo. Ahora bien, si vienes a tu página y te refrescas y no es verde amarillo, hmm esto podría ser algunas cosas. Lo primero es que podría tomar algún tiempo refrescarse realmente. No debería tomar tanto tiempo. No debería tomar más de un minuto. Entonces, lo que podría necesitar hacer es que deba hacer clic derecho y luego tocar inspeccionar. También puedes presionar Comando Alt I o Comando Opción I. Una vez que tengas tu elemento y spector arriba, puedes luego refrescar Eso puede ayudar porque lo que pudo haber pasado es que tu navegador puede haber guardado en caché tu archivo CSS, por lo que no cree que haya ningún cambio nuevo Así que básicamente es solo cargar una versión antigua de tu archivo CSS. Así que refresquemos esto una vez más. No. Entonces lo que vamos a hacer es entrar en el tipo de cabeza en tap on css dot style, y hacer clic derecho en abrir una nueva pestaña. Entonces eso todavía dice chocolate. Así que vamos a refrescarnos. Oh, verde, amarillo. Interesante. Entonces si volvemos aquí y nos refrescamos , hm, eso todavía no funciona. Entonces, lo que quizás tengamos que hacer es tocar dos veces aquí, poner un signo de interrogación, escribir V es igual a uno u otro número si ya has usado V es igual a uno y luego presionar Retorno. Ahí vamos. Ahora esto es exactamente lo que está haciendo. Es el almacenamiento en caché de su archivo CSS. Entonces, si realmente quieres que tu CSS se actualice, y no se está actualizando, cuando estás codificando en tu archivo HTML, posible que tengas que poner un signo de interrogación y V es igual a otro número después de eso V es igual. Y esto significará que siempre va a obtener la última versión del archivo. Así que vamos a guardar eso. Pasemos al estilo, y cambiemos esto también. Vamos por una vara verde verde o gris o dorada. Vamos por Goldenrod Guarde esto. Vamos a Get up Desktop y podemos escribir en testing caching o browser cache Y luego empujar al origen. Fresco. Volvamos a no esa. No esa, ésta. Así que vamos a refrescarnos aquí. Entonces el CSS dice Goldenrod. Vamos a grabar Rolf. Vamos a refrescarnos aquí. Bien. Entonces esto todavía dice estilo punto CSS. Y supongo que lo que está pasando es que en realidad está guardando en caché el archivo de índice Estar por aquí, bueno, todavía dice estilo punto CSS. No hay V iguales. Entonces vamos a nuestro código aquí, vamos al índice punto HTML. Y dice que V es igual a dos, ¿verdad? Sí. Así que refrescar aquí de nuevo. Si esto sigue sucediendo, Bien, está actualizado. Pero si esto seguía sucediendo, lo que podríamos hacer es escribir el índice de punto HTML y ir, interrogación V es igual a dos. Y entonces debería traer consigo su última página HTML de punto índice. Bien, así que eso fue un montón de cosas extra sobre el almacenamiento en caché, y a veces es realmente frustrante cuando solo quieres probar si algo funciona en línea, y no lo es, y debería serlo Probablemente por eso. Él. Ahora que has escrito la estructura básica de tu sitio web, podemos comenzar a codificar secciones del sitio web. Para cada sección, escribiré primero el HTML y luego el CSS y luego iré y vendré entre el HTML y el CSS hasta que esté justo antes de pasar a la siguiente sección. Y por supuesto, me referiré a mi estructura de caja a medida que avanzo. En las próximas lecciones, escribiremos el código para el encabezado, la sección principal y el pie de página de nuestro sitio web. A medida que avanzamos, actualizaremos también el código que afecta a todas las partes del sitio web. Así que pasemos a la siguiente lección, donde escribiremos el código para nuestro elemento header. 22. 21 El encabezado de los sitios web: Bien, escribamos el HTML y CSS para el encabezado de nuestro sitio web. Es un encabezado bastante simple, y ya tenemos nuestras etiquetas de encabezado en su lugar. Hay algunos bots engañosos, claro, pero nada que no podamos manejar, sobre todo con Internet a nuestro alcance. Bien, hagamos el código HTML y CSS para nuestro elemento header y los elementos dentro. Entonces dentro del código de Visual Studio, bajemos al encabezado aquí y voy a escribir IMG para imagen, darle una fuente de punto slash Así que mira dentro de esta carpeta y ve por la carpeta de imágenes, y luego iremos por Rolf icon dot JPEG Pero probablemente necesitamos algo más. No quiero que el icono sea el mismo que esta foto de perfil. Y luego el lt, lo es es que si alguien tiene discapacidad visual, al navegador le gusta proporcionar una descripción para la imagen solo porque si no la pueden ver, entonces pueden entender algo leyéndola o escuchándola. Bien, entonces podemos decir, Ralph o raqueta la foto de perfil de Ralph. Cambiemos eso a un tipo normal de apóstrofe. Raqueta Rolf'spArchivo de imagen. Pigura. Ahí vamos. Si quieres poner aquí una doble cotización, se va a quejar. Entonces, hay formas especiales de hacer citas dobles cuando intentas ponerlas dentro de un atributo Si hacemos un Google rápido para eso, busquemos comillas dobles en HTML, cómo codificar comillas dobles vía HTML. Bien, código amigable, código numérico código hexadecimal. Así que intenta citar así para copiar eso. Ponlo ahí. Bien, la foto de perfil de Rick Ralph. Bien. Entonces vayamos a Google Chrome. Actualicemos esta página. Verás que si inspeccionamos esto viene con una comilla. Bastante genial. Todo bien. Y si tuvieras cotizaciones simples aquí, ¿cómo harías una sola cotización? Buena pregunta. Entonces hagamos A, comillas simples en H TO. Ahí vamos. Vamos a probar esa. Así que copia eso y ponlo ahí. Entonces manda S. Bien, Graba Rolfes foto de perfil Fresco. Bien, volvamos al código de Visual Studio. Y aquí quiero poner uno H y decir destrozarlo. Ralph. Bien, vamos a guardar eso. Vamos a nuestro navegador y actualicemos. Fantástico. Ahora, quiero que esto esté en el medio, por favor. Entonces vayamos a VSC. Vayamos al estilo punto CSS. Y luego vamos a ir por encabezado. Entonces diremos texto Aline centro Sí, guarda eso luego refrescar Perfecto. Ahora, quiero darle a esto un color de fondo. Entonces volvamos al código VS. Color de fondo. Quiero algún tipo de azul, pero no sólo un azul normal, así que voy a ir por RGB. Voy a presionar Enter rojo. Es un valor 0-255. Pero ahora mismo, solo voy a ir por cero tipo cero, tipo cero, y luego voy a tocar esto y luego el código VS sacará esto a colación. Después seleccionaré un bonito azul. Eso se ve bien. Bien. Comando S. Pasemos al código no VS, sino a Chrome. Bien. Eso se ve bien. Pero hay esta rara frontera a su alrededor. Y entonces lo que esto es es que está en el HTML o en el cuerpo. Entonces lo que podemos hacer es en código VS, pongamos esto como un cuerpo de coma HTML Estableceremos el margen, que establece el margen superior, derecho, inferior e izquierdo en cero. Luego también estableceremos el relleno cero para HTML y body. Entonces Comando S, volvamos a Chrome. Ahí vamos. Se ha ido. Entonces algunos navegadores lo tienen en el HTML, algunos navegadores lo tienen en buddy, pero normalmente hay algún tipo de margen o padding en HTML o buddy, y siempre lo elimino. Bien, ahora quiero hacer circular a este tipo y tal vez poner un poco de espaciado en la parte superior e inferior. Así que volvamos al código VS. Encabezado, vamos por un poco de relleno. Y en lugar de ir acolchado superior, acolchado a la izquierda, relleno inferior, patrón a la derecha, cosas así. Yo sólo voy a ir por el acolchado. Y aquí voy a ir por 20 pixeles, y eso hace el relleno para todo. Bien, eso se ve bien, y luego quiero que la imagen sea redonda. Pero esta es también la misma imagen que estamos usando para nuestro pequeño icono en la parte superior. Entonces echemos un vistazo a Record Ralph Images. Quiero cuadrar uno, pero también quiero mostrarte qué hacer si no encuentras uno cuadrado. Entonces este de aquí es bastante genial. Definitivamente no es cuadrado. Entonces lo que voy a hacer es hacer clic derecho en Guardar imagen como. Es una imagen WebP, dos, 241. No es el mayor fan de las imágenes WebP. Quiero decir, sé que son un poco más rápidos. El tamaño del archivo es menor, están comprimidos. Todo es increíble, pero no tan fácil de editar. Entonces lo que haría normalmente es simplemente abrir y Photoshop, redimensionarlo, recortarlo, hacerlo como quiero, y luego volver a guardarlo Pero si no tienes Photoshop, ¿cómo haces esto? Así que vamos a buscar un redimensionador de imágenes. Cambiar el tamaño de varias imágenes a la vez. Redimensionador de imagen, redimensionador de imagen simple. No sé cuál es el mejor, pero quizá probemos este sencillo redimensionador de imágenes Bien, acepta las cookies, selecciona las imágenes. O tal vez en realidad podamos buscar imagen resizor y Cropper Pick cambiar el tamaño. Probemos esto. Bien, vamos por una web P. Bien, mira, no le gustan las imágenes WebP Volvamos aquí y busquemos web P. Imagen simple resizero, seleccione imagen, web P. Bien, esto es genial Bueno, parece que va a ser genial. Vamos por algo como esto. 500 por 500. Bien, tal vez un poco más grande. Bien, cuidemos 600 por 600. Bien. Eso es genial. Whoop. Bien, Recortar imagen. Bien, y descarga. Gracias, ad. Bien. Entonces esa fue una manera rápida y sucia de hacerlo. Ahora puedo meter esto en Ralph Image. Y podemos llamarlo Ralph PFP foto de perfil. Entonces voy a copiar todo eso. Y luego vamos al código VS, y vamos a meterlo en. Comando S. Bien, volvamos a Chrome. Vamos a cerrar eso. Puede cerrar eso. Refrescar. Bien, entonces ahora es un poco grande. Pero ahora echemos un vistazo a cómo podemos cambiar esto. Entonces voy a ir por un ancho de, digamos, 400 pixeles. Sí, a lo mejor voy a presionar Shift y hacia abajo. A lo mejor 300 es bastante genial. Todavía me gustaría agregar un borde. Entonces vamos por una altura de 300 pixeles dos. Y luego voy a decir frontera. Y border es un atajo para el ancho del borde, estilo del borde y el color del borde. Entonces aquí voy a ir por vamos por 20 pixeles, sólidos, que es el estilo, y luego el color, voy a ir por FF cero, que es como un amarillo. Pero podemos cambiar eso otra vez en el código VS. Y luego voy a ir por un radio fronterizo del 50%. Bien, entonces eso se ve bastante bien. Quiero cambiar el color. Entonces voy a copiar todo eso, ir al código VS, y luego encabezado, soy G. Así que esto es decir todas las imágenes dentro de todos los elementos de encabezado, o estas son las propiedades que deberías tener. Bien, esto, vamos por una naranja o algo así. Bueno, se ve bastante bien. Comando S. Volvamos a chrome y refresquemos. Bien, eso se ve muy bien. Ahora, apesta E Rolf. Quiero cambiar la fuente. Hay un par de formas de hacer esto, pero lo más divertido es ir a Google Funt Fuentes gratis, fuentes impresionantes gratis. Así que Google Fonts. Aquí vamos. Bien, quiero una fuente de píxeles. Hay un montón de maneras de hacer esto. Se puede filtrar, sintiendo apariencia. Oh, tantos. Entonces lo que quiero hacer es solo buscar Pixel. Bien. ¿Algo que se destaque? Vaya, eso es una locura. Algo que es bastante atrevido. A lo mejor ese. Escaneos Pixel Phi. A lo mejor esta, Josie 15, Josie 20. Vamos por Josie 20. Bien. Entonces dices obtener fuente. Esto puede cambiar o la interfaz de usuario puede cambiar de vez cuando y luego obtener código incrustado. Bien, hay un par de formas de hacer esto. Pero lo que me gusta hacer es usar la declaración import. Y así sólo voy a copiar eso e ir al código de Visual Studio. En la parte superior de mi archivo de estilo, voy a pegar eso, pero no quiero las etiquetas de estilo. Yo sólo quiero esta declaración de importación. Bien, genial. Entonces por aquí, voy a copiar este código de copia, aunque no necesito el Jozy 20 regular real Entonces lo que voy a hacer es pegar esto y simplemente cortar esto, quitar eso. Y luego encabezado H uno. Básicamente, estoy seleccionando todos los H dentro de todos los encabezados. Solo tenemos un encabezado, y solo tenemos H uno o uno H uno en este momento. Voy a pegar eso. Bien, voy a ahorrar. Volvamos a Chrome aquí. Refrescar. Bien, ec es Ralph Ahí vamos. Inspeccionemos esto. Cambiemos el tamaño de la fuente. Vamos por algo grande, por 50 pixeles. Todavía un poco pequeño. Voy a subir, cambiar hacia arriba. 70 píxeles se ve bastante bien. Pero quiero que el espacio entre aquí baje un poco. Bien, muchas gracias. Tal vez puedas leer esto y ser como, Sí, eso es útil, pero estoy tratando de hacer cosas, así que simplemente no muestres. Vete. Bien, divertido tamaño, 70 pixeles. El margen. Nuevamente, en lugar de ir por margen superior y margen derecho, inferior e izquierdo, solo voy a usar el atajo. Entonces margen. Voy a ir por top de diez pixeles. Así que eso lo reduce un poco a la izquierda y a la derecha. Va a ser cero, y luego en la parte inferior, 20 pixeles. Entonces aquí no necesariamente tengo que poner el valor de la izquierda cero, pero puedo si quiero. Y entonces tal vez podamos hacerlo del mismo color que el borde. Entonces vamos a copiar eso. Tráelo aquí, pega eso y luego ve por el color. No es color de texto, no color de fondo, es color. Y luego podemos copiar y pegar este valor. Guardemos eso y refresquemos, veamos cómo se ve. Sí. Es un poco difícil de leer. Entonces cambiemos esto a blanco. Sí, el blanco se ve mucho mejor. Para que veas que estamos como, diseñando mientras vamos mientras estamos codificando. Esto me gusta mucho. Bien, vamos por el blanco. Bien. Entonces eso se ve bastante bien. Tenemos nuestro encabezado ordenado. Aquí puedes cambiar un montón de cosas. Podrías convertir el fondo este fondo azul en una imagen o una imagen en azulejos. Puedes investigar eso si quieres. Y vamos al escritorio Github. Y podemos decir entonces el encabezado. Bien, comprométete con Maine. Origen de empuje. 23. 22 Búsqueda lateral de encabezado: Lección, vamos a refactorizar parte de nuestro código de encabezado para que la foto de perfil funcione usando un elemento DIV en lugar de un elemento de imagen Los beneficios de este enfoque es que puedes administrar imágenes en CSS en lugar de en HTML, y puedes manipular imágenes de fondo poderosamente con CSS También te mostraré cómo crear una nueva sucursal con Github y luego cómo fusionar esa sucursal de nuevo en tu sucursal principal para que puedas trabajar en algo nuevo sin afectar tu sitio web actual. Esta lección es una búsqueda secundaria y es un poco más compleja. Entonces, si tienes ganas de saltarlo, también está bien. Solo habrá diferencias menores en el futuro. Y si tienen ganas de volver a ello, una vez que terminen toda la clase, ustedes dos. Ahora bien, en mi planeación, sí dije que esto podría ser un div o una imagen. Ahora mismo, lo tenemos como imagen. Entonces quiero mostrarte cómo convertir esto en un div. Pero lo que vamos a hacer es porque es un poco más complejo es en realidad crear una nueva rama con la que trabajar. Y vamos a crear una nueva sucursal porque a veces vamos a cambiar el sitio, y podría romperse. Y si queremos comprometer nuestro código, entonces vamos a comprometernos, ya sabes, código que no funcione a nuestro proyecto o al repositorio central en github.com Entonces vamos al escritorio GitHub, y vamos a ir sucursal, nueva sucursal. Y vamos a llamar a este div PFP, crear rama. Bien. No tenemos que publicar la sucursal ahora mismo porque en realidad no hemos hecho nada, pero se puede cambiar entre la rama actual de aquí, así que es principal y Dv PFP Y te voy a mostrar lo que esto hace en un momento. Así que vamos al código de Visual Studio. Vayamos al índice. Y ahora en vez de esta imagen, lo que vamos a hacer es div y vamos a darle una clase de PFP Y dentro de ella, no vamos a poner nada. Bien. Entonces, vamos a guardar eso. Vayamos a Chrome y refresquemos. No más imagen. Bien. Pero dentro del escritorio Github, si cambiamos la sucursal a principal, dice, Tienes cambios en esta rama. ¿Qué te gustaría hacer con ellos? Deja mis cambios en DIV PFP. Tus trabajos en curso se guardarán en esta sucursal para que vuelvas más tarde Entonces, lo que deberíamos haber hecho es que deberíamos haber cometido esos. Entonces vayamos al consejo, y solo vamos a decir que cambió PFP de imagen a bucear en HTL Entonces es cometer eso y luego cambiar la rama. Bien. Ahora si actualizamos, la imagen está de vuelta y dentro de nuestro código, verás que ahora está de vuelta a la imagen. Interesante. De vuelta en el escritorio de Github, cambiemos esto a Dv PFP y verás que el código vuelve a cambiar. Bastante genial. Ahora dentro del estilo punto CSS, tenemos una clase de PFP con la que podemos trabajar En lugar de una imagen, vamos por PFP de punto y con borde de altura, eso es todo un gran radio de borde de 50 píxeles Ahora solo necesitamos una imagen de fondo, que vamos por URL, y aquí ponemos comillas simples o comillas dobles. Y ahora vamos desde el archivo CSS de estilo. Así que estamos dentro de la carpeta CSS. Así que dot slash dot dot slash, lo que nos lleva a la carpeta Ralf, y luego IMG, y luego vamos a ir por Rolf PFP dot web P. Eso se ve bien, así que tenemos Ahora lo que tengo que hacer es decir fondo Repetir no se repite, y la posición de fondo es centro y centro, eso es un valor XY. También podrías usar píxeles, y luego tamaño de fondo, podemos ir por portada, y esto cubre toda el área. Bien, Comando S. Bien, vamos a Google Chrome. Refrescar. Bien, eso es genial, pero ahora está a la izquierda. Textaine center realmente no le aplica porque no es texto Entonces lo que podemos hacer es cambiar su margen. Margen a cero y auto. Esto significa que la parte superior e inferior son cero y la izquierda y la derecha son Auto. Comando S y esto debería centrarlo. Ahí vamos. Ahora bien, por qué esto me gusta mucho mejor es que significa que podemos cambiar nuestra imagen en el CSS y no tenemos que cambiar a HTO solo para cambiar la imagen y ver esto Voy a ir a mi buscador. Recuerda que usamos este punto 2241 nosotros P para hacer el recorte Bueno, pongamos eso en las imágenes de Rolf. Y sólo lo llamaremos Rolf con pera de vainilla. No sé cómo deletrear pera de vainilla. Bien, ahí vamos. Gracias. Bien, voy a copiar todo eso. Y ahora, en lugar de Rolf PFP, voy a hacer Rolf con Vanlop. Bien. Y luego volvamos a ir a Chrome, refrescar. Y ahora ja tenemos un cuadrado circular o un div circular cuadrado que está usando una imagen no cuadrada como imagen de fondo. Hmm. Bastante genial, ¿verdad? Pero ahora todavía queda esa pequeña vanlopi ¿Qué vamos a hacer con ella? No tiene que hacer nada. Pero, ¿y si cambiamos el tamaño del fondo al 100%? Vamos a subir un poco. Bien, entonces 210%. Vamos a copiar eso y ponerlo aquí. Así que los tamaños de fondo cubren, 200% o 210%. Y luego la posición de fondo, cambiemos eso. Volvamos al cromo. Bien. Oh, hombre, voy a reescribir. Posición de fondo. Entonces la posición, vamos por tal vez 20 pixeles. Vamos por un valor negativo. Bien, -170, y luego cero para tu valor Y, o tal vez ahí vamos Menos 170 -40 píxeles. Bien. Bien. Bien, bien, bien. Entonces se ve bastante bien. Y si volvemos al escritorio de Github, podemos decir ahora usando image o PFP Images en CSS Fantástico. Y entonces si vamos a la rama principal y repaso, es ligeramente diferente, ¿verdad? Eso está bien. Oh, éste. Bien, entonces voy a ir por esta. Pero ahora, ¿cómo conseguimos que nuestra nueva sucursal vuelva a nuestra sucursal principal? Entonces echa un vistazo a esto. Queremos publicar primero la sucursal, así que esto la empuja a Gitub en línea, y luego queremos crear una pull request Entonces vamos a previsualizar el pull request. Y no debería haber demasiadas cosas que están pasando. Básicamente, te está diciendo lo que has quitado y lo que has agregado. Y luego dices, crea la solicitud de extracción. Esto abre github.com. Bien. Div PFP Entonces tal vez decimos hizo el PFP Div en lugar de un elemento IMG Podría agregar una descripción más descriptiva y luego crear la solicitud de extracción. Bien, comprobando la capacidad de fusionarse automáticamente. Esto simplemente debería funcionar increíblemente bien. Si has hecho algunas cosas complejas y luego cambiaste cosas en tu sucursal principal, mientras has estado trabajando en la nueva sucursal, las cosas se complican. Pero entonces vamos a decir merge, pull request, confirm, merge. Pull Request se fusionó y cerró correctamente. Entonces voy a borrar la sucursal. Ya no necesitamos esa sucursal. Bien. Ahora, de vuelta en el escritorio de Github, voy a decir fetch origin Entonces aquí, entonces puedo volver a la rama principal, y todavía tenemos esta. Lo que podemos hacer es ir sucursal y luego eliminar. Sí, eliminar. Ahora tenemos principal y refrescar. Si inspeccionamos esto, debería ser un div con una clase de PFP Bien, así que eso fue bastante solo para nuestro encabezado. Si quisieras que fuera simple, podrías quedarte con la imagen como tu foto de perfil. Pero hacer uso de imágenes de fondo es súper, súper potente. Entonces, si quisieras probar esto y crear una nueva rama y cambiar este fondo de azul a una imagen o tiling imágenes, por ejemplo, probarlo, o simplemente podrías, ya sabes, hacerlo todo en la rama principal si quisieras 24. 23 Diseño con CSS: Bien, un rápido descanso de escribir código. Quiero hablar de diseñar un sitio web mientras lo codifica. La razón por la que me gusta codificar mientras diseño, especialmente después de la planeación que hemos hecho, es porque podemos ver cómo se ve y se siente. A menudo, un sitio web se diseña en una aplicación de diseño, pero no se traduce bien en el navegador Poder cambiar el diseño en HTML y CSS a menudo lo hace más utilizable porque en realidad estás viendo y usando el sitio web en el navegador y no en una aplicación de diseño. Y poder diseñar usando HTML y CSS a menudo acelera el tiempo combinado de diseño y desarrollo. Sin embargo, si hay clientes y firmados diseños y distinciones entre diseñadores y codificadores y eres parte de un equipo, esto hace que cambiar las cosas mientras se codifica sea un poco más complicado Pero ese no es el caso aquí. Llegamos a ser diseñadores y codificadores. Ahora, lo sorprendente de CSS es que puedes hacer el mismo montón de HTML se vea muy diferente. Así que intenta hacer que el sitio web de tu personaje coincida con su personalidad. Ahora, volvamos a la codificación. 25. 24 Sección principal de sitios web: Ahora para la sección principal, que es bastante estándar, por lo que no debería tardar demasiado, considerando que la mayor parte de la estructura y parte del CSS ya está en su lugar. Empecemos con nuestra sección principal de nuestro sitio web. Entonces en el código VS, hemos hecho el encabezado. Y si no hiciste la cresta lateral, entonces podrías estar como, ¿Qué es esto de PFP de clase div Bueno, en lugar de una imagen, estamos usando un div con una clase de PFP y luego estilizando ese div con CSS para obtener el mismo efecto que usar una imagen, y puedes verla por ahí Bien, ahora vamos a hacer un poco de HT reflexionando dentro de nuestro elemento principal Ahí vamos. Voy a referirme a mi planeación aquí. Entonces voy a ir por una H dos, y esto va a ser sobre Ralph y P, digamos, Ralph es un videojuego, malo con ganas de salvar al Arcade Algo así, conoce a algunos personajes geniales en el camino. Y se convierte en un buen tipo. Bien, eso se ve bien. Entonces tenemos H dos, el párrafo About. Ahora pongamos una imagen aquí y vayamos por la misma carpeta en la que estamos dentro de las imágenes. Y vamos a echar un vistazo por dentro. Google para una imagen de Ralph rect Ralph Images. Entonces es una imagen sobre. Sí, eso me gusta bastante. Genial, genial. Entonces vamos a copiar la dirección de la imagen. Vamos a abrir una nueva pestaña, vamos a pegarla ahí, y luego Comando S, vamos a guardar eso para descargar. Vamos a llevarlo a la carpeta de imágenes. Lo llamaré sobre el punto JPEG o Ralph sobre el punto JPG. Bien, ahora de vuelta en código VS. Vamos a poner eso ahí. Ahí. Y el out, podemos decir de Ralph A lo mejor también decimos que a él también le gustan las chicas cool glitchy. También le gusta el amigo. ¿Es como amigo de pelota? Sí. Enfrentarse, chicas geniales, fallas. Bien. Entonces tenemos la imagen. Ahora quiero un poco de pie de foto. Así que vamos por una etiqueta P y una clase de pie de foto. Si quisieras escribir eso bastante rápido con esta cosa llamada, ir p dot caption, que tipo de se parece a CSS, y luego presionar Return. Ahí vamos. Y la leyenda es Ralph y Vanlop Vamos a escribir Vanilla pera fuente Schwez. Bien. Así se escribe VanLapefon Schwez Voy a copiar eso. Volver al código VS. Bien. Siguiente es H dos otra vez. Características de los personajes de Ralph. Eso se ve bien. Nuevamente, tal vez no así. Algunos navegadores más antiguos pueden ser como, qué es esta cosa y puede que te pongas un poco cuadrado con un poco de cruz a través de él o algún personaje extraño. Así que solo podríamos usar una sola cita, o de nuevo, podríamos investigar qué es esa cosa. Así que solo apóstrofe HTML Bien, probemos eso y una pos Bien, adelante. Ahí vamos. Características de Ralph. Voy a salvar eso. Volvamos a Chrome y compruébalo. Bien, sobre Ralph. Ralph es un videojuego , bla, bla, bla, la Bla, bla, bla, bla, la lixiviación, niñas. Bien, las características de Ralph Quiero que sea como una especie de curvilínea. Éste. Sí. Bien. Vamos a pegar eso ahí. Guarde eso. Sí. Eso se ve mucho mejor. Bien. Hay algunas cosas que estoy como, Bien, definitivamente necesito cambiar estas cosas, pero vamos a llegar ahí. Primero terminemos el HTML. Bien. Aquí, las características de Ralph, dije que quería usar una lista ordenada Entonces un OL es una lista ordenada, y dentro de una OL y una UL, que es una lista desordenada, todavía tenemos elementos de lista Entonces elemento de lista, es fuerte. Bien, pongamos eso ahí. Es fuerte. Y es amable. Él es grande. Le gustan las chicas glitchy y no toma tonterías. Bien. Entonces esa es la lista ordenada. Vamos a guardar eso. Y ya verás eso si me refresco. Hay uno, dos, tres, cuatro. Eso quiere decir que es una lista ordenada. Fresco. Bien. Lo siguiente es un H dos, y eso va a ser Ralph amigos Y luego aquí, vamos a ir por una lista desordenada. Y dentro de la lista desordenada, vamos a ir por un elemento de lista Y aquí vamos a ir por vainilla P fonchoez Bien, ahí vamos Pero ahora queremos enlazar a alguna otra página aquí. Entonces, busquemos esto rápidamente en Google. Vamos por VanLaPefon Schwez. Y puedes elegir cualquier tipo de página que dé un poco más de información sobre un personaje. Aceptemos todo lo que hay. Bien, esto es bueno. Entonces voy a copiar esta URL. Tantos anuncios aquí. Guau. VanLapfon Schwez dentro de una etiqueta A o un elemento ancla Bien, Vanilla Pe Fon Schwez y yo voy a poner a VanLapfon Schwez dentro de una etiqueta A o un elemento ancla. Entonces vamos por A. Y luego el HRF Ahí vamos, pegamos eso y colocamos la etiqueta A que se arrastra por ahí. Bien, ¿quiénes más son los amigos de Ralph? Si eres como, no sé quiénes son esos personajes amigos. Bueno, debería ser tu personaje favorito, pero si no lo haces puedes ser como, los amigos de Reque Ralph. Quiénes son los amigos de Rick l, sargento Shigas Tamura Jane Culhorn Bien. Y vamos a crear una nueva pestaña ahí, y ahí vamos. Bien, vamos a copiar eso. Felix también sería bueno. Así que sólo voy a pegar eso ahí e ir por LI A, y luego vamos a cortar eso, pegarlo ahí, y vamos a copiar al sargento Culhorn Bien Guardemos eso y verifiquemos eso. Todo esto está funcionando. Bien, refréscate. Bien, entonces tenemos a Venlope Von Schwiz y al sargento Cohor. Pero cuando toque uno de estos, quiero que se abra en una nueva pestaña. Bien. Entonces, ¿recuerdas cómo hacer eso? Es con atributo target, y lo configuramos en blanco. Fantástico. Objetivo en blanco. Y vamos por una Li A más, y vamos a Felix aquí. Entonces, escribamos Félix y guardemos. Hmm. Rocker Rolf, aquí está el deber Aquí vamos. Vamos. Arréglelo Félix. Entonces copiemos esto. Pasemos al código de Visual Studio. Fijar un Félix y pegar. Bien. Comando S. Eliminemos el espacio extra ahí y el refresco cromado Entonces tenemos tres amigos. Genial. Y si, eso es prácticamente todo el HTML que necesitamos. Lo que quiero hacer es que todo esto se vea muy bien. Entonces lo primero que quiero hacer es poner esto en el medio y tal vez hacer que esta imagen no sea tan grande. Así que haz que la imagen sea más pequeña básicamente. Dentro de CSS, tenemos un montón de cosas de encabezado aquí. Pongamos algunos estilos principales aquí. Voy a decir ancho, vamos por 800 píxeles, y luego un margen. Voy a ir por cero en la parte superior e inferior y auto en la izquierda y derecha. Guardemos esa actualización. Bien. Eso se ve bien. Excepto que esa imagen es enorme. Entonces digamos imagen principal. Entonces todas las imágenes en la etiqueta principal o elemento principal. Digamos que el ancho o el ancho máximo es del 100%. Entonces, si es más pequeño, está bien. Si es más grande, entonces se ajustará a su elemento padre. Entonces, vamos a guardar esa actualización. Bien. Así que eso se ve muy bien. No es el mayor fan de este tipo de fuentes. Se trata de un seraponte, no muy raqueta Rolf, y los encabezamientos también son Así que vamos a entrar tal vez no necesitamos decir encabezado H uno. Tal vez solo podamos decir que todos los H pueden tener esta fuente y estilo de fuente. Decimos todos H dos. Se puede hacer prácticamente lo mismo excepto el color. Yo sólo me voy a quedar con ese margen negro. Lo mantendremos igual. 70 pixeles. Vamos por 50 pixeles. Todo bien. Entonces, vamos a guardar eso. Bien. Eso se ve bien. A lo mejor un poco más marginando en la parte superior. Entonces vamos hacia adelante 20 píxeles ahí, y podemos hacerlo así, así que 20 píxeles en la parte superior e inferior y cero píxeles a la izquierda y a la derecha. Refrescar. Sí, se ve genial. Ahora bien, el resto de esto, ¿qué tipo de fuente queremos? Bueno, vamos a por, ya sabes, algunas habituales, quizá. Entonces en el cuerpo, vamos a establecer esto o el HTML y el cuerpo, pero el cuerpo debería estar bien. Pero sí, probablemente vamos a sacar vara dorada en un poquito. A lo mejor ya podemos sacarlo y vamos a ir por la familia de fuentes. Hay un montón de cosas para elegir. Y la razón por la que hay tantas fuentes para elegir es que si especificas una fuente y alguien no tiene esa fuente, necesita saber qué hacer entonces. Ahora, con nuestra fuente de Google, en realidad estamos diciendo, cargue esta fuente y use esta fuente. Todos los navegadores no pueden hacer eso. Nuevos navegadores modernos, fantásticos. Entonces podríamos hacer lo mismo e importar una fuente de Google Fonts. Pero por ahora, escojamos algo por defecto. Entonces Kuriau si conoces tus fuentes, podrías ser capaz de entender tu camino alrededor Times New Roman suele ser una fuente sera, una de las pequeñas cosas en la parte inferior. Algo que no tiene cosas en la parte inferior se llama serfont San y algo así como un serf aéreo Helvetica SAS es lo que vamos a ir Entonces aquí, vas a decir, Oye, quiero que sea aéreo. Si no tienes aéreo, vamos por Helvética y si no tienes Helvetica, solo usa Bien, entonces Comando S. Vamos a Google Chrome y refresquemos. Bien, el color de fondo está por defecto ahora, y esto se ve mucho mejor, pero quiero cambiar el tamaño de fuente. Vamos tamaño de fuente para decir 20 pixeles, guardar Bien, eso se ve bien. ¿Qué pasa con el espacio entre ellos? Entonces vamos por la altura de línea. A lo mejor vamos por 24 pixeles y guardemos ahí. Camino de regreso a Chrome. A lo mejor un poco más. Se puede ver que algunas de las otras cosas han cambiado ahora. Interesante. Lo está cambiando en el cuerpo, que significa que lo está cambiando por todos sus elementos hijos, así que tal vez no hagamos eso. Cortemos esto entonces vamos a aplicarlo para párrafo y etiquetas UL y OL o elementos. Tamaño de fuente 20 altura de línea a 24 píxeles. Vamos a comprobar esto. Bien. Eso se ve bastante bien. Quizá un poco más. Entonces inspección. Vamos a subirlo un poco 30 pixeles. Fresco. Feliz con 30 pixeles. Bien, ahorra ahí. Refrescar. Bien. Eso se ve bastante bien. A mí me gusta. A mí me gusta. Rolfe y Vanlope Von Schwez Quiero que eso se vea como una Entonces por aquí, tenemos esta P con una clase de pie de foto. Entonces P dot caption. Podemos establecer el tamaño de fuente en algo así como 16 píxeles. Podemos establecer el color a un gris. A lo mejor queremos un tipo específico de gris. Mm. Algo así. Todo bien. Y entonces tal vez quiera que esté cursiva o enfatizada para que podamos ir al estilo de fuente, ya sea cursiva u Me gusta oblicuo. Así que guarda esa actualización. Bien, quiero estar un poco más cerca. Entonces, inspeccionemos. Vamos por margen superior. Cambiemos eso a cero. Sí. Eso se ve bien. Y entonces supongo que también podemos cambiar el fondo del margen. Veamos cómo se ve el cero por todas partes. Eso es genial. Bien. Entonces margen cero. Se podría decir cero píxeles, pero cero es genial. Bien, entonces las cosas se ven bastante bien aquí. Las características de Ralph, es fuerte. Es amable, es grande. Le gustan las chicas glitchy y no toma tonterías. Amigos de Ralph. Bien, entonces esto se ve bastante bien. A lo mejor quiero que este uno, dos, tres, cuatro esté ligeramente a la izquierda hacer una especie de alineación con Ralph y los amigos de Ralph Entonces echemos un vistazo a esto. El OL, ahí tiene esto, como, verde poco ahí. ¿Qué es ese bit verde? Entonces voy a pasar a computado. Si no ves computado, toca estas pequeñas flechas, y entonces debería estar por aquí. Así que en realidad tiene algo de relleno a la izquierda, 40 píxeles de relleno a la izquierda. Así que vamos a poner su relleno a la izquierda a cero. Hmm. Eso tampoco es realmente lo que quiero. Entonces lo que podríamos hacer entonces es decir, ¿qué es? Lista de posición dentro de la lista. Sí. Eso se ve bastante bien. Bien. Así relleno a la izquierda y lista de posición en el interior. Vamos por el relleno en total, también cero. Bien. Eso es genial. Voy a copiar eso. Y esto es para un OL. A lo mejor intentamos para OLs y es. Entonces estamos haciendo esto para P, UL y OL. Vamos por ULs y OL. Listas desordenadas y listas de pedidos y pasos aquí. Comando S y refrescar. Bien. Eso se ve bastante bien. Ahora bien, estos son enlaces o anclajes. Vamos a probar algunas cosas por aquí. Así que dentro de Ps, ULs y OL. Eso es lo que quiero abordar o los anclajes dentro de ellos. Entonces voy a copiar esta línea aquí y decir, todos los PA o tal vez solo usemos A's, ¿verdad? Podría haber un montón más fácil. Entonces todas las etiquetas de ancla A, cambiemos el color a un rojo. Y vamos por algo así. Eso es un poco más juguetón. ¿Bien? Eso se ve bien. Vamos S. Y Chrome, podemos refrescar. Bien. Ahora, ¿qué hay de genial con estos? Comprobemos dos veces que esto se abra en una nueva pestaña, lo hace. Lo que es genial con estos, tienes estas pseudo clases que puedes aplicar Entonces iremos por una Ha y diremos color o tal vez copiaremos y pegaremos esto y lo cambiaremos a un azul o algo así. Como un azul. Eso se ve bien. Y también se puede decir presionado creo que eso no se ve bien. Yo sólo voy a copiar eso. Vamos a Chrome, creamos una nueva pestaña, una pulsada. Un HTML prensado. Cómo darle estilo a un botón de clic, Hover. Oh, ahí vamos. Bien, visité Active. Ahí está. Activo, visitado. Bien. Así que volvamos al código de estudio. Vamos por activo. Fresco. Copia y pega el color. Bien, podemos cambiar esto a tal vez un morado. Es probable que no se vaya a quedar tan bonito, pero vamos a ver. Y entonces también se puede decir, A, visitado, lo que significa que en realidad ha estado aquí. Volveremos a pegar esto aquí. Y lo haremos gris. Quiero mostrarte cómo es esto. Entonces Comando S. Tiene un cromo, un repaso. Se han visitado todas estas cosas. Entonces tal vez si cambiamos la URL un poco, entonces verás algo diferente. Sólo voy a poner un signo de interrogación, V es igual a uno y Comando S. Ahora la URL debería ser diferente, así que vamos a refrescarnos, y lo es. Pero ahora una vez lo hemos tocado, y tiene la V es igual a uno, ahora es gris, lo cual es bastante genial Ya no mucha gente hace uso de esto. Así que voy a volver al código de Visual Studio y simplemente quitar eso porque me gusta bastante el rojo, o lo que podría hacer es guardarlo ahí y simplemente hacerlo igual que A y A visitado. Entonces, en vez de tener dos declaraciones o bloques de declaración separados , voy a combinarlo. Entonces A y A visitados, puedes ser del mismo color y luego flotar y activo son colores diferentes Entonces digamos que refrescar. Y a medida que flote, verás que estos cambian de color a azul Y si toco y mantengo presionado, es morado. Ahora también puedes cambiar todo tipo de cosas como el tamaño de fuente o la altura o el color de fondo o la opacidad o un montón de cosas Pero para los enlaces, como, a veces un poco irritante si las cosas cambian demasiado. Bien, por alguna razón, hay un pop up bloqueado, tal vez porque aguanto demasiado tiempo en él. Ahí vamos. Bien. Así que tenemos algunos enlaces agradables. Entonces hasta un Po, podría decirse, Ralph es un tipo malo de videojuegos de una película, tal vez podamos incluirlo, y luego podamos vincularlo a la película Entonces Ralph es un videojuego, tipo malo, de una película, y de una película vamos a poner en un elemento ancla darle un HRF, darle un blanco de Y luego vamos a buscar Rice Rolf O. ¿Hay un IMDB o Tomates Podridos ? Ahí vamos. O podríamos vincularlo a Wikipedia, pero vamos por IMDB Es solo una primera película, claro. Bien. Pongámoslo ahí. Bien. Vamos a guardar eso. Volvamos a Chrome. Vamos a cerrar eso. Probablemente podamos cerrar todas estas pestañas. De lo contrario, sólo hay mucho. Bien, gracias. Hacer Chrome más rápido. Solo cierra eso por ahora y repasa. Bien, para que veas que también es rojo, lo cual es genial. A partir de una película, abre ese enlace IMDB. Bien. Entonces ese es prácticamente nuestro elemento principal hecho o nuestra sección principal hecha. Quizás podamos emparejar este rojo con esta naranja. Entonces hagámoslo rápidamente. Dentro de nuestro estilo aquí. Vamos por este rojo. Voy a copiar eso y luego bajar a nuestro encabezado. El PFP tiene este color por aquí, así que voy a pegar por allá A lo mejor solo necesito ese color, en realidad. Deshacer. Ahí vamos. Y luego poner un colon al final, punto y coma al final. Bien. Refrescar el aire. Sí, luego coincide con el resto del sitio. Hay unos bonitos rojos en la imagen, todos los lazos juntos. Bien. Eso es. Ahora, vayamos al escritorio Github. Quiero decir creado la sección principal. Bien. Comprometerse con Maine y empujar origen. Y nuevamente, en un poco de tiempo, tal vez un minuto, su sitio GitubPage se actualizará Bien, el sitio web está progresando muy bien. Ahora, lo que queda es la foto. Así que terminaremos esto en la siguiente lección. 26. 25 El pie de página de sitios web: Muy bien. Terminemos nuestro sitio web. Nos acaba de quedar el pie de página. Así que tenemos un sitio web muy atractivo hasta ahora. Vamos a crear el pie de página. Así que dentro del código de Visual Studio dentro del índice punto HTML. Dentro del pie de página, voy a poner una etiqueta P. Puedes hacer un pie de página, como, tan complicado como quieras, pero este es un sitio tan sencillo. Entonces lo que vamos a decir es que este sitio web se hizo durante un tap tap kaboom Además, y queremos hacer un símbolo de copyright, 2025. Bueno, eso sería una locura. 2025 y hm Sí, hecho por Rich Armstrong Y luego copyright 2025. Así que vamos a echar un vistazo para un símbolo de copyright. Así coop derecha símbolo HTML. Ahí vamos. Vamos a copiar eso. Fresco. Realmente útil cuando Google simplemente, como, lo pone ahí para ti. Bien. Aquí vamos. Entonces, vamos a guardar eso. Vamos a Chrome y refrescar. Bien, toca tap kaboom y Rich Armstrong quiere hacer esos enlaces Entonces pongamos un ancla taka, tap tap kaboom. Ahí vamos. H RF es igual a HTTPS colon slash tap, tap kaboom.com. Incluso podría poner una WWW ahí. Fantástico. Y luego lo mismo hecho por Rich Armstrong. Y aquí puedes poner tu propio nombre. En realidad, puedes poner lo que quieras en tu pie de página. Rico Armstrong Href es igual a HTTPS colon SLAASwww punto IH armstrong.net. Bien. Y entonces también podemos darle un blanco de blanco. A veces los blancos en blanco son geniales. Otras veces, son realmente frustrantes porque entonces terminas teniendo como 47 pestañas abiertas Probablemente lo haga por defecto de todos modos. Pero si va a los mismos sitios, trato de, ya sabes, no tenerlo abierto como una nueva pestaña, ya sabes, regla general. Bien, blanco blanco. Bien. Entonces, vamos a guardar eso. Vamos a Chrome y refresquemos. Así que eso se ve bastante bien. Parece que el resto del sitio. Ahora quiero poner esto en el medio, igual que la sección principal, y luego también darle un color de fondo de color. Entonces hagámoslo en nuestro CSS. Y muchas veces podemos volver a usar CSS. Entonces Pie de página vamos por Ancho margen cero auto, algo así. Y vamos a darle un color de fondo. Va a ir por el azul ahora mismo, y cambiemos eso un poco. Hmm. Ahí estaba el azul del cabezazo que estuvo bastante bonito. Vamos a usar eso otra vez, así que copia eso. Pega eso y ahorra. Margen cero auto. Veamos cómo se ve eso. Bien, entonces no realmente lo que quiero. Es como, no, quiero que todo esto sea azul. Bien. Entonces, dentro del código de Visual Studio, hay algunas formas de hacerlo, pero creo que la más flexible es poner un div dentro de nuestro pie de página. Así que vamos por un div con una clase de contenido así. Y podemos pegar eso por ahí y luego simplemente escribirlo. Así que todo se ve limpio y ordenado, ¿de acuerdo? Y luego tenemos el contenido de punto Potter. Incluso podríamos hacer suyo el contenido. Podría hacerlo más tarde, pero tomaremos eso y lo pondremos en contenido. Margen cero y Auto, también lo pondremos en contenido. Color de fondo, lo mantendremos ahí. Y luego vamos a ahorrar y a ver qué pasa aquí. Eso se ve genial. Bien. Lo siguiente que quiero agregar tal vez algún relleno. Vamos a hacer clic derecho en el pie de página. Vamos a agregar un poco de relleno. Vamos por 40 pixeles, algo así. Sí. Eso se ve genial. Bien. Acolchado. Vamos 440 pixeles. Eso va a ser en la parte superior, la inferior, la izquierda y la derecha. Fantástico. Vamos a guardar eso. Y entonces lo único que me gustaría cambiar son estos porque a medida que pasas el cursor sobre ellos, van de este color azul, y este rojo también es bastante intenso Entonces tal vez podamos hacer un blanco, y a medida que se ciernen sobre ellos, se vuelven amarillos Bien. Entonces vamos por las etiquetas de anclaje dentro del pie de página, diremos color blanco. Y luego vamos a copiar eso y decir pie de página A, flotar. Lo cambiaremos a. Vayamos hasta aquí y copiemos y peguemos. Visitó hober Vamos a copiar eso. Pero entonces vamos a cambiarlo a, como, un amarillo. Tal vez para que solo mantenga un poco del mismo tipo de matiz o saturación como en el mismo lugar. Bien, entonces tenemos la hover. Vamos a guardar esa actualización. Bien, eso es interesante que haga una y no la otra. Entonces eso es porque está visitado, ¿verdad? Ya hemos visitado esa. Hm. Entonces vamos a copiar eso. Pasta de coma, así. Diré que visité. Sí, puedes ponerlos en dos líneas separadas si te lo facilita. También puedes darnos espacio ahí si hace que sea más fácil de leer. Bien, guarda esa actualización. Ahí vamos. Entonces el hover siendo amarillo es realmente agradable Y si entonces lo presionas, no se aplica nada porque ya tienes aplicado ese hover Entonces, ¿cuál era la pseudoclase activa, esa púrpura? Entonces, vamos a pegar eso. Bien. Refresco. Bien, eso no se ve muy bien, así que en realidad sólo voy a quitar eso. Puede ver cómo estos estilos de pie de página para anclajes están sobrescribiendo los estilos de anclaje anteriores Uno, porque viene más tarde en el expediente y dos porque es más específico. Bien, así que guarda eso. Volvamos a Chrome y refresquemos. Bien. Ahora quiero poner esto en una línea separada, y hay un par de formas en las que podemos hacerlo. Entonces podríamos hacer que cada uno de estos sea una etiqueta P o ponerlos en un elemento P, o simplemente podríamos agregar una etiqueta BR, que es un salto de línea. Entonces voy a hacer eso. Voy a ir por BR, así. Y guarda y luego vuelve a no Visual Studio, sino a Chrome. Bien. Eso es genial. Pero ahora quiero ponerlo en el medio. Vayamos al código VS y al estilo. Y podríamos hacerlo en el contenido o el pie de página o en la etiqueta P de pie de página. Entonces intentemos enviar un texto a una línea, centro, Comando S, Chrome. Bien. Eso se ve muy bien. Entonces, hecho por Rich Armstrong, verificamos dos veces que eso funcione Sí, fantástico. Con cinta Kaboom, comprueba que eso funcione. Fantástico. Bien. Entonces, todo eso se ve realmente genial. Creo que aquí podría haber un poco de espacio entre el pie de página y los elementos principales. Así que vayamos por pie de página o principal. Pero como estamos tratando con un pie de página, pongamos un margen superior de, digamos, 20 píxeles. ¿Eso haría algo, 40, 60? ¿80? 60 se ven bastante bien. Bien, un margen superior de 60. Así que sólo voy a copiar eso. Y pegarlo. Guarde eso.RFreshy. Bien, rect Ralph, sobre Ralph, las características de Ralph, los amigos de Ralph. Sí. Impresionante. Ahora lo único que tenemos que hacer es ir al escritorio Github y decir, agregó elemento Photo. Comprometerle eso a Maine. Origen de empuje. Bien, nuestro sitio web está hecho. Choca los cinco tú mismo, haz un poco de baile, puño bombea el aire. Buen trabajo. Verás que cada sección tenía sus retos, y que a veces lo que hicimos en una sección del sitio web afectaba a otras áreas del sitio web. Y ahora en la siguiente lección, te voy a mostrar los conceptos básicos para que nuestros sitios web se vean bien en el móvil, lo cual es genial porque usamos mucho nuestros dispositivos móviles. Ahí voy a ver. 27. 26 Hazlo apto para dispositivos móviles: Hemos hecho un gran trabajo diseñando y codificando un sitio web para nuestro personaje, pero no hemos pensado en cómo puede verse o funcionar en teléfonos o tabletas. Entonces eso es lo que vamos a hacer en esta lección. Hacer que un sitio web funcione para dispositivos móviles a menudo se llama hacer que sea receptivo o diseño receptivo. Y hay un montón de cosas que los diseñadores y desarrolladores hacen para que los sitios web se vean bien y funcionen bien en diferentes dispositivos y tamaños de pantalla. Aquí hay algunas opciones. Lo primero que podemos hacer es usar unidades y diseños flexibles. Por ejemplo, podríamos usar un ancho máximo y usar una unidad de medida relativa como valores porcentuales en lugar de valores de píxeles. Esto significa que a medida que una pantalla se hace más pequeña, nuestro contenido se ajustará, y a medida que se hace más grande, el ancho máximo mantiene el diseño bajo control. Lo segundo que podemos usar es la lógica CSS para cambiar los estilos de los elementos en función cosas como el ancho y el alto del navegador. Esto se llama media queries, y va algo así. Si el ancho es menor de 600 píxeles, haga que el tamaño de fuente sea 16 píxeles, haga las imágenes de Avatar con 100% y elimine las esquinas redondeadas. En tercer lugar, podemos cambiar qué imágenes se muestran en función del tamaño del navegador. Podemos hacer esto en HTML usando imagen con elementos fuente anidados que tienen medios o usando atributos de conjunto de fuentes y tamaños en nuestros elementos de imagen Otra forma de cambiar qué imágenes se muestran es usar imágenes de fondo en los elementos y luego usar media queries para cambiar esas imágenes, todo en CSS. No vamos a cubrir estas tres opciones durante este curso, pero es útil saber que existen. Por suerte, en nuestro caso, nuestro sitio web es bastante simple, por lo que nos enfocaremos en hacer que nuestro sitio web sea lo más flexible posible y usar media queries CSS para cambiar algunas declaraciones. Ahora bien, lo que te muestro en esta lección solo será rascar la superficie, pero quiero mostrarte lo básico Entonces, si bien nuestro sitio web se ve bastante bien en un escritorio o en la pantalla de una computadora, ¿ cómo sabemos cómo se ve y cómo se siente en el móvil o en diferentes tamaños de pantalla? Así que quiero que haga clic derecho, haga clic en su sitio web y vaya a inspeccionar o vaya a ver las herramientas de desarrollador y desarrollador. Así, si tu inspector de elementos está en la parte inferior, quiero que lo muevas a la derecha solo por esta parte, al menos. Así que toca estos tres puntos y luego toca este punto en el botón derecho, o podrías puntear a la izquierda. Eso me parece un poco raro. Entonces ahí vamos. Y así, puedes redimensionarlo a izquierda y derecha. Y esto es lo principal que me preocupa es el ancho de mi pantalla porque una página web puede ser infinitamente larga y eso debería estar bien Es el ancho que me preocupa. Así podemos cambiar el ancho con bastante facilidad. Y sí, podrías estar como, pero ¿cómo por qué debería preocuparme? Bueno, mira esto. Aquí está este botoncito. Lo que luego te da las dimensiones de tu teléfono o varios teléfonos diferentes, iPhone XR, quizás un iPad Pro, y puedes cambiar tu Zoom en Ns Entonces esto es 50%. Esto sería al 100%, que es un montón más grande. Así que solo puedes echar un vistazo muy bien a cómo se ve tu sitio web con diferentes teléfonos o dispositivos móviles. Tengo un iPhone SE, así que esto es algo de lo que siempre estoy al tanto porque tengo un factor de forma tan pequeño. Siempre he tenido un teléfono más pequeño, así que a menudo voy por un ancho de 320 como mínimo para el que diseñaré. Ahora bien, esto se ve raro, y el tuyo puede que no se vea así. A veces cuando refrescas, en realidad se acerca bastante como si estuviera aquí Entonces si nos refrescamos de nuevo, eso puede funcionar, puede que no. Si tú, ya sabes, nos das un poco más de espacio, también está este botón abatible, que lo convierte en horizontal o de nuevo en retrato. Bien, para que veas que aquí hay un montón de cosas que se ven muy raras. Una de ellas es que el texto sigue centrado aquí, pero ahí está esta barra azul y esa barra azul. Entonces así es en realidad lo amplia que es nuestra pantalla. Pero debido a que esta imagen se extiende hasta el final, es una especie de hacer que el sitio web sea tan grande. Entonces, centrémonos primero en algunas cosas. Lo que quiero hacer es volver al código de Visual Studio. Y es posible que me hayas visto poner esta línea de código antes en la clase, y esto se hizo con una abreviatura ET, y le dije, Tal vez lleguemos a ella más tarde en la clase. Entonces si eres como, pero ¿qué significa esto? Cualquier cosa, solo puedes copiar. Y si vas a Chrome y abres chat GPT o algo similar, vamos a chitchpt.com y pegas esto aquí Se puede decir, ¿qué significa esto? Algo así. Y te da un montón de información, lo cual es muy, muy útil. Ahora, lo que quiero hacer aquí es que quiero agregar algo que ver con el usuario. No quiero que el usuario pueda escalarlo. Entonces podría decir, no quiero que el usuario pueda escalar en un teléfono. ¿Qué necesito agregar? El usuario escalable es igual a no. Así que uno máximo escalable. Usuario escalable, equivale a no. Entonces copiemos eso. Volvamos al código de Visual Studio. Pega eso ahí dentro, pon una coma, usa un no escalable. Voy a guardar eso, volver a Chrome, volver a Recarf y refrescar, y verás ahora que en realidad es ese ancho completo Y esto es realmente útil para cuando estás desarrollando, cuando estás depurando, tratando de hacer que las cosas funcionen para móviles Bien. Eso se ve bien. Bueno, se ve mejor que antes. Pero ahora tenemos un montón de temas. Me va a gustar desplazarse hacia la derecha o arrastrar hacia la derecha. Hm. Entonces lo primero que quiero hacer es abordar esta imagen. Y así voy a hacer clic derecho aquí e inspeccionar. Y verás que esto tiene un ancho de 800 todavía porque Main tiene un ancho de 800 píxeles. Entonces, lo que podemos hacer aquí es establecer un ancho máximo de 800 píxeles, y eso debería ordenar muchas cosas. Todavía tenemos bastante espacio en el lado derecho. Bien, así que vayamos al código de Visual Studio. Vamos a nuestro principal. Y en lugar de ancho, usaremos ancho máximo. Y la imagen tiene un ancho máximo del 100%. Por lo que siempre va a ser 100% máximo de este ancho de elementos principales. Bien, genial. Entonces el contenido de Foo también tiene un ancho de 800 píxeles, así que usemos el ancho máximo allí nuevamente. Creo que debería estar bien. Entonces Comando S. Volvamos a Chrome, un repaso. Bien, eso se ve mucho mejor. Ahora bien, lo siguiente que quiero abordar aquí es que todo el texto está tocando la izquierda y, ya sabes, posiblemente hasta la derecha. Entonces, ¿qué hacer al respecto? Bueno, nuevamente, esto está en la sección principal. Entonces lo que podría hacer aquí es poner un poco de relleno. Entonces vayamos por cero en la parte superior e inferior y digamos 20 píxeles a la izquierda y a la derecha. Bien, eso se ve muy bien. Bien. Y quizá podamos hacer lo mismo en la parte inferior. Bien. Desplácese hacia abajo aquí. Vamos por Bueno, acolchado. Iremos por cero en la parte superior e inferior y 20 píxeles a la izquierda y a la derecha. Guarde eso y entonces tal vez podamos copiarlo y ponerla también en el contenido del pie de página. Bien, voy a salvar eso. Refrescar. Este sitio web fue realizado durante una clase kaboom en la cima hecha por Rich Armstrong 2025 Ese texto se ve un poco extraño. A lo mejor pueda hacerlo un poco más pequeño o echemos un vistazo a lo que está pasando aquí, inspeccione este pie de página. El pie de página ya tiene algún relleno de 40 píxeles, por lo que el contenido probablemente no necesite este relleno extra. Fresco. Volvamos al código VS. Puedes quitártelo porque el pie de página ya tiene algún relleno de 40 píxeles, pero tal vez 40 píxeles es un poco demasiado en el móvil. Entonces lo que voy a hacer aquí es usar una media query. Donde pongas tus consultas de medios depende de ti. Tal vez quieras hacerlo directamente después de este conjunto de estilos de pie de página. Entonces tal vez podamos agregar un comentario aquí y decir, Pie de página. Y aquí hacemos una consulta mediática diciendo acto y luego medios y sólo voy a presionar Regresar aquí. Y luego abraza. Vamos por el ancho máximo de vamos a ir por 600 píxeles por ahora. Y luego dentro de aquí, voy a decir pie de página o el pie de página P. Vamos a elegir un Tamaño de fuente de 16 píxeles. Bien. Y en Chrome, vamos a repasar. Bien. Cualquier cosa que sea de 600 píxeles o menos, va a cambiar el tamaño de fuente a 16 píxeles. Podemos verificar dos veces ese cha. Esto sigue siendo bastante grande. Entonces en este punto de 600 píxeles, va pop y se vuelve un poco más pequeño. Eso solo significa que encajará bastante bien. Incluso a 320 píxeles más o menos. Sí, eso es genial. Aunque sí parece que esto es un poco más grande, así que voy a inspeccionar eso. Voy a ir a computado, y luego aquí abajo, tamaño de fuente 16 pixeles. A lo mejor es sólo porque es blanco. Bien. Eso se ve bastante bien. Tal vez podamos cambiar el resto del tamaño de fuente también, aunque 20 píxeles se ven bastante bien. ¿Qué pasa con los H dos? A lo mejor podamos cambiar los H dos. Entonces vamos al código VS. Vamos a escribir de nuevo esa consulta de medios. Entonces H dos, vamos a los medios. Hay un montón de otras cosas que puedes hacer con una consulta de medios, pero ahora solo la mantengo básica. Así que el ancho máximo de 600 píxeles, y puedes cambiar los 600 píxeles a lo que quieras basado en tu diseño. Así que vamos por un divertido tamaño de 40. Y esto es un error que cometo la mayor parte del tiempo, pero lo veo por todo el programa. Es como si estuvieras pensando que esto es un H dos, así que quieres poner la declaración de H dos por aquí, pero esto no es realmente decirle nada a nadie. No hay bloque de declaración H dos. Esto es solo el tamaño de fuente en el medio de la nada cuando hay un ancho máximo de 600 píxeles. Así que en realidad necesitas poner este bloque de declaración H dos aquí, y luego poner esa declaración de tamaño de fuente dentro del bloque. Bien, vamos a guardar ahí, volver a Chrome, refrescar, y eso lo hace un poco mejor. Incluso eso encaja, lo cual es muy bonito. Así que vamos a verificar qué aspecto tiene eso. Sí. Eso se ve genial. A lo mejor podamos hacer esto un poco más pequeño, voy a inspeccionar el botón equivocado. Va a inspeccionar aquí. Esta es una clase o un div con una clase de PFP La tuya podría ser una imagen, pero se aplica el mismo escenario. Vamos a los estilos aquí. El ancho es de 300, la altura es de 300. Si cambiamos esto para decir 220, eso se ve bastante bien. 220, y entonces no está realmente en el medio. Ya está, posición de fondo. Se ve bastante bien. Y luego. Eso se ve genial. Eso me gusta. Así que acabamos de cambiar la posición del fondo y luego el ancho y la altura. Entonces 220 pixeles. Bien. Eso se ve genial. Y nuestro disco Ralph está en dos líneas. Entonces tal vez podamos cambiar esto a 50 o así. Sí, eso me gusta. Así que vamos al código de Visual Studio. Y aquí podemos realmente meter este H uno dentro esta consulta de medios aquí mismo y vamos a ir por teléfono tamaño de 50. Podrías poner esta consulta de medios en la parte inferior de tu archivo y poner todos tus bloques de declaraciones y declaraciones seleccionados dentro de una consulta de medios siempre que tenga el mismo tamaño. Simplemente depende de dónde quieras poner tu código de media query. Bien, así que vamos a guardar eso. Vamos a Chrome y refresquemos. Bien. Entonces eso se ve realmente genial. Cambiemos esto a responsive. Bien, entonces en la parte superior aquí, veamos a las 600, cambia el tamaño de la fuente. Ahora, puedes divertirte mucho con las consultas de medios. Puedes cambiar los colores. Se pueden cambiar las imágenes. Puedes cambiar tamaños de fuente, fuentes, todo tipo de cosas solo en función del ancho de la pantalla. Pero también hay muchas otras cosas que suceden en los acuarios mediáticos que puedes echar un vistazo. Pero ahora mismo, nuestro sitio web se ve muy bien en el móvil, se ve muy bien en el escritorio, está listo para compartir con la familia. Y una cosa más, necesitamos comprometer nuestro código. Entonces vamos a Gitub Desktop y escribamos un sitio web RS Bonv Ahí Comprometernos con Maine. Empujemos a Origin. Impresionante. Fantástico. Así que de nuevo, en unos minutos, eso se va a actualizar en línea, y podrás compartirlo con tu familia. Bien, ahora estamos listos para compartir nuestro sitio web en ese grupo familiar de Whatsapp. Debería funcionar en los teléfonos de todos en las computadoras. Debería quedar genial. Pero tal vez antes de que realmente lo compartamos, ¿qué tal si agregamos otras páginas web de dos caracteres a nuestro sitio web? Hagámoslos en la siguiente lección. 28. 27 Añadir un personaje: Bien, tenemos un sitio web increíble para nuestro personaje. Coincido con el estilo de nuestro personaje. Es receptivo, pero es solo una sola página web. Entonces hagamos al menos una página más para otro personaje o tal vez incluso dos. Entonces podemos llamarlo un sitio web adecuado con tres páginas. La buena noticia aquí es que podemos hacer esto realmente simplemente duplicando nuestro archivo HTML de punto índice dos veces, cambiando el texto y las imágenes, y agregando algunas líneas de nuevo CSS para que cada página se sienta un poco única Bien, ahora es el momento de agregar uno o dos personajes más al sitio web. Esto va a ser divertido, y no debería tardar demasiado. Entonces claro, Rolf necesita un Pe de vainilla en la página de schoez . Entonces hagámoslo. Voy a tocar este botón de aquí, que no quiero el dispositivo tuba, y luego voy a mover esto al fondo otra vez Fantástico. Bien. Dentro del código VS, voy a hacer click derecho sobre esto y él Copiar y dar click derecho en pegar. Y luego presiona return para cambiarle el nombre. Y voy a decir, hombre, Vanlope. Oh, ¿no sé cómo deletrear esto? Así que sólo voy a copiar eso. Volvamos a ir a visual studio. Supongo que podríamos llamarlo Van. Y me aseguraré de que esté minúscula. Entonces Vanlope y después el título será Vanlope Von, Schwez. Ahí vamos. Tengo que cambiar el icono de Rolf, éste va a ser el mismo Bien, así que vamos por un icono de VanLape. Entonces una nueva pestaña. VanLaPef Schwez Vamos por las imágenes. Bien, este se ve bastante bien. Sólo quiero su cara. Así que voy a hacer click derecho y Guardar imagen como. Sí, eso se ve bien, y encuéntrala. Voy a poner esto dentro de Ralph dentro de imágenes. Bien. Op. Bien. Ahora quiero cambiar el tamaño Resize Image Aquí vamos. ¿ Usamos este antes? No puedo recordar. Vamos a probarlo. Con una altura. Vamos a recortarlo. Sí, eso se ve bien. Bien. Eso se ve bien. Recortar, descargar imagen. Todo bien. Todo bien. Descargar imagen. Fantástico. Vamos a poner el icono de Nlope en Ralph en imagen Oop. Ahí vamos. Ir a copiar todo eso. Vamos al código VS. Pásalo ahí dentro. Bien. Eso se ve bien. Entonces podemos copiar y pegar eso. Vanellope font schwez sobre vanlope. Bien, ahora mismo no sé demasiado sobre Venlope, así que déjame copiar y pegar algunas La protagonista femenina de VenloPfon Schwez . Bien, vamos a copiar eso. Pégalo ahí dentro. Necesitamos una imagen sobre para Vanlope Vamos a echar un vistazo a algunas imágenes más aquí. Sí, esa es bastante genial. Sí. Vamos a guardar la imagen ya que poco a poco estoy consiguiendo este Vanlop grande, entonces vamos a hacer pop Vanlope grande ahí dentro, renombrar eso y simplemente copiar todo Para que cuando estemos en código VS, puedas meterlo ahí dentro. Acerca de vanlope característica Vanlopes. Bien, sigamos adelante. Ella es fuerte, es amable. Ella es grande. Bien. Ella es pequeña. Ella es glitchy Tiene actitud y tiene 9 años Bien. Vamos por VanLapesFriends Bueno, aquí, tenemos a Recto Ralph. Bien. Y ahora en realidad podemos enlazar a nuestra página de Índice. Así que punteado. Vamos a ir por punto índice HL o simplemente punto slash. J va a la raíz directamente, básicamente. Bien, Rece Rolf, eso significa que voy a guardar eso dentro de Index, que es la página de Rolf aquí abajo para Vanlope en vez de ir a esta URL externa, lo que podemos hacer es ir a dot slash mismo directamente Y no quiero apuntar de blanco, así que me lo quitaré, salvo eso. Vamos a Vanlope. Aquí también nos quitaremos el blanco blanco. Bien. Eso es genial. Vamos a Google Chrome, vamos a la ekifPage Tocaremos Vanilla Pe en Schwez luego nos lleva a Vanilla Pe en Schetz Además de esa imagen, se ve bastante bien, un Vanlope. Vamos a cerrar esto. Todo bien. Eso es genial. Y puedes ver lo rápido que es crear una nueva página, una página completamente nueva porque ya tenemos nuestro CSS configurado. Y luego damos click en Recker Rf, y esto va a puntear slash Ahora en línea, esto funcionaría. Pero aquí, no está funcionando porque esto no es un servidor. Esto es como un archivo o un sistema de carpetas. Así que volvamos al código de Visual Studio, y vamos a empezar HTML. Vamos a guardar eso. Vamos a Chrome. Volvamos y refresquemos. Bien, Rick a Rolf Ahí vamos, va al archivo índice en lugar de a la carpeta Rolf, que es esa Bien, entonces eso es genial. Volvamos a Vanlope y cambiemos esta imagen. Si todavía tienes una imagen por aquí, así que dentro de un código VS en la parte superior aquí para tu PFP si estás usando una imagen y no hiciste la búsqueda secundaria, donde cambiamos esa imagen PFP a un div con una clase de PFP, sería bastante fácil Pero ahora tenemos PFP y quiero agregar una clase a de vanlopi encima PFP vanlope. Vamos a guardar eso. Vamos al estilo que es CSS. Dónde está la PFP. Voy a copiar eso, pegar eso aquí tiene una clase de Dt PFP y Vanp Así es como dices voy a seleccionar todos los elementos con la clase de PFP y vanlop dentro del elemento header Bien, entonces aquí solo tenemos una imagen de fondo que voy a cambiar. Entonces tal vez también sea necesario cambiar la posición del fondo y el tamaño del fondo. Bien, entonces creo que echemos un vistazo a qué imágenes tenemos. Icono de fenélope, Penélope JPEG. Esa es probablemente una muy buena, así que voy a copiar todo eso y pegarlo ahí. Posición de fondo. Sólo voy a establecer eso a cero y cero final y tamaño de fondo al 100%. O tal vez voy a usar algo como cover. Así que voy a salvar eso. Volvamos a Chrome y actualicemos. Bien. Sí. Eso se ve muy, muy bien. A mí me gusta. Fantástico. Y si volvemos a Rece Rolf, suyo sigue siendo el mismo porque el suyo es el predeterminado El suyo tampoco tiene la clase Vanlope en esa PFP. Ahora vamos de nuevo a Vanlope. El suyo lo hace Incluso podríamos cambiar el color de su frontera. Sí, hagámoslo rápido. Entonces, hagamos clic derecho en Inspeccionar. O tal vez hagámoslo en código de Visual Studio porque ahí tenemos un picker de color Entonces posición de fondo, tamaño de fondo. Vamos por el color del borde. Y vamos por el rojo. Pero, ¿de qué color es Vanélope? Vanélope es este tipo de como color turquesa. Sí, así que hagamos eso y ahorremos. Bien. Ahí vamos. un montón de formas en las que realmente podríamos hacer esto. Como si pudiéramos darle al cuerpo una clase de vanlope y luego cambiarlo todo con base en eso Pero por el momento, esto es lo único que está cambiando. Bien. Entonces ahora puedes hacer esto con una, dos, tres, cuatro páginas, muchas páginas que quieras. Ahora tu sitio web tiene múltiples páginas web. En realidad es un sitio web y no solo una sola página web. Y lo último que tenemos que hacer es ir al escritorio Github y cometer este código. Agregar en otra página. Comprometerse con Maine, empujar Origin. Ahí vamos. Si ves algo como esto en GitHub Desktop, una versión actualizada de Gitup Desktop está disponible y se instalará en el próximo lanzamiento, en realidad puedes simplemente tocar Reiniciar Gitup desktop, y debería aparecer en cuestión de segundos o minutos Mm hmm. Ahí vamos. Ahí vamos. Ahora tengo otra página en mi sitio web. Me encantaría que hicieras lo mismo. A lo mejor sumar dos, tres, cuatro, más, muchos que quieras. Bien, ahí vamos. Si quieres que cada página de personaje sea aún más única, entonces ve a por ello. Me encanta ver como haces esto. 29. 28 Desafíos alternativos de CSS: Ahora bien, si estás preparado para un desafío, quiero que hagas una o dos versiones más de la página web de tu personaje usando exactamente el mismo HTML, pero usando diferentes archivos CSS. Aquí hay un ejemplo de dos páginas web diferentes con exactamente el mismo HTML, pero diferente CSS Empezarás a entender lo poderoso que es CSS con este ejercicio. Bien, para que puedas elegir para qué personaje quieres hacer una nueva versión. Voy a ir por Ralph, así que voy a volver. Y voy a estar haciendo un duplicado de esta página y luego cambiando el archivo CSS que carga y luego creando un nuevo archivo CSS también. Vamos a entrar en el código VS. Voy a hacer clic derecho en copiar, clic derecho en Pegar. Y luego regresaré, iré por Ralph dos. Puedes llamarlo como te guste. Entonces mi estilo, voy a hacer click derecho en copiar, click derecho y pegar en CSS, click derecho en Pegar. En lugar de estilo Copiar, solo voy a decir estilo dos. Ahí vamos. Dentro de Rolf dos, la hoja de estilo a la que vamos a ir es estilo dos puntos CSS, y puedes decir V dos o lo que quieras Vamos a guardar eso. Ahora dentro del estilo dos, podemos hacer algunos cambios. Pero quiero ir a Google Chrome y solo ir a Ralph a puntar HTML No debería haber diferencias ahí. Pero ahora mismo podemos empezar a hacer diferencias. Podemos empezar a hacer cambios. Entonces vamos a hacer el encabezado. Cambiemos este color. Tal vez vayamos por un azul realmente oscuro, y guardemos eso y comprobemos que está funcionando. Ahí vamos. Y así así así, puedes comenzar a cambiar todo el sitio o toda la página web usando este otro archivo CSS. Y es muy divertido porque el HTML no va a cambiar, pero el CSS sí. Así que diviértete con esto, prueba algunas cosas nuevas, experimenta. Sí, va a ser divertido. Y luego, claro, cuando estés listo y cuando hayas terminado, vuelve al escritorio de Git upb y di, agregó una versión nueva o alternativa página web de Ralph Bien. Y luego cometer y luego empujar origen. Bien, ahí vamos. Diviértete con eso. 30. 29 Comparte tu sitio web: Bien. El sitio web de Rick Rolls se ve aplastante Creo que les queda muy bien, y espero que tu sitio web se vea genial y se ajuste a tu personaje, también. Lo increíble es que cada vez que te comprometes y sincronizas tu código con github.com, tu página se actualizará, tu página se actualizará Ahora, si te sientes a la altura, comparte el sitio web de tu personaje con el mundo. Dile a tu mamá, a tus amigos, a los chicos con los que trabajas, debería hacer que todos estén realmente orgullosos o locamente celosos Probablemente empiecen a tratarte como a un Ninja y a pedirte que codifiques todo tipo de cosas, y tal vez incluso te pidan que arregles impresoras y esas cosas, lo cual es un poco raro. En fin, me encantaría ver el sitio web de tu personaje. Así que publícalo donde pueda verlo. Puedes mencionar en taptapkaboom en Todas las sociales, o Mi correo electrónico es rico en taptapkaboom.com. Ahora, en este punto, puedes estar bastante orgulloso de ti mismo. Acabas de codificar un sitio web para tu personaje favorito. Hay tres páginas. Es receptivo. Es increíble. Entonces creo que deberías darte un choca los cinco ahora, así, y tal vez incluso hacer un poco de baile Como, Wo Woo. Algo así. Bien hecho. 31. 30 Errores comunes de depuración: Chicos, no importa quien seas, aunque seas una coda súper ninja, cometerás errores cuando codifiques Se llaman bichos, y son frustrantes. Entonces, ¿cómo lidiar con ellos? Aquí hay algunos consejos para recordar. El primer consejo es saber que le suceden errores a todo tipo de codificadores. Es justo lo que pasa. Somos humanos. Incluso la IA comete errores. No es cuestión de si, es cuestión de cuándo. El segundo consejo es que el navegador no está fuera a buscarte. Es solo seguir tus instrucciones. consejo tres es que la mayoría de las veces los problemas son realmente pequeños y las soluciones son realmente simples errores ortográficos, errores tipográficos, no usar un punto delante de un nombre de clase en CSS, usar un punto delante de un nombre de elemento en CSS, usar un punto en lugar de un símbolo hash al intentar seleccionar un elemento por ID Otro pequeño problema es usar diferentes casos en tu código en comparación con tus archivos y carpetas. Si tus imágenes no están llegando o no hay CSS cuando ves tu sitio en línea, es muy probable que sea porque estás intentando acceder a un archivo que no existe. O simplemente uno donde la ruta del archivo o el nombre del archivo tenga un caso diferente. El cuarto consejo es que hay una razón lógica por la que no está funcionando. Solo necesitas saber de qué se trata. Los bichos son fáciles de ver en retrospectiva. consejo cinco es mantener las cosas ordenadas, ordenadas y consistentes en tus archivos HTML y CSS. Aplicar sangría a su código para que sea fácil de escanear y notar irregularidades Usa las mismas convenciones de nomenclatura y caso como usa estuche camel o kebab a lo largo de tu proyecto consejo seis es copiar y pegar en lugar de reescribir cuando sea posible Esto significa que aunque haya errores ortográficos, se equivocarán en todas partes, pero igual en todas partes . Punta siete. Cuando algo no está funcionando como se esperaba, explique lo que debería estar sucediendo y luego lo que realmente está sucediendo. Puedes hablar contigo mismo, escribirlo, o incluso explicárselo a otra persona. Aunque ese otro no codifique, puede ayudar. Los perros y los gatos son compañeros de codificación brillantes. Consejo ocho, únete a una comunidad y obtén acceso a un mentor o alguien con más experiencia que tú, especialmente si estás tratando de hacer cosas más complejas. El consejo nueve es preguntarle a Google o algo así como Chat ChPT. No hay una sola respuesta a la que le haya preguntado alguien que aún no haya preguntado y haya encontrado una respuesta decente. Consejo diez tómate un descanso. Salir a caminar, mirar por la ventana, respirar un poco o simplemente dormir sobre el problema. Deja que tu inconsciencia trabaje en ello. En serio, la cantidad de tiempo que descubrí lo que pasa mientras estoy en la ducha o en mitad de la noche es una locura. Vas a pasar mucho tiempo depurando. La buena noticia es que cuanto más codifiques, más rápido vas a llegar a detectar y arreglar estos errores, estarás como, Ah, ya he visto esto antes Entonces, buena suerte con tu codificación, Buena suerte con tu depuración Verlo como parte del proceso. 32. 31 Ayúdame a ayudarte: Siempre te animaré a depurar tu propio código y a que resuelvas cosas por ti mismo porque ganas experiencia de esta manera. Pero a veces simplemente no puedes hacerlo bien y quieres dejarlo o tirar tu computadora por la ventana o a tu gato. Entonces prefiero que no pase todo eso. Entonces, en este tipo de instancias, me gustaría ayudar. Pero necesito que me ayudes a ayudarte. Entonces esto es lo que necesito de ti si vas a pedir mi ayuda. Quiero que comprometas tu código y lo sincronices con github.com Dos, dime cuál es tu nombre de usuario de Github. Tres, enviar a través de un enlace a la página web con el número. Cuatro, si estás atascado en una lección específica del curso, dime qué lección. Cinco, describa lo que debería estar pasando. Seis, describa lo que está sucediendo. Entonces intentaré ayudarte. Así que por favor no digas cosas como, Mi sitio web no funciona. Por favor ayuda. No te puedo ayudar aquí. Ayúdame a ayudarte. Así que prueba este formato. Obtener nombre de usuario y luego poner su nombre de usuario, la URL, poner su URL donde hay un problema. Número de lección. Por ejemplo, pon el número 16, el de escribir CSS en archivos separados. A veces no puedo recordar de qué se trata 16. Lo que debería estar pasando, el color del texto para el encabezado tres debe ser azul. Lo que está sucediendo, el color del texto para el encabezado tres no está cambiando de color. O te dejaré una explicación por escrito, explicación en video, o programaré una llamada contigo. 33. 32 Qué sigue: Bien, este es el final del curso, pero ojalá sea solo el comienzo de tu viaje de codificación. Espero que te hayas divertido. Espero que hayas aprendido mucho, y espero que abraces más de ese lado nerd de ahora en adelante Lo que te ha dado este curso es una base sobre la que aprender más además de. Hay mucho más que aprender, y puede ser muy divertido crear sitios web y aplicaciones para usted, sus amigos y para los clientes. Ahora, si aún no lo has hecho, necesitas festejar. Acabas de crear un sitio web. Hola a ti mismo cinco, deja escapar un grito. Grito de gritos Baila, salta arriba y abajo, corre como loco. Bien hecho. Y ahora, ¿ podrías hacerme un favor? ¿Puedes revisar este curso por favor? Significaría el mundo para mí y ayudar a otras personas a decidir si tomarlo o no? En serio, hacer esto significaría mucho. Entonces, si bien este es el video final, agregaré más videos a este curso donde tenga sentido, y por supuesto, estaré creando otros cursos y videos de YouTube. Así que únete al boletín de taptap Kaboom y suscríbete al canal de YouTube. Adiós por ahora.