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
https://www.google.com/chrome/

Download Microsoft Visual Studio Code
https://code.visualstudio.com/download

Create an account on Microsoft GitHub. Use lowercase letters (not UPPERCASE).
https://github.com/

Getting Started with GitHub

Once you are signed in to Github

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

In repository name put username.github.io

(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

Enter Hello World

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"

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

Not working? Gotcha? Not saying your site is published?

If the link is not showing check the name of your repository. Does the first part match your username exactly? Coding is very specific, even one letter wrong and it won't work. Scroll to the top of this settings page and rename your repository to username.github.io where username is your exact username (not the word 'username', not the example username 'louiechristietest').

You will also have to select your GitHub pages source as master branch

It should now say "Your site is published at https://username.github.io/" with a GREEN background.

If says "Your site is ready to be published ..." with a BLUE background Your page is published at link then wait until it says "Your site is published at https://username.github.io/" with a GREEN background.

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. 🎉

Not Working? Gotcha? Showing Old Webpage?

Go to menu top right hand corner of screen on a laptop / desktop computer, and click on Account -> Your repositories

Click on your repository name e.g. username.github.io

Click on Settings tab

Scroll down to the "GitHub Pages" section near the bottom of the page.

It should now say "Your site is published at https://username.github.io/" with a GREEN background.

Click on the link e.g. https://username.github.io

Click the browser refresh button, for up to 10 minutes.

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

Note:

If you see a 404 File not found error, it is probably because GitHub is still processing your files, or your computer is showing an old copy of the webpage it has saved for quick access in it's 'cache'. Go to Google and google 'the two hardest things in computer science', read the top answer, and come back here when you're done, and press refresh button again.

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 index.html

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

Click Save.

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