|WMADD 4815||HTML / CSS 1|
|Credits: 3||Room: B014|
|Days & Times:
Mondays: 230 – 720
(Spring term runs Jan 02-April 09)
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.
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
Other topics are well-covered by Lynda.com videos.
An Excellent CSS Reference
Another Excellent CSS Reference
Codrops CSS Reference
HTML5 Cheat Sheet
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 13||15%|
|Assignment 2: Magazine Mockup||Mar 26||20%|
|Weekly Lab Exercises||15%|
Week 1: Jan 08 ( HTML Basics )
HTML Semantics / ATOM Intro
h1-h6, p, ul, li, a, img
Lab / Class Files
- Fela Kuti Text File
- Fela Kuti Images
- Lab Exercise 1: HTML Paths Exercise
- Lab Exercise 2: SFTP & Validation
- Marksheet Chapters 2–3: HTML Basics/HTML Text
(ignore sections on HTML Tables & Forms for now)
Week 2: Jan 15 ( HTML Sectioning / CSS Typography 1)
NOTE: this Friday’s office hour is cancelled because I have a medical appointment. If you need to see me at another time, get in touch.
HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
ATOM Efficiencies Review
- HTML Page Markup Practice: Hummus Recipe
- HTML Basics Practice: Hello Guitar Kitty & Quiz
- ATOM Lab Exercise
- HTML Lab Exercise 1: Small Site
- Chrome Developer Tools Exercise (optional)
- Marksheet Chapters 4–6 : CSS Basics, Text & Box Model
- HTML5 Sectioning Elements Explained
- HTML5 Doctor Sectioning Content Flowchart
Next Week 2:30pm: Our First Test
- 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 22 ( Design Principles / Trad CSS Layout )
Test Number 1
Principles: Alignment, Contrast, Proximity, Repetition, Readability
Floats, Clears, Clearfix, Display Properties
- Captain Beefheart Layout Exercise
- TubeWorld Layout Recipe
- Gibson Gallery
- Basic HTML & CSS Validator Exercise
- Clarissa Peterson: Responsive Typography
- Eduardo Shiota Yasuda: Dominating the Web Typography
- Color Palette Generators
Week 4: Jan 29 ( Responsive Web Design 1 )
Four Pillars of Responsive Web Design
- Google Developers: RWD Basics
- Google Developers: RWD Viewport
- Google Developers: RWD Content
- Google Developers: RWD Media Queries
- Google Developers: RWD Breakpoints
Week 5: Feb 05 ( Responsive Web Design 2 )
Quiz Number Two
The Idea & History of Grids in Design
- GuitarMania RWD2
- PedalMania Exercise
- Fender Vs Gibson 1
- Fender Vs Gibson 2
- Making Your Own Grid Measurements
First Assignment ( resumé ) due by Tuesday, Feb 13 at 9am.
Week 6: Feb 12 ( READING WEEK )
No classes this week. College closed Monday, but open other days.
Week 7: Feb 19 ( Midterm / Positioning )
For the midterm, you will be given a layout to build within two hours.
The remaining class time will be devoted to the CSS Positioning property.
- Download: Midterm Files & Instructions
- Download: Heavily Commented Midterm Solution File
- Background Images Lab Files
Week 8: Feb 26 ( Graphics & Emmet )
The beauty of HSL & HSLa
File formats & usage
Scalable Vector Graphics (SVG)
Smart & efficient authoring
Graphics production workflows
- Graphic File Formats Download
- Emmet Documentation
- Emmet CheatSheet
- Google Developers: Image Optimization
- SitePoint Image Formats: Which to Use
- Background Images, Gradients
Week 9: March 05 ( Forms / Tables )
Forms / Tables
Week 10: March 12
Video / Sound
Week 11: March 19
Work & Consult Day
Week 12: March 26: 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.
Week 13: April 02: Easter Monday:
No class: college closed.
Week 14: April 09 Final Exam
In class: like with the midterm, you will be given a layout to complete over 2 – 3 hours.