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

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