DevSoc Training Program Exercises

by Training Program Directors with contributions from the DevSoc community

Welcome to DevSoc's Training Program Exercises! This is a resource created by DevSoc volunteers for the Training Program to inspire and assist novice programmers gain basic web development skill in HTML/CSS, JavaScript and React.

This site features a selection of guides and exercises intended for 2025 DevSoc Trainees and were made to go along with concurrent workshops. However you are welcome to use this for our own self learning.

Disclaimer

While we try our best, we still may make mistakes here and there. If you spot any issues, mistakes or typos on this page fee free to create a pull request with the corrections or mention it in an issue.

Source Code

The source files from which this site is generated can be found on GitHub.

Getting Started

In this chapter we will begin by setting up the requirements for the rest of the program. There's a lot of learn so stay strapped! We will go through:

  • Setting up a coding environment on Windows and macOS
  • Installing Git, Node and NPM

Setting up a Coding Environment

To start learning and coding we of course need a proper work environment. This is highly customisable however this guide will only cover some basics and recommendations to get you going.

It is highly encouraged to set some time aside to configure your personal coding environment. This will not only improve your workflow but also allow you to customise everything from the aesthetics to shortcuts.

This will be split into two main parts for the most common operating systems: Windows and macOS. If you are using a Linux system this will not be too applicable, as you do not have to set up anything specific. However you are welcome to check out Customise the Command Line Prompt.

Please select the guide for your operating system and enjoy! Both of these guides will assume a start from scratch.

macOS Setup

Start by opening the terminal and typing the command:

git

This should prompt you to install the command line developer tools. This will install various tools to help you get started.

Homebrew

Next we will install Homebrew. Homebrew is a package manager for macOS which will freely allow you to install various tools and dependencies. It also provides for seamless removal of these tools.

First head to brew.sh and type the install command into your terminal. Here is a copy of it:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once the installation is completed the installation script will prompt you to run two lines in the terminal. Please run these two lines to add Homebrew to your path. This is necessary for the brew command to work.

Terminal

You may have noticed that the current terminal you have been working on looks ugly. Let's fix that!

Download iTerm2 from the webpage or with brew install --cask iterm2

Now to upgrade the look of the terminal install Oh My Zsh which is a framework for managing your zsh configurations which comes bundled with helpful functions, plugins and themes.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Once installed open your zsh config file usually located at ~/.zshrc. You should find a snippet with the variable ZSH_THEME:

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="random"

You are welcome to set this as random which will give you a random theme on every terminal. Then once you find one you like you can switch to just using that one. Alternatively you can download a theme like Powerlevel10k and customise that. The options are unlimited.

Now you can also adjust the settings of iTerm2. Open up the preferences and play around with the colours, transparency or any other settings. You can even install colour themes like my personal favourite Catppuccin.

While we are here there is a little secret within macOS for developers. When you create a folder the default icon is just a folder with a plain colour. For special folders there is icons for example, Documents, Downloads, etc... If you create a folder named Developer in your home this will also grant a special icon. You can then configure your terminal to always open in this directory and you can store all your code related projects here.

Visual Studio Code

The most popular used IDE for coding is Visual Studio Code. You have most ilkley encountered and used this before and here we will go through a local setup.

First install VSCode from the website.

Once you open the application the first thing to do is install the Code command to your path. This will allow you to open VSCode from your terminal. Type Cmd + Shift + P to open the command pallet and write Install Code. Now click on the Shell command and it should install.

Further Customisation

This should be enough to get you started developing! However there are an infinite amount of further customisations and other tools and applications you can install and include.

Windows Setup

Historically, Windows has not been the preferred OS for most web developers, but with the introduction of Windows Subsystem for Linux (WSL and WSL2), this allows us to install a linux distribution on Windows. This means we can run a real linux environment on our Windows system.

If you would prefer a local install see our Windows(Local) guide.

Installing WSL

The following steps will install Linux in your Windows environment. We will reference the official WSL Install Guide.

From the start menu, search for PowerShell and run it as an administrator by right-clicking nd selecting "Run as administrator". Now enter the following command to install wsl and then restart your machine.

wsl --install

This command will enable the features necessary to run WSL and install the Ubuntu distribution of Linux.

Ubuntu is the default linux distribution installed by WSL2. It is very beginner friendly to use and has a lot of documentation + support online. You can check out the documentation here!

Windows Terminal

Windows has an official Windows Terminal app. This will make it easy to work with the command line and allow you to quickly switch between using Linux and Powerful sessions.

It is recommended to set Ubuntu as your default profile as this will open Ubuntu on every new terminal instance by default. Open up the settings by selecting the drop down beside the + tab button or Ctrl + ,. Once you open the settings you can customise this as you like such as changing the colour scheme. You can even install your own colour themes like Catppuccin.

This configuration will only customise the look of the actual terminal and not the command line. We will go through a command line shell configuration later on in this guide.

Update the Linux

Open up an Ubuntu instance and type the following command to update the kernel.

