Viernes , 22 Noviembre 2024
  1. Cursos
  2. Tecnología
  3. Desarrollo Web
  4. Crea páginas responsive con CSS3

Crea páginas responsive con CSS3

En este curso aprenderás a desarrollar páginas responsive 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

Crea páginas responsive con CSS3
Comparte este curso

Descripción del curso

Responsive es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos.

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 natural, las cajas internas al contenedor flexible.

Haremos ejemplos de páginas responsive 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.

Contenido del curso

Introducción a las Cajas Flexibles

48:11
  • Bienvenida al curso Crear páginas responsivas con flow-box de CSS308:50AVANCE
  • Introducción a las cajas flexibles de CSS307:21
  • La propiedad display en el manejo de las cajas flexibles con CSS305:43
  • Cambiar la dirección de las cajas flexibles03:33
  • Justificar las cajas flexibles en el eje principal04:12
  • Alinear los elementos flexibles en el eje cruzado o complementario04:17
  • Crear diferentes lineas con flex-wrap04:01AVANCE
  • Modificar los espacios entre las líneas (renglones) de los ítems06:16
  • La propiedad flex-flow para controlar los ejes03:58

Propiedades para los ítems flexibles

23:55
  • Cambiar el orden de los ítems de la caja flexible03:59
  • El comportamiento de la propiedad margin en las cajas flexibles04:11
  • La propiedad align-self para la alineación individual de los ítems03:49
  • La propiedad flex-grow para el ancho proporcional de los items03:41
  • La propiedad flex-shrink para reducir las dimensiones del ítem flexible02:44
  • La propiedad flex-basis para establecer las dimensiones del ítem flexible (0206)02:39
  • La propiedad flex para cambiar los ítems de un contenedor flexible (0207)02:52

Crear páginas responsivas con flex-box de CSS3

01:19:12
  • Crea la estructura flexible con flex-box09:09
  • Hacer una página responsiva con flex-box de CSS3 (0302)10:02
  • Crear una segunda página flexible con flex-box (0303)10:10
  • Agregar contenido a la página realizada con flex-box (0304)07:00
  • Hacer la pagina responsiva con los media-query09:47
  • Galería flexible utilizando flex-box de CSS306:22
  • Galeria flexible utilizando flex-box, segunda parte05:52
  • Hacer una animación con cajas flexibles o flex-box de CSS307:36
  • Crear un menú responsivo con cajas flexibles o flex-box con CSS309:55
  • Despedida del curso03:19

Valoraciones

5.0/5
6 Valoraciones
  • 5 ESTRELLAS
    100%
  • 4 ESTRELLAS
    0%
  • 3 ESTRELLAS
    0%
  • 2 ESTRELLAS
    0%
  • 1 ESTRELLAS
    0%
  • Javier Soriano
    Javier
      Soriano
    Incluir valoración media (en números)

  • Encarnación Cáliz Delgado
    Encarnación
      Cáliz Delgado
    Incluir valoración media (en números)

  • José María García Olmo
    José María
      García Olmo
    Incluir valoración media (en números)

  • José Manuel Cerrato Bartolomé
    José Manuel
      Cerrato Bartolomé
    Incluir valoración media (en números)

  • Joaquin Sales Vives
    Joaquin
      Sales Vives
    Incluir valoración media (en números)

  • Gino Vásquez Iberico
    Gino
      Vásquez Iberico
    Incluir valoración media (en números)

    vn

¿Por qué pagar por un curso cuando puedes tenerlos todos?

Prueba la Suscripción ahora
O quiero saber más
Apúntate POR 10€
GRATIS con la Suscripción