🇲🇽 Educación Tecnológica Secundaria • Aprende Paso a Paso

Aprende a Construir la Web y Juegos con
HTML y JavaScript

Bienvenido a tu taller escolar interactivo. Aquí no solo leerás conceptos: vas a experimentar, probar código en tiempo real, entender la sintaxis exacta de la web y ¡programar la física de tus propios videojuegos de plataformas!

🧠 ¿Cómo funciona una Página Web y un Videojuego?

Imagina que estás construyendo a un robot o a un estudiante:

🧱

1. HTML = El Esqueleto

Es la estructura base. Define dónde van los títulos, los párrafos, las fotos, los botones y el lienzo del juego (<canvas>).

🎨

2. CSS = La Ropa y Estilo

Le da color, tipografías, fondos y apariencia bonita a los huesos de HTML para que se vea moderno y atractivo.

⚡

3. JavaScript = El Cerebro y Músculos

Es la inteligencia y movimiento. Calcula promedios, escucha las teclas, aplica la gravedad y mueve los personajes en pantalla.

Elige tu Ruta de Aprendizaje

Cada página está especialmente estructurada con teoría clara, anatomía de sintaxis y simuladores de pruebas prácticas.

Estructura & Marcado
🧱

Aprende HTML Vanilla

Domina las etiquetas fundamentales de la web. Aprende a crear páginas completas desde cero con encabezados, listas, imágenes, enlaces y formularios.

  • ✓ Anatomía interactiva: ¿Qué es una etiqueta y un atributo?
  • ✓ Estructura básica de una página: <!DOCTYPE>, <head> y <body>
  • ✓ Textos, fotos, tablas y formularios de registro
  • ✓ Sandbox en vivo: Diseña carteles escolares y fichas de mascotas
  • ✓ Mini-Quiz interactivo con calificación al instante
Entrar al Módulo de HTML ➔
Programación & Lógica
⚡

Aprende JavaScript Vanilla

Aprende a programar la lógica de una computadora. Descubre cómo guardar datos en variables, tomar decisiones con condiciones y crear funciones reutilizables.

  • ✓ Anatomía de una instrucción en JS: palabras clave y punto y coma
  • ✓ Variables (let y const) y tipos de datos (números, texto)
  • ✓ Condicionales if/else: ¿Aprobaste la materia escolar?
  • ✓ Funciones y manipulación visual de la página (DOM)
  • ✓ Consola Interactiva en vivo: Ejecuta tus propios códigos
Entrar al Módulo de JavaScript ➔
Físicas & Canvas 2D
🎮

Simulador de Videojuegos 2D

¡Pon a prueba tu código en un juego real! Programa el movimiento de un robot escolar: controla el eje X, el salto en el eje Y, la gravedad y supera retos con físicas interactivas.

  • ✓ Aprende el ciclo de juego (Game Loop a 60 FPS)
  • ✓ El plano cartesiano en pantalla: X e Y
  • ✓ Programación de velocidad, aceleración y fricción
  • ✓ Misiones guiadas: Movimiento, salto, turbo y doble salto
Abrir Simulador de Juegos ➔
Maquetado & Sintaxis Web
🛠️

Taller de Prototipado 2D

¡Diseña y maqueta tu propio videojuego completo! Configura personajes (Objetos), plataformas (Arrays), gravedad física y botones interactivos en HTML, con exportación de código listo para jugar.

  • ✓ Anatomía: El personaje como Objeto en JavaScript
  • ✓ Maquetador de plataformas: Arreglos y bucles forEach
  • ✓ Físicas planetarias: Tierra, Luna, Júpiter y Gravedad Cero
  • ✓ Botones táctiles en HTML conectados con addEventListener
  • ✓ Exportador de Código: Descarga tu archivo .html terminado
Entrar al Taller de Prototipado ➔
💡

Consejo para Alumnos de Secundaria:

Para programar en tu computadora no necesitas programas caros ni internet rápido. Un simple bloc de notas o editor como VS Code y cualquier navegador web (como Chrome o Edge) son suficientes para empezar a programar tus propios sitios web.