Cómo funcionan, cómo se editan y cómo reutilizarlos
para nuevos clientes con rapidez y calidad
Usa ← → o las teclas del teclado para navegar
HTML, CSS y JS. Qué hace cada archivo y cómo se conectan.
Carpetas, nombres y por qué el orden importa.
Textos, imágenes, colores, fuentes y secciones completas.
Sistema de plantillas, checklist y flujo de entrega.
🎯 Regla práctica: Sitio de presentación / landing / portafolio → HTML puro | Blog, tienda o panel de cliente → WordPress
VS Code es tu "Elementor" pero para código. Live Server hace que el navegador se actualice solo cada vez que guardas el archivo — igual que la vista previa en Elementor.
Si abres el HTML haciendo doble clic, la URL dice file:// y algunas cosas no funcionan. Siempre usa Live Server.
Cuando Live Server está activo verás: localhost:5500 en la barra del navegador.
Ctrl+S — Guardar (y recarga Live Server)
Ctrl+F — Buscar texto en el archivo
Ctrl+Z — Deshacer
Alt+Z — Activar/desactivar ajuste de línea
En Elementor hacías clic en el elemento y lo editabas visualmente. En HTML, el Inspector de Chrome (F12) es el equivalente — te muestra exactamente qué código controla cada cosa.
En el panel DevTools, clic en el ícono de teléfono/tablet (arriba izquierda). Puedes simular cualquier tamaño de pantalla sin necesitar el celular.
En el panel CSS del inspector, haz clic en el cuadrado de color junto a un valor hexadecimal. Se abre un selector de color igual al de Elementor.
Cuando algo no se ve bien y no sabes qué archivo editarlo, el inspector te dice exactamente el nombre de la clase y el archivo CSS donde está definida.
La estructura
Paredes, pisos, puertas.
El esqueleto del sitio.
La apariencia
Pintura, muebles, luces.
Todo lo visual.
La interacción
Puertas que abren, alarmas.
Animaciones y lógica.
💡 Regla de oro: Nunca mezcles CSS dentro del HTML ni JavaScript en el CSS. Cada archivo tiene su propósito.
La página principal. Toda la estructura y el contenido visible.
Colores, tamaños, fuentes, espaciado. Todo lo visual.
Menú móvil, animaciones al hacer scroll, formularios.
Todas las imágenes. Usa nombres sin espacios ni acentos.
Abre index.html con VS Code y busca el texto que quieres cambiar. Solo edita lo que está entre las etiquetas.
Busca directamente el texto que ves en el navegador. VS Code lo encontrará en el HTML al instante.
Las palabras dentro de class="" o id="". Son identificadores internos.
Títulos, párrafos, listas, botones, links de menú, textos del footer.
1920×1080 px
JPG, máx 300KB
Fondo transparente
PNG o SVG
800×600 px
JPG, máx 150KB
Todos los colores del sitio están centralizados al inicio del archivo CSS en :root {}. Cambiarlos ahí los actualiza en todo el sitio.
:root y refresca el navegador<link> y pégalo en el <head> del HTML--font-heading en el CSSCada sección del sitio está en un bloque <section>. Puedes copiar, pegar o eliminar secciones completas.
Copia un bloque <section>...</section> de otra parte del sitio y pégalo donde quieras. Luego edita el contenido.
Selecciona todo el bloque desde <section> hasta su </section> y bórralo.
Haz clic en el número de línea de la etiqueta de apertura. VS Code resalta automáticamente el bloque completo.
Plan gratuito soporta sitios estáticos ilimitados y ancho de banda sin restricciones.
Los archivos se sirven desde el servidor más cercano al visitante. Sitios ultra-rápidos.
Certificado SSL gratis incluido. No se necesita configurar nada extra.
Flujo de actualización: Editas el archivo → lo subes a GitHub → Cloudflare Pages lo publica en ~30 segundos
Editor de código. Instala la extensión Live Server para ver cambios en tiempo real.
Usa F12 para inspeccionar elementos, ver el CSS y probar cambios al instante.
Para duplicar carpetas de plantillas y organizar proyectos de cada cliente.
Genera paletas de colores. Ingresa el color del logo y obtén combinaciones perfectas.
Comprime imágenes sin perder calidad antes de subirlas al sitio.
Repositorio por cliente. Historial de cambios y origen del despliegue automático.
Hosting gratis conectado a GitHub. Cada push publica el sitio en ~30 segundos con HTTPS y CDN global.
12 preguntas reales que surgieron al compartir
esta guía con el equipo
El sitio HTML no bloquea agregar un blog después. Hay 3 caminos según qué tan profundo lo quiera el cliente:
blog.cliente.com con Ghost (gratis) o WordPress — el sitio principal no se toca. Se instala aparte.
Aclara desde el inicio qué incluye el sitio. Usa una propuesta que diga explícitamente: "Sitio de presentación estático — sin blog, sin tienda, sin panel de cliente."
Si después lo piden, es un proyecto nuevo con su propio costo.
La mayoría de negocios locales (restaurantes, clínicas, estudios) no necesitan blog. Con la opción 01 (subdominio) se resuelve sin tocar el sitio principal.
La plantilla ya usa nombres fijos predefinidos. El cliente no renombra archivos — tú le dices exactamente cómo se deben llamar.
Si el cliente manda fotos con nombres aleatorios ("IMG_4872.jpg"), tienes 3 opciones:
src="" del código en segundos con buscar/reemplazar global.
3 líneas de HTML + CSS. Gratis, no depende de ningún plugin. Se agrega directo al código.
Calendly o Cal.com (gratis). Se pega el embed como iframe en cualquier sección del HTML.
SnapWidget (gratis limitado) o Elfsight (~$5/mes). Pegan un script en el HTML y listo.
Tidio o Crisp — se pega 1 script antes del </body>. Plan gratuito disponible en ambos.
Dos archivos: index.html y index-en.html. O Google Translate widget: 1 línea de script, gratis.
SimplyBook.me o Setmore tienen plan gratis con embed. Se incrusta en una sección del sitio.
🔑 Regla universal: Si la herramienta ofrece un "embed code" o "widget script" — se puede pegar en el HTML y funciona.
<section>...</section> como base y edita su contenido interior
styles.css
✅ Sí — todo puede ir en :root
Cambias --btn-radius una vez → todos los botones del sitio se actualizan.
Si el cliente ya tiene correos con su proveedor actual, no hay que cambiar nada — solo los registros MX se dejan apuntando al mismo lugar.
✅ Sí — y es más fácil que en Yoast SEO
Widget embed de Elfsight o enlace directo al perfil de Google Business. Independiente del hosting.
Se agrega un bloque JSON-LD dentro del <head>. Google lo genera automáticamente en schema.org/Review.
Se vincula igual que siempre — apuntas la URL del sitio en el perfil. Es independiente del tipo de hosting.
Cualquier herramienta externa se integra pegando su "embed code" en uno de estos 2 lugares del HTML:
Para scripts de seguimiento y analítica:
Para chats, agentes y widgets flotantes:
La plataforma siempre dice dónde pegarlo. Si dice "coloca esto en el <head>" — va en el <head>. Sin más configuración.
Opción A: Dar acceso de colaborador en GitHub — ven el código pero los archivos viven en el repositorio de la agencia.
Recomendado: Aclarar en el contrato que las modificaciones las hace la agencia y cobrarlas como mantenimiento mensual.
Nunca dar acceso directo al panel de Cloudflare.
El sitio es HTML puro — 100% portable.
Migrar = copiar la carpeta a cualquier hosting (cPanel, Vercel, Netlify, otro servidor).
No hay base de datos. No hay exportación. No hay plugins que reinstalar. Es solo copiar archivos.
El cliente puede llevarse su sitio en cualquier momento.
Siempre duplica la carpeta antes de empezar. El original es tu punto de partida limpio.
Centraliza variables de colores y fuentes. Un cambio actualiza todo el sitio sin buscar uno por uno.
12 puntos que garantizan que no se te escapó el logo anterior, el Lorem Ipsum ni el email malo.
Con este sistema, un sitio nuevo toma 2-4 horas en lugar de días.