Web Design 1 | Assignments

Summary

Num Kind Title Pts Due Submit
PG PR Google Field Trip 2 May 31 edPsu
18 HW TRN Prototype 10 May 11 JfiM7
17 HW TRN Site Map 5 May 4 o083weh1
16 HW Site Map 5 May 2 On paper
15 CL WP Startup 1 Apr 24 Check off
14 HW Promo Site 20 Apr 13 rqabyvqx
13 CL Making a NavBar 3 Apr 5 Check off
12 CL External Style Sheet 3 Apr 3 Check off
11 HW Internal Style Sheet 5 Mar 28 eciwd8db
10 HW Blog Page 20 Mar 23 migqprac
09 CL Styles Worksheet 3 Mar 20 On paper
08 HW Multi-Page Site 20 Mar 13 djo9mbdr
07 HW Personal Web Page 20 Mar 2 ckbgjzgq
06 CL Website Grid Example 2 Feb 29 Forum
05 CL Forum Registration 1 Feb 29 Forum
04 HW Personal Essay Page 5 Feb 17 iaefaxo4
03 HW Internet Search 3 Feb 13 On paper
02 HW Website Survey 5 Feb 8 On paper
01 CL Name History 1 Jan 31 Online
00 CL Course Admin 1 Feb 6 On paper
Student
Parent

Assignment PG: Google Field Trip

This assignment is only for those of you who went on the field trip to Google last week.

I would like you to answer a few questions as a reflection on what you learned at Google.

To do that, just use this link: Submit Assign P1, and answer the questions on that survey.

GRADING (Professionalism)
Survey answered 2 pts
DUE: Thursday, May 31.

Assignment 18: TRN Prototype

For this assignment, you are to mockup a prototype design for TRN Online (the online version of The Roosevelt News).

As we discussed in class, you may work individually or in teams on this project, as long as everyone on the team has a meaningful contribution to make.

To submit your prototype design, just let me know the URL of the WordPress site where your team has created the prototype. I’ll look at it and check off your work.

To do that, just use this link: Submit Assign 18, and fill in the site URL and the names of your team members. Only one submission per team is necessary.

GRADING (Homework)
Site prototype completed 10 pts
DUE: Friday, May 11.

Assignment 17: TRN Site Map

This assignment is the first step in your large project — designing and implementing an online version of the Roosevelt school newspaper: TRN (The Roosevelt News).

Begin the design process by looking at archive issues of TRN. You can find recent ones online here: TRN Archives, Volume 88.

Use this information to develop a preliminary inventory of what you think belongs on the TRN online site. Think beyond what is in the print edition! Remember that an online newspaper can be a lot more than just a paperless copy of the newsprint version.

Then create a site map report that summarizes the site architecture you have developed. Do this in the same format as the site map you created in the previous assignment. Again, use this Roosevelt CS Site Map document as a template. Download it and save a copy on your account. Then edit it and replace all the information in red to describe the TRN online site you will build.

To submit this assignment, supply your Word document and use this link: Submit Assign 17. Be sure your name is in the name of the document!

GRADING (Homework)
Site map completed 5 pts
DUE: Friday, May 4.

Assignment 16: Site Map

A site map is an inventory and graphical representation of the structure of a web site. It is used to communicate a summary overview of the main contents and organization of a web site. This is sometimes called a site “architecture.”

In preparation for your large project that you will soon start in WordPress, this assignment will give you practice in analyzing an existing site’s structure and creating a site map to describe it.

You are to choose a web site for an online newspaper and document its structure and contents in a site map. (This will also serve to familiarize you with the design and content issues of online newspapers in general, since your next project will be related to that.) You can choose a high school newspaper that has an online version, such as the Garfield Messenger, or a general newspaper like the Seattle Times or the NY Times, or even an online-only news site like the excellent Northwest regional Crosscut.com.

Study the site and make an inventory of all of its pages. Then create a site map report that summarizes the site architecture. You can use this Roosevelt CS Site Map document as a template. Download it and save a copy on your account. Then edit it and replace all the information in red to describe the site you have chosen to analyze.

To submit this assignment, simply print your sitemap report out and turn that in.

