If you’re seeing this, the site behind it is likely broken!

Hi, there. I use these course sites as little sandboxes to experiment with and learn various “brand new” CSS properties—and your browser does not support (at least) one of them. Apologies. It “should” always work in current/updating Safari and Chrome!

  • Typography & Interaction

    ’25–26

  • The Syllabus

  • Our Class

  • Unit Nº 1: “Type and the Web”

    Wks. 1–6

    • Week Nº 1

      Aug. 29

    • Everything Is a “Web Page”

    • Week Nº 2

      Sep. 5

    • It’s All About Type

    • Week Nº 3

      Sep. 12

    • An Intro to HTML

    • Week Nº 4

      Sep. 19

    • An Intro to CSS

    • Week Nº 5

      Sep. 26

    • The Box Model

    • Project Nº 1: “Manuscript”

      Oct. 3

    • Week Nº 6

      Oct. 3

  • Unit Nº 2: “There Is No Perfect Layout”

    Wks. 7–10

    • Week Nº 7

      Oct. 10

    • Responsive Design

    • DevTools /​ Web Inspector

    • Week Nº 8

      Oct. 17

    • Finally, Flexbox

    • And (CSS) Grid

    • Week Nº 9

      Oct. 24

    • Some Additional, Advanced CSS

    • Project Nº 2: “Spread”

      Oct. 31

    • Week Nº 10

      Oct. 31

  • Unit Nº 3: “Typography as Interface”

    Wks. 11–15

    • Week Nº 11

      Nov. 7

    • Working with Images

    • Week Nº 12

      Nov. 14

    • Week Nº 13

      Nov. 21

    • Thanksgiving Week

    • Project Nº 3: “Binding”

      Dec. 5

    • Week Nº 14

      Dec. 5

    • Week Nº 15

      Dec. 12

  • Winter Break

  • Unit Nº 4: “Interface as Interface”

    Wks. 16–21

    • Week Nº 16

      Jan. 21

    • Week Nº 17

      Jan. 28

    • An Intro to JavaScript

    • Week Nº 18

      Feb. 4

    • Week Nº 19

      Feb. 11

    • Week Nº 20

      Feb. 18

    • Project Nº 4: “Links”

      Feb. 25

    • Week Nº 21

      Feb. 25

  • Unit Nº 5: “If All You Have Is a Hammer, Everything Looks like a Nail”

    Wks. 22–30

    • Week Nº 22

      Mar. 4

    • Puttin’ a (Link/​Meta) Bow on It

    • Week Nº 23

      Mar. 11

    • Spring Break

    • Week Nº 24

      Mar. 25

    • Week Nº 25

      Apr. 1

    • Week Nº 26

      Apr. 8

    • Week Nº 27

      Apr. 15

    • Project Nº 5: “Functions”

      Apr. 22

    • Week Nº 28

      Apr. 22

    • Session Recording

      Functions Presentations

      As you know, class today (and next week) are for our final project presentations. Here’s the lineup for today:

      First Half

      1. Soko
      2. Kinza
      3. Mia
      4. Kimaya
      5. Cason

      Second Half

      1. Maika
      2. Evgenii
      3. Trenton
      4. Chareese
      5. Lucy

      Class Zoom
      Mic and cameras on!

      The rest will go next week!

      Unit Nº 4: Extra Credit

      We know some folks were surprised by (and unhappy with) their fourth project evaluations. We stand by these⁠—but do want to give another opportunity to incorporate our feedback and also demonstrate your understanding of the unit (and course) material.

      Traditionally, we’ve allowed people to revise and resubmit these projects and better their grades. But in light of the early and ubiquitous presence of “AI” in these⁠—where the LLM⁠s were in control⁠—we don’t think this would really be useful here. We need to see what you can do.

      So we’re offering an alternate extra-credit assignment:

      • Choose two or more artworks⁠—preferably on a theme or in conversation⁠—that you can find online. You’ll be interpreting these in our medium of the web.

      • Make sure it is something where you can credit the original artist, and link to more information about the work.

      • These are probably more approachable if they are non-representational⁠—so not photos or paintings. Think posters, abstract art, minimalism, geometric forms.

        These sorts of things would work well! But up to you.

      • In a new repo, using only HTML elements and CSS properties, you will “draw” each of your artworks. You can also make use of text⁠—but no images! Think of HTML elements as your “daubs of paint.” If you need to make a mark, make an element.

        We are not looking for Diana Smith level of fidelity⁠—but are expecting interpretation. Sometimes approximations are better!

      • Since these are primarily visual elements, non-semantic containers (like div) would be appropriate. But use semantic tags (like figure/​figcaption ) outside, where it makes sense.

      • Include a tombstone for each artwork⁠—the artist, title, and date. And provide a link to the original source for your artwork!

      • Avail yourself of advanced styles, but still demonstrate thorough use of nesting, grid, variables, and overall structured, systematic thinking. No (or at least very few) “magic numbers!”

      • These should be responsive, of course. And mind your metadata!

      • We also want you to include some basic-but-interesting interactivity via Javascript, by toggling between states. Think: before and after.

      • Think of how the works can be enlivened, here! Make it “webby.”

      • These will be due at the end of the semester, along with your Index project, on May 15. Be sure to add a link on those, as well.

      • We’ll evaluate these based on your creativity, engagement, and demonstration of your own understanding of our medium, the web.

      • This will be applied towards improving your Project 4 grade.

      We don’t want you to use any form “AI”/​LLM for these. Not even “ask” mode⁠—on your word.

      This is just you and our course material.

      For next week

      • Taking a step back, we have a couple readings to round out our unit and semester. The first⁠—around the seemingly inevitable rise, shift, and fall of platforms:

        TikTok’s Enshittification
        Cory Doctorow, 2023

      • Add your reading synthesis, as usual:

        Unit Nº 5: Reading Responses (Enshittification)

      For last class

      • And our very last reading, about aesthetics, nationalism, and the actual work of design:

        A notional design studio.
        Ethan Marcotte, 2025

        You might remember Ethan from our responsive intro!

      • And your last response:

        Unit Nº 5: Reading Responses (N.D.S.)

      For the end of the semester

      • If you’re unhappy with/​worried about your grade for our Links projects, you can complete the extra-credit opportunity, above:

        Unit Nº 4: Extra Credit

      • And finish up your Index projects!

        Project Index: Wrapping It Up

        We want to encourage you to manifest your own design aesthetic and personality in these. They are⁠—as we’ve mentioned⁠—what we reference and send out for alumni past. So the more you and the more interesting, the better! It’s small; it’s yours. Make it fun. Play us your one song.

        And if all that doesn’t matter to you, we’ll remind you these are worth 10% of your grade!

      Both Due the morning of Friday, May 15!

    • Week Nº 29

      Apr. 29

    • Week Nº 30

      May 6

    • “Everything Else”

  • Project “Index”

    May 15

  • The end