De cero a tu primera página web con Claude Code (sin saber programar)

Vas a construir una página web describiéndola con palabras y a publicarla gratis en internet. Sin escribir código a mano. Toca cada paso para abrirlo.

You’re going to build a web page by describing it in words and publish it online for free. Without writing code by hand. Tap each step to open it.

Antes de empezar: necesitas tener listos Claude Code (guía) y una cuenta de GitHub (guía).Before you start: you need Claude Code (guide) and a GitHub account (guide) ready.

1 Crea la carpeta de tu proyectoCreate your project folder

Crea una carpeta nueva en tu computadora (ej. mi-primera-web).
En VS Code: Archivo → Abrir carpeta y elige esa carpeta.
Abre Claude Code con su ícono (✳).

Create a new folder on your computer (e.g. my-first-web).
In VS Code: File → Open Folder and pick that folder.
Open Claude Code with its (✳) icon.

2 Pídele a Claude que la creeAsk Claude to build it

Escríbele algo concreto, por ejemplo:

“Crea una página web sencilla de presentación personal: mi nombre, una frase sobre mí, una foto y un botón para contactarme. Que se vea moderna y funcione en celular. Explícame qué archivos creaste.”

Claude te mostrará lo que va a hacer. Revísalo y acepta. Pídele cambios las veces que quieras (“hazla con fondo oscuro”, “agrega mis redes”).

Write something specific, for example:

“Create a simple personal landing page: my name, a sentence about me, a photo and a contact button. Make it look modern and work on mobile. Explain which files you created.”

Claude will show you what it’s going to do. Review it and accept. Ask for changes as many times as you want (“make it dark mode”, “add my socials”).

3 Pruébala en tu compuPreview it on your computer

Pídele a Claude: “¿Cómo la veo en mi navegador?” y sigue lo que te diga (normalmente ejecuta un comando y te da un enlace tipo localhost). Ábrelo y revisa tu página. Si algo no te gusta, pídele el cambio y vuelve a mirar.

Ask Claude: “How do I see it in my browser?” and follow what it says (it usually runs a command and gives you a localhost link). Open it and check your page. If you don’t like something, ask for the change and look again.

4 Guárdala en GitHubSave it to GitHub

Dile a Claude: “Sube esto a un repositorio nuevo en mi GitHub”, o hazlo tú desde Control de código fuente → Publish to GitHub (cómo). Así tu trabajo queda guardado y listo para publicar.

Tell Claude: “Push this to a new repository on my GitHub”, or do it yourself from Source Control → Publish to GitHub (how). Now your work is saved and ready to publish.

5 Publícala gratis en internetPublish it online for free

Entra a https://vercel.com y crea una cuenta con tu GitHub (un clic).
Aprieta “Add New → Project” e importa el repositorio que acabas de subir.
Aprieta “Deploy”. En ~1 minuto tendrás un enlace público (ej. tu-proyecto.vercel.app).

🎉 Desde ahora, cada vez que subas un cambio a GitHub, tu web se actualiza sola.

Go to https://vercel.com and create an account with your GitHub (one click).
Click “Add New → Project” and import the repository you just pushed.
Click “Deploy”. In ~1 minute you’ll have a public link (e.g. your-project.vercel.app).

🎉 From now on, every time you push a change to GitHub, your site updates itself.

Si algo sale malIf something goes wrong

Problema	Solución
No sé cómo verla	Pídele a Claude: “ejecútala y dame el enlace para verla”
Salió un error rojo	Copia el error y pégaselo a Claude tal cual; lo arregla
Vercel no encuentra mi repo	Revisa que lo subiste a GitHub (Paso 4)

Problem	Fix
I don’t know how to view it	Ask Claude: “run it and give me the link to view it”
A red error appeared	Copy the error and paste it to Claude as-is; it’ll fix it
Vercel can’t find my repo	Make sure you pushed it to GitHub (Step 4)

De cero a tu primera página web con Claude Code (sin saber programar)From zero to your first web page with Claude Code (no coding required)

Cambiar PlaylistSwitch Playlist