W1 | Principles and Practices, Project Management 💫

ASSIGNMENT

  • Principles and Practices (1/2)
    1. Plan and sketch a potential final.
  • Project Management (2/2)
    1. Student Agreement.
    2. Learning GIT.
    3. Build my personal website.
    4. Upload parts 1 and 2.

Principles and Practices 🚀


For my final project, I want to create a small robot designed to help children with ADHD manage their emotions. My little cousin has ADHD, and I've seen firsthand how challenging it can be for him to regulate his feelings. With the right support, he has made great progress, but not all children have access to that kind of guidance, and I want to contribute by creating an affordable option. Through this project, I hope to develop a tool that provides emotional support and gently guides them toward better emotional regulation, helping them feel more in control of their feelings.



1. Robot for Emotional Support

My Sketch, trust the Process 📈

Project Management 📖

2. Learning GIT

This isn't my first time using GIT, last year I got a quick intro while helping Jorge document a previous assignment on the Fab Lab ESAN page. He taught me the basics, and at first, it felt kinda tedious—but once you get the hang of it, everything starts to flow (and suddenly, you feel like a pro… kinda 😂). Now I have my own page to document this experience!

To set it up, I followed this tutorial: GIT tutorial

Setting Up Git: My Steps

  1. Installing GIT
    2.  I started by downloading the latest version in the following link. [Download Git] I decided to install it using the recommended default settings. Once the installation was complete, I noticed that Git Bash was included.
    💡 Note: Git allows me to clone the GitLab repository to my computer to work locally and easily upload my changes to keep everything up to date.

  2. Setting Up My Git Username and Email
    3.  After installing Git, I added my username and configured my email address to ensure my commits were properly linked to my account. To do this, I ran the following commands in Git Bash:

    $ git config --global user.name "Jhasmin Ayala" $ git config --global user.email "arjhasmin16@gmail.com"

    • This is the example:


  3. Generating My First SSH Key
    4.  Since I was new to Git and didn't have an existing SSH key, I had to create one. This key allows my computer to securely communicate with GitLab without needing to enter my password every time. To generate it, I used:
    💡 Note: SSH keys are personal and should never be shared!

    $ ssh-keygen -t rsa -C "$arjhasmin16@gmail.com"

    • This is the example:


  4. Copying My SSH Key and Adding It to GitLab
    5.  Now that my SSH key was generated, I needed to copy the public key and add it to GitLab. I used:

    $ clip <~/.ssh/id_rsa.pub

    • This is the example:


    Then, I followed these steps to add it to GitLab:
    1. Open GitLab and go to Settings > SSH Keys.
    2. Click on "Add an SSH key"
    3. Paste the SSH key that I copied
    4. Click Add a key to save it.
    • This is the example:

    As the title of the key I put the name of my laptop

    Once the key is added, you can see it listed at the bottom of the SSH Keys section in GitLab.
    • This is the example:

    This confirms that the key has been successfully registered! 😁

3. Build my personal website

As part of setting up my personal GitLab page, I followed these steps to download and configure an HTML template, clone my repository, and integrate everything into Visual Studio Code using the GitLab Workflow extension. Here's how I did it! 🚀

Setting Up My Personal Website with an HTML Template

  1. Downloading an HTML Template
    2.  I started by downloading an HTML template that I wanted to use for my page.
    • I searched for a free HTML template online.


      • This was the one I liked the most

    • After finding one I liked, I downloaded the ZIP file to my computer. Here is the link where you can find the template HTML5UP.NET
    • I extracted the contents of the ZIP into a temporary folder.
  2. Creating a Folder for My Project
    3.  Before cloning the repository, I created a folder on my C: drive to organize my project.
    • I opened File Explorer and created a folder named FabAcademy in C: drive


    • Then, I opened Git Bash and navigated to that folder using the following command:
    $ cd C: $ls $ cd FabAcademy

    • This is the example:


  3. Cloning My GitLab Repository
    4.  After creating the folder and navigating to it, I cloned my GitLab repository.
    • With Git Bash open in C:/FabAcademy, I executed the following command to clone my repository:

      • git clone git@git.fabacademy.org:academany/fabacademy/2025/labs/esan/students/jhasmin-ayala.git

      • This is the example:

    • I verified that the repository folder was created inside C:/FabAcademy.

  4. Copying My HTML Template to the Cloned Repository
    5.  After cloning the repository, I copied the files from my HTML template into the cloned repository folder.
    • I copied the template files and pasted them into the cloned repository folder in C:/Fab_Academy/jhasmin-ayala
    • I verified that the files were inside the cloned repository.
  5. Connecting GitLab to VS Code
    6.  To manage my repository more efficiently, I used Visual Studio Code and the GitLab Workflow extension. I also connected my repository using a Personal Access Token to authenticate my changes securely.
    • I generated a Personal Access Token in GitLab under User Settings > Access Tokens, granting it permissions for read_repository, write_repository, API, among others.


    • I installed Visual Studio Code and added the GitLab Workflow extension from the Extensions tab.


    • I opened my cloned repository folder in VS Code and authenticated using the Personal Access Token.


    Now, I can edit my project, preview changes before uploading, and manage everything directly from VS Code. This makes it easier to track my progress and ensure everything looks good before pushing it to GitLab. Also, I have to be careful not to exceed the 10MB upload limit per commit!

    Final Thought

    After going through the setup process, I have successfully configured Git and even created my own web page! At first, it seemed a bit overwhelming, but step by step, everything started to make sense. By setting up Git, I can now manage my project, track changes, and sync everything with GitLab. Meanwhile, using VS Code has made editing and previewing my page much easier. I even learned how to use the GitLab Workflow extension to simplify the process! Now, my website is up and running, ready for me to document my Fab Academy journey. This is just the beginning, and I'm excited to keep improving and adding more content!