Introduction Course Resources
Class Documentation
Readings and FAQ
Week 1 (Jan 7, Jan 19) Internet, Web & HTML
Required Reading
Lecture
- History of HTML (prezi)
- How the Web Works (pdf)
- What is a Tag/Element? (pdf)
- Basic HTML Document (pdf)
- Common HTML Elements (pdf)
Week 2 (Jan 14, Jan 16) HTML & HTML Standards
Required Reading
Lecture
Labs & Assignments
- Discussion - File Management
- Challenge 1: Structure of an HTML Document
- Mark sheet (save and fill out)
- Practice 2 - Validation (zip)
Week 3 (Jan 21, Jan 23) Stuctures, Directories and Paths
Required Reading
- Site Organization and Directory Structure
- Resolution Stats (why we need responsive sites)
- mediaqueri.es - Check out Designs
Lecture
- File Paths (pdf)
- Setting Up a Site Directory (pdf)
- Breaking Pages into Chunks (pdf)
- Responsive Web Design (pdf)
Labs & Assignments
- Mark Challenge 1 (pdf)
- File Paths Practice (zip)
- Assignment 1: Selkirk College HTML Structure
- Assignment 1 Mark Sheet (pdf)
- Week 3 Review
Week 4 (Jan 28, Jan 30) Responsive Design
Required Reading
Resources
Lecture
- Discussion about Final Project
- Responsive Web Design (pdf)
- Why Mobile First? (pdf)
Labs & Assignments
- Assignment 1: Selkirk College HTML Structure
- Assignment 1 Mark Sheet (pdf)
Week 5 (Feb 4, Feb 6) CSS
Required Reading
FYI
Lecture
- Introduction to CSS (pdf)
- CSS Rules (pdf)
- CSS Selectors Part I (pdf)
- How to Start CSS (pdf)
Labs & Assignments
- Practice - Best Demo Site (zip)
- Challenge 2: Mobile First CSS
- Mobile Design (zip)
- Full KAAP mockup (png)
- Mobile KAAP mockup (png)
- CHARLA's VIDEO HELP
Week 6 (Feb 11, Feb 13) More CSS
Resources
Lecture
- CSS Inheritance (pdf)
- Box Model (pdf)
- CSS Colours (pdf)
- CSS Numbers (pdf)
- CSS Wrappers (pdf)
- CSS Backgrounds (pdf)
Assignments & Lab Work
- Box Model Demo (zip)
- Challenge 2: Mobile First CSS
- Mobile Design (zip)
- Full KAAP mockup (png)
- Mobile KAAP mockup (png)
- Design Template (psd)
Week 7 (Feb 18, Feb 20) READING WEEK
Required Reading
- None
Lecture
- None
Labs & Assignments
- Work on Challenge 2: Mobile First CSS
Week 8 (Feb 25 - Feb 27) CSS Positioning
Required Reading
- Current Page Indicator (pdf)
Lecture
- Current Page Indicator (pdf)
- Clean CSS (pdf)
- CSS Selectors Part II (pdf)
- Media Queries (pdf)
- Hidden h1 text with Replacement Logo in CSS (demo)
Assignments & Lab Work
- Challenge 3: Media Queries for Selkirk Site
Week 9 (Mar 4, Mar 6) Quiz, Media Queries
Required Reading
Lecture
- CSS Grid - Demo
- Horizontal Menus (pdf)
- Flexbox Cheatsheet
- Practice - Flexbox Practice (zip)
Assignments & Lab Work
- HTML Quiz (Thursday)
- Challenge 3: Media Queries for Selkirk Site
Week 10 (Mar 11, Mar 13) Web Fonts
Resources
Lecture
- Layout with CSS (pdf)
- The Position Property (pdf)
- Webfonts (pdf)
- Webfont Generator
Assignments & Lab Work
- Assignment 2: A Responsive Site
- Selkirk Mockup (psd)
- Practice Webfonts
Week 11 (Mar 18, Mar 20) Responsive Images
Lecture
- Responsive Images (pdf)
- Transitions (pdf)
- Advanced CSS Selectors (pdf)
Assignments & Lab Work
- Responsive Images Files (zip)
- Practice Gradients & Transforms
- Work on Assignment 2
Week 12 (Mar 25, Mar 27) Advanced CSS Selectors
Resources
- Fontello and IcoMoon (use the IcoMoonApp)
- Font Awesome - Use Font Squirrel to Create a Subset
- Multi Columns in CSS3 (pdf)
- Multi Columns in CSS3 - Demo
Lecture
- Advanced CSS Selectors (pdf)
- Icon Fonts (pdf)
- Disabilities (pdf)
Assignments & Lab Work
- Icon Fonts - Working Example
- work on Final Project
Demo
- Gallery Adaptive Grid (zip)
- Gallery Adaptive Thumbs (zip)
Week 13 (Apr 1, Apr 3) Accessibility
Resources
Lecture
- Accesibility (pdf)
- Accessibility Standards (pdf)
- Checking Your Site (pdf)
- WCAG Checklist
Assignments
Week 14 (Apr 8, Apr 10) Quiz and YES SETUP
For The Geeks in the Room
LECTURE
- NO LECTURE THIS WEEK
- YES SETUP
Assignments & Lab Work
- Quiz - 1.5 Hours - Open Book Write by the 15th.
- Final Project
Week 15 (Apr 15) Final Take home Quiz Completed
Assignments & Lab Work
- Make sure you have completed the Final 'take at home' Quiz