home

week 1 documentation

assignment notes

assignments

Plan & sketch a potential final project
student agreement to repo
work through a git tutorial

Setup checklist

install local program git
generate SSH key (id ed25519)
login to fabcloud
clone personal repo
make & publish changes
install markdown (optional)
explore

Project management

GIT = version control system
spiral development / Agile development
Linear → X bad idea
escape for disasterless escape
mvp min viable prototype (works looks like shit)
git VCS
see all change made (commits)
local centralised distributed
Linus TORVALD Linux + git father

Website to do: 4 pages to design

landing weekly assignments
final project
about me
template for weekly assignment page

Branches + MkDocs experiment

creating a branch to install mkdocs & document it & going back to the original to work on html & css & js

installed mk docs on branch, deleted everything in the branch & added mk docs files
edited a bit on VS Code & committed test changes
I have 3 branches now main handcoded & mkdocs
tried merging handcoded & main to publish — it worked!!
I prefer working in main directly and using git history if I need older versions

23rd January: local class - mk docs

I designed the site on figma to visualise the elements and create the backgrounds.

27th, 28th January: coding the website

and then coded on VS Code! i used different backgrounds i designed for different pages and coded the hotzones to create a clickable zone with multiple projects. P.s i made the header a part of the background for now, i plan to make it a text part of the code in the next week

made some folders inside the repo to start coding and got this error on my terminal! after some troubleshooting with chatgpt, we added the SSH key again to gitlab and all was good!!

next i downloaded the background as a png and compressed it to a webp format on cloudinary

and added my fonts for the folder name and student agreement into the repo as well

first look! but the bottom got cropped because i made it on figma like i would make a site, and then increased the height as i needed to add more stuff - similar to prototyping for ui/ux design - so i needed to change the resolution again

similar to prototyping for ui/ux design - so i needed to change the resolution again

much better! now i want to add the folders in

i ended up making the folder in the background bigger to fit the folders

linked the pages with <href> in the html with the hotzones i created earlier and then committed the student agreement to my repo

added a home button to make navigation easier on my site but i couldn’t see it. found out it was a pathway issue and i was referencing the wrong folder

can see it! i fixed these small bugs for now, to focus on finishing the documentation!

26th January: final project idea meeting

modular interactive calender
RFID inputs creative ways
modular add and remove parts
clicker
modular interactive calendar

Final project idea (week1)

my final project idea is to make an operating system to say the status and monitor labs at the Proto lab in the fablab in bcn. i want it to be in the shape of an octopus and the legs light up and is used as handles to use the object. I want to have a dashboard display on a paper screen and a status tracker for the machines in the lab along with information about the booking system and the people at the lab who can help you with them.

What does the machine do?
shows how to use it
How to contact for help with the machine
Calendar of machines are available
Booking system if possible
Map of the lab and location of each machine
Machine status

to find out

Current booking system
Where is the data saved
How to access the data
Will I be able to link it for my project
which machines to include

here are some of my simple(awful) initial sketches:

Different input ideas

Gears for a perpetual flip calendar that shows the information of the date shown Joystick and the button to navigate through the screen

what i need

ePaper
buttons
wifi connection
make a list of machines
how they’re used now

my ideations:

made a slightly better sketch on procreate. i guess it's time to hope my 3D modeling skills are better

Feedback from Dani:

Start with the minimum viable output so just show information about one machine and it status Use the Barduino to start playing around but eventually have to design my own electronic pcb to make this work gave me this to start start experimenting with

notes

19th and 20th January: Bootcamp

Had a great intro to the course, watched presentations on useful things to keep in mind for documentation, opened up Nueval and created accounts on GitLab and Fabacademy. It was good to see some previous students talk about having fun throughout with memes, how to use AI in the best way and see previous projects.

21st January: First global class!

Went to the Fablab and met my classmates! Met up with my teachers from the masters I did in the same university. Met Neil! and he introduced us to the course and walked through the different important websites, and showed us Git, version control systems and how we can benefit from them.

22nd January: First local class!

Dani gave us a great class on the installation and linking with Git!

Some more notes from class:

Website design
What is terminal
Coding on VS Code
Orientation

I had an idea for WEBSITE: Retro Windows XP aesthetic in pink girly.

Intro to VS Code / any terminal

Terminal (use) – Basic code:

pwd = print working directory - shows exactly where you are
ls = listing objects inside directory
man command –> ls pwd cd - manual help (Q) to close
git init = create git repository
mkdir = make directory
command --help = more actions

Learning HTML & CSS

RFC (add comment between code)
comment out stuff
Show hide
/ directory folder
specific directory

Terminal (Git workflow)

git pull
git add
git status
git commit -m "comment"
git push

HTML intro

static site generator
sites without html (markdown)
I plan to use VS Code with html & CSS directly
No markdown
I want to practice & be good at code

Starting up

git github
every webpage can be in html
<div> add page
<a> add link </a>
opening tag / closing tag
what is the internet + how it is
network connections
0s & 1s files
URL
make accessible inside the network of internet

Schedule notes

Global class: 15:00 - Wednesday
Local class: 9:30–13:30 – Thursday, Friday
Mondays → project review monthly (9:30 to 12:30)
Recitation every other week (15:00)
general fabacademy schedule

Week 1: Principles, Practices and Project Management

fabacademy at fablab barcelona 2026