Hi 👋 and welcome to the workshop manual for Principles of Web Design.
Across the weeks of the unit, we’ll use this workshop manual as an information resource, with code examples, class exercises, and links to external resources and reference materials to help build your knowledge and understanding of how to structure and design information for the browser (and other screen-based viewports).
This workshop manual is a living document that contains a lot of information, but a reference text is not very interesting on its own. One of the exciting things about web design is the practical application of skills as you acquire them — something that can’t be conveyed through reading text alone. Throughout the unit, we’ll use this manual as a way to direct our learning, but content, ideas, and incidental discussions in classes will give us a chance to deviate from just reading text, and allow us to work a little bit more flexibly and interactively. Always feel welcome to ask for help during classes.
For some useful/commonly used code snippets, be sure to come back to the Snippets page.
Chapter 1 — Fundamentals of HTML
Chapter 2 — Building on the Fundamentals
Chapter 2 — Extension: Figures and Tables
Chapter 3 — An Introduction to CSS
Chapter 4 — CSS Classes and Colours
Chapter 4 — Extension: Colours and Palettes
Chapter 5 — Typography and Designing Text
Chapter 6 — Layout 1: One-Dimensional Layouts with Flexbox