This page includes a list of the nine hands-on tutorials for a 1-semester course in Web Design. |
Tutorial 1 • Getting StartedHow to make a simple web page using tags, text, photos, and styles, and upload to web server. Tutorial Files |
Tutorial 2 • StylesHow 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 • TablesHow 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 ListsHow to create and style navigation menus using unordered lists (bullet points). Files |
Tutorial 5 • Optimizing ImagesHow to edit, save, and optimize images for the web, including JPEG, transparent PNG, GIF, and SVG. Files |
Tutorial 6 • FormsHow 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 • VideoHow to create, edit, and save video files for inclusion in web pages. Files |
Tutorial 8 • AnimationHow to create an animation in Flash and save in HTML5 using Google’s free “Swiffy” plugin for Flash. Files |
Tutorial 9 • JavaScriptHow to create animated effects with the jQuery library for JavaScript. Files |