Taller Práctico de Flexbox en el Diseño Web

Diseño web, FrontEnd

Domina la especificación de CSS3 con la que mejorar la construcción de diseños dinámicos

Intermedio Corto (hasta 8 horas)

Este nuevo taller nos permitirá multiplicar nuestros conocimientos y habilidades con el que solucionar problemas habituales como el centrado vertical, columnas de la misma altura, distribución de elementos en un espacio, distribución del espacio entre elementos, así como controlar el orden de los elementos con una propiedad CSS.  Con la llegada de Flexbox  o modelo de cajas flexibles, el diseño web y también el móvil ha dado un paso adelante en cuanto a nuestras posibilidades a la hora de controlar y manipular sus elementos maquetando con una potencia que supera otras técnicas obsoletas consideradas inflexibles.

Este Taller práctico es una iniciativa que podrán aprovechar tanto los diseñadores web, agilizando el proceso de maquetación de los website, como los desarrolladores que trabajen en aplicaciones HTML5, donde el layout gana protagonismo para la presentación de las diferentes vistas.  Con Flexbox tenemos a nuestra disposición propiedades CSS para controlar cómo distribuir los elementos de nuestros diseños con una potencia y prestaciones ala altura de los diseñadores que quieran estar a la vanguardia.

¿Qué veremos durante el taller?

  • Introducción a Flexbox ­
  • Del float a Flexbox ­
  • Analizando las propiedades ­
  • Escribiendo Vanilla Flexbox ­
  • La compatibilidad con los navegadores
  • Referencias y documentación ­
  • Flexbox y Responsive Web ­
  • Analizando ejemplos y casos de uso ­
  • Flexbox en los frameworks ­ Ejercicios prácticos

  • Un dado con Flexbox ­
  • Un layout de 12 columnas ­
  • Galería de fotos ­
  • Formularios flexibles ­
  • Una app móvil flexible


Además practicaremos varios ejemplos que nos permitan asimilar conocimientos, también tendremos una serie de ejercicios, a modo de workshop, para poder asentar lo aprendido durante el taller. Para los ejercicios usaremos Codepen, por lo que será necesario tener cuenta (100% gratuita).



CONTENIDO

CONTENIDO