In no order this is what I have been up to:
The Front End course has felt like way more of a challenge than the Web Design one for me as I have quite a solid foundation in design so there was a few nice new HTML and CSS information I picked up but the rest was more of a recap.
Robbie’s Website Design and Implementation
The bulk of Robbie’s website is now complete. I made the design mobile first by creating the CSS for mobile screen sizes first then scaling up with media queries.
Desktop View (with link hover effect shown)
Things I need to work on:
I need to add in a few more media queries for max screen width so it doesn’t scale too large and review my current media queries to make sure they are all working nicely. I also need to add in the footer.
The full sized picture and text felt like too many elements on smaller devices so by adding the picture in a circle it increased the whitespace and gave it room to breathe.
Things I need to work on:
From a usability point of view, I need to figure out if there is a better way to display the links on a mobile device as the mouse hover animation doesn’t work with touch.
Little Red CSS animation test
I decided to do a wee test to start playing with CSS animations which was very exciting!
Here is my progress: Little Red turns her head
I used the assets I created for my Little Red Riding test to created a CSS keyframe animation. My goal in time would be to get my CSS animation to the same stage as my After Effects version. So it loads in the web and will eventually look like this:
Little Red Riding Hood from Leanne Thng on Vimeo.
I also figured out how to get this working on Github pages.
The old parallax sample I wrote about a while back had a few issues I discovered when looking back over it. The main problem was that it was clipping some areas when the mouse moved around the screen. After learning more about CSS selectors I was able to fix it up and it works a lot better now. You can see it live here: Parallax Sample
The code on my website is now mobile first. It was a bit of a confusing process changing existing CSS into mobile first CSS but it was fun diving back into it and also got a chance to tidy up some of my old code after learning some new techniques. There shouldn’t be any noticeable changes on the website itself but it should load a wee bit faster on mobile devices.
So that about covers my month or so, it has been pretty busy and all work has been done in my spare time as I am still animating for Maia during the day.
My plan is to finish off the Web design track and continue the Front End Development one, I am around 40% complete at this point. 😀