Fan Site – Code


  • Create a vertical navigation or horizontal navigation
  • Use the background property
  • Nested and float elements
  • Create layers within CSS


Create a fan website containing a home page and four additional pages.


  • Directory structure
  • External Style Sheet


Begin creating your personal website that complies with the following:

  1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
  2. All pages have a header section, nav section, content section, and footer section.
  3. All pages have a navigation menu that includes links to all pages on the site.
    The navigation menu can be horizontal (between the header and main content area) or vertical (left side of the main content area) but must be consistent for all pages.
  4. All pages use the same color scheme/palette and consistent fonts and text colors.
  5. All styling is accomplished via an external CSS style sheet.

HTML and CSS  – DUE Friday, January 18, 2019 before 10 pm.

  • Homepage (index.html)
  • Second page (e.g. boi.html)
  • Third page (e.g. boi.html, name the files accordingly)

Upload sharable link to Google Classroom > Fan Site – Website

Folder name: Last Name_First Name-FanSite.

If you submit after the deadline it will be an INCOMPLETE

Fan Site – Design

A Fan Website

At the end of this project, you will be able to:

  • Design multiple pages for a fan site
  • Optimize images for the web in a photo editing application (Adobe Photoshop)
  • Crop and or re-size an image

Website Overview

Create a fan website containing a home page and four additional pages.
This site can be about your passion for music, movies, books, games or other types of entertainment. Let it be something you are interested in.


  1. Design (Photoshop/Image editor file)  – DUE Thursday, January 10, 2019
  2. File names: projectName-home.PNG or JPG, projectName-gallery, etc.
    (eg boxing_home, boxing-gallery)
  3. Folder name: Last Name_First Name-Design

Setting up the Photoshop Document

Choosing a Color Palette/Scheme

Dates are subject to change.

Project DUE – January 18, 2019
I will not be accepting anything after the deadline.

MP3 Exam – January 17, 2019

Fan Site – Sitemap


In this part of the project, you will be able to:

  • To create sitemap to give an overview of the navigational structure of the website


A sitemap is a schematic for a site showing the pages and linked relationships among them.This document gives the designer an overview of the site, which allows designers to understand the breadth of the navigational needs of the project:

  • What pages need to be reached from every page?
  • Is there a target page that the client wants to lead people to?

All of these questions can be answered by the examining the sitemap.


Create a sitemap for your Fan SIte.
Information should be taken from your research description.

File Name: Last_FirstName-FanSite_Sitemap (PDF)
Upload the file to the Google Classroom > Fansite – Sitemap.

DUE December 21, 2018
5 points will be deducted for every day it is late.

Fan Site – Research

At the end of this project, you will be able to:

  • Collect resources to be used to create the fan website


  1. Research – DUE December 20
    • Part 1 – Short Description of Concept/Idea
      Two or more paragraphs stating your topic, the sections/categories
      (how you are braking up the information)
    • Part 2 – Research of Images
      Place images in a folder (minimum 20)
      Save links (sources/citation/copyright) to images to use at a later date
Place the description file (PDF) and images file into a folder
Folder Name: Last_FirstName-FanSite_Research
5 points will be deducted for every day it is late.