Aprende a crear animaciones y efectos interactivos con CSS3

De qué trata

Curso de Udemy de 133 minutos y 20 lecciones que muestra cómo pasar de diseños estáticos a diseños con movimiento usando únicamente CSS3, sin JavaScript. Empieza con la línea de tiempo de CSS3 para crear animaciones y continúa con botoneras y menús desplegables.

Después construye varios recursos pensados para dispositivos táctiles: una botonera móvil, un menú tipo acordeón, un slide interactivo y una galería de imágenes interactiva. Termina integrando los recursos en una plantilla HTML, con slideshow, galería y un fondo animado. El autor estima que se puede completar en menos de una semana, según el ritmo de cada persona.

• Animaciones con la línea de tiempo de CSS3
• Menú desplegable y botonera móvil
• Menú estilo acordeón solo con CSS3
• Slide y galería de imágenes interactivos
• Integración de los recursos en una plantilla HTML

Para quién es este curso

• Diseñadores gráficos o visuales que ya conocen lo básico de HTML5 y CSS3 y quieren añadir movimiento e interacción a sus páginas.
• Desarrolladores web que buscan resolver menús, sliders y galerías sin depender de JavaScript.
• Emprendedores o personas que quieren enriquecer una página web propia con efectos visuales.

Qué sabrás hacer al terminar

• Utilizar la línea de tiempo de CSS3 para crear animaciones.
• Crear botoneras con menú desplegable usando solo CSS3.
• Construir recursos pensados para una mejor experiencia en dispositivos táctiles, como una botonera móvil y un menú acordeón.
• Crear un slide y una galería de imágenes interactivos sin JavaScript.
• Integrar los recursos creados en una plantilla HTML.

Plan de estudio sugerido

1 semana · unas 4 h por semana

1. 1.Sesión 1: descarga el material de la clase 1 y sigue «Animaciones en CSS3»; practica creando tus propias animaciones.
2. 2.Sesión 2: «Menú desplegable» y «Botonera móvil»; prueba el resultado en distintos tamaños de pantalla.
3. 3.Sesión 3: «Menú estilo acordeón» y «Slide interactivo»; modifica los estilos para adaptarlos a tu diseño.
4. 4.Sesión 4: «Galería interactiva» e «Integración de recursos en plantilla HTML»; monta una página propia con todo lo aprendido.

El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.

Consejos para seguirlo

• Descarga el material de la clase 1 antes de empezar y trabaja sobre esos archivos mientras ves el vídeo.
• Tras el primer capítulo, crea una animación propia distinta a la del ejemplo para asimilar la línea de tiempo.
• En los capítulos de botonera y acordeón, prueba el resultado en un móvil o con el modo responsive del navegador.
• En el último capítulo, intenta integrar los recursos en una plantilla tuya antes de ver cómo se hace.

Antes y después de este curso

• Antes de este cursoCurso de maquetación web de lo básico a lo avanzadoRefuerza la maquetación web, base necesaria antes de añadir animaciones con CSS3.
• Antes de este cursoCurso de FlexBox desde 0Complementa los conocimientos de CSS de maquetación útiles para aplicar los recursos.
• Después de este cursoJavaScript - Curso COMPLETO desde 0 | Paso a paso y con Ejemplos 👨‍💻Siguiente paso natural si quieres añadir lógica e interactividad con JavaScript.

Cómo lo presenta Juan Fernando Urrego

Construye recursos interactivos utilizando sólo CSS3 sin necesidad de javascript.

¿DE QUÉ SE TRATA EL CURSO? La construcción de un sitio web no termina en la maquetación. Pensar en una mejor experiencia para el usuario es pensar en recursos interactivos y efectos visuales que se mezclen con el diseño. Hoy en día trabajamos el lenguaje de programación Javascript y sus librerías para lograr dicha…

Extracto de la descripción original en Udemy.

Preguntas frecuentes

Más cursos de Diseño