Caitlin BaileyFront End Developer

This project was to update the look & feel of the Web Advanced website and also to finally have something mobile friendly to show off our capabilities.

Web Advanced website screenshot

View Website

  • CMS: None
  • Browser Support: IE10+, modern browsers
  • Type: Responsive website

About This Project

This project was my baby for a few months. I worked on it between client projects and whenever I could find a spare moment. I knew we were not requiring legacy browsers so I also wanted to try my hand at a few things I had been putting off, such as SVG and flexbox. It turns out that the internet has not been lying to me and both of those things are awesome.

The main designer on the project is basically obessed with all things animation and effects, so I had my work cut out for me. If I'm being honest though, for the most part it was a lot of fun. In the process I did unfortunately realize that I am rather susceptible to certain kinds of animations, as far as motion sickness goes. After working on the Work page, I felt horrible for the rest of the day and didn't really start to recover until it was almost bedtime. The finished product doesn't have that effect on me, but the experimenting with different animation certainly did!

Something else I'll be getting out of this site that I haven't been able to do much of: Because this isn't a client project, it doesn't have precedence over client projects... but at the same time, because it isn't a client project, I can spend my spare time on improving it and making it even more awesome. This is something I haven't really had for a long time, and it's just been really fun to be able to iterate on something for once, instead of running into a problem where I would like to have time to redo something and it just isn't in the budget.

Lessons Learned

  • Flexbox is awesome! It can help you make layouts in 15 minutes what previously might have taken hours.
  • SVG is also awesome! I used gulp to make a SVG sprite for all of the SVGs on the site
  • Another thing I experimented with a lot was different interactions when you hover etc. The designer really wanted to show off some fancy effects, so I got to play around with a lot of nice transitions.