Principles and Practices & Project Management
This week I built and customized my personal website for Fab Academy and learned how to document my work properly. I explored templates, chose a visual style that represents me, and modified the HTML files to structure my site. I also learned the basics of Git, how to manage versions locally, and how to push updates to the Remote Repository. Overall, I set up the foundation for my documentation and now I'm ready for the upcoming weeks.
For my final project, I plan to design and prototype an intelligent menstrual care dispenser intended for personal use, aimed at improving the menstrual experience by combining physical interaction, embedded electronics, sensors, and mobile connectivity. The objective is not only to create a dispenser, but a smart companion device that supports, informs, and empowers users throughout their menstrual cycle. The system promotes hygiene, accessibility, and menstrual health, while actively contributing to the reduction of stigma surrounding menstruation.
Front View: The front features an elegant enclosure with an LCD screen displaying notifications such as period reminders, low product alerts, and motivational messages. A yellow accent line and warm lighting enhance visibility and create a friendly user experience.
Downside: Contains product output openings designed to dispense one sanitary item at a time, ensuring controlled and safe distribution.
Open View: Shows the refilling mechanism—users push and open the front door to access the internal storage area for easy restocking and maintenance.
Inside / Side View: Presents two design options. Option A uses spiral strips (like vending machines) with motion sensors for higher capacity and multiple openings. Option B simplifies with buttons instead of sensors, providing more internal space and one output hole per product. Both include a lower circuit box with motor, microcontroller, power supply, and a dedicated space for menstrual pain relief pills.
Mobile Interface: Complements the dispenser with period tracking, notifications, reminders, and interaction messages, keeping users informed and emotionally supported.
Signed by committing this file in my repository,
Micaela Lucrecia Córdova Carmelino
I have never in my life used a git repository, or so I think. Even though I had zero experience with terminals, this process went smoothly, by following the instructions in this tutorial provided by Fab Academy: Git Extended Cheat Sheet and with the company of my instructor.
We did face some minor complications like:
But before diving into the tutorial it was important to understand what it was a Git and what does it do.
In the beginning I knew that Git is a system (tool) that controls multiple versions of the same project (it can manage more projects) and saves changes over time, allowing you to access previous versions and restore them if needed.
But with the help of the Git tutorial I understood that Git allows you to work locally on your own computer in the workstation, where you can freely make changes without affecting the global directory (what everyone sees about your project).
And when changes are ready, they are first selected in the staging area, which defines what will be included in the next version. Those selected changes are then saved as a commit, creating a new version in the project's history.
Through pushing, the versions are uploaded to the remote repository, where all versions are stored.
Git also allows pulling, which brings the latest version from the remote repository back to your local workstation, ensuring that your project stays synchronized across different environments.
git config --global user.name "YOUR_USERNAME"git config --global user.email "jSmith@mail.com"cat ~/.ssh/id_rsa.pubssh-keygen -t rsa -C "$your_email"cat ~/.ssh/id_rsa.pubclip < ~/.ssh/id_rsa.pub
git clone git@gitlab.fabcloud.org:academy/fabacademy/[My link]
After you made all the desired changes in your compiler of choosing and saving those changes:
git add . - Stages all changes (everything in the current directory and all the subfolders)git add index.html - Stages only that file index.html, even if you changed 10 other filesgit add public/name - Used to add folders and specific files (HTMLs or images)git commit -m "Nombre"
git push
Staging: means choosing which changes are ready to be saved as a version.
My laptop with the changes I did in local and the laptop of my instructor in my page in remote (without the changes)
cd\ - Takes you to the top of the directory tree (to de C: drive)cd windows\systems32\ - If you need to go to a specific folder (entering the System32 folder located in C:\Windows)cd.. - If you are in a folder like System32 to go back to the Windows folder (it should change to C:\Windows)git pull - For downloading the last copy of the repositorygit merge - To have a working copy of my repogit rm - In case you need to remove a tracked filegit mv - Move or rename a file, a directory or a symlinkgit status - To see what changed or the current situation of your work, if something is loading, still to commit or if everything has been updateddir - View the contents of a directoryls - To view the files as a listcd - Know in which directory you are currently workingcd Name of a Directory - Move between directoriesmkdir - To create a new directorySo just in case I uploaded heavy files or forgot to compress something, I learned that if the push fails because of the file size, I should reset git in order to delete the commits history.
But before resetting it is recommended to know the status, to check how many commits I have pending with: git status
There are two types of git reset:
git reset --soft - Resets the last commit (or the commit you choose) without touching your workstation files.git reset --hard - Resets your repository to a specific commit and discards all uncommitted changes in your local workstation.The idea of having my own personal site as a portfolio to upload all my advances was super cool, but then I realized that I needed to create it from scratch. I had some experience with coding in Python, Unity scripting, R Studio, and other tools, so that would help me a lot. I was really excited to learn how to create my website, not only because it would serve as my repository, but also because it will be useful for other projects I have in mind.
I recall creating my first website when I was 15 years old with Python, but I couldn't remember how I did it. So it felt like beginning from scratch again.
First, I started with some sketches of the layout of the multiple pages my repository would have. This gave me a clearer vision of what I needed and wanted on each page, such as the home section, buttons to explore each section, structure, etc. The reason for this is that I wanted to have everything ready so that each week, as I worked on assignments and made progress on my project, I could just enter the template and write the information.
And just like that, everything was organized (at least in my head). But I didn't just want a simple format — I needed to choose an aesthetic for my page, a design that really represented me. So I began looking for existing web page templates on sites like Bootstrap, Dribbble, CodePen, etc.
I took my instructor's advice and chose a template based on HTML, since he said it would be simpler to work with. That's how I ended up choosing an HTML5 UP template called "Phantom," which was pretty close to what I wanted.
In order to use this template, I deleted all the .html files from the Fab Academy template in my Local Repository and replaced them with the .html files from the new template I had chosen. After that, I ran the Git Bash terminal to save and push the new changes to the Remote Repository.
I was a bit lost at the beginning, but after searching for good compilers that could guide me in this new territory, I found out that Visual Studio Code is a good and recommended tool for beginners. I had already used it in my classes to process data and create tables and graphics. For the HTML coding part, I chose Visual Studio Code because I had used it before and I like that it has Copilot integrated, which will help guide me while I build my website.
Now I needed to understand the basics of HTML, so I visited W3Schools and learned that HTML is the standard markup language for creating web pages (structure, text, buttons, fonts, etc.). It tells the browser how to display content. Then I learned about CSS, which complements HTML and allows you to modify the appearance of the page (colors, layout, style, etc.). Finally, I learned about JavaScript, which helps add interactivity and animations to the website, such as transitions, effects, and dynamic behavior.
There I learned about the basic structure of a webpage, and how to add sections like titles, paragraphs, and images.
Philosophy: Less is more, but with a human warmth.
Characteristics:
I was strongly influenced by several references when defining my design style. The clean visual aesthetic of Apple/macOS inspired the spacious layouts and minimalist presentation, while Notion influenced the clear organization and structured navigation of my site. I was also heavily influenced by the style of the YouTuber Scott Yu-jan, a designer and front-end content creator known for his warm minimalist approach, soft animations, and polished interfaces. His work combines clarity, elegance, and approachability, which aligned perfectly with the visual language I wanted to achieve for my website.
<!DOCTYPE html>
The declaration defines that this document is an HTML5 document
<html lang="en">
Declares that the site is in English
<html>
The element is the root element of an HTML page
<head>
Contains meta information about the HTML page
<title>
Specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
<body>
Defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1>
Defines a large heading
<p>
Defines a paragraph
<img src="images/MicaelaCordovaPerfil.jpg" alt="Micaela">
To add images from my local repository
<li><a href="final.html">Final Project</a></li>
To create scroll sections for the same page