---
# System prepended metadata

title: Building Your First Web Page with HTML and Git

---

**Introduction**

HTML (which is short for HyperText Markup Language) is the standard language used to create and structure web pages. It is made up of elements or tags that render the various parts of a webpage, such as headings, paragraphs, images, links, tables and forms, amongst others. HTML has evolved through different versions (or stages of development) and is currently at version HTML5. HTML is a forgiving language, in that, web browsers can interpret and display HTML code even if it contains errors or missing elements. However, proper syntax should be learned and practiced to avoid any bad results.

Git, on the other hand, is a distributed version control system installed on a local computer and used for execution of a software development project. The functions of Git include tracking changes that happen during a software development project and supporting collaboration among a team of developers. The collaboration and version control are made possible through the additional use of GitHub, which is a web-based platform that combines the contributions made by individual developers working on the same project.

Version control is important because it helps developers track changes, collaborate efficiently, and manage code versions effectively. Other importance of version control includes the security of the project as backups are provided in case of broken codes, code reviews and to avoid mistakes.

**The project setup**

The project setup entails following a structured folder approach. This could include creation of a project root folder, followed by the css (Cascaded Style Sheets) and images sub-folders within the root folder, depending on your choice of design for the project. You can achieve this using the following commands on a Ubuntu/Linux local computer's command prompt:

`mkdir my-website`

`cd my-website`

`mkdir css images`

`touch index.html`

The commands above will create the folder, **‘my-website’**, and sub-folders, **‘css’** and **‘images’**. Also, **index.html** is created with the last command `touch` as the home page that eventually links to a CSS file and images located in their respective sub-folders.

It is then necessary to initialize your Git using the command git init.

Next is to enter your HTML tags and content for your first website as shown here:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>First Website</title>
    <meta charset="UTF-8">
    <meta name="author" content="Mr. Plang Gabriel Damwesh">
    <meta name="description" content="First website development project">
    <meta name="keywords" content="HTML">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- The head area -->
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    <hr />
    <main>
        <h1>Welcome to my first website</h1>
        <section>
            <article>
                <figure>
                    <a href="https://www.blockfuselabs.com" target="_blank"><img src="images/plang.png" width="200" alt="Logo"></a>
                    <figcaption>Plang Gabriel Damwesh<br />Student at Blockfuse Labs</figcaption>
                </figure>
                <p>Websites are built using HTML elements and content to inform the viewers of what they are all about.</p>    
            </article>    
        </section>
        <hr />
        <section id="about">
            <article>
                <h2>About the author</h2>
                <p>This section is to tell you about the author of the website.</p>
                <p>Mr. Plang Gabriel Damwesh is a passionate student of web2 web development at Blockfuse Labs.</p>
            </article>
        </section>
    </main>
    <hr />
    <footer>
        <p>2025 &copy; First website.</p>
    </footer>
</body>
</html>
```

The above HTML code will cause the web page, when loaded, to show a navigation menu section at the top, then a welcome message with a title, then a picture displayed with a caption, followed by section for information about the author and, finally, the copyright information at the bottom.

**Using Git for version control**

There are a few commands to be used to help track changes made to your project files and folders. They include: command for staging your project work and command for committing or storing them to your Git storage.

**For staging:** `Git add <filename or filenames separated with a space>` or `Git add . `to stage all the content of your project directory.

**For committing:** `Git commit -m “adds the first web page files first time”`

It is important to always add the message in the double quotes for committing to your Git in a present continious tense as it helps with understanding what is being updated.

**Pushing code to GitHub**

The code for pushing to GitHub for the first time is always found on the GitHub project repository’s page. In order to push the above HTML code for the web page created above, a repository was created on my GitHub account with the name **first-web-page** (located [here](https://github.com/dgplang/first-web-page)) and commands for first time pushing would be found there as shown in the picture below.

![repo](https://hackmd.io/_uploads/rkdWWA3uyx.png)


**To create the main branch:**

`git branch -M main`

**To create a remote origin for the branch on the remote repository:**

`git remote add origin git@github.com:plang76/first-web-page.git`

**To push files to the remote repository on GitHub for the first time:**

`git push -u origin main`

Subsequently, pushing to GitHub is done using the `push` command since a connection has now been established between your local computer and the GitHub platform.

**Conclusion**

In this article, we learned the fundamentals of HTML, Git and version control, as well as how to set up a basic web development project.

While HTML is the standard language used to create and structure web pages, Git is a distributed version control system which plays a crucial role in tracking changes and enabling colloboration in software development.

Finally, the project setup process involves creating a structured folder hierarchy, including directores for CSS and images. The Git workflow includes, initializing Git for version control, staging, committing and pushing to add to your codebase hosted on your GitHub repository. This ensures efficient project management and collaboration as these skills are being mastered.