Skip to content
Lucia LADDERHTML Fundamentals Chapter 08Loading learning progress…
HTML-08-01 · LESSON 1 / 4 · ± 10 MINUTES
Plan Your Website
After this lesson, you can plan the content, audience, and division into two pages before writing the project.
BEGIN WITH A QUESTION
Understanding begins with a question.
An empty editor can feel more intimidating than a wrong tag. Reduce that uncertainty by deciding who will read the site and what they need to find.
Plan the content, audience, and division into two pages before writing the project.
UNDERSTAND THE CONCEPT
Start with the reader’s needs
Choose a simple theme: a personal interest, a book club, or a fictional community garden. Write one purpose, such as ‘help visitors understand club activities’. Define the audience and the information they should find in one visit.
Divide the content into two pages
Index.html is the home page, answering ‘what is this?’. About.html explains the story, interests, or activities further. Each page needs a distinct title and navigation in both directions. Keep the sample illustration at assets/observatory.svg or use an image you have permission to use.
A wireframe can be words
Write the sequence header → nav → main → footer, then each section’s headings and content. List the images and demo form needed. Add a table only for tabular data; the project does not need every HTML element.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h1>Plan: Sky Observers Club</h1>
<p>Purpose: help beginners discover sky observation activities.</p>
<p>Audience: friends newly interested in astronomy.</p>
<h2>index.html</h2>
<ul><li>Club introduction</li><li>Activities list</li><li>About link</li></ul>
<h2>about.html</h2>
<ul><li>The club’s story</li><li>Observatory illustration</li><li>Demonstration feedback form</li></ul>BROWSER RESULT
This is a planning document, rather than a finished site. A simple structure identifies the content you need to write.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Map your website
Create an HTML planning document: an h1 naming the theme, two paragraphs containing ‘Purpose:’ and ‘Audience:’, an h2 for index.html and about.html, and one ul with at least two content ideas for each page.
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.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Your plan can be simple text with markup.
- Choose realistic content: an introduction, interests, activities, an image, and a demo form.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Define the audience and purpose first.
- Divide the content into two pages with different roles.
- Choose elements according to content; not every element needs to appear.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.
Next lesson →