Categories
Langara Outlines

PUBL 1220 Outline

Langara College Web Design Fundamentals (Publishing 1220). 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 semester.

Publ 1220 Web Design Fundamentals
Credits: 6 Room: A247
Contact Info:
Kevin McMillan
Office A247b
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 Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Sublime Text Course:
Sublime Text Video Course ( Free Registration required )

Lynda.com Videos
HTML Essential Training

An Excellent CSS Reference
Codrops CSS Reference

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

Students will, however, have to spend a small sum on registering a domain (approximately $10) and hosting a site (approximately $5/month). If you already have a site, you will not need to get another.

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.

Assignment Due Dates & Marks
Assignment 1: Resumé May 17 10%
Assignment 2: Own Domain May 20 5%
Assignment 3: Magazine Mockup June 02 15%
Assignment 4: Business Site or Portfolio Site June 10 15%
Lab Exercises  Ongoing 20%
Weekly Quizzes / Tests Fridays 15%
Midterm  May 27 20%

Assignment Descriptions Available Here

May 02: HTML & CSS Basics

Tuesday Lecture: HTML Basics

  • Overview of Summer PUBL web classes
  • Web Roles / Jobs: Designer, Developer, UX, Content Strategy, IA, Project Management, etc
  • Death to the USB Stick
  • DO YOU HAVE THE UX TO BE PRESIDENT?
  • 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
  • Sublime Efficiencies Exercise
  • FTP

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
  • CSS Validation
  • The Box Model: Margin, Padding, Border
  • Time Permitting: Responsive Images

Thursday Lab

Friday Lab

  • Quiz No 1
  • Work on Assignment One: Resumé

Readings For This Week:

Resources

CSS Inspiration

May 09: Floats / Layout / Hosted Fonts

Tuesday Lecture:

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

Tuesday Lab

Thursday Lecture

  • Chrome Developer Tools
  • Containing Floats: the magical clearfix
  • List-Based Menus
  • Display Property
  • Background Properties
  • Basic Responsive Design

Thursday Lab

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

Friday Lab

  • Quiz No 2
  • Work on Assignment One: Resumé

Readings For This Week:

Resources

Font Hosting Examples

Typography Resources

May 16: Responsive Web Design

Tuesday Lecture

  • Domains & Hosting
  • Graphics for the Web
  • Grid Systems for the Web: Fluid Grids
  • Responsive Web Design

Tuesday Lab

Thursday Lecture

  • RWD continued

Thursday Lab

Friday Lab

  • Quiz No 3
  • Fender Vs Gibson Exercise

Resources

May 23: More RWD + Icon Fonts

Tuesday Lecture

  • Mobile First
  • Approaches to Retina displays (and their ilk)
  • SVG
  • Icon Fonts
  • Emmet

Tuesday Lab

Thursday Lecture

  • Finish lab exercises
  • Work on Magazine Assignment

Friday Lab

  • Midterm Exam

Resources

May 30: Tables, Forms, JavaScript

Tuesday Lecture

  • Midterm Review
  • Transitions
  • Transforms

Tuesday Lab

Thursday Lecture

  • JavaScript / jQuery

Thursday Lab

  • try.jquery.com ( bring headphones )

Friday Lab

  • Quiz No 5
  • Start final assignment: Portfolio / Business Mock Up

Resources

June 06: Speed + Accessibility

Tuesday Lecture

  • More JavaScript: Menus
  • Accessibility
  • ARIA Roles

Tuesday Lab

  • Work on Portfolio Assignment

Thursday Class Time

  • Final Test

Thursday Lab

  • Work on Portfolio Assignment

Friday Lab

  • Portfolio Mock Up Due

Resources