Diseño y Desarrollo WEB con IA · Desde cero

Aprende a crear sitios web profesionales

Este curso te enseña todo lo que necesitas saber para construir, publicar y mantener sitios web usando las mismas herramientas que usamos en el equipo.

Claude Code

GitHub

Firebase

GoDaddy

Cloudinary

Formspree

EmailJS

Databuddy

Canva

Unsplash

Gemini Pro

Reactbits

Estructura del curso

Módulo 01

Fundamentos Web

HTML, CSS, JavaScript y cómo funciona internet.

4 lecciones

Módulo 02

Herramientas del equipo

GitHub, Firebase, Claude, Gemini y todos los servicios.

4 lecciones

Módulo 03

Integraciones y flujo

APIs, conexiones y el proceso completo de un proyecto.

2 lecciones

Módulo 04

Diseño Web Profesional

Tipografía, CSS avanzado, animaciones y responsive design.

3 lecciones

Módulo 05

De proyecto a negocio

SEO, analítica web, portafolio y conseguir primeros clientes.

3 lecciones

Total

16 lecciones

Avanza a tu ritmo. Marca cada lección al terminarla.

Progreso guardado automáticamente

💡

Cómo usar este curso

Sigue las lecciones en orden. Al terminar cada una, haz click en "Marcar completado". Si tienes dudas, anótalas y pregúntalas. No sigas adelante hasta entender bien cada lección.

Módulo 1 · Lección 1

¿Cómo funciona la web?

Antes de escribir una sola línea de código, necesitas entender qué pasa cuando alguien escribe una dirección web y presiona Enter.

El viaje de una página web

Cuando escribes www.miempresa.com en tu navegador, ocurre una cadena de eventos en milisegundos:

// Flujo de una petición web

Escribes la URL en el navegador

El navegador (Chrome, Safari, Firefox) es el programa que muestra páginas web. Cuando escribes una dirección, él se encarga de ir a buscarla.

El DNS traduce el nombre a una dirección IP

El DNS (Domain Name System) es como el directorio telefónico de internet. Convierte "miempresa.com" en una dirección numérica como "142.250.80.14" que los servidores entienden.

El servidor recibe la petición

Un servidor es una computadora que está siempre encendida y conectada a internet. GitHub Pages actúa como el servidor donde viven nuestros sitios.

El servidor envía los archivos HTML, CSS y JS

Esos tres archivos son toda la página web. El navegador los recibe y los convierte en la página visual que el usuario ve.

Conceptos clave

🌐

Dominio

La dirección web: miempresa.com. La compramos en GoDaddy y se renueva anualmente.

🖥️

Servidor / Hosting

La computadora siempre encendida que guarda y sirve el sitio. Usamos GitHub Pages como hosting.

🗺️

DNS

Conecta el dominio (GoDaddy) con el servidor (GitHub Pages). Se configura una sola vez.

🌍

URL

La dirección completa: https://www.miempresa.com/contacto. Incluye protocolo, dominio y ruta.

✅

Resumen de esta lección

Web = archivos (HTML+CSS+JS) guardados en un servidor. El dominio (GoDaddy) apunta al servidor (GitHub Pages). El navegador descarga los archivos y muestra la página.

Módulo 1 · Lección 2

HTML desde cero

HTML es el lenguaje que define qué existe en una página web. Todo lo que ves — títulos, párrafos, imágenes, botones — se define con HTML.

¿Qué es HTML?

HTML significa HyperText Markup Language. No es un lenguaje de programación — es un lenguaje de marcado. Usas etiquetas para decirle al navegador qué tipo de contenido es cada cosa.

🏗️

HTML

La estructura

Como los ladrillos y paredes de una casa

🎨

CSS

El estilo

Como la pintura y la decoración

⚡

JavaScript

La interacción

Como las puertas, switches y electrodomésticos

Anatomía de una etiqueta

anatomia-etiqueta.html

  <h1>  Hola Mundo  </h1>
  ↑         ↑            ↑
  Apertura  Contenido   Cierre

  <img src="foto.jpg" alt="Mi foto">
  ↑         ↑
  Etiqueta  Atributo (información extra)
  (algunas etiquetas no necesitan cierre)

Estructura básica de un archivo HTML

index.html — Plantilla base

<!DOCTYPE html>  ← Le dice al navegador: "esto es HTML5"
<html lang="es">  ← Toda la página va aquí dentro

  <head>  ← Información invisible (para el navegador)
    <meta charset="UTF-8">         ← Soporte de tildes y ñ
    <meta name="viewport" content="width=device-width">  ← Responsive
    <title>Mi Empresa</title>        ← Título de la pestaña
    <link rel="stylesheet" href="styles.css">  ← Conectar CSS
  </head>

  <body>  ← Todo lo que el usuario VE va aquí

    <h1>Título principal</h1>
    <p>Un párrafo de texto aquí.</p>
    <img src="logo.png" alt="Logo">
    <button>Contactar</button>

  </body>
</html>

Etiquetas esenciales

Títulos

<h1>El más grande</h1>
<h2>Segundo nivel</h2>
<h3>Tercer nivel</h3>

Solo debe haber UN h1 por página. El h2 se usa para secciones.

Texto

<p>Párrafo normal</p>
<strong>Negrita</strong>
<em>Cursiva</em>
<span>Texto inline</span>

Listas

<ul>  ← lista con puntos
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>
<ol>  ← lista numerada
</ol>

Imágenes y enlaces

<img src="foto.jpg"
     alt="Descripción">

<a href="https://sitio.com">
  Ir al sitio
</a>

Contenedores (divs)

<div class="mi-seccion">
  <h2>Servicios</h2>
  <p>Texto...</p>
</div>

El div es una caja invisible para agrupar elementos y darles estilo.

Formulario

<form>
  <input type="text"
         name="nombre">
  <textarea name="msg"></textarea>
  <button>Enviar</button>
</form>

⚠️

Error común

Olvidar cerrar las etiquetas. Cada <div> necesita su </div>. Claude Code detecta y corrige estos errores automáticamente.

Módulo 1 · Lección 3

CSS — Estilo y diseño

CSS da color, tamaño, posición y personalidad a todo lo que HTML define. Sin CSS, todos los sitios web se verían igual: texto negro en fondo blanco.

Cómo funciona CSS

CSS funciona con selectores y propiedades. El selector elige qué elemento HTML quieres modificar, y las propiedades definen cómo se verá.

styles.css — Anatomía de una regla CSS

h1 {             ← Selector: elige el elemento <h1>
  color: blue;       ← Propiedad: color del texto
  font-size: 32px;   ← Propiedad: tamaño
  font-weight: bold; ← Propiedad: grosor de letra
}

.mi-clase {     ← Selector de clase (el punto es clave)
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

Box Model — La lógica del espacio

Cada elemento HTML es una caja rectangular. El Box Model define cómo se calcula el espacio alrededor de esa caja:

// Box Model — Cómo se calcula el espacio

Margin

Espacio fuera del elemento, entre él y otros elementos. margin: 20px añade 20px por todos lados.

Padding

Espacio dentro del elemento, entre el borde y el contenido. Hace la caja más grande internamente.

Border

El borde visible. border: 1px solid black = 1 píxel, línea sólida, color negro.

Width / Height

Ancho y alto del contenido. Puede ser en píxeles (px), porcentaje (%) o relativo a la pantalla (vw, vh).

Propiedades más usadas

styles.css — Propiedades frecuentes

.tarjeta {
  /* Colores */
  color: #333333;            ← Color del texto
  background-color: #ffffff;  ← Color de fondo

  /* Tipografía */
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 600;           ← 400=normal, 700=negrita
  line-height: 1.6;           ← Interlineado
  text-align: center;

  /* Espacio */
  padding: 24px 32px;        ← vertical horizontal
  margin: 0 auto;            ← centra el elemento

  /* Borde y forma */
  border: 1px solid #e0e0e0;
  border-radius: 12px;        ← Bordes redondeados
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);

  /* Tamaño */
  width: 100%;
  max-width: 1200px;         ← No crece más de esto
}

Flexbox — Para posicionar elementos

Flexbox es el sistema más usado para alinear y posicionar elementos. Con dos líneas de CSS puedes centrar contenido perfectamente.

flexbox-ejemplos.css

/* Centrar contenido (horizontal y vertical): */
.contenedor {
  display: flex;
  justify-content: center;   ← Horizontal
  align-items: center;       ← Vertical
}

/* Elementos en fila con espacio entre ellos: */
.navbar {
  display: flex;
  justify-content: space-between;  ← Espacio entre
  align-items: center;
  gap: 16px;                       ← Espacio entre hijos
}

/* Grid de 3 columnas: */
.grid-servicios {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  ← 3 columnas iguales
  gap: 24px;
}

Módulo 1 · Lección 4

JavaScript — Interactividad

JavaScript es el único lenguaje de programación que los navegadores entienden. Hace que el sitio responda a las acciones del usuario y se comunique con servicios externos.

¿Qué puede hacer JavaScript?

🖱️

Responder eventos

Click en botón, mover el ratón, escribir en un campo, hacer scroll.

🔄

Modificar HTML

Cambiar texto, mostrar/ocultar elementos, actualizar precios, agregar elementos.

🌐

Llamar APIs

Enviar formularios, cargar datos de otros servicios, enviar emails con EmailJS.

Conceptos básicos

script.js — Variables y funciones

// Variables: guardar información temporalmente
let nombre = "María García";     ← Texto (string)
let edad = 28;                    ← Número
let activo = true;              ← Verdadero/Falso (boolean)

// Funciones: acciones reutilizables
function saludar(persona) {
  alert("Hola, " + persona);
}

saludar(nombre);  ← Llama la función → muestra "Hola, María García"

// Condicionales: tomar decisiones
if (edad >= 18) {
  console.log("Mayor de edad");
} else {
  console.log("Menor de edad");
}

Interactuar con el HTML

script.js — Manipular elementos del DOM

// Seleccionar un elemento del HTML:
const titulo = document.getElementById("mi-titulo");
const botones = document.querySelectorAll(".btn");

// Cambiar el texto:
titulo.textContent = "Nuevo título";

// Cambiar estilos:
titulo.style.color = "red";

// Escuchar un click:
document.getElementById("btn-contacto").addEventListener("click", function() {
  alert("¡Gracias por contactarnos!");
});

// Obtener valor de un input:
const emailUsuario = document.getElementById("email-input").value;

Fetch — Llamar a APIs externas

El método fetch() es cómo JavaScript se comunica con servicios externos (EmailJS, Formspree, Firebase, Cloudinary, etc.).

script.js — Llamada a una API con fetch

// Ejemplo: enviar datos a Formspree cuando alguien llena el formulario
document.getElementById("mi-form").addEventListener("submit", async function(e) {
  e.preventDefault();  ← Evita recargar la página

  const respuesta = await fetch("https://formspree.io/f/TU_ID", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      nombre: document.getElementById("nombre").value,
      email:  document.getElementById("email").value,
    })
  });

  if (respuesta.ok) {
    alert("✅ Mensaje enviado correctamente");
  } else {
    alert("❌ Error al enviar. Intenta de nuevo.");
  }
});

🧠 Pregunta rápida

¿Qué hace e.preventDefault() en el código de arriba?

Envía el formulario

Evita que la página se recargue al enviar el formulario

Borra los datos del formulario

✅ Correcto. Por defecto, al enviar un formulario HTML la página se recarga. preventDefault() cancela ese comportamiento para que JavaScript pueda manejar el envío sin recargar.

Módulo 2 · Lección 5

GitHub y control de versiones

GitHub es donde vive todo el código. Con GitHub Pages el sitio se publica directamente desde el repositorio — cada push a main actualiza el sitio en minutos.

¿Qué es Git y GitHub?

📜

Git

Un sistema que registra todos los cambios de tu proyecto. Funciona en tu computadora. Es como el "historial de deshacer" de todo el código, para siempre.

🐙

GitHub

El servicio en la nube que guarda tu repositorio de Git. Es como Google Drive, pero para código. Incluye GitHub Pages para publicar el sitio directamente desde el repositorio.

Conceptos clave

📁

Repositorio (repo)

La carpeta principal del proyecto

Un repositorio contiene todos los archivos de tu sitio web (HTML, CSS, JS, imágenes) más el historial completo de cada cambio que se ha hecho. Es la "fuente de verdad" del proyecto.

💡

Cada proyecto = un repositorio. Nunca mezcles dos proyectos en el mismo repositorio.

💾

Commit

Un punto de guardado con descripción

Un commit es como hacer una foto del estado actual del código. Cada commit tiene un mensaje que describe qué se cambió. Claude Code crea commits automáticamente.

