Unit Resources

General Resources

HTML Document Template [right-click, save-as...]

Dummy Text for copying & pasting

jQuery Library - download the compressed, production jQuery core

Drop down menu using CSS

W3C Code Validator

Little CSS Stuff Newcomers Get Confused About [very useful if you don't do well in Coding Test 1]

Colour Picker:

Remote Access Details:

  • Protocol: SFTP
  • host: media.mq.edu.au
  • username and password: same as what you use in the lab
  • port: (ask your tutor or John)

  • Protocol: AFP
  • host: afp://media.mq.edu.au
  • username and password: same as what you use in the lab

Major Project Exemplars

High Distinction




Coding Tests

Coding Test 1 - Brief / Images

Coding Test 2 - Brief / Files

Coding Test 3 - Brief / Files

Weekly Topics

Weeks 2 and 3 - HTML/CSS Refresher

Week 2 - HTML/CSS Refresher Worksheet

Week 4 - Introducing jQuery

Week 4 - Introducing jQuery

Week 5 - jQuery and the DOM

Week 5 - jQuery and the DOM


Examples of .find() [look in the source code]

What's the difference between mouseover and mouseenter? See here

Week 6 - Google Fonts and scrollTop

Week 6 - Google Fonts & scrollTop

Example Web Page

Example Web Page HTML

Example Web Page CSS

Week 7 - Audio and Video

Week 7 - Audio and Video

Sample Video - MP4 / OGG [right-click links and download videos]

HTML5 Media Events

Can I Use?

Week 8 - Google Map Plugin

Week 8 - Google Maps

jQuery Google Maps library [right-click, save-as...]

Google Map Example

Week 9 - Extras

CSS3 Transitions:

CSS3 - Example 1 (transitions and animation)

CSS3 - Example 2 (transitions for rotation)

CSS Animation for Beginners

Responsive Design:

Responsive Example

In your HTML <head> tag:

<meta name="viewport" content="width=device-width">

In your CSS:

@media only screen and (max-width: 960px) { /* adjust breakpoints as required */
				selector {
					property: value;
					property: value;