Weds., Mar. 10: Create a Portfolio Section

Your assignment, due in class Wednesday, March 10.

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 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!

Assignment Report

1. Your Name(required)
2. Email(valid email required)
3. Results of my work may be found:Please provide the URL, if online, or folder name if in the public folder
4. Description:What have you done or discovered in the course of this assignment?(required)
5. I could use some help withHow can I or other classmates assist you?
6. Please answer the question below. (Spam protection.)
7. Ten minus five equals

 

cforms contact form by delicious:days