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

Flexbox

28/43
Recursos

Uno de los trabajos más difíciles en CSS es alinear elementos. Para hacerlo más fácil podemos contar con Flexbox.

Es importante tener presente que tendremos un contenedor y los elementos que queremos organizar dependiendo de nuestras necesidades.

Aportes 349

Preguntas 9

Ordenar por:

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

Les comparto un simulador de Flexbox que desarrollé. Es para ir viendo como se comportan los atributos definidos en el flexbox container. La idea es ir modificando los inputs del flexbox-container e ir visualizando el comportamiento en los flexbox-items: https://juliansci.github.io/css-flexbox-simulator/

Flexbox froggy es un muy buen juego.

justify-content
flex-start Alinea elementos al lado izquierdo del contenedor.
flex-end Alinea elementos al lado derecho del contenedor.
center Alinea elementos en el centro del contenedor.
space-between Muestra elementos con la misma distancia entre ellos.
space-around Muestra elementos con la misma separación alrededor de ellos.
Alinea elementos horizontalmente y acepta los siguientes valores:

align-items
flex-start Alinea elementos a la parte superior del contenedor.
flex-end Alinea elementos a la parte inferior del contenedor.
center Alinea elementos en el centro (verticalmente hablando) del contenedor.
baseline Muestra elementos en la línea base del contenedor
stretch Elementos se estiran para ajustarse al contenedor.
Esta propiedad, alinea elementos verticalmente

flex-direction
row Elementos son colocados en la misma dirección del texto.
row-reverse Elementos son colocados en la dirección opuesta al texto.
column Elementos se colocan de arriba hacia abajo.
column-reverse Elementos se colocan de abajo hacia arriba.
Esta propiedad CSS define la dirección de los elementos en el contenedor

**order **
order: 1; order: -1; Por defecto, los elementos tienen un valor 0, pero nosotros podemos usar esta propiedad para establecerlo a un n√ļmero entero positivo o negativo. A elementos individuales.

_align-self. _
Esta propiedad acepta los mismos valores de align-items y sus valores son usados para un elemento específico.

flex-wrap
nowrap Cada elemento se ajusta en una sola línea.
wrap Los elementos se envuelven alrededor de líneas adicionales.
wrap-reverse Los elementos se envuelven alrededor de líneas adicionales en reversa.

flex-flow
flex-flow: wrap column; Las dos propiedades flex-direction y flex-wrap son usadas a menudo en conjunto con la propiedad abreviada. Esta propiedad abreviada, acepta un valor de cada una separada por un espacio.

align-content
flex-start Las líneas se posicionan en la parte superior del contenedor.
flex-end Las líneas se posicionan en la parte inferior del contenedor.
center Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
space-between Las líneas se muestran con la misma distancia entre ellas.
space-around Las líneas se muestran con la misma separación alrededor de ellas.
stretch Las líneas se estiran para ajustarse al contenedor.
Para establecer como m√ļltiples l√≠neas est√°n separadas una de otra.¬†
align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto.

Nota que cuando es una columna, justify-content cambia a vertical y align-items a horizontal.

Nota que cuando estableces la dirección a una fila invertida o columna, el inicio y el final también se invierten.

Hola, les dejo por aquí algunos juegos para practicar un poco:

  1. para practicar programación codecombat.
  2. para practicar el manejo de colores en hexadecimales hexinvaders
  3. para flexbox flexboxfroggy.
  4. para practicar con tama√Īos: pixact
  5. para la practica con los selectores css: flukeout

conocen mas juegos ?

Si bien el curso esta muy bueno, recomiendo que tomen los cursos principales de la carrera de frontend, puesto que van ams a detalle sobre cosas que aqui se toman poco tiempo, de nuevo, genial el curso pero yo recomendaria ir primero a esos otros y despues regresar para el de escuela de javascript

Les recomiendo también éste juego:
Fexbox Defense

Es un juego muy entretenido y da a entender como funciona flexbox.

recomendacion…terminar e ljuego de las ranitas es super util y se aprende un monton, ya que mover cajas en html es un gran dolor de cabeza, y esto te lo simplifica, de hecho tome nota para futuros proyectos. like si superaste el ultimo reto de las ranitas, el numero 24.

**Yo hace 3 hrs **

La vieja confiable, es tremendo para practicar y aprender: https://flexboxfroggy.com

Les recomiendo también el siguiente juego que es un poco más retador
http://www.flexboxdefense.com/

