1. Watch the last video in the Don’t Fear the Internet series on traditional layout. These are basic but necessary layout tools, and the web has gone well beyond this, but if you are not 100% sure, it is good to watch the whole series.

Quiz part 2

2. Do the flexbox and grid Worksheet (quiz 2)
3. Open up the worksheet, right-click and show page source. Select all. Copy and paste into a blank Brackets document. Save as quiz-2.html and follow instructions. You will be writing CSS. Do not change the HTML.
4. Watch the video by Rachel Andrews .
5. The following links provide detailed information of CSS flexbox and grids:
   1. For a deeper understanding of flexbox check out What Happens When You Create A Flexbox Flex Container?, Everything You Need To Know About Alignment In Flexbox, How Big Is That Flexible Box?, and Use Cases For Flexbox.
   2. For a deeper understanding of CSS grid at Smashing Magazine, Creating a Grid Container, Grid lines, and grid template areas.

Create a Responsive Wireframe of the Midterm

6. Implement @media break points for SmartPhone and tablet if you designed your website for your laptop screen. @media go below your large screen styles. Note that if you designed your website for the smart phone first, you create tablet and large screen @media queries.
7. Apply @media queries to the section element of the portfolio that you marked up last week, and change the border or background color to test out if the @media queries work. If they work, target the next biggest element, like header, to make sure it also changes. Do so for the navigation, main article, and footer elements, and create a wireframe.
8. Tweak the elements so they show correctly for each media. The wireframe should update to best display the contents on each medium. When the wireframe works smoothly, it and link it to the portal.
9. Fill out each part of the wireframe with pictures and text as rendered in step 8.

Heads Up

10. In 2018 The New School spent the week on DISRUPT CLIMATE INJUSTICE. Create a five page website highlighting one or another aspect of climate change and build a convincing website. State your case, back it up with facts and tell the world what you are going to do about it. I do not expect you to write so much as express your opinion with the facts and pictures that you gather.
11. This semester the school has the Climate Emergency Teach-In on March 2, Monday, from 11:00 to 3:00. I will be there. One possibility is to attend and do your website on the climate emergency teach-in.
    

    Grading Criteria

    I am looking to see how well you can juggle these boxes, and it takes a while to move them around through the document flow.

    It is a lot like when you were a kid, playing with blocks, only here that world is upside-down, as you start on top, and build your way down. You will get the hang of it by doing it.

    Validating your work often is a good technique to keep you on the strait and narrow path. Once you get better, you need not check so often but right now, check every few lines of code.

    I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity as you manipulate the elements in the document flow to build your page.