My work was organized into four tracks: (1) initial design workshop, final project planning, (2) learning VSCode (3) building a personal site to document weekly progress using VSCode, (4) Git setup and practice.

• Final project: early planning, initial decisions & Design Workshop.
• VSCode: installation, learned basic tools and structure.
• Personal site: VSCode setup and navigation structure improvements.
• Git: installation, configuration, SSH keys, and basic workflow.

Reference images

These reference images synthesize the processes developed for each of the weekly objectives. They highlight questions that emerged during the work and present methodologies for the development of the final project.

Final project workshop.

Early brainstorm for the final project

VSCode Site Structure

Learning VSCode structure and web design.

Git: version control for real collaboration

Git is a distributed version control system. It keeps a full history of changes, enables safe collaboration, and makes it easy to recover when something breaks.

Install (by OS)

• Windows: installer from git-scm.com
• macOS: Homebrew + brew install git
• Linux: package manager (e.g., apt / dnf)

Basic configuration

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL"

SSH keys (recommended)

ssh-keygen

Copy your public key and add it to your Git platform (GitLab/GitHub) under SSH keys.

Clone a repository

git clone https://gitlab.fabcloud.org/academany/fabacademy/2024/labs/chaihuo/students/matthew-yu.git

Core commands

• git status · check working tree
• git add . · stage changes
• git commit -m "message" · save a snapshot
• git push · upload changes
• git pull · fetch updates

Personal documentation site with Docusaurus

I chose Docusaurus because it scales well for weekly documentation, keeps content organized, and supports a clean navigation structure for long-term project tracking.

Quick install

npx create-docusaurus@latest my-website classic

Run locally

yarn
yarn start

Improving sidebar visibility (replicable pattern)

If you want “Week 1” to stand out in the sidebar, you can assign a CSS class and style it in src/css/custom.css.

/* custom.css */
.sideboard_calss > a {
  font-weight: bold;
  width: 100%;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  margin: 5px 0;
}

// sidebars.js
{
  type: 'doc',
  id: 'week1/week1_assignment',
  label: 'Week 1',
  className: 'sideboard_calss',
}

Problems encountered & fixes

1) Build output and a public folder

If your hosting expects a public directory, a simple approach is to build and then rename the output folder (e.g., build → public).

2) Large files duplicated (e.g., MP4 videos)

If videos get duplicated during copying/moving, you can delete them from the build output before renaming:

docusaurus build && find build -type f -name '*.mp4' -delete && rm -rf public && mv build public

3) Collapsible sidebar for readability

When your sidebar grows, enable collapsible categories and group weekly content so navigation remains clean.

Next step

With Git and documentation in place, the next week will focus on defining the minimum viable scope of the final project: features, materials, timeline, and risks.

• Back to top