Week 01: Project Management, Version Control, and Web Development

The first week is all about setting myself up for success throughout the program from ensuring I have a reliable documentation system, a place where I post my documentation, and start thinking about my final project idea.

Jump to this week's checklist

Let's start by setting up my Notion workplace, where I'll have most of my notes (in addition to GoodNotes on my iPad).

Setting up my new workplace

First, I created a page for Fab Academy and customized it a bit.

Next, I wanted to have a set of repeated pages for each week. Each week, I will have a page for:

Session notes: from our weekly global Wednesday session with Prof. Neil Gershenfeld.

Debrief Sessions: are the times where we are with our instructor Andre locally.

Recitations Notes: they happen biweekly during the program on Mondays and focus on a specific skillset.

Global Open Times: session that happen every Saturday, where student globally could discuss the week's work and this is for my notes/questions that I want to ask.

Documentation Notes: where this documentation started being written :)

Depending on the week I could add extra pages (i.e. this week i could add final project research/brain storming).

I am using notion since it is a very reliable way for me to note things quickly and export files in a format directly compatible with the format of my Fab Academy website (will come to this later)

Now, I want to do this for every week on our schedule (here's our schedule below), but would I do this by hand? Nope, Claude's MCPs are there for the rescue!

Here's my chat with Claude to duplicate the structure I had above for every week.

You can simply connect your Notion to Claude through the connectors and it would have full access to your notion.

This is how my Notion workspace looks like after setting it up!

Following a Git Tutorial and Setting up my Fab Academy GitLab

I have used Git previously in my projects, but this is the first, full project I'll be doing from my current device. Thus, let's walk through all the steps necessary to set up my directory and my GitLab repo.

Why GitLab?

Yes, at Fab Academy we are using GitLab instead of GitHub since the Fab Foundation has self-hosted it, and doesn't need to rely on Microsoft's server, which gives them more stability, security, and customization.

First, I set up a directory on my computer to contain the Fab Academy related documents, including the screenshots I am taking as i go.

cd documents #opens the documents directory
mkdir fab_academy #creates a new directory called fab_academy
cd fab_academy #navigates into the fab_academy directory
mkdir screenshots #creates a screenshots directory

After creating the directory, we need to get my GitLab repository locally so I can edit on it reliably, so we need Git!

What is Git?

Git is a version control system. It keeps track of changes in your files over time, so you can save progress, go back to older versions, and collaborate without breaking things. Learn more about it, it's brilliant!

MacOS, the system I am using, has Git already installed, but it has a couple of disadvantages that are fixed by downloading the Homebrew Git because it is more up-to-date, easy to manage, consistent, and has all Git's features.

We used the following commands:

git --version #checks the current version of git installed on your machine
brew install git #download homebrew's git version
which git #checks which git version are we using: Apple's or homebrew's

echo $SHELL #shows which shell we are using
nano ~/.zshrc #opens the Zsh configuration

Choose the homebrew Git as the primary Git instead of Apple's by adding this line to the .zshrc file:

eval "$(/opt/homebrew/bin/brew shellenv)"

Then reload and verify:

source ~/.zshrc #reloads the shell configuration without closing terminal
which git #to confirm now we have the homebrew's version

Git Learning Resources

Here are some tutorials that could be used to understand and navigate Git:

• Fab Academy's Cheat Sheet
• W3Schools Tutorial

---

Now, we need to clone our GitLab repo locally, and to do that, there are two methods either through an SSH key or HTTP.

We will us SSH since it is more secure and convenient since HTTP would require us to type our credentials every time.

cat ~/.ssh/id_rsa.pub #check for my public SSH key
ssh-keygen -t rsa -C "youssefk2007@gmail.com" #generates a public and private keys
cat ~/.ssh/id_rsa.pub #check for my public SSH key again, and confirms it now exists

Then, we add our public SSH key to our SSH keys section in our GitLab profile, where my repository currently lives.

Then, we start by cloning my Fab Academy repo locally using the following command:

git clone git@gitlab.fabcloud.org:academany/fabacademy/2026/labs/kannai/students/youssef-kusibati.git

As part of our Fab Academy assignment this week, we need to download and sign our student agreement. Thus, I downloaded it from Fab Academy's website:

Using the following commands, I opened the student agreement in VS Code to sign my name on it. First, I set it as my default code editor, and then opened it.

code --version #checks VS Code version and confirms it's installed
code student_agreement.md #opens the student agreement in VS Code

Why VS Code?

I am choosing VS code as my editor over Cursor since I already have it installed, have a free GitHub Pro subscription as a student giving me access to Co-Pilot and have my Claude Code and Codex extensions.

Then, I committed and pushed my student agreement to my remote/online GitLab repo using:

git add . #I should've only pushed the student agreement file to avoid adding unwanted files
git commit -m "docs: add student_agreement.md" #commits to the main branch with a descriptive message
git push #pushes it to the repo

Setting Up My Personal Website

My first step was deciding that I want to decide how would I want to document things. I want to have a flow that is "predictable" and I can follow every week so it isn't a mess.

We will have all the 20 weeks + the student bootcamp week. Each week start off with a summary of the learnings from the session, then, a walkthrough of our assignment (and a checklist at the end), and then reflections and things I'm looking forward to for the next week.

On the main page, I want to have links to my about page, my final project (the initial proposal, development logs, and final page), and a review of my weekly assignment.

In the initial proposal page of my final project (due this week), I will demonstrate my initial intention and idea behind it, the sketch, and how I think it could evolve later on throughout Fab Academy.

Occasionally, I will ad some blog posts to my website talking about my journey. Also, the main source of inspiration here will be my personal website :)

