hello this is a quick tutorial for integrating git and github into your workflow with visual studio code this tutorial will get you up and running i'll dive into more git details with future tutorials we need to start by installing git and vs code see my notes below this video for skip ahead timestamps if you already have these installed to install git we need to go to git git dash scm.com once we are there you can see the site identifies that i'm on windows and offers the download link for windows if you click downloads it will also offer mac os and linux options installing git will also install git bash which is a terminal we will use with git it can be used on its own or inside visual studio code i already have git installed pause the video install git on your machine and then we'll walk through the next part okay you've installed git and you're ready to now install visual studio code we need to go to code dot visual studio dot com and on the visual studio site we once again see it identifies that i am on windows and offers that download if you're on mac or linux there's an other platforms link and you can see that visual studio code is available for windows it's available for linux and available for mac if you haven't installed this already pause the video download and install and we'll come back and get started all right you've installed git and visual studio code and we're ready to get started i've created an example project folder we'll open the folder which is empty right now if we right click in windows we get the option to open git bash here get that on the right screen there it is and we have a terminal window open in git bash and we could use it just like this but i usually use get bash inside of visual studio code so we can type exit or x out and close that window and we'll open visual studio code and when you open visual studio code you can go to the file menu choose open folder and you see the key shortcuts here as well that you could use once we choose open folder browse to your example project folder and select that folder the folder is now open and you can see in the file tree menu on the left here's the name of the example project and we have a welcome screen over here we can close the welcome screen in the example project folder you see these icons pop up when i move the mouse over let's choose the new file icon and quickly create an index html file once we have our html file i'll just use the image shortcut and quickly put some html here and ctrl save to save the file and we have our basic html file and we're ready to start working with git now we're ready to start working with git and the first thing we need to do is go to the terminal menu choose new terminal you can see the key shortcuts for that as well once we do that a terminal window will open at the bottom of the screen you can adjust the size and you have a drop menu here and you can see it says i have two bash terminal windows open i can choose one or the other and click the trash can to kill one of the windows you probably only have one window when you open yours from the same drop menu there's also a select default shell option let me go ahead and choose that and you can see we can choose a command prompt i also have a windows powershell option or git bash and i always use git bash as my default terminal shell okay so what we want to put here to get started with git is the command git init which stands for initialize and hit enter once we do that you may or may not see a get folder a dot get folder actually that shows up based on your settings that may be a hidden file you can also see that our index.html file turns green and it has a u beside it we can see what all of that stands for i'm going to expand the window just a little more by typing git status you can see it says we're on branch master which we'll get more into branches in future tutorials says no commits yet untracked files and it shows our untracked file which is our index.html file and so far we haven't done anything with it however if we type git add and we could type the specific file name or if we had more changes we could also just type a period which means all and hit enter and now if we check our git status once again you can see we have a new file and it is in green here in the terminal and when we look up at our file tree the file name is still green and there's an a for added changes to be committed we have not yet committed so the next step with our file is to type git commit and then dash m because we want to leave a message usually some type of meaningful message message about what we changed in the file here we'll just type first commit hit enter once again and now i'll type git status one more time you see we're still on the branch master and it says nothing to commit working tree clean and when we look at our file in the file tree menu it is now changed to its normal white color it has no letter beside it and that means our local repository in git is up to date with the current changes in our file now let's change our code we don't really have anything in the body of the html file so let's add a paragraph and just say this is a paragraph and we'll save this file i'll usually use ctrl s key shortcut and now that we have saved our file with the changes you can see the color of the index.html file changes once again it is now kind of an amber color and it has an m beside it let's check the status and it says yes our file has been modified it's once again read here in the terminal and it is not committed change is not staged for commit the first thing we need to do before a commit is to add our file so once again git add i'll just type the period for all and now we use git status again we can see it is green in the terminal it's still amber here with the m for modified it still says modified in the terminal and it says changes to be committed type our commit command with m for message and we'll put added paragraph hit enter and you see one file changed three insertions one deletion what did we do previously these two body tags the opening and closing were on the same line we had nine lines of code and we inserted this paragraph as well so we added a line of code there and we added a line of code here and then i think i went down an extra line and then i backed up and so it added a blank line and then i deleted that line but whatever changes you make it will track and each insertion is a line of code and you can see one deletion as well and now if we check our status we should be up to date and the working tree is once again clean now let's link our project to github which is an online repository our local repository we're managing with git and we want to send our repository a copy of our repository essentially to github which is an online storage facility if you will to store our code and share with others now let's get started with github the first thing you need to do is go to github.com and sign up for an account after you do that you're ready to go you can get into your settings and put in a little bit emoji like i have or whatever else you want to do but that's pretty much all you need to do to get started is sign up for a free account you can see this is my username and here we have our repositories listed right under that and what we want to do is click new to start a new repository and now you can see it has create new repository it shows the owner account and now we need to name the repository and i'm going to name this git dash example dash project and we don't need to put a description that's optional we'll set this to public so anyone and everyone can access it we do not want to start with a readme or anything else we really don't need to change anything all we need to do is name the project and we click create repository at the bottom it'll take just a second and now we get our page back that the repository has been created our first option it says is you if you've done this kind of thing before it gives you a little tip here or you can create a new repository we already created one on our command line that is our terminal and since we already created one it says or push an existing repository from the command line this is the option we want since we already created our repository so let's copy the first line i'll highlight it and choose control c and then we come back to visual studio code and let me make the terminal window a little bit larger and all we need to do in visual studio code in the terminal is right click and it pastes that right in and i'll hit enter then let's go back to github and copy the next line the first line actually linked our local repository to the remote repository the second line that i'll copy now is going to push our code from our local repository to github and we'll do the same thing just click here in your terminal window right click and it copies the line in hit enter and now it is pushing our code to github and in just a second we'll get a reply here we go you can see what all it is done and we're finished we have linked our code our local branch is master and the github branch is origin or the repository i should say it's not a branch on github at this point we just have our local branch master and we'll get into branches in the future right now we have created a local repository we have linked it to github and sent our code now let's look at some changes that happened in github we've created that repository come up to the top and click the name of our project and now we're in the repository on github and we can see our comment here our commit comment added paragraph we made that change a little while ago and it keeps track of the time when i made that change and we can click the file and actually see the contents of the file so now let's come back to visual studio code and let's add another paragraph in our index html file i'll just put this is a second paragraph save that and now you can see our file color changed once again in the file tree and it has an m beside it for modified now let's add a second file i'll just call this page two dot html and instead of putting in the full html i'll just put in an html comment here comment for something and i'll save this file and now notice this page 2.html file is green and it has the u for untracked because this is a brand new file let's type git status in our terminal and let's go ahead and expand this so we can see just a little bit more okay we typed git status and it says yes we're on branch master we're up to date with origin master but here is what we have that isn't staged for commit yet we modified our index.html file and now we have an untracked file as well page2.html so come down here and type git add and once again the period for all we could type the name of each file and add them one by one i'll just type period for all and we'll add both at the same time check the status again and yes both of these are ready to be committed now the modified file index.html and the new file page2.html so let's type a git commit message with the command and our message is oops added second paragraph to index added second page to project and now we'll check our status again it says our branch is ahead of origin master that means we have made changes and our branch our local repository is ahead of what we have on github so our next command to send these changes to github is git push and that's what we originally did and you can see it says use git push to publish your local commits that is publishing them to github and that's what we did originally when we linked our local repository to our github and we will push this again now when i push i'll just type git push and it's going to ask for my password i didn't even ask for my password actually it just pushed the commits this may ask for your username and password depending on how you have your account set up and so it may ask you a couple of security questions before it goes ahead and pushes that data forward to github so now we've made those changes let's look back at github real quick and our repository and i'll just click the repository name again and you can see we have both index.html and page2.html and the new commit message here added second paragraph to index added second page to project and that commit message went with both files because we committed them at the same or we added them and committed them at the same time and it says just one minute ago we'll look at the code and yes we have our second paragraph here in our page two code yes it has the comment there and so that is how you link your local repository with git to your bucket on github for your project and it's also how you use visual studio code to get everything going now we'll get into more details about how to use git in future videos i'm dave and i hope this tutorial has helped you get started with git and github from within visual studio code remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time