Guía básica para crear tu primera página web desde cero

Guía básica para crear tu primera página web desde cero

Crear tu primera web puede ser tan simple como una página “Hola mundo” o tan completo como un sitio con dominio, diseño profesional y formularios. Esta guía te lleva desde cero, con dos rutas:

  • Ruta A (sin programar): la más rápida y fácil (ideal si quieres publicar hoy).
  • Ruta B (desde cero con HTML/CSS): la más educativa (ideal si quieres aprender de verdad).

Al final tendrás tu web publicada y accesible desde cualquier dispositivo

Table
  1. 1) Define el objetivo de tu web (1 minuto)
  2. RUTA A — Crear una web sin programar (la forma más fácil)
  3. 2) Elige una plataforma (según tu caso)
    1. Opción 1: WordPress (la más flexible)
    2. Opción 2: Wix / Squarespace / Webflow (muy fácil)
    3. Opción 3: Google Sites (muy simple)
  4. 3) Compra un dominio y hosting (si quieres web “seria”)
    1. Consejos para elegir dominio
    2. Consejos para hosting (WordPress)
  5. 4) Instala WordPress (si eliges WordPress)
  6. 5) Elige un tema y estructura tu web (la base)
    1. Páginas imprescindibles
    2. Cómo diseñar el Inicio (plantilla simple)
  7. 6) Publica y optimiza lo mínimo
  8. RUTA B — Crear una web desde cero con HTML + CSS (aprendiendo de verdad)
  9. 7) Herramientas que necesitas (gratis)
  10. 8) Crea tu primer proyecto (estructura de carpetas)
  11. 9) Escribe tu primer HTML (estructura básica)
  12. 10) Dale estilo con CSS (para que se vea profesional)
  13. 11) Abre la web en tu navegador
  14. 12) Publica tu web gratis con GitHub Pages
  15. 13) Lo mínimo para que tu web parezca profesional
    1. Contenido
    2. Diseño
    3. Técnico (básico)
  16. 14) Errores típicos (y cómo evitarlos)
  17. 15) Siguientes pasos (para subir de nivel)

1) Define el objetivo de tu web (1 minuto)

Antes de elegir herramientas, define qué necesitas:

  • Web personal/portfolio (presentarte y mostrar trabajos)
  • Negocio local (servicios, horario, contacto, mapa)
  • Blog (artículos y categorías)
  • Landing de producto (captar leads, ventas)
  • Web para practicar (aprender a programar)

Esto decide si te conviene WordPress, un constructor tipo Wix o un sitio estático.

Cómo hacer copias de seguridad automáticas en Android y iPhone

RUTA A — Crear una web sin programar (la forma más fácil)

2) Elige una plataforma (según tu caso)

Opción 1: WordPress (la más flexible)

Ideal si quieres blog, SEO y crecimiento a futuro
Muchísimos temas y plugins
Requiere algo más de aprendizaje y mantenimiento

Opción 2: Wix / Squarespace / Webflow (muy fácil)

Arrastrar y soltar
Diseño rápido
Menos flexible a largo plazo, puede salir más caro

Opción 3: Google Sites (muy simple)

Ultra rápido
Limitado para diseño y SEO avanzado

Si no sabes cuál elegir:

Comparativa: almacenamiento en la nube gratis vs de pago
  • Blog + crecer → WordPress
  • Web bonita en 1 día → Wix/Webflow
  • Algo básico para salir del paso → Google Sites

3) Compra un dominio y hosting (si quieres web “seria”)

Si vas en serio, lo normal es:

  • Dominio: tunombre.com
  • Hosting: servidor donde vive tu web

Consejos para elegir dominio

  • Corto y fácil de recordar
  • Sin guiones raros ni números
  • .com si es global, .es si es España (u otro país si aplica)

Consejos para hosting (WordPress)

Busca:

  • SSL gratis (https)
  • Copias de seguridad
  • Soporte decente
  • Buen rendimiento

Si usas Wix/Squarespace, el “hosting” suele estar incluido.

4) Instala WordPress (si eliges WordPress)

La mayoría de hostings tienen “Instalación en 1 clic”.

Las mejores extensiones de Chrome para productividad en 2026

Pasos típicos:

  1. Entra al panel del hosting
  2. WordPress → Instalar
  3. Crea usuario/contraseña
  4. Accede a tu panel:
    tudominio.com/wp-admin

5) Elige un tema y estructura tu web (la base)

Tu web debe tener una estructura simple y clara.

Páginas imprescindibles

  • Inicio (qué haces y para quién)
  • Sobre mí / Sobre nosotros
  • Servicios / Portfolio
  • Contacto (formulario + email + WhatsApp)
  • Política de privacidad / cookies (si aplica)

