Lab 2: A Portfolio

20 points

To facilitate an eventual job search, the department recommends that students create a portfolio of work they have done (inside or outside of school) that might be of interest to a future employer. It might include descriptions of projects completed, links to source or executables, artwork you've created, etc. It can also have resume-like information such as name, work history, interests and abilities, and a means of contacting you, though you should keep in mind that any information you put on it will find its way into Google.

In this lab you will create a portfolio website on your dev server. The portfolio should be for you, but if you don't want to make information about yourself public at this time, you can just use your first name and first initial of your last name and avoid sensitive personal information such as address, phone number, etc.

These instructions have you creating a basic portfolio website, but you should fill it out with real info by the due date--all the information you might want a potential publisher to have about you apart from contact information. Don't worry about formatting and styling for now--we'll work on that in the next lab.

For now the lab will be on your virtual machine only. Later, you can optionally transfer it to a Calvin server so that it appears at the URL


  1. Create a directory called "portfolio" in your public_html directory. Put all the files you create in that directory. The home page should be called "index.html" so that it will open at a URL like .

  2. Create the home page with a text editor. Use at least four <div>s, one for a header area, one for a navigation or menu area for links to other pages, one for a content area, and one for a footer. You may wish to make your layout similar to the <div>-based layout in the w3schools tutorial Layout section or some other source.
  3. Add an image or graphic in the header area as well as something to indicate that this is your portfolio.
  4. Add three links in the navigation section, for the home page, "about me," and "my work" pages. You can use different names for these pages. We'll add a contact page later.
  5. Now create the "about me" and "my work" pages by copying and modifying the home page. Add resume-like information on the "about me" page and add descriptions and links to any work you'd like potential employers to see on the "my work" page. If you have nothing you'd like to add there as yet, make up a couple of things.
  6. Make sure the three pages are accessible on the Web. Check that the links between pages work and make sure there is some information on all the pages. However, don't worry about formatting at this point.
  7. Make sure you've used title, h1, p, div, a, strong, em, table, and img elements somewhere in your website.
  8. Make sure your pages are valid HTML 5.

Turn In

Make sure you have three pages that share a common layout, have the required elements, and are valid HTML 5. The content should be complete and well-written, though you don't have to do anything with styling as yet.

I will check your portfolio on your dev server at ~yourID/portfolio.