Upload Files Using Terminal

What is Git?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

How to generate the ssh key (how I did it using a Mac in 2020)

First, our fab academy students use a site called git lab. You who become a fab academy student become a member of the git lab site. We have to create the ssh key of our computer and save it in git lab so we can upload the file on the web using the terminal.

1. Opened terminal
2. Created a new directory (folder) named .ssh

   mkdir .ssh

3. entered the .ssh new directory (folder)

   cd .ssh

4. Created an ssh key called "fa2020key"

   ssh-keygen -t rsa -b 4096 -C "fa2020key"

5. Edited the text file named config

   nano config

6. Entered the following: (note the three spaces at the start of line 2,3 & 4) And Exit.

                   Host fabacademy
                      HostName gitlab.fabcloud.org
                      User git
                      IdentityFile ~/.ssh/fa2020
                 

7. Copied the contents of my fa2020.pub key (I could use `cat fa2020.pub` from terminal)
8. Pasted my new key into your gitlab profile at https://gitlab.fabcloud.org/profile/keys
9. And checked if the ssh key is registered well.

   ssh -T git@gitlab.fabcloud.org

10. And I received a message.

    Welcome to GitLab, @jihwan!

How to setup the link between the central repository and your local archive

1. Navigate to the folder where you want to put or create your repo. (Using the command "cd")
2. Clone your student repository

   git clone git@git.fabacademy.org:fabacademy2020/yourlabname/yourstudentnumber.git

3. Then you can edit your files in the folder where git clone is connected.

Upload Files Using Terminal

Make Homepge

Change My Website

First (Before) & Second (After) Version

The first site was very clumsy and uncomfortable to look at the information I recorded. So I modified the homepage. The parts that I revised are first, people who look at the homepage can find information well, second, made a little more clear.

• CSS Smooth Scrolling Effects (Youtube)
• Sticky, Smooth, Active Nav (css-tricks)
• CSS @media Rule (w3schools)

Reference Site

Useful Source Code

If you want to create a navigation bar located on the left side of this page you see now, check out this article

1. I'll show you a part of my html code

                   <nav>
                     <ul>
                       <li><a href="#part1">part1</a></li>
                       <li><a href="#part2">part2</a></li>
                       <li><a href="#part3">part3</a></li>
                       <li><a href="#part4">part4</a></li>
                       <li><a href="#part5">part5</a></li>
                       <li><a href="#part6">part6</a></li>
                       <li><a href="#part7">part7</a></li>
                       <li><a href="#part8">part8</a></li>
                       <li><a href="#part9">part9</a></li>
                     </ul>
                   </nav>
                 

2. And this is my JavaScript code

                   let mainNavLinks = document.querySelectorAll("aside ul li a");
                   let mainSections = document.querySelectorAll("article section");
                   
                   let lastId;
                   let cur = [];
                   
                   window.addEventListener("scroll", () => {
                       _.throttle(doThatStuff, 1000);
                     });
                   
                   window.addEventListener("scroll", event => {
                     let fromTop = window.scrollY;
                   
                     mainNavLinks.forEach(link => {
                       let section = document.querySelector(link.hash);
                   
                       if (
                         section.offsetTop <= fromTop &&
                         section.offsetTop + section.offsetHeight > fromTop
                       ) {
                         link.classList.add("current");
                       } else {
                         link.classList.remove("current");
                       }
                     });
                   });
                 

3. These two lines are the code that connects the navigation and the specified part

                   let mainNavLinks = document.querySelectorAll("aside ul li a");
                   let mainSections = document.querySelectorAll("article section");
                   

4. And in this part, the number is the code that adjusts the moving distance.

                   window.addEventListener("scroll", () => {
                       _.throttle(doThatStuff, 1000);
                     });
                   

5. And I understood the above parts a bit, but my understanding was insufficient to modify the formula.

How to Resize Images

My instructor designated the image as 800x600 in size and 80KB in size. I used a program called GIMP, which is a Layer-based raster 2D design program similar to PhotoShop.

1. Download the GIMP first.
2. Drag and drop images to open in GIMP
3. Use the Crop Tool on the left to cut only the part you want

   

4. Right-click > Image > Scale Image Then set the image size and quality and press the scale button.

   

5. Right-click again > File > Export As Specify the location and extension to save the image. (I saved almost all files in .jpg format.)

   

6. Use the scroll to reduce the capacity to the desired size.