PRINCIPLES AND PRACTICES,
PROJECT MANAGEMENT

Introduction

The first week of the FabAcademy program focused on introducing students to the course structure, expectations, and tools. We covered the basics of project documentation, version control with Git, and website development for showcasing our work. The main goal was to set up a strong foundation for managing our projects and sharing our progress effectively throughout the course.

Objectives

For Week 1, I was required to complete the following tasks:

• plan and sketch a potential final project
• Download, read, and sign the student agreement, then commit the file to my repository
• Complete a Git tutorial to understand version control basics
• Build a personal website in the class archive
• Include personal information and a description of my final project on the website

Tools and Software Used

During this week, the following tools were used:

• Git
• GitHub / GitLab
• Visual Studio Code
• Web browser
• Command Line / Terminal
• HTML and CSS

Final Project Ideas

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

1. Pill-Shaped Pill Dispenser

A pill dispenser designed to look like a large capsule. The container opens in the middle and has internal sections to separate doses by day or time. The goal is to make medication storage feel less medical and more friendly.

This design treats a pillbox like an everyday object rather than medical equipment — a smooth, pill-shaped container that opens in the bottomand holds separate compartments for days or times. The rounded form, soft colours and simple labels are intended to make medication feel less intimidating and easier to manage, especially for people who find clinical devices off-putting.

2. Convertible Patient Care Bed

A specialized medical bed that mechanically transforms into a seated chair, allowing bedridden patients to change posture safely without leaving the unit. This design reduces the physical strain on caregivers and minimizes the risk of injury during patient transfers.

The bed quietly shifts from flat to seated using linked pivots and smooth linear actuators, so repositioning feels gentle and controlled. Built-in sensors and soft-edge guards help protect skin and reduce sliding, while a simple control panel lets caregivers or patients pause and lock the bed at comfortable angles.

In daily use this design can cut down on heavy lifting, lower the chance of transfer injuries, and give patients more independence. Early prototypes should focus on reliable strength and fail-safe locks, easy-to-clean materials, and an interface that is clear and forgiving for both carers and users.

3. Smart Reminder Display

A physical desktop device featuring an LED screen and navigation buttons that functions as a synchronized to-do list for a bedroom or workspace. It allows users to input tasks and receive visual reminders at specific dates and times, bridging the gap between a digital webpage and a tangible office accessory.

This little device pairs a clear LED panel with simple buttons so reminders feel friendly and easy to glance at. It can sync with a phone or calendar, show upcoming tasks with icons and colours, and uses gentle animations or light changes to get your attention without being disruptive.

In everyday use the display turns fleeting phone notifications into a calm, physical reminder on your desk or bedside — something you can glance at without feeling nagged. For early prototypes, focus on a simple setup, clear readable text, long battery life, and gentle notifications; a soft chime or warm backlight feels better than a loud alarm.

4. Mobile Tabletop Cleaning Robot

A compact robotic arm mounted on a wheeled platform designed to autonomously navigate and clear debris from desks and tabletops. The device uses sensors to detect obstacles and can be programmed to operate on a schedule, ensuring that workspaces remain tidy with minimal human intervention.

This compact cleaner pairs a nimble arm with a small wheeled base to sweep crumbs and little clutter from desks and tabletops. It quietly steers around cups, pens and cables using proximity sensors and a simple mapping routine, collecting debris into an easy-to-empty bin.

The goal is to make tidying effortless. Run it between work sessions or schedule nightly clean-ups. Early prototypes should focus on safe collision handling, a removable dust bin, and a gentle, predictable motion so users trust it around fragile items.

5. Mechanical Tilt Lounge Chair

A leisure-focused reclining chair inspired by rack-and-pinion gear systems, allowing for seamless transition between upright and reclined positions. Using a manual lever or motorized gear, the user can rotate the seating arc to find their perfect relaxation angle for reading, napping, or watching TV.

The chair uses a smooth tilt mechanism inspired by rack-and-pinion motion to shift between upright and reclined positions in a single, satisfying movement. A manual lever or compact motor drives the arc while built-in stops and locks keep the user secure.

Designed for relaxed, everyday use, prototypes should prioritise comfortable cushioning, dependable locking, and accessible maintenance. Testing different seat angles and user feedback will help find the right balance between support and lounging comfort.

Git and VS Code Setup

Git is a version control system used to track changes in files and manage projects, especially in software development.

In simple terms, Git helps you:

• Keep a history of your work
• Save different versions of files
• Collaborate with others without overwriting each other’s work
• Go back to earlier versions if something breaks

Here is your link to download Git.

if you want to know more about Git, click here to read the detailed tutorial I created.