sudo apt update && sudo apt upgrade

Customise the Command Line Prompt

There is still one problem, our command line looks ugly. Let's fix that!

We are going to install Oh My ZSH to gain more control over the Linux command line. Oh My Zsh provides helpful functions, plugins and themes to allow us to manage our Zsh configuration. To install it run the commands below:

sudo apt install zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

At this point, you probably don't know what type you would like to use. Open the zsh config file, usually located at ~/.zshrc and navigate to the following snippet.

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="random"

If you change this variable to random, a new theme will be selected every time you open up a new terminal session. Once you find one you like you can copy it's name into this field. Alternatively you can download a theme like Powerlevel10k and customise that. The options are unlimited.

Visual Studio Code

The most popular used IDE for coding is Visual Studio Code. You have most ilkley encountered and used this before and here we will go through a local setup.

First install VSCode from the website and open it as usually.

To connect WSL to VSCode we will have to install the WSL extension. This will allow us to use WSL in VSCode.

Once installed, open the command pallet in VSCode by typing Ctrl + Shift + p and search for WSL: Connect to WSL in new Window. You will now see that the box in the bottom left corner should now say WSL: Ubuntu. If you open a terminal in VSCode this will be running your zsh. Everything you do in this environment will be happening on linux.

You can now open VSCode from the terminal by navigating to the folder you'd like to open. Then type code . in the terminal. When doing this for the first time, you should see VS Code fetching components needed to run in WSL.

Further Customisation

This should be enough to get you started developing! However there are an infinite amount of further customisations and other tools and applications you can install and include.

Windows Local 😈

With the current trends at UNSW and the CS as a whole, I feel obligated to say that a local windows developer setup is likely not ideal especially for UNSW undergrad CSE Work. Problems that you will run into

  • Some software (build tools, packages, etc.) may be difficult/impossible to install and configure. A significant mention for this is the C family of languages.
    • Prepare to learn some fun things about windows when customising and messing around.
    • Typically less online support for these kinds of issues.
  • Terminal commands will not be the same. Recent powershell releases have brought it close to parity with unix based systems but there are significant differences.

However that being being said having your files on one system and not having to deal with the mental overhead of managing wsl may be worth it for you. For what its worth I've used this setup for most of my time at uni with only a few fustrations.

Windows Terminal

Windows has an official Windows Terminal app. This app makes it easy to switch between different terminals, including WSL if you do end up needing a linux subsystem at somepoint.

Once install take a look around which terminals are avaliable and try playing around with some of the customisations.

Powershell & Other Alternatives

By default Windows 11 contains the following command line tools, Windows Powershell and Command Prompt. When using command prompt you will need to use the windows specific commands & terminology. With Powershell there's an effort to support UNIX commands which results in an experience that you might be more familar with. At this point feel free to shop around for other terminals/shells that might suit you, personally I'm using PowerShell 7+.

For the rest of the guide we'll proceed with MS Powershell.

Winget

Winget is a command line install tool that is picking up in popularity. It provides a similar install experience to linux systems. It should be avaliable on Windows 10/11 systems. You can check if its installed with powershell

winget

If its not avaliable, installation instructions can be found here

Editors (VSCode)

The most popular used editor for coding is Visual Studio Code. You have most likley encountered and used this before and here we will go through a local setup.

First install VSCode from the website and open it.

You can now open VSCode from the terminal by navigating to the folder you'd like to open. Then type code . in the terminal.

Other Editors

If it peeks your interest I would recommend trying out different IDEs. Some personal suggestions are

  • Jetbrains Webstorm (and other IDEs for different languages). These are heavier IDEs with inbuilt debuggers and other features. Students at UNSW get free access so I'll recommend at least giving it a go while its cheap.
  • NeoVim. Huge variety of distribution and customisation options. It's really its own rabbit hole that you can dive down. These editors take a more minimalist and streamlined approach.

Whatever your choice I recommend taking your time to learn your enviroment in particular learning/setting up keybinds that may help save your wrists in the future.

Installation

Once you have an environment to code in we will need to install a few things before we can get going.

Zsh Plugins

If using Zsh, open the ~/.zshrc file and update the plugins. This will install git and nvm for you when you start a new terminal instance. If this is done you can skip to Configuring Git, Installing Node and NPM and Troubleshooting to see if this worked. Otherwise follow with the other steps.

plugins=(git nvm)

Git

Git is a version control system that tracks changes to a set of computer files which is usually used for coordinating work among programmers who are collaboratively developing source code. Git itself isn't too handy but when paired with a Git provider like GitHub and GitLab it becomes extremely powerful.

This guide will not cover how to work and use Git. If you want to learn how to use Git please read this Git Basics Guide.

Installing Git on MacOS

If you're using macOS, open a terminal and enter the following command:

brew install git

This command will use Homebrew to install git. Git may already be installed on your system, however this will ensure you have a more updated version.

Installing Git on Linux & WSL

