---
# System prepended metadata

title: ACIT 1620 Lab 2
tags: ['1620']

---

# Lab 2

In this lab, you will build a web page, tracking changes using `git` and publish the page on Github Pages.

## Setup

- Within the `acit1620` folder you created last week, create a new folder named `lab2`
- Initialize a git repository inside `lab2` as follows:
    - Open `lab2` in Visual Studio Code
    - Navigate to `terminal` tab and select `New Terminal` (you can also launch the terminal from inside VSCode by pressing <kbd>Ctrl</kbd> + <kbd>`</kbd> key combination )
    - run: `git init`

- Download the `lab2-files.zip` file containing starter code from the Learning Hub and extract the contents into `lab2` folder (making sure to skip the `__MACOSX` folder). 
- Rename `lab2.html` to `index.html`
- You are ready to begin.


## Step 1: Initial commit

- Open `index.html` and add the top level heading (the page content has been provided for you on the Learning Hub)
- For now, skip the links at the top of the page. You will add them later.
- The page has three sections. Each section has a heading and a couple of paragraphs. Use the `section` element to structure your page. 

``` html
<section>
  <!-- section level heading -->
  <!-- content -->
</section>
```

- Add the first section (titled `HTML`)
- Save and commit your changes

## Step 2: Push changes to Github

- Log into your Github Account (you should have created one by now) and create a new repository named `acit1620-lab2`
- Set this as a remote to your local repository, like so:
    - `git add remote add origin your_github_repo_url`
- Push your changes to github:
    - `git push -f -u origin main`

- From here onwards, whenever you commit new changes to your local repository, you can push them to Github simply by running the following command:
    - `git push`

## Step 3: Build the rest of the page

- Add the remaining sections to the page, making sure to commit your changes often (after each section would be a good idea)
- Embed the images
- Rewrite your section headings as document fragments
- Add the table of content at the top of the page, linking to the document fragments on the page as shown in the demo video.
- Optionally, add a `(back to top)` link at the end of each section
- Save, commit and push your changes

## Step 4: Publish your page to Github Pages

- On Github, go to `Settings`, and select `Pages` tab
- Select the branch to publish from as shown below, and press `Save`

![image](https://hackmd.io/_uploads/HyvOXSztT.png)

- After a short time, your webpage will be publicly available at the following URL:
    - `https://<your_username>.github.io/acit1620-lab2/`

- Congratulations! You have successfully publish your first web page.

## Submission

- Make sure your web page meets the requirements of this lab as shown in the demo video and has been published
- Submit your page's public URL to the `Lab 2` folder on the Learning Hub by midnight next Sunday (Jan 21st).



