I finally passed the 50% mark of the Web Developer Bootcamp- the Udemy course I’ve been doing! There’s one more optional code-along left, and then I’ll be into the backend part of the course- exciting stuff!

I decided to work on a couple small side projects this week, spurred on by the colour game from my last post. I used Briefbox [though not totally in the way intended!] for inspiration. Briefbox is a great resource that offers sample design briefs that you can use to build up your portfolio.

I wanted to make something relatively small that would be complete, in and of itself. I chose emails because I could keep them fairly small, but would have to consider different devices, browsers, and accessibility.

I made an email wedding invitation for an informal wedding. I included the schedule for the wedding day, and a map showing the venue location. I ran into something unexpected here: google has updated the API since the last time I used it, and now requires an api key for a lot of features, like directions, so the map included simply shows the location of the wedding.

See the code here.

One feature I wanted to put to use here was scrolling animation. I thought it would be an effective use of it, though it might not be practical for an actual email, where you might want the file to be a bit lighter, and not include any Javascript [or jQuery.] In retrospect, and in it’s current state, this might be a page you reach after following a link in an email. Originally I wanted to achieve the scroll effect with vanilla Javascript, but the animation effect only worked in Firefox. After some digging I found that I could create a similar animation, but it required a comparatively lengthy amount of code to achieve the same thing with jQuery.

I’ll be making a few more pages like this- I feel like it’s good for me to get as much practice as possible, and I need to become more efficient- which only comes with practice!

Onwards and upwards!