Exercise 0: Setting up a development environment

There is no lab this week, but it is a good idea to take the time to:

Familiarisation with the Environment

If you haven't done so before, go through a Linux Tutorial like this one from Cannonical. In this unit we will focus on web development in a linux environment, but you don't need to use the full linux operating system. However, we will be assuming that server side environments are running linux so it is useful if you have a local emulator to help debug your code. OSx is based on Unix, so the terminal application will be suitable, and recent Windows versions include the Windows Subsystem for Linux. Alternatively, you can use a virtual machine, via a program like VMWare or VirtualBox, or even access a virtual machine through your browser.


You may use the editor of your choice for this unit, however you should use one that does automatic indentation and colour highlighting of text according to role. Brackets, Atom, Visual Studio Code, and Sublime Text are popular choices. In the workshops we will use Visual Studio Code (VSCode), so it is worth setting up VSCode so you can follow along.

Setting up VSCode

Follow the set up tutorial for VSCode to install VSCode on your own machine (or open VScode if you are using a lab machine and go through the exercises). Then, go through the language support for HTML in VSCode. Note that there are also tutorials on language support for CSS, JavaScript and Python; so it is worth revisiting these pages when we cover these topics.

Get to Know Your Browsers

The browser is the primary interface for the World Wide Web, and have evolved together. Much of what we do in this unit will need to be tested and analysed in several browsers. Set up several browsers on your computer, such as:

The browsers are all quite similar but have different features to help developers. In addition to viewing course materials and browsing the web, we will use the browsers to inspect and prototype web applications. For your preferred browser, find the developer tools and find a basic tutorial for Firefox, Chrome, Edge, Safari, Opera, or Vivaldi. Try the following tasks:
  1. View the cookies your browser has stored
  2. View the source of the CITS3403 web page
  3. View the CITS3403 web page as it would be displayed on a mobile phone
  4. Make a local change to the style CITS3403 web page (e.g. make the background purple)
  5. Find the javascript console and perform some basic arithemtic functions (e.g. calculate 1+1)