CSC 223 — Authoring for the Web

Portfolio Page

Overview

In this assignment you'll use CSS and HTML to create a portfolio page showing off images of work you've done. This can be a portfolio of real work, or a made-up portfolio.

Here are two example portfolio pages:

Example 1

Example 2

Example 3

Note that in all of these examples, each work sample includes an image, as well as a caption associated with that image. Also notice how the samples are displayed so that there are multiple work samples in each line. This is accomplished using code similar to this:

CSS

.sample {
   display: inline-block;
}

HTML

    <div class="sample">
        <img ... />
        <p>The caption...</p>
    </div>

Assignment

  1. Create a new html page in your assignments folder. (You can name the assignment files whatever you want, as long as they are unique, end in .html, and don't contain spaces)

  2. Add the necessary HTML and CSS to create a portfolio page. Your CSS should employ margin and padding properties in its layout.

  3. Modify your index.html if necessary so that your assignment list correctly links to the new page.

  4. Use git or GitHub Desktop to commit those changes and push them to GitHub.

  5. Submit the url to your github pages site to MySVU. (This should be something like https://USERNAME.github.io/REPOSITORYNAME).