terminal

$ git add .
$ git commit -m "Añadí sección de testimonios"
$ git commit -m "Corregí el formulario de contacto"
$ git commit -m "Actualicé el logo y colores del header"

🌿

Branch (rama)

Una copia paralela del proyecto

Una rama es una copia del proyecto donde puedes experimentar sin afectar el sitio publicado. La rama principal se llama main y es la versión que está en producción (publicada en GitHub Pages).

// Flujo de ramas

⬆️

Push y Pull

Sincronizar tu computadora con GitHub

Push = subir tus cambios a GitHub. Pull = descargar los últimos cambios de GitHub a tu computadora.

Tu computadora

→ push →

GitHub

→ auto →

GitHub Pages

Cuando Claude Code hace un push a la rama main, GitHub Pages detecta el cambio automáticamente y publica la nueva versión del sitio en ~1 minuto.

Comandos esenciales

terminal — Comandos Git más usados

# Descargar un repositorio a tu computadora:
git clone https://github.com/tu-usuario/proyecto.git

# Ver qué archivos han cambiado:
git status

# Preparar todos los cambios:
git add .

# Crear un commit con descripción:
git commit -m "Descripción del cambio"

# Subir a GitHub (→ GitHub Pages lo publica automáticamente):
git push

# Descargar los últimos cambios:
git pull

# Ver el historial de commits:
git log --oneline

🤖

Con Claude Code no necesitas escribir estos comandos

Claude Code ejecuta git add, commit y push automáticamente cuando le pides que haga un cambio. Pero es importante entender lo que hace por detrás.

Módulo 2 · Lección 6

IA: Claude Code y Gemini Pro

La IA es el motor del flujo de trabajo. Gemini Pro genera la base del sitio sin costo. Claude y Claude Code refinan, mejoran y actualizan el proyecto.

// Flujo IA en el proceso de creación

Gemini Pro — El generador gratuito

Gemini Pro (gemini.google.com) es la IA de Google. Úsala para generar el 80% del código inicial del sitio web sin gastar dinero. La clave está en el prompt que escribes.

Cómo escribir un buen prompt para Gemini

Prompt ideal para Gemini Pro

Crea un sitio web completo para una clínica dental llamada "Sonrisa Lima".

PÁGINAS:
- index.html: página principal
- servicios.html: lista de servicios
- contacto.html: formulario de contacto

SECCIONES EN index.html:
1. Header con navegación y logo
2. Hero con título grande, subtítulo y botón "Agendar cita"
3. Sección "Por qué elegirnos" con 3 tarjetas
4. Sección de servicios destacados
5. Testimonio de 3 pacientes
6. Footer con datos de contacto

DISEÑO:
- Colores: azul #1a73e8 y blanco
- Fuente: Google Fonts 'Poppins'
- Moderno, profesional, responsive (mobile-first)
- Incluye animaciones suaves al hacer scroll

TÉCNICO:
- HTML5, CSS3 y JavaScript puro (sin frameworks)
- Un archivo index.html, un styles.css, un script.js
- Comentarios en el código explicando cada sección

⚠️

Siempre revisa el código de Gemini antes de usarlo

Gemini puede generar código con errores o que no funciona perfectamente. Pega el resultado en Claude para que lo revise y corrija antes de subirlo a GitHub.

Claude Code — El que actualiza el proyecto

Claude Code es una herramienta de línea de comandos (terminal) que conecta la IA directamente con tu repositorio de GitHub. Puedes pedirle cambios en lenguaje natural y él modifica los archivos y hace el push automáticamente.

Instalar Claude Code Requiere Node.js instalado. En la terminal: npm install -g @anthropic-ai/claude-code

Abrir la carpeta del proyecto en la terminal Navega a la carpeta del repositorio clonado y ejecuta: claude

Dar instrucciones en español "Cambia el color del header a #2563eb", "Añade una sección de precios con 3 planes", "Corrige el formulario para que valide el email"

Claude Code hace los cambios y pushea Modifica los archivos necesarios, hace commit y push a GitHub. GitHub Pages publica la nueva versión en minutos.

Módulo 2 · Lección 7

GitHub Pages y publicación web

El hosting que usamos es GitHub Pages: el alojamiento gratuito y abierto que ofrece GitHub. El dominio de GoDaddy le da la dirección .com, y el DNS se configura tanto en GoDaddy como en GitHub. Firebase lo reservamos para guardar datos y gestionar logins.

GitHub Pages — Hosting gratuito y abierto

GitHub Pages es el servicio de alojamiento web integrado en GitHub. No necesitas instalar nada ni pagar: cuando subes tu código al repositorio, GitHub Pages publica el sitio automáticamente. Es la solución más simple y directa para sitios estáticos (HTML + CSS + JS).

🆓

100% gratuito y abierto

Sin límites ocultos para sitios estáticos. Solo necesitas un repositorio público (o privado con plan gratuito de GitHub).

🔒

HTTPS automático

El candado verde (SSL) se activa solo, sin configuración extra. Funciona también con dominios personalizados.

🔄

Deploy automático

Cada push a la rama main publica la nueva versión automáticamente en ~1 minuto. Sin tocar nada más.

🌐

URL propia de GitHub

Sin dominio personalizado, el sitio queda en tuusuario.github.io/repo. Con GoDaddy obtienes tu .com.

Activar GitHub Pages en tu repositorio

Ve a la configuración del repositorioEn tu repo de GitHub → pestaña "Settings" → en el menú lateral busca "Pages".

Selecciona la rama a publicarEn "Branch" elige main y la carpeta / (root) → clic en "Save".

Espera ~1 minuto y visita la URLGitHub te muestra la URL del sitio (tuusuario.github.io/repo). Desde ahora, cada push actualiza el sitio automáticamente.

Firebase — Base de datos y autenticación

Firebase no lo usamos para hospedar el sitio (eso lo hace GitHub Pages), sino para dos funcionalidades específicas que requieren un backend:

🗄️

Guardar información

Firestore (la base de datos de Firebase) almacena datos del sitio: reservas, formularios avanzados, catálogos dinámicos, preferencias de usuario, etc.

🔐

Autenticación (login)

Firebase Auth gestiona el sistema de login: registro, inicio de sesión, recuperación de contraseña. Se usa en sitios que tienen área privada o panel de usuario.

💡

Regla simple

Si el sitio es estático (solo muestra contenido), basta con GitHub Pages. Si el sitio necesita guardar datos o tiene login, se añade Firebase para esas funcionalidades — el hosting sigue siendo GitHub Pages.

GoDaddy — Tu dominio .com

El dominio es la dirección que escriben los usuarios. Sin dominio propio, el sitio solo tiene la URL de GitHub (tuusuario.github.io/repo). Con GoDaddy compras miempresa.com.

Conectar GoDaddy con GitHub Pages

El DNS se configura en dos lugares: en GoDaddy apuntas el dominio hacia los servidores de GitHub, y en GitHub le dices qué dominio personalizado usar. Ambos lados deben coincidir.

Compra el dominio en godaddy.comBusca el nombre, verifica que esté disponible, paga (~$12-15/año para .com).

En GoDaddy → DNS → Agregar registros ACrea 4 registros tipo A apuntando a las IPs de GitHub Pages: 185.199.108.153 · 185.199.109.153 · 185.199.110.153 · 185.199.111.153

En GoDaddy → DNS → Agregar registro CNAMECrea un registro CNAME para www apuntando a tuusuario.github.io

En GitHub → Settings → Pages → Custom domainEscribe tu dominio (ej: miempresa.com) y haz clic en "Save". GitHub verificará los registros DNS.

Esperar propagación DNSEl DNS se propaga globalmente en 24-48 horas. Activa "Enforce HTTPS" en GitHub Pages una vez que el dominio esté verificado.

⏳

La espera del DNS es normal

48 horas puede sentirse largo, pero es el tiempo que tarda el sistema de DNS global en propagar el cambio. No hagas modificaciones al DNS durante ese tiempo — pueden reiniciar el contador.

Módulo 2 · Lección 8

Servicios y herramientas extra

Estas herramientas se integran al sitio para añadir funcionalidades: imágenes optimizadas, formularios, emails, analítica y componentes de diseño.

🖼️

Cloudinary

Imágenes optimizadas en la nube

Cloudinary almacena imágenes y las optimiza automáticamente: reduce el peso sin perder calidad. Una foto de 5 MB queda en 200 KB. Además puedes transformar imágenes con solo cambiar la URL.

Transformaciones con URL

<!-- Original: -->
<img src="https://res.cloudinary.com/TU-CUENTA/image/upload/foto.jpg">

<!-- Redimensionar a 400px de ancho: -->
<img src="https://res.cloudinary.com/TU-CUENTA/image/upload/w_400/foto.jpg">

<!-- Recorte cuadrado y circular: -->
<img src=".../w_200,h_200,c_fill,r_max/foto.jpg">

<!-- Calidad reducida al 70% (más ligero): -->
<img src=".../q_70/foto.jpg">

💡

Cloudinary es ideal para fotos propias o del cliente. Las fotos de stock las maneja Claude directamente desde Unsplash, sin necesidad de descargarlas.

📬

Formspree

Formularios que envían emails sin servidor

Con Formspree, un formulario HTML puede enviar emails sin necesitar ningún servidor propio. Solo añades su URL al atributo action del formulario.

formulario-contacto.html

<form action="https://formspree.io/f/TU_CODIGO" method="POST">
  <input type="text"  name="nombre"  required>
  <input type="email" name="email"   required>
  <textarea name="mensaje"></textarea>
  <button type="submit">Enviar</button>
</form>

<!-- Cada envío llega a tu email. Gratis hasta 50 envíos/mes -->

✉️

EmailJS

Envío de emails desde JavaScript con más control

EmailJS permite enviar emails desde JavaScript con más flexibilidad que Formspree. Útil para emails de confirmación automáticos o notificaciones personalizadas.

script.js — EmailJS

<!-- 1. Incluir en el HTML -->
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>

// 2. Inicializar con tu clave pública:
emailjs.init("TU_PUBLIC_KEY");

// 3. Enviar email:
emailjs.send("service_xxx", "template_xxx", {
  from_name: "María García",
  from_email: "maria@email.com",
  message: "Quiero más información"
}).then(() => alert("¡Email enviado!"));

📊

Databuddy

Analítica de visitas simple y privada

Databuddy te dice cuántas personas visitan el sitio, desde dónde, cuánto tiempo pasan y qué páginas ven. Es simple, rápido y respetuoso con la privacidad.

index.html — Instalar Databuddy

<!-- Pega esto en el <head> de CADA página del sitio: -->
<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="TU_PROYECTO_ID"
  defer
></script>

<!-- Los datos aparecen en el dashboard de databuddy.cc -->

⚛️

Reactbits

Componentes UI animados listos para usar

Reactbits (reactbits.dev) es una colección de componentes de interfaz listos: textos animados, fondos en movimiento, botones con efectos, tarjetas. Solo copias el código y lo pegas en tu proyecto.

Fondos animados (partículas, gradientes, ondas)
Efectos de texto (máquina de escribir, fade, scramble)
Componentes de UI (cards, modales, tooltips)
Disponible en versión HTML/Vanilla y React

🎨

Canva y Unsplash

Diseño y fotografía de alta calidad

Canva (canva.com): crea logos, banners, iconos y cualquier gráfico sin ser diseñador. Exporta en PNG para logos con transparencia, JPG para fotos y banners.

Unsplash (unsplash.com): más de 3 millones de fotografías profesionales completamente gratuitas. Claude ya usa Unsplash directamente al construir sitios — integra las imágenes sin que tengas que descargarlas ni buscarlas tú. Si necesitas una foto específica, simplemente pídesela a Claude en el prompt.

✅

No es necesario descargar fotos de Unsplash manualmente. Claude las selecciona e integra solo. Si quieres subir imágenes propias o del cliente, ahí sí usa Cloudinary para optimizarlas.

Módulo 3 · Lección 9

APIs — Cómo todo se conecta

Una API es el lenguaje que usan las aplicaciones para hablar entre sí. Cada vez que el sitio interactúa con Cloudinary, EmailJS, Firebase o Databuddy, lo hace a través de una API.

¿Qué es una API?

API significa Application Programming Interface. Es un contrato entre dos programas que define cómo pueden comunicarse. Piénsalo como un menú de restaurante:

👤

Tú (cliente)

Tu sitio web que necesita algo: enviar un email, cargar una imagen, registrar una visita.

🍽️

API (mesero)

El intermediario. Recibe tu petición, la lleva al servidor correcto y trae la respuesta.

🍳

Servidor (cocina)

