Exercise 2: Setting up a development environment

The aims of this lab are:

Familiarisation with the Environment

  1. If you haven't done so before, go through the Linux Tutorial Introduction to Linux. 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. Howeevr, 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.

  2. 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, or Sublime Text are popular choices. In the workshops we will use VSCode, so it is worth setting up VSCode so you can follow along.

    Setting up VSCode

    Follow the setting up VSCode tutorial here 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 here. 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.

    Create your own home page

    Create an HTML5 home page for yourself. The home page should contain a welcome message, a photo, a bullet list of the units you are studying, with each item in the list linked to the Unit Outline for that unit, and a table containing your timetable. You may find it useful to access some of the HTML5 references provided in the lectures.

    Do not be too concerned about page output layout at this stage (tho you should use suitable indentation to show the structure of the page source).

    Open the page in Firefox, Chrome and Opera to check that it works as expected. You may also want to have a look at it with Internet Explorer (if you're in Windows). Depending on your operating system, you can also check it under Safari and SeaMonkey.