Langara Outlines

WMDD4840 Outline (2018)

WMADD 4835 Content Management Systems
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
Days & Times:
Spring 2018
Fridays: 1230-520
(Spring term runs Jan 02-April 09)
Office Hours:
Monday 10:00-12:00

SKIP to Class Content

This class will cover Content Management Systems, specifically WordPress.

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

  • install a Content Management System (CMS) framework on a production web server
  • configure a local testing environment with the same CMS
  • evaluate, install and configure appropriate CMS themes, modules, widgets, and plugins
  • create content, media, menu structures & content types
  • create and restore data and system backups
  • identify and implement appropriate security and anti-spam measures (user accounts, permissions, patches, etc.)
  • customize themes
  • write basic themes

Textbook / Reference Material

There is no textbook for this course: we will use primarily online sources:

Lynda.com Videos
Installing and Running WordPress: MAMP  (mac & windows )
Installing and Running WordPress: WAMP ( windows )
WordPress: Essential Training
WordPress: Building Themes From Scratch Using Underscores
WordPress: Developing Secure Sites

WordPress References
The WordPress Codex

WordPress Cheat Sheets
WP Mega Cheat Sheet
WP Developer Super 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: Theme Project 30%
Quizzes 15%
Lab Exercises 15%
Midterm 20%
Final 20%

Final Assignment Description (Revised March 2017)

Note, also, that dates listed can change in response to class progress. 

Week 1: Jan 05 ( Intro to Content Management )

  • CMS vs Static Sites / WordPress.com vs WordPress.org models
  • Setup of Local Testing Environment: MAMP
  • WP Dashboard
  • WP Editing Area
  • Media / Galleries
  • Embeds
  • Posts
  • Permalinks

Weekly Videos

Resources

Lab Exercise

Week 2: Jan 12 ( Basic Content Types )

  • Posts vs Pages
  • Categories & Tags
  • Excerpts
  • Settings / Customizer
  • Menus
  • Site Backup

Lab Exercise

Weekly Videos

Week 3: Jan 19 ( Themes & Plugins)

  • A range of themes for business, portfolios, etc
  • JetPack
  • Common plugins

Lab Exercise

Weekly Videos

Week 4: Jan 26 ( Users / Comments / Security )

  • Test Number 1
  • User roles
  • Comments / Anti-Spam Measures
  • Other comment systems
  • Security pt 1

Lab Exercise

Weekly Videos

Week 5: Feb 02 ( Backup / Restoration / Duplication)

  • A Range of Backup Options
  • Backup Automation
  • Site Transfer
  • Site Restoration
  • Security pt 2
  • Recovering from a hack

Resource

Weekly Videos

Week 6: Feb 09 (Midterm )

Week 7: Feb 16 ( Reading Week )

  • No classes this week.

Week 8: Feb 23  ( WP Theme Development 1 )

  • The Loop
  • Basic Template Tags
  • The WordPress Template Hierarchy

Resources

Week 9: Mar 02 ( WP Theme Development 2: _s )

  • Underscores
  • functions.php
  • theme support
  • menus
  • scripts
  • fonts

Weekly Videos

Resources

Week 10: Mar 09 ( WP Theme Development 3: Code Reuse )

  • get_template_part()
  • wp conditions
  • underscores SASS

Week 11: Mar 16 ( WP Theme Development 4 )

Week 12: Mar 23 ( Work Day )

Resources

EXAM PREP / FINAL ASSIGNMENT PREP:

The following six-part exercise will help you prepare for the exam and the final assignment.

Week 13: Mar 30: Good Friday

  • College closed

Week 14: April 06: Final Exam

  • Exam will involve theme writing using _s.

 

 

Standard
Langara Outlines

WMDD4835 Outline (2018)

 

WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
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
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://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 03 ( Advanced Selectors )

Links

Week 2: Jan 10 ( CSS Flexbox 1)

  • Flexbox Froggy
  • Flexbox for Menus & Forms
  • The so-called Holy Grail Layout

Links

Week 3: Jan 17 ( CSS Flexbox 2)

  • Full layouts with Flex
  • Midterm WP Theme (not midterm test…)
  • Redunzl
  • Feature Queries

Links

Week 4: Jan 24 ( CSS Grid Module 1)

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

Links

Week 5: Jan 31 ( CSS Grid Module 2)

  • Advanced Layouts

Links

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

  • Menus Galore
  • JS for transitions & animation
  • Maintaining Accessibility

Links

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 )

  • Exam will be a 2 – 3 hour layout exercise.
  • Second part of the class will deal with ways to deal with Image Sizes in a world of high-density screens.