GRADING (Homework)
Site map completed 5 pts
DUE: Wednesday, May 2.

Assignment 15: WP Startup

In class today, I went over the basic concepts of a WordPress (Content Management System – CMS) site: WP Overview.

wordpress.com is a free hosting service for WordPress sites (also called a blog site). It allows you to create a site with a URL of your own choosing, such as mywonderfulsite.wordpress.com.

For this assignment, you have only to do two things:

  1. Choose a site name that doesn’t already exist and get it registered on wordpress.com.
  2. Create one blog post on this site about something you did on your spring break.

To get credit for this assignment, just show me the site and I’ll check it off.

GRADING (Classwork)
WordPress site registered & one post made 1 pt
DUE: Tuesday, April 24.

Assignment 14: Promo Site

This assignment will give you practice in applying almost everything you have learned in HTML/CSS so far. You will design and implement a multi-page site with functioning navigation and fully developed content.

You have three choices of a client for this site:

a promotional site for a big Hollywood movie
a fan or promotional site for a band or musical group
an online store for the Green & Gold Exchange, the RHS student store

Your site must include at least 5 pages, although you may add more if you like. You are free to design the content of each page as you like, but they have to be substantial and well thought out and well designed.

For the first two entertainment options, you can use an existing movie or band as inspiration and for borrowing images and linking to videos, etc. But you must write all of the code yourself, of course.

If you choose the RHS Student Store, your client is next door — Ms. Smith will give us information and requirements for what the site should accomplish.

And, if you really would like to choose a different client, talk to me and get it approved first. I’m flexible; the goal is to make something professional and realistuc.

Whatever your site choice, design and implement it with HTML and CSS, using an external style sheet for all of the CSS. Create a navigation bar also using CSS. Incorporate as much rich media (images, slide shows, galleries, videos, maps, etc.) as is appropriate.

You will be graded for this assignment in four categories:

  • Contents: are the site pages and materials fully developed?
  • Design: is the site layout and style appropriate for the client?
  • Implementation: does the site function properly (links, etc.)?
  • Coding: is your HTML and CSS code correctly implemented and readable?

To submit this assignment, compress the entire folder and submit that with this link: Submit Assign 14.

GRADING (Homework)
Contents 5 pts
Design 5 pts
Implementation 5 pts
Coding 5 pts
TOTAL 20 pts
DUE: Friday, April 13.

Assignment 13: Making a NavBar

This quick exercise will make sure you can use CSS to make a neatly styled navigation bar.

Create your own navigation bar on a web page. Your challenge is to try to exactly duplicate the navigation bar at the top of the page that you are looking at now — the one that is the secondary navigation for the site, not the main menu.

It has tabs for Syllabus, Calendar, Assignments, and Resources. See how close you can come to exactly reproducing the format and behavior of that navbar in your site.

click to access

Here is the tutorial example I worked through in class: Making a NavBar. The final CSS code from that example, which you can use as a starting point for this assignment, can be copied and pasted from the file at the right.

To get credit for this assignment, just demonstrate it to me when I come around and I’ll check it off.

GRADING (Classwork)
TOTAL 3 pts
DUE: Thursday, April 5.

Assignment 12: External Style Sheet

This quick exercise will make sure you can use a CSS external style sheet correctly.

Your task is to simply convert your Assignment 11 blog page to use an external style sheet instead of an internal one.

Simply create a Notepad file named “styles.css” in the same folder as your “index.html” file. Then cut the CSS styles out of the internal style sheet section of the HTML file (from the <style> … </style> section) and move them into the external file “styles.css”.

Then in the <head> … </head> section of your HTML, replace the entire <style> … </style> section with the following line instead:

<link rel="stylesheet" type="text/css" href="styles.css" >

To get credit for this assignment, just demonstrate it to me when I come around and I’ll check it off.

GRADING (Classwork)
TOTAL 3 pts
DUE: Tuesday, April 3.

Assignment 11: Internal Style Sheet

This assignment will give you practice in using CSS internal style sheets.

click for larger

Your task is to simply convert your Assignment 10 blog page to use an internal style sheet instead of inline styles.