El servicio externo que procesa: EmailJS envía el mail, Cloudinary entrega la imagen.

Anatomía de una llamada API

script.js — Petición API completa y explicada

const resultado = await fetch(
  "https://api.servicio.com/endpoint",  ← URL del API
  {
    method: "POST",    ← Tipo: GET (leer), POST (enviar), PUT (actualizar)

    headers: {          ← Metadatos de la petición
      "Content-Type": "application/json",  ← "Envío JSON"
      "Authorization": "Bearer TU_API_KEY"   ← Tu clave secreta
    },

    body: JSON.stringify({  ← Los datos que envías
      nombre: "Ana López",
      mensaje: "Hola, quiero información"
    })
  }
);

// La respuesta llega como JSON:
const datos = await resultado.json();
console.log(datos);  ← { success: true, id: "msg_123" }

Las APIs de tu ecosistema

// Mapa de integraciones del sitio web

API Keys — Las llaves de acceso

Cada servicio externo te da una API Key (clave de API): un código único que identifica a tu cuenta cuando haces peticiones. Es como tu contraseña de acceso al servicio.

🔒

Nunca subas API Keys a GitHub

Las API Keys son privadas. Si las subes al repositorio, cualquiera puede verlas y usar tu cuenta. Guárdalas en un archivo .env que NO se sube a GitHub, o úsalas directamente en el panel de configuración de Firebase.

Módulo 3 · Lección 10

Flujo completo de un proyecto

Esta es la lección final. Aquí verás el proceso de principio a fin: ya sea para un cliente o para un proyecto propio — un portafolio personal, una tienda tuya, una herramienta interna — el flujo es el mismo desde la idea hasta el sitio publicado con dominio propio.

Los 10 pasos del proceso

Planificación del proyecto

Define qué páginas tendrá el sitio, qué colores, qué contenido y qué funcionalidades necesita (formulario de contacto, galería, tienda). Tanto si es para un cliente como para uso propio, guarda todo en Google Drive antes de empezar.

Crear repositorio en GitHub

github.com → "New repository" → Nombre del proyecto (ej: clinica-dental-lima) → "Create repository". Esta es la base del proyecto.

Diseño en Canva + fotos

Crea el logo en Canva. Las fotos de stock Claude las obtiene de Unsplash automáticamente. Si tienes fotos propias o del cliente, súbelas a Cloudinary para optimizarlas.

Generar la base con Gemini Pro (gratis)

Escribe un prompt detallado en gemini.google.com describiendo el sitio. Copia el HTML, CSS y JS generado. Revisa que no tenga errores obvios.

Subir el código a GitHub

Crea los archivos en la carpeta del repositorio clonado. Luego: git add . → git commit -m "Estructura inicial" → git push

Refinar con Claude Code

Abre la terminal en la carpeta del proyecto, ejecuta claude y empieza a pedir mejoras en español. Claude Code hace los cambios y pushea automáticamente.

Activar GitHub Pages

En el repositorio → Settings → Pages → selecciona la rama "main" → Save. El sitio queda publicado en tuusuario.github.io/repo. Si el sitio necesita login o base de datos, crea el proyecto en Firebase para esas funcionalidades.

Integrar formulario y emails

Crear cuenta en formspree.io → obtener endpoint → decirle a Claude Code que integre Formspree en el formulario de contacto del sitio.

Instalar Databuddy para analítica

Crear cuenta en databuddy.cc → obtener el script → decirle a Claude Code que lo añada al <head> de todas las páginas.

Comprar dominio y conectar DNS

Comprar el dominio en GoDaddy → en GoDaddy añadir registros A apuntando a GitHub → en GitHub Pages añadir el dominio personalizado → esperar 24-48h de propagación DNS → activar HTTPS. ¡El sitio está listo!

Cómo actualizar el sitio en el futuro

Se necesita un cambio

→

Claude Code

→

Cambios en archivos

→

Push a GitHub

→

GitHub Pages publica

Todo el proceso tarda menos de 5 minutos. El sitio se actualiza automáticamente sin tocar nada en el servidor. Aplica igual para proyectos de clientes o proyectos propios.

Checklist de lanzamiento

Repositorio creado en GitHub con nombre del proyecto
Logo y fotos propias subidas a Cloudinary (si aplica)
Código HTML/CSS/JS en el repositorio
GitHub Pages activado — sitio visible en tuusuario.github.io/repo
Formulario de contacto funcional (Formspree o EmailJS)
Databuddy instalado en todas las páginas
Sitio responsive probado en móvil
Dominio comprado en GoDaddy
DNS configurado en GoDaddy (registros A) y en GitHub Pages (dominio personalizado)
HTTPS activo (candado verde en el navegador)
Probar formulario de contacto en producción
Guardar credenciales en Google Drive (para clientes o uso propio)

Módulo 4 · Lección 11

Diseño y tipografía para desarrolladores

El código funciona, pero el diseño convence. Aprende los principios fundamentales que separan un sitio amateur de uno profesional — sin necesidad de ser diseñador gráfico.

Por qué el diseño importa aunque seas desarrollador

La mayoría de los desarrolladores subestiman el diseño hasta que un cliente rechaza un sitio que "funciona perfectamente". El problema casi nunca es el código: es cómo se ve. El diseño no es decoración — es comunicación. Un buen diseño guía al visitante, genera confianza y convierte clics en clientes.

📊

El 94% de las primeras impresiones son de diseño, no de contenido

Los usuarios juzgan la credibilidad de un sitio en menos de 50 milisegundos — antes de leer una sola palabra. Si el diseño no convence, el contenido nunca llega a leerse.

Los 4 principios CARP

Todo buen diseño se puede analizar con cuatro principios fundamentales: Contraste, Alineación, Repetición y Proximidad. Memoriza estas siglas — te van a salvar en cada proyecto.

// Los 4 principios CARP del diseño visual

Tipografía: la base de todo

La tipografía representa el 95% del diseño web según los tipógrafos más reconocidos. Elige mal las fuentes y el sitio se verá barato aunque todo lo demás sea perfecto.

🔤

Serif vs Sans-serif

Serif (Times New Roman, Georgia): remates en las letras. Formal, editorial, clásico. Sans-serif (DM Sans, Inter, Poppins): sin remates. Moderno, limpio, digital. Para la web: usa sans-serif.

📐

Escala tipográfica

Los tamaños deben seguir una proporción. Un sistema simple: h1=48px, h2=36px, h3=28px, h4=22px, body=16px, small=13px. Nunca uses tamaños aleatorios.

🌐

Google Fonts

La combinación más usada por profesionales: DM Sans para texto corrido + DM Mono para código. Alternativa: Inter + JetBrains Mono. Máximo 2 fuentes por sitio.

Color: paletas de 3 colores

El error más común es usar demasiados colores. Un sistema profesional tiene exactamente 3: un color principal (brand), un color de acento (calls to action) y un color neutro (texto y fondos). Herramienta recomendada: coolors.co — genera paletas armónicas en segundos.

style.css — Sistema de variables CSS para paleta profesional

/* ── Paleta de 3 colores + sistema completo ── */
:root {
  /* 1. Color principal (brand) */
  --color-brand:       #1a56e8;   /* Azul DGP */
  --color-brand-dark:  #0d3db8;   /* Hover del brand */
  --color-brand-bg:    rgba(26,86,232,0.08);

  /* 2. Color de acento (acciones) */
  --color-accent:      #2dd4bf;   /* Verde-agua */
  --color-accent-dark: #0e9e8e;

  /* 3. Neutros (texto y fondos) */
  --color-bg:          #0a0f1e;   /* Fondo oscuro */
  --color-surface:     #111827;   /* Cards y paneles */
  --color-text:        #e8e8f0;   /* Texto principal */
  --color-text-muted:  #6b7280;   /* Texto secundario */
  --color-border:      rgba(255,255,255,0.08);

  /* Tipografía */
  --font-body:         'DM Sans', sans-serif;
  --font-mono:         'DM Mono', monospace;
  --font-display:      'Bebas Neue', sans-serif;

  /* Escala de tamaños */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
}

El espacio en blanco: menos es más

El espacio en blanco (o espacio negativo) es el área vacía entre elementos. Los desarrolladores novatos tienden a llenarlo todo — botones pegados, texto sin margen, secciones sin respiración. El espacio en blanco no es espacio desperdiciado: es lo que hace que el contenido respire y se vea premium.

⚠️

Los 5 errores de diseño más comunes en desarrolladores

Demasiados colores sin sistema · Fuentes mixtas sin jerarquía · Botones sin suficiente padding · Texto demasiado ancho (más de 70 caracteres por línea) · Imágenes sin proporción definida.

Checklist de diseño antes de entregar

¿Usas máximo 2 fuentes y 3 colores?
¿Todos los textos tienen suficiente contraste con el fondo? (ratio mínimo 4.5:1)
¿Los elementos relacionados están agrupados visualmente?
¿Los botones tienen al menos 12px de padding vertical y 20px horizontal?
¿La jerarquía de títulos es clara? (h1 > h2 > h3, nunca invertida)
¿El ancho del texto corrido no supera los 680px?
¿Hay suficiente espacio entre secciones? (mínimo 64px)
¿Los colores de tu paleta están definidos como variables CSS?

Módulo 4 · Lección 12

CSS avanzado y animaciones

Variables CSS, transiciones, keyframes, Grid y Flexbox avanzados. Estas son las herramientas que convierten un sitio estático en una experiencia visual memorable.

Variables CSS — el sistema que cambiará tu vida

Las custom properties (variables CSS) te permiten definir valores una sola vez y reutilizarlos en todo el archivo. Si el cliente quiere cambiar el color azul a verde, cambias una línea — no cientos.

style.css — Variables para colores, espaciado y radios

:root {
  /* Colores */
  --blue:    #1a56e8;
  --teal:    #2dd4bf;
  --dark:    #0a0f1e;
  --surface: #111827;

  /* Espaciado (escala × 4) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radios */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-full: 9999px;
}

/* Uso: */
.card {
  background: var(--surface);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
}

Transitions vs Animations

Transitions: para cambios entre dos estados (hover, focus, active). Simple y declarativo. Animations con @keyframes: para movimientos en bucle, secuencias complejas o animaciones de entrada. Usa transitions cuando puedas — son más performantes.

// Flujo de una animación CSS con @keyframes

3 animaciones que usarás en todos tus proyectos

style.css — fadeIn, slideUp y pulse

/* 1. FadeIn — entrada suave */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. SlideUp — elemento que sube al aparecer */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Pulse — para badges y notificaciones */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* Aplicar las animaciones */
.hero-title   { animation: fadeIn  0.6s ease; }
.card         { animation: slideUp 0.5s ease both; }
.badge-live   { animation: pulse   2s ease-in-out infinite; }

⚡

Tip de rendimiento: usa transform y opacity

Animar transform y opacity es gratis para el navegador — no requiere repintar el layout. Evita animar width, height, margin o top/left — esas propiedades causan reflows costosos que hacen el sitio lento.

CSS Grid avanzado: areas y auto-fill

style.css — Grid con areas nombradas y auto-fill

/* Grid con áreas nombradas — layout completo de página */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* auto-fill: crea columnas automáticamente */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* auto-fit: elimina columnas vacías (responsive) */
.cards-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

Las 10 propiedades CSS que todo dev debe dominar

display: flex / grid — la base de cualquier layout moderno
position: relative / absolute / sticky — para overlays, badges y headers fijos
gap — espaciado entre elementos en flex y grid
clamp() — tamaños fluidos entre un mínimo y un máximo
transition: all 0.2s ease — hover effects suaves
transform — mover, escalar, rotar sin afectar el layout
z-index — controlar qué elemento queda encima
overflow: hidden — para bordes redondeados con imágenes
var(--variable) — sistema de design tokens
@media (min-width: Xpx) — responsive design

Módulo 4 · Lección 13

Responsive design y mobile-first

Más del 60% del tráfico web viene de móviles. Si tu sitio se ve mal en un teléfono, pierdes más de la mitad de tus visitantes — y Google te penaliza en los resultados de búsqueda.

¿Qué significa "mobile-first"?

Mobile-first es una estrategia de diseño y desarrollo donde primero diseñas para el móvil y luego adaptas para pantallas más grandes. Es lo opuesto de lo que hacían antes (diseñar para escritorio y luego "arreglar" el móvil). Google indexa tu sitio con un crawler móvil desde 2019 — si no está optimizado para móvil, no apareces bien posicionado.

⚠️

Google penaliza sitios no responsivos en sus rankings de búsqueda

Desde 2019, Google usa Mobile-First Indexing: rastrea e indexa la versión móvil de tu sitio como la versión principal. Un sitio que no responde bien en móvil tiene menos visibilidad en Google que uno optimizado.

