Skip to content

Project 3 - Part 1

Directory Structure

  • Create a new folder called project03
  • Create 3 subdirectories for images, styleSheets, and validations

HTML Documents

Four webpages (HTML pages) must be as follows. Three names of the pages are up to you, but they must contain the following:

HTML page Description
Homepage Must include and overview of the group or organization with images, must be index.html
Join Us Must include a form for users to join the group or organization, can be named differently
Contact Us Must include a form for questions and comments, can be named differently
Student Choice A page of your choosing that fits your group or organization, can be named differently

Based on your topic, these pages may be altered to fit your organization. For example, if you are working on the local band website, you may have a "Become a Fan" page for the "Join Us" page.

CSS Documents

  • Create a main.css document to be used for styles that are on every HTML document.
  • Create a style sheet for each of the HTML documents that will be used for individual page styles.

HTML Code

  • Copy the HTML starter code into each of the HTML documents and modify the comments
  • Create unique content for all <title> elements
  • Create an <h1> element on each page with a page heading.
  • Create the main navigation for each page that allows you to navigate to each page on the website
    • Your main navigation should be identical from one page to the next

CSS Code

  • Copy the CSS starter code into each of the CSS documents and modify the comments.
  • Connect each of the CSS documents to the corresponding HTML document. Validate that the connection is set up by checking that each page has a color background.
  • You will want your main.css stylesheet to be listed first in your HTML document
  • No styles need to be created for phase one.

Validation (HTML & CSS)

  • You will not need validation files for Part 1, but you should still be checking the HTML through the validator for any errors

Submission

Part 1: Reflection

Project 3 Plan

Having a plan of attack for the last project is important as completing the project next week will give you time to make any corrections before the end of the semester.

  1. Locate the submission link for Project 3 - Part 1 in Brightspace (Module 3 > Week 14 > Project 3 - Part 1).
  2. Click on Create Submission
  3. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the textarea that appears under the Create Submission link.
  4. Answer the reflection questions.
1. What is your plan for the completing the remaining parts of Project 3 on time? For example, how are you breaking down the project into manageable tasks? How are you allocating your time? How will you handle potential obstacles?

Part 2: Upload .zip

  1. Compress your entire project03 folder to a .zip (zipped) file.
  2. Do not zip the projects or Web Development folders.
  3. You should have the follow files/folder in the zip file:
    • images (folder)
    • styleSheets (folder)
      • 5 CSS files (minium)
    • validations (folder)
    • index.html
    • joinUs.html
    • contactUs.html
    • studentChoice.html
  4. Click on Upload Files (under the Create Submission textarea) select Browse Local Files.
  5. Navigate to your .zip file and click Add
  6. Click Submit