Exercise 0: Setting up a development environment
There is no lab this week, but it is a good idea to take the time to:
- familiarize yourself with the linux command line
- set up a development environment for the unit
- set up several browsers and understand their advanced features
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.
Editor
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:
- Firefox from Mozilla
- Chrome from Google
- Edge from Microsoft (if you OS is compatible)
- Safari from Apple (if your OS is compatible)
- Opera from Norway
- Vivaldi from the co-founder of Opera
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:
- View the cookies your browser has stored
- View the source of the CITS3403 web page
- View the CITS3403 web page as it would be displayed on a mobile phone
- Make a local change to the style CITS3403 web page (e.g. make the background purple)
- Find the javascript console and perform some basic arithemtic functions (e.g. calculate 1+1)