For reference, at left is an example of how I did this for my sample blog page.

click to view larger

In addition, try naming different versions of the same HTML tag and apply different styles to them with the “class” technique in CSS. An example of that is at right.

To submit this assignment, compress the entire folder and submit that with this link: Assign 11: Internal Style Sheet.

GRADING (Homework)
TOTAL 5 pts
DUE: Wednesday, March 28.

Assignment 10: Blog Page

The purpose of this assignment is for you to practice using some basic CSS, and especially to work with <div> tags, styling them and other HTML elements.

click for larger version

For this assignment, you will create a simple, hand-coded blog page. You can follow this sample I made for a guide or just as inspiration. But really, you should experiment and be creative with your own blog page format. Of course, use your own content, writing about whatever you would like for your subject. The result should be nicely formatted, with good writing as well as design.

Part of this assignment is to make sure you understand how to read and follow a precise specification for the site you create. Pay careful attention to the requirements listed below and look at the grading rubric below. You will lose points if you do not follow the specification exactly.

Your blog page must have the following features:

  • A blog banner area
  • At least three blog posts in boxes
  • Each post must have:
    • Date and time heading
    • Horizontal rule
    • One or more paragraphs of text
  • At least one local (not on the internet) image
  • At least one styled list

In addition, you must observe the following technical requirements in your code:

  • Separate content and form by using only CSS style for controlling the visual appearance
  • Use divs, margins, padding, colors, borders, backgrounds
  • Use all standard HTML page structures (index.html, HTML, head, title, body, etc.)
  • Use proper code syntax, indentation and formatting

To submit this assignment, compress the entire folder and submit that with this link: Submit Assign 10.

GRADING (Homework)
Content

  • Window title (1 pt)
  • Blog banner (1 pt)
  • 3 posts [boxes] (3 pts)
  • Each post
    • Date/time heading (1 pt)
    • Horizontal rule (1 pt)
    • Minimum one paragraph of text (1 pt)
  • Other features
    • Local image (1 pt)
    • Styled list (1 pt)
 10 pts
Form

  • Clean page layout (1 pt)
  • Background/box colors (1 pt)
  • Margins/padding/borders (3 pts)
 5 pts
Coding

  • File named index.html (1 pt)
  • HTML/Head/title/body tags (1 pt)
  • Correct CSS used for styling (1 pt)
  • Correct HTML used for contents (1 pt)
  • Good indentation and formatting (1 pt)
 5 pts
Extra Credit

  • Use of additional HTML/CSS constructs
 2 pts
TOTAL 20 pts (+ 2 EC)
DUE: Friday, March 23.

Assignment 09: Styles Worksheet

The purpose of this assignment is for you to begin getting familiar with a new way of controlling the appearance of content that you put on a web page. This technique is called CSS, which stands for Cascading Style Sheets. We’ll get into the details in the coming days.

But for now, let’s look at some examples. We’re going to use the technique of creating rectangular “box” areas on a page, and then vary their appearance. While this a very simple example, the technique is very powerful for creating more complicated page layouts.

I have made a sample page that demonstrates some of the basic CSS capabilities as applied to simple page elements. You can explore this demo at this page: Using <div> Tags With Style.

You should look at this carefully, and examine the HTML code that generated it to see how it works. The sample page has a link to a downloadable version of the HTML/CSS code that generated it.

When you have explored this demo and the HTML code, fill in this worksheet, Styles Worksheet, print it out and turn it in.

GRADING (Homework)
Completed 3 pts
TOTAL 3 pts
DUE: Tuesday, March 20.

Assignment 08: Multi-page Site

For this assignment, you will make a simple multi-page website using just basic HTML links. (Later, you will expand this to a more functional and styled site.) This will give you practice managing files and links in a more complex example than your single page site.

You are to create a website for a small organization of your own choosing. Some possibilities are:

  • RHS club (e.g., Thriller Club)
  • RHS team (e.g., Men’s JV Soccer)
  • RHS group (e.g., Tech Theater)
  • Small business
  • Non-profit organization
  • Religious group

You may also extend your personal portfolio or resume site, if you wish.

