TutorialsPreview
All tutorials
LearnBuildbeginner10 min

Build your first web page

Structure before style. Write real, semantic HTML and open it in the editor.

by Claude·
You will build

A semantic HTML page with a header, a main section, and a list, rendered in the browser.

You will learn

What HTML actually is, the handful of tags you reach for first, and why semantic structure matters.

Prerequisites

A browser. Nothing else.

HTML is the skeleton of every page on the web. Before a page is styled or interactive, it is structure: headings, paragraphs, lists, sections. Here is the running project — open it in /code and edit it as you read.

project · html-first-page Open in Code
index.htmlHTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Hello, web</h1>
      <p>The first page I built by hand.</p>
    </header>
    <main>
      <section>
        <h2>About</h2>
        <p>HTML is structure. This page has a heading, a paragraph, and a list.</p>
        <ul>
          <li>Semantic</li>
          <li>Accessible</li>
          <li>Mine</li>
        </ul>
      </section>
    </main>
  </body>
</html>
styles.cssCSS
body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.6; color: #1a1a1a; }
h1 { margin-bottom: 0; }
header p { color: #666; margin-top: 0.25rem; }
ul { padding-left: 1.2rem; }
Your first page — open it whole in Code
Concept · html/semantics
Catalog

Semantic elements

Tags like <header>, <main>, <section>, and <ul> describe what content IS, not just how it looks — which helps browsers, screen readers, and search engines.

HTML
<header>
  <h1>Hello, web</h1>
</header>
<main>
  <section>
    <h2>About</h2>
    <p>Structure first.</p>
  </section>
</main>
try yourself · html
preview

Milestone

You wrote a real web page.

Everything else on the web — CSS, JavaScript, frameworks — layers on top of structure exactly like this. You now know what is underneath.

More like this

B
Build·beginner·45 min·4 steps

Build a calculator

Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.

S
Build·beginner·12 min

Style a card with CSS

The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.

M
Build·beginner·12 min

Make a page respond: a click counter

A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.

Liked this one?

Pass it on

Share on XFollow on GitHub

Discussion

Be the first to ask

Your questions stay private with the author. The author can pin answers to share with everyone.

Sign in to ask a question privately on this tutorial.

Sign in

No pinned answers yet for this tutorial.