Working on your own machine
Leave the practice editor behind: make a real file in a real folder, open it in your own browser, use the browser's built-in tools, check your work, and put the page online.
By the end you can
- Make a web page as a real file on your own computer
- Open and inspect it with the browser's own tools
- Find and fix the faults a checker reports
- Save your work with git and put the page online
Easier if you did first
step 1 of 5
Your first real file
Everything so far has happened inside this website. Now you make the same thing on your own computer, which is what you will do on every real job.
Here is the part that surprises people: a web page is just a text file. Nothing more. If you save a file ending in .html and open it, your browser reads it as a page. No special program, no account, no payment.
You can write it in Notepad on Windows or TextEdit on a Mac, though a free editor like Visual Studio Code is far easier, because it colours your tags and warns you about mistakes.
First you need somewhere to put it. A folder, like any other. One folder per website, with the pages and pictures inside it.
The window below is a practice terminal. It is not your real computer, so nothing you type here changes anything. It is here so you can learn the four commands before you use them for real.
On your own machine, open Terminal on a Mac or PowerShell on Windows, and the same four commands work. Then type the same thing again for real, and you will have made something.
After you create the file, open the folder and double-click index.html. Your browser shows your page. Look at the address bar: it says file:/// instead of https://, because the page is coming from your own disk, not from a server. That one difference is the whole distinction between a page on your machine and a website.
What these words mean
- folder
- A place to keep files. One folder per website.
- index.html
- The special name for a site's front page. Servers show it automatically.
- terminal
- A window where you type commands instead of clicking. Terminal on Mac, PowerShell on Windows.
- mkdir
- Make a directory, which is another word for folder.
- cd
- Change directory: move into a folder.
- ls
- List what is in this folder. On Windows PowerShell, ls and dir both work.
- file:///
- The address of a file on your own disk, rather than a website.
- VS Code
- A free code editor from Microsoft. The usual choice for web work.
Easy to get wrong
Saving the file as index.html.txt
index.html
Notepad adds .txt unless you choose All Files when saving. The browser then shows your tags as plain writing instead of a page. Windows hides known extensions, so you often cannot see that it happened.
Writing the page in Microsoft Word
Notepad, TextEdit or VS Code
Word saves formatting, not plain text. The file is full of things that are not your HTML, and the browser cannot read it.
- Type each of these, then press Enter
- 1Make a folder called my-site
- 2Move into it
- 3Create index.html (touch, notepad or code all work here)
- 4Check that the file is there