Whatever your choice, the site must have at least three pages, and you must be able to navigate from every page to every other page in your site using links that your create on each page.

The home page, or first page you land on when going to the site, MUST be named index.html. ALl other pages should be named to indicate what is on them.

For the actual HTML files, insert a set of links on each page so that you can navigate among the three pages by clicking on those links. You can implement the links in unordered lists, tables, or any other way you can determine to make them visually pleasing.

click to view larger

Here is a simple example for creating a set of links with an unordered list.

Keep all other files you use, such as images or photos, in the same folder as the three HTML files.

To submit this assignment, compress the entire folder and submit that with this link: Submit Assign 08.

GRADING (Homework)
Folders and files implemented as specified 2 pts
All links correctly functioning 9 pts
Page contents developed 6 pts
Good design and information 3 pts
TOTAL 20 pts
DUE: Tuesday, March 13.

Assignment 07: Personal Web Page

To put into practice the basic HTML that we have covered, you are to create a complete web page that is a personal information summary.

click to view larger version

This web page should be a kind of simplified resume, with basic contact information, a personal statement, at least one image, and other text that uses basic HTML tags to format the page. You can use the page you created for your “21” essay as a starting point and modify and expand it for the requirements below.

At left is a sample, very basic, version I created for myself. You can use this as a template, incorporating your own information instead, of course, if you like. But you are free to design this page however you like, and I encourage you to be creative.

To get full credit for this assignment, you need to incorporate all of the following kinds of HTML constructs in your page:

  • Window title
  • Multiple text heading levels
  • Horizontal rules
  • Bold and italic text formats
  • At least one image
  • Bullet list of items
  • Table with multiple rows
  • A hyperlink to an external page

Pay close attention to the rubric below. I will be checking this carefully when I grade your assignment. Notice that you can earn extra credit points for more adventurous designs and implementations than the spec calls for.

Name the HTML file you create for this page index.html. You MUST name the folder containing your project in the following format: Assign07-Davidson, so that your name is in the name of the folder.

The site folder, including all images, must be packaged in a compressed file and submitted in the course dropbox. Use this link: Submit Assign 07.

GRADING (Homework)
Page contents (all elements present as above) 2 pts
Page layout (reasonably matches sample or better) 2 pts
Use of required HTML constructs (2 pts each)

  1. Window title
  2. Headings
  3. Horizontal rules
  4. Font formats
  5. Image
  6. Bullet list
  7. Table
  8. Hyperlink
 16 pts
Use of additional HTML constructs (Extra Credit) 2 pts
TOTAL 20 pts (+ 2 EC)
DUE: Friday, March 2 in the course dropbox.

Assignment 06: Website Grid Example

Following our discussion today of grid systems on websites, this is a quick exercise to reinforce that concept.

Find an example of website that you think has a really strong grid layout, or one with a terrible one. Print out the page and sketch the grid on top of it, and turn that in on paper.

Then post a link to the site in the Roosevelt CS forum, with a short explanation of your grid analysis.

GRADING (Classwork)
Grid sketch & board post 2 pts
DUE: Wednesday, February 29.

Assignment 05: Forum Registration

To begin using our new online discussion board, please register with a username on that site: Roosevelt CS Forum.

Here are the steps:

  1. Go to the site, Roosevelt CS Forum, and click the “Register” option.
  2. Choose a username that is your first name plus the first letter of your last name. (For example, mine would be “Andy D.”) This is so that we know who is the author of a post, and to ensure that you aren’t exposing yourself online with a full name, since this is a public forum. There will be some future assignments involving posting in the forum, so I’ll need to be able to recognize you to give you credit for them.
  3. Fill in the rest of the required information, including a VALID email address. You will have to be able to receive email at that address to complete your registration. You can do that on your phone or a computer not at school. You will have to confirm your registration request by email.
  4. Once registered, login and explore the forum. You can use the Practice Area subforum to try things out.
GRADING (Classwork)
Username registered 1 pt
DUE: Wednesday, February 29.

Assignment 04: Personal Essay Page

To put into practice the basic HTML that we have covered so far, you will create a complete web page that is a personal resume. That will be accomplished in a few steps, as you learn more and more HTML.

