W01 — Principles & Practices + Project Management

Git is a version control system that keeps a timestamped history of every change made to a project, so nothing is ever lost and progress can always be traced back step by step. That matters here because Fab Academy documentation is meant to be built up continuously, week by week — not written all at once at the end.

I followed the Fab Academy tutorial to install Git and set up Git Bash. The key insight was that Git isn't just a backup tool — it's a live record of how a project evolves over time, which is exactly what this kind of documentation requires.

1. Downloaded Git for Windows from gitforwindows.org and ran the installer, keeping the default options.
2. Opened Git Bash and confirmed the installation by running git --version. Seeing a version number printed back confirmed Git was ready to use.

An SSH key is a pair of cryptographic keys — one private, one public — that lets my computer prove its identity to GitLab without typing a password on every push. The private key stays on my machine and is never shared; the public key is uploaded to GitLab so any request signed by the matching private key is trusted automatically.

1. In Git Bash, generated a new key pair:
   bash

   $ ssh-keygen -t ed25519 -C "aishaalshehri@gmail.com"

2. Pressed Enter to accept the default save location and set an optional passphrase.
3. Copied the public key to the clipboard:
   bash

   $ cat ~/.ssh/id_ed25519.pub

4. On GitLab, went to my profile → SSH Keys → Add new key, pasted the key, gave it a title, and clicked Add key.

I confirmed the connection by running ssh -T git@gitlab.fabcloud.org — a welcome message back from GitLab confirmed the key was correctly linked to my account.

Git Configuration

Before pushing anything, Git needs to know who I am — this tags every commit with my name and email so changes can always be traced to their author. These commands only need to be run once per machine:

$ git config --global user.name "Aisha Alshehri"
$ git config --global user.email "aishaalshehri@gmail.com"

Cloning and First Push

With SSH configured, I cloned my Fab Academy student repository and made my first commit and push:

$ git clone git@gitlab.fabcloud.org:academany/fabacademy/2026/labs/vujade/students/aisha-alshehri.git
$ cd aisha-alshehri
$ git add .
$ git commit -m "first commit"
$ git push origin main

git add stages changed files, git commit -m "..." saves a labelled snapshot locally, and git push uploads that snapshot to GitLab. I now run git pull before every session to make sure my local copy is up to date first.

HTML (HyperText Markup Language) is the standard markup language used to structure content on the web. Headings, paragraphs, links, and images are each wrapped in tags that the browser reads and renders as a page — it's the skeleton every website is built on.

To build my documentation site, I used Phoenix Code — a free, open-source editor, with live preview and built-in Git support — and asked Claude for guidance on how to get started. The goal was a simple, clear structure that could grow week by week, prioritizing readability and easy navigation over visual complexity.

Along the way I learned how to add headings at different sizes, insert images, create links, write paragraphs with bold text, and adjust font sizes.

Installing Phoenix Code and Linking to the Repo

1. Downloaded and installed Phoenix Code from phcode.io. (A browser-based version is available at phcode.dev with no install needed.)
2. Opened the folder already cloned from GitLab via File → Open Folder, so the editor was pointed directly at my Git-tracked files.
3. Created index.html as the homepage, and built out the basic structure — navigation, headings, and placeholder sections for each week.
4. Used Phoenix Code's Live Preview (Ctrl+Alt+L) to see every change rendered in the browser instantly while editing.

Because the website lives inside the same folder cloned from GitLab, publishing an update uses the same Git workflow as any other change:

$ git add .
$ git commit -m "update website"
$ git push

To make the site publicly visible, GitLab needs a .gitlab-ci.yml file in the project root telling it how to build and publish the pages. I set it up through the GitLab web interface: Code (left sidebar) → Repository → .gitlab-ci.yml. From that point on, every git push automatically rebuilds the site and republishes it at my GitLab Pages URL.

With Git, SSH, and the GitLab Pages pipeline all connected, the loop is: edit locally in Phoenix Code → commit → push → the live site updates itself. That loop is what this documentation runs on every week.

Documentation for Fab Academy involves a large number of images and videos, which can quickly make a website slow and difficult to use. To keep things performant, I used Claude as an AI tools:

Image compression Prompt: "Compress the attached image to 300 KB or less while maintaining the highest possible visual quality for Fab Academy Git repository limits, then report original size, compressed size, size reduction (KB and %), any changes to dimensions/resolution/quality settings, and a brief assessment of visible quality differences, ensuring the result loads quickly and stays clear and readable for web documentation".

Video compression prompt: "Compress the attached video to fit Fab Academy's Git repo size limits at the highest visual quality possible, then report original size, compressed size, size reduction (KB and %), and any changes to dimensions/resolution/quality settings".