Con CSS Flexbox, puedes crear sitios web responsivos fácilmente que se adapten a diferentes tamaños de pantalla y dispositivos. Es una habilidad esencial para el desarrollo web moderno.

Publicamos un curso en el canal de YouTube de freeCodeCamp.org en español que te enseñará Flexbox desde los fundamentos. Al final del curso, podrás diseñar e implementar diseños responsivos.

Este curso fue creado por Leosbel Poll Sotomayor. Leosbel es un ingeniero de software con más de 10 años de experiencia, que comenzó a crear hace 20 años en Cuba y ahora vive en Canadá gracias a sus habilidades de programación. Creó este curso para la comunidad freeCodeCamp.

¿Listos? Veamos una descripción general de Flexbox y lo que aprenderás durante el curso.

¿Qué es CSS Flexbox?

CSS Flexbox significa CSS Flexible Box Layout. Es un modelo de diseño que te permite reorganizar elementos responsivos dentro de un contenedor en base a propiedades CSS que definen cómo los descendientes deben "moverse" para ajustarse al tamaño de su contenedor.

Con Flexbox puedes alinear, distribuir y espaciar elementos usando propiedades sencillas para evitar cálculos complejos en tu CSS.

Durante el curso, aprenderás a utilizar las siguientes propiedades:

  • flex-direction
  • justify-content
  • flex-wrap
  • align-items
  • align-content
  • flex-grow
  • flex-basis
  • flex-shrink

¡Y más! También aprenderás a combinarlos con Media Queries en CSS para crear diseños responsivos aún más poderosos.

frame-3
Ejemplo de Flexbox. Distribuir elementos automáticamente.

Oportunidades profesionales

Si tu objetivo es tener una carrera en el campo del desarrollo web, Flexbox te será de gran ayuda. Estas habilidades son altamente demandadas y buscadas por empleadores a nivel mundial.

frame-4
Ejemplo de Flexbox. Diseño clásico con barra de navegación, menú lateral, contenido principal y pie de página. 

Curso de Flexbox en español

Genial. Ahora que ya sabes por qué Flexbox es tan importante, veamos los temas que aprenderás durante el curso:

  • Introducción
  • ¿Qué es Flexbox?
  • Importancia de Flexbox
  • Fundamentos de Flexbox
  • Herramientas que usarás durante el curso
  • Cómo configurar tu entorno de desarrollo
  • Propiedades relacionadas con contenedores
  • Pérdida de datos en CSS
  • Propiedades relacionadas con descendientes (hijos)
  • Ejemplo: Barra de navegación
  • Ejemplo: Diseño clásico
  • Flexbox vs. Grid

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Leosbel Poll Sotomayor.