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

Estructura con HTML y BEM de un menú desplegable

23/43
Recursos

Aportes 233

Preguntas 53

Ordenar por:

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

Consejos:
1- No es necesario tener el background-color en header si ya está en body, puesto que todo elemento es transparente por defecto y nos ahorramos una línea innecesaria.
2- En lugar de hacer margen derecho (al header__menu) e izquierdo (header__img) de manera separada a cada uno de los elementos, me parece más correcto usar padding en el header, nos ahorramos líneas de código y nos permite modificarlo con más facilidad y lograr simetría 😃
3- El width que le hemos puesto a la imagen no va en .header__menu–profile puesto que también afecta al contenedor que incluye el texto “perfil”, tendría que ir en .herader__menu–profile img para ser únicamente de la imagen.

No he entendido el motivo del margin negativo, puesto que según el ejemplo ya hecho lo normal sería hacer uso de flexbox, space-between, text-align right en todo el header__menu y con esto debería ser suficiente para lograr el resultado que deseamos

https://prnt.sc/ouninh

tip:
VSC cuenta con emmet abbreviation y para poner una clase automaticamente al div o un section, header, article etc, pueden hacerlo de esta forma:
header.header

el resultado sería

<header class="header">
</header>

con los divs solo basta poner el punto y el nombre de la clase
.header__menu–profile

Resultado:

<div class="header__menu--profile">
</div>

Espero les sirva

¿A alguien mas le entro nostalgia al escuchar la frase “ya no lo descargo porque ya lo tengo”?

Existe una propiedad interesante de CSS que puede invertir el color de una imagen, por si alguno de ustedes no pudo encontrar un icono de usuario en color blanco, y tuvo que poner uno de color negro.
La propiedad es la siguiente:

filter: invert(1);

Si el icono es de color negro, lo cambiaría a color blanco y viceversa.

Me parece que estás usando Bem de una manera incorrecta pues la propiedad de modificador nos dice lo siguiente según su documentación . Modifier "A flag on a block or element. Use them to change appearance or behavior." Dicho esto yo suelo usarlo para cambios de estilos en un elemento ya creado ejemplo: .card__title (dónde nuestra clase sería el título "normal" del elemento title del bloque card. .card__title--danger (dónde nuestro modificador está asignado como "--danger" y a esta nueva clase sería posible poner quizá un texto y/o un background de otro color y en resumen ese sería nuestro modificador). Por lo demás buen curso me sirve para repasar algunos conceptos :)

Yo no recomiendo hacer uso de imágenes en donde se pueden usar iconos. No está mal solo que yo no lo recomiendo y el porqué es debido a que una imagen solo se limita a modificar el tamaño en CSS, sin embargo un icono se puede modificar como si fuera una fuente: color, tamaño, forma, etc.
Yo los recursos que uso y recomiendo son:
Font Awesome: https://fontawesome.com
IcoMoon: https://icomoon.io

El código del ejemplo que estamos utilizando

<!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">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000000;
        }
        .header {
            background-color: #272822;
            box-sizing: border-box;
            height: 90px;
            padding-top: 8px;
            padding-left: 8px;
            width: 100%;
        }
        .header__img {
            width: 250px;
        }
        .header__menu {
            margin-right: 30px;
        }
        .header__menu ul {
            /*display: none;*/
            list-style: none;
            margin: 0 0 0 -14px;
            padding: 0;
            position: absolute;
            text-align: right;
            width: 100px;
        }
        .header__menu--profile {
            margin-right: 8px;
            width: 40px;
        }
        
    </style>
    <title>:: Practica 1 - Header ::</title>
</head>
<body>
    <!-- Begin : Header con Logo -->
    <header class="header">
        <img class="header__img" src="./assets/img/logo.png" alt="Platzi-Video-Logo">
        <!-- Begin : Menu -->
        <div class="header__menu">
            <!-- Begin : profile -->
            <div class="header__menu--profile">
                <img src="./assets/img/user.png" alt="profile">
                <p>Perfil</p>
            </div>
            <!-- End  : profile -->
            <!-- Begin : Lista de opciones -->
            <ul>
                <li><a href="/">Cuenta</a></li>
                <li><a href="/">Cerrar Sesión</a></li>
            </ul>
            <!-- End  : Lista de opciones -->
        </div>
        <!-- End  : Menu -->
    </header>
    <!-- End   : Header con Logo -->
