5. Tagging and branching

Creating and switching branches

To practice our branching skills, let's add some colors to our Hello, World! page with CSS.

We can think of these changes as a new feature. While you develop the feature, the surrounding code becomes unstable. There might be bugs, and the feature might not work as expected. So, until the feature is ready, we want to keep it separate from the main codebase. This way, we can continue to work on the main codebase without being affected by the changes we're making to the new feature.

Awesome, let's get to it

First, let's create a new branch called style and switch to it.

When you start a new branch, Git makes this new branch point to the same commit as the current branch. This means that the new branch starts with the same code as the current branch. So pay attention to the branch you're currently on before creating a new branch.

In most cases, you'd want to start a branch from your main branch (main in our case). Let's check whether we're on the main branch just in case.

Task

Use the git branch command to list all branches. The asterisk in the output indicates the currently checked out branch.

Awesome, let's create a new branch called style. There are several ways to create branches, but the most convenient one is to use git switch with the -c option (shorthand for --create). This way you create a new branch and switch into it right away.

Run in Terminal:

git switch -c style

Task

Use the git switch command above to create a new branch called style.

Great, we are currently on the style branch. For now, it's identical to the main branch. Let's create a new file called style.css and make our h1 tag red with CSS. Here's how you can do it:

File: style.css

h1 {
    color: red;
}

Task

Create a new file called style.css and add the CSS above to it. Then, add the file to the staging area and commit the changes.

We should also update our hello.html file to include the style.css file. Here's how you can do it:

File: hello.html

<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Task

Update hello.html as shown above. Then, stage and commit the changes.

Great, we've added the initial styling for the page. Now, let's switch back to the main branch and see if the style.css file is still there.

Run in Terminal:

git switch main

Note that there's no -c option here. This is because we're not creating a new branch, but switching to an existing one.

Task

Use the git switch command to switch back to the main branch. Then, list files using the ls command.

As you see, the style.css file is not there. This is because the style.css file is only available in the style branch. This is the power of branches. They allow you to work on different features without affecting the main codebase.

Understood!

Let's switch back to the style branch and see if the style.css file is still there.

Run in Terminal: