24. Creating a Branch

Goals

To learn how to create a local branch in the repository

It is time to make our hello world more expressive. Since it may take some time, it is best to move these changes into a new branch to isolate them from master branch changes.

01 Create a branch

Let us name our new branch "style".

Run:

git checkout -b style
git status

Note: git checkout -b <branch name> is a shortcut for git branch <branch name> followed by a git checkout <branch name>.

Note that the git status command reports that you are in the style branch.

02Add style.css file

Run:

touch lib/style.css

File: lib/style.css

h1 {
  color: red;
}

Run:

git add lib/style.css
git commit -m "Added css stylesheet"

03Change the main page

Update the hello.html file, to use style.css.

File: lib/hello.html

<!-- Author: Alexander Shvets (alex@githowto.com) -->
<html>
  <head>
    <link type="text/css" rel="stylesheet" media="all" href="style.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Run:

git add lib/hello.html
git commit -m "Hello uses style.css"

04Change index.html

Update the index.html file, so it uses style.css

File: index.html

<html>
  <head>
    <link type="text/css" rel="stylesheet" media="all" href="lib/style.css" />
  </head>
  <body>
    <iframe src="lib/hello.html" width="200" height="200" />
  </body>
</html>

Run:

git add index.html
git commit -m "Updated index.html"

05 Next

We now have a new branch named style with three new commits. The next lesson will show how to navigate and switch between branches.