</body>
</html>

Realice un diseño diferente al de la clase

Yo estuve tomando este curso hace un tiempo sabiendo muy poco de HTML y CSS y por ahí recomendaron que primero tomara el curso de Desarrollo Web con Leonidas, que es un gran profesor! Les recomiendo que si no conocen mucho de esta áres de frontend, comiencen con ese curso porque de lo contrario si continúan aquí, puede que se queden con bastantes dudas! Leonidas explica a detalle lo más básico y por lo que he visto, Estefany hace un repaso para tomar temas un poco más avanzados.

Podemos duplicar lineas de código desde VCode ubicando el cursor en la linea deseada y oprimiendo SHiTF + ALT + flecha arriba / abajo

Una forma de convertir una linea a comentario en VSCODE es

CTRL + K + C

Si quieren mejorar su velocidad al codear con Visual Studio les recomiendo usar Keyboard Shortcuts:

**Duplicar una linea de manera instantanea **ya sea que estes parada en ella o la seleciones presiona (Shift + Alt + ↑ o ↓), las flechas son para mover el item compiado si quieres que sea hacia arriba o hacia abajo.

Alt + ↑ o ↓ mueve la linea sobre la que esta el cursor o puntero con las flechas decides hacia donde la vas a move, esto es mucho mas comodo que copia y pegar.

Ctrl + Shift + K Elimina la linea sobre la que estes parado de manera inmediata sin seleccionar nada o dar click.

Finalmente si quieres dominar vscode como un pro les recomiendo este curso es gratis 😃, creanme que amaran usar vscode con lo aprendido.

Como consejo personal, cuando el damos a una propiedad un valor de 0, se debería obviar la unidad de medida. Es decir en este caso cuando aplicamos el margin al ul, para mi, sería:

margin: 0 0 0 -14px;

De esa forma conseguimos mayor legibilidad, nos ahorramos 2 caracteres cada vez que usamos el valor 0 y el funcionamiento es exactamente igual.

Les comparto los colores por si no os tenia aún 😀:
–purple: #5E1DFC;
–purple-mid: #8F57FD;
–purple-light: #AB88FF;
–mint: #21c08b;

Las etiquetas ul por defecto traen padding left, margin-top y margin-bottom.
Para resetearlo sería así:

ul {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}

si desean colocar cualquier foto de perfil hagan esto Espero les sirva:

EN CSS:
.imagen-perfil{
border-radius: 50%;
border: none;
background: none;
font-size: 20px;
padding: 10px;
}

    .imagen-perfil img{
     width: 58px;
     height: 54px;
     border-radius: 50%;
    }

EN HTML: Agregart esto despues del header_menu_profile

<button class=“imagen-perfil”>
<img src=“imagenes/pancha.PNG” alt=“imagenes”>
</button>

☼Ahora les mostrare la imagen Original VS la imagen editada

Imagen editada:

00:35 esto es parte de la clase 15


<!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">
    <title>Valores Relativos y Absolutos</title>
