Maquetación con GRID Layout Module CSS

Fecha Ponente(s)
Lunes 23 al viernes 27 de noviembre del 2020.

Edgar Vargas Zemeño.
Especialista en diseño web

UNAM, DGTIC

Material generado.

 

Información general del taller

Perfil de ingreso.

Conocimiento intermedio de lenguajes HTML y CSS.

Objetivo.

Que el participante maneje los conceptos de maquetación multidimensional con Grid Layout de manera teórica, para llevar a la práctica su aplicación en proyectos de construcción Web que consideren tamaños de pantalla de diferentes dispositivos.

Temario: 

   1. Antecedentes

         1.1 Maquetación unidimensional
         1.2 Maquetación multidimensional
         1.3 Grid vs Flex
         1.4 Soporte

   2. Conceptos en grid

         2.1 Grid implícito
         2.2 Manejo de columnas y filas
         2.3 Manejo de márgenes
         2.4 Subgrid y anidación

   3. Maquetación por líneas

         3.1 Grid implícito, columnas y filas
         3.2 Declaración de inicio-fin
         3.3 Valores negativos
         3.4 Construcción de layout típico

   4. Maquetación por template-area

        4.5 Indicación de template-area y contenido
        4.4 Distribución de áreas
        4.3 Construcción de layout típico

   5. Maquetación multidispositivo

        5.1 Trucos y tips
        5.2 Uso de fragmentos y repetición
        5.3 Valores máximos y mínimos
        5.4 Superposición de elementos
        5.5 Diseño responsivo accesible

   6. Proyecto final.

        6.1 Modelando el proyecto final.

Recursos informáticos.

  • Equipo de cómputo.
  • Conexión a internet.
  • Software editor de código.
  • Navegador.