Desarrollo Frontend desde Cero: Creando Tu Primer Sitio Web

Qué tal amigos y bienvenidos a una nueva clase más de este curso de programación frontend desde cero desarrollo we Fron

and desde cero es el mejor nombre de la vida y pues nada el día de hoy Vamos a continuar con un proyectito que habíamos

creado en las primeras clases te acuerdas se trata de una carpetita que hicimos llamada mi primer sitio web en

donde empezamos a crear elementos para conocer la estructura de html Muy bien pues ahora que ya tenemos cierto

conocimiento con c SS ya aprendimos Qué es el modelo de caja Cómo agregar estilos Qué es el flexbox Qué es grid Ya

vimos también algunos pseudo elementos y pseudoclases también aprendimos a utilizar transiciones y ya vimos también

el tema de animaciones pues es el momento de retomar ese proyecto y ver si podemos darle forma y que parezca algo

ya más parecido a un sitio web y no solo estar viendo ahí una estructura de elementos pues sin ningún tipo de estilo

Recuerda que si no has visto los videos pasados pues es importante que vayas a verlos ya que si no no le vas a entender

a esto acá arriba te los dejo ya los estás viendo oblígame perro y bueno De cualquier manera si insistes en

continuar con la clase de hoy sin Ver los videos actuales Pues igual aquí abajo en la descripción del video te va

a estar apareciendo un pequeño gft con el código html para que puedas comenzar el proyecto desde aquí vale Así que dale

clic a ese enlace te copias el código html Y regresas aquí para continuar con esta clase y bueno ya por último antes

de comenzar con la clase Pues de nuevo quiero darle las gracias a los nuevos miembros del Canal ahora ya somos cuatro

bueno cinco si me cuentas A mí gracias a burrita por haberse suscrito como Sofi suporter a Adolfo Cepeda como Sofi

suporter también y pues a Francisco bordón y Carlos Ignacio vale ellos son nuestros cuatro colaboradores del Canal

y gracias a ellos es que seguimos teniendo este contenido gratuito aquí en YouTube Recuerda que también puedes

apoyarme simplemente dándole like al video y suscribiéndote y bueno una vez dicha toda esa publicidad patrocínanos

aquí abajo más o menos encontrarás el botón para unirte como miembro del Canal ahorita ya comencé a subir videos

exclusivos para los miembros Así que si te unes vas a tener disponible un tutorial como este que estás viendo

ahorita en la pantalla con el cual vas a aprender a hacer esta animación de aquí y pues La idea es ir subiendo tutoriales

exclusivos para ustedes para que pues valga la pena esa suscripción Muchísimas gracias doy clases los jueves no cobro

mucho así que nada después de la publicidad Prepara tu BS code Prepara tu terminal y vamos a

ello muy bien Pues yo aquí ya tengo mi terminal y ya estoy posicionada en el directorio mi primer sitio web Recuerda

que si tú no lo tienes pues simplemente puedes ir al enlace que está aquí abajo en la descripción del video para

descargarte este gist o simplemente seleccionas todo este código lo copias todo control c y te vas a crear un

documento index.htm vale Ahorita lo que voy a hacer pues es simplemente yo que ya lo

tengo aquí abierto pues abrirlo con el comando code espacio punto Recuerda que ya vimos en las primeras clases una

pequeñísima introducción a la línea de comandos con bash o bash con la cual pues ya aprendiste Cómo crear carpetas

Cómo crear un nuevo archivo y cómo abrir todo ese proyectito que acabas de crear con visual Studio code por eso es que es

importante que vayas a ver las clases anteriores También tenemos todo un curso llamado entorno de desarrollo con

Windows con el cual pues vas a poder aprender un poco más acerca de la línea de comandos Cómo conectar tu gitbash a

github Cómo instalar wsl2 instalar plugins temas y dejar tu terminal pues así de bonita como la que

yo tengo aquí o incluso más ya depende de tus gustos y de cómo la quieras personalizar Pero además también vamos a

ver cómo conectar nuestra terminal wsl2 a github con una llave ssh vale dándole una capa extra de seguridad a todos

nuestros proyectos además de eso también te voy a enseñar Cómo subir tus proyectos a github Y cómo clonar tus

propios proyectos y los de alguien más para poder trabajar con ellos vale Así que nada ahí tienes la lista de

reproducción para para que puedas ir a verlos y aprender más acerca de la línea de comandos Y bueno pues una vez abierto

visual Studio code Pues aquí está el sitio tal como lo habíamos dejado si te acuerdas lo único que aprendimos aquí

fue a crear la estructura base de un documento html creamos la etiqueta doc type vimos para qué era cada una de

estas etiquetas y Qué eran los atributos Luego de eso aprendimos también Cómo crear un Boiler Plate simplemente usando

em ahora Pues recuerda también que gracias a la extensión del I preview que es la que instalamos en los primeros

capítulos pues podemos visualizar aquí a un ladito nuestro sitio vale Y esto es lo que habíamos maquetado simplemente

habíamos hecho algunos elementos al azar y pues agregamos algunas etiquetas algunos algunas clases incluso y acá le

habíamos puesto ropa para tu marmota vale le pusimos cosas así super Random pero ahorita podemos irlo modificando

Vale entonces nuevamente analizando este documenti pues tenemos aquí el title en el cual podemos vamos ponerle mi primer

sitio web Vale mi primer sitio web entonces aquí podemos ver como ya cambió a mi primer sitio web gracias a la

extensión de Light preview que nos está actualizando en tiempo real pues la información que agregamos a nuestro

sitio web a ver qué es lo que estuvimos haciendo aquí pues hicimos un header si

recuerdas para crear un header tenemos que agregar las etiquetas header y dentro de ella agregamos esta imagen con

la clase logo también agregamos algunos estilos si recuerdas pero ahora qué es lo que vamos a hacer pues vamos a

quitarle Todos los estilos que habíamos agregado vale de momento pues no los vamos a necesitar Así que simplemente

los vamos a borrar nuevamente vas a ver que aquí pues todo esto se desborda se hace así todo feo vale Pero vamos a

darle unos estilos diferentes Si damos clic en este icono de aquí pues vas a darte cuenta que te sale abrir en

explorador vale con esto pues lo vamos a abrir en el navegador y por lo tanto yo ya puedo cerrar Esto vale vamos también

aquí a compartir esta pantallita para poder ir viendo los cambios aquí y Mira aquí agregamos el selector universal con

un Box sizing Border Box que ya vimos en la clase uno pero con esto no basta vale necesitamos también ser capaces de

resetear todo el sitio web si te acuerdas yo ya te había dicho que cada navegador agrega estilos por defecto es

por eso que a pesar de que tú no has agregado estilos pues ya contamos con un tipo de fuente que en este caso es Times

New Roman con algunos márgenes con algunos paddings etcétera Vale entonces la idea va a ser resetear esos estilos

que agrega el user agent Style sheet para que podamos agregarlos nuestros sin que nos afecten a la hora de maquetar

entonces para esto lo único que tenemos que hacer es escribir css reset y este es el más famoso de mejor web Así que lo

único que tenemos que hacer Pues sería copiar ar Todo esto le damos control c y volvemos acá vale pero ojo que dentro de

esta carpetita de css vamos a crear otro archivo llamado reset.css vale lo que vamos a hacer a

continuación pues va a ser pegar todo este código vale con eso basta Pues en realidad no vale También tenemos aquí

pues este comentario el cual pues hace referencia a majer web y a su sitio web vale tú lo puedes dejar si quieres como

para dar créditos a esta persona o o simplemente lo podrías borrar Vale entonces vamos a guardar Aquí vamos al

Index Y recuerda que cada archivo que agreguemos dentro de nuestro documento pues tenemos que linkear lo vale Para

eso vamos a utilizar emet y vamos a escribir la palabra link 2.css presionamos Tab y Fíjate comoo nos

