Designing on a Grid

Objectives

In this lessons, students will learn:

  • How to design/build on a 12 column grid


(960 Grid System Demo)


Photoshop

  • PSD document: analog-design.psd (layered file)
  • Use 12 column Grid
  • Use the image provided to obtain measurements needed (height, width, spacing)

Code

  • HTML 5 document: analog-grid.html
  • Embebed Style Sheet
  • Dirctory Structure

analog-designLogo

  • Arial Bold
    Font  size: The 14px, Analog 44px, Specialist 16px

Navigation

  • Arial Bold
    • Font  size: 14px

Body Text

  • Arial Regular
    • Font  size:  14px
    • Line height: 18px

werlitzer hohnerrhodes

Color

  • #3C1F1F
  • #333333
  • #990000

Menu Border

  • Top line weight: 2px
  • Bottom  line weight: 1px

Folder: lastname_firstname-Grids

  • Design Files: PSD, PNG
  • Coded Files: HTML5 and images (folder)
  • Directory structure

Share folder link to the Google Classroom > Grids.

DUE: Monday, February 12, 2018

HTML5 Semantic Exercise

Objective
In this class exercise, students will demonstrate their knowledge

  • Create the structure of  from pre-designed websites using HTML5 semantic elements

Class Exercise – HTML5

  

  • Choose One of the Delice layouts (delice.html) and the News layout (news.html) to create the structural layouts (no images are needed) for each using HTML5 Semantic elements.
  • Use Photoshop to obtain the measurements needed for width and height

Folder name: lastname_firstname-html5.
Share folder link to the Google Classroom > HTML5.