Back to Weekly Assignments

Week 1: Project Management

Missions of the Week1 Assignments

  • Sign and uplodaded Student Agrement
  • Work through a Git Tutorial
  • Create a basic HTML page for my assignment
  • Upload the page to your GitLab repository
  • Submit the URL of your page to the assignment link
  • As a page with sketches and decritions of my final project

Student Agreement:

I agree to abide by the rules of the Fab Academy and to conduct my work in a professional manner. I understand that I am responsible for my own learning and that I will be evaluated based on my participation and performance in the class.

View the Student Agreement · Markdown source

Research and Sketches

This week I worked on defining my final project idea and started to getting used to the documentation process.

Over the weekend, I accompanied my daughter as she played with Bead Art at the mall. She accidentally mixed all the colors together, making them extremely difficult to separate. Afterward, I researched online and found that many people enjoy Perler Bead Art, yet there currently isn't a small mechanical device available to sort the colors. So, I decided to try making a Perler Bead color sorter to help more players efficiently and quickly sort their beads.

Description of image Description of image

Git Repository Setup & Version Control

What is Git?

Git is version-control software. It tracks every change in a project folder (a repository or repo), lets you return to older versions, and supports teamwork without overwriting each other's work.

Simple example: edit a file → save → git commit → Git records exactly what changed.

Fab Academy uses GitLab (gitlab.fabcloud.org) to host student documentation. The live website is published from this repository via GitLab Pages.

Workflow overview

  1. Log in to GitLab (Fablabs SSO)
  2. Create your student repository (or open the one Fab Academy assigned)
  3. Generate a Personal Access Token (PAT) — required for HTTPS clone/push from your laptop
  4. Clone the repo locally
  5. Edit → commit → push to update the live site

I first tried the GitLab Web IDE in the browser to understand how files map to the published site, then moved to local development on my computer.

GitLab Web IDE GitLab web interface

Step 1 — Log in to GitLab

  1. Open gitlab.fabcloud.org
  2. Click Sign in and choose Fablabs
  3. Use the same email as your Fab Academy account
GitLab login with Fablabs

Step 2 — Create your repository

  1. After sign-in, go to Projects → New project (or open your existing Fab Academy student repo)
  2. Project name: e.g. maggie-zhang; visibility: Public
  3. Click Create project
  4. On the project home page, copy the HTTPS clone URL

My repository: gitlab.fabcloud.org/…/maggie-zhang

GitLab login with Fablabs GitLab login with Fablabs

Step 3 — Generate a Personal Access Token (PAT)

GitLab no longer accepts your account password for git push over HTTPS. You need a PAT instead — treat it like a password and store it safely.

  1. Click your avatar (top right) → Edit profile or Preferences
  2. In the left sidebar, open Access tokens
  3. Click Add new token
  4. Token name: cursor
  5. Expiration date: choose a date (set a calendar reminder to renew before it expires)
  6. Scopes: tick at least read_repository and write_repository (needed for clone, pull, and push)
  7. Click Create personal access token
  8. Copy the token immediately — GitLab shows it only once. If you lose it, create a new token.
Important: When Git asks for a password in Terminal, paste the PAT, not your Fablabs/GitLab login password.

GitLab — create personal access token

GitLab — create personal access token

GitLab — create personal access token

GitLab — create personal access token

HTTPS clone URL and PAT authentication

Step 4 — Clone the repository locally

In Terminal (or Git Bash), run:

git clone https://gitlab.fabcloud.org/<your-group>/<your-project>.git
cd <your-project>

When prompted:

  • Username: Maggie Zhang
  • Password: paste PAT

Step 5 — Edit, commit, and push

Typical local workflow after changing files in public/:

git status
git add .
git commit -m "Describe what you changed"
git push origin main

After push, wait a minute and refresh your Fab Academy student page to confirm GitLab Pages updated.

Syncing with Cursor

After testing the GitLab Web IDE, I switched to Cursor as my main tool to edit documentation locally and sync changes to GitLab. Below is how I connect the repo and my reasons for this choice.

Why I chose Cursor for sync

  • Built-in Git UI — The Source Control panel shows changed files, diffs, commit, and push without typing every Git command in Terminal.
  • Better for HTML/CSS — Syntax highlighting, folder tree, and live preview fit Fab Academy weekly pages better than editing only in the browser Web IDE.
  • AI-assisted editing — Cursor helps fix broken links, reorganize assignment text, and keep HTML structure consistent across many week pages.
  • Same repo, same workflow — Still uses standard Git + my GitLab PAT; Cursor is the editor, GitLab remains the remote and publishes the live site.
  • Terminal when needed — Integrated terminal is available for git pull, troubleshooting, or commands the GUI does not cover.

Step 6 — Open the repository in Cursor

  1. Install Cursor and open the app.
  2. If the repo is not on your computer yet: File → Clone Repository, paste the GitLab HTTPS URL, choose a local folder, and clone. When asked for credentials, use your GitLab username and PAT (password field).
  3. If already cloned via Terminal: File → Open Folder… and select the project folder maggie-zhang-main
  4. Edit files under public/ — assignment HTML lives in public/assignments/, images in public/images/.

Step 7 — Commit and push from Cursor

  1. Open the Source Control view (branch icon in the left sidebar, or ⌃⇧G on Mac).
  2. Changed files appear under Changes. Click + next to a file to stage it, or stage all.
  3. Type a short commit message (what you changed and why), e.g. Update week01 Git and Cursor sync docs.
  4. Click Commit, then Sync Changes or Push to send to origin/main on GitLab.
  5. First push may ask for GitLab credentials again — username + PAT (not Fablabs password). macOS can save these in Keychain.
  6. Wait ~1 minute, then refresh your Fab Academy student URL to verify GitLab Pages updated.
Tip: I named my token cursor in Step 3 so I know which PAT is used for pushes from this machine. Revoke old tokens in GitLab if you regenerate one.

Step 8 — Stay in sync (pull before you push)

If GitLab has newer commits (e.g. edits from another computer), pull first to avoid conflicts:

git pull origin main

In Cursor: Source Control menu → Pull, or run the command above in the integrated terminal. Then commit and push your local changes.

My daily workflow: open Cursor → edit public/assignments/weekXX.html → Source Control → commit → push → check live site.

Useful links