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

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

21/43

Lectura

Una de las metodologías que podemos utilizar para organizar nuestro código es BEM (Bloque, Elemento, Modificador).

A continuación, te mostraré 3 bloques de código. Identifica cuál bloque de código es el indicado para usar esta metodología.

Reto 3_1.png
Reto 3_2.png
Reto 3_3.png

Aportes 2012

Preguntas 5

Ordenar por:

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

La número 3!!

Es el tercero, pero no es del todo correcto, la clase main__form--input debería ser algo como form__input (ya que no es aconsejable algo como main__form__input). Pero el motivo real por el que digo que no es del todo correcto, es que – se usa para indicar estados e input no es un estado. Un ejemplo de estado sería form__input--disabled

El tercer bloque de código maneja la metodologia correcta de BEM:
class=“main” ==> clase padre.
class=“main__img” ==> clase padre + elemento.
class=“main__form” ==> clase padre + elemento.
class=“main__form–input” ==> clase padre + elemento + modificador.
class=“footer” ==> clase padre.
class=“footer__item” ==> clase padre + elemento.

Con respecto a la imagen 3, lo cierto es que los inputs en este ejemplo bien podrían ser elementos del bloque *form (de hecho lo son), pero de niguna forma pueden ser modificadores.

Definitivamente la tercera imagen, cabe resaltar que adicional existe un error de cierre de etiquetas en las tres imagenes, debido a que el <form> no se le da el cierre correspondiente, sino se abre otro <form>. le falta el carácter “/” para que se exprese como cierre </form>

jaja :p la 3

No entiendo por que el input seria un modificador del elemento form en la tercera opcion?

Hay un error en el tercer ejemplo.
el input tambien es un elemento. quedaría como main__form__input
y si lo querie modificar seria la clase anterior mas main__form___input–bg

El **tercer bloque ** tiene mas coherencia a los que la metodología BEM nos dice.

Concuerdo con los compañeros de que el tercero es el más acertado, pero tengo una duda
los inputs del form no son elementos también? tengo entendido que un modificador es un elemento, pero con una característica especial o diferente, pero sigue siendo ese elemento, solo que con una modificación

El tercer bloque cumple con la metodología BEM, aunque no tiene mucho sentido poner el mismo modificador para dos elementos del mismo tipo ya que un modificador es algo que varía con respecto a un diseño base.
En este caso podría ser:

<input class="main__form--name" type="text" placeholder="Nombre">
<input class="main__form--password" type="text" placeholder="Contraseña">

La etiqueta input tendrá el diseño base y tanto main__form–name como main__form–password tendrán una variación específica para cada input.

Corregidme si estoy mal

La verdad desconocía que existían metodologías,según el bloque 3 cumple BEM,muchas gracias.

La tercera opcion es mas parecida a la arquitectura BEM.
Lo unico que note diferente fue como separó los nombres identificares
usando primero 2 guines bajos y luego usando 2 guinoes.
En la clase uso 2 guines bajos. No se cual sea la comvencion para
escribirlos nombres de las clases en BEM

La opción numero 3 puesto que está especificando claramente el bloque (Main) luego el elemento (Main__form) y luego el modificador (main__form–input). Aunque input no es un modificador, al menos está implementando correctamente la metodología.

El bloque 3 cumple con la estructura BEM, el Block seria class=“footer”, seguido de los elementos class=“footer__item”, el modificador de cada uno podría ser por ejemplo: class=“footer__item–contact”, class=“footer__item–policy” y class=“footer__item–terms”, de esta manera se cumple con la arquitectura BEM

Y qué pasa si nuestro “arbol de css” tiene más de 3 niveles?

Definitivamente la Segu…
La tercera es la correcta!
Ya que las 2 primeras no estan bien estructuradas como no dice BEM
B: Bloque
E: Elemento
M: Modificador
Nunca Paren De Aprender 💚

La 3, aunque no estoy de acuerdo con que un modificador sea input

El tercero es el más acertado según la explicación que nos han dado puesto que sigue la regla de Bloque__Elemento–modificador, aunque me entra una duda con el bloque que dice main__form–input, pensé que en el último valor se especificaba el atributo como tal que quería modificar por ejemplo el color.

El tercer bloque aplicaría, pues este se refiere a objetos( botones, inputs) como elementos HTML( por ejemplo: main__item), y no se escribe como un valor del objeto(main–item).

Pareciera que el bloque de código número tres es el indicado para la metodología BEM, solo que no existe el elemento modificador, se usa “input” en las dos líneas de código. Además, de que el <form> no esta cerrado.

El tercer bloque de código es que cumple las reglas de la metodología BEM

