|WMADD 4815||HTML / CSS 1|
|Credits: 3||Room: B014|
|Days & Times:
Wednesdays Jan 04–April 05
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 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é||15%|
|Assignment 2: Magazine Mockup||20%|
|Major Lab Exercises||15%|
Week 1: Jan 04 ( HTML Basics )
HTML Semantics / Sublime Text 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 11 ( HTML Sectioning / CSS Typography 1)
HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
Sublime Efficiencies Review
- HTML Basics Practice Quiz 1
- Chrome Developer Tools Exercise (postponed)
- Sublime Text Lab Exercise
- HTML Lab Exercise 1: Small Site
- Marksheet Chapters 4–6 : CSS Basics, Text & Box Model
- HTML5 Sectioning Elements Explained
- HTML5 Doctor Sectioning Content Flowchart
Next Week 8:30am: 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
- SUBLIME TEXT: multiple cursors, tag wrap, split into lines
Week 3: Jan 18 ( Graphic Design & Typographic Principles )
Test Number 1
Alignment, Contrast, Proximity, Repetition, Readability
- To be determined
Tools: Color Theory Links & Palette Generators
- Color Palette Generators & Color Theory Links
Week 4: Jan 25 ( Traditional CSS Layout Techniques )
Floats, Clears, Clearfix, Display Properties
- Captain Beefheart Layout Exercise
- TubeWorld Layout Recipe
- Gibson Gallery
- Basic HTML & CSS Validator Exercise
Week 5: Feb 01 ( 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 08 ( Responsive Web Design 2 )
Test Number Two
Thinking inside and outside the grid.
First Assignment ( resumé ) due by Monday, Feb 13 at 9am.
Week 7: Feb 15 ( READING WEEK )
No classes this week. College closed Monday, but open other days.
Week 8: Feb 22 ( Midterm / Self-Made Grids )
For the midterm, you will be given a layout to build within two hours.
The remaining time will be devoted to the learning how to make our own grids.
Week 9: March 01 ( Graphics & Emmet )
File formats & usage,
Scalable Vector Graphics (SVG)
Smart & efficient authoring
- Emmet Documentation
- Emmet CheatSheet
- Google Developers: Image Optimization
- SitePoint Image Formats: Which to Use
- Background Images, Gradients
Week 10: March 08
Forms / Tables
Final Exam Practice Exercise:
Build this layout. Make your own grid.
Week 11: March 15
Video / Sound
Week 12: March 22
Week 13: March 29: Final Exam Prep
Magazine Assignment Due. 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.