Visual Studio Code (VS Code) is a popular code editor that provides a user-friendly interface for writing and managing code. It has built-in support for Git, making it easier to track changes and collaborate on projects.

git status

git status -s

git status -b

git status --porcelain

git clone repository-url

git clone --depth 1 repository-url

git clone -b branch-name repository-url

git add file-name

git add .

git add -A

git add *.html

git commit -m "message"

git commit

git commit -am "message"

git commit --amend

git push origin main

git push

git push -u origin main

git push --force

git pull origin main

git pull origin main

git pull

git pull --rebase

git fetch

I used this website to learn more about git.

Step 1: Installing Git

I downloaded and installed Git on my system using the Windows installer. After the setup finished, Git Bash and Git tools were available on my computer, which are needed to connect to the class repository and upload assignments.

You can install Git by downloading it from the official website: https://git-scm.com/downloads.

Step 2: Generating SSH Key

To connect securely to the Git server, I generated an SSH key using Git Bash with the command: ssh-keygen -t ed25519 -C "your_email@example.com". This created a public and private key inside the .ssh folder for secure authentication.

During the key generation process, I was prompted to enter a file name and passphrase. I accepted the default file name and chose to set an optional passphrase for added security. The generated keys were saved in the .ssh directory of my user profile.

Step 3: Copying SSH Public Key

I displayed the SSH public key in Git Bash using the terminal command cat ~/.ssh/id_ed25519.pub | clip so that I could copy the entire output to my clipboard to register it with the Git server. This step allows my computer to be recognized without asking for a password each time.

Step 4: Registering the SSH Key on the Git Server

After copying the public key, I logged into my Gitlab.Fabclouds.org account and navigated to the SSH Keys section under Preferences in my profile. I pasted the copied key into the 'Key' field, gave it a descriptive title (e.g., 'Fablab Key'), and saved it. This finalizes the handshake between my local machine and the server.

Step 5: Cloning the Class Repository

After setting up authentication, I cloned the class repository from the FabLab Git server to my local computer using the git clone command.

The repository URL was copied directly from the Clone option in my Git repository interface. This command created a local project folder where I could edit, add, and manage my assignments.

I chose the SSH URL for cloning.

Step 6: Configuring Git Username and Email

I configured my Git username and email address so that my commits would be properly labeled with my identity. This information appears in the commit history when files are uploaded.

Student Agreement

I then downloaded, read, and signed the Student Agreement, and committed the file to my Gitlab repository.

Step 7: Adding, Committing, and Pushing Files

I checked the status of the repository to see untracked files, added the signed student agreement file, committed it with a message, and pushed the changes to the remote repository. This confirmed that my setup was working and that I could submit assignments.

Step 8: Installing Visual Studio Code

I downloaded and installed Visual Studio Code on my computer. After installation, I used it as my main editor for writing and updating my HTML and CSS files.

You can download the application here.

Step 9: Connecting Project to Git

I opened my website folder in VS Code and connected it to my Git repository. I checked file changes using Git tools to make sure my edits were being tracked.

Step 10: Committing and Pushing to Remote Repository

After making changes to my website, I committed the files with a message and pushed them to the remote repository. This updated my online site and confirmed that my setup was working correctly.

I edited my home page picture using NoteGPT. I provided the ai with an image of mine and instructed it to edit. The propmt I used is given below:

Website Development Process

For my FabAcademy documentation website, I used an AI-assisted design tool, Bolt to generate the initial home page layout and visual style. I selected this approach to quickly explore layout and typography ideas and to establish a strong design direction early in the process.

Prompt for the design:

After generating the base design, I manually edited the HTML and CSS and used the home page structure as a template for developing the remaining pages of the website.

Technology Stack

• HTML5 for semantic structure
• CSS3 for layout, typography, and responsiveness
• Google Fonts (Inter) for typography
• Static hosting on FabCloud

No front-end frameworks or CMS platforms were used. All pages are built as static HTML files with shared styling.

Design Workflow

1. I first used Bolt to prototype the home page layout, focusing on:
• Two-column hero composition
• Large editorial typography
• Minimal color palette and soft UI elements
2. I then exported the generated code and:
• Cleaned up unused styles
• Simplified the structure for easier editing
• Adjusted spacing, fonts, and alignment manually
3. Once the home page layout was finalized, I reused the same navigation and layout structure to design:
• About Me page
• Assignments listing page
• Final Project page

This ensured visual consistency while allowing each page to present different types of content.

Layout Implementation

Modern CSS techniques were used to implement the layout:

• Flexbox and Grid for responsive two-column and section layouts
• Fixed top navigation for consistent access to all pages
• height: 100vh on the home page to keep it within one screen without scrolling
• Media queries to adjust layout for smaller screen sizes

Resources & References