Categories
Langara Outlines

WMDD 4815 Outline (2017)

NOTE: this outline is for a previous running of the class. To go to the current outline, use the menu at the top of the page.

WMADD 4815 HTML / CSS 1
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941		 Days & Times:
Spring 2017
Wednesdays Jan 04–April 05
Section 1
Lecture: 8:30–11:30
Lab: 11:30–1:30Section 2
Lecture: 2:30–5:30
Lab: 5:30–7:30

Office Hours
Monday 2:30–5:30
(or by appointment)

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.

Official Print Outline ( pdf – note, the time listed in the PDF is for section 1 )

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
MarkSheet.io: A Free HTML/CSS Tutorial

Lynda.com Videos
Other topics are well-covered by Lynda.com videos.

How to login to Lynda.com using your Langara ID.

HTML Essential Training
CSS Fundamentals
Making Sense of the CSS Box Model
Up And Running With Sublime Text 2
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
https://websitesetup.org/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 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é 15%
Assignment 2: Magazine Mockup 20%
Major Lab Exercises 15%
Quizzes 15%
Midterm 15%
Final Exam 20%

Assignment Descriptions

Week 1: Jan 04 ( HTML Basics )

HTML Semantics / Sublime Text  Intro
h1-h6, p, ul, li, a, img
sftp
html validation

Lab / Class Files

Links

Resources

Required Reading

Required Viewing

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

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

Links

Lab Exercises

Required Viewing

Required Reading

Next Week 8:30am: 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
  • SUBLIME TEXT: multiple cursors, tag wrap, split into lines

Week 3: Jan 18 ( Graphic Design & Typographic Principles )

Test Number 1
Alignment, Contrast, Proximity, Repetition, Readability

Lab Exercises

  • To be determined

Required Viewing

Tools: Color Theory Links & Palette Generators

  • Color Palette Generators & Color Theory Links

Week 4: Jan 25 ( Traditional CSS Layout Techniques )

Floats, Clears, Clearfix, Display Properties

Lab Exercises

Week 5: Feb 01 ( Responsive Web Design 1 )

Four Pillars of Responsive Web Design 
CSS Grids
Mobile First

Lab Exercise

Resources

Week 5: Feb 08 ( Responsive Web Design 2 )

Test Number Two
Thinking inside and outside the grid.

Lab Exercise

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

Week 7: Feb 15  ( READING WEEK )

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

Week 8: Feb 22 ( Midterm / Self-Made Grids )

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

The remaining time will be devoted to the learning how to make our own grids.

Class Exercise

Week 9: March 01 ( Graphics & Emmet )

File formats & usage,
Background Images,
CSS Gradients
Scalable Vector Graphics (SVG)
Icon Fonts

Smart & efficient authoring

Lab Exercise

Resources

Week 10: March 08

Forms / Tables

Final Exam Practice Exercise:
Build this layout. Make your own grid.

Week 11: March 15

Media
Video / Sound

Week 12: March 22

Work Day

Week 13: March 29: Final Exam Prep

Magazine Assignment Due. 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.

Files for Practice Exam: NYT MockUp