Designing on a Grid


In this lessons, students will learn:

  • How to design/build on a 12 column grid

(960 Grid System Demo)


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


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


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


  • Arial Bold
    • Font  size: 14px

Body Text

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

werlitzer hohnerrhodes


  • #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

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.