autocompleta Vale ahora vamos a borrar esta ruta de href y vamos a poner la ruta en donde se encuentra nuestro

archivo si te fijas aquí ya me está autocompletado así que puedo ir navegando aquí con unos simples clics y

seleccionar reset css Si volvemos acá al sitio te vas a dar cuenta que ya sufrió algunos cambios todo este documento vale

algunos de ellos Pues es que se han ido los márgenes que teníamos y separaban el contenido Pues de todo el viewid Eso

quiere decir que se está aplicando nuestro reset ahora vamos a analizarlo un poquito vale acá Fíjate que podemos

dar estilos a todos estos selectores simplemente separándolos con una coma entonces aquí lo que quiere decir es que

le está dando un margin cero padding cero Border cero font size del 100% font inherit y vertical andine Line a todo

esto de una sola vez vale en lugar de tener que estar haciendo cosas como h1 h2 h3 vale Y luego tener que estar

haciendo esto en cada una de estas Pues selectores así como estamos viendo aquí en el ejemplo pues lo que est lo que

estamos haciendo pues es ahorrarnos hacer todo esto y poner todas las etiquetas a las que les vamos a dar el

mismo estilo separadas con coma vale luego acá tenemos un comentario que dice html 5 display roll reset for older

browsers el cual Pues como dice ahí nos va ayudar a resetear los estilos de navegadores más antiguos vale por ahí en

caso de que quede una persona que todavía esté usando Internet Explorer pues esto nos va a ayudar a formatearlo

vale acá podemos ver que tenemos un display block un inline hate de uno all y ull con l Style Non un block quote con

su quote vaya en donde los quotes son Non vale acá vemos que le está formateando al anchor un margin un

padding un Border un font size y un font inherit vale Pero a mí también me gustaría agregarle a ese ancor entonces

lo puedo poner acá porque simplemente los estilos son para él un text decoration que sea Non vale ex

decoration Non con lo cual pues se van a ir estas rayitas que aparecen en los enlaces si te fijas y aquí puedo

seleccionarlos Y fíjate que aquí está el text decoration que acabamos de agregar Te das cuenta como te quitan esas

rayitas de ahí abajo pues esa es la idea vale que se quiten a cualquier enlace que vayamos agregando ahora lo que vamos

a hacer es volver aquí a nuestro Styles de momento ya no vamos a tocar este reset Y qué te parece si hacemos la

primera importación de nuestra fuente entonces para ello yo puedo usar aquí simplemente Google fonts aquí googleo

vaya Google fonts y aquí está vale entonces acá podemos ir buscando alguna fuente de nuestro agrado a mí la que más

me gusta y siempre estoy usando se llama Monster rat vale aquí Cuando entras a la Fuente pues puedes ver algunos de sus

estilos puedes probar algún tipo de texto como Hola mundo vale Y fíjate como te va a ir apareciendo te aparece tipo

italic y tipo regular y tipo bolt Vale ahora si ya estás decidido a usar esta fuente pues simplemente le damos aquí en

get font y le vamos a dar en get embed code vale acá tenemos dos opciones de hacerlo Podemos agregar esta etiqueta en

el Head de nuestro documento html o podemos importarlo en el Styles Vale entonces fíjate como tenemos estas dos

opciones pero yo voy a usar de momento esta vale vamos entonces a copiarlo control c y vamos a volver aquí al Index

entonces aquí recuerda dentro del Head es donde ingresamos cualquier archivo ya sea de metadatos o de archivos externos

como es el caso de esta la Fuente Vale entonces al agregar la Fuente ya podemos comenzar a utilizarla aquí nos está

dando un ejemplo de uso de la Fuente con el cual Pues nos está diciendo que podemos usar estas propiedades vale

vamos a copiar Entonces esta línea que dice font family Monster rat y San serif Vale entonces yo aquí le doy control c y

vámonos acá al Style vale aquí lo que vamos a hacer a continuación pues es escribir nuestro selector de etiqueta

Body vale con esto vamos a pegar esta fuente que es la que hemos copiado y vamos a analizar Esto vale Acuérdate que

al usar el selector de Body Pues todo lo que esté dentro de él se va a ver afectado por las propiedades que

agreguemos aquí vale en este caso estamos usando la propiedad font family con la cual le estamos indicando que

utilice Monserrat En caso de que Monserrat no se encuentre porque se te olvidó agregarla O acaso la Fuente ya no

existe ya no está disponible en Google etcétera pues le estamos diciendo que utilice sans serif vale de esta forma

Pues nos aseguramos de que siempre vamos a tener esta fuente de respaldo ya que ella ya se encuentra en el navegador

vale muy bien entonces Si volvemos aquí al sitio web vamos a notar que a pesar de que ya samos la Fuente ya la

instalamos Pues seguimos teniendo aquí Times New Roman Por qué está pasando Esto bueno si recuerdas agregamos un

reset del css que en estos momentos se está reescribiendo Acuérdate que estos son estilos en en cascada Vale entonces

acá lo que yo tengo que hacer pues es pasar este archivo para acá arriba muy bien y solo con haber hecho esto Fíjate

que si guardamos pues ya vamos a tener acá pues la fuente de Monserrat vale por ese simple movimiento que hicimos se

vieron afectados todos nuestros estilos entonces Fíjate que de nuevo si yo vuelvo a pasar este archivo para acá

abajo pues la Fuente ya no se ve aplicada porque ahora se está sobrescribiendo font inherit que es este

valor que estás viendo acá vale de ahí la importancia de que aprendas Cómo funcionan los estilos en cascada

entonces aquí una vez más analizamos y vemos Que Monserrat ya es la Fuente predeterminada y como secundaria pues es

San serif Vale también podemos ir analizando por ejemplo acá y mira acá podemos simplemente escribir font family

y mira lo que te decía ves acá ya tenemos disponible Monserrat debido a que ya la instalamos pero en caso

contrario También tenemos otro tipo de fuentes que ahorita está estás viendo del lado izquierdo Cómo se van

modificando vale estas Fuentes como ya te dije están disponibles en los navegadores Así que tú las puedes

seleccionar por defecto sin tener que hacer ninguna instalación adicional de momento pues ya está nuestra fuente de

Monserrat Así que vamos a comenzar a dar algunos estilos vale a partir de Aquí vamos a empezar a

utilizar una arquitectura llamada bem vale si tú en en Google escribes arquitectura benen pues te van a salir

varios artículos los cuales puedes darte tu tiempo y leer y de hecho es que te recomiendo que por favor los leas en la

cual vamos a estar viendo un sistema de naming con el cual vamos a nombrar a nuestras clases de manera que vamos a

mantener más consistencia a la hora de agregar nuestros estilos vale Tenemos aquí el ejemplo con este container el

cual pues Le hemos llamado block Vale ahora lo que sigue pues es ir nombrando a los demás elementos vale acá tenemos

un block Element y por lo tanto este también va a ser un block Element porque Pues básicamente no tienen nada

diferente acá tenemos un block Element pero sin embargo tenemos un modificador porque este elemento tres se va a

diferenciar de los otros Vale entonces lo que vamos a hacer es repetir el naming de block Element y luego guion

guion y el modificador vale Este es un ejemplo muy tal vez confuso para ti en estos momentos pero ahorita que lo

apliquemos en nuestro proyectito te va a ir quedando un poco más claro vale como dice aquí pues el objetivo de Ben es dar

mucha más transparencia y Claridad a tu estructura html y css vem te dice cómo se relacionan las clases entre sí lo que

es particularmente útil en secciones complejas del documento todas las clases del proyecto pueden encajar con esta

filosofía ven Pues básicamente son tres siglas B del bloque e de Element y m de modifier vale o sea lo que es lo mismo

aquí como puedes ver en español bloque elemento y modificador te digo que hay varios artículos que puedes ver acerca

de Ben yo aquí abajo te los dejo en la descripción del video vale Pero bueno ahora que ya vimos una pequeñísima

