Assignment 01: Getting Started (Index Page)

Workbook 1 - Getting Started (Index Page)

Welcome to the first weekly workbook for CS559!

The right way to use this workbook (or any of the workbooks) is to:

  1. Clone the workbook from GitHub (if you haven't already)
  2. Serve the folder using a local server
  3. Start by looking at the index.html file in the web browser.
  4. Follow the instructions

The fact that you are looking at this, means you probably have done the first of those steps!

For more information on workbooks, see Workbooks.
For more information on using a local server, see Tools(Local_Web_Server)

Note: this workbook is a little wordier and more "make sure you know how to do things" than future ones are likely to be. This workbook is to make sure you are ready to do programming. Later ones will be more about doing some programming.

In the future, we'll be doing graphics programming. This workbook is about making sure you are ready! Future workbooks will have you do more programming, and less plain reading.

Local Server Check

You should always "run" the web pages served by a local server. See Tools(Local_Web_Server) for more information. Using a local server requires both running the server and having the web browser look at the server. If you don't use a local server (and instead you just open the file in the web browser), problems can happen.

We have no way to check if you are using a local server.

Make sure that you know how to use a local server (that's a goal of this assignment) - we will need it for future assignments. Re-read Tools(Local_Web_Server), ask for help, whatever it takes.

Goals of this workbook

The learning goals of this workbook are:

  1. To make sure you can use the class mechanics (GitHub classroom links from Canvas, Git, local servers, editing pages, ...)
  2. To give you an idea of how the workbooks will work for the class (looking at pages, editing and adding things, turning things in)
  3. To review a little bit of basic HTML and CSS that you will need for class
  4. To look at a little bit of JavaScript, and see how we attach programs to web pages
  5. To see how we make interactions and animations with JavaScript web pages
  6. To understand event-driven- and animation-loop-driven- programming
  7. To practice writing some JavaScript and make sure you have all your tools set up

What you should do with this workbook

If you haven't already done it, please review all the pages on the Course Website. The Getting Started page is a good place to get started. The fact that you found this workbook and got this far means you've done at least some reading.

You are required to edit the file (see the Workbooks instructions), so you might as well put your name, GitHub ID, and WiscID into the file now. You could commit those changes and push them back to GitHub just for practice.

The main part of this workbook is a series of web pages (imaginatively called one.html, two.html, etc.). You should work through these in order. First open the web page in the web browser, and follow the instructions (which will usually involve opening the file in an editor, and modifying it and/or its associated JavaScript files). Remember to always use a local web server (don't just open the files in the browser).

There is a file for you to edit - you should do this after you've done everything else.

And when you're done, don't forget to commit your work and push it back to the GitHub repo that GitHub classroom made for you!


The pages of this workbook are required reading! That includes reading them as web pages, but also, reading them as source code.

Other readings are sprinkled across the pages of this workbook. Some things that you should make sure that you read along the way:

For this week, there are no regular readings (book chapters). Those will start in the next week or two.


The graders will mainly be checking to make sure you've followed the directions. If you've done everything you're supposed to (made the required changes to files, added the required file, done the README and QUESTIONS, ...) you will get the highest possible score (AB - remember that you cannot get As on workbooks).

A lot of this assignment is "self-certified" - we'll trust you that you did what we asked you (if you turned something in, we'll assume its correct). So for example, the graders won't check to see what changes you made to one.html, they will only check that you made a change to the file.

Important: Make sure you understand everything! The ideas from this workbook will keep coming back in the future: on other workbooks, and on the exams. (yes, we will ask you about HTML and JavaScript)

There are no bonus points available for this workbook.

Now go on to the first part of the workbook: one.html