Welcome to My First Webpage!

<h1>HowHow to Create Your First Webpage Using HTML and Track Changes with Git,(Beginner friendly)</h1> 1.Introduction When starting your journey into web development, HTML (Hypertext Markup Language) is the first language you’ll need to learn. HTML is used to create and structure content on the web. Whether it's text, images, or links, HTML provides the basic framework for building a webpage. Along with HTML, another tool you should familiarize yourself with is Git. Git is a version control system that helps developers track changes in their code. It’s essential because it keeps a record of every change you make, so you can go back to previous versions if something goes wrong. Version control ensures that your code is well-managed, especially as your projects grow and become more complex. In this article, I'll guide you step-by-step on how to create your first webpage using HTML and also track your progress with Git. 2:Setting Up the Project Before diving into coding, you'll need to set up a project folder and initialize Git to track your work. Here's how you do it: i: Create a Project Folder also known as directory on the linux terminal: First, choose a location on your computer where you want to store your project. Create a new folder called "my-first-webpage" (or any name you prefer). ii: Initialize a Git Repository: Open a terminal (Command Prompt or Git Bash) and navigate to the folder you just created. Run the following command to initialize a Git repository: command:git init This command creates a new Git repository in your folder. Now, Git will track any changes you make in this folder. iii: Create the First index.HTML File: Inside your project folder, create a new file called index.html. This will be your first HTML file, which will display your webpage in the browser. You can create this file using any text editor, such as Notepad (Windows), TextEdit (Mac), or code editors like Visual Studio Code. 3. Writing the HTML Code Now, it’s time to start writing your HTML code. Let’s build a simple webpage with basic elements. HTML Structure: Open your index.html file and start with the basic structure. Here’s the skeletal structure of a HTML page: ``` <!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My First Webpage!</h1> This is my first attempt at creating a webpage using HTML. <a href="https://www.example.com">Click here to visit a website</a> </body> </html> ``` Explanation of the Code: ``` <!DOCTYPE html>: This tells the browser that the document is an HTML5 page. <html>: This tag wraps all the content of your webpage. <head>: Contains metadata about the webpage, like the title. <title>: The title of your webpage, which appears in the browser tab. <body>: This is where the content of your webpage goes, like headings, paragraphs, and links. <h1>: A heading tag for the main title of your page. : A paragraph tag, used for any text content. <a href="URL">: A link tag, which allows users to click and go to another webpage. ``` 4. Using Git for Version Control: i:Staging and Committing Changes Once you've written some code for your webpage, it's important to track the changes using Git. Version control allows you to keep a history of the changes you've made, so you can easily go back to earlier versions or review your progress. Let's look at the steps involved in staging and committing your changes. a:Staging Changes with git add: Every time you make changes to your project, Git needs to know what to track. To do this, you "stage" your changes by using the git add command. This tells Git which files you want to include in your next commit. For example, if you’ve made changes to the index.html file, you would run the following command in the terminal: command:git add index.html This stages the changes to index.html, but hasn’t saved them yet. Think of it like putting the changes in a basket, ready to be saved. You can also stage all the files in your project folder at once by running: command:git add. The . (dot) represents all files, so this will add every change made in the folder. b:Committing Changes with git commit: After staging your changes, you need to "commit" them. Committing saves the staged changes and creates a snapshot of your project at that moment in time. This is the point where Git tracks the changes permanently. To commit your changes, you use the following command: command:git commit -m "Your commit message here" The -m flag is used to add a message that describes the changes you've made. A commit message is important because it explains what was changed and why, which will be helpful when you look back at the history of your project. For example: command:git commit -m "Add basic structure to index.html" This message is clear and helps you remember that you added the basic structure to the index.html file. ii:Writing Meaningful Commit Messages: Writing good commit messages is a crucial part of version control. A well-written commit message can help you and others (if you're working on a team) understand the changes made without having to look at the code itself. Here are some tips for writing meaningful commit messages: Be descriptive: Explain what the commit does in simple terms. Instead of just "fix", try something like "Fix bug in contact form submission". Keep it concise: The message should be short but clear. Ideally, commit messages should be no longer than 50 characters. Use the imperative mood: Commit messages are often written in the imperative form, as if you’re telling the codebase what to do. For example, "Add header to index.html" instead of "Added header". Avoid generic messages: Try to avoid vague messages like "Update files" or "Make changes". These aren’t helpful in understanding what was actually changed. Here are a few examples of good commit messages: "Fixed typo error in homepage heading" "Added link to the footer of index.html" Viewing Your Commit History: After making several commits, you may want to review your changes. To do so, you can check the commit history with the git log command: command:git log This will show a list of all the commits you’ve made, including the commit ID (a long string of numbers and letters), the author, the date, and the commit message. Example: commit ID: 45f5c7d7fa1e53cb45a32c1bb2139bde1d7bd8ed Author: Your Name <ofohachinemerem@gmail.com> Date: Wed Feb 2 14:22:53 2025 -0500 commit message: Added link to the footer of index.html With these Git practices, you’ll be able to manage your code changes efficiently, collaborate with others, and keep your project organized. Commit messages act as a helpful log that tells the story of your project’s development over time. 5. Pushing Code to GitHub Once you have your code tracked with Git locally, it’s a good idea to upload it to GitHub for backup, collaboration, and sharing. GitHub is a platform for hosting your code repositories online. Let’s walk through how to create a GitHub repository, connect your local repository to GitHub, and push your changes. a:Creating a GitHub Repository: Before you can push your code to GitHub, you need to create a repository on GitHub. Here’s how: Go to GitHub and log into your account (or create one if you don't have one yet). Once logged in, click on the plus “+” icon in the upper-right corner and select New repository. Give your repository a name, such as "my-first-webpage". Choose whether you want the repository to be public or private. You can leave the other options at their default settings, then click Create repository. Now, you’ve created a repository on GitHub where you’ll push your code. b:Connecting Your Local Repository to GitHub: Now that you have a GitHub repository, you need to connect your local Git repository (the one on your computer) to it. To do this, you’ll use the GitHub repository’s URL. Here’s how to link them: In the terminal, make sure you're in the project folder (the one with your index.html file and Git repository). Run the following command to add the GitHub repository as a remote source: command line:git remote add origin https://github.com/your-username/my-first-webpage.git Replace your-username with your GitHub username and my-first-webpage with the name of the repository you just created. You can verify the connection by running: command:git remote -v This will display the URLs of your remote repositories, confirming that the connection is set up correctly. c:Pushing Changes to GitHub: Once your local repository is connected to GitHub, you can push your changes to the online repository. This will upload your local commits to GitHub, allowing you to access your code from anywhere and share it with others. To push your changes, use the following command: command:git push -u origin master This command pushes your commits from your local master branch to the master branch on GitHub. The -u flag sets the upstream, meaning Git will remember this for future pushes, so you can simply use git push next time. If you make additional changes and want to push those as well, you can run the following sequence of commands: command:git add . command:git commit -m "Updated content on the webpage" command:git push Confirming Your Code on GitHub: After running the git push command, go to your GitHub repository page, and you should see the files from your local project there, including index.html. If everything is set up correctly, your changes should be visible online. By pushing your code to GitHub, you're not only backing it up but also making it easier to collaborate with others or share your project publicly. GitHub also gives you a platform for managing issues, creating branches, and deploying your projects to the web. 6. Conclusion We have completed the first steps in creating your webpage and learning how to track changes with Git! In this article, you’ve learned how to: i:Create a basic webpage using HTML, understanding the core structure of an HTML document, including tags like <html>, <head>, and <body>. ii:Use Git for version control, including staging and committing changes, as well as writing meaningful commit messages to keep track of your progress. iii:Push your code to GitHub, ensuring that your work is backed up online and easily shareable with others. By following these steps, you’ve not only built your first webpage but also gained valuable experience in managing your code using Git and GitHub, essential skills for any developer. The key to improving your web development skills is practice. Keep experimenting with new HTML elements, try adding more interactive features, and use Git to track and manage your progress. as a newbie, don't be afraid to make mistakes,they are part of the learning process! As we continue learning and creating, remember that web development is a journey, and every small step will bring you closer to becoming a skilled developer. Keep coding, and most importantly, have fun with it!