El tercer bloque está utilizando BEM (Block element Module), pero lo curioso de la pregunta dice cual es el indicado para utilizar metodología BEM mas no en qué bloque se está utilizando dicha metodología y con estando la pregunta se podría utilizar en los tres bloques jeje

<!-- Bloque 1 -->
        <header class="header">Platzi-Video</header>

        <section class="main__img">
            <img class="main--img" src="./photo.png" alt="photo">
            <form class="main--form">
                <input type="text" placeholder="Nombre">
                <input type="password" placeholder="Contraseña">
            </form>
        </section>
        
        <footer class="footer__item">
            <a class="footer">Contáctanos</a>
            <a class="footer">Política de privacidad</a>
            <a class="footer">Términos y condiciones</a>
        </footer>

<!-- Bloque 2 -->
        <header class="header">Platzi-Video</header>

        <section class="main">
            <img class="main--img" src="./photo.png" alt="photo">
            <form class="main--form">
                <input type="text" placeholder="Nombre">
                <input type="password" placeholder="Contraseña">
            </form>
        </section>
        
        <footer class="footer">
            <a class="item">Contáctanos</a>
            <a class="item">Política de privacidad</a>
            <a class="item">Términos y condiciones</a>
        </footer>

<!-- Bloque 3 -->
        <header class="header">Platzi-Video</header>

        <section class="main">
            <img class="main__img" src="./photo.png" alt="photo">
            <form class="main__form">
                <input class="main__form--input" type="text" placeholder="Nombre">
                <input class="main__form--input" type="password" placeholder="Contraseña">
            </form>
        </section>
        
        <footer class="footer">
            <a class="footer__item">Contáctanos</a>
            <a class="footer__item">Política de privacidad</a>
            <a class="footer__item">Términos y condiciones</a>
        </footer>

EN los 3 bloques se puede usar la metodología BEM siendo el bloque numero 3 donde se usa correctamente.

Sería el 3er ejemplo porque se debe poner el doble barra al piso antes de las dos barras normales ! y eso hace que siga la estructura correcta de la practica del código
class = "block__element–modificator"
main = block
form = element
input = modificator

la tercera, debido a que tiene su estructura de elemento block principal, los elementos internos con referencia a los bloques semanticos y los modificadores dependiendo de la accion a realizar

El tercer código parece el más adecuado, sin embargo está usando modificadores directos en el input dentro del main form y en teoría no se deben usar solos ya que estos solamente modifican elementos, es decir les ponen una piel diferente.

El código más adecuado implementando BEM, —a juzgar por mi poca experiencia con esta arquitectura y esperando sus comentarios— sería:

<header class="header">Platzi-Video</header>

<section class="main">
	<img src="./photo.png" alt="photo" class="main-img">
	<form action="#" class="main-form">
		<input type="text" class="main-form__input" placeholder="Nombre">
		<input type="password" class="main-form__input" placeholder="Contraseña">
	</form>
</section>

<footer class="footer">
	<a href="#" class="footer__item">Contáctanos</a>
	<a href="#" class="footer__item">Política de privacidad</a>
	<a href="#" class="footer__item">Términos y condiciones</a>
</footer>

Fuentes:
https://en.bem.info/methodology/html/#binding-blocks-to-a-dom-node
http://getbem.com/naming/

La 3ra opción es la correcta, ya que usa la metodología: bloque__elemento-modificador de la forma correcta.

El tercer bloque es el correcto segun lo visto la clase anterior

Tercer bloque por la etiqueta input que contiene todas sus variables.

La respuesta correcta sería el tercer bloque ya que estamos indicando correctamente cuáles son los bloques (header, main y footer), los elementos(img, items y forms) y los modificadores.

El tercero, a mi también me ayudo leer el siguiente articulo.
https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa/

La 3ra imagen en esta se implementa la metodología: Bloque__elemento–modificador;

El tercer bloque especifica el uso correcto de la arquitectura BEM.

El bloque 3 es el correcto ya que esta aplicando correctamente las reglas de BEM

El tercero es el que cumple con la arquitectura BEM

el tercer bloque corresponde a las convenciones de la arquitectura BEM bloque + __ + elemento + – + modificador

Dea cuerdo a la metodologia BEM es el que mas se ajusta es el tercero.

El bloque 3, ya que repeta el nombre de la clase principal (bloque) y sus hijos (elementos) en la que se separan con __ (dos raya al piso) y los item (modificadores) se separan con – (dos lguiones)

Ejemplo nombre clases:
Bloque :es un div con la clase main
elemento: un formulario con la clase main__form
modificador: es un input con la clase main__form–input

Los 3 están mal, el tercero es el que más se acerca pero la clase main__form–input está mal especificada, ya que el input no es un modificador, para mi, la especificación correcta de la clase es main__input, ya que el bloque en si es el que tiene la clase main

La tercera imagen cumple con separar bloques, elementos y modificadores.

