Week 8

Session recording

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)

Flexbox!

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

Finally, flexbox

For next week

• You’ll be moving into the next phase of your Spread projects, pair programming. Narrow your design directions based off the feedback from today, and then move into code with your partner.

• As a reminder, we want this work to be done together, as we demonstrated in class. Focus on roughing in your design, mobile-first, and then enhancing it for desktop. For next week, we’d like to see your completed, semantic DOM and the first pass of your mobile and desktop styles.

• When these are in a good spot, submit your URLs, as usual:

  Assignment submission