Publícalo: de tu pantalla al mundo

beginner~12 min0/4 pasos

Publícalo: de tu pantalla al mundo

Una verdad dura: una página que solo existe en tu computadora no está publicada. Nadie puede verla, nadie puede usarla y nadie puede decirte que es genial. Publicar significa una sola cosa: una URL que cualquier persona en el mundo pueda abrir. Esa es la línea entre "estoy aprendiendo a programar" y "construí algo".

¿La buena noticia? Conseguir una URL ahora es la parte fácil. Hay servicios gratuitos que lo hacen en segundos:

Netlify Drop — abre el sitio, arrastra tu archivo HTML a la página y obtén una URL en vivo. Ese es todo el proceso.
Vercel — conecta una carpeta o un repo de GitHub, haz clic en deploy, listo. (Esta misma academia corre sobre él.)

¿Y si alguna vez te atascas? Eres un vibe coder — pregúntale a la IA. "Guíame paso a paso para desplegar este archivo HTML en Netlify" funciona de maravilla. Desplegar solía ser la parte aterradora de programar. Ahora es una conversación.

Pero antes de arrastrar ese archivo a cualquier lado, hay una diferencia entre una página que funciona y una página lista para lanzarse. Los sitios reales tienen toques profesionales: un título de verdad en la pestaña del navegador, una descripción que los buscadores y las vistas previas de enlaces pueden mostrar, etiquetas sociales para que tu enlace se vea bien cuando alguien lo comparta en WhatsApp o X, y un footer que diga "esto lo hizo una persona real — toma, compártelo". En esta lección final tomarás tu Tablero de Ideas del Módulo 4 y le darás exactamente esos toques.

Qué sigue en tu ruta

Esta es la última lección de Fundamentos de Vibe Coding — pero es el primer paso de la ruta De Cero a Héroe. Desde aquí conocerás Claude Code en el navegador (una IA que construye proyectos completos a partir de una conversación), luego instalarás la herramienta real en tu propia máquina y, con el tiempo, construirás tu propio agente de IA. Ya sabes cómo se hace la web. Es hora de hacer mucha más.

A publicar.

Instrucciones

Dale a tu página un <title> de verdad — reemplaza "Untitled" con un nombre digno de la pestaña del navegador. Es lo primero que muestran los buscadores y los marcadores.

Pista: Busca `<title>Untitled</title>` en el <head> y cámbialo por algo como `<title>Idea Board — Never Lose a Spark</title>`. Al menos unos cuantos caracteres — hazlo tuyo.

Agrega una etiqueta <meta name="description"> en el <head> — una frase que les diga a los buscadores (y a los humanos curiosos) qué hace tu app.

Agrega etiquetas Open Graph — <meta property="og:title"> y <meta property="og:description">. Estas controlan cómo se ve tu enlace cuando se comparte en WhatsApp, X o LinkedIn.

Agrega un <footer> al final de la tarjeta con un crédito "Built with vibes" y un <a id="share-link"> — todo producto publicado firma su trabajo.

Tu código

html

44 líneas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Untitled</title>
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  
</head>
<body class="bg-gradient-to-br from-violet-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">
  <div class="max-w-md w-full">

<h1 class="text-3xl font-bold text-center mb-2">💡 Idea Board</h1>
    <p class="text-indigo-300 text-sm text-center mb-6">Catch your ideas before they fly away</p>

</div>

addBtn.addEventListener('click', function () {
      const text = input.value.trim();
      if (!text) return;
      const li = document.createElement('li');
      li.className = 'bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm';
      li.textContent = text;
      list.appendChild(li);
      input.value = '';
    });
  </script>
</body>
</html>

Publícalo: de tu pantalla al mundo

Publícalo: de tu pantalla al mundo

Qué sigue en tu ruta

Instrucciones

Tu código

Vista previa en vivo