McKay High School Web Design II Class Site

Capstone Pix

Capstone Project - All About Me

You have now gained experience with the 8 principles of design and 1 and 2 column layouts. Your CSS skills have been expanded, you have played with HTML 5 a little, and you have dabbled a bit with PHP. Additionally, you have seen and worked with on-line editors and identified pros and cons as well as observed how templates are set up with those tools. Finally, you have 'played' with JavaScript and learned a little about the power and functionally that tool can add to a website. With this broadened base of knowledge, you are ready to put things together in a final web site project. A capstone is the pinnacle or summation of what you have learned. Do your best to include all you have learned and design a website that you will be proud to show a prospective boss, or a college admissions officer!

The Project Details

You now are free to design a site about you. Your website should be your creative masterpiece. You may use either a one or two column layout, drawing on the template you created earlier, or create a new design that fits your style. The expectation is that this project should NOT look like the other work you have other words, be creative and apply many of the new skills you have learned. There are a few specific requirements, but you have a lot of room to inject your own ideas. Have fun and let the creative energy flow! Be the ultimate web designer!

You will need to include the following:

  • separate CSS page(s) which must be neatly organized and easily understood
  • at least four pages that are clearly interconnected (they belong together)
  • a distinctive header that reflects you. Can be on the front page only or on all pages.
  • graphics of some kind, other than the header, on each page - at least one that you create using Photoshop
  • at least three (3) HTML 5 elements
  • use php to render some part of the site
  • personal information about you, your family, hobbies, dreams/hopes for the future, fears & successes, current & future education plans/dreams, and any other interesting facts about you.
  • a well designed navigation menu linking all of the pages together- with consistency across the site

Using these specifications create a web site that would make you proud. Keep in mind design techniques, and the friendliness/useability of the site. The site needs to be welcoming and appealing.

Total Points: 100

  1. Design: 15 points
    • 3-Contrast
    • 3-Balance
    • 3-Unity
    • 3-Ease of use
    • 3-Eye appeal
  2. Graphics: 5 points - (Fit with content, size, & placement)
  3. Header: 5 pts
  4. Navigation technique: 10 points
  5. CSS: 15 points
  6. At least 4 well-designed pages: 20 points (5 points per page)
  7. All required elements & features: 15 points
  8. Well organized & managed folders for the project: 15 points
Extra credit (up to 10 points) can be earned by incorporating one or more of the following:
  • Javascript of some kind
  • Canvas or SVG elements in HTML 5

Proficiency Scoring:

100-83 = 4
82.5-66.5 = 3
66-50 = 2
less than 50 = 1 'F'

When you finish, upload your capstone folder to your space on the server (mckayweb/username), add a link to your index.html in the root directory, and then send me an email to notify me that your project is completed. The email address is:



Contact the Teacher | ©2012 McKay High School