Week 9: Feb 28 ( jQuery)

  • Selectors-based syntax
  • Traversal
  • DOM Manipulation

Links

Week 10: Mar 07 ( Preprocessing: SASS)

  • Variables
  • Partials
  • Mixins

Links

Week 11: Mar 14 ( Build Tools: Gulp)

Links

Week 12: March 21 ( Bootstrap)

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

Links

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.
Standard
Langara Outlines

WMDD4815 Outline (2018)

 

WMADD 4815 HTML / CSS 1
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
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
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
Learning Atom
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
http://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 08 ( HTML Basics )

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

Lab / Class Files

Links

Resources

Required Reading

Required Viewing

Week 2: Jan 15 ( 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 22 ( 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

 

 

 

 

Standard
Langara Outlines

LangaraPRM Teams 2017

WORDPRESS DESIGNER
Nelson
Tessa
Ann-Sophie
Laura

WEB DESIGNER
Freda
Diego
Stephanie

( Potential DUAL ROLE in Interface/Animation: Diego / Nelson )

MEDIA ( Videos, Images, possible custom icons, etc)
Burhan
Rony
Marianna
Maisey

EDITORIAL
Victoria
Laura / Rony (PT)

PROMOTIONS
Marianna (PT)
Victoria (PT)

QA
Wallace
Maisey
Freda ( PT: after Web Design duties are largely over )

Standard
Langara Outlines

PUBL 1232 Assignments 2017

One: Install WordPress at Your Own Domain

For this exercise, I want you to use your Host Company Control Panel to install WordPress at your own domain at the following location:

http://yourdomain.com/publishingclass/demowp

If you already have a WordPress installation at your current domain, ask your host company asap if your hosting package allows you to have additional installations on the same domain. If it doesn’t, get in touch.

In the installation process, use your real email address for the admin user. That way, if you forget the password, you can get it mailed to you.

In that installation, make five posts. Each one will be the text of one of this year’s PRM articles. Each post must have at least one image, from this year’s magazine.

However, each post must be assigned to the author who wrote it. This means that in addition to posts, you have to make additional users for your site.

Each user is supposed to have a different email address, so just use fake ones for the additional authors. However, make the password of each user the same, so that it’s easy to remember. If you forget that password, you will have to login as the admin user to change it.

Feel free to customize the installation any way you want.

For two bonus marks, use your host company’s control panel and FAQ pages to figure out how to password-protect the demowp folder. Note: Do not use the WordPress protected-post feature to do this. This is outside of WordPress.

This is something you commonly will do in order to put work online for client approval without sharing it with the entire world.

If you do this, however, make sure that one of the IDs that can access that directory is kevinmcmillan with a password of ihatenickelback — make sure that that name and password are exact, or else I won’t be able to mark your site (other than by giving you a zero). As well, make sure that you password-protect the correct directory.

This is due Tuesday, June 27th.

 

Two: Themed Portfolio (or Otherwise) Site

For the second major assignment, set up a new WordPress site at the root level of  your own domain. This can be a portfolio site, or if you have other ideas about it, get in touch.

You have two options for this assignment. In order of challenge level and mark potential, they are the following. Option A will not get first-class marks.

Option A: Use A Theme from the WP Theme Repository

Option B: Make Your Own Theme

If you choose option B, you should use a “starter” theme like Underscores.

Regardless of the option chosen, you should obviously make a site that’s responsive.You should have a contact form. You should have a search field. You should have content attractively displayed. You should make decisions about file sizes and other design considerations in such a way as to maximize the impact of the site, on a range of devices and connection speeds.

You will hand in the following items:

  • A webloc file pointing to your site on the web. Definitely test that it actually works.
  • A Duplicator archive and installer file. Make the duplicator file from your local install, not from your live site. That way, you’re not copying your live site’s database name, user, and password.

This is due Thursday, August 03. If you have a lot of LangaraPRM duties at this time, small extensions are possible.

Standard
Langara Outlines

Marking Comments Abbreviations

Title
For Search Engine Optimization and Bookmark specificity, a best practice is to put the site name in the title, along with something page-specific. A page title like “article”, “contact” or “resume” does not provide a search engine much useful information. Bookmarks with titles like that are pretty much useless.
Validation
Either the HTML or the CSS, or both, did not validate. Remember to always validate your code: making your code as standards-compliant as possible is the best way to make sure it renders properly in as wide a range of browsers as possible.
Proximity
Adjust box model properties like margin and/or padding to bring related content closer together. Group elements so that there is less space between the related content pieces and more space between separate content.
Line-Length: long
If your line-length is too long (typically at Desktop width), the eye can get lost in the jump from the end of one line to the start of the next. Most typographers recommend between approximately 45 and 75 or 80 characters in your average line. Adjust font-size, box-model properties, or other aspects of the layout to maintain line-lengths within this range at all or at least most responsive breakpoints.
Line-length: short.
Conversely, if your line-length is too short (typically at Phone width), it’s harder to read because the eye has to move from the end of one line to the start of the next too often.
Line-height
The longer the line, the greater the line-height needed for the eye to comfortably jump to the next line. However, with shorter lines (as typically found at lower breakpoints), readability is often enhanced by decreasing the line-height.
Contrast
Dark text on a dark background (or light text on a light background) will be difficult for a lot of people to read. It is always better to have too much contrast than too little. Remember also, that we have no control over how bright the monitor a user is seeing your page on. If the monitor is a little bit dark, then reading that text will be even harder.
Spelling or Grammar
There are lots of online spellcheckers and grammar checkers.
Hierarchy
Content structure is not entirely clear.
Underlining
Underlining anything that is not a link is usually not a good idea: people think that text is a link. Consider using borders instead (they will go wider than the underlining, and will therefore be less likely to be confused for links).
Semantics
To ensure SEO and accessibility start at h1 and go through the headings in order. You can always modify sizes via CSS. Do not start at h3 simply because the default size fits your design.
Viewport
You did not include the VIEWPORT meta tag. This tells the browser not to scale the page down. This is important because otherwise the words in most webpages become unreadable.
As well, your media queries typically will not work without the viewport meta tag. The moral: always test your pages on phones and tablets as well as desktop. This problem is immediately visible when you check your work on actual devices. ( Everyone forgets that line of code from time to time … )
Stylesheet Order
If using a reset stylesheet, put it before your own styles. If using a grid stylesheet, put it between those two.
Justification
Be careful with justification in text. The narrower the paragraph, the more dangerous justification can be: it tends to introduce gaps in the text. In print, there are ways to compensate for that (manipulating tracking and kerning), but we do not have the same control on the web. As well, dyslexics apparently have more trouble reading justified text than left-aligned text. At the very least, you can disable justification as the line-length shortens (such as at phone width).
404s
You have broken page links. Check your paths.
Broken Images
You have broken links to images. Check your paths.
ALT
Some or all of your images are missing ALT attributes.
Deprecated Tags
You have used obsolete tags. Tags like CENTER, for example, have been removed from the language. As a rule (although there are exceptions), if a TAG only describes appearance, it is likely to have been deprecated.
Image Sizes
Either your images were not compressed properly, or they have not been sized properly.
Unsafe Fonts
Font or fonts chosen were not part of the standard “web stack” (or not hosted fonts). Consult www.cssfontstack.com for examples of websafe fonts.
Text/Box
Adjust margin or padding values to prevent text from getting too close to the edge of their boxes or to the edge of the browser window.
Standard
Langara Outlines

PUBL 1220 Outline (2017)

Publ 1220 Web Design Fundamentals
Credits: 6 Room: A247
Contact Info:
Kevin McMillan
Office A248
Currently without an office phone, but this will change.
Days & Times:
Summer Term: May 01 – June 10, 2017
Tuesday 130–520
Tuesday 600–720 (lab)
Thursday 1130–320
Thursday 400–520 (lab)
Friday 1130–420  (lab)
Office Hours
Tuesday 1130–130
Or by appointment.

SKIP to Class Content

This Section A class will cover HTML & CSS design, and serve as a foundation for the Advanced Web Design & Web Production I courses in the second half of the summer.

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

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

Learning Outcomes

By the end of the class, the student should be able to:

  • write and publish standards-compliant html & css
  • produce web designs utilizing flexible grids
  • produce graphics with appropriate size & characteristics for web
  • register and set up their own domains
  • produce “mobile first” responsive layouts
  • integrate JavaScript into their designs

Textbooks & Costs

There is no textbook for this class. We will use primarily online sources in the course. Here are a few:

A Good Overview of HTML & CSS
MarkSheet HTML & CSS Tutorial

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

Lynda.Com Sublime Text Course:
Learning Sublime Text 2

Lynda.com Videos
HTML Essential Training
CSS Essential Training 1
CSS Essential Training 2

An Excellent CSS Reference
Codrops CSS Reference

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

Emmet Documentation & CheatSheet
Documentation
Cheatsheet

Students will, however, have to spend a small sum on registering a domain and hosting a site, which should come to less than $20. This will be discussed in greater detail in class.

Department Policies

The complete Publishing Department policies can be found on the studentshare server in COLLABORATIVE / PUBL / Student Access Files Administrative. Here is a brief summary.

Course Structure

The class schedule is detailed below.

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

Every Friday lab period will begin with a short test, on material covered in previous weeks, as well as indicated readings.

Assignment Due Dates & Marks
Assignment 1: Resumé May 19 10%
Assignment 2: Own Domain May 30 10%
Assignment 3: Magazine Mockup June 09 30%
Lab Exercises  Ongoing 15%
Weekly Quizzes / Tests Fridays 15%
Midterm  May 26 20%

Assignment Descriptions Available Here

Abbreviations used in my marking & comments

May 02: HTML & CSS Basics

Tuesday Lecture: HTML Basics

  • Overview of Summer PUBL web classes
  • Introduction to Sublime Text editor
  • Web Roles / Jobs: Designer, Developer, UX, Content Strategy, IA, Project Management, etc
  • HTML5 Document Structure
  • Basic HTML Tags: h1, h2, etc, p, ul, ol, dl, img, br, blockquote
  • Phrase Elements: b, i, strong, em, small, q
  • Attributes
  • Links: inside site, outside site, inside page
  • Paths
  • HTML Validation
  • SFTP

Tuesday Lab

Thursday Lecture: CSS Typography & Box Model

  • Cascading Style Sheets: Separation of Content & Presentation
  • CSS Selector & Declaration Syntax
  • Color Values: Hex, RGB, & RGBA
  • CSS Units of Measure
  • CSS Text Properties
  • CSS Font Stacks
  • Basic Font Hosting (time permitting)
  • CSS Validation
  • The Box Model: Margin, Padding, Border
  • Time Permitting: Responsive Images
  • Discussion of Resume Assignment [ Previous Examples ]

Thursday Lab

Friday Lab

  • Quiz No 1: based on class work & Marksheet chapters 2-3
  • Work on Assignment One: Resumé

Readings For This Week:

Resources

CSS Inspiration

May 09: Floats / Layout / Hosted Fonts

Tuesday Lecture:

  • Hosted Fonts: Google
  • DIVs, SPANs
  • HTML5 Sectioning Elements: Article, Header, Footer, Nav, Section
  • Fela Kuti Text Exercise: Sectioning Elements
  • Classes, IDs, Tags
  • The Float Property
  • The Clear Property
  • The Clearfix Hack
  • Descendent Selectors

Tuesday Lab

Thursday Lecture

  • Chrome Developer Tools
  • List-Based Menus
  • Display Property
  • Background Properties
  • Basic Responsive Design

Thursday Lab

  • Finish exercises assigned Tuesday
  • Work on Assignment One: Resumé

Friday Lab

Readings For This Week:

Resources

Font Hosting Examples

Typography Resources

May 16: Responsive Web Design

Tuesday Lecture

  • Domains & Hosting
  • More Responsive Web Design
  • Mobile First
  • Viewport Meta Tag
  • Icon Fonts
  • Positioning

Tuesday Lab

Thursday Lecture

  • Web Graphics Formats
  • Continuation of Tuesday topics

Thursday Lab

Friday Lab

  • Quiz No 3
  • Work on Resume (due today)

Resources

May 23: Emmet /CSS Transitions & Transforms / JavaScript

Tuesday Lecture

  • Emmet
  • JavaScript: Events & ClassList
  • JavaScript Menu Treatments
  • Transitions,
  • Modernizer
  • Basic jQuery

Tuesday Lab

Thursday Lecture

  • Continuation of Tuesday Topics
  • jQuery Shakespeare Exercise

Friday Lab

  • Midterm Exam

Resources

May 30: Tables, Forms, Flex

Tuesday Lecture

  • CSS Transforms & Transitions
  • Basic JS
  • Form Elements, Tables
  • Making a form work
  • Flex

Tuesday Lab

Thursday Lecture

  • More Flex

Thursday Lab

Friday Lab

  • Quiz No 5
  • Lab Exercises
  • Start final assignment: Magazine

Resources

June 06: Accessibility / Review / Work

Tuesday Lecture

  • More Flex

Tuesday Lab

  • More Flex

Thursday Class Time

  • Work on Magazine Mockup

Thursday Lab

  • Work on Magazine Mockup

Friday Lab

  • Magazine MockUp Due

Resources

 

Standard
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
Langara Outlines

WMDD 4815 Outline (2017)

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:30

Section 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
http://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

 

 

 

 

Standard