| 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. |
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 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
- Web Graphics Example Files
- Using the iPhone simulator
- Lynda.com: Decoding Web File Formats
- Lynda.com: Optimizing Individual Images
May 29: Emmet /CSS Transitions & Transforms / JavaScript
Tuesday Lecture & Lab
There are many sections to the above exercise. Here is a table of contents:
- Flex & Grid Layout Step by Step Exercise
- Semantic Marking Up of the Document
- Site-Header
- Section Titles, Articles, and Images
- Initial Typography
- Box Model Properties
- Menu, Gallery, Site-Footer
- Media Queries
- Positioned Elements
- Final Menu Tweaks
Thursday Lecture
Thursday Lab
Friday Lab
Resources
- Emmet Download, Documentation, & Video
- Emmet Cheatsheet: Definitely Check This Out!
- Mastering Emmet
- How to Set up a Print Stylesheet
- CSS Tricks: Transforms
- CSS Tricks: Transitions
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.