DevelopmentAdded 1 hours ago

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

MuleSoft Developer I Mule-Dev-201: Practice Tests 2026100% OFF
DevelopmentAdded Just now

MuleSoft Developer I Mule-Dev-201: Practice Tests 2026

Exam Certification
4.0(1)0sEnglish
$84.99Free
Get Coupon
OCA Java SE 21 Developer (1Z0‑830) — Oracle’s  certification100% OFF
DevelopmentAdded 10 mins ago

OCA Java SE 21 Developer (1Z0‑830) — Oracle’s certification

Exam Certification
4.7(100)0sEnglish
$84.99Free
Get Coupon
600+ JUnit Interview Questions Practice Test100% OFF
DevelopmentAdded 4 hours ago

600+ JUnit Interview Questions Practice Test

Interview Questions Tests
4.7(100)0sEnglish
$84.99Free
Get Coupon
600+ Teradata Interview Questions Practice Test100% OFF
DevelopmentAdded 4 hours ago

600+ Teradata Interview Questions Practice Test

Interview Questions Tests
4.7(100)0sEnglish
$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