</head>
<style>
    body{
        margin: 0;
    }
    header{
        background-color: #21c08b;
        width: 100%;
        height: 80px;
    }
    header img {
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
<body>
    
    <header>
        <img src="logo-platzi-video-BW2.png" alt="">
    </header> 

</body>
</html>

En lo personal para temas de iconos solia utilizar https://www.flaticon.com me parece muy completa

👋Para el icono del usuario use este
👉
📌 Lo pueden descargar de aquí
🔗 https://www.flaticon.com/free-icon/account_1738760?term=user&page=1&position=24
🎊 🎉Lo mejor es que es Gratis🎊 🎉

Para los que necesitan un icono de perfil igual al del proyecto, solo tienen que buscar el icono mas parecido con la palabra clave user, editan el icono y le ponen un** background de color hexadecimal #AB88FF**
después un recolor de color hexadecimal #FFFFFF Por último solo descargan el archivo.

Yo recomiendo flaticon por que tiene más características de edición, por ejemplo el color que deseas y tienen buenos diseños

un sitio muy bueno para iconos es https://www.flaticon.com/ si te registras puedes cambiar color de los .png en la versión monocolor

Por si le sirve a alguien, yo he introducido la imagen directamente desde un URL.

<header>
        <img src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="imagen-Platzi-video">
    </header>

Además lo he centrado en el medio del header poniedo al header una altura de 80px, a la foto una altura de 50px, y el margin de la foto de 15px para asi centrarla verticalmente en el header.

<style>
    body{
        margin: 0px;
    }
    header{
        width: 100%;
        height: 80px;
        background-color: #ab88ff;
    }
    header img{
        height: 50px; /*Con Shift+Alt+Flecha podemos duplicar una línea hacia abajo/arriba*/
        margin: 15px; /*Ctrl+K+C Convierte una línea a comentario y al revés.*/
    }
</style>

Dejo otra página de iconos que ami me gusta mucho:
https://www.flaticon.com/

Hola, aquí les dejo mi repo con el código.
https://github.com/aaronyamil/buscador-html

Saludos.

Otro sitio de icons que a mi me gusta mucho y son gratis para usar en tus sitios web, el SVG también es obtenible:
https://iconmonstr.com/

En VSL podemos transformar en comentario una línea pulsando ctrl + shift + 7.

La mejor forma de asimilar conocimientos es practicarlos y practicarlos, gran clase 😄

Asi vamos:

Otra pagina que recomiendo para iconos es https://www.flaticon.com/ en lo personal me gusta mucho 😄

Recomiendo IcoMoon para poner imagenes vectoriales sencillas. Prácticamente no tienen peso porque se usan como un font
https://icomoon.io/app

Como recomendación, sería mejor setear todos los margin y padding, así como el box-sizing de la siguiente manera.

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

Importante aprender a como posicionar los elementos , poco a poco vamos aprendiendo vamos bien!!!

cuando cualquier elemento tiene alguna propiedad en 0, no hay para que especifificar la unidad de medida; esto mejora la performance del renderizado

Hola, pueden ver iconos en esta pagina tambien, https://www.iconfinder.com

SI VIENES DEL CURSO PRE-WORK

Para abrir la carpeta Linux con el explorador de Windows desde la terminal y guardar allí las imágenes, iconos, etc:

  1. Abre la carpeta de linux.
  2. Usa el comando:
explorer.exe .

Les dejo la pagina de los icons https://iconos8.es/

Les comparto una otra página en dónde podrán encontrar más variedades de iconos 😄
https://www.flaticon.com/

Hola!
Creo que este es el mismo icono que usan en la clase https://iconos8.es/icon/pack/profile/ios-glyphs--white

Alguien me podria decir que me quedo mal pues no me carga la imagen de usuario ni el ul y he revisado mi codigo 2 noches y nada agradeceria quien me pudiera ayudar enserio

<BEM>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
</head>
<style >
    body{
    margin: 0px;
    background-color: #AB88FF;
    }
    .header {
     background-color: #AB88FF;
     width: 100%;   
     height: 80px;
    }
    .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--profile{
    margin-right: 8px;  
    width: 40px;
    } 
</style>
<body>
    <header class="header">
        <img class="header__img" src="file:///D:/Platzi/Frontend%20Developer/logo-platzi-video.png">
        <div class="header__menu">
            <div class="header__menu--profile">
             <img scr="file:///D:/Platzi/Frontend%20Developer/user-icon.png" alt="User">
             <p>Perfil</p>
            </div>
          <ul>
            <li> <a href="/">Cuenta</a></li>
           <li><a href="/">Cerrar Sesion</a></li>
          </ul>
        </div>
    </header>
</body>
</html>

Hola @teffcode por que profile en css(bem) lo añades como un modificador? me gustaria saber tu explicacion por que yo lo veo mas como un elemento dentro del elemento menu por lo que seria: header__menu__profile no crees?

Cuando vas declarar 0 como tamaño no es necesario añadir la uni. de medidad ya que 0 siempre sera 0.

En donde está el código ya escrito que numero de clase?

Les recomiendo https://www.flaticon.com/search?word=profiles-avatar
también puedes descargar iconos y de mayor variedad

HTML

CSS

Resultados:


¿Qué color me recomiendan?🤔

Para mi que el background color es #8F57FD

continuemos! 😃

Aquí están las imágenes. no las tienen que descargar solo abren el link copian la url y la pegan dentro del src = " "
USER
Logo de platziVideo

No entendí por qué el menu desplegable es un modificador dentro del bloque header!!
Tampoco entendí por qué el ul dentro de header es o no es un modificador si profile si lo es!!

Cómo quitar margin en una línea: arriba, derecha, abajo e izquierda;

Aquí vimos un claro ejemplo de BEM. Excelente clase

Para los logos de una pagina es mejor usar ( .svg ), ya que si le hacemos zoom no se va a pixelear :3

Buscador

<!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">
  <title>Buscador</title>
</head>
<style>
  body {
    margin: 0px;
    background-color: #AB88FF;
  }
  .header {
    background-color: #AB88FF;
    width: 100%;
    height: 80px;
  }
  .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--profile{
    margin-right: 8px;
    width: 40px;
  }
</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>

Muchas gracias. Definitivamente algo viable es inspeccionar paginas que visitamos a diario para ver que estilos usan y demas 😃

Bueno ahi vamos

Creo que este color se parece mas al utilizado en platzi-video
#8F57FD

<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="../user-icon.png" alt="User">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="/">Cuenta</a></li>
                <li><a href="/">Cerrar Sesion</a></li>
            </ul>
        </div>
    </header>    
</body>

Cómo quitar margin (arriba, derecha, abajo e izquierda) en una linea

:v

No me gusta esta clase, la profesorea redunda muchas cosas, y no sigue las mejores prácticas del todo. Espero que por favor remplacen la clase

Gran aporte gracias

Una consulta, como descargo el logo que utiliza para el buscador? Gracias.

“Yo no lo descargo (el PNG) porque ya lo tengo”

Si queremos quitarle un estilo a la lista, entonces debemos utilizar list-style

Les dejo una explicación distinta de BEM, por si les quedo alguna duda al respecto:
https://www.youtube.com/watch?v=cI0eq7cyAH4
saludos

En el siguiente enlace pueden encontrar el repositorio del curso con el codigo y las imagenes e iconos usados como ejemplo, https://github.com/platzi/curso-frontend-escuelajs/tree/master/platzi-video/curso-frontend-developer

Gente aquí les dejo mi código

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

<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="stylesheet" href="styles/normalize.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=PT+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css">
    <script src="https://kit.fontawesome.com/6e643b7659.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <header class="header">
        <div class="header__image-div">
            <figure class="image-container">
                <img class="header__image" src="images/logo-platzi-video-BW2.png" alt="logo">
            </figure>
        </div>
        <div class="profile-menu">
            <div class="profile-menu__profile-container">
                <i class="far fa-user profile-menu__image"></i>
                <span class="profile-menu__title">Perfil</span>
            </div>
            <ul>
                <li class="profile-menu__item"><a class="profile-menu__link" href="">Cuenta</a></li>
                <li class="profile-menu__item"><a class="profile-menu__link" href="">Cerrar Sesión</a></li>
            </ul>
        </div>
    </header>
    <section class="section">
    </section>
    <main class="main">
    </main>
</body>
</html>

CSS

* {
  font-family: "PT Sans", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --dark-jungle-green: #041b15;
  --pine-green: #136f63;
  --light-sea-green: #22aaa1;
  --turquoise: #4ce0d2;
  --middle-blue-green: #86eae0;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: 62.5%;
}

body {
  height: 100vh;
  background-image: linear-gradient(
    180deg,
    var(--light-sea-green) 0%,
    var(--middle-blue-green) 100%
  );
}

.header {
  display: flex;
  width: 100%;
  height: 10vh;
}

.header__image-div {
  height: inherit;
  width: 50%;
  padding-top: 0.5rem;
}

.image-container {
  display: flex;
  align-items: center;
  height: inherit;
}

.header__image {
  margin-left: 1rem;
  max-width: 100%;
  max-height: 100%;
}

.profile-menu {
  font-size: 1.6rem;
  color: white;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  width: 50%;
  padding-right: 1.6rem;
  padding-top: 0.8rem;
}

/* .profile-menu ul {
  visibility: hidden;
} */

.profile-menu__profile-container {
  display: flex;
  align-items: center;
}

.profile-menu__image {
  margin-right: 0.4rem;
  font-size: 4rem;
}

.profile-menu__link:visited {
  color: white;
}

.profile-menu__title {
  font-weight: bolder;
}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <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=Poppins&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        body {
            background-color: #00ffd0;
            background-image: linear-gradient(198deg, #1ca8a4 0%, #de5aff 46%, #ffef70 100%);
            color: aliceblue;
            height: 100vh;
            margin: 0%;
            font-family: 'Poppins', sans-serif;
        }

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

        .header__menu {

            max-width: 100px;
            margin-right: 60px;

        }
        .header__img--logo {
            width: 200px;
            margin-left: 20px;
            margin-top: 12px;
        }

        .header__menu--profile img {


            height: 20%;
        }


        .header__menu--profile {
            margin-right: 8px;
            width: 100px;
            display: flex;
        }



        .header__menu ul {

            margin-right: 10px;
            margin-left: -14px;
            margin-top: 0px;
            list-style: none;
            text-decoration: none;
            text-align: right;
            padding: 0px;
            display: none;
            position: absolute;

        }

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

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

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

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

        }
    </style>
</head>

<body>
    <header class="header">
        <!-- <button class="header__button--red">RED</button> -->
        <img class="header__img--logo" 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="">
                <p>Perfil </p>
            </div>

            <ul>
                <li><a href="./">Cuenta</a></li>
                <li><a href="./">Cerrar sesión</a></li>
            </ul>

        </div>
    </header>![](![](url))
<!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>Document</title>
</head>
<style>
    body {
        margin:0px;
        background-color: background-color: #00DBDE;
        background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    }
    .header{
        background-color:background-color: #00DBDE;
        background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
        width: 100%
        height: 80px;
    }
    .header__img{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .header__menu{
      margin-right: 30px;
    }
    .header__menu ul {
     list-style: none;
     padding: 0px;
     position: absolute;
     width: 100px;
     text-align: right;
     margin: 0px 0px 0px -14px;
    }
    .header__menu--profile{
      margin-right: 8px;
      width: 40px;
    }
</style>
<body>
    <header class="header">
        <img class="header__img" src="C:\Users\jonaa\Desktop\Ejericios curso frontend\logo-platzi.png" alt="">
        <div class="header__menu">
            <div class="header__menu--profile">
                <img src="C:\Users\jonaa\Desktop\Ejericios curso frontend\icons8-usuario-30.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 va gustando mucho esto de CSS y Html, muy muy fácil entender el BEM con esta clase

Chevere

Muy buen contenido en esta clase me gusto comenzar a diseñar el menú desplegable para el Proyecto de Platzi Video me ayudara para hacer mi portafolio profesional

Si quieres ahorrar tiempo al codear
.
Para convertir la linea donde estas en un comentario

Ctrl + K + C

Y para descomentarla

Ctrl + K + U

Para seleccionar varias lineas

Shift + Ctrl + Up / Down

Los comandos para comentar y descomentar lineas sirven para varias lineas tambien
.
Para eliminar la linea en la que estas

Ctrl + Shift + K

Duplicar la linea en la que estas hacia arriba o abajo

Shift + Alt + Up /Down

Cómo quitar margin en una línea: arriba, derecha, abajo e izquierda;

https://storybook.js.org/tutorials/m clase anterior

Que buena clase!

Inicia codigo y explica lo que es BEM con un ejemplo Recordar Bloque Elemento Modificador

Si quieren comentar el código de forma rápida, en Windows es ctrl + } y en Mac es cmd + } (si no me equivoco).

