HTTPoetics

< Wednesdays 3pm-6pm ET and Sundays 7pm-10pm ET >
< Todd Anderson with Kayla Drzewicki and Tyler Yin>
< todd@sfpc.study >
< @toddwords, @coolgroceries (kayla) and @tylryn on Discord >
~~~~~~~~~~~~~~~~~~~~~~

A website is a poem that is already in everyone's pocket, a house built from photos of other houses, a book where every chapter is another book where every chapter is another book. In this class we will be studying the poetics of the web: the raw material of HTML, the systemic visuals of CSS, the endless interactive possibilities of Javascript and the browsers, servers, protocols, and infrastructure that holds it all together. Each week we will make websites. We will make small websites that only convey a single, tiny idea. We will make large websites whose clutter and convoluted interlocking pages feel like exploring an abandoned mansion. We will make websites that speak, websites with secrets, and websites that tell one perfectly executed joke. And as we build the web we will also learn its history from the early geocities days to the ways we tried to be fully present over the pandemic, and all the wonderful and useless websites artists have made in between.

~*~ This syllabus is subject to change ~*~

Homework

Weekly websites: Each week, you will be asked to create a website based on a prompt related to the topics from the previous class. The first hour or so of each class will be spent looking at these websites (with your permission) and saying things about them. The course isn't graded and you can of course skip a week, but the progression of the course assumes an hour or two of work spent outside of class each week to build familiarity with the technologies we're using.

Final Anthology: At the end of the class we'll be putting together an anthology of websites created during the class to share with the SFPC Community. As we go, think about what you might like to come back to.

Places to find interesting websites

A Note on Using Generative AI

Learning something new can be challenging and uncomfortable at times, and the Large Language Models (LLMs) behind popular generative AI tools are quite good at producing valid HTML quickly. But what's the rush? This class isn't graded, and the projects we'll be making aren't overly slick or technically complex. Learn to make websites with the simple tools in front of you, imperfectly and with your whole heart. It won't look like much at first, but soon you will discover your own little tricks and things you like, and then you will develop your own personal style rather than a generalized one.

see the httpoetics class anthology for examples of student work

Week 1: Making Websites

Topics:Introductions, Syllabus, Intro to Neocities, HTML/CSS
Slides: What is Website?
For Next Week:

Prompt: Make a bad website. Make a website that is ugly. Do it on purpose. Break an unwritten rule. Set yourself free.
Read: The Handmade Web - J.R. Carpenter
Read: Enshittification - Cory Doctorow

Websites to Check Out:

Resources:

Week 2: Collage and Scale

Topics:Links, Layout, Absolute positioning, Sizing,
Slides: What is Website?
For Next Week:

Prompt: Make a website that is way too big. Make one massive page (6000px x 4000px at least). Imagine a giant sheet of paper you can only see part of at any one time. Fill it with secrets and things to find. It's ok to leave space.
Read: My Website is a Shifting House Next to a River of Knowledge

Websites to Check Out:

Resources

Week 3: Websites as Places

Guest Lecture: Chia Amisola
Topics: Links, Hypertext, Multi-page websites, Domain Names
For Next Week:

Prompt: Make a multi-page website with non-traditional navigation. Is it a building? A story? An archive? A dream? How is a space defined by the way you move through it?
Explore: Spend 5+ minutes exploring at least 3 of the multi-page sites below

Websites to Check Out:

Resources:

Week 4: Interactivity

Topics:Javascript, Keyboard and Mouse, Buttons
For Next Week:

Prompt: Create a website that changes when you press a button. The button could be a or a keyboard key. Is it a slideshow? A reading machine? A divination system? A place that changes over time?
Read: Intro to Eloquent Javascript
Read: Espen Aarseth on Ergodic Literature

Websites to Check Out:

Resources:

Week 5: Playing with the Mouse

Topics:Mouse events, P5.JS, Tools and toys,
For Next Week:

Prompt: Make a website that changes as you move the mouse. Are you drawing? Reading? Revealing?
Watch:Complicating the Computer Mouse (11 minute video) - Emma Rae Bruml (script and additional notes)

Websites to Check Out:

Resources:

Week 6: Bringing it All Together

Guest Lecture: Jackie Liu
Topics:Large shared projects, revision
For Next Week:

Choose one of your previous web sites from earlier in the class. Revisit, revise, and optionally expand it for inclusion in the class anthology.

Resources:

Week 7: Final Presentations and Anthology

< 8/22 | 8/24 >

During our final class we will present our revised projects and assemble a class website anthology. Bring snacks!