Top 10

Compile a personal top 10 list. These should be ten things that inspire you, that you're interested in right now, or that make you want to be an artist/designer. It could have a theme, or no theme. It's a self-portrait in the form of a list. We'll use this as a way to introduce eachother, and to get started coding.

Once you have your list, make a webpage for your top 10. Use this as a chance to experiment with a variety of HTML tags, and to see what kind of layouts are possible with just HTML. You might want to make more than one version...

Some tags you might want to use:

<ol> aka ordered list. This makes a numbered list of items. Use it like this:

<ol>
    <li>
        My favorite color is blue.
    </li>
    <li>
        My second favorite color is light blue.
    </li>
</ol>

<a> Use an anchor tag to make a link.
For an external link, include the "https://"
<a href="https://www.youtube.com/watch?v=XJcXjUB0yqY">Watch my favorite music video on Youtube.</a>
To link to another page on your own website, just use the filepath:
<a href="my-favorite-music-video.html">Read my explanation of my favorite music video</a>

<img src="myimage.png"> Use an image tag to insert an image. Replace myimage.png with your image's file name.

<br> creates a line break in text. &nbsp will add a space to your document. It stands for non-breaking space, and you can use it to position elements.

Browse this list of every tag.



Top 10, Real News, November 2012. The Top 10 list was originated by Mother's News.
Website as...
Website as…
Web design as…
Surfing the web as…
Programming as…
Protocol as…
Network as...
Browser as…
“Interactive” directory as….

Inputs:
Frank Chimero, The Web’s Grain, 2015
Laurel Schwulst, My website is a shifting house next to a river of knowledge. What could yours be?, 2018

Take a look at this website: www--arc.com
Then, spend some time writing your own version.

You could take one of the phrases above as a starting point for a metaphor of your own creation. Or start with one of the metaphors mentioned in the readings (website as room, website as shelf, website as garden, website as zine, web design as teaching a bear to ride a bicycle, internet as neighborhood, etc…).

Then… Make a simple html page with your text and style your response.

Since we’re working with metaphors, think of a visual reference for your text. What if you typeset it to look like a menu? Or a screenplay? Or a childrens’ book? Or a protest sign?

Experiment with any CSS properties, but you here's a list to start with:
padding, margin, border, position and top, right, bottom, left, display, height, width

If you want to get into typesetting, here are some useful properties:
font-style, font-weight, font-size, text-align, line-height, letter-spacing, text-transform
font-family lets you change the font of an element. Here's more on how to load your own font.

Calendar

Make a single-page wesite that contains a one-month calendar. Here's an example.

This is an exercise in making layouts. Try using grid or flexbox to make your layout and build your calendar. Try other positioning properties to arrange different elements on your page.

Each person should make a different month. Choose your month and paste a link to your page here.

Above: Xavier Viamontes, La Victoia (June), fom Calendaio de Comida, 1976. For more inspiration see: Calendario de Comida (1976) produced by Galería de la Raza, or Calendario Exhibition, Galeria de la Raza.

Responsive website

Responsive website

Read through the deck Making Layouts Responsive.

Then, make a website that changes its form and/or content at at least five breakpoints. You could start with these common breakpoints, or make up your own:

  • 320
  • 480
  • 600
  • 768

Your website can contain any kind of content. You could opt to start with an item from your top 10 as the subject, or continue working on one of the sketches you've already made. The website could be a self-contained responsive website experiment. Post the exercise to your class homepage when you’re done.

Some background

Media queries are a type of CSS that allow content to adapt to various conditions. They are a fundamental technology of responsive web design! It’s not good practice to target specific devices since new devices are being invented all the time. Instead, it is better (and more future-proof) to target specific numerical breakpoints.

Make sure to include this link in the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Try opening the following examples and resize your window:
jsfiddle.net/wruef46x — changing background color
jsfiddle.net/bf6Loasj — nav position change for mobile

Here's more on Media Queries from Shay Howe.

Bookmarklet

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

Make a simple bookmarklet that alters the viewing of a webpage.

Examples and tutorial here.

Window

Jane Freilicher, Window, 2011.

Using HTML and CSS, make a drawing of the view from your window. Feel free to simplify, abstract, or stylize your view. Don't get hung up on the details unless you're getting into this.

Once you've drawn your window, add one element that responds to the current time. It could be a change of color, an object that appears only at a certain time, a sound that plays, some cue as to the time of day.

Here are some useful resources:

  • Shapes of CSS, a page that shows you how to draw various shapes using CSS.
  • You can use absolute and relative positioning to place elements inside a frame. Here's more on position.
  • If you want items to overlap, you could alter their z-indexread more.
  • You can create round borders using border-radius, and control each corner’s radius individually with border-radius-top-left, border-radius-bottom-left, etc.
  • You may need to rotate elements by using the transform property. Here's more on CSS transforms.
  • You can use color and background-color to apply fills. Or use a CSS gradient. Here is more on gradients.

Here's some inspiration– remember you can inspect these pages to see how they were done.

Keyboard instrument

Keyboard Instrument

Make a simple webpage that responds to typing.

Your site could respond to typing in general. For example:

window.onkeypress = function() {
   alert("you pressed a key!");
}

Or, it could respond to specific keys. Here's an example for how you could check which key was pressed:

window.onkeypress = function(event) {
var key = event.key;
if (key == "a") {
console.log("you pressed A!");
} else {
console.log("try again");
};
}

Examples:

Type a Tone
Bryce Wilner, Echo
Mengyi Qian, Typing Time
Timestamp typeface
Pati Hill, Alphabet of Common Objects

It is the advantage of the typewriter that, due to its rigidity and its space precisions, it can, for a poet, indicate exactly the breath, the pauses, the suspensions even of syllables, the juxtapositions even of parts of phrases, which he intends. For the first time the poet has the stave and the bar a musician has had. For the first time he can, without the convention of rime and meter, record the listening he has done to his own speech and by that one act indicate how he would want any reader, silently or otherwise, to voice his work.
–Charles Olson, Projective Verse

Ambient website

Make an ambient, animated webpage, like a screensaver.

This could be a prototype for your Clock, or a standalone sketch. The only requirement is that it change over time.

Use CSS animations to create an infinitely looping animation. Or build your own animation with HTML, CSS, and JavaScript.

Here's the deck about how to use CSS animations.

Some other ambient websites for consideration:
Damon Zucconi, Curtain, Curtain, Curtain, Curtain, Crawler, and more!
Linked by Air, Zen for Film
Weiyi Li, 100 Names
Left.gallery screensavers
O-R-G screensavers
sebastianlyserena.dk/
Yes Studio
Cosmos Pies, Sulki & Min
Bryce Wilner, Resolution Labyrinth* this one contains some interaction

Realtime

Using JavaScript, create a website that gets the current time, and responds to it in some way. The only requirement is that your site does not use numbers to tell the time in a traditional way.