Links

If you have resources, readings, or sample sites on a 'poetic web' to share with everyone... add them to this Google Doc!

Are.na

Manifestos for the Web

Interesting (& Sometimes, Relatively Simple) Websites

Support Developh

If you are using this workshop website after the sessions and found it helpful, the suggested donation is $4. Donations go towards Developh programming and the workshop host.

The web is what we make it. ...I believe the common prevailing metaphor—the internet as cloud—is problematic. The internet is not one all-encompassing, mysterious, and untouchable thing. (In early patent drawings depicting the internet, it appears as related shapes: a blob, brain, or explosion.) These metaphors obfuscate the reality that the internet is made up of individual nodes: individual computers talking to other individual computers.
— My website is a shifting house next to a river of knowledge. What could yours be?, by Laurel Schwulst

00. Welcome

Who are you?

Next, another icebreaker wall!

If you haven't gotten enough, here are more prompts that you can answer.

• A Wikipedia page or fact that
• A rare sound in your life (what haven't you heard in a long while?)
• The last piece of media you consumed that really changed you (a serious recommendation!)
• Your favorite packaging
• Your go-to question when getting to know something niche about a person, and your go-to response
• What you're excited about

Drag around and type. Please don't erase anyone else's words!

Why a poetic web?

Almost every website you browse today is maintained by large corporations, seeking to centralize our behavior. They are privately-controlled spaces that act as public ones. Go Google "Create a website" and a million 'site builders' promise you e-commerce solutions, ways to drive traffic, launch your business, build your brand or portfolio, showcase your art... Maybe you even want to do one of these things. We connect to websites but often feel disconected. Notice how many of these relate to attention, a performance, a gathering? (That's not the only takeaway, but a big one.)

What is the web today? What can the web be? What can a website be?

The web is only the way it is because people have built it to be this way. It is seemingly strange that today, we seemingly have more tools than ever — but it seems a 'rarer' act to go out and publish something... but this shouldn't be a surprise. Information is obscured and gated, places where we can express ourselves and connect are often monetized. This is why it is worth moving towards a more handmade web—one that we've shaped ourselves. After all, the web is only the way it is because people have built it to be this way.

Once you resist the current standard of what a 'website' in the 'web' looks like today, it is far easier to imagine what a website could be.

A website after all, is fundamentally a vessel. It doesn't even have to serve 'content'. It doesn't have to be shared out to the whole world; it can be a link that only your friends have, or you can keep it all to yourself. It can have pictures and text and other links across multiple pages and even custom interactions, or it can just be a Google Doc. You can gather at a website from anywhere in the world in a single click, and begin sharing different entrypoints to your website by sharing the URL. You can have multiple websites for specific purposes, it doesn't have to host everything. Publishing' your website doesn't have to mean that it's finished; you are free to make an edit and have it appear instantaneously a second later. Or you can never touch it again and let it die. You can remove anything at once. You design the environment.

A website is essentially a world you design. What will yours be?

A poetic web is one that I imagine to be about creativity, expression, and the handmade. A lot of these thoughts resist the current state of the web: incredibly centralized, capital-driven, attention-seeking—far from what we associate with art.

"The more proprietary, predatory, and puerile a place the web becomes, the more committed I am to using it in poetic and intransigent ways." — JR Carpenter, March 2015

What can a website be?

How to explore these exercises

First, we imagine.

Take a look at the first two exercise prompts and 'remix' them on Glitch. Preview the code and begin by modifying one thing at a time. Try to understand what each thing changes.

Choose an exercise that you are most interested on building on.

Settle on a concept, or tweak one thing at a time until you want to lean into that modification as the centerpiece of your work.

If you add any other modifications, I suggest making a new page. Maybe each page builds on the code from the pages before it, or each page is a new tweak.

Imitate, copy, understand. Take things slowly. Focus on what you imagine. This workshop is not about best practices or doing things 'right', it's about getting you to do. Break down your concept into technical questions, search for them, and you will create your piece.

And then, we must make.

The biggest constraint to making is what we can imagine. HTML, CSS, and Javascript are tools you employ to make what you desire. This is why we first focus on concept.

Technology is a bridge; let it be a bridge and not a barrier.

Do not worry about what is below the code and let go of your fears in making. Think of something and let your website slowly get there.

Other challenges

• Pair up with someone else in the class. A stranger or a friend. Work on your website together.
• Force yourself to pick one of the concepts in the 'What can a website be?' list above and make it.
• Copy a website that is not in one of the exercises below, tweak one fundamental aspect of it.
• Turn something else you have made into a website.
• Use Exercise 1 or 2. Make at least 10 different versions of them, each tweaking one thing. Do this by adding additional pages to your Glitch project.

---

How to use Glitch

Glitch is a collaborative code editor that we'll be using to remix and preview work. Click on each exercise's Glitch page to see a screen like below.

• Remixing. We will remix the Glitch project so you can create your own copy of the file. You'll have your own project after a bit of a load — the URL you see is actually a live site!
• Files. The left sidebar contains the files in your project. You can upload images to Glitch here and create new pages too. If you don't see it, it might be collapsed—find a ">>" icon to surface it.
• Tools. You can revert edits and import/export your file here. I highly recommend downloading your project by hitting Tools > Import/Export > Download Project with the turtle; it gives you a .zip folder containing your entire project that you can now edit locally or later upload to Github. You can also sync your project to Github if you have one.
• Preview. If you don't see a preview of your website, toggle it by hitting the 'Preview' button and opening a preview pane, or open it in a new window. This preview pane refreshes automatically and is super helpful for looking through code.
• Project URL. If you are editing other files in your project that aren't index.html, you will have to navigate to that file in the preview pane to see it. For instance, if you're editing 'images.html' just type that in to see it!
• Make sure to download your project or create a Glitch account so you can save your work! If you've made your exercise without an account, the project page gets deleted in 5 days.

EXERCISE ONE:
A Moving Poem

In the workshop's most literal sense: let's try creating a moving poem. Are you familiar with concrete poetry? Interactive fiction? What can the nature of a website's interactivity provide to words?

Let's investigate how the form of a poem might change and evolve on a website — that is, all its different possibilities.

A Moving Poem

Prompts...

• Change words.
• (Maybe turn these into phrases or actions.)
• Delete a word.
• Delete everything within the <style and </style tags. What has happened to the page? Bring it back.
• Delete everything within the <script and </script tags. What has happened to the page? Bring it back. Or don't. Maybe the words can dance in another way.
• Change the title of the page to your poem's working title. You can change the title within the <title> tag at about Line 5 of the file.
• Add your own words.
  Copy a <span> and add your own text. Note that this tag is always paired with a closing </span> tag.
• One <span> tag has class="unsortable" inside of it. Classes are a type of "selector" used to style webpages. The <style> tags at the top contain rules for how stuff on the page looks; classes are selected with the . preceding their name. The styling declarations are contained in the curly brackets. Here, their opacity is faded.
• W3Schools has this extensive CSS reference. Add CSS properties you find interesting (and applicable) with the respective values you see are allowed after reading their page. Reload your page and see results.
• All HTML elements can be supplemented with attributes. For instance, it's not enough to write the <img> tag if we wanted to add an image — where is the image link going to be placed? Attributes provide additional information to the element, always added in the opening tag.
• What if you add a title attribute to one of the <span>? This would look like <span title="The wind rustles...">. Hover over the element you added a title attribute to and reveal another layer of text. You might be interested in alt text as poetry.
• This poem uses jQuery UI to "sort" its words, a library that extends jQuery with pre-written functions for fancy interactions. It has other functions built in that you can read about here. What if you change sortable to draggable? Do you need to change anything to make it work?

Reach out if you're curious about something or if you're stuck. Someone else might be thinking the same!

More on the code

Below is further explanation about the code. You don't have to read it before starting the exercise.

There are three languages primarily used here to make the site.

HTML consists of elements that structure the page (so the other languages are interspersed between HTML) and also labels content.

We use tags enclosed in brackets < > to write an HTML element. The ending tag has a slash / before its name, marking the end of a tag. We write the 'content' within these tags.
HTML elements can contain words like <bold>this</bold>, or they might contain other HTML elements to provide structure. In the code example above, <html> begins the document.

You might notice that some HTML tags aren't as simple. HTML elements can contain attributes, where here title="rain comes"; the attribute 'title' with the value 'rain comes' gives some additional effects and properties to our HTML element.

---

CSS affects the 'styling' of the page, and begins within the HTML tags <style. As it's a different language, the syntax looks a bit different: but you may notice that the names of HTML elements are referenced before curly brackets {} enclose rules about HTML's appearance.

Here, the element 'body' is given a property 'text-align' with a value 'center'. We end each property with a semicolon ; so we can assign multiple properties to an element, evolving its appearance. Other properties you could try are 'color', 'font-size', or 'padding', for instance. Properties and the values they take aren't always intuitive, so you're encouraged to look things up. For instance, the property 'opacity' takes values from 0 to 1.

---

Javascript provides the movement of our exercise and is used for interactivity. We use external libraries, primarily jQuery and its accompanying jQuery UI that have prewritten functions to make our desired interactions easier to achieve. The HTML element <script> that takes in URLs is calling these external libraries. Note that this workshop doesn't focus on Javascript and in fact — normal Javascript without jQuery wouldn't look this way. The syntax with dollar signs $ is primarily associated with jQuery (but not exclusively).

EXERCISE TWO:
I love it when you

make a website with me; take this love letter and riff off it.

I love it when you...

Prompts...

• Add prompts.
• Change the starting phrase.
• Remove the shuffle so that the array is always in the same order.
• What if each new paragraph took on a different color?
• Can something else happen at the end? What if it were a bit more grand?
• What if this never ended?
• Could the color change with each click?
• Once finished, what if you were given an option to start over?

EXERCISE THREE:
Rip it off

This prompt is far less directed. Think about your initial idea for a website—whether it was something grand, or now you just want to make a little personal site.

Build something from an idea you or someone else had. If it's a bit too much, try to scale it down. Take an existing template and tweak one small aspect of it —lean into that one modification.
If you wanted to build a world, start with a small room. Make a tour of your desk, for instance. Latch onto something you really like conceptually so that you have a finished output to share—whether you're ready to put it on the class sheet right during this meeting or you'll be working on it more throughout the day. The goal of this is to be able to present something.

Copy and paste ideas
Treat nothing as precious
Love your concept
Break things down incrementally
Start by modifying one small thing at a time
Break things down so you can Google pieces one by one and add them together

Take a look at the above for inspiration. Play with the links in the left scrollbar to find additional inspiration. Radically rework the first two exercises.

You will constantly be searching for how to build fragments of your work, even when starting it out. Let's put that into practice.

...

• W3Schools and StackOverflow are your friends.
• Right click and inspect how the websites you admire are built.
• A website does not have to be finished, it is never finished.
• If you want to complete something right away, try to avoid ideas that involve complex user input processing. Stick to Google Forms or something similar.
• Mix two websites that you really liked.
• Create a website that contains something else around you.
• Go on and begin searching.

Have something to share?

Put your exercises on this sheet. If you're still in the workshop and have time, we highly encourage you to screen share and have fun with calling out your ideas and progress so far!

Snippets

Code bits you can use in your work. Select the textarea to copy the code to your clipboard.

• The best way to learn how to code is to copy these values in (or retype them) and start playing with the values.
• Break down what you would like to do in chunks — you will be able to build anything you want by asking the right small questions.
• You'll find a lot of examples on Codepen and other similar sites

Tags & elements

<img src="https://64.media.tumblr.com/b21f01b041647bd47d2197ea3e854868/tumblr_mmbejecChw1rfjowdo1_500.gifv" width="70" height="100">

The <details> and <summary tags can be used to create collapsibles

like this

Can you make an entire poem out of tihs?

<details> <summary>like this</summary> to hide this </details>

Wheeeee <marquee>Wheeeee</marquee>

Wheeeeeeeeeeeee <marquee behavior="alternate">Wheeeeeeeeeeeee</marquee>

Attributes

Hover over this block to see additional text title="you have hovered and I have revealed my secrets!"

Make an element editable, like the 'Notes' section on the left. Try it on the whole <body> contenteditable="true"

add a spelchekc to yuor div tht will suquiggle typooes whne its editde (try to tyep in me) <p contenteditable spellcheck="true">i haev typoes</p>

Styling

Make rainbow text. Try to change this to affect the background color. body{ animation: rainbow 5s infinite; } @-webkit-keyframes rainbow{ 0%{color: orange;} 10%{color: purple;} 20%{color: red;} 30%{color: CadetBlue;} 40%{color: yellow;} 50%{color: coral;} 60%{color: green;} 70%{color: cyan;} 80%{color: DeepPink;} 90%{color: DodgerBlue;} 100%{color: orange;} }

Make gradient text span{ background-image: linear-gradient(to right, #ff0000, #ff8000, #fff200, #51ff00, #00d0ff, #9000ff,#ff008c); -webkit-background-clip: text; color: transparent; }

Try out CSS counters (like what's used in this section) body { counter-reset: mycounter; } div::before { counter-increment: mycounter; content: "mycounter " counter(mycounter) ": "; }

Make something shake /* You can change this to be any element, or remove the ':hover' so it shakes all the time. */ span:hover { animation: shake 0.5s; animation-iteration-count: infinite; } /* Add this to your CSS */ @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

Make effects transition span:hover{ color: red; transition: all 0.5s ease; }

Make something spin around /* Add 'class="spinny"' as an attribute to the element you'd like to spin. */ .spinny { animation-name: spin; animation-duration: 2000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

Add a colorful scrollbar (make sure your page actually scrolls!) /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: hotpink; } /* Handle */ ::-webkit-scrollbar-thumb { background: blue; border-radius: 15px; border: 1px solid white; margin: .25em; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }

Make text glow using <text-shadow>; add this to your element. You can combine multiple text-shadows by separating them with a , text-shadow: 0 0 15px yellow, 5px 0 5px red, 0 5px 5px green;

JavaScript

Be sure to enclose these in the appropriate <script type="text/javascript> tag!

Make an alert popup, like the one you'd get by clicking on me alert("I am an alert box!");

Make a confirm popup, like the one you'd get by clicking on me – which changes depending on user selection
Add this to your Javascript: function myFunction() { var txt; if (confirm("Press a button!")) { txt = "You pressed OK!"; } else { txt = "You pressed Cancel!"; } document.getElementById("demo").innerHTML = txt; And have a button in your body with this: <button onclick="myFunction()">Try it</button>

Shuffle the position of the elements on the page var bodyWidth = document.body.clientWidth var bodyHeight = document.body.clientHeight; function shuffleWords() { $("#poem *").each(function() { var randPosX = Math.floor((Math.random() * bodyWidth)); var randPosY = Math.floor((Math.random() * bodyHeight)); $(this).css('left', randPosX); $(this).css('top', randPosY); }); }

Publishing

How do you carve a space for yourself on the web? This is a completely inexhaustive list; feel free to share your own recommendations!

Option 1: Glitch

If you used Glitch from any of the templates, simply create an account so you can preserve your file. (Otherwise it gets deleted in 5 days.) Each project gets its own Glitch url that you can freely share!

Option 2: Github

Another (slightly more difficult) standard is Github. Github is the industry standard for storing and tracking software projects in repositories. Github Pages is its service that allows you to turn your repositories into sites with ease. On Github, your projects are all served under your own subdomain (like this site!).

For each project, you would create a new repository and upload your files. Github Pagesneeds to be enabled in the settings of each repository; make sure your index.html file is in the root of your repository.
For managing files, I personally use Github Desktop to handle all the file transfers from my local computer — it makes things incredibly easy.

You can connect your Github and Glitch accounts to quickly import/export projects as repositories. Alternatively, you can download your Glitch project as a .zip, unzip it on your local computer, and drag & drop it onto Github's site.

Option 3: Get your own web hosting or a server

A bit too much to explain briefly — but this would give you total control. Buy a domain and shared hosting + a server; you're set.

Popular options include Porkbun, Namecheap, Neocities (this is free), among others.

How about a domain?

You can buy a domain and connect it to Glitch or Github. You would need a domain for Option 3.