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

Domina la especificación de CSS3 con la que mejorar la construcción de diseños dinámicos
Material disponible
Intermedio
4 Clases 8 h
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.

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

  • 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

Por qué debes aprender Flexbox en el Diseño Web

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.

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).

Qué tengo que saber

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.

Clases y contenidos

Primeros pasos con Flexbox
  • Del float a Flexbox.
  • Analizando propiedades.
  • Escribiendo Vanilla Flexbox.
  • Compatibilidad con navegadores.
Flexbox: propiedades, responsive y ejemplos

Segunda sesión del curso de Flexbox dedicada a repasar referencias y documentación, ­Flexbox y Responsive Web, Ejemplos y casos de uso,­ Flexbox en los frameworks, ­ Ejercicios prácticos.

Practicamos con Flexbox

Continuamos en una nueva sesión en la que trabajamos un dado con Flexbox , un layout de 12 columnas, galería de fotos, ­formularios flexibles y una app móvil flexible.

Repasando conceptos Flexbox

Sesión extra dedicada a resolver dudas y conceptos Flexbox que habitualmente presentan una mayor dificultad.

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete