Categories
Langara Outlines

WMDD4835 Outline (2019)

WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941		 Days & Times:
Spring 2019
Tuesdays 930-1220
(Spring term runs Jan 02 – April 18)
Office Hours
Tuesday 130-430

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.

Learning Outcomes

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

  • Use efficient HTML & CSS coding methods
  • Use CSS transitions & animations
  • Use modern JavaScript techniques
  • 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 will be listed along with each week of course material.

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
https://websitesetup.org/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.

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 08 ( Advanced Selectors / HSL )

Links

Due by beginning of next class:

  • Advanced Selectors
  • HSL Color Exercise

Week 2: Jan 15 ( CSS Flexbox )

Links

Due by beginning of next class

  • Flexbox Froggy Completion
  • Light Photo Blog Layout

Week 3: Jan 22 ( Icon Fonts / Flexbox Layout Exercise )

Due by beginning of next class

  • WP Midterm Theme Mockup

A Detailed Walk Through the Midterm Theme Mockup Exercise

The explanations below are for an earlier version of the exercise, but it’s actually a more complex responsive layout, so it’s definitely worth reviewing. The JS component uses jQuery with pre-ES6 syntax, but nevertheless, going through the exercise should help it make more sense if you struggled with it. I would do the JS part differently today (and I would not lose sleep about not supporting IE9 either).

 

Week 4: Jan 29 ( CSS Grid 1 )

  • Midterm WP Theme Mockup Review
  • Flex vs Grid / Flex & Grid
  • Feature Queries / Modernizr
  • Fallback Approaches

Lab Exercise

Due by beginning of next class

  • CSS Grid Layouts in Abstract
  • The Eatery

Links

Week 5: Feb 05 ( Grid 2 / Form Styling / Transitions / Animation / CSS Variables)

Links

Week 6: Feb 12 ( continuation of last week’s topics )

  • CSS Blend Mode Tester App continued

Week 6: Feb 19 ( Reading Week )

  • No classes this week, but the homework exercises will prepare you for the midterm.

Reading Week Homework

Week 7: Feb 26 ( Midterm  )

Week 9: Mar 05 ( Build Tools )

  • Gulp Setup
  • Preprocessing ( SASS / LESS )
  • Atom Theme Build
  • SASS: Variables, Partials, Mixins

Links

Week 10: Mar 12 ( Build Tools 2 )

Week 10: Mar 19 ( Responsible Responsive Design )

    • SRCSET
    • Picture
    • WebP
    • CSS Clipping Paths

Lab Exercises

Week 11: Mar 26 ( Work Day)

Week 13: Apr 02 ( Work Day)