Personal Website Project

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

After this lesson, you will be able to:

  • Create a multiple-page personal website
  • Use website design guidelines to create a user-friendly website

Overview

Create a personal website. This site can be about you or about something you are interested in – say a favorite band, actor, or video game. Alternatively, you may create an organizational website for a company either that you own, or for an organization that you would like to create. Satire is perfectly acceptable. In your website, create at least 4 pages of HTML. These pages should be organized with internal navigation links between the pages. Also, it should be clear on the home page what the website’s purpose is (i.e., band tribute page, personal home page, company website, etc.).

Have fun with this assignment! Make a page about something you enjoy, something you find silly, etc. Make something that you would be proud to show your friends.

Instructions

  1. Create a new folder called Personal Website.
  2. Copy the Skeleton from the class website and paste it into a new Notepad file.
  3. Save the file as index.html. Make sure this file is saved in your Personal Website folder. This will be the home page of your website.
  4. You must use an external stylesheet for your website so that the same styles will apply to every page. Create a new css file in Notepad++. This is where your styles will go. In your index.html page, add the following line inside the <head></head> section of your website:

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

  1. Make the background color of the body something other than white.
  2. Choose a font for your website and put this in your body { } style rule.
  3. Create a div that is centered and 800 pixels wide. Make the background of this div white.
Middle div
  1. Inside this middle div, create four other divs that are 100% wide. The first should be tall enough for a header, the second will contain your links, the third will include your main content, and the fourth will be your footer:
Header div
Links div
Main content div
Footer div
  1. In your header div:
    1. Use an image as the background for this div.
    2. Put the title of your website inside of an <h1></h1> element. This heading should be at least 20 pixels from the top, float:right, with right padding of at least 20 pixels. You may give your heading additional styles if you wish.
  2. In your links div:
    1. Create a table with one row and four columns. Each column should be 200 pixels wide. Text within each column should be centered and have some top padding.
    2. Each column should contain a link to another page of your website.
  3. In your main content div:
    1. This is where the main content of your pages will go. Each one should have at least one heading, one paragraph, and one picture.
    2. You should apply styles to headings, paragraphs, and images to create your own look for the website.
  4. In the footer div:
    1. Put a copyright notice: © [year] [name]
  5. Your website must contain at least 4 XHTML pages. Decide what you’d like on each page. Copy the index.html template that you created to make these additional pages. (Once you’ve designed your template and added the links, select File > Save As and give each page a different filename).
  6. This assignment has the following requirements:
  • There must be at least 5 images on the website, and there must be more than one page with images.
  • You must use at least 1 table somewhere in the site other than the tables used to create the layout.
  • You must use at least one ordered or unordered list somewhere in the site.

Rubric

Component Possible Points Score
The purpose of the website is clear and the website fulfills its purpose. The style for the website is creative and unique. 5
The layout of the website is correct. Divs and tables are used properly. 5
An external style sheet is used and each XHTML page is linked to the style sheet 5
All requirements for the heading div have been met. 5
All requirements for the links div have been met. 5
All requirements for the footer div have been met. 5
The website contains at least 5 images 5
The website contains at least 1 table other than the one used for links. 5
The website contains at least 1 ordered or unordered list 5
There are no errors in the XHTML or CSS code 5
The project was submitted on time (20% off for each day late)
Total Score 50

Download the updated version of our Introduction to Web Design Curriculum.