Categories
Langara Outlines

PUBL 1220 Outline (2017)

Publ 1220 Web Design Fundamentals
Credits: 6 Room: A247
Contact Info:
Kevin McMillan
Office A248
604-323-5941		 Days & Times:
Summer Term: May 01 – June 10, 2017
Tuesday 130–520
Tuesday 600–720 (lab)
Thursday 1130–320
Thursday 400–520 (lab)
Friday 1130–420  (lab)
Office Hours
Tuesday 1130–130
Or by appointment.

SKIP to Class Content

This Section A class will cover HTML & CSS design, and serve as a foundation for the Advanced Web Design & Web Production I courses in the second half of the summer.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

Learning Outcomes

By the end of the class, the student should be able to:

  • write and publish standards-compliant html & css
  • produce web designs utilizing flexible grids
  • produce graphics with appropriate size & characteristics for web
  • register and set up their own domains
  • produce “mobile first” responsive layouts
  • integrate JavaScript into their designs

Textbooks & Costs

There is no textbook for this class. We will use primarily online sources in the course. Here are a few:

A Good Overview of HTML & CSS
MarkSheet HTML & CSS Tutorial

A Good Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Lynda.Com Sublime Text Course:
Learning Sublime Text 2

Lynda.com Videos
HTML Essential Training
CSS Essential Training 1
CSS Essential Training 2

An Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
https://websitesetup.org/html5-cheat-sheet/

Emmet Documentation & CheatSheet
Documentation
Cheatsheet

Students will, however, have to spend a small sum on registering a domain and hosting a site, which should come to less than $20. This will be discussed in greater detail in class.

Department Policies

The complete Publishing Department policies can be found on the studentshare server in COLLABORATIVE / PUBL / Student Access Files Administrative. Here is a brief summary.

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Know, therefore, that there no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Every Friday lab period will begin with a short test, on material covered in previous weeks, as well as indicated readings.

Assignment Due Dates & Marks
Assignment 1: Resumé May 19 10%
Assignment 2: Own Domain May 30 10%
Assignment 3: Magazine Mockup June 09 30%
Lab Exercises  Ongoing 15%
Weekly Quizzes / Tests Fridays 15%
Midterm  May 26 20%

Assignment Descriptions Available Here

Abbreviations used in my marking & comments

May 02: HTML & CSS Basics

Tuesday Lecture: HTML Basics

  • Overview of Summer PUBL web classes
  • Introduction to Sublime Text editor
  • Web Roles / Jobs: Designer, Developer, UX, Content Strategy, IA, Project Management, etc
  • HTML5 Document Structure
  • Basic HTML Tags: h1, h2, etc, p, ul, ol, dl, img, br, blockquote
  • Phrase Elements: b, i, strong, em, small, q
  • Attributes
  • Links: inside site, outside site, inside page
  • Paths
  • HTML Validation
  • SFTP

Tuesday Lab

Thursday Lecture: CSS Typography & Box Model

  • Cascading Style Sheets: Separation of Content & Presentation
  • CSS Selector & Declaration Syntax
  • Color Values: Hex, RGB, & RGBA
  • CSS Units of Measure
  • CSS Text Properties
  • CSS Font Stacks
  • Basic Font Hosting (time permitting)
  • CSS Validation
  • The Box Model: Margin, Padding, Border
  • Time Permitting: Responsive Images
  • Discussion of Resume Assignment [ Previous Examples ]

Thursday Lab

Friday Lab

  • Quiz No 1: based on class work & Marksheet chapters 2-3
  • Work on Assignment One: Resumé

Readings For This Week:

Resources

CSS Inspiration

May 09: Floats / Layout / Hosted Fonts

Tuesday Lecture:

  • Hosted Fonts: Google
  • DIVs, SPANs
  • HTML5 Sectioning Elements: Article, Header, Footer, Nav, Section
  • Fela Kuti Text Exercise: Sectioning Elements
  • Classes, IDs, Tags
  • The Float Property
  • The Clear Property
  • The Clearfix Hack
  • Descendent Selectors

Tuesday Lab

Thursday Lecture

  • Chrome Developer Tools
  • List-Based Menus
  • Display Property
  • Background Properties
  • Basic Responsive Design

Thursday Lab

  • Finish exercises assigned Tuesday
  • Work on Assignment One: Resumé

Friday Lab

Readings For This Week:

Resources

Font Hosting Examples

Typography Resources

May 16: Responsive Web Design

Tuesday Lecture

  • Domains & Hosting
  • More Responsive Web Design
  • Mobile First
  • Viewport Meta Tag
  • Icon Fonts
  • Positioning

Tuesday Lab

Thursday Lecture

  • Web Graphics Formats
  • Continuation of Tuesday topics

Thursday Lab

Friday Lab

  • Quiz No 3
  • Work on Resume (due today)

Resources

May 23: Emmet /CSS Transitions & Transforms / JavaScript

Tuesday Lecture

  • Emmet
  • JavaScript: Events & ClassList
  • JavaScript Menu Treatments
  • Transitions,
  • Modernizer
  • Basic jQuery

Tuesday Lab

Thursday Lecture

  • Continuation of Tuesday Topics
  • jQuery Shakespeare Exercise

Friday Lab

  • Midterm Exam

Resources

May 30: Tables, Forms, Flex

Tuesday Lecture

  • CSS Transforms & Transitions
  • Basic JS
  • Form Elements, Tables
  • Making a form work
  • Flex

Tuesday Lab

Thursday Lecture

  • More Flex

Thursday Lab

Friday Lab

  • Quiz No 5
  • Lab Exercises
  • Start final assignment: Magazine

Resources

June 06: Accessibility / Review / Work

Tuesday Lecture

  • More Flex

Tuesday Lab

  • More Flex

Thursday Class Time

  • Work on Magazine Mockup

Thursday Lab

  • Work on Magazine Mockup

Friday Lab

  • Magazine MockUp Due

Resources