Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilizando nuestro menú desplegable con CSS

24/43
Recursos

Aportes 318

Preguntas 69

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Como aporte, Ya se pueden realizar listas desplegables con solo HTML, sin necesidad de CSS con la etiqueta details, se usa así:

<details>
  <summary>Label</summary>
  <ul>
  	<li>Item</li>
    <li>Item</li>
  </ul>
</details>

Hola, a quienes tienen dudas o algo les falla, les comparto mi código funcional tal como se ve en el curso para que puedan comparar y revisar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet"> 
  <title>Header</title>
</head>
<style>
  body {
    margin: 0px;
    font-family: 'Muli', sans-serif;
    background-color: #ab88ff;
  }
  .header {
    background-color: #ab88ff;
    width: 100%;
    height: 80px;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .header__img {
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .header__menu {
    margin-right: 30px;
  }
  .header__menu ul {
    display: none;
    list-style: none;
    padding:0px;
    position: absolute;
    width: 100px;
    text-align: right;
    margin: 0px 0px 0px -14px;
  }
  .header__menu:hover ul, ul:hover {
    display: block;
  }
  .header__menu li {
    margin: 10px 0px;
  }
  .header__menu li a {
    color: white;
    text-decoration: none;
  }
  .header__menu li a:hover {
    text-decoration: underline;
  }
  .header__menu--profile {
    margin-right: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }
  .header__menu--profile p{
    margin: 0px;
    color: white;
  }
</style>
<body>
  <header class="header">
    <img class="header__img" src="./logo-platzi-video-BW2.png" alt="">
    <div class="header__menu">
      <div class="header__menu--profile">
        <img src="./user-icon.png" alt="User">
        <p>Perfil</p>
      </div>
      <ul>
        <li><a href="/">Cuenta</a></li>
        <li><a href="/">Cerrar Sesión</a></li>
      </ul>
    </div>
  </header>
</body>
</html>```

Me salieron errores diferentes a los que le salieron a ella, saben que es hermoso, que los solucione y por otro camino termine con el ejercicio. Aprendí ❤️

De poco sirve que intentes implementar BEM si vas a terminar escribiendo un selector así:

<code>
.header__menu li a

Para mí el tag li debe llevar una clase tipo ‘menu__list’ y el enlace debería llevar una clase ‘menu__link’, se supone que en BEM todo lo que este dentro de un bloque es un elemento no?

Este es mi proyecto con un logo diseñado por mi para un trabajo

Compañeros, estoy replicando los conocimientos aprendidos en las clases a una página personal y así me quedo el menú desplegable.

Algo que ayuda muchísimo es esta linea

*{
      outline: 1px solid red;
    }

HTML
<link href=“https://fonts.googleapis.com/css2?family=Mulish:[email protected]&display=swap” rel=“stylesheet”>

CSS
font-family: ‘Mulish’, sans-serif;

Este es mi CSS sin tanto poner, quitar, que ahora muevele aqui, etc.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        background-color: #AB88FF;
        font-family: 'Muli', sans-serif;
    }
    .header {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
    .header__img {
        width: 200px;
    }
    .header__menu ul {
        display: none;
        list-style: none;
        padding: 0;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0 0 0 -1em;
    }
    .header__menu li {
        margin: 10px 0;
    }
    .header__menu li a:hover {
        text-decoration: underline;
    } 
    .header__menu li a {
        color: white;
        text-decoration: none;
    }
    .header__menu:hover ul {
        display: block;
    }
    .header__menu__profile {
        display: flex;
        align-items: center;
        color: white;
    }
    .header__menu__profile img {
        width: 40px;
        margin-right: 5px;
    }

Si colocamos .header__menu:hover ul, ul:hover {}, y colocamos otro ul en el sitio nuestro menú se desplegará cuando pasemos el mouse por ese otro ul. Para solucionar esto debemos usar .header__menu:hover, .header__menu ul:hover {}

Srta. tutora déjeme decirle que usted es excelente, he pasado buscando 2 años quien me enseñe a hacer lo que usted nos ha mostrado en esta clase.
print(Felicidades, y muchas bendiciones a todos con sus estudios);

Creo que el nombre de la fuente cambio y ahora se llama Mulish, por si alguien tiene duda

Me tomó 1 hora ver la clase, pues alimentaba el código del proyecto de este curso al tiempo. Luego un par de errores, leer el código y ver dónde estuvo mi error. Esta es la clase 24 pero es suficiente para trabajar en mi propia pagina web; así ya tendré el Header de mi página. Amé esta clase.

quisiera dejarles dos juegos que me ayduaron mucho aprender a seleccionar etiquetas y usar flex box. si lo repasan cada 3 días o cada día seguro que en 15 días ya lo dominan bien.
seleccionadores
flex box

Intenté hacer lo mismo pero hice unos cambios para optimizar

Es la clase que más me ha costado entender, pero me encanta cuando al fin lo hice 😃

hola tengo una duda al momento de agrega la propiedad display flex, el menú y el icono pasan al otro lado de la pantalla pero la frase cerrar sesión hace un salto de linea que no puedo quitar y no se por que pasa

¿Por que el intro de la escuela de JavaScript es un cubo? Alguien sabe 🤔🤔🤔

Al utilizar la propiedad flex es mas fácil alinear los elementos. la clase del menú del perfil la realice de la siguiente manera:

.header__menu--profile{
    margin-right: 8px;
    width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

Se ve esto en los cursos básicos de la carrera de Arquitectura Front-end

Mi icono y perfil solo se alinean a mi logo, o sea se sube mas no se coloca al otro lado de la pantalla, alguna sugerencia?

.header {
background-color: blueviolet;
width: 100px;
height: 80px;
display: flex;
justify-content: space-between;

}

Hola a todos!

Quisiera compartir mi código CSS, traté de escribirlo de manera diferente, creo que logré algo más corto, pero con un resultado similar:

@import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap");
/* Globals */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
a,
p {
  text-decoration: none;
  color: #fff;
}
body {
  font-family: "Mulish", sans-serif;
  background-color: #ab88ff;
}
/* Header */
.header {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100vw;
  max-width: 95%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__img {
  width: 200px;
}
.header__menu ul {
  display: none;
  position: absolute;
  right: 0;
  padding-top: 10px;
  text-align: right;
}
.header__menu:hover ul,
ul:hover {
  display: block;
}
.header__menu--profile {
  margin-top: 10px;
}
.header__menu--profile p {
  text-align: center;
}

Acepto criticas y sugerencias, jeje.

Saludos.

Hasta ahora todo muy bonito, pero debo decir que seguir el paso a paso funcina bien, pero al momento de hacerlo sola me volveria loca jaja 😜
creo que esto requiere demasiada practica.

Te salen errores imprevistos y aprendes cosas nuevas resolviendolos eso es lo que emociona de la programación

Una sugerencia, es que cuando usen alguna propiedad de css expliquen que es lo que suceder o como funciona. En el caso de display flex no entiendo bien cual fue la función, la profesora solo lo puso y luego dijo como quedaría mas no explico como es que funciona, lo mismo sucede con otras propiedades como el absolute y el display block. Si bien en clases anteriores nos mostraron un recuadro con la teoría, creo que se entendería mejor si se explicará al mismo momento en que se esta ejecutando.

Así vamos!!

Asi va quedando :3

Requiere mucha investigación y tiempo de práctica este reto.

Si no encuentras el font, yo use Mulish Bold 700:

<link href="https://fonts.googleapis.com/css2?family=Mulish:[email protected]&family=Public+Sans:ital,[email protected],100&display=swap" rel="stylesheet">

font-family: ‘Mulish’, sans-serif;

Super, use unas imágenes que tenia en mi maquina y me obligó a hacer unos ajustes. Fue genial.

Yo también termine con alguna modificación…

Excelente! pensé que solamente con js se podía crear ese efecto

No puedo subir imágenes :v

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			margin: 0;
			background-color: #ab88ff;
			font-family: 'Muli', sans-serif;
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 80px;
			background-color: #ab88ff;
		}

		.header__img {
			width: 200px;
			margin: 10px 0 10px 10px;
		}

		.header__menu {
			position: relative;
			margin-right:30px;
			height: 50px;
		}

		.header__menu ul {
			display: none;
			list-style: none;
			padding: 0;
			position: absolute;
			right: 0;
			width: 100px;
			text-align: right;
		}

		.header__menu:hover ul {
			display: block;
		}

		.header__menu li {
			margin: 10px 0;
		}

		.header__menu li a {
			color: #ffffff;
			text-decoration: none;
		}

		.header__menu li a:hover {
			text-decoration: underline;
		}

		.header__menu--profile {
			display: flex;
			align-items: center;
			color: #ffffff;
		}

		.header__menu--profile img {
			margin-right: 8px;
			width: 40px;
		}
	</style>
</head>
<body>
	<header class="header">
		<img class="header__img" src="./logo.png" alt="Logo_platzi">
		<div class="header__menu">
			<div class="header__menu--profile">
				<img src="./user.png" alt="user">
				<p>Perfil</p>
			</div>
			<ul>
				<li><a href="/">Cuenta</a></li>
				<li><a href="/">Cerrar sesión</a></li>
			</ul>
		</div>
	</header>
	<!-- <section>
		<div>
			<h1>Esta es la sección principal de la App</h1>
		</div>
	</section> -->
</body>
</html>

Si notan, estoy corriendo mi pagina desde un server, esto lo hago con la extension ‘live server’ de visual studio code, me permite ver los cambios en tiempo real en el navegador sin recargar la pagina lo que permite un desarrollo mas comodo y rapido.

Muy buena clase!! Otra opción para que el menú tenga un subrayado es:
.header__menu li a:hover {
border-bottom: 1px solid white;
}

Me gusta más porque queda más espacio entre la línea y la palabra.

Poco a poco se van incorporando todos los conocimientos 😄

Mi codigo css algo digerente pero funciona xd

*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: #AB88FF;
    font-family: 'Muli', sans-serif;

    
}
.header{
    width: 100%;
    height: 80px;
    background-color: #AB88FF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__menu{
    margin-right: 60px;
}
.header__menu--profile{
    margin-right: 60px;
    width: 40px;
    display: flex;
}

.header__menu--profile img{
    margin-right: 8px;
}
.header__menu--profile p{
    height: 40px;
    padding-top: 13px;
}
.header__img{
    width: 200px;
    height: 80px;
    
    margin-left: 10px;
}
.header__menu p{
    color: white;
}
.header__menu ul{
    display: none;
    list-style: none;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
    margin: 0px 0px 0px 10px;
    
}
.header__menu:hover ul, ul:hover{
    display: block;
}
.header__menu li{
    margin: 10px 0px;
}
.header__menu li a{
    color:white;
    text-decoration: none;

}
.header__menu li a:hover{
    text-decoration:underline;
}

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<link rel="<link href=“https://fonts.googleapis.com/css?family=Muli&display=swap” rel=“stylesheet”>" href="">
<title>Buscador</title>
</head>
<style>
body {
margin: 0px;
font-family: ‘Muli’, sans-serif;
background-color: #A50AFF;
}
.header{
background-color:#A50AFF ;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
}
header img{
width: 200px;
margin-top: 10px;
margin-left: 10px;
}
.header__menu {
margin-right: 30px;
}
.header__menu ul{
display: none;
list-style: none;
padding: 0px;
position: absolute;
width: 100px;
text-align: right;
margin: 0px 0px 0px -14px;
}
.header__menu:hover ul, ul:hover {
display: : block;
}
.header__menu li {
margin: 10px 0px;
}
.header__menu li a{
color: whitesmoke;
text-decoration: none;
}
.header__menu li a:hover{
text-decoration: underline;
}
.header__menu–profile {
margin-right: 60px;
width: 40px;
display: flex;
}
.header__menu–profile img {
margin-right:8px;
width: 40px;
}
.header__menu–profile p {
margin: 0px;
color: whitesmoke;
}
</style>
<body>
<header class=“header”>
<img class= “header__img"src=“file:///Users/jorge/Desktop/logo-platzi-video-BW2.png” alt=“logo”>
<div class=“header__menu”>
<div class=“header__menu–profile”>
<img src=“file:////Users/jorge/Downloads/icons8-natural-user-interface-1-16.png” alt=“User”>
<p>Perfil</p>
</div>
<ul>
<li><a href=”/">Cuenta</a></li>
<li><a href="/"></a>Cerrar Sesion</li>
</ul>
</div>
</header>
</body>
</html>

pero el hoover no me funciona

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Platzi Video</title>
</head>
<style>
    body 
    {
        background-color: rgb(4, 155, 175);
        width: 100%;
        height: 10%;
        font-family:Arial, Helvetica, sans-serif
    }
    .header
    {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;       
    }
    .header__img 
    {
        width: 200px;
        align-items: center;
    }
    .header__menu
    {
        margin-right: 20px;
    }
    .header__menu ul
    {
        display:none;
        list-style: none;
        margin: 0 0 0 -14px;
        text-align: right;
        position: absolute;
        padding: 0;
    }
    .header__menu:hover ul, ul:hover
    {
        display:block;
    }
    .header__menu li 
    {
        margin: 10px 0;
    }
    .header__menu li a
    {
      text-decoration:none;
      color: #fff;
    }
    .header__menu li a:hover
    {
        text-decoration: underline;
    }
    .header__menu--profile
    {
        margin-right: 8px;
        display: flex;
        align-items: center;
    }
    .header__menu--profile img
    { 
        width: 40px;
        height: 40px;
    }
    .header__menu--profile p
    { 
        margin:0;
        color: #fff;
    }
</style>

<body>
    <header class="header">
        <img class="header__img" src="platziVideo.png" alt="platziVideo">
        <div class="header__menu">
         <div class="header__menu--profile">
            <img src="user.png" alt="user">
            <p>Perfil</p>
         </div>
         <ul>
             <li><a href="#">Cuenta</a></li>
             <li><a href="#">Cerrar Sesión</a></li>
         </ul>
        </div>
    </header>

</html>

Aquí esta mi menú de mi proyecto personal

No entendí por qué al quitar la propiedad width del header__menu–profile al final del video se soluciona la pérdida del hover…

me podrian ayudar por que mi menu de usuario salen juntos tengo este codigo
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<link href=“https://fonts.googleapis.com/css?family=Muli&display=swap” rel=“stylesheet”>
<title>Header</title>
</head>
<style>
body {
margin: 0px;
background-color: #72A1E5;
font-family: ‘Muli’, sans-serif;
}
.header {
background-color: #72A1E5;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__img {
width: 150px;
margin-top: 15px;
margin-left: 15px;
}
.header__menu {
margin-right: 30px;
}
.header__menu ul {
display: none;
list-style: none;
padding: 0px;
position: absolute;
width: 100px;
text-align: right;
margin: 0px 0px 0px -14px;
}
.header__menu:hover ul, ul:hover {
display: block;
}
.header__menu li {
margin: 10px 0px;
}
.header__menu li a {
color: white;
text-decoration: none;
}
.header__menu li a:hover {
text-decoration: underline;
}
.header__menu–profile {
margin-right: 8px;
display: flex;
align-items: center;
}
.header__menu–profile img {
margin-right: 8px;
width: 40px;
}
.header__menu–profile p {
margin: 0px;
color: white;
}
</style>
<body>
<header class=“header”>
<img class=“header__img” src=“logo-platzi-video-BW2.png” alt=“logo”>
<div class=“header__menu”>
<div class=“header__menu–profile”>
<img src=“icons8-usuario-masculino-en-círculo-50.png” alt=“user”>
<p>perfil</p>
<ul>
<li><a href="/">Cuenta</a></li>
<li><a href="/">Cerrar Sesión</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>

Excelente clase pero una acotacion, Ojo con eso de buscar y reemplazar TODO, porque quizas queriamos cambiar un solo valor de 60px a 30px, y en el cogido podemos tener varios 60px que se encuentren bien en nuestro código!

Muy buen uso de el display flex esta propiedad es muy aun faltan que conozcan una mucho mejor display grid.

Cuando uso display: flex en el .header__menu–profile los elementos de <li> al pasar el cursor aparecen encima de la imagen de usuario. ¿Por qué pasa eso?

    body {
        margin: 0px;
        font-family: 'Muli', sans-serif;
        background-color: #f77754;
    }
    .header {
        background-color: #f77754;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img {
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .header__menu {
        margin-right: 30px;
    }
    .header__menu ul {
        display: none;
        list-style: none;
        padding: 0px;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0px 0px 0px -14px;
    }
    .header__menu:hover ul, ul:hover {
        display: block;
    }
    .header__menu li {
        margin: 10px 0px;
    }
    .header__menu li a {
        color: white;
        text-decoration: none;
    }
    .header__menu li a:hover {
        text-decoration: underline;
    }
    .header__menu--profile {
        margin-right: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .header__menu--profile img {
        margin-right: 8px;
        width: 40px;
    }
    .header__menu--profile p {
        margin: 0px;
        color: white;
    }

Super didácticas las clases, lo cual te deja aprender mucho!!!

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="assets/styles/style.css" />
    <title>Platzi-Video</title>
  </head>
  <body>
    <header class="Header">
      <img
        class="Header__img"
        src="./assets/images/logo-platzi-video-BW2.png"
        alt="Logo Platzi Platzi-Video"
      />
      <div class="Header__menu">
        <div class="Header__menu--profile">
          <img
            class="Header__menu--profileImage"
            src="./assets/images/icons8-spy-male-64.png"
            alt="Icono del usuario"
          />
          <p>Perfil</p>
          <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar Sesión</a></li>
          </ul>
        </div>
      </div>
    </header>
  </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #AB88FF;
}

.Header {
    width: 100vw;
    height: 80px;
    display: grid;
    grid-template-columns: repeat(1fr, 2);
    grid-template-areas: "logo menu"
}

.Header__img {
    width: 200px;
    padding-left: 15px;
    align-self: center;
    grid-area: logo;
}

.Header__menu {
    display: grid;
    padding-right: 15px;
    grid-area: menu;
    justify-items: flex-end;
    align-items: center;
}

.Header__menu--profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'user menu'
}

.Header__menu--profile img {
    grid-area: user;
}

.Header__menu--profile p {
    grid-area: menu;
    align-self: center;
    justify-self: center;
    color: #fff;
}

.Header__menu--profile ul {
    display: none;
    list-style: none;
    position: absolute;
    padding: 0px;
    width: 100px;
    margin-left: 13px;
    margin-top: 60px;
    text-align: right;

}

.Header__menu--profile:hover ul,
ul:hover {
    display: block;
}

.Header__menu--profile ul a {
    text-decoration: none;
    color: #FFF;
}

RESULTADO
https://imgur.com/a/KZR5wDl

Cada dia aprendiendo mas

Por alguna razón no sale la fuente en google fonts, pero muchos de los compañeros han pegado su código y desde ahí lo pueden copiar y funciona sin problemas

HTMl:
<link rel=“preconnect” href=“https://fonts.gstatic.com”>
<link href=“https://fonts.googleapis.com/css2?family=Mulish&display=swap” rel=“stylesheet”>

CSS:
font-family: ‘Mulish’, sans-serif;

Me salió todo excepto que el logo del muñequito me quedo de color negro.

les dejo codigo css para que el color sea gradiente en css

background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 50%);
    background-repeat: no-repeat; 
    background-attachment: fixed;

Esta vaina se ve algo complicada… pero con la practica todo se vuelve mas sencillo!

Antes de esta clase estuve jugando este juego xDDD y con eso se me hizo facilísimo entender todo el flex que usamos
https://flexboxfroggy.com/#es

Practicando ando…
definitivamente la práctica es fundamental !!!

Hola, esto lo dejo para aquellas personas que tal vez lo estan haciendo de diferente manera ellos intentandolo.
Recordar que para que funcione hove ul debe de estar en la misma clase.

Wiii, lo logré!

UN ACABADO BLACK

Si manejamos CSS en un documento aparte de HTML, para importar la fuente solo tenemos que seleccionar @import en GoogleFonts y copiamos el código en la parte superior de nuestra hoja de estilos:

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected]&display=swap');

body{
    margin: 0; 
    background-color: #986D8E;
    font-family: 'Mulish', sans-serif;
}

Me estresa tanto que hagamos los css en el mismo documento que el html, se que estamos aprendiendo pero es buena práctica hacerlo en un documento separado 😕

La función hover solo es afectada por: el elemento, el padding y en border, en cambio el margin lo omite.

les dejo mi aportación.

Código html
<!DOCTYPE html>
<html lang=“en”>

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Cesar Paulino">
<title>Platzi Video</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="css/platzi.css">
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">

</head>

<body>

<header class="header">
    <img class="header__img" src="images/logo-platzi-video.png" alt="Platzi Video">
    <div class="header__menu">
        <div class="header__menu--profile">
            <img src="images/user-icon.png" alt="User">
            <p>Perfil</p>
        </div>
        <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar Sesión</a></li>
        </ul>
    </div>


</header>

</body>

</html>

Código CSS

body {
margin: 0px;
font-family: ‘Muli’, sans-serif;
background-color: #AB88FF;
}

.header {
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header__img {
width: 200px;
margin-top: 10px;
margin-left: 10px;
}

.header__menu {
margin-right: 30px;
}

.header__menu ul {
display: none;
list-style: none;
padding: 0px;
position: absolute;
width: 100px;
text-align: right;
margin: 0px 0px 0px -14px;
}

.header__menu:hover ul, ul:hover {
display: block;
}

.header__menu li{
margin: 10px, 0px;
}

.header__menu li a{
color: white;
text-decoration: none;
}

.header__menu li a:hover{
text-decoration: underline;
}

.header__menu–profile {
margin-right: 8px;
display: flex;
align-items: center;
cursor: pointer;
}

.header__menu–profile img {
margin-right: 8px;
width: 40px;
}

.header__menu–profile p {
margin: 0px;
color: white;
}

Para los que tuvieron problemas con que se les escondía el menu, la mera en la que lo solucione fue haciendo que la lista (ul) tuviera un padding-top de valor de 50 px y dado a que esta en position absolute, se sobre pone al icono y “mi perfil” por lo tanto cuando hago el hover, no se pierde el foco.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
  <title>Buscador</title>
</head>
<style>
  body {
    margin: 0px;
    font-family: 'Muli', sans-serif;
    background-color: #AB88FF;
  }
  .header {
    background-color: #AB88FF;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header__menu:hover ul, ul:hover{
    display: block;
  }
  .header__img {
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .header__menu{ 
    margin-right: 30px;
  }
  .header__menu ul{
    display: none;
    list-style: none;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
    margin: 0px 0px 0px -14px;
  }
  .header__menu li{
    margin: 10px, 0px
  }
  .header__menu li a{
    color: white;
    text-decoration: none;
  }
  .header__menu li a:hover {
    text-decoration: underline;        
  }
  .header__menu--profile{
    margin-right: 8px;
    display: flex;
    align-items: center;
  }
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }
  .header__menu--profile p {
    margin: 0px;
    color: white;
  }
</style>
<body>
  <header class="header">
    <img class="header__img"   src="./logo-platzi.png" alt="logo">
    <div class="header__menu">
        <div class="header__menu--profile">
        <img src="./user-icon.png" alt="">
        <p>Perfil</p>
    </div>
    <ul>
        <li><a href="/">Cuenta</a></li>
        <li><a href="/">Cerrar Sesión</a></li>
    </ul>
    </div>
  </header>
</body>
</html>

Screenshot:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Platzi Video</title>
    <link rel="stylesheet" href="./assets/css/mobile.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish:[email protected];400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="header">
      <figure class="header__logo">
        <img src="./assets/images/logo-platzi-video-BW2.png" alt="Logo" />
      </figure>
      <nav class="header__nav">
        <figure class="nav__profile">
          <img src="./assets/images/user-icon.png" alt="Users" />
        </figure>
        <ul class="menu__content">
          <li class="menu__item"><a href="#">Account</a></li>
          <li class="menu__item"><a href="#">Logout</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

CSS


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.2%;
    background-color: #27586B;
    font-family: 'Mulish', sans-serif;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 120px;
    padding: 15px;
}
.header__logo img{
    width: 200px;
}
.header__nav {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.nav__profile {
    position: relative;
}
.nav__profile img{
    width: 40px;
}
.menu__content {
    position: absolute;
    width: 100px;
    margin-top: 40px;
    margin-left: -65px;
}
.header__nav ul {
    display: none;
    list-style: none;
}
.header__nav:hover ul, ul:hover {
    display: block;
}
.menu__content li {
    margin-top: 7px;
    margin-bottom: 7px;
}
.menu__item a {
    text-decoration: none;
    font-weight: 700;
    font-size: 1.6rem;
    color: white;
}


<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<link href=“https://fonts.googleapis.com/css2?family=Open+Sans&display=swap” rel=“stylesheet”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<style>
body {
margin: 20px;
font-family: ‘Open Sans’, sans-serif;
margin-right: 5px;
background-color: #AB88FF;
}
.header {
background-color: #AB88FF;
width: 100%;
height: 200px;
display: flex;
justify-content: space-between;
}
.header__img {
width: 160px;
height: fit-content;
margin-top: 8px;
margin-left: 20px;
}
.header__menu {
margin-right: 10px ;
}
.header__menu ul {
display: none;
list-style: none;
padding: 0;
position: absolute;
width: 120px;
text-align: right;
margin: 0px 0px 0px -14px;
}
.header__menu:hover ul, ul:hover {
display: block;
}
.header__menu li {
margin: 10px 0px;
}
.header__menu li a {
color: white;
text-decoration-line: none;
}
.header__menu p {
color: white;
}
.header__menu li a:hover {
text-decoration: underline;
}
.header__menu–profile {
margin-right: 10px;
width: 100px;
}
</style>
<body>
<header class=“header”>
<img class=“header__img” src="./logo-platzi.png" alt="">
<div class=“header__menu”>
<div class=“header__menu–profile”>
<img src="./user-icon.png" alt=“User”>
<p>Perfil</p>
<div>
<ul>
<li><a Cuenta href="/">Cuenta </a></li>
<li><a Cerrar href="/">Cerrar Sesion </a></li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>

Así me quedó el menú.

Les dejo un aporte. Con box-shadow pueden agregar una sombra.

Por ejemplo:

box-shadow: 3px 3px 3px 3px rgba(66, 64, 64, 0.192)

Hola, les comparto, cuando realice mi ejercicio de digitacion de codigo y vi los resultados en el navegador se observaban diferencias.
la forma mas agil que encontre de ubicar y entender las diferencias y sus efectos fue con el comparador de codigo de visual studio code

Descargue el de la profe y lo compare con mi codigo.
Consulten en youtube para ver los pasos de como realizarlo en Visual Studio Code.

Asi me quedo, trate de hacerlo por mi cuenta 😃
![](

Este es el codigo en CSS

:root{
	--purple-platzi: #ab88ff
}

body {
	margin: 0px;
	background-color: var(--purple-platzi);
}

.header {
	display: flex;
	background-color:  var(--purple-platzi);
        width: 100%;
        height: 80px;
	justify-content: space-between;
	
}

 
.header__img {
	width: 200px;
        margin-top: 10px;
        margin-left: 10px;
}

.header__menu{
	margin-right: 30px;
}
.header__Profile{
	margin-right: 50px;
	width: 40px;
	font-weight: bold;
	color: #ffffff;
	font-size: large;
	display: flex;
	align-items: center;
}
.header__Profile p {
	margin-top: 22px;
	margin-left: 5px;
	align-items: center;
}

.header__Profile-ul{
	 display: none;
	list-style: none;
	padding: 0px;
	position: absolute;
	text-align: right;
	margin-top: 10px;
}

.header__Profile-li {
	margin: 10px 10px;

	font-weight: bold;
	text-align:right;
	margin-top: 0px;
	
}

.header__Profile-li  a{
	list-style: none;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	
}
.header__Profile-li a:hover {
	text-decoration:underline;
	color: #eeeeee;
}
	
.header__menu:hover ul , ul:hover{
	display: block;
}

Y este es el HTML:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="header.css">
	
	<title>Header</title>
</head>

<body>
	<header class="header">

		<img class="header__img"
			src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png"
			alt="">
		<div class="header__menu">
			<div class="header__Profile">
				<img class="header__Profile-img" src="user-icon.png">
				<p>Profile</p>
			</div>

			<ul class="header__Profile-ul">
				<li class="header__Profile-li"><a href="/">Cuenta</a></li>
				<li class="header__Profile-li"><a href="/">Cerrar Sesion</a></li>

			</ul>
		</div>
	</header>
</body>

</html>

Así me quedó.

<!DOCTYPE html>
<html lang="en">
<head> 
 <style>
body{
     background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
     color: #EDEDED;
}
 </style>
 <body> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:[email protected]&display=swap" rel="stylesheet">
    <title>Kwy📸</title>
 </body>
</head>
<style>
    body{
        margin: 0%;
        font-family: 'Source Code Pro', monospace;
    }
    .header{
         background-color: #726A95;
         width: 100%;
         height: 40px;
         display: flex;
         justify-content: space-between;
         align-items: center;
}
 .header__img{
     width: 41px;
 }
 .textico{
     color: whitesmoke;
    margin-top: 19px;
    margin-left: -509px;
     animation-name: hola;
     animation-duration: 4s;
     position: relative;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
     align-content: flex-start;
 }
 @keyframes hola {
     0%{left: 0%; top: 0%;}
     50%{color: black; left: 130px; right: -0px;}
     100%{left: 0px; right: 130px;}  
 }
 .header__menu{
   margin-right: 30px; 
 }
 .header__menu ul{
     display: none;
     list-style: none;
     padding: 0px;
     position: absolute;
     width: 100px;
     text-align: right;
     margin: 0px 0px 0px -14px; 
}
.header__menu:hover ul, ul:hover{
    display: block;
}
.header__menu li{
    margin: 10px 0px;
}
.header__menu li a{
    color: black;
    text-decoration: none;
}
 .header__menu li a:hover{
    text-decoration: underline;
 }
 .header__menu--profile {
     margin-right: 8px;
     display: flex;
     align-items: center;
     cursor: pointer;
     font-size: 14px;
     }
     .header__menu--profile img{
        margin-right: 12px;
        width: 23px;
     }
     .header__menu--profile p{
        margin: 0px;
     }
    </style>
    <body> 
 <header class="header">
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Logo_vector.png/480px-Logo_vector.png" alt="logo" class="header__img">
     <h2 class="textico">Kwy 🎴</h2>
      <div class="header__menu">
      <div class="header__menu--profile">
      <img src="./user-icon.png" alt="User">
      <p>Perfil</p>
      </div>
      <ul>
          <li><a href="/">Cuenta</a></li>
          <li><a href="/">Cerrar Seccion</a></li>
          <li><a href="/">Contactanos</a></li>
        </ul>
      </div>
      </header>
    </body>
</html>

Sin necesidad de hacer algo para el hover solo ordenando un poco mejor el codigo y se logra el efecto del hover sin mucho codigo

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
body {
  background: linear-gradient(277deg, #ad5389, #3c1053) no-repeat fixed;
  font-family: "Noto Sans", sans-serif;
}
.header {
  width: 100%;
  height: 80px;
  background: linear-gradient(227deg, #ad5389, #3c1053);
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.header_img {
  width: 200px;
  margin-left: 10px;
}
.header_menu {
  margin-right: 100px;
  display: flex;
  align-items: flex-end;
}
.header_menu img {
  width: 40px;
}
.header_menu-profile {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 105px;
}
.header_menu ul {
  list-style: none;
  position: absolute;
  width: 100px;
  text-align: right;
  height: 0;
  display: none;
}
.header_menu ul li a {
  text-decoration: none;
  color: white;
}
.header_menu:hover ul,
ul:hover {
  display: block;
}

```![Screenshot 2021-07-09 055818.png](https://static.platzi.com/media/user_upload/Screenshot%202021-07-09%20055818-c1b5b584-3461-4a81-a0b0-a66ed4609ac6.jpg)

He realizado algunas modificaciones al header original

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding:0;
    }
    body{
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        font-family: 'Muli', sans-serif;
    }
    .header{
        align-items:center;
        color: white;
        display: flex;
        justify-content:space-between;
        height: 80px;
        width: 100%;    
        padding:0 30px;    
    }
    .header__logo{
        width: 200px;                
    }
    .header__menu{
        position: relative;
    }
    .header__profile{
        display: flex;
        align-items: center;
    }
    .header_profile-icon{
        width: 40px
    }
    .header__profile-text{
        margin-left: 8px;
    }
    .header__dropdown{
        display: none;
        list-style: none;
        text-align: right;
        position: absolute;
    }
    .header__menu:hover .header__dropdown{
        display: block;
    }
    .header__dropdown-link{
        text-decoration: none;
        color: white;
    }
    .header__dropdown-link:hover{
        text-decoration: underline;
    }
</style>
<header class="header">
        <img class=header__logo src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="Logo">
        <nav class="header__menu">
            <div class="header__profile">
                <img class="header_profile-icon" src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/user-icon.png" alt="User">
                <p class="header__profile-text">Perfil</p>
            </div>
            <ul class="header__dropdown">
                <li><a class="header__dropdown-link" href="/">Cuenta</a></li>
                <li><a class="header__dropdown-link" href="/">Cerrar Sesión</a></li>
            </ul>
        </nav>
    </header>

Me quedó sonando el tema de las pseudo clases, y esto es lo que pude encontrar al respecto https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

11:36 profesora Estefany Ud. tiene un ojo clínico viendo ese salto, que yo lo pasaría desapercibido.

Otra forma de presentar el header, SOLUCIONÉ EL PROBLEMA DE SALTO USANDO PADDING

Comparto mi código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header Platzi</title>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:[email protected]&family=Public+Sans:ital,[email protected],100&display=swap" rel="stylesheet">
</head>
<body>
<style>
    body{
        background-color: rgb(87, 70, 187);
        margin: 0px;
        font-family: 'Mulish', sans-serif;
    }
        
    .header{
        background-color: blueviolet;
        width: 100%;
        height: 62px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }
        
    .header__img{
        width: 200px;
     }
    
     .header__menu{
        width: 100px;
        margin: 0px;
    }
    
    .header__menu--profile{
        margin: -5px 0px 0px 0px;
        display: flex;
        justify-content: center;
    }
    
    .header__menu--profile img{
        width: 50px;
        height: 50px;
        margin: 0px;
     }
    
     .header__menu--profile p{
        color: white;    
        display: flex;
        justify-content: center;
        margin: 0px;
    }
    
    .header__menu ul{
        display: none;
        list-style: none;
        padding: 0px;
        position: relative;
        text-align: right;
        color: white;    
        padding-top: 5px;
        margin: 0px 0px 0px -35px;
        position: absolute;
    }
    
    .header__menu:hover ul, ul:hover{
        display: block;
    }
    
    .header__menu li{
        margin: 5px 0px;
    }
    
    .header__menu li a{
        color: white;
        text-decoration: none;
    }
    
    .header__menu li a:hover{
        text-decoration: underline;
    }
</style>

<header class="header">
    <img class="header__img" src="/logo-platzi-video-BW2.png" alt="">
    <div class="header__menu">
        <div class="header__menu--profile">
            <div>
                <img src="/user-icon.png">
                <p>Perfil</p> 
            </div>
        </div>
        <ul>
            <li><a href="/">Cuenta</a></li>
            <li><a href="/">Cerrar Sesión</a></li>
        </ul> 
    </div>
</header>    
</body>
</html>

Para la fuente yo usé dos, una 300 y una 500. Acá está el enlace:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:[email protected];500&display=swap" rel="stylesheet">

Este es mi resultado, pronto lo cambiare por un logo de una página personal 😄

Genial

ahi va

Muy buena clase!!!

Muy bien explicado…

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Header</title>
<link href=“https://fonts.googleapis.com/css2?family=Mulish:[email protected]&display=swap” rel=“stylesheet”>
</head>
<style>
body{
margin: 0px;
background-color: #ab88ff;
font-family: ‘Mulish’, sans-serif;
}
.header{
background-color: #ab88ff;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__img {
width: 200px;
margin-top: 10px;
margin-left: 10px;
}
.header__menu{
margin-right: 30px;
}
.header__menu ul{
display: none;
list-style: none;
padding: 0px;
position: absolute;
width: 100px;
text-align: right;
margin: 0px 0px 0px -14px;
}
.header__menu:hover ul, ul:hover{
display: block;
}
.header__menu:hover ul, ul:hover{
display: block;
}
.header__menu li{
margin: 10px 0px;
}
.header__menu li a{
color: white;
text-decoration: none;
}
.header__menu li a:hover{
text-decoration: underline;
}
.header__menu–profile{
margin-right: 8px;

    display: flex;
    align-items: center;
}
.header__menu--profile img{
    margin-right: 8px;
    width: 40px;
}
.header__menu--profile p{
    margin: 0px;
    color: white;
}

</style>
<body>
<header class=“header”>
<img class=“header__img” src=“logo-platzi-video-BW2.png” alt=“Logo de Platzi”>

    <div class="header__menu">
        <div class="header__menu--profile">
            <img src="user-icon.png" alt="user">
            <p>Perfil</p>
        </div>
        <ul>
            <li><a href="/">Cuenta</a></li>
            <li><a href="/">Cerrar sesión</a></li>
        </ul>

    </div>

</header>

</body>
</html>

vi este curso para repasar conceptos, pero me mareo que tenga todo el css en el mismo html, para leer el código se me hace que cada vez que le agrega algo al style se hace más “pesado” para leer, recomiendo que hagan otro archivo css y linkeen este mismo al html. ej:
<link rel= “stylesheet” href="./style.css">

El font-family para 2021 dejo de llamarse Muli, para llamarse Mulish.

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <title>Tridi-video</title>
  </head>
    body {
      background-color: #8f57fd;
      font-family: "Mulish", sans-serif;
    }

Platzinautas les comparto como va quedando mi MVP del Platzi Video

Me gustó más el primer color que usamos así que lo usaré por el momento 😅

Así me va quedando:

Aquí les dejo este recurso, tiene varios ejemplos de como trabajar con bem, ya que es bastante confuso al inicio:
https://9elements.com/bem-cheat-sheet/
También este video que te explica muy bien esta metodología.

Y por último una observación, en el video se usan etiquetas, pero en bem esta prohibido hacer eso, asi como anidar elementos.

vamos por buen camino

al principio me daba tedio estar refrescando la pagina para comprobar cada vez que lo actualizaba, así que coloque la extensión live server y le di clic derecho abrir con live server y me hace un ato refresh para evitar hacerlo yo mismo

lo mejor es desde el comienzo poner el padding y margin en 0 como nos enseñan en el curso definitivo de html y css.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Es increíble ver como se abren las puertas, a la hora de estilizar y poder jugar con todas las herramientas que nos ofrece CSS