Web Interlude Workshop
"I evoke the term 'handmade web' to suggest slowness and smallness as forms of resistance."
- J. R. Carpenter
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).
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.
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:
How it looks in the text-editor:
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:
"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:
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:
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.
We could make a half-circle like so:
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:
Now let's practice...
Take 10 minutes to reflect on what an interlude or rest is to you.
- What forms can it take?
- What environments can it be found in?
- What state of mind?
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!
Feel free to reach out to me with any questions!