Git is a version control system. As of writing this article, it is the most commonly used one among developers. With Git, you can track changes made to your files, see all the history and revert back to a specific change if things go unexpectedly. It is also great for collaboration with others.
Let's dive in.
Set up your Git first
For this exercise, we are going to build a simple form with HTML and then style it a little bit with CSS. Then using Git, we will save the versions of the files.
Let's create a folder on the desktop and name it simple-form.
After that we will run our terminal and change directory into this new folder.
cd Desktop/simple-form/
(You have to indicate the path you created your folder at.)
Then we will initiate Git. This will be our first Git command. We will run this specific command only once to initialize the Git on this folder (and any sub folders and files)
git init
We see a message that says "Initialized empty Git repository in..." which is the expected response.
Your first commit, tracking files
We will open VSCode and start creating the files. If you are using it for the first time, you will see the welcome screen.
Let's click on "Add Folder" and select the folder "simple-form".
Once the folder is open, we can create a new file and name it index.html. Then let's create another file and name it style.css. We will first commit these empty files so we can start keeping track of them with Git. After that we will start coding and then keep track of those changes too.
The commands we are going to use are:
- git status
- git add
- git commit
- git log
git status
In your terminal, let's run the command:
git status
We see there is a response with quite useful information given:
Let's start with "No commits yet". This means we have not made any commits yet in this branch. The following message indicates that there are untracked files which means there are new files that we did not let Git know about. You will see some file names in red color. That means Git have no idea about what is going on in these files.
Lastly, the message "nothing added to commit but untracked files present (use "git add" to track)". That is exactly what we are going to do.
git add
git add .
This command produces no response, which is good.
This git add command adds the files indicated to the stage area. The dot is a shortcut for all files. You can either specify file names that you want to add i.e git add index.html or if you want to add all files together you can use the dot like we did.
What does adding files to stage mean? It means these files are prepared to be committed. Git can track and follow changes only if the files are committed. To be able to commit files, we need to at them to the stage with git add.
git commit
Last step is to use the command git commit. This command is usually used with a message where you can indicate the change happened with a brief description. In our example, we just created our files. So we can simply run the command with the message "create html and css files".
git commit -m "create html and css files"
My message is what is inside the quotation mark. This message will be associated with the commit so that I can find the commit easily if I need to later on. This is a human readable text and it should tell you briefly about what you did in that commit.
We are actually done with Git tracking our files and changes. Every time we make a change, we will follow the same steps and update our new changes. So let's code some actual stuff and track those changes too.
Start coding the form
Let's add a boilerplate to the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
We can change the title of the document to Simple Form.
<head>
...
<title>Simple Form</title>
</head>
Then we will start building the form.
<body>
<form>
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<button type="submit">Submit</button>
</form>
</body>
For now, it will be a simple form that asks for a first name, last name and an email with a button to submit. You should have a site like this.
Let's start with a simple styling. But before, in the index file, let's connect our style file to the index file. In the meta tag, add the following <link> tag.
<head>
...
<link rel="stylesheet" href="style.css">
...
</head>
Let's add some styling to our form, labels, inputs and the button.
form {
max-width: 980px;
min-width: 320px;
}
label {
text-transform: uppercase;
}
input {
box-sizing: border-box;
display: block;
width: 60%;
margin-bottom: 18px;
}
button {
background-color: #1da1f2;
border: none;
border-radius: 10px;
color: #f5f8fa;
width: 60%;
padding: 6px;
}
OK, the end results should look like this. This is good enough for a simple form.
Let's commit them using Git again.
First, git status.
This time we see a different message than the first time we ran git status. That is because Git is now able to track these files. What it is saying right now is that there are "changes that is not staged to commit" yet.
Let's add them one at a time this time, using git add.
git add index.html
git status
We know that a successful git add does not produce any response. But we can still use git status to see what happened.
We can see from the new message that index.html file is listed under changes to be committed section and its color is green, indicating that we can use git commit and it will commit the index.html file only. It is important to add a message to our commit too. Let's do that.
git commit -m "add form with three fields and a submit button"
Our commit is successful. We have committed all the changes on the index.html file and Git is up to date with the latest changes.
Let's use git status one more time to see what is the current status.
We now only see style.css file and nothing about index.html file. That is because there has been no change since the last commit to that file.
Let's add the style file to the stage and then commit it too so Git is also up to date with style.css file as well.
git add style.css
git commit -m "style the simple form we built"
We can see from the short message that this commit was also successful. We are now done with adding our changes and committing them with Git.
If you do git status again, you can see that it says "nothing to commit, working tree clean". This means all the files in this folder is up to date with Git and there are no changes made since the last commit.
Bonus: git log
We can see all the commits that has been done in this folder using another command,
git log
You can see a list of every commit made, their SHA code, who made the changes along with their email address, when the changes was and the commit message entered when committing. This command is very useful. There are a lot more to git log but for now it is great to list the information about all the commits made.
Top comments (0)