If you followed the previous guide your Window's setup should now be running WSL and you will be coding within a linux sub shell. To install Git run the following commands in a terminal:

sudo apt update && sudo apt upgrade
sudo apt install git

Installing Git on Windows (Local)

Install git with the following command in a powershell instance.

winget install --id Git.Git -e --source winget

Configuring Git

After installing Git we have to configure it. To do so we need to set the name and email by running the follow commands remembering to replace the name and email.

git config --global user.name "Nicole Chun"
git config --global user.email "hello@devsoc.org.au"

You will now need to setup SSH keys if you haven't already. Guide for setting up SSH with GitHub

Node and Node Package Manager (NPM) - Windows Local

This installation process doesn't include a version manager.

Download node and follow the installation process. Install with all the default options.

Node and Node Package Manager (NPM) - MacOS, Linux, WSL

Throughout this course we will be working with JavaScript, TypeScript and the React framework which all involve using both Node and NPM. The best way to install this is to use Node Version Manager (NVM) which allows you to change your node version at will.

Installing NVM

We will be following the installation documentation found here.

To install nvm, we can use the following cURL or Wget command (pick one):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Either of these commands will download a script and run it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Please ensure that this snippet is included in your shell config file or else nvm will not work.

Installing Node and NPM

We can now install any version of node we wish to have. To simply install the latest version run

nvm install node # "node is an alias for the latest version"

Note that NVM will install both node and NPM.

If you wish to install or switch between versions please read through the documentation found here.

Troubleshooting

To check whether Git, Node of NPM has been installed correctly we can open a terminal and type the respective lines. If you see something similar the code below, then your installation is successful.

$ git --version
git version 2.43.0
$ node --version
v18.12.1
$ npm --version
9.8.1

Optional Extras and Recommendations

Here is a list of additional recommendations for plugins and tools which aren't necessary but will improve your coding experience.

VSCode Extensions and Themes

It is recommended to install a theme and any extensions you would enjoy, below are a few suggestions:

Themes and Aesthetics:

Utility:

For fun:

Web Browsers

As a web developer, you should also have a variety of browsers installed on your system. I would at least recommend the following two:

  1. Google Chrome
    • Widely used by most people and is the best for JavaScript debugging.
  2. Mozilla Firefox or FireFox Developer Edition:
    • FireFox has a much better suite of CSS and styling tools.
    • Developer Edition provides more developer features particularly for flex box and grids.

You can read much more about these web browsers on their respective pages or online.

Zsh Autosuggestions

This is a zsh plugin which will give you suggestions for your command line based on your previously used commands. To install it simply clone the repo into $ZSH_CUSTOM/plugins:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Then add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc) and start a new terminal session:

plugins=(
    # other plugins...
    zsh-autosuggestions
)

Homebrew installation

You can also install this using Homebrew (on macOS) by entering the following two commands:

brew install zsh-autosuggestions
source $(brew --prefix)/share/zsh-autosuggestions/zsh-autosuggestions.zsh

This will first install the plugin and then add it to the end of your .zshrc.

GitHub CLI

GitHub CLI allows you to access GitHub from the terminal. Allowing you to view repos, issues and pull requests from the command line. To install it follow the instructions found the official page.

Docker

It is also recommended to install Docker to containerise your project however this mostly likely will not be needed for beginner web developers. If you would still like to install it you can do some from the Docker Desktop site.

Other Text Editors

Alternatively you could try setting up and using another text editor like NeoVim however this takes more time and is more advanced and may not be worth your time.

To mention a possible solution, NvChad is a Neovim config which can be installed with one command however you will still need to set a few things up.

Core Training Program Workshops

This section contains the main 6 workshop taught during training program! These are considered fundamental knowledge when it comes to full stack web development.

Figma

Presentation Slides

Authors: Eve Miles | Link to slides | Link to live demo

Activities are on slide 26.

Intro to React

Presentation Slides

Authors: Alyssa Cheong & Giselle Putri | Link to slides | Link to repository

Activities are on slide 45.

Further React

Presentation Slides

Authors: Lachlan Shoesmith | Link to slides | Link to demo repo | Link to exercise repo | Exercise solutions

Activities are in the README.md file in the exercise repo.

CSS & Tailwind

Presentation Slides

Authors: Alfie Chen & Kim Lam | Link to slides | Link to exercise repo | Exercise solutions

Activities are in the README.md file in the exercise repo.

Backend with express.js and Linking to the Frontend

Presentation Slides

Authors: Alyssa Cheong & Giselle Putri | Link to slides | Link to exercise repo

Activities are in the README.md file in the exercise repo.

Databases with MongoDB

Presentation Slides

Authors: Alfie Chen, Kim Lam & Eve Miles | Link to slides | Link to exercise repo

Activities are in the README.md file in the exercise repo.

Extra Training Program Workshops

These workshops are not considered to be fundamental to full stack development, but the topics covered are often extremely useful for web dev.

Authentication in webdev contexts

Presentation Slides

Authors: Lachlan Shoesmith | Link to slides | No exercises yet