Week Nº 11

Overall, solid stuff last week. We are still going through your work/​code and will be sharing your evaluations soon, probably this weekend.

We’ll begin our third unit, Typography As Interface, with a discussion of our selected readings:

• A Software Design Manifesto
  Mitchell Kapor, 1990

• My website is a shifting house next to a river of knowledge. What could yours be?
  Laurel Schwulst, 2018

• Unit Nº 3: Reading Responses

Then we’ll go through your last project for the semester:

Project Nº 3: Binding

In a departure from previous years, we’ll discuss images on the web:

Working with Images

It’s going to be quick on time, but we want to “connect the dots” today, going through some of the particulars of sketching in code and putting multiple pages together into a website. Our agenda:

1. Make a new repo binding on GitHub, set to Public ( same as before )

2. Clone it down locally and create a landing page

   • Add an index.html with some basic HTML structure
   • Pull in our reset, locally/​self-contained
   • Also create a common.css there with some basic styles/​size variables
   • Commit/​push, then enable Pages and add the link to the repo’s About section

3. Make a subpage and stylesheet for sketching

   • Create a folder direction-1/ with its own index.html and sibling style.css
   • Link the HTML to the project’s reset, the root/​common stylesheet, and also its own
   • With relative URL⁠s: ../ means “go up a level”⁠—so our direction points at the reset with href="../reset.css"
   • Do this in the cascade order, “large to small”: reset, common, then direction!
   • Copy in some plain, semantic DOM from your first project
   • Also add a link back to your landing page href="../", somewhere handy up top

4. Duplicate this three times for your distinct typographic treatments

   • Copy the direction-1/ folder so you have direction-2/ and direction-3/ as well
   • Change something in each individual direction style.css, to easily tell them apart
   • Back on the landing/​root index.html, make a <ul> with links to the directions
   • Since they are children, href="direction-1/" will go down to that folder (and request its index.html)
   • You can keep some basic/​shared styles up in common.css (remember, D.R.Y.)
   • Each direction’s style.css can then be used to sketch their own typographic system

This is how you will sketch in code!

• Select your additional texts for Project 3, Binding, adding them to the doc:

  Project Nº 3: Reading Selection

• And you’ll get sketching⁠—this time, in code:

  Project Nº 3: Sketching in Code

  With some starter semantic DOM from your first text, develop your three typographic directions. Make these distinct! Not just riffs on the same thing. We want to see variety, to start.

• When you’ve covered enough with these⁠—to establish and define three different feelings⁠—submit your URL⁠s:

  Submission Form