Week 01: Project Management & Principles and Practices

Fab Academy 2026 – Week 01

Week 01 Reflection

I am very excited to start my Fab Academy journey. In the first global meeting, I greeted more than 200 members and saw some familiar faces such as Saheen, Rico, and Camila, which gave me a lot of energy.

The Fab Academy network really feels like a family: warm, open, and full of kindness.

In Week 1, our main tasks were to learn how to use Git and Gitlab, build the basic structure of our personal website, and start thinking about the concept sketch of our final project. (See Final Project for my concept.)

1. Learning Git and GitLab

What is Git?

This was my first time working with Git and GitLab. Before starting, I searched for background information using Perplexity.

Git is a tool that helps people track changes to files (usually code). It allows users to safely edit files, return to earlier versions, and collaborate without overwriting each other's work.

I understand Git as a combination of "track changes" and a "time machine" for a project folder.

What is SSH?

SSH (Secure Shell) is a secure way to connect my computer to a remote server. It uses encryption and key-based authentication to make sure only authorized users can access and modify files on GitLab.

I followed the tutorial shared by Fab Academy alumni Camila: https://fabacademy.org/2019/docs/FabAcademy-Tutorials/week01_principles_practices_project_management/git_simple.html

Install Git

After installing Git, I verified the installation using:

Setting my name and email

To configure Git, I set my user name and email using the following commands:

git config --global user.name "Alison Yang"
git config --global user.email alison.yang@seeed.cc

After that, I used the command below to confirm that the information was saved correctly:

cat ~/.gitconfig

Setting up the SSH key

The SSH key works like a personal key that proves I have permission to modify data on GitLab.

I created an SSH key using the ssh-keygen command and selected id_ed25519 as the key type. After generating the key, I copied the public key and pasted it into GitLab under Settings → SSH Keys. I adjusted the title and left the expiration date blank.

After setting up the SSH key, I cloned my repository, added a test file, committed it, and pushed it to GitLab to make sure everything worked correctly.

One important thing I learned is that it is better not to use Ctrl+C and Ctrl+V for terminal commands when possible. Typing commands manually or using the mouse helps avoid hidden formatting errors.

2. Building My Website with MkDocs

After finishing the Git and GitLab setup, I started building my personal website.

I chose MkDocs because it is a simple and clean static site generator designed specifically for project documentation, which fits Fab Academy very well.

Installing Python

Before using MkDocs, Python is required.

Python is a programming language used to tell computers what to do. In this case, Python helps run MkDocs and handle the behind-the-scenes part of the website. The visual layout that users see in the browser is still based on HTML, CSS, and JavaScript.

I installed Python and checked the installation using the command line.

Building the website

After installing Python and MkDocs, I created my website, previewed it locally in the browser, and edited the content files. Once I updated the information on my website, the basic structure of the site was completed.

3. Using Tools for Better Management: VS Code and Squoosh

To manage my files more efficiently, I used Visual Studio Code (VS Code) and Squoosh.

VS Code is a free, open-source code editor developed by Microsoft. It supports multiple platforms and provides features such as syntax highlighting, smart code completion, and integrated Git tools. It is especially convenient for editing Markdown files and managing folders like docs and images.

After downloading VS Code, I opened my local project folders directly from my Windows computer. This made editing and managing .md files much easier compared to using basic text editors.

Image compression with Squoosh

I used Squoosh to compress images before uploading them to my website.

After compression, image sizes were reduced significantly, for example from 454 KB to 90 KB, and converted from PNG to JPEG format. This helped me understand that compressing images can greatly reduce disk space usage and bandwidth for uploads and downloads.

All images were successfully compressed and optimized.

Another useful feature I noticed is that VS Code automatically refreshes and updates file sizes and previews in the Explorer panel after reopening the folder, which makes file management more convenient.

4. Website Setup & Updates (Feb 9th)：

For my personal website, I first chose MkDocs to build the site.

However, I ran into some issues during setup, the navigation bar didn’t load or display properly, and even after changing themes from purple to blue, the problem was still there. The page also looked quite rough at the beginning.

After seeing this, my instructor suggested that I switch to another platform and try using Cursor to help with the setup. Based on that advice, I decided to move away from MkDocs and download Docusaurus instead.

Since this was my first time hearing about Docusaurus and Cursor, I took some time to understand what they are and why they might be better choices for my project.

Docusaurus is a tool for building documentation websites, such as project records, tutorials, or learning notes. You write content in Markdown files, and Docusaurus turns them into a clean, modern website. Compared with MkDocs, which is simpler and Python-based, Docusaurus is React-based and offers a more modern, interactive interface with richer themes and UI options. This is probably why my instructor recommended it — it’s more flexible and visually polished, which fits my Fab Academy documentation needs better.

Cursor is an AI-powered code editor, similar to “VS Code with a smart assistant.” It can understand the structure of your whole project, generate or modify code based on natural language, autocomplete multiple lines, and help explain or fix errors. For a beginner like me, especially when using Docusaurus (which involves JavaScript and configuration files), Cursor significantly reduces the fear of breaking things. I can describe what I want in plain English, let Cursor help make the changes, and then review and adjust them myself.

Then I went to those words: JS, CSS and HTML: JavaScript is a programming language that runs in the browser and makes web pages interactive. If HTML is the structure (the bones) and CSS is the style (the clothes), JavaScript is the behavior (how it moves and reacts when you click, type, scroll, etc.).

Looking back, my website setup went through three main stages: I started with MkDocs, but I didn’t fully understand the template structure at the beginning, so the page looked very basic. After changing themes, the navigation bar still didn’t appear correctly, and I couldn’t fix it in time. I finally switched to Docusaurus and followed my instructor Matthew’s template as a starting point.

To build the Docusaurus site, I used Cursor as my main guide.

My initial prompt for Cursor was:“I want to design a website using Docusaurus. Please help me set it up and initialize it using the files in my docs folder.” Cursor then guided me step by step, starting with installing Node.js, running the installer, and restarting the terminal. I didn’t just copy the commands — I tried to understand the logic behind each step and followed them carefully.

After that, I downloaded my instructor Matthew’s source code as a reference and asked Cursor to help me adjust my own site based on it. For example, I used prompts like: “I have references from other projects, one in @docusaurus.config.js and one in @src. Please help me apply a similar theme and structure.”

Later, I noticed that my folder structure was a bit messy, so I gave another instruction: “The current folder should be my default path. Please move the files from the website folder to the default path, and put unrelated files into an other folder.”

After these steps, the website structure finally became much clearer and more organized, and the site started to look and behave the way I expected.