Git, GitHub, & GitHub Desktop for beginners

[Music] if you're learning to code you've probably heard of git and github these are some must-know tools for any web developer but they're not the easiest thing to learn they have concepts that are honestly hard to get the first time around commits branches merging pull requests and other things if you're having a hard time getting git don't worry i'm going to demystify git and github i'll show you the basics step by step from installing them on your computer to tracking your code changes git and github will make your life as a coder much easier and they'll look good on your resume as well so let's get into it [Music] to start off what is git git is a type of software called a version control system which tracks changes to files what this means is that it'll detect all your code changes and you can use it to record different versions of your files at different points in time this is super helpful for developers for a number of reasons for starters having git is kind of like having a giant set of save points if you make a code change that you realize later on was a huge mistake you can revert back to an older version of that file git also makes working on a team a lot easier each developer can work on a copy of the project on their own computer this copy is stored in a folder connected to git which is called a local repository the developers can then send their code changes up to the main remote repository which is stored online and get code changes made by other developers the most popular place to store your remote repository is github which is owned by microsoft and is free to use if you don't have a github account yet you can go to github.com and sign up for a new account for free once you're signed up we're going to use the github desktop app to run github on our computer to download it go to desktop.github.com and download and install the program now i just want to take a minute to explain the differences between git github and github desktop because it can get kind of confusing so git is the actual version control software it was originally meant to run on the command line and a lot of developers still run git this way github desktop is a program that runs git on your computer and allows you to do most of the git command line commands just through a more graphical interface and a quick note i know a lot of people like using the command line to run git commands but for beginners i've always felt that it's a little easier to use a tool like github desktop so if you're already familiar with git and github you can of course use whichever tool you prefer lastly github is a website where you can host your git repositories you can also collaborate with other users and discover other open source repositories ok so back to the github desktop app once you've installed the app go ahead and run it now the first thing you'll want to do in github desktop is to sign in to your github account go to file options and in the accounts tab click the sign in button this will prompt you to sign in using your browser so go ahead and click continue with browser your default browser on your computer will try to log in to your github account so log in to github if it's prompting you to and if you get a pop-up window that says choose an application to open the x github desktop authlink make sure that github desktop is selected once you're signed in your computer should go back to github desktop and to make sure that everything worked go back to file options accounts and you should see your github username and profile picture on the right side now we want to set our global git configuration in the options go to the git tab and you should see your github username listed under name and a user's no reply github.com email under email then under default branch select either main or master master used to be the default branch on git but currently github and other places are using main as a default and it's what i use as well once your settings are set make sure to click the save button even if you didn't make any changes on this screen github desktop will automatically populate these fields when you log in but you still need to manually save them now we're going to walk through the basics of a git workflow with a test project so feel free to follow along so first off we want to create our repository go to file new repository and then in the name field write the name of your test project github repos need to be named a string without spaces so usually you'd use hyphens between words for example i'll be naming this test dash repo the description field will let people who see your repository on github know what it's all about the local path is the folder where you want to create your repository i use windows and generally put my repos in the documents github folder but you can choose another location if you prefer then check the box asking if you want to initialize this repository with a readme file this file lets you write a more detailed description about your project that will show up on github and you can always edit it later this is optional but in general it's a pretty good idea to have one the git ignore field lets you select types of files that you don't want to add to the repository i usually leave this at none and then ignore files later on while encoding and we'll get to this later in the video the license field tells people what they are allowed to do with your code in the repository since a lot of open source exists on github most people select the mit license which allows people to copy distribute and modify your code if you leave it blank your project will be licensed with standard copyright you can read more about open source licensing at choosealicense.com now once all your options are selected click create repository it may take a few seconds but github desktop should create and automatically load the new repository now let's take a look at the desktop app at the top under the menu bar you'll see another bar with information about your repository on the left is the current repository that's open next to it is what branch you're currently on we'll talk a bit more later about working with branches but for now just know that a branch is one version of the code base and you can have multiple branches then at the end it tells you that you can publish this repository to github which we will do a little later on under the repository bar is the main panel which has a left sidebar the sidebar has two tabs the first is a changes tab this is currently blank since we haven't added any files or made any code changes yet and the history tab which has an initial commit with the files generated by github desktop when we first created the repo if you have the changes tab selected at the very bottom of the sidebar is the commits panel a commit is the save point that you can create during development that includes a set of code changes that you want to track let's start making some code changes to see what happens in git in your vs code go to file open folder and select the location where you created your github repository now if you see an alert message from vs code saying get not found what this is doing is asking if you want to download the original version of git that runs on the command line you can either dismiss the alert or if you think you might use git on the command line at some point you can click the download get button to download and install it if you do decide to download and install git for the command line i'm going to show you the settings that i use for git now for most of the settings i'll go with just whatever is pre-selected but most importantly for the default editor used by git i set that to vs code instead of vim because i like vs code and the other settings is for the name of the initial branch when you're making a new repo i want to override the default branch name and use main and for everything else i just hit the next button and then finish installing now let's create a new file click the new file icon in the left sidebar and create an index.html file in the file use an exclamation point and tab to use emmett to create boilerplate html markup and then save when you go back to github desktop you'll see in the left sidebar under the changes tab will be the index.html file and there's a green plus icon on the other side this means git has detected a new file and wants to add it to your repository and track any future changes on the right panel you'll see the actual code changes that you made in the file right now we've added new code which is why the lines of code are highlighted in green you'll also see a checked checkbox to the left of the file name checking this box will stage the file which means that you want to include this file change in your next commit now let's create our commit to add the index.html file to the repository in that bottom commit section there's a field where you can add what we call a commit message describing what the changes github desktop has automatically populated the field with text saying create index.html you can keep this as your commit message or write your own there's also a larger description field under it where you can optionally write a longer description if you need to then at the bottom is a button saying commit to main this means that clicking it will create a commit on your main branch this matches the current branch up at the top of the main panel click the button to create the commit after we commit the changes tab is now empty and if we click on the history tab on the left we'll see that the commit that we just made along with the code changes from that commit you may have noticed up at the top on the right a panel that says publish this repository to github since we created this repository locally it's not going to exist on github until we publish it so go ahead and click that button to publish a window will pop up with the name of the repository and the description and there's a checkbox for if you want to keep the repo private now i'm just going to keep this private since it's not for any real code then click publish repository and it will get published to your github account let's go to the github website and see how our repository looks if you go to github.com login if it prompts you to then click on your avatar in the top right and navigate to your repositories when you see the test repo repository click on that and it'll load now let me point out a few things that are good to get familiar with in the top left is your username followed by a slash then test repo this tells you what repository you're currently in and it'll also be listed in the url in the main part of the webpage github will load the most recent commit message which should be create index.html and it has a six digit code that is the hash for that specific commit so every time you create a commit it will automatically create a random hash which is a long string of letters and numbers that serves as a unique id for that commit now if you click on the six digit code it'll load that commit and you can see the really long string in the url and on the right side going back to the test repo repository next to the hash is how long ago the commit was made then at the end is a total number of commits under the top bar github will also display the files currently in the repository which right now is only the index.html file as we add more files you'll see them all in this area and if you click on the file name github will load the actual code in that file you can even edit and delete the file right in github i wouldn't actually recommend doing this since it's better to manage your code in vs code but it's nice that the access is there we'll look at a few more things in github in a little bit but for now let's go back to vs code so far we've added files to our repository but there might be files and folders that you create that you don't actually want to track and get so let's say you're keeping some notes or something in a text file called random.txt that's in your project you want those notes there but you don't want them to be public in your repository in github desktop what you can do is uncheck that box that will make sure that the file won't be included in any commits however it can be kind of annoying to keep seeing that file name all the time so you can actually have git ignore files and folders if you right-click the file and select ignore file add to git ignore you'll see that random txt has disappeared and there's a new file that git has detected and wants to add to the repository the dot git ignore file in the right panel we can see that it contains random.txt and if we look in vs code and open the getignore file we'll see that random.txt line in the git ignore file you can ignore individual files and folders by adding each one on a separate line so let's test this out in the get ignore file add another line that says random123.txt and save then in vs code create a file with that file name going back to github desktop you can see that it has not added the random123.txt file since we ignored it now as you might imagine it can get a bit tedious to have to manually write each file name in the getignore file one thing that can help with that is that you can use the wildcard symbol when writing the file name so let's go back to the git ignore file and delete everything that's there then add wildcard.txt to ignore all text files now on github desktop we don't have either of the text files showing up and we can see the wild card in the getignore file just be very careful when using this to ignore file types in case you might want to include a file of that type in the future sometime let's make a new commit with a commit message that says ignore text files then double check to make sure that the dot getignor file is checked and click commit to main in the top right we can see the panel saying push origin what origin is is it refers to the remote repository that we published on github so when we push commits in our local repo up to origin they will get pushed to the origin repository which is on our github so let's click push origin it usually takes a few seconds now let's go back to github and the main test repo repository page we can see that it looks a bit different now the most recent commit is the ignore text files one and it has a new hash and the total number of commits has also gone up and we can see that the getignore file is now on github 2. [Music] so we've covered adding new files to the git repository another thing git will keep track of is changes made to existing files so let's see how this looks in vs code open the index.html file and let's add some content to the body i'm adding an h1 tag with some text hello here's our website and a paragraph tag saying here's some cool new content save it and let's see what this looks like in github desktop now in the left sidebar the index.html file is showing up and instead of that green plus icon that we saw when adding new files there's a yellow dot icon this signifies that git has detected modifications in that file then in the right panel we can see the new text that we just added and it's highlighted in green meaning that it's code that has been added [Music] so let's make a commit i'll make the commit message something like added content to index.html now we'll commit it to the main branch and push to origin so if we click on the history tab we can see the four commits that we have in this repo with the most recent on top and if we go back to github.com to the repository page we can see the same history up there if we click on the for commits link on the right side again with the newest commits on top and the oldest ones on the bottom git will also track if you delete files so let's test this out in vs code go ahead and delete the index.html file going back to github desktop we see that the index.html file is showing up under changes it has a red minus symbol icon to indicate that the file has been deleted and in the right panel all the code in the file is highlighted in red meaning that it has been removed so let's make a commit with a commit message saying that we deleted index.html commit it and then push to origin if we check out github it'll show the most recent commit and clicking on the commit it tells us that the file was indeed deleted but what if we realize that we really need that index.html file not to worry this is one of the ways that git can really save your life in github desktop in the history tab right click the commit where we deleted index.html and select revert changes in commit now we can see that git has automatically created a new commit saying that it has reverted the previous commit and looking at more details in the right panel it tells us that the hash of the commit that was reverted and it's added back the index.html file now if we click the push origin button everything will be back to normal in vs code the index.html file will be back and in github if we refresh we can see the commit reverting it and the index.html file is also back where it belongs now there is one more area in git that i would like to cover and that is branching and get a branch is one version of the code base and repo can have multiple branches going at the same time so far all the work that we've done in git and all the commits that we've made have been on the one main branch now if you're just working by yourself you can probably get away with doing everything on main but if you're on a team with multiple developers all working on the same code base it would be quite chaotic to have everyone working on the same branch especially if more than one person makes changes to the same file so most teams will separate work into different branches you might have one developer fixing a bug on the home page working in a branch called home page bug then there might be another developer building a new feature on the careers page working in another branch called careers each of those branches will be created off the main branch so they will have the most up-to-date code from main then they'll each work on their own branches locally when the developers are done with their work they will merge their branch back into the main branch this type of workflow is considered best practice when you're working on a team so even though in this course we can do all our work on the main branch i wanted to show you a little bit of what working with different branches looks like in github desktop in the top menu navigate to branch new branch let's give it a name of feature-1 and you'll notice under the name field is a note saying that a new branch will be based on the current branch which is main then click create branch now up at the top github desktop has the feature one branch listed as our current branch let's make some demo code changes in this branch in vs code create a new file called feature1.html to keep things simple and in the file hit exclamation point and enter to use the emit shortcut to add boilerplate html then save the file back in github desktop we want to add feature 1 html to our repo in the commit panel at the bottom we'll just leave that default commit message that they have and hit the button to commit this change to the feature one branch now in github desktop let's switch our current branch back to the main branch if we go back to vs code the feature1.html file won't exist this is because it was created in the feature1 branch and so it doesn't exist yet on the main branch git will keep the codebase files updated depending on what branch you're loading so let's pretend that we've now finished all the development work on the feature one branch and we want to deploy it to our website we need to add our changes from the feature one branch to the main branch in what's called a merge in git to merge feature one into main in github desktop first make sure that you are currently in the main branch then in the top menu navigate to branch merge into current branch and select the feature 1 branch so what this is saying is that we will merge all the commits from the feature 1 branch into the main branch click the button saying create a merge commit this will merge in the code from feature 1 into the main branch and the change will be automatically put into a new commit on main now if you load the history tab we can see the create feature1.html commit message listed as a most recent commit on the main branch now click the push origin button up at the top to update github in github if we load the repository page we can now see that the commit creating feature 1 html is the most recent commit and the file exists on the main branch one last thing to note if you're working on a team that uses github new branches are typically merged into the main branch through a feature on github called pull requests this allows other people on the team to check the code changes and approve them before merging them into main this helps to prevent any mistakes from being added so what you would do is make your code changes and commit onto the feature 1 branch then instead of merging feature 1 into main in github desktop like we did last time you would publish the feature 1 branch up to github then on github you would create the pull request so that other people on your team can review and either approve or suggest code changes if the changes are approved your team member can then merge your changes into main again this is mainly if you're on a team we're not going to be working with multiple branches or pull requests in this course but i wanted to make sure that you know that they exist because they are common practice when you're working on a team and that's it for the basics of git and github this video is actually from my course responsive design for beginners you can find out more info about it down in the description if you like these explainer type videos you might also enjoy my other video on npm in 15 minutes and as always thanks for watching and we'll see you in the next one [Music] [Music] you

Channel: Coder Coder

Views: 447,865

Keywords: web development, git, github

Id: 8Dd7KRpKeaE

Length: 22min 15sec (1335 seconds)

Published: Tue Feb 01 2022