404 Error Web Page
HTML/CSS animations
Adobe Illustrator, Dreamweaver
I was assigned to create a 404 Error webpage using CSS animation. Being that the brief stated to use CSS animations, I was excited to code a webpage, but nervous because I hadn’t had experience with animations in CSS web coding before.
I started by learning the basics of CSS animations from my mentor. I then dove deeper and played with animation code in Adobe Dreamweaver to see test the limits and rules of CSS animations. By doing this, I was able to come up with a design that would work perfectly in this format. My design was of a Magic 8 Ball that would shake and change answers.
Originally I was going to have the ball flip between answers, but for my first time doing animations in CSS, I decided to make it a bit simpler
I was able to accomplish this by first creating all of my art assets in Adobe Illustrator. I named each layer to help me later on during coding. I then converted this art to code with the help of Illustrator’s SVG code function and pasted it into Dreamweaver. Now that my art was converted to code, it was time to animate.
Animating solely with code was tricky, but I managed to accomplish what I had in mind by troubleshooting again and again when things didn’t work as intended.
The biggest challenge I had was that I couldn’t figure out how to scale the animation up so that it wasn’t so small on the webpage. This was also a problem because it caused the animation to only take up half the screen when viewed on mobile.
To fix this, I set the maximum and minimum width of the Magic 8 ball to be the same number, and the same with the height. The number I settled on made it so that the text would be readable and the whole thing would be visually pleasing. I also set the position of the Magic 8 ball to “fixed” meaning it wouldn’t change positions no matter what screen size the page is viewed on. I then centered the design and viola; The 404 Error webpage was complete! I received an A on this project and my mentor had great things to say about it!