typestar

landing_page.html in HTML

A complete landing page: head metadata, hero, feature list, footer.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>typestar - touch typing for programmers</title>
  <meta name="description"
        content="Practice real code, one snippet at a time.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <header>
    <a href="/">typestar</a>
    <nav aria-label="Primary">
      <a href="/tours">Tours</a>
      <a href="/leaderboard">Leaderboard</a>
      <a href="/login">Sign in</a>
    </nav>
  </header>

  <main>
    <section>
      <h1>Type the code you actually write</h1>
      <p>
        Ten languages, twenty-eight tours, measured in tokens per
        minute rather than words.
      </p>
      <a href="/tours/python/basics">Start the Python basics tour</a>
      <img src="/img/hero.png" alt="A snippet mid-run, half of it typed"
           width="960" height="540">
    </section>

    <section>
      <h2>What you get</h2>
      <ul>
        <li>
          <h3>Real snippets</h3>
          <p>Hand-picked code, lexed and highlighted as you type.</p>
        </li>
        <li>
          <h3>Tours and sets</h3>
          <p>Structured practice that ends in a full program.</p>
        </li>
        <li>
          <h3>Honest numbers</h3>
          <p>Accuracy, consistency and tokens per minute.</p>
        </li>
      </ul>
    </section>

    <section id="pricing">
      <h2>Pricing</h2>
      <p>Free while it is in beta. No account needed to practice.</p>
    </section>
  </main>

  <footer>
    <p>Built in the open.</p>
    <nav aria-label="Footer">
      <a href="/about">About</a>
      <a href="/privacy">Privacy</a>
    </nav>
  </footer>
</body>
</html>

How it works

  1. The doctype and lang attribute open every real document.
  2. Landmarks give the page a structure before any CSS arrives.
  3. Every image carries alt text and explicit dimensions.

The run, in numbers

Lines
66
Characters to type
1477
Tokens
360
Three-star pace
75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 288 seconds.

Type this snippet

Step 1 of 2 in Encore, step 27 of 28 in Document structure.

← Previous Next →