Simple repo for demonstrating git, github and how branches work.
- Clone this repository (repo), using the 'Clone or Download' button.
You can either 'Download Zip', which will save a zip file of the repo to your machine and then you will need to unzip it to where you are saving your code, or you can open using the 'Open in Desktop' option which will use the github desktop application to copy the repo to your selected location.
It is really good practice to keep all your code in a folder rather than saving repos to your desktop or downloads folder, as this will soon become confusing when you are dealing with multiple folders.
Ideally if you have been following the course naming conventions you should have a folder called 'codingcourse' that you are keeping all of your code folders / repos in.
-
If you didn't use github desktop to clone the repo, open github desktop and add the repo using File -> Add Local Repository or the + button in the top left of the application, ensuring to choose 'Add' rather than 'Create' from the top options in this menu.
-
Open up Atom and go to File-> add project folder, then find the magical-doggo folder and select 'open'.
-
Open up your windows file explorer / mac finder and navigate to the magical-doggo folder.
-
Open up magical-doggo/index.html in Google Chrome. You should see a page that contains no doggo. If you look in Atom and in your file explorer, you should see that the only files are
index.html, a css folder and within thatstyles.css -
In github desktop, there should be a dropdown in the top left that says 'master'. You should be able to select this dropdown and choose the branch named 'cast-the-spell'.
-
Refresh your page in Google Chrome and you should see a magical doggo has appeared, as if from nowhere! If you look in Atom and in your file explorer, you should see that a folder named 'images' has appeared that contains a picture of said magical doggo. You might also notice a few changes to the content of
index.htmlandstyles.cssif you have those files open. -
Switch back to 'master', refresh Google Chrome and the doggo will vanish! Look at the files again in Atom and your file explorer and see what the differences are.
-
Repeat as much as you like until you get bored of magical doggos.
Hopefully this small demo will help you understand how branches and git version control works. It can seem very strange at first as the files are changing, appearing and disappearing, but the purpose of this is to allow the core code (master) to remain unchanged while new code is created or original code is altered in a separate area (branch). This code can then be added into or replace parts of the original using the merge process discussed in the class.
Any questions as always just post them in the CF:G Slack, Happy Coding!