Brittany Bellanca | Web Design & Front-End Development

End-to-end Website with Animation

End-to-end Website with Animation

End-to-end children's website featuring animations & interactivity

Client: None

Date: Spring 2018

Skills: Ideation & Creation, Responsive Web Design, HTML, CSS Animation, JavaScript

View Site

This project was a true challenge for me. It was split into two submissions; and, for the first submission, we had to add some unique animations...but we could not use any Javascript! The theme of the site needed to be an animal - real or make believe, so I'd like you to meet Millie, the cute bunny. I decided to embrace the challenge and try to create this Easter-themed site as that my young nephew might be interested in.

Because the site is for a child or parent & child, I decided to make it a single scrolling page. Little fingers should be able to keep accessing content even if Mom looks away for a moment. Millie's eyes will occasionally blink thanks to CSS Animations. If you tap or hover over her, she'll stick her tongue out at you (my nephew's favorite activity right now).

After learning a bit about Millie, you can tap on her peeking ears to reveal her poking out from the side of the screen. This works on both desktop and mobile devices. Then, Mom can read The Adventures of Millie! For the second part of this project, we were allowed to incorporate Javascript. Now, the child can click the button and is rewarded with a new Millie Adventure!

Finally, an interactive egg decorating game awaits those who complete their reading! Helping Millie to decorate her eggs in time for Easter is an exciting addition for children users. Simply select a color then select one of the sections of egg and ta-da! A colored stripe appears! Hovering (desktop) or tapping (mobile) Millie will conclude the visit with a polite thank you message.

Want to Learn More?