Langara Outlines

WMDD4815 Outline (2018)

Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
Days & Times:
Spring 2018
Mondays: 230 – 720
(Spring term runs Jan 02-April 09)
Office Hour
Friday 930-1030

SKIP to Class Content

This class will cover HTML & CSS design and development, and serve as a prerequisite for the HTML / CSS 2 and Content Management Systems courses next semester.

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

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

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Understand HTML document structure & semantics. Produce economical and validated code.
  • Build complex layouts with fluid css grids.
  • Integrate media into designs. Use code-based methods when possible to conserve bandwidth, maintain resolution, and future-proof the design.
  • Choose appropriate graphics formats.
  • Use media queries to make designs adapt to device properties and capabilities.
  • Use progressive enhancement, designing for modern devices, while ensuring successful fallback to less capable devices and browsers

Textbook / Reference Material

There is no textbook for this class. We will use primarily online sources in the course.

Required reading for some of the early classes is found in A Free HTML/CSS Tutorial Videos
Other topics are well-covered by videos.

How to login to using your Langara ID.

HTML Essential Training
CSS Fundamentals
Making Sense of the CSS Box Model
Learning Atom
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors

An Excellent CSS Reference

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet

A Free Online HMTL & CSS Textbook:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that there are 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.

Assignments & Assessments
Assignment 1: Resumé  Feb 13 15%
Assignment 2: Magazine Mockup  Mar 26 20%
Weekly Lab Exercises 15%
Quizzes 15%
Midterm  Feb 19 15%
Final Exam  tba 20%

Assignment Descriptions

Week 1: Jan 08 ( HTML Basics )

HTML Semantics / ATOM  Intro
h1-h6, p, ul, li, a, img
html validation

Lab / Class Files



Required Reading

Required Viewing

Week 2: Jan 15 ( HTML Sectioning / CSS Typography 1)

NOTE: this Friday’s office hour is cancelled because I have a medical appointment. If you need to see me at another time, get in touch.

HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
CSS Validation
ATOM Efficiencies Review


Lab Exercises

Required Viewing

Required Reading


Next Week 2:30pm: Our First Test

  • HTML: h1, h2, h3, h4, img, header, nav, article, a, ul, li, paths
  • CSS: how to specify fonts, css inheritance, box model, classes
  • ATOM selection & navigation efficiencies

Week 3: Jan 22 ( Design Principles / Trad CSS Layout  )

Test Number 1
Principles: Alignment, Contrast, Proximity, Repetition, Readability
Floats, Clears, Clearfix, Display Properties

Lab Exercises


Week 4: Jan 29 ( Responsive Web Design 1 )

Four Pillars of Responsive Web Design
Mobile First

Lab Exercise


Week 5: Feb 05 ( Responsive Web Design 2 )

Quiz Number Two
The Idea & History of Grids in Design

Lab Exercises

First Assignment ( resumé ) due by Tuesday, Feb 13 at 9am.

Week 6: Feb 12  ( READING WEEK )

No classes this week. College closed Monday, but open other days.

Week 7: Feb 19 ( Midterm / Positioning )

For the midterm, you will be given a layout to build within two hours.

The remaining class time will be devoted to the CSS Positioning property.

Class Exercises


Week 8: Feb 26 ( Graphics & Emmet )

The beauty of HSL & HSLa
File formats & usage

Background Images
Multiple Backgrounds
CSS Gradients
Scalable Vector Graphics (SVG)
Icon Fonts

Smart & efficient authoring
Graphics production workflows

Lab Exercise


Week 9: March 05 ( Forms / Tables )

Forms / Tables

Week 10: March 12

Video / Sound

Lab Files

Lab Exercise

Week 11: March 19

Work & Consult Day

Week 12: March 26: Final Exam Prep

Magazine Assignment Due by Midnight.
Please review this checklist before you stop working on it.

The exam will be like the midterm: you will be given a layout to build within a time period.

Final Exam Practice Exercise: Build this layout.

Week 13: April 02: Easter Monday:

No class: college closed.

Week 14: April 09 Final Exam

In class: like with the midterm, you will be given a layout to complete over 2 – 3 hours.