Cómo diseñar el Inicio (plantilla simple)

  • Titular claro: “Ayudo a X a conseguir Y”
  • Beneficios (3–5 puntos)
  • Prueba social (testimonios)
  • Llamada a la acción (contactar / pedir presupuesto)

6) Publica y optimiza lo mínimo

Activa SSL (https)
Configura título y descripción del sitio
Ajusta menú y pie de página
Prueba en móvil (muy importante)

RUTA B — Crear una web desde cero con HTML + CSS (aprendiendo de verdad)

Si quieres aprender, esta ruta te enseña a construir una página básica con código y publicarla gratis.

Mejor guía para crear sitios web desde cero

7) Herramientas que necesitas (gratis)

  • Un editor: Visual Studio Code
  • Un navegador: Chrome/Firefox/Edge
  • Un sitio para publicar: GitHub Pages (gratis)

8) Crea tu primer proyecto (estructura de carpetas)

Crea una carpeta llamada, por ejemplo: mi-web

Dentro, crea:

  • index.html
  • styles.css
  • carpeta img/ (para imágenes)

Quedará así:

mi-web/
  index.html
  styles.css
  img/

9) Escribe tu primer HTML (estructura básica)

Copia esto en index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mi primera web</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <header class="header">
    <h1>Hola, soy [Tu Nombre]</h1>
    <p>Esta es mi primera página web. Aquí te cuento quién soy y qué hago.</p>
    <a class="btn" href="#contacto">Contactar</a>
  </header>

  <main class="container">
    <section>
      <h2>Sobre mí</h2>
      <p>Soy [tu profesión]. Me especializo en [tu especialidad].</p>
    </section>

    <section>
      <h2>Mis proyectos</h2>
      <ul>
        <li>Proyecto 1 — breve descripción</li>
        <li>Proyecto 2 — breve descripción</li>
        <li>Proyecto 3 — breve descripción</li>
      </ul>
    </section>

    <section id="contacto">
      <h2>Contacto</h2>
      <p>Escríbeme a: <a href="mailto:tuemail@correo.com">tuemail@correo.com</a></p>
    </section>
  </main>

  <footer class="footer">
    <p>© <span id="year"></span> [Tu Nombre].</p>
  </footer>

  <script>
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>

</body>
</html>

Ya tienes una web funcional.

10) Dale estilo con CSS (para que se vea profesional)

Copia esto en styles.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}

.header {
  padding: 60px 20px;
  text-align: center;
  background: #f5f5f5;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
}

.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 18px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.footer {
  text-align: center;
  padding: 20px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

Es minimalista, limpio y responsive (se adapta bien a móvil).

11) Abre la web en tu navegador

  • Haz doble clic en index.html
  • Verás tu web local en el navegador

Si usas VS Code:

  • Instala extensión “Live Server” para recargar automático.

12) Publica tu web gratis con GitHub Pages

Esto hace que tu web esté online.

Paso a paso

  1. Crea cuenta en GitHub (si no tienes)
  2. Crea repositorio:
    • nombre: mi-web
  3. Sube los archivos (index.html, styles.css, etc.)
  4. Ve a:
    • Settings → Pages
  5. En “Branch” selecciona:
    • main
    • carpeta /root
  6. Guarda

En unos segundos tendrás una URL tipo:
https://tuusuario.github.io/mi-web/

13) Lo mínimo para que tu web parezca profesional

Contenido

  • Foto tuya (real y bien iluminada)
  • Texto directo: “Ayudo a X a conseguir Y”
  • Portfolio o ejemplos
  • Contacto fácil (email/WhatsApp)

Diseño

  • Tipografía legible
  • Mucho espacio en blanco
  • Máximo 2–3 colores
  • Botón de llamada a la acción visible

Técnico (básico)

  • Web adaptable a móviles
  • Imágenes comprimidas (para que cargue rápido)
  • Títulos claros (H1, H2)
  • Un favicon (icono en pestaña)

14) Errores típicos (y cómo evitarlos)

  • Página de inicio sin explicar qué haces
    Titular claro + CTA
  • Mucho texto sin estructura
    Secciones cortas con títulos
  • Imágenes pesadas
    Comprimir (TinyPNG, Squoosh)
  • No probar en móvil
    Revisa siempre en pantalla pequeña
  • No poner contacto visible
    Botón y sección de contacto clara

15) Siguientes pasos (para subir de nivel)

Cuando ya tengas tu primera web, lo siguiente es:

  • Añadir una sección de servicios
  • Crear un formulario (por ejemplo con Google Forms o Formspree)
  • Añadir Google Analytics o una alternativa
  • Mejorar SEO básico (title, meta description, headings)
  • Comprar dominio propio y apuntarlo a tu web

Si quieres conocer otros artículos parecidos a Guía básica para crear tu primera página web desde cero puedes visitar la categoría Tutoriales Web.

Entradas Relacionadas