Electronic Portfolio Resources

The following resources will be helpful to you as you begin to design your electronic portfolio. As always, if you have any questions or need help, please email me or see me during office hours.

Document Type Declarations

Every HTML file should start with a "DTD," which tells web browsers how to interpret the code contained in the file. Remembering the exact wording of these DTDs is almost impossible, so I recommend copying and pasting DTDs into your HTML files using this source:

Templates

Creating an original layout for your portfolio will be a difficult task. If you are not already familiar with HTML, it may be helpful to use a template for your first website. These sites will help you get a jump start on selecting a template for your site:

  • Open Source Web Design — An excellent place to start. This site offers hundreds of free templates. You can browse the templates by layout, color, etc., and download one that complements your individual brand identity.
  • Open Web Design — Another site with a long list of free templates. This site offers many of the same features as the OSWD site linked above.
  • CSS Creator — This online tool allows you to enter the general dimensions and colors for your site, then it generates HTML and CSS templates for you to work with.
  • Layout-O-Matic — Another layout generator you may find helpful.
  • MaxDesign Sample CSS Page Layouts — Links to templates for several varieties of CSS-based layouts, as well as a few tutorials that guide you through the process step by step.
  • Intensivstation CSS Templates — Twelve standard CSS-based page layouts.
  • The Noodle Incident's Little Boxes — Sixteen different layouts, complete with HTML source code and accompanying CSS.
  • Blue Robot's Layout Reservoir — Only a few layouts here, but this site offers clear explanations about what's going on behind the scenes with each layout

Organization

A website of any size is best organized into subdirectories (folders) that show the basic logic of the site and help you build and update the individual web pages. Follow a standard naming procedure (I recommend using lowercase letters for all file names, with no spaces in the file names). By creating such a structure at the beginning of a project, it makes it much easier to get the right path names for hyperlinks.

The following sites have additional information about organizing a website:

Cascading Style Sheets

Here are some online sources that introduce Cascading Style Sheets, provide full references on the CSS language, and give examples:

Color Selectors

These sites will help you develop a color scheme for your eportfolio:

Stock Images

If used well, photographic images can enhance the textual elements in your portfolio. These stock photography sites will provide you with plenty of options. Before you use any images, remember to check the copyright notices listed on these sites to ensure that your use of the images complies with the law.

Backgrounds

In choosing backgrounds, simple solid colors usually work best. Sometimes, though, a patterned background may be appropriate. Here are some sources:

Sample Portfolios

Professional Portfolio Sites

The following sites were created by web design professionals. Although some of the technical aspects of these portfolios go beyond what we will do this semester, these portfolios may provide some inspiration as you work on your portfolio:

Academic Portfolio Sites

Several universities around the country are beginning to implement electronic portfolio programs. Here are student examples from two such programs:

And here is a nice compilation of student-created eportfolios from around the country:

ISU Portfolio Sites

Here at ISU, many students are creating portfolios in a variety of courses and programs. The portfolios listed below have been created by my students in previous sections of English 213 and English 105 (now 250). Some of these students used open-source design templates, while others designed their sites from scratch.

Last modified: Thursday, 16 August 2012, 9:20 AM