Teach Terminal

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

Today

Today I finished writing all 25 lessons and fixed several issues with the lesson system.

The lessons are organized into 5 sections - Introduction, Navigation, Files, Text & Redirection, and Permissions - plus a final congratulations lesson. Each practice lesson has multiple steps, so instead of a single command to type, the user might create a file, change its permissions, and verify with ls -l. The window tracks progress with markers like [x], [>], and [ ] so it is clear where the user is.

I also fixed bugs I found while testing the flow:

• The lesson window didn’t reset the filesystem between practices. If you completed mkdir projects once, replaying the lesson would fail because the folder already existed. Now the filesystem resets to a clean state at the start of every practice lesson.
• Sudo commands weren’t detected by the practice check. The checker only saw the inner command (chown root file.txt), not the full sudo chown root file.txt. Fixed by passing the full command through.
• Lesson 25 no longer has a practice - it just says “Congratulations! You finished Teach Terminal.” with a short message about what the user learned.

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
• mode.html - Mode selection: Free Exploration or Guided Path
• lessons.html - Course overview with sections and lesson cards
• main.html - Interactive terminal interface
• style.css - Main styling, animated gradients, glassmorphism UI, 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 mode page
• filesystem.js - Fake Linux filesystem with files, folders, permissions, owners, groups, sizes, and modification times
• terminal.js - Terminal input handling, prompt display, line management, colored output, sudo flow
• command.js - Command recognition and execution
• lessons-data.js - All 25 lessons organized into 5 sections
• lesson.js - Renders the lessons page timeline
• lesson-window.js - Runs the lesson window inside the terminal

Current Commands

pwd, ls, cd, mkdir, touch, echo, cat, rm, cp, mv, chmod, chown, sudo, clear, help, history

With flags for most commands, redirection (>, >>, <, 2>), Tab autocomplete, arrow-key history, !! and !n expansion, and per-command help.

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

• Add grep, head, tail
• Add pipes (|) and shell operators (&&, ||, ;)
• Wildcards and brace expansion

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 lesson window - the floating panel that runs inside the terminal during lessons. This is the piece that connects the lessons page to the terminal itself.

When a user picks a lesson from the overview, the terminal opens with ?lesson=N in the URL. The lesson window reads that number, finds the lesson in the data file, and appears in the top-right corner of the screen.

The window has three states:

Lecture - shows the lesson text explaining the concept. The user reads and clicks “Start Practice” (or “Complete” for intro lessons).

Practice - the window changes visually. Its border and title switch to an amber color, and a “PRACTICE:” prefix appears in the title. This makes it obvious that it’s time to do something, not just read. The user types the command in the terminal below.

Success - when the expected command is typed, the window shows the success message and a “Next Lesson” button appears. Clicking it swaps the window content to the next lesson without reloading the page.

The window is also draggable by its title bar. The user can move it anywhere, minimize it with -, or close it with × (which returns to the lessons page). Pressing Escape hides and shows the window.

I also added replay support. If a lesson is already complete, the user can open it again, read the lecture, and try the practice a second time. The window still shows the success message, but the lesson status stays DONE - it does not re-mark anything.

Some issues I hit:

• The intro lessons blocked the “Next Lesson” button because they were being re-completed in a loop. I fixed this by tracking a showingSuccess variable that tells the code whether we’re on the success screen or the lecture.
• The practice mode class wasn’t being added because the flow checked lessonComplete before checking whether we were in the practice phase. I reordered the checks so practice renders correctly even for replayed lessons.

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
• mode.html - Mode selection: Free Exploration or Guided Path
• lessons.html - Course overview with sections and lesson cards
• main.html - Interactive terminal interface
• style.css - Main styling, animated gradients, glassmorphism UI, 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 mode page
• filesystem.js - Fake Linux filesystem with files, folders, permissions, owners, groups, sizes, and modification times
• terminal.js - Terminal input handling, prompt display, line management, colored output
• command.js - Command recognition and execution
• lessons-data.js - All 25 lessons organized into 6 sections
• lesson.js - Renders the lessons page timeline
• lesson-window.js - Runs the lesson window inside the terminal

Current Commands

