BUILDING MY FIRST WEB PAGE WITH HTML AND GIT INTRODUCTION In this article, the tools we're going to focus on for building our first webpage are HTML and GIT. HTML The acronym HTML stands for Hyper Text Markup Language. It is the standard language used to create and structure content on the web. HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers. HTML is the most basic building block of the web. It defines the meaning and structure of the web content. Hypertext refers to links that connects the web pages together which can be within a single web or from one web to another. This language uses markup to annotate text images and other content for displaying in a web browser. Examples of some of these markup elements are `<head>`,`<header>`, `<title>`, `<body>`, `<footer>`, `<article>`, `<section>`, `<p>` (paragrahp), `<div>` (generic container) just to mention but few. These elements are either empty or self closing elements(example includes `<img>`, `<br>`) or the closing tag elements (examples are `<div>``</div>`, `<p>``</p>`) Note: That in HTML, the naming conventional should be stricly lower case for these elements. Other tools needed to create a web page include the web browser (google chrome, firefox), Text editor, Visual studio code (VS code). In a nutshell, HTML is all about organizing and displaying information on a webpage. We can think of it as the bones or structure of a webpage. Here is a basic code example of HTML. <!DOCTYPE html> <html> <head> <title>FirstWebpage</title> </head> <body> <h1>Hello World</h1> <p>Welcome, this is my first webpage with HTML and GIT</p> </body > </html > GIT Git is a distributed version control system (VCS) that helps developers to track changes in their code base, collaborate with other users and manage multiple versions of a project. Simply put, Git is use to back up a code. Git is decentralized, which means it does not require a central server. Instead, every devoloper has a full copy of the repository or repo on their machine. A repository or repo can be a digital file that allow developers to make changes on their code, allows different users to work on the same project without stepping on each others toe. It also stores all your files and keep track of changes that are made on the file or project that your working on. It span across one person to even giant companies like google, microsoft, facebook. Having said all that, why is GIT important? - Git is the most widely used version control system, enabling tracking of changes to files and easier collaboration among multiple users. - Git can be accessed via a command line or through a desktop app with a graphical user interface, such as Sourcetree. - A Git repository contains all project files and their complete revision history, which is stored in a .git subfolder. - Git allows users to 'stage' and 'commit' files, enabling them to choose specific pieces for version tracking and updates. - Online hosts such as GitHub and Bitbucket can be used for storing a copy of the Git repository, enabling smoother collaboration with other developers. - Git also supports branching and merging, allowing concurrent development workflows and providing robust tools for handling conflicts during merges. SETTING UP THE PROJECT Before the commencement of our project, we'll need to; 1. Set up a project directory (folder) 2. Create the first index.html file 3. Learn how to initialize Git repository SETTING UP THE PROJECT DIRECTORY This folder will contain all the necessary files needed in setting up our webpage. Here, the approach we'll be considering in creating our directory is the use of the Terminal. A terminal is essentially a text-based user interface for interacting with computers. It allows users to execute commands and view the results, as well as control applications running on the computer. Why is Terminal important in this case? Using a terminal provides a powerful and efficient way to interact with computers. In comparison to graphical interfaces, terminals provide quick access to all available commands, making it easier and faster to perform complex tasks. Terminal also enable users to work directly with any part of the system, including files, processes, memory locations and other resources. Furthermore, terminals allow users to automate routine tasks through scripts, helping them save time and energy. Having said that, lets create our directory with the name 'FirstWebpage' using the steps below. 1. The command line for activating a terminal (for linux) is 'Ctrl + Shift + T' and press enter 2. Followed by 'mkdir FirstWebpage' (mkdir means make directory) 3. Next command is 'cd FirstWebpage' (cd means change directory) 4. Confirm working directory by typing 'pwd' (pwd is present working directory) 5. After confirming present working directory, it should look like this /home/john/FirstWebpage NOTE: Ensure that you press enter after typing each of the command line. Find below a simple illustration on the steps for creating a directory. john@john-W240HU-W250HUQ:~$ mkdir FirstWebpage john@john-W240HU-W250HUQ:~$ cd FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ pwd /home/john/FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ CREATING THE FIRST index.html FILE After creating and confirming our directory (FirstWebpage), we'll need to create our file name index.html So, we'll continue from where we stop (/home/john/FirstWebpage). To create the file, type the command 'touch index.html' and press enter It should look like this; john@john-W240HU-W250HUQ:~$ mkdir FirstWebpage john@john-W240HU-W250HUQ:~$ cd FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ pwd /home/john/FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ touch index.html john@john-W240HU-W250HUQ:~/FirstWebpage$ INITIALIZING GIT REPOSITORY Initializing a new repository: git init To create a new repo, you'll use the git init command. git init is a one-time command you use during the initial setup of a new repo. Executing this command will create a new .git subdirectory in your current working directory. This will also create a new main branch. Before we initialize a new git repository, we'll have to open our file (index.html) on a code editor. In this case, we'll be using Visual Studio code (VS code). From where we stopped (touch index.html), type the command 'code .' and press enter. This will automatically redirect us to our code editor (VS code). This will display a platform where we can start creating our first webpage. It should look like this john@john-W240HU-W250HUQ:~$ mkdir FirstWebpage john@john-W240HU-W250HUQ:~$ cd FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ pwd /home/john/FirstWebpage john@john-W240HU-W250HUQ:~/FirstWebpage$ touch index.html john@john-W240HU-W250HUQ:~/FirstWebpage$ code . john@john-W240HU-W250HUQ:~/FirstWebpage$ To initialize our git repository, we'll have to open the terminal on our visual studio by pressing 'Ctrl + ~' Next, we type the command 'git init' and press enter. See below how to initiate. john@john-W240HU-W250HUQ:~/FirstWebpage$ git init Initialized empty Git repository in /home/john/FirstWebpage/.git/ john@john-W240HU-W250HUQ:~/FirstWebpage$ To check the status of git, type 'git status' hn@john-W240HU-W250HUQ:~/Documents$ git status On branch master No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) index.html nothing added to commit but untracked files present (use "git add" to track) john@john-W240HU-W250HUQ:~/Documents$ WRITING THE html CODE In writing the HTML code, we'll Start with the basic structure, including <!DOCTYPE html> , <html> </html> , <head> </head> , and <body> </body> . Then, populate the body with our content. We'll go ahead to add our basic html elements as seen below. <!DOCTYPE html> <html> <head> <title>FirstWebpage</title> </head> <body> <h1>Hello World</h1> <p>Welcome, this is my first webpage with HTML and GIT</p> <p>Follow me on<a href="https://x.com/DSpanky005/">Twitter</a></p> </body > </html > NOTE: Ensure to press 'Ctrl + S' to save your work. USING GIT FOR VERSION CONTROL Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. It allows you to revert selected files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also generally means that if you screw things up or lose files, you can easily recover. Git is a version control system that you download onto your computer. It is essential that you use Git if you want to collaborate with other developers on a coding project or work on your own project. In order to check if you already have Git installed on your computer you can type the command 'git --version' in the terminal or visit the git website to install. HOW DOES GIT TRACK CHANGES? In order to save different versions of our project in Git, we will make commits. What is a Git Commit? A commit is a version of your project. It represents a standalone version of your project and has a reference to all the files and folders that are a part of that version. How Do I Make a Commit in Git? In order to understand how we make a commit we need to learn about three different spaces inside Git — the working directory, staging area, and commit history. The working directory is basically represented by the contents of our project folder (hint: a directory is the same thing as a folder). It is sort of like a work bench, where we can add, edit, and delete files in our project. The staging area and commit history are part of our repository. The staging area is sort of like a rough draft space. It is where we can add updated versions of files or remove files in order to choose what we want to include in our next commit (version of our project). In the .git folder the staging area is represented by a file called index. And finally the commit history is basically where our commits live after they’ve been made. In the .git folder the commit history is represented by a folder called objects. To add the untracked or unstaged files to the staging area, we type the command 'git add 'file name' and press enter. In this case,index.html is our file name. Therefore, our command will be git add 'index.html' as seen below. john@john-W240HU-W250HUQ:~/FirstWebpage$ git add index.html john@john-W240HU-W250HUQ:~/FirstWebpage$ To check the status of git add, type git status john@john-W240HU-W250HUQ:~/FirstWebpage$ git status On branch master No commits yet Changes to be committed: (use "git rm --cached <file>..." to unstage) new file: index.html john@john-W240HU-W250HUQ:~/FirstWebpage$ To commit changes, type git commit -m 'comment' (The comment explains what change you made to your project.) john@john-W240HU-W250HUQ:~/FirstWebpage$ git commit -m 'First commit' [master (root-commit) c6a90c2] First commit 1 file changed, 10 insertions(+) create mode 100644 index.html john@john-W240HU-W250HUQ:~/FirstWebpage$ git status On branch master nothing to commit, working tree clean john@john-W240HU-W250HUQ:~/FirstWebpage$ NOTE: Commit keeps track of all the changes made in the project. As we can see in our terminal above, 1 file changed, 10 insertions(+) We can also tracked histories of commits by typing git log john@john-W240HU-W250HUQ:~/FirstWebpage$ git log commit c6a90c2a9ad1fd55758c4e7ce030c7ebb46138b0 (HEAD -> master) Author: johnD-git005 <johndakshak@gmail.com> Date: Sat Feb 1 22:43:59 2025 +0100 First commit john@john-W240HU-W250HUQ:~/FirstWebpage$ NOTE: The history displayed the author of the project and date in which the changes (commits) were made. In this case, the github username (johnD-git005) and email (johndakshak@gmail.com) is displayed as the author of the current project. This can be achieved by creating a Git and GitHub account. CONCLUSION Congratulations to us on completing our first web page using HTML and Git! This achievement marks a significant milestone in our web development journey. By creating a functional web page, we have demonstrated our understanding of HTML fundamentals. Our experience with Git has also equipped us with essential version control skills. We can now efficiently manage changes and maintain a record of our project's evolution. This proficiency will serve as a solid foundation for future web development projects. As you continue to learn and grow, remember that practice is key to improving your skills. Keep building, experimenting, and pushing yourself to try new things. This will further improved your skills, increased confidence, Enhance problem-solving skills, better understanding of web development concepts and preparation for more advanced topics.