✨ Add 2 new section

edic-nus · Aug 19, 2024 · 64a9300 · 64a9300
1 parent 569d73a
commit 64a9300
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 52 deletions.
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
@@ -1,6 +1,7 @@
 # Summary
 
 [Introduction](./introduction.md)
-[Setting up the development environment](./set-up.md)
+[Installation of development tools](./installation.md)
 - [Chapter 1: Basic implementations](./chapter1/index.md)
+    - [Setting up your local development environment](./chapter1/local-development.md)) 
 - [Optional enhancement]()
diff --git a/src/chapter1/index.md b/src/chapter1/index.md
@@ -0,0 +1,23 @@
+# Chapter 1: Overview
+
+In this chapter, we will learn how to use the basic template that is provided in this course to generate a simple portfolio and hosted it on Github for everyone to access over the internet.
+
+Here is an overview of what this chapter will cover:
+
+1. Setting up your local development:
+    - Creating a working directory for your website and open it up in VSCode.
+    - Checking that all your installation works.
+
+2. Setting up your Github repository:
+    - Forking the template and cloning it locally to your working directory.
+    - Set up syncing on Github between the original template and your fork.
+    - Set up the website on Github pages.
+
+3. Working with basic provided components:
+    - Working with text
+    - Working with team members
+    - Working with table 
+    - Working with images
+    - Working with embedded videos
+    - Working with references
+    - Working with table-of-content
diff --git a/src/chapter1/local-development.md b/src/chapter1/local-development.md
@@ -0,0 +1,99 @@
+# Setting up your local development environment
+
+In this section, we will learn about how to set up your local development environment so you can get used to using basic functionality provided by VSCode as well as how to open folder, create and delete file, and using Live Server to host a local website.
+
+> <p class="note"> Note
+>
+> By default, your **TASKBAR** should be on the **LEFT OF THE SCREEN**.
+>
+> In all of the VSCode image going forward, the task bar is displayed on the right side of the screen due to the author preference (I would recommend you to also put taskbar on the right to improve code readability), this is purely for User Experience purpose and does not affect the functionality of VSCode in anyway.
+
+## Step 1
+
+First, open up your VSCode and click on the `Explorer` icon to open up your working folder.
+
+![Click on Explorer icon](../img/explorer.png)
+
+Next, click on the `Open Folder` icon to select a folder you want to put your website inside and open it up in VScode.
+
+> <p class="warn"> Warning
+> 
+> Please make sure that the folder you are selecting is **EMPTY**, else your website might not work.
+
+![Open Folder](../img/open-folder.png)
+
+You know that it open properly when you see the name of your folder reflected in the explorer.
+
+![Folder name](../img/folder-name.png)
+
+## Step 2
+
+Now we will try to create a new file and name it `index.html` in the folder. 
+
+To do so, just simply, right click on the empty space in the explorer and you should see an option for `New file...` pop up. Click on that and it will create a new file in the folder for you. Then, you can name the file `index.html`. Double click on the file to open it up in VSCode.
+
+![New file](../img/new-file.png)
+
+## Step 3
+
+Now let try to add something into the file so that we can test out our Live Server plugin. You can click on the `Explorer` icon again to collapse the side bar so it does not take up too much space on your screen. Copy and paste the following code into the file.
+
+```html
+<body>
+    Hello my project's website!
+</body>
+```
+
+> <p class="note"> Note 
+> 
+> All the code snippet in this tutorial like the one above can be easily copied using the copy button on the right of the snippet box. To show the copy icon, you just have to hover your mouse over the code snippet and it will appear. We suggest using this instead of highlighting and copy to prevent error.
+> ![Copy symbol](../img/copy-symbol.png)
+
+Press `Ctrl + S` (or `Cmd + S` if you are using a Mac) to save the file and you are set.
+
+## Step 4
+
+Now let see the magic of the Live Server plugin. If you click on the Live Server symbol at the bottom right of your screen, you will see it says `Starting...` and finally open up a brand new browser window with the index.html file you just created on it. 
+
+> ![Live Server](../img/go-live.png)
+
+You should be able to see on the browser the sentence:
+
+> ![Hello website](../img/hello-website.png)
+
+At the address `127.0.0.1`. Now, you can freely close this browser window if you woud like to. If you want to open it again, just simply type into your browser search bar the following address:
+
+> localhost:PORT
+
+Where the port number is the PORT value given by the Live Server plugin display at the bottom right of your VSCode like so.
+
+![Port Number](../img/port-number.png)
+
+So in our example, that would be:
+
+> localhost:5500 
+
+And it should open the browser right back up.
+
+## Step 5
+
+Now, the reason we need Live Server Plugin is so that we can simplify a process often refer to as "Hot-reloading" meaning that we can see the change being reflected immediately on our local website, the moment we make a change to our code.
+
+To test out this feature, you can randomly change the portion of text between the two `<body>` tag to something else and see it being change on your local website in real time. For example, let change it to:
+
+```html
+<body>
+    1 year sound a bit long isn't it?
+</body>
+```
+
+Save the change you made to the file, and immediately see the new text being reflected on your browser window.
+
+Now, remember, if you close VSCode, the Live Server will be disposed automatically and you would need to click on it to activate it again. You could also intentionally dispose it by click on it while it is running (you know it is running when it said `PORT: XXXX`). After disposing it, you will not be able to access the website locally anymore.
+
+And that will wrap up this section.
+
+
+
+
+
diff --git a/src/img/copy-symbol.png b/src/img/copy-symbol.png
diff --git a/src/img/explorer.png b/src/img/explorer.png
diff --git a/src/img/folder-name.png b/src/img/folder-name.png
diff --git a/src/img/hello-website.png b/src/img/hello-website.png
diff --git a/src/img/new-file.png b/src/img/new-file.png
diff --git a/src/img/open-folder.png b/src/img/open-folder.png
diff --git a/src/img/port-number.png b/src/img/port-number.png
diff --git a/src/installation.md b/src/installation.md
@@ -0,0 +1,57 @@
+# Installation of development tools
+
+## Visual Studio Code (VSCode)
+
+The first thing that you would need is a text editor. For more complex projects you would probably need an Integrated Development Environtment (IDE) instead, but for the purpose of this portfolio a text editor is more than good enough. The official text editor that will be supported in this course is VSCode due to its popularity, ease of configuration and useful plugins.
+
+To download VSCode, just follow the instruction provided on this website 
+<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>. 
+
+Here is a basic Youtube tutorial for those of you who would like to learn a bit more about your new shiny text editor:
+<a href="https://www.youtube.com/watch?v=B-s71n0dHUk" target="_blank">VSCode Tutorial</a>.
+
+It is advised to get somewhat comfortable with using VSCode as it is quite an industry standard for programming, and it also will make your life easier in general.
+
+## VSCode extension
+
+VSCode has a lot of what we called extensions. They are essentially package or "app" that is written by other people to help extend the functionality of VSCode. For this tutorial, we will install an extension that helps us with live previewing our website. Without this plugin, we would need to click reload on our browser everytime we made a change to the website, which is not very fun to do every 5 minutes or so.
+
+> <p class="note"> Note
+>
+> By default, your **TASKBAR** should be on the **LEFT OF THE SCREEN**.
+>
+> In all of the VSCode image going forward, the task bar is displayed on the right side of the screen due to the author preference (I would recommend you to also put taskbar on the right to improve code readability), this is purely for User Experience purpose and does not affect the functionality of VSCode in anyway.
+
+![Extension](./img/extension.png)
+
+Click on the extensions Icon as shown above.
+
+Type in the Extensions Search Bar section: **Live Server**
+
+Open up the results that say:
+
+> Live Server
+> 
+> Ritwick Dey
+
+![Live Server](./img/live-server.png)
+
+Just click the **Install** button and you are set. You should be able to see a small broadcasting symbol at the bottom of the VSCode window (usually on the bottom right) that looks like this.
+
+![Go Live](./img/go-live.png)
+
+
+## Git
+
+Next you will need to learn how to use a version control system or source control management (scm) depend on who you ask. In this course, our official supported scm is [Git](https://git-scm.com/). Please visit the link provided, and follow their instruction to set it up on your computer.
+
+If you are wondering what is Git and want to learn more about this very important industry standard tool, here is a link to a great [introductory video](https://cs50.harvard.edu/web/2020/weeks/1/) to Git by Brian from Harvard CS50 course.
+
+## Github
+
+Please sign up for a Github account at <a href="https://github.com/" target="_blank">Github</a>. Github is where you can upload your own git repository or download other git repository (think dropbox or Google Drive but for code). This is also where your websites and all the resources for this tutorial will be hosted **FOR FREE**!!!
+
+While you are at it, remember to give a star to <a href="" target="_blank">this tutorial</a> and watch us on Github. It would give us some internet clout :"), but more importantly it will notify your account and your email if new update is made to the tutorial so you can keep an eyes out for it.
+
+![Where to star and watch](./img/watch-and-star.png)
+
diff --git a/src/set-up.md b/src/set-up.md
@@ -1,51 +1 @@
-# Setting up your development environment
-
-## Visual Studio Code (VSCode)
-
-The first thing that you would need is a text editor. For more complex projects you would probably need an Integrated Development Environtment (IDE) instead, but for the purpose of this portfolio a text editor is more than good enough. The official text editor that will be supported in this course is VSCode due to its popularity, ease of configuration and useful plugins.
-
-To download VSCode, just follow the instruction provided on this website 
-<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>. 
-
-Here is a basic Youtube tutorial for those of you who would like to learn a bit more about your new shiny text editor:
-<a href="https://www.youtube.com/watch?v=B-s71n0dHUk" target="_blank">VSCode Tutorial</a>.
-
-It is advised to get somewhat comfortable with using VSCode as it is quite an industry standard for programming, and it also will make your life easier in general.
-
-## VSCode extension
-
-VSCode has a lot of what we called extensions. They are essentially package or "app" that is written by other people to help extend the functionality of VSCode. For this tutorial, we will install an extension that helps us with live previewing our website. Without this plugin, we would need to click reload on our browser everytime we made a change to the website, which is not very fun to do every 5 minutes or so.
-
-![Extension](./img/extension.png)
-
-Click on the extensions Icon as shown above.
-
-Type in the Extensions Search Bar section: **Live Server**
-
-Open up the results that say:
-
-> Live Server
-> 
-> Ritwick Dey
-
-![Live Server](./img/live-server.png)
-
-Just click the **Install** button and you are set. You should be able to see a small broadcasting symbol at the bottom of the VSCode window (usually on the bottom right) that looks like this.
-
-![Go Live](./img/go-live.png)
-
-
-## Git
-
-Next you will need to learn how to use a version control system or source control management (scm) depend on who you ask. In this course, our official supported scm is [Git](https://git-scm.com/). Please visit the link provided, and follow their instruction to set it up on your computer.
-
-If you are wondering what is Git and want to learn more about this very important industry standard tool, here is a link to a great [introductory video](https://cs50.harvard.edu/web/2020/weeks/1/) to Git by Brian from Harvard CS50 course.
-
-## Github
-
-Please sign up for a Github account at <a href="https://github.com/" target="_blank">Github</a>. Github is where you can upload your own git repository or download other git repository (think dropbox or Google Drive but for code). This is also where your websites and all the resources for this tutorial will be hosted **FOR FREE**!!!
-
-While you are at it, remember to give a star to <a href="" target="_blank">this tutorial</a> and watch us on Github. It would give us some internet clout :"), but more importantly it will notify your account and your email if new update is made to the tutorial so you can keep an eyes out for it.
-
-![Where to star and watch](./img/watch-and-star.png)
-
+# Setting up the development environment