HW01: Planning and Starting a Site due Tue 05 Sep 13:20


In this assignment you will practice producing a written plan for a site, selecting a color theme, gathering content, and putting the content on the page.


In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.

So, do this assignment in a way that demonstrates integrity, develops competence, is correct, and honors God ... because what we do matters!

Allowed and Disallowed Resources

In completing this assignment you MAY use/access the following resources:

You may NOT use/access:

Failure to abide by these guidelines will result in a zero for the assignment and the incident will be reported to the university provost as a violation of the university academic integrity policy. A second incident of academic dishonesty (whether from this course or another computer science course) will result in an F in the course.

Step 1: Choose a Topic

The site you choose to design in this assignment will be revisited multiple times during the semester. The “topic” for the site must be something that exists (I don't want a site dedicated to imaginary widgets, for example). Examples (not a complete list):

So, step 1 of this assignment is this: decide what you want your site to be about.

Step 2: Choose a Color Scheme

Often sites are built around a color scheme that makes use of so-called complementary colors (i.e., those that appear opposite one another on a “color wheel”). To choose a color scheme and to get ideas for your own site take a moment to visit a variety of sites. Designers call this process “finding inspiration”. Find three sites you particularly like from an aesthetic standpoint and save their URLs for later use.

There are several ways to select a color scheme. Try as many of these approaches as necessary until you have some colors you feel comfortable with:

Step 3: Design the Site

Your plan should include at least two pages (a home page and at least one additional page). For each planned page of the site you should create (on paper) a sketch of your plan. Take a look at this site for some examples of the kinds of sketches I am envisioning: https://www.digitaldesignjournal.com/sketched-website/.

Your plan should incorporate at least 3 images. These images should not be copywrited and should not be links to other web resources. They should be photographs or images that you have personally created (e.g., by taking a picture with your smartphone) or been given permission to use. They can include public domain images as long as you use those images in accordance with the author's requirements.

Your design should include a menu of some sort as well.

Also, you should make note on your sketch the colors (background, foreground, headers, links, etc.) that you have selected in the previous step.

To complete this step you will produce a paper sketch of your home page and of your second page. Also, you will create a separate title page that names the title of your site and a short paragraph explaining what the site is about. These paper sketches will be turned in during class, so you may want to take a picture of them for your records.

Step 4: Make a Skeleton Site

In the hw01 directory of your repository create a new document called home.html that contains titles, text, links, and photos that you will want to be on your home page. In addition, at the bottom of the page, create links to the sites you used as inspiration for your color scheme.

NOTE: Your page should make use of inline styling commands to implement your chosen color scheme. Beyond this don't spend much time giving attention to styling your page or trying to get sections in the correct place. We will focus on position of elements and styling in coming weeks.

IMPORTANT: On your home page I don't want lorem ipsum or placeholders. I expect to see the actual text that you want to have on the homepage of the site. This will require some time on your part to create the text you want on the home page and to procure photos and other resources you want to have on your site.

There is no need to create you secondary page(s) for this assignment.

Step 5: Turn in Your Work

On the due date bring your sketches to class and turn them in. Also, commit the work you did on home.html to your repository and push the changes to bitbucket.


Your work will be grades as follows:
Title page 3 pts For full credit your title page should include the name of your site and a paragraph describing its purpose and scope.
Sketches 12 pts For full credit you should have reasonably detailed sketches that indicate the approximate location of the required elements for both the home page and at least one additional page. The sketches should also indicate RGB colors selected for various elements.
Skeleton Home 9 pts For full credit your home.html should contain all the elements of your design (but not necessarily positioned or fully styled. Actual and complete text should be in place and at least three photos/images for use on the site should be included. You should make use inline CSS to provide text and background colors at a minimum.