Getting started Page (#12)

* Completed macOS Setup Guide

* Completed Installation guide

* complete windows setup

* updated installation and added extras

* added descriptions to vscode extensions

* update spelling and convert colons to dashes

* update contributor information

* Fixed spelling errors

* Update authors in book.toml

---------

Co-authored-by: Dylan <[email protected]>

README.md

@@ -45,3 +45,5 @@ Alternatively you can use the `serve` command, which will build your book and st
 ```sh
 mdbook serve book --open
 ```
+
+Once your feature is ready to go, feel free to add your name to the list of [contributors](./contributors.md).

book/book.toml

@@ -1,5 +1,5 @@
 [book]
-authors = ["Dylan"]
+authors = ["Dylan Huynh", "Nicole Chun", "Jeremy Le", "Alex Lee"]
 language = "en"
 multilingual = false
 src = "src"

book/src/01_getting-started/coding_setup.md

@@ -0,0 +1,12 @@
+# 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, however feel free to check out REMEMBER TO ADD A LINK
+
+Please select the guide for your operating system and enjoy! Both of these guides will assume a start from scratch.
+
+- [macOS](./macos.md)
+- [Windows](./windows.md)

book/src/01_getting-started/index.md

@@ -1,3 +1,6 @@
 # Getting Started
 
-## Installing NPM
+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

book/src/01_getting-started/installation.md

@@ -0,0 +1,99 @@
+# 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](#configuring-git), [Installing Node and NPM](#installing-node-and-npm) and [Troubleshooting](#troubleshooting) to see if this worked. Otherwise follow with the other steps.
+
+```sh
+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](https://gist.github.com/jeremyle56/f3b664f0491d6ec0d9a03ab34780b876).
+
+### Installing Git on macOs
+
+If you're using macOS, open a terminal and enter the following command:
+
+```sh
+brew install git
+```
+
+This command will use [Homebrew](https://brew.sh/) 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
+
+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:
+
+```sh
+sudo apt update && sudo apt upgrade
+sudo apt install git
+```
+
+### 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.
+
+```sh
+git config --global user.name "Nicole Chun"
+git config --global user.email "[email protected]"
+```
+
+You will now need to setup SSH keys which can be done by following the Guide mentioned above.
+
+## Node and Node Package Manager (NPM)
+
+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](https://github.com/nvm-sh/nvm) (NVM) which allows you to change your node version at will.
+
+### Installing NVM
+
+We will be following the installation documentation found [here](https://github.com/nvm-sh/nvm).
+
+To install nvm, we can use the following cURL or Wget command (pick one):
+
+```sh
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+```
+
+```sh
+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`).
+
+```bash
+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
+
+```sh
+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](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating).
+
+## 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.
+
+```sh
+$ git --version
+git version 2.43.0
+$ node --version
+v18.12.1
+$ npm --version
+9.8.1
+```

book/src/01_getting-started/macos.md

@@ -0,0 +1,61 @@
+# macOS Setup
+
+Start by opening the terminal and typing the command
+
+```sh
+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](https://brew.sh/). 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](https://brew.sh/) and type the install command into your terminal. Here is a copy of it:
+
+```sh
+/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](https://iterm2.com/) from the webpage or with `brew install --cask iterm2`
+
+Now to upgrade the look of the terminal install [Oh My Zsh](https://ohmyz.sh/#install) which is a framework for managing your `Zsh` configurations which comes bundled with helpful functions, plugins and themes.
+
+```sh
+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`:
+
+```bash
+# 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](https://github.com/romkatv/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](https://github.com/catppuccin/iterm).
+
+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](https://code.visualstudio.com/) 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.

book/src/01_getting-started/optional_extras.md

@@ -0,0 +1,80 @@
+# 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:
+
+- [Catppuccin for VSCode](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc)
+- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
+- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) - for better icons
+
+Utility:
+
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - enable auto format on save to maximise utility
+- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - enables you to run local servers for development
+- [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
+- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - for editing HTML/XML tags
+- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - display errors inline to avoid hovering
+- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - displays more Git information
+
+For fun:
+
+- [Discord Presence](https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode) - connect VSCode with Discord activity
+
+## 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](https://www.google.com.au/intl/en_au/chrome/)
+   - Widely used by most people and is the best for JavaScript debugging.
+2. [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/) or [FireFox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/):
+   - 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`:
+
+```sh
+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:
+
+```sh
+plugins=(
+    # other plugins...
+    zsh-autosuggestions
+)
+```
+
+### Homebrew installation
+
+You can also install this using Homebrew (on macOS) by entering the following two commands:
+
+```sh
+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](https://cli.github.com/).
+
+## 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](https://www.docker.com/products/docker-desktop/) site
+
+## Other Text Editors
+
+Alternatively you could try setting up and using another text editor like [NeoVim](https://neovim.io/) however this takes more time and is more advanced and may not be worth your time.
+
+To mention a possible solution, [NvChad](https://nvchad.com/) is a Neovim config which can be installed with one command however you will still need to set a few things up.

book/src/01_getting-started/windows.md

@@ -0,0 +1,72 @@
+# 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.
+
+## Installing WSL
+
+The following steps will install Linux in your Windows environment. We will reference the official [WSL Install Guide](https://learn.microsoft.com/en-us/windows/wsl/install).
+
+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.
+
+```sh
+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](https://apps.microsoft.com/detail/9n0dx20hk701?rtc=1&hl=en-au&gl=AU). 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](https://github.com/catppuccin/windows-terminal).
+
+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.
+
+```sh
+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](https://ohmyz.sh/) 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:
+
+```sh
+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.
+
+```bash
+# 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](https://github.com/romkatv/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](https://code.visualstudio.com/) from the website and open it as usually.
+
+To connect WSL to VSCode we will have to install the [WSL extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl). 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.

book/src/SUMMARY.md

@@ -3,6 +3,11 @@
 [Training Program Exercises](title-page.md)
 
 - [Getting Started](01_getting-started/index.md)
+  - [Setting up a Coding Environment](01_getting-started/coding_setup.md)
+    - [macOS](01_getting-started/macos.md)
+    - [Windows](01_getting-started/windows.md)
+  - [Installing Git, Node, NVM](01_getting-started/installation.md)
+  - [(Optional) Additional Tools](01_getting-started/optional_extras.md)
 - [Javascript](02_javascript/index.md)
   - [Example Exercise](02_javascript/example.md)
 - [Figma](03_figma/index.md)

contributors.md

@@ -2,11 +2,19 @@
 
 Special thanks to everyone who has helped create and improve this resource. In no particular order:
 
+Training Program Directors
+
 - Dylan Huynh
 - Nicole Chun
+
+Training Program Helpers
+
 - Michael Vo
 - Hanyuan Li
 - Christian Lam
 - Jayden Nguyen
 - Alex Lee
+
+Other Contributors
+
 - Jeremy Le