Teach Terminal

A browser-based game that teaches Linux terminal commands through interactive lessons and missions.

Today

Today I built the login page. It’s a page where the user enters their username, machine name, and password before entering the terminal.

The form validates each field:

• Username must be 4–9 characters, start with a letter, and contain only letters and numbers
• Machine name follows the same rules
• Password must be 8–19 characters

If something is wrong, an error message appears below the form showing what needs to be fixed.

After all fields are entered correctly, the data is saved and the user is redirected to the terminal.

The terminal itself is not fully finished yet — commands work, but there’s no filesystem and no lessons. That’s the next step.

Completed

• index.html — Start menu with Start and Settings buttons
• settings.html — Settings page with three themes (Ubuntu, Hacker, Kali)
• login.html — Login page with username, machine name, and password validation
• main.html — Interactive terminal interface
• style.css — Main styling, animated gradients, glassmorphism UI, and theme colors
• login.css — Login page styling with themed backgrounds
• settings.js — Saves the selected theme using localStorage
• theme.js — Loads the saved theme and applies it automatically
• login.js — Form validation and redirect to terminal
• terminal.js — Terminal input handling, prompt display, line management
• commands.js — Command recognition (help, pwd, clear, whoami, date, echo)

Goal

My goal is to create a realistic Linux terminal that teaches beginners how to use common commands through interactive lessons instead of just reading documentation.

Next Steps

• Build a fake filesystem (cd, ls, mkdir, touch)
• Add file permissions (chmod, chown, sudo)
• Create lessons and practice missions
• Add command history (up/down arrow keys)

Try It

Live Demo