Code Snippets

HTML Page Skeleton

This code is a good place to start for a basic HTML5 page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>

</body>
</html>

If we're going to think about small-screen browsers (and we should), we can add this to the <head>:

<meta name="viewport" content="width=device-width,initial-scale=1" />

Basic CSS

There is no analogous “default” stylesheet template, but this is a nice start for a stylesheet, with rationale described in Responsive Design.

body {
  max-width: 40em;
  line-height: 1.4;
  margin: 1em auto;
  color: #333;
}

I also have a slightly more complete template that is a little more opinionated, which I actually use for simple pages I create

JavaScript

As we start working with JavaScript, we will add the jQuery library and our own JavaScript code by adding elements like this to our HTML pages' <head>:

<script src="https://cmpt165.csil.sfu.ca/js/jquery-3.2.1.js"></script>
<script src="my-code.js"></script>

And later add the Raphaël library as well:

<script src="https://cmpt165.csil.sfu.ca/js/jquery-3.2.1.js"></script>
<script src="https://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="my-code.js"></script>

The JavaScript code we create will likely start with a setup function that connects events after the page is loaded:

setup = function() {
  ...
}
jQuery(document).ready(setup)