# Building Your First Web Page with HTML and using Git
Creating your first web page as beginner web developer can be interesting as it is frustrating if you do not know what to do, or how to go about it. The feeling of creating your first ever fully functional web page is ecstatic and has been shared by every developer there is. In this article I will be explaining the process of creating your first web page using only HTML and also using git and GitHub to track and push your web page(code) to a remote repository on GitHub.
Creating a web page requires a user or developer to have very good knowledge and or basic knowledge of HTML. HTML being Hyper Text Markup Language is the bedrock or foundation of every web page. Even though HTML is not classified as a programming language, it is not less important than any other programming language out there. For a language to be classified as programming language, it has to have or be able to render logic and HTML is lacking in that perspective. We won't be diving into that in this very article, we would go straight to what HTML is and writing HTML code for your web page.
**HTML**:
Created in 1991 by Tim Bernese-Lee,HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is responsible for the structuring of web content and also defines the said web content.
To create your first web page, we are going follow a series of steps and instructions that I will be laying down.
1. **Create a project folder**:
To stay organized and keep track of all your web page data, you will create a folder that will house all your web file(code) and all your assets (images,videos,songs) in case you are going to upload any. It is good practice for every project to have an individual folder for that particular project. Note that this folder can be located anywhere on your computer that you are comfortable with.
1.2. **Create HTML file**:
In the folder we created for the project, we are going to create a HTML file with the title "index" and it will be having an extension of dot html (.html). So the full file name will be "index.html" without space in between the file name and the file extension and the reason for having this file named index is because it will be the first thing that the browser reads.
It is good practice to always not leave space in between your file names.If a file name must have a distinction of space; use underscore or dash in place of the space e.g "my_file.html" or use camel casing where the first letter starts with a small letter and the beginning of every new word starting with a capital letter e.g "myFile.html"
Create index.html file
1.3. **What to use to create the file**:
Creating your file can be done using your computer Terminal or Integrated Development Environment (IDE) like Visual Studio Code, PyCharm, Atom, or you could simply use your text editor or notepad but while using notepad or text editor you will remember to save the file as ".html" file.
2. **Writing your HTML code**:
After creating your file and placing it in a folder of your choice, you will go to the folder and open that file using your computer Terminal or IDE
2.1. **Your first lines of code**:
HTML has a standard structure for web pages and all web pages must posses this structure and contain these elements. They are considered the primary or basic core elements of HTML. No matter the length or content of a HTML document, it always has these parts. Here is an example of a HTML document basic code structure;
```
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
```
`<!DOCTYPE html>`: This is a declaration that tells the browser that we are rendering or implementing a HTML document.
`<html></html>`: This element houses our HTML code. It lets the browser to know the beginning and end of our html code.
`<head></head>`: This element contains the title of the web page and meta elements which are read but not displayed by the browser.
`<body></body>`: This element contains the content of our web page that will be displayed.
`<title></title>:` This element carries the title of our web page.
2.2. **Writing your code and content**:
For this article let us say we want to build website about selling shoes; Your code is going to look like so;
```
<!DOCTYPE html>
<html>
<head>
<title>My Shoe Shop</title>
</head>
<body>
<header>
<h1>Welcome to my shoe shop website</h1>
<ul>
<li>Home</li>
<li><a href="#about">About my shoe shop</a></li>
</ul>
</header>
<main>
<div>
<h2><a name="about">About my shoe shop</a></h2>
<p>
Welcome to my web page for selling shoes. Browse through and make a purchase of any shoe
you like. Make sure to enjoy your surfing experience on the web page.
</p>
</div>
div>
<h2>Shoe Categories</h2>
<p>
We have different categories of shoes you can choose from. From sports, casual, business
category and so on.
</p>
</div>
</main>
<footer>
<p>Copyright © My Shoe Shop 2025</p>
</footer>
</body>
</html>
```
3. **Running web page**:
After writing your code in your Terminal or IDE, you will save the file and minimize back into the folder where the file had been save and open the HTML file using your browser. From there you will see the content we structured about the shoe shop web page we built using just our HTML.Looking at the web page you will see that it does not do much and our browser only displays the data we structured in our code.
Displayed web page.
Now that we are done building our first web page, we will use Git and also try to push our code to a GitHub remote repository. Before we go into pushing the web page we built to a remote repository on GitHub, we will first talk about Git and its importance.
**GIT**:
Git is a distributed version control system that is used by developers to organize, track and make changes to their code base and also allowing them to collaborate with other developers and manage different versions of a project.
**Version control** on the other hand is a software engineering practice or engineering practice where engineers or developers record changes to a file or set of files over time so that you can recall specific versions later; these files might not necessarily be typical files, it could be computer programs, developed car models and so forth.
So by Git being a **distributed version control system**, it means that it is decentralized and all members of a group can have an up-to-date copy of a project file directly on their systems.
4. **Using Git**:
To use Git on your local computer, you must first install it on your computer by visiting https://git-scm.com/downloads and downloading the version that is suitable for your operating system and version.
4.1. **Setting up Git**:
After downloading and installing git on our local machine we will have to set it up. This can be done by using our GitHub account email address and user name. This is regarded as setting up your identity. This can be done by opening our terminal and running the following commands;
`$ git config --global user.name "Your Username"`
This command sets up your user name.
`$ git config --global user.email johndoe@example.com`
This command sets up your email address. You will be using the email address used on your GitHub.
After running both commands, you can check and see if the username and email identity were set by running these commands;
`$ git config --global user.name`
This command will display the username that has been set by the user
`$ git config --global user.email johndoe@example.com`
This command displays the email address linked to the git.
This is a one time set up, you need to do this only once if you pass the --global option, because then Git will always use that information for anything you do on that system.
4.2. **Setting your default branch name**(This step is optional):
By default Git will create a branch called master when you create a new repository with git init. From Git version 2.28 onward, you can set a different name for the initial branch.
To set main as the default branch name do:
```
$ git config --global init.defaultBranch main
```
**GitHub**:
GitHub is a remote platform that is being used for version control and it provides room for collaboration with a wide range of developers.
5.**Using GitHub**:
To get on to GitHub you will have to go on to https://github.com/signup to create your account. You can signup by using your email address(if you do not have an account already)
5.1. **Creating your GitHub repository**:
Repositories are GitHub folders or locations that store our various project codes where we can manage them. To create this repository you will navigate on your GitHub account and go to your profile and locate the repositories tab. You will see the "New" green button for creating new repositories and you will click on it.
5.2. **Naming your repository**:
After clicking on the new button you will be directed to were you can name your repository and also set the privacy permission whether the repository can be viewed the public or just you. You can also choose to add a README file; this file describes the content of the repository or project. Always try to name your repositories without spacing the words and remember that repository names are also case sensitive.
Creating and naming your repository.
**Pushing your web page to your GitHub repository**
Pushing your web page, code or projects to a remote repository is modern day good practice for developers. This serves as a backup in case of any mishap with our local machine and it is useful for collaboration.
6.**Initialize your local repository**:
Using your computer terminal or IDE terminal, you will navigate into the folder you created for the shoe shop website using the command "cd" for those using the computer terminal and you can just open your folder using your GUI for those using IDEs and open the IDE terminal to the file directory. Once in the folder where your file is, you will run the following command to initialize it;
`git init`
This command activates the folder as git repository and tells git to track all and any changes from that moment regarding the folder.
6.1. **Staging your files**:
Staging your files requires your adding your files to be tracked by git, you can do this by using these commands;
`git add <file name>`
This command adds a single file to the staging area.
`git add .`
This command adds all the files in the directory or local repository to the staging area.
6.2. **Committing your files**:
Committing your files typically means you are saving your files. At this stage you are still in your local repository and not yet remote. Committing can be done with the command;
`git commit -m "commit message"`
The "-m" in the code signifies message and the double quote houses the commit message we want to use. Always make sure your commit message is meaningful and describes the changes or modifications made to the code in few words, e.g "Initial web page"
6.3. **Setting your branch name**;
By default git uses the branch name "master" but you change this by running the following code;
`git branch -M main`
This command sets our branch name to main
6.4. **Add your repository**:
To add the remote repository of your GitHub to where you will be pushing the code to, you will go to the repository and copy the repository URL. If you have had the SSH key set, you will copy the SSH URL and if not, you will copy that of the HTTP. after that you will attach it to the following command and run it;
`git remote add origin git@github.com:"Your username"/myShoeShop.git`
6.5. **Pushing for the first time**:
Pushing your code is the last step and to push your code to your remote repository, run the following command;
`git push -u origin main`
The "-u" signifies as upstream, it means you are setting the branch as an upstream for pushing your code. The origin just signifies the remote location or repository.
Note that you will only use the "-u origin main" when you are pushing for the first time. Subsequently when pushing your code, you will only `git add`, `git commit -m "commit message"` and `git push`.
Except you are pushing for the first time, it is good practice to always git pull before git pushing your changes.
After pushing you can now go to your GitHub repository and refresh and see the files uploaded.
Being a developer and building web pages entails good knowledge of HTML and its structural elements like I have stated earlier, you will also see that this is paramount and dictates the display of your web pages. From the article your Have learned the importance of HTML, using Git for version control and also GitHub for pushing our projects to a remote repository for backup.
Doing this for the very first time can be confusing, especially with using git and GitHub, but continuous practice makes you better. Note: you do not have to cram or memorize these commands, constant usage will make them commit to your memory and recommend that you do create another web page and push it to a new repository.
Sign in with Wallet
Connect another wallet