You have successfully built the skeleton of your website with HTML and painted it beautifully with CSS. Right now, those files are sitting securely on your computer. But what happens if your computer crashes? And more importantly, how do you actually show your new website to the world?
In the Developer Tools category of WorldTera, this is arguably the most important tool you will ever learn. GitHub is the industry standard for saving, tracking, and sharing code. Whether you are building a personal blog or working at a massive tech company, GitHub is the central hub where all the magic happens.
What Exactly is GitHub?
To understand GitHub, you first need to understand Git.
Git is a version control system. Imagine playing a video game where you save your progress right before a big boss fight. If you lose, you don’t have to start the whole game over—you just reload your save. Git does exactly this for your code. It tracks every single change you make. If you break your website on a Tuesday, you can use Git to travel back in time to Monday when everything was working perfectly.
GitHub is simply a website that hosts your Git files in the cloud. It takes your “saves” from your local computer and stores them safely online so you can access them from anywhere, share them with friends, or show them to potential employers.
Step 1 – Create Your GitHub Account
Before you can start saving your code to the cloud, you need an account.
- Head over to GitHub.com.
- Click the Sign Up button in the top right corner.
- Follow the cosmic-themed prompts to enter your email, create a strong password, and choose a username.
- Verify your email address.
WorldTera Pro-Tip:
Choose a professional username! Your GitHub profile acts as your coding resume. Most developers use a variation of their real name or a clean, recognizable alias.
WorldTera Pro-Tip: Choose a professional username! Your GitHub profile acts as your coding resume. Most developers use a variation of their real name or a clean, recognizable alias.
Step 2 – Create Your First Repository
A Repository (or “Repo” for short) is just a fancy word for a project folder. Every new website or app you build gets its own repository.
Here is how to create your first one to hold your HTML and CSS files:
- Log into your new GitHub dashboard.
- Click the green New button on the left side of the screen (or the + icon in the top right).
- Repository Name: Type something simple like my-first-website.
- Description: Add a quick note, like “Learning to code with WorldTera”.
- Public vs. Private: Leave it on Public. This means anyone on the internet can see your code (which is great for building a portfolio).
- Initialize with a README: Check this box! A README file is simply the instruction manual for your project.
- Click the green Create repository button.
Congratulations! You just created your first official developer workspace in the cloud.
Step 3 – Upload Your HTML and CSS Files
While professional developers use terminal commands to push code to GitHub, the platform has a fantastic drag-and-drop feature that is perfect for beginners.
- Open your new my-first-website repository on GitHub.
- Near the top of the file list, click the Add file button.
- Select Upload files from the dropdown menu.
- Open the folder on your computer where you saved your HTML and CSS files.
- Drag and drop your files directly into the web browser.
Step 4 – Make Your First "Commit"
In the GitHub world, saving is called a Commit. When you upload your files, you need to leave a little note explaining what you changed or added. This helps you keep track of your progress over time.
- Scroll down to the Commit changes box below your uploaded files.
- In the first box, write a short summary like “Added initial HTML and CSS files”.
- Click the green Commit changes button.
Your code is now officially backed up to the cloud. You can access it from any computer in the world!
Step 5 – Make Your Website Live (Free Hosting)
This is the most exciting part. GitHub has a hidden superpower called GitHub Pages. It will take the HTML and CSS files you just uploaded and turn them into a real, live website that anyone can visit—for absolutely free.
- In your GitHub repository, click on the Settings tab (the little gear icon near the top right).
- On the left-hand sidebar, scroll down and click on Pages.
- Under the Build and deployment section, look for Source and ensure the dropdown is set to Deploy from a branch.
- Just below that, look for the Branch section. Click the first dropdown menu and select main (this is the main branch of your code).
- Leave the second dropdown set to / (root).
- Click Save.
Now, wait about two minutes. GitHub is working behind the scenes to build your website. When you refresh the page, you will see a banner at the top providing you with a live URL (it usually looks something like yourusername.github.io/my-first-website).
Click that link, and you will see your code live on the internet.
Why This Matters
You have just reached a significant milestone in your software development journey. You aren’t just writing code on your local machine anymore. You have learned how to use version control, safely store your work in the cloud, and share your code with the world using the exact same tools that professionals use every single day.
