Introduction to Git with HTML and CSS
Tags: git, html, css, beginners
Published: 2022-07-26 04:37:58

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.)

![Changing the directory on a terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6vc8h5jqe01ofkk4far.png)

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
```

![Run git command git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az0ma4dzq9wawsza68sd.png)

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.

![Welcome screen of VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v1r6w52841eiq1bct8r.png)

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:

![Run git command git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ztc5wt10rqd0lj48cb.png)

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. 

![Run git command git add .](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw5bhgao1l4uc627dkaf.png)

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"
```

![Run git command git commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh81j2qjsums2pueea6i.png)

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.

![Initial state of the form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/966z6o4y5ml3jptf383a.png)

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.

![Styled form document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3xy7ok6j3czu8lyw4ox.png)

Let's commit them using Git again. 

First, `git status`. 

![Run git command git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkse9qyk0e21rcsvc06g.png)

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.

![Run git commands git add index.html and then git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoy2h4zvtdhcsd56ta6b.png)

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. 

![Run git command git commit with a message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6mv073487przcsv1hzn.png)

Let's use `git status` one more time to see what is the current status.

![Run git command git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i4sm0qi7ynde18exvcn.png)

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"
```

![Run git command git add style.css then git commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p5kbjlqf9cgxmdgthfv.png)

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.

![Run git command git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv5a4w0ycttwt8fk2c6h.png)

### Bonus: git log ###

We can see all the commits that has been done in this folder using another command, 
```
git log
```

![Run git command git log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uki8zro0vx6704766o6y.png)

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.