September 20, 2022: CSS Basics / Living Collections on the Web

Overview

Today we’re going to cover the basics of CSS, which will give us a little more control over how our information is represented and experienced.

Agenda

Lecture:
  • CSS: A collection of 3 fruits
  • Github Pages
Break (10m)
  • Reflect on your favorite collections on the web. Share 1-3 links with your partner(s) and talk about what you value in each one. Compose the links into a collection. A link pack that you can share on the web. Style and organize them, taking inspiration from the links themselves and their topics.
Entries (45m)
In Pairs/Groups: Share your entry with your partner.
  • Did you discover anything?
  • What do you value in your recent entry?
  • What do you value in your partner’s project?
  • After seeing your partner’s project, what would you change about your own project? What would you change about your partner’s project?
Reading Discussion (15m)
  • “What is Code?”
  • Points that stood out to you.
  • Did you disagree with anything?
  • Did you find anything illuminating?
  • Did you find anything uncomfortable?
Next Week (5m)
  • More CSS — Approaching the webpage as a canvas.

HTML - Trees

  • Everything that you put on a page has a relationship to everything else.
  • Most of the time when we read and write and tell stories in everyday language, we do it linearly...
  • Writing in HTML has a branching structure. The more things you put inside other things, it becomes less like writing in regular language, and more like writing a diagram... You're writing about things and their relationships.

Here’s an example of code that is 4 layers deep, with elements inside of other elements…
<body>
  <table>
    <tr>
      <td>
        <h2>
          Enter
        </h2>
      </td>
      <td>
        <h2>
          Stay
        </h2>
      </td>