We've reached another video in chapter 18 of our material, and now we're going to learn how to create our first local and remote repository. Hello, how are you doing? Welcome to another lesson here in your HTML and CSS course.
We are in the chapter where we are working with repositories, local repositories so we can version our software, and remote repositories so we can create backups. So, I have already explained what Git is, what GitHub is, and what local and remote repositories are. We have also installed Git and GitHub on your operating system, and we've also created a GitHub account and configured GitHub Desktop.
Now the time has come to start configuring GitHub Desktop so we can have local and remote repositories. So let's go straight to the computer and make some important configurations. Hello, excuse me.
Let me interrupt your class for just a minute. I need to give a message from Recode, which is also a sponsor of our course. They offer you a series of free courses that will boost your career for the future.
And speaking of the future, I want to talk about a very important track of approximately 40 hours that Recode offers you. It is aptly named Technologies for the Future. And as the name suggests, it will introduce you to a series of technologies you can use today to help solve problems and conceive new projects.
It includes courses on, for example, artificial intelligence, internet of things, biotechnology, virtual reality, augmented reality, and much more. So don't waste time, go to recode. org.
br right now or use the QR code appearing on your screen, and in the top menu of the Recode website, click on courses. You will see this and many other opportunities for you. Thank you Recode for the sponsorship, and to you, my dear friend, let's get back to class.
So, look, I am here on a completely clean computer, I closed everything, okay? Everything I had open. And I'm going to show you the following.
First, look, GitHub Desktop is gone from here. That icon, I hate icons on the desktop, so I removed it too. You can open it here, on the start button, click on GitHub, be careful, there is Git and there is GitHub.
I clicked on GitHub, GitHub Desktop, I am going to open my GitHub Desktop. Alright? The first tip I'll give you, let's pin it down here to the taskbar, just like we did before with Visual Studio Code.
So, look, right-click on the icon, pin to taskbar . I'll drag it over here, and it's already pinned, see? I can close it now that it's pinned here, and it's important to keep it here.
So, alright. Another thing we're going to do is make it dark. So, look, you come here to file options, I'm going to make it dark because I want to, right?
Here, look, your account is already here, okay? Here, look, Professor Guanabara. I can sign out at any time, and I actually recommend you sign out, especially if you're on a school or college computer.
Every time you leave, sign out of your account. If you're on your home computer, you don't need to keep signing in and out, just leave it logged in and there's no problem at all . Uh-huh.
Here you can change the default editor, here, see, Visual Studio Code. Here you have your username and password. I recommend you remove them too if you're at college, when you leave, remove both of these.
That's why I didn't recommend you put your original email here. Here under appearance, you can switch to dark mode . Alright, let's close it.
I have it here now. Another thing we'll need, look, let me move it down here under my head. And I'm going to do the following , look.
I'll show you where we're going to create the repository. Basically, we'll have to create two repositories, right? Because the thing is, I have a studies folder here in documents, and inside studies, I have HTML and CSS, and I also have JavaScript.
If you want , you can create just one repository that has everything, but I don't recommend it. Keep one repository just for the HTML course and one repository just for the JavaScript course. It's easier for you to work.
So, everything is inside studies, right? You have to remember that. And my folder name is HTML-CSS.
My folder is JavaScript. That also matters a lot. So we'll go here, I'll leave this open for you to use as a reference.
And then, look, ah, one important thing, look. I'll come here to HTML CSS. There's the challenges folder and there's the exercises folder .
There's nothing else. If you want to know if there's really nothing else, you can come here, to view, click up here on hidden items, look. There are no hidden items, there's nothing else.
There is nothing left. I will hide the hidden items. In a moment, we will show you where the repositories are, where the local repository is.
So let's go here, look. I'm already here below my head in GitHub Desktop. You are going to click on this guy here, look.
Create a new repository on your hard drive. This is you creating a local repository , okay? So, the first step is to create a local repository.
The repository name will be the name you put here, look, up to here in studies. See that? This here will be the location of my repository.
I have HTML-CSS. So, its name has to be exactly this name here. If you want, you can even click here, look, right-click, right-click on the folder, properties.
Select this here, copy, look. I selected it, Ctrl C. I'll come here, look, Ctrl V, okay?
To make it exactly the same, so there are no mistakes. Here in the description, you can put whatever you want. HTML 5 and CSS3 course from Curso em Vídeo.
Got it? Here you will say where you want to create the repository. I will click here on choose and here I will do the following, I will choose which folder my HTML CSS folder is located in.
So, look, you will put it here in documents studies, which is the folder where you have the HTML CSS folder, right? So it is just this document, documents and studies. Select the folder, check here, look, if your username is there, documents and studies.
It cannot have HTML CSS here, okay? Some people select it here and end up having trouble. So, go to the folder where it is.
So, look, go to this folder here, look, C: \Users . If you want, you can even come here, look, copy, select here, look, and paste, it also works, look. It is the same thing.
Another thing, let's check this, initialize with README. Later we will see what that is, a special little file it adds. Git ignore.
I don't have any HTML here. Here you choose which language you will program in so you can ignore certain files, okay? But in my case here, there is none.
And here is the license, you can choose any license . You have the GPL version 3, which is for free software, you have the MIT. I always like to select MIT, okay?
You can check that too. All right, this is the screen to create the local repository on our machine. So, I'm going to create a folder.
Remember, this name here must be exactly this name here, and the rest is configured as I set it. And don't forget here, it's important to check if it's the same thing as here, if it's the same as here. So, click here, look, out here.
Don't click on the folder, otherwise you'll go straight to the thing, you know? You clicked out here, the name is there, verify if it matches this. Then you're going to click, look.
It's important you check, otherwise there will be problems later. Create repository. There, look, it already found the files.
Wait, there. It will take a few seconds. I'm not going to make any cuts.
Please, editor, don't cut. See that? It's analyzing my files here.
It's because I did a lot of exercises, I put a lot of files there, so it will take some time, see? It took about 15 seconds here. All right?
So, I already have my local repository, I already have a repository on my machine . Want to see that it created it? You'll say: "Oh, but nothing changed here.
" It changed. Look, if you open HTML CSS, first it already created Git Attributes, the license which is MIT, and it already created the README I sent. And another thing, you'll say: " Man, but you said that in a local repository it keeps creating copies of your site's versions.
" Yes, it's right here. Click on show hidden items. Look at the folder it created.
Point git, which is exactly the local repository. If you go in here, you'll have a series of folders. Don't touch these folders, but the purpose of this point git here is precisely to keep copies of your projects, right?
Just what I said in the first video of this chapter, okay? If by any chance you're really confused here, I recommend you watch the first video again, then come back here and continue, alright? I know, I know that everyone who has a YouTube channel keeps bothering you to subscribe to the channel, to like the video, to send a comment, but know that this is very important and I'll be another one of those people.
Man, if you believe in the Curso em Vídeo project and these classes are helping you a lot, help us by leaving a like, sharing on your social networks, and leaving an encouraging comment on this video. This really helps us with a factor YouTube calls engagement. And the more engagement we get, the greater the video's reach, the more it's shown to the community.
So, look, please help us out, it costs nothing, takes no time at all, and you help us a ton in the process. So, alright, it's already created here. And what is it recommending?
What is my GitHub Desktop recommending here? What it's recommending is that I publish my repository. What does it mean to publish my repository?
It means taking all these files it found and pushing them here, look, publish. It will push them to my GitHub, right? So, I'll enter the name of the process here.
Keep the exact same name, it already included the description too. And here's another important thing, look. If you keep this checked as the default , it means you don't want other people to see your code.
So, if you want your repository for this HTML course to be private, just for you, you keep this checked. I always recommend, when we're studying, sharing information with colleagues. So, if by chance you want to show your code to other colleagues or show it to someone, you'll have to uncheck this, because you can only share it when it's not private.
Also, if we want to host our site, as we intend to, you will have to uncheck this option, okay? So, uncheck it and click on publish. So, look, it's right here, it's actually taking all my files here, see.
It's compressing the files and will send them over to GitHub. It's pushing to the cloud what I mentioned earlier. It's taking everything local on my machine, all my projects, all my repositories, everything stored inside the HTML CSS folder, everything we've done up to here in the first 17 chapters, it's pushing to GitHub.
See, look? It's pushing to Origin. Whenever that word "Origin" appears, Origin is GitHub, okay?
It's where it's going. So , it's sending it here, 75%, just a few more seconds. This process can also be slow, depending mainly on your internet speed, but it's sending it all up there .
That's because I have folders that contain videos, right? Remember how we've been learning a lot of things? All of that is going to GitHub right now, at this exact moment.
Well, maybe not this one, right? In a little while, if by any chance what I mentioned happens, you lose your hard drive or your machine simply disappears, gets stolen, or catches fire, you have all your files on your GitHub. Look at the great advantage of this, okay?
So, see, it's still sending. And there goes another file, look. There are 176 files .
It's probably sending a video right now, look. It's going through already. Alright, hang on.
Wait a second. And that's it, man. It's done.
From now on, we have all our files over on GitHub. So now you can do whatever you want on your machine and it will keep them updated on GitHub. In the next video, we'll learn how to keep it updated, because we're going to have to commit a lot of things.
See that? We're going to use this commit button here quite a lot . So let's take a look there to see if my project is really there.
So I'll open the browser, I'll open github, github. com. Here it will open directly to my repository, look.
It's already showing here, look. You can click on your little photo and click here on the first line, okay? It will open your repository.
Here it is. I already have, look, repositories. One, which is the one we just created.
You might say, " But I didn't create anything on the site. " GitHub Desktop did that for you. You'll click here on repositories and right here, HTML and CSS, HTML5 and CSS3 course from Curso em Vídeo.
When you click on HTML, CSS, just look at this, man. Look at this here. All your challenges, all your exercises.
Including, look, I'll open here, look, challenge. I'll open challenge 10, which was the one we did in the previous lesson, and I'll open here, look. There's your HTML file.
It's important to say the following: if you click here on Android, you won't see the site, you'll see the code, okay? Later, further on, I'll teach you how to use GitHub Pages, which is a feature of GitHub, so you can see the site, okay? Relax.
For now, we just pushed the file over there. Let me close this part here. For now, all our codes are here.
So, from the moment you want to share what you've done with a colleague , it's right here, github. com/ in my case, professorguanabara/htmlcss. If someone accesses this here, they will see it, look.
See that? Challenges, exercises, and three files. It's exactly what I have in my study folder here.
Challenge, exercises, and three files. This doesn't go to the remote directory, right? This stays on our machine here, because this is our local repository and this is our remote repository, correct?
So, look, in this video we learned how to take a project we've been working on for a long time and turn it into a local and remote repository. I hope you're managing to do it at home. And if by chance you didn't, man, watch the video again and follow the steps.
There's no point in rushing everything. Just keep going, watch the video, pause for a bit, and do a step. Play the video again, see another step, pause the video, go there and do it, deal?
So that's it, we have a date for the next video, where we will continue working with local and remote repositories in our HTML CSS course material. A big hug and see you next time.
