Video Tutorial: Using Foundation to Build a Responsive Website

I have created a video that goes over how to use the responsive framework, Foundation, to quickly build a responsive layout. This can be a great way to quickly build the basic layout for your portfolio site.


To login to Lynda, go to Course Home > Academic Resources.
Click the Library to launch it.
Click the Web Design and Interactive Media button
Scroll down to the “Industry Information” section and click the link.

Tagged with: , ,
Posted in IMD311, Responsive Web Design, Tutorial

Video Tutorial: jQuery Image Rollovers

The following video tutorial shows you how to create image rollovers using jQuery. The technique described in this video is based on the same technique from this site:

For a better viewing experience change the quality to 720p and watch in full screen mode.

Posted in IMD312, Tutorial

Presentation: Current Trends in Web Design

On Thursday, July 11, 2013, I gave a presentation titled “Industry Overview: Current Trends in Web Design”. In the presentation I discussed some of the popular trends in web design for 2013. Some of the topics include responsive web design, single page layouts, flat design, infinite scrolling, and fixed header bars.

Posted in Presentations

Presentation: Responsive Web Design

Responsive Web Design is a popular way of creating a single site that will work across multiple devices instead of having to create completely separate sites for each device. Use responsive web design techniques to build sites that automatically adjust themselves based on the screen size of the user. This is a relatively new way of creating a single site that works well across multiple devices: desktops, tablets and mobile phones. Includes HTML, CSS, media queries, fluid grids, flexible images, etc.

Presentation date: 3/27/2012

View the recorded presentation here

Posted in Presentations

Presentation: Using Developer Consoles (Firebug) for Web Development

I recently gave a webinar on using Developer Consoles, in particular Firebug. In this webinar you will learn what Firebug is and how it can help you troubleshot design and layout issues, debug JavaScript code and analyze network usage and performance.

You can fast forward to minute 6 of the video. That is when it really begins. The first few minutes were me dealing with some technical issues.

Download Firebug – Be sure to watch the Introduction video on this page.
Posted in IMD312, Presentations

Links – Absolute vs Relative

Understanding how web links work is very important when it comes to creating web pages. This includes links that you create to images (through the <img> tag), external CSS files (<link> tag), external JavaScript files (<script> tag), and to other web pages (<a> tag).

In this video below I review the two different types of web links: absolute and relative. I go over the differences between the two and show how to properly use them.

The concepts shown in this video are especially important when it comes to working with jQuery plugins. All jQuery plugins require you to add script tags that point to the source code of each plugin. If you do not link to those files properly, then your plugins will not work.

This video is several years old so you will notice that the Dreamweaver interface looks a bit dated. However, all of the concepts in this video are still valid today. Feel free to stop watching after the first 10 minutes. The final 5 minutes of the video go into PHP.

For a better viewing experience change the quality to 720p and watch in full screen mode.

Posted in Dreamweaver, IMD312, IMD401

WordPress Installation on Student Server

In this video tutorial I show how to setup WordPress on your Student Server. Installing WordPress is very easy. The hardest part is waiting for all of the WordPress files to upload.

For a better viewing experience change the quality to 720p and watch in full screen mode.

Additional Installation Resources

Database Setup

One of the first steps to setting WordPress up is to create a database that will host the WordPress tables. You can use an existing database if you wish. If you need a refresher on creating a database on the Student Server you can view the PDF file I have attached or watch the video tutorial here:

It’s installed now what?

Once WordPress is installed I would recommend reading the following guide on which explains how the Administration Panel works.

Posted in IMD331, WordPress

IMD331: Sticky Contact Form Tutorial

For all students in IMD331: Web Site Development II, here is a video tutorial for Week 2 Assignment 3, which is the sticky contact form with PHP validation.

I have also uploaded the files I used in the video. If you use the files for the basis of your assignment, please make sure you make some modifications to the form, please do not just copy/paste the code I have provided. :-)

Download zip file:

Posted in IMD331

Using jQuery to add a Twitter Feed to Your Site

This video goes through how to add a feed of your tweets to your web site by using jQuery.

You may find the video confusing if you are not familiar with jQuery. If you want you can simply use the code in the live demo page and copy it on your site to add the twitter feed without having to understand how everything works within it. Just be sure to change the twitterUser variable to be your twitter account.

If you have any questions, use the comments below.

External References:

Tagged with: ,
Posted in AJAX, IMD312, IMD401, jQuery

Video Tutorial: Include Files

Watch Video | Download Video

Example code can be found here: Include file example

Tagged with: , , ,
Posted in IMD323, IMD331, Tutorial