Transcripciones
1. Introducción: Hola, soy Aga y soy diseñadora de codificación. Si alguna vez quisiste tener tu propio sitio web pero estabas cansado de aprender constantemente la codificación y pensabas que en realidad esto no es para ti, ya es hora de unirte a mis clases. Te voy a mostrar que codificar es divertido, y en realidad puedes codificar tu propio sitio web en un corto periodo de tiempo. El resultado de las clases sería el sitio web creado. Preparé un diseño especial para ti. De verdad quería mantenerlo funky, fresco, y colorido. Vamos a codificar en HTML y CSS, pero no te preocupes, te mostraré todo lo que se necesita. Espero que te guste el diseño, y espero que te diviertas mucho mientras aprendes a codificar. No puedo esperar a verte en la lista de alumnos. Nos vemos en las clases. Adiós.
2. Herramientas: Entonces hablemos de herramientas que vamos a usar en estas clases. En primer lugar, vamos a utilizar nuestro navegador web favorito. Normalmente uso Chrome. También puedes usar Firefox. Vamos a usar mucho las herramientas de dev. ¿ Cuáles son las herramientas de dev? Estas son herramientas de desarrollador web y están integradas directamente en cada navegador. Me gusta mucho usar herramientas de desarrollo en Chrome pero tal vez tengas diferentes preferencias. Veamos cómo podemos lanzarlos y qué es lo que realmente hay dentro. Entonces, tenemos el Chrome abierto. Hacemos clic derecho, inspeccionamos y
golpeamos, tenemos las herramientas de desarrollo abiertas en nuestro lado derecho de la ventana. Lo que puedes ver aquí es todo el código HTML de nuestra página web. Está aquí. Tenemos abierta la página web de Skillshare. Simplemente puedes comprobar qué parte del código es responsable del diseño. Por caso, si quieres saber y decodificar dónde está la navegación, solo
tienes que hacer clic en esta flecha y simplemente navegar hasta ella. Ahora bien, ya sabes que esta pieza de código se encarga de renderización de la navegación. Aquí, tenemos estilos. Podemos llegar al archivo CSS. Podemos volver a los elementos, por lo que nuestro código HTML y ver qué estilos se aplican aquí. Por ahora, podría parecer complicado pero no te preocupes, te lo
explicaré todo paso a paso. Si te gustaría tener esta ventana en otra posición, puedes decidir si debe ser dock a izquierda, o tal vez debería estar en una ventana separada. También podemos abrir herramientas de desarrollo en Firefox. La regla es la misma. Haga clic derecho, inspeccione elemento, y se puede ver la ventana de las herramientas de desarrollo que forman parte del navegador web Firefox. De nuevo, tenemos el código HTML. Tenemos el CSS. También podemos cambiar la posición de las herramientas de desarrollo. Por instancia, atracarlos a la derecha. Otra cosa que necesitamos tener es un editor de código. Te recomiendo usar Atom. Se puede descargar de forma gratuita desde el sitio web, atom.io. Está disponible para macOS y Windows. Si te gustan otros editores de código como Sublime Text, siéntete libre de usar lo que se adapte a tus necesidades. Por lo que resumiendo, vamos a usar el navegador web, las herramientas de desarrollo, y el editor de código.
3. Materiales: Te voy a mostrar dónde puedes encontrar los materiales que vamos a utilizar durante nuestras clases. Debajo de tu pestaña de proyecto, puedes encontrar archivos adjuntos a la derecha. Ahí está package.zip y hello-colors-psd.zip. En un package.zip, puedes encontrar exercise one folder y hello-colors, donde encontrarás toneladas de materiales útiles como guía de estilo, y hay colores y tamaños de fuente. Puedes encontrar esqueleto HTML, CSS, y todo el texto para el layout se guardan en archivo de texto hello-colors. También hay carpeta de imágenes, donde ya están preparados todos los activos. Si te gustaría jugar con el archivo PSD del layout que preparé para ti, puedes descargar el paquete hello-colors-.zip.
4. Ingredientes de los sitios web: Empecemos por descubrir cómo se construyen los sitios web. Siempre me gusta usar metáforas mientras aprendo algo porque es más fácil entender algunas nociones abstractas. Imaginemos que nuestro sitio web es igual que humano. Tiene esqueleto. Son muchos los mecanismos que controlan nuestro cuerpo y sí tenemos diferente color de piel, cabello, y nuestro propio estilo en cuanto a qué ropa nos gusta usar. Sitio web es igual que el mismo. Este plan esquelético aquí es lenguaje HTML. Construye la estructura de la página y tiene el contenido. Para todas las interacciones como mostrar, ocultar elementos, filtrar, buscar, y animaciones complejas, tenemos JavaScript. Por supuesto, no podemos olvidarnos de la estética. Para todos los estilos, llamémosles ropa para nuestra página web, usamos CSS. Voila! Durante estas clases, aprenderemos idiomas HTML y CSS, lo básico y lo más práctico que tienes que saber. Entonces, podremos construir el esqueleto del sitio web, llenarlo con los datos, y finalmente darle estilo como queramos. Decidiremos en tipografía, colores, activos como fondo e imágenes. ¿ Suena divertido?
5. Fundamentos de HTML: parte I: Ya es hora de empezar a codificar. Conocamos primero a HTML. HTML significa un lenguaje de marcado de hipertexto. Este lenguaje, como ya se mencionó, construye la estructura de nuestro sitio web. Es el esqueleto. Cada sitio web está construido con elementos HTML, y cada elemento tiene algo en él como texto o imagen. Tenemos diferentes etiquetas HTML y representan diferentes tipos de contenido. Tenemos encabezados, tenemos párrafos, tenemos tablas,
tenemos imágenes, así que deberíamos escribir nuestros códigos semánticamente. ¿Qué significa? Significa que cada elemento HTML tiene su propio significado. Si desea utilizar párrafo, tenemos que utilizar el elemento p. Es hora de codificar. Abramos el ejercicio uno. Esto está en tu carpeta de paquetes. Lo que suelo hacer es soltar la carpeta sobre el icono de Atom. Entonces, toda la carpeta ya está abierta. Hagamos clic en un index.html y tenemos este esqueleto de nuestra página web. Déjame explicarte lo que hay dentro. En primer lugar, iniciamos nuestro documento HTML con declaración DOCTYPE. No voy a entrar en detalles, pero es algo que se requiere. Gracias a esto. Nuestro navegador web entenderemos qué versión de HTML estábamos usando y qué es posible renderizar en el navegador web. Cada sitio web debe comenzar con elemento HTML. Basta con mirarlo, tiene etiqueta de apertura y la etiqueta de cierre. Se puede ver que la etiqueta de cierre tenía slash. Lo que esté dentro de la página web será renderizado. ¿Qué sigue? A continuación, tenemos la sección de cabeza. ¿ Te acuerdas cuando te decía que el sitio web es igual que humano? Bueno, se ve bastante similar porque tiene cabeza y cuerpo. Es por eso que mi analogía es bastante cercana. ¿ Para qué es la cabeza? Estos son los elementos que no se ven en la página web pero son muy cruciales. Por ejemplo, aquí tenemos el título, tenemos el juego de caracteres, qué tipos de codificación vamos a usar. Bueno, no tengo tiempo suficiente para explicar qué es eso en la codificación y cómo tiene efectos en nuestro sitio web pero solo tienes que creerme que es importante. Posteriormente, vamos a usar la sección de cabeza para enlazar las hojas de estilo y las fuentes externas, pero por ahora solo mantengamos esta sección de cabeza así. Todo lo que tiene ese cuerpo se rinde en la página web. Significa que es visible incluso si tecleamos algo aquí, lo
guardamos, y abrimos nuestro archivo de índice, vas a ver que cualquier cosa se renderice. Pero por cada texto, vamos a usar la etiqueta html para que nuestro contenido sea semántico. Empecemos con el rubro. Tenemos diferentes tipos de rubros. Cada rumbo comienza con h y un número. Se quiere decir que este es el rubro más importante, el encabezamiento superior. Si tienes llamada urgente probablemente la utilizarías para el título. “ Hola alumnos de Skillshare”. Está bien. ¿Qué falta aquí? Tenemos que cerrar la etiqueta. Ahora, nuestro código es correcto. Puedes guardarlo. Abre el navegador web, actualízalo, y mira que se muestra “Hola alumnos de Skillshare”. ¿ Sabes cómo abrir DevTools? Déjeme recordárselo. Haga clic derecho, inspeccione, y vemos nuestra página web. Tenemos sección de cabeza. Como les dije, no
se rinde en ninguna parte. Entonces, no se puede ver lo que significa este código. Pero para el cuerpo, podemos ver el encabezado y aquí podemos ver estilos aplicados. Estos son los estilos por defecto de nuestro navegador web. Si te gustaría cambiarlo, solo por favor sea paciente porque estamos iniciando el CSS último y previsualizar pronto. Aquí puedes editar el texto y se mostrará. Sólo por favor recuerda que cualquier cosa que se cambie aquí no se guardará en tu archivo local. Es solo cambio temporal, solo en el navegador web, y solo en tu computadora. Después de tu actualización de la página, el cambio se ha ido. Tienes que volver a tu archivo, tener esto cambiado, guardarlo y luego actualizarlo.
6. Ejercicio de HTML: parte II: Sabemos cómo lanzar DevTools, qué es HTML, y dónde debemos escribir nuestro texto HTML. Es hora de hacer ejercicio. Vamos a crear un sitio web muy básico que contendrá encabezamiento, párrafo, enlace a un sitio web externo, imagen, y lista de ítems. Como aún no conocemos CSS, no te
preocupes por la estética por ahora. Estamos empezando con el ejercicio una carpeta, donde tenemos un índice HTML. Abramos los archivos en Atom. Tenemos nuestros archivos abiertos en Atom. Lo primero es crear un encabezamiento. Utilizamos la etiqueta h1 ya que es el principal, el rubro más importante en la página web. Para el bloque de texto, utilizamos etiqueta p que significa párrafo. Paguemos aquí un bloque de texto. Estoy pegando la descripción de mis clases de Skillshare. El texto es bastante largo, así que podemos usar aquí una característica Atom realmente agradable. Hacemos clic en vista, activamos la envoltura suave, por lo que el texto está envuelto. ¿ Qué falta aquí? Bueno, la etiqueta de cierre. Al hacer clic en la etiqueta, se
puede ver para subrayar. Si eliminamos la etiqueta de cierre, no
podemos ver subrayado. Entonces, esta es una pista para nosotros de que algo falta. Recuerda lo de guardar el archivo, y más tarde podemos abrir el archivo HMTL, y ver que tenemos el encabezado, y el párrafo. Nuestro sitio web está bastante establecido, así que agreguemos una imagen. Agregamos una imagen escribiendo etiqueta img. No obstante, necesitamos agregar algunos atributos. Entonces, los atributos son otras propiedades que están conectadas con la etiqueta. Entonces, para img, será src lo que significa fuente, y como puedes ver la pista de Atom, es el atributo local a img tab. Entonces, ahora queremos sumar la fuente de nuestra imagen. Tenemos que sumar el camino a nuestra imagen. Rutas apuntarán tu archivo que deseas mostrar. Nos gustaría mostrar el archivo que es una imagen. Nos gustaría mostrar archivo que está en carpeta img, y tiene el nombre Skillshare.png. Si abres la carpeta exercise one, puedes ver que tenemos HTML indexado, y etiqueta img con este archivo, y queremos mostrar este archivo. Algo complicado aquí es agregar el camino apropiado. Entonces, necesitamos ingresar carpeta img, y seleccionar el archivo. En nuestro caso es Skillshare.png. Es muy importante no hacer el error aquí, los errores tipográficos, o el camino equivocado siempre es la causa de la imagen no cargada. También te debo una definición de etiqueta vacía. Como puedes ver, img no está cerrado cerrando etiqueta de cierre. Por lo general, escribiríamos algo así, pero no está pasando. Esto se debe a que img es vacío, o etiqueta vacía. Entonces, no tiene el contenido. En cambio, escribimos la barra en el interior de esta etiqueta. Otra cosa importante es el atributo alt. Alt es la descripción de la imagen, y es muy útil para las personas que usan lectores de
pantalla y les gusta saber qué se presenta en la imagen. Si la imagen tiene su significado, tiene su propósito, simplemente la
escribimos en alt, porque son carpetas de miniaturas clases de Skillshare, podemos escribir la miniatura de las clases de Skillshare. Si la imagen es más para fines
decorativos y no tiene información muy importante, solo
podemos dejar el alt vacío. Pero desde el punto de vista de la accesibilidad, es muy importante tener escrito este alt. Nos ahorramos. Entonces, reescribamos el alt, la miniatura de las clases de Skillshare, vamos a guardarlo. Podemos ver que la imagen está cargada, tenemos rumbo, el párrafo. Otra cosa con el atributo alt es que si tenemos el camino equivocado a la imagen, o simplemente no se carga debido a algunos problemas de rendimiento de su propio bajo ancho de banda. Entonces, dejemos que solo estropear el camino, se
puede ver que aquí se muestra el alt. Entonces, si la gente no puede ver tu foto, al
menos saben lo que aquí se presenta. Ahora, nos gustaría agregar un enlace en nuestro sitio web.Vamos a tenerlo antes de la imagen. Utilizamos una etiqueta, y lo mismo con img necesitamos otro atributo que escribimos dentro de una etiqueta. Aquí es el atributo href, que apunta a la dirección de la página web que vamos a enlazar. Tengamos el sitio web de Skillshare. Cierra la etiqueta. Ahorremos y veamos lo que está pasando en nuestra página web. Bueno, no podemos ver ningún enlace, aunque el código se genera, y lo podemos ver en DevoTools. No hay nada en lo que puedas hacer click. El motivo de eso es que no agregamos ningún texto entre abrir un, y cerrar una etiqueta. Entonces, aquí podemos escribir lo que queramos, y será el hipervínculo. Estamos escribiendo lo que se va a exhibir. Por lo tanto, da clic aquí para visitar la página web de Skillshare. Guardémoslo, y actualicemos la página. Como pueden ver, aquí tenemos el enlace. Si hago clic en él, se está abriendo la página web de este Skillshare. También podemos tener el sitio web abierto en una nueva ventana. Para ello, necesitamos definir otro atributo que es blanco blanco. Gracias a ello, el sitio web de Skillshare estará abierto en una nueva ventana. Hay dos tipos de lista en HTML. Hay lista desordenada iniciada con u para desordenada, y lista ordenada. Entonces, para nuestro propósito escojamos la lista desordenada. Enumeremos todas las habilidades que puedes adquirir al participar en estas clases. Por ejemplo, HTML este es un elemento de esta lista. Otro elemento será CSS, y otro Diseño Web. Tenemos que cerrar nuestra lista, guardarla, y vamos a ver qué se genera en nuestra página web. Se puede ver que cada elemento comienza con el punto de viñeta. Entonces, tenemos lista nuestra lista. Si nos gusta cambiarlo a lista ordenada, solo
necesitamos cambiar u a o, mismo para cerrar etiqueta, guardar, recargar, y la lista comienza con los números.
7. Envía tu sitio web al estilista: fundamentos de CSS: parte I: Entonces, así es como se ve nuestra página web después de agregar encabezamiento, párrafo, enlace, imagen y una lista. Bueno, hay que admitir que está bastante establecido así que es hora
de enviar nuestro sitio web al estilista. Gracias a CSS, nuestros sitios web son tan hermosos y coloridos, así que no pierdas el tiempo y escribamos algún código CSS. Hay un par de formas de cómo podemos agregar estilo a la página web. Hay en línea CSS, podemos escribirlo en un archivo externo o incrustar el código CSS en archivo html. Se centrará en un archivo de hoja de estilo separado style.css. En primer lugar tenemos que crear el archivo. Estamos en nuestro directorio de ejercicio uno. Creamos una nueva carpeta llamemos a eso estilos y ahora vamos a crear el archivo. Podemos hacer esto directamente en Adam. Entonces, estamos abriendo Adam, hacemos clic en estilos siguiéndote. Archivo, Guardar como, debe abrir carpeta estilos y escribir styles.css. Como puedes ver el archivo se crea sin embargo está vacío. Vamos a añadir muy primero selector CSS. Antes de empezar a escribir código CSS, dividamos nuestra ventana en Adam en dos columnas para
que podamos ver el código html y CSS al mismo tiempo. Tenemos que hacer clic en ver los panes y dividir a la derecha. Gracias a ello tendremos index.html a la izquierda y nuestro archivo de envío de estilo a la derecha. Entonces vamos a crear nuestro primer selector. ¿ Qué significa? Bueno selector selecciona el contenido que quisiéramos darle estilo. Entonces, nuestro selector es P como puedes ver este es el nombre de
la etiqueta por lo que este es el párrafo y en su interior escribimos todas las declaraciones. Toda declaración consiste en la propiedad y su valor. Digamos que nos gustaría tener nuestro texto y párrafo más grandes usamos el tamaño de fuente de la propiedad y tenemos que darle un valor, por ejemplo 20 píxeles. Tenemos que guardarlo, y ahora podemos refrescar nuestro sitio web. No pasa nada, ¿verdad? Cuando seleccionamos un elemento con DevTools, no
podemos ver ningún estilo aplicado, excepto los estilos predeterminados del navegador web. ¿ Por qué es eso? Bueno, primero tenemos que vincular nuestro archivo CSS al documento HTML. Entonces, tenemos que vincular nuestro archivo styles.css en documento HTML. Agrandaré la ventana y lo hacemos en la sección de sombreros. Estoy pegando el link de la etiqueta. Tenemos atributo stylesheet en href y type. Por lo que en href escribimos la ruta a nuestro archivo CSS, que es estilos porque los estilos están en nuestra carpeta de estilos y el nombre del archivo, estilo- styles.css. Guardémoslo y nos encanta el sitio web. Ahora se puede ver que el párrafo es más grande. Vamos a revisar en las DevTools. Sí, podemos ver que nuestros estilos están cargados y el tamaño de fuente es de 20 píxeles. Ahora será genial centrar nuestro propio rumbo. Te mostraré esto en las DevTools. Entonces, estamos creando la nueva regla de estilo del selector. Es elemento H1, así que esto es correcto. Simplemente hacemos click en la línea y escribimos el atributo. Entonces para alinearnos al texto tenemos la propiedad CSS text-align. Ahora queremos tener su volumen. DevTools nos dan algunas pistas. Yo estoy eligiendo centro y tada, nuestro rumbo está centrado. No obstante, si refrescamos la página el cambio se ha ido, porque no es seguro en ninguna parte, es solo un cambio temporal en las DevTools. Podemos hacer esto otra vez, texto alinear centro. Podemos copiar todo el conjunto de reglas. Podemos pegarlo en nuestro CSS, guardarlo y refrescar la página y los cambios ya guardados. cuales sean las otras propiedades CSS, te estás preguntando como cómo podemos agrandar los márgenes entre los elementos, cómo podemos establecer diferentes colores. La mejor manera de aprender todo eso es solo practicar pero hay una gran página cssdreference.io donde conseguiste todas las propiedades categorizadas. Practicemos más. Sabemos cómo agrandar el tamaño de la fuente. Sabemos alinear el texto pero ahora nos gustaría tener un espacio más grande entre el enlace y nuestra imagen.
8. Conceptos básicos de CSS: parte 2: Ahora, me gustaría usar más propiedades CSS y verlas en acción. Entonces, tengamos más espacio entre el enlace y una imagen. Tenemos que usar la propiedad de margen. Vamos a crear el selector primero, y vamos a agregar el margen superior y el margen inferior. Digamos, 30 píxeles y margen inferior, 30 píxeles también. Podemos escribirlo de una manera diferente. Podemos utilizar el margen de acceso directo 30 y cero. Esto significa que, la misma cantidad de píxeles, por lo que 30, será de arriba e abajo. El segundo lugar es el margen para una derecha e izquierda. Si escribimos 50 pixeles, veremos que 50 pixeles es de izquierda y derecha. También podemos usar computadora y podemos ver el elemento aquí, margen como lo destaca el color naranja. puedas ver al instante que de arriba e abajo tenemos 30 píxeles y de izquierda y derecha 50. Por lo que de nuevo, necesitamos copiar el reconstructor pegarlo a nuestro archivo CSS, podemos eliminar el código CSS no utilizado, guardarlo. Podemos disminuir a cero, refrescar, y podemos ver que el mapa es más grande. ¿Qué más? Será genial ver cómo están
cambiando los colores pero descubramos cómo podemos usar los colores en CSS. Podemos aplicar colores al texto, pero también para elementos donde podemos definir el color de fondo. Añadamos fondo al fondo. Entonces en todo nuestro sitio, estamos clasificando el selector, agregando propiedades de fondo. Se puede ver que las herramientas de profundidad ya tienen lista predefinida de colores en CSS. Puedes escoger uno, pero no tienes una flexibilidad muy grande aquí. Entonces, podemos retomar rutas de una manera diferente. Puedes escribir aquí ese código hexadecimal. ¿ Cuál es el código hexadecimal? Entonces, el código hexadecimal consiste en seis dígitos hexadecimales. Cada dos de ellos son para canal rojo, verde y azul. Entonces, nuestro color está consistido en la mezcla de rojo, verde, y azul. Por supuesto que no necesitas ahí y códigos hexadecimales de memoria. Es genial porque en las herramientas de profundidad, tenemos profundidad de color sacar y podemos elegir los colores que nos gusten. Selector de color y escoge el de la imagen. Digamos que queremos tener un rosa. Ahora de nuevo, podemos copiar el código y ponerlo en nuestras hojas de estilo. Porque el cuerpo es una especie de la etiqueta más importante. Está en la parte superior y es como el padre de todos los demás componentes, solo lo
estamos basando en la parte superior. Guarda, refresca la página, y podemos ver que los colores han cambiado. ¿ Y el texto? Por supuesto, podemos cambiar el color del texto. Ya preparamos h1 selector. Ya tenemos el selector h1 creado. Entonces, podemos simplemente agregar otra propiedad que es color y aquí podemos escribir el código hexadecimal. Seis Fs, significan que esto es blanco. Pero de nuevo, puedes escoger lo que nos guste de la paleta de colores. A mí me parece bien el blanco, así que vamos a mantenerlo así. Para el enlace, también podemos crear el selector y cambiar el color. Sólo estoy eligiendo el primer color,
más débil, y usando a través de la naranja. Para hacer más visible el enlace, también
podemos agregar los pesos de las fuentes. Entonces, qué tan pesada sería la fuente, podemos agregar ambas. Como se puede ver, esta es la versión más audaz del texto. Ahora por supuesto, tenemos que copiarlo y pegarlo a nuestros estilos. También estábamos agregando el color a nuestro encabezado, vamos a guardarlo, y finalmente tenemos algunos colores en la página web.
9. Tipografía en CSS: Nos gustaría hacer que nuestra página web sea más bonita. Lo muy importante es la tipografía. Afortunadamente, podemos seleccionar muchas fuentes hermosas las cuales están disponibles de forma gratuita. Muy a menudo, uso fuentes de Google. Puedes navegar por todas las increíbles tipografías. Entonces, vamos a escoger uno de ellos y aplicarlo a nuestra página web. Escojamos a Lora. Hacemos clic en seleccionar esta fuente, hacemos clic en la ventana de la parte inferior, y vemos cómo debemos incrustar la fuente. Hay dos maneras. Podemos pegar este enlace en la sección de cabeza o pegar esta línea a nuestro CSS. Vamos a pegarlo en nuestra sección de cabeza en archivo HTML. Justo después de los estilos, estamos pegando el código copiado de las fuentes de Google. Para que la fuente funcione, necesitamos agregarla como una propiedad a los selectores dados. Por ejemplo, te gustaría tener h1 escrito en tipografía Lora. Se puede copiar esto a través de la regla CSS y pegarlo en el selector. Guardémoslo y refresquemos la página. Estamos usando herramientas de profundidad, y se puede ver que se aplica la tipografía Lora. Si lo descomandamos, se remonta a Times New Roman. Escojamos diferente tipo de letra para texto diferente, como párrafo, o enlace, o lista. Llamamos a esto el texto corporal. Entonces, podemos elegir Roboto, tal vez. Escojamos Roboto Mono. Nuevamente, seleccionamos esta fuente. Tenemos dos fuentes combinadas. Copiaremos pegado a nuestro documento HTML. Podemos ver que aquí está Lora y Roboto. Queremos aplicar Roboto a toda la página web. Entonces, copiamos este código, font-family, y pegamos la propiedad font-family al cuerpo. Gracias a eso, todo el cuerpo tendrá a Roboto. Ahora, podemos refrescar la página y ver que la fuente ha cambiado. Párrafo hereda la font-familia del cuerpo. Si lo desmarcamos, Roboto se habrá ido. También podemos añadir esto sólo al párrafo, y ordenarlo desde cuerpo, y ver que funciona sólo para párrafo porque la font-familia se aplica sólo al párrafo. Por supuesto, puedes elegir muchas fuentes diferentes. Todo depende del estilo que te gustaría lograr al final. Sólo por favor recuerda que si te gustaría tener más tipografías, por lo general, tarda más tiempo en cargarse la página. Las fuentes de Google tienen un tipo de métricas. Entonces, si abres la ventana, verás cuál es el tiempo de carga, ya sea razonablemente rápido o lento. También podemos adjuntar diferentes fuentes no solo de fuentes de Google, sino que tienen que ser fuentes web, y tienen que estar alojadas en algún lugar. Entonces, para estas clases, para que sea más sencillo, estaremos usando sólo fuentes de Google.
10. Selectores de CSS: clases: Este es el estado actual de nuestra página web. Necesito mencionar de otros Selectores CSS porque aún no hemos hablado de ellos. Entonces, aprendimos que hay selectores de elementos como p, h1, img. Entonces, este es el nombre de esa etiqueta en HTML. Si te gustaría darle estilo a un párrafo, solo agregamos p, pero este p pela cada párrafo que se incluye en el sitio web. Entonces, para todos los párrafos, el tamaño de fuente será de 20 píxeles. ¿ Y si te gustaría tener dos párrafos y solo uno tendrá un tamaño de fuente de 20 píxeles? Para esto, podemos usar clases CSS. Este es otro selector. ¿ Cómo debemos crearlo? Siempre lo creamos con punto y luego el nombre de la clase. Por ejemplo, intro-párrafo. La regla es la misma, solo
agregamos aquí las propiedades CSS, pero también necesitamos agregar clase al elemento HTML. Podemos agregar a esto por atributo de clase. Copiemos el párrafo, por lo que tendremos dos de ellos. Vamos a guardarlo. Vamos a refrescar nuestra página. Tenemos dos párrafos. Entonces ahora, vamos a darle estilo a que el de la parte superior tenga 20 píxeles, y el de la parte inferior sea de 14 píxeles. Tenemos la clase intro-párrafo ya creada. Entonces ahora, estamos sumando la clase al primer párrafo, que va a ser la intro. Entonces, solo escribimos el nombre de la clase, como puedes ver, tenemos ese atributo de clase y ahora, necesitamos agregar la propiedad. Entonces, podemos establecer que todos los párrafos que tengamos tengan 14 píxeles, pero la intro tendrá 16. Vamos a refrescar la página, y como puedes ver, usando las herramientas DAC, intro-párrafo tiene 16 píxeles, se anulan
14 píxeles. Esta es la sugerencia aquí de que la propiedad para p se aplica a todos los párrafos, pero tenemos la clase que tiene mayor prioridad, por lo que el párrafo se escribirá en 16 píxeles de tamaño de fuente. El siguiente párrafo tiene 14 píxeles porque no tiene clase. Si desea agregar esta clase al segundo párrafo, podemos hacerlo, no hay problema. Simplemente puedes copiar, pegar,
guardar, recargar, y trabajar de clase. Espero que ahora estés más familiarizado con la creación de las clases.
11. Deconstrucción del diseño: Yo solo me enfoco en construir nuestro layout. Entonces, estoy teniendo el diseño abierto. Vamos a llamarlo Hola Colores. Entonces, lo que me gustaría hacer en este momento, es mostrarles cómo pienso en términos de la estructura HTML. Ahora mismo estoy viendo ese diseño y voy a dibujar
rápidamente los componentes de la página. ¿ Qué secciones tenemos? Te voy a mostrar aquí cómo deconstruyo la maquetación. Entonces, más adelante, es más fácil para mí codificarlo porque sé cuáles son los componentes y qué elementos HTML debo usar. Entonces, empecemos con el principio. Puedo ver en la parte superior que tenemos la navegación. Entonces, este pedazo de papel es mi actual editor de nube. Entonces, he escrito en la parte superior que
tenemos elemento nav y más tarde tenemos el encabezado. Aquí, tenemos el encabezado del sitio web. Entonces, estoy teniendo el encabezado, y el encabezado se divide en dos columnas. Izquierda, derecha y todos juntos es una cabecera. Cuando nos desplazamos, tenemos un párrafo aquí, y todo lo que está debajo del encabezado está en la sección principal, porque es como el contenido principal del sitio web. Entonces, puedo crear aquí principal. Principal constará de varias subsecciones. Entonces, primero será la sección de trabajo. Entonces, tenemos sección para obras. Hay tres filas libres. A continuación trabaja tenemos mi sección de equipo, por lo que otra. Entonces, en mi equipo tenemos sección de contacto y el último es el pie de página. Entonces, la información antigua como las redes sociales y el correo electrónico. Entonces, a continuación tenemos pie de página. Entonces, aquí tenemos obras, mi equipo, y secciones de contactos, y estaremos usando ese tipo de texto HTML.
12. Creación del esqueleto HTML: parte 1: Estamos listos para codificar en HTML y CSS paso a paso. Vamos a abrir plantilla HTML que se incluye en el paquete. Tenemos en este HTML, todos los activos requeridos para el layout, todo
el layout que vamos a codificar, y ver CSS, style.css, y cuadrícula bootstrap. Entonces, vamos a usar bootstrap. Bootstrap es un tipo de framework, y no quiero entrar en detalles, pero sólo estaremos usando esta tira bootstrap. Entonces, gracias a ello, no
necesitamos meternos en flex box, ni cómo construir las columnas, solo
usaremos un tipo de cuadrícula que ya creamos. Entonces, podemos ahorrar algo de tiempo. Si recuerdas cómo dividimos ese diseño, tenemos algunas secciones como navegación, cabecera, sección para trabajos, sección para mi equipo, y sección para contacto. En la parte inferior, el pie de página. Entonces, vamos a crearlo en HTML. Estoy abriendo índice html. Por ahora puedo cerrar estos estilos. Entonces, empecemos con nav. Nav es la etiqueta de navegación. En el interior, vamos a crear una lista. Va a ser nuestro menú. Entonces, tenemos la oferta, cartera, sobre nosotros, contacto. Yo sólo puedo leerlo. El ofrecimiento, otro artículo en la lista, cartera, sobre nosotros, y contacto. Está bien. Entonces, tenemos la navegación creada. Podemos guardar la página y abrirla en el navegador web. Como puedes ver aún no es muy atractivo, pero no te preocupes. Otra cosa que queremos terminar, es la sección de cabecera. Algo que está en la parte superior. Entonces, cabecera, y dentro tenemos dos columnas. Sección uno de la izquierda, podemos usar comentarios, y HTML que haces es igual que eso y eso. Escribes esta pieza de texto columna derecha, izquierda y la cierras así. Otra cosa es que tenemos la columna correcta. Entonces, podemos agregarlo, 'hola' y abajo, tenemos el párrafo de texto. Hagámoslo el código más limpio. Está bien. Entonces, esta es nuestra columna izquierda. A la derecha, tenemos la imagen y una leyenda. Entonces, estamos agregando imagen. El imagen está en carpeta img. Esto es cactus. Estamos cerrando pila de imagen con slash dentro de etiqueta de elemento, y también agregamos atributo alt. Ahorra en el epígrafe a continuación. Estoy pegando y cerrando. Vamos a refrescar la página. Bueno, es sólo una columna, pero no te preocupes. Cuando añadiremos columnas desde el script bootstrap, verás que el diseño será el mismo que en una imagen. Entonces, vamos a añadir más secciones. Tenemos que añadir párrafos simples. Esto se puede agregar a la sección principal. Entonces, todo lo que está por debajo de cabecera, y por debajo principal, tenemos el pie de página. Entonces, en lo principal, estamos creando el párrafo del texto. Debajo del párrafo, tenemos la sección para obras, sección, la estoy cerrando. Ahora podemos agregar comentarios, 'trabajos'. debajo de la sección, tenemos a mi equipo, y por debajo de mi equipo, tenemos contacto. Dentro de obras, tenemos tres filas de diferentes proyectos. Podemos crear esta fila usando div. Div es una especie de contenedor, por lo que puede consistir en diversos elementos. No necesita ser gravado, puede
ser una imagen. Entonces, es como un componente genérico. Entonces, tenemos primero si, entonces tenemos primero, segundo y tercer proyecto en sección de trabajo. Añadamos algo de texto. Podemos usar el encabezado h2 para obras, puedes usar el mismo encabezamiento para sección, 'mi equipo', y el último, contacto. Vamos a refrescar la página. Tenemos obras, mi equipo, contactos. Añadamos más elementos a la sección de trabajo. Tenemos imagen, encabezamiento, otro encabezado, parte de un texto, y un enlace. Aquí podemos ver que, este es un rubro más pequeño que éste y éste. Entonces, si esto es h2, esto sería h3, y esto es h4. Entonces, primer elemento h4, déjame revisar el texto es branding y web y la imagen. El imagen ahí es una piña. Pineapp, JPEG, alt, piña. Vamos a guardarlo. Tenemos encabezamiento y la imagen, y nos falta el texto aquí con el encabezado y un enlace. H3 pineapp, párrafo. Utilizamos break, br, para separar el contenido. Esta es nuestra nueva línea, y vamos a cerrar párrafos. Refresquemos y veamos. Como puedes ver, cada nuevo elemento está en la nueva línea. Gracias a break. El último es el enlace. No sabemos dónde se vinculará el sitio, por lo que solo puedes agregar un href vacío, o un cierre y dentro del enlace, insertar nombre de la acción. Por lo tanto, visite la página web. Nuestra sección está codificada. El segundo es igual pero se cambia el orden. Entonces, tendremos primero h3, enlace de
párrafo, h4, y una imagen. Entonces, h3, estoy cerrando párrafo y último, el enlace. Podemos copiar el mismo ítem, y la primera sección es tu tarea porque como ves, es justo lo mismo que la primera sección. Entonces, simplemente no se puede copiar. Ah, y me olvidé de la imagen por supuesto. Entonces, está aquí, es un comedor saludable, y por supuesto h4 branding y móvil. Estamos guardando y recargando la página.
13. Creación del esqueleto HTML: parte 2: Codificemos mi sección de equipo. Entonces, tenemos una columna que consta de dos imágenes y una columna con encabezamiento y párrafo de texto. Entonces, empecemos con las imágenes. Mi equipo, así imagen, equipo lo siento, equipo uno, alt, cuadro del equipo, otra imagen, cuadro del equipo. Tenemos el encabezado y un bloque de texto, así que un párrafo. Como puedes ver, es un poco desordenado. Entonces, hagámoslo más limpio, y pongamos break o pongamos dos break. Aquí, podemos cerrar el párrafo y crear una lista. Entonces, este sería nuestro ítem de lista. Otra, cerrando, y otra y la última. Por supuesto, cuando cierre la lista, haga clic en guardar y refrescar. Tenemos dos cuadros, encabezamiento, párrafo, texto, y la lista. Otra sección, contacto, así que tenemos párrafo, dos imágenes. Entonces, tenemos correo electrónico, otro párrafo. Hagamos limpieza
también y párrafo para la dirección. Break, break, click save y dos imágenes. Contact1.jpg, podemos dejarlo vacío. Contact2, eso es todo. Tan solo refrescarlo y nos falta el pie de página. Entonces tenemos cuatro iconos, así que cuatro imágenes. El fondo, como se puede ver en las redes sociales. Podemos hacerlo como fondo no como texto y el párrafo en la parte inferior. Pongamos párrafo porque es más fácil por ahora e iconos. Tenemos Twitter svg alt icono de Twitter. Otro sería Facebook, icono de Facebook, Facebook. Tenemos a Pinterest. Por cierto, estoy tomando los nombres de los archivos de este directorio. No los conozco de memoria, aunque nombrar es bastante sencillo. ¿ Tenemos un Instagram? Icono de Instagram. Todos estarán vinculando a las redes sociales. Entonces, podemos agregar nombre a cada imagen. Por supuesto, no olvides cerrar la etiqueta. Vamos a refrescarlo. Bueno, ya puedes ver ahora que el espacio es blanco. ¿ Por qué es eso? Esto se debe a que estamos usando iconos SVG y son bastante grandes. Entonces, nos ocuparemos de ello en CSS. Si agregamos fondo al cuerpo, por ejemplo, rosa, se puede ver que el icono es muy grande y es ancho, por lo que no se ve en el fondo blanco. SVG toma toda la cantidad de espacio que puede tomar, por lo que normalmente solo se estira hasta 100 por ciento de ancho, pero lo cambiaremos en CSS. Entonces, no te preocupes por eso. Entonces, refrescando la página y estamos listos para agregar nuestra cuadrícula de estilo y bootstrap.
14. Cuadrícula de Bootstrap: parte 1: En esta lección vamos a aprender a usar bootstrap grid. Ahí hay sitio web de cuadrícula que reúne toda la información más importante. Me enfocaré solo en algunas partes porque queremos terminar nuestro sitio web lo más rápido posible. Pero si tienes ganas de explorar este tema, estás más que invitado a revisar la documentación de bootstrap. Entonces lo primero que tenemos que hacer, por lo que lo primero que tenemos que hacer es agregar la cuadrícula bootstrap a nuestro HTML. Si abrimos nuestra carpeta de plantillas HTML, y entramos en la carpeta CSS podemos ver que hay dos archivos; estilo CSS y bootstrap grid CSS. Por lo que necesitamos agregar esta hoja entera a nuestro documento HTML igual que agregar estilo CSS. Entonces, copiamos la etiqueta de enlace y agregamos el nombre propio. Es bootstrap grid, y lo guardamos. Por lo que ahora por fin podemos empezar a usar grid. Vamos a crear disco 2 columnas ahora mismo. En la documentación, si te desplazas
un poco hacia abajo verás que podemos crear dos columnas. Este es el código, así que tenemos un contenedor que limita el ancho. Tenemos la fila. Por lo que todo lo que hay dentro de la fila intentará apilar uno cerca del otro. Tenemos div con carbón de clase y otro, y están cerca el uno del otro porque aquí
tenemos ancho 100% así que es como un descanso. Es como que este elemento irá a la nueva línea. Lo cual se refleja aquí. Entonces intentémoslo. Vamos a usar clase de fila y vamos a agregar esto a nuestro encabezado. La sección de encabezado está aquí. Entonces vamos al editor de código, estamos agregando fila. El siguiente es agregar carbón de clase a nuestra columna izquierda y a la columna derecha. Por lo que gracias a eso, estarán cerca el uno del otro. Refresquemos y veamos. Y tenemos dos columnas. Podemos inspeccionar. A lo mejor sería más fácil tener en la parte inferior. Tenemos toda fila, carbón 1 y carbón 2 ahí justo cerca uno del otro. También podemos agregar algún fondo al igual un fondo de gota para ver que se crean las columnas. Di amarillo. Aquí tenemos dos columnas y todo,
lo que hay dentro de la etiqueta de sección. Por lo que cada uno encabezamiento, el párrafo, estarán dentro de esta columna. De acuerdo vamos a refrescarnos y tomemos los colores del proyecto. Estoy usando Photoshop, estoy usando Photoshop y color picker pero
también puedes usar mi documento que está en una carpeta. Hola colores, documento de texto donde encontrarás todos los colores y el texto. Por lo que sería más fácil para ti codificar rápidamente el Sitio Web. Por lo que para la primera columna de la izquierda, que necesitamos sumar el fondo azul marino. Tenemos que añadir otra clase para diferenciarlo. Entonces aquí hay que añadir, carbón dejado. El espacio es igual que combinar las clases. Por lo que significa que hay carbón de clase y hay otro, carbón de izquierda. Entonces vamos a crearlo en estilos CSS. Carbón izquierdo. A lo mejor en el texto hola, color de
fondo y estoy pegando código de texto de Photoshop. Vamos a guardarlo. Soy índice de ahorro HTML, refrescante y dada. Mi sitio tiene fondo azul marino. Hagamos lo mismo para la segunda columna. Estoy creando clase de carbón derecha. Color de fondo. Este es el color turquesa y agregando esta clase a esta sección. Entonces esta es mi sección Hola, sección azul
marino y sección turquesa. Y ya está hecho. Nos estamos acercando. Ahora podemos trabajar en el, otro en la sección de trabajo. Ver en la disposición, este contenido está centrado. Por lo que este ancho no es 100% del navegador web. Es por ejemplo 1000 pixeles y está centrado cualquiera que sea tu resolución. Entonces vamos a usar clase de contenedor. Esto es lo que está escrito y la documentación. Por lo que los contenedores proporcionan un medio para centrar y empaquetar horizontalmente el contenido de sus sitios. Utilice la clase de contenedor para el ancho de píxel sensible o fluido de contenedor para el ancho 100 por ciento. Vamos a usar un ancho de píxel responsive. Entonces agreguemos contenedor a todo el principal. Vamos a refrescar la página y se puede ver que el contenedor funciona. También puedes revisar esto e inspeccionar. Principal. Aquí tienes más información sobre el ancho y la cuadrícula de bootstrap. Si tienes curiosidad puedes echar un vistazo a esto. Entonces el ancho actual del contenedor para mí es de 1140 pixels. Estoy hablando de eso, este es mi caso porque no sé cuál es tu resolución de pantalla. Si cambia el ancho de su navegador, inmediatamente
verá que el ancho del contenedor está cambiando. Está bien así que tenemos el contenedor, ahora nos gustaría crear dos columnas dentro de la sección de trabajo. Permítanme mostrar esto en el diseño. Entonces tenemos una columna para la imagen y la segunda para el texto. Aquí está la sección de ancho. Tenemos que dividir esto en dos contenedores. Por lo que un contenedor sería una columna y lo cerramos después. Yo soy GTAC porque está dentro de la primera columna. Podemos copiarlo. Y la segunda columna con el texto y cerrando. ¿ Por qué necesitamos otro div? Por lo que otro contenedor denari para crear la fila. Por lo que en una fila, tenemos dos columnas cerca una de la otra. Déjame guardar esto y refrescar la página. Y bang, tenemos dos columnas. Entonces hagamos la siguiente fila. Tenemos una comida saludable. Se trata de una fila, una columna para el texto y la segunda para la imagen. Para que podamos copiar fila y pegarla aquí. Y de nuevo esta sería una columna y ésta sería la segunda. Entonces vamos a codificar carbón clase div. Por supuesto que necesitamos cerrarlo. Por favor recuerda al respecto, es súper importante. Y el segundo carbón. Entonces dentro de una fila que es, que empieza aquí y se cierra aquí, tenemos columna izquierda y columna derecha. Y bang, funciona. Entonces la fruta sería tu tarea. Es necesario crear una fila, una columna para la imagen y la segunda para el texto. Te puedo dar una pista. Esto es lo mismo que éste pero lo único que es diferente es la imagen y el texto. Simplemente funciona como copiar y pegar. Si nos refrescamos, puedes ver que tenemos casi el mismo diseño. Entonces volvamos a mi equipo. Tenemos el encabezado y aquí tenemos una columna con las imágenes y la segunda columna con el texto. Nuevamente, la situación es la misma. Podemos copiar fila. Entonces estoy pegando fila. Haré la pestaña aquí solo para ver cuál es cuál tabulador es el padre. Entonces aquí creamos, carbón y lo cerramos después de imágenes porque este carbón incluye imágenes solamente y el segundo carbón. De acuerdo, entonces tenemos un carbón con las fotos y el segundo que cierra aquí con un texto muy largo. Y todo debería estar dentro de la fila, pero como puedes ver no lo cerré porque no está subrayado. Entonces esto es culpa mía. Déjame arreglarlo. Sí. Ahora está subrayado. Genial. Guárdalo. refrescar. Cuando lo refrescamos, vemos que no hay dos columnas. Ahí hay como sólo uno. Y la razón es que las imágenes son bastante grandes. Entonces si escribimos carbón solo tomará tanto como cantidad de la imagen más grande. Entonces otra cosa puede bootstrap aquí es escribir cuántas brasas debe tomar. Imagina que tenemos una cuadrícula de 12 columnas. Y queremos tener esta parte, y esta parte debe ser la mitad. Entonces seis de ellos. Entonces escribimos. El medio es para los tamaños de pantalla medianos. Y ahora de repente si tenemos el texto dentro, en la imagen. También podemos agregar propiedad CSS, ancho máximo 100%. Nuestra imagen estará tapada dentro del contenedor. Aunque tenga mayor tamaño, se ajustará al ancho máximo que pueda tomar. Aquí, este es nuestro contenedor. Hagamos las modificaciones. Tenemos que agregar carbón, mediano seis, guardarlo y necesitamos agregar y dimensionar esa imagen debe tomar ancho máximo del 100 por ciento de su padre, del contenedor padre. Vamos a refrescarnos y tenemos dos columnas por fin. De acuerdo, así que contactamos tenemos...
15. Cuadrícula de Bootstrap: parte 2: En esta lección, vamos a cubrir las secciones de contacto y pie de página. Entonces, vamos a sumar la cuadrícula ahí. Vamos a codificarlo. Nuevamente, podemos copiar fila. Vamos a sección de contacto, por lo que remar, cerramos la fila. Vamos a crear una columna, clase col. Por lo que para cada imagen, creamos otra columna. ¡ Refresquemos y bang! Tenemos tres columnas. Perfecto. Entonces ahora es el momento del pie de página, el que está lleno de iconos blancos. Entonces, el pie de página tiene cuatro iconos de redes sociales y un texto en la parte inferior. También tiene antecedentes, por lo que podemos agregarla. También podemos definir el tamaño de las redes sociales. Vamos a crear pie de página selector CSS, color de
fondo, y estoy pegando el color de fondo que tomé del documento. Estoy ahorrando y refrescante. Como puedes ver, el fondo tiene este color parecido al salmón, pero los iconos son bastante grandes, así que vamos a hacerlos más pequeños. Toda imagen tendrá clase de icono
social, y el ahorro. Necesito crear clase de icono social. Digamos que la altura será de 60 píxeles. Eso es mejor. Todavía podemos ver algunos espacios en blanco aquí. Usemos Inspect para ver cuál es el motivo de ello. Si seleccionamos Cuerpo, puedes ver este contorno naranja. Podemos llegar a la pestaña de la computadora y ver que cuerpo tiene margen ocho píxeles. Entonces, por margen, este es el estilo predeterminado desde el navegador. Entonces para un cuerpo, tendremos que restablecer los márgenes y los remaches, y ya casi está ahí. Todavía podemos ver algún espacio en blanco por aquí. Supongo que es de HTML. Estos son algunos trucos, pero no te preocupes. Cuando sumaremos altura 100 por ciento, ya estará bien. Entonces vamos a aplicar los estilos. Entonces para body, tendremos margen cero, lo que restableceremos la configuración predeterminada por el navegador y el selector HTML en la parte superior debido al relleno de toda la página. Agregamos altura 100 por ciento. Por lo que se necesita toda la altura del navegador web de la ventana. Vamos a refrescarnos y casi ahí. Entonces, ahora nos gustaría centrar estos iconos, y este texto debe estar en el mismo contenedor que el resto del contenido. Entonces, primero agreguemos contenedor. Está en otro div. Eso es mejor. Centrado. Desafortunadamente, no tenemos tiempo suficiente para enfocarnos en todos los temas con CSS, cómo centrarnos horizontalmente o renderizarlo verticalmente, pero te mostraré algunos trucos. Entonces, nos gustaría centrar este contenedor con los iconos. Podemos hacer esto creando clase div, contenedor de iconos sociales. Creamos la misma clase en CSS. Entonces lo otro que haremos aquí es escribir text-align center
porque centrará el contenido que está dentro del contenedor de contenido. Obras. Por supuesto, necesitamos algunos espacios entre los iconos. Podemos hacerlo aquí agregando margen,
la parte superior, inferior y la derecha/izquierda. Vamos a revisar. Sí, eso es mejor. Casi ahí, acercándose mucho ahí. Ahora, ya es hora de cuidar la tipografía, los colores y los tamaños. Entonces nos vemos en las próximas clases.
16. Aplicar estilo a la navegación: Antes de entrar en tipografía y colores, vamos a resolver el tema de la navegación. Como se puede ver, es vertical, no horizontal. Entonces te mostraré una cosa aquí. Por lo que tenemos nuestra navegación creada en la parte superior del documento HTML. El listado aquí es, por defecto, vertical, por lo que necesitamos hacerla horizontal. Puedo crear un selector. Al mostrar cada li, lo que cada elemento de la lista como bloque en línea. Cambia de bloque de visualización a display inline-block. Bloques de visualización del valor del bloque significa que toma toda la cantidad de espacio. Como se puede ver, se necesita 100 por ciento de ancho. Para mostrarte que está bloqueado por defecto, puedo escribirlo y nada ha cambiado. Pero si aplicamos inline-block, cambia sus propiedades y cada elemento que tiene display inline-block colocado cerca uno del otro. Entonces ya casi estamos ahí. Vamos a crear una navegación de clase, y vamos a escribir navegación de selector CSS. Entonces navegación, esta es nuestra clase. Esta es la lista completa, pero queremos apuntar al li, que es el ítem de esa navegación. El navegador web funcionará así. Vamos a buscar navegación de clase, y vamos a encontrar cada elemento li, por lo que cada elemento de la lista. Display inline-block. Casi ahí. También nos gustaría tener ul centrado. Por lo que podemos agregar text-align center. Puedes copiarlo, y podemos crear navegación, text-align center. Entonces la navegación, es nuestra lista y va a estar centrada, y casi ahí. Otra cosa es que la navegación se coloca como una nueva capa en estas dos columnas. Aquí, tenemos el espacio en blanco. Entonces, para cambiarlo, necesitamos cambiar la posición. No tenemos tiempo para aprender toda la teoría sobre las posiciones, pero déjame solo mostrarte un truco. Si sumamos a toda la posición de navegación, fijo. Se ha ido. Está en algún lugar ahí. Pero tenemos que ponerlo también en el frente. Esto lo hicimos con z-index. Tan cero, está oculto por los siguientes elementos, así por todo el encabezado. Por lo que necesitamos sumar más alto, por ejemplo uno. Ahora, ya lo puedes ver. Si nos desplazamos, el menú está fijo. Entonces es como un encabezado pegajoso, pero no está centrado. Por lo que ahora, nos gustaría centrar la navegación. Ahí hay otro truco. Por lo que tenemos que escribir cero izquierdo y cero derecho, y el contenido estará centrado. Se puede ver que la navegación está superponiendo todos los demás elementos, así que vamos a copiarlo y eso es a la navegación, nav, y funciona. Podemos agregar más espacios entre los ítems, por lo que podemos agregar margen cero desde arriba e abajo, pero 15 píxeles de izquierda y derecha, y está ahí. Por lo que también estoy configurando el color. Se ve así. Entonces ahora, es el momento de los colores, la tipografía, los espacios.
17. Tipografía y colores: parte 1: Ahora para cuidar la tipografía y los colores, y estoy muy emocionado por esta parte porque puede cambiar totalmente el carácter de la página web. Entonces, empecemos por buscar las fuentes que hemos hecho, vamos a necesitar. Por lo que en el diseño, usé Prata e Inconsolata. Entonces, estoy abriendo fuentes de Google y busco Prata exactamente. Yo lo estoy agregando e Inconsolata, sí. Yo también estoy seleccionando esta fuente. Yo estoy personalizando. Necesito ambos para Inconsolata también, y aquí para incrustar, copio el enlace. Tengo dos fuentes y la estoy pegando dentro de la sección de sombreros. Entonces, el enlace de la fuente está incorporado pero aún no tenemos en la familia de fuentes en ninguna parte. Entonces, revisemos los nombres. Tenemos Prata y Prata se utiliza para todos los rubros. Entonces puedo escribir un selector de grupo como h1, h2, h3, h4, h5, todos los encabezados, y estoy aplicando la fuente Prata. Ahora, podemos refrescar la página y esa fuente ha cambiado. Genial. Por lo que ahora podemos agregar Inconsolata porque Inconsolata se usa en todas partes del texto corporal. Podemos aplicarlo al cuerpo. Entonces, todo el HTML se escribirá en fuente Inconsolata a excepción de los encabezados, que van a estar en Prata. Déjame refrescar y tenemos cargadas las fuentes. Por lo que ahora es el momento de agregar colores y tamaños de fuente adecuados a nuestro texto. Como sabemos, esto debe ser blanco. Entonces, vamos a la sección de código de la izquierda y
podemos encontrar en CSS y agregar color blanco. También queremos tener este texto centrado. Está bien. Hola debería ser definitivamente más grande, 150 pixels, por lo que podemos agregar información de que el actual es de 150 pixels. También es audaz aquí. Déjame revisar esto en las herramientas del doc. Entonces por defecto el peso de la fuente es negrita pero en el proyecto, es regular. Entonces, escribes normal. ¿ Se puede ver la diferencia? Entonces, lo estamos copiando también, en realidad todos los encabezados. Entonces, aquí es normal. Acabo de darme cuenta de que para la navegación también estamos usando Prata,
así que tenemos que hacer el cambio, así que estamos tomando Prata. Entonces, estamos teniendo Prata para eso y debería tener 22 pixeles. Nos estamos acercando. Este texto debe ser centrado y blanco. Entonces, en realidad, podemos agregar las mismas propiedades CSS a ambas clases, por lo que left col y right-col, y lo hacemos agregando columna. Estoy tomando las propiedades CSS, pegándolo, guardando, y refrescando. puede ver que es mucho mejor. Nos ocuparemos de esta parte más adelante. Por lo que ahora debemos centrarnos en la tipografía y en las secciones que siguen a continuación. Desplázate hacia abajo para saber más sobre mí mismo. Está en el azul y está centrado, así que podemos crear clase aquí, intro. En realidad, es scroll y estamos agregando estas clases. Color, este es el color que copié, y text-align: center. Voila. De acuerdo, entonces ahora podemos enfocarnos en los encabezados como trabajos, mi equipo ,
y contactar, y tienen todos los mismos tamaños y los mismos espacios de letras, pero tienen diferentes colores. Entonces, vamos a ver. Utilizamos h2. Entonces, para h2, necesitamos definir font-size. Deberían ser de 100 píxeles, pero también debemos crear clases que nos
ayuden a diferenciar los encabezados y podremos agregar colores. Entonces, mi propuesta es agregar clase a toda la sección. Entonces, el siguiente equipo de sección, class="mi equipo”. Recuerda, que puedes hacer espacios mientras agregas el nombre de la clase y estamos llegando a la última sección, contacte. Por lo que podemos escribir combinador como funciona h1, h2, debe tener este color. Mi equipo h2 debería tener diferente color y la última sección contacto h2 color. Vamos a refrescarnos. Contacto, por lo que agregando, ahorrando. Contamos con obras. Contamos con mi equipo de trabajo y contacto. Por lo que ahora, podemos ocuparnos de estos rubros. Todos tienen el mismo color aquí. Este es diferente. De nuevo, tendremos que crear selectores combinados.
18. Tipografía y colores: parte 2: Entonces, ahora vamos a crear estilo para h3. Por lo tanto, h3 tiene un tamaño de fuente 50 pixels. Para obras, tiene color de éste. Para myteam, tiene un color diferente. Como puedes ver, es azul, no verde. Guardémoslo, y sí, éste es el uno. El otro cambio que se necesita es el h4. Entonces, h4 tiene su fondo y color. Entonces, estamos escribiendo h4, tamaño
de fuente 32 pixels. Color, tenemos color de fondo. Déjame guardarlo y refrescarlo. Estamos muy cerca, pero no necesitamos eso, pero si vemos en las herramientas de borrador,
el encabezado es un elemento de bloque, por lo que toma todo un ancho. Tenemos que configurarlo para mostrar inline-block. Sí, y necesitamos restablecer todos los márgenes. También nos gustaría agregar relleno, por lo que tendremos más espacio alrededor del texto y dentro del contenedor turquesa. Entonces, vamos a sumar 10 píxeles. Déjame ver, sólo hay un par de ellos, es como tres píxeles. Déjame copiarlo y pegarlo al código que hay ahí. Ahorrando. Ya casi estamos ahí. ¿ Y los enlaces? Hay espaciado entre letras y tiene diferente color. Por lo tanto, todos los enlaces tendrán espaciado, dos píxeles, color, y tamaño, 18 píxeles. No tiene el subrayado en el proyecto, y es audaz. Entonces, subrayar su decoración de texto. Entonces, necesitamos restablecerlo, y por supuesto, font-weight bold. Creo que podemos aumentar el espaciado entre letras. Yo hice el equivocado, entonces, cambiando. Estos son los enlaces. También podemos ver el cambio en el texto del cuerpo porque para las obras, es verde. Entonces, vamos a crear eso para las obras. El color es éste. Ha cambiado. El texto aquí está bastante apretado, así que me gustaría añadir una altura de línea más grande para agregar más aire. Entonces, vamos a establecer que para cada párrafo, la altura de línea será del 134 por ciento. Entonces, ahora es más fácil verlo. Yo lo voy a copiar, y pegar. Refrescante. En las próximas lecciones, vamos a trabajar en los retoques finales de diseño.
19. Modificaciones del diseño: parte 1: Ahora, enfoquémonos en la parte superior del layout, para tenerlo muy similar al que tenemos en el proyecto. Entonces, me gustaría tener dos cajas. Como puedes ver, tenemos más espacio alrededor. Aquí, lo podemos ver. Entonces, necesitaremos agregar el contenedor para encabezamiento y párrafo, y necesitaremos tener un contenedor para la imagen y el título. Entonces, buscaremos hasta índice, buscaremos col izquierda y col derecha. Ahora, vamos a crear div para la sección hola y la sección de imagen. Entonces, llamemos al top-container, estamos cerrando el div, cuidando de tener nuestra columna limpia, puedes copiar este div, y agregarlo a la columna correcta. Ahora, necesitamos crearlo en estilos. El orden en CSS en realidad no importa, pero es bueno mantenerlo de una manera lógica para que podamos empezar con los elementos muy básicos en la parte superior y después tener encabezado y vamos a ir a la parte inferior hasta el pie de página. Entonces, volvamos a nuestra nueva clase, que es el mejor contenedor, Ok. Entonces, ahora agreguemos propiedades CSS a nuestra clase de contenedor superior. Medií que debería tener ancho alrededor de 500 píxeles. Estoy ahorrando, después refrescando la página. Casi hecho, ahora necesitamos centrarlo usando margen cero auto, ahorrando y estamos muy cerca. Necesitamos agregar más espacio entre la imagen y el borde superior y también
necesitamos disminuir el espacio entre el encabezado y el texto. Entonces, estoy revisando los espacios, y luego puedo ver que el rubro tiene margen. Entonces, si edito a cero, se
puede ver que hay [inaudible]. También podemos agregar altura para col izquierda y col
derecha. Podemos establecer la altura mínima debe ser 90vh, que es una altura de ventana gráfica. Significa que tomará el 90 por ciento de nuestra ventana del navegador. Entonces, podemos tener este efecto que podemos ver esto por ahí como una portada y si nos desplazamos hacia abajo, los proyectos están abajo. Entonces, agreguemos esto, col
izquierda y derecha, altura 90vh, unidad de altura de ventana gráfica. Me olvido de agregar margen cero a cuál? Y ahora hay que centrar estos elementos. Vamos a usar flexbox. Desafortunadamente, no entraré en detalles pero solo sigue mis pasos. Entonces, necesitaremos agregar a nuestra col izquierda y derecha, esta propiedad de display flex. Entonces, volvamos a col izquierda y derecha, seleccione esos y escriba display flex. Significa que flexbox será un vuelo. Flex box nos ayuda a alinear los artículos para centrarlos horizontal o verticalmente. Es un cosas muy útiles así que si te gusta explorarlo más, estás totalmente alentado. También queremos centrarlo en el eje principal, que es el eje horizontal y también en el eje vertical. Guardemos y actualicemos. Los artículos están centrados. Está bien. Entonces, ahora, centrémonos en la sección de mi trabajo.
20. Modificaciones del diseño: parte 2: Entonces, ahora centrémonos en superponer estos encabezamientos en la imagen. Basta con mirar el proyecto y al instante sabrás cuál es nuestro objetivo. Entonces, por hacer el bien, necesito contarles de posiciones muy rápidamente. Entonces, vamos a usar posición relativa y posición absoluta en CSS. Entonces, para la imagen, vamos a aplicar una posición relativa y para las rúbricas, posición absoluta. Como se puede ver, se ha ido pero no se preocupe vamos a sumar el cero superior, cero
izquierdo y el z-índice uno y atrás. De pronto, tenemos nuestro rumbo superponiendo la imagen. Entonces, gracias a eso que aplicamos el contenedor padre como nuestra posición relativa y este elemento que tiene que superponer al padre de posición absoluta, podemos lograr este tipo de efecto. Entonces, aplicémoslo en nuestro código. Busquemos la piña. Sí, estamos aquí. Entonces, necesitamos agregar clase para la imagen. Entonces, sería imagen de obras y necesitamos agregar esto a cada imagen que tenemos en la sección de trabajo, y necesitamos crear clase bajo obras. Entonces, funciona imagen. Entonces, works-img, posición relativa y por cada h4 en la sección de obras, aplicamos posición absoluta, z-índice uno. Vamos a refrescar la página. En el proyecto, el encabezado está superponiendo la imagen pero también está más allá, por
lo que podemos hacer agregando top, digamos, menos cinco píxeles. Entonces, veamos. Sí, es un poco mejor pero supongo que serían 25. Eso está mucho mejor. Entonces, vamos a copiarlo, pegarlo y guardar. Otra cosa es que tenemos espacios entre las imágenes, y si lo comparamos con nuestro proyecto, se
puede ver que las imágenes aquí son adyacentes entre sí. Podemos hacerlo agregando clase sin canaletas. clase no-canalón ya está definida en la cuadrícula CSS de Bootstrap. Entonces, lo que necesitamos agregar es clase no-canalones y la agregamos, por ejemplo, a nuestra fila y gracias a ella, la canaleta entre las columnas y filas, que suele ser de 15 píxeles en términos de relleno horizontal, it se restablecerá. Entonces, intentémoslo. Entonces, estamos teniendo nuestra sección de trabajo. Estamos sumando la primera fila. Entonces, estamos agregando sin canaletas. Perdón. Lo copiaré y lo pegaré al segundo ítem y al tercero. Estoy guardando y actualizando la página. Bueno, se puede ver que algo ha cambiado pero las imágenes aún están distantes unas de otras. Voy a usar DevTools. Ahora, es mejor pero tal vez me pondré en el fondo que veas que queremos disminuir este espacio. El motivo de esto es probablemente el ancho de imagen porque esta es la imagen y esta es toda la columna. Entonces, la columna es más grande. Entonces, necesitamos estirar esa imagen completamente al contenedor. Entonces, sumamos con 100 por ciento y se ajusta la imagen. Eso es genial, pero ahora tenemos que hacer otra cosa que es agregar paddings a todo el texto porque como puedes ver, se pega al lado izquierdo de la imagen. Entonces, déjame copiar esto y añadirlo a works-img. Entonces, ahora por cada rollo de las obras, necesitamos crear div que envuelva el texto aquí y éste y éste. Entonces, abriendo el código. Este es nuestro primer trabajo y aquí tenemos el texto, así que crea canaletas extra clase div. Tendríamos que cerrar el div, claro. Lo copiamos y pegamos para las otras secciones y cerramos también. Ahora, nosotros por supuesto, tenemos que crear esta clase y definir propiedades CSS. Entonces, son canaletas extra y queremos tener relleno cero de arriba e abajo y 60 píxeles de izquierda a derecha. Vamos a refrescar la página y finalmente nuestro texto tiene remeros. También podemos checar en las DevTools, canaletas
extra y se puede ver que hay 60 pixeles remando. Comparándolo con el proyecto, podemos ver que este texto está a la izquierda y este texto está a la derecha, y también este texto está a la derecha no a la izquierda. Entonces, para esto, estaremos usando texto alineado con todas las canaletas. Tengamos un texto para alinear. Entonces, necesitamos aplicarlo a nuestros estilos. Podemos crear clase, derecha, alinear texto. Agrega esto a nuestro trabajo que está en el medio por lo que el segundo. Estamos agregando alineados a la derecha, guárdelo, refresca y ya está hecho. Entonces, aquí lo último en la sección de trabajo es tener los encabezamientos a la izquierda y a la derecha. Entonces, aquí está a la izquierda y aquí a la derecha. Entonces, estamos tomando branding y móvil. Si agregamos, cero derecho, porque es posición absoluta, por lo que el texto alineado no funcionará como en el ejemplo anterior, te
puedo mostrar, pero esto no funciona. Entonces, necesitamos agregar cero derecho, por lo que posicionará nuestro elemento al lado máximo derecho del extremo lejano, por lo que creamos selector ahora, funciona h4, clase alineada a la derecha será cero correcto. Entonces, significa que me encuentres sección con clase de obras y encuéntrame h4, en este apartado que tiene clase de obras y que h4 debería tener esta clase. También tenemos que sumar a este H4. Entonces, este es H4 en la segunda fila de las obras, también
necesitamos agregar esta clase, alineada a la derecha. Todo está bien. Estoy refrescando la página y ya está hecho. Entonces, sección de obras está hecha, hola sección está hecha y ahora es el momento de mi equipo.
21. Modificaciones del diseño en las secciones inferiores: Ahora es el momento para mi equipo, y el contacto, y el último, el pie de página. Entonces, comparando con nuestro sitio web, lo que tenemos que trabajar es el espacio entre las imágenes y el espacio que tiene el encabezado desde arriba. Por lo que necesitamos agregar margen a las imágenes en la sección de equipos. Entonces podemos agregar class="img-margin” y podemos agregar clase img-margin, y tendremos margin-bottom, digamos 20 pixels, y necesitaremos simplemente refrescar, y además, tendremos que restablecer el margen que está en h3, margen cero. Entonces lo estamos agregando a nuestra sección de mi equipo, y tenemos un espacio más grande entre el encabezado y el texto. Entonces, en realidad, podemos agregar margen cero, que es superior, cero que es margen desde la derecha, 50 píxeles o incluso más, 90 píxeles desde abajo o tal vez vamos a tenerlo menos, 70 píxeles, y cero píxeles. Este es el atajo. Entonces mi equipo h3, está aquí. Ahorrando. Empezamos esto en nuestra nueva línea, por lo que también debemos sumar un descanso como este. Refrescante y lo tenemos, pero la altura de línea es demasiado grande, así que cambiémoslo a 130 o tal vez 100 en fuente. Sí, 100 de altura de línea, 100 será suficiente. Casi ahí. También podemos ampliar el espacio entre imágenes por lo que el texto estará en línea con las imágenes. Entonces img-margin, sumemos 40. Todavía no ahí. Vamos a sumar 60. Es un poco mejor. Y también podemos sumar con 100 por ciento. Está bien. Entonces ahora centrémonos en el contacto. Por supuesto, necesitamos agregar fuente negrita a la dirección, que podamos usar nueva etiqueta, que es fuerte. Por lo que agregamos fuerte. Significa que el texto estaría en una versión más audaz. Está aquí y pie de página. Por lo que el pie de página debe tener alturas diferentes. Debería tener antecedentes y vamos a comprobar qué más. Sí. Por lo que debe tener al menos 200. Sí, así que nuestro pie de página tiene fondo, es más alto, y hay un espacio entre el contacto y el pie de página. Entonces no lo tenemos en nuestra página, así que vamos a añadirlo. Entonces en pie de página, digamos que la altura será de 220 píxeles al menos. Tendremos backround y te mostraré cómo agregar fondo en CSS. Vamos a tope para agregar función url y la ruta a nuestra imagen, que es img y socialmedia.svg, pero estamos aquí en CSS, por lo que necesitamos volver a la carpeta principal y luego, entrar img. Regresamos usando dos puntos y slash. Y ahora, estamos aquí en la carpeta actual, así que estamos entrando img y tomando la imagen adecuada, así que socialmedia.svg. Funciona, genial, pero no queremos que nuestros antecedentes se repitan, así que no repita. Nos gustaría estirar nuestro fondo, por lo que el tamaño de fondo contenga o tal vez tamaño de fondo 60 píxeles, 60 por ciento, pero la posición de fondo estaría centrada. Entonces esta es imagen de fondo, y gracias a ella, podremos tener imagen de fondo y color de fondo porque si eliminas imagen, sobrescribirá el color de fondo, así que por favor recuerda al respecto. Estamos muy cerca. También necesitamos agregar blancos de color. Podemos centrar el texto porque se ve mejor. También podemos agregar flex box para centrar los elementos, por lo que tenemos este flex de relleno, centro
justify-content, align-items center. Perfecto, y margen desde la parte superior para aumentar el espacio entre las imágenes de la sección de contacto, digamos 60
píxeles, píxeles, y estamos listos. Estoy copiando todo ese código y pegándolo al pie de página. Guardar. Este es nuestro sitio web codificado. Lo último que vamos a hacer es añadir enlaces a nuestra navegación.
22. Cómo añadir enlaces a la navegación: Entonces, ahora vinculemos la navegación a la sección de nuestra página. Pero primero, vamos a nav, y cambiemos a hola,
y funciona, y mi equipo, está bien. Entonces, para hacer esto, por supuesto, necesitamos agregar un, por lo que la etiqueta de hipervínculo. Whoops, es mi error. Está bien. Necesitamos crear identificaciones. Entonces, la sección donde vamos a enlazar tendrá identificación. Entonces, tenemos esta secta la cabecera, que es nuestro hola. Entonces, escribimos id hola, y id es paso para un hash. Entonces, tenemos clase, es el punto, y para id tenemos hash. Entonces, será hash hola para que funcione tenemos id works. El ID es algo único. Entonces, es sólo una identificación, quieren una identificación específica en la página. Entonces, tenemos un hello ID, uno works ID, y podemos tener muchas ocurrencias de la misma clase CSS, pero para ID no es posible. Por supuesto, tenemos myteam id, myteam, y contacto id id. Entonces, vamos a vincularlo. Trabaja miequipo, contacto. Vamos a refrescar la página. Como se puede ver, las estrellas han cambiado. Esto sucedió porque creamos un selector. Entonces, todas estas reglas se aplican a los ocho. Entonces, tendremos que restablecerlo. Puede limitar este ocho sólo a la sección de trabajo. Entonces, déjame encontrar este A. Entonces, podemos escribir que funciona sólo para la sección de obras. Entonces, para todos los A's que están en la sección de obras. Entonces, casi ahí, no perdimos este estilo por los enlaces aquí en la sección de obras. Pero, ahora nuestros enlaces son azules, y no queremos que suceda. Es por ello que porque cada navegador por defecto tiene un azul. Necesitamos aplicar nuestro color desde LE. Entonces, podemos agregar navegación LEA, aplicar este color. Se puede quitar este color de aquí, refrescar, y casi ahí. El caso es que queremos deshacernos del subrayado. Entonces, texto-decoración ninguno. Supongo que esto es todo. Entonces, déjame cerrar las herramientas de desarrollo, y déjame probar si funciona. Funciona? Por lo tanto, se puede navegar por la página web. Entonces, es como una página de aterrizaje de un solo. ¿Te gusta? Espero que lo hagas, y espero que te hayas divertido mucho mientras ponías este sitio web conmigo. Te voy a mostrar diferentes versiones de colores y tipografía en la siguiente lección, y será una de las últimas lecciones escuchando estas clases. Estoy tan contenta de que te quedes conmigo tanto tiempo. Me encantaría ver tus páginas, así que por favor ponlas en la sección de comunidad.
23. Reflexiones finales y otras versiones del sitio web: Enhorabuena por terminar mis clases. Estoy súper orgulloso de ti, y espero que te guste, si estás contento con el resultado final, tu página web. Entonces, preparé otras dos versiones para ti. Solo cambié colores CSS y tipos caras para ilustrar que se puede reutilizar muy facilmente este hola colores, esta plantilla, esta plantilla HTML para sus propios propósitos. Entonces, que puedas escoger tu propio estilo. Entonces, así es como se ve nuestra página web Hello Colors. Ahora mismo, según mi proyecto. Pero también podrías cambiar el color en los gradientes, cambiar las caras de tipo y al instante cambia su estilo y su vipe, y otra versión, la azul. Para que puedas hacer muchos experimentos con él y espero que te hayas divertido. Mi objetivo no era enseñarte HTML y CSS sino crear un sitio web para ti. También preparé unas clases más cortas. Entonces, si te gustaría divertirte con animaciones CSS y SVG, no dudes en unirte a ellas. Me encantaría ver venir tus sitios web. Entonces, házmelo saber escribiéndome o publicándolo en la sección de comunidad. Gracias de nuevo y espero verte en las próximas clases.
Aga Naplocha, Creative coder & designer
