Diseño responsivo con cajas flexibles CSS3
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
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
Instructor
- 4.4 Instructor Rating
- 11,217 Reviews
- 149,101 Students
- 70 Courses
Soy licenciado en Matemáticas Aplicadas y Computación por parte de la Universidad Nacional Autónoma de México, instructor certificado de Adobe desde 2002.
He trabajado para diferentes centros autorizados de Adobe en México y doy clases en universidades de la Ciudad de México. Asimismo, he publicados siete libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de México, asi como un libro de desarrollo de juegos con ActionScript con la misma editorial.
He desarrollado aplicaciones para Android y iPhone. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología.
También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.