Assignment #3: Your first styled website - J4502-SS19/class GitHub Wiki

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.

Your site at this stage should be designed for mobile only. In Assignments 10 and 11, we'll use Flexbox, and then Grid, to expand it to larger screen sizes.

Due date

This is due by noon on Friday, Feb. 8.

Points possible

35

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: Center your content 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/Navigation: Display vertically on mobile. Remove default browser styles (bullets) and make sure that they can be distinguished from one another visually.

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

  • 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: I am not grading your site on how well it's designed — really. This assignment is just to make sure you know how to style 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. (5 points)

CSS (25 points) This includes:

  • styled using an external style sheet — no inline styles
  • 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: 35 points

###Turning it in

Send your link from Github Pages to Rob via Canvas.

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. :+1:

tl;dr:

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