CSS, CSS3

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.

Comprar curso

Cursos que también te pueden interesar

HTML, CSS, Desarrollo Web

Curso de HTML y CSS

Nivel Básico

PostCSS, Arquitectura CSS

PostCSS: más allá del css

Nivel Intermedio

CSS, CSS3, Diseño Frontend

Curso de Fundamentos CSS Profesional

Nivel Intermedio

CSS, CSS3, Arquitectura CSS

Curso de Arquitectura Profesional CSS con ITCSS

Nivel Intermedio

CSS, Arquitectura CSS, Maquetación web

Taller de CSS Grid Layout

Nivel Intermedio

¿Conoces nuestra tarifa plana?

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