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

Colour Picker

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

Accordion

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

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...]

http://maps.google.com/maps/api/js?sensor=true [right-click and copy link location]

Get latitude and longitude

Google Map Example

Week 9 - Responsive Design (not required)

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;
	}
}

Responsive Example