I occasionally teach a JavaScript class that has a mixture of students, some of whom are specifically interested in web design, and other are more interested in graphic design.
The challenge is to put together a class that gets the web students the experience they need with JavaScript, while also providing the more design focused students an experience appropriate for them.
As a result, the class has a lot of options for both groups to explore and experiment with interactivity, interaction design and common design patterns found on the web.
This particular page about kittens, besides having lots of really cute pictures of kittens, demonstrates the types of skills students learn in the class, as well as provides an overview of some common design patterns mentioned above.
You can check out the full completed project here:
Image sliders are all over the web, and frequently used for the wrong purpose. This page is using the excellent flexslider script to create a complex slider with animated call to action and header text in the slider.
We build all sorts of slideshows and image sliders in this class, but this particular solution is very robust and fairly easy for anyone with basic HTML and CSS skills to implement.
The real gem of this project is the kitten acquisition form. No one enjoys making forms or programming form validation, but it is a very important thing to know how to do, as it has a big impact on users of your website.
This form has the added benefit of including a fully functional kitten affordance calculator.
The form validation is provided by the excellent jQuery form validator plugin, which allows for a great deal of customization.
This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.
I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.
