Week 1
Our assignment:
Final project: plan and sketch a potential final project
Principles, Practices, and Project management: 1. download, read, and sign the student agreement and commit the file to your repo 2. work through a git tutorial 3. build a personal site in the class archive describing you and your final project
Principles and Practices (Part 1 of 2)
Final Project
Three sources sparked my final project idea: 1) a conversation I had with a community member (a Nashville-based engineer skilled in cooperative economics) about translating community visions into prototypes for building real-world projects 2) discovering student Vincy Xiao’s final project “CitySynth” and 3) diving deeper into the project that inspired her by MIT Media Lab City Science group called “CityScope.” These latter two projects offer impressive tools for urban planning and real-time data visualization which piqued my interest and got me to thinking...what if I made a kindred spirit tool designed for political education and reimagining communities in my home state of Tennessee?
So with that I present to you....Solidarity City Builder: an educational urban imagination tool for community organizers!
What will it do? The idea is to create an interactive sensing platform board where users place blocks that represent city infrastucture (ex. parks, housing, libraries, prisons, data centers, condos, etc.) to build a model of their neighborhood or city. When blocks are placed on the board, this triggers real-time display on an LCD screen which shows informational data about its social, budgetary, and environmental impacts. It will also calculate a subjective community benefit score for the final model city based on a programmed scoring rubric. When the blocks placed have an overall positive community impact, the board would light up in green; for negative community impact, red. The intent is to have a political stance that provokes good conversation amongst participants (who may or may not agree). For example, if someone placed the prison/detention center block, this would display data including the cost or the prison, energy and water consuption, and other impacts.
Another idea is for the project to have a special button that takes a snapshot of the grid and launches the creation of a printable impact report that lights up the board based on final scoring.
Who will use it? This tool will be used by community organizers, political educators, or even as a free-standing interactive device displayed in a public library or community center. It can serve organizers campaigning against new prison construction, cooperative incubators demonstrating solidarity economics, or educators raising awareness about impacts of development. I envision its primary use in facilitated workshops, helping participants move beyond abstract discussion to more tangibly reimagine the world we actually want where we thrive. It is more participatory and dynamic than just writing notes on another piece of soon-to-be-discarded flipchart paper, and--as a tool you can see, touch, and interact with--it helps to make alternative futures feel concretely possible. This is key for organizers whose primary role is to move people to action to change material conditions, not just talk about it.
Ultimately, Solidarity City Builder reveals the inherent politics involved in urban planning an underscores the fundamental need for people to have a say in shaping the world around us--not for the profits of a few, but for the benefit of life and humanity.
Project Management (Part 2 of 2)
I have read, signed, and committed my student agreement.
Gittin' to it
Though I am a complete beginner, I spent about a month before Fab Academy familiarizing myself with some of the basics including running through a 7-part GitLab University tutorial lesson that was way more than I needed to know 😅 but it did help me understand the value of Git as an open-source version control system and get introduced to the basic Git workflow. After viewing a youtube Git Crash Course video, I got Git up and running:
git init: this initialized a new Git local repository
git config --global user.name 'Angela Henderson' this configured my Git username
git config --global user.email 'myemail@email.com' this configured my Git email
I then began the process of cloning my GitLab repository to my local computer using this guide.
After I installed and set-up Git, my first step in order to clone my remote repository was to create the SSH key pair and add it to my GitLab account so I don't have to authenticate whenever I push or pull code. I simply followed the instructions, running commands in the Git bash terminal:
ssh-keygen -t ed25519 -C "myemail@email.com this generated a new SSH key pair and left a comment
ssh-add ~/.ssh/id_ed25519 this added private SSH key
cat ~/.ssh/id_ed25510 | clip this allowed me to retreive the contents of my public key which I then used on my GitLab account to add the key
ssh -T git@gitlab.fabcloud.org this verified my SSH connection and (after clicking yes through the prompts) then I got a nice welcome to GitLab message!
Next, I was ready to clone my GitLab repository using SSH. Again, I followed the GitLab Docs instructions:
git clone git@gitlab.fabcloud.org:academany/fabacademy/2026/labs/noda/students/angela-henderson.git this cloned the repository adding files automatically to a folder
cd angela-henderson this allowed me to change directories
From here, I was ready to build my website...
Building My Website
Though I've never learned coding in depth, I've played those apps/online learn-to-code games over the years so I have a very basic familiarity. I decided to take a look under the hood and practice by replacing the profile photo image (compressed using GIMP) to the page and adding some text just to run through the process in the WEB IDE. However, I know for the pace of the program and my current skill level I would need something far more straightforward to update my page regularly. Respect to the coders though!
Ignore the about markdown page...I hadn't put two-and-two together yet that I would need a static site generator to process markdown into html in order for it to appear correctly on the website
After exploring many student websites (special shoutout to Nadieh's page for such thorough breakdowns) and after reviewing the provided web development resources, I decided to use VS Code and mkdocs with the Material theme (to start). This would allow me to build and edit my page on my local repository using Markdown. I am quickly learning that to use one thing you often need another thing. To install VS Code and be able to use MarkDown I also installed mkdocs. To install mkdocs, I had to install python and pip. Python is the language that MkDocs is written in (it's how it runs effectively) whereas pip is the Python package manager and is used for installing it. Following the MkDocs installation guide:
python --version and pip --version these commands allowed me to double check that python and pip respectively were installed
pip install mkdocs mkdocs-material this installed the mkdocs package with the material theme using pip...or so I thought...
mkdocs --version this allowed me to check that mkdocs was successfully installed (it wasn't 😩)
Also, I opened my project into VS Code by retrieving the Visual Studio Code (SSH) from my GitLab page.
As noted in the bottom of the MkDocs guide, Windows users have issues with these commands. When I first tried to install I received an error message:
According to the MkDocs website, I needed to edit my PATH environment variable. Had no idea what that meant so I searched in my search engine: "how do you edit your PATH environment variable to include the Scripts directory of your Python installation" and the duck ai assist provided an overview for how to do this (find Python installation directory, copy that path, modify the PATH variable with the copied path, make sure it worked). Once that was squared away I was ready to continue working through the MkDocs User Guide, write my docs, choose my theme, and configure my site. For more help, I looked through the Fab Academy site to try and find prior documentation on setting up MkDocs and found this tutorial.
From here, I created my MkDocs and got started setting up the file structure:
mkdocs new . (after navigating to my repository) this created the MkDocs site i.e. the mkdocs.yml file which appears in VS Code
Since the orginal cloned repository was in html, I deleted the files in that folder and started using the new docs folder to hold MarkDown files. I edited the mkdocs.yml file to change the site name. I then added structure including an Assignments folder with each week, a folder to hold my images, an about page, an index, and agreement page, and a final project page, which I could do using the VS Code interface (or even the terminal).
mkdir assignments this makes a directory for assignments
touch final-project.md assignments/week1.md assignments/week2.md about.md agreement.md this allowed me to add more filenames in one command
Finally, I learned about the yaml script. I like how Nadieh worded it on her site linked above: "This yaml script defines what steps GitLab needs to follow to build your site." In the mkdoc.yml file, I could update the theme, colors, and navigation set up. The material theme website explains how to make these stylistic customizations.
After all this, I had developed my initial site, with the following structure:
Very excited to continue the journey next week!