Resources

This folder contains several resources to help you with programming for the web:

• template.html: This is a simple template you can use as a starter for any HTML project.
• htmlGuide.html: A quick demo of many of the most common HTML elements. Be sure to compare the source code with the resulting webpage.

Each module and lesson also contains resources specific to the task. You can find a summary of those resources below.

General

Concept	Resource
General	StackOverflow W3Schools CSS-Tricks Course Resources

HTML

Concept	Resource
Text	HTML headings and paragraphs CSS text-align property
Divs	Div tag (W3Schools) Using 100% height in CSS
Buttons	HTML button element Button onclick event (linking to functions)
Input elements	Different input types (W3Schools)
Dropdowns	HTML select element
Sound	HTML5 audio element how to play audio on button click (try the "Try it Yourself")
Images	HTML image element

JavaScript

Concept	Resource
JavaScript	JavaScript script tag (put it at the end of body) JS Operators
Variables	JS Variables JS Assignment Operators JS variable scope
Type conversion	Strings to numbers (search parseInt() and parseFloat() on this page) Numbers to strings (search toString() and toFixed() on this page) More type conversions
If statements	If statements
Getting HTML content	getElementById() (W3Schools) Input text value property (W3Schools) Getting dropdown selection value (W3Schools)
Displaying results	JavaScript output summary (W3Schools) Option 1: JS alert box Option 2: Changing HTML content Option 3: console.log
Manipulating CSS	JavaScript changing CSS (W3Schools)
Math operations	JavaScript arithmetic JavaScript Math object
String manipulation	JS Operators (scroll to "string operators") String concatenation (or simply use str1 + str2) JS string methods (W3Schools)
Random values	JavaScript random (in particular, "random integers") getting a random array value - try Google!
Arrays	JavaScript arrays (look at "Creating" and "Access the Elements")
Loops	JS while loop JS for loop Looping through each character in a string (StackOverflow)
Timeout	setTimeout() method (W3Schools) clearTimeout() method (W3Schools)
Mouse input	onmousemove, onmousedown, and onmouseup events (W3Schools) Relative mouse position (StackOverflow) Mouse position - pageX vs screenX vs clientX (StackOverflow)
Template literals	Template literals (advanced strings - not supported in IE)

CSS

Concept	Resource
CSS Summary	List of CSS Properties
Layout	how to make a webpage full-screen (set html and body to height: 100%; width: 100%) how to centre elements horizontally/vertically (lots of methods, it's harder than it sounds!)
Position	Position property (W3Schools) CSS layout - position (W3Schools)
Height/Width	CSS Height and width
Colors	CSS Colors (W3Schools)

HTML5 Canvas

Concept	Resource
Canvas	HTML5 Canvas (W3Schools) Canvas lineTo(), lineWidth, strokeStyle, arc(), fill() (W3Schools) Clear the canvas for redrawing (StackOverflow)
Examples	Examples: 1, 2, 3 Note: #1 above frequently uses $(), which is called jQuery (and is outside the scope of this module), but there are still useful concepts in it

Other

Concept	Resource
ASCII	ASCII table and description Character -> ASCII code (charCodeAt()) ASCII code -> character (String.fromCharCode())