Week 6ART 239 Web Design I

Class Notes for Monday 10/8/18, Wednesday 10/10/18

Web Site Research & Analysis Assignment

Presentation Date: Monday, October 15th

Your grade will be based on how well you explain how the site you chose uses DESIGN ELEMENTS and PRINCIPLES as well as TYPOGRAPHY, GRID STRUCTURE, and COLOR THEORY.

Design Presentation Rubric

What is Grid Layout?

Presentation PDF Download for Class 1 (Monday)

CSS Grid Terminology

grid container
Element containing a grid, defined by setting display: grid;
grid item
Element that is a direct descendant of the grid container.
grid line
Horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid. Grid lines can also be named for easier reference.
grid cell
The intersection between a grid row and a grid column.
grid track
The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks are vertical.
grid area
Rectangular area between four specified grid lines. Grid areas can cover one or more cells.
grid gap
Empty space between grid tracks, commonly called gutters.
grid-template-columns
Draws grid lines. Takes a list of length values (em, px, %, fr, etc.) denoting the distance between each line.
grid-template-rows:
Draws grid lines. Takes a list of length values (em, px, %, fr, etc.) denoting the distance between each line.
fraction (fr) unit
The fr unit represents a fraction of the available space in the grid container.

Review Floats and Clears

See Week 5 Notes

Sematic page structure

<header>
    <nav>Primary site navigation<nav>
</header>
<main>
    All main content goes in here.
    <section>Use sections to semantically group content.</section>
</main>
<aside>
    Content connected to the main content goes here, think of this as a “sidebar”. </aside>
<footer>
    Copyright, social link content can go here
    <nav>Secondary or redundant navigation<nav>
<footer>

Background Images, Positioning & z-index

Presentation PDF Download for Class 2 (Wednesday)