click to enlarge

To get started and become familiar with the procedures for coding web pages, for this assignment you will make a simple page with some basic information about yourself, and a short essay. Here is an example that you can use as a guide.

The page should have your name and course information at the top, and then a few paragraphs of a personal statement. For your personal statement, I would like you to write a short essay (at least three paragraphs) about where you see yourself on your 21st birthday. You can talk about what you want to be doing by then, or what you can say about your career or goals in life (as much as you can, for now), some things that you see yourself doing between now and then, or just a bit about yourself and your experiences at Roosevelt so far.

If you need help getting started and to look at examples, you can download the files I used for the demo in class from this link: PersonalPage.

To turn in this assignment, you will submit it electronically, in an online dropbox, using this link: Assign 04. You MUST name the file your file in the following format: ahdavidson.html, so that your name is in the name of the file.

GRADING (Homework)
TOTAL 5 pts
DUE: Friday, February 17 in the dropbox.

Assignment 03: Internet Search

For a quick review of what we discussed about how internet search works, please answer the following questions. Type your answers in a Word document, add the sketch (by hand or with drawing tools in Word) and print it out. You may use internet searches, a classmate, or me to find the answers if you don’t know or remember.

  1. Explain the following terms, in relation to the internet:
    • network
    • server
    • server farm
    • database
    • index
    • spider
    • web crawler
  2. Based on what you understand of how internet search works , draw a sketch (in schematic, not metaphorical, form) of what happens when you send a query to Google, Bing, Yahoo, or any large search engine.
  3. Where are your email or Facebook messages or tweets actually stored? How do they get from person to person? This is different than search, but related.
GRADING (Classwork)
Internet schematic sketch 1 pt
Search related definitions 1 pt
Messaging question 1 pt
TOTAL 3 pts
DUE: Friday, February 13 on paper in class.

Assignment 02: Website Survey

In order to design effective websites, you must be familiar with the current state of the art. To do that, I would like you to spend some time online researching websites and making a critical analysis of them. Choose one of the following categories (or propose another):

  • Entertainment
  • Education
  • Information
  • Commerce
  • Social Media
  • Government
  • Personal

Thoroughly explore at least twenty websites you can find in that category. Keep notes in your journal on each site you visit, documenting what you find and why you think that site is good or bad. Support your opinion with concrete observations. When you have finished that survey, identify five sites that you think are really good examples of web design, and five that are really bad. Write a short report summarizing your findings. Your report must include the following information:

  • Site category
  • List of five good sites, with the following for each:
    1. Site name
    2. Site URL
    3. Summary of your analysis (why is it good?)
    4. Reasons supporting this opinion
  • List of five bad sites, with the following for each:
    1. Site name
    2. Site URL
    3. Summary of your analysis (why is it bad?)
    4. Reasons supporting this opinion

Create a Word document (using tables would be a good idea), print it out, and turn it in. The purpose of this assignment is two-fold:

  1. To give you some practice in critical evaluation of websites.
  2. To give me an idea of what websites you find interesting, useful, and well-designed, as well as the opposite.
GRADING (Homework)
Five good websites cited and analyzed 2.5 pts
Five bad websites cited and analyzed 2.5 pts
TOTAL 5 pts
DUE: Wednesday, February 8 on paper in class.

Assignment 01: Name History

In class today, you discovered some stories about your classmates’ name histories. Record at least one of them in the online form here: Gallery | Name History.

GRADING (Classwork)
At least one story recorded 1 pt
DUE: Tuesday, January 31.

Assignment 00: Course Admin

Please complete the following three course administrative tasks for this assignment:

  • Discuss the syllabus and course policies with your parent or guardian and return the signed form to me.
  • Fill out an online survey with some information about yourself for me. You can find a link to the survey in the menu above on this site: Info | Student Info Survey.
  • Have your parent or guardian fill out an online (or on paper) survey and submit it or return it to me with the letter: Info | Parent Info Survey.
GRADING (Classwork)
Family letter signed & returned
Student Info survey completed
Parent Info survey completed		 1 pt
DUE: Monday, February 6.
Advertisement