# Building Your First Web Page with HTML and Git ## Introduction What is HTML? HTML stands for HyperText Mark-up Language and is the basic foundation of web pages. Content in your web pages are created using HTML. It basically allows you to structure and display content in your webpage. For years now, I have been hearing word like git, github, repo among others from software developers around me and I had no idea what they were talking about until now. The first thing we’re going to explore is the question of what exactly git is. Git is a version control system that helps you track changes in your code. As an amateur graphics designer, I know I use the Ctrl + Z feature a lot and that’s usually because I sometimes find that I do not like how an element looks or fits in with my overall design. Think of git as the ultimate Ctrl + Z tool. In this case however, it functions on a much larger scale and if used well, can be used to help you manage every single new block of codes added to your entire project. This is especially important as its ability to help you save snapshots of your work and revert to previous versions should something go wrong makes it perfect for collaboration which, let’s face it, is an inevitable occurrence in the world of software development. Ofcourse there are other version control systems out there but currently, git is the most widely used version control system and for a budding developer, it is a tool that will make your journey a lot smoother if you learn to use it well and early too! ## Setting Up the Project I’m about to get a little technical at this point, so be sure to follow closely. If you are new like me (I literally just learned this last week), you should get your pc or device out and booted up at this point. Doing is definitely learning, in this case! ### Step 1: Create a Project Folder First, you need a place to store your project files. Open your computer’s terminal or command prompt and create a new folder for your project: ```bash mkdir my-first-webpage cd my-first-webpage ``` This creates a folder named `my-first-webpage` and navigates into it. ### Step 2: Initialize a Git Repository Next, initialize a Git repository to start tracking changes. Run the following command: ```bash git init ``` This creates a hidden `.git` folder in your project directory, which Git uses to store version history. ### Step 3: Create the First HTML File Now, create your first HTML file. Use a text editor like VS Code, Sublime Text, or even Notepad. Name the file `index.html`: ```bash touch index.html ``` This file will serve as the entry point for your web page. ## Writing the HTML Code ### Step 1: Basic HTML Structure Open `index.html` in your text editor (I highly recommend VS Code. I initially started with Sublime Text and it was quite difficult for me to navigate) and add the following code: ```html <!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 using HTML.</p> <p>Check out <a href="https://www.example.com">this link</a> for more information.</p> </body> </html> ``` In case you’re really a total beginner all the above all look like gibberish to you here’s what each part of the code above does: - `<!DOCTYPE html>`: Declares the document type as HTML5. The eclamation mark just befor the ‘DOCTYPE’ is a strong warning to your browser to treat this document as an HTML5 document and nothing else. This declaration type is case sensitive, so make sure the ‘DOCTYPE’ is in all caps but the ‘html’ is lower-case. If however you make a mistake here, your code will still be rendered in your browser, as HTML5 is considered a most-forgiving language, unlike XHTML. - `<html>`: The root element of the HTML document. It is very important to wrap your entire code in this tag or you may run into errors. - `<head>`: Contains metadata like the page title and character set. This is very important for a lot of reasons, not the least of which is that it helps optimaze your webpage for search engines as well as instruct your browser on the capabilities of your webpage, including the use of special characters like emojis, which contributes greatly to brightening up your webpage. - `<body>`: Holds the visible content of the web page. This also has a very important role to play. Anything not wrapped in this tag will not display on your webpage. - `<h1>`: A heading element for the main title. This tag is for the main title but there are 5 other headings ranging from <h2> to <h6> that gets progressively smaller. - `<p>`: A paragraph element for text content. This is a container for everything text, alsthough it may also conatin links and images if their special attributes are used. - `<a>`: A link element to navigate to another page. This can also be used to link to another section of the same webpage. ### Step 2: View Your Web Page Now for the most exciting part! Save the file and open it in a web browser. You can do this by double-clicking the file or dragging it into your browser window. You should see a simple page with a title, a paragraph, and a link. Congratulations if you followed this step by step, Newbie! You can now call yourself an amatuer web developer! Don’t worry. Stick with me and you’ll soon be a professional web developer at this rate! ## Using Git for Version Control Remember what I said earlier about Git and Github? I hope you were able to succesfully initialize and connect your Github repository by following the steps I gave. Now, you remeber that git is used to track changes you have made to your file, right? With the creation of your first webpage above, there have been new changes to your file. In order to save/commit these changes, you should stage them first, commit them and then push to your Github repository. Remeber, this can get technical, so try to follow along and practice as you learn. As one of my tutors likes to emphasize, coding is all about practice, practice and more practice. ### Step 1: Stage Your Changes After writing your HTML code, it’s time to track the changes with Git. First, check the status of your repository: ```bash git status ``` You’ll see that `index.html` is untracked. To stage it for commit, run: ```bash git add index.html ``` ### Step 2: Commit Your Changes Next, commit the changes with a meaningful message: ```bash git commit -m "Create initial HTML structure for the web page" ``` This message part is important. This saves a snapshot of your project. Just imagine if you commit your change with just letters like ‘Cc’. And then you commited a whole lot more changes with just letters because you’re feeling just a tad bit lazy to type out a meaningful, descriptive message. Two months down the line, you or your teammate needs to branch out a make some changes on a particular file. This is the point where you’ll end up regretting that momentary laziness as you’re almost guaranteed to have forgotten what all these changes were in the first place. That being said, please use a meaningful message to commit your changes. You can view your commit history with: ```bash git log ``` ### Push Your Code to GitHub #### Step 1: Create a GitHub Repository If you want to share your code or back it up online, you can use GitHub. Go to [GitHub](https://github.com) and create a new repository. Follow the instructions to link your local repository to GitHub. It’s pretty easy, thanks to GitHub Docs!. #### Step 2: Connect and Push Run the following commands to connect your local repository to GitHub and push your code: ```bash git remote add origin https://github.com/your-username/your-repo-name.git git branch -M main git push -u origin main ``` Replace the URL with your GitHub repository’s URL. Your code will now be available on GitHub! ## Conclusion Wow! What a journey! If you have followed me all through, Newbie then congratulations are in order! You’ve built your first web page using HTML and learned how to track changes with Git. You now know how to: - Create a basic HTML structure. - Use Git to stage and commit changes. - Push your code to GitHub This is just the beginning. If you continue on this path, the world is literally your oyster! And don’t forget the words of my instructor: coding is all about practice, practice and more practice! Take it from me (professional software developer-in-transit) the more you build, the more confident you’ll become. Happy coding!