Week 3: 2/14 + 2/16

Monday 2/14

Activity 1: Portfolio Brief

We will start the class with a pair review of your progress on your Portfolio Briefs. I will give you some time to get your materials together and then pair you off. Each of you will take about 5-7 minutes to show your work so far and look at the Portfolio Brief Scoring Rubric to see how you are doing in meeting the project requirements. Then you will take some time to talk together about challenges you see, questions you have or anything else related to the Portfolio and Portfolio Brief.

Some pointers to help:

  • Comments should remain positive, what they have done well and what they can add to help meet all of the areas in the rubric
  • Quick check
    • Do they have a document (Word, Google Doc etc)?
    • Are all of the sections of the document labeled (see Organization)?
    • Do you understand the Target Audience and Goals?
    • Can you look at the wireframes and get a sense of what each page will be like? Are there wireframes for mobile, medium and large screen sizes?

Activity 2: Gestalt Principles – Proximity

Today we will look at the Gestalt Principle of Proximity.

The basic way to use this principle is to pay attention to the spacing around your elements. If a few elements are all in a group and related to each other then the spacing between them should be less than the spacing between the group and the rest of the elements on the page.

Here is an example of how you can add and remove padding and margin to help define groups of information. In fact, only margin was used in third example to change the spacing on elements.

See the Pen Gestalt Principles: Proximity by Christopher Stein (@profstein) on CodePen.

Proximity and Typography: Try it out

After looking at that we will use this CodePen to have you try your hand at proximity in typography.

Activity 3: CSS Grid Introduction

We are going to start to learn CSS Grid today. We will look at the following resources:

After we look at some of the links in the CSS Grid Post, we will try the CSS Grid Game. Finally, we will go through as many of the examples in my CSS Grid Examples as we can get through before the end of class.

Wednesday 2/16

Activity 1: CSS Grid

We will pick up where we left off last week and look at

If we have time we may also look more at the CSS Games

Activity 2: Media Queries

Your first project that will be due in a few weeks is a responsive web site. Responsive sites have:

  1. Fluid Layout (the widths of things are not fixed and can expand and contract)
  2. Flexible Media (images and video adjust with the width of their containers)
  3. Media Queries (the layout changes at different device widths)

CSS Grid and Media Queries go well together and allow you to quickly create responsive layouts. To explore this we will look at the

Activity 3: Portfolio Brief Work

I will give you some time at the end of class to work on and ask questions about your Portfolio Brief documents.

Leave a comment