Final Requirements

Final Project Requirements

Your midterm is to create and publish to the web, what I’m calling a Photo Essay web site.
You will need to pick a subject that has the following qualities:

  • It should be a noun: person, place, activity, thing or idea. Pets, hobbies, parks, sports, family all qualify. So do celebrities and movies, but you have to be careful about finding photos that you are licensed to use.
  • It is interesting to you
  • You either have, or can take, or can find creative commons licenced photos of the topic.
  • Nothing that involved nudity, graphic violence etc. … think something suitable for work. You will need at least 3 images of your subject one of which should show why it’s interesting to you

These requirements are long and detailed. That’s not by accident. When you create a web site you must be detail oriented and also be very clear exactly what it is that you’re creating. We will go over this in class at least a couple of times, but you will be responsible for reading it, asking questions and following the instructions.

Detailed Site Requirements

  • [10] Four Pages: The site must have at least four pages
    • The homepage must be named index.html
    • The other pages named appropriately with no spaces in the names.
  • ALL PAGESmust have:
    • [5] Valid HTML - with no syntax errors: missing tags, overlapping elements etc. Use this site to check:
    • [10] Semantic HTML – the elements should match the content: headings in h1..h6 elements, lists in ol or ul elements, text in p elements etc.
    • [5] header with the main title of your site (header element with h1 inside). The title should help people understand what your site is about.
    • [5] navigation: This must be in a <nav> element with an unordered list for the navigation inside of that (<ul> <li>) It’s what we’ve been doing in class.
    • [5] content section. The main content on each page must we wrapped in a div or article element with a class of main: <div> or <article> Inside of that is the main content for that page
    • [5] footer which will be in a <footer> element and contain at least the following information inside a <p> element, where “Your Name” is replaced with your name:
      • Final Project by Your Name for MMP 100-006 Fall 2013
  • [5] CSS File: Your site must have a single, valid CSS page named styles.css that is lined to each page in the site. Use this site to check for valid CSS:
  • [10] Basic CSS:The css should have the following basic styles applied to the page
    • Set the font-family for headings and for the other text (pagraphs, lists etc)
    • set the font-size and line-height for your headings and paragraphs
    • Set the colors of your text and backgrounds so that the text is readable and contrasts with the background.
    • set the text color of at least one element.
    • set the margins and paddings appropriately so there is enough space around your content
    • At least one of your selectors must use an ID or class
  • [20] CSS Layout: You must use Float to layout your pages and do the following:
    • Page size: Give the page a width and center it (not centering all of the text, but centering the entire page using margins). Again, the recommended width is something between 600px-900px.
    • Two Layouts: not every page on the site can have the same layout. You must use at least two different layouts.
  • [10] Overall Design: Here I am looking at whether your visual design, the colors, fonts, spacing, images, alignment,  are used in a way that matches the content of your site and speaks to the audience and mood you were trying to create and that you described in your proposal. Some things to look out for that help:
    • Alignment: If the edges of each element align to another element on the page, you are usually OK, IF you used the grid to make your wireframe and stick to that, you should also be OK.
    • Contrast: Your text should contrast with the background. Also your headlines should be clear that they are headlines and different from the rest of the site.
    • Color: you have used color to help set your mood and show the different sections of the site
    • Clear Sections. Each major section of your page (header, nav, footer, content…) should be clear that it is a section. Use things like lines to separate them or different background colors or whitespace inbetween.
    • Typography: You use fonts that match the mood of your site.
  • [10] Video or Audio media: your site must use at least one piece of video or audio media.

Extra Credit

You can earn extra credit, up to 10 points, for the following:

  • Use JavaScript. Examples could include an image gallery using something like Lightbox
  • Use a web font. We will be covering Google Fonts in one of the classes in the last week.
  • I also give extra credit if you go above and beyond, for example, More pages and content than required and done well, extensive use of media (audio and video), good use of custom designed elements in Photoshop or Flash and properly added to the pages.

Due Date

The midterm is due on Thursday, December 19. You will present them in class on that day.

Leave a Reply