// Breakpoints estándar de responsive design

Media queries: la estrategia correcta

Con mobile-first, usas min-width (no max-width). Comienzas con los estilos del móvil y agregas capas para pantallas más grandes.

style.css — Layout mobile-first que se adapta a 3 tamaños

/* ── BASE: móvil primero (sin media query) ── */
.grid {
  display: grid;
  grid-template-columns: 1fr;          /* 1 columna en móvil */
  gap: 16px;
  padding: 16px;
}

/* ── TABLET: 768px+ ── */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 columnas en tablet */
    gap: 24px;
    padding: 24px;
  }
}

/* ── DESKTOP: 1024px+ ── */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);  /* 3 columnas en desktop */
    gap: 32px;
    padding: 40px;
  }
}

Unidades relativas y clamp()

Olvida los píxeles fijos para tipografía y espaciado. Las unidades relativas se adaptan automáticamente al contexto del usuario.

📏

rem y em

rem: relativo al font-size del elemento raíz (html). Ideal para espaciado consistente. em: relativo al font-size del padre. Útil para padding interno de botones.

📐

vw, vh y %

vw/vh: porcentaje del viewport. Hero sections con height: 100vh. %: relativo al padre. Para layouts fluidos dentro de contenedores.

✨

clamp() — lo mejor

Define un valor que crece con la pantalla entre un mínimo y un máximo. clamp(1rem, 5vw, 3rem): mínimo 16px, fluido, máximo 48px.

style.css — Tipografía fluida con clamp()

/* ── Tipografía que se adapta sola ── */
h1 {
  font-size: clamp(28px, 5vw, 64px);  /* 28px → 64px */
}
h2 {
  font-size: clamp(20px, 3vw, 40px);
}
p {
  font-size: clamp(14px, 1.6vw, 18px);
}

/* El viewport meta tag — OBLIGATORIO */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
/* Sin este tag, el móvil simula una pantalla de 980px — todo se ve diminuto */

/* Imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
  loading: lazy;     /* lazy loading nativo */
}

Checklist de responsive design antes de publicar

¿Tiene el meta viewport en el <head>?
¿Se ve correctamente en 375px (iPhone SE)?
¿El texto es legible sin hacer zoom?
¿Los botones tienen al menos 44px de altura táctil?
¿Las imágenes no desbordan el contenedor?
¿El menú de navegación funciona en móvil?
¿Los formularios son usables con teclado virtual?
¿Probaste con Chrome DevTools → Device Toolbar (Ctrl+Shift+M)?
¿El sitio carga rápido en 3G? (throttling en DevTools)
¿No hay scroll horizontal en ningún breakpoint?

Módulo 5 · Lección 14

SEO y posicionamiento en Google

Las redes sociales te dan tráfico mientras publicas. El SEO te da tráfico mientras duermes. Un sitio bien optimizado puede traer clientes durante años sin gastar un peso en publicidad.

¿Qué es el SEO y por qué importa?

SEO (Search Engine Optimization) es el conjunto de técnicas para que tu sitio aparezca en los primeros resultados de Google cuando alguien busca lo que ofreces. La diferencia entre aparecer en la posición 1 y la posición 10 es enorme: el primer resultado recibe el 28% de los clics, el décimo menos del 1%.

💡

Un sitio bien optimizado puede conseguir tráfico orgánico por años sin gastar en publicidad

El tráfico orgánico (SEO) tiene un ROI promedio 5 veces mayor que el tráfico de pago a largo plazo. Los primeros 3-6 meses son lentos, pero después el tráfico crece de forma compuesta.

// Cómo Google indexa una página web

Las meta tags esenciales

index.html — Template completo de meta tags para cualquier página

<head>
  <!-- Básico ──────────────────────────────────────────── -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO principal ───────────────────────────────────── -->
  <title>Clínica Dental Lima · Blanqueamiento y Ortodoncia</title>
  <meta name="description"
        content="Clínica dental en Lima Miraflores. Blanqueamiento, brackets y tratamientos preventivos. Agenda tu cita online.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://www.clinicadentallima.com">

  <!-- Open Graph (WhatsApp, LinkedIn, Facebook) ───────── -->
  <meta property="og:title"       content="Clínica Dental Lima">
  <meta property="og:description"  content="Sonríe con confianza...">
  <meta property="og:image"        content="https://tudominio.com/og.png">
  <meta property="og:type"         content="website">
  <meta property="og:url"          content="https://tudominio.com">
</head>

Estructura semántica HTML y Core Web Vitals

🏗️

HTML semántico

Usa <header>, <main>, <article>, <section>, <footer>. Google entiende mejor tu estructura y la jerarquía de tu contenido. Solo un h1 por página.

⚡

Core Web Vitals

LCP: carga del elemento más grande (<2.5s). FID: reacción a primer input (<100ms). CLS: estabilidad visual (<0.1). Son factores de ranking desde 2021.

🔧

Herramientas gratuitas

PageSpeed Insights: mide velocidad y CWV. Google Search Console: ve tus posiciones reales. Google Trends: palabras clave por región.

SEO on-page checklist de 15 puntos

¿El <title> tiene la keyword principal y es menor a 60 caracteres?
¿La meta description es atractiva y tiene entre 120-155 caracteres?
¿Hay exactamente un <h1> en la página?
¿Los h2 y h3 incluyen variaciones de la keyword?
¿Las imágenes tienen atributo alt descriptivo?
¿La URL es corta y descriptiva? (ej: /servicios-dentales, no /page?id=23)
¿El sitio carga en menos de 3 segundos?
¿Tiene certificado SSL (HTTPS)?
¿El contenido tiene más de 300 palabras por página?
¿Hay links internos entre páginas relacionadas?
¿Está registrado en Google Search Console?
¿Tiene sitemap.xml?
¿El texto en imágenes tiene su equivalente en HTML?
¿La estructura de headings es lógica? (h1 → h2 → h3)
¿El sitio es responsive y pasa el test de usabilidad móvil?

Módulo 5 · Lección 15

Analítica web y métricas que importan

Sin datos, solo tienes opiniones. La analítica web te dice exactamente qué funciona, qué no, y dónde pierdes usuarios — para que puedas tomar decisiones basadas en hechos, no suposiciones.

Por qué necesitas datos para tomar decisiones

La mayoría de los desarrolladores publican un sitio y nunca revisan los datos. Resultado: siguen construyendo funciones que nadie usa y no arreglan las páginas que hacen huir a los visitantes. Los datos te dan superpoderes: sabes exactamente qué página tiene alta tasa de rebote, qué botón nadie clica, y desde dónde viene tu tráfico.

📈

Lo que no se mide, no se puede mejorar

Peter Drucker. Un cambio en el diseño de un botón puede aumentar las conversiones un 30%. Pero solo lo sabrás si mides antes y después. Sin analítica, estás navegando a ciegas.

// Embudo de conversión: de visitante a cliente

Vanity metrics vs métricas accionables

😵

Vanity metrics

Se ven bien pero no dicen nada útil: seguidores en redes, páginas vistas totales, likes. No te dicen si algo funciona.

🎯

Métricas accionables

Tasa de conversión, costo por lead, tasa de rebote por página, tiempo en página antes del abandono. Estas te dicen qué cambiar.

🛠️

Herramientas

Databuddy: instalación en 3 líneas, amigable con la privacidad. Google Analytics 4: gratis, potente, curva de aprendizaje alta. Hotjar: heatmaps.

Instalar Databuddy en 3 líneas

index.html — Databuddy: analítica respetuosa con la privacidad

<!-- Pega esto en el <head> de tu página -->
<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="TU_CLIENT_ID"
  defer
></script>

<!-- Rastrear eventos personalizados con JS -->
<script>
  // Click en botón de contacto
  document.getElementById('btn-contacto')
    .addEventListener('click', () => {
      Databuddy.track('click_boton_contacto');
    });

  // Formulario enviado
  document.getElementById('form-contacto')
    .addEventListener('submit', () => {
      Databuddy.track('formulario_enviado', {
        pagina: window.location.pathname
      });
    });
</script>

Heatmaps y A/B testing básico

Heatmaps

Visualizan dónde hacen clic los usuarios en tu página con mapas de calor. Herramientas: Hotjar (gratis hasta 35 sesiones/día), Microsoft Clarity (gratis ilimitado). Te revelan si los usuarios ignoran el CTA principal o clican en elementos que no son links.

A/B testing básico

Cambia UNA cosa a la vez (el color del botón, el texto del CTA, el título del hero) y mide durante 2 semanas. El que genera más conversiones gana. Nunca cambies dos cosas simultáneamente — no sabrás cuál funcionó.

Reporte mensual para clientes

Una hoja simple en Google Docs: sesiones del mes, fuentes de tráfico (orgánico/directo/redes), conversiones y comparativa con el mes anterior. Los clientes valoran que les expliques los datos — no todos los proveedores lo hacen.

Módulo 5 · Lección 16 — Lección final

Tu portafolio y primeros clientes

El conocimiento sin visibilidad no genera ingresos. Esta lección te enseña cómo presentar tu trabajo, conseguir tus primeros clientes y construir una carrera sostenible como desarrollador web.

Por qué un portafolio vale más que un CV

Un CV dice lo que puedes hacer. Un portafolio demuestra lo que puedes hacer. Para un desarrollador web, mostrar proyectos reales (o bien ejecutados) convence mucho más que listar tecnologías. El cliente no contrata a quien más sabe — contrata a quien mejor le explica cómo puede ayudarlo.

💡

Tu primer cliente no lo consigues por ser el mejor — lo consigues por ser el más visible para alguien que te necesita

La visibilidad supera a la habilidad en las primeras etapas. Muestra tu trabajo, habla de lo que aprendes, ayuda a otros. El trabajo llega cuando la gente sabe que existes.

// Embudo de adquisición de clientes como freelancer

Estructura de un portafolio que convierte

Hero — quién eres y qué haces

Una frase directa: "Creo sitios web profesionales para pequeños negocios en [ciudad]." Sin rodeos. El visitante debe entender en 3 segundos si eres lo que busca.

Proyectos — muestra tu trabajo

Mínimo 3 proyectos. Si no tienes clientes reales, crea proyectos de práctica bien ejecutados: un sitio ficticio para una clínica dental, un restaurante, una tienda. Un proyecto falso bien hecho convence más que un proyecto real mal presentado.

Proceso — cómo trabajas

Explica tus pasos: 1) Reunión inicial, 2) Diseño, 3) Desarrollo, 4) Revisiones, 5) Entrega. Esto genera confianza — el cliente sabe qué esperar y cuándo.

Contacto — facilita el siguiente paso

Formulario simple (nombre, email, mensaje, presupuesto aproximado) + WhatsApp directo. Cuantos menos campos, más conversiones. Incluye tu tiempo de respuesta: "Respondo en menos de 24 horas".

Estructura HTML de portafolio profesional

index.html — Estructura base de portafolio con formulario de contacto

<body>

  <!-- Hero -->
  <section id="hero">
    <h1>Sitios web que convierten visitantes en clientes</h1>
    <p>Desarrollador web · Lima, Perú · Disponible para proyectos</p>
    <a href="#contacto" class="btn-primary">Ver mis proyectos</a>
  </section>

  <!-- Proyectos -->
  <section id="proyectos">
    <h2>Proyectos recientes</h2>
    <div class="grid-proyectos">
      <!-- Cada proyecto -->
      <article class="proyecto-card">
        <img src="screenshot.jpg" alt="Clínica Dental Lima">
        <h3>Clínica Dental Lima</h3>
        <p>Sitio completo con agenda online y galería de casos.</p>
        <a href="https://demo-dental.com">Ver sitio →</a>
      </article>
    </div>
  </section>

  <!-- Contacto -->
  <section id="contacto">
    <h2>Hablemos de tu proyecto</h2>
    <form action="https://formspree.io/f/TU_ID" method="POST">
      <input    name="nombre"      placeholder="Tu nombre"     required>
      <input    name="email"       type="email"           required>
      <select   name="presupuesto">
        <option>Menos de $500</option>
        <option>$500 – $1,500</option>
        <option>Más de $1,500</option>
      </select>
      <textarea name="mensaje"     placeholder="Cuéntame tu proyecto"></textarea>
      <button   type="submit">Enviar mensaje →</button>
    </form>
  </section>

</body>

Dónde conseguir tus primeros clientes

👥

Network personal

El primer cliente casi siempre es alguien que ya te conoce. Avisa a familiares, amigos y conocidos que ofreces el servicio. No tengas vergüenza — es un negocio legítimo. Di exactamente qué haces y cuánto cuesta.

💼

LinkedIn y Fiverr

LinkedIn: comparte proyectos y aprendizajes. Los dueños de negocios locales están ahí. Fiverr: marketplace global. Comienza con precios bajos para acumular reseñas, luego súbelos.

📱

Grupos y comunidades

Grupos de Facebook de emprendedores locales, grupos de WhatsApp de negocios de tu ciudad, foros de Reddit. Ofrece valor gratuito primero (responde preguntas) antes de promocionarte.

Cobrar por proyecto, no por hora

El error más caro del freelancer principiante es cobrar por hora. El cliente no sabe cuánto va a pagar y tú te presionas para trabajar rápido. Cobra por proyecto: "Un sitio de 5 páginas con formulario de contacto: $800". El cliente sabe qué va a pagar, tú sabes qué vas a entregar. Ganas ambos.

📋

El kit del freelancer: lo que necesitas antes de tener clientes

Contrato simple (Google Docs, 1 página) · Factura básica (Wave o FreshBooks, gratis) · 50% de pago por adelantado siempre · Herramienta de gestión (Notion o Trello) · Correo profesional (tuermail@tudominio.com)

Checklist de lanzamiento: antes de buscar clientes

¿Tu portafolio tiene dominio propio? (no .github.io)
¿Muestra al menos 3 proyectos con descripción y link?
¿Tiene una foto tuya y una bio de 2-3 oraciones?
¿El formulario de contacto funciona y llega a tu email?
¿Definiste tus precios? (al menos 3 paquetes)
¿Tienes un contrato simple listo para usar?
¿Tu LinkedIn está actualizado con "Desarrollador Web Freelance"?
¿Avisaste a 10 personas de tu red que ofreces el servicio?
¿Tu sitio pasa el test de velocidad en PageSpeed Insights?
¿Tu sitio se ve bien en móvil?

🎓

¡Felicitaciones! Completaste el curso

Has recorrido las 16 lecciones y 5 módulos del curso Diseño y Desarrollo WEB con IA. Ahora tienes todas las herramientas para crear sitios profesionales, posicionarlos en Google y convertir tu habilidad en ingresos reales.

Completado

Lecciones

Módulos

Módulos

Completado

100%

Completado

Ya completaste este curso

DGP Global Group · Vol. 2 de 3

🌱

DE LA SEMILLA

AL ÁRBOL

Estrategia Digital · Educación Financiera · Crecimiento Personal

El libro que te hubiera gustado tener desde el principio.

Bienvenida

Una Nota Para Ti

Este libro no es un manual de instrucciones. Es una conversación.

Es la conversación que me hubiera gustado tener cuando empecé. La que nadie me dio cuando tenía el sueño en la cabeza pero el miedo en el estómago. La que me habría ahorrado años de rodeos, dinero mal invertido y energía desperdiciada en el camino equivocado.

No te voy a hablar como experto desde un pedestal. Te voy a hablar como alguien que también tuvo que aprender, que también se equivocó, que también dudó. Porque eso es lo que somos: seres humanos intentando construir algo mejor con lo que tenemos.

Este libro tiene tres ingredientes principales:

Estrategia digital real
Educación financiera
Crecimiento personal

Léelo con calma. Subraya lo que te resuena. Anota lo que quieres aplicar.

"El mejor momento para plantar un árbol fue hace 20 años. El segundo mejor momento es ahora."

— Proverbio chino

Parte I · La Semilla

Mentalidad y Propósito

Antes de construir tu negocio, construye tu base interior.

Capítulo 1

¿Por Qué Emprendes?

Antes de hablar de redes sociales, de algoritmos, de logos o de dinero... necesito hacerte una pregunta. Una sola. ¿Por qué emprendes?

No es una pregunta trampa. No hay respuesta correcta. Pero sí hay respuestas honestas y respuestas que te estás contando a ti mismo para no ver la verdad. La diferencia entre ambas puede ser la diferencia entre construir algo que dure y construir algo que te agote.

Los Tres Tipos de Emprendedores

El emprendedor por necesidad es quizás el más común. Perdió su trabajo. Le redujeron el sueldo. Necesita más ingresos para su familia. Emprende porque no tiene otra opción, o porque la opción que tiene es peor. No hay nada de malo en eso. De hecho, la necesidad es el motor más poderoso que existe. Cuando tienes que hacerlo, lo haces. Pero cuidado: si solo emprendes por necesidad, en el momento en que la necesidad desaparece (o se vuelve muy difícil), también desaparece tu motivación.

El emprendedor por vocación tiene un talento, una habilidad, algo que hace naturalmente bien. Es el diseñador que siempre estuvo en empleos que no lo valoraban. La cocinera que todos le decían "deberías vender esto". El fotógrafo que regalaba su talento. La vocación es un regalo, pero también puede ser una trampa: muchos emprendedores por vocación son brillantes en su oficio y terribles en los negocios. Saber hacer algo bien no es lo mismo que saber monetizarlo.

El emprendedor por propósito tiene algo más profundo. Ve un problema en el mundo y no puede dormir hasta resolverlo. Quiere construir algo que dure más que él. Tiene una misión. Este tipo de emprendedor tiene la motivación más sostenible, pero también puede caer en el error de idealizar tanto su misión que olvida que los negocios necesitan ingresos para sobrevivir.

La mayoría de nosotros somos una mezcla de los tres. Y los tres son válidos.

Ejercicio: Tu Por Qué

Toma una hoja de papel y responde estas preguntas sin censurarte:
1. ¿Qué te duele del mundo que quieres cambiar?
2. ¿Cómo quieres que te recuerden?
3. ¿Qué harías si el dinero no fuera el problema?
4. ¿A quién quieres demostrarle algo... y por qué?

El Miedo es Normal. El Estancamiento No.

Voy a ser directo: el miedo no desaparece. Los emprendedores exitosos no son personas sin miedo, son personas que aprendieron a actuar a pesar de él. Susan Jeffers lo dijo perfectamente en su libro clásico: "Siente el miedo y hazlo de todas formas." El miedo es información. Te dice que algo importa. Te dice que estás en territorio desconocido. Eso no es malo. Lo malo es confundir el miedo con una señal de stop cuando en realidad es una señal de precaución.

El estancamiento, en cambio, es el resultado de dejarle demasiado poder al miedo. Es quedarte en el mismo lugar mes tras mes, año tras año, repitiendo los mismos patrones y esperando resultados diferentes. El estancamiento no duele tanto como el fracaso, pero te cobra mucho más caro a largo plazo.

Tu Identidad de Emprendedor

James Clear, en su libro Hábitos Atómicos, plantea algo que cambió mi forma de pensar: el cambio más profundo no viene de cambiar lo que haces, sino de cambiar lo que crees que eres. Hay una diferencia enorme entre alguien que dice "estoy tratando de construir un negocio" y alguien que dice "soy un emprendedor que está en proceso de crecimiento." El primero puede rendirse. El segundo no, porque rendirse significaría traicionarse a sí mismo.

Empieza a hablar de ti mismo como lo que quieres ser, no como lo que todavía no has logrado. La identidad precede al comportamiento. Cuando te ves como emprendedor, tomas decisiones de emprendedor. Cuando te ves como alguien que "está intentando", tomas decisiones de alguien que todavía no está seguro.

Afirmaciones de Identidad

Soy un emprendedor que crea valor.
Estoy construyendo algo que importa.
Tengo lo que se necesita para lograrlo.

Capítulo 2

Los Libros que Cambian Vidas

Uno de los mejores retornos de inversión que puedes hacer es comprar un libro de $15 que cambie tu forma de pensar. Aquí están los ocho que más me han impactado.

1. Cómo Ganar Amigos e Influir sobre las Personas

Dale Carnegie · 1936

Lección central: Las personas no cambian de opinión por lógica; cambian por cómo las haces sentir. Carnegie descubrió en los años 30 lo que la neurociencia confirma hoy: las decisiones son emocionales, no racionales. Su libro, escrito hace casi 90 años, sigue siendo el manual más práctico de relaciones humanas que existe.

Cómo aplicarlo hoy: En tus redes sociales, en lugar de hablar de tus productos, habla de los problemas de tus clientes. Muestra que los entiendes. Usa su nombre. Escucha antes de hablar. El secreto del marketing digital no es gritar más fuerte; es conectar más profundo.

"Puedes hacer más amigos en dos meses interesándote en los demás que en dos años tratando de que los demás se interesen en ti."

— Dale Carnegie

2. El Monje que Vendió su Ferrari

Robin Sharma · 1997

Lección central: El éxito externo sin riqueza interior es una trampa. Julian Mantle, el protagonista, lo tenía todo: el Ferrari, la mansión, el prestigio. Y casi muere de un infarto a los 53 años porque vivía para impresionar a otros, no para construirse a sí mismo. El libro es una fábula sobre lo que realmente importa: la maestría personal, el propósito, el tiempo como el recurso más valioso.

Cómo aplicarlo hoy: Antes de obsesionarte con el dinero, pregúntate: ¿qué tipo de vida quiero construir? ¿Estoy construyendo un negocio que me dé libertad o una nueva jaula con mejores adornos? Las rutinas matutinas que Sharma describe no son lujos; son la base de la productividad sostenible.

"El secreto de la felicidad es descubrir tu propósito más profundo y luego enfocarte en él con toda tu energía."

— Robin Sharma

3. ¿Quién se ha Llevado mi Queso?

Spencer Johnson · 1998

Lección central: El cambio es inevitable. La pregunta no es si cambiará tu mercado, tu industria o tus circunstancias; es si estarás listo para adaptarte. Los cuatro personajes del laberinto representan las diferentes formas en que los humanos respondemos al cambio: hay quienes entran en negación, quienes se quejan, y quienes salen corriendo a buscar nuevo queso.

Cómo aplicarlo hoy: Las plataformas cambian. Los algoritmos cambian. Los consumidores cambian. El emprendedor que entiende que el queso siempre se mueve tiene una ventaja enorme sobre quien construye su negocio asumiendo que las reglas son permanentes. Adaptarse no es debilidad; es inteligencia.

"Si no cambias, puedes extinguirte."

— Spencer Johnson

4. Los Cuatro Acuerdos

Miguel Ruiz · 1997

Lección central: La mayor parte de nuestro sufrimiento viene de acuerdos que hicimos de niños sobre quiénes somos y cómo funciona el mundo. Ruiz propone cuatro acuerdos nuevos que transforman la experiencia humana:

Sé impecable con tus palabras — Lo que dices sobre ti mismo y los demás crea realidad.
No te tomes nada personalmente — Los comentarios negativos de otros no son sobre ti; son sobre ellos.
No hagas suposiciones — Pregunta en lugar de asumir. La mayoría de los conflictos nacen de malentendidos.
Haz siempre tu máximo esfuerzo — No el de ayer, no el de mañana; el de hoy.

Cómo aplicarlo hoy: En los negocios, no tomarte personalmente los comentarios negativos o las ventas que no se cierran es una habilidad que separa a los emprendedores resilientes de los que se quiebran al primer rechazo.

"Nada de lo que otros hacen es por ti. Lo hacen por ellos mismos."

— Miguel Ruiz

5. Las Siete Leyes Espirituales del Éxito

Deepak Chopra · 1994

Lección central: El éxito no es solo resultado del esfuerzo bruto. Chopra introduce principios como la Ley del Dar (lo que das regresa multiplicado), la Ley del Karma (cada acción tiene consecuencias), y la Ley del Desapego (actúa con intención pero sin aferrarte al resultado). Para muchos emprendedores, este libro es el primero que les enseña que hay una dimensión energética en los negocios.

Cómo aplicar la Ley del Dar: Comparte conocimiento gratuito. Ayuda a otros emprendedores. Da valor antes de pedir nada. Esta no es solo filosofía; es la base del marketing de contenidos más efectivo que existe.

"Cuando renuncias a la necesidad de aprobación de los demás, y en cambio buscas la aprobación de tu propia alma, te vuelves irresistible."

— Deepak Chopra

6. Piense y Hágase Rico

Napoleon Hill · 1937

Lección central: Los pensamientos son cosas. Hill pasó 20 años entrevistando a los hombres más exitosos de su época (Carnegie, Ford, Edison) y descubrió que todos compartían un patrón: una obsesión definida con un objetivo, una fe absoluta en su capacidad de lograrlo, y un plan en acción. No es magia; es el poder de la mente enfocada.

Ejercicio de la tarjeta: Escribe en una tarjeta la cantidad exacta que quieres ganar, para cuándo y lo que harás a cambio. Léela en voz alta dos veces al día. Esto no es pseudociencia; es programación de tu sistema de activación reticular para que busque oportunidades que siempre estuvieron ahí.