introducción a bem pues vamos a tratar de aplicarla dentro de nuestro proyecto entonces lo que yo voy a hacer acá es

agregar aquí a esta clasecita que ya teníamos pues la palabra header seguido de un gu gu bajo y ahora sí Ya dejamos

el logo vale muy bien Ahora luego de esto tenemos acá una nap vale un menú de navegación vamos a agregarle también su

clase haciendo uso de class Y a esta le vamos a poner header gu B nap vale la dejamos así tal cual acá también

podríamos agregar una Class la cual pues va a ser header recuerda que siempre vamos a replicar el elemento vale para

hacer referencia a dicho elemento seguido de su bloque que en este caso es una lista vale header list y acá la

clase Class header Element vale le vamos a poner Element de esta forma muy bien Además de

eso tenemos un anchor Así que también le vamos a dar su clase en Ben Todo debe de llevar su clasecita Vale entonces por

acá le vamos a decir header gu gu bajo y acá le podemos decir simplemente link vale header link de esta forma Y fíjate

que acá pues ya tenemos lo mismo vale se repite el Li se repite el el anchor Y así sucesivamente Entonces vamos a

borrar esto simplemente y AC acá lo que voy a hacer es seleccionar toda la li y presionando shift alt y flecha hacia

abajo pues vamos a duplicarlo vale de esta forma pues ya solamente tenemos que cambiar Pues el contenido acá podemos

ponerle about acá podemos ponerle contact y acá podremos ponerle incluso Store vale o al revés el contact lo

dejamos acá abajo y acá ponemos Store muy bien Eso sería ya un menuco de navegación ya con sus clases con todo lo

que necesitamos para comenzar a estilar ahora vamos a abrir este reset css ya lo podemos cerrar porque no lo vamos a

utilizar más Únicamente lo usamos para formatear los estilos Vale entonces yo aquí lo que puedo hacer también es

empezar directamente a estilar header de esta forma y acá por ejemplo decirle que tengo un display Flex vale display Flex

Recuerda que ya vimos Flex Box en clases anteriores pero qué pasa que si yo empiezo aquí a agregar Todos los estilos

del header y luego agrego los estilos de la sección Hero y luego de la sección tienda pues al final voy a tener acá un

pergamino enorme de css para evitar eso es que vamos a trabajar por módulos vale Y bueno para ello pues simplemente

podemos seguir usando esta carpetita de css y crear un archivo más el cual por ejemplo se va a llamar

header.css vale De esta manera vamos a mantener aislado pues todas nuestras clases y así va a estar menos revuelto

todo el código Vale ahora como hemos agregado otro archivo Tenemos también que linkear lo aquí vale dentro de la

etiqueta Head por lo tanto voy a escribir link dos puntos y css vale nuevamente acá lo que vamos a hacer es

poner punto sl assets css y vamos a linkar el header vale muy bien Ahora ya que está linkeado nuestro css de header

Si volvemos acá vamos a notar que pues ya tenemos aquí nuestra imagen del lado izquierdo y nuest ro menú del lado

derecho vale quiere decir que flexbox ya se está aplicando porque como recuerdas en clases anteriores cuando tú

inicializa flexbox pues lo que va a pasar es que se te va a poner por defecto Flex Direction con el valor Row

vale lo cual los los alinea horizontalmente ahora para que esta imagen no nos esté estorbando y también

sigamos buenas prácticas lo ideal es agregarle unos atributos a nuestra etiqueta de imagen los cuales son el eh

que en este momento lo podemos dejar en 30 píxeles no hace falta que pongas la los píxeles y el High que también le

vamos a poner 30 píxeles Vale entonces Si volvemos acá al sitio pues vamos a ver que aquí está todo chiquito y todo

bonito vale pero de hecho es que quedó demasiado chiquito cuenta vale a pesar de que te había dicho que es mala

práctica usar estilos en línea esto de aquí no se consideran como tal estilos en línea vale estilos en línea sería

utilizar el atributo Style aquí Style y ahora sí aquí usar un wid y etcétera vale eso sí pues ya no se usa sin

embargo estos atributos de Wi y hide nos ayudan en cuestiones de seo para que el navegador entienda Cuáles son las

medidas de esta imagen vale acá vemos que sigue estando muy chiquita vamos a probar con 60 píxeles guardamos y ahí me

gusta vale así se va a quedar muy bien entonces ahora que ya tenemos nuestra imagen más chiquita y no va a estar

estorbando podemos seguir estilando aquí nuestro Pero recuerda que también podemos usar control shift C para

seleccionar los elementos con las dep Tools si te fijas aquí tenemos nuestro display Flex Por lo cual aquí Sería más

fácil también agregar un justify content Center o space between space around space evenly vale en este caso vamos a

seleccionar space between Vale y vamos a seleccionar align items de esta manera pues van a estar totalmente alineados

nuestros elementos entonces lo que yo voy escribir a continuación pues va a ser un padding Recuerda que el padding

agrega ese acolchado o ese espaciado interno Vale entonces el primer valor es para arriba y para abajo Por lo cual yo

voy a poner un Rem y hacia los lados voy a poner dos Rem vale De esta manera podemos ver aquí esas franjas verdes que

representan el acolchado siendo de dos Rem izquierda y derecha y un Rem arriba y abajo

[Música] vale desde que comenz Aron estas clases con css Yo te he estado hablando de Rem

y de m y de View wid y de View he etcétera vale Pero qué son todas estas medidas No te preocupes porque en la

siguiente clase nos vamos a dedicar única y exclusivamente a ver estas unidades de medida de momento Quédate

con que Rem significa Root m vale Y esta unidad de medida es relativa y va a tomar como referencia el tamaño de la

Fuente de la raíz del documento Cuál es la raíz del documento Recuerda que lo vimos en la primer clase esa pues es

nada más y nada menos que nuestro html y nuestro html Mide 16 píxeles de font size por tanto cada Rem que tú

agregues es equivalente a 16 píxeles vamos a ver esto en nuestro sitio web vale Muy bien pues aquí si te acuerdas

nosotros sete un Rem arriba y abajo y dos Rem hacia los lados Entonces vamos a seleccionar aquí este elemento y vamos a

poder ver que tenemos padding de 16 píxeles por 32 píxeles de cada lado Vale entonces fíjate como si multiplicas 16 *

2 Pues nos da 32 Por lo cual dos Rem es igual a 32 píxeles y un Rem es igual a 16 Recuerda que este toma su medida base

del Root o sea de la etiqueta html la cual Pues siempre va a tener 16 píxeles como medida base vale por ahí tenemos

otra unidad de medida llamada m que se parece mucho a Rem de hecho suele haber mucha confusión entre ellas pero la

diferencia es que m toma como medida base Pues el valor que tenga su padre vale puede sonar un poquito confuso No

te preocupes que ya lo veremos en la siguiente clase entonces Rem nos va a servir de momento Quédate con esto te

digo que en la siguiente clase vamos a profundizar pues para establecer medidas relativas vale especialmente le vamos a

sacar ventaja cuando le agreguemos tamaños a los textos entonces si yo quisiera que por ejemplo esta leyenda

que dice ropa para tu mascota mida 40 píxeles Pues yo tendría que hacer lo siguiente Quiero saber cuánto es 40 / 16

vale Esto me va a dar 2.5 Por lo cual yo tendría que agregar acá 2.5 Rem vamos a hacer la prueba font size de 2.5 Rem

Vale ahora analizando de nuevo este texto vamos a ver que efectivamente tiene 40 píxeles okay Entonces qué es lo

que voy a tener que estar haciendo eh sacar la calculadora y dividir cada que quiera agregar textos Pues eso en teoría

sí lo vas a tener que hacer pero también existe un hack que te voy a dar ahora mismo y es que como recuerdas pues Rem

toma su medida base del Root o sea de la etiqueta html que es la que está aquí entonces

