-
00: Assignment Specifications
-
Assignment 1
-
Assignment 2
-
-
00: Module Overview
-
Course Preview + Html Editing
-
-
01: Introducing HTML
-
HTML Fundamentals
-
-
02: Introducing CSS
-
HTML & CSS
-
CSS Fundamentals
- 02: Introducing CSS
-
-
03: Box & Grid
-
Box Model
-
Layout
- 03: Box & Grid
-
-
04: Navigation & Style
-
Navigation
-
Design I: Introduction
-
-
05: Deployment & Templating
-
Deployment
-
Templating
-
Design II: Typography (+ html coding standards)
- 05a: Templating
-
-
06: Semantic + CSS Frameworks
-
06a: Semantic HTML
-
06b: CSS Frameworks & Semantic UI
-
06c: Colour
-
06d: Web Project Repositories
- 06a: Semantic + CSS Frameworks
-
-
07: Applications
-
Introducing Play Framework
-
Play Project Structure
- 07: Starting to Play
-
-
08: Models & Views
-
Controllers + Views
-
Models
- 08: Introducing MVC
-
-
10: Sessions
-
Sessions in Todo
- 10: Sessions
-
-
11: Sessions & Models
-
Play Review
-
Playlist Sessions
-
UX for Application Development
- 11a: Playlist Sessions
-
-
12: Deployment
-
Git
-
Deployment
- 12: Deployment
-
Lab-00 Editing HTML

Introduction to Editing and viewing a html page
Lab-01 HTML Structure

folders · head · title · link · image · references
Lab-02 CSS Intro

inheritance · classes · fonts · colours · indentation · best practices
Lab-03a Layout

fonts · content · images · classes · folding editor · sidebar · float
Lab-03b Multicolumn

header · maincontent · navigation · footer · primary · secondary
Lab-04 Navigation

Devise a simple navigation metaphor for a web site.
Lab-05a Harp & Surge

Install software tools to serve a web site locally and also to deploy the web site to a public web server.
Lab-05b Templates

Refactor the bundle-store site to use EJS templates
Lab-06a Nav Params

Introduce semantic elements. Define a parametrised navigation partial
Lab-06b Semantic-UI

Create a revised version of bundle-store using the Semantic UI CSS framework.
Lab-07a Play Setup

Install and test Git + the Play Framework (Note: the video shows java + play revisions a little behind your current installation)
Lab-07b Playlist 1

Import, rename and run a new starter project. Extend the project to include a Model. (Note: the video shows java + play revisions a little behind your current installation)
Lab-08a Playlist-2

Move the playlist model into the database. Prime the database from a YAML file.
Lab-08b Playlist-3

Move the playlists into their own view. Introduce routes for opening the playlist and also deleting individual songs.
Lab-09a Todolist-1

Develop a completely new application, using the techniques we have explored so far.
Lab-09b Playlist-4

Introduce forms into a play application to enable the user to create playlists.
Lab-12b Git Workflow

Rebuild Todolist - this time committing to git version control as the app is composed using Sourcetree