BTI220 + INT222 weekly topics draft

Weekly topics

Week Theme Topics Work
Week Theme Topics Work and practice
(in summer BTI220)
1 Internet, JS Internet architecture introduction and overviewHTTP basicsInternet development overviewGetting started with JavaScriptFirefox Scratchpad; console.log() and prompt()

Syntax, language tour

Truthy, falsy, === vs. ==

1% – quiz2% – quiz
2 JS Number, String, Boolean, DateLearning from the API and its documentationObject literal, Array literalthisScope introduction and overview

Functions introduction, Function literal

Function declaration, vs. function expression


3% – lab 1
3 JS Regular expressionsPrototypal inheritance 3% – lab 2
4 HTML, DOM Modern browsers and their developer tools (and ignore older browsers completely)Plain text editing (Notepad, TextEdit)Project organization and suggestionsWeb site design – bottom up (not top down)HTML introduction

Tour of elements (applied)

DOM introduction, window object, globals

3% – lab 3
5 DOM, CSS DOM modifications, HTML (structure, content)Tables for presenting dataNode discussionCSS introduction 3% – lab 4
6 CSS Box modelHow to organize rulesCSS tour (applied)SelectorsDOM modifications, CSS (formatting, appearance)

Type overview

Colour overview

7 HTML Programming assignment introductionWeb dev topics – hyperlinksDeveloper tools – more (inspector, etc.)Editors – Notepad++, Komodo Edit (avoid code-generating IDEs like Dreamweaver) 30% – mid-course test (in the last class of the week before study week break)
Study week
8 Menus, layouts (from now on, the overall theme is “apply the foundations to a number of popular and widely used web client development situations”…)Nav menu, single-level (using unordered list)Nav menu, two-level

Two area layout, fixed and fluid options

Three area layout, fixed and fluid options

9 DOM modification More serious DOM modificationsSelectors, NodeListEvents 5% – assignment, interim deliverable (to ensure progress is being made)
10 HTML Forms HTML Forms overview and use caseProcessing form input in-browser and at-serverTour of elements (applied)Matching input types to input data, validationForm design basics
11 Media Image galleriesVideo and audio elementsCanvas element introduction
12 Ajax Ajax introductionMore about HTTP, and GET and POSTData formats (JSON and XML)Getting a web server involved (e.g. matrix), with static resources (i.e. do not introduce php)Tour of functionality (applied) 20% – assignment, final deliverable
13 More layout Print-ready layoutResponsive layout to accommodate mobile etc.Optional – demonstrate selected assignments done by students
Exam week 30% – exam


So… what’s missing?

And why?

Lack of time, or too advanced for first-year students.

Libraries (e.g. Moment.js, Underscore.js, jQuery) – we are using Vanilla JS (ha ha) (


Using JSFiddle

JavaScript patterns

Prototype inheritance chain details


HTML5 storage and other APIs




  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: