ah teaches web design and development: 01 The Interwebs

ah teaches web design and development: 01 The Interwebs — A slide deck

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.

SIAT Mixer 2018
A series of water pipes and tubes
The Interwebs

Close All Laptops


In 'lecture-mode' I would request no laptop use. In 'tutorial-mode' you will have full access to the laptops!

A photo of some bow-ties
Andrew's lectures are bow-tie powered

Contacting Andrew

A friendly how-to

In person

  • Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am (on the mezzanine)
  • Drop by Room 2816, Podium 2, SFU Surrey
  • By appointment (arranged via email)


Omid Alemi

TA for D101/D102

Reachable via:

  • Email: ac.ufs@imelao
  • Office hours: Mondays from 4:30-5:20pm (on the mezzanine).

Email Rules

What you must include

Requirements for response:

  1. Your full name.
  2. The course number (IAT-339).
  3. Your lab number (i.e. D101, D102).
  4. Your student number.
  5. A clearly articulated question.

Please allow up to two business days for replies.

Warning: No email crits

It is unfair for both us and yourself if we begin to offer the option of providing critiques via email. If you are looking for feedback on some work, please arrange a meeting to do so.


What to expect

  • Me talking
  • Discussions
  • A break
  • Coding tutorials


What to expect

  • Crits, crits and more crits
  • Group crits
  • In-lab exercises
  • Super-awesome support


Our course-site

Andrew opens up Canvas and briefly introduces it here (if necessary).




Readings are available entirely digitally.

Read these before the lecture, as we will be discussing ideas in them. If I sense that the reading has not been sufficiently completed, a quiz may be called.


There will be random unannounced checks for participation through the term. It is your responsibility to make sure you are in attendance and participating.

Worth 5% of your final grade.


Those terrifying things

There will be three quizzes in this course.

Two will cover the readings, and will either be announced or unannounced, pending how many of you do the readings. One will be on HTML/CSS, and will require that you replicate a given layout under tight(ish) time constraints.

20% of your final grade.


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

30% group, 40% individual.

Group Work

A quick note

Project 2 (Company) will be done in groups. As warning in advance, there will be no peer review or evaluation performed in this course, strong but your process and git commits and involvement will be graded individually.

Remember, you are responsible for your own work.

Lab Exercises

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

Lab 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 entire coding task portion of the final grade is forfeit (5% of final grade).

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.

Web Topics

What we'll be doing (loosely)

  1. Course intro + web basics
  2. Translating design skills to the web
  3. Style guides
  4. Git + debugging
  5. Responsive design
  6. Usability + accessibility
  1. Content
  2. Portfolios
  3. Animation
  4. Web ethics
  5. Web optimization

Coding Topics

What we'll be doing (loosely)

  1. HTML fundamentals
  2. CSS basics of styling + selectors
  3. CSS flexbox + media queries
  4. Git
  5. CSS positioning + responsive images
  6. ARIA + accessibility
  1. JavaScript fundamentals
  2. Templates + frameworks
  3. Animation
  4. Speed optimization
  5. Support week
A statue with a unicorn and a shield
Not everyone wants to be a unicorn.

Having coding concerns?

Let us know!

Let us know sooner rather than later if you are having concerns with coding. Also, there is absolutely no 'stupid' questions. Don't know? Ask.


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 30% off plus late penalties on the resubmission.

What is an A?

An A is exceeding expectations. Our 'exceeded' expectations are set out in project rubrics.

When Serious Issues Arise

Get in touch with Andrew

I want to help you finish the course successfully, but it is difficult to do so unless I know that a problem has arisen first. Come and see me if an issue comes up that may seriously impede your ability to work on the course.

IAT-235 & IAT-339

For those students who have taken IAT-235 more recently, you may find the first couple weeks a bit repetitive. For you, it may be worthwhile to work on the coding exercises in-lecture.

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.

Illustrator or Photoshop Mock-ups are banned

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.

Frameworks are banned

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.

Any questions?

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

The Document-Object Model

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.

Both HTML and XML make use of the DOM to structure and assemble their content.

Semantic Markup

Reinforce the meaning of the content

Why dogs are awesome!
There are many benefits to owning a pet:
1. They are good nannies
2. They can talk
3. They love to party
Why dogs are awesome!

There are many benefits to owning a pet:

  1. They are good nannies
  2. They can talk
  3. They love to party
The progression of atoms through to pages, as proposed by Brad Frost's Atomic Design
'Atomic' Design



Getting you started on thinking about your first website! You will be designing websites for companies. This website will require the following content:

  • company updates/events
  • about the company
  • how to contact the business
  • a multi-product listing
  • one product detailed view
  • the entire process of purchasing a product
  • appropriate means for the user to provide feedback on a product
IAT-339 — P1: Process

P1 Schedule

The next couple weeks:

  • Starting today: HTML style-guide and brand components
  • Starting Sept 14: CSS style-guide and brand direction
  • Starting Sept 21: Templates and style guide with branding applied

What is a Style Guide?

According to Robertson, what is a style guide?

HTML Recap



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


Let's take a look at the following example:

<h1> CBC News

  • <h2> Local
    • <h3> British Columbia
    • <h3> Ontario
  • <h2> Canada
    • <h3> Southern New Brunswick flood victims still in deep water
    • <h3> Like father, like son: R.J. and Rowan Barrett


Let's take a look at the following example:

<h1> CBC News

  • <h2> Local
    • <h3> British Columbia
    • <h3> Ontario
  • <h2> Canada
    • <h3> Southern New Brunswick flood victims still in deep water
    • <h3> Like father, like son: R.J. and Rowan Barrett

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.


Runaway! Runaway...

See you in five minutes.

Please make sure you have:

  • VS Code (or similar code editor)
  • Google Chrome
  • Cyberduck/Filezilla
A messy computer desktop filled with different folder and file icons
It's time to clean up your act.

This week's labs

The low-down

  • An introduction to one another
  • P1 intro and work-time
  • Coding exercise

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.

The progression of atoms through to pages as proposed by Brad Frost's Atomic Design
Please read Chapter 1 'Designing Systems' from Atomic Design by Brad Frost

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna