Coach's guide to tutorials

Introduction

This document serves as a quick guide to coaches about what each tutorial contains. It’s intended to help advise students on which tutorials are appropriate for them, and to guide coaches on what parts of a tutorial the student should be focussing on.

HTML & CSS

Lesson 1: Introduction to HTML

Prerequisites

  • A web browser
  • A text editor (see the getting started guide)

Learning goals

  • Understand what an element is and how their syntax works
    • Opening and closing tags
    • Attributes
  • Understand what these things do:
    • Headings h1..h6
    • Block elements p and div
    • Links a
    • Lists ul and ol
    • Images img
    • Comments <!-- -->
    • Entities &quot;
  • Some understanding of how URIs work in links and images

Lesson 2: Introduction to CSS

Prerequisites

  • A text editor
  • Able to read and write html syntax (no need to understand what the tags do)

Learning goals

  • Know what a CSS rule is and how its syntax works
  • Understand these selectors:
    • type a
    • class .foo
    • id #foo
    • descendant .foo a
    • :first-child
  • Some understanding of how specificity affects cascade order
  • Understand these properties:
    • line-height
    • border, margin, and padding
    • float
    • background-color
    • height and width
    • text-align

Lesson 3: Beyond the basics

Prerequisites

Learning goals

Lesson 4: Layouts and formatting

Prerequisites

Learning goals

Lesson 5: Diving into HTML5 and CSS3

Prerequisites

Learning goals

Lesson 6: Advanced HTML5

Prerequisites

Learning goals

JavaScript

Lesson 1: Introduction to JavaScript

Prerequisites

  • A text editor (see the getting started guide)
  • Chrome or firefox

Learning goals

  • Some understanding of basic javascript syntax
  • Understand:
    • what variables and expressions are
    • how to print things with console.log
    • Operators +, -, * and /
    • if statements
    • Operators ===, !==, > and <
    • how to write and call functions
    • variable scope in functions

Lesson 2: Beginning JavaScript

Prerequisites

  • Some understanding of basic javascript syntax
  • Understand (from lesson 1):
    • what variables and expressions are
    • how to print things with console.log
    • how to call functions
  • Understand basic HTML elements

Learning goals

  • Understand these things:
    • while and for(;;) loops
    • arrays
    • properties and methods
    • array methods push, unshift, pop, and sort
    • creating objects with initializers
  • Know how to find DOM objects via document
  • Know how to add new DOM objects to the page

Lesson 3: Introduction to jQuery

Prerequisites

  • Understand basic HTML elements
  • Some understanding of basic javascript syntax
  • Understand (from lesson 1):
    • what variables and expressions are
    • how to write and call functions
  • Understand (from lesson 2):
    • properties and methods

Learning goals

  • Understand these things:
    • constructing jQuery objects with CSS selectors
    • adding and removing elements with append and remove
    • changing elements with text, val, and addClass
    • adding event handlers with on
    • changing css properties with css
    • Array.prototype.forEach
    • $(document).ready
  • Know how to write event handlers for keyboard and mouse events
  • Know how to change web pages in response to events

Lesson 4: HTTP Requests, AJAX, and APIs

Prerequisites

  • Understand (from lesson 1):
    • what variables and expressions are
    • how to write and call functions
    • how to print things with console.log
  • Understand (from lesson 2):
    • properties and methods
  • Everything in lesson 3 goals

Learning goals

  • Understand these things:
    • basic structure of HTTP requests and responses
    • basic structure of JSON apis
    • using XMLHttpRequest to send queries
    • using JSON.parse to consume responses
    • using $.ajax to send queries and consume responses

Lesson 5: HTTP Requests, AJAX, and APIs (part 2)

Prerequisites

  • Lesson 4

Learning goals

  • Understand these things:
    • using POST and PUT requests
  • Practice working with jQuery and json apis

Lesson 6: Drawing in Canvas

Prerequisites

  • Understand basic HTML elements
  • Understand (from lesson 1):
    • what variables and expressions are
    • how to write and call functions
    • how to print things with console.log
  • Understand (from lesson 2):
    • properties and methods

Learning goals

  • Understand these things:
    • setting up a canvas for drawing
    • canvas coordinate system
    • drawing rectangles
    • drawing paths, using lines and arcs
    • transforming with rotate, translate, and scale

Lesson 7: Introduction to Testing

Prerequisites

  • Understand (from lesson 1):
    • what variables and expressions are
    • how to write and call functions
    • how to print things with console.log
    • Operators +, -, * and /
  • Understand (from lesson 2):
    • properties and methods

Learning goals

  • Know how to write tests with Jasmine
  • Get some experience of writing unit tests

Lesson 8: Building your own app

This isn’t a tutorial like the others, it’s a few pointers on how to start building something independently.

Prerequisites

  • As a minimum, lesson 3