-
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
![](topic-00-overview/unit-a-course-review/book-a/img/main.png)
Introduction to Editing and viewing a html page
Lab-01 HTML Structure
![](topic-01-introducing-html/unit/book-b/img/main.png)
folders · head · title · link · image · references
Lab-02 CSS Intro
![](topic-02-introducing-css/unit-b/book/img/main.png)
inheritance · classes · fonts · colours · indentation · best practices
Lab-03a Layout
![](topic-03-box-model/unit-a/book-a/img/main.png)
fonts · content · images · classes · folding editor · sidebar · float
Lab-03b Multicolumn
![](topic-03-box-model/unit-b/book-b/img/main.png)
header · maincontent · navigation · footer · primary · secondary
Lab-04 Navigation
![](topic-04-navigation/unit-a/book/img/main.png)
Devise a simple navigation metaphor for a web site.
Lab-05a Harp & Surge
![](topic-05-templating/unit-a/book-01-deployment/img/main.png)
Install software tools to serve a web site locally and also to deploy the web site to a public web server.
Lab-05b Templates
![](topic-05-templating/unit-b/book-templates/img/main.png)
Refactor the bundle-store site to use EJS templates
Lab-06a Nav Params
![](topic-06-css-frameworks/unit-a/book-nav-2/img/main.jpg)
Introduce semantic elements. Define a parametrised navigation partial
Lab-06b Semantic-UI
![](topic-06-css-frameworks/unit-b/book-semantic-ui/img/main.png)
Create a revised version of bundle-store using the Semantic UI CSS framework.
Lab-07a Play Setup
![](topic-07-starting-play/unit-1/book-b-setup-play/img/main.png)
Install and test Git + the Play Framework (Note: the video shows java + play revisions a little behind your current installation)
Lab-07b Playlist 1
![](topic-07-starting-play/unit-2/book-c-playlist-1/img/main.jpg)
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
![](topic-08-introducing-mvc/unit-1/book-a-playlist-2/img/main.png)
Move the playlist model into the database. Prime the database from a YAML file.
Lab-08b Playlist-3
![](topic-08-introducing-mvc/unit-2/book-b-playlist-3/img/main.png)
Move the playlists into their own view. Introduce routes for opening the playlist and also deleting individual songs.
Lab-09a Todolist-1
![](topic-09-forms/unit-1/book-a-todolist/img/main.jpg)
Develop a completely new application, using the techniques we have explored so far.
Lab-09b Playlist-4
![](topic-09-forms/unit-2/book-b-playlist-4/img/main.jpeg)
Introduce forms into a play application to enable the user to create playlists.
Lab-12b Git Workflow
![](topic-12-deployment-review/unit-0/book-c-git/img/main.png)
Rebuild Todolist - this time committing to git version control as the app is composed using Sourcetree