This page includes a list of the nine hands-on tutorials for a 1-semester course in Web Design. The files should be considered as “beta” versions until testing is completed during the Winter 2015 semester.

Tutorial 1 • Getting Started

How to make a simple web page using tags, text, photos, and styles, and upload to web server.

Tutorial Files

Tutorial 2 • Styles

How to style tags with text specifications, color, alignment, dimensions, and other settings, using inline/local (in the tag), embedded/global (in the head), and external/css (separate file).


Tutorial 3 • Tables

How to import text, arrange columns and rows, and style text and photos into tables. Also how to set table attributes like border, cell strokes, background shading, margin, and padding.


Tutorial 4 • Navigation Menus and Lists

How to create and style navigation menus using unordered lists (bullet points).


Tutorial 5 • Optimizing Images

How to edit, save, and optimize images for the web, including JPEG, transparent PNG, GIF, and SVG.


Tutorial 6 • Forms

How to make forms for users to fill out on the web, with text fields, checkboxes, radio buttons, list boxes, and combo boxes.


Tutorial 7 • Video

How to create, edit, and save video files for inclusion in web pages.


Tutorial 8 • Animation

How to create an animation in Flash and save in HTML5 using Google’s free “Swiffy” plugin for Flash.


Tutorial 9 • JavaScript

How to create animated effects with the jQuery library for JavaScript.