🇪🇸 Diseño responsivo con cajas flexibles CSS3

🇪🇸 Diseño responsivo con cajas flexibles CSS3

Diseño responsivo con cajas flexibles CSS3

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

Language: spanish

Note: 4.2/5 (73 notes) 8,411 students

Instructor(s): Francisco Javier Arce Anguiano

Last update: 2021-11-29

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

 

Requirements

  • Conocimientos medios de HTML y CSS
  • Deseable tener conocimientos básicos de HTML5 y CSS3

 

🇪🇸 Diseño responsivo con cajas flexibles CSS3🇪🇸 Diseño responsivo con cajas flexibles CSS3

 

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.


 

🇪🇸 Diseño responsivo con cajas flexibles CSS3🇪🇸 Diseño responsivo con cajas flexibles CSS3

 

Who this course is for

  • Diseñadores web
  • Desarrolladores web

 

Course content

  • Introducción a las Cajas Flexibles o flex-box de CSS3
    • Bienvenida al curso Crear páginas responsivas con flow-box de CSS3
    • Introducción a las cajas flexibles de CSS3
    • La propiedad display en el manejo de las cajas flexibles con CSS3
    • Cambiar la dirección de las cajas flexibles
    • Justificar las cajas flexibles en el eje principal
    • Alinear los elementos flexibles en el eje cruzado o complementario
    • Crear diferentes lineas con flex-wrap
    • Modificar los espacios entre las líneas (renglones) de los ítems
    • La propiedad flex-flow para controlar los ejes
  • Propiedades para los ítems flexibles
    • Cambiar el orden de los ítems de la caja flexible
    • El comportamiento de la propiedad margin en las cajas flexibles
    • La propiedad align-self para la alineación individual de los ítems
    • La propiedad flex-grow para el ancho proporcional de los items
    • La propiedad flex-shrink para reducir las dimensiones del ítem flexible
    • La propiedad flex-basis para establecer las dimensiones del ítem flexible
    • La propiedad flex para cambiar los ítems de un contenedor flexible
  • Crear páginas responsivas con flex-box de CSS3
    • Crea la estructura flexible con flex-box
    • Hacer una página responsiva con flex-box de CSS3
    • Crear una segunda página flexible con flex-box
    • Agregar contenido a la página realizada con flex-box
    • Hacer la pagina responsiva con los media-query
    • Galería flexible utilizando flex-box de CSS3
    • Galeria flexible utilizando flex-box, segunda parte
    • Hacer una animación con cajas flexibles o flex-box de CSS3
    • Crear un menú responsivo con cajas flexibles o flex-box con CSS3
  • A manera de conclusión
    • Ejercicios del curso Introducción a Crear páginas responsivas con flex-box
    • Despedida del curso Crear páginas responsivas
    • Apuntes: Conceptos generales
    • Apuntes: Propiedades a las cajas flexibles
    • Apuntes: Consideraciones de los elementos flexibles

 


Time remaining or 961 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate