ah teaches web design & development (The Interwebs lecture)

The Interwebs

Lecture outline

In this week's lecture we will be giving you an overview of the course, some of the fundamentals of thinking about 'web design', and you will be marking up your most hideous page ever.

Lecture slides will be made available on the day of the lecture.

A series of water pipes and tubes

The Interwebs

A series of water pipes and tubes

The 'videotape' edition


There will be a weekly announcement posted to Canvas and to the announcements page. These will serve as our main 'what is coming up' notification.

Contacting your instructors

A friendly how-to

Andrew and Vahid are available via:

Please complete the timezone survey on Canvas to help us determine the most flexible set of office hours.

Email rules

Please allow up to 2 business days for responses. We do not provide design critique via email. Please arrange a meeting or attend office hours for design critique.

To make our responses faster, please include the following in your email:

  • Your full name.
  • The course number (IAT-339).
  • Your lab number.
  • A clear question.

Chat conduct

Please treat our online interactions the same way you would in-person interactions.

If you have concerns about anyone's conduct at any point, please direct message or email Andrew.

Zoom etiquette

As we will be doing a number of code tutorials and critiques on zoom, please:

  • Use headphones
  • Keep your audio and video muted unless needed
  • Bring any materials for critique ready as a web link

Some zoom sessions will be recorded. I will let you know when I am recording.


What to expect

We will follow this pattern unless we indicate a change in our weekly announcement.

  • 10:30-11:30 — a live code tutorial through Zoom. This session will be recorded and posted to Canvas later in the day.
  • 11:30-12:00 — open, non-recorded time to:
    • do the reading/reflection
    • work on the code exercise
    • take a break
    • ask a question
  • 12:00-12:20 — non-recorded time to ask questions.


What to expect

Labs will run as pre-arranged times to meet with Vahid, please bring your materials as a web link.

Andrew will be available for coding or project questions in another Zoom room during some lab times. Availability will be indicated in the weekly announcements.


A reminder that this course expects about 6-9 hours of work outside of class. Because we have flipped portions of the class, you will be able to complete some of this work during lecture or labs.

If you ever have concerns with workload please email Andrew.


Our main course-site

Andrew opens up Canvas and briefly introduces it here.



All projects have been made individual for this online term.

  1. Process — 10% (Individual)
  2. Company — 30% (Individual)
  3. Portfolio — 30% (Individual)

70% of your grade.



Readings are available entirely digitally.

Please read these before the lecture. There will be time set aside in lecture for reading these if need be.


Those terrifying things

Reading reflections will be taking place for reading quizzes.

There are eight reflections available, and you are only required to complete four. Reflections are due before the following lecture.

The coding quiz will be modified for easier remote completion.

20% of your final grade.

Coding exercises

Code exercises are practice for the web-coding you are doing in the course. You are required to submit some of them for grading and feedback.

Exercise rules

  1. You can use online resources, course materials, your TA, and lab-mates for support.
  2. You must cite any knowledge that is not yours in a comment in the code.
  3. If work has been copied without citation the exercise grade will be zero.


This course has a zero tolerance policy for plagiarism on projects. If you are found presenting work that is not your own or resubmitting old work without notice, you will receive a failing grade on that project. No exceptions.

Late or problematic submissions

Late submissions receive 10% per day late.

Problematic submissions — i.e. we can't open the URL or the wrong files were submitted — receive an immediate 20% off plus late penalties on the resubmission.

Concerns with grades

Please notify Andrew of any grading concerns within 10 days of the grades being released. This can include just getting some further feedback and/or wanting to have something regraded.

Course overview questions?

If you have any questions that linger about the course overview, please feel free to email Andrew or ask during our lecture time.

A statue with a unicorn and a shield

Not everyone wants to be a unicorn.

The ever-changing demands of the web

Oh, how things change!

Our goal here is to give the theory, fundamentals of coding for web and an understanding of how to develop your skills beyond this course.

IAT-235 and IAT-339

For those students who have taken IAT-235 more recently, you may find the first couple weeks a bit repetitive.

Do keep track though, as things may have changed.

Web toolkits

Prepped and ready to go

Available on Canvas are links to programs for your first 'web toolkits'. They should contain:

Google Chrome


Google Chrome happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.

Coding applications

VS Code, Atom, Sublime Text, TextWrangler, Notepad++, etc

We are working with code-only applications in this class, as you need to understand the code to be an effective web designer.

No Illustrator, Photoshop, Sketch mockups please

You are not allowed to use any static mock-up tools for designing your pages. We are going to work purely in-browser or with interactive tools for when we start designing things.

No frameworks until the final project

For P1/P2, you are required to generate your own code. In the final portfolio project, you will be allowed to work with existing frameworks should you so choose.

A series of tubes

"It's a series of tubes." — Former U.S. Senator Ted Stevens

The Document-Object Model (DOM)

Our standard in delivering HTML

This week you will be building your first HTML pages, this involves the DOM, which put simply is a collection of objects (ie. navigation, headings, paragraphs) that resemble the document it is modelling.


We want to pick the most appropriate HTML element to define the content, not the most stylistically appropriate element.

Semantic markup

Telling the computer the pieces

HTML elements are (most frequently) comprised of an opening, and closing tag — i.e. <p></p> — using triangle brackets and a forward-slash to denote that they are HTML elements and not content.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/cd0509d108d9292b031bc4b78d14a596

Semantic Markup

Markup should help us understand the content.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/cca86d1438b4958efddeb5178290d02b

Common Coding Errors

Since we will be starting some scripting this week, please keep an eye out for:

  • Typoess: This is handz downe teh most commmon prublem.
  • Forgetting brackets: Not ending or closing an element will lead to
  • Forgetting to save: The file won't be able to update if not saved.
  • Files and folders matter: The naming of files and folders (and where you put them) is very important.

Having coding concerns?

Let us know!

Let us know sooner rather than later that you are having concerns with coding. Also, there are absolutely no 'stupid' questions. Do not know? Please ask.

Special Characters

Some characters that you might want to use (i.e. — & < >) are ones that we rely on in our code, or necessitate additional encoding when wanting to have them render on the page. As a result, we have to pay attention to HTML Entities.

IAT-339 — P1: Process
The progression of atoms through to pages, as proposed by Brad Frost's Atomic Design

'Atomic' Design

Why We Style Guide

Style guides help us to:

  • Document our design
  • Test cross-browser
  • Avoid duplicates
  • Create a common language
  • Work in teams

For lecture...

For this week's lecture time, please make sure you have:

A messy computer desktop filled with different folder and file icons

If this is you, we may need to chat.

Next week's lecture

Styling the Webs

Next week we're going to try really, really hard to think interactively as well as build ourselves some less hideous pages.

Pre-recorded lectures and slides will typically become available the day of the lecture.