Sabiendo eso yo puedo venir acá a mis estilos globales y decir que voy a setear html con con un font size aquí

pon atención porque le vamos a decir que tenga 62.5 por vale esto Fíjate lo que va a

pasar a continuación si yo vuelvo aquí a mi texto podemos ver que de hecho todos los textos se redujeron Por qué Pues

porque ahora mide 62.5 por. quiere decir que estos textos en lugar de valer 16 píxeles ahora valen 10 vale 10 píxeles

cada uno Qué quiere decir que si yo quiero acá de nuevo ponerle ropa para tu mascota un font size de 40 píxeles pues

simplemente voy a tener que escribir font size y le voy a decir 4 Rem Vale entonces volvemos a analizar este texto

y vemos que mide 40 píxeles esto es debido a que con esta configuración de font size a 62.5 por pues hemos seteado

el valor de Rem a 10 píxeles entonces si yo quiero 40 píxeles tengo que poner 4atro Rem si quisiera 12 píxeles cuánto

crees que tenemos que poner pues 1.2 Rem Vale entonces volvemos a analizar el texto y vemos que mide 12 píxeles vale

de esa forma podemos trabajar con Rem de una manera mucho más sencilla acá 1.8 pues son 18 píxeles y así sucesivamente

vale Y entonces al hacer esto pues ya podemos empezar a trabajar con Rem de manera más sencilla vale la pregunta de

Por qué es que tengo que usar Rem en lugar de píxeles para los textos pues ya más o menos la desvelamos ahorita pero

en la siguiente clase vamos a profundizar sobre ello y vamos a ver un poquito de Cómo afecta la accesibilidad

de nuestros sitios web vale de momento pues lo que vamos a seguir haciendo pues es estilar nuestro header que si te

acuerdas ya lo teníamos aquí y si te acuerdas desde aquí Podemos agregar los cambios Recuerda que lo que hagas en las

herramientas del navegador pues Únicamente se ven en el momento pero no se guardan Vale entonces yo tengo que

volver a agregar aquí esto nuevamente agregamos el padding que era de un Rem pero fíjate como ahora un Rem es mucho

menos de lo que teníamos antes vale porque ahora ya no vale 16 píxeles sino que vale dos aún así la intención

siempre fue agregar 10 píxeles y 20 Vale entonces un Rem y dos Rem muy bien Ahora lo que vamos a hacer es copiar todo este

código que acabamos de agregar control c y vamos a volver aquí a nuestro header vale acá vamos a pegar todo el código y

Listo ya se quedó ahora sí guardado para siempre y podemos seguir dando estilos vale lo que vamos a hacer a continuación

pues es editar esta imagen vale que es el segundo elemento de aquí el cual se llama header logo entonces una vez

seleccionando aquí la etiqueta header logo Pues yo ya puedo simplemente empezar a darle estilos por ejemplo a mí

me gustaría agregarle un Border radius que sea del 50% vale con esto vemos que se vuelve un circulito Por lo cual pues

ya se ve pues mucho más como un pequeño logo que cualquier otra cosa también podemos cambiarlo más adelante o de

hecho también podemos Buscar por acá algún ejemplo de log logo poniendo logo ejemplo o example png nos vamos para acá

y acá en herramientas vamos a seleccionar color y transparente Vale entonces acá tenemos varios logos de

ejemplo Recuerda que esto Solo es un ejercicio vale que que no pretende pues llegar más allá de de eso vale por lo

tanto ten cuidado con los logos que utilices en proyectos reales ya que te puedes meter en líos con el copyright e

incluso hablando Ya de sitios web desplegados en la vida real hasta Podrías llevar una demanda así que bueno

de momento Pues todos estos son logos genéricos Por decirlo así tampoco la intención es pues conservarlos o o crear

un sitio real que que vaya a monetizar o a ganar dinero de alguna forma Vale entonces podemos elegir cualquier logo

de momento solamente para para tener algo pues más parecido a lo que sería un sitio web de verdad vale Por ejemplo yo

voy a agregar este de Aquí vemos que no tiene fondo Así que le voy a dar guardar imagen vale s imag lo voy a guardar acá

en downloads tú lo puedes guardar donde quieras y ahora lo que voy a hacer pues es arrastrarlo acá en mis imágenes

Recuerda que creamos una carpetita imágenes y en dado caso de que no la tengas pues simplemente créala vale

dentro de assets vas a crear otra carpeta llamada imágenes y acá la vamos a arrastrar Ahí está vale Ya la tenemos

Si presionas f2 Puedes cambiarle el nombre y ponerle logo algo así muy bien Ahora que ya tenemos logo tienda pues

simplemente podemos cambiarla Aquí vamos a busscar la imagen y vamos a poner acá logo

tienda.png Recuerda que la extensión es importante entonces Si volvemos acá pues ya tenemos aquí el logo vale el logo de

la tienda otra cosa que podemos hacer pues es reutilizar este logo y ponerlo acá te acuerdas que tenemos varios

varias etiquetas que agregan metadatos al sitio pues una de ellas es el fab icon vale el fab icon pues es ese icono

que acabas de ver ahí para agregarlo Pues yo lo voy a poner por acá y vamos a y vamos a escribir con em link do pun

fap icon vale listo ahora lo que tenemos que hacer acá pues es pues es indicarle la ruta Dónde se encuentra nuestro

fabcon vale que de hecho pues es básicamente este mismo así que lo podemos copiar control c y lo pegamos

acá vale eh Pero ahí no vale acá de este lado donde está el href vale guardamos y Si volvemos a nuestro pues ya podemos

ver ahí el icono vale Muy bien pues ahora sí ya tenemos un fabcon y volviendo a nuestro header para

diferenciarlo un poco del resto del sitio también podemos seleccionarlo y de este lado agregar un background Que de

momento sea Black vale Black Ahí está también recuerda que una vez eh seteado el color podemos modificarlo desde aquí

con las herramientas de dep Tools te recomiendo que no agregues colores muy llamativos ya que suelen ser poco

accesibles en temas de contraste vale a mí me gustó por ahí ese moradito sin embargo Pues fíjate que se pierde

nuestro logo aunque después lo podemos cambiar así que de todos modos se lo voy a dejar ahora copiamos ese color morado

que acabamos de agregar y lo agregamos aquí a nuestro header vale pero bueno a final de cuentas yo aquí voy a usar mi

logo que pues es el que pues uso en mis sitios oficiales y tú puedes poner la imagen que te parezca mejor vale Muy

bien pues ahora lo que vamos a hacer es setear algunos los más para nuestro heer logo Por lo cual aquí fíjate que yo lo

puedo poner dentro de estas llavecitas o sea dentro del header y a esto se le llama nesting vale nesting es

relativamente nuevo en css nativo pero ya se podía hacer con preprocesadores como Sas por ejemplo entonces aquí lo

que vamos a hacer es poner punto header gu gu baj logo vale a pesar de que ya le sete un wid y un height a la imagen Pues

acá podemos volverla a manejar Vale entonces acá podría decirle que tenga un 100% por ejemplo una coma y acá un High

de 100% también Y fíjate Cómo se altera nuestra imagen vale ahora es de este tamaño gigantesco entonces acá yo lo que

voy a hacer es decirle que tenga un límite un Max un Max wid Vale y que se limite únicamente a cinco Rem vale

acuérdate que ahora cco Rem pues Vale Pues básicamente 50 píxeles vale también un Max he de cco Rem y con eso pues ya

vemos nuestra imagen ahí toda chiquita y toda bonita otra cosa que también podemos hacer acá pues es agregarle su

Border radius que hace un rato no lo guardamos Porque lo hicimos en las dep Tools y decirle que sea del 50% vale de

esa forma Aunque agregue una imagen cuadrada o de cualquier otra forma siempre va a tener esa forma redondita

vale también lo que voy a hacer ahora es decirle que tenga un object fit cover vale object fit cover fit cover se va a

