Website Requirements

  1. Begin creating your personal website that complies with the following: STRUCTURE
    1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
    2. All pages have a header sectioncontent section, and a footer section at the bottom.
    3. All pages have a navigation/menu section 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 (4 colors minimum) and consistent fonts and text colors.
    5. All styling is accomplished with an External CSS style sheet.
  2. Have fun with the content, layout, and styling of the content, but be sure to include all of the following minimum requirements (more is OK) somewhere on your site: DESIGN
    1. Three different levels of heading elements.
    2. Paragraph elements with CSS styling applied.
    3. Ten or more images (not counting backgrounds).
    4. One ordered list of at least three items.
    5. A styled table that uses table headers, a caption, and one cell that spans at least two rows or columns.
    6. Use HTML and CSS comments.
    7. One embedded YouTube video.
    8. One Lightbox gallery (optional).
    9. Two different fonts with at least two fallbacks/secondary fonts declared for each.
    10. Font-style, font-weight, and text-decoration styles used at least once.
    11. One background image.  At least one use of the background-repeat property.
    12. Four Hex color codes (background or text).
    13. Two floated elements and the floats later cleared.
    14. Two external links with CSS styles defined for all four link states.
    15. Padding, border, and margins declared for at least two elements, using CSS shorthand.
    16. At least one instance of using multiple CSS selectors in the same declaration.

Fan Site – Sitemap

Objectives:

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

Sitemap

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.


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

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

  • Collect resources to be used to create the fan website

Research

  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.

Final Project – Fan Site

A Fan Website

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

  • Create a multi-page fan website

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.

For example, a website about the Maroon 5 might include a brief biography of the band, a list of their albums, links to YouTube videos of their performances and a timeline of significant moments in their career.

It should reflect your personality and sense of humor.
When the project is complete, you will present it to the class.

Requirements

  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
  2. Sitemap – DUE December 21
  3. Wireframe – DUE January 3
    • Two different ideas
  4. Design (Photoshop/Image editor file)  – DUE January 10
    • Five pages
  5. Coding
    • One External Style Sheet
    • Directory Structure

Dates are subject to change.

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

MP3 Exam – January 17, 2019

CSS Tables Exercise

Objectives

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

  • Populate a table with data
  • Identify some different ways that tables can be styled or customized

london-commute

  1. Create a table for London Commute using an embedded style sheet.
  2. The width of the table is 800px.
  3. Table title: London Commute.
  4. Colors: #b1cc7f, #d8e1c6, #91c4d5, #66a8be, and #d6eaf1.

Filename: Last Name-First-Name-CSS-Tables.html
Upload the file to the Google Classroom > CSS Tables.

Please click TURN IN after you submit.

Due Tuesday, December 18, 2018.