Fab academy 2025 | Isaac Aleman

REFERENCES TO START MY WEBSITE

LINKS	FUNCTION
Git	Git is a distributed version control system used to track changes in code files and coordinate work among multiple individuals in software development projects.
Fabcloud	Fab Lab Cloud is a cloud-based platform for managing Fab Labs, enabling users to access and share designs, control machines, manage inventory, and collaborate on digital fabrication projects remotely.
Template	Templates are models I used to create my HTML page, simplifying the process by standardizing formats and enhancing efficiency in all aspects.
Visual Studio Code	Visual Studio Code is a Microsoft code editor used for programming and software development. It offers advanced editing features, Git integration, and high customization through extensions.

LINKS

FUNCTION

Git is a distributed version control system used to track changes in code files and coordinate work among multiple individuals in software development projects.

Fabcloud

Fab Lab Cloud is a cloud-based platform for managing Fab Labs, enabling users to access and share designs, control machines, manage inventory, and collaborate on digital fabrication projects remotely.

Template

Templates are models I used to create my HTML page, simplifying the process by standardizing formats and enhancing efficiency in all aspects.

Visual Studio Code

Visual Studio Code is a Microsoft code editor used for programming and software development. It offers advanced editing features, Git integration, and high customization through extensions.

Git Bash

To start with Git, I downloaded and installed Git Bash (64-bit for my laptop) from the official Git website. This setup provides the command-line power I need to manage my projects with Git right from my computer.

During the Git Bash installation process, I made strategic customizations to optimize my development workflow. Specifically, in the Select Components configuration screen, I enabled the "Create a desktop icon" option to ensure immediate terminal access from my primary workspace.

To align with my preferred development environment, I modified Git Bash's default configuration by selecting Visual Studio Code as the primary text editor during installation. This integration enables seamless file editing directly from the terminal using the code command, enhancing workflow efficiency and maintaining tooling consistency across my development ecosystem.

Command	Description
cd "folder_name"	Navigates to and opens a specific folder. For example: cd Documents.
cd ..	Goes back to the parent directory (one level up).
ls	Lists files and folders in the current directory. Use ls -l for more details.
pwd	Shows the full path of your current working directory.
mkdir "folder_name"	Creates a new folder with the specified name. Example: mkdir MyNewProject.
rm "file_name"	Deletes a specific file. Be careful, it doesn't go to the Recycle Bin/Trash!
rm -r "folder_name"	Deletes a folder and all its contents recursively. Use with extreme caution!
mv "source" "destination"	Moves a file or folder from one location to another, or renames a file/folder. Example: mv file.txt new_folder/.
cp "source" "destination"	Copies a file or folder. Use cp -r for copying folders.
touch "file_name"	Creates a new, empty file. Useful for quickly initializing files.
cat "file_name"	Displays the content of a file directly in the terminal.
clear	Clears the terminal screen, providing a clean workspace.
history	Shows a history of commands you have executed previously.
man "command"	Displays the help manual for a specific command (e.g., man ls).

Command

Description

cd "folder_name"

Navigates to and opens a specific folder. For example: cd Documents.

cd ..

Goes back to the parent directory (one level up).

Lists files and folders in the current directory. Use ls -l for more details.

pwd

Shows the full path of your current working directory.

mkdir "folder_name"

Creates a new folder with the specified name. Example: mkdir MyNewProject.

rm "file_name"

Deletes a specific file. Be careful, it doesn't go to the Recycle Bin/Trash!

rm -r "folder_name"

Deletes a folder and all its contents recursively. **Use with extreme caution!**

mv "source" "destination"

Moves a file or folder from one location to another, or **renames** a file/folder. Example: mv file.txt new_folder/.

cp "source" "destination"

Copies a file or folder. Use cp -r for copying folders.

touch "file_name"

Creates a new, empty file. Useful for quickly initializing files.

cat "file_name"

Displays the content of a file directly in the terminal.

clear

Clears the terminal screen, providing a clean workspace.

history

Shows a history of commands you have executed previously.

man "command"

Displays the help manual for a specific command (e.g., man ls).

Terminal

This terminal log demonstrates essential file management:
I navigated to my documents folder, listed its contents, then created and entered a new directory called Fab_Academy.
Finally, I created an empty file named Notas.txt within this new directory.

