Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Pseudo clases y pseudo elementos

23/55
Recursos

Aportes 455

Preguntas 121

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Resume de BEM:

Es nombrar clases siguiendo el siguiente patr贸n: BLOQUE__ELEMENTO鈥揗ODIFICADOR

Por ejemplo:

<!-- BLOQUE -->
<main class="Padre">
	<!-- BLOQUE__ELEMENTO --> 
	<section class="Padre__Hijo">
		<!-- BLOQUE__ELEMENTO--MODIFICADOR -->
		<article class="Padre__Hijo--Mayor"></article>
	</section>
	<section class="Padre__Hijo"></section>
	<section class="Padre__Hijo"></section>
	<section class="Padre__Hijo"></section>
 </main>

youtube- BEM: Simplifica tu CSS

youtube- Que rayos es la Metodolog铆a BEM

Documentacion- sobre BEM

Documentaci贸n- Las Pseudo-classes hacen uso de un 鈥:鈥

Documentacion- Los Pseudoelementos hacen uso de dos 鈥::鈥

/*Algunos Pseudo-classes:*/
:root{}
//representa elemento HTML, con la especificidad de clase //usado para anidar variables CSS
:active
//se activa al hacer clic down
:visited
//cambio visual cuando se visita un enlace
:hover
//permite cambiar el estado de un elemento cuando elmause se sobrepone sobre 茅l
:first-child // para afectar solo al primer hijo // se coloca en el padre (ul) para afectar a su primer hijo (li)
:last-child // para afectar solo al ultimo hijo
:not  //negar una codiciones (ignorar una condicion) //ejemplo .clase:not(last-child)
//afecto a todos menos el ultimo
:empty 
//ayuda a detectar cuando un elemento esta vacio. //ejemplo .class:empty{background:yellow;} //resaltar
:nth-child() 
// tag:nth-child(2){} //afectara al segundo elemento

C贸mo nombrar las clases

Metodolog铆a **BEM馃槜* c贸mo nombrar correctamente las clases.

Solo usa clases. Las nombra siguiendo el siguiente patr贸n: BLOQUE__ELEMENTO鈥擬ODIFICADOR (son 2 guiones, se usa 1 gui贸n para separar palabras).

  • Bloque: secci贸n que puede funcionar por s铆 sola.
  • Elemento: forma una de las partes del bloque.
  • Modificador: variaciones de un mismo bloque/elemento.
<!-- BLOQUE -->
<main class="Padre">
	<!-- BLOQUE__ELEMENTO --> 
	<section class="Padre__Hijo">
		<!-- BLOQUE__ELEMENTO--MODIFICADOR -->
		<article class="Padre__Hijastro--Mayor"></article>
		<article class="Padre__Hijastro--Menor"></article>
	</section>
 </main>

Crear estilos a etiquetas dentro de clases

Si tienes etiquetas dentro de la etiqueta a la que le est谩s aplicando estilos y le pones una clase, puedes aplicar estilos 煤nicamente a las etiquetas dentro de esa clase de la siguiente manera: .clase etiqueta {}

/* Estilos a etiqueta "a" dentro de una clase */
.main-nav__item a {
    color: white;
}

Usa background-color para ver las cajas de los elementos.

Pseudo clases

Define el estilo de un estado especial de un elemento.

Agregar al final de la clase :nombreAccion

/* Pseudo clase */
.main-nav__item a:hover {
    color: darkblue;
}

.main-nav__item a:active {
    color: darkcyan;
}

Lista de Pseudo Clases

Pseudo Elementos

Define el estilo de una parte espec铆fica de un elemento.

Agregar al final de la clase ::nombreAccion

/* Pseudo elemento */
.main-nav__item a::after {
    content: " | "; /* despues del elemento, agrega esto */
}

Lista de Pseudo Elementos

驴BEM?


La metodolog铆a Bloque, Elemento, Modificador (com煤nmente conocida como BEM) es una convenci贸n de nomenclatura popular para clases en HTML y CSS. Desarrollado por el equipo de Yandex, su objetivo es ayudar a los desarrolladores a comprender mejor la relaci贸n entre HTML y CSS.

