PUBL 1220 Outline (2018) – WRMF.ca (Transferred)

Publ 1220	Web Design Fundamentals
Credits: 6	Room: A247
Contact Info: Kevin McMillan Office A248 (604) 323-5941	Days & Times: Summer Term: May 08 – June 16, 2018 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 Really Good Overview of HTML & CSS
MarkSheet HTML & CSS Tutorial

Lynda.Com Atom Text Editor Course:
Learning Atom

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

An Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
https://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. Therefore, there are 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 or videos.

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

Assignment Descriptions Available Here

Abbreviations used in my marking & comments

GOOGLE Document to put your WebSite Domain Name

Sample Image Downloads

I’m putting these here, because we will use them in a number of classes:

May 08: HTML & CSS Basics

Tuesday Lecture: HTML Basics

Overview of Summer PUBL web classes
Introduction to Atom Text editor
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

Class Exercise: Fela Kuti Article (HTML Semantics and Structure). Downloads:

Tuesday Lab

Thursday Lecture: CSS Typography & Box Model

Cascading Style Sheets: Separation of Content & Presentation
CSS Selector & Declaration Syntax
CSS Text Properties
CSS Font Stacks
Color Values: Hex, RGB & RGBA, HSL & HSLA
CSS Units of Measure
CSS List Styling
CSS Validation
The Box Model: Margin, Padding, Border
Responsive Images
Intro to HTML Sectioning Tags
Display: Block, Inline, Inline-Block, None

Class Exercises:

Styling of Fela Kuti exercise
Atom Text Editor Power Workout

Thursday Lab

Friday Lab

Gibson Gallery Exercise 2018 pt 2
Finish any remaining lab exercises
Work on Assignment One: Resumé

Readings For This Week:

Marksheet Chapters: Introduction – Ch 6 (ignore Tables & Forms sections for now)
HTML Naming Conventions
A Review of Paths
Atom Text Editor Shortcuts
The CSS Box Model

Resources

CSS Inspiration

May 15: Media Queries & Mobile First / Display Flex

Tuesday Lecture:

Discussion of Resume Assignment [ Previous Examples ]
More on HTML5 Sectioning Elements: Article, Header, Footer, Nav, Section
Granular styling with classes
Basic Font Hosting
Display: Flex ( Gibson Gallery Modification )
Background Color & Hover Transition Effects
Media Queries
caniuse.com
Introduction to Display: Flex

Tuesday Lab

Thursday Lecture

Review of Flex Basics & Media Queries
Class Demo: Light — A Flex Photo Blog
Annotated Solution Files for Light Photo Blog

Thursday Lab

Finish Tuesday Lab Exercises
Work on Resumé Assignment

Friday Lab

Quiz No 1: Class Work + Marksheet.io Chapters 2 – 6
Work on Assignment One: Resumé (due next Tuesday)

Resources

Readings For This Week:

Typography Resources

Google Fonts
Typekit
Webfont-Test.com ( web type comparison utility )
TypeWonder.com ( type in a URL, choose a font, see that font imposed on that URL )

Font Hosting Examples

May 22: Display Grid / Web Graphics Formats

Tuesday Lecture

Finish Photo Blog Layout
Display: Grid
In-class Exercise: Jazz Icons Grid Layout
Another Run Through: Jazz Icons Pt 2 Files (Unmarked up, With Solution)
Grid vs Flex

Tuesday Lab

Thursday Lecture

Grid pt 2
Web Graphics Formats: Files (2018) For Download
Background Images (Including Gradients)
Positioning (Time Permitting)

Thursday Lab

Grid Layout Exercise 2

Friday Lab

Lab Exercise: DTN Magazine From Scratch
Quiz No 2: Grid & Flex, Graphics Formats, Etc POSTPONED TO TUESDAY

Note: the second assignment, getting a domain and hosting, is now due next Friday, not Tuesday. And the Midterm, formerly set for June 1st, will occur on June 05.

Resources

CSS Grid

CSS Tricks: Getting Started With CSS Grid
CSS Tricks: One Layout, Multiple Ways
CSS Tricks: A Complete Guide to Grid
Rachel Andrew: Grid By Example (an excellent resource)
Wes Bos: CSS Grid Video Course ( free )

Web Graphics

May 29: Emmet /CSS Transitions & Transforms / JavaScript

Tuesday Lecture & Lab

Quiz 2
Flex & Grid Layout Step by Step Exercise

There are many sections to the above exercise. Here is a table of contents:

Thursday Lecture

Thursday Lab

Grid Layouts In Abstract

Friday Lab

Resources

June 05: Tables, Forms

Tuesday: Midterm Exam

The midterm will take up to 3 hours. You will be given the screenshots for a responsive layout to produce within that time.

Midterm Solution File: Heavily Commented

Tuesday Lab

Advanced Selectors Exercise
Work on Magazine Assignment

Thursday Lecture

Tables

Thursday Lab

The Eatery Layout

Friday Lab

Quiz No 5
Start final assignment: Magazine

June 12: Review & Work

Tuesday Lecture

Final Quiz
Work on Magazine Mockup

Tuesday Lab

Work on Magazine Mockup

Optional lab exercise for bonus lab exercise mark:

Thursday Class Time

Work on Magazine Mockup

Thursday Lab

Work on Magazine Mockup

Friday Lab

Magazine MockUp Due

Resources

During Your Week Off:

Course Preparation

Please go through the Lynda.com course WordPress Essential Training, Chapters 1-7.

This will help prepare you for the PUBL 1232 Course: Advanced Web Design course.

To do the Lynda course if you’re not in the Langara Mac lab, you will need to install WordPress on your own computer. To do that, you will need to setup a testing server. An easy way to do this is to install the MAMP program. It is available for Mac and Windows.

Do not install the PRO version of MAMP. You need only the REGULAR one.

Instructions for the Mac setup are here.

Instructions for Windows setup are here. (If you also review the Mac writeup above, you’ll see how we’ll work with MAMP in PUBL 1232).

LangaraPRM.com Jobs

Please read the description of the LangaraPRM departments.

Then use this form to inform my of your three preferred positions by Wednesday June 20th. The password to use this form is in the email I sent you recently.