Category	Command	Description
Initial Configuration	git config	Sets up username and email (basic configuration).
Initial Configuration	git init	Initializes a new local repository.
Initial Configuration	git clone <repository_url>	Clones an existing repository (alternative to init).
Version Control	git status	Shows the current state of files (tracked/untracked).
Version Control	git add <file>	Adds files to the staging area (preparation for commit). Use git add . to add all changes.
Version Control	git commit -m "message"	Records changes to the repository's history with a message.
Version Control	git log	Displays the complete commit history.
Remote Synchronization	git remote -v	Manages connections with remote repositories. Shows current remotes.
Remote Synchronization	git push <remote> <branch>	Sends local commits to the remote repository.
Remote Synchronization	git pull <remote> <branch>	Downloads remote changes and automatically merges them.
Remote Synchronization	git fetch <remote>	Downloads remote changes without merging them (safer for inspection).
Branch Management	git branch <name>	Creates/lists/deletes branches. Use git branch -d <name> to delete.
Branch Management	git checkout <branch_name>	Switches between branches or specific versions.
Branch Management	git merge <branch_name>	Merges changes from one branch into another.
Branch Management	git rebase <branch_name>	Reorganizes commit history (advanced alternative to merge).
Change Analysis	git diff <file>	Compares differences between file versions.
Change Analysis	git log --oneline --graph	Detailed history (with filtering options, e.g., --graph for a visual tree).
Change Analysis	git status	Quick summary of the current working tree status.
Reverting Changes	git reset --hard <commit_hash>	Resets to a previous state (use with extreme care, as it discards changes).
Reverting Changes	git revert <commit_hash>	Creates a new commit that undoes previous changes (safer for shared history).
Reverting Changes	git restore <file>	Restores specific file versions from the index or another commit.
Reverting Changes	git rm <file>	Removes files from the project and from the staging area.
Reverting Changes	git clean -df	Removes untracked files from the working directory. Use -f for force and -d for directories.

Category

Command

Description

Initial Configuration

git config

Sets up username and email (basic configuration).

Initial Configuration

git init

Initializes a new local repository.

Initial Configuration

git clone <repository_url>

Clones an existing repository (alternative to init).

Version Control

git status

Shows the current state of files (tracked/untracked).

Version Control

git add <file>

Adds files to the staging area (preparation for commit). Use git add . to add all changes.

Version Control

git commit -m "message"

Records changes to the repository's history with a message.

Version Control

git log

Displays the complete commit history.

Remote Synchronization

git remote -v

Manages connections with remote repositories. Shows current remotes.

Remote Synchronization

git push <remote> <branch>

Sends local commits to the remote repository.

Remote Synchronization

git pull <remote> <branch>

Downloads remote changes and automatically merges them.

Remote Synchronization

git fetch <remote>

Downloads remote changes without merging them (safer for inspection).

Branch Management

git branch <name>

Creates/lists/deletes branches. Use git branch -d <name> to delete.

Branch Management

git checkout <branch_name>

Switches between branches or specific versions.

Branch Management

git merge <branch_name>

Merges changes from one branch into another.

Branch Management

git rebase <branch_name>

Reorganizes commit history (advanced alternative to merge).

Change Analysis

git diff <file>

Compares differences between file versions.

Change Analysis

git log --oneline --graph

Detailed history (with filtering options, e.g., --graph for a visual tree).

Change Analysis

git status

Quick summary of the current working tree status.

Reverting Changes

git reset --hard <commit_hash>

Resets to a previous state (use with extreme care, as it discards changes).

Reverting Changes

git revert <commit_hash>

Creates a new commit that undoes previous changes (safer for shared history).

Reverting Changes

git restore <file>

Restores specific file versions from the index or another commit.

Reverting Changes

git rm <file>

Removes files from the project and from the staging area.

Reverting Changes

git clean -df

Removes untracked files from the working directory. Use -f for force and -d for directories.

Fabcloud

This image displays a section of a Git hosting platform (identified by gitlab.fabcloud.org), showing the options available for cloning a repository. The "Code" dropdown menu is open, presenting two methods: "Clone with SSH" and "Clone with HTTPS." The user is currently highlighting the "Copy URL" button associated with the HTTPS cloning option, indicating preparation to copy the repository's link for local setup.

This image captures the successful execution of a git clone command in a terminal. The command git clone https://gitlab.fabcloud.org... is initiated to copy an existing repository. The subsequent output shows Git systematically downloading the project: it begins by "enumerating" and "counting" the remote objects (files and history), then "compressing" them for efficient transfer. Finally, it displays the "receiving objects" phase, indicating the actual download progress (100% complete, 3.80 MiB at 492.00 KiB/s), and concludes with "resolving deltas," which reconstructs the files from the compressed data. The repository is cloned into a new local directory named 'antonio-perez'.