---

I decided to use MKDocs as the static website generator that'd generate webpages directly from markdown files, which can be exported easily from my Notion pages, where all my notes and documentation process lives.

This makes the documentation process weekly much more seamless. I started by using the materials theme since it is a great base theme and could be heavily customized.

We created the new MKDocs project using the following commands:

pip3 install mkdocs #to download mkdocs to our directory
pip3 install mkdocs-material #to download the materials theme
mkdocs new . #to create the necessary files for an mkdocs website

I followed the materials theme documentation to change up my MkDocs to fit my style and the style of my personal website. That involved editing the mkdocs.yml file which controls how my website is built and how it behaves based on the features I had in mind.

Then, I wanted to see how it looked like after those basic changed to the .yml file, no styling yet :)

mkdocs serve #enables us to view how the website looks like

if you've noticed, we I mentioned a stylesheet folder in the .yml file since I wanted to edit it to my preferences. We edit the "extracss" file because we don't want to mess with the original CSS of the materials theme.

Then, I created and edited different files across the website to get to the idea I had in mind.

After all of the edits, this is how the website looked like (but, I didn't really like it, more on that below):

To have the website ready to be pushed off to GitLab, we need to run the following commad:

mkdocs build #cleans up the public directory, which contains actual website,and creates new files in that directory the showcase our website.

I was a bit scared of losing everything, so I backed up the original html website provided to us by the Fab Academy team using the following commands:

mkdir old_site_backup #creates a backup directory
mv *.html old_site_backup/ #moves all html files to backup
mv *.css old_site_backup/ #moves all css files to backup

Before pushing the built the MKDocs website to GitLab, I need to edit the gitlab .yml file, setting up how the gitlab would render our website, and this tells it how to do it.

We used Python version 3.11 Alpine, which tells GitLab to build the website using this lightweight method. The job indicates what GitLab should do, "deploy."

Before building the website to display it, GitLab should ensure it has the necessary library. Then, it actually builds it, saves the file to the public directory, and display it on the web using GitLab pages. Finally, the rule ensures this only runs on the main branch.

---

As I was moving through the website and seeing previous work from other students. I really liked the terminal theme since it was very simple, straightforward, and fits my style, so I reverted back, and decided to change it starting by uninstalling the materials theme and installing the terminal.

pip uninstall mkdocs-material -y #uninstalls the materials theme
pip install mkdocs-terminal #installs the terminal theme

Update the .yml file:

Here is how the website directly with the new theme, but I wanted to do some edits on the CSS including changing how much of the width it takes, the colors of the background, and starting to add some of my own content.

After editing everything through the CSS and adding some of the content, I committed all the changes to the GitLab repo.

As I noted before, using MKDocs makes the website very easy to edit by just writing my content on Notion and then exporting it.

Then, I pushed it to GitLab, but faced an issue in the pipeline of posting it online. It was because I forgot to edit the GitLab .yml file. A big lesson here is learn how to read the errors because previously it would've caused me to go crazy :)

Additional Customizations to the Terminal Theme

As I continued to fill out the website and since the terminal theme is very minimal, I added several custom features through CSS and markdown extensions to match my style and improve functionality.

First, I added markdown extensions to the mkdocs.yml file for better functionality:

markdown_extensions:
  - toc:
      permalink: false
      toc_depth: 3
  - admonition
  - pymdownx.tasklist:
      custom_checkbox: true

These extensions enable table of contents generation, callout boxes (admonitions), and custom checkboxes for task lists.

Then, I made several CSS customizations in the style.css file:

Sticky Sidebar Navigation: Making the left sidebar stick as you scroll through long documentation.

#terminal-mkdocs-side-panel {
  position: sticky !important;
  top: 20px !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  align-self: flex-start !important;
}

