Session recording
Project reviews
We’ll begin again today by looking at your Project 2: Spread pair programming progress from last week. Here are our groups:
-
Sachi/Shaurya, Xinyi/Zil, Dhruvil/Hana
-
JC/Vera, Bhroovi/Rebecca, Cristina/Shaoran
-
Lucy/Vicky, Emily/Hannah, Hao/Sarah/Wenny
-
Angelica/Sabrina, Alexis/Rodrigo, Kritika/Kirsten
We’ve been rushed before, so we’re just going to commit the whole first half to this. That gives us about 30 minutes per table, and 10 minutes per team.
You know the drill. Today, let’s focus on your in-progress coded work—start us off with a brief background, show us mobile, then onto desktop.
Grid
Building on our knowledge of flexbox, we’ll take a look its spiritual continuation in grid:
Let’s try it out
We‘ve made a small demo repo today:
And a short agenda:
- Look at all those variables!
- Add
printmedia query, altering sizes/colors - Plan for our (physical) pages, with
break-after,break-before,break-inside - Scope styles by adding
screen, if needed - Set up
grid-template-columns/rowsfor desktop - Start with
grid-columnandgrid-rownumbering andspan - Switch to named
grid-template-areas
For next week
-
You and your partner will be finishing the last milestone for your Spread projects, print and refinement.
You’ll be interpreting your page for print, while also iterating on the implementation based off feedback from today. Apply yourself equally to both goals.
We’re clarifying a specific requirement here: your print design needs to work without any color. Imagine we’re running these off on the staff lounge copier—which we may!
-
When you are done, submit a link to your URLs:
As always, check that these work on other computers!
-
Prepare to present your work next week! We will again be breaking into two groups, and using the entire class for this purpose. Let’s talk about it:
We’ll post the groups prior to class; our other room remains 702. -
Also, please revisit our Project 1 recap from a few weeks ago—we want to see improvement on these fronts!