Skip to content

Week 1: Project Management

The first week’s tasks are:
1. create a personal website (portfolio)
2. clone the files to my personal Laptop
3. Getting introduced to Visual studio code (VSC)
4. Starting Documentation process
5. tips on Academic research

Create a personal site (Portfolio)

I Created the necessary account to start my work and finalize my registration. Below are the action points that I completed to finalize my registration:

  • Create a Tamkeen account if you do not currently have one, here: https://services.tamkeen.bh/NeoTamkeenPortal/Registration
  • Create a fablabs.io account here: https://www.fablabs.io/signup
  • Link the fablabs.io account to our gitlab cloud by going to this page and selecting “sign in with Fablabs” button to authorize the connection: https://gitlab.fabcloud.org/users/sign_in
  • Once you are able to access gitlab cloud, set a new password within gitlab.
  • If your laptop runs windows, please download and install git bash via this link: https://git-scm.com/downloads. Use all the default settings. If you are using MacOS or Linux, you can ignore this step.

Clone the Web site in Visual Studio Code

To clone the files to my personal laptop, an application called Git Bash will be needed. Therefore, I started by downloading the Git Bash application. Git Bash

Then, I opened the folder where I wanted the folder to be cloned to (VSC) and opened Git Bash there:

This will open a blank Git Bash window that shows my name and the file location as shown below.

In this window, four steps will be carried to successfully transfer the files to my personal Laptop. The first step is the cloning command which will be acquired from my personal account on Gitlab.

Now, command was written in Git Bash:

This step created a folder in the selected location -in my case it was the VSH folder- with the name of my account - in my case it was Saeed.Makhlooq-.

After the completion of the cloning process, an external window appeared asking for “Log in” so the cloning transformation can be confirmed. after logging in, the second step will be carried out, which is the second command (change directory). This command will be used to direct the cloned files to new created folder (Saeed.Makhlooq).

Lastly, the third step, in this step I used two command to define the person that edited or made the changes by using these two commands: 

git clone "your URL"
cd "folder name" 
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Getting introduced to Visual studio code (VSC)

The tutor explained the working principles of the application and the language that will be used which was (Markdown) which is like a simplified version of HTML. Although, Markdown lacks a lot of the features and customization options that HTML provides, I think it is very applicable and suitable for the current purpose. What’s sad that I actually studied HTML & CSS in school; however, I didn’t keep practicing in a consistent manner that I forgot how to use it. Anyways, here are some of the important tip that I learned to navigate my way through VSC and Markdown:

  • for normal text, you can write directly without adding anything.

  • for headers you can use (#), the quantity of the (#) refer to the header number, for instance, # refer to heading one, ## refers to heading two, and ### refers to heading three.

  • for bullet points, use * before each point.

  • for numbered bullet points, use (1.).

  • if you are familiar with HTML language, you can use it and combine it with Markdown.

  • To link a YouTube video, copy the embed code from the youtube video itself where youtube create the code for you.

  • you can add extensions features on VSC to such as:
    • Markdown Preview enhanced (to use this click ctrl+shift+V)
    • Code Spell Checker to add the extension, go to the vertical bar at the left and click on the last icon that named “extensions”

  • after each change you must commit the change and sync it so it can appear in the Access page or the page that will appear to people. This is done through few steps as domenestrated below:
    • after the change click (ctrl+ S) to save the changes.
    • at the vertical bar at the left, you can see five icons:

  • As you can see the third icon, the (source control) has a notification on it, from here you can commit and sync the changes. if you click on the icon, you will see a bar where you can name the change and a button says (commit):

  • After naming the change and committing it, another button will appear that says (sync), you have to press it to sync the change to the actual website.

Below you can find a “Cheat sheet” that I found to be very useful. This sheet shows you the codes or tips in Markdown and in HTML also.

Starting Documentation process

After getting introduced to VSC and the Markdown, I started populating my website. I started with the “about page” where I provided general overview of myself such as name, age, major, hobbies, and previous work. Then, I moved to the Assignment section where I started documenting the things I learned and the steps.

  • To upload pictures, you have to open Gitlab and click on your name under the section “project”, then click on “docs”

Then enter the file named “Images”

The you will notice different files that categorize the the images. You can upload the picture in here or inside any of the files, however, for the sake of having organized and tidy files, it is best to sort your pics into files to make them more accessible. In this example, i will upload them in “Week 1” folder since I am working on the first week’s work.

Now we selected the desired folder, we can upload the picture. firstly, click the plus sign at the top, then select “upload file”.

Now, select the desired picture and upload it to the website. Afterward, open VSC and enter this below code where tou want the picture to appear:

![](../images/week01/add the name of the picture as it appears in Gitlab)

To make images center-aligned, I used the following code: 

<p align="center">
  <img src="../../images/week01/add the name of the picture as it appears in Gitlab"/>
</p>

To add clickable link 

["google"](https://www.google.com/)
  • After populating my Website, I started working on the design and customization aspect. To do this, you must start editing the “mKdocs.yml” file in VSC. Since I am using an existing template that uses Markdown as language, the customizations options are limited but I tried to do the best of the recourses and tools available. I used Material for MkDocs website to access tips and customization option such as colors, fonts, icons, and navigation.

Here are the changes that I did in the effort of customization my website:

  • I changed the primary theme color from the default “deep” to “red” and I changed the accent to “lime”.

  • I changed the social where I added my Goodreads account and my Linkedin account.

  • I changed the theme scheme from “Default” to “Slate” which basically put the website in dark mode.

  • I changed the font of the text from “Ubuntu” to “Rubik”

  • I changed the icon

  • I changed the logo of the website.

Tips on Academic research

  • Always use Google scholar.

  • Use quotation marks for important words such as titles or key words. For example, (“IoT” integrated projects.)

  • Between words in quotation marks use (AND) or (OR) depending on the context of yor search. For instance, ( “IoT” AND “Health care”).

  • Always look for newer research paper dated no more than 5 years.

  • Always check the number of the people that cited the paper (The more the better).

  • You can access advanced search to more accurate results.

  • Read only the abstract rather than the whole paper to understand the main idea.

Click here to scroll up

Last update: September 14, 2024