Creating a Simple Template-Based HTML + CSS Site

An Approach To Making a Multi-Page Site

Getting Started

This set of tutorials will help beginners develop a basic workflow for building efficient, template-based sites using a code editor. Proprietary Dreamweaver template files are not covered here.

Building a Template-Based Website

The following video demonstrations are consecutive and chronological. To learn how to create a fluid, responsive 6-page layout with mobile navigation, watch all videos (total ~3 hours).

Please note: in the Javascript implementation demo, I tell you that you can copy and paste some javascript code. You can download the complete Exercise-4 Javascript Mobile Menu Script. This is the complete code, but when the script is first introduced in the tutorial, it is incomplete and later completed.

Note About the Videos Below

To reduce page load time, the videos below are minimized to a small scale, but you can watch them larger either by clicking the Full Screen player icon, or by clicking the YouTube player button to watch on the YouTube site. Once the video starts, you can also click the gear icon to increase the quality/resolution on faster connections.

Part 01 (14:56)

Creating screenshot images for your pages.

Part 02 (12:48)

Creating a scalable vector graphic (SVG) with Illustrator.

Part 03 (14:48)

Getting started: translating the layout to HTML structure.

Part 04 (9:05)

This finishes up the basic HTML markup for the template.

Part 05 (14:59)

Applying ‘reset’ and custom stylesheets to the template.

Part 06 (14:15)

Start styling the global “top” navigation bar.

Part 07 (14:57)

Finishing up the “nav#top” styling

Part 08 (14:58)

Styling the “section#content” area with floats, text definitions, and adding a figure/caption to the screenshot.

Part 09 (9:58)

Styling the footer elements

Part 10 (14:59)

Using media queries to keep the design responsive

Part 11 (14:09)

Using javascript and styling to hide/show mobile menu

Part 12 (14:39)

getting the dropdown menu to work with a close button

Part 13 (10:13)

Finish styling the mobile nav overlay and closing button

Part 14 (7:16)

Propagating templates for site and adding content to complete the site.