Objetivo

Dar las herramientas necesarias tanto teoricas como practicas para adentrarse en el mundo de la tecnologia webdemostrando al final de este cursos lo aprendido con el proyecto que desarollaremos. Este curso nos adentraremos en temas mas profundos y actualiados de CS

Requisitos

Para este curso es escencial tener los conocimientos adquiridos en el curso introductorio

  • Diseño CSS Introductorio

A quien va dirigido?

Esta dirigido a todo aqul que desee actualizar sus conocimientos en tecnologias de punta en esta caso laLas especificaciones mas actualizadas de CSS como son Flexbox y CSS Grid

Temario

Flex container
  • ¿Qué es flexbox?
  • Soporte de los navegadores a flexbox
  • Main axis y cross axis
  • Flujo de flexbox
  • Alineación en flexbox
Flex Items
  • Flex items
  • Propiedad flex-grow
  • Propiedad flex-shrink
  • Propiedad flex-basis
  • Propiedad flex
  • Propiedad align-self
  • Propiedad order
Problemas resueltos con flexbox
  • Centrado absoluto
  • Menu responsive
  • Banner animado
  • Solucionar elementos aplastados
  • Tarjeta de usuario
  • Layout responsive
Grid container
  • ¿Qué es CSS Grid?
  • Termi nología y elementos de CSS Grid
  • Inspeccionar elementos de CSS Grid
  • Definir tracks (filas y columnas)
  • Propiedad grid-gap y unidad fr
  • Posicionar grid-items
  • Propiedades grid-column y grid-row
  • Funcion repeat() y creación de layout=
Grid Items
  • Tracks flexibles con fr
  • Tracks flexibles con min-content, max-content y fit-content()
  • Tracks flexibles con minmax(), auto-fit y auto-fill
  • Utilizar areas
  • Galería de fotos con css grid
CSS grid a fondo
  • Alinear items
  • Alinear tracks
  • Grid placement
Transiciones
  • Introduccion a las transiciones
  • Transiciones de varias propiedades
  • Evento transicioned
  • Transiciones de ida y vuelta
  • 2.5 - Disparadores de transiciones con pseudoclases
  • Disparadores de transiciones con pseudoclases en formularios
  • Efecto tarjeta
  • Menu off canvas
Animaciones
  • Animaciones vs Transiciones
  • Animation name y duration3.3 - Animation timing function
  • Animation iteration-count y direction
  • Animation play-state
  • Animation delay y fill-mode
  • Shorthand animation
  • Reverse animation
  • Animation evento
  • Controlar animaciones CSS con Javascript
  • Animaciones con scroll
  • Cubic bezier
  • Ejemplos de Cubic bezier
  • Sprites
Transformaciones
  • 5.1 - Introducción al sistema de coordenadas
  • 5.2 - Funciones de transformación 2D
  • 5.3 - Transform origin
  • 5.4 - Orden de las transformaciones
  • 5.5 - Ejercicio reloj
  • 5.6 - Transformaciones 3D
  • 5.7 - 3D axis y perspectiva
  • 5.8 - Crear un cubo 3
  • 5.9 - Dado 3D
Animaciones CSS y SVG
  • Insertar svg en mi web
  • Software para la creación de SVG
  • Estructura de un SVG
  • Texto y linea
  • Ejercicio de linea y texto
  • Animacion con el logo de Angular