"Los pensamientos son cosas, y cosas poderosas cuando se mezclan con definiteness de propósito, persistencia y un deseo ardiente de traducirlos en riqueza u otros objetos materiales."

— Napoleon Hill

7. Hábitos Atómicos

James Clear · 2018

Lección central: Mejorar un 1% cada día durante un año significa ser 37 veces mejor al final de ese año. El problema es que buscamos transformaciones masivas e ignoramos las pequeñas mejoras diarias. Clear demuestra que no son las grandes decisiones las que nos cambian la vida, sino los sistemas de hábitos pequeños y consistentes.

Pequeño hábito de emprendedor: En lugar de decidir que vas a "hacer marketing todos los días" (vago e imposible de medir), decide que vas a publicar una historia en Instagram a las 9 AM. Empieza con 2 minutos. La consistencia crea impulso.

8. La Inteligencia Emocional

Daniel Goleman · 1995

Lección central: El coeficiente intelectual (CI) predice quizás un 20% del éxito en la vida. El 80% restante está determinado por la inteligencia emocional: la capacidad de reconocer, entender y gestionar tus propias emociones y las de los demás. En los negocios, esto se traduce en liderazgo, ventas, manejo de conflictos y toma de decisiones bajo presión.

Práctica del espacio de 90 segundos: Cuando sientas una emoción intensa (frustración, miedo, ira), espera 90 segundos antes de reaccionar. Goleman explica que las emociones son respuestas químicas que duran 90 segundos; lo que dura más es porque seguimos alimentándolas con nuestros pensamientos.

Más Libros que Transforman

El Poder del Ahora — Eckhart Tolle
Padre Rico Padre Pobre — Robert Kiyosaki
El Alquimista — Paulo Coelho
La Semana Laboral de 4 Horas — Tim Ferriss
Mindset — Carol Dweck
El Código del Dinero — Raimon Samsó
Empieza con el Por Qué — Simon Sinek
Las 48 Leyes del Poder — Robert Greene

Capítulo 3

Mensajes que Necesitas Escuchar

Este capítulo es diferente. No tiene fórmulas ni estrategias. Es solo palabras para los días difíciles.

Para el Día que Quieras Rendirte

Llegarán esos días. Te lo prometo. Días en que te preguntas si vale la pena. Días en que compras la historia de que "esto no es para ti". Días en que el cansancio es tan grande que rendirse se siente como la decisión más sensata del mundo.

En esos días, recuerda esto: el fracaso no es caerse. El fracaso es quedarse caído. Muhammad Ali decía: "No es cuántas veces te derriban; es cuántas veces te levantas." Y Winston Churchill, en uno de los momentos más oscuros de la Segunda Guerra Mundial, dijo algo que se convirtió en el consejo de vida más corto y poderoso de la historia: "Nunca te rindas. Nunca, nunca, nunca."

Cuando quieras rendirte, no decidas rendirte hoy. Toma la decisión mañana. Y mañana, vuelve a posponerla. La mayoría de los grandes éxitos del mundo fueron construidos por personas que simplemente no se rindieron un día más que todos los demás.

Para Cuando Sientas que No Eres Suficiente

El síndrome del impostor es real. Esa voz que dice: "¿Quién te crees que eres? ¿Por qué alguien te pagaría por esto? Hay miles de personas más capaces que tú." Es una voz que casi todos los emprendedores conocen, y muchos creen que solo les pasa a ellos.

La verdad: esa voz nunca desaparece completamente. Los grandes empresarios, los mejores conferencistas, los autores más vendidos... todos la escuchan. La diferencia es que aprendieron a no obedecerla.

Recuerda Esto

No necesitas saber todo para empezar. Solo necesitas saber un poco más que la persona que ayudas. Hay alguien en este momento que necesita lo que tú ya sabes. No lo hagas esperar mientras tú decides si eres "suficientemente bueno".

Para el Día que Todo Salga Mal

Habrá días en que todo falle. El cliente canceló. La campaña no funcionó. El proveedor falló. El socio traicionó. El dinero no alcanza. Todo al mismo tiempo, como si el universo hubiera decidido organizarse en tu contra.

Viktor Frankl sobrevivió los campos de concentración nazis y escribió El Hombre en Busca de Sentido. Su conclusión, después de haber perdido absolutamente todo: "Entre el estímulo y la respuesta existe un espacio. En ese espacio reside nuestra libertad y nuestro poder para elegir nuestra respuesta."

No puedes controlar lo que pasa. Sí puedes controlar cómo respondes. En el peor día de tu vida como emprendedor, todavía tienes esa elección.

Para Cuando Sientas que Estás Solo

El emprendimiento puede ser increíblemente solitario. Especialmente al principio, cuando tu círculo más cercano no entiende por qué no te quedas en el empleo "seguro", cuando tus amigos te cambian el tema cuando hablas de tu negocio, cuando sientes que nadie a tu alrededor habla tu idioma.

No estás solo. En DGP Academy hay una comunidad de personas que están exactamente en tu mismo camino. Que entienden el lenguaje del emprendimiento. Que saben lo que se siente madrugar a trabajar en algo propio antes de ir al trabajo de otro. Esa comunidad existe para ti.

Afirmaciones para los Días Difíciles

Soy más fuerte de lo que creo.
Cada obstáculo me está preparando para algo mayor.
No tengo que hacerlo perfectamente, solo tengo que seguir.
Estoy en el camino correcto aunque no lo parezca.
Mi historia aún no ha terminado.

Parte II · Las Raíces

Educación Financiera

Sin raíces profundas, ningún árbol sobrevive la tormenta.

Capítulo 4

El Dinero No es el Enemigo

El dinero es una herramienta. Como un martillo: puedes construir una casa o romperte el pulgar. El problema no es el martillo.

"Los ricos no trabajan por dinero. Hacen que el dinero trabaje para ellos."

— Robert Kiyosaki

Activo vs. Pasivo

Robert Kiyosaki cambió la forma en que millones de personas ven el dinero con una distinción simple pero revolucionaria. Un activo es algo que pone dinero en tu bolsillo. Un pasivo es algo que saca dinero de tu bolsillo. La clase media pasa su vida acumulando pasivos que cree que son activos.

El ejemplo más claro: tu celular. Si lo usas para ver Netflix y jugar, es un pasivo. Si lo usas para crear contenido que genera ingresos, es un activo. La herramienta es la misma; lo que cambia es la mentalidad con que la usas. Empieza a mirar cada cosa que compras preguntando: ¿Esto me va a generar dinero o me lo va a quitar?

El Interés Compuesto

Albert Einstein supuestamente lo llamó "la octava maravilla del mundo". No sé si lo dijo, pero la matemática sí es maravillosa. Si inviertes $100 al mes durante 40 años con un rendimiento del 8% anual, terminarás con aproximadamente $350,000. Si esperas 20 años para empezar y haces lo mismo, terminarás con apenas $59,000. La diferencia no es el dinero; es el tiempo.

Ahora imagina que en lugar de empezar a los 45, empezaras a los 25. Esos 20 años de diferencia representan $291,000 adicionales. Eso es lo que te cuesta esperar.

Flujo de Caja

El flujo de caja es simplemente el dinero que entra menos el dinero que sale. Parece obvio, pero la mayoría de los emprendedores lo ignoran completamente. Puedes tener ventas de $3,000 al mes y estar en quiebra si tus gastos son $3,200. El negocio más común que falla no falla por falta de ventas; falla por flujo de caja negativo. Conoce tus números todos los días, no solo a fin de mes.

La Regla del 72

Divide 72 entre la tasa de rendimiento anual y obtendrás los años que tarda tu dinero en duplicarse. Al 8% anual: 72 ÷ 8 = 9 años para que tu dinero se duplique. Al 12% anual: 72 ÷ 12 = 6 años. Al 1% (cuenta de ahorros tradicional): 72 ÷ 1 = 72 años. Esta regla te ayuda a comparar opciones de inversión en segundos.

Ingresos Activos vs. Pasivos

Un ingreso activo requiere tu tiempo para existir. Si dejas de trabajar, deja de existir. Un ingreso pasivo sigue llegando aunque estés dormido. El objetivo del emprendedor no es solo ganar más dinero activo; es construir fuentes de ingreso pasivo que eventualmente superen tus gastos. Un canal de YouTube con contenido evergreen, un ebook, un curso grabado, una propiedad en renta: todos son ejemplos de activos que generan ingresos mientras tú duermes.

La Mentalidad Financiera que Nadie te Enseñó

Págate a Ti Primero

Antes de pagar cualquier gasto, transfiere un porcentaje fijo a tu ahorro e inversión. No lo que sobra; lo primero que sale. La mayoría de las personas ahorra lo que sobra al final del mes. Los ricos invierten primero y viven con el resto.

Distingue Necesidades de Deseos

Una necesidad es algo que necesitas para sobrevivir o trabajar. Un deseo es algo que quieres. Ninguno es malo, pero confundirlos es uno de los errores financieros más comunes y costosos.

El Costo de Oportunidad

Cada vez que gastas $100 en algo, no solo gastas esos $100. Pierdes también lo que esos $100 podrían haberte generado si los hubieras invertido. Ese es el verdadero costo de cada compra.

El Ejercicio del Café

Si compras un café de $5 cada día laboral durante 20 años, gastas aproximadamente $26,000 en café. Si en cambio invirtieras ese mismo dinero al 8% anual, tendría un valor de más de $91,000. No se trata de no disfrutar el café; se trata de tomar decisiones conscientes.

Capítulo 5

Cómo Administrar lo que Tienes Hoy

No importa cuánto ganes si no sabes a dónde va. La administración financiera no es un lujo para cuando tengas más dinero; es la razón por la que tendrás más dinero.

El Sistema de los Sobres

T. Harv Eker popularizó este sistema en Los Secretos de la Mente Millonaria. La idea es simple: cada vez que recibes dinero, lo divides inmediatamente en proporciones fijas. No esperas a fin de mes para ver qué sobra; defines de antemano a dónde va cada peso.

Sobre	%	Para qué	Ejemplo ($2,000/mes)
Gastos necesarios	55%	Renta, comida, transporte, servicios básicos	$1,100
Ahorro	10%	Fondo de emergencia, metas a corto plazo	$200
Inversión	10%	Acciones, fondos indexados, negocios	$200
Educación	10%	Libros, cursos, mentorías, conferencias	$200
Diversión	10%	Experiencias, entretenimiento, gustos	$200
Dar	5%	Donaciones, ayudar a otros, propinas generosas	$100

Tu Presupuesto Mensual: Plantilla Práctica

Un presupuesto no es una restricción; es un plan. La diferencia entre alguien que siempre le falta dinero y alguien que siempre tiene dinero, muchas veces, no es el ingreso; es el plan. Aquí una plantilla básica:

Concepto	Presupuestado	Real
Ingresos
Salario / Ingresos principales	$_____	$_____
Ingresos extras / negocio	$_____	$_____
Gastos Fijos
Renta / Hipoteca	$_____	$_____
Servicios (luz, agua, internet)	$_____	$_____
Transporte	$_____	$_____
Gastos Variables
Comida / Supermercado	$_____	$_____
Salud	$_____	$_____
Entretenimiento	$_____	$_____
Objetivos Financieros
Ahorro	$_____	$_____
Inversión	$_____	$_____
Educación	$_____	$_____

Los 5 Errores Financieros más Comunes del Emprendedor

Mezclar finanzas personales con las del negocio

Tener una cuenta bancaria separada para tu negocio no es burocracia; es claridad. Cuando mezclas tus cuentas, no sabes si tu negocio es rentable o si estás sobreviviendo con tu salario.

No tener fondo de emergencia

Los expertos recomiendan de 3 a 6 meses de gastos en una cuenta de fácil acceso. Para emprendedores, donde el ingreso puede ser irregular, yo recomiendo al menos 6 meses. Sin este fondo, cualquier emergencia puede destruir años de trabajo.

Invertir en herramientas antes de tener ingresos

Comprar el mejor software, el mejor equipo, la mejor oficina antes de tener clientes es poner el carro delante del caballo. Valida tu idea primero. Invierte cuando los ingresos justifiquen la inversión.

No reinvertir en el negocio

Cuando empiezan a llegar ingresos, muchos emprendedores los gastan en consumo personal. La regla general en los primeros años: reinvierte al menos el 30% de las ganancias del negocio en el negocio mismo.

Fijar precios por miedo, no por valor

Cobrar barato no te hace más accesible; te hace menos creíble. El precio que cobras envía un mensaje sobre el valor que ofreces. Aprende a calcular tus precios basándote en el valor que entregas, no en lo que crees que "está bien cobrar".

