Langara Outlines

WMDD4835 Outline (2018)


Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A248
Days & Times:
Spring 2018
Wednesdays: 230-720
(Spring term runs Jan 02-April 09)
Office Hours
Monday 10:00-12:00

SKIP to Class Content

This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester. It will share an assignment with WMDD4840 (Content Management Systems).

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

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

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab. A portion of your class mark will be for completion of these exercises.

Note: the final exam will take place in the last class session—not in the exam period as officially scheduled. This will allow you to spend additional time on the final assignment, which will be due during the exam period.

  • Final Exam: April 04
  • Final Assignment Due Date: April 13

Learning Outcomes

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

  • Use efficient HTML & CSS coding methods
  • Use CSS transitions & animations
  • Use JavaScript libraries such as jQuery
  • Use frameworks like Bootstrap
  • Use CSS Preprocessors
  • Rapidly prototype designs and code
  • Critique the code and designs of peers
  • Respond professionally to critiques of their code and designs
  • Use emerging methods of layout and interaction, while ensuring successful fallback for older devices and browsers

Textbook / Reference Material

We will use primarily online sources in the course. A few general ones are listed here. More specific ones are listed along with each week of course material.

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

An Excellent CSS Reference

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet


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 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.

Main Assignment 30%
Quizzes 10%
Lab Exercises 20%
Midterm 20%
Final Exam 20%

Main Assignment Description

Note, also, that dates listed are approximate: topics may take more or less time in response to class progress.

Week 1: Jan 03 ( Advanced Selectors )


Week 2: Jan 10 ( CSS Flexbox 1)


Lab Exercises

Week 3: Jan 17 ( CSS Flexbox 2)


Week 4: Jan 24 ( CSS Grid Module 1)

  • Grid Theory & Syntax
  • Flex vs Grid / Flex & Grid
  • Feature Queries / Modernizr
  • Fallback Approaches

Lab Exercises


Week 5: Jan 31 ( CSS Grid Module 2)

  • Quiz 1
  • Flex Lab Exercises Review
  • Grid: minimax()
  • Browser Support: @support / Modernizr
  • Fallback Strategies
  • Typekit
  • IcoMoon

Lab Exercises


Week 5: Feb 07 ( Transforms, Transitions, Animation)

  • Menus Galore
  • JS for transitions

Lab Exercises


Week 6: Feb 14 ( Reading Week )

  • No classes this week, so you can study for next week’s midterm…

Week 7: Feb 21 ( Midterm / Responsible Responsive Design )

Week 9: Feb 28 ( JavaScript)

  • JS Events
  • JS Form Handling
  • More CSS Grid
  • CSS Form Styling
  • CSS Blend Modes


Week 10: Mar 07 ( Preprocessing: SASS)

  • Variables
  • Partials
  • Mixins


Week 11: Mar 14 ( Build Tools: Gulp)


Week 12: March 21 ( Bootstrap)

  • The pros of front-end frameworks
  • The cons of front-end frameworks


Week 13: Mar 28 ( Exam Prep / Work Day)

Week 14: April 04 ( Final Exam, in class. )

  • Exam will again be a 2 – 3 hour layout exercise.