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

    • Session Recording

      Quick Project 1 Recap

      We’ll be sending your individual Manuscript feedback and evaluations by next class time. Some brief overall notes:

      • Attributions?

        A good number of folks brought in other material that we didn’t discuss in class⁠—whether from previous knowledge, peers, MDN, who knows⁠—and we didn’t see much in the way of attributions. We think we’ve been clear on this⁠—you must note it and explain the usage and your understanding.

      • Smaller Commits, More Comments, Clear Indentation

        We’d like to see better code hygiene! Commit smaller changes much more often, and with more useful messages. It shows us how you are working through things, and makes your code more resilient to errors. Likewise⁠—comment your code! We didn’t see enough of this.

      • Don’t repeat yourself

        D.R.Y! Following from above: in code, any time you’re repeating yourself there is probably a better way! In CSS, duplicate declarations probably mean you can use grouped selectors, nesting, reuse a class, etc. Sometimes this means going back across your work and consolidating/​tidying. We want you to think systemically!

      • Readability Fundamentals

        Tons of great, expressive type work! But in this, we lost some sight of the basics⁠—many projects still had base paragraph text that was uncomfortable to read⁠—lacking contrast, too-short or too-long lines. Put yourself in the mind of your user: is this comfortable to read?

      • Attention to Detail

        We know this a new medium for most of you, and we might have used this analogy before: in a movie, you don’t want to see a reflection of the cameraman in a mirror. In design, you don’t want to see typos or misused punctuation. It just takes you out of the work.

        Said another way: you are the attention to detail. That’s all we are!

      • Quiet folks in the chat

        We didn’t hear from probably half of you in the chat! We’d like to see more activity in the Slack channel, and engagement with each other there too. Everyone is going through the same stuff! And it’ll only be getting more challenging.

      Reading discussion

      We’ll start our next unit, There Is No Perfect Layout with a discussion of the readings from last week:

      • Continuity and Change
        Max Bill, 1953

      • The Web’s Grain
        Frank Chimero, 2015

      • Unit Nº 2: Reading Responses

      Further reading

      Over the second unit, you should peruse these additional readings on your own schedule. Again, these are here as a reference and inspiration for your project:

      • Investigations on Gestalt Principles
        Max Wertheimer, 1923

      • Grid Systems in Graphic Design
        Josef Müller-Brockmann, 1981

      • The Diminishing Marginal Value of Aesthetics
        Toby Shorin, 2017

      Our Second Project

      And we’ll go through the details of your next project:

      Project Nº 2: Spread

      Responsive Design!

      Today’s main topic is responsive design, which hinges on the use of media queries:

      Responsive Design

      And DevTools!

      A rare, second topic⁠—about tools to help us work responsively:

      DevTools (Web Inspector)

      For Next Week

      • Review our two topics from today! We’re going to have to move faster here, but these are rich references for your work.

      • Connect with your partner for Project 2, Spread. Together, decide on the text you’ll use and add it to this list:

        Project Nº 2: Reading Selection

      • Read your selection and discuss it with your partner!

      • Then sketch collaboratively with your partner to develop three initial directions for your design. Do this together! Make sure these are in the class project and be sure to send us your links:

        • Project Nº 2: Sketches

        • Submission Form

    • 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

    • Some More JavaScript

    • 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

    • Putting 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

    • Week Nº 29

      Apr. 29

    • Week Nº 30

      May 6

    • “Everything Else”

    • The end