... part of the Web Site of George North -- Back to Site Index
Webpage Design and Development, CPST-2400-10
with HTML5 and CSS3
Fall 2019

Assignment - Week 3
Key Terms

CAMshots, Tutorial 2 (Example WebSite)

This is a graded assignment, worth
30 Points

The purpose of this assignment is:

First, learn to design WebSites. The Web represents a new Writing Space. The HyperLinked environment of WebSites requires planning beyond just content. Storyboarding is one tool that will help with this task.

Second, realize that the World Wide Web and its HyperLinked environment provide a space where you are all-at-once author, publisher and programmer. This is a responsibility way beyond writing an essay. Generally, reading a book happens from beginning to end. A WebMaster has no way of predicting how visitors will browse their WebSies. Forget about seeing the cover first. Organizing your WebSite is hyper-important. Easy of navigation a must.

Third, to embrace being a part of the World Wide Web. There is no need to borrow someone else's content because you can simply link your site to theirs. A traditional Citation stands alone. A link to the original work provides 100% context. If you learn "Website Design and Development" well, than it is a new Writing Space. A well designed WebSite gives visitors to ability to write what they read. By this is ment there are multitudes of paths that visitors can take browsing the content of your WebSites. It isn't unreasonable to believe that many visitors will take unique paths through your site. If unique paths happen, that can mean that the reader is writing.

Grading Rubric -- every Assignment will have a Grading Rubric
Item#  Points  -  description
  1. 10 points - Canvas Discussions for Week 3.
  2. 15 points - your CAMshots WebSite looks and functions (working links) just like this ... follow this link
    now see how the WebPage looked just before applying the external style sheet. You will gain a better appreciation for this as you read Tutorial 2 and write yourself the HTML for CAMshots WebSite. It is then that you will discover that the frist design element of a WebPage is to separate content (HTML pages) from the display of content (CSS Style Sheets).
  3.   2 points - use a new folder on CPST WebServer for your CAMshots WebSie. See Guidelines for Naming files and folders. For example, you can make a folder on CPST WebServer named "Week_3". You can have a folder for every week. You will eventually have 100s of files on your WebServer space. It will be much easier on you to keep them organized. It will be even easier if you name folder on your own computer with the same names as folders on CPST WebServer.
  4.   3 points - all your pages pass W3C Markup Validation Service. W3C valid HTML and CSS will be a graded item of all future WebPage assignments.
30 points - TOTAL

Let's begin

Did you read this week's news yet? There are links at the top of this page. There is a new Assignment WebPage every week, and a new News page every week.

Canvas Discussions

•• Read this regarding Self-grading your Canvas Discussions ••

There are several new Canvas discussions setup in the Discussions section of Canvas. Each discussion should be self-explanatory. The name of each discussion begins with "Week 3", indicating that it is to be used during Week 3 of class. See our SiteIndex WebPage for a complete list of Weeks and Dates for all Assignments.

The help discussion is "Week 3 - Help". Use this to ask any and all question you have.

You may add as many threads to these discussions as you like. Each time you substantially participate in one of these discussions you earn 3 points.

CAMshots WebPage

Remember Course Materials? Did you downloaded the Data Files for Students? If not, you want to do that now

Once you have your copy of Data Files, inside the folder named "tutorial.02", inside another folder named "tutorial", you will find the nine (9) files you need to complete this assignment. The file named "camstyles.css" is the CSS style sheet for this assignment, and you will use it unmodified. There is a file named "modernizr-1.5.js" that you will not need. You will realize that we need a modernizr, but we will all use (link to) a version of "modernizr.js" on George's WebSite. Using this file is important, this is why all of us will link to the same version of modernizr.

That's it. Your turn. Start Tutorial 2 now. Write HTML for CAMshots as you read.