PUBL 1220 Outline (2019) – 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 06 – June 15, 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 double-size half-term 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
CSS Essential Training 3

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 21	10%
Assignment 2: Own Domain	May 30	10%
Assignment 3: Magazine Mockup	June 13	30%
Lab Exercises	Ongoing	15%
Weekly Quizzes / Tests	Friday 2,3,5	15%
Midterm	May 31	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 07: 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, li, img, br
Phrase Elements: b, i, strong, em, small, q
Attributes
Links: inside site, outside site, inside page
Paths
HTML Validation
SFTP

Tuesday Class Files to Download:

GuitarMania Sample Site Discussion Files

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:

Thursday Lab

Friday Lab

Gibson Gallery Exercise 2018 pt 2
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 14: CSS Grid 1 / Media Queries & Mobile First

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
Background Color & Hover Transition Effects
Media Queries
caniuse.com
Display Grid

Tuesday Lab

Guitar Mania 2019 (Due by end of Thursday Lab)

Thursday Lecture

Jim Jarmusch Resumé In Class Exercise
Continuation of Tuesday Topics

Thursday Lab

Guitar Mania 2019 continued

Friday Lab

Quiz No 1: Class Work + Marksheet.io Chapters 2 – 6
CSS Grid Garden Game
Work on Assignment One: Resumé

Resources

CSS Tricks Guide to Grid

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 21: Grid 2 / Position / Web Graphics Formats

Tuesday Lecture

In-class Exercise: Jazz Icons Grid Layout

Tuesday Lab

Grid Exercise: Fender Vs Gibson Grid Exercise

Thursday Lecture

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

Thursday Lab

Grid Layouts in Abstract Exercise

Friday Lab

Quiz No 2: Grid, Graphics Formats
Lab Exercise: World Beat Website Mockup

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 28: CSS Flexbox / Advanced Selectors

Tuesday Lecture & Lab

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

Fela Kuti: Advanced Selectors

Friday Lab

Midterm Exam
Emmet Lab Exercise | Answer Key

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

Resources

June 04: Transitions & Animation

Tuesday Lecture

Intro to Flexbox
More Emmet

Tuesday Lab

Thursday Lecture

Transitions, Transforms, Animation
Simple JS Event Handling
The Walrus Reconstruction

Thursday Lab

The Eatery Restaurant Menu

Friday Lab

Quiz No 4
Continue work on The Eatery Restaurant Menu
If done all lab exercises, start work on Magazine assignment

Resources

June 11: Review & Work

Tuesday Lecture

Work on Magazine Mockup

Tuesday Lab

Work on Magazine Mockup

Thursday Class Time

Work on Magazine Mockup

Thursday Lab

Work on Magazine Mockup. Due tonight.

Friday Lab

Preview of next classes
Discussion of LangaraPRM Jobs

Resources

During Your Week Off:

Course Preparation

Please go through the Lynda.com course: WordPress 5 Essential Training (chapters 1 – 5).

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

To do the Lynda course, you will need to install and setup a testing server on your computer. Instructions to do that are here.

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.

If you are on Windows and find that MAMP is a bit buggy, install WAMPServer instead. Instructions on how to set it up are available in the Lynda.com course Installing and Running WAMP (chapter 1, and the first four videos of chapter 2).

LangaraPRM.com Jobs

Please read the description of the LangaraPRM departments.

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