Facebook Twitter LinkedIn RSS
Home Project 2: Bio Site with “Design”

Project 2: Bio Site with “Design”

Objective: Use Code Editor (TextWrangler) and Photoshop, to design your bio website

Due: 2/27 (Friday) 10pm, in class. Email your URL to the instructor.
Email subject must be: MC4315 Project 2 Your Name (Grad students MC5312 Project 2 Your Name).
Email me both the P1 and P2 URLs. Your P2 URL  is yourURL.com/p2/ and your P1 URL would be youURL.com/. (We’ll do it together.)

Grading: Content: 30%, Design: 30%, Use of Technology: 40%

Start Plan for Your Project, check:

For design & colors, check below:

Overall Requirements:

  1. You will use the code editor, Textwrangler, and the graphics program, Photoshop, for this project. Not with any other online/offline templates or Web authoring software/applications.
  2. For this and all future projects, you must link a stylesheet to each page (external CSS, ex: style.css).
  3. Site must have a total of at least five pages.
  4. Missing any of the previous three requirements of the “Overall Requirement” will result in a failing grade. So please follow the guidelines and requirements.


  1. Use divs and HTML5 tags to format the structure of all pages.
  2. Have at least several paragraphs on each page.
  3. Site must have a total of at least five pages. Pages can represent separate areas of the site, like home, about, contact, links, etc. You must add one additional page to the site that you did not already have in p1, something to do with a specific hobby or interest.
  4. Your pages should be 900 px wide. The default width of our templates is 900 px wide.
  5. Decide on an appropriate navigation strategy, with four <a> states (a:link, a:visited, a:hover, a:active).
  6. You must change the color of the navigation, make it different from the default.
  7. Include at least one  good photo of you and one graphic. Photos must be optimized with Photoshop. Have appropriate file format (jpg, gif, or png), file dimension (i.e. banner should be 900×70 px), and file size (no more than 100 kb for each image, unless there is a specific reason to do so).
  8. Design your own graphics, such as site logo or banner, in Photoshop.
  9. Include at least three external links to relevant sites. External links must open in a new window (target=”_blank”).
  10. Make sure you include a title for your website (using title tag) and your email address somewhere on the site.
  11. Add a date to the bottom of the home page. Update this every time you make a change.
  12. Make sure you save the page with a .html extension.
  13. Upload all associated files to the main directory of your Web site. Your url will be something like http://yourURL.com/p2/. To upload your files, please follow this video.

Grad students additional requirements: 

Create Lightbox effects for all the images on your website.

© Web Design & Publishing