Week 5

Session recording

Briefly, feedback

You should have all received some initial feedback via GitHub Issues. This is a common way to comment on and track code tasks. Check off those task lists!

Styled markup review

We’ll begin today by looking at your in-progress projects. Same deal here as last time: find your names and sit with your group:

1. Angelica, JC, Rodrigo, Rebecca

2. Wenny, Shaoran, Bhroovi, Kirsten

3. Zil, Dhruvil, Alexis, Hao

4. Lucy, Hana, Xinyi, Sarah

5. Vicky, Sachi, Vera, Kritika

6. Sabrina, Cristina, Shaurya, Emily, Hannah

Let’s shoot for 45 actual minutes! You’ll have about a half-hour among yourselves, and then about 15 minutes with one of us at the table.

Again, go through each of your projects in turn—everyone should see and respond to everyone else’s work. We shouldn’t see any quiet tables with folks on their phones or just working; use the time with each other.

We will have about 3 minutes with each of you, and will try and be tight on this. We want to focus on overall aesthetic considerations—not looking through your specific CSS, right now. Tell us what your challenges are and we’ll point you in the right direction.

Now, some proper layout

You’ll need more than font and color to make your designs work. Today’s main topic will give us some tools:

The box model and CSS layout

Demo time!

We’ve updated the manuscript example from last week to include some basic font and color—as you should have, with your own. This week, we’ll be enhancing this design with the contents of the box-model lecture:

Manuscript

You’re more than welcome to follow along, but do keep in mind that our example will look and feel quite different from yours at this point!

Some of the changes we’ll be making, time willing:

• <meta charset="utf-8">
• max-width for body text
• margin between elements
• padding for the page, lists
• border to accentuate blockquotes
• sticky article headers
• absolute on header quotes
• fixed Top link

For next week

• You’ll be completing the last phase of your Manuscript projects, spacing and refinement.

  This extra week affords us two goals: first, to layer in the box-model/layout material from today, and second, to refine your design and code based on feedback. You should emphasize both of these efforts toward your final project.

• We completely recognize that we are very early in our technical progression—so we know that your finished pages will only be approximations or even interpretations of your sketches. Don’t let this discourage you; it’s inherent to our medium.

  We’re looking for you to try and problem solve towards your designs. There is often no single correct way, and we want to see your engagement here in discovering your own solutions.

• When you are done, submit a link to your URLs:

  Assignment submission

  Please check that these work outside of your own, signed-in browsers!

• Prepare to present these next week! We will be breaking into two groups (using our other classroom), and dedicating the entire class to reviewing your work. Let’s talk about how we’ll run this:

  Notes on format

  
  We’ll post who is in which group prior to class; our other room is just downstairs in 702.