Categories
Langara Outlines

PUBL 1220 Outline (2020)

Publ 1220Web Design Fundamentals
Credits: 6Room: Currently Online
Summer Term:
May 04 – June 13, 2020
Zoom URLs:
See BrightSpace Course Page		Days & Times:
Tuesday 130–520
Tuesday 600–720 (lab)
Thursday 1130–320
Thursday 400–520 (lab)
Friday 1130–420  (lab)
Office Hours
Thursday 900–1100 

SKIP to Class Content

This double-size half-term class will cover HTML & CSS, 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:

LinkedIn Learning Videos
HTML Essential Training
CSS Essential Training

To use LinkedIn Learning videos, login to the front of the Langara College website, then click the link for LinkedIn Learning. Then click either of the links above. If you go there directly, make sure that the HTML course is from 2020 and the CSS course is from 2019. (LinkedIn has kept some of the older versions of courses still online…)

A Concise Overview of HTML & CSS
Marksheet.io HTML & CSS Tutorial

Guides to Everything: CSS Tricks
Chris Coyier’s CSSTricks website is one of the great resources for designers and developers. I particularly recommend his complete guide series.
Complete Guide to Centering in CSS
Complete Guide to Links & Buttons
Complete Guide to Grid
Complete Guide to Flexbox
Complete Guide to Tables
Complete Guide to Calc()

Emmet Documentation & CheatSheet
Documentation
Cheatsheet

W3C HTML & CSS Code Validators
HTML Validator
CSS Validator

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

This course will be conducted in accordance with the Publishing Department policies:
A brief summary. | The full document

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.

The Friday lab in weeks 2, 3 & 5 will begin with a short Brightspace quiz, on material covered in previous weeks, as well as indicated readings or videos.

Assignment 1: ResuméMay 2610%
Assignment 2: Own DomainJune 0410%
Assignment 3: Magazine MockupJune 1230%
Lab ExercisesOngoing15%
Weekly Quizzes / TestsMay 15 & 22, June 0515%
MidtermMay 2920%

Assignment Descriptions Available Here

GOOGLE Document to put your WebSite Domain Name (later in term)

Sample Image Downloads

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

May 04: HTML & CSS Basics

Tuesday Lecture: HTML Basics

  • Overview of Summer PUBL web classes
  • Introduction to Visual Studio Code editor
  • HTML5 Document Structure
  • Basic HTML Tags: h1, h2 (etc),  p, ul, ol, li, img, br
  • Phrase Elements: b, i, strong, em
  • Attributes
  • Links: inside site, outside site, inside page
  • Paths
  • HTML Validation
  • SFTP: transferring files to web server

Tuesday Class Exercise

  • Your Opinions on Everything

Tuesday Lab (Due by Thursday’s Class)

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
  • HTML Sectioning Tags: Header, Footer, Nav, Section, Article, Div
  • Display: Block, Inline, Inline-Block, None

Class Exercise:

  • Fela Kuti Markup and Style Exercise
    In the RESOURCES section at the bottom of this week’s section of the outline, there is a video I made to show a couple of the very useful Visual Studio Code selection techniques we will use in this exercise.

Thursday Lab (Due by Tuesday’s Class)

Friday Lab

Readings & Resources To Read By Next Week:

Videos To Watch By The Start of Class Next Week

  • HTML Essential Training
    Chapter 1
    Chapter 2 (skip sections on dates, code, & superscripts)
    Chapter 3 (skip ARIA roles for now)
    Chapter 4
  • CSS Essential Training
    Introduction
    Chapter 1
    Chapter 2

Resources

CSS Inspiration

May 11: Responsive Design / Mobile First / Grid 1

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

Thursday Lecture

Thursday Lab

Friday Lab

Resources

Typography Resources

Font Hosting Examples

May 18: Grid 2 / Position / Web Graphics

Tuesday Lecture

Tuesday Lab

Thursday Lecture

Thursday Lab

Friday Lab

  • Quiz No 2: Grid, Graphics Formats
  • Work on Resume Assignment

Resources

CSS Grid
Web Graphics

May 25: CSS Grid 3 / Advanced Selectors

Tuesday Lecture & Lab

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

Thursday Lecture

Thursday Lab

Friday Lab

  • 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. 

Resources

June 01: Transitions & Animation

Tuesday Lecture

  • tba

Tuesday Lab

  • Basic Transitions Exercise

Thursday Lecture

Thursday Lab

Friday Lab

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

Resources

June 08: 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.

Friday Lab

  • Preview of next classes
  • Discussion of LangaraPRM Jobs
  • Work on Magazine Mockup Due tonight. 

Resources

For Those Continuing in PUBL 1232:

Advanced Web Design Course Preparation

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

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

To do that LinkedIn Learning 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 does not work initially, get in touch and I’ll give you a few suggestions on how to fix that.

LangaraPRM.com Jobs

Please read the description of the LangaraPRM departments.

The above link contains a link to a form for you to apply for your desired positions.

The form password is on the 1235 Brightspace home page.

Previous Years of LangaraPRM

Password-protected.

Name and PW on the 1235 Brightspace home page.