Assignment #3: Your first styled website

Overview

This assignment will teach you how to add CSS (the stylesheet language) to your original website. By the end of this assignment, you'll have a styled version of your index.html file.

Due date

This is due by 5 p.m. on Friday, Feb. 12.

Points possible

25

Steps to take:

First step: make a copy of your first assignment on GitHub. Move the code to a new page, call it oldindex.html, or something similar. You'll style your index.html page (the idea is to keep the old, unstyled version along with your new styled version of index.html).

Only change to your content: Add a link to assignment 2 (your unstyled site).

Style your content using CSS, in an external stylesheet. You must include:

• Positioning: Put your content in two columns (ex: main content and a sidebar). Center your columns in the browser window

• Type: change in type: size, weight, color, alignment. You must use system fonts and define a font stack (see references on delicious to tell what's a web safe font). Define a font style for paragraphs and headings.

• Links: Change the default browser style. Add active, hover, and visited styles.

• Image: remove the border from your linked image (don’t forget this one; it doesn’t show up by default on most Mac browsers).

• Navigation: remove bullets from navigation. Display horizontally.

• Background: Give something on the page a background color or background image

You must validate your HTML and CSS.

You must use an external style sheet.

Note: We are not grading your site on how well it's designed — really. This assignment is just to make sure you know how to style and position content using CSS.

###Grading:

All required content there — this is everything from assignment 1, plus a link to your old index.html. All your links must work. (2 points)

CSS (18 points) This includes:

• styled using an external style sheet — no inline styles
• content in two columns (it's ok if you have a header/footer outside of the columns)
• columns centered in browser
• type style defined: size, color, weight, alignment
• you use system fonts defined in a font stack
• paragraph type style defined, heading type style defined
• changed the default link style and defined active, hover, visited
• removed border from image
• navigation displayed horizontally, without bullets
• you have a background color or image

Code validates — XHTML and CSS (5 points)

Total: 25 points

###Turning it in

Send your link from Github Pages to Elizabeth and Rob via DM on Slack.

Note: Assignments not turned in by deadline will drop a letter grade for each day late.

If you have any questions at all, feel free to ask. 👍

tl;dr:

Add styles to your website (see checklist above), validate it, push it to GH-Pages, send us a link. Worth 25 points, 2.5 percent of your semester grade.