Desarrollo la web de SPIDERMAN: Brand New Day

Summary

El vídeo detalla el proceso de desarrollo de la página web oficial de 'Spider-Man: Brand New Day' utilizando Astro, Tailwind CSS y GSAP. El creador guía a través de la configuración del entorno, la optimización de recursos como fuentes y videos, y la implementación de una pantalla de carga interactiva. Posteriormente, se enfoca en la sección 'Hero', donde se anima un video de fondo, la fecha de lanzamiento y frases clave con efectos de desenfoque y aparición letra por letra. Durante el proceso, el autor resuelve desafíos de JavaScript y utiliza herramientas de IA (Cursor/Grock) para generar y refactorizar código, demostrando la coordinación de animaciones complejas con el scroll.

Topics covered

• Desarrollo Web con Astro
• Animaciones con GSAP y ScrollTrigger
• Optimización de Rendimiento Web
• Gestión de Assets y Recursos
• Diseño y Prototipado con Figma
• Metodologías de Desarrollo
• Accesibilidad Web Básica
• Uso de Inteligencia Artificial en Desarrollo
• CSS y Estilización (Tailwind)
• Debugging y Solución de Problemas

Transcript excerpt

que este es el Figma. Vale, lo tenemos por aquí y vamos a empezar desde el principio porque tenemos que hacer muy muchas cosas. Vamos a ver hasta dónde nos va a dar tiempo. Yo creo que voy a empezar como de arriba a abajo, ¿sabes? Vamos a empezar directamente. Lo que vamos a hacer es simplemente eh voy a poner eh voy a empezar con el loading, luego vamos a tener el giro, vamos a hacer lo de lo del scroll este con la fecha, vamos a ir de arriba a abajo, ¿vale? Hay cosas que me las saltaré porque tengo que dejarle trabajo a la gente que vamos a fichar, pero para que la idea esté ahí. Por ejemplo, no me va a dar tiempo a hacer temas de responsive, no me va a dar tiempo a hacer todos los temas de accesibilidad, no me va a dar tiempo a, yo que sé, pues a que todo funcione exactamente igual como hemos puesto en el Figma. Vamos a poner lo que serían los mimbres, ¿vale? Los mimbres para que poda…