A beginner's introduction to Git and GitHub | Nash Vail | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

A beginner's introduction to Git and GitHub

teacher avatar Nash Vail, I write and draw and design and code.

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (1h 33m)
    • 1. Introduction

    • 2. Setting up Git

    • 3. Introduction to Command Line

    • 4. What is Git and Setting up the class project

    • 5. 5. Git init, add, status, diff, and The Staging Area

    • 6. 6. What is Vim?

    • 7. Git checkout, commit, log, and Working in Chunks (1/2)

    • 8. Git checkout, commit, log, and Working in Chunks (2/2)

    • 9. Git branch, merge and The concept of branching

    • 10. Understanding merge conflicts and how to resolve them

    • 11. Remote repositories and uploading project to GitHub

    • 12. Publishing site on GitHub pages

    • 13. Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This class is about Git, the most popular version control system in the world. Students will learn some of the most used and important git commands and the concepts behind them. They’ll also learn how to upload their code to Github and how to host a site using the free GitHub pages service.

The whole class revolves around the step-by-step integration of Git in a provided project. By the end of the class, each student is expected to have their very own website hosted at a real URL that they can share with friends, family, and followers. No prior programming experience or experience with Git is required to take this class.


Class Breakdown

  1. Introduction: A little bit about who I am, and what led me to learn Git, and how it has helped in my career as a software developer.
  2. Setting up Git: In this short video, you'll learn how to setup Git on your computer in accordance with the operating system you are on. It's way simpler than it sounds.
  3. Introduction to Command Line: In this video, you'll understand the concept of CLI and what's the difference between CLI and GUI. You'll also learn how you can operate your computer much faster using the terminal and the basic commands to do so. Since Git is primarily a CLI tool, this video will warm you up for the things to come.
  4. What is Git and Setting up the class project: The class is heavily relied on working on a project to give you an intuition about Git. In this video, I tell you how to set up the class project and also what qualifies as a successful project submission. We'll also to try to get a glimpse Git in this video.
  5. Git init, add, status, diff, and The Staging Area: We'll start off with the most basic git commands and how to use them in the project. In this video, you'll also learn the concept of the staging area and how it allows you to undo changes and gives you the freedom of creativity and exploration in your projects.
  6. What is Vim?: In this very short introduction to vim, you'll understand what it is and the very basic usage of it. Since we'll be encountering vim in the rest of the class that follows. In this video, you'll get yourself comfortable using it and save yourself from being confused when it shows up.
  7. Git checkout, commit, log, and Working in Chunks (1/2): First of all, in this video, we'll understand how working on software projects can be managed by splitting the whole projects into chunks. Then we'll see how Git helps with this approach. In this video you'll three more of the most commonly used git commands. And also, some shortcuts.
  8. Git checkout, commit, log, and Working in Chunks (2/2): As a continuation of the last video, in this video, you'll get more comfortable committing code, look at how commits are organized, and understand when is the right time to do so and also look at some more shortcuts for long commands.
  9. Git branch, merge and The concept of branching: You'll understand what branching means and when to do it and how it keeps your main codebase free from errors and unintentional changes. You'll also learn two more of the most common Git commands.
  10. Understanding merge conflicts and how to resolve them: Merge conflicts are a common occurrence, in this video you'll learn why they occur and how to resolve them.
  11. Remote repositories and uploading project to GitHub: You'll understand the concept of remote repositories and also you will upload your code to your GitHub profile using the command line.
  12. Publishing site on GitHub pages: You'll be finally publishing your site to the web and getting a unique URL to your website. This is the class, when you're once done you can take a screenshot and submit it.
  13. Conclusion: Just thanking you for taking this class, hoping you learnt something and where you can reach out to me.

Meet Your Teacher

Teacher Profile Image

Nash Vail

I write and draw and design and code.


Hello, I'm Nash. I am a Developer, Designer and I absolutely love teaching. I have been a professional in this field for over 6 years. I have gotten chance to work with some great companies and equally awesome open source organizations including the jQuery foundation. I am the co-founder and head of design @ Devfolio

I am a huge proponent of sharing knowledge and I try to do that through my blog and other sites like Smashing Magazine where I have a few articles up. Here in Skillshare, my goal is to share the same knowledge through videos.

