Scroll to Top
Project Management

Principles, Practices and Project Management


Individual Assignment

  • 1. Read, sign the student/instructor/lab agreements, and commit to your repos

  • 2. Work through a git tutorial

  • 3. Build a personal site in the class archive describing you and your final project

Table of Contents

Project Selection



Project Criteria

  1. Must have at least 1 output and 1 input.
  2. Include a hardware component and a mechanical part.
  3. Preferably involves something moving controlled by electronics in response to specific events.
  4. Utilize a maximum number of Fab Lab tools and machines during production.
  5. Project files must be open source and accessible for the community.


Project Sketch

Considering the Fab Lab criteria for the final project, here is is my idea and the sketch.

The AquaSense Smart Swim Coach elevates your swim with real-time feedback, lap count, and time tracking. It alerts for pace and breathing, offers personalized coaching, and sets goals. With a waterproof design, it's your all-in-one companion for a smarter and more effective swimming experience.

Project Management

Here are few more ideas for my final project.



Project 1

A fan-powered wall climbing robot employs airflow for adhesion, combining suction and thrust to climb vertical surfaces. Ideal for inspection and maintenance, this innovative design ensures stability and controlled movement, making it a versatile solution for navigating and accessing hard-to-reach areas on walls and structures.

Project 2

A soft robotics-based massaging robot for feet leverages gentle, customizable pressure on specific points to provide a targeted and relaxing massage experience. Mimicking the principles of reflexology, this innovative robot adapts soft robotic technology to enhance comfort, relieve tension, and promote well-being through precise pressure point stimulation.



Project 3

An LED cube matrix as an art installation is a visually captivating and dynamic creation. Comprising a three-dimensional array of programmable LED lights, the cube matrix illuminates and morphs into intricate patterns, colors, and animations. This interactive and versatile piece of art engages viewers, transforming spaces with its luminous, ever-changing displays.



Project 4

Develop a tactile musical instrument for the deaf, translating sound into vibrations and visual cues. Utilize sensors to detect musical nuances, converting them into vibrations or light patterns. Ensure a versatile and inclusive interface, allowing deaf individuals to experience and create music through touch and visual feedback.



Building the website



The entire documentation for the FAB Academy 2024 is available on the website, providing an interactive web-based learning experience. This platform is designed to enhance the web development skills of FAB students.

During this week, our focus was on creating a basic website and uploading it to the GitLab repository.



What is version control?

A version control system (VCS) is a system that records changes to a file or set of files over time so that you can recall specific versions later. VCSs are used to track changes to source code, documents, and other types of files.

Git is a distributed version control system (DVCS) that is used to track changes to source code. DVCSs are different from centralized version control systems (CVCSs) in that each user has a complete copy of the repository on their local machine. This makes it easier to collaborate on projects and to work offline.



Visual Studio Code for Web Development

For web development, there are various text editors to choose from, such as Brackets, Visual Studio Code (VS Code), and others. In this tutorial, I will discuss the use of VS Code, a widely recognized text editor known for its versatility and numerous extensions.

If you are using Windows, like me, you can still leverage the benefits of VS Code for your web development projects.

Project Management


Live Server Extension

If you've already installed VS Code, you'll need a live server extension for a seamless web development experience. Fortunately, VS Code makes this process easy by offering live server extensions as additional installable components.

Assuming you've already installed a live server extension, you can access it by searching for its name in the Extensions view.

Project Management


Using a Website Template

As part of my web development journey, I explored GitHub for templates and found one that suited my project requirements. I used the following steps to integrate it into my development environment:

Project Management
  1. Visit the GitHub repository with the desired template.
  2. Copy the repository URL.
  3. Open a terminal in the directory where you want to clone the template.
  4. Run the command: git clone https://github.com/CommunityPro/portfolio-html.git.
Project Management

This website template comes with a well-organized file structure that facilitates efficient development and maintenance. Below is an overview of the key directories and files:

                        ├── src
                        │   ├── index.html
                        │   ├── css
                        │   │   ├── style.css
                        │   │   ├── utilities.css
                        │   ├── assets
                        │   │   ├── favicon
                        │   │   │   ├── android-chrome-192x192
                        │   │   │   ├── android-chrome-512x512
                        │   │   │   ├── apple-touch-icon
                        │   │   │   ├── favicon-16x16
                        │   │   │   ├── favicon-32x32
                        │   │   │   ├── favicon.ico
                        │   │   │   ├── site.webmanifest   
                        │   │   ├── profile-image
                        │   │   ├── logo
                        │   ├── js
                        │   │   ├── script.js

This structure includes directories for source code, stylesheets, assets, JavaScript, and GitHub-related files. It follows best practices for web development, allowing for clear separation of concerns and easy collaboration.

After cloning the template, I started editing it to customize the content and structure according to my project needs. The template provided a good home page and project cards, but I also needed additional pages:

Project Management

I decided to utilize the project cards from the template to represent my weekly assignments.

This code creates a navigation link labeled "WEEKLY ASSIGNMENTS" that, when clicked, will navigate to the section with the ID "projects" on the page, where I've incorporated the project cards for each week's assignment.

Project Management
Project Management


Design of Week One Assignment Page

After editing and setting up pages, the focus shifted to crafting visually appealing Week One assignment page. Drawing inspiration from blog pages, I aimed to create a website that balances aesthetics and functionality.

Project Management

By drawing from the aesthetics of this blog page, I tried to design a similar page with the help of chatGPT.

Project Management
Project Management


Design of About Page

I tried to design a simple about me page

Project Management

I thought of using the assignment cards from my home page to add my previous projects for a more aesthetic look.

Project Management

Getting started with GitLab



Git tutorials

These resources were used for the Git tutorial. You can interactively learn Git branching using the Learn Git Branching tool and watch the provided YouTube video for additional guidance.

Interactive Git Branching Tutorial: Learn Git Branching

Watch the Git Tutorial on YouTube: Git Tutorial Video



Login to GitLab Account

Visit the GitLab website and login to your account using the credentials received.

Project Management


Go to your Repository

  1. Once logged in, you'll be directed to your dashboard.
  2. In the repository, click on "Public" to view this page.
Project Management


Configuring Git with SSH

  1. Check for Existing SSH Keys. I'll be using my existing key to configure to Git.
    2.                         ls -al ~/.ssh
  2. Add SSH Key to SSH Agent
    3.                         eval "$(ssh-agent -s)"
                        ssh-add ~/.ssh/id_rsa
  3. Add SSH Key to GitLab
    4.                         cat ~/.ssh/id_rsa.pub
  4. Copy the key and add it to your GitLab SSH Keys settings.
    5. Project Management
  5. Copy the SSH URL of the GitLab Repository
    6. Project Management


      Website development and hosting

      1. Open VS Code and open the terminal window. Navigate to the directory using cd fabacademy and clone the repository.
        2.                             git clone url-copied
        Project Management
      2. Make a few changes in the code to check for configutation
      3. Use the following commands to add, commit and push changes to the repository
        4.                         git add .
                        git commit -m "Updated"
                        git push origin master
        Project Management
        Project Management
      4. Copy the website files into this directory and repeat step 3
        5. Project Management
        Project Management
      5. Website development and hosting is done and dusted for week one.
        6. Project Management