j187 | IIM

Intro to Interactive Media

Project 2 – Design and Develop a Website

Project 2: Build a Website using HTML and CSS

DUE: Wednesday, Oct 15th, by midnight.

Value: 100 points

The goal of this assignment is to challenge you to create a well designed, easy-to-navigate, flawlessly scripted multi-page Web site.

You will be given all the assets necessary to complete the assignment, including text, video files, photos and graphics.

You will post your site at the following address (we will set this up in class):

http://yourdomainname.com/project2

I suggest you work through wireframes and color comps to ensure you have a solid design in mind before you start coding, but you will not turn these in. You will only turn in your final website, including all folders and files, so your site structure and CSS files can be examined and evaluated. Make a folder called last_firsname_project2 to turn in. When you turn in the folder, please create a zip file (right click – compress) and email that to me along with the link to your final url.

The assets provided can be downloaded from this project2 zip file.  You must use all the assets provided for your site. They are:

  • An overall Intro for the site (overallintro.doc)
  • Powering a Nation logo (logo.psd)
  • Introductory text about electric power (gridintro.doc)
  • Introductory text about wind power (windintro.doc)
  • Introductory text about coal power (coalintro.doc)
  • EmbedVideo about the electric grid (http://vimeo.com/7645659)
  • EmbedVideo about wind power (http://vimeo.com/13528629)
  • Embed Video about coal power (http://vimeo.com/7645302)
  • Story about the “smart” electric grid (grid.doc)
  • A q&a piece to help users understand coal power (coalqa.doc)
  • Graphic showing how electricity moves through the grid system (grid.swf)
  • Photo to accompany the smart grid story (gridpic.jpg)
  • Cutline for the smart grid photo (gridcut.jpg)
  • Credit information for items listed above (credits.doc)

You should use these assets as is, but you may organize them as you see fit, edit the text and write additional descriptions for menus, headlines or other navigational elements as needed.  In addition:

  • Site structure should be done in HTML.
  • Site markup should be in CSS.
  • All menu items should be in list format or use the standard Bootstrap nav bar.

You will be evaluated on your successful execution of HTML and CSS, as well as your site’s overall creativity and usability. I want you to prove to me that you have thought about good design principles (appropriate colors, typography, and layout), and that you can design a basic website using HTML and CSS best practices. I also want to see that you can take the initiative to figure out how to do something (use some type of code) that we have not learned in class but that will enhance the look or usability of your site.

 

Tips and Resources

Here are some things to remember as you start your site, as well as some resources to help you along the way. The tips below are based on the most common mistakes students make, so read on to avoid the most common pitfalls.

  1. Your first task is to create a folder to house your website. Make sure to include an images folder and put all images inside. Please call this folder last_firsname_project2.
  2. You should workout your layout and navigation as a wireframe and then do your colors and text treatment in a full comprehensive color layout. You need to have a well thought-out plan before you begin coding.
  3. Your next task will be to create a starter page to work from. You will also need to create an external css style sheet. Name your external CSS file styles.css and make sure it is saved in your project folder. Make sure you link your css file properly from the HTML file.
  4. Use the starter page to build your story page. Get your header in place and place some content. I suggest the story page rather than the homepage so you can make sure everything works well when presented. This will be a real page that you use for the site.
  5. When the page is perfect, you can make a template from it by selecting SAVE AS TEMPLATE. Clean out the template, create your editable regions and save the template. You can now start creating the rest of your pages from this template.  This is not required but suggested.
  6. Be sure to name your homepage index.html.
  7. This is where people get off track. For some reason, many of you now put hours and hours into trying to create a fancy menu. Don’t. Get your site working first. The correct workflow is to create all of the pages you need and place all of your content. Once all of the pages are done, create your menu. Remember that your menu should be in list format.
  8. Test your site thoroughly to make sure that all of your links work and all of your photos, movies and Flash graphics load and play. Fix any and all problems.
  9. All your URLS should be relative links. You should never see file:// in your pages. This means it will not work when uploaded to the site.
  10. NOW you are ready to make the menu look cool. You will learn plenty of CSS to make a simple vertical or horizontal menu. However, if you would like to get a little fancier, consider doing a Google search on something like “CSS menu tutorial.” You might just find a great resource like this one http://css.maxdesign.com.au/listamatic/
  11. Don’t wait till the last minute to start uploading to the server. You might have problems so make sure you can login and you know how to upload your content.

Examples of previous projects:

http://annaleerigdon.com/static/index.htm

http://alexaparicio.org/project2/

http://kaylakennedydesigns.com/project2/PAN%20FAQ.html

http://www.alexisbalinski.com/Project2/

http://carolinepate.com/project2/

http://annie-daniel.com/project2/

 

Leave a Reply

You must be logged in to post a comment.