DevelopmentAdded Sep 21, 2026

Diseño responsivo con cajas flexibles CSS3

Conoce la poderosa herramienta de las cajas flexibles o flex-box para hacer páginas responsivas

4.4 / 5.0
112 ratings
7h 33m 4s
On-demand
Spanish
Audio
Francisco Javier Arce Anguiano
Instructor
Diseño responsivo con cajas flexibles CSS3100% OFF
  • 7h 33m 4s on-demand video
  • Certificate of Completion
  • Mobile, TV & Desktop Access
  • Full Lifetime Access

What you'll learn

Crear una página a base de las cajas flexibles
Cambiar la dirección de las cajas flexibles de horizontal a vertical y el orden de las cajas internas
Justificar y alinear las cajas internas
Cambiar el orden de las cajas internas individuales
Cambiar la proporción del ancho y del largo de los items flexibles
Crear páginas responsivas con cajas flexibles
Aplicar transiciones en las cajas flexibles
Crear una galería a partir de cajas flexibles
Crear un menú responsivo

Course Description

En este curso aprenderás a desarrollar páginas responsivas por medio de la poderosa herramienta de las cajas flexibles o flex-box. Nos basaremos en la especificación más reciente de la W3C de 2014 de las "flex-box". Analizaremos desde las bases de este esquema, que nos permitirá hacer formatos o layouts, así como la forma de alinearlos vertical u horizontalmente, centrarlas, cambiar el orden de las cajas internas o ítems flexibles, así como las propiedades para "estirarlas", rotarlas y adaptarse de forma natual, las cajas internas al contenedor flexible.

Haremos ejemplos de páginas responsivas iniciando desde cero, hasta llenarlas de contenido. Realizaremos una galería responsiva con diferentes imágenes, que se adaptarán al tamaño del dispositivo, adaptándose tanto a tabletas como a teléfonos inteligentes. También haremos un ejemplo de cómo animar a las cajas flexibles por medio de las propiedades de transición de los estilos en cascada nivel tres. Por último codificaremos un menú horizontal con cajas flexibles, que cambiará su orientación a vertical cuando se visualice en pantallas pequeñas, como la de los teléfonos, donde es complicado los menús largos.

Para que puedas aprovechar este curso, es necesario que tengas conocimientos mínimos de HTML y CSS. También es deseable que conozcas HTML5 y CSS3, aunque no es indispensable.

Para tomar este curso necesitas un editor de código como SublimeText. Brackets, Aptana o Dreamweaver y un navegador moderno, así como muchas ganas de aprender.


Who this course is for:

  • Diseñadores web
  • Desarrolladores web

More free Development courses

Introducción a la programación orientada a objetos con PHP100% OFF
DevelopmentAdded 2 days ago

Introducción a la programación orientada a objetos con PHP

Francisco Javier Arce Anguiano
4.5(305)21h 33m 28sSpanish
$84.99Free
Get Coupon
Python OOP: A Complete Course in Object Oriented Programming100% OFF
DevelopmentAdded 3 days ago

Python OOP: A Complete Course in Object Oriented Programming

Sara Academy
3.8(319)3h 36m 59sEnglish
$84.99Free
Get Coupon
Data Scientist & Analyst Top Interview Questions & Answers.100% OFF
DevelopmentAdded 3 days ago

Data Scientist & Analyst Top Interview Questions & Answers.

Temotec Learning Academy
4.2(23)0sEnglish
$84.99Free
Get Coupon
Curso PSeInt algoritmos  y  lógica de  programación100% OFF
DevelopmentAdded 4 days ago

Curso PSeInt algoritmos y lógica de programación

Yuri Abdel Narvaez
4.5(753)1h 59m 42sSpanish
$84.99Free
Get Coupon

Never miss a free coupon

Instructor coupons expire fast — often within hours of reaching 1,000 enrollments. Join our Telegram channel for instant alerts when new verified coupons drop.

Join Telegram