Web Interlude Workshop

"I evoke the term 'handmade web' to suggest slowness and smallness as forms of resistance."
- J. R. Carpenter

Workshop Websites

Thanks for the wonderful workshop!


This workshop will attempt to introduce the basics of the web (html + css) through play, demistification, and slowing down. We can hope to have some kind of website made by the end of it.

Some words I would like us to keep in mind during the workshop are:

We can think of the web today as a fast, flowing rapids (platforms) lined with pockets of calm, resistant eddies (personal websites).

( let's head for the eddy... )

What else can we use the web for besides contributing to the platforms that control the fabric of our online experience and craft?

How can we reclaim it as space that we feel capable of making in and for?

The goal is to stay messy and free; there is time to refine later. What's important is that we explore the limits and nuances of making on the web.

About Myself





My Work

Examples from the Web

(Old and new...)


We'll need two (2) essential tools: a browser and a text-editor.


"HyperText Markup Language"

HTML is the basic structure of the website. If it were a building we could consider it the foundation and frame.

We can think of HTML as a series of boxes:

<head> <!-- metadata here --> </head>
<body> <!-- content here --> </body>

How it looks in the text-editor:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your Website Name</title> </head> <body> </body> </html> ( Instead of copy-pasting this, try to type it out by hand... )

If you run into trouble or make a mess of things, return to this block of code to make sure all the essential elements are still in place.

To add content to the webpage, we will work with these basic elements within the <body> element:

<h1>A Header</h1> <p>A paragraph</p> <a href="https://google.com"></a> <img src="myimage.jpg"> <div class="mybox"></div> <div class="anotherbox"></div>


"Cascading Style Sheet"

CSS is how we control the visual look of our website. It is the facade or design of the building.

To add style, we will first make a new file named "style.css" and add it to the same folder with our "index.html" file.

Next, we will need to establish a link between the two files by adding this line of code to our <head> element in the .html file:

<link rel="stylesheet" href="style.css">

Once we've done that we can start adding style to the elements in our .html file. This is done by specifying properties to the elements and their classes (attributes) like so:

p { width: 500px; padding: 20px; background: rgb(255, 0, 0); color: #e0d56f; text-align: center; font-size: 20px; } img { width: 200px; } .mybox { width: 50px; height: 50px; background: green; border: 1px solid blue; } .anotherbox { width: 100px; height: 100px; background: url('myimage.jpg'); }

Let's practice with some shapes and positioning.

Shapes in css are somewhat difficult, so for our purposes we'll just work with a square, rectangle, and circle.

.square { width: 100px; height: 100px; background: red; } .rectangle { width: 200px; height: 100px; background: green; } .circle { width: 100px; height: 100px; border-radius: 50%; background: blue; }

We could make a half-circle like so:

.half-circle { width: 100px; height: 100px; border-radius: 50% 50% 0 0; background: orange; }

Positioning is another can of worms, but in the spirit of making a mess we'll give it a go.

There are a few possible positions:

/* the default position */ position: static; /* permanent position that remains even when scrolling */ position: fixed; /* positions the element relative to its position in the document */ position: relative; /* positions relative to its positioned parent or the document body */ position: absolute;

Now let's practice...

The Interlude

Take 10 minutes to reflect on what an interlude or rest is to you.

Do this without looking at the computer. Close your eyes; draw and sketch in a notebook; write some words down. Don't think too hard. Try not to filter anything, capture and write anything that comes to mind.

At the end of 10 minutes begin work on a website that communicates these ideas.

If you encounter a technical problem, try to search online for the answer first. Most questions you will have about html and css have been answered countless times online already! This is the single greatest skill of the coder: searching.

If that fails, though, don't hestitate to call me over and we can work through it together!




Further Reading:


Feel free to reach out to me with any questions!