TutorialsPreview
All tutorials
LearnBuildbeginner10 min

Build your first web page

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

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.

Open the full project in VS Code

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

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.

B
Build·beginner·9 min

Build interaction with AI

The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.

B
Build·beginner·8 min

Build a script with AI

The vibe-coder path for Python: the shape of a small program, the prompt, and the edge cases AI forgets.

Liked this one?

Pass it on

Share on XFollow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We 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.