Hello World of HTML

Prerequisite Tools

Get a computer:

  • Windows, Mac, or Linux operating system (not iPad, not Android.)
  • Less than five years old (so it's within the requirements for running Chrome, and Visual Studio Code)
  • Laptop (not desktop, so you only need to install and configure software once for coding at work, home, school, and cafes.)

Download Google Chrome

Download Microsoft Visual Studio Code

Create an account on Microsoft GitHub. Use lowercase letters (not UPPERCASE).

Getting Started with GitHub

Once you are signed in to Github

Click menu -> + and select "New repository".

Add repository menu option

In repository name put username.github.io

(Where "username" is your actual GitHub user name.)

Entering repository name

Click on "Create repository"

Create repository button

Click on "creating a new file"

Create new file link

In the "Name your file..." box, enter in index.html

Name your file text input box

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

Enter Hello World

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 Initial commit

Click on "Commit new file"

Commit new file button

Click on Settings tab

Settings tab button

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 GREEN background.

          Your page is published at link

Click on the link to https://username.github.io

You should now see in your browser a page that says Hello World

&quotHello World" written in text input box

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

Menu, new file

Click on Menu -> File -> New File

Menu, new file

Copy and paste this code into Visual Studio Code:

<!DOCTYPE html>
    <title>Hello World</title>
    <p>Hello World</p>

Click on Menu -> File -> Save As...

File menu

Select the folder you created (Click on Documents/My Documents, then username.github.io)

In Save As box type the filename as index.html

(Note: It is customary to call most web pages index.html)

Save as

Click Save.

Click on the Explorer icon in the top left corner of the screen.

Explorer icon

Right-click on index.html and select 'Reveal in Explorer' (or 'Reveal in Finder' on the macOS or 'Open Containing Folder' on Linux).

Reveal in Finder context menu

Open "index.html" by double-clicking on it. It should open in a browser.

Hello World web page

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.


    <p>Hello World! Hello World!</p>

Click on File -> Save, or press or ctrl-s (Windows), cmd-s (Mac).

Go back to your web browser.

Click on the refresh button

Refresh button

The text in the web page should have updated to "Hello World! Hello World!"

Updated Hello World web page

You now know how to create and edit web pages in Visual Studio Code.

⬅ Back to tutorials