&

📘

Week 11

November 8

Session recording

Week 11, November 8

Project 2 recap

Overall, these were really great! We were both very impressed with how far you’ve all progressed.

We’re still finalizing our evaluations/feedback on your Spread projects—we’ll be sending DMs as we did before, probably sometime later this week.

Reading discussion

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

Unit 3 reading synthesis

Further reading

You should again go through these additional texts on your own schedule, 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:

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

  2. Clone it down and create an index.html landing page—same as before

    • Add some basic HTML structure
    • Pull in our reset, locally/self-contained
    • Create a common.css, in an assets folder with some basic styles/size variables
    • 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.cssdirection-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
  4. Create three folders/index pages for your entries (instead of sibling HTML files)

    • Make ul with links to the entries on the landing page (and/or on each page)
    • 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

For next week