Capítulo 6

Deuda, Inversión y Libertad Financiera

La libertad financiera no significa ser millonario. Significa que tus activos generan suficiente ingreso pasivo para cubrir tus gastos. Ese es el número al que apuntas.

Deuda Buena vs. Deuda Mala

No toda deuda es igual. La deuda mala te empobrece; la deuda buena puede hacerte más rico. La diferencia está en lo que compras con ella.

Deuda Buena	Deuda Mala
Financia activos que generan ingresos	Financia consumo que se deprecia
Préstamo para iniciar un negocio rentable	Tarjeta de crédito para ropa o electrónicos
Hipoteca de propiedad que se valoriza	Crédito de auto para un carro de lujo
Intereses bajos (menor al 10% anual)	Intereses altos (tarjetas: 30-50% anual)
Te acerca a tu libertad financiera	Te aleja de tu libertad financiera

Primeros Pasos en Inversión

Fondo de emergencia primero

Antes de invertir un solo peso, asegúrate de tener 3-6 meses de gastos en una cuenta de fácil acceso. Sin este colchón, cualquier emergencia te obligará a vender tus inversiones en el peor momento.

Salda las deudas de alto interés

Si tienes una tarjeta de crédito al 40% anual, pagarla es la mejor inversión que puedes hacer. No hay ningún vehículo de inversión legal que te garantice un 40% de retorno. Pagar esa deuda es igual a ganar un 40%.

Invierte en ti mismo

Antes de invertir en acciones o bienes raíces, invierte en tu capacidad de generar ingresos. Un curso que duplica tu valor en el mercado puede ser el mejor retorno de inversión de tu vida.

Diversifica gradualmente

No pongas todos los huevos en una canasta. A medida que crezcas, distribuye tus inversiones entre diferentes activos: fondos indexados, tu propio negocio, quizás bienes raíces eventualmente.

La Recomendación de Warren Buffett

El inversor más exitoso de la historia recomienda a la mayoría de las personas invertir en fondos indexados de bajo costo que replican el S&P 500. Históricamente han rendido entre 7% y 10% anual. No requieren conocimiento especializado y han superado a la mayoría de los fondos administrados activamente.

Tu Camino a la Libertad Financiera: 5 Niveles

Claridad Financiera Sabes exactamente cuánto ganas, cuánto gastas y a dónde va cada peso. Tienes un presupuesto y lo sigues.

Estabilidad Financiera Tienes fondo de emergencia de 6 meses, sin deudas de alto interés y ahorras consistentemente.

Libertad Financiera Básica Tus ingresos pasivos cubren tus gastos básicos. Podrías sobrevivir sin trabajar por meses.

Libertad Financiera Plena Tus ingresos pasivos cubren completamente tu estilo de vida actual. Trabajas porque quieres, no porque debes.

Abundancia Financiera Tus ingresos pasivos superan ampliamente tus gastos. Tienes recursos para impactar a otros y crear legado.

Parte III · El Tronco

Tu Negocio Digital

El tronco sostiene todas las ramas. Tu negocio es la estructura que lo hace posible.

Capítulo 7

Tu Marca Personal y Presencia Online

En la economía digital, las personas no compran productos o servicios. Compran personas. Compran historia, autenticidad y confianza.

"Tu marca personal es lo que la gente dice de ti cuando no estás en la habitación."

— Jeff Bezos

Los Fundamentos de tu Marca Personal

Autenticidad sobre Perfección

Las personas se conectan con la humanidad, no con la perfección. Mostrar tu proceso, tus errores y tu aprendizaje crea más confianza que mostrar solo los resultados pulidos. La era de los influencers perfectos está terminando; la era de los humanos auténticos apenas comienza.

Tu Historia es tu Superpoder

Nadie más en el mundo tiene exactamente tu combinación de experiencias, fracasos, aprendizajes y perspectiva. Tu historia es lo único que no pueden copiarte. Úsala. Cuéntala. Las historias generan conexión emocional, y la conexión emocional genera confianza, y la confianza genera ventas.

La Consistencia Construye Reconocimiento

No se trata de publicar perfecto; se trata de publicar siempre. Los colores, la voz, el tono, los valores que comunicas deben ser reconocibles en todos tus canales. La consistencia no es repetición aburrida; es confiabilidad. Y la confiabilidad construye audiencias leales.

Tu Propuesta de Valor

Necesitas poder responder en una oración: ¿A quién ayudas? ¿Con qué problema? ¿Cómo? Si no puedes responder esto claramente, tu audiencia tampoco podrá entender por qué seguirte.

Tu Propuesta de Valor Personal

Usa esta fórmula para construir tu propuesta de valor:

Ayudo a [persona específica] a [resultado específico] mediante [método único]

Ejemplo Real

"Ayudo a emprendedores latinos principiantes a construir su primera fuente de ingresos digitales en 90 días mediante estrategias de contenido auténtico y educación financiera práctica."

Ahora escribe la tuya. No tiene que ser perfecta. Solo tiene que ser honesta.

Capítulo 8

Redes Sociales como Herramienta de Negocio

Las redes sociales no son un pasatiempo. Son el medio de distribución más poderoso y democrático que ha existido en la historia humana.

"Deja de vender. Empieza a ayudar."

— Gary Vaynerchuk

La Regla de Oro del Contenido

Gary Vee tiene una fórmula que parece contraintuitiva pero funciona: da, da, da, pide. Publica valor 3 o 4 veces antes de pedir algo a cambio. Educa, entretiene, inspira. Cuando hayas dado suficiente valor, cuando tu audiencia confíe en ti, entonces puedes hacer una oferta. Las personas que solo publican para vender espantan a su audiencia. Las personas que publican para dar, la construyen.

Las Plataformas y su Personalidad

Instagram — Visual e Inspiracional

Ideal para marcas visuales, moda, comida, viajes, fitness, educación. Reels hasta 90 segundos tienen el mayor alcance orgánico actualmente. Los Stories crean cercanía diaria. El feed construye tu galería de marca. Frecuencia recomendada: 1 post + 3-5 stories diarias.

TikTok — Entretenimiento y Descubrimiento

La plataforma con mayor alcance orgánico en este momento. El algoritmo favorece el contenido, no los seguidores. Puedes tener 0 seguidores y viralizarte si tu contenido engancha en los primeros 3 segundos. Ideal para educación, humor, detrás de escenas, tendencias.

LinkedIn — Profesional y B2B

Si tu cliente es una empresa o un profesional, LinkedIn es tu plataforma. El contenido tiene una vida útil más larga que en otras redes. Los textos largos y reflexivos funcionan bien. Una historia de fracaso y aprendizaje puede generar miles de reacciones. Es la red menos saturada de contenido de calidad.

YouTube — El Motor de Búsqueda Visual

YouTube es el segundo motor de búsqueda más grande del mundo. Los videos aquí duran años. Una vez que tu canal tiene volumen, cada video sigue atrayendo audiencia mucho después de publicarse. Ideal para contenido educativo profundo, tutoriales y reviews. Mayor esfuerzo inicial, pero el mejor ROI a largo plazo.

Facebook — Comunidad y Publicidad

El alcance orgánico de Facebook ha caído dramáticamente, pero sigue siendo la plataforma de publicidad paga más segmentada del mundo. Los grupos de Facebook son una herramienta poderosa para construir comunidades de nicho. Si tienes presupuesto para publicidad, Meta Ads (Facebook + Instagram) es imbatible en segmentación.

Consejo DGP: Empieza con UNA Plataforma

El error más común es querer estar en todas partes al mismo tiempo. Elige la plataforma donde está tu cliente ideal, aprende cómo funciona su algoritmo, y publica consistentemente durante 90 días. Domina una antes de agregar otra. La presencia mediocre en 5 redes vale menos que la excelencia en una.

Tu Sistema de Contenido Semanal

Día	Tipo de Contenido	Objetivo
Lunes	Educativo / Tip práctico	Posicionarte como experto
Martes	Historia personal / Proceso	Crear conexión y confianza
Miércoles	Pregunta o encuesta	Aumentar engagement
Jueves	Testimonio o resultado de cliente	Construir prueba social
Viernes	Reflexión motivacional	Inspirar y retener
Sábado	Detrás de escenas / Entretenimiento	Mostrar la persona detrás del negocio

Capítulo 9

Tu Sitio Web: la Base que Nadie Te Puede Quitar

Cuando construyes en redes sociales, construyes en tierra alquilada. Cuando construyes tu sitio web, construyes en tierra propia.

"Las redes sociales son tierra alquilada. Tu sitio web es tierra propia. El dueño del terreno cambia las reglas cuando quiere."

— DGP Global Group

Lo que un Sitio Web Hace por Ti

Funciona como tu carta de presentación profesional 24/7, incluso cuando duermes.
Te permite capturar correos electrónicos y construir tu propia lista de contactos (que NADIE te puede quitar).
Posiciona en Google para que personas que nunca te han visto en redes sociales te encuentren.
Da credibilidad y legitimidad a tu negocio frente a clientes que investigan antes de comprar.
Es la única plataforma donde tienes control total sobre el diseño, el mensaje y los datos.

El Sitio Web que Necesitas según tu Etapa

Etapa de Validación (Meses 1-3)

No necesitas un sitio web perfecto para empezar. Necesitas una landing page simple con: tu propuesta de valor clara, una foto tuya, lo que ofreces y un botón de contacto o formulario de captura de correo. Herramientas: Carrd, Linktree Pro, o WordPress con tema simple. Inversión: $0 a $30 al mes.

Etapa de Crecimiento (Meses 4-12)

Ya tienes clientes, tienes claridad sobre tu oferta y necesitas más presencia. Agrega: blog con contenido SEO, página de servicios o tienda, testimonios de clientes, y blog para posicionamiento orgánico. Herramientas: WordPress + WooCommerce, Shopify, Squarespace. Inversión: $30 a $100 al mes.

Etapa de Escala (Año 2+)

Tu negocio ya tiene tracción. Hora de automatizar y escalar. Agrega: membresías o área de clientes, integraciones de pago automáticas, email marketing automatizado y análisis avanzados. Herramientas: WordPress + MemberPress, Kajabi, o desarrollo personalizado. Inversión: $100+ al mes.

DGP Global Group te Ayuda

Nuestro equipo diseña y desarrolla sitios web profesionales para emprendedores en todas las etapas. Desde landing pages hasta e-commerce completos. Sin tecnicismos, sin complicaciones. Contáctanos en dgpglobalgroup.com

Parte IV · Las Ramas

Crecimiento y Comunidad

Las ramas dan sombra, dan frutos y conectan con el mundo.

Capítulo 10

Contenido con Alma

El contenido que solo busca gustarle al algoritmo dura poco. El contenido que busca conectar con personas, dura siempre.

Los 5 Tipos de Contenido que Conectan

Tu Historia

¿De dónde vienes? ¿Qué obstáculos superaste? ¿Por qué empezaste? Las historias de origen crean empatía instantánea. No tienes que haber superado algo épico; tienes que haber superado algo real. El fracaso que convertiste en aprendizaje conecta más que el éxito perfecto.

Lo que Aprendes

Documenta tu proceso de aprendizaje en tiempo real. No tienes que ser el experto definitivo; tienes que estar un paso adelante de tu audiencia y compartir lo que aprendes. "Hoy aprendí que..." es uno de los formatos de mayor engagement en todas las plataformas.

Lo que te Duele del Mundo

Comparte lo que te indigna, lo que te frustra, lo que quieres cambiar. Este tipo de contenido polariza (lo cual no es malo) y atrae a personas que comparten tus valores. Las marcas más poderosas tienen puntos de vista claros sobre lo que está mal y lo que quieren mejorar.

El Proceso, No Solo el Resultado

A las personas les fascina ver cómo se hace algo. El detrás de escenas, el antes y el después, el proceso de creación... todo esto genera más engagement que el resultado final. No esperes tener el éxito para empezar a documentar; documenta el camino desde ahora.

Tu Opinión

El contenido más seguro es el más aburrido. Tener una perspectiva clara, incluso si no todos están de acuerdo, te diferencia en un océano de creadores tibios que tratan de gustarle a todos. Tu opinión honesta sobre un tema de tu industria puede convertirse en tu contenido más viral.

La Fórmula del Contenido que Convierte

No todo el contenido tiene el mismo objetivo. El contenido que construye audiencia y el contenido que convierte audiencia en clientes son diferentes. Aquí la fórmula que funciona:

Hook — Los Primeros 3 Segundos

Si no capturas la atención en los primeros 3 segundos, pierdes al espectador. El hook puede ser una pregunta provocadora, una estadística sorprendente, una afirmación polémica o el inicio de una historia emocionante. Todo lo demás es secundario si no hay hook.