If you found what I taught valuable, give me a follow, tweet to me, I am always up for a great conversation. Happy Learning!

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hey, guys, I'm Nash and this is my first ever online class, and I'm very excited. Now in this class, I will be teaching gift. And before I even go ahead and start to talk about the class, I want to talk a little bit of very little about me. I'm national. I'm a developer and a designer. And I'm 1/4 year computer science undergrad at my university In two weeks, I'll be out of here and it's It's really okay. Okay, Okay. I guess that's enough about me now of this class. This class is about get. In the past four years, I've got in some really great opportunities to work on some really great projects and that it's impossible to one thing now. And I'm being totally honest that it's really impossible to think right now that have little thing I would have been able to complete those projects without no we get. And I consider myself lucky that I discovered and learned get at the very beginning of my career as a as a software developer and as a programmer. After learning get really changed my approach to which riding sulfur and how it's structured the whole organization and and I've really changed. My life is a sulfur developer, and I am not even over exaggerating. And as for this quest, when this class to do the exact same for you to take this class, you don't need to know any programming language. First of all, you might just be starting to learning programming. Or you might be a month or two into it, or you might just started a week or you're just cramming to learn programming in the future . It's all right. You don't need to know anything to take this class. There is no proficiency level requirement. There isn't. Our anyone can take this class. And I'm really excited to teach this class. So I'll see you in the first video of this class. Next. I'll see you there. 2. Setting up Git: now, before we even begin with the class, there's something very simple and one thing that we need to take care of the just installed Get. Now I'm assuming that on your computer you're running either of the three most popular or most widely used operating systems, which is either Mac or Windows or Lennox. And we'll see how we can set up. Get on each one of these machines, starting with symbol one, which is Mac. If you're on a Mac like me, Congratulations. You don't have to do anything you already have get is told on your system. And who confirmed that What I want you to do is to have a murderous spotlight by clicking in this button here and type in terminal and click enter. And once the window was wide window or a blank window appears, I want you to type in this get double dash and version and then want you to press enter. Now, this text fill this blank screen may look alien to you for announce, but believe me, just hang on with me for this video from the next one. Everything is gonna make sense to you just time and get version, press enter. And if lying like this appears, which probably would, which means that get is already is told in your computer and you're already and set up to follow the class. Now, if you're on Lennox, what I want you to do is to head over to your terminal and type in this command, which is Soto apt. Get install git, and once you have tied this in press, enter and get will be installed on your machine and you'll be ready to go. That's all you need to do now. If you're on Windows, it's a slightly very slightly lindy process, then when compared to the rest of the operating systems. But it's pretty easy anyway. So the first thing that you need to do is from your Windows machine had to a Web browser and head to the website. Get dash SCM dot com, and once you're here, you're firing a download button right over here. I'm on. I'm visiting this site from a max, which says download format, but if you're visiting it from a Windows machine, it'll say down the for windows. So you now know that though the XY file and followed the installation visit. The only thing that you have to keep in mind while installing is when a window like this appears. You want to choose years, forget from get bash only and leave rest of the options as default and complete installation. And once you've completed the installation, you'll find this icon on your desktop. The only thing that you need to remember now is that every time, any time in the class, I say Loans terminal, what you have to do the students were using Windows is to double click and launched Get Bash and that is it for this video. It's a very simple process. Once we have this set up, we can move along with the class and I'll see you in the next video verve. We will learn the basics of command line. 3. Introduction to Command Line: welcome to this video. Guys in this video will be talking about some very basic commands. And if it this is the first video ever off our first introduction to command line ever. Now, some of these were going to sound alien to you. But stay with me towards the end of this video, I promise everything is going to make a lot of sense to you. So without wasting much time, let's get started. Now, before I even dive into writing some commands, I want to make sure that you know you understand the difference between what a cli in water is. G U I. Seelye is what is called a command line interface in July is graphical user interface come outta? Interface is basically a screen with a bunch of text. What this means is that to interact with the computer using a command line interface, what you have is a screen and a flashing cursor, which is used to enter commands that a computer can execute. On the other hand, the graphical user interface is is another way of telling the computer and do think it's still fighting commands. You have a cursor and menus in which the tasks are listed like these from a menu, and you choose from the menu and tell the computer to do the task. For example, with operating system, the MAC operating system I'm using right now has a graphical user interface in which I can go in so like things from the menu to make the computer do that task. But if it was, you know, an old in time and I was using my old computer with a combined one interface, I would have to write the same commands. Type it out press center for the computer to execute. And that's the difference between Kamala interface and graphical user interface. Now I might have made command line interfaces sound very primitive, uncool and, you know, very old. But in reality, come island interfaces are also very fast, powerful and efficient. And the best part is that you look really cool using it. So let's not waste much time and hopped right into the command line. Interface is ever present in your respective operating systems. If you're in Windows, you can go ahead and fire up, get bash. If they are on Lennox, you can fire of your terminal any Foreign Mac, you had to your spotlight in 10 anti Terminal. And there you are, inside your command line interface, where you can write commands and make the computer execute those command. Now let's move on to a very first command, which is PWD, which stands for print working directory. You see your computer has a directory structure or, if you'd like to call the Fulda structure like this, in which you have a folder at the top most level, and that folder has a bunch of folders and files inside. If it and these folders have more folders and files inside, if it now these borders could be or desktop documents pictures in all that stuff. But whenever you launch into your terminal your terminal, your computer polices you at the top most folder, which is often referred to as the root folder. So since I have just launched into my terminal, I am at the root folder off my directory structure and to get to the path, you know, to get the path off that road folder. I can type in PWD to print the working directory and press enter, and this will show the path of the root folder, which is in my cases, users slash the user name of my computer, which is an Asriel, too. Now, what I'm going to do is I'm going to copy this path. Breast Command, See? Going to my finder. All right. And then I'm gonna go into go and click on go to folder inside that folder. I'm gonna go ahead and paste that path. Click. Go. Now, I'm inside my root folder right over here, And I'm also inside my root folder in my command line interface. But you might say that. Hey, the root folder. Hands on these folders, as I can see in the graphical user interface on the left. But in the command line, there's nothing. How can you say that? You know, we're in the same folder. Well, time for our next command, which is l s. The task of ls is to print whatever is present inside a particular folder. Now, since I'm Assignment Root folder, I can type ls and press enter. And this will list island all the files and folders present inside the road folder, which are the same as dust out documents down those as you can see in the graphical user interface knowing in Thai Palace and press enter. And there you go the same folders listed in the command line interface as the graphical user interface Isn't that cold? Now, before I move further into explaining more commence, I'm gonna explain what our flags flags are flecks of parameters that passed to ah, particular command to change the to change the way they behave or change the representation off the output ticket, for example, the L s command can take in, ah, flag, which is dash l and press enter. And this will change how the commands how the output is represented. For example, Dash L Flag tells the L s command to print everything, bring whatever is inside that folder and a list format and set off, you know, printing it like this and that. And that's what flags are. I just want to keep that in mind that there is something called flags to now. If your terminal gets to clutter, you can always typing clear and press enter to get everything away. All right. So far we have looked at you know how toe print the directory we are in and Chris ls and tight Ellis do print whatever's inside that directory, so I can type ls again. All right. Pretty great. Now, the next thing that I want to do is I want to go inside my desktop folder now in graphical user interface again. Double click and well, I'm inside Modesto folder now in command line interface. What you do is use the command CD, which is to change directory type in CD and the name of the folder. I want to go inside, typing desk top and press enter. And now I am inside the desktop a folder as again, we just represented by stop here. And also look at what happened to the title bar of this window which says that stop again and I'm inside Modesto folder, Which means if I type l s, it will list how the files that were inside the desktop folder which which is this justice ? One single image. So let me typing ls and press enter. And yet there is that image. Great, isn't it? We're learning how to navigate through our computer using the command line interface, and you're seeing in paddle on the left as how the same thing can is done generally in the graphical user interface. Pretty cool. Now we want to create a new file in my desktop. To do that they would command that is used is touch. So to create a new file ankle, simply writing touch and the name of the file. And I wanted to file to we called, filed out. Txt and I can press enter And there is the file created on my desktop. Pretty cool, isn't it? On the next command, which is our AM command, which tends for which basically the task of this command is to remove something, remove a file or delete a file, for example, for under delete file out takes t I can type in r n and file that takes T And as soon as they press enter, keep an eye over there that this pile will vanish, press enter and boom, it's gone. And I have to be a little careful here because when you do eat something using the command line, it doesn't go into the trash. It is completely removed from your computer. There isn't a restoring or anything. So just, you know, just a little careful here. All right, I'm gonna type and clear again to, you know, make my terminal clean, which is pretty good now what I want to do. The next command, which is in kiddie ir, commend them could. The Air Command is used to create a new folder, for example, graphical user interface. If we want to create a new folder, I can click New folder and give it a name. Let's let's call this name coat. Let's call the floater coats and, well, there is my new folder. The same thing can be done using the command line interface using the M K D. I. R Command would stand for make directory on Let's call this folder codes to So I can write taken typing and can, er, Cotes du and keep it I on your left and the graphical user interface. As soon as the press enter, a new folder is created. Ain't that court now? What if I want to go inside that folder? Aiken typing CD code to and and I'm inside the full dirt yet. Oops, I mistyped the main. It is code students taking typing codes to, and now I'm inside that folder, as represented by the text here and the Texan get on the title box. Now if I want to do that in the graphical user interface, I have to double click. And there I am inside that folder. Let's go ahead and type in on and create a new file inside the coach to directory or folder . Will it use the command touch and we'll call it file? Txt and boom! There is a file right there. Nice. I want to go back a level. For example, if I want to go back, I can press back button in my graphical user interface and go back. But if I want to go back and my command line interface at a CD and two dots, which means one level up the parent off the folder and currently in I can press, enter and notice in name how the name changes here you can press center. I'm a desktop again. Now I want to delete codes to okay, I want to delete that folder. So to delete something is RM command so I can write are in in the name of the folder am alleged doing. But as you see all went into an error. Now RM is used to doing delete files, and it does a pretty good job there. But when you want to delete a folder, you have to pass in the flag as we learned what flags are, which is RM. Dash are and write in codes to like a press enter and the folder is gone similar. If I wanted to leave the codes folder, I wanna tap in, Nash are and Coats, and the folder is gone as well. That said, Guys, there we are. We just executed a bunch of commands and you learn how to navigate through our computer using the command line interface. And the whole goal of the video was just not to make you a little comfortable with using command line interface, because at first it looks really daunting to use, and most people avoid using it. But if you're going to go ahead and use, get in your projects. It's very important that you get familiar with the command on user interface, so I encourage you to practice some of these commands on your own for 10 minutes or something and get a little familiar with everything. In the next video, we'll talk in a little bit about get and how to set up your class project and what you need to submit for this class 4. What is Git and Setting up the class project: What is up, guys, welcome to this video. And as the title suggests in this video, I will be explaining to you what it is and also talking to a little about the class project . Now, I'd like to make one little thing clear here that I have lied. To be honest, I will not be able to explain Get to you in this video. I'm sorry you need to realize that get is a very practical thing like I can try and two minutes or three minutes to give you a definition of get and try to tell you how it's important. But it will all be a total waste of time. Because, as I said, it gives a get is a very practical thing. And unless you use it, you won't realize how l helpful it is to you and how it him smooth them. Your process of writing software, what we'll be doing in this classes will be emulating working on a project, and we'll see how get fits there. And as the class progresses, I'm gonna leave it up to you to realize for yourself how get is healthful and how it can help you and building better software. Now let's shift our discussion. Since this is clear that explaining, get in two minutes. That's not happening. So let's shift our attention towards the class project. The first thing that I want you to do is to go ahead and download visual studio code. And don't worry, will not be writing any cold in this class because I realize that some of you might just be starting to learning programming. And I don't want to rush your process of doing that. Take your time. You know, relax and learn at your own pace. In this class. We're not going to write any code, believe me. And once you have downloaded visual studio code, I want you to go ahead and download the class project from the link provided in the section below. Once you have downloaded that project, you'll have this folder on your desktop or wherever you downloaded it. I want you to double click and go inside the folder they'll find through two files and a folder, which is images I want you to right click on the in next of Asian folder, go to open with an open with safari. No, what are we doing in this in this class is making changes to this. This is very simple website and miss. You'll be adding your name instead of coats your name, your twitter, your instant gram, your rep cider or any other language. Also, be putting a little bit about yourself here, and you know, making some little changes will not growing any coat, but just writing links at words. That's clear, and once this is done, will go ahead and host it using Get Help Agent, which is a free service, and we'll talk about later towards the end of this class. So this is the whole project and ones you're done with the class and and once you followed the class properly and worked on the project properly. What you'll have is a very personalized version of this side with your own favorite color, your own name your about and your links their social profiles up and running at a girl, and this euro will not be filed. Slash users. Whatever. It will be a really oral that anyone can visit from any Vera and your final class submission will be a screenshot will be a screenshot off your site and the URL that will host, which will be get help bureau as well. See, I don't want you to rush there and think about that right now. We'll slowly get to it and you'll understand everything. So a screenshot off your website house said with the earl will be the final project submission. That's great. In the next video, we'll start working would get right away. So I'll see you there. Get by, guys. 5. 5. Git init, add, status, diff, and The Staging Area: All right. Welcome to this video. Guys in this video will be writing our very first get commands. All right, I know you're excited. I'm excited too. So let's go ahead and get started. So far, I'm sure you have downloaded the the class project from the link in the section below and have this folder on your desktop. The next thing that I want you to do quickly is head to your terminal just like that. And then I want you to navigate to your nest stop or any convenient location that you want to build a project. And for me, it's my desktop. So I'm gonna go ahead, right? CD desktop, Just like that. And now I am in my desktop. What? I'm in Monday's stop. I'm gonna go ahead and create a new folder using the M kiddie IR command. And I'm gonna call this folder Nash Skill share project. How about that? And once that clicked, enter and created a new folder on my desktop. The next thing that I want to do is I want to navigate inside that folder against Aiken Go CD Nash Skill Usher project. And now I'm insight. That folder. Okay, great. The next thing that I want you to do is go ahead and double click and open. You're the project, the project folder that you downloaded from the link. And once you have that open, I want you to select everything that's inside there, press commanding to select everything, or just drag and select everything. Right. Click and copy three items, and I want you to go to the folder that you create it. For example, the national shirt Project folder. I want you to go inside if it and paste all the items in and that's it. You're set up for the rest of the video. Okay, The next thing that I want you to do now is that to make sure that you're inside this folder and to confirm that all the files that you copied or inside the folder again I'm gonna write ls and look at it. And, well, pretty good. All the files that we copied are inside the folder. Now it's time to run our first get command. We use this command toe initialize, get in our project, which means basically to start, get off and to tell the computer or to tell get for that matter that Hey, I want to use you in this project. And to do that, the command is get in it, which is get initialized. And once the press enter bam within a split second I've got the message was says, Hey, rehab initialized an empty git repository, which basically means now you can go ahead and the use get in this project now for our next get command. I know it's too quick going from one command to another. But the first command was very simple command, which is just turning get on in this project so that we can use rest of the get features and rest of the git commands that are there. So the next get command that I wanted to run is get status and bam something. It's printed. We'll get back to it. But first of all, I want to show you something. No, I confessed command t and create a new tab inside of determine all. And I'm gonna go ahead and head to my desktop first of wanting to go back and exit out off my this folder. So I'm gonna cd dot dot and we're back now. These air Two different terminal tabs so they don't affect each other. OK, now I'm gonna go ahead and create an empty folder using em. Today, our I'm just gonna call this folder temp folder, and I'm gonna go ahead and navigate inside my temp folder and trying to run a get command, for example. Get status. Let's try to run, get status and bam! We get a never says not to get repository, which basically means you cannot run get commands inside this folder. This is because we didn't turn, get on or read it and set up Get inside this folder by using the Get in it. Command. Not so I wanted to show. I'm gonna go ahead and exit out of this. But before we do that, I'm also gonna go ahead usar Marende delayed the temp folder. That's it. We're done here. Now let's concentrate on this part here. I want to do ignore The 1st 2 lines will get to those concepts later in the class. But right now I just want you to go ahead and focus here, which says that says untracked files and a bunch of filings which is basically all of the funds that we just pay step inside. This is the new folder that we created, isn't it? And get a saying that, Hey, I you can use me or I mean, you can use get inside this folder. But I'm not tracking these files. And the first question that might occur in your head is why even track files? One thing to realize here is that at its core, get us all about tracking changes in the files as a piece of software progresses in its development cycle and tracking those changes. It's sort of important, you understand, because tracking changes in the source code makes the process of writing and building software more robust, smooth and dependable. Because when you're tracking changes in the source code, you know what changes produced. What effect in the software the software he could be ah, website ah mobile app or window Mac clinics, app or anything that you're writing that runs on a digital device. You can consolidate a bunch of changes that were directed towards the desired outcome, for example, change of code and several different files to create a new feature in a software, as we also see in our class project. It also makes collaborative development possible, which means a number of people working on the same project. It's possible s keeping track of changes means we can know that what changes produced what effect and also who produced those changes. And all of this tracking makes the behemoth and complex task of writing software more manageable and organized. All right, Loops. Looks like a press, a bunch of keys there. Let's ignore that. And now, since you know you haven't a top level idea off, why keeping track of changes matter? Let's go ahead and tell. Get to track those files because currently there are untracked. So let's go ahead and clear our terminal and I'll Lauren get status again to get a more clear view of everything. All right, we're ignoring these two, and right now what we're seeing is get isn't tracking those files. So to tell yet to track those files is the next command that you need to learn, or the third command so far is get ad and we tell, get to trying to file by giving it the name of the file that we want to track. For example, blind right now, Let's say we want to track styles Nazi SS so I can write that and press enter. I'm gonna go ahead and run, get status yet again and bam! Now it is now it says now. It says a bunch of things that you might not know already, and we'll get to that in this class later. But right now the thing that you'll notice it says new file stance, not season. And and it's in greed, which means it's being tracked. And we still have untracked files because we only wrote get at styles, not CSS. So the rest of the files are still untracked. Now there's a shortcut that you can use to tell get to track all the files instead of going a going ahead and writing the name of the files one by one. All I can do is to go get ad and dot, which means tranq everything that is present in the current directory. I can press, enter and run, get status again, and now everything is being tracked. Isn't that cool? Now I want you to focus on this word right here which says onstage, No logically toe on state something, that thing needs to be staged first, right? But we didn't stage anything. Diary. Of course we did get ad. There is a concept which will be getting into within a second. There's an abstract concept of staging that is present and get and we wouldn't get at it. Basically stages the file, which means, you know, it adds tells Kit to track those files or, in another words, to stage those files. Now, look here. When we copied our files inside are working direct treatment, which means art folder. We copied our images folder just like that. We copied our index dot html file Just like that in style inside our folder and re copy or styles not CSS file. Okay, pretty normal. Until now. Then we initialized get using the gettinit command, which means we can go ahead and use Get inside our project folder. So we initialize get But when we initialize get using the gettinit command and ran get status wasn't tracking those files. So we ran get ad and what get added did is staged all the files so images is now staged index dot html is now staged and styles not CSS is now staged because we ran get at and we added all the files to a staging area which is shown by green when you run our status when we run to get status command. So all these files, the green ones, have been staged? No. Once the point of staging those files. Now what you need to understand is that we have two different versions of file one in our working directory and one in our staging area, which means if we make changes here, this version of file is not touched at all. So let's go ahead and do that. Next thing that I'm going to do is go ahead and open my project. So I'll go there and this is my project. I'm going to go ahead and open both of these and visual studio code, which I believe you already downloaded. Pretty great. Now I want you to go online number 15 where it says your name, and I want you to edit it and to look at the changes as we edit this. I also want you to go ahead and write like and next on HTML and open open it in safari, just like that. So there we have it. OK, now, the next thing that I'm going to do is go ahead and put my name there. Let's go ahead and put my name, which is Ash mail. Oh, put that Fresca man s to save that. I'm gonna go into my browser Press command are to reload. And, you know, we made the changes now as discussed before the changes that were making we Onley have access to make changes in the working directory. The staging area is safe, which means I just edited the index dot html file in my working directory. I've heard my name there. Whatever my name is Nash and the staging area version of files still has your name instead of Nashville. Okay, that that might sound a little bit confusing, but let's go ahead and do that again. Let's go ahead and make everything clear. Now, remember that I made changes. So the index dot html file here and wrote Nash rail right, So I can go ahead and run the command, get status again, and now you will see get is tracking the changes And because get this tracking the changes that can tell me the file that was modified witches index dot html Pretty good, isn't it? Pretty good. And now what I can do more is look at the changes that I have made. And for that of the command is get def and the name of the file. I'm want to look at the changes I have made in. For example, for me, it is the next of HTML. So it is. Get def index dot html now. As soon as I pressed, enter bam. Sure, it is the in red. It says this line was minus, which means this line was removed and a new line was added, which is plus Nash Rail. Now what get if Dawes is It sure was you. The changes that are present between the final letters in your working directory and the file that is in your staging area. The staging area of words enough in next. Today's Tamils still has your innate rhythm, whereas it working directory I have replaced your name with Nash Rail as the get Def Command shows me just like that. Now imagine working on a large scale project and imagine how helpful it will be when you can see the changes that you have made since the last time you staged a file in this video , we learned Forget commands. Get in it to initialize. Get in a project, which means now I can use get in that project get ad, which is to stage the files and tell Get to track those files its status to look at the status of the changes that I have made and get def to look at the changes between the files that is present in my working directory and staging area. Now there's 1/3 box here, too, and we talking about this third box in the next video guns into this video. The first half off a full video and this video we talked about working directory, staging area and forget commands In the next video. We'll tie it all together with a couple of new commands, and we look at commenting and will also decipher or I'll tell you or unravel to you what the third boxes. So I'll see you then 6. 6. What is Vim?: before we move on to our next set of get commands. I just wanted to make a quick short video introducing you to them because it's definitely gonna pop up when we're learning the next step next set of Get Commence and Themis something that's that tends to be confusing for a new time users. And I don't want that to happen to you. So I'm gonna take this time out and quickly introduce you to the very basics of them. So I'm gonna go ahead and get into my terminal. Now I'm in my desktop, Fuller. Just like that. I'm gonna go ahead and create a new file call file about txt. Novem at its core is a simple text editor. That's what we use Wen for is editing text to get into the vim interface to add a text. Since I've already created a new file, I can type in them and the name of the fund that I want to edit as soon as they get inside them. You see that it looks like something that is that can be used to at a text. But when you need to understand that them is also a text editor with superpowers. Broadly, Vin has two modes. Insert mode and command mode, non insert mode. It behaves like a normal text editor, which means you can just time anything and it shows up, like in any other normal text editor. Well, in command mode, all the keys data type become a part of some kind of command. For example, the combination of the Keys C A. W. Is a command and them to delete a word. That command can only be executed when in command more because it for an insert mode and you type CIA doubly will doubt text gets printed to the screen. All right, now, I guess I'm confusing now. But let's let's focus on the text editor here. Now. Focus also on the bottom left part right here. Okay, now I'm going to go ahead and press I and you'll watch that text change now, as soon as a press, I I go into insert mode, which means them becomes like any other normal text editor, and I can start and I can start typing just like that. All right, this is insert mode, and as I said, there is another mode that Vin has which is the command mode and again into command mode. All you do is press escape and watch how insert disappears from here. I pressed escape, and now I am in command murder. Now if when I'm commandment, I can type anything I want. But it won't show up because them is now listening to key combinations that it can take us command. All right, to continue typing again, I need to go ahead and go into the insert mode again and to go into insert mode, all you do is press I and again watch out for the bottom left here again, Press I. And now again, I am in insert mode and I can start typing though the way that I want to whatever I want to type. Okay. And if I press escape again, I get into command mode. So first of things that you need to learn is talking. But doing command mode and insert mode escape. But soon command mode, I put you in insert mode of escape, which in commandment again, and by pressing I you come out of the command mode. These are the 1st 2 things you need to learn the next two things you need to learn is about how to exit the wimp interface to exit of them interface. First of all, what you do is press escape and get into command mode, and then you press shift colon As soon as you press that, watch what happens here. Now this part is listening. This part wants in some input some kind of simple command to exit though them interface. Now there are two ways you can exit the them interface. The 1st 1 is wku, which means right everything to the file or or in simpler words, save whatever I have written and get out of the remainder face like address, enter. And that's what that's what happens now if I go ahead and go into them, file that txt again and again. I'm gonna press I and get into insert mode, and this is like a normal text editor to me. Now, when I can press the arrow keys and go to the very end of file and I can start typing again anything. And now if I want to exit vest again, the sequence of keys is, First of all, you press escape and get into command mode and the new press shift Colon for this thing to pop up. And now the another way to exit them is to exit without saving whatever teen years you made . So I can press Q, which is quite with an exclamation mark, which means Exit Wim without saving the changes in for center. Just like that, and I'm out of the vamp, mowed them interface again so I can go ahead and type filed out. Txt and Bam! The changes were not saved at all, and this is the very, very, very basics of em. But it's enough to set you up for the next video, and I'll see you and the next one now. 7. Git checkout, commit, log, and Working in Chunks (1/2): Hey, what's up, Wonderful people. The last video. This is where we left off. In the previous video, we talk about tracking changes in staging area and the different versions of files that are present between them. We learned about our first forget commands and this video. We're going to tie it all together now. Till now, what might have made sense to you? Is the working off all this? The mechanics of all this? What? What might not have made sense to you is why? Why should it work this way? What's the benefit off the concept? What's the benefit of this overload and how is it going to help me when I'm writing software? And this is what will be going to do in this video? And if you haven't noticed already, we will also be discussing the third box in this video, which I'm going to go ahead and call comments before we even go ahead and dive into all of the new concepts that will be learning in this video before even we fire up our terminal and start writing commands. There's something that we need to understand when you're writing software or building anything for that matter. It's a good idea to work in organized Chung's dig writing book. For example, when you're writing a book, maybe you're start working on Chapter one. Go over it, make it better iterating over it. And once I think it's good to go, you move your work to Chapter two. You go over it, make it better work over it, make it perfect, and then you move the champion three and so on and so forth. You work on all the chapters that comprise the whole book, and in the end you put it all together to have Ah whole complete book now and suffer. A single chunk could be a feature of the softer or for example, if the suffer is a website, a chunk could be a part of that website. For example, the header could be a chunk. The body could be a chunk. The footer could be a chunk. You put in all the work chunk by chunk, make it better, and in the end put it all together to get a complete website. Working and chunks makes even the most daunting projects easier to get started with and perfect. But to be honest, and in reality, any practices hardly ever perfect. You're not going to get anything done and perfect in a single iteration. You're going to make mistakes. You're going to go in back and forth and make changes until you feel that a chunk is good to go. And even then, there is a possibility that in the future you realize you missed something in that chunk and get back to it and redo it in the context of writing, software, working, directory and staging area come into play when you are going back and forth and perfecting . Ah, Chunk, you're trying out new things, and if something doesn't work, you reject it. That's what we're going to see in this video. How to go back and forth without the fear off breaking or losing things and how this concept or idea off staging area and working directory gives you a total freedom off exploration and creativity. And when you're done with the chunk and you think that it's good to go with, push it to third box, which is comments so enough of explanation, let's go ahead and fire aboard terminal and start working. If we divide are very simple website into chunks. The header becomes a chunk of the social links section becomes a chunk, the mount section becomes a chunk and the work section becomes a chunk to. And it's really funny to say chunks so many times. But anyway, the first young that will work on is to get the head of right, which means to personalize the header with your very own favorite color and your very own name. There. I'm gonna go ahead and write my name and the color that feels right to me. You are free to adhere any or whatever name you want to write there and also to choose the color that you want. So to do that, the first thing that I'm going to do is have to terminal just like that. That's what we always do. Then we navigate to the folder where our project is present. For me, it has desktop slash Nash Hillshire project. I can press enter and I am right and sign. If it's the first thing that I'm going to do, is run, get status to see how is everything okay? Everything is clean. There are no changes that have not being staged because If there was, I would have seen the falling files have been modified and the name of the file and read. But everything seems clean, which is very good. We can go ahead and start working Neiffer on Mac. You can write open and dot to open the folder inside Finer, just like that. And if you are on a different operating system and this doesn't work for you, you can use the g Y to navigate to the folder and the book like to open it now, Once I'm inside the folder, I'm gonna go ahead and select both of these and open them and my code editor, which is visual studio code. Just like that. Now an index dot html. The first thing I want you to do is to go to an extent, a sample that airline number 15. We have done this before, but again, the tow line over 15 and write your name. I mean, whatever your name is for me is there's Nashville. So I'm gonna go ahead and write my name. First Command asked to save that. I'm going to go into my browser, whatever browser you have open and brisket men are and well up there is my name. Now, the next thing that I want you to do is to navigate this town. Still CSS fine. Header on that starts online. 17. Get to lie Number 23 which says background color and write the name of your favorite color for me at this purple. So I'm gonna go ahead and write purple. It command s just like that. I'm gonna go ahead and go back into my browser. Press command are to look at it, and there it is. And it looks pretty pretty cool. It looks nice to meet, hasn't it? OK, now, once I'm happy with it. And remember what I'm doing here. I'm trying to emulate working on a project, and as I said, working on chunks, simplifying the process of building software. So right now I'm working on the header as a chunk and I'm exploring going back and forth and seeing what works for me. And right now it looks pretty good to me. So what I can do once it looks pretty good to me again? Go ahead and run. Get status. First of all to see that Yes, there are all the things I'm mortified index dot html and this town's not CSS file. And I can also look at the changes that I have made using the git diff command. When you use, get if you can write the name of the file name of a single file, look at the changes that are present inside of them or what you can do it just right dot and get if will show you that all the changes that you have made and all the files. So there it is. Here's the index dot html and changes that I've made, which is I'm added my name and in the stands Nazis, this file. I've got rid of this line and replaced it with purple and everything looks pretty good. And if you're stuck on something like this, you know, and you can't squirrel further, you come type anything. You just press Q. And you'll be out of it into the normal terminal view again. Now, once I'm happy with the changes and the way things look, I can go ahead and use Get add dot to stage all the changes. I'm gonna go ahead and check its status again, and everything is cleaning all the changes have been staged. Once I have think, say, within the staging area, I'm free to explore without any fear and do whatever I want. Now let's see. What if I go ahead and ride a couple of gibberish here, which is equivalent to, let's say, making some sort of error in your program? I can save this and well, this looks horrible. And what if I go ahead and accidentally? Well, let's see and go. Do I go to line up for eight, which links the styles file and get rid of that rescue? Manus and Command are and every thing is broken and wrong. And there were errors. Remember that before we ran into this whole error, we had saved all our things. The staging area using the git add command, which means the hours that I have made our president Onley in the working directory. But the staging area versions of the file are clean and have my name and the perfect color in the background. Now, what this means is because I have a good version working version that I was happy what saved in the staging area. I can bring that version up to the working directory, and it won't mean deleting everything year. It would mean just painting this version over here and restoring the changes back to what it was when I last staged the files. Not to do that, the command is get check out and let's check out that command. No pun intended, Of course. So I'm in my terminal here, and I'm gonna go ahead and first fall right clear to get everything out of the way. Now, what I want you to do is noticed this and the code editor and the code editor notice the lines that I have changed Line eight in line 15 and they're very conveniently highlighted in visual studio code. That's one of the reason why I asked you to download this program. Now, what I'm going to do is write get check out and the dot, which means check out all the files that are present in the staging area. Take all the files that our president is staging area and bring them to the working directory. So I'm gonna go ahead and press enter and watch what happens. 123 go and bam! All the changes are re strode to the way they were when they were lost. Staged, Which means we have got a read off all the error. So if I go into my browser press command are everything is restored and working, which means I can go into my working directory, make changes, do whatever I want. And even if I break something or run into some sort of ever, I won't have to worry because I already have a working version present in the staging area of this is really cool, because this gifts you like a mention. The freedom of creativity and a lot and a lot off exploration. But wait a minute. I don't think purple looks good. I want a different color. So I'll go into styles. Nazi Essence, just like that. And instead of purple Online number 23. All right, Another color, which I guess like how bout lemon chiffon? How about this color? I'm gonna go ahead and press are okay. This doesn't look very cool either. I'll go with green. I think so. Press command Express Command are Yeah, this looks good to me. So I think I'm done with this chunk here. So what? I'm going to do is first of all, look at get status again. Now you don't have to look at get status, but it's a good practice to get the stages of the files so that there are no undesired changes present. I press enter and just the styles have been modified. I can go ahead and run, get diff styles dot CSS and look, there are the changes, just purple changed with green, and that's all. So once I feel good that there are no unintentional changes and I'm happy with the Chung, I can go ahead and stage those files using get ad so I can either go ahead and write, get as Tom start CSS or use the shortcut. Get at dot and press enter and everything will be staged. I'll run get status again and all the files are clean. There are no files modifying, which means there are no files written and read pretty cool, isn't it? Now, so far are Chunk, which is the header we have went back and forth. We have made Evers while building in and got everything back from the staging area restored to the whatever version we like. Change the color and Now we are happy with our chunk and a chunk currently sits in the staging area saved. But now we don't think that will be making changes over here and we requiring it back from the staging area. I think we are very happy with the chunk and the next part is to move these chunks since we're happy with it. Two comments and remember there is no direct route between working directory and comets to send to comment. Things will have to go through the staging area because we already have the changes prison in the staging area. We can go ahead and put them and to comment and the command to do that is pretty simple. First fall I'll go ahead and clear my terminal and the command to put everything to come. It the changes that we have made since we're happy with the chunk is again very simple. Get come it I write, get coming and a press enter. And this is where your taken this is, if you remember, is whim. All the pound signs present in front of lines are comments and they are totally ignored. Is just for you to look at so If you remember them correctly, you can go ahead and press I to get into insert mode. This makes the cursor on the top left active, and I can go ahead and start typing things. Now what should I type here anyway? Why does get Want me to type anything? Well, when you come, it's something when you're happy with the Chung or when you're happy with whatever you have made and are ready to come in, get asks you a descriptive comet message, which is to describe, in summary what changes you have made and what it after the software. So for this chunk, I can write personalized sites hander just like that. And once I am written a comet message, I hope you remember how to exit Wimp, which is first of all, get into commandment by pressing escape than shift colon and typing doubly que Just like that and press enter. And there it is. Our first comment has made. And if this is the first time you have ever committed on your machine, ever committed code on your machine, there's a lot of things that you're going to see here about author and user name em about host name I just wanted to ignore. All of that will be getting back to that later. But if you see something like this, which is the name of the files and number of funds that has changed and insertions that have been made, which means your comet is successful and now you're Chunk is present and comments just like that, which is really cool. Now to make sure that you're coming a successful run, the command to get log, press enter. And this will show the comments that you have made now since we made just one comment so far. That is what is shown here, along with the comment message which we wrote, which was personalized sites Header. Now this is the whole comment, and in the next video we'll be looking mawr and to get locked and a little more into comments For now, you're pretty good, and I hope you learn a lot in this video. I'll see you in the next one 8. Git checkout, commit, log, and Working in Chunks (2/2): Welcome to this video, guys. In the last video, we made our very first comment after customizing the header, and we can look at that comment by First of Fault going into our terminal and then navigating to where my project is with his desktop slash national share project. Once I'm inside the folder, I can run the command, get long to view all our comments and just one come into shown because we have just made one comment so far. Now this whole information here tells us a couple of things. The first thing, of course, is the coming message that we delivered or that wrote, which was personalized Science Header. And that has shown an untitled that what is also shown is a date and the time and even the time zone that the comet was made in. And also it shows the name of the altar or the person who made that come it and, as I have mentioned previously, that get also allows collaborative development which will be taken a glimpse up towards the end of this class. But right now the author is me, and the name and the email are automatically detected and taken from the computer. We will sure be editing this later. But right now you don't have to worry about that. What also has shown is the comet I D, which is unique hash for that comet. Each comet has its very own unique i d. In the last video, we also talked about what chunks are or how it is a good practice to work in organized chunks. Whatever you are building. In the previous video, we perfected our chunk, which goes to work on the science header by giving it our name and our very own color, which we did. Lee perfected our chunk by going back and forth. And once you are happy with comets, we first fall staged it, which is in a way to save it so that if we made any hours in the working director, we can restore what's president in the staging area. And once we're happy with the Chung that wasn't staging area, we pushed it into the comments box. Ah, Chunk, if you see, is just a collection of changes in the files that are being tracked. These changes are aimed towards the desired outcome in our case. The changes that we made were directed two works personalizing our header, which was to give it a name and a background color. Now, once I have made a comment and remember that for committing, I also pushed all the files. The staging area and these poorly drawn rectangular boxes are just a way of representing this entire box here with all the files Name in scientific. So again, once I made a comment and before committing again, I pushed everything the staging area, and once I was happy with whatever was in the staging area, I pushed it to the comment box like So Now there are three different versions of all the files presented. Working directory, staging area and comments. And one thing to realize that all of these versions of files are just the same. They are the exact same versions, and I can confirm that by going into my terminal and typing and get status just like that and look what comes up, we'll ignore the first line for right now. And focus on the second line, which says nothing to come in and working. Treat clean with is just a way off saying that there are no untracked files during no modified files. All the changes have been committed, and all the three versions of file present in the working directory and staging area and comments are the same. Now let's go ahead and make another comet for doing that. I'll first of all, open my project in the browser, and I already have it open. So the next junk that will be working on is to make these social links functional. If right now I click on Twitter, it will take me to twitter dot com. But But what I want is the link to take me to my Twitter profile instead of twitter dot com site. And when I click on Instagram, I want to go to my instagram profile instead of just instagram dot com and in the third Link, I just want to add something of my own, some link of my own. In my case, it would be my medium profile for you. It could be your website or whatever you want, so now we know what we're going to work on, so let's go ahead and get started. What I want you to do is open the project fullerenes or slowing down and open. And next on HTML with visual studio coat Just like that. And not what I want you to do is fine. Line number 19 in line number 19. If you see there's a link to twitter dot com slash And in the end of the slash right here, I want you to write your twitter handle for me. It is an s FBI else. I'm gonna write that. An instagram dot com slash That is online in 22. I want you to add your instant gram handle or your instagram user name for me as again the same. So I'm going to write that and online number 25 the quotations right here after hatred equals, I want you to write the link to her website or any another profile that he won. For me, it is medium. Some just gonna go ahead and write W blue. Www dot medium dot com slash at Nashville. This isn't how you put in the link for immediate profile. And once I'm done with this, I'm gonna go ahead and press command as and this is saved. I will go into my browser and press command are to reload and then I'll clothe these taps just like that. I'm gonna go ahead and click on Twitter, and this should take me to my profile instead of twitter dot com. And there it is. This is my profile. And if I click on the instagram icon, it should take me to my instagram profile just like that. Pretty cool, isn't it? And if I click on the third icon, the Globe icon, I put in the link to my media profiles. If I click on it, it should take me to my medium profile. Okay, so the lengths are working very good. I'm happy with the way that work. So the next thing that I'm going to do is have to my terminal first of all, and go ahead and type and get status. And it will show the modified file which is indexed on html. No, there is another raid that you can also ask for this information in a compact way. The way to do that is right get status and also pass an option or a flag which is Dash s and was written that you click enter and this shows everything and sing the line which simply says that index dot html has been modified and can also if I want to go out and type and get deaf, index dot html and look at all the changes I made. And there it is. I've removed the older links and added the full links right here. Pretty cool. Yeah, I'm happy whether what I have. So what I'm going to do is first of all, clear my terminal. The next thing that I'm going to do is and all the changes to the staging area, and the way to do that is get ad. I can use a short get or since I have just modified a single file, I can simply right get out and next on HTML. And once I have added that to the staging area just to confirm, I can go ahead and write, get status, asked again. And now you see that M turns to green, which means the file has been modified but is also present in the staging area. Now, once I'm happy with that, I am ready to comment. I can write, get comment. But now wait a second. You don't have to press enter. There's a shortcut you can write, get comment Dash M and Co. Tae Shin Mark open quotation marks and start typing the comment message. For me, the comet message is updated social media profile ings Just like that, I can close the quotation marks I can press enter and bam! There it is. My comment has been made. Asked, as confirmed by this line over here again, you can ignore this for now, if you're seeing this, this is just trying to tell us that we have not explicitly configured our name and user name and email. Like I mentioned at the starting of this video, you can ignore that for now. But right now our comment has been made and to make sure that they're coming has been made . What we need to do now is to fire up or command, which is get locked. I can press enter to look at all our comments just like that. And as you can see, there is our second comet, which says updated social media profile links. Now there's another way that you can look at this information in a compact way, bypassing and the option off one line to get long. So I can get Law one line and I can press enter And all of the comments are shown in to sing the line, which is personalized, signed Teta and an update on social media profile ings That too. The two comments that we have and each of the comments hash or the unit gaiety is also shown on the side. Now what we did here is this was our first comment which said Personalized science center. So this is our first coming and then we made several more changes, which means we added our our social media, Laing said. We were happy with it and we moved that to the staging area and once we were happy with the snapshot that was present in the staging area which included the updated social media links , we pushed another comment and the next comment was added on top of the previous comment like this and this was our second comment which was two on social media links and when we execute that get lost command, this is what we see. First of all, we see the first comment that was made and then we see the second comment that was made in diverse chronological order because it's always shows the latest version the files are in. And this is what is shown again when we go ahead and fire of the command, get logged. One line. Great. Now what I want you to understand is that as a software is being built and if we look at our comet log right here, each comment is like a checkpoint and building of the software each comet. And more specifically, the coming messages describe how far the software or Web site in our case has come and what features have been added to it all in all the coming messages and the comments show how the whole software have been built and progress over time, which is simply put, very, very awesome, missing it. Now let's go ahead and make our very last comment for this video. The next young that I want to work on is the about section. Right now. It's just a bunch of gibberish. I want to write something authentic and something about me. So let's go ahead and navigate to visual studio code inside index dot html and then I want you to scroll down through line number 33 from my number 33 Do line number 35. We have some gibberish ridden. I wanted to select all of that and doing this and write something about yourself there. For me, It's going to be Hello. I am Nash and a full stop. Of course, I'm a designer and developer, and I absolutely love teaching If I could get the spelling right. Okay, that's it. That's the will about me. I can press command is to save it. And the goal into my browser and press command are. And there it is. Ah, short sweet about me. And guess what? I have just finished working on the bounce section. The next thing that I want to do is have to my terminal and again a fella could get status . It says that investigation will has been modified, which is of course, pretty correct that I have modified next with HTML and replace the gibberish with an actual amount. Me. The next thing that I want to do is go ahead and type, get at the shortcut, and everything's added to the staging area. The next thing that I want to do is go ahead and comet. The changes that I made and leave a message, which was, which is to update it the about section. And once I'm done with that, I have added the third comment. Now let me clear my terminal and fire up. Get log one line just like that. And there it is. There are three comments now, and it's really cool to see the progress of your software this way. In this video, we looked at a couple of shortcuts in different ways. You can use different get commands also, we made a to new comments in this video and also realize what comets are. And how are they important, how they could show the progress off software over time. I hope everything is clear to you can go ahead and move on to our next video. Now I'll see you in the next one, guys. 9. Git branch, merge and The concept of branching: What is up, guys, welcome to this video. In this video we will discuss the concept of branches and get We'll see how it is beneficial when you're writing software and how it provides you again with the freedom of creativity and exploration without worrying about messing things up or making errors and trashing the whole project. Well, first of all, what I would like you to do is imagine a scenario where you're writing a software and you want to make a drastic change to it. Or maybe you have an idea off a new feature that you want to add to the software. The current state of the project is all right and looks good to you. But you just want to try something new. For example, in our website, I'm quite happy with what I have currently. But what I want to try is to change the layout of how the projects are laid out under the work section. And as I said, I'm quite happy with I have currently I just want to try something new if it works out great and if it doesn't work out no issues and while doing this my motive also is to not mess up what I currently have. I don't want to mess up all the code that come that I currently have. I don't want to mess up how the product works right now. Again, just read reading. I want to try something new without messing what I currently have and the new thing that I try if it looks good to me, okay. And if it doesn't look good, I can get rid off whatever changes are made. Well, the first thing that I can do, if if that is my motive, is to grab my project folder and make a copy. If it so I could go ahead and press copy, and I can pace it right over here. All right. Now, in my desktop, I have a copy of my current project. So what I can do is go into this folder, the copy of the project, start working and try out new layouts. And my another copy. The original one will be safe. Right? But what if Let's say I wanted to add a footer to our website, so I'll continue working on footer in the original copy of the folder. But in the second copy. I have changed the layout, and now I also in the Footer. So I want both of them to merge together and be, uh it's too confusing, right? It's very confusing. So all in all, making a copy, though it encapsulate all the changes and keeps original code safe. It's a bad idea right now. This is where branches come in. And of course, we don't need a different copy of the folder. So I'm gonna go ahead and press command delete just like that. Now let's go ahead and trying to understand the concept of branches so far in a project, I'll open my terminal and navigate to my project just like that Now, so far in our project, we have three comments. The 1st 1 in which we personalize the science header added our name and change the Bagram color. The 2nd 1 where we updated the social media wings. 1/3 1 very updated that bounce section, so I will represent these comments by dots. So here is my first comment. Here is my second comment and here is my third come it And this is a general round of progression of our software. Is progressing. Now let's say in the future I'll add another comet, which will add a footer to our website. So that will be coming Number four. And now that this is happening and future are along the general round of the software. But like I mentioned, I also want to try something new, for example, changing the layout of the projects under word. Now, in that case, what I can do since this is my general round of the software, Aiken, deviate from this route. Go right over here like that and start a new branch and start working on changing layout of the projects right here. What do you make? A different copy of the folder of the original Project folder. We get a new working directory staging area and comments, since all the good things also get copied now, creating a branch is similar to that. It's like making a new copy. But with a number off added advantages, double will see. Ah Branch represents. This branch represents an independent line of development in this branch. I'm free to make new comments, make a number of comments however long I want. And in the middle, if I am done here, or I can pause my work here and continue working on the main branch or continue working on the general route of the software. And once I'm happy with what I have here, I can bring all the changes into here. And if I'm not happy with what I have here, I could get rid of it all together. And my software will continue progressing along the general route and nothing in this branch. Okay, in this general round, French would be affected with whatever I had done here. So that is the concept of branches. A new branch encapsulate its changes and keeps the potentially unstable code away from the main code base. And now let's go ahead and put everything that we've learned so far in this video to practice. Now here, go to your terminal. Make sure you are inside your projects folder. The next thing that you want to do is to run the command, get branch. Pretty straightforward, isn't it? Now, the jump of this command is to list all the branches that are currently present in your repository or your software. All that's listed right now is just master. Now this this branch. The general round branch, like we have referred to it, is the master branch. When you initialize did in a brand new repository and start committing all the comments Goal Toe a branch which is called the Master Branch by default. There's nothing special about this branch except its name, and that it's the first branch that gets created when you start working. And that is what is shown here. And the next thing that we're going to do is to create a new branch. And to do that, you simply type and get branch and the name of the new branch that you want to create for me. Let's call it New Branch. For now, I can press enter. I can write Grid Branch again and look, There are two branches listed the Master branch and the new branch that we just created. And to delete the branch or to delete any branch. All they do is type of get branch Dash D and the name of the branch that you want to delete and bam! The branch is gone. I can write, get branch again and there is just the master French. Now let's start our work on changing the layout of the projects under the work section. Now again, since this is just something I'm trying out and will only go forward if it looks good to me , I'll go ahead and create a new branch using the git branch command and type in the name of the branch that I want to create. The name of the branch should be descriptive enough to tell everyone will, will be or is working on the project or even you that what kind of work is going on in this branch? So I'll call my branch work, work really out. Which means we laying out the work section and I can press enter and I can write get branch again And there it is the master branch and the work really out branch Not currently. I am on the master branch which is represented by the asterisk right over here. What I want to do next is to switch to the work really out branch. And to do that, I can write, get check out and the name of the branch which is work re lay out like a press enter. I can type and get branch again and there it is. The asterisk which used to be on the master which was on Master, is now on work. Really out. Which means I am on the work. Really? Out Branch. I'll go in and clear my terminal right now and again just to reiterate This is my master branch. All the comments that I was making was going on the master branch. But right now what I did, it was created a new branch and switched to it. Which means all the comments that I will be making will be going on this branch and our master branch will remain very much plane of all the comments that we may hear. So let's go ahead and start working. What I want to you to do next is to go ahead and get into visual studio code and open your project like you've done so many times. Then I want you to navigate to the styles Nazi SS file and scroll down to line number 87 delete the whole line. Impressing command delete. I can get rid of the whole line. I can press command s I will go back into my browser brisket Menard to look at it. Okay, this looks a little weird. This is not what I want it to look like. What if the projects each of the project could take up the wood until here. Now, to do that again, switch to visual studio code and scroll down on and find line number 101 instead of with off to 86 pixels. I want you to write 100% and I'm gonna go ahead and press command s go to my browser and press command are okay. This looks get Ah, yeah, This looks fine to me. So once I'm happy with it, I could go into my terminal just like that. I can type in again to check the status of the file, get status S and I have just modified stance Nazi SS. And now, since I'm happy with the results, I can go ahead and come it that result to do that, I can write, get Comet. And here's a shortcut. Since we also need to add files to the staging area before we can come at them. You can use this shortcut to do all of that, adding to the staging area and putting the files into comment. In a single line, you write dash A to add everything, the staging area and the dash M to ride the comic message and then open quotes. And then you can write the comet message for me. It will be reworked work layout, just like that. I closed the quotes and press enter. And there it is, our new come. It has been made and I can go to get long one line and I can see the Comets. That's made. Now what I want you to do is to focus here. I have four Cummings right now. The first comment, the second coming, the third comment, which were on the master branch, and the fourth comment which I made on the new branch, which I called work. Relay out, many creating new branch. The history continues like so 123 This is the fourth comment, but in case I switched to the master branch and make another comment, I will not be able to see that comet Look here. What it says is this comment This commit right here was on the master branch and right now this comment right here is on the work really out Branch and head is just a pointer to the latest comet. So this is head and right now head is on the latest comment on the work really out branch. And this is how everything looks right now. Now again, if I want to go ahead and look out the branches that I have, I can type a great brand just like that. And what I can Also new here is switched back to master. To do that, I can write Get Brandt. Good. Sorry. Get check out, Master. And then I'm on the master branch. I can confirm that my writing Good branch and see the Asterix that is beside the name Master, Which means that since I am now back into the master branch, my head is now pointing to the latest comment on the master branch. What I can do is I could write, get log one line and head is right now on the latest comment of the master branch. And that is reflected if I go into browser and press command are everything is untouched and clean in my master branch. All right. And I can again switch to my work. Really out branch like that and I can go ahead Going to my Web browser Press command are And this is how everything looks in the other branch. Now I'm happy with how everything looks OK. I'm happy with the way the layout looks and I want to bring the those changes to my master brand. And to do that, the command that we're going to use is get merge so to get into your terminal. Ah, first full check the branch that I am in by first will clear my terminal and check the branch I am and by typing and good branch off. First of all, I want to switch to the master branch by typing and get check out. Master, Once I'm on the master branch, I could write them command. Get Marge and the name of the branch that I want to merge into Master For me it has worked real a out I can re lamps, I can press enter and bam! Everything is now merged. And what happens is when you merge a comment from a different branch into the master branch . Everything becomes one which means that on the master branch we have four comments and there is a new line off progression of the suffer. And I can confirm that by typing and get log one line and there it is. Now, once I have brought in the changes from another branch and if I don't want to work on that branch anymore, that branch is completely useless. So I can go ahead, delete that branch by typing and get branch D and the name of the branch, which is work re lay out just like that. I get press enter and the branch has been deleted. Aiken type and get branch again. And I just have the master branch. And since all the changes were brought in properly, everything remains as it waas. Now, here we saw how we had a new idea off trying a new thing, and we switched to a new branch, tried that and it seemed good and I brought that in Now in case in case I didn't like the outcome, I could have deleted the branch without merging it of bringing it into the master branch, and the master branch would have been completely clean off all exploration, creativity and all the changes. And that, said that was the basics of branches and the concept behind them, when to use them and how to use them. In the next video, we'll be looking at another concept that is a part of branching, which is merged conflict. It will be a short video, and I'll see you in the next one. 10. Understanding merge conflicts and how to resolve them: in the last video would discuss the concept off branching, which means when I have a new idea or I'm about to make a drastic change, I can create, switch and work on a new branch. Does keeping the main branch safe from any errors or breaks that could happen when I'm working on the new branch during the implementation of the new idea or implementation off some sort of fix. But when everything is done when I have completed my work on this branch and I'm happy with the result of what I can do is pull these changes into the master branch just like that, most of the time, get is smart enough to figure out how to merge the code and bore the branches without any problem. But sometimes what happened says when the implementation of the new idea is time taken so it cannot be done in one go. So you spread that over. Days are over a week probably, and when you're working on this, you don't need to stop working on your master branch. You continue work on paddle in the master branch now working in paddle here means that you make comments on board the branches by going back and forth between them. Some days or sometimes you work and make comments on the master branch and the other days or other times, we make comments on the other branch that's patently progressing. The work on board the branches so sometimes onto branches. The latest comment. The latest comet can change the same line or the same set of lines of code. And when you try to merge these branches, that is when a merge conflict occurs and get needs your help in deciding which line or which set off lines to keep either the one from the main branch, or either the one that you're bringing in from a different branch or a combination of them . And this scenario, Birgit needs your help in deciding how to merge is called Emerge Conflict. Let's try to recreate the scenario off marriage conflict in a project right now. Now, the next thing that I want you to do is to fire up your terminal and navigate to your projects. Folder for Maeda's desktop slash nash skills. Your project. So I'm inside offense. I can type and get Branch to look at the list of the branches that are currently present in my git repository of this folder. And if you fall it along properly, you would also have just a single branch which is the master branch. Now, the next thing that I want to do is to create a new branch now, traditionally, so far as you have seen as you create a new branch by typing it, get get branch and name of the branch and then to start working on that branch eat. You need to switch to that branch by using the command, get check out and and the name of the branch. But what I would like to do right now is share with you a shortcut in which you can create a new branch and switch to that branch with a single command. And that is get check out bash be and the name of the branch. Let's call this branch new brand. Just like that, I can press enter and again typing get branch again and there it is. Our new branch has been created. And not only that, since we use the shortcut check out be We also are on the new branch and we can start working on the new branch directly. Now, remember that we are on the new branch and I'm one to you to go ahead and open up your project folder and open index dot html with visual studio coat just like that. And now I want you to go to line number nine and change the title off the website from my website to your name. I'm gonna type in Nashville for me. I'm gonna press command s that I'm going to go into my terminal again and type and get status as to look at. Yes, I want to find it next based email and I can type and get diff in next today Schimmel to look at my changes. And yes, I remove the older title and added a new title to it. Great. Now, once I'm happy with it again, type and get comment a am to stays the changes. I'm adding the dash a option here and I can type in a common message. For example, I can write an updated sites title can press enter on. The new comet has been made and remember And remember that I am on the branch New branch so I can type and get log, Get log one line. And there it is. The new branch is active and I made a comment on that branch. Therefore, so far what we did is we created a new branch. Call this branch New branch Very generic. And this is our master branch. This branches Air Master branch. And we just made a new comment on this branch by changing line number nine and updating the sites title. Now what I want to do is to switch to the Master branch into space to the master branch. When I can write is get check out Master, I can clear my terminal first of all, and then I can try to get Branch to look at what branch? I'm in it. Yes, I'm on the master branch and now here to look what I'm going to do. I'm going to go into visual studio account and look here. The changes that we made in the other branch are invisible on this branch because this brand just say from the changes that has been made there. And those changes won't affect the current branch unless I decide to bring them in. So what I want to do really, is to go online Number nine and change decides title again. And this time I'm going to write in my name and a little more description. For example, Designer. And if, well, great, I'm gonna breast command s I'm going to go ahead going to my terminal type and get status asked to see if everything is working as supposed any Yes. I want to find an excavation will. Now, quickly. What I'm going to do is going to add get come it a m and then I'm going to write a comet message which will again be updated sites title to be more descriptive. Okay, Bam! And the new come, it has been made. Now what I just did is I went ahead into my master branch and made a new comment here. Now, remember again, both of these comments changed the same line of code which has changed the science title here. I change the title and added my name and hear what I did. I change the sites title and I added mining plus a little bit of more description. Only thing to keep in mind here is that we have changed the same line of coat. The next thing that I'm going to try and do is to merge these two branches together. So to do that, I'm gonna go ahead and type in get branch. I'm on the master branch and to merge the branch. First of all, I'm gonna go ahead and clear my terminal and type and get merge and the name of the branch that I want to merge, which is new Branch and Bam! We have run into emerge conflict. Now pay close attention. Here in the master branch, I wrote natural designer and developer. I change the same line of code. And in the other branch, I also changed the same line of Kevin just to reiterate. Now what gets asking us is to choose which one do I want to keep? Because it cannot in itself decide that for us right now it's a little confused. So to do that just solve this much conflict. All we have to do is choose So this line, this e equals short line here separates the two versions. Now I want to keep this version. I don't want to get rid of this version. So all that I'm going to do is to delete this line and the lead the equals line, and delete this new line and then also dilly this line right here and here. I'm happy with everything I can. Press command s just like that and I can type and get Come it. Because once I'm happy with the result to solve lemurs, conflict must have solved a marriage conflict and the mixture characters in prison. I can go ahead and type and get comment A M and I could write fixed sites title, merge, conflict and I can press enter and bam! A new comet has been made and the merge conflict has been fixed. And now if I go ahead and type and get log one line, you can see that fixed sites title emerge. Conflict is brought into master and that's it. That is what Morris conflict is when you change the same line or some set of lines and to comments into branches and you try to merge them together, get needs your help in deciding which one to keep. And so you tell, get which one to keep and comment the result. And similarly in that way, the merge conflict resolved. That was a very basic of Merced conflicts. I hope you get the idea of what merch conflict is and how to solve it. And I'll see you in the next video where we will be talking about get hub and how to upload your code online So I'll see you in the next one. 11. Remote repositories and uploading project to GitHub: Welcome to this video, guys. And first of all, congratulations. We're done with the main content of her class. We have come a long, long way. We started from the basics of get. We even explored some intermediate features and we learned about 10 most commonly used get commands throughout the world by multiple multiple and many millions of developers every day. And using it will become a second nature for you as well as you continue using it in all the projects that you make. But today, what I want to do is to talk about get home now. So far in the class, you've heard me mention collaborative development a number of times and that get enables collaborative development. But first of all, what is collaborative development anyway? Well, collaborative is a simple English word, which means to collaborate, which means many people working on the same thing or collaborating on the same thing. When a bunch of people, many other people, work on the same softer project, that is when it's called collaborative development. Now get is a distributed version control system, the latter part of the definition VCs or version control system. You already know where that is, it's something that tracks changes, allows us to make comments and makes working on large group projects more manageable and organize. And that is what get is get as a version control system. And I could have mentioned this exact definition of VCs and given you this term at the beginning of the class, but then it wouldn't have made much sense to you. But now it should, because you have already worked with VCs, which is get and you know how it works and how it helps it building software. All right, great. Now the former part of the definition which is distributed comes from how get allows you to collaborate in a distributed version control system. Each collaborator has their very own copy of the project, and the question that the right is here is that if each of the collaborator have their very own copy of the project, and if one of the collaborator makes an update or, for example, at your feature to the project, how does this change propagate to the other collaborators? How can we make sure that each of the collaborator has the very latest copy off the project , so to get around that there is another copy of the project somewhere, just like any other copies. And for example, when two makes an update or as a new feature to the project, what they do is push their code to this copy. And what other collaborators can do is that pull the code from this repository or this project to their respective copies. And in this way and this way, the update that made to the project is that propagated to all the other copies of all the other collaborators. Similarly, if, for example, three makes an update, they can push the code to this copy and all the other collaborators can full the copy it and then this way, just making sure that all of them are the same pays and are on the most updated version of the project. Now, this copy right here is what is called a remote repository. And it goes without saying that yes, each collaborators copy has an implicit link to the remote repository and will shortly see that in practice. Now, this remote repository is very get hub comes into practice, get home, allows you to host your code online or in other words to create remote repository on the Web. Once you have done that, your code is then available to anyone on the Internet to come and see and start collaborating. And even if you're the only person working on that project, it serves as a very robust backup and a management system so that if your computer of crashes and burn all your code will be updated and safe on get home and that's just not it . Get up has a wide range of get of us many, many features for developers and particular other class. For now, though, all you need to know is that get up, allows you to holster code or, in other words, create remote repository on the Internet and now will go ahead and put all of this into practice. Now we're ready to go ahead and hop on Teoh, get hop dot com just like that. If you already have a good have account awesome. Just go ahead and sign into that. And if you don't click on the sign up button and create a new account, it's pretty simple. To be honest, the first of all, you need to choose your user name. And I want you to remember this user name and the password that we wanna type it in here. So give me a second. Great. Now, once I have everything filled in, I can go ahead and click on the create an account button at the bottom. And I know I don't want to do that right now. Well, great. Now from the plant, you can choose unlimited public repositories for free, the free one, and let's go ahead and click. Continue. Just like that. Nothing to do here and in the final. It says, Taylor, your experience. Okay, whatever. Let's go ahead and skip that step. Okay? Great. Now you have a get help account ready. The next thing that I want you to do is to go ahead and click on the plus button here and click on new Repository. I need to verify my email address ovary from email address and come right back. All right. Alrighty. I verified my email address. So now let's go ahead and create Click on the plus button here and click on you repository just like that. And now I need to give my report Victoria name. I'm just gonna call it personal site, and that's it. Okay, great personal site. Don't do your thing here, Mac. Okay, great. Let's get the description for now and everything seems pretty good. I'm just gonna go ahead and click on Create Repository. Great. And now Ah, buns, Your lines of code and all the tax will show up. But don't worry, we're gonna figure this out in a second. Now, what we have done so far is we have created a remote repository on get help. The next thing that we want to do is to push the code that we have to that remote repository. Because remember that that this repository is just a copy. So from our local repository or a local project, which is national chur project, I need to get all the code from there to here. And to do that, the first thing that I want to do is go into terminal and navigates to my project folder which a desktop slash nash sculpture project. Now here. As I mentioned before, each project has an implicit linked to this which is a remote repository, and check that link if it exists. The way to do that is to write get remote V. And right now there is nothing at all to show because it does not linked to any remorse. Repository. Now we're going to do that in a second. So first of all, go to the go to your browser just like that and come to the section Bird says or push and existing repository from command line. What I want you to do is to copy the first line just like that. I'm gonna go ahead and copy this. Go into my terminal. Make sure make sure that you're inside your project and paste the code. What? This code what this command is doing is adding a remote link to this report that we have just created on Get home. So what I'm going to do now is once have pasted the code. I'm gonna go ahead and press enter, then I'm going to go ahead and type and get remote V. And now I have a link to the remote repository which is up on get help. The first thing that I want to do is to push all the code I have to that repository. And to do that, go ahead and copy the second line of code here, Press Command, See and go to your terminal press command V and press enter. And once you've done that, is going to ask you your get how the user name and the password. So first of all, I'm gonna go ahead and enter my user name just like that. And now my password and I'm timing man pastorate, but terminal is and show it for security purposes. But believe me, it has already taken the input. And the next thing that I'm going to do is press enter, wait for a while and it's pushing the code to our remote Rebo and bam. We're done. Now if I go back into a browser and press command are and wait for it, There it is. All my code has been pushed online on to get up. I can go ahead and look at the comments that I have made. Richard, these air, the comments that we have made together and this is great, right? We have just pushed our code to get up. Now all our code, everything that we wrote in all the comments that we made are now up on get up in this repository and it is available for public to come and see our coat and start collaborating if they want her. Now we're done here. We know what remote repositories are. We know what? Get a biz, and we've pushed our code to get up. In the next video, we'll see what get a PGE's is and how to get in unique URL for your website. How to publish your website online, so I'll see you them. 12. Publishing site on GitHub pages: no. In this video we're going to pick up from right where we left off, or gold in this video as to how was the site that we have on an actual girl. Now get Hub has the service, which is called Ghetto Pages, which allows you to host websites from projects or it just simple websites online without much fuss and is very simple. Now you can go to get help. You can goto pages that get, have dot com and read more about it. But for our intents and purposes, all you to do is to follow this video. So to go do your repository just like that, which is for Maeda's Nashville to slash personal site. The next thing that you want to do is to find this button right here, which says, Branch Master, you want to click on it and in the input box, but says find or create a new branch. I want you to do this. I want you to write G Etch dash or hyphen pages and make sure that it matches letter by letter exactly and then click on, create brand jeans pages from Master and click on it and wait for a few seconds. All right. Okay, There it is. We are. We have now successfully created two branches. Now creating this branch here is just like creating a new branch of your command line. But in case you want this year's pages brand to show up in your command line, you'll need to do a poll. Now, this course is not about get hub and the features of get up so we won't be going into that . A goal was to learn, get and to have a very brief introduction of get help on how to host your page on GH pages or get a pages. And guess what? We have already done that by creating a new branch. Now, what I want you to do is go to a new tab and type in this. I want you type in your user name for meat. Is Nash rail to dot and match this letter. My letter get helped out. I o slash the name of the project. For me, the name of the project is personal site. So that's what I'm going to do. I want to go ahead here and typing per so nal site and I'm gonna go ahead and press enter and wait for a few seconds, and there it is. My site is now up on an actual your l even you can visit this site from your phone or your computer, and you will be able to see this, and that's it. We're done via Bush or Co to get up and hosted our site on ghetto pages. And the next thing that I would like you to do is to take a screenshot of this and make sure you have this girl visible and post it on to the project's section below. Okay, great. Now, as I said, get up is a vast best thing can create a profile here. You can't push your coats. They're like, this is my original profile. I created a new profile called Natural to adjust for the purposes of this class. So this is my profile and get have you can go ahead and give me a follow get have as very, very many features. And I would love you to go ahead and explore this once we're comfortable with. All right, So we're done with this class and I'll see you in the final rap video. Thank you so much for falling along. I love you guys. 13. Conclusion: Whoa. That was a long, long ride, but we completed it. We started from the very basics we started. From what command Linus and learning the very basics of the command line interface and how to use it to get around the computer. Then we learn how to use get in an actual project. And around this class, you worked on a project integrated, get in it used to get in it and finally hopefully hosts it out it on ghetto pages and pushed your code online to give up. It was a lot to learn. And I'm very proud of you. And I should stop hitting this very proud of you to make this far in the class. And I really, really, really hope that you learn something and you've got something really good out of this class . Also, if you haven't feedbacks or suggestions or you want me to teach something else all open for requests all the time. You can leave your suggestions and feedbacks and requests Cummings below. Or you can reach out to me on Twitter. I'll leave my Twitter handle right over here. And it's been really, really fun teaching this class guys and I really hope to see you soon in my next class. It's been a great It's been awesome. Thank you so much again and I'll see you soon.