asegurar de que nuestra imagen no se deforme cuando cambiamos su tamaño vale Fíjate que además de cover tenemos otros

valores como contain fill Non scale down fíjate como todo esto va afectando vale inherit revert reverse onset etcétera

vale Ahorita no lo vas a notar tanto pero cuando empecemos a trabajar con otro tipo de elementos Como por ejemplo

una Card o alguna imagen de portada pues lo vas a notar mucho más vale Enton Entonces vamos a dejarlo como contain ya

que siempre quiero que mantenga su tamaño original adaptándose a la medida que le estamos agregando actualmente

vale muy bien Fíjate Entonces como ya va tomando forma nuestro sitio web ahora tenemos Pues esta pequeña barra de

header de color morado y podemos seguir agregando más estilos por ejemplo a nuestro header yo también le puedo

agregar un position que ya hemos visto en otras clases y recuerda que vamos a tener una clase especial para ver

position vale Y esta va a tener el valor de fixet Entonces al darle fixet fíjate como acá afecta su tamaño Por lo cual yo

tengo que decirle ahora que tenga un wid del 100% vale con eso recupera su tamaño normal pero fíjate que ahora tenemos una

barra de navegación que va haciendo scroll pues junto con nosotros vale Muy bien pues vamos a agregar ese Wi del

100% aquí debajo para que pues no tengamos ningún problema Vale ahora sí podemos seguir dando estilos y ahora lo

que vamos a hacer pues es modificar este estos elementos del nap vale si te fijas acá tenemos el header nap Por lo cual

podemos empezar a estilar eso vale vamos a ponerlo aquí debajo también dentro de nesting podemos simplemente poner punto

hea naap y a este también le vamos a dar un display Flex de esta manera pero podemos hacer más te acuerdas que

podemos estilar varios elementos a la vez Pues yo aquí también podría copiar header list poner una coma por acá acá

No te olvides de ponerle el puntito Y fíjate que automáticamente ya tenemos aquí pues el menú de navegación puese

ser en horizontal Vale gracias a flexbox Pero eso no va a ser suficiente Tenemos también que por acá volver a llamar a

Head naap y decirle que tenga un align items que sea Center un Gap que sea de dos Rem podemos llamar a punto header

list de nuevo y acá decirle que tenga un Gap de dos Rem por ejemplo vale acá también podemos empezar a estilar el

texto Así que vamos a decirle que tenga un font size que sea de 1.8 r vale o sea 18 píxeles y mira como aquí ya aparece

nuestro texto de esta manera vale Pero bueno llegó el momento de darle estilos al anchor Por lo cual podemos meterlo

aquí dentro de heer list Muy bien pues entonces vamos a agregar esta pseudo clase de hover para ello en lugar de

tener que escribir de nuevo Heather link eh Y luego hover pues simplemente como está estamos usando nesting pongo un

ampers dos puntos y escribo hover Vale ahora sí acá puedo agregar un color que sea por ejemplo Aqua y Si volvemos acá

podemos hacer hover sobre nuestros elementos y vemos que ya cambian de color vale muy bien Ahora yo lo que voy

a hacer es bajar también un poco la tonalidad de mi header así eh Pues resaltan un poco más los textos y listo

pues ya tenemos un menú fíjate qué bonito está quedando y cómo lo hemos hecho En tan poco tiempo Recuerda que

acá en los enlaces tenemos que quitar esto que habíamos puesto ya que solo lo habíamos hecho de ejemplo con control

shift l seleccionas todos los elementos iguales y de momento vamos a poner simplemente el signo de gato numeral

como lo conozcan en tu país vale también le vamos a quitar el atributo target control d va seleccionando varios

elementos también vale Y listo Pues ahora que hemos terminado de darle estilos a nuestro header vamos a

proceder a darle estilos a Mine vale acá pues si te fijas ya le habíamos dado la clase Hero Entonces vamos a proceder a

aplicar emed sobre todo esto y agregar las clases correspondientes Vale entonces acá por ejemplo vamos a poner

Hero gu gu baj title vale acá pues vamos a poner Class Hero gu gu bajo y le vamos a poner description vale desk de

description acá Fíjate que ya lo habíamos aplicado Hero Button Y por último aquí termina la sección vale

Entonces hasta aquí lo vamos a dejar acá Recuerda que si presionas alt shift y la letra a Puedes insertar un comentario

Vale entonces acá le vamos a poner sección tienda vale para ir diferenciando cada cosa y acá también

Vamos a ponerle sección Hero Vale ahora fíjate que tenemos un menú de navegación y yo quiero que me vaya llevando a las

diferentes secciones de mi sitio web para ello lo que puedo hacer es ir agregando ids entonces aquí agrego ID

digo que este va a ser igual a Hero y ahora si voy acá a mi menú de navegación acá en lugar de Home yo le voy a decir

Hero vale en Home yo puedo poner acá Hero sin quitar ese numeral o gato o almohadilla bueno ahorita no va a ser

muy visible pero fíjate como acá se ha agregado Hero ves aquí ya estamos agregando un poquito de navegación

lineal y podemos hacer lo mismo por ejemplo con tienda vale acá yo puedo poner ID y pongo tienda y por tanto acá

podría poner también la palabra tienda vale fíjate como aquí casi como todavía no tenemos suficientes estilos no se al

canza a ver pero fíjate que sí navega vale Ahorita conforme agreguemos las demás secciones lo vas a ir notando muy

bien de momento vamos a dejarlo así y vamos a dar estilos a nuestro Hero pero vamos a cambiarle acá y acá vamos a

ponerle tienda vale tienda y acá de momento pues no vamos a tener nada podemos poner patata cualquier cosa Vale

y procedemos a darle estilos a nuestro Hero section acá para que no nos estorbe el header Ya no lo vamos a tocar por

ahora podemos presionar este toggle y todo se va a agrupar vale vamos ahora a volver acá a Styles donde estamos

agregando Pues básicamente todos nuestros estilos globales y yo voy a escribir el selector de tipo etiqueta

llamado Mind y Aquí vamos a agregar un padding vale vamos a agregar un padding pero este va a ser padding top vale Y le

voy a decir que tenga cinco Rem ahorita vas a ver por qué y le voy a decir que tenga 10 Rem vale Y esto es porque al

agregar fixet al header esto se había quedado oculto si te diste cuenta Entonces esto ya no se veía por eso es

que lo estamos separando un poquito del header ya que la propiedad fixet hace que se recorra Pues un tramo Vale

entonces una vez hecho eso al m ya no necesitamos moverlo y también otra cosa que podemos hacer es en lugar de llamar

este simplemente Style como lo llamamos al principio solo para dar el ejemplo podemos llamarlo global vale donde van a

estar todos nuestros estilos globales pero ojo que le hemos cambiado el título y ahora tenemos que hacer lo mismo aquí

Vale entonces en lugar de Style yo le voy a poner global de esta forma Pues mis estilos siguen

funcionando Ahora imagínate que queremos seguir reutilizando esto este color morado Vale entonces yo tendría que

estar copiando este morado cada vez o [Música] grabábamos que hacer es escribir la

etiqueta Root entonces para poder escribir la etiqueta Root tenemos que hacer uso de dos puntos Root vale acá yo

voy a abrir mis llavecitas y para poder escribir nuestras variables tenemos que poner dos guiones un dos acá yo voy a

escribir Mind gu color y supongamos que mi Mind color va a ser el Black de momento Vale y el secondary color fíjate

como ya nos autocompleta copilot entonces ahí nos queda secondary color White vale a ahora Podemos agregar el

Purple diciendo que este va a ser el bg color vale bg color ponemos dos puntos y pegamos el colorcito que estamos usando

en el header Vale ahora también Podemos agregar otros atributos además de colores Por ejemplo yo acá podría decir

guion guion fuente por ejemplo o todo en inglés también font y guion Monserrat vale Monserrat entonces acá yo me puedo

