Teach Terminal

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

Today

Today I built the fake filesystem and connected it to the terminal. The terminal now feels like a real Linux system.

The filesystem supports:

• pwd - shows current directory
• ls - lists files and folders with colors (blue for directories, green for executables, white for files)
• ls -l - shows permissions, owner, group, and name
• cd - navigate with ~, ., .., and absolute paths
• mkdir - create folders
• touch - create files

The prompt updates when navigating directories. It shows ~ for the home directory and the full path everywhere else.

I also added realistic bash error messages. Invalid flags, missing arguments, and wrong paths all show proper errors like a real terminal would.

The terminal now has 7 working commands with real filesystem behavior. Next step is building the lesson system that teaches these commands one by one.

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
• filesystem.js - Fake Linux filesystem with files, folders, permissions, and navigation
• terminal.js - Terminal input handling, prompt display, line management, colored output
• commands.js - Command recognition (help, pwd, clear, ls, cd, mkdir, touch)

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 the lesson system (lectures + practice missions)
• Add more commands (cat, rm, cp, mv, chmod, chown)
• Add command history (up/down arrow keys)
• Add redirection (>, >>, <)
• Improve mobile experience

Try It

Live Demo

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

Teach Terminal

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

What I Built

I started the project by creating the basic structure of the website and the main navigation.

Completed

• index.html — Start menu with Start and Settings buttons.
• settings.html — Settings page.
• main.html — Initial game page.
• style.css — Main styling, animated gradients, glassmorphism UI, and theme colors.
• settings.js — Saves the selected theme using localStorage.
• theme.js — Loads the saved theme and applies it automatically.

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 the interactive terminal.
• Add Linux commands and command processing.
• Create lessons and practice missions.
• Improve the mobile experience.