IAT-339: 01 The Interwebs

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 scripting your most hideous page ever.

Banner advertising the SFU Surrey Engagement Competition
PSA: SFU Surrey Engagement Competition
SIAT Mixer (siatmixer.ca)

The Interwebs

You have arrived at IAT-339

A statue with a unicorn and a shield

Close All Laptops


In 'lecture-mode' I would request only the back row use laptops. 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

  • Mondays, Tuesdays, and Thursdays, 9-9:50am (mezzanine)
  • By appointment (arranged via email)


  • Via email at andrew.h@sfu.ca
  • Through Canvas

Sophia Han

Your TA

Contact her:

Email rules

Emails must include

  1. "IAT-339" in the subject line
  2. Your full name and lab number in the message
  3. A clear question

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


What to expect

  1. Crits, crits and more crits
  2. Group crits
  3. Coding tutorials
  4. Project work time
  5. Super-awesome support


Our course-site

Andrew opens up Canvas and briefly introduces it here.

Course Subsite

For those troublesome days

For when you just don't feel like logging into Canvas, you can access all course materials at iat339.andrewh.ca


Our course-site

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 solve a coding problem live in lab.

20% of your final grade.


Building your web skills

We have four projects:

30% group, 45% 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, but your process and Git commits/involvement will be graded individually. Remember, you are responsible for your own work.

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 skill
  3. Style guides
  4. Github + debugging
  5. Responsive design
  6. Usability + accessibility
  1. Content
  2. Content management + servers
  3. Portfolios + personal branding
  4. Copyright + security + social media
  5. Presentations + wrap-up

Coding Topics

What we'll be doing (loosely)

  1. Your dev environment + HTML fundamentals
  2. CSS basics of styling + selectors
  3. CSS grids + media queries
  4. GitHub
  5. CSS positioning
  6. CSS animation
  1. Javascript fundamentals + support week
  2. CMS + servers
  3. Preprocessing
  4. 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.

Warning: Failing course 'components'

If you fail one component of the course, you will be required to complete some end-of-term make-up to not fail the course.

For example, if the total for your quizzes is 9/20%, you will be required to do make-up work, and you are responsible for contacting me with regards to the requirement for make-up work.


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 PDF or the wrong files were submitted — receive an immediate 25% off plus late penalties on the resubmission.

What is an A?

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

When Serious Issues Arise

Get in touch with Andrew

I am amenable to coming up with agreements, but I have to 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 with me, you may find the first couple weeks a bit repetitive. For you, there are optional stretch goals.

10 Things

What were they?

What were the ten things required you know to pass this course? Also, how many of you have had me ask this multiple times?

Any questions?

A statue with a unicorn and a shield
"It's a series of tubes." — Former U.S. Senator Ted Stevens

The Dao of Web Design

If you haven't read this, read it now please.

The Dao of Web Design

Some discussion

  1. What is involved in 'embracing the web as its own medium'?
  2. What might be an example of 'adaptible being accessible'?

An Effective Web Designer

The Tension

Fixed vs fluid

As a web designer, this is your biggest challenge; maintaining and working with a fluid medium.

The Bias

Dun, dunn, dunnnn.

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

Web Standards

The 'proposals'

While the standards are put out there, it is still up to browser developers to actually implement them. Although current browsers have gotten significantly better at keeping up with standards, there are still often inconsistencies.

Good resources:

Be Wary of Old Resources

Not all resources are created equal, especially when it comes to web development. Pay attention to when a resource was last updated.

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

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

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.

Dreamweaver, Muse or the like is banned

You are not allowed to use any visual web coding tools for anything in this course.

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

You are not allowed to use any pre-existing code for designing your pages*

For P01/P02, you are required to generate your own code. In the final project (P04), you will be allowed to work with existing frameworks should you so choose.


Runaway! Runaway...

See you in ten minutes.
Remember: Participation may be lurking...

Please make sure you have:

Atomic Design

Thinking beyond pages



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

  • 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


The Brief

IAT-339: Project 1 Brief

P01 Schedule

The next couple weeks:

A messy computer desktop filled with different folder and file icons
It's time to clean-up your act.

Setting up an environment

It is just markup

Telling the computer the pieces

What is semantics?

File Transfer Protocol

Connecting to the web

This protocol allows you to connect to other computers (i.e. servers) and transfer files to and fro.

Validate, validate, validate, validate, validate, validate...

Validate * (infinity + beyond)

Just head to the W3C HTML Validator (validator.w3.org)

Dev Tools

Your new best friend

Ever want to see what a website is made of? (Of course!) Try right-clicking and selecting 'inspect element' when looking at Google

This week's labs

The low-down

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 proposed by atomic design
Chapter 2 'Atomic Design Methodology' from Atomic Design by Brad Frost

Contacting Andrew