Plantilla landing de curso online en HTML y CSS: objetivos claros, temario, requisitos y preguntas frecuentes sin promesas inventadas.
Explicar el curso antes de pedir una matrícula
Esta plantilla landing curso online organiza una oferta formativa alrededor de preguntas del estudiante: qué aprenderá, qué necesita saber antes, cómo son las clases y cómo puede inscribirse. El diseño no utiliza contadores de urgencia ni testimonios inventados. Su función es ayudarte a presentar una formación real con información suficiente para que la persona valore si le sirve. Una promesa concreta y comprobable genera menos dudas que una colección de frases grandilocuentes.
Convertir objetivos generales en resultados visibles
Aprender desarrollo web es una intención demasiado amplia para una landing. Explica qué podrá construir o revisar el alumno al terminar una unidad. El ejemplo habla de estructura, diseño adaptable y comprobación porque son actividades observables. Ajusta esos resultados al nivel real del programa. Si el curso es introductorio, no prometas dominio profesional de herramientas avanzadas. También conviene aclarar qué temas quedan fuera para que la persona no complete las lagunas con expectativas equivocadas.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.
Así se ve esta plantilla · Diseño de muestra interactivo
La vista previa está aislada del artículo. Copia el código de debajo para personalizarla.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forma — Aprende haciendo</title>
<style>
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:#f5f1fe;color:#29203e}.brand{font-size:2rem}.brand span{color:#7152b8;margin-left:5px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;padding:65px 0 100px}.hero h1{font-weight:800;font-size:clamp(3.8rem,7vw,6.2rem)}.hero h1 span{color:#7152b8}.hero>div>p{color:#706780;max-width:460px}.hero .eyebrow{color:#7152b8}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0 24px}.button{background:#29203e;color:#fff;border-color:#29203e}.text-button{background:none;border:0;border-bottom:1px solid #29203e;padding:8px 0;font-size:.85rem}.lesson-stack{position:relative;padding:30px 0 70px}.lesson-back{position:absolute;inset:30px 10px 80px;background:#b9a6e1;border-radius:24px;transform:rotate(9deg)}.lesson-card{position:relative;background:#e8fa87;border-radius:24px;padding:30px;transform:rotate(-4deg);box-shadow:0 30px 50px #39294b22}.lesson-top{display:flex;justify-content:space-between;font-size:.6rem;font-weight:bold;letter-spacing:.08em}.lesson-top i{font-style:normal}.lesson-card h2{font-size:3.2rem;line-height:1.05;margin:45px 0 25px}.lesson-card em{font-family:Georgia;font-weight:400}.lesson-card p{font-family:monospace;font-size:.7rem;border-top:1px solid #29203e40;padding-top:20px;margin:22px 0 0}.shapes{display:flex;height:70px}.shapes b{width:70px;height:70px;background:#7152b8;border-radius:50%}.shapes b:nth-child(2){border-radius:0;background:#a18acd}.shapes b:nth-child(3){border-radius:0 100% 0 0;background:#29203e}.note{position:absolute;right:-10px;bottom:15px;background:#fff;padding:15px 20px;transform:rotate(3deg);font-size:.6rem;font-weight:700;letter-spacing:.06em;box-shadow:0 8px 20px #0001}.section-title{max-width:750px}.modules{margin-top:45px}.modules details{padding:22px 0;border-top:1px solid #b4a8c7}.modules summary{display:flex;align-items:center;gap:25px;list-style:none;font-size:1.25rem}.modules summary span{color:#7152b8;font-size:.9rem}.modules summary b{margin-left:auto;border-radius:25px;background:#e5dcf7;padding:6px 12px;font-size:.6rem;letter-spacing:.08em}.modules p{padding-left:45px;color:#706780}.method{background:#29203e;color:#f5f1fe;padding:80px 0}.method .eyebrow{color:#c3a9f5}.method h2{max-width:900px}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px}.method-grid b{color:#d8ef81;font:3rem Georgia}.method-grid h3{margin-top:25px}.method-grid p{color:#c9c0d8}.access{background:#e5dcf7;border-radius:24px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.access .demo{margin-top:20px}.sample{padding:40px;background:#fff;border-radius:24px}.sample h2{font-size:2rem}.sample label{display:block;font-weight:bold;font-size:.85rem}.sample input{width:100%;padding:15px;border:1px solid #7152b8;border-radius:10px;margin:10px 0 20px}.live-result{background:#f5f1fe;padding:25px;border-radius:14px}.live-result span{font-size:.7rem;color:#7152b8}.live-result h3{font-size:1.8rem;margin:15px 0 0;overflow-wrap:anywhere}.sample>p:last-child{font-size:.85rem;margin:20px 0 0}@media(max-width:800px){.hero{grid-template-columns:1fr;gap:35px;padding-top:35px}.lesson-stack{max-width:470px;margin:auto}.lesson-card h2{font-size:2.7rem}.method-grid,.access{grid-template-columns:1fr;gap:25px}.access{padding:28px}.modules summary{font-size:1rem;gap:15px}.modules summary b{font-size:.55rem}.sample{padding:25px}}
</style>
</head>
<body>
<header class="wrap nav"><a class="brand" href="#">forma<span>✳</span></a><nav class="links" aria-label="Principal"><a href="#programa">Programa</a><a href="#metodo">Método</a><a href="#acceso">Acceso ↗</a></nav></header>
<main><section class="wrap hero reveal"><div><p class="eyebrow">Aprender. Practicar. Darle forma.</p><h1>Tu próxima<br>idea merece<br><span>una web.</span></h1><p>Una experiencia de aprendizaje para pasar de la página en blanco a tu primer proyecto con HTML y CSS.</p><div class="hero-actions"><a class="button" href="#programa">Explora el programa ↗</a><button class="text-button" id="sample-open">Ver una práctica ↓</button></div><p class="demo">Curso de demostración · Nivel inicial · Sin matrícula activa</p></div><div class="lesson-stack" aria-hidden="true"><div class="lesson-back"></div><div class="lesson-card"><div class="lesson-top"><span>01 / EMPIEZA AQUÍ</span><i>● ● ●</i></div><h2>Las buenas<br>ideas tienen<br><em>estructura.</em></h2><div class="shapes"><b></b><b></b><b></b></div><p><h1>Esto lo construyes tú.</h1></p></div><span class="note">MENOS TEORÍA SUELTA.<br>MÁS MANOS AL CÓDIGO.</span></div></section>
<section class="sample wrap" id="sample" hidden><p class="eyebrow">Práctica de muestra</p><h2>Escribe una idea.<br>Dale un título.</h2><label for="idea">¿Qué te gustaría construir?</label><input id="idea" maxlength="90" placeholder="Mi primera web de recetas"><div class="live-result"><span>Tu primer encabezado</span><h3 id="idea-preview">Tu próxima idea empieza aquí.</h3></div><p>Esta pequeña interacción demuestra cómo el contenido puede actualizar una interfaz. No envía ni guarda datos.</p></section>
<section id="programa" class="wrap section"><div class="section-title"><p class="eyebrow">Un camino que puedes seguir</p><h2>De entender las piezas<br>a construir el conjunto.</h2></div><div class="modules"><details open><summary><span>01</span> Estructura con intención <b>HTML</b></summary><p>Títulos, secciones, enlaces y contenido que mantiene un orden comprensible.</p></details><details><summary><span>02</span> Un lenguaje visual propio <b>CSS</b></summary><p>Espaciado, tipografía y color para que las decisiones visuales ayuden a leer.</p></details><details><summary><span>03</span> Diseños que se adaptan <b>GRID</b></summary><p>Distribuciones flexibles que funcionan también cuando el contenido cambia.</p></details><details><summary><span>04</span> Revisar y compartir <b>PROYECTO</b></summary><p>Teclado, contraste y comprobaciones antes de publicar una práctica.</p></details></div></section>
<section id="metodo" class="method"><div class="wrap"><p class="eyebrow">Una lección. Una decisión. Un resultado.</p><h2>No hace falta saberlo todo.<br>Hace falta empezar bien.</h2><div class="method-grid"><article><b>01.</b><h3>Comprende</h3><p>Conecta cada concepto con un problema real de una interfaz.</p></article><article><b>02.</b><h3>Experimenta</h3><p>Cambia una decisión y observa qué ocurre en el navegador.</p></article><article><b>03.</b><h3>Construye</h3><p>Termina una pieza que puedas explicar y mejorar.</p></article></div></div></section>
<section id="acceso" class="wrap section"><div class="access"><div><p class="eyebrow">Tu siguiente paso</p><h2>Hazle sitio<br>a esa idea.</h2></div><div><p>Configura el precio final, las fechas, la duración y las condiciones reales de tu formación.</p><p>Necesitarás un ordenador, navegador y editor de texto. Adapta estos requisitos al programa definitivo.</p><a class="button" href="#programa">Revisar contenidos ↑</a><p class="demo">Esta maqueta no procesa pagos ni inscripciones.</p></div></div></section></main><footer class="wrap">forma ✳ — Plantilla educativa editable.</footer>
<script>
const sample=document.querySelector('#sample');
document.querySelector('#sample-open').addEventListener('click',()=>{sample.hidden=false;document.querySelector('#idea').focus();});
document.querySelector('#idea').addEventListener('input',e=>{document.querySelector('#idea-preview').textContent=e.target.value.trim()||'Tu próxima idea empieza aquí.';});
</script>
</body>
</html>
Un programa que permite evaluar la profundidad
El temario usa una lista ordenada para presentar una secuencia de trabajo. Puedes añadir una breve descripción a cada módulo y vincularlo con una práctica. Evita llenar la página con nombres de herramientas sin explicar para qué se usan. Si hay proyectos, distingue los ejercicios guiados del trabajo independiente. La duración debe incluir una estimación realista de práctica cuando corresponda; ver un vídeo de quince minutos no equivale necesariamente a completar la actividad en ese tiempo.
Requisitos que evitan una compra equivocada
Indica conocimientos previos, equipo, software y cualquier cuenta necesaria. Si el estudiante necesita instalar algo, explica cómo recibirá ayuda para configurarlo. La plantilla deja un texto editable en lugar de afirmar que cualquier dispositivo sirve. Un curso de programación puede requerir un ordenador aunque los vídeos se vean desde el móvil. Cuanto más concreta sea esta sección, menos probable será que una persona descubra después de matricularse que no puede seguir las prácticas.
Preguntas frecuentes con respuestas operativas
Los desplegables nativos permiten responder dudas sin añadir JavaScript. Dedícalos a cuestiones reales: acceso al material, horarios, soporte, correcciones y actualizaciones. No escondas precio o condiciones esenciales dentro de un acordeón. El lector debería comprender la oferta principal sin abrir todos los elementos. Si una respuesta cambia con cada edición, identifica quién la revisa y cuándo. Una pregunta frecuente desactualizada puede contradecir el proceso de inscripción y provocar consultas evitables.
Conectar la inscripción con un proceso real
La maqueta no procesa pagos ni crea cuentas. Sustituye el bloque final por la información completa y el enlace al sistema que sí lo hace. Comprueba que el precio coincida, que los impuestos y condiciones estén claros y que el siguiente paso tenga el mismo nombre. No utilices un botón Comprar que solamente despliegue una alerta de éxito. La experiencia debe distinguir entre pedir información, iniciar una matrícula y recibir una confirmación efectiva.
Personalizar el estilo sin perder legibilidad
Empieza por cambiar colores en el CSS y conserva un contraste suficiente en botones, enlaces y texto secundario. Los títulos grandes deben funcionar también con nombres de curso largos. La cuadrícula se adapta a una columna sin depender de una anchura fija. Si añades un vídeo, incluye información textual equivalente sobre el contenido de la oferta y evita la reproducción automática con sonido. El mensaje principal no debería depender de que el visitante pueda reproducirlo en ese momento.
Comprobar el recorrido de una persona nueva
Pide a alguien que no conozca el curso que explique qué incluye, para quién sirve y qué ocurre al inscribirse. Sus dudas revelan mejor los problemas que una revisión puramente decorativa. Después prueba enlaces, desplegables y foco con teclado. Revisa la página a un ancho estrecho y con zoom alto. Antes de publicarla, elimina todas las instrucciones de edición y confirma que cada dato pertenece a la convocatoria real. La claridad de la oferta es parte de la calidad visual.
Presentar al docente con información relevante
Una biografía útil relaciona experiencia y contenido del curso. Explica qué ha hecho la persona que le permite enseñar ese tema y cuál será su papel durante la formación. No conviertas la sección en una lista de logros sin relación con el programa. Si participan varios docentes, indica qué módulos imparte cada uno. Las fotografías y credenciales deben ser reales y autorizadas. Para una primera edición, puedes presentar el método y la experiencia disponible sin inventar testimonios de alumnos que todavía no han pasado por el curso.
Materiales, ejercicios y acceso posterior
Aclara qué archivos recibe el estudiante, cómo entrega las prácticas y durante cuánto tiempo conserva acceso al contenido. Si hay correcciones, explica qué se revisa y en qué formato. No uses Acompañamiento completo cuando solamente existe una sesión colectiva. También conviene indicar qué ocurre si una herramienta cambia después de grabar una lección. Una política de actualización debe describir lo que realmente puedes mantener. La landing puede resumir estos puntos y enlazar a condiciones completas, sin ocultar los aspectos que influyen en la decisión de inscribirse.
Evaluar una llamada a la acción por su claridad
El botón principal debería conducir al siguiente paso que la persona espera después de leerlo. Ver el programa puede desplazarse al temario; Inscribirme debe abrir un proceso de inscripción. No mezcles ambas funciones bajo una etiqueta vaga. Prueba también el recorrido cuando alguien entra directamente por un enlace a la sección final y no ha leído el encabezado. Precio, convocatoria y condiciones deben seguir siendo comprensibles. Una llamada a la acción eficaz reduce incertidumbre sobre lo que ocurrirá al pulsarla, además de destacar visualmente.
Revisión de la oferta en cada convocatoria
Antes de reutilizar la landing, revisa fechas, precio, docentes, programa y condiciones de acceso. No basta con cambiar la imagen del encabezado. Comprueba también el formulario de inscripción y los mensajes que recibe el alumno después. Si conservas testimonios de una edición anterior, identifica su contexto y evita sugerir que describen una versión distinta del curso. Una pequeña lista de datos que deben aprobarse ayuda a mantener coherencia entre página, matrícula y material de bienvenida. La estructura puede repetirse; la información de cada convocatoria necesita una comprobación propia.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Crear desplegables nativos y Configurar enlaces HTML.