Valor — El Núcleo del Contenido

Entrega lo que prometiste en el hook. Educa, entretiene o inspira. No guardes lo mejor para el final; ponlo en el medio. Las personas deciden si siguen viendo basándose en si el valor llega rápido.

Cierre — La Resolución Emocional

Termina con una conclusión que genere emoción o reflexión. Una historia siempre necesita un cierre. Un tutorial necesita un resultado claro. Una reflexión necesita una conclusión que dé sentido a todo lo anterior.

Call to Action — El Siguiente Paso

Dile a tu audiencia qué hacer después. No asumas que lo sabrán. "Guarda este post para cuando lo necesites." "Comparte con alguien que está empezando." "Escríbeme al privado para más información." El CTA específico multiplica la acción.

Capítulo 11

Tu Plan de Acción: 90 Días

El conocimiento sin acción es entretenimiento. Este capítulo convierte todo lo que leíste en un plan concreto con fechas y metas.

DÍAS 1-30: Los Cimientos

Semana 1: Claridad Total

Escribe tu por qué (el ejercicio del capítulo 1)
Define tu cliente ideal con el mayor detalle posible: edad, trabajo, miedos, sueños, qué consume en redes
Escribe tu propuesta de valor usando la fórmula del capítulo 7
Elige UNA plataforma de redes sociales para comenzar

Semana 2: Fundamentos Financieros

Calcula tus gastos mensuales reales (tómate 2 horas, revisa tus últimos 3 meses)
Crea tu sistema de sobres o presupuesto mensual
Abre una cuenta bancaria separada para tu negocio si no la tienes
Define cuánto necesitas ganar para cubrir tus gastos básicos

Semana 3: Tu Presencia Digital Base

Actualiza o crea tu perfil en la plataforma elegida con foto profesional, bio clara y link de contacto
Crea una landing page simple (aunque sea en Carrd o Linktree)
Publica tu primer contenido contando tu historia de inicio
Lee los capítulos 7 y 8 de este libro nuevamente con papel y pluma

Semana 4: Los Primeros Pasos en Acción

Publica contenido 5 días seguidos (no tiene que ser perfecto)
Interactúa genuinamente con 10 cuentas de tu nicho al día
Habla con al menos 5 personas que podrían ser clientes potenciales
Haz una lista de 10 formas en que podrías generar ingresos con lo que sabes

Meta del Primer Mes

Al terminar el día 30, deberías tener: un perfil digital optimizado, un presupuesto personal claro, al menos 20 piezas de contenido publicadas, y una lista de posibles primeros clientes o colaboraciones. No perfección. Momentum.

DÍAS 31-60: El Impulso

Analiza qué contenido funcionó en el mes 1 y haz más de eso
Lanza tu primera oferta aunque sea pequeña: consultoría, servicio, producto digital
Construye tu primera lista de correos electrónicos (mínimo 50 contactos)
Lee un libro de la lista del capítulo 2
Aplica el sistema de sobres por 30 días y revisa los resultados
Busca un mentor o comunidad de emprendedores (DGP Academy)
Documenta todo: qué funciona, qué no, qué aprendes
Establece tu rutina matutina: mínimo 30 minutos antes de revisar el teléfono

DÍAS 61-90: La Aceleración

Optimiza tu oferta basándote en el feedback de los primeros clientes
Crea un sistema de testimonios: pide a tus clientes que compartan su experiencia
Invierte el 10% de tus ganancias en publicidad paga o en educación
Considera agregar una segunda plataforma de distribución de contenido
Revisa tus finanzas: ¿estás en el nivel 1 de libertad financiera? (claridad)
Escribe tus 3 metas principales para los próximos 90 días
Celebra lo que construiste. Genuinamente. Esto importa.

"No midas tu progreso por lo que aún no tienes. Mídelo por lo que eres hoy comparado con quien eras hace 90 días."

— DGP Global Group

✨ Recursos Especiales

Tu Kit de Herramientas del Emprendedor

Todo lo que necesitas en un solo lugar. Guarda esta sección; la usarás muchas veces.

Tu Lista de Lecturas por Objetivo

Para fortalecer tu mentalidad

Mindset — Carol Dweck
El Monje que Vendió su Ferrari — Robin Sharma
Los Cuatro Acuerdos — Miguel Ruiz
Siente el Miedo y Hazlo de Todas Formas — Susan Jeffers

Para mejorar tus finanzas

Padre Rico Padre Pobre — Robert Kiyosaki
Los Secretos de la Mente Millonaria — T. Harv Eker
El Hombre Más Rico de Babilonia — George Clason
El Código del Dinero — Raimon Samsó

Para construir hábitos y productividad

Hábitos Atómicos — James Clear
El Poder de los Hábitos — Charles Duhigg
La Semana Laboral de 4 Horas — Tim Ferriss
Comienza con el Por Qué — Simon Sinek

Para mejorar en ventas y marketing

Cómo Ganar Amigos e Influir sobre las Personas — Dale Carnegie
$100M Offers — Alex Hormozi
Influence — Robert Cialdini
This is Marketing — Seth Godin

Para el crecimiento personal profundo

Las Siete Leyes Espirituales del Éxito — Deepak Chopra
El Alquimista — Paulo Coelho
El Poder del Ahora — Eckhart Tolle
Piense y Hágase Rico — Napoleon Hill

Herramientas Esenciales

Área	Herramienta	Para qué la usas
Diseño y Contenido
Diseño	Canva	Posts, stories, presentaciones, logos básicos
Edición de video	CapCut	Reels, TikToks, shorts de YouTube
Fotografía de producto	Lightroom Mobile	Editar fotos desde el celular
Gestión y Organización
Gestión de proyectos	Notion	Planificar contenido, llevar ideas, gestionar tareas
Calendario de contenido	Later / Buffer	Programar publicaciones con anticipación
Comunicación con clientes	WhatsApp Business	Catálogo de productos, respuestas automáticas
Marketing y Ventas
Email marketing	Mailchimp / Brevo	Newsletters, automatizaciones de correo
Landing pages	Carrd / WordPress	Capturar leads, vender productos
Analytics	Google Analytics	Medir tráfico de tu sitio web
Finanzas
Presupuesto personal	YNAB / Fintonic	Llevar tus finanzas personales y de negocio
Facturación	Wave / FreshBooks	Crear facturas profesionales y cobrar
Inversión	Fondos indexados (ETF)	Invertir consistentemente con bajo costo

Afirmaciones Diarias del Emprendedor

Lee estas afirmaciones en voz alta cada mañana. Toma 3 minutos. Cambia más de lo que crees.

Soy un emprendedor que crea valor real en el mundo.
Mis finanzas mejoran cada día porque tomo decisiones conscientes.
Tengo todo lo que necesito para empezar donde estoy.
Los obstáculos son lecciones que me están preparando para algo mayor.
Estoy construyendo un legado que va más allá del dinero.
Atraigo clientes que valoran lo que ofrezco y pagan lo que vale.
Mi historia importa y puede inspirar a otros.
Cada día publico, aprendo y mejoro.
La consistencia es mi superpoder.
Soy libre de construir la vida que quiero.

Tu Diario de Progreso — Plantilla Semanal

Dedica 10 minutos cada domingo a completar esta reflexión. La claridad que genera vale infinitamente más que el tiempo que inviertes.

Pregunta	Mi Respuesta Esta Semana
¿Qué 3 cosas salieron bien esta semana?	1. 2. 3.
¿Qué 1 cosa haré diferente la próxima semana?
¿Cuánto generé / cuánto ahorré / cuánto invertí?	Generé: $___ Ahorré: $___ Invertí: $___
¿Qué contenido creé esta semana?
¿A quién ayudé o impacté esta semana?
¿Qué aprendí que no sabía hace 7 días?
¿Cuál es mi intención más importante para la próxima semana?

Conclusión

Ahora Eres el Árbol

Llegaste al final de este libro. Eso ya dice algo sobre ti.

La mayoría de las personas que compran libros no los terminan. La mayoría de las personas que empiezan algo no lo terminan. Tú lo hiciste. Y eso, aunque parezca pequeño, es evidencia de quién eres.

Cuando empezamos este libro, eras la semilla. Tenías el potencial, el deseo, quizás el sueño. Pero eras potencial sin forma, energía sin dirección. A lo largo de estas páginas, construimos algo juntos:

🌱

La Semilla — Eres Tú

Tu historia, tu por qué, tu identidad de emprendedor. Todo lo que eres ya contiene todo lo que necesitas para crecer.

🌿

Las Raíces — Tu Educación Financiera

Sin raíces profundas, ningún árbol sobrevive la tormenta. La educación financiera es lo que te da estabilidad cuando el mundo tiembla.

🌳

El Tronco — Tu Negocio Digital

Tu marca personal, tu sitio web, tu presencia en redes sociales: el tronco que sostiene todo lo demás y que te hace visible al mundo.

🍃

Las Ramas — Tus Relaciones y Contenido

El contenido con alma, la comunidad, las conexiones: las ramas que se extienden, dan sombra y eventualmente darán frutos.

"No le preguntes al árbol cuándo dará frutos. Pregúntate si estás dándole suficiente agua, luz y tiempo."

— Anónimo

Los frutos, que son la libertad financiera, el impacto, el legado, llegarán cuando el árbol esté listo. Y el árbol se prepara con raíces profundas, con un tronco sólido y con ramas que no tienen miedo de extenderse.

No sé exactamente en qué punto de tu camino estás mientras lees esto. Quizás estás en el día 1. Quizás llevas años en esto y este libro te recordó algo que habías olvidado. Quizás estás en uno de esos momentos oscuros donde todo parece difícil. En cualquiera de esos casos, este libro fue escrito para ti.

El camino no es una línea recta. Habrá temporadas de sequía y temporadas de lluvia. Habrá vientos que doblegan las ramas y temporadas de tanta luz que apenas puedes creer que es tu vida. Todo eso es parte del proceso de convertirte en el árbol.

¿Listo para Dar el Siguiente Paso?

DGP Academy es la comunidad donde los emprendedores como tú vienen a crecer juntos. Cursos, mentorías, comunidad activa y herramientas para construir tu negocio digital. Tu árbol crece más rápido en un bosque que solo.

DGP Global Group

Educación para emprendedores que construyen en serio.

dgpglobalgroup.com

Síguenos en redes sociales: @dgpglobalgroup
Únete a DGP Academy y continúa tu camino hacia el Vol. 3.

APRENDE.CRECE.TRASCIENDE.

Todo lo que puedes aprender

Habilidades que transforman tu carrera

Hecho para ti

Oferta de lanzamiento — solo primeros 20 estudiantes

Aprende conDGPAcademy

Bienvenido

Aprende a crear sitios web profesionales

Estructura del curso

Fundamentos Web

Herramientas del equipo

Integraciones y flujo

Diseño Web Profesional

De proyecto a negocio

16 lecciones

¿Cómo funciona la web?

El viaje de una página web

Conceptos clave

Dominio

Servidor / Hosting

DNS

URL

HTML desde cero

¿Qué es HTML?

HTML

CSS

JavaScript

Anatomía de una etiqueta

Estructura básica de un archivo HTML

Etiquetas esenciales

Títulos

Texto

Listas

Imágenes y enlaces

Contenedores (divs)

Formulario

CSS — Estilo y diseño

Cómo funciona CSS

Box Model — La lógica del espacio

Margin

Padding

Border

Width / Height

Propiedades más usadas

Flexbox — Para posicionar elementos

JavaScript — Interactividad

¿Qué puede hacer JavaScript?

Responder eventos

Modificar HTML

Llamar APIs

Conceptos básicos

Interactuar con el HTML

Fetch — Llamar a APIs externas

🧠 Pregunta rápida

GitHub y control de versiones

¿Qué es Git y GitHub?

Git

GitHub

Conceptos clave

Comandos esenciales

IA: Claude Code y Gemini Pro

Gemini Pro — El generador gratuito

Cómo escribir un buen prompt para Gemini

Claude Code — El que actualiza el proyecto

GitHub Pages y publicación web

GitHub Pages — Hosting gratuito y abierto

100% gratuito y abierto

HTTPS automático

Deploy automático

URL propia de GitHub

Activar GitHub Pages en tu repositorio

Firebase — Base de datos y autenticación

Guardar información

Autenticación (login)

GoDaddy — Tu dominio .com

Conectar GoDaddy con GitHub Pages

Servicios y herramientas extra

APIs — Cómo todo se conecta

¿Qué es una API?

Tú (cliente)

APRENDE.
CRECE.
TRASCIENDE.

Aprende con
DGP
Academy