Home Weekly Assignments Final Project About me

Week 01. Project management

Git

Git is a free and open-source version control system that allows for storage and management of different files as well as the creation of different branches to a project and check the history from previous commits.

Here are a few basic commands I found interesting while looking up Git tutorials (With the help of the following websites : git cheat sheet , dangitgit and ChatGPT):

Command What it does
git init Creates a new repository
git clone
Clones an existing repository
git add
Adds a specific file
git commit Saves your work
git mv
Moves a file from an old location to a new location
git log Shows the history of a branch or commits of a file
git status Shows the current state of your repo

While discovering Git commands, I realize I dislike these command line-based tools. I prefer to have a clear interface that helps me understand what I do.

The very first thing I do is to download, modify (with Windows Notepad) and save the Student agreement in the repository via the website without using commands.

Web development

Since I don't want to use Git commands, I search for a way to add and modify files easily.

For this, I started out by trying MkDocs (recommended by my Fab Academy supervisor) but since it's a command line based tool, I decide to use Visual Studio Code (shortened to VSCode).

Before doing anything, I need to link Gitlab and VSCode. First, I install Git on my computer, then I need to install an extension on VSCode called "GitLab Workflow", like the description of the extension explains it : "The GitLab Workflow extension integrates GitLab into Visual Studio Code.".

Then, with the terminal of VSCode, I type these commands to help for authentication and commits :

For the email git config --global user.email “git-email”
For the username git config --global user.name “git-username”

With Gitlab Workflow, I can now authenticate to a GitLab instance with a specific URLand I type "https://gitlab.fabcloud.org/".

The extension asks me to create or enter a token, since I don't have one, I choose to create a new one. The program opens a new window to create said token in my GitLab account's settings.

Finally, redo the step to authenticate with the extension, but this time, choose to enter a token and paste the token you just created.

Once it is done, the extension now gives you the possibility to open or clone a repo, I simply clone and then choose my source which is from GitLab.

Once they are both linked, I can finally modify, delete or add files to GitLab via VSCode.

I personally prefer to use the HTML language to start since I already had a basic knowledge. I do a little modification to the HTML file index.html to check everything is working fine. Whenever I change anything, I have to commit & push every time I save to update the GitLab and thus my website.

When everything seems to work well, I decide to save every HTML file from the Fab Academy on my computer just in case and delete everything in the repository to have a fresh start.

I decide to start with the template from the Fab Academy and modify it's style and content. I also use the following websites to learn the HTML language and some commands : w3schools, w3schools editor as well as asking ChaGPT for specific questions or problems.

I create and add content to the following files : style.css, index.html, final-project.html, about-me and week01.

At this point, I realize I make a few spelling mistakes easy to miss, so I check for a extension to detect and propose corrections and install this one : "Code Spell Checker".

I also added the student agreement to my website in HTML (I simply used an online tool to convert from MarkDown to HTML : MK to HTML).

Image editing

To resize, modify and compress images, I compare GIMP and ImageMagick, but the latter is a command line-based tool, so it's a no go for me so I try GIMP.

GIMP (wish stand for GNU Image Manipulation Program) is a free open-source image editor. The program has it's own interface and possesses multiple tools but for now, I've only used it to resize and compress my images.

Here's an example of scaling and compression with a image of my dog, you start by opening or pasting your image on the GIMP interface :

  1. Scaling

    Right click your image, select Image then Scale Image ... and change as you wish.

  2. Compression

    Select File then Export As ..., rename your image and make sure it ends with .jpg then change as you wish (to lower the file size, modify the quality).

Problems met

  1. Linking GitLab and VSCode

    When using an URL to authenticate to GitLab via VSCode, I first used the following link : "https://gitlab.fabcloud.org/academany/fabacademy/2026/labs/ulb/students/fabio-coelho" which would'nt work to establish a link but after searching, I actually had to use this link : "https://gitlab.fabcloud.org/".

  2. Deleting all the files of a repository

    When I deleted all the files of the public folder to have a fresh start, everything including as the folder got deleted, so I had to create a new one with the same name "public" as well as the previous folders "images" and "assignments".

  3. Hyperlinks

    While editing the week01 file, I realize the hyperlinks didn't work. What I had done is simply copy and paste the same lines from the previous file but after checking with the original files, I understood I had to change the path because this specific file was in another folder.