Goal: In this exercise you will familiarize yourself with the features of the GitHub web application (web site), so that you can do some simple things entirely online (without having to make a copy on your local machine).
In this tutorial you will log into GitHub, make a copy of the starter project, make sure that you can find your project again, and edit a file within your copy of the starter project. All of this will be done online.
The instructor will create an account for you on the GitHub server. When the instructor creates the account GitHub itself will send you an email with a link to the server (at which point you should see the below page). Please make sure to check your Junk Mail folder (and any other folders designed to filter away mass emails). The instructor used the same email address that you gave to Cascadia (the one that you can change in the Student Toolbox on Cascadia's site)
If you can't find the email: visit the GitHub server's web page, and click on the link that says "Didn't receive a confirmation email? Request a new one. ". In the picture below there's a large number 3 next to an arrow that's pointing to this link. The URL for the server is listed on the main lesson page (so that the instructor can easily update a single, easy-to-notice location)
Once you've reached the login page you need to type your username into the top textbox (the one with the large '1' pointing to it - in the image below it contains the word Testy_McTest), and then type your password into the second textbox (the one with the large '2' pointing to it - in the image below it contains a bunch of dots). Lastly, click the 'Sign In' button.
If this is your first time logging in then you can
click on the link labeled "Forgot your password?" - it will send an email to
you, and from there you can pick a password. (You can also use this
link if you forget your password). If you never got the confirmation
email at all you can click on the link labeled "Request A New One" under the
'3'
Once you've logged in you should see something like the following:
You should see your username listed next to the '1' (in the above picture this is 'Testy_McTest').
In the area pointed to by the '2' you should see one or more projects
listed. Each project has a name similar to: Administrator
/ bit142_assign_1
. These are all 'starter projects' for
your homework assignments. In order to do your homework you will
download a project, modify it, and then upload your work back to GitHub.
The word 'Adminstrator' in Administrator / bit142_assign_1
refers to the account that created this project. Since the instructor
created this project it lists the name 'Administrator' first.
The word 'bit142_assign_1' in Administrator / bit142_assign_1
refers to the homework project itself. The instructor chose the name
'assign_1' for the assignment, and then put the class name ('bit142') in
front to help make it easier to track which assignment was being used by
which course.
If this is your first time visiting the web site then it would be a good idea to explore on your own for a bit. Try following the links in the left-hand column and see what each one leads to, etc.
Once you've logged into our private GitHub server and looked around, the next step will be to make a copy (a 'fork') of the starter project for yourself on the GitHub server.
Let's start this by clicking on the name of the project that we want to
copy. In the above picture this is
Administrator / bit142_assign_1
(pointed at by the '2').
After you've done that you should see something like the following:
If you want to get back to the previous page click on the word 'GitHub' in the top-left corner (next to '1' in the above picture).
Notice that the left-hand column (the box pointed to by arrow '2' in the above picture) has changed. It now shows you links that relate to this specific project. If you wanted to see all the files in this project you could click on the 'Files' link and it'll bring you to another page listing the files. It's a good idea to explore these links, just to get a feel for what's in there. Don't worry if the stuff you find doesn't make sense - just look around and see what does make sense, and remember anything that looks useful to you.
In order to make your own copy of this starter project you need to click on the button labeled 'Fork' (next to the '3').
The next page you'll see is:
Click on your name (in the above image, the user's name is "Testy McTest", right underneath the green circle icon). After a moment or two you will be brought to a page like this one:
The first thing to notice is that the full name of the next project is your name followed by the project's name. In the above picture, in the box next to the '1' you can see that the full name is "Testy McTest / bit142_assign_1".
Before we go on to the next task let's make sure that you can find the correct project again the next time you log in. This is important because you now have access to two projects: the original one that the instructor made, and your own personal project that you just forked.
Let's see the list of these projects by clicking on either 'Go to dashboard' or the word 'GitHub' in the above picture (next to the '3'). Either one will take you back to the dashboard, which shows you the list of projects that you have access to. Your list should look similar to the following:
The most important thing to notice is that you now have access to two, similarly named projects:
Administrator / bit142_assign_1
is the original project
made by the instructor. You're not allowed to change this project,
and GitHub should be set up to prevent you from changing it.Testy McTest / bit142_assign_1
is your own, personal
copy of the project. You're fully able to change this
project.Go back to your personal project by clicking on the link labeled
Testy McTest / bit142_assign_1
.
The final step is to edit a file on the server. In the left hand column (in the above picture) you should click on the link labeled 'Files' (in the picture, '2' points to this link).
You'll then see something that looks like the following:
If you want to view (or edit) a particular file you click on it's name. In the above picture, if you wanted to edit "File.txt" you can click on it's name (the '1' points at File.txt).
As an aside: if you wanted to create a new file in your project you can click on the plus sign that the '2' points to. You should then see a page that looks something like this:
In order to edit the file you need to click on the button labeled 'Edit', pointed to by the '1' in the above picture.
Other useful links:
After you click on the 'Edit' button you should see the following:
You can make changes by clicking in the large textarea box pointed to by the '1' arrow.
NOTE: For this exercise please add your changes at the END of the file so it's super-clear what your changes are.
You won't be allowed to store your changes (to 'commit' your changes) until you enter a short message that describes what your change was. You can do this by typing something into the 'Commit Message' box (pointed to by '2')
Lastly, you can store your changes by clicking on the labeled 'Commit Changes' (pointed to by '3'). In the above picture that button is dimmed because there's no Commit Message (i.e., the box pointed to by the '2' is still empty), but it will become active once you add a commit message.
After successfully committing (storing) your change you should be brought back to the page which shows you the contents of your file. You should see the changes that you made in the file.