HTML and CSS – Web Page Design Final

Part one: Review. Log into codeademy and select “catalog” in upper right and review/complete (again) “Learn HTML”,  “Learn CSS” and complete “Make a Website”.

Part two: Build a Web Site from scratch for a department at South Ridge School – Choose from the following: Art, Music, English/Foreign Language, Math, History, Geography, Science, Music or Phy Ed.

Working in Notepad create a “index” page and three additional linked pages (example_ Art Department could have an Elementary School, Middle School, and High School or Drawing, Sculpture and Printmaking).

Create a  “yourlast name”_FinalWebSite folder in Digital Art

Keep everything related to your web site:



All .jpegs in the site must be in this folder – three images (.jpgs) per page

Narrative describing the page’s intentions.

Each web page in your site must include a navigational table. All the pages should be be similar layout – visually connecting the site. Use no more than two fonts and a specific set of colors (+ black) throughout.

Table  Minimum table for front page: Navigation Bar, Title of the Page, Sub headline and paragraph with information, Embed a photo or video

  1. Title of the page
  2. Sub head (brief description of the page)
  3. Navigation Bar with four hyperlinked pages – Home, page 1, page 2, page 3
  4. Each page should have a brief description (+/-200 words) of the page’s subject with three+ descriptive images. (One photograph from the actual department on main page with 2+ additional images supporting the page.) Each page needs to have a navigation bar linking it to every other page in your site.

CSS should indicate font type and color, background and foreground color, alignment,

Images should be original (if at all possible). Take them on a school camera. Download and resize using CSS stylesheet.

When done save site folder – “Digital Art” folder on your computer (in My Documents) in a folder marked “Final Web Page”. This should hold the .html files, photos you used and .css file. Keeping everything in the same folder. If anything is out of alignment your site will not work. By keeping everything in the correct folder – never “move” things after you have linked them) you allow everything to remain connected.

Turn in by sending an email to by midterm letting me know your web site folder is complete.