Cuando el valor de alguna propiedad es 0 no es necesario especificar alguna unidad.

Por ejemplo:


header {
	padding: 0;
}

Asi quedo mi CSS separado por componentes:

Hice algunos cambios en mi header para que sea responsive:

Es una buena práctica usar la etiqueta "<main>" en vez de un section con la clase "main". Eso para usar html semántico.

Usa material UI de Google https://material-ui.com/es/

13. Estructura con HTML y BEM de un menú desplegable

Ok mirando cómo se veía ese menú desplegable lo he hecho solo con HTML y CSS usando Flex y jugando con los displays y pseudoclases, así queda:

Les comparto mi código HTML:

<!DOCTYPE html>
<html lang="es">
<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="stylesheet" href="./css/style.css">
    <title>Platzi-Video by ArudoPE</title>
</head>
<body>
    <header class="header">
        <nav class="header__nav flex">
            <div class="header__logo-container">
                <img src="./assets/img/logo-platzi-video-BW2.png" alt="Platzi Video Logo">
            </div>
            <div class="header__profile flex">
                <div class="header__profile--image">
                    <img src="./assets/img/user-icon.png" alt="Platzi User image">
                </div>
                <p>Perfil</p>
                <ul class="header__hover--menu">
                    <li><a href="">Cuenta</a></li>
                    <li><a href="">Cerrar Sesión</a></li>
                </ul>
            </div>
        </nav>
    </header>
