I am actually really good at deadlines. But when there is no deadline - that can be a challenge. My old Flash website was in urgent need of updating for a LONG time. I finally mustered up the energy to redo it and decided to make it my first try at Javascript programming. I think the best way to learn something is to set yourself a goal, then jump in, muddle through and figure it out.
This website redesign took an embarrassingly long time (I don't even want to say how long this has been on my to-do list), but now that it’s mostly done I can do some basic javascript and jquery programming (with the help of advice, demos and tutorials online at sites like Stackoverflow). Before this, I didn’t have a very good handle on HTML. I used to be able to get by in the past by just copying and pasting code without having to type it myself. This time I forced myself to type code and am so much better at it now.
The Process of Redesign
I found a useful tutorial on Codrops and used this code as a starting off point. I found a thumbnail scrolling plug-in at Malihu Web Design that functioned the way I wanted it too. Then I had to figure out how to pull it all together. This took me a reeeaaaallllly long time. Having worked with authoring software like Flash and Director in the past, I am familiar with Actionscript and Lingo programming, but it was slow-going.
What I needed to figure out
- Getting a grasp on accessing and manipulating HTML elements on the page with javascript and jquery.
- Calculating how to place each portfolio image of differing sizes depending on mouse location, then make it scrollable with mouse movement.
- Getting the forward and back button to navigate the 2 different thumbnail scrollers.
- Getting the layout to look the way I want with css3
Lightbox function
Some tips for do-it-yourself beginners
- Decide what you want your website to do and then figure out how to do it.
- Don't try to learn everything about Javascript at once. Set yourself a concrete goal. In the process of figuring it out you will learn a lot more than reading books about how to program in Javascript.
- Force yourself to type all the code. It's tempting to just cut and paste and tell yourself you know it, but forcing yourself to type it all out will make you learn it better.
- Sometimes drawing diagrams help. I had a tough time figuring our how to center and place the displayed image correctly. It got really confusing with margins, padding, window height, header height, display area, mouse position, different image dimensions.... I messed around with the numbers forever, got really frustrated, then resorted to drawing it out and labeling all these dimensions to clear my head. After seeing all the dimensions drawn out I suddenly knew what I had been doing wrong.