Web Page Design I

An introductory course in website design using HTML5, CSS3 and Photoshop.

Introduction: Learning Basic HTML

The following HTML pages give instructions on some of the important basics of writing code. Click on the links to view the page in your browser.

The source code of these pages will be helpful as well. To view the source code, use shortcut Ctrl-U (windows) or Cmd-Opt-U (mac) - be aware that early versions of Explorer do not use this shortcut.

Create a basic page in HTML        More Structure

Images, Links & Lists                 Drive as Web Host

More About Links                 Include with HTML Objects

More About Images                 PHP Includes

Intro To Tables

Learn CSS

Intro To CSS                 Drop Down Menu

Ids and Classes                 CSS3 Transform

More Text and Borders

Lists and Links

Margin and Padding

Display and Position

Float and Image Sprites

Intro to CSS3

CSS3 Gradients

Challenge 1: Same Page Website

Stretch your HTML and CSS skills by creating a 2 page website where your pages are visually identical in the Browser but structured differently in the HTML and CSS.

Read the following documents for further details:

Challenge Handout

Challenge Rubric

Challenge 2: The Full-Scale Website

Our next challenge will be a full-scale website that we work on long term. This will be divided into several phases intended to mirror the design process of a professional web developer.

Challenge Handout

Challenge Rubric

Website Planning Sheet

Style-Tile Handout

Website Mock-up HandoutStyle-Tile Template