Click aqui para conocer la metodologia BEM

Aqu铆 les dejo un tutorial muy genial y amigable para entender BEM https://9elements.com/bem-cheat-sheet/

Las pseudo-clases especifica un estado especial a un elemento seleccionado.

/* Ejemplo */
p:first-child {
    color:red;
}
/*Convierte todo el texto del primero hijo del bloque de c贸digo en rojo. Todo el texto */

Lista de pseudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial, sino que permiten a帽adir estilos a una parte concreta (a veces muy espec铆fica) de un elemento.

/* Ejemplo */
p::first-letter {
  color: red;
  font-size: 20px;
}
/* Toma solo la primera letra de un elemento, no todo su contenido. Solo la primera letra.*/

Lista de pseudo-elementos: https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos
.
驴La diferencia?
B谩sicamente los pseudo-elementos por lo general hacen referencia a partes espec铆ficas de un elemento, mientras que las pseudo-clases hacen referencia al estado del elemento.

Talvez sea muy b谩sico pero me gusto

Es importante tomar en cuenta que cuando se va a utilizar la metodolog铆a BEM no se 鈥渄eber铆a鈥 utilizar etiquetas, BEM es para trabajar 煤nicamente con clases y separar completamente el HTML del CSS para que puda ser reutilizado.
Cuando el profesor coloc贸** .main-nav__item a{
}**
Realmente no aplic贸 BEM, con BEM la etiqueta a deber铆a haber tenido su propia clase (EN BEM TODOS LOS ELEMENTOS DEBEN CONTAR CON CLASE, PREFERENTEMENTE)

Ac谩 un enlace para que aprendan m谩s de Block Element Modifier (BEM)


Les comparto un gran recurso sobre BEM

https://9elements.com/bem-cheat-sheet/

Creo que esta imagen puede representar perfectamente lo que es Margin y Padding Al principio es dificil entender pero animo!
Estamos en una plataforma en la que entre todos nos ayudamos a comprender.

Margin: es un margen, es decir un espacio entre elementos. Por ejemplo un espacio entre 2 imagenes鈥
Padding: es un espacio interno que se le aplica al mismo elemento, por ejemplo para que el texto de un bot贸n no este pegado a los bordes de dicho bot贸n.
Aqui pueden leer mas:
Margin
Padding

