Tutorials

This page includes a list of the nine hands-on tutorials for a 1-semester course in Web Design.

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).

Files

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.

Files

Tutorial 4 • Navigation Menus and Lists

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

Files

Tutorial 5 • Optimizing Images

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

Files

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.

Files

Tutorial 7 • Video

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

Files

Tutorial 8 • Animation

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

Files

Tutorial 9 • JavaScript

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

Files