agarrar y copiar estas Fuentes las corto con control x y las pego acá Vale ahora cómo vamos a utilizar esta variable pues

simplemente Aquí vamos a escribir la palabra bar vamos a abrir estos dos paréntesis y Aquí vamos a mandar a

llamar a font gu Monserrat Vale y de esta forma ya estamos utilizando esta variable este padding top siento que me

quedó demasiado exagerado Vamos a darle un 6% vale y de hecho también lo vamos a convertir en una variable de una vez la

vamos a escribir y le vamos a poner pd gu top vale pd gu top Entonces vamos a crearla acá ponemos pd gu top dos puntos

y sete nuestros seis Rem vale acá no te olvides que van dos guiones al principio Entonces ya de esta forma estamos

sustituyendo un valor pues fijo que tendríamos que repetir cada vez por una variable que podemos reutilizar vale

También acá Podemos agregar comentarios y podemos acá por ejemplo escribir vamos a pasarla para abajo Vale y escribir

aquí textos tamaños vale tú le podrás poner el comentario que quieras pero bueno acá por ejemplo podemos setear los

h1 a 4 Rem por ejemplo vale de momento pues no los vamos a usar Pero podemos setear los párrafos - p por ejemplo y

decir que estos siempre van a tener 1.8 Rem o 1.7 Rem por ejemplo y Este fíjate que se

lo podemos poner aquí en el body para que automáticamente Cualquier párrafo que estemos usando pues ya tenga este

tamaño de fuente entonces acá decimos font size y usamos la variable bar con - p y listo vale vamos a ver que pues

automáticamente todos nuestros textos ya tienen pues 17 píxeles o sea 1.7 Rem Vale ahora si quisiéramos de una vez

setear también los h1 Pues aquí usamos el selector de h1 y mandamos a traer a font size y mandamos a traer a la

variable de h1 vale automáticamente pues cualquier h1 que tengamos acá Fíjate que ya tiene 40 píxeles ahora si yo también

quiero que tenga un font weave global por eso es que este archivo ahora se llama

global.css pues le vamos a poner un font weight de 800 vale Y mira cómo cambia que de hecho es demasiado Así que vamos

a ponerle 700 y ahí ya se ve más bonito ahora fíjate que acá en el body vamos a bajar primero que nada Este h1 vale

vamos a mantener la misma jerarquía que tiene nuestro html entonces acá yo ya tengo un font

family un font size para los párrafos y también puedo agregar un color base Vale entonces acá puedo poner un color Que de

momento va a ser la variable m color Vale entonces con esto todos nuestros textos serán negros siempre si yo

cambiara ahora ve la ventaja si yo cambio esta Mind color a rojo todos los lugares donde esté usando esta variable

van a cambiar a rojo en automático vale de esa forma es mucho más fácil mantener nuestro código a futuro de momento De

hecho no le voy a poner negro total ni blanco total porque eso no es accesible tenemos que ponerle un color más tenue

como este de aquí y lo mismo vamos a hacer para el secondary que va a ser el color de fondo vale No puede ser

totalmente blanco porque eso no es accesible lastima la vista Entonces vamos de vuelta al Body y le voy a decir

que tenga un background que va a ser la variable secondary color vale Y acá ya la podemos ver este fondo blanco es de

hecho de esta imagen que está gigantesca pero fíate que acá ya se alcanza a ver el color de fondo vale igual si yo en un

futuro lo cambio vamos a ver que se cambia en todos lados donde esté usando la variable

Vale ahora vamos a agregar un tema oscuro únicamente utilizando css para esto lo que yo voy a hacer es pasarme

hasta acá abajo y decir Dark Mode vale Dark Mode entonces acá lo que voy a hacer es declarar

@mia y vamos a poner paréntesis y decir que prefers color skim con el valor Dark Vale ahora lo que tengo que hacer pues

es abrir estas llaves y lo que yo meta dentro de estas llaves pues va a ser nuestro tema oscuro vale prefer color

schemes es usado para detectar si el usuario ha solicitado el modo claro o el modo oscuro vale esto el usuario lo

puede configurar desde su sistema operativo pero también lo puede setear individualmente desde su navegador

ahorita lo vamos a ver entonces Antes que nada vamos a ir pasando estas mismas variables control C para acá adentro

vale Y ahora lo que vamos a hacer pues es invertir los colores vale vamos a copiar Esto bueno control x más bien y

lo vamos a pegar aquí y ahora nos llevamos este color blanco vale control x y lo pegamos acá arriba Entonces como

te digo Aquí ya tenemos un tema oscuro aunque no pareciera Así Fíjate que aquí ya cambió tanto mi texto como mi fondo

esto es debido a que yo tengo tengo configurado mi navegador para modo oscuro vale prefer color skin pues

detecta siempre la preferencia del usuario si este prefiere un sitio con el tema claro o el tema oscuro acá te dejo

la documentación para que puedas leerlo más a detalle de momento lo que voy a hacer aquí es ir a las configuraciones

de mi navegador vamos aquí a settings y aquí en apariencia yo voy a seleccionar like vale fíjate que acá mis ojos se

están quemando Pero bueno vamos a ver que el sitio Ahora tiene tiene automáticamente estos colores vale Muy

bien pues entonces ya tenemos configurado nuestro modo claro y nuestro modo oscuro Fíjate que aquí puedo

seleccionar lo mismo que Windows de nuevo vuelve a oscuro y por tanto esto también se cambia a oscuro de esa forma

pues ya aprendiste Cómo empezar a utilizar el prefer color skims que nos va a ayudar a setear tema claro y oscuro

en nuestros sitios web vale de momento yo voy a comentar esto porque nos va a estar estorbando para pues la

maquetación de nuestro sitio Recuerda que para comentarlo simplemente seleccionas el texto presionas alt shift

y la letra a Vale entonces al comentarlo pues ya nuestro sitio recupera su color claro que es con el que vamos a estar

trabajando por defecto y después nos podemos enfocar en el tema oscuro vale muy bien antes de continuar con el Hero

para que no nos esté estorbando esta imagen de hecho es que vamos a quitarla y vamos a buscar por acá alguna

referencia de imágenes y lo que vamos a hacer es copiar este enlace vale yo te voy a dejar también esto aquí en la

descripción del video para que puedas agregar estos enlaces acá en tu documento Vale entonces lo único que

tenemos que hacer es Buscar esta imagen dónde está pues nuestro gabinete de PC y acá vamos a poner control v y Si

volvemos al sitio web pues podemos ver que ahora tenemos un lindo gatito vale Este gatito cada vez que recargué la

página Pues nos va a mostrar una imagen diferente vale De esta manera pues podemos tener más dinam mismo en

nuestros ejercicios como te digo te dejo el enlace aquí debajo en la descripción del video entonces recuerda que aquí ya

debemos de cambiar el altex Entonces le podemos poner pues como va a ser una Card podemos ponerle e camisa para gato

vale Y en lugar de ser ropa para marmota vamos a dejarlo como ropa para tu gato de esa forma Pues ya hay un poquito más

de coherencia vale oferta en ropas para gatos vale Y este Eh ancor pues le vamos a cambiar el texto Y en lugar de decir

ir al portafolio Recuerda que estos textos los agregamos de ejemplo en la clase número dos me parece así que bueno

ahorita ya le vamos a poner ver ofertas vale Muy bien Entonces ahora lo que vamos a hacer acá es ir agregando

descripciones a nuestra car por ejemplo acá le ponemos suéter para verano Y así vale envío de TR a cu días 50 pes

etcétera muy bien listo con eso tenemos Así que vamos a volver acá pero sin antes agre ag arle un wid de 100 píxeles

y un he de 200 vale vamos a ver qué tamaño toma y mira aquí está lo que te decía la imagen se está deformando pero

si yo acá la selecciono y le agrego un object fit cover Fíjate que nuestra imagen ya se ve más bonita vale Pero eso

