Únete.
Empieza a aprender y generar ingresos desde cualquier lugar con nuestras micro-tareas.
¿Ya eres miembro? Inicia sesión
Recuperar Contraseña
Ingresa el correo asociado a tu cuenta y te enviaremos un enlace para restablecer tu contraseña.
¿Recordaste tu contraseña? Inicia sesión
Nueva Contraseña
Ingresa y confirma tu nueva contraseña para acceder de nuevo a tu cuenta.
Aprender
Explora nuestro catálogo de cursos cortos de alta demanda.
Bolsa de Micro-tareas
Genera ingresos inmediatos con tareas digitales simples.
Financiar Laptop
Revisa tu tracción y solicita tu equipo reacondicionado.
Mi Panel / Perfil
Configura tus pagos, revisa tus estadísticas e historial de ingresos.
Mi Aprendizaje
Tu horario, cursos inscritos y calificaciones de tus evaluaciones.
Catálogo de Cursos
Detalles del Curso
Contenido del curso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esta es mi primera página web creada solo con HTML.</p>
</body>
</html>¿Por qué elegir este curso?
Configura tu Horario
Selecciona tu hora haciendo clic en la fila
| Bloque | L | M | M | J | V | S | D |
|---|
Inscripción Procesada
Se envió la confirmación a tu correo electrónico
Te enviamos un correo con todos los detalles de tu inscripción (revisa también la carpeta de spam).
Guarda tu horario: comenzarás a recibir clases muy pronto.
Mi Aprendizaje
🚀 Bootcamp en Vivo
Progreso del curso: 0%
Clases del Bootcamp
📅 Calendario — Junio 2026
Próxima clase: Clase 2 - Texto y Formato (18/06)
📋 Estado de mis Tareas
Entregadas (0) ✅
Pendientes (0) ⏳
📂 Historial de Entregas
Clase 1: El Mundo Web
¿Qué es realmente HTML?
Imagina que quieres construir una casa.
Imagina que HTML es el plano arquitectónico de una casa: define la estructura sin preocuparse de los colores o decoraciones.
Desglosemos el término
- HTML: es el plano arquitectónico. Define dónde va la sala, cuántas ventanas tiene y dónde está la puerta. No le importa si la casa es roja o azul (eso es CSS), solo que la estructura esté ahí.
- Hipertexto (HyperText): el texto puede ser "enlazado". Puedes hacer clic en una palabra y viajar a otro lugar.
- Marcado (Markup): usamos "etiquetas" para decirle a la computadora qué es cada cosa (un título, un párrafo, una imagen).
El "Taller": Configuración del Entorno
No necesitamos programas pesados. Solo dos herramientas:
VS Code
Es nuestro procesador de texto avanzado. Tiene "ojos" para entender el código y avisarnos si nos equivocamos.
Google Chrome
Es nuestro "intérprete". El navegador lee nuestro archivo HTML y lo dibuja en pantalla.
🛠️ Instalación indispensable
- Descarga: instala VS Code en tu equipo.
- Extensiones: en VS Code, busca el ícono de "cubitos" e instala "Live Server".
- ¿Para qué sirve?: imagina que escribes un libro y se imprime solo al instante. Live Server guarda y recarga tu página automáticamente cada vez que haces cambios.
Anatomía de un Elemento (La Regla de Oro)
La mayoría de los elementos HTML viven en "cajas". Mira esto:
- <h1> (Apertura): le dice al navegador: "¡Atención! Lo que viene ahora es un título principal".
- Contenido: lo que el usuario realmente ve en pantalla.
- </h1> (Cierre): le dice al navegador: "Fin del título, aquí termina la jerarquía".
El Esqueleto Estándar
Todo documento HTML necesita un "acta de nacimiento". Copia esto en un archivo llamado index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Web</title>
</head>
<body>
<h1>Bienvenido a mi sitio</h1>
<p>¡Hola! Estoy aprendiendo a construir la web desde cero.</p>
</body>
</html>Explicación de etiquetas básicas
- <!DOCTYPE html>: la advertencia: "Usa estándares modernos".
- <html>: el sobre que contiene toda la carta.
- <head>: el cerebro (instrucciones invisibles para el usuario).
- <body>: la carne de la página (todo lo visible).
Jerarquía: ¿Por qué no todo es igual?
HTML se trata de orden. Si pones todo del mismo tamaño, el usuario se pierde. Por eso existen los encabezados:
<h1> Título principal
<h2> Subtítulos
<h3> Secciones pequeñas
<p> Párrafos (el texto normal)
🚀 Tu primer "Reto de Laboratorio"
No aprendemos leyendo, aprendemos escribiendo. ¡Sigue estos pasos!
- Crea una carpeta en tu PC llamada MiWeb.
- Arrastra esa carpeta dentro de VS Code.
- Crea un archivo llamado
index.html. - Escribe
!y presiona Enter para la plantilla automática. - Añade un
<h2>Mis metas</h2>y un<p>Aprender a programar</p>. - Clic derecho y selecciona "Open with Live Server".
¿Qué pasa si me equivoco? 🐞
Si algo falla, presiona F12 en tu navegador. Se abrirá la Consola de desarrollador; es la herramienta más poderosa para encontrar errores en tu código.
📤 Entrega de Tarea
Módulo: —
⚡ HTML Intermedio
Progreso del curso: 0%
Módulos del Curso
📅 Calendario — Julio 2026
Próxima actividad: Formularios Avanzados (22/07)
📋 Estado de mis Tareas
Entregadas (0) ✅
Pendientes (0) ⏳
📂 Historial de Entregas
Módulo 1: Semántica
Más allá del simple <div>
Construyendo para el futuro
Imagina que estás desarrollando un MVP para una plataforma de micro-aprendizaje. Si usas <div> para todo, los lectores de pantalla se pierden y los motores de búsqueda no entienden el contenido. Las etiquetas semánticas estructuran la información y reducen el consumo de datos al hacer el código más limpio y eficiente.
Nuevos bloques de construcción
- <header> y <footer>: No son solo visuales, delimitan el inicio y el fin del contexto de tu sitio.
- <nav>: Exclusivo para los bloques de enlaces de navegación principales.
- <main> y <article>: Envuelven el contenido independiente y de mayor valor de tu aplicación.
- <section> y <aside>: Agrupan secciones temáticas y contenido complementario respectivamente.
La Arquitectura Perfecta
Este es el esqueleto que usaremos para estructurar nuestros proyectos antes de subirlos a producción:
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<h1>Lección 1</h1>
<section>...</section>
</article>
<aside>Widgets</aside>
</main>
<footer>...</footer>
</body>🚀 Reto de Laboratorio: Refactorización
Toma una página antigua hecha solo con divs y conviértela a semántica pura.
- Abre tu editor de código.
- Reemplaza el contenedor principal por
<main>. - Identifica el menú y envuélvelo en
<nav>. - Comprueba errores en la consola presionando F12.
div para agrupar elementos sin significado específico.
📤 Entrega — Nivel Intermedio
Módulo: —
Tareas Disponibles
Completa las tareas para recibir tu pago inmediato en tu balance.
Validar respuesta de Chatbot
Lee el texto y determina si la respuesta de la IA fue educada y correcta:
Pregunta:
IA:
Financiamiento de Laptops
Tu Tracción de Ingresos
Para optar por una laptop reacondicionada, debes generar un acumulado de $50.00 en micro-tareas.
📋 Datos para tu Pago
Realiza tu Pago Móvil o Transferencia a la siguiente cuenta y luego registra tu comprobante abajo.
📱 Pago Móvil
🏦 Transferencia
Registrar mi Comprobante de Pago
Mis Comprobantes Enviados
Mi Perfil
Usuario
Nivel 2: Usuario Activo
Mi Actividad
Habilidades Verificadas
Billetera y Pagos
📋 Mis Pagos Registrados
Historial de Ingresos
🛡️ Panel Admin
Detalle del Usuario
—
—
🪪 Verificación de Identidad
—Estadísticas
Cursos Inscritos y Progreso
Entregas de Tareas
Comprobantes de Pago
Verificación
Para inscribirte en cursos necesitamos verificar tu identidad y confirmar que eres mayor de edad. Tus datos solo son visibles para ti y el equipo administrador.
Verificación Pendiente
Tu solicitud está siendo revisada por nuestro equipo. Esto puede tardar entre 24 y 48 horas.
Aprende y Gana
Formación digital + ingresos reales, desde tu celular
Somos una plataforma diseñada para jóvenes con acceso limitado a educación técnica de calidad. Creemos que tener un teléfono inteligente es suficiente para comenzar a aprender y generar ingresos reales.
Micro-aprendizaje
Cursos cortos sobre habilidades digitales: IA, soporte técnico, atención al cliente y más. Optimizados para bajo consumo de datos.
Micro-tareas pagadas
Completa tareas digitales simples y recibe tu pago directo en tu balance. Sin intermediarios.
Financiamiento de hardware
Demuestra tracción generando ingresos en la plataforma y accede al financiamiento de tu primera laptop.
¿Quieres saber más?
Síguenos en Facebook para conocer novedades, cursos nuevos y promociones exclusivas para nuestra comunidad.
Visítanos en Facebook