These are the setup notes from the book, kept current here. If an installer screen has changed since your copy was printed, this page is the version to follow.
Two things have to be in place before the first page in this book will run: a browser to look at your work in, and an editor to write it in. Both are free, and the setup takes about ten minutes. There is no programming language to install, since your browser already runs HTML, CSS, and JavaScript.
Choose a Browser
Any modern browser will do. Chrome, Edge, Firefox, and Safari all follow the same standards, and every example in this book works in all of them. Windows comes with Edge and macOS comes with Safari, so you already have one. I use Chrome. If you would rather install another, get it from its own site.
A page you write is a file on your own disk, and there are two ways to open one. Double-click the file in File Explorer on Windows, or in Finder on macOS, and it opens in your default browser. If it opens in the wrong program, right-click it and choose Open with. The other way starts in the browser: press Ctrl-O, or Command-O on a Mac, and pick the file yourself. Read the address bar once the page is open.
file:///C:/webbook/first-page/index.html (Windows)
file:///Users/you/webbook/first-page/index.html (macOS)The file:/// prefix means the browser is reading a file from your own disk rather than from a web server. That is what you want everywhere in this book except one section of Chapter 13, and it is the quickest way to confirm that you are looking at the file you think you are.
Choose an Editor
You also need somewhere to type the code. A word processor will not do. It saves formatting along with the text, and it turns straight quotes into curly ones, which a browser will not accept inside code. Any plain-text editor works, and the three below are free.
Visual Studio Code
Download VS Code from code.visualstudio.com and accept the defaults. It is what I use. Two habits are worth forming on the first day. Open a folder rather than a single file, with File, then Open Folder, so that your whole project sits in the sidebar. And type the whole file name yourself when you save, ending included: index.html, styles.css, app.js. The one optional extra is the Live Server extension, which reloads the browser every time you save. You do not need it until Chapter 13, and even there an alternative is given.
Notepad++
Notepad++, from notepad-plus-plus.org, is a Windows-only plain-text editor that opens instantly and does very little else. Watch its save dialog. Set Save as type to All types and type the full name, index.html, or you get index.html.txt, and the browser shows you your own code as text rather than a page. Windows Notepad has the same trap and fewer reasons to use it. Sublime Text and the other plain-text editors written for web work do the job just as well, as long as the editor saves plain text and lets you control the exact file name.
| Editor | Best for | Where to get it |
|---|---|---|
| VS Code | Everything in this book. | code.visualstudio.com |
| Notepad++ | A small, fast Windows editor. | notepad-plus-plus.org |
| Sublime Text | Windows, macOS, or Linux. | sublimetext.com |
Your First Page
Here is the page you are about to make. Chapter 1 explains every line of it.
<!doctype html>
<html lang="en">
<title>My First Page</title>
<h1>Hello, web!</h1>
I typed this myself.- Make one folder for your work: C:\webbook on Windows, or a folder named webbook in your home folder on macOS. Inside it make a second folder named first-page. Chapter 1 starts a folder of its own, chapter-01, beside it.
- In your editor choose File, then New, and type those five lines.
- Save the file into the first-page folder as
index.html. Type the .html ending yourself. It is part of the name rather than a setting in the dialog. - Open that folder in File Explorer or Finder and double-click
index.html. The tab reads My First Page, and your heading appears in large bold type above the sentence, black on white, since the page carries no CSS. - Go back to the editor, change the heading text to your own name, and save. Switch to the browser and press F5, or Command-R on a Mac. The heading changes.
Those five lines are the shortest page a browser will accept, and Section 1.2 shows the complete form. What matters today is the loop: type, save, refresh, look. Every RUN step in this book means exactly that, and the browser only ever shows you the file as you last saved it.
Open the Developer Tools
Your browser carries a full set of inspection tools, and this book uses them from Chapter 1 onward. Press F12 to open them, or Ctrl-Shift-I on Windows and Command-Option-I on a Mac. Right-clicking anything on the page and choosing Inspect opens them on that element.
A panel opens beside the page or under it. Two of its tabs matter now. The Elements tab, which Firefox calls Inspector, shows the page as the browser actually built it: your HTML as a tree you can expand, with the CSS that applies to the selected element beside it. The Console tab shows messages and errors. Anything a script prints with console.log() lands there, and so does every JavaScript error, with the file name and the line number that produced it.
When Something Goes Wrong
| What you see | What to check |
|---|---|
| A blank page, or your own code shown as plain text | The file was saved as index.html.txt. Windows hides known endings: turn on File name extensions in the File Explorer View menu, then save again with Save as type set to All types. If the name is right, the address bar names the file you did open. |
| Your change does not appear | The file is not saved, or the page is not refreshed. VS Code marks an unsaved file with a dot in its tab. If both are done and the old page persists, hold Shift and press F5. |
| The CSS has no effect | The href on the link element does not match the file. Same folder, same spelling, same capitalization, since styles.css and Styles.css are different files on some systems. |
| The script does nothing | The src on the script element does not name the file, or the script ran before the elements it looks for existed. The defer attribute in Section 1.4 fixes the second one. |
A Local Server, Later
One thing in this book will not run from a file you double-clicked. In Chapter 13 you use fetch() to read a data file, and a browser refuses to do that on a file:/// address. Serve the folder instead: run python -m http.server inside it and open http://localhost:8000/, or click Go Live in VS Code with the Live Server extension installed. Chapter 13 repeats this where you need it, so nothing needs setting up now.
The Companion Website
The files that go with this book are free at tprmway.com/web: cheat sheets, extra exercises, starter files, and any corrections made after printing. Nothing in the book depends on them. Tools change faster than languages. If a program name or download address in this section has moved on by the time you read it, the website keeps a current version of these setup notes.