lo haremos después Ahorita vamos a recargar la página y no importa que se deforme porque estamos trabajando con el

Hero Vale entonces al Hero es al que vamos a estilar en este momento así que bueno ya tenemos algunas variables

Recuerda que están ahí para utilizarlas así que no se te vaya a olvidar de repente pasa que pues las dejamos de

usar por alguna razón vale Por ejemplo yo me voy a traer esta de vge color y acá voy a borrar el color y voy a

escribir variable y lo pego vale ent acá sigue funcionando tal cual mi header con su background moradito Así que no hay

ningún problema muy bien pues ahora qué tenemos que hacer con este header pues simplemente lo que tenemos que hacer es

cerrar arlo vale Ya no lo vamos a utilizar porque recuerda que estamos separando todo en módulos Por lo cual yo

necesito crear otro archivo de css al cual vamos a llamar Hero css vale Recuerda que estos archivos los tienes

que ir linkando aquí en el Head yo voy a duplicar esta etiqueta para poder agregar el Hero css vale Muy bien pues

ahora sí vamos a comenzar a darle estilos a nuestro Hero section para ello yo lo que voy a hacer pues es escribir

punto Hero acá Abro mis llaves y vamos a darle también un display que va a ser Flex vale Ahorita estamos trabajando

mucho con flexbox Ya llegará su momento de usar grid Vale entonces vamos a usar un justify content que va a ser Center

de momento una Line items como siempre que va a ser Center para que todo esté bien centrad too vale Fíjate que aquí se

está disponiendo de una manera algo rara Así que lo que voy a hacer es darle un Flex Direction que va ser column vale Y

ahora sí ya están aquí pues uno debajo del otro pero justify content ya no me convence tanto por lo cual lo que voy a

hacer es cambiarlo de Center hacia Flex Start vale acá también puedo ir agregando un padding que sea de 2 Rem y

a los lados de 5 Rem vale también voy a agregar un wid que sea del 100% vamos a agregar un min height una altura mínima

de 100 d vh vale fíjate có Ya va tomando forma esto y ahora también Podemos agregar una nueva propiedad que se llama

padding block vale padding block y le vamos a decir que tenga dos Rem muy bien con padding block lo que vamos a hacer

es que nuestra pantalla se deforme cuando por ejemplo desde un Mobile hacemos una rotación del dispositivo Y

entonces tiende a comprimirse el contenido vale acá Fíjate que nos dice la documentación que además de usar

padding block tenemos que usar un gring Mode en este caso tenemos varias opciones como vertical horizontal y

vertical lr vale Ahorita la que vamos a usar pues es esta Vale entonces yo me voy a copiar este esta propiedad vamos a

volver acá y voy a agregarla aquí debajo vale muy bien Vamos a agregar ahora un background Que de momento va a ser Black

simplemente para ir diferenciándolo de las demás secciones mira y ahora lo que voy a hacer es copiarme todo esto vale

vamos a sustituirlo aquí lo pegamos y muy bien recargamos la página ahora vamos a volver a utilizar la imagen de

los gatos Vale entonces para esto yo simplemente voy a copiar esta imagen de aquí lo que voy a hacer ahora pues es

reemplazar este background por la propiedad background image vale background image Ahí lo

tenemos y background image y background image va a tener un valor llamado URL fíjate como aquí podemos insertar un

enlace o una imagen o cualquier otra cosa Vale vamos a volver aquí y fíjate como ahora tenemos un gato de fondo

ahora e fíjate como al haber agregado una imagen de fondo Esta no es lo suficientemente grande para abarcar todo

nuestro Hero section Así que vamos a seleccionarla y acá vamos a empezar a agregar otras propiedades como

background size Y a esta la vamos a poner con como cover vale con cover pues ahora sí nuestra imagen se va a extender

pero sin deformarse ahora podemos también posicionarla con background position y decirle que esté más al

centro vale Center Ahí está entonces vamos a copiar de nuevo estas dos propiedades que agregamos y las vamos a

poner aquí debajo pero fíjate que ahora tenemos un problema y es que este texto ya no se puede leer tan fácilmente

entonces lo que vamos a hacer a continuación pues es agregar un gradiente vale acá tenemos esta

herramienta que se llama gradient generator yo te la dejo aquí en la descripción del video Muy bien Entonces

vamos aquí a generar un pequeño gradiente que nos ayude a difuminar un poco la imagen vale entonces yo por acá

puedo agregar algo así tambén tirando un poco más a los negros pero bajando su opacidad y acá pues ir también haciendo

lo mismo vale muy bien también aquí podemos ir jugando con estas líneas vale Ahorita estamos usando este generador

para economizar el tiempo pero todo esto se puede hacer de forma manual así que bueno vamos a copiarlo pero sin el punto

y coma y nada más hasta aquí vale control c y vamos a venir aquí y lo vamos a pegar antes del URL vale Fíjate

que también acá ahora tenemos que poner una coma vale para separar el la imagen del gradiente y Si volvemos aquí a

nuestro sitio web podemos ver que ahora está difuminado nuestro texto vale Aunque Fíjate que aquí ya no me

convenció tanto que tenga una imagen de gatos Random porque esto no se ve nada bonito Así que vamos a buscar Store

online cats vale algo de tiendas para gato que por ahí podemos encontrar algo bonito buscamos aquí en imágenes y mira

que incluso aquí tenemos algunas generadas por Inteligencia artificial Así que incluso podremos tomar alguna de

esas vale Solo recuerda que imágenes cuadradas pues no se van a ver muy bien en un Hero porque es horizontal vale Y

lo que va a ser el background size cover pues es venderlo Y bueno ya encontré una que me convenció es esta de aquí Así que

para no estarla descargando simplemente le voy a dar aquí copiar dirección de la imagen copy image address y la vamos a

agregar aquí Vale entonces vamos a quitar eso y la ponemos Aquí vamos a ver cómo luce esta imagen en nuestro sitio

web y se ve bastante bonita vale me gusta me convence si cerramos esto podemos ver que queda bastante bien

incluso queda bastante bien para quitarle Este gradiente vale pero que sepas que se puede utilizar para futuros

proyectos vale donde lo requieras de momento queda perfecta ahí me encantó cómo se ve digo obviamente esta imagen

se nota que fue hecha por un diseñador para posicionarse como banner en algún sitio web entonces de ahí es que se ve

también en cualquier sitio donde la agregues vale igual estas podríamos agregarlas ya eso queda a pues selección

tuya vale acá acá el término de búsqueda que usamos fue Store online cats banner Hero vale eso fue lo que usamos para que

nos salieran este tipo de imágenes pero bueno pues ya tenemos esta imagen que se ve bastante bonita Recuerda que seteos

todos los h1 a cuatro Rem sin embargo yo puedo volver a modificarlo desde aquí del Hero vale si yo voy hacia acá a mi

clase Hero title la puedo poner justo aquí y puedo agregar estilos nuevos por ejemplo puedo decir que en lugar de un

font size de 4 Rem que es la variable que estamos usando pues tenga un font size de 8 Rem vale och Rem y vemos como

nuestro texto crece Vale ahora podemos regresarnos acá y escribir de nuevo esto en mayúsculas para que se vea más bonito

vale pero también tenemos algo llamado una propiedad que se llama text transform vale text transform Pues nos

va a permitir capitalizar el texto ponerlo todo en minúsculas o ponerlo todo en mayúsculas con oper casase Vale

entonces vamos a usar oper Case y Si volvemos acá a ver el sitio pues podemos ver que ahora todas son son mayúsculas

vale muy bien Qué te parece si agregamos otra variable a nuestra paleta de colores esta vez pues como para hacer

juego con el banner vale podríamos por ejemplo agregar esta tonalidad de dorado Entonces yo por aquí me voy a copiar

este color Entonces vamos a volver aquí al global y vamos a agregar heading color Vale entonces vamos a agregar

