# BUILDING YOUR FIRST WEB PAGE WITH HTML AND GIT
**INTRODUCTION**
Building your first webpage can be an amazing experience for an aspiring developer; but to start this, the developer must gain the basic knowledge and understand the technicalities involved in carrying out this task of building, hence HTML.
**HTML**
HTML is an acronym for HyperText Markup Language. HTML is the building block of every webpage. It is the code that is used to structure a web page and its content. This is strictly presentational. It is worthy to note that HTML is not a programming language but a markup language, which means that it is only used for creating web pages, and the only language the browser understands;
Whereas programming languages help us modify data.HTML has a simple, text-based structure that is easy for beginners to learn and understand.
The first thing displayed on a HTML webpage is the declaration <!DOCTYPE html>. This tells the browser which type of HTML this is written in. It is not a tag, but the standard doctype for html5.
The HTML has only two “children”, that is the `<head></head>` and the `<body></body>` elements.
For example:
```
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Content</p>
</body>
</html>
```
The head element contains the title of the web broswer and metadata, and has nothing to do with the output in the brower. On the other hand, the body carries the actual markup that is going to be displayed on the browser e.g, headings, text and images.
(below is an image of a basic structure of HTML tree). 
The elements are the building blocks of every HTML because, they are specific instructions. Every element has three components which are the opening tags <>, the content, and the closing tags </>. The content is usually displayed on the browser. It is worthy to note that elements are written in small letter cases; examples of elements are: 
in the HTML example above, the first element we see is `<div>`, which wraps around the other elements. Div is one of the most common HTML elements and is a simple way to separate a page into sections.Divs are semantic elements because it helps developers to structure their webpages. Semantic HTML helps us to quickly see or read the different sections in a webpage and navigate to those sections.
Some elements are self-closing meaning that they do not carry any content and are referred to as void or empty elements. Examples of these empty elements are `<br>`, `<hr>` and `<img>`. Some elements called attributes provide additional information to the browser and are only used in the opening tags for example the class, src, value, href, target, etc.
**GIT**
As a developer, your files which are the most important part of your project are usually stored on your computer and there is the need to project them from being lost or corrupted, hence Git.
Git is a version control system that is commonly used by developers. Git tracks the changes you make to files, so you have a record/history of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source. In simple term, Git is used by developers to store and collaborate on code.
It is worth noting that git and github are not thesame things. Git is used to do work locally (on your computer), while github is a remote platform for work collaboration. In otherwords, Github makes the tools that use git.
There are two options to using Git.
1. The Terminal where you write commands and
2. General User Interface (GUI)
In the terminal, you will be able to see the command that is being run, while in the GUI you can’t see the command being run. Some commands you can use while on the terminal includes:
* git init: Initializes a new Git repository.
* git clone [url]: Makes a copy of a remote repository to your local machine.
* git status: Shows the current status of your working directory and staging area.
* git add [file]: Stages a file to be committed.
* git commit -m "message": Commits the staged changes to the repository with a message describing the changes.
* git push: Pushes your changes to a remote repository.
* git pull: Pulls the latest changes from a remote repository.
* git branch: Shows the branches in your repository.
* git checkout [branch]: Switches between branches.
* git merge [branch]: Merges changes from one branch into another.
**The Importance of Git to Developers and Programmers:**
Git is very important to the developer because it helps to track changes.. That is, Git keeps a record of changes made to source code, so developers can revert to previous versions.
Git enhances collaboration by allowing multiple developers to work on the same project at the same time, without conflicting with each other's changes.
Git help to manage projects. Git can handle projects of all sizes, and helps developers manage multiple versions of their work.
Git can help developers to be more efficient and to be able to manage complex projects better.
Git also helps developer to work offline since they have a local copy of the project's history.
**SETTING UP THE PROJECT**
*Creating a project folder:*
Setting up a project requires the developer to start from the basics which is knowing how to create a project folder or a directory. The easiest way of creating a project folder on your computer, is by navigating to the desired location in your desktop, right-click, select "New Folder," and then give the folder a descriptive name related to your project. You can also create a folder using your terminal by typing the command - mkdir "name of the directory/folder". For example, 'mkdir html', will prduce a folder with the name html
*Initializing a Git repository:*
Once you are in that directory you have craeted, a git repository can be initialised using the 'git init' command. This will be:
*$ git init*
This will create a new repository based on the folder you are currently in. A *git* folder should appear in the directory. It is worth noting that git will initially be hidden; you can use the ls - (list) a command to show all hidden files in a directory.This will mean you have a git repository for your project and can start making branches and tracking changes on files you’ve added using git add and git commit.
*Creating your first index.html file*
The index.html file acts as the landing page of a website. It provides the initial structure, ensuring that users are automatically redirected to this page unless a specific file is requested.
Creating an index.html file is a fundamental step in HTML programming and website development. This file serves as the backbone of a basic HTML webpage.
To create a file, open yor VS code or any code editor of your choice, then go to File > New File to create a new file by typing the name of the file and adding .html at the end to show it's a html file. For example: index.html.
**WRITING THE HTML CODE**
The basic structure of the web page will include the document type declaration, the html, the head and the body. This is illustrated below:
`<html>` Tag: This is known to be the root element of the HTML page. It is a tag that tells when a HTML code begins and ends.
`<head>` Tag: This section contains meta-information about the document, such as - title, character encoding, links to external resources etc.
`<body>` Tag: This section contains the main content for the document or webpage, including text, images, multimedia elements, and structural elements like headings, paragraphs, lists, etc.
We will go further to add some basic contents to this structure and also add a link to my hackmd as shown below:
When you go to your browser, you will see something like this:
**USING GIT FOR VERSION CONTROL**
Using Git for version control entails taking advantage of its functionality to track file changes over time, making it simple to revert to previous versions, work with others on a project (collaboration), and manage various development stages by creating and merging branches, basically, creating a comprehensive record of your project's progress.
**Commits:**
A "commit" is a snapshot of your project at a specific point in time, where you save all the changes you've made to your files (developers.redhat.com)
Use git commit -m "Descriptive message" to create a new version with a commit message explaining the changes.
**Staging area:**
Before committing changes, you "stage" them, which means marking specific modified files as ready to be included in the next commit (ourcodingclub.github)
Use git add <file> to stage specific files you want to include in the next commit.
**Branches:**
Different lines of development can be managed through branches, enabling parallel work on features without affecting the main codebase (simplelearn.com).
**Local repository:**
Each developer has a local copy of the project repository, allowing them to work independently and then synchronize changes with the central repository.
**PUSHING CODE TO GITHUB REPOSITORY**
GitHub repository is a storage location for all the code related to a project. With github, you can clone a repository to your computer to add project files, you can make and save changes to files in your repository, which are called commits and each commit has a commit message that explains why a change was made.
To create a github repository, follow these steps:
Firstly, navigate to github.com and click on the plus(+) symbol in the top right corner, then select the ‘New repository‘ option.
On that page, you need to specify a Repository name and a Description (optional).You can also set your repository to be either Public (which must not contain any sensitive data) or Private(whereby you'll manually choose who can access the new repository).
After this step, you’ll be sent to the starting page of your new GitHub repository
**Pushing changes to a remote repository (Github)**
Use *git push* to push commits made on your local branch to a remote repository.
According to (docs.github.com) the git push command takes two arguments:
A remote name, for example, origin
A branch name, for example, main
For instance:
git push REMOTE-NAME BRANCH-NAME
As an example, you usually run git push origin main to push your local changes to your online repository.
Renaming branches:
To rename a branch, you'd use the same git push command, but you would add one more argument: the name of the new branch. For example:
*git push REMOTE-NAME LOCAL-BRANCH-NAME:REMOTE-BRANCH-NAME*
This pushes the LOCAL-BRANCH-NAME to your REMOTE-NAME, but it is renamed to REMOTE-BRANCH-NAME.
If your local copy of a repository is out of sync with, or "behind," the upstream repository you're pushing to, you'll get a message saying non-fast-forward updates were rejected. This means that you must retrieve, or "fetch," the upstream changes, before you are able to push your local changes (docs.github.com).
**CONCLUSION**
In summary, HTML which is short for HyperText Markup Language is the only language the browser understands. It is used for for creating webpages, that is, to display format and elements of a webpage. The html is beginner friendly.
Elements are surrounded by angle brackets<> also called tags. They come in pairs i.e <tagname></tagname>; the start tag and the end tag. The end tag has a forward slash/. Also, there are self-closing tags or empty/void tags which do not have any content between them e.g `<br>.`
Git is an open-source, free version control system (VCS) that monitors source code and file changes. Many software projects, both commercial and open source, make use of it. It helps keep track of our files' history.
Constant practice is a sure guarantee to mastering the fundamentals of building a webpage and becoming a good developer. Learning is a continuous process and should encourage us to never relent in the things we do even when they seem insurmountable.
**REFERENCES**
Web Resources:
https://docs.github.com/en/get-started/using-git/pushing-commits-to-a-remote-repository
[https://ourcodingclub.github.io/tutorials/git/#:~:text=The%20GitHub%20workflow%20can%20be,%2Dpull%2Dpush%E2%80%9D%20mantra.&text=Once%20you've%20saved%20your,online%20copy%20of%20the%20repository).](https://)
[https://www.simplilearn.com/tutorials/git-tutorial/what-is-git
https://ourcodingclub.github.io/tutorials/git/#:~:text=The%20GitHub%20workflow%20can%20be,%2Dpull%2Dpush%E2%80%9D%20mantra.&text=Once%20you've%20saved%20your,online%20copy%20of%20the%20repository).](https://)
Sign in with Wallet
Connect another wallet