Flexbox y Grid

Curso: Flexbox y Grid

intermedio
4 horas

También puedes acceder a todos los cursos con un solo pago

Sube a premium

Flexbox y Grid

Toma este curso
Flexbox y Grid

Curso: Flexbox y Grid

intermedio
+4 horas
Sube a premium

Y accede a todos los cursos con un solo pago

Flexbox y Grid

Flexbox y Grid

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

Nivel: intermedio
Fecha de lanzamiento: 18 de jun.
Duración: +4 horas
(Ver temario)
Calificación: 4.8
(Ver 376 opiniones)

* Accede a este y a todos los cursos, talleres y especialidades

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.

¿Qué aprenderás en este curso?

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

¿Qué conocimientos previos necesitas?

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Temario del curso

Flex container

  • 1.1 - ¿Qué es flexbox?

  • 1.2 - Soporte de los navegadores a flexbox

  • 1.3 - Main axis y cross axis

  • 1.4 - Flujo de flexbox

  • 1.5 - Alineación en flexbox

Flex items

  • 2.1 - Flex items

  • 2.2 - Propiedad flex-grow

  • 2.3 - Propiedad flex-shrink

  • 2.4 - Propiedad flex-basis

  • 2.5 - Propiedad flex

  • 2.6 - Propiedad align-self

  • 2.7 - Propiedad order

Problemas resueltos con flexbox

  • 3.1 - Centrado absoluto

  • 3.2 - Menu responsive

  • 3.3 - Banner animado

  • 3.4 - Solucionar elementos aplastados

  • 3.5 - Tarjeta de usuario

  • 3.6 - Layout responsive

Grid container

  • 4.1 - ¿Qué es CSS Grid?

  • 4.2 - Terminología y elementos de CSS Grid

  • 4.3 - Inspeccionar elementos de CSS Grid

  • 4.4 - Definir tracks (filas y columnas)

  • 4.5 - Propiedad grid-gap y unidad fr

  • 4.6 - Posicionar grid-items

  • 4.7 - Propiedades grid-column y grid-row

  • 4.8 - Funcion repeat() y creación de layout

Grid items

  • 5.1 - Tracks flexibles con fr

  • 5.2 - Tracks flexibles con min-content, max-content y fit-content()

  • 5.3 - Tracks flexibles con minmax(), auto-fit y auto-fill

  • 5.4 - Utilizar areas

  • 5.5 - Galería de fotos con css grid

CSS grid a fondo

  • 6.1 - Alinear items

  • 6.2 - Alinear tracks

  • 6.3 - Grid placement

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Sigue aprendiendo con

Variables CSS

Variables CSS

Avatar

Alvaro Felipe

5

4.9

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

Responsive Web Design

Responsive Web Design

Avatar

Alvaro Felipe

5

4.8

Firebase para la web

Firebase para la web

Avatar

Juan Guillermo Gomez

5

4.3

CSS Avanzado

CSS Avanzado

Avatar

Alexis Mora Angulo

5

5.0

Animaciones con CSS

Animaciones con CSS

Avatar

Alvaro Felipe

5

5.0

Empieza a aprender Flexbox y Grid

¿Aún no te decides? Mira una clase gratis

Mostrar precios en

Premium

$3020USD

En un solo pago anual de $360 240 USD

Gráfico de tabla

Alcanza tus metas con todos los cursos y funciones premium.

unicorn-head-smile¿Tienes un EDycupón?
  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+143 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+143 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Ver todas las características

* Los planes premium no tienen permanencia obligatoria. Cancela cuando quieras

Sólo este curso

$24USD

$360 240 USD

Gráfico de tabla

Conserva este curso de por vida y obtén un certificado con un único pago.

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Guarda tus apuntes de clases

  • Reproducción automática de clases

  • Guarda el avance de tus estudios

  • Descarga los recursos de las clases

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Ver todas las características

¿Quieres regalar este curso?

376 calificaciones de los estudiantes (4.8)

Cargando Calificaciones...

Sigue aprendiendo con

Variables CSS

Variables CSS

Avatar

Alvaro Felipe

5

4.9

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

Responsive Web Design

Responsive Web Design

Avatar

Alvaro Felipe

5

4.8

Firebase para la web

Firebase para la web

Avatar

Juan Guillermo Gomez

5

4.3

CSS Avanzado

CSS Avanzado

Avatar

Alexis Mora Angulo

5

5.0

Animaciones con CSS

Animaciones con CSS

Avatar

Alvaro Felipe

5

5.0