Assignment 3: Bio Site with Images

This assignment is to take the three pages you created in Assignment 2 and add images and basic CSS styling to the pages. Here are the specifics

  • You have one css file and it is lined to each of the pages.
  • Every page must have the same h1 at the top of the page. You can pick the text but don’t think too hard. It can be something like Chris Stein’s Bio or All About Me or whatever but it should make sense.
  • Every page must have an image  with 800×300 dimensions after the h1. You can use the same image on every page or use a different one on each page, but they must all be 800×300
  • Every page must have navigation after the large image. This navigation must have the minimum navigation styling we will learn in class. You can add more styling if  you like.
  • After the navigation comes the content for the page. The navigation must be exactly the same on each page.
  • On the favorites page add at least two images that help visualize your favorites. Each image must be 380×200 in dimension. You can add more than two if you like
  • You have a single CSS file that is lined to each of the pages.
  • The CSS fiile must have styles to:
    • Make the page 800px wide
    • Center the page
    • Set the font-family
    • Set the font-size for the h1, p and li elements. You cannot use a font-size less than 16px
    • use margin and padding to add space between the elements of the page, including the images
    • You can add other styles if you like
  • There is an images folder with all of the images, there is a css folder with the CSS file

 

Due Date

This assignment is due on Tuesday, October 1 (you have a week and a half this time).

Turning it in

To turn it in to Blackboard you will upload it to the MMP server and then put a link to the index.html file on the web into the Comments in Blackboard. We will cover this in class but if you are confused then ask me and I can explain.

Example

Here are a couple of wireframes to give you an idea of what the pages will look like:

index.html

 

sites.html

 

 

favorites.html

 

Leave a Reply