This git init action shows us one of the two main ways to start a project with Git. While in one of the previous images we saw the execution of git clone, which is used to download and configure an existing repository from a remote source (such as GitLab), this image illustrates the method of starting a completely new project locally. Both operations are pillars of the Git workflow, adapting to whether you are starting a project from scratch or working on an existing one.

Initialized a Git repository, staged his Notas.txt file using git add, and committed it with a descriptive message via git commit, successfully setting up version control for his work.

Downloading the HTML Template

I downloaded the Limelight HTML template.

Once the Limelight template's zip folder was downloaded, I unzipped it to ensure all files were in order.

I opened Visual Studio Code to access and edit the template files, beginning the creation of my website.

My VSC looks good.

Element	Command
Insert Image	`<img src="image.jpg" alt="Text" width="300">`
Navigation Menu	`<ul><li><a href="#section">Text</a></li></ul>`
Main Header	`<h2>Main Title</h2>`
Subtitle	`<h3>Subtitle</h3>`
Paragraph	`<p>Text here</p>`
Button	`<a href="#section" class="button large">See more</a>`
YouTube Video	`<iframe src="https://www.youtube.com/embed/ID"></iframe>`
External Link	`<a href="https://..." target="_blank">Go to link</a>`
Code Block	`<pre><code>code here</code></pre>`
Data Table	`<table><tr><td>Data</td></tr></table>`

Element

Command

Insert Image

<img src="image.jpg" alt="Text" width="300">

Navigation Menu

<ul><li><a href="#section">Text</a></li></ul>

Main Header

<h2>Main Title</h2>

Subtitle

<h3>Subtitle</h3>

Paragraph

<p>Text here</p>

Button

<a href="#section" class="button large">See more</a>

YouTube Video

<iframe src="https://www.youtube.com/embed/ID"></iframe>

External Link

<a href="https://..." target="_blank">Go to link</a>

Code Block

<pre><code>code here</code></pre>

Data Table

<table><tr><td>Data</td></tr></table>

How i built my Index 🌐

Section
header

Although my header already boasts a robust design and CSS code, I'm making strategic modifications. Specifically, the menu buttons will be adapted to include the various weeks of my Fab Academy, I'll revise some keywords in existing titles, and refresh the images for a new look.

In a simple manner, I updated the website's images. I looked for 'img src=' references to change the paths to my saved images, and the template's indicators greatly simplified locating each section.

As part of my header modification, this code section illustrates the changes implemented in the navigation bar. Here, menu links were adjusted to include the Fab Academy weeks, and titles, such as 'Final Project', were modified to reflect the new content.

I created a prompt in DeepSeek to generate the Dropbox section as a table, making the coding process more efficient.

I only updated the href path for all buttons from Week 1 to Week 17 so they correctly link to the corresponding tab on my website.

I located the banner section to change the green background. I updated the path in the background: url(...) property.

I modified the h1 elements, which are actually the texts displayed in the carousel of my banner.

Section
About me
Final project

I found a section in the template that I liked for what I'm going to create, so I cleaned up some code and started modifying it.

I created a prompt for DeepSeek that helped me generate the “About Me” and “Final Project” sections with animated buttons.

Since the AI generated that section, I will only change the titles and the button text.

looks good.

Section
my weeks
assigments

I've revamped the web gallery, focusing on a complete image overhaul and thorough code debugging. The goal was to optimize it to only use what's necessary, avoiding design saturation and efficiently integrating my new ideas.

The image illustrates HTML code modifications: `img` `src` and `a` `href` attributes are updated for new images and links, while `br` tags add line breaks to the text.

Provide the prompt you are giving to Gemini. I need that prompt to improve the text for the description.

The first AI-generated image for Week 1 wasn't quite what I envisioned, so I'm now fine-tuning my Gemini prompt with more detailed specifications to achieve the desired visual.

For all template images, I employed a hybrid strategy. This involved incorporating both previously saved assets and a majority of new visuals generated or iterated upon with AI, adhering to a unified creative principle throughout.

PRINCIPLES AND PRACTICES & PROJECT MANAGEMENT 🖥

WEEKLY ASSIGNMENTS

REFERENCES TO START MY WEBSITE

Git Bash

💻 Essential Commands for Your Terminal 📟

Terminal

📚 Git Commands Visual Guide

Fabcloud

Downloading the HTML Template

Essential HTML Elements