How to organise your code nicely and safely with GitHub

To put it the short way, you don't want your desktop to end up like this.

What to Do (If Anything) About a Cluttered OS X Desktop | WIRED

A good person's desktop should look like this, nice and clean.

Best Tips to Make Your Mac Desktop Tidy & Organized - Unclutter

But that's not the only reason why you should organise your code on GitHub, here is why.

Why organise your code

Imagine you have been coding for a few weeks now, say each week you do 4 exercises, you would have 20 folders on your computer. And today you are working on something new, and you remember you have done a similar thing two weeks ago but you forget how to do it now. Now if you have organised your code nicely, you could find that piece of code easily and it takes no time for you to finish another project. But if you just have folders all over your desktop with names like untitled folder 2, it would take you forever to find what you want. Or worse, if you didn't even create a new folder and override the code from your previous exercises, it is forever gone and you will never find it.

Why on GitHub

Now your code is organised nicely on your computer, but we can do even better.

Imagine one day your friend asks you for the code you wrote the other day because they try to do something similar, you will have to go to your computer, find the file, and send the file through to your friend. Or worse, you take a photo of the code, and your friend will have to type everything again. You just wasted five minutes of your time and probably longer for your friend, you could have spent this time talking about something fun instead.

Here is another scenario, you are working on your code and you want to ask your friend a question but they are not around you. So you have to send them a screenshot of your code or the whole file. Wouldn't it be easier if there is a link that your code lives in and your friend can see the changes right as you update them?

That's why we want to use GitHub, so we can keep our code in the cloud and access it easily from everywhere. The "safely" in the header doesn't mean GitHub keeps your code safe from other people, if you have a secret, please don't put it on GitHub. By "safely" what I mean is GitHub keep your code safe in the cloud from you losing it either accidentally deleting it or your computer breaking down. One thing about coding is coders love sharing knowledge, when someone wrote a cool thing or figured out a cool trick, they love to put it online and share it with everyone, it's called open source. That's why whenever you see an error in your code, you copy the error message and google it, you can almost always find an answer, unlike the other fields like doctors and lawyers, they only share knowledge behind closed doors, which you have to spend tons of money to get into :)

So we want to share and help and get helped too, from the very beginning. A good habit and mindset goes a long way.

How to organise your code

  1. Have one folder for all your coding exercise code, give it a clear name like coding_excercise. From now on all your work goes into this folder, with no exceptions.

  2. Inside the root folder, create a folder for each section of your study. For example, we are learning HTML and CSS now, so name it html_css.

  3. Inside html_css, create a new folder every time you work on a new exercise. This makes sure we don't ever override our code and we keep a good record of our work.

  4. Name the exercise folder after what each exercise is about, and start with the date. e.g. 20230413_refugees_code_website. The reason I like doing year/month/day is the number increases with the date so when we sort the folders by name, the folders are also ordered chronologically.

Following the principles, we will end up with this nice structure.

Download Git on your computer

Download Git here, click on macOS or Windows depending on your operation system.

If you are using Mac, follow the first part of the instruction and click on the homebrew link (1).

Now you will see the Homebrew page, click to copy the command.

Open the Terminal app, and paste the command.

Hit enter and put in your computer password. Wait for the process to finish and Homebrew will be installed on your computer.

Then go back to the Git download page, and copy the command (see 2 in the picture) brew install git and paste it in the terminal and hit enter, wait for it to finish and now you have Git on your computer.

To verify Git is installed on your computer, in your terminal type:

git --version

You should see some numbers printed out like this. That means Git is installed.

Now don't forget to restart your VS Code so it knows that Git is installed.

You learned how to use command line tools, just like those hackers in the movies you saw. Good job ๐Ÿ˜‰

What Hollywood gets right and wrong about hacking

Use GitHub within VS Code to create a repo

Firstly, we want to sign in with GitHub in VS Code. , on the bottom left corner, click on the user icon (1) and select "Sign in with GitHub" (2), you will be redirected to a webpage to sign in.

You should see something like this once you are signed in with GitHub.

Now we are going to upload a copy of our code to GitHub and keep it safe on the cloud.

Open your coding_exercise folder in VS code. ( Code > File > Open)

Now you should see something like this, the root folder should be your coding_exercise folder in the red box.

On the left-hand side, click on the third icon (1) and then click on "Initialise Repository" (2)

Just like that, you initialised a repository on GitHub. And now we will upload the code. The number in the blue circle means the number of files you have updated and not yet synced with what is on the cloud. So let's type "coding exercise first commit" in the message and click on the big blue "Commit" button.

Then click on "Publish Branch" and select the second option "Publish to GitHub public repository". As we discussed before, a public repository means anyone with the link can see your code, it makes it easier for you to share your code with others so it allows you to collaborate better. Collaboration is what we love to have.

Now if you go to GitHub on your browser and on the top right side, click on your avatar and then "Your repositories".

You will see the folder show up there.

And click on the folder you will see all your files are there.

Now if we got some questions when writing code, we can simply give our friends a link, and say "Hey I think something is wrong in line 12 but I can't figure out why, can you have a look for me?"

Getting help has never been easier!

Sync your code with GitHub

So now we have two copies of our code, one on our computer and one on the cloud. How do we keep the two in sync? It's super simple too. All the changes you do inside that folder now will show up on the left-hand side, just put in a message that describes what the changes are, in this case, I updated the header to be blue so I say "made header blue", and then click "Commit".

Then click "Sync Changes".

Now go to your browser and the change is there!

How simple! Just remember every time you do a change, or after you finish your every exercise, commit and sync your changes so the copy on the cloud is up to date.


Nice work following this long post. Keep doing this and you will become Marie Kondo in the digital space ๐Ÿ˜‰

ย