project 2: creating your professional site

Professional Site Overview

The goals of project 2 are to learn about CSS and its open source internet culture, to highlight what you learn about CSS, and to highlight work you have created—all on a professional-looking web site that you could present to future employers, colleagues, the whole world, and so forth. This means that your new web site will consist of many things, but not: pictures of you and your friends, your car(s), bland descriptions of yourself, pictures of Rowan, etc. In short, anything that you think is not professionally-related material will not be on the page.

There are three stages to this portion of the assignment: a rough draft of a sophisticated professional site, a final draft of a sophisticated professional site, and an online portfolio. We will be completing these in stages which will allow us to build into the site new skills we obtain as we work through projects 2 and 3.

professional site rough draft specifics

The basic professional site is going to be structured using the CSS layout we created in class. We are using this template because working within it will allow you to get a feel for XHTML and CSS tags, selectors, and rules without the often maddening hassle of dealing with layout. For the more sophistated version of the site you will have the opportunity to expand and build and be more adventurous. But, that will come once we have learned more about layouts and esoteric CSS issues. The basic site does not contain a portfolio, but includes a link to a page that can become the portfolio.

For the basic professional site include the following:

  • name the file “index.html” and place it in the “public.www” folder in your home directory
  • place your stylesheet in a “styles” folder and all images in an “images” folder
  • all folders, code, file names, and file extensions (.html, .jpg, etc.) are lowercase
  • hand-coding only; no use of Dreamweaver or other WYSiWYG
  • the site must be designed using CSS and XHTML; do not use deprecated HTML tags
  • in the header:
    • an image coded into the XHTML 125px in height and 758px in width, which will allow it to fit perfectly into the template
    • on the image, using Photoshop, include your name, title, and/or any other pertinant information
  • in the content area:
    • a description of yourself in terms of your professional career, interests, and goals (with associated links) (250 or so words)
    • a brief mention of some extra-career interests
    • a professional photograph of yourself
    • a link to your portfolio and resume/CV that is mentioned within your discussion (these links should work)
  • in the sidebar, using the vertical lists provided at the CSS Listamatic, create a list of links (in the order and grouped as you see fit)to
    • influential web sites or CSS blogs you have come across (5)
    • professional web sites (5)
    • this course
    • the CSS social bookmarking list
    • your place of employment and related items
  • in the footer: your email address and a copyright statement
  • the following accessibility features
    • TITLE tags to all images and links
    • ALT text to all images
    • a correct DOCTYPE and language
    • TABINDEX tags to all links

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box