Week Nº 8

Everyone should have received their grading/​evaluation yesterday for their Manuscript!

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

We’ve thought more about our responsive topic from last week, and want to discuss one update:

Responsive Design: px media queries

For our first topic today, we’ll get into some more modern CSS layout:

Finally, Flexbox

And for our second, we’ll take a look its spiritual continuation in grid:

And (CSS) Grid

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. Take a look at it in our friendly neighborhood DevTools

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

10. Commit this and push it up⁠—same as befItore!
    
    
    Switch drivers!
    
    

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

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

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

14. …repeat until the project is done!

• Again review our two topics from today! There is a lot of minutia (and many links) there we will have to move quickly through, but would like you to reference.

• 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 Nº 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 progressively 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 URL⁠s as usual:

  Submission Form