Flexbox y Grid

Curso: Flexbox y Grid

Aprende a diseñar interfaces flexibles con flexbox, el sistema que utilizan todos los frameworks CSS.

Flexbox es un modelo de Layout CSS que permite distribuir los elementos a través de un eje horizontal o vertical. Además los elementos son flexibles y pueden crecer o encogerse adaptandose a las necesidades de tu interfaz.

Este curso forma parte de:

198
Poster del curso
Avatar

Alvaro Felipe

Curso: Flexbox y Grid

Acceso a todos los cursos, talleres y especialidades de EDteam

Accede de por vida a este curso

Poster del curso
Avatar

Alvaro Felipe

Curso: Flexbox y Grid

Acceso a todos los cursos, talleres y especialidades de EDteam

Accede de por vida a este curso

¿Qué aprenderás?

  • Terminología de flexbox.
  • Diseñar interfaces flexibles.
  • Problemas comunes solucionados con flexbox

¿Qué conocimientos necesitas?

Nivel

intermedio

+4 horas

Temario del curso

¿Eres estudiante premium o has comprado este curso? Empieza aquí

Flex container

  • 1.1 - ¿Qué es flexbox?06:28
  • 1.2 - Soporte de los navegadores a flexbox06:17
  • 1.3 - Main axis y cross axis09:20
  • 1.4 - Flujo de flexbox11:25
  • 1.5 - Alineación en flexbox15:15

Flex items

  • 2.1 - Flex items12:26
  • 2.2 - Propiedad flex-grow14:06
  • 2.3 - Propiedad flex-shrink04:29
  • 2.4 - Propiedad flex-basis07:47
  • 2.5 - Propiedad flex02:57
  • 2.6 - Propiedad align-self02:49
  • 2.7 - Propiedad order04:28

Problemas resueltos con flexbox

  • 3.1 - Centrado absoluto12:36
  • 3.2 - Menu responsive08:37
  • 3.3 - Banner animado07:41
  • 3.4 - Solucionar elementos aplastados08:10
  • 3.5 - Tarjeta de usuario04:28
  • 3.6 - Layout responsive06:57

Grid container

  • 1.1 - ¿Qué es CSS Grid?06:20
  • 1.2 - Terminología y elementos de CSS Grid11:20
  • 1.3 - Inspeccionar elementos de CSS Grid03:45
  • 1.4 - Definir tracks (filas y columnas)05:14
  • 1.5 - Propiedad grid-gap y unidad fr06:44
  • 1.6 - Posicionar grid-items10:36
  • 1.7 - Propiedades grid-column y grid-row03:22
  • 1.8 - Funcion repeat() y creación de layout08:42

Grid items

  • 2.1 - Tracks flexibles con fr10:15
  • 2.2 - Tracks flexibles con min-content, max-content y fit-content() 05:30
  • 2.3 - Tracks flexibles con minmax(), auto-fit y auto-fill06:45
  • 2.4 - Utilizar areas09:41
  • 2.5 - Galería de fotos con css grid11:13

CSS grid a fondo

  • 3.1 - Alinear items09:20
  • 3.2 - Alinear tracks07:34
  • 3.3 - Grid placement16:54

¿Por qué elegir EDteam?

Profesores reales

Profesores reales

Todos nuestros profesores tienen experiencia real en aulas.Porque no basta saber un tema, sino saber enseñarlo.

Especialidades

Especialidades

Las especialidades son rutas de aprendizaje detalladas que te llevan a traves de cursos cortos a tu objetivo.

Aprende con proyectos

Aprende con proyectos

Somos la primera plataforma en incluir un proyecto del mundo real (no un examen) para completar los cursos.

Comunidad

Comunidad

No te quedes con dudas, busca apoyo en la comunidad, ayuda a tus compañeros y gana reputación.

Seguimiento de aprendizaje

Seguimiento de aprendizaje

Lleva seguimiento de tus avances, tomar notas y obtén un certificado de culminación desde nuestra plataforma.

Clases en vivo

Clases en vivo

Toda la semana tenemos clases en vivo en las que nuestros estudiantes interactuan con los profesores y sus compañeros.