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.

This is an exercise in making layouts. Use grid or flexbox to layout your days of the month. Try other positioning properties to

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.