Primeros pasos: Alumno
¡Bienvenido a Tutor IDE! Esta guía te ayudará a comenzar tu aventura con la programación — paso a paso.
1. Inicia sesión
Tu profesor te dará un nombre de usuario y una contraseña — introdúcelos en la página app.tutoride.dev y haz clic en "Iniciar sesión".
Si no tienes profesor, también puedes crear tu propia cuenta — haz clic en "Registrarse" y completa el formulario.
2. Lista de incorporación
La primera vez que inicies sesión, verás una lista de incorporación — un conjunto de pasos sencillos para ayudarte a conocer la plataforma. Cada paso es una tarea corta, como "Crea tu primer proyecto" o "Resuelve tu primer desafío". Complétala paso a paso: es la forma más rápida de sentirte cómodo en la plataforma.
3. Únete a una organización
Si tu profesor te dio un código de invitación, haz clic en "Unirse a la organización" e introduce el código. Serás añadido automáticamente al grupo correspondiente.
Si el profesor creó tu cuenta directamente, todo está listo — al iniciar sesión ya estarás en el grupo.
4. Crea tu primer proyecto
En el panel de control, haz clic en "Nuevo proyecto" y elige una plantilla:
- HTML/CSS — creación de páginas web con colores, fuentes y diseño
- HTML/CSS/JS — como lo anterior, pero con elementos interactivos (¡animaciones, botones, juegos!)
- Python — programación en lenguaje Python (cálculos, juegos de texto, algoritmos)
Dale un nombre a tu proyecto y haz clic en "Crear". Se abrirá el editor de código — ¡aquí empieza la diversión!
5. Escribe código y mira el resultado
A la izquierda ves el editor de código — aquí escribes HTML, CSS o JavaScript. A la derecha está la vista previa — tu página mostrada en vivo.
Cada cambio que guardes (Ctrl+S) aparecerá inmediatamente en la vista previa. ¡Experimenta! Cambia un color, añade un nuevo encabezado, inserta una imagen — y observa qué pasa.
6. Pide ayuda al asistente de IA
¿No sabes cómo hacer algo? Haz clic en el icono del chat y hazle una pregunta al asistente de IA. Puedes preguntar por ejemplo:
- "¿Cómo cambio el color de fondo a azul?"
- "¿Qué es
<div>?" - "¿Cómo hago para que el texto esté centrado en la página?"
El asistente te responderá en un lenguaje sencillo y te ayudará a entender cosas nuevas.
7. Resuelve desafíos
En la pestaña "Desafíos" encontrarás las tareas asignadas por tu profesor. Cada desafío es una nueva habilidad que dominar.
También tienes acceso a CSS Battle — desafíos especiales en los que reproduces una imagen usando código HTML y CSS. ¡Cuanto más preciso seas, mayor será tu puntuación!
8. Juega minijuegos
Ve a la página Learn (Aprender) para encontrar minijuegos educativos. Cada juego tiene tres niveles de dificultad:
- Fácil — disponible de inmediato, perfecto para empezar
- Medio — se desbloquea al conseguir al menos 1 estrella en Fácil
- Difícil — se desbloquea al conseguir al menos 1 estrella en Medio
Sistema de estrellas
Por cada juego puedes ganar de 0 a 3 estrellas:
- 0 estrellas — puntuación por debajo del umbral de aprobación — ¡inténtalo de nuevo!
- 1 estrella — ¡aprobado! Puedes desbloquear el siguiente nivel de dificultad
- 2 estrellas — ¡gran puntuación!
- 3 estrellas — ¡perfecto! Eres un maestro de este juego
Jugar minijuegos te da puntos XP, así que es una forma genial de aprender y subir de nivel al mismo tiempo.
9. Sigue las rutas de aprendizaje
Las Rutas de aprendizaje (Learning Paths) son un currículo estructurado que te guía por los temas en orden: desde los fundamentos de HTML, pasando por CSS, hasta JavaScript avanzado.
Cada etapa termina con un desafío de puerta — necesitas completarlo para pasar a la siguiente etapa. Así te aseguras de entender bien cada tema antes de avanzar.
10. Completa las misiones diarias
Cada día te esperan misiones diarias — objetivos cortos que completar, como:
- "Crea un nuevo proyecto"
- "Resuelve un desafío"
- "Juega un minijuego"
- "Hazle una pregunta al asistente de IA"
Completar misiones te ayuda a aprender con constancia y te recompensa con puntos XP extra. ¡Revisa tus objetivos diarios en el panel de control!
11. Publica tu proyecto
Cuando tu proyecto esté listo, haz clic en "Publicar" en el editor. Tu página aparecerá en internet con una dirección real, por ejemplo:
https://code.tutoride.dev/tu-nick/mi-pagina/
Puedes enviar este enlace a tu familia, amigos o mostrarlo en clase.
12. Invita a tus padres
¡Tus padres pueden seguir tu progreso! En el panel de control encontrarás la opción de generar un enlace para padres. Solo tienes que enviárselo a tu mamá o papá — al hacer clic verán tu actividad, logros obtenidos y avance en el aprendizaje. Los padres no necesitan su propia cuenta — el enlace es suficiente.
13. Gana logros e insignias
Te esperan 44 logros en 10 categorías en la plataforma — cada uno con una insignia única con su propia imagen personalizada. Ganas logros por diferentes actividades:
- Primeros pasos — p. ej., "Primer proyecto", "Primera publicación"
- Desafíos — p. ej., "Maestro CSS", "10 desafíos completados"
- Minijuegos — p. ej., "Jugador", "Coleccionista de estrellas"
- Rachas de actividad — p. ej., "7 días seguidos", "Racha de 30 días"
- Comunidad — p. ej., "Compañero servicial", "Líder de la semana"
- ¡...y muchos más!
Revisa tu colección de insignias en la página de Logros del panel de control. ¿Cuántos puedes conseguir?
14. Revisa tu progreso
En el panel de control encontrarás información sobre tu progreso:
- Puntos XP — los ganas por cada actividad en la plataforma
- Nivel — cuantos más XP, mayor es tu nivel
- Logros — 44 insignias únicas por diferentes hazañas
- Estrellas — coleccionadas en minijuegos por puntuaciones altas
- Racha — cuántos días seguidos has estado activo
15. ¡Mira quién va primero!
Abre la tabla de clasificación para ver el ranking de alumnos en tu grupo. ¿Quién ganó más XP esta semana? ¡Quizás seas tú!
¡Buena suerte! La programación es un superpoder — y tú acabas de empezar a descubrirlo. Crea, experimenta, juega minijuegos, colecciona estrellas y no tengas miedo de pedir ayuda.