1. Project Management

In the first week, I acquired knowledge in both theoretical understanding and practical applications. In terms of theoretical knowledge, time management and project management are core skills in the Fab Academy class.

• Demand vs Supply-side time management:
• Working to the calendar, not to the task.
• Spiral Development Model aims to:
• Create complete incremental project versions.

See A Friendly Guide for Your Fab Academy Journey.

In practical terms, I learned how to design my webpage with HTML & CSS, download my repository(or repo.) from Gitlab, and upload my page to GitLab, and also how to set up Git, get to know some basic CMD, etc. Here are more details about Version control & GitLab.

Additionally, Fab Academy provides some professional software and tools that require a computer with a minimum configuration of 16GB of RAM. However, if your computer doesn’t meet these requirements, you can ask your instructor for a suggestion.

Getting Started

• What is Git
• Install Git in your computer
• Download your GIT documentation repository from Gitlab
• Learn HTML Edit your code with Visual Studio Code
• Upload your Local Project to Gitlab Fabcloud

• Command summary

• Setup Git

• Copy your academy personal repo.
• Upload your repo online
• Terminal commands

What is Git

A popular Version Control System
Git is a tool used for tracking to your project files
Saving your changes is called a Commit
Everything is stored in a Repository
View history of all commits (who/when/what changed)
Revert/restore past changes (good if anything breaks)
Push commits (changes) to remote central repo (upstream/origin)
Multiple locations can sync their changes with origin Install Git in your computer

Download Git

To install Git: see this page.
GitBash for windows users: this page.

Install Git

During the installation of Git, you can click next directly in most cases. The following are some special cases. (Notice:I am using windows os, and I’ve already have Visual Studio Code installed.)

1. Case1 - select the third one: Use Visual Studio Code as Git’s default editor.

1. Case 2 - For choosing the SSH executable, select the Use bundled OpenSSH
2. Case 3 - For configuring the terminal emulator to use with Git Bash, select Use Window’s default console window

Issue Collection

No ‘Open Powershell here’ option

If you don’t see ‘Open Powershell here’ option after right-click in a folder,you can try hold down the shift key, right-click the mouse in the blank space, and you will see the ‘Open Powershell here’ option.

VS Code Terminal shows ’ git is not a command’

See picture below, Terminal shows ‘git : The ‘git’ item is not recognized as the name of a cmdlet, function, script file, or executable program.’

Then, you go to VS Code, check : Manage - Settings - enter ‘git.path’

The second picture shows you didn’t do git configuration. Open CMD and ask it ‘where git’ , now you get the git path.

You can’t directly refference the above path, try one of these formats:

Linux:
D:/Program Files/Git/cmd/git.exe

Windows:
D:\\Program Files\\Git\\cmd\\git.exe

After you finish configuration and save the jason file, restart VS code.

Download your GIT documentation repository from GitLab

First, create a new file folder in your computer, and open this folder with console window.

Then , try “git clone Your HTTPS URL” .

For the HTTPS URL, follow these steps:
visit fabcloud , use the username/password the Fab Academy provided. You should access details in your email with the subject “Fab Academy 2024 accounts access”. After you login your gitlab, click this ‘code’ button:

HTTPS URL is right here:

Learn HTML and Edit your code with Visual Studio Code.

To Learn html - watch this HTML tutorial .
Prettier needs more configuration to realize auto formatting, check this tutorial :
For div, see html - div
For CSS properties, see CSS properties here.
For mkdocs,see mkdocs:

Upload your Local Project to Gitlab Fabcloud

Just follow the above tutorials, I used HTML and CSS builded my first raw webpage, use ‘Inspect’ or ‘Developer tools’ by Chrome, you can see my source code.
To upload your local project, you should know your local project location on your computer.
Mine is D:\Fab24\dion-tsang
Now, press win+R to open console window.
And you should use some CMD like dir,cd, and also CMD of git, follow these steps:

D: Switch to the root directory of the D drive
dir lists all files and subdirectories in a directory
cd Fab24Switch to the Fab24 subdirectory
dir lists all files and subdirectories in the current directory
cd dion-tsang switches to the dion-tsang subdirectory
git add . to upload all the files at once,remember a space is needed between add and ‘.’
git commit -m “changed name”to name your update, so you know what you changed with this push.
git push Upload to the Repository

At this point, you are required to enter your Gitlab username and password again.

And then, you’re need to setup Git, using these two commands:

git config –global user.email “Your email address”
git config –global user.name “Your gitlab user name”

You should find your Gitlab user name here:

Then, try these commands again :

git add . (a space needed.)
git commit -m "the change you made "
git push

You should see the Last update as ‘just now’

You can click the Passed button to check the state of deployment:

Command summary

Setup Git (to do only the first time)

1. Install Git GitBash for windows users Gitbash
2. Add your Git username and set your email

git config –-global user.name “YOUR_USERNAME”

1. Configure you email address for uploading

git config -–global user.email “jSmith@mail.com”

Copy your academy personal repo

1. Navigate to the folder where you want to put or create your repo. If you don´t know how to follow this guide .
   We recommend to create it in the desktop so you don´t have to dive into million of folders each time
2. Clone your student repository
   git clone git@git.fabacademy.org:fabacademy2017/yourlabname/yourstudentnumber.git

Upload your repo online

1. Add the new files you added to git

git add index.html to upload file by file
git add . to upload all the files at once

1. To download the last copy from the repository

git pull (for downloading the last copy of the repository)

1. To have a working copy of your repo

git merge (to have a working copy)

1. Now name your update, so you know what you changed with this push.

git commit -m ‘change you did’

1. Upload to the Repository

   git push

Terminal commands you will use to get to your archive folder

dir To view the contents of a directory, type “dir”
ls To view the files as a list
cd It is frequently useful to know in which directory you are currently working
To move between directories, use the cd command with the name of a directory example go to desktop is “cd Desktop”
mkdir To create a new directory
del Subsequently, you might want to clean up useless files

Capital letters matter here

Let’s Jump to the Top !!!

------------------------------- update on 2024/06/14 -------------------------------

Difference between using backslashes (\) and forwardslashes (\/) in the paths

See this page

Backslash (Windows) and Forward Slash (Linux)

• The documentation uses (\) for windows and forward slashes(/) for Linux environments.
• On Linux a path beginning with / is the absolute path; and a path beginning with ./ is a relative path for the current directory.

Should I use ./ to search for files in the current path?

When searching for files in the current path, adding ./ is not always necessary, but it can be useful in certain contexts to explicitly specify the current directory.

------------------------------- update on 2024/06/18 -------------------------------

How to Upload your Repo using Git

git status
git add + the changes
git commit -m message
git push

• git status
• provides important information aabout the current state of your working directory and staging area.

• Used to display the state of the working directory and the staging area. It shows which changes have been staged, which have not, and which files are not being tracked by Git.

• git add

• The git add command adds new or changed files in your working directory to the Git staging area.

• git commit

• git commit creates a commit, which is like a snapshot of your repository. These commits are snapshots of your entire repository at specific times.

• the commit message is important. Commit messages should be short and descriptive of your change. If you are looking through your repository’s history, you’ll be guided by the commit messages, so they should tell a story. Commits in the command line can include the message with the following format:

• git commit -m "git commit message example"

• git push

• git push updates the remote branch with local commits.

Use wildcards (*) to upload in batches

Upload to repo one by one

Git Status to find many messages or “Your branch is ahead of ‘origin/main’ by 4 commits”

• The reason you see so many messages when you run git status is because there are numerous files listed as deleted and not staged for commit. Git lists each of these files individually under “Changes not staged for commit” to inform you of the current state of your repository.

• To address this, you can follow these steps to commit the deletions:

• Stage the Deletions: Use the git add command to stage all the deletions. Since there are many files, you can use a wildcard * to add all deleted files under the docs/images/ directory.

git add docs/images/*
This command stages all deleted files under the docs/images/ directory for commit.

• Commit the Deletions: After staging the deletions, commit them with an appropriate message:

git commit -m "Remove unnecessary images and files"
Replace “Remove unnecessary images and files” with a commit message that describes the action you are performing.

• Push Changes to Remote:
  Finally, push the committed changes to the remote repository:

git push origin main
By following these steps, you effectively manage the deletions and update your remote repository with the changes. This approach avoids the need to individually add each file and streamlines the process when dealing with multiple deletions.

Here is a good example for your refference when you have completed a small section of work and want to upload it to the repo

• use git status to check the latest modification
• if you can’t do Batch processing like above, you can git add + copy the path in red one by one
• git commit -m “update some file or images”
• git push