Building the Digital Archive & Defining the Mission
*Full source code and version history available here.
Fab Academy has officially started! For this first week, my main goal was getting comfortable with the workflow: using Git for version control and building this website from scratch with HTML & CSS.
I decided not to use a pre-made template because I wanted full control over the design (hence the comic book theme). I also started brainstorming ideas for my Final Project, looking for a way to mix sports with electronics.
Before writing any code, I needed to set up my laptop environment. I followed the standard protocol to establish a secure link with the Fab Academy servers.
First, I equipped my computer with the necessary software:
The version control system (the engine).
DOWNLOAD GITThe code editor (the dashboard).
DOWNLOAD VS CODEI went to my GitLab profile, clicked the blue "Code" button, and specifically selected "Clone with HTTPS" to copy the URL.
I opened the terminal (Git Bash) in my documents folder and ran the command. It asked for my username and password.
Once downloaded, I entered the folder to start working.
The essential commands I use to control the repository:
| COMMAND | ACTION |
|---|---|
| git clone [url] | Downloads the repo to your computer. |
| git add . | Stages all new changes (saves them locally). |
| git commit -m "msg" | Labels the changes with a message. |
| git push | Uploads the changes to GitLab. |
| git status | Checks for unsaved changes. |
I learned that HTML is just the skeleton. Here's a cheat sheet of the tags I used:
One of the most important rules in Fab Academy is keeping the repository light. We can't upload huge images, so I established a strict Optimization Protocol to compress everything before pushing.
.jpg for photos (better compression) and .png only for diagrams.
Evidence: The image quality looks practically the same, but it loads instantly.
*Note: Following the rules, I also signed the Student Agreement. You can view the signed document in the About Me section.
My website didn't look like this at first. At the beginning of the week, it was just a boring HTML skeleton. I used CSS to give it the comic book style.
Plain text, standard fonts, no layout.
Grid layout, Custom fonts, Color palette.
I wanted the website to be easy to maintain and visually consistent. Here are the main CSS tricks I used:
Instead of repeating hex codes everywhere, I stored my colors in Variables. This means I can change the entire theme by modifying just 4 lines of code.
A comic book needs to shout but also be readable. I imported two distinct fonts from Google Fonts:
To simulate the look of a printed comic page, I added thick black borders to everything. I also use Hard Shadows (no blur) to make elements pop.
As part of the documentation process, I utilized AI tools to assist with the code structure and design conceptualization. Following the Fab Academy guidelines, here are the prompts used:
It wasn't all smooth sailing. During the deployment process, I ran into a problem with the images.
After pushing to GitLab, the images showed up as broken icons, even though they worked fine on my laptop.
I realized the code was looking for images in the wrong folder. I fixed it by correcting the relative paths.
*The ../ tells the browser to go up one level out of "assignments" to find the "images" folder.
Week 1 is done! My personal archive is live, Git is running, and the visual style is ready. Time for the next mission.
Every hero must follow the code. I have read, understood, and signed the Fab Academy Student Agreement, committing to document my work and respect the community standards.