pwd, ls, cd, mkdir, touch, echo, cat, rm, cp, mv, clear, help, history

With flags for most commands, redirection (>, >>, <, 2>), Tab autocomplete, arrow-key history, !! and !n expansion, and per-command help.

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 chmod, chown, sudo for the Permissions section
• Write lesson content for lessons 21-24
• Build the Final Mission with a timer and game-style objectives

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 lessons system. This is the biggest step so far - the part that turns the terminal into a real teaching tool.

The lessons system has three parts:

The lessons overview page (lessons.html) shows all lessons organized into sections:

• Introduction
• Navigation
• Files
• Text & Redirection
• Permissions
• Final Mission

Each lesson appears as a card with a status: START (unlocked), DONE (completed), or LOCK (not yet unlocked). Intro lessons are always open so users can read them or skip. Navigation lessons unlock one at a time. Later sections unlock when the previous section is finished.

The lessons data file (lessons-data.js) stores all lesson content in one place. Each lesson has a lecture that explains the concept and a practice task with an expected command.

The lesson engine (lesson-window.js) will run inside main.html. It opens a floating window with the current lesson, shows the lecture, then the practice. When the user types the correct command, the lesson completes and unlocks the next one.

I also built the mode selection page (mode.html). After login, the user picks between two paths:

• Free Exploration : opens the terminal with no lessons
• Guided Path : opens the lessons overview

Progress saves to localStorage so completed lessons stay completed.

Some issues I hit:

• The unlock logic had a bug where Intro lessons blocked Navigation. I fixed it by skipping intro sections in the unlock check.
• CSS conflicts between .lesson-subtitle (used inside lesson cards) and .lessons-subtitle (used on the page). I renamed them to avoid mixing styles.
• The lessons page inherited overflow: hidden from the body, so it could not scroll. I added a body.lessons-page override.

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
• mode.html - Mode selection: Free Exploration or Guided Path
• lessons.html - Course overview with sections and lesson cards
• main.html - Interactive terminal interface
• style.css - Main styling, animated gradients, glassmorphism UI, 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 mode page
• filesystem.js - Fake Linux filesystem with files, folders, permissions, owners, groups, sizes, and modification times
• terminal.js - Terminal input handling, prompt display, line management, colored output
• commands.js - Command recognition and execution
• lessons-data.js - All 25 lessons organized into 6 sections
• lesson.js - Renders the lessons page timeline

Current Commands

pwd, ls, cd, mkdir, touch, echo, cat, rm, cp, mv, clear, help, history

With flags for most commands, redirection (>, >>, <, 2>), Tab autocomplete, arrow-key history, !! and !n expansion, and per-command help.

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 window inside main.html (lecture, practice, success phases)
• Make the window draggable and minimizable with an Escape key toggle
• Build the Final Mission with game-style objectives
• Add remaining commands (grep, head, tail, chmod, chown)

Try It

Live Demo

Teach Terminal

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

Today

Today I added redirection to the terminal. Commands can now read from files and write to them instead of only printing to the screen.

The terminal now supports:

• > - write output to a file (overwrites)
• >> - append output to a file
• < - read input from a file
• 2> - redirect error output to a file

I also connected < to cat so it can read from a file through stdin.

To make this work, I had to refactor how commands run. The old processCommand returned output directly. I renamed it to executeCommand and wrote a new processCommand wrapper above it that parses redirection operators before the command runs, then decides where the output goes.

The refactor was harder than expected. I hit several bugs - a typo in stderrMatch, a missing $ anchor in a regex, and a duplicate if block that used the wrong variable. I also had to fix catResults and lineNumber which I deleted during the refactor without realizing.

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, owners, groups, sizes, and modification times
• terminal.js - Terminal input handling, prompt display, line management, colored output
• commands.js - Command recognition and execution

Current Commands

pwd, ls, cd, mkdir, touch, echo, cat, rm, cp, mv, clear, help

With flags for most commands, redirection (>, >>, <, 2>), and per-command help.

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

• Command history (up/down arrow keys)
• Tab autocomplete
• history command, !!, !n
• Add grep, head, tail
• Add chmod, chown
• Wildcards, brace expansion, &&, ||
• Build the lesson system (lectures + practice missions)

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 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.