1. PROJECT MANAGEMENT¶
Tuesday, 02/07/2024 - Thursday, 04/07/2024
On the first day of training, we learned about IoT devices and MQTT, focusing on their importance in healthcare, education, and more. The goal is to build a strong foundation for creating useful devices. We also got an overview of how transistors have developed over the years. A tour of the facility introduced us to tools like 3D printers and laser cutters. Additionally, we learned to edit websites using Markdown, uploading photos, constumizing fonts, and themes to match our preferences. This hands-on experience was a great start to our journey
TASK 1¶
WORKING ON THE WEBSITE
Uploading photos in the About page¶
Step 1: Go to the main page and click on “Docs.”
Step 2: Click on “About.”
Step 3: Click on “index.md.”
Step 4: Click on “Open in Web IDE.”
Step 5: This step requires uploading an image that we want to add to the website. By following the steps shown in the image below, we can upload the desired image.
Step 6: Knowing how to write the path to the image is important. From the previous steps, we know that we navigated through the “images” and then “week01” folders. Adding the dots in front means going back two folders to start the path. Also, make sure to write the exact name of the file because this language is case-sensitive.
Changing the Font¶
Step 1: In this part, we are going to start from a different location and file name.
Step 2: In the white border box, you can choose any font you like. Use this link as a resource.
Changing the color, icon and logo¶
1. Color¶
Step 1: Same location as the previous part, but now we are going to change the header color. You can find different colors that this language supports in Table 1.
Step 2: “Primary” here means the header color. The word coming after “primary” must be a color (see Table 1), and the accent is the color of the text when we hover the mouse pointer over it.
2. Logo & Icon¶
There are two methods to change the logo and the favicon.
Method 1: Save an image with a transparent background from any website you prefer. It is recommended that the image be in the form of .svg or .png for better results.
Here is a short tutorial:
Step 1: Find an image with a transparent background and save it as an .svg or .png.
Step 2: Upload it to your files.
Step 3: By adding the name of the image to the code (replacing the previous image name, e.g., “moon”), you can change the favicon from a moon to a jellyfish.
Before:
After:
Method 2: This is an easier method. You can go to this website and choose any logo you want. Here are some other suggestions:
To change the logo, simply update the name in the .yml file. For example, I changed the logo from a star to a bee by modifying the logo name in the .yml file.
From a Star:
To a Bee:
Table 1: Examples you can use for changing the color, icon, or logo¶
| Primary/Accent | Icon |
|---|---|
| red | home |
| pink | school |
| purple | star |
| deep purple | glasses |
| indigo | barley |
| indigo | bee |
| blue | alert |
| light blue | battery |
| cyan | emoticon |
| teal | cloud |
| green | aurora |
TASK 2¶
LINKING THE WEBSITE TO VISUAL STUDIO CODE
Step 1: First, we need to install Visual Studio Code from this link.
Step 2: After installing Visual Studio, go to the GitLab main page, then to code, and select Visual Studio Code (HTTPS).
Step 3: Choose a destination for your downloaded files.
Step 4: Wait for the cloning to complete.
Step 5: Click open.
Step 6: Check it and then click on “Yes, I trust the authors.”
Step 7: Go to the file where you located the website, right-click, then choose “Show more options” and click on “Open Git Bash here.”
Step 8: You can use the below code as a default and adjust it to your information:
bash
cd website name
git config –global user.name “FIRST_NAME LAST_NAME”
git config –global user.email “MY_NAME@example.com”
Then you can freely adjust your website locally.
TASK 3¶
PUSH CHANGES
Step 1: After editing the code for your website in Visual Studio Code, you need to save the changes either by going to File > Save or by clicking Ctrl+S. Then click on the icon near number 2, name the change (name it whatever you want), and finally click on Commit.
Step 2: Click on “Yes”.
Step 3: After saving and committing, you can go to the main page of your GitLab website and see the process of changing.
