Week 11, November 8

Typography As Interface

Session Recording #

↗

Project 2 Notes #

Overall, really strong work last week—and we appreciate folks staying long to get through the presentations. We’re still going through your work/code and will be sharing your evaluations soon (probably this weekend).

Reading Discussion #

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

Further Reading #

You should again go through these additional texts on your own, over the next few weeks:

Our Third Project #

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

Project 3: Binding

Some More, Fancy CSS #

Let’s look at some CSS remainders/loose-ends:

Some Additional, Advanced CSS

And a Demo #

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 an index.html landing page

    • Add some basic HTML structure
    • Pull in our reset, locally/self-contained, now in an assets subfolder
    • Create a common.css there with some basic styles/size variables
    • While we’re here, what is a .gitignore ?
    • Commit/push, then enable Pages and add the link to the repo’s About section

  3. Make separate stylesheets for sketching your typographic treatments

    • In the assets folder, create direction-1.css, direction-2.css, direction-3.css
    • Give each a different base font-family, to tell them apart
    • Link all of these to your index page
    • Comment them out/in to switch between them!
    • Associate elements (like h1) to size variables (like --typography--h1) in your common.css; then set these variables differently in each direction-n.css

    ↑  This is how you will sketch for next week!

  4. Create three separate folders/index pages for your entries, instead of sibling HTML files—article-name/index.html

    • Make ul with links to the entries on the landing page (and/or on each page)
    • Link these subpages to the shared ../assets/common.css
    • Add a shared navigation (home, previous, next) on the entries
    • Edit the navigation, updating per-page instances to your order
    • Link to a page-specific CSS file with a relative path

    ↑  This is how you will structure your actual/final project!

For Next Week #