# BUILDING YOUR FIRST WEB PAGE WITH HTML AND GIT Hello, It's your favorite Ch3fdev from Blockfuse Labs. In this article, I will be walking youb through the topic: **Building your First Web Page with HTML and Git**, it's gonna be an awesome and educative read. Enjoy!!! ## Introduction Welcome to the world of web development! We'll explore 'how to create your very first web page using HTML and manage your project with Git' in simple steps. **HTML, or HyperText Markup Language**, is the standard markup language for documents designed to be displayed in a web browser. It is used to structure your content for the web, hereby allowing you to add headings, paragraphs, links, and many more. **Git** on the other hand, is a distributed version control system, which means that it helps you track the changes which you applied to your files over time. Using Git is crucial because it allows you to: * Keep a history of your project's evolution. * Collaborate with others by managing different versions of your code. * Easily undo changes or go back to previous states (versions) of your project. ## Setting Up the Project To set up the project, you will need to follow the steps below: 1. **Create a Project Folder**: Start by making a new directory on your computer. Right-click on your desktop or file explorer, select "New Folder," and name it something like MyFirstWebPage. Note: there is what we call "Naming convention" i.e a set of rules in naming something. In most programming languages, we have: a. Snake case (like this: my_first_web_page) b. Camel case (like this: myFirstWebPage) c. Pascal case (like this: MyFirstWebPage) d. Kebab case (like this: my-first-web-page) I would advice that you adopt one method. I choose the camel case. 2. **Initialize a Git Repository**: Open your terminal or command prompt, navigate to your new folder using cd MyFirstWebPage, and then initialize Git by typing: **git init** This command creates a .git directory in your folder, which will track all changes. 3. **Creating the First HTML File**: In your project folder (myFirstWebPage), create a new file named index.html. This will be the main page of your website i.e the first page. **Writing the HTML Code** HTML is relatively simple and straightforward, once you understand the syntaxes (rules). Here's how to structure a basic web page: ``` <!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 paragraph and it meant for to showcasing text on my page.</p> <a href="https://www.anything.com">Link to anything</a> </body> </html> ``` **Here is the meaning and function of the above elements**: ```<!DOCTYPE html>``` declares that this document is an HTML5 document. ```<html>``` wraps all the content on the entire page. Infact, everything on the webpage will be encoded into this opening tag. ```<head>``` contains meta information about the document, like the title seen in the browser tab. ```<body>``` includes all the visible contents of the document like headings ```<h1>```, paragraphs ```<p>```, and links ```<a>```. ## Using Git for Version Control Now that you've made your first HTML file, let's use Git to track these changes: 1. **Staging Changes**: Add your new file to Git's staging area with: ```bash``` ```git add index.html``` 2. **Committing Changes**: Commit your changes with a meaningful message: ```bash``` ```git commit -m "Initial commit```: Added basic HTML structure" Commit messages should be concise yet descriptive, helping you and others understand what changes were made. 3. **Pushing Code to GitHub** (Optional for Advanced Students) If you're ready to take a step further: ###### a. Create a GitHub Repo: Go to GitHub, sign in, and create a new repository. Give it a name, description, and decide if it's public or private. ###### b. Connect Your Local Repo to GitHub: In your terminal, link your local repo to your GitHub repo with: ```bash``` ```git remote add origin <your-ssh-or-https-url>``` ###### c. Push Your Changes: Push your local commits to GitHub: ```bash``` ```git push -u origin master``` This ```-u``` extension sets up tracking, so future pushes can be simpler. ## Conclusion You've now learned how to create a basic web page with HTML and use Git to manage your project's versions. This foundation is essential for anyone diving into web development or software engineering: ***HTML*** gives you control over the structure of web content. ***Git*** provides you with the tools to keep your project organized and collaborative. The best way to master these topics is through practice. Try modifying your web page, adding more elements, or even learning CSS for proper styling. Each step you take in version control and web development will make you more proficient. Happy coding guys!!!