Repeating the basics is always a great idea!
We started off learning the basics and state of the art practices, like 'figcaption' and 'flexbox'
A narrow guide through my process:
Make a robot dance!
Our task was to visualize a song in a web project under the topic of «Dancing with Robots» The song «Feel Good Inc.» inspired me every since I first heard it as a kid. I wanted to replicated the combination of 2D and 3D animation with real video footage on my website.
Getting Loud
The first step was getting the song to play. After watching a video by Ruth John on the WebAudio API I implemented the technology as a boombox on my song page.
New horizons
Learning new techniques from my teachers everyday, I used my newly gained skills to create this VHS-style effect to replicate the mood from the video. Turne out great, I think!
Waves of Difficulty
Visualizing audio and therefore analysing it, proofed to be more difficult than expected. I experimented with multiple technologies costing me alot of time in the end. Nevertheless, it was an great milestone when I then managed to implement a waveform graphic via the WebAudio API.
Robot Assembly
The next step was combining the different styles into one robot/page. I used to a guide by our professor Hanna Züllig to get more infos from the sound, directly into CSS. Adding a couple more features to make my website more interactiv. In the end time was scarce and things of more complicated than expected. But I guess this just shows all the crazy, colorful and creative possibilities web offers us today.