heading color a nuestro h1 que tenemos en el Hero para ello pues vamos a usar color y vamos a setear la variable

heading colors vale Ahí está también podemos ajustar un poquito este color si sentimos que quedó pues muy muy claro

vale muy bien ahora para separar este texto un poquito yo lo que voy a hacer es agregar un text Shadow que va a ser

de dos píxeles dos píxeles cero píxeles y vamos a utilizar la variable m color vale Mind color vamos a ver cómo ahora

se agrega esta sombra del texto a nuestro título vale con la propiedad texto Shadow recuerda que aquí Tú puedes

ir eh poniendo pues por ejemplo tres valores vale en píxeles puedes poner cero píxeles cero píxeles cer píxeles y

por ejemplo un color negro vale vamos a hacerlo cero píxeles cero píxeles y cero píxeles vale luego ponemos Black Acá

está mal escrito píxeles luego Black y ahí tenemos pues una sombra de texto vale Pero ahora lo que vamos a hacer

pues es dar click aquí para desplegar las herramientas de dep Tools y ahora sí podemos ir jugando con el offset

Recuerda que estos son ejes x y y o sea horizontal y vertical y de esta forma podemos ir ajustándolo también vale Y

creándolo desde cero entonces acá también podemos Modificar el blur que es lo que va a hacer que se vea pues

borroso este texto acá lo podemos dejar así y podemos acá pues simplemente modificar Pues a otro color vale el que

quisiéramos nosotros pues podemos ponerlo de momento pues yo no voy a hacer eso sino que lo voy a dejar tal

que así si acaso podríamos Modificar el blur recuerda nada más Esto vale que el primer valor este de aquí es el offset X

vale a izquierda derecha el siguiente valor es el offset y vale abajo arriba en negativo son arriba vale eso

quédatelo bien grabado y el tercer valor es el blur fíjate como se va haciendo borroso vale Esos son los valores que

nos ayudan a setear el text Shadow Okay entonces yo acá voy a reemplazarlo porque ya me gustaron más estos así que

bueno ahí ya tenemos un Hero section Fíjate cómo va quedando bien bonito nuestro sitio web Pero bueno todavía nos

está faltando acá editar este párrafo yo lo puedo seleccionar simplemente control shift c selecciono el texto y podemos

empezar a dar estilos aquí por ejemplo yo le voy a poner un font size que sea de TR Rem vale un font weight que por

ejemplo sea de 600 y vamos a darle un margin top margin top que sea de de un Rem vale para que se separe del título

muy bien Fíjate cómo va quedando este sitio bien bonito y eso que apenas vamos empezando vale acá pues vamos a poner

debajo el punto Hero description vale Hero desk le pusimos te acuerdas y vamos a pegar nuestros estilos si recargamos

pues vemos que ahí está ya nuestro texto guardado Vale ahora acá en lugar de ropa para tu gato podemos hacerlo como ahí se

ven unas croquetas podemos ponerle de todo vale De todo para tu gato y acá Este ofertas de verano vale ofertas de

verano en ropa para gato Ahí está ahora sí vamos ahora a darle estilos a nuestro botoncito vale que es un anchor aquí lo

tenemos Hero Button copiamos este esta clase y vamos a quitarle ese Target Blank vale porque la navegación va a ser

interna entonces acá vamos a ponerlo aquí debajo ponemos punto Hero Button y lo que vamos a hacer ahora pues

podríamos también de nuevo darle un margin top de un Rem pero fíjate que aquí ya estamos haciendo algo que en la

programación pues es una mala práctica que es el repetir código vale Don't repeat yourself es el Dry Don't repeat

yourself no te repitas no repitas código Vale entonces qué podemos hacer aquí para no estar repitiendo todo esto pues

lo que podemos hacer es una referencia al padre Vale entonces vamos a eliminar esos margin Tops de ahí y lo que vamos a

hacer es dárselos al Hero title Vale entonces acá lo que yo voy a hacer es poner punto Hero vale haciendo

referencia al padre que es este de acá y vamos a decir que todo lo que esté adentro o sea con el signo de mayor que

y el asterisco que es el signo universal o que el estamos seleccionando todo entonces le estamos diciendo todo lo que

esté dentro del Hero va a tener un margin eh En este caso en lugar de Top vamos a

manejarlo como bottom vale porque lo estamos dando de arriba hacia abajo entonces en lugar de Top Ahora va a ser

bottom Pero va a seguir siendo de un Rem vale Pero bueno este no va a funcionar con nesting vale Así que lo tenemos que

sacar del todo entonces vamos a ponerlo o acá arriba o también lo podemos poner hasta

abajo vale pero de preferencia lo vamos a dejar acá arriba para que no nos confundamos con el demás código que está

en nesting Entonces recapitulando estamos diciendo que todo todo con el selector este de asterisco todo lo que

esté dentro de Hero por eso es el mayor que va a tener estos estilos o sea un margin bottom de un Rem si dejamos aquí

el mouse podemos ver que acá nos muestra que tenemos el elemento padre Class Hero y vamos a dar estilos al elemento que

esté adentro Vale entonces Si volvemos acá podemos ver que ya tenemos aquí un margin bottom un margin bottom y un

margin bottom sin embargo Pues realmente yo no necesito tener un margin bottom en el botón vale en el anchor entonces se

lo vamos a quitar Pero cómo se lo vamos a quitar si se lo estamos dando a todo Bueno pues para eso tenemos esta

pseudoclases llamada not Vale entonces con not yo le estoy diciendo que no le dé estos estilos a lo siguiente vale le

puedo decir al anchor solamente entonces Si volvemos acá vemos que ya no tiene el margin bottom pero también le puedo

decir que no se los de Al Punto Hero Button vale Hero botón en español se lo puse vale Y fíjate que sigue funcionando

Vale entonces recapitulando estamos diciendo Dale estos estilos a todo a todo lo que esté dentro de Hero pero que

no sea Hero Button vale Hero Button no le des el margin Button vale únicamente Y de esa forma pues ya tenemos la

separación entre nuestros textos y nuestro botoncito Pues de una manera muy sencilla vale Igual acá también

podríamos agregarle dos Rem en lugar de uno y pues ya se ve mucho más separado Muy bien pues vamos a seguir dándole

estilos a nuestro botoncito para esto yo le voy a dar un padding va a ser de un Rem ahorita no lo vas a notar porque

pues no tenemos un background pero se lo vamos a agregar a continuación yo digo background color y vamos a usar una

variable vale bar y vamos a usar esta de headings color para que sea amarillito vale también vamos a decirle que el

color del texto va a ser Black y que va a tener un font size de 1.4 Rem vale volvemos a ver nuestro

botoncito y vemos que ya comienza a tomar forma vale vamos a a darle un font weight también de 700 y bueno este texto

capaz que puede quedar un poquito más grande 1.8 Rem Ahí está Vale podemos darle un Border radius que sea de 9

píxeles y acá vamos a trabajar el padding de la siguiente manera vale un Rem arriba y abajo pero quiero dos Rem

hacia los lados así está mucho mejor también podríamos agregarle un Border que sea de dos píxeles que sea solid y

que sea Black vale Ahí está muy bien También acá lo podemos ir corrigiendo y darle un tono menos oscuro o incluso

cambiarlo por cualquier otro tono vale algo así Ahora vamos a agregarle un hover a nuestro botón Por lo cual pues

yo voy a usar el ampers y voy a hacer un hover sobre nuestro botoncito diciéndole que cambie su background color su

background por un vamos a usar la variable otra vez de headings ahora vamos a decirle que va a ser Black vale

Y que el Border Border color pues va a ser la variable de headings color vale vamos a ver qué es lo que pasa y ahí

vemos que cambia Vale pero no está cambiando nuestro Ah claro Es que aquí usamos una bar vale vamos a quitar esto

y ahí vemos que ya cambia vale también podemos decirle que ahora el color del texto sea White vale Y ahí tenemos