Writing your first webpage

Plan before you code

Write the content first, in plain words. For a personal profile page:

1. Your name (main heading)
2. One sentence about what you do
3. Two or three short paragraphs about your skills
4. A way to contact you

Planning first means you only think about tags when you code, not about what to say.

The finished code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ana Reyes | Virtual Assistant in Naga City</title>
  <meta name="description" content="Ana Reyes is a virtual assistant in Naga City who helps small businesses with email, scheduling, and social media.">
</head>
<body>
  <h1>Ana Reyes</h1>
  <p>Virtual assistant for small businesses in Bicol and beyond.</p>
  <p>I manage inboxes, schedule appointments, and post on Facebook pages.</p>
  <p>I have helped bakeries, resorts, and clinics save over ten hours a week.</p>
  <p>Email me at <a href="mailto:ana@example.com">ana@example.com</a>.</p>
</body>
</html>

Check your work

• Does the browser tab show your title?
• Do special characters like ñ show correctly? If not, check the charset.
• Open it on your phone. Is the text readable without zooming? If not, check the viewport tag.
• Does the email link open your mail app?

Fixing early errors

What you see	Likely cause
The whole page turns bold	A missing </strong> or </b>
Code shows on the page as text	A typo in a tag, like <p without >
Strange characters like ñ	Missing meta charset utf-8
Nothing changed	You did not save, or you opened a different file

Try it: build your profile

Replace Ana’s details with your own. Keep the structure, change the words.

Quick quiz

Common mistakes

• Starting with design. Get the HTML right first. Styling comes later.
• Not testing on a phone. Most visitors in the Philippines browse on mobile.
• Long walls of text. Split ideas into short paragraphs.

Your action

Tick each item when you can do it. Your progress saves on this device.