Header Hierarchy: Creating clear visual distinctions between different heading levels.

h1 {
  font-size: 2em !important;
  font-weight: bold !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.8em !important;
}

h2 {
  font-size: 1.6em !important;
  font-weight: bold !important;
  margin-top: 1.3em !important;
  margin-bottom: 0.7em !important;
}

Custom Checklist Boxes: Gold outlined squares with checkmarks matching the gruvbox theme.

.task-list-indicator {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  border: 2px solid #d79921 !important;
  background: transparent !important;
  vertical-align: middle !important;
  margin-right: 0.5em !important;
}

.task-list-item input[type="checkbox"]:checked ~ .task-list-indicator::before {
  content: "✓" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d79921 !important;
  font-weight: bold !important;
}

Admonition Styling: Callout boxes with consistent gold theming.

.admonition {
  padding: 1em !important;
  margin: 1.5em 0 !important;
  border-left: 4px solid #d79921 !important;
  background-color: rgba(217, 153, 33, 0.1) !important;
}

These customizations transformed the minimal terminal theme into a more personalized documentation system that fits my workflow and aesthetic preferences.

All inspired by my personal website :)

---

2 Important Notes + Credit Where Credit is Due

I have Claude Code set up on my Mac, which enables it to directly to edit files on my computer. Once I download export what I've written on Notion as Markdown, it is exported as a zip file containing the markdown file with the images. Thus, I use the following prompt so that the necessary pages are updated and files properly named:

My Notion Export Prompt

"I have a Notion export zip file in my project. Please:

1. Find and extract the zip file (check the download directory)
2. Examine the contents to understand the structure and identify:
   • The markdown file
   • All image/screenshot files
3. Read the markdown file to see the order images appear in the content
4. Rename the screenshots based on their order of appearance in the markdown (e.g., week_XX_01.png, week_XX_02.png, week_XX_03.png, etc.)
5. Move all renamed images to the appropriate images folder (likely docs/images/ or similar)
6. Update the markdown file to:
   • Replace Notion-style image references with proper paths
   • Use the new renamed filenames in the correct order
   • Ensure proper MkDocs/markdown image syntax
7. Move the updated markdown file to the correct location in docs/weekly_review/
8. Clean up the extraction folder and any temporary files
9. If I mentioned throughout the MarkDown files mentions to linking other parts of the website, link them directly."

As we were warned, we need to compress the image sizes, so that Prof. Neil won't kill us since each one of the students has a set storage at the GitLab server.

Shoutout to Dylan Heneck, a student from Waag FutureLab Fab Academy 2025, for recommending Imageoptim to reduce the size of images.

---

Final Project Documentation

This week also marked the beginning of planning my final project, which I'm documenting separately in the Final Project section. You can check out my initial proposal here.

---

This week's checklist

• Sketched your final project idea(s)
• Described briefly what it will do and who will use it
• Made a website and described how you did it
• Created a section about yourself on that website
• Added a page with your sketch and description of your final project idea(s)
• Documented steps for setting up your Git repository and adding files to it
• Pushed to your class GitLab repository
• Signed and uploaded Student Agreement