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.
Estructura del curso
Fundamentos Web
HTML, CSS, JavaScript y cómo funciona internet.
Herramientas del equipo
GitHub, Firebase, Claude, Gemini y todos los servicios.
Integraciones y flujo
APIs, conexiones y el proceso completo de un proyecto.
10 lecciones
Avanza a tu ritmo. Marca cada lección al terminarla.
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.
¿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:
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 (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.
Un servidor es una computadora que está siempre encendida y conectada a internet. Firebase Hosting es el servidor donde guardamos nuestros sitios.
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 Firebase Hosting.
DNS
Conecta el dominio (GoDaddy) con el servidor (Firebase). Se configura una sola vez.
URL
La dirección completa: https://www.miempresa.com/contacto. Incluye protocolo, dominio y ruta.
Web = archivos (HTML+CSS+JS) guardados en un servidor. El dominio (GoDaddy) apunta al servidor (Firebase). El navegador descarga los archivos y muestra la página.
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
CSS
El estilo
JavaScript
La interacción
Anatomía de una etiqueta
<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
<!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>
Olvidar cerrar las etiquetas. Cada <div> necesita su </div>. Claude Code detecta y corrige estos errores automáticamente.
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á.
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:
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
.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.
/* 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; }
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
// 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
// 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.).
// 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?
preventDefault() cancela ese comportamiento para que JavaScript pueda manejar el envío sin recargar.
GitHub y control de versiones
GitHub es donde vive todo el código del equipo. Es la base que conecta Claude Code con Firebase para publicar los sitios automáticamente.
¿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. Permite colaborar y conectar con Firebase.
Conceptos clave
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.
$ 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"
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 Firebase).
Push = subir tus cambios a GitHub. Pull = descargar los últimos cambios de GitHub a tu computadora.
Cuando Claude Code hace un push a la rama main, Firebase detecta el cambio automáticamente y publica la nueva versión del sitio en ~1 minuto.
Comandos esenciales
# 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 (→ Firebase lo publica automáticamente): git push # Descargar los últimos cambios: git pull # Ver el historial de commits: git log --oneline
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.
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.
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
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
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.
npm install -g @anthropic-ai/claude-code
claude
Firebase y publicación web
Firebase es la plataforma de Google donde viven los sitios. Firebase Hosting publica el sitio, el dominio de GoDaddy le da la dirección .com.
Firebase Hosting
Firebase Hosting es un servicio de alojamiento web de Google. Cuando los archivos de tu repositorio se publican en Firebase, cualquier persona en el mundo puede verlos al visitar la URL del sitio.
Velocidad global
Los archivos se distribuyen en servidores de Google en todo el mundo. El sitio carga rápido desde cualquier país.
HTTPS automático
El candado verde (seguridad SSL) se activa automáticamente. Sin costo extra, sin configuración.
Plan gratuito
El plan Spark (gratis) incluye 10 GB de almacenamiento y 360 MB/día de transferencia. Suficiente para sitios normales.
Deploy automático
Conectado con GitHub, cada push a la rama main publica la nueva versión automáticamente en ~1 minuto.
Cómo conectar Firebase con GitHub
npm install -g firebase-tools firebase login firebase init hosting firebase deploy
GoDaddy — Tu dominio .com
El dominio es la dirección que escriben los usuarios. Sin dominio propio, tu sitio solo tiene una URL como miproyecto.web.app. Con GoDaddy compras miempresa.com.
Conectar GoDaddy con Firebase
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.
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.
Con Formspree, un formulario HTML puede enviar emails sin necesitar ningún servidor propio. Solo añades su URL al atributo action del formulario.
<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 permite enviar emails desde JavaScript con más flexibilidad que Formspree. Útil para emails de confirmación automáticos o notificaciones personalizadas.
<!-- 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 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.
<!-- 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 (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 (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. Busca en inglés para mejores resultados. Descarga y sube a Cloudinary para optimizarlas.
Flujo recomendado: Buscar foto en Unsplash → Descargar → Subir a Cloudinary → Usar la URL de Cloudinary en el HTML.
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
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
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.
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.
Flujo completo de un proyecto
Esta es la lección final. Aquí verás el proceso de principio a fin: desde que el cliente pide el sitio hasta que está publicado con dominio propio y funcionando.
Los 10 pasos del proceso
Define qué páginas tendrá el sitio, qué colores, qué contenido y qué funcionalidades necesita (formulario de contacto, galería, tienda). Guarda todo en Google Drive.
github.com → "New repository" → Nombre del proyecto (ej: clinica-dental-lima) → "Create repository". Esta es la base del proyecto.
Crea el logo en Canva. Busca fotos profesionales en Unsplash. Sube todo a Cloudinary para tener las URLs optimizadas listas.
Escribe un prompt detallado en gemini.google.com describiendo el sitio. Copia el HTML, CSS y JS generado. Revisa que no tenga errores obvios.
Crea los archivos en la carpeta del repositorio clonado. Luego: git add . → git commit -m "Estructura inicial" → git push
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.
Crea el proyecto en console.firebase.google.com. Conecta con el repositorio de GitHub. A partir de aquí, cada push a "main" publica el sitio automáticamente.
Crear cuenta en formspree.io → obtener endpoint → decirle a Claude Code que integre Formspree en el formulario de contacto del sitio.
Crear cuenta en databuddy.cc → obtener el script → decirle a Claude Code que lo añada al <head> de todas las páginas.
Comprar el dominio en GoDaddy → en Firebase añadir dominio personalizado → copiar registros DNS → pegarlos en GoDaddy → esperar 24-48h. ¡El sitio está listo!
Cómo actualizar el sitio en el futuro
Todo el proceso tarda menos de 5 minutos. El sitio se actualiza automáticamente sin tocar nada en Firebase ni en el servidor.
Checklist de lanzamiento
- Repositorio creado en GitHub con nombre del proyecto
- Logo y fotos subidos a Cloudinary
- Código HTML/CSS/JS en el repositorio
- Sitio visible en la URL de Firebase (.web.app)
- 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 y propagado
- HTTPS activo (candado verde en el navegador)
- Probar formulario de contacto en producción
- Entregar credenciales al cliente en Google Drive
Ahora tienes los conocimientos fundamentales para crear y publicar sitios web profesionales usando todo el ecosistema de herramientas del equipo. El siguiente paso es la práctica: crea tu primer proyecto de prueba.