FSP 101 · Free pilot companion
Your first web page
This guide accompanies one introductory lesson. It is a starting point for a complete beginner, with no paid enrolment or coding experience required.
Download the beginner guide (PDF)
Keep a copy: use your browser’s Print command and choose Save as PDF. On a Mac, press Command + P. On a phone, use the browser’s Share or Print menu.
What you will build
A simple page with a heading, a short introduction, and a useful link. You will change the example text, check your understanding, and save a working HTML file.
1. Understand what the browser reads
A browser displays web documents. HTML describes the content and structure: a heading introduces the page, a paragraph holds a sentence, and a link takes a reader somewhere useful. HTML is markup; it does not make decisions or calculate values like JavaScript.
An element usually has an opening tag, its content, and a closing tag. In <h1>Hello, world!</h1>, the words between the tags are what your reader sees. The slash marks the closing tag.
2. Write a main heading
Open the interactive lesson and replace “Hello, world!” with a heading such as “My learning journal”. Keep the opening and closing h1 tags. A clear main heading helps readers understand the purpose of the page.
<h1>My learning journal</h1>
3. Add a paragraph
Move to the next chapter. A paragraph uses the p element. Write one sentence about why you want to learn. Changing the words does not require changing the tags.
<h1>My learning journal</h1> <p>I want to build useful tools for my community.</p>
If your paragraph does not appear as expected, check that the closing tag is </p>, and that you have not deleted a bracket. The live preview updates while you type.
4. Link to a useful resource
The a element creates a link. Its href attribute holds the destination, while the text between the tags tells a reader what to expect. Use a complete address beginning with https:// for this exercise.
<a href="https://developer.mozilla.org/">Read web documentation</a>
The quotation marks contain the address. The link text should describe the destination; “Read web documentation” is more useful than “Click here”. The lesson preview blocks scripts and external images to keep the exercise contained.
5. Check your understanding
Keep all three elements in your code. Select the attribute that gives a link its destination and choose “Check my work”. The checkpoint checks for meaningful text and a complete http or https link. A passing checkpoint is practice feedback, not a certificate or course qualification.
- Explain the purpose of h1 in your own words.
- Point to the paragraph’s opening and closing tags.
- Identify the destination and visible text of your link.
6. Save and open your page
Choose “Download my HTML page” in the lesson. Find the downloaded file and open it in your browser. An HTML file can work on your own computer; downloading it does not publish it on the internet.
Chapter edits are saved in the same browser when storage is available. When you return, choose “Restore saved work”. A different device, private browsing session, or cleared browser data will not contain that saved work, so keep the downloaded file.
Your independent practice
Create a page for a small service you would like to build. Give it a descriptive heading, a sentence explaining who it helps, and a link to a relevant public resource. Show it to someone and ask what they think the page is for. Improve the wording based on their answer.
Next learning goals: document structure, semantic HTML, CSS styling, and JavaScript interaction. The wider FSP 101 programme is being prepared; this free pilot does not yet cover those topics.