El tercer bloque es el correcto. Falta el / (slash) en el cierre de form.

Mi duda con la arquitectura BEM es ¿Cuando usar guiones bajos y guiones normales ?

El tercer bloque es el indicado ya que cumple con las características que tiene BEM

El número 3 porque está usando la sintaxis addecuada, además de que identifica bien los elementos padre y parte de ahí para distinguir los demás componentes.

El tercero, ya que se usa correctamente los subguiones para separar elementos hijos.

Estudiare un poco mas los códigos para saber cual es la correcta. Gracias!!

Es la opción 3 ya que cumple con la estructura de la metodología BEM de esta forma se nos facilita saber a que componente pertenece cada elemento teniendo de esta forma un código CSS mas ordenado.

la opcion 3 es la que se apega a BEM

La tercera opción implementa de mejor manera class=“block__element–modifier”

En el tercer bloque a simple demuestra que es mas descriptivo, es la forma de identificar la arquitectura

el tercero sin duda! 😄

El 3ero, aunque falta cerrar la etiqueta </form>

El tercer bloque de código es el mas indicado XD

La tercera opción.

el tercer bloque de código es el indicado para usar la metodología BEM.

El numero 1 y 2 son los impostores!

El tercer bloque se adapta muy bien a la arquitectura BEM, ya que sus clases se vuelven mas específicas, descriptivas y fáciles de comprender. Que es uno de los objetivos de esta arquitectura.

En este artículo de Platzi detalla un poco más en que consiste la metodología BEM: Que es la metodología BEM y como se usa

3ra opcion; “main” corresponde al bloque, “form” al elemento y “input” al modificador

La tercera opcion es la correcta ya que lo esta separando por bloques con las class y cada bloque tiene su modificador.

La tercera opción es la correcta

El tercero.
Debo aceptar que me costó un poco entenderlo, pero al regresar a ver el video y leyendo un poco, una de las caracteristicas de BEM es reconocer dentro del codigo el Bloque, el Elemento y por ultimo el Modificador.

Saludos, es el tercer bloque , porque cumple con la metodologia BEM
Bloques
Es un contenedor donde se encontrarán los diferentes elementos. Por ejemplo, un encabezado (header), una barra lateral (sidebar/aside) un área de contenido principal (main) y un pie de página (footer), se consideraría cada uno como un bloque.
Elementos
El elemento es una de las variadas piezas que compondrán la estructura de un bloque. El bloque es el todo y los elementos son las piezas de este bloque
Modificadores
El ejercicio de nombrar las clases sirve para que los elementos puedan repetirse. Si los elementos son los mismos, no será necesario escribir nuevas clases en otras áreas del sitio.

Compañeros si no les quedó completamente claro la metodología de nomenclatura de clases BEM, hay un tutorial que les puede despejar muchas dudas AQUÍ

Sin duda alguna éste ↓, ya que esta aplicando la metodología BEM al pié de la letra, podemos notarlo en la parte donde declaro la clase de los inputs. “main__form–input”.

![](

la tercera es la correcta, ya que cumple con la metodologia Bloques, Elementos y Modificadores

Es la ultima de las 3 opciones muestra la forma mas indicada de trabajar el bloque de codigo segun la metodologia, pues este tiene bien clara la identificacion de la estructura BEM con class=“main__form–input” siendo:

Main = bloque
form = elemento
input = modificador

la 3º no queda otra jejeje
nota:
com comentó otro compañero en el 2º caso la etiqueta form no tiene un etiqueta de cierre " </form> "
un saludo
Never Give Up

El bloque de código 3 es el mas correcto para la metodología BEM

En efecto mis estimados, el numero 03

El tercero. Es bastante intuitivo, ya que de un vistazo los dos primeros cuesta mucho entenderlos, mientras que el tercero está clarisimo el orden de jerarquías.

El tercer bloque, ya que este contiene la estructura Bloque__Elemento–modificador.

El tercer código es el que aplicó la arquitectura BEM de manera correcta.

El tercer ejemplo.

el 3er bloque es el correcto

Sin temor a equivocarme el tercero es el mejor.

la 3

Concuerdo con todos los aportes es la 3ra, XD.

La comunidad tiene razón sobre la opción tres.

Y están perfectamente explicadas las reglas de dicha nomenclatura como Two Dashes Style en https://en.bem.info/methodology/naming-convention/#two-dashes-style

La 3

3ro

La tercera es la que usa la metodología BEM!💪

tercero es BEM 😄

El tercero

La respuesta correcta es: el bloque de código #3

Es el bloque numero 3

La tercera

#3

3

la 3

Opcion tres sin duda!!

Tercera opcion!

la 3

La tercera opción.

La tercera opción

Tercer opción

number 3 is the winner

El tercero!