REQUIRED: Put your result online and provide a link and description in the form at the bottom of this post.

Create a portfolio layout for the portfolio page of your website. This should be made of images with short descriptions, something like this screenshot:

Your results should look something like this. (With the look and feel of your own design of course.)

Your results should include:

1. thumbnail images linked to larger images
2. a short description beneath the images
3. thumbnails and descriptions wrapped in a box with border and background to make it stand apart
4. each box uses the same class (such as class=”item” in my example)
5. boxes given uniform width, height, margin, and padding, so that each is of uniform size
6. boxes floated left to stack up next to each other, 2 or 3 boxes across and 2 or 3 rows deep
7. Site title, H1 heading, and H2 page heading all given appropriate names
8. Adjust the fine details — background images, margins, etc. — so that the elements look clean, thought-out, and professional

Below are screencasts to walk you through the process.

Screencasts: Create a Portfolio Section

Walk through the steps for creating a section of your website with stacked blocks of images and descriptions.

1. Part 1: The HTML — Download or view the video: portfolio-stack-HTML.mov
2. Part 2: The CSS — Download or view the video: portfolio-stack-CSS.mov
3. Part 3: Fixing Details — Download or view the video: portfolio-stack-details.mov

Desired Results

View the HTML/CSS results online.

Report Your Results!

cforms contact form by delicious:days

1. What, according to the movie, are some of the greatest sins one can commit?
2. What, according to the movie, are some of the greatest virtues?
3. Who are the key exemplars of virtue in this movie? How do they exemplify it?
4. Who are the key exemplars of sin in this movie? How do they exemplify it?
5. Are there moments when the movie attempts to point toward possible areas of common ground? When? Where? How?
6. What is/are the point(s) of irresolvable conflict?

• Pause and assess your progress.
• Articulate next steps.
• Request assistance where needed.

Compose an e-mail that addresses the following. Copy and paste the content into a reply to the e-mail I will send you.

Assessment

Review your communicative brief for your online portfolio. Now look at the current state of your efforts: the content of your posts, your portfolio pieces, the design of your WordPress template, the way things are organized and laid out, etc.

1. What do you feel pretty good about at this point?
2. What areas need work?

Next Steps

What will your next steps be? Break them down into two categories:

1. Things I can work on immediately. (Perhaps generating new portfolio pieces, editing images more carefully, polishing content, composing additional blog posts, etc.)
2. Things I want to do but am not sure how to. (Perhaps modifying the way things are laid out on the page, the contents of the sidebar or footer, etc., — things that are technical and you need my help with.)

Help Request

What will you most want my help with on Friday?

This week we will view the movie together. Resources, questions, and discussion will follow.

Be sure to complete the following steps as well:

1. Have your own background images and colors in place for all of the major elements of the site: header, nav, content, footer.
2. If you would like to modify the layout, have that completed.
3. Pull out any content that you’re not using.
4. BE SURE to put your name in the site title.

cforms contact form by delicious:days

By class time on Wednesday, please have 3 of your best blog posts, completed, polished, and beautified.

I have given each of you some feedback on the kinds of posts I most like that you’ve begun. The point is to take that feedback and make sure you have three really good ones, polished up and looking great.

I will be looking for:

1. Topics relevant to your career path (typically lists of great resources with images, headings, and short descriptions).
2. Good content, organized into well phrased headings and descriptions, spell-checked.
3. Good images to accent the post visually.

For examples of well crafted posts, see the posts at MyInkBlog.com, such as these:

• What Has Twitter Done for Me?
• The Icon Designers Toolkit
• 6 Ways to Take Your Webdesign from Good to Great

Be sure to base your work off of a professional-quality design that’s out there. We’re aspiring to be able to do stuff that looks like the best that’s currently out there. Once you can successfully imitate pro-quality designs, you can start innovating.

You can use one of these frameworks:

NEW: Compact Vertically Centered with Stretching Background Image

Download ZIP Folder

Wide Layout

Download Wide Layout (ZIP Folder)

Narrow Layout

Download Narrow Layout (ZIP Folder)

Compact Layout

Download Compact Layout (ZIP Folder)

cforms contact form by delicious:days

A Snapshot of MyInkBlog.com

By class time on Monday, please have 3-4 of your best blog posts, completed, polished, and beautified.

I have given each of you some feedback on the kinds of posts I most like that you’ve begun. The point is to take that feedback and make sure you have three really good ones, polished up and looking great.

I will be looking for:

1. Topics relevant to your career path (typically lists of great resources with images, headings, and short descriptions).
2. Good content, organized into well phrased headings and descriptions, spell-checked.
3. Good images to accent the post visually.

For examples of well crafted posts, see the posts at MyInkBlog.com, such as these:

• What Has Twitter Done for Me?
• The Icon Designers Toolkit
• 6 Ways to Take Your Webdesign from Good to Great

• Here is my own attempt — a variation on the JoshSmith design.
• Please upload your files and post a link to the page in the form below.

The Assignment

1. Begin with one of the frameworks linked below.
2. Flesh it out with a new design, with creative use of background images, mimicking a professional quality design that you find on the web. (Remember our Screencasts and Web Design Resources.)
3. In class on Friday, submit a folder with your results, along with a link to the example site you’re basing your design off of.

A Few Random Examples of Pro-Quality Designs

• Net.TutsPlus.com (wide)
• MyInkBlog.com (wide)
• BigThink.com (narrow)
• JoshSmith.ca (compact)

Wide Layout

Download Wide Layout (ZIP Folder)

Narrow Layout

Download Narrow Layout (ZIP Folder)

Compact Layout

Download Compact Layout (ZIP Folder)

cforms contact form by delicious:days

60+ High Quality Free WordPress Themes

Other Easy Options for Hunting Themes:

• Google “Free WordPress Themes”
• Go to SmashingMagazine.com and Search “WordPress Theme”

By class time Wednesday, if you have not yet hunted and found a new theme, do so, and use the form below to report what theme you’ve uploaded and give me a link to your wordpress where I can see it activated.

cforms contact form by delicious:days