Overview

This assignment contains two tasks:

  1. Use this link to respond to a few questions based on our reading.
  2. Modify your code from assignment 1 to include CSS styles.

Styling Your Web Site

The second task is to Add style information to both of the pages that you made for assignment 1. You must create a single stylesheet and link it to both pages.

Like assignment 1, this assignment is fairly open-ended. As long as you include the required style rules, you have lots of room to set up your own look and feel for your web pages.

Setup

To begin, use Fetch (or Cyberduck) to download a copy of your assignment 1 submission, and modify it in the following ways:

  1. Rename the folder from hw1 to hw2
  2. Rename the main page from assign1.html to assign2.html (the hobbies.html page should not be renamed, but the link to the assign page in that page will have to change).

While working on this assignment, you should not upload your work to your public_html folder. Instead, upload it to the public_html/cs115-assignments folder, so that you aren't sharing your work with the entire class.

Accordingly, the URLs for your submitted files should be:

  • http://cs.wellesley.edu/~yourusername/cs115-assignments/hw2/assign2.html
  • http://cs.wellesley.edu/~yourusername/cs115-assignments/hw2/hobbies.html

Note that to access those pages, you will have to log in with your computer science username and password.

To prepare for writing your style rules, you now need to create a file called assign2.css in your hw2 folder, and link that file to both of your web pages, using a <link> tag within the <head> tag of each file. Consult the readings, labs, or the W3Schools page on the <link> tag to figure out how to do this.

Writing CSS

Once your CSS file is linked to your pages, you can complete the rest of the assignment by editing that file (using Atom), except that you will need to add some id and class attributes to elements in your pages for specific styles. To check that your CSS file is linked correctly, paste the following code into it (you should see the background of both of your pages turn bright red): 


body {
  background-color: red;
}

If your pages don't turn red, then you need to figure out why the link isn't working. Check the console (View -> Developer -> JavaScript Console in Chrome) to see if there are any error messages. Double-check the name of your CSS file and that it's in the right folder (should be in the same folder as the HTML files). Double-check that your <link> tag has the correct attributes and that they have the correct values. Once the page is working, get rid of the red background: it's much too extreme to be a good background color without some very careful design choices.

As long as you complete the following checklist, you can add whatever additional styles you like to make your page look like you want it to. However, *all* the css code you use must be correct code! For full credit, your CSS file must define the following rules:

  • A rule that defines a custom color other than black for the page text. It should be either very dark or very light (if you use a dark background). You can use a named color, or use this color picker to find a color you like.
  • A rule that defines a custom background color for the whole page (or a background image, if you want to get fancy). Your background color and text color must be chosen so that they provide good contrast to make your text easy to read, so one should be light and the other dark.
  • A rule that specifies a specific font size and font family for at least one of the header tags (e.g., <h1> or <h2>). Your font family property specification can be just a single built-in font family, but if not it must at least end with one of the built-in font families sans-serif, serif, cursive, fantasy, or monospace.
  • A rule that specifies some margin value(s) for list items to control the spacing between those items so they are better readable.
  • Rule(s) to establish a border around an element of your choice that you use in one of your files.
  • A rule that specifies a margin for all or some of your images, so that they are separated from the elements around them. You can add other styles to your images, like a border, if you want.
  • Pick at least one HTML element in one of your pages and add an id attribute to it. Then use CSS to select that element using an ID selector, and add some kind of custom style to that element.
  • Define a class that contains at least two HTML elements from your pages. Then use CSS to custom-style that class, and therefore the elements it contains.

Notes:

  • Consult the readings or use a search engine to figure out how to apply certain styles. A big part of this assignment is getting comfortable looking up specific CSS rules on your own.
  • Make sure you check that both of your pages work locally and on the server once you submit them. It is very easy to create problems in CSS code by forgetting a semi-colon, for example. Pay attention to the colors in Atom and double-check things if the colors look wrong.
  • Make sure you check that both of your pages work locally and on the server once you submit them. It is very easy to create problems in CSS code by forgetting a semi-colon, for example. Pay attention to the colors in Atom and double-check things if the colors look wrong.

Submission

You'll turn this assignment in by uploading your hw2 folder to the CS server (you will not submit a hardcopy).

Uploading to CS Server

Once you are done, the structure of your hw2 folder on your Desktop should look like this: 


hw2
hw2/assign2.html
hw2/hobbies.html
hw2/assign2.css
hw2/images
hw2/images/...

Do the following to upload your folder from your Desktop to the server:

  1. Login to your server account (using Fetch or Cyberduck).
  2. Drag your hw2 folder from your Desktop to your public_html/cs115-assignments directory (NOT just your public_html folder!)
  3. Check that everything uploaded properly to the correct location: using a browser, enter the URL for your assign2.html page on the server (substituting your own username for yourusername):
    http://cs.wellesley.edu/~yourusername/cs115-assignments/hw2/assign2.html
  4. Check your work again, to make sure all is working well (images shown, links working, styles applied, etc.).

Coding Style

Just like your HTML code from the last assignment, your CSS code should be indented to indicate its structure. Each rule should also have a comment that indicates what it does, and any custom HTML colors should have comments explaining what color they are. For CSS, long lines will probably not be a concern, and because splitting the up is tricky, you don't have to worry about the length of your lines in CSS. Here is an example of a rule with proper indentation and commenting: 


/* Set the font size and color for h1 elements */
h1 {
    font-size: 32pt;
    color: #002244; /* very dark blue with a bit of green */
}

Also, your CSS file should have a comment at the top just like your HTML files do (although CSS uses a different marker for comments): 


/*
 * FILENAME: assign2.css
 * WRITTEN BY: Peter Mawhorter
 * DATE: Sept. 17, 2019
 * PURPOSE: CS 115 assignment 2 styles
 */

Due Date/Time

Remember that assignments may not be turned in late (unless you are using an extension). They are due at midnight on the due date (check the schedule). Furthermore, remember that this policy means that you should not modify turned in work after the due time has passed, so that when we grade it, it's not time-stamped late.

Honor Code

The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, you must solve, write up, debug, test and document each assignment alone. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or JavaScript in your communications. You should not be looking at other students' (current or past) code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.

Grading

These are the criteria we use to grade the homework:

  • Homework was submitted on the server by the due date. We will check the timestamp of your files. Late submissions receive 0 points (but make sure that you're aware of the course extensions policy).
  • Folders and files have the specified names and are uploaded to the proper location, otherwise we cannot see your page.
  • CSS file has comments at the top and as necessary interspersed in the code.
  • You have created all CSS rules we required.
  • Your rules are working correctly and affect both pages.