De Cero a Web Online en 2 Horas con IA: Tutorial Completo [2026]

De Cero a Web Online en 2 Horas con IA: Tutorial Completo

¿Puedes tener tu web online hoy mismo? Sí. Con IA y Hostinger, el proceso completo tarda menos de 2 horas. Este tutorial es para personas sin experiencia técnica que quieren resultados reales, no teoría.

TL;DR - El Plan de 2 Horas

• 0:00-0:10 — Instalar Cursor AI y contratar Hostinger
• 0:10-0:50 — Generar la web completa con IA
• 0:50-1:10 — Ajustes y correcciones finales
• 1:10-1:30 — Subir la web a Hostinger
• 1:30-2:00 — Configurar dominio, SSL y email profesional
• Coste total: 0€ herramientas + 2,99€/mes Hostinger

Preparación (10 minutos)

Qué Necesitas

Descargar antes de empezar:

• Cursor AI — Editor con IA (gratis)
• Node.js LTS — Para ejecutar la web en local (gratis)

Contratar ahora:

• Hostinger Premium — 2,99€/mes con dominio .com o .es gratis el primer año

¿Por qué contratar Hostinger ahora y no al final?

Porque el dominio tarda 5-15 minutos en activarse y puedes aprovechar ese tiempo para crear la web. Además, al registrar el dominio desde el principio, ya sabes exactamente qué URL tendrá tu web.

Hora 0:10 — Crea la Web con IA

Define Tu Web en 5 Líneas

Antes de abrir Cursor, escribe en papel o en un documento:

1. ¿Qué vendo/ofrezco? (ej: clases de piano, ropa de segunda mano, consultoría fiscal)
2. ¿Quién es mi cliente? (ej: niños de 6-12 años y sus padres)
3. ¿Qué quiero que hagan al entrar? (ej: llamarme, rellenar un formulario, comprar)
4. ¿Qué colores me gustan? (ej: azul marino y dorado)
5. ¿Qué secciones necesito? (ej: inicio, servicios, precios, contacto)

Con esto, ya tienes todo lo necesario para el prompt.

Genera la Web Completa con Cursor AI

1. Abre Cursor AI
2. Crea una nueva carpeta para tu proyecto
3. Abre el terminal (Ctrl+ñ) y crea los archivos:

1mkdir mi-web && cd mi-web
2touch index.html

1. Abre el Chat (Ctrl+L) y usa este template de prompt (rellena los corchetes):

1Crea una landing page profesional completa en HTML, CSS y JavaScript puro (sin frameworks).
2 
3NEGOCIO: [describe tu negocio en 2 líneas]
4CLIENTE OBJETIVO: [quién es tu cliente]
5OBJETIVO PRINCIPAL: [qué debe hacer el visitante]
6 
7SECCIONES OBLIGATORIAS:
81. Header: logo en texto "[Nombre de tu negocio]", menú de navegación y botón CTA destacado
92. Hero: imagen de fondo (gradiente [color1] a [color2]), titular impactante, subtítulo y 2 botones
103. Servicios/Productos: 3 tarjetas con icono, título, descripción y precio/CTA
114. Sobre mí/nosotros: foto placeholder y texto de presentación
125. Testimonios: 3 testimonios con foto placeholder, nombre y valoración con estrellas
136. FAQ: 4 preguntas frecuentes con acordeón desplegable
147. Formulario de contacto: nombre, email, teléfono, mensaje y botón enviar
158. Footer: copyright, redes sociales, email de contacto
16 
17DISEÑO:
18- Colores: [tus colores]
19- Fuente: Google Fonts (elige una moderna para títulos y una legible para texto)
20- Responsive: funciona perfectamente en móvil, tablet y escritorio
21- Animaciones: scroll suave, fade-in en secciones al hacer scroll
22- Botones: efecto hover con transición suave
23 
24TÉCNICO:
25- Todo en un único archivo index.html (CSS y JS inline)
26- Imágenes: usa gradientes CSS o emojis en lugar de imágenes (sin dependencias externas)
27- Optimizado para velocidad: carga en menos de 2 segundos
28- Meta tags básicos de SEO: title, description, og:tags

1. Cursor generará el código completo. Cópialo todo en tu index.html.

Prueba en el Navegador (5 minutos)

Haz doble clic en el archivo index.html. Se abrirá en tu navegador. Revisa:

• ¿Se ve bien en pantalla grande?
• ¿El menú funciona (navega a las secciones)?
• ¿El formulario tiene campos?
• ¿Se ve bien en móvil? (usa F12 → icono de móvil en Chrome para simular)

Si algo no está bien, describe el problema en el chat de Cursor:

1"El menú hamburguesa en móvil no se abre al hacer click. Corrígelo."

Hora 0:50-1:10 — Ajustes Finales

Personaliza el Contenido Real

Ahora toca reemplazar el texto de ejemplo con tu contenido real. Puedes hacerlo de dos formas:

Forma 1: Manualmente — Busca y reemplaza textos en el archivo

Forma 2: Con IA — Pide a Cursor:

1"Reemplaza todos los textos de ejemplo por contenido real para [tu negocio].
2Mi nombre es [nombre]. Ofrezco [servicios]. Mi teléfono es [teléfono].
3Mi email es [email]. Estoy en [ciudad]."

Optimiza para Google (SEO Básico)

Pide esto a Cursor:

1"Optimiza este HTML para SEO.
2Mi web es sobre [descripción].
3Mi palabra clave principal es '[keyword principal]'.
4Añade title, meta description, og:tags y schema markup básico."

Hora 1:10-1:30 — Sube a Hostinger

Accede a hPanel

1. Ve a hpanel.hostinger.com
2. Inicia sesión con tus datos de Hostinger
3. Haz clic en "Gestionar" junto a tu hosting

Sube los Archivos

1. En el panel, ve a Archivos → Gestor de archivos
2. Navega a la carpeta public_html (es la carpeta raíz de tu web)
3. Elimina cualquier archivo que haya (si el hosting es nuevo, puede haber un index.html de ejemplo)
4. Haz clic en "Subir" y selecciona tu index.html
5. Si tienes imágenes o recursos adicionales, crea subcarpetas y súbelos

¿Cuánto tarda? Un archivo HTML de 100KB tarda menos de 5 segundos en subir.

Verifica que Funciona

Abre tu dominio en el navegador (ej: www.tudominio.es). Si ves tu web, ¡felicidades! Ya estás online.

Si el dominio aún no funciona, es normal — puede tardar hasta 15 minutos después de la compra. Hostinger te envía un email cuando está activo.

Hora 1:30-2:00 — Configuración Profesional

Activa el SSL (HTTPS)

El SSL (el candado verde) es obligatorio hoy en día. Sin él, Google avisa a los usuarios de que tu web "no es segura".

En hPanel:

1. Ve a Seguridad → SSL
2. Haz clic en "Instalar" junto a tu dominio
3. Selecciona Let's Encrypt (gratuito)
4. Espera 2-5 minutos

Configura tu Email Profesional

Con Hostinger, tienes email profesional gratis (hola@tudominio.es):

1. Ve a Email → Cuentas de email
2. Crea una cuenta (ej: hola@tudominio.es)
3. Configura la contraseña
4. Accede al webmail en Email → Webmail o configúralo en Gmail/Outlook

Activa el Caché para Mayor Velocidad

1. Ve a Rendimiento → Caché
2. Activa el caché estático
3. Tu web cargará hasta un 50% más rápido para visitantes repetidos

Tu Checklist de 2 Horas

Marca cada elemento conforme lo completes:

Preparación

• [ ] Cursor AI instalado
• [ ] Node.js instalado (si necesitas Next.js)
• [ ] Hostinger contratado y dominio elegido

Creación con IA

• [ ] Idea definida (qué, para quién, objetivo, colores)
• [ ] Web generada con Cursor AI
• [ ] Funciona en el navegador local
• [ ] Contenido real añadido (no textos de ejemplo)
• [ ] Revisada en móvil

Publicación

• [ ] Archivos subidos a public_html en Hostinger
• [ ] Web accesible desde el dominio
• [ ] SSL activado (HTTPS con candado verde)

Finalización

• [ ] Email profesional creado
• [ ] Google Analytics añadido (opcional)
• [ ] Web compartida en redes sociales

¿Qué Hacer Cuando la Web Está Online?

Siguiente Semana: Mejoras con IA

Con tu web online, puedes seguir mejorándola continuamente con Cursor AI:

• Añadir blog: "Añade una sección de blog con 3 artículos de ejemplo"
• Mejorar velocidad: "Optimiza este HTML para que cargue más rápido"
• Añadir chat: "Integra el widget de chat de Tidio en esta web"
• Newsletter: "Añade un formulario de newsletter conectado a Mailchimp"

Siguiente Mes: Escalar en Hostinger

Si tu web crece y necesitas más potencia:

• Más tráfico: actualiza al VPS KVM 1 de Hostinger (4,99€/mes)
• Tienda online: instala WooCommerce con el instalador de Hostinger
• App Next.js: migra al VPS con Node.js nativo

Errores Comunes y Soluciones Rápidas

FAQ

¿Puedo tener una web con formulario de contacto funcional?

Sí, hay varias opciones sin backend: Formspree (gratis hasta 50 mensajes/mes) o EmailJS (gratis hasta 200 mensajes/mes). Pide a Cursor que integre el formulario con cualquiera de los dos.

¿Puedo añadir Google Analytics sin programar?

Sí. Dile a Cursor: "Añade Google Analytics 4 con el ID [tu-id-GA4] en el head de esta página". En 30 segundos está integrado.

¿Hostinger me ayuda si tengo problemas técnicos?

Sí, 24/7 en español. Si algo no funciona (dominio, SSL, subida de archivos), el chat de soporte de Hostinger es excelente. En mi experiencia, resuelven la mayoría de problemas en menos de 5 minutos.

En Resumen

• 2 horas es suficiente para tener una web profesional online desde cero con IA
• Cursor AI genera el HTML/CSS/JS completo con un buen prompt descriptivo
• Hostinger es el hosting más rápido para publicar: Gestor de Archivos visual, SSL en 1 clic, soporte español 24/7
• Contrata Hostinger antes de crear la web para que el dominio esté activo cuando termines
• Para webs simples: HTML/CSS/JS puro + Hostinger Premium 2,99€/mes = solución perfecta
• No hay excusas: el mayor obstáculo no es técnico — es dar el primer paso y contratar el dominio
• El dominio .es o .com ya por sí solo le da credibilidad profesional a tu negocio frente a una URL gratuita de cualquier plataforma

¿Quieres ir más lejos? Lee Cómo Crear una Tienda Online con IA en Hostinger o aprende a Monetizar tu Web Creada con IA.