Web building and development process

Step 1: How I used free online templates to build my portfolio

I went on google through elen-smarter website to download template to use.

I downloaded this template to reduce time I would spend building website from scratch and this is very easy to me rather than starting from ground-up:

It came as zipped folder and I extracted it on my local disk space on my computer inorder to access the files. after that I Selected the VS code editor (VS Code) to modify and make change related to what I'm doing

Step 2: How I selected code editor to use

I started thinking about the editor to use while editting my template as there is notepad ++, vs-code, espresso, codeshare.io, command prompt, sublime, and others as you can find in the link where I was reading about the comparison about code edittors the you can find in world https://www.hostinger.com/tutorials/best-code-editors

after reading different docs about every code edittor, I choosen to use VS -CODE because it has many extensions to use while using it and it increases the functionality of it and also it make you familliar with it while using it.
for more info you can read different functionalities and advantages of each code edittor via https://www.hostinger.com/tutorials/best-code-editors esspecially on VS-CODE I choosen to use, you can visit www.hostinger.com/tutorials/best-code-editors#1_Visual_Studio_Code

after that I started downloading vs-code edittor to start editting my template

I went through https://code.visualstudio.com/download to download it and I choosen windos setup because I'm using windows system software

after downloading, I started to install it in my local computer and connect it to my git-lab account

how I opened my template in VS to make some changes inorder to push it on my git-lab

I went in my local disk (downloads) to open my template folder in VS code editor and I did right click on the folder and opened with vs-code

This is how I started to modify my template

When vs code is opened,I copied the public folder which all directories that contains important files and I pasted it inside the directory where my git-lab repository is located and it replaced the public folder automatically

This is how I editted and modified the template

I deleted some of unwanted images, files and codes because not at all I'm going to use. depending on what I wanted t use I kept some files and uploaded new Images and also added new codes to make my U/I good and visible to everyone

I saved the changes and clicked on golive icon which is an extension to help vs code user to host what he/she is doing locally. it helped me to see how it will be looking before I put on my git lab account and become visible to everyone around the world

Step 3:How I pushed my changes to my GitLab repository

After making change to my template, I started thinking on how I can push it on git-lab so that it can be hosted online to be viewed by anyone who wish to visit and evaluate my portfolio

I made different research on version controls that are around and through this journey I visited webpage of stackover flow to see what other developers talked about it and how they compare them. here is the link I visited https://stackoverflow.blog/2023/01/09/beyond-git-the-other-version-control-systems-developers-use/.
I found that there is many version control linke git version control, apache subversion, Mercurial version control and others. so, I choosen to use GIT version control because it is easy and visualised in way it is interactive to a user

I concluded that I have to use git version control to connect my local computer to global sever using git-lab. so I start the process of downloading and installing it on my local computer

How I Set Up Git and Connecting to GitLab (Windows)

Step 1: This is how I installed Git

I went on google through https://git-scm.com/ and I found that git is Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
To Download the latest Git installer from the official Git website, I navigated through https://git-scm.com/downloads for windows.

I downloaded git and Ran the installer in file explorer:

• I Selected the default editor (VS Code) because it is my familiar editor while installing git.
• after I Used the default settings for the remaining steps until I reached customization and configuration step.

This is how I Configured Git

When Git is installed,I opened the Git Bash to configure my username and email which will help my VS code my local editor to communicate with my git-lab:

git config --global user.name "billy-charmant" 
git config --global user.email "billycharmant541@gmail.com"

How I Generated SSH Key

I Generated an SSH key for GitLab authentication using CMD(command prompt) from my local computer using this code:

ssh-keygen -t rsa -b 4096 -C "billycharmant541@gmail.com"

I pressed enter to save the key in the default location (`~/.ssh/id_rsa`) and left the passphrase empty for simplicity.

How I Added SSH Key to GitLab

I copied my ssh key file and pasted it in notepad

clip < ~/.ssh/id_rsa.pub

now The key is copied to my clipboard. through: GitLab > Settings > SSH Keys, after I pasted the key in my gitlab account, and click "Add Key."

pasting my ssh keyto my git-lab account through GitLab > user profile > preferences > SSH Keys > Add key

after this step, I was ready to clone my repository which represents my archieve to be editted and used day per day

How I Clone my Repository from my Git-lab account

From my account on home, I clicked on first link and directed me on my git-lab repository

I opened my terminal from vs code

so, I cloned my repository using SSH, by running the following command in the terminal of my vs-code:

git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/rwanda/students/billy-charmant.git

By this stage I was ready to edit and use my repository to design my portfolio website where everyone can reach out me and see what I'm doing day per day.

I copied the files from editted template from the begining of this assignment and I pasted it into cloned repo

So, now I'm done by setting up my git on Windows and connected to GitLab with some changes for my portfolio.

after there is cupple of codes I used to add, commit and push my code to my git-lab account

git status 
this code help to know the changes you made on your main branch or other branch

git add . 
this command add all changes to the ssh linked to your repository on gitlab

git git commit -m "my first commit" 
this command commits messag to all changes you added to repository

git push 
this code push all changes to repository on gitlab

now The changes are pushed on my gitlab and I can see that its already there

after I clicked to the link that direct me on my official website to see if all changes are done

Components of my portfolio website

my website is composed of many features but the most important features are home page, assignments page, final project page, CV page, About me page and the contact page

this is to make sure that every content that can guide someone to reachout me and my tutorial goes through easiest way and journey

So, now I'm done by edditing and changing first assignment's tasks.