| WMADD 4815 | HTML / CSS 1 |
| Credits: 3 | Room: B018 (PC Lab) |
| Contact Info: Kevin McMillan Office A248 604.323.5941 |
Days & Times: Spring 2019 Mondays: 130 – 420 |
| find my office | Office Hours Tuesdays 130-430 |
This class will cover HTML & CSS design and development, and serve as a prerequisite for the HTML / CSS 2 and Content Management Systems courses next semester.
Like anything in life, this outline is subject to occasional changes.
Throughout the term, I will add links to additional supporting content.
Learning Outcomes
Upon successful completion of this course, students will be able to
- Understand HTML document structure & semantics. Produce economical and validated code.
- Build complex layouts with fluid css grids.
- Integrate media into designs. Use code-based methods when possible to conserve bandwidth, maintain resolution, and future-proof the design.
- Choose appropriate graphics formats.
- Use media queries to make designs adapt to device properties and capabilities.
- Use progressive enhancement, designing for modern devices, while ensuring successful fallback to less capable devices and browsers
Textbook / Reference Material
There is no textbook for this class. We will use primarily online sources in the course.
Required reading for some of the early classes is found in
MarkSheet.io: A Free HTML/CSS Tutorial
Lynda.com Videos
Other topics are well-covered by Lynda.com videos.
How to login to Lynda.com using your Langara ID.
HTML Essential Training
CSS Fundamentals
Making Sense of the CSS Box Model
Learning Atom
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors
An Excellent CSS Reference
CSS Reference.io
Another Excellent CSS Reference
Codrops CSS Reference
HTML5 Cheat Sheet
https://websitesetup.org/html5-cheat-sheet/
A Free Online HMTL & CSS Textbook:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS
Course Structure
The class schedule is detailed below.
Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that 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.
| Assignment 1: Resumé | Feb 18 by midnight | 15% |
| Assignment 2: Magazine Mockup | due last day of classes | 20% |
| Weekly Lab Exercises | 15% | |
| Quizzes | 15% | |
| Midterm | Feb 11 | 15% |
| Final Exam | tba | 20% |
Week 1: Jan 07 ( HTML Basics )
class photo generation procedure
HTML Semantics / ATOM Setup & Intro
h1-h6, p, ul, li, a, img
sftp
html validation
Lab / Class Files
- Fela Kuti Text File
- Fela Kuti Images
- Lab Exercise 1: Hummus Recipe Semantic Markup (due next week)
- Lab Exercise 2: HTML Paths Exercise (due next week)
- Lab Exercise 3: SFTP & Validation
Links
Resources
- Mozilla Developer Network: HTML Text Fundamentals
- Marksheet Chapters 2–3: HTML Basics/HTML Text
(ignore sections on HTML Tables & Forms for now)
Online Component: Required Viewing
Week 2: Jan 14 ( HTML Sectioning / CSS Typography 1)
HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
CSS Validation
ATOM Efficiencies
Lab / Class Exercises
- Demo: Atom Efficiencies
- HTML/CSS Text Markup & Styling: Fela Kuti 2019
- HTML Basics Practice: Hello Guitar Kitty & Practice Quiz
- ATOM Lab Exercise
- HTML Lab Exercise 1: Small Site
- Chrome Developer Tools Exercise (optional)
Online Component: Required Viewing
Online Component: Required Exercise (by start of next class)
Required Reading
Resources
Next Week: Our First Quiz
- HTML: h1, h2, h3, h4, img, header, nav, article, a, ul, li, paths
- CSS: how to specify fonts, css inheritance, box model, classes
- ATOM selection & navigation efficiencies
Week 3: Jan 21 ( Design Principles / Trad CSS Layout )
Test Number 1
Principles: Alignment, Contrast, Proximity, Repetition, Readability
Floats, Clears, Clearfix, Display Properties
Lab Exercises
- Captain Beefheart Layout Exercise Download
- Gibson Gallery Layout Exercise
- Gibson Gallery Layout Exercise pt 2
- Basic HTML & CSS Validator Exercise
Resources
- Clarissa Peterson: Responsive Typography
- Eduardo Shiota Yasuda: Dominating the Web Typography
- Color Palette Generators
Week 4: Jan 28 ( Responsive Web Design 1 )
Four Pillars of Responsive Web Design
Mobile First
Media Queries
Lab Exercises
Resources
- Google Developers: RWD Basics
- Google Developers: RWD Viewport
- Google Developers: RWD Content
- Google Developers: RWD Media Queries
- Google Developers: RWD Breakpoints
Week 5: Feb 04 ( Responsive Web Design 2 )
Quiz Number Two (postponed)
The Idea & History of Grids in Design
Lab Exercises
Week 6: Feb 11
Week 7: Feb 18 ( Reading Week )
- Due Monday by midnight: Resume Assignment
- Midterm will take place on Feb 25: it will be a three hour layout.
- I will revise the rest of the outline soon.
Exercises To Do Over the Break
Week 8: Feb 25 ( Graphics & Emmet )
The beauty of HSL & HSLa
File formats & usage
Background Images
Multiple Backgrounds
CSS Gradients
Scalable Vector Graphics (SVG)
Icon Fonts
Smart & efficient authoring
Graphics production workflows
Lab Exercise
Resources
- Graphic File Formats Download
- Emmet Documentation
- Emmet CheatSheet
- Google Developers: Image Optimization
- SitePoint Image Formats: Which to Use
- Background Images, Gradients
- Background Images Lab Files
Week 9: March 04 ( Forms / Tables )
Forms / Tables
Week 10: March 11
Media
Video / Sound
Lab Files
Lab Exercise
Week 11: March 18
First Half: Web Graphics
Second Half: Work & Consult
Lab Files
Week 12: March 25: Final Exam Prep
Magazine Assignment Due by Midnight.
Please review this checklist before you stop working on it.
The exam will be like the midterm: you will be given a layout to build within a time period.
- Final Exam Practice Exercise: Build this layout.
- Solution File For The Above Layout
Week 13: April 02:
Practice Exam Review & Exam Prep