Desarrollo Frontend desde Cero: Creando Tu Primer Sitio Web
Heads up!
This summary and transcript were automatically generated using AI with the Free YouTube Transcript Summary Tool by LunaNotes.
Generate a summary for freeIf you found this summary useful, consider buying us a coffee. It would help us a lot!
Introducción
¡Hola amigos y bienvenidos a otra clase más de este curso de programación frontend desde cero! En este video, continuaremos con el proyecto que iniciamos en las primeras clases: mi primer sitio web. Ahora que tenemos un conocimiento básico de HTML y CSS, incluyendo temas como el modelo de caja, Flexbox, Grid, pseudo elementos, y animaciones, ¡es el momento de dar vida a nuestro proyecto y hacerlo más atractivo visualmente!
Si no has visto los videos anteriores, te recomiendo que lo hagas para que entiendas completamente lo que vamos a revisar hoy. Si insistes en avanzar sin ver los videos previos, te he dejado un enlace en la descripción del video donde podrás encontrar el código HTML necesario para comenzar desde aquí.
Agradecimientos
Antes de comenzar, quiero agradecer a los nuevos miembros del canal. Actualmente somos cinco miembros y agradezco a Burrita, Adolfo Cepeda, Francisco Bordón, y Carlos Ignacio por su apoyo. Gracias a estas contribuciones, podemos seguir ofreciendo contenido gratuito aquí en YouTube. Si deseas apoyar el canal, no dudes en darle like al video y suscribirte.
Retomando el Proyecto
Configurando el Entorno
Asegúrate de tener tu Visual Studio Code abierto y estar posicionado en el directorio de mi primer sitio web. Si no tienes el proyecto, puedes descargar el archivo gist que he mencionado antes. Vamos a abrir nuestro archivo index.html
, y podemos visualizar el contenido utilizando la extensión Live Preview que ya instalamos en clases anteriores. Aquí está la estructura básica que hemos creado, y nuestro objetivo hoy es mejorar su estilo.
Eliminación de Estilos Anteriores
Primero que nada, comenzaremos por eliminar los estilos que hemos aplicado anteriormente para trabajar con una base limpia. Después, agregaremos nuevos estilos utilizando CSS Reset para asegurarnos de que todos los navegadores tienen el mismo punto de partida. Esto es fundamental ya que cada navegador añade estilos por defecto que pueden afectar nuestro diseño.
Incorporando CSS Reset
Agregaremos un nuevo archivo llamado reset.css
donde implementaremos un CSS Reset muy conocido. Al enlazar este archivo dentro de nuestro index.html
, lograremos eliminar todos los márgenes y paddings por defecto que los navegadores nos imponen. Este sencillo paso ayudará a que nuestro diseño sea más consistente en diferentes plataformas y dispositivos,
Estilizando el Header
Ahora que tenemos nuestra base lista, procederemos a estilizar el header. Comenzaremos usando Flexbox para que los elementos dentro del header se alineen correctamente. Para esto, ajustaremos el CSS de la siguiente manera:
- Definimos un
display: flex
para elheader
. - Ajustamos el
justify-content
para mantener un balance entre los elementos. - Agregamos
align-items: center
para asegurarnos que todos los elementos dentro del header estén centrados verticalmente.
Esta técnica nos permite tener un control total sobre la alineación y el espaciado de nuestros elementos, utilizando propiedades de Flexbox.
Personalizando Fuentes y Colores
La siguiente parte es decidir sobre la tipografía y los colores que usaremos en nuestro sitio. Vamos a utilizar Google Fonts para seleccionar una fuente que se adapte a nuestros objetivos estéticos. La fuente Montserrat es una excelente opción ya que es moderna y bien legible.
Agregaremos esta fuente a nuestro CSS
, asegurando que el normal y el bold estén disponibles. Posteriormente, definiremos un sistema de diseño que incluya variaciones de colores para encabezados y textos, utilizando variables CSS para mantener nuestra paleta de colores organizada y fácil de modificar.
Agregando Estilos a los Botones
Los botones también son una parte crucial del diseño, así que es importante asegurarnos de que sean fáciles de usar y visibles. Definiremos estilos para el hover
, dándoles un efecto visual que fluya con el diseño general de nuestra página web.
Creando el Hero Section
Hemos cubierto el header, ahora es momento de trabajar en el Hero Section. Esta sección principal de la página debe atraer la atención del usuario y proporcionarle una excelente primera impresión. Usaremos display: flex
para centrar el contenido dentro de esta sección, y añadiremos una imagen de fondo que complemente nuestro sitio.
Agregaremos una imagen que represente el tema de nuestra página, ajustaremos su tamaño usando background-size: cover
, para asegurarnos de que cubra completamente la sección. También consideraremos usar una máscara de color semitransparente para mejorar la legibilidad del texto que coloque sobre la imagen de fondo.
Preparándonos para el Responsivo
Aunque hoy estamos enfocándonos en la versión de escritorio, es importante mencionar que debemos considerar un diseño responsive. Esto es algo que abordaremos en futuras lecciones, así que asegúrate de seguir practicando lo que aprendemos. En la próxima clase, empezaremos a implementar un sistema de cards utilizando CSS Grid, explorando cómo hacer diseños más complejos y responsivos.
Conclusión
Esto es solo un vistazo a lo que hemos aprendido y lo que podemos hacer en nuestras clases de desarrollo frontend. Si sigues practicando, aplicarás todo lo aprendido y desarrollarás habilidades sólidas en programación web.
Recuerda que a medida que aumenta tu conocimiento, también lo hará la complejidad de tus proyectos, así que mantente motivado y sigue explorando. ¡Nos vemos en la siguiente clase! No olvides dar like al video y compartirlo con quien creas que podría beneficiarse. Bye!
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
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
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
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
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
Sabiendo eso yo puedo venir acá a mis estilos globales y decir que voy a setear html con con un font size aquí
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
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
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
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
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
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
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