</body>
</html>

Este es mi código CSS:

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*SHARED*/
body {
    background-color: var(--main-bg-color);
}
:root {
    --main-bg-color: #AB88FF;
    --almost-white: rgb(247, 245, 245);
}
.flex {
    display: flex;
}
/*HEADER*/
.header__nav {
    background-color: var(--main-bg-color);
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.header__nav .header__logo-container img {
    width: 150px;
}
.header__nav .header__profile {
    color: var(--almost-white);
    font-weight: bold;
    align-items: center;
    column-gap: 8px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}
.header__nav .header__profile:hover .header__hover--menu  {
    display: block;
}
.header__nav .header__profile--image img {
    width: 30px;
}
.header__hover--menu {
    text-align: right;
    position: absolute;
    top: 30px;
    right: 0;
    padding-top: 10px;
    display: none;
}
.header__hover--menu li {
    list-style: none;
    padding: 5px;
    width: 100px;
}
.header__hover--menu li:hover {
    transition-duration: 1s;
    transition: #8151f2;
    background-color: #8151f2;
}
.header__hover--menu a {
    text-decoration: none;
    color: var(--almost-white);
}
.header__hover--menu a:hover {
    text-decoration: underline;
}

Completado!

Listo!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
  </head>
  <style>
    body {
      margin: 0px;
      background-color: #AB88FF;
    }
    .header {
      background-color: #AB88FF;
      width: 100%;
      height: 0px;
    }
    .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--profile {
      margin-right: 8px;
      width: 40px;
    }
    .header__menu--img {
      width: 50px;
      margin-top: 10px;
      margin-left: 10px;
    }
  </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 class="header__menu--img" src=".\user-icon.png" alt="User">
          <p>Perfil</p>
        </div>
        <ul>
          <li><a href="/">Cuenta</a></li>
          <li><a href="/">Cerrar Sesións</a></li>
        </ul>
      </div>
    </header>
  </body>
</html>```

Acá podrán descargar iconos gratis : https://www.flaticon.es/

donde puedo descargar el logo de platzivideo?

Me surgió la pregunta de cómo usar BEM cuando tenemos un Bloque y varios Elementos anidados unos dentro de otros y todos dentro del Bloque. La solución que primero se me vino a la cabeza fue nombrar a una clase así: header__menu__account__user sin embargo a más elementos anidados, más grande sería el nombre de la clase volviendolo tedioso y poco entendible. Buscando por internet encontré que para el caso de Elementos anidados dentro de un Bloque lo mejor es implemente mencionar al Bloque y al Elemento, para el ejemplo anterior sería así: header__user.

Fuente:
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

Con Ctrl + C, Se comenta una línea en css.

Me encanta que el paso a paso sea lento y que vaya mostrando los resultados.

les comparto una página donde muestran atajos emmet para que puedan escribir código mas rápido, les recomiendo la guía que tienen allí, espero les ayude.
https://coderslink.com/talento/blog/ahorra-tiempo-al-escribir-codigo-html-en-visual-studio-code-utilizando-emmet/

Genial!!!
práctica:

Estoy estudiando la arquitectura BEM, y el ejemplo de la clase me genera una duda:

Esta clase de este div

<div class="header__menu--profile">

no correspondería a un modificador del bloque menú?. Según la documentación que estudié , la manera correcta de utilizar la arquitectura sería, en una sola línea:

<div class="header__menu header__menu--profile">

¿Alguien me puede corregir?, gracias

Hasta el momento vamos bien.