# Building Your First Web Page with HTML and Git
**Introduction**
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the structure of web pages by using a variety of tags and elements. Git, on the other hand, is a distributed version control system (VCS) that helps developers track and manage changes to their codebase. It’s essential for collaborating with others and keeping a record of multiple versions of a project. Git allows developers to track changes, manage code, and collaborate on projects with ease.
In this guide, we’l walk you through the steps of creating a simple web page with HTML and tracking changes using Git. By the end of this tutorial, you’ll have a basic understanding of HTML, Git, and how to use them together to build and manage a simple web page project.
**Setting Up the Project**
The first step in creating your web page is setting up your project folder. This folder will contain all of your project files.
**Create a Project Folder**
1. Start by creating a new directory (folder) for your project using the following command in the terminal (Command Prompt or Git Bash) mkdir assignment and navigate to this directory cd assignment
2. Create the index.html File
Inside the project folder, create a new file called index.html. You can use the following command to create the file touch index.html
After completing these steps, you should have a project folder called "assignment" with an index.html file inside.
**Initializing Git**
Now that your project folder is set up, the next step is to initialize Git to track changes in your project.
1. Initialize Git
In the terminal, run the following command to initialize a new Git repository:git init. This command will create a .git folder in your project directory, which Git uses to track changes.
2. Check the Status
To see the current status of your project, run, git status This command shows you the files that have been modified, files that are staged for commit, and files that are untracked (not yet added to Git).
Creating the First Web Page with HTML
With Git initialized, let's create a simple HTML web page.
**Basic HTML Structure**
Open the index.html file in a text editor and add the following basic HTML structure:
<!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>Welcome to My First Web Page!</h1>
<p>This is a simple web page created with HTML.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
**This code creates a simple web page with a heading, a paragraph, and a link.**
Using Git for Version Control
Now that we’ve added some HTML content, let’s track the changes with Git.
1. Staging and Committing Changes
Before committing any changes, we need to stage the index.html file. To do this, run,git add index.html This command moves the file from the working directory to the staging area, preparing it to be committed.
2. Committing the Changes
Once the file is staged, commit the changes using the following command:git commit -m "first commit"
The -m flag allows you to write a commit message. It's important to write clear and meaningful commit messages to describe what was changed.
3. Check the Status Again
You can run the following command to confirm the commit was successful:git status
**Pushing Code to GitHub**
If you want to share your project with others or back it up online, you can push it to a remote repository, such as GitHub.
1. Create a GitHub Repository
* Go to GitHub and sign up for an account if you don’t have one.
* Once logged in, create a new repository by clicking the "New" button.
* Give your repository a name (e.g., MyFirstWebPage) and set it to public or private, depending on your preference.
2. Connect Local Repository to GitHub
After creating your GitHub repository, run the following commands to link your local repository to the GitHub repository
git branch -M main
git remote add origin https://github.com/yourusername/MyFirstWebPage.git
3. Push the Changes to GitHub
Finally, push your changes to GitHub: with this command git push -u origin main
This command uploads your local commits to the GitHub repository, making your project accessible online.
Conclusion****
Congratulations you’ve successfully created your first web page using HTML and tracked your changes with Git. Here’s a quick recap of what you’ve learned:
1. HTML is used to structure content on the web.
2. Git helps you track changes and manage different versions of your project.
3. You created a simple web page with basic HTML tags.
4. You learned how to stage, commit, and push changes using Git.
The key to becoming proficient in web development and Git is practice. Keep building more web pages, experimenting with new HTML elements, and using Git to track your progress. The more you practice, the better you’ll get
Sign in with Wallet
Connect another wallet