Haz una tarjeta de presentación digital con HTML y CSS

1. Introducción al curso: Oye, tal vez hayas notado que la tecnología está creciendo más rápido y más rápido en casi todas las industrias que hay por ahí, y la tecnología web no es una excepción. Aprender HTML y CSS son grandes habilidades que el dedo del pie tiene no solo para tu carrera, sino solo para el crecimiento personal. Yo soy Nathan Blair. Soy desarrollador Web, y aprendí HTML y CSS de tutoriales como este. Te puedo decir por experiencia personal que tú también puedes hacerlo. Todo lo que se necesita son unos proyectos divertidos, mucha práctica y un poco de orientación para que empieces. Y este curso estará aprendiendo haciendo. Vamos a crear un diseño simple de HTML y CSS que se pueda utilizar como tu tarjeta de visita digital . Empezaremos hablando de cómo configurar un proyecto de sitio web en tu computadora. Entonces vamos a sumergirnos en algún diseño con estilo CSS. Te dejaré con algunos de mis consejos personales así como algunas cosas que quizá quieras revisar después del curso. Al final del curso, tendrás una página de acceso público y algún código que podrás presumir a cualquiera. Este curso es para ti. Si tienes algunas habilidades informáticas básicas, tal vez incluso habilidades de diseño. Pero realmente te interesa aprender a construir tu propio sitio web o cómo hacer cambios sencillos en un sitio existente. Necesitarás tener una comprensión básica de cómo navegar por tu computadora. También necesitarás un editor de código de algún tipo. Ahora prefiero usar a Adam, pero a mucha gente le encanta el texto sublime o el estudio visual que realmente depende de tu preferencia. He publicado algunos enlaces a cada uno de estos en la descripción del proyecto, así que puedes ir a revisar esos. Por último, asegúrate de tener una buena foto de tiro en la cabeza para mostrarla en tu página. O, si lo prefieres, puedes usar un logotipo o realmente cualquier imagen. Es tu decisión. Entonces, ¿estás listo para agregar algunas habilidades HTML y CSS a tu arsenal? Si es así, empecemos a recubrir 2. Documento y sintaxis: lejos, correcto, listo para empezar. Aprendamos un poco sobre HTML primero. Lo que HTML significa es lenguaje de marcado de hipertexto, y se puede leer sobre mucha historia que entró en H dos mil. Pero básicamente es el bloque de construcción de la Web tal como la conocemos. Si miras alguna página Web hoy y ves esa fuente haciendo clic derecho, puedes ver el HTML que entra en segundo plano. No sé si se puede ver en este tamaño de pantalla, pero HTML está ahí. Tienes algunas etiquetas HTML básicas, y luego tienes todo un montón de mumbo jumbo encendido. Este sitio ignorará eso por ahora, pero todo en la Web es de alguna manera forma o forma HTML. Por lo que para empezar en este proyecto primero necesitamos asegurarnos de que tenemos nuestro entorno configurado correctamente. Entonces sigamos adelante y abrimos una nueva ventana del buscador. Y ya sabes, lo que me gusta hacer es que si vas a tu carpeta de inicio muchas veces, verás carpeta Sitios. Si aún no tienes uno, puedes crear uno, así que adelante y abre eso y vamos a crear una carpeta para nuestro proyecto. Te recomiendo crear una carpeta de proyecto para mantener todos tus archivos de proyecto en. Por lo que es solo un poco más organizado y más fácil de administrar cuando se trabaja con sitios web. Esto también se conoce comúnmente como la ruta del sitio web la ruta del sitio. Vamos a darle un nombre sencillo. Yo sólo voy a ir con tutorial y un paso más. Simplemente me lo voy a hacer fácil y añadir esto a mis favoritos. Ahora pasemos al siguiente paso, que es crear nuestro documento. Entonces para este paso, vas a necesitar algún tipo de editor de código como mencioné, puedes elegir el software que más te guste. Adelante y abramos nuestro editor de códigos y creemos un nuevo archivo. Voy a seguir adelante y guardar esto en mi nueva carpeta tutorial. Aquí es donde guardar la carpeta y los favoritos es útil Ahora. El estándar para documentos de molino HT es que su página principal se va a llamar índice y luego la extensión del archivo es dot html Bueno y haga clic. Ahorra Ahora. Muy primero, tang que necesitamos es una etiqueta que le diga al navegador qué tipo de documento. Esto es así que vamos a escribir tipo doc y de inmediato con un editor de código, vas a ver que te sugiere etiquetas. Es inteligente y sabe lo que estás escribiendo, y puedes hacer clic en esto o golpear pestaña. Muy bien, entonces la siguiente etiqueta muy básica es un html Tech. Y esto le dice al navegador que aquí es donde estamos iniciando nuestro HTML y con cada etiqueta a partir de este punto, necesitamos una etiqueta abierta y una cerrada. Entonces éste está abriendo nuestra etiqueta. El siguiente, usando una tajada, lo cierra. Por lo que ahora tenemos HTML abierto y cerramos un ella macho. Todas las etiquetas HTML siguen este principio básico, típicamente dentro de una etiqueta HTML. Tienes una cabeza y un cuerpo dentro de la cabeza. Ahí es donde toda la metainformación va sobre tu página Web, cosas como el título de tu página, y puedes verlo auto lleno de casa. Pero vamos a darle un título diferente. Digamos nuestro nombre. Entonces voy a teclear a Nathan Blair. Aquí vamos y no dentro del cuerpo. Ahí es donde va todo tu HTML personalizado. Ahí es donde vas a construir el sitio que vas a ver en pantalla. Ahora, antes de saltar adelante a eso, echemos un vistazo a algunas otras metaetiquetas que puedes agregar a la cabeza. Lo que me gusta hacer es guardar notas sobre estas cosas porque no necesariamente recuerdo todas las diferentes metaetiquetas. Y de hecho, hay una cosa que nos perdimos. También podríamos agregar el lenguaje a nuestra etiqueta HTML. Adelante y pongamos eso ahí dentro. Entonces esto solo le dice al navegador, Oye , mira, este documento va a estar en inglés, bien, está bien, veamos un par de otras meta tags aquí. Se ve la etiqueta meta probablemente el 90% del tiempo que vas a estar usando el personaje de ayuda UTF dijo. Por lo que yo sólo recomendaría apegarse a esto. Y la siguiente metaetiqueta que vamos a añadir es para el diseño responsive. Nos meteremos en esto un poco más tarde, pero esto básicamente solo asegura que tu página Web escale correctamente cuando se ve en un iPhone o un iPad o en una pantalla grande. Añadamos algo al cuerpo a solo por diversión. Está bien, guárdalo. Y oye, echemos un vistazo a lo que tenemos. Entonces, ¿cómo se ve un documento HTML desde su computadora? Bueno, es bastante fácil. Vamos al documento y simplemente arrástralo a tu navegador. Y oye, mira eso. Ahí está nuestro mundo hola. Si miras en el título, verás el texto de tu título y tienes un documento HTML básico. Por lo que eso cubre la sintaxis HTML básica. Añadamos algunos elementos en nuestro próximo video. 3. Elementos básicos: encabezados y Paragraphs: Muy bien, Así que tenemos nuestro hermoso texto hola mundo y una gran página vacía en blanco. Vamos a llenarlo un poco con algunos elementos de texto básicos. Entonces de vuelta en nuestro editor de códigos, tengamos un título. Esta es una de las etiquetas básicas que todo navegador reconoce. Adelante y teclee H uno en tu cuerpo y ciérralo también. Y en medio de esta etiqueta, vamos a tipear son título. Voy a usar mi nombre para eso. Guardemos esto y comprobémoslo. Refresca la página. Y oye, mira eso. Tenemos un poco de estilo. Viene justo de la caja porque cada navegador sabe lo que es una etiqueta H one. Y también hay otras etiquetas de encabezamiento. Si pegas H dos, tienes edad dos etiquetas H tres h cuatro. El listado va todo el camino a seis, y cada uno viene con su propio tamaño. Entonces, como puedes ver, medida que el número aumenta, el título se hace más pequeño y el estilo de estos encabezados se puede cambiar con CSS, que es en lo que vamos a entrar más adelante en esta lección. Ahora no necesitamos todos estos rubros, pero mantengamos H dos. Y en nuestro H dos, este va a ser nuestro subtítulo. Y creo que este es un buen lugar para poner ya sea tu puesto de trabajo o algún otro subtítulo que te gustaría en tu tarjeta de visita. Entonces solo voy a poner desarrollador web. Guárdalo y vamos a comprobarlo. Genial. De acuerdo, echemos un vistazo a otra etiqueta. Es la etiqueta P, que es abreviatura de párrafo. Y vamos a ver cómo se ve eso. Y muchos editores Simplemente puedes escribir Boram y te va a dar Laura hizo algo de texto. Como ves, esta es una cadena larga aquí, pero es genial para muestrear cosas. Uh, Como puede ver, el estilo de una etiqueta de párrafo es mucho más simple. Está destinado para como adivinaste párrafos. Ahora, en nuestro caso, no necesitamos un párrafo completo de texto en nuestra tarjeta de visita. O sea, supongo que sin duda eres bienvenido para hacer eso, pero creo que este es un lugar apropiado para poner nuestra dirección de correo electrónico. Está bien, guárdalo. Echemos un vistazo. Está bien. Genial. Ahora esto no parece mucho todavía Pero te prometo que todo se va a unir. Sólo tenemos que dar este paso a la vez. A medida que aprendemos. Una cosa a tener en cuenta a la hora de diseñar una página Web es la semántica. ¿ Qué significa eso? Bueno, los navegadores y otros dispositivos que leen tu página Web van a esperar ciertas cosas de diferentes etiquetas en tu página. Por ejemplo, dentro de una etiqueta de encabezado, se espera que ese sea un encabezado de algún tipo. Lo mismo con un H dos en un párrafo. Algunos dispositivos, como los lectores verdes, usarán la semántica para navegar por un sitio web. Por lo que es importante tener en cuenta qué contenido estás poniendo en estos diferentes impuestos HTML . En nuestra siguiente lección, repasemos las etiquetas mawr html que tienes disponibles y crearemos una lista con 4. Tablas y listas: manera. Por lo que hemos aprendido sobre los elementos de texto básicos. Pero, ¿cuáles son algunas otras formas de estructurar nuestra textura Información en la Web? Bueno, un ejemplo es una mesa. No vamos a usar una mesa en este proyecto en particular, así que no sientas que tengas que escribir nada de esto. Pero es uno de los elementos HTML básicos que debes conocer, así que me gustaría revisarlo muy rápido. Por lo que dentro de una mesa tienes algunas secciones estándar. Tienes una cabeza T, un cuerpo T. Y si quieres un pie T ahora, dentro de estas secciones, siempre hay un TR, que significa una fila de mesa y dentro de esa T d y la TV está cada celda individual. Vamos a burlarnos de una tabla HTML rápida para que puedas tener una sensación de cómo funcionan. Hagamos sólo unos encabezados básicos y el cuerpo iba a hacer lo mismo y luego lo mismo en el pie de página T. Y solo para ahorrar tiempo, voy a copiar desde aquí y pegarla. Pero hagamos algunas cuerdas diferentes. Muy bien, veamos cómo se ve eso. Muy bien, Genial. Entonces tenemos comida. Barbat enel encabezado de la tabla e. Tenemos 123 y nuestra primera fila y luego ABC en el pie de página. Ahora bien, si tuviéramos una tabla más compleja o una tabla real, probablemente veríamos más de una fila. Por lo que se ve algo así, y cada uno podría tener sus propios valores por lo que la tabla puede hacerse más y más larga. Puedes agregar más columnas que te gusten. Hay mucho más que puedes hacer con las tablas HTML. No entraré en todo aquí en este tutorial, pero solo sé que las tablas son un gran recurso para cuando estás construyendo tu sitio web. Aquí hay algo que usaremos en nuestro proyecto. Hay algo más que puedes usar para mostrar información estructurada, y esa es una lista. Existen dos tipos de listas. En HTML. Ahí hay una lista ordenada, que es la etiqueta ol, y también está la A Norden List ul y cada una de estas. Hay otra etiqueta anidada para cada elemento. Se trata de un elemento de elemento de lista, o L I. Veamos cuál es la diferencia entre estos dos tipos de listas. Vamos a añadir algunos artículos a cada uno, y vamos a ver, ¿eh? Entonces como puedes ver, se ordena una lista ordenada y como números mientras que en una lista ni lo hizo son solo puntos de bala. Tiendo a usar mucho la lista A Norden, pero ciertamente hay aplicaciones para una lista ordenada también. Para este proyecto, vamos a utilizar el A Nordeste. Esta lista nos dará un buen formato para enumerar todos los diferentes perfiles a los que queremos enlazar desde nuestra página web como marcador de posición. Simplemente voy a poner el nombre de cada sitio web que quiero enlazar a uno de mis sitios web de codificación favoritos , como viste antes, fue get hub. Entonces voy a añadir eso aquí. También pondré alargar y Twitter. Está bien, digamos eso y veamos cómo se ve. Está bien, ahí vamos. Ahora, medida que avanzamos con este tutorial se agregarán enlaces a estos ítems. Pero por ahora, vamos a un buen comienzo. ¿ Sabes qué? De hecho, creo que ese es un buen tema para el próximo video. Sigamos adelante y agreguemos algo de longitud a nuestros artículos. Viejo 5. Enlaces e imágenes: Ahora que tenemos nuestros ítems de lista, necesitamos agregar algunos enlaces. Entonces sigamos adelante y limpiemos un poco esto. En primer lugar, me gusta Teoh. Mantén todo en líneas separadas solo para que sea un poco más legible para mí envolviendo alrededor de este Get hub text. Voy a añadir una etiqueta de enlace. En realidad se llama a un enlace en etiqueta de anclaje, que es sólo un ancla tan abierta Cerrar ancla en el medio es obtener hub. Ahora necesitamos agregar la u. r l escuchar la forma en que hacemos eso es usar un atributo vamos a usar específicamente los atributos H ref Muchos elementos en H e mail tienen atributos, y son solo bits de información que puedes agregar al elementos para hacerlos comportarse de cierta manera o cambiar diferentes aspectos sobre ellos. Este atributos en particular, agrega un tu l para tu enlace. Entonces en este caso, voy a agregar mi u R l a mi perfil get hub. Es una buena práctica incluir los https en el frente para que el navegador no se confunda sobre si este sitio web es parte de tu servidor o si va a otro lugar . Muy bien, Así que ahora que han agregado mi enlace. Vamos a intentarlo. Adelante y refresca la página y echa un vistazo. Tenemos un enlace. Ahora veamos si funciona. Ahí está mi perfil get hub. Pero como puedes ver, lo abrió en la misma ventana del navegador. Y no necesariamente quieres que todo tu tráfico desaparezca de tu sitio tan pronto como alguien vaya a una de tus otras páginas. Entonces volvamos atrás y cambiemos eso un poco. Hay otro atributo que podría usarse en una etiqueta de ancla llamada Target. Y no, eso no es hacer referencia al popular centro comercial que en realidad le está diciendo al navegador qué ventana usar. Entonces vamos a decir en blanco. Y eso básicamente significa que queremos que esto se abra en una nueva pestaña. Guardemos eso y probémoslo. Refresca la página y haz clic en nuestro enlace. Ahí vamos. Tienes un nuevo toque. Hagamos lo mismo con otros enlaces. Solo voy a copiar y pegar para que esto sea un poco más fácil, y vamos a reemplazarlos por diferentes URL de tu. Y ahora cambiemos el texto dentro de las etiquetas de anclaje. Está bien. A ver cómo se ve eso. Gran prueba. Los vínculos no han sido desde hace mucho, pero funciona. Muy bien, Genial. Entonces ahora tenemos tres enlaces. Vamos a dar un paso hacia arriba y realmente hagamos algo elegante. Vamos a añadir una imagen a esta página. Este es otro elemento que utiliza atributos. Echemos un vistazo. Añadamos nuestra imagen en la parte superior de nuestro documento. El tag de la imagen. Es solo yo m G. Y típicamente usamos dos atributos con esta etiqueta. Primero hablemos un poco de los viejos atributos. Antiguo es texto alterno. El motivo. Necesitamos texto alterno. Imágenes extranjeras? Bueno, algunas personas en la Web no pueden ver imágenes. Están ciegos. Por lo que los lectores de pantalla pueden leer este texto alternativo y entender qué imagen está en la pantalla. Por lo que es genial agregar algunos textos descriptivos bonitos dentro de sus propios atributos. Dejémoslo en blanco hasta que sepamos qué imagen estamos agregando. Ahora, aquí es donde vas a necesitar una imagen o un logotipo para poner en tu tarjeta de visita. Tengo una configurada ya mi imagen de perfil estándar que agrego en todas partes de la Web, y la vas a poner justo dentro de tu carpeta tutorial donde va a estar tu raíz Web . Volvamos a nuestro código. Entonces ya que sabemos que está en nuestra raíz Web, incluso podríamos verlo aquí en nuestro proyecto. Podemos simplemente escribir el nombre del archivo aquí. Guardémoslo y echemos un vistazo. Oh, oye, echa un vistazo. Ese soy yo. Por lo que tenemos configurada nuestra imagen. Ahora agreguemos un texto viejo. cara sonriente de Nathan Blair. Si actualizas, verás Nada ha cambiado, pero un lector de pantalla podrá leer ese texto, y cualquier visitante ciego a tu sitio web sabrá lo que está pasando. Esto es genial. Entonces tenemos algunas imágenes. Tenemos un texto estilizado. Tenemos algunos enlaces. Sigamos avanzando y agregamos un poco de estructura a esta página. 6. Elementos de bloque y HTML semantic: está bien, así que estamos agregando contenido a esta página. Se ve genial, pero sería bueno seccionarse el contenido solo para que tengamos un estilo de tiempo más fácil, pero también para la semántica. Habíamos mencionado la semántica antes. Veamos un poco más en profundidad sobre cómo puedes mejorar tu semántica en tu página web. Si echas un vistazo a los muelles Web de India, esa es muy común la documentación Web hecha por en Mozilla. Entran en un montón de gran detalle sobre todas las diferentes etiquetas semánticas que puedes usar en la Web y para qué se usan. No voy a entrar en todos estos, pero como pueden ver, hay tantos. Hablan de sección de contenido, usando a lados y pies de página y encabezados. Tienen contenido de texto. El listado sigue y sigue. Siéntase libre de navegar por esto. Echa un vistazo a todos los diferentes componentes Web y a todas las cosas que puedes usar en tu sitio web. Pero solo repasemos un diseño básico de página Web que podrías ver en Internet hoy. Por lo general, en un sitio web, página tiene un encabezado, y dentro de eso, generalmente hay una barra de gallo en la parte superior bien, hay elementos semánticos que puedes usar tales tiene cabecera y siesta. Debajo de eso, suele estar la sección principal del sitio web, y dentro de eso suele haber un artículo principal como textos o una publicación en bloque. Y quizá haya una barra lateral, que podría ser un aparte y luego por debajo de todo. Por lo general hay un pie de página. Todos estos ítems son etiquetas HTML reales que puedes usar para seccionarte fuera de tu sitio web y hacerlo más semántico. Entonces echemos un vistazo a algunos de los elementos que podemos utilizar para secarnos fuera de nuestra página, pesar de que va a ser una página muy, muy sencilla. No podemos usar muchos de ellos, pero hay una pareja a la que podemos echar un vistazo. Entonces de vuelta en nuestro código, empecemos simplemente envolviendo todo en lo que se llama un elemento de bloque. Y la forma en que creamos uno es usar el DIV Tech. Una etiqueta DIV es básicamente solo un bloque en la página. Es muy útil para peinar, mover cosas alrededor, posicionarlas en el lugar que las deseas en la página. Ahora, en muchos editores de código, notarás que aparece una clase atributos esto se usará más adelante con nuestro CSS en lugar de clase. Cambiemos esto a I d Así como eso y yo d atributos se usa de nuevo mayormente para CSS, a veces JavaScript, que es mucho más avanzado de lo que necesitamos entrar. Pero es esencialmente una forma de identificar un elemento específico en la página, y siempre son únicos. Por lo que nunca quieres ideas que sean iguales en diferentes elementos de la página. Siempre deben ser únicos. En este caso, este es nuestro rapero de sitio. Solo hay uno de ellos en la página, Así que démosle un nombre que a veces me gusta hacer esto para solo hacer un seguimiento de para qué se están utilizando los elementos . Ahora agreguemos todo nuestro contenido a ese bloque. Y echemos un vistazo a lo que sucede cuando hacemos eso absolutamente nada como porque una etiqueta DIV no tiene ningún estilo inherente. En su mayor parte, no notarás ninguna diferencia, agregando esto, pero nos dará una mejor estructura para cuando entremos en el estilo más adelante. Volvamos a nuestro código y a unos cuantos elementos más ahora sería genial decirle al navegador cuál es nuestro contenido principal. ¿ En qué deberíamos estar centrándonos? Bueno, básicamente, todo el auto. Es nuestro elemento principal, así que vamos a envolverlo en ese grandioso. Entonces ahora tenemos un elemento principal con todo nuestro contenido, y está dentro de un sitio. Rapper Si vuelves a tu página y refrescas. Aún así, no volvió a pasar nada. Principal es algo así como un elemento de bloque. No tiene ningún estilo inicial, pero es genial para la estructura. Añadamos otro I D a esta etiqueta principal. Lo llamaremos tarjeta. ¿ Y sabes qué? Vamos a seccionarnos un poco nuestro contenido. Vamos a crear un par de etiquetas DIV más. Vamos a crear uno para nuestra imagen y el otro para texto. Y esta vez, usemos el atributo de clase para nombrarlos. Le pondremos nombre imagen, bloque y bloque de texto si lo guardas y sigues buscando sin cambios. Sé que puede parecer que no estás haciendo nada en este momento, pero te prometo que te será útil en nuestros próximos pasos. En la siguiente lección, vamos a hacer algunas cosas divertidas. Nos vamos a meter en estilo CSS 7. Introducción a CSS: De acuerdo, así que si has estado siguiendo hasta ahora, aquí tenemos un gran pequeño documento HTML, pero es un poco aburrido. Bueno, en este siguiente paso, aquí es donde las cosas se ponen un poco más interesantes porque vamos a aplicar algún estilo con una cosa llamada C. S S. Y lo que CSS significa es en cascada hojas de estilo. Se trata de una forma de marcado que los navegadores usaban para aplicar estilos a sitios web, y utiliza un patrón en cascada, lo que significa que los estilos en la parte superior de la hoja van a ser anulados por estilos competitivos en la parte inferior de la hoja. Sigamos adelante y echemos un vistazo a algunas de las diferentes formas en que puedes agregar CSS a tu documento. Ahora. Una forma en que podrías hacer esto es simplemente agregando un estilo en línea directamente a uno de tus elementos, y esto generalmente no es recomendado por los estándares actuales. Pero sólo por el bien de la demostración, simplemente agreguemos un estilo a nuestro elemento de párrafo. Entonces la forma en que hacemos esto es escribiendo estilo igual, y luego dentro de las comillas, vamos a poner nuestros estilos, así que solo voy a empezar con un estilo muy sencillo. Eso es color. Guardémoslo y echemos un vistazo a lo que eso hace. Está bien, para que veas que es así de sencillo. Tenemos texto rojo en nuestro párrafo. Bastante guay, ¿verdad? Bueno, esto puede llevar a problemas en el camino cuando digamos, estás desarrollando un sitio más grande y tienes estos en estilos de línea mezclados en tu código en todas partes. ¿ Cómo manejas todo eso? Bueno, en lugar de usar estilos en línea, también podrías ponerte estilos en la cabeza. Hagámoslo realmente rápido y cómo lo haces. Es solo escribiendo estilo y ves que ya agrega, en algunas cosas aquí, solo lo vamos a dejar así. Ahora, aquí arriba, vas a necesitar usar lo que se llama selector para determinar qué elementos quieres aplicar tus estilos, también. Entonces revisemos algunos de los selectores básicos que tenemos selectores de elementos, y eso solo coincide con el nombre del elemento al que estás aplicando estilos. Entonces usaré el elemento de párrafo, así que eso va a ser apuntando a nuestro párrafo, ¿ verdad? También tenemos selectores de clase y la forma en que los usamos ya que solo usamos el carácter de punto o punto de periodo y en tipo o nombre de clase. Entonces vamos a apuntar al bloque de texto. Vamos a apuntar a la clase de libro de texto. Y por último, vamos a añadir un selector I D. Y la forma en que hacemos eso es usar la etiqueta hash o el símbolo numérica. Así será la tarjeta objetivo. Entonces eso va a ser apuntando a la idea de tarjeta aquí. Sin aviso la sintaxis aquí para cada selector. Siempre necesitamos incluir un soporte rizado abierto y de cierre, y dentro de esos corchetes, ahí es donde vamos a poner todos nuestros estilos. Entonces sigamos adelante y agreguemos algunos estilos a estos para el párrafo. Vamos a cambiar de nuevo el color de tu texto. Entonces y para el bloque de texto, agreguemos algo diferente. A lo mejor tenía algo de texto azul para todo el bloque de texto, por lo que esto significa que el párrafo obtendrá texto leído. Cualquier otro texto debe ponerse azul. Y para la tarjeta, hagamos algo diferente. A lo mejor un color de fondo, y lo mantendremos simple y digamos gris. Ahora note esta sintaxis para agregar estilos. Todo lo que tienes que hacer es agregar la propiedad, la propiedad de estilo, un dos puntos y luego el valor de esa propiedad. Y sabes que hay toneladas de propiedades de estilo ahí afuera cubrirán muchas de ellas para este tutorial, pero habrá mucho más. Así que definitivamente echa un vistazo a esa documentación y simplemente juega con todas las diferentes cosas que podrías hacer con tu CSS. Muy bien, entonces tenemos nuestros estilos aplicados. A ver cómo se ve eso. Adelante y refresca. Ahí vamos. Está todo ahí. Eso no estuvo tan mal, ¿verdad? Tenemos nuestro texto azul fondo gris, pero luego un párrafo leído. Ahora bien, este método de agregar CSS aún no es exactamente ideal. Es decir, ¿y si tienes múltiples páginas en tu web y todas usan los mismos estilos? Aquí es donde las hojas de estilo externo serán útiles, Y en realidad esa es generalmente la mejor práctica por los estándares actuales. Entonces déjame mostrarte cómo configurar eso. Vamos a crear un nuevo archivo y seguir adelante y guardarlo como estilo dot CSS. Está bien. Solo tienes que copiar todos los estilos que ya tenemos aquí, y podemos deshacernos de este material extra y podemos pegarlo todo en nuestro estilo dot CSS. Ahora, antes de volver a nuestra página, también tenemos que vincularla a nuestro documento HTML. ¿ Verdad? Por lo que la ventaja de esta hoja de estilo externa es que solo puedes vincularla a cada documento HTML que tengas. Por lo que si tienes varias páginas, puedes usar la misma hoja de estilo para cada página. Entonces la forma en que hacemos eso es mediante el uso de la etiqueta de enlace que golpeas la pestaña, es probable que veas la hoja de estilo rellenada para ti. Y en realidad no tienes un archivo maestro CSS. Eso es solo, supongo, un marcador de posición para tu archivo real. Entonces lo que vamos a hacer es añadir estilo punto CSS y vamos a ver cómo se ve. Refrescar. Está bien. Entonces, como puedes ver, tenemos todos nuestros estilos todavía ahí, Así que eso significa que nuestra hoja de estilo externa está funcionando. Ahora agreguemos algunos de los estilos que realmente necesitamos para este proyecto. Entonces vamos a seguir adelante y simplemente deshacernos de muchas de estas cosas aquí. Pero vamos a mantener el selector de bloque de texto ahora para el color del texto para, como, párrafos y cosas así. mí me gusta usar un color que no es del todo negro, algo así como un gris oscuro, y puedes conseguir ese tipo de control finito y tus colores. Si usas algo llamado valor hexadecimal. Y si no estás familiarizado con los valores hex o los colores hex, solo recomendaría hacer una búsqueda en Google para el selector de color hex. Y en realidad, en los propios resultados de búsqueda de Google, se le ocurrirá un selector de color que podrás usar, y podrás escoger tu color favorito. Tengo una preseleccionada aquí solo para ahorrar tiempo, así que voy a pegar eso aquí. Y así será tu valor hexadecimal. Entonces sigamos adelante y refresquemos y veamos qué obtenemos. Está bien, entonces es un cambio tan sutil. Realmente no se puede decir si se trata de un gris oscuro o negro, así que quiero presentarte una gran herramienta que puedes usar en cada navegador que hay. Se llama la Herramienta Inspector o a veces se llama la consola Desarrollador. Pero básicamente puedes seleccionar cualquier cosa de tu página haciendo clic derecho y click en Inspeccionar, y verás esta herramienta que aparece donde podrás ver todo tu HTML. Puedes pasar el cursor sobre él y ver lo que estás mirando y cuando haces clic en un elemento aquí . Puedes ver todo el estilo CSS que has aplicado a ese elemento, y podemos ver que tenemos nuestro color aquí, y en realidad es porque se está heredando de un padre, ¿no? Así es porque CSS se transmite a los Niños de cada bloque. Entonces si aplicamos algunos estilos a nuestra etiqueta o tarjeta principal, entonces se va a transmitir a sus Hijos también. Y quiero mostrarte una cosa más que puedes hacer con esta herramienta. En realidad puedes previsualizar los cambios en tu CSS. Entonces digamos que quería ver cómo se ve con texto rojo. Ver, los cambios se hacen al instante. También podrías agregar nuevos estilos. Entonces digamos que quería agregar un color de fondo. Ahí tienes y solo debes saber que esto no está haciendo cambios en tus archivos. No está ahorrando nada. Si refrescas la página, simplemente se restablece. Entonces esto es solo previsualizar las cosas. Muy bien, vamos a añadir algo más. Desgarró una página, tal vez, ah, color de fondo en nuestro estilo dot CSS. Vamos a apuntar al cuerpo. Entonces vamos a usar el selector de elementos para eso, y eso va a ser seleccionando nuestra etiqueta de cuerpo. Entonces vamos a añadir un color de fondo. Y tengo otros valores hexagonales pre seleccionados aquí. Entonces voy a pegar eso y vamos a ver cómo se ve. Ahí vamos. Muy bien, así que tenemos nuestro CSS trabajando con nuestro HTML en la siguiente lección. Quiero mostrarte algunas formas en las que puedes organizar un poco mejor tu proyecto de sitio web, y también tal vez podamos añadir algo de textura al fondo de nuestra tarjeta antigua. 8. Imágenes de fondo y enlaces relativos: lejos, ¿verdad? Por lo que hablamos un poco sobre los colores de fondo. Pero, ya sabes, también puedes agregar imágenes de fondo. Por lo que quiero recomendar un gran sitio web para eso. Ya sabes, nunca puedo recordar a la chica porque es un poco complicado. Pero si buscas en Google patrones sutiles, es el primer resultado aquí. Por lo que este es un gran recurso porque cuentan con una excelente selección de fondos sutiles para tu página web. Pero puedes previsualizarlos y puedes buscar algo que estés buscando, como quizá papel y puedes encontrar todo tipo de texturas de papel. Busquemos algo extremadamente sutil que me recuerde algo así como, ah,acciones de ah, tarjetas de visita. Uh, vamos a ver aquí. A mí me gusta este papel groove. Sí, se ve bastante bien. Entonces todo lo que tengo que hacer descárguelo, vas a descargar un archivo ZIP, vas a abrir eso, y vamos a usar la versión más pequeña. Entonces vamos a copiar eso en nuestro proyecto. Y aquí vamos. Tenemos nuestros activos. Sigamos adelante y usemos eso como fondo. Entonces volvamos a nuestro código. Y vamos a ver, me gustaría que eso sólo se aplicara a la propia tarjeta. Voy a apuntar a esta tarjeta selectora. Yo solo uso la señal numérica para apuntar y yo d. Y la idea es tarjeta. Vamos a aplicar una imagen de fondo y la chica será simplemente papel groove. Tienes Ping ahora, una cosa a tener en cuenta Por cada estilo CSS que escribes, siempre quieres incluir ese punto y coma al final. Guardemos esto y ya no necesitamos esto y vamos a refrescarnos. Está bien, ahí está nuestro patrón. Es muy sutil, pero está ahí. Ya lo puedes ver. Ya sabes, aquí no tenemos muchos archivos, pero esto podría ponerse un poco difícil de manejarlo. Sería bueno tener un poco más de estructura a nuestro proyecto porque a medida que agregamos más activos decimos que tenemos una página web más grande en la que estamos trabajando. Vamos a querer un grupo cosas en carpetas diferentes, ¿verdad? Bueno, claro, podríamos simplemente crear algunas carpetas nuevas, tal vez una para imágenes. Aquellos de ahí tal vez 14 CSS que ahí dentro, eso es bonito y organizado. Pero, ¿qué pasa ahora? Dedo del pie todos nuestros eslabones, todo se rompe. Entonces, ¿por qué se rompió? Bueno, porque le estamos diciendo al navegador groove paper dot ping se encuentra directamente en nuestra ruta del proyecto , pero ese ya no es el caso. Ahora es una imágenes. Lo mismo con nuestra imagen principal estaban diciendo perfil que JPEG se encuentra en nuestra ruta del proyecto, pero ya no el caso. ¿ Cómo nos movemos por esto? Bueno, tenemos que proporcionar el camino, y lo que usamos en el desarrollo web típicamente es un camino relativo. Entonces en lugar de teclear todo el sitio web y luego el camino, no necesitamos hacer eso. Si todo está en el mismo servidor, solo podrías usar la ruta que es relativa al archivo con el que estás trabajando. Entonces en este caso son archivo está en la ruta y queremos acceder a una imagen que está en la carpeta de imágenes. Por lo que escribimos imágenes slash perfil J pick. Echemos un vistazo, uh, ¿ vuelven las imágenes? ¿ Y nuestra hoja de estilo? Si hicimos lo mismo y nos refrescamos, no estamos viendo nada. Bueno, por una parte, necesitamos cambiar el camino a la propia hoja de estilo. Entonces en este momento no estamos recibiendo ningún estilo CSS. Hagamos eso primero de vuelta en nuestro HTML, cambiemos el camino al estilo de barra inclinada CSS que CSS porque estamos aquí. Queremos acceder a archivo en el interior. CSS Refrescar. De acuerdo, hay estilos atrás, pero todavía no tenemos el fondo. ¿ Por qué es eso? Bueno, porque el estilo dot CSS no está en la ruta del sitio. Está dentro del directorio CSS. Entonces lo que necesitamos hacer en realidad es salir de ese directorio y luego entrar en el directorio de imágenes para llegar a nuestro groove paper ping. Hay una sintaxis para eso, y básicamente son solo dos puntos y una barra. Eso nos está diciendo. Muy bien, retrocede un directorio y luego acceda al directorio de imágenes. Y ahí es donde encontrarás la imagen. Guardemos y le demos una actualización. Ah, ahí vamos. Está funcionando de nuevo. Genial. En nuestra siguiente lección, hablemos un poco más sobre encontrar propiedades y estilo Algunos de estos enlaces 9. tipografía: en lo que va de este proyecto, acabamos de utilizar la fuente predeterminada para el navegador, que suele ser una fuente Serra. Y no es ideal para cada proyecto, ¿verdad? Entonces echemos un vistazo a algunas de las propiedades para que puedas usar para iniciar un tu fondo. Lo que me gusta hacer es establecer una fuente base en la propiedad body para que esa fuente sea heredada por todos sus Hijos. Te mostraré lo que quiero decir con eso. Entonces usemos la propiedad font. Y primero vamos a poner un beisbol en 16 píxeles. 16 píxeles es, ah, más o menos un estándar Web. Por lo que me gusta quedarme con ahora. Agregaremos un tamaño de fuente de 16 píxeles en una barra inclinada y luego altura de línea después de eso, que vamos a hacer una. Y eso es sólo decir que no queremos que cada línea de texto ocupe más espacio del que realmente son los personajes. Entonces, ya sabes, una altura de línea de un personaje, ¿ verdad? De acuerdo, entonces a continuación lo vamos a mantener muy simple, y sólo vamos a especificar bien, queremos fondo Ariel si está disponible. Si no, entonces San Serif. ¿ De acuerdo? Y se puede ver que de inmediato cambiaron todas las fuentes de la página. ¿ Cómo sucedió eso? Bueno, es porque con CSS, si tuviste un estilo a un elemento padre, todos sus Hijos también heredarán esos estilos. Entonces si inspeccionas este elemento principal, verás que los mismos estilos de fuente se heredan del cuerpo. Ahora bajemos a decir nuestros encabezamientos. Ahora ¿Y si quisiéramos encabezamientos más pequeños? Bueno, echemos un vistazo a lo que está usando ahora. Bueno, está usando una unidad de medida diferente llamada a las unidades M. M son básicamente una forma de tomar la fuente del elemento padre y multiplicarla por un cierto número. Entonces en este caso, está diciendo, OK, toma la fuente base de 16 píxeles, multiplícala por dos. Entonces pasemos a nuestro código y envolveremos estos encabezados en un elemento de bloque. Vamos a darle una clase de encabezado y mover estos elementos dentro de todo bien y de vuelta a nuestro CSS. Vamos a seguir adelante y en nuestro fondo base estilos en. A mí me gusta copiarlos directamente desde el navegador, pegarlos aquí, y ahora vamos a añadir nuestra nueva fuente. Entonces para los encabezados, para el encabezado tres y le vamos a dar un tamaño de fuente de 0.8 a. M. Echemos un vistazo a eso. Muy bien, así que es un poco más pequeño, Pero el Texas en realidad dentro del elemento H uno en el elemento H dos, que tienen sus propios tamaños de fuente aplicados, esto a menudo puede llegar a ser bastante confuso para la gente. Es decir, ¿y si el bloque de texto tuviera su propio, uh, tamaño de fuente de tres m y luego Oh, Dios mío, cómo se calcula todo esto? Correcto, para que se pueda poner un poco complicado. Pero hay otra unidad de medida que podría resolver ese problema para ti. Y eso es reino. Si solo agregas un r al frente, volvieras a la normalidad, ¿ verdad? Tan bien, casi así dirá Bram. De acuerdo, no me importa el padre. Yo sólo quiero ser relativo a la base peleada, así que va a ver el tamaño de fuente del elemento del cuerpo. Entonces esto es verdaderamente decir 0.8 veces 16. Sigamos adelante y cambiemos nuestro código para usar llanta. Refresca la página y seguimos siendo buenos. Ahora bien, ¿qué pasa con estos enlaces? Son de un color diferente al resto de la diversión. Bueno, los enlaces se cambian un poco diferente. Son interactivos, por lo que tienen algunas propiedades más con las que puedes trabajar. Entonces vamos a revisar eso. Si inspeccionas alguno de tus enlaces, verás en el inspector que tenemos este pequeño colon H o b Si haces click en eso, tienes un montón de estados de elementos diferentes con los que puedes trabajar. Lo que esto significa es decir, estás colocando el ratón sobre un enlace o decir uno de ellos activo o decir que tabulas a uno. Ves cómo es diferente ahí, mientras que cada uno es un estado diferente en el que puede estar este elemento. Entonces vamos a tener algunos estados flotando a su abrigo. Y en primer lugar, especifiquemos un color específico para nuestros enlaces. Yo mismo he ido adelante y escogí un color, así que pondremos eso en su color. Está bien, Y vamos a refrescarnos. De acuerdo, así que eso es un poco mejor. Ahora volvamos atrás y vamos a añadir un estado flotando justo otra vez. Tengo un color ligeramente diferente por un tiempo. Estamos flotando sobre bastante fresco, y ahora se cierne. Genial. Ahora puede que estés pensando, no quiero thes subraya, Así que si no quieres ningún subrayado bajo tus enlaces, puedes quitarlo diciendo decoración de texto. No, agreguemos ese estilo a nuestro código también. Está bien, etiqueta de ancla. Guárdalo. Refrescar. Ahí vamos. En el siguiente video, te voy a mostrar un par de bibliotecas que realmente me gusta poner algunos bonitos iconos y también darle estilo a la diversión aún más con las fuentes de Google. 10. Bibliotecas: mientras que el fondo aéreo es agradable, sería bueno especificar tu propia diversión, sobre todo si quieres que esto se vea un poco más profesional. Bueno, hay algunas bibliotecas gratuitas por ahí, y una de ellas son las fuentes de Google. Echémosle un vistazo. Por lo que si vas a fuentes dot google dot com, verás todas sus diferentes fuentes que puedes utilizar en tu página web. Te animo a mirar a través y encontrar tus favoritos. Tengo uno que como que me gusta, Así que voy a escribir en la p. T. Stands. Ahí vamos. Y vamos a sumar eso a nuestra selección. Una vez que hayas terminado de seleccionar todo lo que quieras en tu página web, abre esto. Como puedes ver, tienen algunas instrucciones bastante buenas, detalladas para ti. Por lo que tienen una etiqueta de enlace al igual que agregamos nuestra hoja de estilo. Sigamos adelante y copiemos eso y peguémoslo en nuestro HTML. Ahora queremos asegurarnos de que agregamos encima de nuestras hojas de estilo para que podamos usarlo dentro de nuestros estilos CSS porque lo que va a pasar es que el navegador va a leer este documento de arriba a abajo. Entonces, cualquiera que sea el recurso que sea necesario utilizar dentro de este documento CSS, debes asegurarte de que estén overtop. Entonces tenemos nuestro estilo. Si guardamos y refrescamos, no vamos a ver que nada cambie. Eso es porque ahora mismo sigue usando el fondo aéreo. Por lo que si vuelves a las fuentes de Google, verás que te muestran la familia de fuentes que deberías estar usando. Entonces vamos a seguir adelante y copiar PT Sands y vamos a nuestra hoja de estilo. Y lo que podemos hacer es agregarla justo frente a la aérea. Entonces esto está diciendo bien, preferimos PT Sands. Pero si eso no está disponible que bien, usa aérea. Pero si eso no está disponible, entonces está bien, solo usa cualquier arena que Sarah peleó. Entonces si decimos eso y refrescamos, ahí vamos, vemos RPT Sands. Genial. Entonces, ¿qué más podemos dio? Bueno, sería bueno reemplazar estos enlaces de texto por pequeños iconos. A lo mejor un ícono para el gin tub loco, tal vez el logo vinculado en y el logotipo de Twitter. Correcto. Bueno, hay una biblioteca gratuita, cuatro fondos iconos llamados fuente. Impresionante. Y aquí está. Entonces déjame mostrarte cómo usar esto en tu página web. Tienen instrucciones bastante simples. Basta con hacer click en, empieza a usar de forma gratuita. Y todo lo que tienes que hacer es lo mismo que hiciste con nuestra biblioteca de Google Font. Y en realidad tienen este práctico enlace de copia aquí. Entonces voy a usar eso. Lo mismo es antes de pegar esto en la derecha Ahí. Debería estar bien. Guárdalo. Y ahora veamos cómo podemos usarlo. Entonces si buscas el ícono que quieres en mi caso, voy a buscar olvida Hub. Ahí vamos. Por lo que tienen algunas opciones diferentes. Creo que voy a ir con la ronda uno. Voy a dar click en eso, y te muestra el HTML que puedes usar para ese ícono. Entonces voy a seguir adelante y copiar eso. Vuelve a mi proyecto y en lugar de get hub, lo pegaré aquí y veamos cómo se ve eso. Uh, ahí vamos. Tenemos un poco de logo get hub. Eso es bastante guay. Entonces hagamos lo mismo por los demás. ¿ Todo bien? Y veamos cómo se ve eso. Está bien, esto realmente viene, Así que tenemos nuestros iconos. Tenemos nuestra fuente personalizada de Google. Entonces en la siguiente lección, voy a hablar de cómo puedes posicionar cualquier elemento en tu página antigua. 11. Elementos de posicionamiento: una morsa, ¿verdad? Entonces tal vez estés pensando, ¿Cómo diablos vamos a mover todos estos elementos en la posición correcta y empecemos poco. Empecemos con estos iconos. Tienen unas pequeñas balas raras ahora y en realidad no funciona con iconos. Arreglemos todo esto. Entonces si inspeccionamos, echemos un vistazo a la diferencia entre los tipos de visualización. Si miramos al aliado, ese es el ítem de lista. Se puede ver que la pantalla es lista. El artículo tiene sentido, ¿verdad? ¿ Y algunos otros elementos? ¿ Al igual que un párrafo que está diciendo bloque de visualización? ¿ Y qué tal un chapuzón? Lo mismo bloque. Por lo que cada elemento viene con su propio estilo inherente, y usted quiere. Si quieres ver tus opciones, puedes decir display y luego ver qué recomienda. Hay un montón de tipos diferentes. No vamos a entrar en todos ellos, pero el que más nos va a ayudar en este momento es mostrar en bloque de línea. Volvamos a nuestro código y echemos un vistazo. Entonces, vamos a ver. Tenemos un montón de elementos aliados dentro, ¿verdad? Bueno, En lugar de agregar un estilo a cada elemento aliado individual, agreguemos un nombre de clase toe nuestro padre. Lo harás. Llamémoslo sin estilo porque vamos a eliminar el estilo predeterminado de nuestra lista y hacerlo nuestro propio. Ahora para nuestra clase sin estilo, vamos a decir OK para el elemento sin estilo. Queremos que cada elemento aliado dentro de él se muestre en elementos de bloque de línea que están en línea bloqueados. Este tipo de juego se envolverá como textos, pero permanecerá todo dentro de una cuadra. Sigamos adelante y guárdalo y veamos qué le hace eso a nuestro proyecto. Refrescar. Ah, ahí vamos. Lo tenemos todo horizontal, pero todavía hay mucho espacio aquí. Bueno, ¿qué está pasando aquí? ¿ Todavía hay algún estilo predeterminado aplicado al elemento U L? Y sólo apuntamos al aliado para deshacer algunos de estos estilos. Volvamos a nuestro código y arreglemos eso para apuntar a la U L. Sólo necesitamos apuntar a la clase sin estilo. adelante y eliminemos el estilo predeterminado diciendo el estilo de lista ninguno, que se deshace de las balas si siguen ahí, y también diremos relleno izquierdo cero. Ahora puede que te estés preguntando ¿qué es Patty? Bueno, primero, vamos a refrescarnos y ves que se deshace de ese espacio de la izquierda. Ahora vamos a ver qué relleno hay en tu inspector. Verás un bonito diagrama de lo que es esto. A esto se le llama el modelo de caja. El modelo de caja hace referencia a todos los diferentes tamaños pertenecientes al relleno de borde de margen y cómo se relacionan entre sí dentro de un elemento. A menudo es difícil entender por completo cómo funciona el modelo de caja hasta que realmente solo tienes que poner las manos en algún código y jugar con él. Por lo que los animo a hacer lo que estoy haciendo ahora. Ve cómo interactúan las cosas y echa un vistazo a este pequeño diagrama inteligente para ver cómo funciona. De acuerdo, así como como colocamos estos iconos de manera horizontal, bueno, podríamos hacer lo mismo con nuestra imagen y nuestro texto, ¿no? Entonces sigamos adelante y hagamos eso en nuestro código. Entonces, ¿cómo vamos a hacer esto? Echémosle un vistazo. Tenemos un bloque de imágenes y un libro de texto, por lo que podríamos simplemente agregar una visualización de bloque en línea a cada uno de estos bloques. Vamos a probar eso para que estamos agregando una visualización de bloque en línea tanto al bloque de imagen al bloque de texto. Guardémoslo y veamos cómo se ve eso. Está bien. Bueno, ese es un buen comienzo. Es un poco raro de mirar. Para empezar, creo que el texto debe estar alineado a la parte superior de la imagen, ¿ verdad? Entonces veamos cómo podemos hacer eso de nuevo en nuestro código. Añadamos también una línea vertical superior y actualicemos eso. Ahí vamos. Eso está un poco mejor ahora. mí me gustaría un poco de espaciado entre estos dos elementos. Y como acabamos de aprender, podemos hacer eso ya sea con relleno o margen. Ya que realmente sólo necesitamos espaciar a la derecha de la imagen, voy a añadir un margen derecho a nuestra imagen. Entonces aquí, bajo estilo triste a nuestro bloque de imagen y diremos, margen, derecha, Uops, y sólo le daremos un espacio de un m. Guárdalo y vamos a comprobarlo. Está bien, así que eso se ve un poco mejor. ¿ Qué más podemos agregar? Bueno, vamos a tener algo de relleno alrededor de toda la tarjeta, en realidad, Así que vamos a ir al selector de cartas y agregar relleno que va a agregar relleno alrededor toda la tarjeta como vimos antes, así que palmaditas y le dirá de nuevo a em, Guardar y refrescar. Está bien, se ve un poco mejor. De acuerdo, así que esa es una visión general de cómo funciona el modelo de caja y cómo puedes posicionar y espaciar las cosas en la página. Ahí hay mucho más por aprender, pero esto cubre lo básico. En nuestro próximo video, vamos a hablar de dimensionamiento. 12. Redimensionado de elementos: Bueno, esto realmente viene por aquí, pero esa imagen es demasiado grande. Hablemos de algunas de las diferentes formas en que puedes cambiar el tamaño de los elementos ahora una forma muy sencilla aplicar dimensionamiento a las imágenes. Es solo usar sus atributos con y altura. Entonces en mi etiqueta de imagen, podría simplemente agregar un atributo de ancho igual y, digamos, 1 50 Y el navegador interpretará eso como 150 píxeles y gran mirada a eso. También aplicó una altura para nosotros, lo que mantuvo la relación de aspecto correcta. Mis imágenes cuadradas por lo que el ancho y la altura deben ser iguales. ¿ Qué crees que pasará si aplico una altura diferente a mi dentro del escenario? Vamos a comprobarlo. Digamos que en su lugar 100 píxeles. Ah, me han empapado, así que ten eso en mente. Normalmente no quieres agregar tanto con como altura a las imágenes, pero en cambio solo debes dejar que el navegador preserve la relación de aspecto por ti. Ahora esa es una gran manera de sumar dentro de la altura. Pero en el desarrollo Web moderno, típicamente se maneja dentro de CSS. Entonces veamos cómo puedes hacer lo mismo con CSS en su lugar. En primer lugar, vamos a eliminar estos atributos extra y vamos a nuestro CSS para que simplemente podamos apuntar cualquier imagen dentro de la clase de bloque de imagen. ancho o la altura del encabezado es bastante simple. En CSS, solo podrías usar la propiedad width y darle un valor de píxel o un porcentaje, o M. Sean cuales sean tus preferencias, me quedaré con píxeles aquí y nos quedemos con 150 así. A ver qué nos da eso. Genial. Ahora estas propiedades de ancho y alto también pueden aplicarse a otros elementos de tu página, por lo que también podríamos usarla para limitar el ancho de nuestra tarjeta. Entonces eso no se extiende a través de toda la página aquí. Entonces vamos a sumar aquí a nuestro elemento de tarjeta. Por ahora, solo probemos un con de 600 píxeles y veamos cómo se ve eso. Volvamos atrás y refresquemos. Genial, por lo que puedes ver la tarjeta en sí ahora está limitada a 600 píxeles de ancho. No está atravesando toda la ventana. Ahora personalmente siento que esto es un poco demasiado amplio. Aquí hay mucho espacio extra. Es un poco raro. Vamos a encogerlo un poco esto, y esto puede ser diferente para tu nombre. Si tienes un nombre más largo o un nombre más corto, solo siéntalo y ve qué te queda bien. Ah, digamos que tal vez cinco 10 píxeles se ven un poco mejor ahora. Una cosa a tener en cuenta es el diseño receptivo. Por ejemplo, ¿Qué pasa si estamos viendo esto en una pantalla pequeña, como lo hará un dispositivo móvil en nuestro inspector? Podemos previsualizar eso mediante el uso de esta útil herramienta para alternar dispositivos. Desafortunadamente, nuestro diseño no es muy receptivo en este momento. Ya que estamos usando valores de píxeles fijos, el navegador básicamente está reduciendo las cosas, tratando de encajar todo dentro del dispositivo. Esto es lo que podemos hacer para evitar eso. Además de nuestro con valor, también podemos agregar un máximo con y configurarlo al 100% para que solo le diga al navegador que nunca escale esta tarjeta más allá del 100% de la pantalla. De esa manera, en dispositivos aún más pequeños como un iPhone cinco, el texto simplemente se envolverá hacia abajo, y nunca hay desplazamiento horizontal. Está bien. Antes de que nos olvidemos, vamos a copiar estos estilos y ponerlos en nuestro código. Por lo que vamos a sustituir este original por. Ahí vamos. Solo asegurémonos de que todo siga funcionando. Se ve genial. Todavía hay una salvedad, sin embargo. Desafortunadamente, no todos los navegadores son iguales. Echemos un vistazo a esta misma página en Firefox. Abre el Inspector. Entonces se ve bien ahora. Pero luego echa un vistazo a cuando me desplaza hacia la derecha. No queremos nada de ese desplazamiento horizontal, así que parece que en Firefox, el máximo con no está funcionando del todo. El problema aquí es una complicación con nuestro modelo de caja. este momento, el navegador está aplicando nuestro max con al contenido de nuestra caja. Pero el relleno está agregando algunos adicionales con más allá del tamaño de nuestra página. Y podemos evitar eso agregando otra propiedad llamada dimensionamiento de caja y agregando un valor de box border. Esto le dice al navegador que aplique el con hasta el borde de nuestro modelo de caja en lugar de restringirlo al área de contenido. Sé que esto es un poco de conceptos avanzados, así que no sientas que tengas que entender completamente lo que está pasando aquí, pero solo quería asegurarme de que tienes esta compatibilidad arreglada dentro de tu diseño. Así que asegúrate de agregar eso ahí dentro. Vamos a seguir adelante y copiar esta propiedad extra en nuestro código. Y echemos un vistazo primero a Firefox. ¿ Todo bien? Genial. ¿ Y qué pasa con el cromo? Está bien. Se ve bien. Muy bien, esto es agradable y receptivo ahora. Entonces en el siguiente video, te voy a guiar por algunas de las formas en que puedes alinear estos elementos dentro tu página. 13. Alineación: por lo que a continuación. Sería genial si pudiéramos posicionar toda esta tarjeta en el centro de la página. Bueno, hay algunas formas en que puedes posicionar elementos usando CSS y repasemos las diferentes formas en que podemos hacerlo. forma en que posicionas los elementos depende realmente del tipo de pantalla. En el caso de un elemento de párrafo, por ejemplo, podría agregar el texto de estilo alinear centro, y lo centra dentro del párrafo. En este caso, el párrafo no es muy amplio, pero lo dejaremos como alineado a la izquierda, que es el predeterminado en el caso de elementos de bloqueo en línea como nuestros ítems de lista. Bueno, esos podrían estar alineados usando el mismo método de alineación de texto para que pueda agregar un centro alineado de texto y centraría todos estos en elementos de bloque de línea. Pero no vamos a hacer eso. Lo que queremos alinear es nuestra tarjeta general, que, como se puede ver, es un elemento de bloque. Los elementos de bloque son un poco más desafiantes de centrar. Lo que podemos hacer es utilizar el margen para que podamos proporcionar un espaciado igual tanto en el lado izquierdo como en el derecho del bloque. Entonces la forma en que puedes hacer eso es agregando margen auto, esto le dice al navegador, bien, determina automáticamente el margen máximo tanto para el lado izquierdo como para el derecho de este elemento y simplemente igualarlos. Y eso nos da una alineación central. Ahora, más allá, podríamos sumar a este margen porque queremos un poco de espaciado desde la parte superior de la página. ¿ Verdad? Bueno, ¿cómo hacemos eso? Podríamos agregar un margen superior y darle una M. Y ahí vamos. O también podríamos hacer esto. Ahora, ¿cómo diablos funcionó eso? Bueno, echemos un vistazo al diagrama aquí. Es aplicar un M o 16 píxeles en este caso a la parte superior e inferior, y luego se calculan automáticamente la izquierda y la derecha. El motivo de esto es porque en realidad se trata de una propiedad abreviada. Si hago clic en esta flecha aquí, se puede ver que en realidad está determinando todas estas propiedades separadas. Por lo que el margen es taquigrafía para un margen. Margen superior, margen derecho, agua de fondo e izquierda. Y está en ese orden. Entonces di que querías Ah, margen superior de una m Y querías un margen derecho de a em. Y querías que el fondo fuera de tres m y que lo dejara para él. No sé por qué alguna vez querrías eso, pero solo para ilustrar, puede ver que se aplica a cada uno en ese orden. Entonces vamos a dejarlo. Dejémoslo en ah a M auto. Eso nos da un poco de espacio en la parte superior, más la alineación centrada. Muy bien, sigamos adelante y aplicamos estos estilos a nuestro código antes de que nos olvidemos. Vamos a aplicar esta tarjeta de dientes aquí, arreglar nuestro espaciado, guardar y refrescar. Está bien, ahí vamos. ve bastante bien. Ahora hay otra manera. Podrías alinear artículos que yo quería simplemente repasar brevemente. No lo usaremos en este proyecto, pero digamos que querías mover esta imagen hacia la derecha. Bueno, podrías hacerlo fácilmente usando la propiedad float por defecto. No hay flotador. Pero si flotabas bien, bueno, mira eso. Mueve la imagen hacia el lado más derecho antes de que golpee el relleno del auto. Correcto. Por lo que puedes usar eso a tu disposición también. Mucha gente va a flotar cosas a la izquierda. Ah, con el fin de que los sitios web sean más receptivos. No vamos a usar esa técnica en este proyecto, pero sólo tienes que saber que eso también está a tu disposición Old. 14. CSS avanzado: derecha, Así que esto realmente viene. Hay un par de tuits más que quería añadir que son poco más avanzados, pero creo que estamos listos para abordarlos. Entonces, en primer lugar, estaría bien si pudiéramos hacer click en este enlace y se abriría a nuestro cliente de correo electrónico . ¿ Verdad? Entonces pasemos a nuestra edad a enviar correos, y sólo vamos a añadir un enlace a esto. Como recuerdas, los enlaces son ahora la etiqueta ancla para la H ref. Vamos a agregar una chica especial que básicamente le dice al navegador que abra el cliente de correo en la computadora de la persona para que eso sería correo demasiado colon. Y luego vas a agregar cualquier dirección de correo electrónico a la que quieras enviar correo electrónico. Volvamos a nuestro navegador, actualicemos, y ya ves que es un enlace. Sigamos adelante y pinchemos sobre él, y se abrió en mi otra ventana. Pero te puedo mostrar aquí. Ahí está. Por lo que abrió mi bandeja de entrada. No tengo macho configurado en mi computadora ahora mismo. No voy a hacer eso ahora mismo. ¿ Cuáles son algunas otras cosas que podemos agregar? Bueno, así como nosotros centrados horizontalmente somos tarjeta. Sería bueno tenerlo centrado verticalmente también, por lo que está justo en medio de la página. Lo creas o no, eso es un poco avanzado, pero te voy a mostrar cómo hacerlo. Por lo que hay una propiedad bastante nueva disponible para la mayoría de casi todos los navegadores. En este punto, se llama Flex Box, y hay muchos detalles sobre Indian sobre cómo funciona Flex box. Se puede complicar un poco, pero solo te voy a mostrar básicamente cómo usarlo para alinear verticalmente elementos. Porque realmente, esa es una de las mejores formas de hacerlo en estos días con navegadores modernos. Entonces vamos a deshacernos de esto y volvamos a nuestro código. Entonces la forma en que funciona Flex box es que necesitas un elemento envoltorio general, y luego puedes posicionar elementos dentro de eso. Entonces vamos a usar tesis rapero TIC como nuestro elemento padre general. Y vamos a ver, vamos a seguir adelante y añadimos arriba de la tarjeta, y el primer paso es sólo para que se muestre flex. Ahora, para centrarnos verticalmente en la página, vamos a necesitar asegurarnos de que este elemento esté ocupando toda la página. ¿ Verdad? Entonces vamos a sumar, ah, altura del 100%. Entonces de esa manera ocupará toda la página, y vamos a decir dirección flex debe ser columna porque queremos centrar verticalmente , justificar el contenido debe ser centro. Y una línea de partida también debe ser centro. Entonces, ¿qué? Eso salvó. Veamos qué tenemos hasta ahora. Refrescar. Y bueno, no pasó nada. ¿ Por qué es eso? Echemos un vistazo. ¿ Todo bien? Tan difícil problema aquí es que Sí, estamos ocupando el 100% de nuestro cuerpo, pero su cuerpo no es el 100% de su ventana. ¿ Por qué es eso? Bueno, tampoco lo es el propio documento HTML. Entonces, ¿cómo podemos asegurar que toda la ventana sea retomada por nuestro documento HTML? El modo en que me gusta hacerlo es en realidad agregar estilos al documento mismo. Por lo que puedo agregar una altura del 100%. Eso asegura que el documento HTML ocupe toda la página y yo podría hacer lo mismo por el cuerpo. Y ahí vamos. Vamos a seguir adelante y aplicar esos estilos a nuestro código. Voy a poner eso en la parte superior HTML y la altura del cuerpo. 100%. Está bien, Todo está funcionando como se esperaba. Impresionante. Veamos un par de cosas más que me gustaría mucho que estos rincones estuvieran un poco alrededor. Y así se parece más a una tarjeta. Bueno, probemos eso. El modo en que podemos hacerlo es agregando lo que se llama Radio de frontera, y es bastante simple. Por lo que junto con frontera, hay frontera, radio y debilitar. Simplemente aplica el estándar, ya sea pixel o M lo que prefieras. Yo sólo voy a darle un digamos, radio de cinco píxeles. Eso se ve bastante bien. Pero, ya sabes, en realidad, siento que tal vez deberíamos usarlos así que vamos a hacer 0.8 m Ah, sí, eso es lindo. De esa manera es relativo al resto de la página. Entonces vamos a guardar eso en nuestro código, encuentre nuestra tarjeta y en nuestro radio fronterizo y refresquemos. Genial. Muy bien, un último retoque. Sería realmente bonito si pudiéramos añadir una sombra sutil ahí, así que realmente salió del resto de la página. Veamos cómo se puede hacer eso. Lo que me gusta hacer es ir a un generador de sombras de caja porque hay mucho para boxear sombras. No tengo ganas de calcularlo por mi cuenta. Por lo que generador de sombras de caja y hay una tonelada de estos en línea Escoge tu favorito. Simplemente voy a dar click en el 1er 1 que veo. Y los controles son bastante intuitivos año. Entonces es una vista bastante buena, diría yo. Uh, vamos a ver. Hagámoslo un poco más sutil. De acuerdo, así que vamos a intentarlo. Todo lo que tienes que hacer es copiar todo esto y pegarlo en tu tarjeta. Vamos a volver a nuestro navegador, y ya no necesitamos esto. Vamos a refrescarnos. Está bien, eso es impresionante. Entonces ahora que tenemos nuestro diseño hecho, creo que es hora de ponerlo en línea para presumir. ¿ Verdad? Entonces en el siguiente video, te voy a mostrar cómo hacer eso gratis 15. Publica tu código: una morsa. Correcto. Por lo que tenemos nuestro producto terminado. Esta es nuestra estructura de archivos, como ustedes saben, nosotros para conseguir todos estos archivos en la web para que pueda ser accedida por cualquier persona en el mundo. ¿ Cómo lo hacemos? Bueno, hay un montón de opciones por ahí. Podrías comprar algún hosting de. Ya sabes, los diversos anfitriones por ahí. Seguro que has visto comerciales para ellos. Ah, vamos, papi, Anfitrión Gator. Ah, hay una tonelada de ellas y te lo hacen bastante fácil. O podrías mantenerlo simple e ir a conseguir hub. Como saben, me encanta conseguir ayuda porque está en mi tarjeta. Está bien, así que vamos a levantarnos y está bien. Ya tengo una cuenta. Yo soy muy activo aquí. No vas a ver todo esto, pero lo que quieres hacer es crear un nuevo repositorio. Una vez que te inscribas, olvida hub. Puedes crear un repositorio el cual es básicamente solo un lugar para poner todos tus archivos. Ahora bien, no tiene que ser público si no quieres que lo sea. Pero si querías estar en línea, entonces probablemente deberías mantenerlo público. También es genial tener una cuenta get hub. Si estás tratando de entrar en la comunidad de desarrollo Web Ah, es un gran lugar para presumir de lo que puedes hacer en cuanto a codificar lo activo que eres. Ah, y solo para comunicarse con otros desarrolladores porque hay muchos proyectos de código abierto en levantarse a los que puedes tener acceso y simplemente contribuir a ti mismo. En fin, lo que hacemos aquí es que necesitamos llegar a un nombre de repositorio. Esto también tipo de empate en la U R l de tus tarjetas de visita. Por lo tanto, ten eso en cuenta cuando se te ocurra tu nombre. Yo sólo voy a mantenerlo sencillo. Por lo que en el nombre se tarjeta tutorial y no tienes que suministrar una descripción. Sólo voy a saltarme eso a partir de ahora. Vamos a mantenerlo público, y quieres inicializarlo con un leerme solo por diversión Estos Todo bien, Así que vamos a seguir adelante y crear un repositorio. Y aquí esta es tu oportunidad de agregar todos tus archivos. Así que simplemente ve aquí a subir archivos, y desde aquí puedes literalmente simplemente arrastrar y soltar todos tus archivos en la ventana. Entonces selecciona todo lo que tenemos en nuestro directorio ah tutorial y ponlo en tu repositorio. Va a subir todo con los directorios y todo. Y esta es tu oportunidad de decir, De acuerdo, ¿Qué acabas de hacer? Bueno, viene con un texto por defecto, y eso me gusta. Entonces solo voy a cometer cambios de esa manera. Entonces es cometer cambios. Esto puede tardar un poco. Una vez que esté listo y funcionando a continuación, vamos a pasar a la configuración. Aquí es donde puedes seguir adelante y lanzar tu sitio web. Entonces desplácese hacia abajo para obtener páginas de hub, queremos elegir una fuente. Debería ser la rama maestra. Guárdalo. Y si te desplazas hacia abajo, verás que las páginas de ayuda de obtener ahora está habilitada, y puedes cambiar el dominio. Pero estoy contento con esto. Entonces si haces clic en tu dominio, ahí está. Ahora tu código está vivo y puedes compartir ese euro con quien quieras 16. Para terminar: Enhorabuena. Has dado tus primeros pasos para aprender HTML y CSS, y tienes una página Web genial para demostrarlo. Ahora bien, no te preocupes si algo de esto es un poco difícil de retener, es mucha información. Sólo recuerda que tienes el código que acabamos de escribir para referencia. También tienes la documentación india, así que siéntete libre de mirar a través de eso si necesitas algunos consejos. Además, no tienes que parar aquí. Podrías llevar este proyecto un par de pasos más allá. Si estás listo para algunos retos de bonificación, te recomendaría un par de cosas en las que podrías pensar, agregando una imagen de fondo a la página Web. Podrías jugar con el radio fronterizo y convertirlo más en un estilo Kirby o en un estilo circular. También podrías ampliar esta tarjeta y convertirla más en una mini bio. Podrías entrar en algunos de tus antecedentes algunas de tus habilidades. Una vez que estés contento con tu diseño, te animo a compartirlo en la Galería de Proyectos. Tengo ganas de ver algunos de los productos terminados por ahí también. Oye, si te gusta este curso, por favor siéntete libre de seguirme aquí en cuota de habilidad. Además, puedes seguirme en Twitter y me encantaría cualquier comentario que tengas para mí en una reseña también . Entonces de todos modos, gracias por afinarse y un revestimiento feliz viejo.