In this project, you are going to take the index.html page you made in the previous step and turn it into an actual website. You’ll be using a thing called Github pages to get this right.
GitHub is a web-based platform that handles a lot of things that are important to coders. It does quite a lot of different things, but we’re just going to get into the basics for now.
If you work hard to write some code on your computer and then your computer breaks then all your hard work would be gone. That would be terrible. The first bit of value Github gives you is free backups.
You can upload your code to GitHub and it’ll keep it safe for you. It will even keep track of different versions of your code. This becomes useful if you work on big projects with multiple people.
GitHub has a cool feature called Github pages. If you upload your code then Github will turn your code into a live website. Your website will get a nice free URL, and anyone with an internet connection would be able to visit that URL to see your work. So cool!
Here we go:
Go to the Github website and create an account.
Important: When choosing a Github username be sure you choose something nice and memorable. You can use your real name or something playful, it doesn’t matter too much.
here is a video demonstration of how to create a GitHub account.
Repo is short for repository. You can think of it as a folder or directory.
Follow this guide to create a repository for your website.
From now on you’ll be able to interact with your repo by navigating to it in your browser.
If your username is mysteryElephant320 and your repo name is first-website then you would be able to see your repo at: https://github.com/mysteryElephant320/first-website
Make sure you can find your repo whenever you want to.
In the previous step of this challenge, you made an HTML file called index.html. Follow this guide to upload it to your repo.
The guide might have a few confusing words. I’ll define them briefly here:
You’ll be asked if you want to add your code to the main branch or if you want to create a new branch. Branches are cool, trust me, but we aren’t going to get into them right now. Just choose “main branch”
Once you have filled in the form you can save your changes by clicking on the “commit” button.
Navigate to your repo and make sure you can see a file named index.html. Make sure that the contents are what they should be. You can click on the file to see what is inside.
You’ll now use Github pages to host your website on the web.
Github pages are a really powerful thing and they can be configured to do all kinds of cool stuff. We’re going to use the simplest setup possible :)
This guide will take you through the process. You can also use the following video demonstration for reference.
You’ll be asked to choose a publishing source. You’ll just use the main branch and the root directory.
Once you have set your website up you’ll be able to visit it in your browser.
If your repo is available at https://github.com/mysteryElephant320/first-website, then your webpage will be available at https://mysteryElephant320.github.io/first-website/.
Navigate to your website. Does it look the way you expected?
Note: Sometimes it can take a few minutes for the website to go live. If it’s not working then wait a few minutes and check again.
We have also created some video demos to walk you through some of the steps above:
Once your website is up and running you can submit this project.
Please submit the link to your live website by using the Project Submission form.
Once you have handed in your work then we’ll mark it. It’ll take a few minutes. If you followed the instructions then you’ll get a positive review and you’ll get to move on to the next step.
If you didn’t follow instructions or you missed something then you’ll be given feedback about what to fix. If there is something to fix then:
index.html file on your device and sort out ALL the problemsNote: You won’t be allowed to continue to the next step until ALL the changes have been addressed.
If you’ve gotten to this point then you’ve learned a lot. If you like dancing, give yourself a moment to dance.
You have learned: