I followed the tutorial some more to finally get the window to be draggable and closable! (Yes, I seriously spent 2 hours trying to figure it out, because I MISMATCHED NAMES AGAIN!! 🫩) Also I polished up the welcome window so it doesn’t look stupid

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

Okay, so I gave it a wallpaper (hey this looks familiar…), and I made the top bar from the tutorial, but in TRANSLUCENT RED!!! I broke my brain trying to get the time to work, and then I found out it was stupidly simple and I plugged in the variables wrong (I thought I was supposed to put another script tag where the time and date is printed 😭)

Added a font and turned the page into a little window!

Spent a bit of time making a little favicon on Figma, sadly my time wasnt logged ;-;

Getting started! This is the base of the WebOS, the 1 hour is probably fake