Tutorials and Plugins

During my time at The Iron Yard, both as a student and as a paid teaching assistant, I came up with a few different tutorials and code snippets to help explain concepts to new web designers and developers. Doing so helped me solidify some ideas for myself and also helped others to grasp concepts and incorporate functionality into their projects. Here are a few examples:

Intro to JS and the DOM Introduces students to the concept of the Document Object Model and shows them a few different methods of incorporating Javascript and jQuery into their webpages. It goes over some of the pros and cons of the different methods, shows some examples and links to more resources for further research.

The Image Slider Constructor is a simple javaScript constructor that can be instantiated, passing in new arguments, to create as many different image sliders as you want, each with their own array of images, containing element, transition speed and on screen duration.

Input to Output is a CodePen I put together during a live-coding exercise for the Web Design Class I assisted. The Idea was to get students familiar with the concept of storing user input from an input field and rendering it to the DOM. During the presentation a few of the more intrepid students asked me to include some alerts and simple tests to make the user experience more intuitive. I, of course, had to deliver.

Flexible Navigation was another live-coding exercise for the Web Design Class that I put together in CodePen. Using media queries and some JavaScript I showed them how easy it is to incorporate a responsive navigation into their sites.

Flexible Gallery was built in CodePen to meet a specific need. One of the Web Design Students wanted to include a responsive gallery into their final project that would show a hidden container on click and hide any other container in the gallery that was presently open. The tricky part about this was the positioning on different screen sizes.