![](
![](
![](

PARA ESCRIBIR EN VARIAS LINEAS AL MISMO TIEMPO.

En el minuto 5:10 podemos ver que hace un copia y pega para colocar las clases en cada una de las <li> entonces para obtener una forma mas r谩pida de trabajo: pueden (antes de escribir la clase) hacer clic con la rueda de desplazamiento del mouse y hacer scroll hasta donde desees (en este caso, al ultimo <li>) de esa forma podr谩n escribir en las 4 l铆neas de c贸digo al mismo tiempo.

A veces me gustaria que fuera m谩s clara la clase como el siguiente video:
https://youtu.be/LUjsToWH8s4

No se ustedes, pero este curso me parece demasiado superficial. No hemos terminado ni ver HTML y ya incluyen CSS.
(Extra帽amos a Fredy de profesor!, este man no deja ni apuntes.)

Les recomiendo estudiar por su parte HTML y CSS y luego volver a pasar por aqui, yo lo hice en w3 school. Les dejo el link!

https://www.w3schools.com

/* Usamos las clases */
.main-nav{
    margin-top:10px; /* Espaciado exterior superior */
    list-style: none; /* Le quitamos los estilos a la lista */
    padding-left:10px; /* Espaciado interno izquierdo */    
    background-color: #13a4a4; /* Color de fondo para el elemento */
}

.main-nav_item{
    display: inline-block; /* Hacemos que pasen de vertical a horizontal */
}

.main-nav_item a{ /* Modificamos todos las etiquetas <a> que esten dentro de la clase especificada */
    color: #FFFFFF; /* Cambiamos el color de la letra a blanco */
    padding: 5px; /* Hacemos un espaciado interior general(superior, inferior, derecho y izquierdo) de 5 pixeles */
    border-radius: 2px; /* Hacemos un borde redondeando de 2 pixeles al elemento */
    text-decoration: none; /* Le quitamos las decoraciones al texto de la etiqueta <a> */
}

.main-nav_item a:hover{ /* Con etiqueta:hover hacemos que cada vez que el usuario pase el cursor
    por el elemento se le apliquen los siguientes estilos CSS */
    color: #0000FF; /* Hacemos que el color de la fuente sea de color azul */
}

.main-nav_item a:active{ /* Con etiqueta:active hacemos que cada vez que el usuario haga click sobre el elemento
    se le apliquen los siguientes estilos CSS */
    color: #FF0000; /* Hacemps que el color de la fuente sea de color azul */
}

/* Pseudo clases y Pseudo elementos */
.main-nav_item a::after{ /* Con after agregamos cierto contenido despues de la etiqueta especificada */
    content : " | "; /* con content : "contenido" agregamos el contenido que queremos mostrar */  
}```

Se deber铆a explicar primero el modelo de caja

un video explicativo sobre la metodologia BEM
https://www.youtube.com/watch?v=bvnzyXGkNY4

Estas clases hacen honor al titulo del curso 鈥淐urso Definitivo de HTML y CSS鈥.

encontr茅 este art铆culo sobre la metodolog铆a BEM por si les sirve!
https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa/

En el curso de frontend explican la metologia BEM.

Pseudo clases & Pseudo elementos

驴Qu茅 son? 馃

Dentro del css, se podr铆an categorizar como selectores, nos permiten:

  • Acceder a elementos que los selectores b谩sicos no nos permiten acceder.
  • Permiten aplicar estilos a elementos no solo en funci贸n del DOM, sino tambi茅n a factores externos como el historial de visitas. (tener en cuenta la pseudo clase :visited).

Pseudo Elementos ::

Los Pseudo-elementos se utilizan para seleccionar una parte de alguna estructura HTML, por ejemplo:

  • p::first-letter Selecciona la primera letra de un p谩rrafo (No solamente de un p谩rrafo.
  • elemento:beforeCrear un elementos antes del contenido del elementohtml con afterse crear despu茅s del contenido.

Pseudo Clases :

Las Pseudo-clases se utilizan para seleccionar un elemento en un determinado estado, por ejemplo:

  • :active Estado que se activa cuando el puntero del mouse pasa por encima del elemento.
  • :focus pseudo-clase activada cuando un campo de formulario o elemento html tiene el foco del mouse (esta seleccionado o se este escribiendo en dicho elemento)

Lista de Pseudo - clases - elementos 馃槈

Pseudo Elementos ::

Pseudo Clases :

Sobre BEM:

驴Qu茅 es BEM?
Es una metodolog铆a que nos ayuda como desarrolladores a facilitar la tarea de rear nombres de clases mediante convenciones pr谩cticas.

B significa Bloque o Block (para los cuates) y un bloque es un pedazo de nuestra p谩gina web que tiene sentido por s铆 mismo, es decir, que es una secci贸n independiente en una p谩gina web.

E significa Elemento o Element (para que pr谩ctiques tu ingl茅s) y los elementos son las distintas partes que conforman un bloque. A diferencia de los bloques, los elementos no tienen significado por s铆 mismos ni son independientes.

M significa Modificador o Modifier (aportaciones de BEM e ingl茅s c:), y estos son indicadores que colocamos a nuestros bloques o elementos para para poder diferenciar una variante de un bloque o elemento para poder modificar su estilo o comportamiento.

Ejemplos:

  • Un bloque puede ser un men煤 de navegaci贸n. Si lo pensamos, un menu de navegaci贸n funciona por s铆 mismo en una p谩gina web y es una secci贸n independiente.
  • En este mismo ejemplo del men煤 de navegaci贸n, un elemento puede ser cada uno de los enlaces que componen nuestro men煤 de navegaci贸n.
  • Siguiendo esta misma l铆nea, un modificador puede ser cuando estamos hacemos hover o activamos alguno de esos enlaces.

驴C贸mo declaro los nombres de clases con esta metodolog铆a?
Simple, recuerda que quiere decir BEM:
bloque
bloque__elemento
bloque__elemento鈥搈odificador

esta clase estuvo aldo dificil de entender.

Comparto mi resumen de las Pseudo Clases y Pseudo Elementos

Por aqu铆 les dejo el resumen de BEM. 驴Qu茅 es y de qu茅 se compone?

Tipos de selectores:

Recuerden que pueden poner los c贸digos con abreviaturas tipo:
ul>li*5>a
Que es equivalente a

            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>

https://9elements.com/bem-cheat-sheet/
Esta pagina te ayudara a entender la metodolog铆a BEM tiene algunas sugerencias para nombrar los componentes mas comunes de la web.

Excelente clase solo a modo visual quite el bagraund-color del .main-nav, y se lo puse al .main-nave__item a y quedo as铆:

aqu铆 es donde empieza lo dif铆cil ? 馃槮

Un enlace ancla es un tipo de enlace html que, al pinchar sobre el, te lleva a una parte concreta de la p谩gina web ya sea propia o externa.

Son muy 煤tiles para ayudar a los visitantes a encontrar directamente el contenido que les interesa dentro de tu p谩gina web. Hay que recordar que existen estudios que dicen que de media, un visitante invierte 20 segundos como m谩ximo para encontrar el contenido que busca. Si en estos 20 segundos (o menos), abandonar谩 tu web y probablemente no vuelva. Por esto (y por otras muchas cosas) es bueno usar los enlaces ancla.

Clase 23 - Pseudo clases y pseudo elementos


驴Qu茅 nombres podemos usar para nombrar nuestros archivos CSS?

  • Main.css
  • Style.css
  • Estilos.css

驴C贸mo se deben manejar los estilos CSS cuando tenemos un proyecto grande que funciona en varias pantallas?

  • Se crea un archivo CSS para cada pantalla.

驴Cu谩l es la estructura b谩sica de un men煤 de navegaci贸n en HTML?

<header>
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Courses</a></li>
                <li><a href="">Teachers</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </nav>
    </header>

驴Qu茅 metodolog铆a podemos usar para nombrar nuestras clases de CSS?

  • BEM.

驴Para qu茅 nos sirve la propiedad list-style?

  • Para poder manipular el estilo de los 铆tems de las listas desordenadas.

驴Qu茅 pasa cuando la propiedad list-style tiene como valor none?

  • Le quitamos las vi帽etas a las listas desordenadas.
  • Sintaxis:
list-style: none;

驴El navegador agrega estilos propios a las etiquetas HTML?

  • S铆.

驴Para qu茅 nos sirve la propiedad background-color?

  • Para agregar un color de fondo al elemento.

驴Para qu茅 nos sirve la propiedad color?

  • Para cambiar el color de la fuente.

驴Para qu茅 sirve la propiedad font-size?

  • Para modificar el tama帽o de la fuente.

驴Para qu茅 nos sirve la propiedad border-radius?

  • Para cambiar el borde puntiagudo que tienen todos los elementos HTML por uno m谩s redondeado. La forma del redondeado se determina por el valor que le demos a esta propiedad.
  • Sintaxis:
border-radius: 15px;

驴Para qu茅 nos sirve la propiedad text-decoration?

  • Para agregar o quitar una decoraci贸n que tenga el texto, por ejemplo
    • Tachado.
    • Subrayado.

驴Qu茅 es una pseudo clase?

  • Nos ayuda a definir un estilo para un estado especial de un elemento.

驴Qu茅 es un pseudo elemento?

  • Nos ayuda a definir un estilo de una parte espec铆fica de un elemento.

驴Para qu茅 nos sirve la pseudo clase :hover?

  • Nos permite agregar estilos al estado hover de un elemento, es decir, cuando pasamos el cursor por encima del elemento los estilos se activaran y aplicaran al elemento.

驴Para qu茅 nos sirve la pseudo clase :active?

  • Nos permite agregar estilos al estado active de un elemento, es decir, cuando demos clic sobre el elemento los estilos se activaran y aplicaran al elemento.

驴Para qu茅 nos sirve el pseudo elemento ::after?

  • Nos permite agregar el final de un elemento contenido.

驴Para qu茅 nos sirve la propiedad content?

  • Esta propiedad debemos usarla junto a los pseudoelementos ::before y ::after y nos permite indicar lo que queremos agregar al inicio o final de un elemento.
  • Sintaxis:
content: " | ";

驴C贸mo podemos diferenciar un pseudo elemento y una pseudo clase?

  • Los pseudoelementos tienen dos veces seguidas el s铆mbolo de dos puntos (:馃槂, mientras que las pseudo clases tiene solo una vez el s铆mbolo de dos puntos (馃槂

Esta clase es un Bardo鈥ero
guerra es guerra, a la pereza y a la ignorancia
Vamossssss

23.-Pseudo clases y pseudo elementos

El nombre de archivo de estilos lo definimos nosotros pero casi siempre es main o estilos o styles. Cuando se trabaja con proyectos m谩s grandes normalmente hay un archivo de CSS por pantalla y lleva el nombre de la pantalla.

驴C贸mo podemos nombrar nuestras clases?

Tienen que ser acorde con lo que estamos trabajando. Vamos a usar la metodolog铆a BEM que nos va a ayudar a entender como nombrar las clases.

  • margin-top: margen arriba.
  • padding: dimension interna que le damos a un elemento. Un espacio dentro de la caja

El navegador por si solo le agrega ciertos estilos a los elementos.

Ser especifico en CSS: A todas las etiquetas 鈥渁鈥 que est谩n dentro de este elemento con esta clase, apl铆cale este siguiente estilo.
Pseudo Clases

hover: Cuando el mouse est谩 arriba del elemento. Es un efecto, un estado.

active: Cuando le das Click

Pseudo Elementos

Un elemento lo mandamos llamar con 鈥::鈥

after: le agrega algo a la etiqueta del lado derecho (o despu茅s del elemento)

Diferencias

Pseudo Clases: Define el estilo de un estado especial de un elemento

Pseudo Elementos: Define el estilo de una parte espec铆fica de un elemento.

Por si es de ayuda

BEM => aqui
.
Pseudo elementos => aqui
.
Pseudo clases => aqui

Me pareci贸 super importante la metodolog铆a de BEM, si ustedes est谩n empezando como yo les recomiendo tomarse de verdad el tiempo de entenderlo y practicarlo para as铆 mantener un c贸digo limpio desde el principio

Les dejo un video para que aprendan m谩s sobre BEM

Que rayos es la Metodolog铆a BEM explicado con un ejemplo | CSS

Y les dejo una p谩gina que les explica como usar BEM
https://9elements.com/bem-cheat-sheet/

/* RESUMEN:
    - Pseudo classes ':class' = Define el estilo de un estado especial de un elemento
    - Pseudo elementos '::element' = Define el estilo de una parte especifica de un elemento */
.main-nav {
    margin-top: 10px;
    list-style: none;
    padding-left: 0;
    background-color: #13a4a4;
}
.main-nav__item {
    display: inline-block;
}

/* Ser especifico en CSS3:
Traducci贸n: Todas las etiquetas <a> con la clase "main-nav__item:" */
.main-nav__item a {
    color: white;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

/* Pseudo clases : */
.main-nav__item a:hover {
    color: blue;
}
.main-nav__item a:active {
    color: brown;
}

/* Pseudo Elementos: 
Traducci贸n: Despues de este elemento a帽ade este contenido: "|" */
.main-nav__item a::after {
    content: " | ";
}

Les comparto este art铆culo en espa帽ol sobre BEM, es absurdamente claro 馃槂

驴Qu茅 es el BEM?
El BEM es una metodolog铆a destinada a disminuir la huella dejada por CSS. Es decir, el c贸digo CSS puede volverse realmente desorganizado y dif铆cil de leer. El BEM es una forma que estructura sus convenciones de nomenclatura para aumentar la legibilidad y la funcionalidad. Esto es muy importante, ya que ayuda a otros programadores que est谩n leyendo su c贸digo a comprender qu茅 es lo que est谩 dise帽ando. 隆La legibilidad es clave!

bueno, un aporte con pseudo clases y un .gif del resultado. Al body le agregu茅 un linear-gradient (generen sus colores desde aqu铆 https://mycolor.space/ y copien los rgb o hex en modo CSS). Us茅 #id .class :estado y { }
https://media.giphy.com/media/NCoZwGm5YwrDPG03am/giphy.gif

En este pen est谩 mi menu estilo smash bros versi贸n 1 con pseudo clases y pseudo elementos
https://codepen.io/mauriciorivero/pen/poewEor

Normalmente para aplicar la regla css debemos citar un selector o elemento, pero no todos los elementos de mi html se les va a aplicar el mismo estilo, por lo tanto para diferenciarlos de las secciones se utilizan las clases, para ello es necesario implementar la metodolog铆a BEM.

CREO Q NO ERA NECESARIO AHORITA ,ENSE脩AR LA METODOLOGIA BEN, SI TODAVIA ESTAMOS APRENDIENDO BLOQUES ETC. ME CONFUNDE MAS

Pesima la explicacion de lo que es pseudo clase y pseudo elementos y sus diferencias

Resumen de BEN?
La metodologia bloque elemento modificador ( comunmente conocido como BEM) Es una convincion de momenclatura popular para clases HTML y CSS.

QUE SIGNIFICA BEM?

  • B.-Bloque (Blok)
  • E.-Elemento (Element)
  • m.- Modeficador (Modeficador)

QUE FUNCIONES TIENE CADA UNO?

  • Bloque: Seccion que puede funcionar.
  • Elemento: Forma una de las partes del bloque.
  • Modificador: Variaciones de un mismo bloque / elemento.

DIFERENCIAS:

  • SPEUDO CLASS: Class.- Define el estitlo de un estado especial de un elemento.

  • SPEUDO ELEMENTOS: Element.- Define el estilo de una parte especifica de un elemento.

Comparto mis apuntes de la clase 馃槂

Comparto el final de mi c贸digo con algunos comentarios para tenerlos a la mano ah铆 mismo

Mi lista del super 馃槑

.container {
    width: 300px;
    margin: 0 auto;
}
main {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07)
    ;

}
body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    background-color: #e5eefb;
    display: flex;
    align-items: center;
    height: 100vh;
}
h1 , h2 {
    font-weight: 500;
}
h1 {
    text-align: center;
    color: #030455;
}
h2 {
    color: #3b3b3b;
}
a {
    text-decoration: none;
    color: #23239b;
}
p {
    text-align: center;
}

Este video me ayudo a comprender BEM: https://www.youtube.com/watch?v=cI0eq7cyAH4

Quiero cargar mi aporte pero no me deja poner imagenes, me marca error =(

驴A alguien mas le pasa?

驴A que se refiere Diego con 鈥減antalla鈥?

Para darle clases a los elementos es muy importante tener en cuenta a que elementos vamos a modificar y darle un nombre especifico
Hay que tener nombres de clases que sean acordes a lo que estamos trabajando

Estructura B谩sica De Una Barra De NAV

![](

Hola a todos馃憢馃徎
Les comparto unos tutoriales que encontr茅 sobre la metodolog铆a BEM, fueron hechos por unos compa帽eros de la comunidad, est谩n buen铆simos.
https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa

https://platzi.com/tutoriales/2008-html-css/7858-bem-la-mejor-manera-de-nombrar-tus-clases-de-html/

El margin es el espacio hacia afuera y el padding es el espacio hacia dentro.

Ya se puso perro el CSS 馃ゴ

Pueden usar shortcuts como el siguiente para generar bloques de c贸digo algo 鈥済randes鈥.

header>nav>ul>li*4>a[href="#"]{Inicio}

馃惐鈥嶐煉 Una pseudoclase es un selector que marca los elementos que est谩n en un estado espec铆fico.

Pseudo clases: Define el estilo de un estado especial de un elemento.
Pesudo elemento: Define el estilo de una parte espec铆fica de un elemento.

Este es un excelente video donde se explica BEM: video

馃憠馃徎Tal vez llegado a este punto y si eres nuevo en el desarrollo web, te sientas perdido, te recomiendo que revises la documentaci贸n de w3school, en lo personal me ayudo bastante con buena teoria, y ejemplos f谩cil de entender
w3School
Asimismo te aconsejo que uses ChatGPT como si fuera tu profesor personal, eso si 馃憖, lo recomiendo que uses una vez ya tenidas las bases que puedes aprender en w3School y Platzi. 馃挌

les comparto la estructura completa para completa para crear una pagina web !!! espero que les sirva!!! la uso mucho en mi trabajo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T铆tulo de la p谩gina</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Encabezado principal</h1>
        <p>Este es un p谩rrafo.</p>
    </main>
    <footer>
        <p>Derechos reservados 漏 2023</p>
    </footer>
    <script src="script.js"></script>
</body>

</html>

ha sido iluminadora esta clase dandome la claridad a los conceptos de seudoclases y la diferencia a seduoelementos

Tremendo! profe, es un crack, cada dia me siento m谩s responsive jajaja, est谩 muy bueno el BEM.

PseudoClase - :class - define el estilo de un estado especial de un elemento.

PseudoElementos - ::element - Define el estlo de una parte espec铆fica de un elemento.

A mi siempre se ma ha dificultado mucho aprender frontend. Me encanta cuando dice 鈥淭u ya no por que vas a ser un experto en esto鈥

BEM : metodolog铆a para nombrar class CSS.
Ingl茅s: https://en.bem.info/methodology/faq/#why-bem
espa帽ol: https://platzi.com/blog/bem/

Aqui se me aclararon las dudas :
https://www.youtube.com/watch?v=YaAkV--25fg

Pseudo clases y Pseudo elementos (BEM)

BEM
Una clase tambien muy recomendada si no le has cogido el tiro a los otros aportes.

Agradezco mucho a ver visto esta clase, iniciar con CSS y con una estructura definida me parece empezar con el pie derecho, les dejo unos links de ayuda:

<!--un shortcut a la hora de crear el nav-->
nav>ul>li*4>a
este te crea todo, sin necesidad de copiar y pegar

pues si va mis logros en esta clase

aunque si quisiera decir lo que aprendi practicando:
*:hover debe de ir antes de :active para que el usuario pueda ver el cambio.
*::first-letter funciona tanto en un boton como en un div, pero no en un label.
*para un checkbox como para un radio se puede user :checked + div o :checked + label y va a ejecutar el estilo sin problema.
*si declaran un grupo de elementos, para que afecte el primer elemento en el css deben de declarar el nombre de la clase y la etiqueta del primer elemento, por ejemplo: .primeroDe label:first-child

Cordial saludo comunidad

Comparto un video que les puede ayudar a entender mejor la metodolog铆a BEM:
https://www.youtube.com/watch?v=_ciw9tXRcfg
https://www.youtube.com/watch?v=-gOp0m2u7Ww

Slds

<code>
Aporte:
Primero,HTML=>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header class="header">
        <nav class="header__nav">
            <ul class="header__lista">
                <li class="header__item"><a class="header__enlace" href="#">Inicio</a></li>
                <li class="header__item"><a class="header__enlace" href="#">Acerca de Nosotros</a></li>
                <li class="header__item"><a class="header__enlace" href="#">Experiencia</a></li>
                <li class="header__item"><a class="header__enlace" href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
          
</body>
</html>

Despu茅s, CSS:
*{
padding:0px;
margin:0px;
}
.header{
width:600px;
height:60px;
display:flex;
justify-content:center;
align-items:center;
background:#2a9d8f;
margin:0px auto;
border-radius:5px;
}

.header__nav{
height:60px;
display:flex;

}

.header__lista{
list-style:none;
display:flex
}

.header__enlace{
display:flex;
align-items:center;
height:60px;
color:white;
margin:0px 5px;
text-decoration:none;
font-family:鈥淎rial鈥;
font-size:18px;
padding:0px 8px;

}

.header__enlace:hover{
background:#ffddd2;
}

Resultado:

BEM = Block, Element, Modifier

Que es la etiqueta main y para que sirve?

Por qu茅 us贸 display: inline-block; en .main-nav__item? si quiere que se acomoden de manera horizontal no debi贸 haber puesto esa linea en .main-nav? mas general no en las li

Mi 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">
    <link rel="stylesheet" href="./css/claseCss/styles.css">
    <title>Youtube</title>

</head>
<body>

    <header>
        <nav>
            <ul class="main-nav">
                <li class="main-nav__item"><a href="#">Home</a></li>
                <li class="main-nav__item"><a href="#">Cursos</a></li>
                <li class="main-nav__item"><a href="#">Intructores</a></li>
                <li class="main-nav__item"><a href="#">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

MI Css

body{
    background:rgb(199, 165, 124);
}

a{
    text-decoration: none;
}
.main-nav {
    margin-top: 1px;
    list-style: none;
    padding: 0;
    background-color: #40ababcc;
    text-align: right;
    height: 2rem;
}

.main-nav__item {
    margin-top: 0.5rem;
    display: inline-block;
    padding-inline: 0.5rem;
}

.main-nav__item a {
    color: white;
    padding: 6px;
    border-radius: 2px;
}

.main-nav__item a:hover{
    background-color:rgb(131, 93, 48);
}

.main-nav__item a:active{
    color: black;
}

.main-nav__item a::after{
    content: " |";
}

Hay dos extensiones para google chrome que se llaman 鈥淧esticide for chrome鈥 y 鈥淐SS Prepper鈥 son excelentes porque resaltan todos los elementos del html que estan en el navegador. Sirven para entender mucho el tema del modelo de cajas.

Mis notas:
Metodologia BEM: .> > Bloque __Elemento --Modificador

Pseudo classes (:class): Define el estilo de un estado especial de un elemento.
Pseudo elementos (::element): Define el estilo de **una parte **especifica de un elemento.

Con estos enlaces puedes entender perfectamente la metodolog铆a bem

https://www.youtube.com/watch?v=bvnzyXGkNY4

https://9elements.com/bem-cheat-sheet/

Hola! Estuve leyendo los comentarios y veo que varios mencionan que est谩 muy complicado o que no entendieron este tema ademas que busquen otras fuentes y links para saberlo.
Hubo un comentario que puso dos imagenes explicando un poco sobre este tema (de Hector Alonso Padilla aunque est谩 en ingles pero hay que aprenderlo xdxd) .

ES NORMAL si no entiendes, los pseudo elementos y clases a mi parecer es lo mas complicado de entender.
No se coman la cabeza aprendiendo los pseudo elementos de vez en cuando 煤senlos para estar familiariz谩ndose 馃槉. Exito!

Uno cree que ha estudiado mucho peor nunca es suficiente, siempre hay cosas nuevas por aprender, brutal este curso

**

C贸mo usar BEM (Block - Element - Model)

**
Modelo de cebolla
Imagina que tienes una cebolla.
.
.

.
Las capas m谩s externas son tu Bloque (Block). Es la parte m谩s externa de tu documento HTML y donde asignar clases afecta en el espectro m谩s grande. Es tu 鈥渃ontenedor鈥 principal.

HTML:
		<main>
			<section class="container">
				<p> I'm a paragraph </p>
			</section>	
		</main>
    
    CSS:
    .container {
	    background-color: blue;
    }

.
Las capas siguientes son tu Elementos (Element). Ah铆 van las partes internas de tu bloque que tendr谩n un estilo m谩s particular.


    HTML:
    <main class="container">
			<section class="container-section">
				<p> I'm a paragraph </p>
			</section>	
		</main>
	
	CSS:
    .container {
	    background-color: blue;
    }
    .container-section {
    border: 2px dark-gray;
	}

.
La o las 煤ltimas capas son tu Modificador (Modifier). Si aplicas estilos a este nivel afectan al detalle al documento HTML, estar铆as estilizando de forma granular.
.

   HTML:
    <main class="container">
			<section class="container-section">
				<p class="container-section__modifier"> I'm a paragraph </p>
			</section>	
		</main>
	
	CSS:
    .container {
	    background-color: blue;
    }
    .container-section {
    border: 2px dark-gray;
	}
	.container-section__modifier{
	font-weight: 2em;
	color: light-gray;
	}

Resultado:


.
Ejemplo: