Week 1

HTML5 Elements
& Flexible Responsive Layouts

This article covers basic HTML5 tags such as the header, footer, article ,section and nav tags. It also covers building a simple fluid responsive website using percentage widths and media queries.

The zip file contains HTML, CSS, javaScript and image files.

Download .zip Webpage

Week 2

Jquery basics
& manipulating the dom

In this session we'll cover the basics of jQuery and we will build a simple webpage with an jQuery animated accordion.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip accordion

Week 3

Thumbnail Hover States
Using jQuery and CSS3

This article covers building a simple grid of thumbnails in HTML and CSS with jQuery hover states.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip Thumbnail Demo Page

Week 4

javascript operators
& Building a simple Calculator

This article covers using javascript arithmetic operators and building a simple culculator is HTML, CSS and jQuery.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip Calculator

Week 5

Jquery and CSS thumbnail slideshow

In this session we will build a simple webpage with a thumbnail slideshow. We will build two versions of this slideshow, one jQuery version and one powered by a combination of CSS and jQuery.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip JQUERY VERSION CSS VERSION

Week 6

Scrolling a webpage using Jquery
Using the Masonry plugin

In this session we will build a simple animated scrolling webpage using jquery. We will also use the Masonry plugin to layout some thumbnails on a responsive webpage.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip Jquery scroll Masonry

Week 7

Fading banner image on page scroll

In this session we will build a simple scrolling web page with a static responsive banner section using the CSS3 background size cover method. We will then fade this image out as the page scrolls using jQuery.

The zip file contains HTML files with their accompanying style sheets, js files and other assets.

Download .zip Scroll Fade

Week 8

Working with scalable vector graphics
Building an icon based web app capable webpage

In this session we will cover the creation and usage of scalable vector graphics (svg's) as well as building a simple web app capable page using these.

The zip file contains HTML files with their accompanying style sheets, js files and an Adobe Illustrator file.

Download .zip Web App

Week 9

The HTML5 Video Tag

In this session we will build a simple webpage with a custom HTML5 video player. Here is an excellent tutorial on using the HTML5 video tag.

The zip file contains HTML files with their accompanying style sheets and js files.

Download .zip Video

Week 10

Using @Font face
Building a lightbox style overlay

In this session we will cover the @font face technique of embedding fonts within a webpage. We will also build a simple webpage with jquery powered lightbox style overlay.

The zip file contains HTML files with their accompanying style sheets and js files.

Download .zip Overlay

Week 11

Scrolling content within an element using jquery
An introduction to AJAX

In this session we will build a simple web page using jquery to scroll the content of a element. We will also use the jquery .load method to load html content into an existing page.

The zip file contains HTML files with their accompanying style sheets and js files.

Download .zip scroll pane