Step 1: Create your first HTML file

Before you type

Start with an empty editor. No starter code or previous programming experience is required. Use one index.html file throughout. Save or download your draft after each checkpoint. In Playground, Run refreshes the preview and Check this step checks the current checkpoint. Outside Playground, save and reload your browser.

What to add and where

Create a new file named index.html in a text editor, or use the Playground editor. Type this document from the first line. HTML tags describe parts of a page. The head holds settings; the body holds visible content. Save the file, then open it in a browser or choose Run.

Your entire file should look like this now

Compare from the first line to the last. This is the whole file, not a fragment to paste at the bottom. The previous step’s code stays unless the directions replace it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bracket Challenge</title>
</head>
<body>

</body>
</html>

Run and check

The browser tab says Bracket Challenge. The page is blank because the body is empty.

If it does not work

Check matching opening/closing tags and braces, straight quotes, commas between array entries, and exact id spelling. Open the Playground console for a line number. Compare just the section you changed with this checkpoint. Fix the first error, then run again.

Explain before moving on

Point to the code you added. What input does it use, what changes on the page, and why does that happen? Change one visible label and run again to confirm you are editing the right file.