Step 1 · VSCode fundamentals and interface.

Learning to use Visual Studio Code's integrated tools enables efficient management of a website's codebase, structure, and styling within a unified development environment.

Understanding the underlying code structure involves analyzing the organization of files, directories, and markup elements.

Observing how the site dynamically responds to iterative modifications underscores the adaptive and responsive nature of the development process.

Step 2 · Command Palette and quick navigation.

The Command Palette (Cmd+Shift+P) exposes almost every action in VSCode. Cmd+P jumps directly to any file by name, while Cmd+Shift+O filters symbols inside the current document.

Step 3 · Core editing commands.

Multi‑cursor editing with Option+Click, Cmd+Shift+F for project-wide search, and Cmd+Option+I for browser inspection create a feedback loop where each edit can be quickly checked and refined.

Step 4 · Integrated terminal for commands.

Cmd+J opens the integrated terminal at the workspace root, allowing git status, git add, and file utilities without leaving the editor.

Step 5 · Source Control with Git.

The Source Control view connects VSCode with GitLab. From this panel I can stage changes, write commit messages, and push or pull updates.

Phase 1 · Generate an SSH key.

The first step is to check whether an SSH key already exists on the computer. If a file named id_rsa.pub is present inside the ~/.ssh/ directory, the key can be reused and this phase can be skipped. If not, a new key pair must be generated from the terminal.

Open the terminal and run the following command, replacing the email address with the one associated with your GitLab account:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

The flag -t rsa sets the encryption type, and -b 4096 defines the key length in bits — 4096 is the recommended value for strong security. When the terminal asks where to save the key, pressing Enter accepts the default location (~/.ssh/id_rsa). Setting a passphrase adds an extra layer of protection, but it is optional — pressing Enter twice skips it.

Phase 2 · Navigate to SSH Keys in GitLab.

With the key pair generated, the next step is to register the public key in the GitLab account. Log in to GitLab and click on the profile avatar located in the top-right corner of the interface. From the dropdown menu, select Preferences to access the account settings panel.

Once inside the Preferences panel, locate the SSH Keys option in the left sidebar. This section manages all the public keys authorized to communicate with the account. Click Add new key to open the form where the public key will be pasted. It is useful to have multiple keys registered here if working from different computers or operating systems.

Phase 3 · Paste the public key and save.

The public key is stored in the file ~/.ssh/id_rsa.pub. Open that file with any text editor, or print its content directly in the terminal using cat ~/.ssh/id_rsa.pub, then copy the entire output — it starts with ssh-rsa and ends with the email address used during generation.

Paste the copied key into the Key field of the GitLab form. Add a recognizable title such as the computer name to identify it later (e.g. MacBook-NicolasLara). An expiration date is optional but recommended as a security best practice. Once filled in, click Add key — GitLab will confirm the key has been registered and display it in the SSH Keys list.

Phase 4 · Test the SSH connection.

Before attempting any push or pull operation, it is important to verify that the local machine and GitLab can communicate correctly through SSH. Run the following command in the terminal:

ssh -T git@gitlab.com

If the connection is successful, GitLab will respond with: Welcome to GitLab, @your-username! — this confirms that the private key stored locally matches the public key registered in the account. From this point, all Git operations over SSH will work without password prompts. If the response is different or returns an error, the most common fix is to verify that the correct public key was copied and that no extra spaces or line breaks were introduced when pasting it into GitLab.

Phase 5 · Updating the repository via Web IDE.

The GitLab Web IDE is particularly useful when working from multiple computers, since it eliminates the need to configure SSH or clone the repository on every machine. Files can be uploaded simply by dragging and dropping them into the relevant folder directly inside the browser interface — new files and folders can also be created in a way that feels similar to a standard file explorer.

The Web IDE includes a preview panel that renders markdown files before committing, allowing you to review how the page will look without leaving the browser. To push changes to the repository, click Source Control in the left panel and then select Commit and push to master. Before confirming, the interface displays a detailed summary of every file that was created or modified in that push — a useful checkpoint to avoid unintended changes.

Phase 6 · Backup and local download.

GitLab offers a straightforward way to create a local backup of any repository. Navigate to the project page on the Academany Fabcloud, click the Code button, and select Download source code as a .zip file. This compresses all the files in the repository and saves a copy to the local computer — useful as a periodic backup or as a way to pull the full codebase without using Git commands.

This download option works for subfolders and individual files as well, and it is available for any public repository — not just your own. Browsing other Fab Academy students' repositories is a valuable learning resource: navigating to gitlab.fabcloud.org/academany, searching for a student by name, and opening their .md files (usually under docs/assignments/) reveals exactly how they implemented specific formatting — tables, video embeds, bullet points, YouTube links, and more.

Phase 7 · Learning from other students' repositories.

One of the most practical strategies for improving documentation is to study how other Fab Academy students have structured their markdown files. Search for any student's name at gitlab.fabcloud.org/academany to reach their repository. From there, navigate to the .md file of the page whose formatting you want to understand — these files are typically organized inside a docs/assignments/ subfolder.

Once on the correct file, click Display Source to see the raw markdown behind the rendered page. This reveals the exact syntax used to implement any formatting element — embedded video, image grids, hyperlinks, tables, or code blocks. Treating other repositories as an open reference library is a normal and encouraged practice throughout the Fab Academy network.

Information hierarchy.

Mapped the main sections — weekly assignments, final project, references, gallery — and defined how they relate to each other.

Visual consistency.

Adjusted typography, spacing, and color accents so screenshots, diagrams, and text blocks feel coherent from week to week.

Content workflow.

Tested export times, caption writing, and linking to detail pages to estimate weekly documentation effort.

Reflections.

Investing early in structure and workflow pays off: adding new content became a matter of following a clear pattern rather than reinventing the layout every week.