# Building Your First Web Page with HTML and Git
In the journey of becoming a software developer, the first topics that you should start with are often HTML, followed by Git and GitHub, or sometimes the other way around. The most important thing is that these two topics are fundamental concepts that you cannot ignore. Skipping them is like building a house without a foundation.
HTML means Hypertext Markup Language. Think of it as the skeleton of a web page. Without HTML, all those beautiful designs you see on the internet will not be possible. From experience, I will tell you that without proper structure of your HTML, your styling will be a disaster, infact, not just styling but also adding JavaScript for interactivity will really be stressful. That is to tell you how powerful a good structured HTML can be. HTML uses elements which consist of opening and closing tags to define contents of a web page. These tags are what is read by the browser, while the contents are displayed to the users. For a start, you don't need to memorize all the HTML elements, but the more you build, you will come across lots of them.
On the other hand Git is a decentralized version control system for tracking changes in computer files. It is a tool that helps you see all the changes you made, and you can easily revert back without losing them. When you hear that Git is decentralized, it simply means that you don't need any server to access it. While working with a team, with the help of Git, you can have the entire code base on your local machine.
It will not be proper talking about Git and leaving out GitHub. GitHub is a remote platform where developers collaborate with each other and host their Git repositories. I have a full article on [Git and GitHub](https://hackmd.io/sNYIhBWyQLKfdtg1VRz8vg). It will help you to get started using Github, from setting it up to pushing your first repository. You can check it out [here](https://hackmd.io/sNYIhBWyQLKfdtg1VRz8vg). So with Git and GitHub, developers can work on the same project.
In the sections that follow, I'll guide you through the process of creating your first HTML Web page and pushing it to Github. By the end of this article, you'll not only understand the HTML syntax but also be able to write basic HTML, and how to use Git and GitHub to share your code.
**Setting Up Your Project**
For this, we will be using the terminal to create our folders and files and use visual studio code for writting our codes.
* Open your terminal by navigating to the terminal on your desktop, or you can simply use the keyboard shortcut
```shell
Alt + ctrl + T
```
* Enter into your Documents folder by using the command
```shell
cd Documents
```
* Remember all these commands are case sensitive. If you are unsure of how the document is spelt. Use the command `ls` to see all the files in your home directory, of which document is one of them.
* When you have entered into the doucment folder, use the command `pwd` to confirm.
* Create the folder that will contain your html document using the command
```shell
mkdir <name of folder>
```
* Enter into the folder using the command
```shell=
cd <name of created folder>
```
* Create an index.html file using the command
```shell
touch index.html
```
To verify that you have created this file, type the command
`ls`. It will display all the files in the folder. For now you should see only index.html. We'll focus on index.html for this tutorial, though you can create additional files later.
If you already have visual studio code installed, type the command
`code .`to open up the created folder and file in vscode. If you don't have vscode yet, please visit [here](code.visualstudio.com/download) to download the one compatible with your machine. There are other code editors, but I recommend vscode as it is beginner-friendly
The image below summarizes all the steps above.
**Writing Your First HTML Code**
**HTML Structure**
Creating an html document follows a defined order. Let's outline the steps below:
* The `<!DOCTYPE html>` Declaration: This is the first line in any html document. It simply tells the browser that you're writing HTML5, which is the latest version.
* The `<html>` element: The next thing on your document should be the opening and closing tag of html, written as `<html></html>`. This serves as a container for every other thing that will be written in this document. It tells the browser that you are writing an html document.
* The `<head>`: The `<head>` contains information about the web page. It also has openings and closing tags, written as `<head></head>`. Every data meant for the head is written within these tags. The information here is primarily for the browser and not visible to the users. The head contains metadata such as author, keywords, viewports, descriptions, etc. This is also where you define the title of your page which appears in the browser tab.
* The `<body>`: The `<body>` element has the opening and closing tag. It is within this body that everything you wish to display on your page is written. Anything not within the body is not displayed.
**Adding Content to Your Page**
Let's go ahead and talk a little about basic elements that you can use to display contents on your page.
* Headings: Headings are like titles and subtitles. We have heading 1 to heading 6, written as `<h1>, <h2>, <h3>` and so on. `<h1>` is the biggest while `<h6>` is the smallest.
* Paragraphs: Paragraphs as the name implies is used to display text on a web page. We use `<p> `tag to create a paragraph.
* Links: Links are used to navigate to different parts of a web page. It is also used to navigate to other pages on the internet. We use the `<a>` tag to create links
* Images: We use the `<img>` tag to display images on a web page. To display an image, the `<img>` tag takes an attribute called `src` (source), which takes the image location as a value.
* The `<ul>` and `<ol>` are used to create unordered and ordered lists respectively. The `<li>` tag is nested within these tags, containing the content for each list item.
There are many HTML elements which we might not be able to cover in this article. I recommend checking out my article on “[*Learning the building blocks of the web*](https://hackmd.io/A93nE1HnQzedMkPL6Nc3qg)”. It contains a lot of information that will help you solidify your html skills. There are also many tutorials online that will expose you to everything HTML. You might not be able to cover up all the elements, but you will definitely gain a lot of knowledge from them.
Now let's combine everything we've discussed into a code
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Web Page</title>
</head>
<body>
<h1>Chinemerem</h1>
<h3>I am learning how to build my first web page</h3>
<p>Hello, world! This is the beginning of my web development journey.</p>
<p>
This is my first web page! I'm so excited to be learning HTML and version
control
</p>
<h2>Things love to do</h2>
<ul>
<li>Reading</li>
<li>Cooking</li>
<li>Travelling</li>
<li>Soccer</li>
<li>Hiking</li>
</ul>
<h2>Lists of countries I would to visit</h2>
<ol>
<li>Japan</li>
<li>Canada</li>
<li>Germany</li>
<li>china</li>
<li>Nigeria</li>
</ol>
<img
src="https://shorturl.at/lV2H5"
alt="cats"/>
<br />
<a href="https://hackmd.io/@chinemerem">Follow to view different my articles</a>
</body>
</html>
```
**Using Git for Version Control**
This is where things get interesting. How do you enable Git to track the changes you just made to your index.html? How do you get your code from your local machine to GitHub? I believe by now you have set up and configured your Git and GitHub. If you are yet to do so check out my [article](https://hackmd.io/sNYIhBWyQLKfdtg1VRz8vg) to get it done.
Let's get started
* At the top left menu of your vscode, click terminal and open a new terminal.
1. Initialize empty Git repo using the command
```shell
git init
```
This command initializes a hidden empty git repository that stores all the version control information.
2. Staging Changes: Staging a file is allowing Git to have access to that file and be able to track all the changes made to it. To stage your html file, use the command
```shell
git add index.html
```
After staging the file the first time, if you make further modifications to the file, it must be staged again. Failure to do so means that the new changes will not be reflected when it is pushed to GitHub.
3. Committing changes: Committing a file is just like telling Git, this file is ready to be pushed to GitHub. To do this use the command
```shell
git commit -m “<a commit message>”
```
The -m here is a flag that allows you to write a commit message.
**Pushing Your Code to GitHub**
Before you can push your code to GitHub, you need to create a GitHub repo and link it to your local repo. Follow the steps below
1. Go to your Github profile
2. Click on “Repositories”, then “New”
3. Enter your repository name. Ensure to make it public.
4. Click on “create repository”
After you have created your repository, it will bring up an interface similar to the one below. From the image, you can see that step 1-4 has been done already.
5. Set your default branch to main using the command
```shell
git branch -M main
```
This command synchronizes the GitHub default branch and your local branch.
6. Add a remote origin. Adding a remote origin links your local repository to the remote repository you have on GitHub.
7. Copy step 6 from your own page and paste on your terminal.
```shell
git remote add origin git@github.com: marycynthia2020/html-for-beginners.git
```
You can verify that an origin has been added by using the command
```shell
git remote
```
The output origin confirms that it has been successfully added.
8. To push the repo to GitHub, use the command
```shell
git push -u origin main
```
The `-u` flag which is a short form of `--set-upstream` establishes a connection between your local branch and remote branch. It is needed the first time you push to a new branch. Subsequent pushes can be done with the `git push` command.
**Conclusion**
If you followed this article from the beginning till now, congratulations! You did not just create your first web page, you also pushed it to Github using a version control tool, Git. So let me say, you are already on your journey to becoming a seasoned developer. With the foundation you have gained here, you can start exploring and try recreating the structures of different web pages you encounter and pushing them to GitHub. This is the only way to become familiar with HTML and version control. Practice, as they say, makes perfect and consistency is key. Go online, explore different resources, there are many available to help you solidify your knowledge and become a better software developer.
**Resources**
Learning the Building Blocks of the Web: My HTML Learning Takeaways
https://hackmd.io/A93nE1HnQzedMkPL6Nc3qg
My Git and GitHub Learning Experience: A Beginner-Friendly Guide
https://hackmd.io/sNYIhBWyQLKfdtg1VRz8vg
Sign in with Wallet
Connect another wallet