Hello World of HTML
Get a computer:
Download Google Chrome
Microsoft Visual Studio Code
Create an account on
Use lowercase letters (not UPPERCASE).
Getting Started with GitHub
Once you are signed in to Github
Click menu -> + and select "New repository".
In repository name put
(Where "username" is your actual GitHub user name.)
Click on "Create repository"
Click on "creating a new file"
In the "Name your file..." box, enter in index.html
Note: We will use the filename "index.html" for most of our web pages. "index" means it is the main webpage in the folder. .html means it is a HTML file. We use all lowercase letters, so it is index.html (not Index.html). Coding is case-sensitive, so we mostly use lowercase.
What was Bill Gates's first tweet?
His first tweet starts with "Hello World".
This is because when we are starting learning a new coding language, it is customary to first get the words "Hello World" displaying on screen.
Click in the "Edit new file" tab
Scroll down to the bottom of the page. In GitHub to save the file we "Commit" it. Committing a file is a bit different to saving, because it keeps a copy of all of our commits, in case we make a mistake and want to go back to a previous version of the file.
Its customary to have the first commit message as "Initial commit".
In the first text box below "Commit new file" write
Click on "Commit new file"
Click on Settings tab
Scroll down to the "GitHub Pages" section near the bottom of the page.
It should say "Your site is published at https://username.github.io/" with a
Click on the link to https://username.github.io
You should now see in your browser a page that says Hello World
If you can see this, congratulations, you are now a web developer. 🎉
Remember this web address for your Hello World page, it will become your homepage, and you will be able to share it with friends and family.
Note: Strictly speaking the page you created isn't properly formatted HTML. However, web browsers are very forgiving and will fix mistakes if they can and guess what you meant. This is one of the reasons why HTML is a good coding language to start with. In lesson 1 we will learn how to properly format our HTML.
Getting Started with Visual Studio Code
Create a new folder called username.github.io in your My Documents folder (Windows) or Documents folder (Mac).
Open Visual Studio Code
Click on Menu -> File -> New File
Copy and paste this code into Visual Studio Code:
<!DOCTYPE html> <html> <head> <title>Hello World</title> <head> <body> <p>Hello World</p> </body> </html>
Click on Menu -> File -> Save As...
Select the folder you created (Click on Documents/My Documents, then username.github.io)
In Save As box type the filename as
(Note: It is customary to call most web pages
Click on the Explorer icon in the top left corner of the screen.
Right-click on index.html and select 'Reveal in Explorer' (or 'Reveal in Finder' on the macOS or 'Open Containing Folder' on Linux).
Open "index.html" by double-clicking on it. It should open in a browser.
Congratulations, you are now a web developer with valid code. 🎉
Go back to Visual Studio Code
Edit the line of code on line number 7 to be
<p>Hello World! Hello World!</p>. Leave the
rest of the code the same.
6 7 8
... <body> <p>Hello World! Hello World!</p> </body> ...
Click on File -> Save, or press or ctrl-s (Windows), cmd-s (Mac).
Go back to your web browser.
Click on the refresh button
The text in the web page should have updated to "Hello World! Hello World!"
You now know how to create and edit web pages in Visual Studio Code.
⬅ Back to tutorials