Homework Due 09/28

The Overview

Build a website for you the designer that consists of an “About Me” page—complete with a professional biography—and a “Portfolio” page containing at least three images. Save all the files (.html and .jpg) together in a folder. Add links to your pages so you can navigate from one to the other. Style each using CSS. You will create two versions by altering the CSS: one good design and one bad.

The Details

Calling All Content!

Start this assignment by gathering your content.

don’t Fear the Bio

First up is writing a professional (auto)biography. It’s no one’s favorite task, but it’s absolutely crucial in today’s job market.


Like Calvin, you’ve only got one piece of paper… sort of anyway. The attention span of your audience is a page at most, so keep your bio shortish. 2-3 paragraphs is fine, but, in that brief space, pack in as much of the engaging wonderfulness of you as possible. It helps to adopt a point of view. Sure, you have to cover the need-to-know information, such as what type of work you do, why you do it, how you got your start, what training you have and your philosophy as a designer (if you have one). However, in presenting that info, you can be funny or thoughtful or wild… whatever reflects you and your “brand”.

By the way, it’s okay to include some personal-ish stuff, like where you’re from, especially if it helps you connect. By the same token, you can add relevant anecdotes to generate interest. However, you probably want to leave out the story about the time you ate too many breadsticks at Olive Garden and couldn’t move for six hours. I mean, it’s happened to everyone, but it’s not the kind of info that will impress potential clients (unless that client is Olive Garden, I suppose).

Need help? Check out this article on bios for creatives.
And another article complete with examples. I like the 140 character one, but I do expect a few more keystrokes from you. 🙂

“heading” toward organization (see what i did there?)


Next create some headings and links to organize and connect your pages. This helps guide people through the information you present. Simple is fine: “About Me” and “Portfolio” work for headings and “Visit Portfolio” or “Read About Me” are perfectly serviceable as the clickable text for links. Of course you’re welcome to adopt your own creative take on the content.

You may also want to write a little paragraph blurb for the portfolio page explaining what people can expect (like supercool art).

image up


Collect a minimum of 3 images for your “Portfolio” page. These can be actual photographs of your art/design or things downloaded from the interwebs. Name them something appropriate: all lowercase letters, no spaces and with the correct extension (usually .jpg).

Markup Madness


Once you have the content, mark up the two pages using HTML in a text editor. Be sure to define as accurately as possible the structure of that content. Don’t forget to include html, head, title and body tags. Use img tags with the src attribute to put your photographs on the portfolio page. Add <a> tags around your link text and use the href attribute in the opening <a> tag to direct the browser where to go. Save your files as index.html and portfolio.html respectively.

CSS Does It with Style

css_ninjaAdd CSS to your two web pages. Start writing the code in the head of the “About Me” page. You can then copy and paste whatever you want to “Portfolio”. Feel free to have differences in the web pages’ style if you think it serves the content and/or the assignment requirements.

adding CSS (Like a Boss)
  1. Place opening and closing style tags within the head (after the title).
  2. Choose elements to which you want to apply style. Type the element name (which becomes a selector in CSS) followed by a space and then opening and closing curly brackets { }. If you like, you can separate the brackets onto different lines for readability.
  3. Within the curly brackets, type CSS properties and values (see list below). Properties are one word or hyphenated word commands that tell the browser what type of format is being applied. After the property name, type a colon and then a value for that property. Different properties are allowed different values. End the line of code with a semi-colon.
  4. Multiple properties+values can be defined for a single selector. Keep all the properties for one selector within the set of curly brackets associated with that selector.
  5. Multiple selectors can appear in the style tag. You can use as a selector any element that appears in your file. For example you might have body, h1 and p elements in the HTML that can then become CSS selectors. You don’t have to set styles for every element, of course. Pick and choose according to your design goals.

A Few Familar Properties…


  • background-color: adds a color to the background of all instances of a selected element.
    Possible values include a color name (red, blue, etc.) or the hex code found using a color picker.
  • color: adds a color to the font in all instances of a selected element.
    Possible values include a color name (red, blue, etc.) or the hex code found using a color picker.
  • font-family: selects a font or type of font in all instances of a selected element.
    Possible values include specific font names (Verdana, Times, etc.), sans-serif or serif.
  • font-size: sets the size of the font in all instances of a selected element.
    Possible values include a specific number such as 12pt or a relative size: small, medium, large, etc.
  • font-weight: sets font boldness in all instances of a selected element.
    Possible values include lighter, normal, bold and bolder.
  • font-style: sets font italics within all instances of a selected element.
    Possible values include normal and italic.
  • text-decoration: sets font underline and certain other decorative effects.
    Possible values include none, underline, line-through and blink.
  • text-align: sets the position of the content in all instances of a selected element.
    Possible values include: left, right, center and justify.
  • border-style: puts a styled border around all instances of a selected element.
    Possible values include solid, double, dotted, dashed, groove and ridge.
  • border-width: defines the width of a border around all instances of a selected element.
    Possible values include a pixel dimension such as 2px or a relative definition like thin, medium or thick.
  • border-color: adds a color to all borders surrounding a selected element.
    Possible values include a color name (red, blue, etc.) or the hex code found using a color picker.
  • margin: puts space between the border (whether or not that border is visible) and the edge of the page.
    Possible values include a pixel dimension such as 10px or a percentage like 5%.
  • padding: puts space between the border (whether or not that border is visible) and the content within a selected element.
    Possible values include a pixel dimension such as 10px or a percentage like 5%.

For more on CSS properties and values check out the post on the topic:

Create TWO Versions of Your Website


You don’t have to mess with the HTML… not at all… not one little bit. What you DO have to do is code two versions by altering the CSS.

Website the First

The first webiste should be as well-designed as you can make it using the CSS you know so far. Keep in mind the principles and elements of design and the web specific considerations we discussed today in class. If you’ve forgotten all this already ( 😡 ), look out for a review post to go live in the next day or two.

Once you’re done coding, save the website—the 2 html files and your 3+ portfolio images—in a folder titled yourlastname_goodwebsite (if you haven’t already).


The second website can be made by duplicating the first folder (right click on the folder and select “Duplicate” or “Copy”) and renaming it yourlastname_badwebsite. Design this one to bad as you can make it. Show me you know the rules by breaking them with abandon. Make rude gestures at the principles of design, use visual elements for evil and ignore every one of your user’s needs. And, heck, have some fun doing it. How often do you get to go all-out rotten in a class?


Hey, I know you if you try, you can even pwn these paragons of tackiness. Go forth and let loose with the eyeball assult!


Aaaaannnnddd…. Submit

Don’t forget to test your two websites in a browser to make sure everything is working and looking how you want it.

Once you’re satisfied, compress both folders according to the directions at the bottom of the last homework post and email it to me.


Questions? Add a comment to this post by following the link at the top.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s