Saltar al contenido
queeria.aiDocumentación

Guías populares

TutorialesAbrir Queeria

Construye tu primera web

Crea una landing estática para Bruma, pruébala en dos tamaños y guarda una revisión antes de publicar.

Hacer el tutorial interactivo
En esta página

Define una primera entrega

Crea un proyecto nuevo en Agent Studio o abre una copia de una plantilla. El ejemplo de esta guía es una landing con el nombre del negocio y un enlace de salto a un menú ficticio. La entrega termina cuando ambos elementos se leen y el enlace funciona en la vista previa.

Pide crear index.html y styles.css. Puedes pegar el siguiente punto de partida en el editor y completar los estilos en el segundo archivo.

Crea una base accesible

HTML
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Café Bruma</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main>
      <h1>Café Bruma</h1>
      <p>Café de especialidad y repostería de temporada.</p>
      <a href="#menu">Ver el menú</a>
      <section id="menu">
        <h2>Menú de ejemplo</h2>
        <ul><li>Espresso</li><li>Tostada de temporada</li></ul>
      </section>
    </main>
  </body>
</html>
CSS
body {
  margin: 0;
  padding: 2rem 1rem;
  background: #faf4eb;
  color: #292125;
  font: 1rem/1.6 system-ui, sans-serif;
}

main {
  max-width: 40rem;
  margin-inline: auto;
}

a:focus-visible {
  outline: 3px solid #622c8d;
  outline-offset: 4px;
}

Prueba el recorrido

  1. Abre la vista previa de index.html y verifica que se cargan ambos archivos.
  2. Pulsa Ver el menú y confirma que lleva a la sección correcta.
  3. Reduce el ancho o abre la vista en móvil. Comprueba que el título se lee entero y que la página no se desplaza a los lados.
  4. Repite el acceso al enlace usando Tab y Enter. El foco debe verse.

Si algo falla, conviene pedir una corrección concreta. «El enlace Ver el menú debe apuntar a #menu» deja un criterio fácil de repetir.

Guarda una versión revisada

Guarda el proyecto y abre Proyectos para comprobar la revisión. Puedes descargar un ZIP si vas a continuar desde otro editor. Cuando quieras compartir una web pública, sigue la guía de publicación y revisa los archivos que saldrán.

Guías relacionadas