¡Apúntate hoy!

Curso de Animación Web con CSS


Aprende los fundamentos de la animación web, incluyendo los conceptos básicos de CSS como selectores, propiedades y valores, y  descubre cómo usarlos para crear animaciones y transiciones fluidas.
Formato


Curso en vivo

Fecha de comienzo


11 de junio
Mar y Jue, 17h-19h

Duración

7 semanas
36 horas

Precio


675 €

Curso de Animación Web con CSS


Aprende los fundamentos de la animación web, incluyendo los conceptos básicos de CSS como selectores, propiedades y valores, y  descubre cómo usarlos para crear animaciones y transiciones fluidas.
Fecha de comienzo


11 de junio

Duración

7 semanas
36 horas

Mantente al día

Calendario de próximas clases

¿Qué vas a aprender?

Disfruta de la animación web de forma fácil


A través de este curso, aprenderás los fundamentos de la animación web:  los conceptos básicos de CSS como selectores, propiedades y valores, y, además, cómo usarlos para crear animaciones y transiciones fluidas.

También aprenderás a crear animaciones utilizando keyframes, animaciones de transición, animaciones basadas en eventos y efectos especiales.
Write your awesome label here.


Carmen Ansio

Diseño y desarrollo web

Bio


Soy una gran fan del código creativo y las animaciones SVG. Me encanta mezclar código y diseño ♥

Diseñar es más divertido cuando lo haces con código.

Experiencia


Ingeniera UX anteriormente trabajando en Codely y como Software Engineering Manager en Holaluz. Ha colaborado en la organización de varios eventos tecnológicos para mujeres con AdaJS, y ha sido ponente y co-presentadora en el podcast WeCodeSign. 

Fechas y Horarios


Comienzo: 11 de junio
Clases online en directo: martes y jueves
Horario: 17h a 19h (GMT +1)
Duración: 7 semanas 
(20 horas de clases en directo +16 horas de trabajo en casa).
Write your awesome label here.
Write your awesome label here.

Para quién es:


Es recomendable que, para aprovechar este curso, tengas un conocimiento básico de HTML y CSS.

Deberías estar familiarizados con la estructura básica de una página web, incluyendo la estructura de etiquetas HTML y la forma en que se utilizan las hojas de estilo CSS para dar estilo a una página.

¿Hasta dónde quieres llegar?

Posibles salidas profesionales

  • Desarrollo de sitios web: Como desarrollador de sitios web, serás responsable de crear y mantener páginas web funcionales y atractivas, trabajando tanto en el front-end como en el back-end para ofrecer una experiencia de usuario completa.

  • Animación con CSS: Como especialista en Animación con CSS, mejorarás la experiencia del usuario en sitios web al crear efectos visuales interactivos, siendo un activo clave en equipos de diseño y desarrollo web.
Write your awesome label here.
Write your awesome label here.

Herramientas que verás en el curso

  • Cuenta en Github: es una plataforma de alojamiento de código fuente y desarrollo colaborativo.
  • Cuenta en Codesandbox: es una plataforma de desarrollo en línea que permite a los usuarios crear, compartir y colaborar en proyectos de código
  • Editores de código: Herramientas como Visual Studio Code para escribir y probar código.
  • Navegadores web: Uso de navegadores como Chrome, Firefox y Safari para probar y depurar animaciones.
  • Greensock (GSAP): Una librería de JavaScript para crear animaciones avanzadas.
  • Herramientas de diseño: Figma para diseñar y planificar las animaciones.
  • DevTools: Herramientas de desarrollo integradas en los navegadores para depurar y optimizar las animaciones.

Proyecto final


Realizarás un proyecto que integre los conocimientos adquiridos. Incluirá la implementación de la técnica de scrollytelling en una landing page, animando secciones conforme el usuario se desplaza por la página.

Diseño y estructura de la landing page: Decidirás la estructura, el contenido y el diseño básico de la landing page.
También realizarás la implementación de animaciones básicas: Aplicarás las técnicas aprendidas en las primeras sesiones para animar elementos básicos de la página.

Y, por último, implementarás animaciones avanzadas : Integrar animaciones más complejas, como las basadas en scrollytelling y animaciones SVG.
Write your awesome label here.

