# 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).