# A beginner friendly article on creating your first web page
This is a detailed article on creating your first web page with Html and Git. Creating your first webpage is an exciting step into the world of web development, By combining HTML and Git, you can not only build a basic webpage but also manage and track changes efficiently. I'll try my best to make this article beginner friendly by giving detailed explanations where neccesary.
**Prerequisites**
Before getting started, ensure you have the following installed:
* Ubuntu OS (or another operating system with a terminal for running commands)
* A Text Editor (VS Code, Sublime Text, or any preferred editor)vs
Download VS Code https://code.visualstudio.com/download
* Git (Download from git-scm.com)
* A GitHub Account (For hosting and collaboration)
**What is HTML?**
Hypertext Markup Language (HTML) is a language used to create web pages. It tells web browsers how to display content on a page. HTML's history began in the 1980s and 1990s with Tim Berners-Lee, a physicist at CERN
**What is Git?**
Git is a free, open-source version control system (VCS) that tracks changes to computer files. It's used to manage source code in software development.
**What is Github?**
GitHub is a cloud-based platform that allows users to store, share, and collaborate on code, web pages, and other content. It's a popular tool for software developers and other professionals who work with code.
**Reasons why Git is important**
* Git allows developers to see the entire timeline of a project's changes.
* It allows developers to work together, even in different time zones.
* Git allows developers to safely propose changes to production code.
* Git allows developers to revert to older versions of the code to undo changes.
* Git allows developers to branch existing source code to build new projects.
**How to create a project folder**
There are two ways to go about this its either you use your terminal, or the graphical user interface and i will be explaining both then you can stick to the any that works for you.
**how to create a folder from your terminal using commands**
**Ctrl + Alt + T** = to open your terminal (by default your present working directory will be you Home)
**ls** = to list the content of the directory your're in.
**cd </directory name>**= to change ditectory from your Home to any directory you want to create the new folder in then a followed by the directories name, note that the terminal is case sensitive.
**mkdir </directory name>**= this command creates new directory, so when you write mkdir followed by the new folder/directory name.
**touch </directory name>** = this command creates a new file in the already created folder but remember to change directory to the new folder before running the touch command.
**code .** = To open your Visual studio code from your terminal
Here's a picture to illustrate the processes
 This image explains the terminal commands propperly from the image the folder is named html-lesson and the file is index.html
 This image displays our folder on visual studio code.
**Creating a folder using the Graphical User interface(GUI)**
* Anywhere of choice, whether the desktop or the folders right click for a pop-up menu, select new, then select new folder to create the folder.
* Name the folder immediately or right click on it to rename it to the desired name.
* Then right-click and open with your text editor then open the file there.
**After creating your folder and file we'll dive into writting some code.**
every html code contains;
* DOCTYPE declaration: Tells the browser which version of HTML is being used, like "<!DOCTYPE html>" for HTML5.
* <html> tag: The root element of the HTML document, containing all other elements.
* <head> section: Holds metadata about the page like title, character set, and links to external stylesheets.
* <`title`> tag: Defines the title of the webpage, displayed in the browser tab.
* <body> section: Contains the visible content of the webpage, including text, images, and links.
* Html 5 semantics
There are other tags like:
<p></p>, <h1></h1> - <h6></h6>, <div></div>,`<br>,<em></em>,<ul></ul>,<ol></ol>
```
<!DOCTYPE html>
<html>
<head>
<title>my first web page</title>
</head>
<body>
<header>
<h1>
welcome to my first page!
</h1>
<ul>
<li><a href="#home">Home</a></li>
</ul>
</header>
<section id="home">
<div>
<h1>Welcome to Our Landing Page</h1>
<p>Your success starts here.</p>
<a href="https://3lla.com>Learn More</a>
</div>
</section>
<footer>
<p>© 2023 Your Company. All rights reserved.</p>
</footer>
</body>
</html>
```
This example contain the listed tags, html5 semantics and some other attributes.
**How to initialize a Git repository**
Inside your project folder, open a terminal and run the following command to initialize Git:
`git init`
This command sets up a new Git repository in your project directory, allowing you to track changes, commit updates, and push your code to remote repositories.
Check the Status
To see which files are untracked, run:
`git status`
Add and Commit Your Files name.
To stage your changes and commit them:
`git add index.html`
`git commit -m "Initial commit"`
It is important you use meaningful commit messages that explains what you're doing on the code base. they should be clear and simple. Example
* "Updated heading content"
* "Created first paragraph"
**Pushing to GitHub**
Create a GitHub Repository:
* Go to GitHub
* Click on "New Repository"
* Name it my-first-webpage or anything related to what you're working on
Follow the instructions to link your local project.
git remote add origin https://github.com/your-username/my-first-webpage.git
git branch -M main
git push -u origin main
This uploads your project to GitHub
a graphical representaion of every thing about git as explained
 This explains all the git commands from the initializing stage to the pushing stage
 this shows the new repo in your remote device
**Conclusion**
Congratulations! You’ve created your first webpage with HTML and managed it using Git. From here, you can explore more html tags, and more advanced Git features for collaboration.
Sign in with Wallet
Connect another wallet