Setting up codeanywhere.com

First, download a recent version of the Google Chrome browser. We recommend that you use Chrome for all pages in the course, and for your development work in the course. Run Chrome and use it to navigate to codeanywhere.com.

Clients and servers

The laptop or tablet you are using is acting as a client: a computer that you have in your hands. Somewhere else, there is a server computer that hold some files. When you type an address into your web browser, the browser connects to a server, fetches some files, and displays them:

In order to write a web page, you’ll need to edit those files on the server. Codeanywhere has some additional files that form the codeanywhere editor on its server. When you direct your browser to that editor, you can edit the web pages in your browser, and then save them back to the server.

Create an account at codeanywhere

  1. On the main page, enter an e-mail address to start the process.

  2. Check your e-mail for an e-mail from codeanywhere. Click the link they sent you to confirm your account.

Create a new server and a connection to that server

After you have created an account, click on the button for the Editor. You should now be on a page called the “connection wizard”; it should look something like this:

A connection is a connection to some (virtual) server where you can put .html and .js files that make up a web page. When you first create the connection, codeanywhere will set up some software that can be used on that server. In this case, we want the PHP software. So

  1. Scroll down the window and click on the PHP entry. (Be careful; there are others with the name PHP. You want the one with exactly the name PHP, and with the Ubuntu operating system, as shown in the picture.)

  2. Click on the “name” field at the top of the dialog to give your new server a name. I called mine fwp.

  3. Click on the button “Create” at the bottom. A dialog will appear. Wait until the server has been created and close the dialog. You should now see something like this:

Upload some files to the server

  1. Download this zip file, which will be used in assignment one. Unzip the files somewhere on your own computer, giving you logo.js and logo.html.

  2. On the left side of the codeanywhere editor, you should see the word connections. Under that word you should see the connection you created; I called mine fwp. Right-click on fwp You should now get a dropdown menu that has the choice of uploading files. Click upload, and drag the files logo.html and logo.js into the big area in the middle of the screen with a plus sign.

Running code with the IDE

The software that you will use to create, edit, view, and run files is called the Integrated Development Environment, or IDE for short.

Double-click on the logo.html file on the left. The IDE should now display code like this in the main editor window:

Press the little gray arrow near the top of the page (marked in the last figure) to run your code. Chrome should open a new browser window listing your files on the server:

From this page, you can select web pages and view them in your browser. For example, you can click on the logo.html to see a very simple web page with a blue and black company logo on it: