Merge pull request #16 from UMLCloudComputing/feat--Update-Tutorials-section

Feat  update tutorials section

Author: Gurpranked

README.md

@@ -1,6 +1,6 @@
 <div align="center">
     <a href="https://cloudcomputingclub.cs.uml.edu/">
-        <img src="./club-logo.png" alt="Logo" width="50%" height="50%">
+        <img src="./club-logo.png" alt="Logo" width="50%" height="50%"/>
     </a>
     <hr>
     <h1>The UML Cloud Computing Club Website</h1>

docs/Getting Started and FAQ.md

@@ -19,7 +19,7 @@ Feel free to reach out to our club leaders for more information. We look forward
 #### Q: How do I join the club?
 **A**: The best way to join is to attend our regular meetings. You can also join our [Discord server](https://discord.gg/WC2NdqYtDt) for updates and discussions.
 
-### Meetings
+### 📡 Meetings
 
 #### Q: When and where are the meetings held?
 **A**: The meeting schedule is outlined in the README. The location will be announced prior to each meeting.
@@ -30,23 +30,23 @@ Feel free to reach out to our club leaders for more information. We look forward
 #### Q: What if I miss a meeting?
 **A**: Don't worry! Meeting materials and summaries will be uploaded to the respective week's folder in our GitHub repository.
 
-### Projects
+### 👩‍💻 Projects
 
 #### Q: Do I need prior experience to contribute to the project?
 **A**: No, you don't need prior experience. We aim to make the project inclusive for members at all skill levels.
 
 #### Q: How can I contribute to the project?
 **A**: Contributions can be made through our project repository on GitHub. More details can be found in the "Project Repository" section of this README.
 
-### Technologies
+### 💡 Technologies
 
 #### Q: Do I need to know all the technologies listed to participate?
 **A**: No, you don't need to be proficient in all the technologies. The club serves as a learning platform, and we'll cover various technologies throughout the semester.
 
 #### Q: What if I'm interested in a technology not listed?
 **A**: We're open to exploring new technologies! Feel free to bring it up during meetings or on our Discord server.
 
-### Contact
+### 🙌 Contact
 
 #### Q: How can I contact the club leaders?
 **A**: You can reach out to us via our [Discord server](https://discord.gg/WC2NdqYtDt) or by sending an email to [cloudcomputingclub@uml.edu](mailto:cloudcomputingclub@uml.edu).

docs/tutorials/Git Version Control/Advanced/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Advanced",
+    "position": 2,
+    "link": {
+      "type": "generated-index"
+    }
+  }
+  

docs/tutorials/Git Version Control/Basics/Branch.md

@@ -0,0 +1,151 @@
+---
+sidebar_position: 6
+---
+
+# Branch
+
+### Using Git branches
+
+A [branch](./Index.md/#branch) is a seperate version of the main repository.<br/>
+Branches are particuarly useful when a developer wants to update parts of a large project.
+
+Git branches allow development on a new features and designs independent from other work on the main branch.<br/>
+When the work is complete on a branch, it can be [merged](./Index.md/#merge) back into the main branch/project.<br/>
+With branches, it's also possible to work on different parts of a project simultaneously without any part impacting another.
+
+### Creating a new Branch
+
+Let's create a new [branch](./Index.md/#branch) to work on a feature without modifying the main project's working code:
+
+``` bash
+[user@localhost] $ git branch hello-world-pictures
+```
+The command `git branch hello-world-pictures` will create a new [branch](./Index.md/#branch) called "hello-world-pictures".<br />
+Let's confirm that the branch was created:
+``` bash
+[user@localhost] $ git branch
+hello-world-pictures
+* master
+```
+> Important: Whenever creating new branches, the branch from which the *new* branch is sourced from is the branch which was mounted when the git branch command was called. In scenario above, the command was called from within the `master` branch. Hence, all the initial files and changes are sourced from the `master` branch for the `hello-world-pictures` branch.
+
+A new branch called "hello-world-pictures" has been created, however the `*` symbol indicates that we are currently still on the `master` [branch](./Index.md/#branch). 
+> When viewing the output of `git branch`, the `*` symbol indicates the current branch.
+
+![Git-Staging-Diagram-3](../../../../static/img/git-tutorial/git-workflow-3.png)
+
+In order to leave the `master` [branch](./Index.md/#branch) and change to the "hello-world-pictures" [branch](./Index.md/#branch) we have to use the [`checkout`](./Index.md/#checkout) command. 
+
+``` bash
+[user@localhost] $ git checkout hello-world-pictures
+                   Switched to branch 'hello-world-pictures'
+```
+> Note: Adding the `-b` option on `git checkout` will create a new branch and move to it, if it does not exist.  
+
+Now let's make some edits now that we're in the correct branch.
+Let's add an [image](https://software.3metas.com/wp-content/uploads/2017/06/git.png)(needs to be downloaded) to our html page:
+
+First let's obtain the image:
+> In order to download the image via the CLI use one of the following commands from the same working directory as `index.html`:
+> - Windows: 
+    >   ``` powershell
+    >   wget https://software.3metas.com/wp-content/uploads/2017/06/git.png > git.png
+    >    ```
+    > - Linux & Mac: 
+    >   ``` bash
+    >   curl https://software.3metas.com/wp-content/uploads/2017/06/git.png > git.png
+    >   ```
+
+
+Then let's update our html code:
+``` html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Hello World!</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <h1>Hello world!</h1>
+        <div>
+            <img src="git.png" alt="Git Logo" style="width:100%;max-width:960px">
+        </div>
+        <p>This is the first file in my new Git Repo.</p>
+        <p>A new line in our file!</p>
+    </body>
+</html>
+```
+
+Let's [save and exit](./New%20Files.md/#basic-editing-on-vim) and check the status of the current [branch](./Index.md/#branch)
+
+``` bash
+[user@localhost] $ git status
+On branch hello-world-pictures
+Changes not staged for commit:
+    (use "git add <file>..." to update what will be committed)
+    (use "git restore <file>..." to discard changes in working directory)
+        modified:   index.html
+
+Untracked files:
+    (use "git add <file>..." to include in what will be committed)
+    git.png
+
+no changes added to commit (use "git add" and/or "git commit -a")
+```
+
+The output indicates that there are tracked changes to `index.html`, however the file is not [staged](./Index.md/#stage) for a [commit](./Index.md/#commit). Moreover, there is also the image `git.png` that is currently untracked.
+
+So let's add all the changes to the [staging area](./Index.md/#staging-area):
+``` bash
+[user@localhost] $ git add --all
+```
+
+Now let's check the status of the [branch](./Index.md/#branch):
+``` bash
+[user@localhost] $ git status
+On branch hello-world-pictures
+Changes to be committed:
+(use "git restore --staged <file>..." to unstage)
+        new file:   git.png
+        modified:   index.html
+```
+
+Now all the changes are staged and can be committed.
+
+Since we're satifisied with our changes, let's [commit](./Index.md/#commit) them to our [branch](./Index.md/#branch):
+``` bash
+[user@localhost] $ git commit -m "feat: Added image to hello world"
+[hello-world-pictures 83d7fb0] feat: Added image to hello world
+ 2 files changed, 3 insertions(+)
+ create mode 100644 git.png
+```
+
+### Switching between Branches
+
+Now let's see the power of branches! <br />
+Let's check content within our branch:
+
+``` bash
+[user@localhost] $ ls
+git.png  index.html  README.md  styles.css
+```
+Notice how the `hello-world-pictures` [branch](./Index.md/#branch) has the image `git.png`. As per the edits we've made, `index.html` should also have modified code to include the image. 
+
+Now's let's change to the `master` branch using the `checkout` command:
+``` bash
+[user@localhost] $ git checkout master
+                   Switched to branch 'master'
+```
+
+Finally let's check the content of this [branch](./Index.md/#branch):
+``` bash
+[user@localhost] $ ls
+index.html  README.md  styles.css
+```
+`git.png` is gone! Moreover, if we open and check `index.html` we can see that it no longer has the edits we made recently!
+
+Branches enable you to work on parts of a project independently.
+
+---
+All rights belong to the author and/or owner of the [image](https://software.3metas.com/wp-content/uploads/2017/06/git.png).

docs/tutorials/Git Version Control/Basics/Citations.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 11
+---
+
+# Citations
+
+This entire tutorial is HEAVILY inspiried from [W3 School's](https://www.w3schools.com/git/default.asp?remote=github) tutorial. Major credit goes to their tutorial on Git. 
+
+APA 7:
+>[Git Logo Image](https://software.3metas.com/wp-content/uploads/2017/06/git.png): (2024). 3metas.com. https://software.3metas.com/wp-content/uploads/2017/06/git.png
+
+> [Hello World Image](https://www.elegantthemes.com/blog/wp-content/uploads/2020/08/hello-world.png): https://www.elegantthemes.com/blog/wp-content/uploads/2020/08/hello-world.png

docs/tutorials/Git Version Control/Basics/Commit.md

@@ -0,0 +1,84 @@
+--- 
+sidebar_position: 5
+---
+
+# Commits
+
+![Git-Staging-Diagram-2](../../../../static/img/git-tutorial/git-workflow-2.png)
+
+Commits keep track of progress and changes as we work. Git treats each [`commit`](./Index.md/#commit) as a "save point". It's a point in the project which can be reverted to if a bug is found, or you want to make a change. 
+
+Whenever performing a [`commit`](./Index.md/#commit), **always** include a commit **message**. 
+It's always best practice to do so and improves understanding of your code for others and subsequently maintainability of your project. 
+
+``` bash
+[user@localhost] $ git commit -m "init commit"
+[master (root-commit) d3d38f6] init commit
+ 3 files changed, 23 insertions(+)
+ create mode 100644 README.md
+ create mode 100644 index.html
+ create mode 100644 styles.css
+```
+
+`git commit` performs a commit and the `-m `*`"message"`* adds a message to the commit. <br/>
+Now the staging area has been committed to the repository with the message "init commit".
+
+There are general [guidelines](https://www.conventionalcommits.org/en/v1.0.0/) for writing git commit message which are common in industry. It's **highly valuable** to be aware of these practices to write effective and informative commit messages. 
+
+### Git Commits without staging
+
+Sometimes when small changes are made, the staging area can seem like a hassle. Hence, it's convienient to commit directly and avoid the staging area. <br/>
+By using the `-a` option on `git commit`, it's possible to stage every changed and already tracked file. 
+
+To show this let's update `index.html` slightly:
+``` html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Hello World!</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <h1>Hello world!</h1>
+        <p>This is the first file in my new Git Repo.</p>
+        <p>A new line within our page!</p>
+    </body>
+</html>
+```
+>Recall, to open a file to edit in your working directory with [Vim](./Index.md/#vim), enter the command `vim `*`filename`* and enter insert mode (`I` key on the keyboard). To save and exit enter normal mode (`esc` key) and enter the command `:wq` (write and quit).
+
+Now let's check the status of our [repo](./Index.md/#repository-repo), however with the `--short` option to get a more compact response:
+``` bash 
+[user@localhost] $ git status --short
+                   M index.html
+```
+> Note: The `--short` option on `git status` is also synonymous with `-s`. Hence, either `git status -s` or `git status --short` can be used to perform the same action.
+
+Here's some valuable [information](./Index.md/#git-status-short) about short git status flags.
+
+Now let's commit directly:
+``` bash
+[user@localhost] $ git commit -a -m "feat: Added a new line in index.html"
+                   feat: Added a new line in index.html
+                   1 file changed, 1 insertion(+)
+```
+> Notice how the commit message follows the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) structure.
+
+<blockquote className="warning">Warning: It's typically not best practice to skip the staging area since it's possible to accidentally commit unwanted changes. Commit carefully. </blockquote>
+
+In order to view the commit history of your repository, use the `log` command:
+``` bash
+[user@localhost] $ git log
+                    commit c4c4abe5c0156a5626cdafc1e5722d5b2b23e833 (HEAD -> master)
+                    Author: example user <user@example.com>
+                    Date:   Sun Jul 21 14:12:35 2024 -0400
+
+                        feat: Added a new line in index.html
+
+                    commit d3d38f65bb0bde98b47a6747d8d02b2e53bd0bcb
+                    Author: example user <user@example.com>
+                    Date:   Sun Jul 21 13:46:57 2024 -0400
+
+                        init commit
+```

docs/tutorials/Git Version Control/Basics/Exercises.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 9
+---
+
+# Excersises
+

docs/tutorials/Git Version Control/Basics/Getting Started.md

@@ -0,0 +1,26 @@
+---
+sidebar_position: 2
+---
+
+# Getting Started
+
+## Creating a Git folder
+
+Creating a new folder for a project:
+``` bash
+[user@localhost] $ mkdir newProject
+[user@localhost] $ cd newProject
+```
+
+[`mkdir`](./Index.md/#mkdir) makes a new directory. <br />
+[`cd`](./Index.md/#cd) changes the current working directory.
+
+## Initialize Git
+Once in the correct folder, initialize git on the folder:
+``` bash
+[user@localhost] $ git init
+                   Initialized empty Git repository in /User/user/newProject/.git/
+```
+New Git repository created!
+
+> Git automatically knows to watch this folder for changes within a hidden folder.