https://www.youtube.com/watch?v=TtgkU8LMGAc
https://www.youtube.com/watch?v=-yRjE6YieoM

De los mejores vídeos que hay sobre flexbox, son consecutivos

Otros juegos muy buenos para aprender Flexbox son:

Uno de los éxitos del Baldor (ya podrán calcular mi edad), no solo era el dolor (Baldor xD) cuando te pegaban con ese enorme libro al equivocarte en un ejercicio, sino la gran variedad de ejercicios que tiene.
Excelente el jueguito con Froggy. Todas las clases deber√≠an tener una m√≥dulo de ejercicios tipo Froggy o m√°s sencillos o m√°s creativos (el navegador es el l√≠mite). Hasta estos m√≥dulos podr√≠an venir en una nueva suscripci√≥n tipo ‚ÄúGenius‚ÄĚ.
De nada, Platzi.

LISTO!

Me gusto tanto el juego de las ramas sobre Flexbox que lo termine todo jajaja muy genial y recomendado. Aprendí mucho

Código final de flexbox froggy.

flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;```

justify-content: alinea de forma horizontal (de izquierda a derecha)
align-items: alinea de forma vertical (de arriba a abajo)

Si usan flex-direction: column, justify-content y align-items intercambian la manera en que alinean los elementos

Hola gente emprendora y futuros colegas! Cómo están? espero bien.
les dejo un link a la web de la gente de CodePip, que es justamente la que desarrollo FlexboxFroggy, tienes mas juegos para aprender, esta bien chula al menos para captar los conceptos importantes. Saludos desde Argentina.

Uno de los mejores juegos para aprender flexbox, en 30 minutos lo estas dominando con este juego: http://www.flexboxdefense.com/

Extraordinario juego ūüėÉ

Gracias por los enlaces, me quede hasta terminar Flexbox Froggy. Ayuda mucho a entender como funciona Flex.

Existe otro juego llamado FlexBoxDefense donde aprender a pocisionar elementos con FlexBox

si me llevó un par de horas piensa y piensa jaja, pero terminé.

es muy entretenido el juego de las ranas, el √ļltimo ejercicio algo tedioso pero este fue el resultado:

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;```

Nivel 24!!!

![Me gusto mucho este juego para aprender a usar Flex](

Otro juego similar al de FlexBox Froggy: http://www.flexboxdefense.com/

que buen juego para practicar e identificar la funcinalidad en vivo de este, seria bueno crear un juego como tal tanto de css como de otros lenguajes, hace el aprendizaje mas entretenido

Verdaderamente, un aporte magnifico.

Ejercicio 24 - Flexbox Froggy:

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  align-content: space-between;
  justify-content: center;
}

Buen juego para entender mejor el tema:

Respuesta del nivel 24:
justify-content: center;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;

¬°Definitivamente la mejor forma de aprender es con un juego!
Gran estrategia did√°ctica.
Por lo que he podido ver el creador también tiene otros juegos con los que aprender más sobre CSS y también JavaScript.

