Edit, Preview, Repeat

After this lesson, you can edit an HTML document and distinguish changes in body from metadata in head.

BEGIN WITH A QUESTION

Understanding begins with a question.

You have changed the code, but the display has not changed. Is the code wrong, the file unsaved, or a different file open? Develop a small habit that helps throughout the course.

Edit an HTML document and distinguish changes in body from metadata in head.

UNDERSTAND THE CONCEPT

The edit → save → view cycle

On your computer, save the code as index.html and open that file in a browser. After editing, save again and reload the tab. Make sure its name is not index.html.txt. Index.html is commonly used as a folder's main page name on web servers.

In Lucia's practice workspace

Type in the editor. The preview updates automatically after a short pause; Run preview updates it immediately. Check task evaluates the exercise goals and offers guidance. Code and learning position are saved in this browser when storage is available.

Change one thing and observe

Try changing h1 text first, then a paragraph. If the result is unexpected, inspect the part you just changed. A normal-looking preview does not guarantee correct markup: browsers can recover from many errors.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exploration Log</title>
</head>
<body>
  <h1>Day two exploration</h1>
  <p>I found a new pattern in the sky.</p>
  <p>Tomorrow I would like to observe again.</p>
</body>
</html>

BROWSER RESULT

Change one sentence in body and observe the result. Changing title affects the document title, not the h1 text.

COMMON MISTAKES

<title>Day two exploration</title>
<body><h1>Old heading</h1></body>

Changing title alone does not change h1. Find the element that actually produces the text you want to edit.

TRY TOGETHER

Practice clarifies understanding.

01 Changes to a local file have not appeared in the browser tab. What is a sensible first step?

Delete all the codeSave the file and reload the tab showing that same fileAdd CSS

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Notes that keep growing

Change title to ‘Day Two Journal’, change h1 to ‘First Sprout’, and add a second paragraph describing a plan to care for the plant. Run the preview to see the result.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Day One Journal</title>
</head>
<body>
  <h1>Planting Seeds</h1>
  <p>I prepared a small pot.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 112 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Local HTML files follow the edit, save, and reload cycle.
In Lucia, the preview runs automatically and can be run again.
Changes to title and body have different effects.

DebuggingMetadata

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Browser °HTML °Title °

Library: What happens when you open a website? ↗

Take the Chapter Trial →