Es el momento.

Curso de Animación Web con CSS

01

Bloque 1: Introducción a la animación web

  • Definición y utilidad de las animaciones CSS
  • Análisis de ejemplos de animaciones CSS
  • Diseño inicial de la landing page, definición de secciones y elementos que se animarán

02

Bloque 2: Ventajas y desventajas de las animaciones CSS

  • Análisis de las ventajas y desventajas de las animaciones CSS
  • Comparativa entre animaciones CSS y JavaScript
  •  Identificación y discusión de secciones de la landing page que se beneficiarían de animaciones CSS vs. JavaScript

03

Bloque 3: Configuración del entorno de trabajo

  • Elección, instalación y configuración de un editor de código
  • Creación y definición de objetivos para un proyecto de animación
  • Organización de archivos y carpetas
  • Configuración del entorno de trabajo y estructuración inicial del proyecto de la landing page

04

Bloque 4:  Introducción a las transiciones CSS

  • Introducción a las transiciones y su utilidad
  • Exploración de la propiedad transition y sus valores
  • Creación de un botón con efecto de transición que será utilizado en la landing page

05

Bloque 5:  Animaciones Keyframes

  • Introducción a @keyframes y su sintaxis
  • Uso y configuración de la propiedad animation
  • Creación de un slider animado con imágenes para la sección de testimonios de la landing page

06

Bloque 6:  Transformaciones en CSS

  • Exploración del sistema de coordenadas y transformaciones 2D/3D
  • Uso de la propiedad transform-origin
  • Diseño y animación de elementos gráficos en 3D para destacar características del producto o servicio en la landing page

07

Bloque 7:  Animaciones avanzadas

  • Seguridad, SEO, Backup y Cache
  • Creación de animaciones multietapa y de bucle
  • Uso de eventos de animación
  • Animación de texto cambiante para mostrar estadísticas o puntos clave en la landing page

08

Bloque 8:  Animaciones con SVG

  • Introducción a SVG y su uso en animaciones
  •  Animación de un logo responsive para la landing page

09

Bloque 9:  Introducción a Greensock

  • Uso de librerías como Greensock y sus plugins
  • Creación de una sección interactiva con ScrollTrigger en la landing page

10

Bloque 10:  Proyecto final y recursos adicionales

  • Desarrollo de un proyecto final que integre los conocimientos adquiridos
  • Implementación de la técnica de scrollytelling en la landing page, animando secciones conforme el usuario se desplaza por la página
  • Presentación de frameworks, librerías y herramientas útiles
  • Recomendaciones de recursos en línea para seguir aprendiendo

Temario y clases

Cursos relacionados

\Learnworlds\Codeneurons\Pages\ZoneRenderers\CourseCards

Hemos ayudado a cientos de personas a encontrar
un futuro profesional

Binaas

Product Designer en Stockfink


ESAT me ha ayudado a conocer las bases fundamentales del desarrollo y diseño web. Dándome así los puntos clave para desarrollar mi carrera.

Tamara Trüb

UX/UI Designer at Ifolor Group


Lo que más aprecio de mi paso por ESAT es la enorme variedad de conocimientos de diseño que he adquirido, cada uno de ellos aplicables a mi futuro laboral, haciendo que mi perfil profesional destacara sobre otros.

Esther García Zurita

Diseñadora gráfica en Lladró, S.A.


ESAT me ha ofrecido la oportunidad de estudiar en el extranjero y trabajar con personas y en proyectos que han enriquecido mucho mi portfolio.

Juliana Chraim Hazim

Developer en Zero Paralelo


No importa si hay más o menos conocimientos iniciales, con interés y esfuerzo, cualquier alumno puede superarse y conseguir sus metas

Lidia Aullana

Frontend Developer en Doowebs


He aprendido muchísimo, he tenido la oportunidad de conocer gente maravillosa y entrar en el mundo laboral haciendo lo que más me gusta

Alex Dasi

Product Designer en Idrica


Es tremendamente valioso poder encontrar en un mismo sitio gran parte de la base técnica y teórica que necesitaba para evolucionar profesionalmente como diseñador, especialmente dentro de un campo tan dinámico y cambiante como el digital/web