Assignment items

Principles and Practices (part 1 of 2)

Project Management (part 2 of 2)




Fab Academy Rubric — Have you?
The criteria evaluators look for this week.

Principles & Practices



Project Management





Tools

The process

This week I set up my documentation workflow, my Git publishing process, and chose the tools I'll use for the rest of the course.

Project Management:

My goal was to find a tool that helps me break up tasks and send reminders to my phone. (Excel wouldn't work — no reminders.)
Managing time is hard: I'm a mom, I'm running WRO season 2026 in Kuwait, and I'm taking this course — all at once, with zillions of meetings every week. Here are the tools I tried, with no more than 10 minutes on each.


Option 01: Monday Work Management (online platform)

reated a new free account

01 | I created a new free account on Monday and downloaded the mobile app.

dding my weeks and subtasks

02| I started adding my weeks and subtasks for each week and updating the status

Good Enough for now
  • Feedback: The interface (UI/UX) is simple, easy and direct — enough for what I need now
  • Challenge: The main feature I need, notifications, is not included in the free account

Option 02: ClickUp (online platform)

new free account

01 | I created a new free account on ClickUp

add items

02| Tried to find the fastest way to add items without configuring a lot of parameters.

Didn't Work
  • Feedback: I found the setup very complex for my needs
  • Challenge: The main feature I need, notifications, is not included in the free account

Connect GitLab Repo & select IDE:

I wanted the shortest workflow for editing files locally and pushing them to my GitLab repository — without creating duplicate files in the process.

Option 01: Getting familiar with GitLab

HTTP link

01 | I used the HTTPS clone URL to connect to GitLab.

Personal Access Token

02| From preferences, I created a Personal Access Token

A dedicated token

03| A dedicated token is needed for each tool or terminal used

Token scope should be API

04| Token scope should be API

Great
  • Feedback: The Token Access key is valid only for one app or channel, so I had to create two to compare between two tools
  • Challenge: Name the token clearly to keep track

Option 02: Trying GitDesktop

download GitHub desktop

01 | Download GitHub desktop for Mac

nstalling the App

02| Installing the app

Adding HTTPS

03| Adding the HTTPS link as user, selecting the local path to clone the repo, and using the Personal Access Token as the password.

Connected to repo

04| Connected to repo and cloned successfully

Not what I need!
  • Feedback:Make sure the local folder selected to clone the repo is empty, else you will get an error
  • Challenge: When editing the files and trying to comment and upload them, there were duplicated files — and that is not the way I want to keep working until June

Option 03: Trying Dreamweaver (my favorite webdev App since 2006)

Open Dreamweaver Adobe

01 | Open Adobe Dreamweaver and create a new site

Connecting to Gitlab

02| Connecting the site to my GitLab repository

Git client was not installed

03| Git client was not installed on my Mac

Installing Git client

04| Installing the Git client

HomeBrew on the Tirminal

05| Running the installation with Homebrew in the Terminal

Connecting to Gitlab

06| Try again to connect to GitLab

Start the Git Pull

07| Start the Git Pull by adding the HTTP link, username and token to connect to my repo

Editing from Local

08| Creating new files and editing existing ones in the local environment

staged and uploaded

09| Selecting the files to be staged and uploaded

adding commits

10| Staging files and adding commits

update files

11| Push to the repo and update files

update files

12| and all the files are avaibale on the GitLab repo

I like this
  • Feedback: My workflow: edit locally in Dreamweaver → stage → commit with message → push to GitLab Pages. I'm really glad I was able to connect Dreamweaver to the repo. It made me feel confident about creating a website to maintain for the coming 6 months
  • Challenge: Now it is all about designing the best layout once and following it for all the coming weeks and projects

Compress Images:

I wanted to find a tool that compresses images at reasonable resolution/clarity, in a size no larger than 200KB and with acceptable quality. It's important to compress folders to save time.

Option 01: My Preview

screenshot images

01 | Selecting the screenshot images taken in bulk

open with Preview App

02| Right-click to open them with the Preview app on Mac

Export with more option

03| Export with more options to reduce file size

Good Enough for now
  • Feedback: It's fast and the file sizes are reduced
  • Challenge: the resolution compared to FFMPEG is much lower, but I'm still not comfortable using terminals for compressing the pictures

Option 02: FFMPEG

install ffmpeg

01 | Command brew install ffmpeg

Compress using ffmpeg

02| Compress using ffmpeg -i me.jpg -q:v 10 me2.jpg

not good enough for me
  • Feedback:Resolution is amazing, my husband and Fablab student Musaed alKout helped me in this
  • Challenge:I need a tool for bulk compressing and also video compressing

Option 03: Magic

Did not work
  • Feedback:
  • Challenge: Still looking for a Mac-friendly tool that bulk-compresses images while keeping clarity.

Building the website:

My strategy: keep the main navigation bar on the left of the index page and load every other page into an iframe on the right. I also built a template that I can reuse for every assignment. Each assignment lives in its own folder with an index.html and an img/ folder.

Option 01: HTML Bootstrap

screenshot images

01 | Using Bootstrap 5.3 for ready-made, easy-to-use CSS styling and JS components.

open with Preview App

02| W3Schools was a good reference for the available options.

Export with more option

03| I added comments throughout the code so it's easy to navigate — for me or anyone else reading it.

Export with more option

04| This is the structure I'll follow for the rest of the site.

I love it
  • Feedback: It feels very organized — I can rely on this template for the coming assignments.
  • Challenge: Keeping up with the documentation ^_^

Cost

This table tracks the total fixed-cost overhead associated with my activities and projects through Fab Academy graduation. These costs are treated as fixed overhead and allocated proportionally across every project I undertake in the coming weeks — giving me a consistent way to attribute cost and analyze it at the project level throughout the program.

Weekly Overhead calculation

From an accounting perspective, the primary fixed cost across all my Fab Academy projects is the USD 5,000 enrollment fee. Amortized over 32 weeks, that's a weekly fixed cost of USD 156.25. I also maintain several monthly software subscriptions through my company. For Fab Academy purposes I attribute 25% of those subscription costs to this program.
There was no project-specific cost this week.

Item Description Total Cost Weekly Amortization USD Cost/week
FabLab Fee For 32 weeks 5000 =(5000/32weeks) 156.25
AdobeCreative Monthly Subcription- 4 weeks 15 =(15/4weeks)*25% usage 0.94
Chat GPT pro Monthly Subcription- 4 weeks 20 =(20/4weeks)*25% usage 1.25
Capcut Pro Monthly Subcription- 4 weeks 14 =(14/4weeks)*25% usage 0.88
Canva Pro Monthly Subcription- 4 weeks 12 =(15/4weeks)*25% usage 0.75
Overhead Cost per week 160.06

Tools

Use of AI

Option 01: Create FABGPT

I used ChatGPT to create a custom GPT — FabGPT. First I gave it context about my role in Fab Academy, then I added my skills, and I started using it as described below. You can try my FabGPT here.
creating a new GPT

01 | Logging in and creating a new GPT

Defining the role

02 | Defining the role of the FabGPT and the context of the conversations

Defining the area of GPT

03 | Defining the area of expertise and selecting the model version

setup for a FabGPT

04 | Complete setup for FabGPT — accessible via the link above

FabGPT to debug

05 | Sharing my code and asking FabGPT to debug and explain why it's not working

syntax error

06 | The syntax error is being highlighted and a better version of my code is also shared

Good Enough for now
  • Feedback: Makes my AI conversations more organized and grounded in the Fab Academy context.
  • Challenge: It offers a lot of options, which can feel overwhelming. But I can always ask for a more detailed explanation.

Useful Links

Learning Outcomes




Reflection

What worked
  • Connecting Dreamweaver to my GitLab repo through a Personal Access Token. This became my main workflow for the rest of the course.
  • Choosing Bootstrap 5 + iframe layout early. Having one navigation shell and a template per week saved hours later.
  • Using FabGPT to scope and debug small problems quickly.
What didn't
  • GitHub Desktop produced duplicate files on push — not a workflow I could maintain.
  • Free-tier project management tools (Monday, ClickUp) lacked the mobile notifications I actually need.
  • I didn't find a Mac-friendly bulk image compressor that matched FFmpeg's quality.
What I'd do differently
  • Set up the page template, footer, and image-compression workflow on day one — before writing any week content.
  • Decide on a single image format (.jpeg vs .png) and naming convention up front to avoid broken thumbnails.
  • Commit smaller, more often, with clearer messages — easier to roll back when something breaks.
Key learnings
  • Project management for Fab Academy is less about software and more about a sustainable weekly rhythm.
  • Local-first editing + push to GitLab Pages is the lowest-friction path for a static documentation site.
  • Documentation is part of the work, not after it. Every step I skip recording, I pay for later.