Langara Outlines

WMDD4835 Outline (2017)

The final exam will take place in the last class session—not in the exam period as officially scheduled. The exact dates are:

  • Exam: April 03
  • Final Assignment: April 07
WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941
Days & Times:
Spring 2017
Mondays, Jan 09–April 03
8:30–11:30 (lecture)
11:30–1:30 (lab)
Office Hours
Monday 230–530 or by appointment

SKIP to Class Content

This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester.

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.

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

Interactive jQuery Course
try.jquery.com

Lynda.com Videos
HTML5 Structure, Syntax, & Semantics
SASS Essential Training
jQuery for Web Designers
Bootstrap 3 Essential Training
Advanced Responsive Layouts With CSS Flexbox

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

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

MarkSheet.io Tutorials
Chapter 8: Advanced CSS ( gradients, transitions, animations, transforms )
Chapter 9: SASS (variables, nesting, mixins, extends

Interactive FlexBox Froggy Game

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.

Assessments
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 09 ( 4815 Review / Advanced Selectors )

  • 4815 Final Assignments & Exam Review
  • Advanced Selectors: Fela Kuti
  • IcoMoon.io

Lab / Class Files

Week 2: Jan 16 ( CSS Transforms & Transitions, Vendor Prefixes )

  • Video in HTML
  • CSS Transforms
  • CSS Transitions
  • Vendor Prefixes

Lab / Class Files

Links

Week 3: Jan 23 ( CSS Transitions & Animation )

  • Responsive Menu Patterns with Transitions & Animations
  • Using JS to change classes

Class / Lab Exercises

Links

Week 4: Jan 30 ( Responsible Responsive Design )

  • Test Number 1
  • Emerging Image Practices
  • SVG Data Embeds
  • CSS Background & Gradient Review
  • Advanced Media Queries
  • Making your own icon font

Lab Exercise

Homework

Week 5: Feb 06 (jQuery 1)

  • Test Number 2
  • Selectors
  • Traversal
  • Document Manipulation

References

Class Exercise

  • to be determined

Week 6: Feb 13 ( Reading Week )

No class: Reading Week

Week 7: Feb 20 ( jQuery 2 / SASS 1)

  • Events ( Mouse, Keyboard )
  • Conditions
  • Loops
  • jQuery Plugins
  • SASS Variables & Partials

Class Exercise

Links

Week 8: Feb 27  ( Midterm / SASS 2 )

  • Midterm will take 2 hours
  • Mixins / Math / Nesting / Functions

Week 9: March 06 ( Accessibility / Bootstrap 1)

  • ARIA Roles
  • Bootstrap Grid Classes
  • Bootstrap CSS Classes

Week 10: March 13 ( Bootstrap 2)

  • Bootstrap Navigation
  • Bootstrap Media
  • Bootstrap Form Styles
  • Bootstrap JavaScript

Class Exercise

  • to be determined

Week 11: Mar 20 ( FlexBox 1)

  • Display: Flex
  • Rows & Columns
  • Wrapping, Aligning, Reversing
  • Exceptions
  • Browser Support

Links

Lab Exercises

Week 12: Mar 27 ( Flexbox 2 )

Links

Midterm / Midterm Exercise

 Week 13: April 03 Work Day

  • FINAL EXAM
Standard