Week 8

October 18

Session recording

Week 8, October 18

Sketch review

We’ll start off today by looking at your Project 2: Spread sketches from last week. We’re going to break up into groups of groups, so you get multiple perspectives:

  1. Angelica/Sabrina, Xinyi/Zil, Cristina/Shaoran

  2. Alexis/Rodrigo, Dhruvil/Hana, Lucy/Vicky

  3. Kritika/Kirsten, JC/Vera, Emily/Hannah

  4. Sachi/Shaurya, Bhroovi/Rebecca, Hao/Sarah/Wenny

We want to spend about 45 minutes on this, all told. This means we’ll be at each table for ~20 minutes, and have 6–7 minutes with each team.

Quickly introduce us to your reading and three directions, focusing on the formal design considerations. (Practice leaning into showing, not telling.) When we are at the other table, go through the same process with your classmates—each team, in turn.

Working in pairs

For a rare pre-break demo, we’ll briefly demonstrate how you’ll work in code with your partner. Our agenda:

  1. Start a new repo named spread for our second projects—set to public
  2. Add your partner as another user (collaborator), so both of you can edit
  3. Create an index.html with some basic HTML structure, commit them, and push
  4. Enable Pages, add the link to the repo’s About section, and clone the repo locally

    Switch drivers!

  5. On the other computer, clone the repo down—same as before
  6. Add in our reset, create and link to style.css, and write some mobile-first styles!
  7. Start with some base CSS variables and a media query to make them responsive
  8. Commit it and push it up—same as before

    Switch drivers!

  9. On the other computer, pull down the changes, make some edits
  10. …repeat until the project is done!

Working responsively

After break we’ll shift gears a bit, and look at how to work on a responsive page:

DevTools (The Inspector)


And last, we’ll get into some more modern (less frustrating) CSS layout:

Finally, flexbox

For next week