Mi respuesta del nivel 24:

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between```

ese juego estuvo nitido se aprende rapido y se practica las directivas… habra otro diferente al de la rana?

Flexbox Zombies: https://mastery.games/p/flexbox-zombies

Otro juego para aprender Flexbox ūüėÉ

Otro avance con Flexbox

Como crítica constructiva, este video debió estar antes de hacer la web, para que se entienda por qué se usó flex en algunos elementos.

Excelente pr√°ctica!

No pasen de esta clase sin haber jugado este juego, realmente es muy √ļtil.

![](

D

jugando Flexbox.

Soy nuevo con Flexbox, y el √ļltimo me cost√≥ un poquit√≠n m√°s de trabajo, y as√≠ qued√≥.

Me gusto el juego porque nos aclara la idea del flexBox., lo termine‚Ķ Excelente ūüĎć
![](

Así me quedó a mi

!


MUY DIVERTIDO!!!

excelentes materiales de apoyo ūüėĄ

Muy entretenido y util el juego de Flexbox

El ejercicio 24 me costó haha!

![](

Ayudar a esas ranas debes si aprender flexbox tu quieres

![](

![](
Muy bueno para entender aun m√°s Flexbox ūüėÉ

Lo logre!

Lo logré, me encantó. Muy sencillo comprender flexbox con este juego.

Ustedes lo lograron?

Si quieren seguir aprendiendo de Flexbox con un juego aca les dejo algo m√°s retador.
http://www.flexboxdefense.com/

Listo

¬°Juegazo!

En el curso de desarrollo web con Leonidas, explican muy bien como se puede utilizar flexbox y ademas como combinarlo para alinear los items en los containers.

Buenazo el juego Flexbox Froggy

Buen d√≠a a [email protected]
Una nota el ejercicio, recomnedadísimo, a explorr los otros se dijo:

Flexbox se refiere al tipo de display en css que permite un manejo flexible de la alineación, dimensionamiento y distribución de elementos html.
Esta propiedad se aplica a un elemento padre, pero va a afectar principalmente a sus elementos hijos directos. Por defecto, los elementos internos quedan alineados unos seguidos de los otros. El comportamiento del modelo de caja de estos elementos hijos también se ha modificado, ya que pierden el efecto de su propiedad margin.
Los elementos hijos de un padre con propiedad display: flex tienen a su disposición algunas nuevas propiedades que aportan mayor flexibilidad a su comportamiento. Una de estas propiedades es flex-shrink que, junto a la propiedad flex-wrap del padre, permite adaptar y distribuir los elementos de manera dinámica en el espacio horizontal disponible hasta ocupar todo el espacio, y luego pasar a ocupar dinamicamente las siguiente filas hacia abajo.

Ya completé los 24 niveles de las ranitas!!!

También les recomiendo el juego Flexbox Zombies. Esta divertido y ayuda bastante con estos temas.

Hi, I really appreciate it when you share links and documentation, but in my opinion, isn’t important yet. I think this course is the basic form. When you build your own projects there if you need the official documentation, at this moment that only generates anxiety for the knowledge and you end up not learning anything.
PD: It’s just my humble opinion.

Aprendiendo jugando, muy buena herramienta para mejorar el aprendizaje.

Buen Juego!!

¬°Gran herramienta para aprender y practicar flexbox!

  • Ya lo hab√≠a intentado antes, pero sin leer con detenimiento las indicaciones y documentaci√≥n. Esta vez si lo hice y wow enserio aprendes a usar las propiedades y valores. Para ser un master a seguir practicando!
    .

Jajaja este juego estuvo s√ļper dif√≠cil pero se logr√≥ el objetivo!

![](

Excelente juego el de las ranitas

¬ŅQu√© es Flexbox?

Flexbox es un m√©todo de dise√Īo de p√°gina unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios m√°s peque√Īos.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Aportes m√°s √ļtiles

https://css-tricks.com/

https://darekkay.com/flexbox-cheatsheet/

https://platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/

https://codecombat.com/

Ufff! Buen juego, la mejor manera de conocer cada propiedad de Flexbox

Les recomiendo que hagan los retos del juego visto en clase, cuyo link se encuentra en los recursos, se aprende bastante

Para los que usan Visual Studio Code, les recomiendo la extension de Flexbox Cheatsheet, nos da una peque√Īa gu√≠a de c√≥mo funciona flex dentro del editor as√≠ c√≥mo una peque√Īa ayuda al hacer hover sobre nuestro display: flex.
https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

Que chevere ese juego, la maravilla de internet.

Hay un libro gratis de Freddy Montes, que habla sobre frontend, cosas como HTML y CSS, es gratis y aqui el link ūüėĄ
Libro Aquí

Excelente jueguito. Importante para aprender las propiedades de flexbox. Lo recomiendo antes de continuar con las próximas clases

Muy divertido y pr√°ctico.

Es poco pero es trabajo honesto jeje

Los dos √ļltimos retos son desafiantes pero ense√Īan mucho de la composici√≥n y conceptos de la misma

Los recursos que proporcionan son excelentes, ayudan bastante a entender conceptos.

Genial el jueguito para practicar! ūüėÉ

La verdad que guay la documentación de CSS Tricks, ya me queda bastante claro cómo funciona el flexbox. Estuve leyendo documentacioens y viendo miles de vídeos pero la mejor documentación es sin duda CSS Tricks

Un buen apoyo hablando de flexbox.

Tener en cuenta leer este documento para que se pueda entender mejor lo de flexbox y juntamente al juego
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
jueguito
https://flexboxfroggy.com/#es

Flexbox Forggy completado!

Mira mam√°! se usar Flexbox!!! ūü§ďūü§ďūü§ď