Categories
CSS HTML Uncategorized

PUBL 1220 Outline (2019)

 

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

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

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:

Thursday Lab

Friday Lab

Readings For This Week:

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

Thursday Lab

  • Finish Tuesday Lab Exercises
  • Work on Resumé Assignment

Friday Lab

Resources

Readings For This Week:

Typography Resources

Font Hosting Examples

May 22: Display Grid / Web Graphics Formats

Tuesday Lecture

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

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
Web Graphics

May 29: Emmet /CSS Transitions & Transforms / JavaScript

Tuesday Lecture & Lab

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

Thursday Lecture

Thursday Lab

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

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.