typestar

landing_page.html en HTML

Una landing page completa: metadatos en el head, hero, lista de características, pie.

<!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>

Cómo funciona

  1. El doctype y el atributo lang abren todo documento real.
  2. Los puntos de referencia le dan estructura a la página antes de cualquier CSS.
  3. Toda imagen lleva texto alternativo y dimensiones explícitas.

El intento, en números

Líneas
66
Caracteres a escribir
1477
Tokens
360
Ritmo de tres estrellas
75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 288 segundos.

Escribe este fragmento

Paso 1 de 2 en Bis; paso 27 de 28 en Estructura del documento.

← Anterior Siguiente →