Week 8, October 18

Project 1 Grading, Midterm Check-In #

We’ve (finally) finished your evaluations and feedback for Project 1, and will be sharing these on Slack this weekend. (Apologies for the delay!)

Also, if you can believe it—today’s class marks the halfway point of our first semester! So this will also function as a check-in point for your overall progress in the course. You can respond to our DM with any questions, concerns, comments, etc.

Working Responsively #

Let’s look at how to work on a responsive page in the browser:

DevTools (Web Inspector)

Flexbox! #

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

Finally, Flexbox

Working in Pairs #

For our second half today, we’ll demonstrate how you’ll work in code together—so it’d be helpful to sit with your partner! Our agenda:

1. In one of your GitHubs, start a new repo named spread for our second projects—set to Public

2. Add your partner as another user (collaborator), which will let you both edit the repo’s code

3. Clone the repo locally, create an index.html with some basic HTML structure, commit it, and push (as we did before)

4. Back on GitHub, enable Pages and link in the repo’s About section
   
   
   Switch drivers!
   
   

5. Now on the other computer, clone the repo down from GitHub

6. Let’s make it responsive by adding our viewport meta tag

7. Also add in our reset and create and link to a style.css

8. Start with some mobile-first styles! Use base CSS variables for colors, type size, spacing and a media query to make them responsive

9. Commit this and push it up—same as before!
   
   
   Switch drivers!
   
   

10. Back on the first computer, pull down the changes

11. Try a bit of our new layout here—a flex column that switches to a row at larger breaks, variables for gap, etc.

12. Add a @media print query and adjust color/spacing properties for the printed page

13. …repeat until the project is done!

For Next Week #

• You’ll be moving into the next phase of your Spread projects. Narrow your design directions based off our coming Figma feedback, and then move into code with your partner:

  Project 2 Pair Programming

• 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:

  Submission Form