- So far, we've been learning the commands
that are essential to working with Git.
In this chapter, I'm gonna show you what it's like
to work with existing GitHub projects,
so that you can download a project from GitHub,
understand what the different files are for,
and can play around with them on your local directory.
I'm not going to cover how to create repositories,
and push and pull things into GitHub.
Now, we've got an excellent course
that shows you all that.
So if you want to learn more about that aspect
of working with Git and GitHub,
check out Git Essential Training with Kevin Skoglund.
Chapter 13 has everything you need to know
about working with remote respositories.
What I am going to show you is
how to take an existing project like those you might find
in somebody's GitHub page,
and download that project into your local folder
so that you can work with it,
and understand all the files that you're going to get
when you download a repository.
We'll be working with some of the projects
that you may have seen when working
with some of my other projects.
And you can find all of my projects in GitHub
under the URL GitHub.com/planetoftheweb.
Now here you'll see a list of the most popular repositories
on this homepage.
If you want to get a complete list
of all of my repositories,
you can click on this Repositories tab.
So, let's take a look at this project called angulardata.
It's a GitHub project for a course called
Building a Data-Driven App with AngluarJS.
Now, there's a lot that you can do with this project
directly on GitHub.
So for example, you can take a look
at any of the files in the project
and explore the code that was written
to create this file.
You can also use the branches pop-up
to see how a file looked at any of the branches I've saved.
So for example, we're in the index that HTML document
that is in the Builds folder, slash, development.
We can switch to how that file looked
in chapter two, video one.
Notice that it's a lot shorter than it used to be.
Now you can see I generally name my branches
so that they correspond with the different videos
and a course.
So, these branches identify these different videos,
like Chapter 03 and Chapter 04.
And then the video number, like 01, 02, or 03.
Let's go ahead and go back into the top of this directory.
So, we'll go to planetoftheweb and then click
on this angulardata link right here.
This will take us to the top of the project.
You can also take a look at all of the files
in the different branches from this page
by using this branch pop-up menu.
You could even do things like filter the available lists
by just typing in something right here.
So, I can look at any of the chapter four videos
by typing ch04.
Now, most projects have a number of really important files.
The most important one is the Readme.md document.
It's on just about every Git project,
but it is optional.
So that file happens to be what you're seeing down here.
Notice that it's saying Readme.md,
and it's displaying this area right here
that looks like a webpage with instructions
on how to work with the project.
Now, although the contents of this page
look like HTML, the file is in a format called Markdown.
It's a simple text file with some special formatting.
Let's go ahead and take a look at that file.
So I'm gonna click on it right here.
And then, I'm gonna click on this Raw button right here.
That will show me the contents of this file.
You can see that it's a very simple text file.
And, let's open this up side by side.
This is the raw version of that Readme document.
And then this is the rendered version.
So you can see that this right here is essentially
a headline level one.
It has one hashtag right here.
And then this is how you do an image.
This is pointing to an image called hero.png.
And you can see that that file is actually right here.
And that is this image that you see over here.
And then you can see that we have a link,
this is how you do a link in Markdown.
And that shows up as this link over here.
So, the format is pretty easy to understand.
If you need to learn how to work with Markdown,
take a look at this document.
It has all the information about how you write Markdown.
Usually, you take a look at one of these files
and can pick it up pretty quick.
So you can see that this is a headline level two.
This is a list of items.
And you can very quickly display
a nice looking page in GitHub
by using this specific format.
Now, another thing that you may notice in a GitHub project
is a number of invisible files.
They usually start with a period, like this one right here.
Which means that when you download this project
into your local directory,
you're not gonna see this file
unless you use the terminal to list your directory,
or you open this up in a text editor
that has invisible files turned on.
This particular file, the gitignore file is super important.
It is a list of the files you don't want
uploaded into GitHub.
So, if we look at that file,
you can see that we have something called ds_store.
This is a file that the Mac operation system
creates all the time in just about every folder
to keep track of what is in that folder.
Another folder that is never uploaded to GitHub
is the node_modules file.
This is a set of project dependencies
if the project happens to use Node.js.
Now, this isn't just a GitHub file,
but something that you can use
whenever you're working with Git.
If you create a gitignore file in your folder,
Git will never keep track of anything inside these folders.
And that's usually something you do,
maybe, for an images directory.
You really don't want it to keep track of images
because you might be modifying those all the time.
And you don't really want to keep track
of the different versions of those files.
Another folder that you may see in this gitignore document
is an images directory.
So, let me switch back into planetoftheweb.
This is my sort of top level.
And then I'm gonna go to repositories and open up
a repository called responsivebootstrap.
I think it's towards the top over here.
And you'll notice that in this gitignore file,
I also asked Git not to track any images.
Now, including images in GitHub would make the project
a lot bigger than it needs to be.
And if you're making the project open source,
you may not always have rights to distribute the images
in the license that you include in the project.
Now, in this project, you can see a couple
of other invisible files.
These are files that allow me to keep track
of any errors in my JavaScript,
or beautify the way my HTML looks.
And it's part of the workflow I create
for something called gulp.
So, you may see many more invisible files here
when you're looking at any GitHub project.
Now, another file that's really common
on other Node projects is something called a package.json.
Now, this will help you keep track of any dependencies
that this project needs in order to run.
You can see a list of them right here.
As well as general information about the project.
Things like the version number, a short description,
and then maybe a list of where this repository is
in your project.
Now that reason that that file is really important
is because you'll always notice that
in the gitignore folder,
we're asking Node not to keep track
of this node_modules folder.
So the job of this package.json file
is to recreate the node_modules folder
when you download this project.
This will make more sense when we try to download
one of these projects.
And try to take a look at it without reconstituting
the node_ modules folder.
So, there's a lot more that you can learn about GitHub.
But this is just enough to help you understand
how a basic project structure is put together.
In the next video,
I'll show you how to clone a GitHub repo
on your local directory.