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

Devlog 4

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the final development session. The app is fully deployed and working end-to-end: user opens the GitHub Pages link, types any goal, gets back a structured AI-generated plan as task cards, checks off tasks, and the whole state persists in the browser. I finished the interaction layer (progress bar, statistics, localStorage persistence, clear plan) and polished the UI with animations, hover states, and an empty state. The project is now feature-complete.

Features Added/Worked on

• Progress bar with smooth width animation on checkbox click
• Task counter (3 / 8 tasks completed) and live percentage
• Total estimated time calculated from all tasks
• Priority statistics (High / Medium / Low counts)
• Save full plan + checkbox state to localStorage
• Automatic restore of plan and checked tasks on page reload
• Clear Plan button to wipe localStorage and return to empty state
• Empty state hint shown when no plan exists
• Card hover effect with subtle right shift
• Card fade-in animation on first render
• Fixed localStorage edge cases with try / catch
• Added data-task-id on cards for reliable state restoration

What new I learnt

• I learnt how localStorage works and why JSON.stringify / JSON.parse are required
• I learnt why localStorage access must be wrapped in try / catch (private mode, quota)
• I learnt how to restore UI state from storage on page load
• I learnt how CSS animations work with animation-delay for staggered effects
• I learnt that CSS specificity matters when the same class is styled twice
• I learnt how to design an empty state that guides the user
• I learnt how data-task-id attributes bridge DOM and app state
• I learnt to keep the app resilient: even if one part fails, the rest keeps working

Try It

Live Demo - fully working, backend on Render

Note: the first request may take up to 1 minute while the free Render instance wakes up. Subsequent requests are fast.

Devlog 4

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the final development session. The app is fully deployed and working end-to-end: user opens the GitHub Pages link, types any goal, gets back a structured AI-generated plan as task cards, checks off tasks, and the whole state persists in the browser. I finished the interaction layer (progress bar, statistics, localStorage persistence, clear plan) and polished the UI with animations, hover states, and an empty state. The project is now feature-complete.

Features Added/Worked on

• Progress bar with smooth width animation on checkbox click
• Task counter (3 / 8 tasks completed) and live percentage
• Total estimated time calculated from all tasks
• Priority statistics (High / Medium / Low counts)
• Save full plan + checkbox state to localStorage
• Automatic restore of plan and checked tasks on page reload
• Clear Plan button to wipe localStorage and return to empty state
• Empty state hint shown when no plan exists
• Card hover effect with subtle right shift
• Card fade-in animation on first render
• Fixed localStorage edge cases with try / catch
• Added data-task-id on cards for reliable state restoration

What new I learnt

• I learnt how localStorage works and why JSON.stringify / JSON.parse are required
• I learnt why localStorage access must be wrapped in try / catch (private mode, quota)
• I learnt how to restore UI state from storage on page load
• I learnt how CSS animations work with animation-delay for staggered effects
• I learnt that CSS specificity matters when the same class is styled twice
• I learnt how to design an empty state that guides the user
• I learnt how data-task-id attributes bridge DOM and app state
• I learnt to keep the app resilient: even if one part fails, the rest keeps working

Try It

Live Demo - fully working, backend on Render

Note: the first request may take up to 1 minute while the free Render instance wakes up. Subsequent requests are fast.

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

Devlog 3

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the 7th hour into the project, and the app is now fully deployed and working end-to-end in the browser. A user opens the GitHub Pages link, types any goal, and the frontend sends a request to a live backend on Render, which calls gpt-4o-mini and returns structured task cards rendered on the page. I have connected OpenAI with Structured Outputs, added validation, loading and error states, interactive checkboxes, and deployed the backend with CORS configured for GitHub Pages.

Features Added/Worked on

• Connected OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Created openai.js as an isolated module for the model call
• Added POST /api/generate with validation (non-empty string, max 500 chars)
• Added error mapping for 401, 429 and generic failures
• System prompt tuned to produce specific, actionable tasks with priorities, time estimates, and dependencies
• Rendered task cards with priority-colored left border, priority badge and estimated time
• Added interactive checkboxes with completed state (dimmed + strikethrough)
• Added live character counter for the textarea
• Added loading spinner and error box
• Deployed backend to Render (Free tier) with OPENAI_API_KEY as an environment variable
• Added CORS middleware allowing requests from GitHub Pages and localhost
• Configured frontend to switch API base URL between localhost and Render

What new I learnt

• I learnt how Structured Outputs work in the OpenAI API (strict schema, additionalProperties)
• I learnt why API keys must live in .env on the server and never in frontend code
• I learnt that fetch does not throw on HTTP 4xx/5xx - you have to check response.ok manually
• I learnt how try / catch / finally works for cleaning up UI state on errors
• I learnt BEM-style class naming for state variants (taskCard–done)
• I learnt building DOM with createElement + appendChild instead of innerHTML (safer, no XSS)
• I learnt how CORS works and why browsers block cross-origin requests by default
• I learnt how to deploy a Node.js backend to Render and connect it to a static frontend on GitHub Pages

Try It

Live Demo - fully working, backend on Render

• First Generate can be until 1 minute wait please until server will wake up ;)

Devlog 3

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the 7th hour into the project, and the app is now fully deployed and working end-to-end in the browser. A user opens the GitHub Pages link, types any goal, and the frontend sends a request to a live backend on Render, which calls gpt-4o-mini and returns structured task cards rendered on the page. I have connected OpenAI with Structured Outputs, added validation, loading and error states, interactive checkboxes, and deployed the backend with CORS configured for GitHub Pages.

Features Added/Worked on

• Connected OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Created openai.js as an isolated module for the model call
• Added POST /api/generate with validation (non-empty string, max 500 chars)
• Added error mapping for 401, 429 and generic failures
• System prompt tuned to produce specific, actionable tasks with priorities, time estimates, and dependencies
• Rendered task cards with priority-colored left border, priority badge and estimated time
• Added interactive checkboxes with completed state (dimmed + strikethrough)
• Added live character counter for the textarea
• Added loading spinner and error box
• Deployed backend to Render (Free tier) with OPENAI_API_KEY as an environment variable
• Added CORS middleware allowing requests from GitHub Pages and localhost
• Configured frontend to switch API base URL between localhost and Render

What new I learnt

• I learnt how Structured Outputs work in the OpenAI API (strict schema, additionalProperties)
• I learnt why API keys must live in .env on the server and never in frontend code
• I learnt that fetch does not throw on HTTP 4xx/5xx - you have to check response.ok manually
• I learnt how try / catch / finally works for cleaning up UI state on errors
• I learnt BEM-style class naming for state variants (taskCard–done)
• I learnt building DOM with createElement + appendChild instead of innerHTML (safer, no XSS)
• I learnt how CORS works and why browsers block cross-origin requests by default
• I learnt how to deploy a Node.js backend to Render and connect it to a static frontend on GitHub Pages

Try It

Live Demo - fully working, backend on Render

• First Generate can be until 1 minute wait please until server will wake up ;)

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

What works now

• Frontend UI: gradient header, glassmorphism goal card, textarea, “Generate Plan” button
• Live character counter (updates on every keystroke)
• Loading spinner while waiting for the backend
• Error box for empty input, auto-clears on retry
• Backend: Express server serving /docs and exposing GET /api/health
• POST /api/generate - validates the goal (non-empty, max 500 chars) and returns a hardcoded JSON plan with three tasks
• GitHub Pages previews the static UI

No AI yet - the endpoint exists so the data shape and client flow can be tested first.

What’s next

• Connect OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Replace the fake response in /api/generate with a real model call
• Replace the frontend placeholder with a real fetch() to the backend
• Render task cards: title, description, priority, time, dependencies
• Checkbox + progress bar + total time
• Priority statistics
• Save plan to localStorage
• Polish, mobile pass, deploy

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs (planned)
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

What works now

• Frontend UI: gradient header, glassmorphism goal card, textarea, “Generate Plan” button
• Live character counter (updates on every keystroke)
• Loading spinner while waiting for the backend
• Error box for empty input, auto-clears on retry
• Backend: Express server serving /docs and exposing GET /api/health
• POST /api/generate - validates the goal (non-empty, max 500 chars) and returns a hardcoded JSON plan with three tasks
• GitHub Pages previews the static UI

No AI yet - the endpoint exists so the data shape and client flow can be tested first.

What’s next

• Connect OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Replace the fake response in /api/generate with a real model call
• Replace the frontend placeholder with a real fetch() to the backend
• Render task cards: title, description, priority, time, dependencies
• Checkbox + progress bar + total time
• Priority statistics
• Save plan to localStorage
• Polish, mobile pass, deploy

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs (planned)
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress

• Project restructured into a single directory layout
• Frontend UI finished: gradient header, glassmorphism card with textarea, static character counter, “Generate Plan” button, hidden loading/error/dashboard sections
• server.js - Express server, serves /docs, exposes GET /api/health
• package.json - scripts start / dev, deps: express, dotenv, openai
• .env.example - template for PORT and OPENAI_API_KEY
• .gitignore - protects .env and node_modules/
• docs/style.css - dark theme, gradients, glass cards, responsive
• GitHub Pages previews the UI from docs/

No AI yet - that comes next.

Goal

Remove the “where do I start?” problem. A user types any goal - “build a portfolio website”, “prepare for a C++ exam”, “organize a birthday party” - and gets back a concrete, ordered list of tasks with priorities, time estimates, and dependencies.

The AI must not just rephrase the goal. It must decompose it into specific, actionable steps.

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress

• Project restructured into a single directory layout
• Frontend UI finished: gradient header, glassmorphism card with textarea, static character counter, “Generate Plan” button, hidden loading/error/dashboard sections
• server.js - Express server, serves /docs, exposes GET /api/health
• package.json - scripts start / dev, deps: express, dotenv, openai
• .env.example - template for PORT and OPENAI_API_KEY
• .gitignore - protects .env and node_modules/
• docs/style.css - dark theme, gradients, glass cards, responsive
• GitHub Pages previews the UI from docs/

No AI yet - that comes next.

Goal

Remove the “where do I start?” problem. A user types any goal - “build a portfolio website”, “prepare for a C++ exam”, “organize a birthday party” - and gets back a concrete, ordered list of tasks with priorities, time estimates, and dependencies.

The AI must not just rephrase the goal. It must decompose it into specific, actionable steps.

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

I built Task Planner - a personal productivity web application from scratch using DeepSeek AI as the sole developer.

---

How It Works

The app has three main pages:

• Global Tasks - Create reusable task templates with custom durations, reminders, and emoji icons. These act as blueprints for your daily planning.
• Today’s Planner - Schedule tasks from your templates. The app automatically assigns the earliest available time slot and prevents overlapping tasks. You can start tasks early, mark them complete, or they turn red if missed.
• Focus Timer - A dedicated timer page with a visual countdown circle, elapsed/remaining time display, and finish/stop controls. Only visible when a task is running.

---

Technical Details

• Built with Next.js 16, TypeScript, and Tailwind CSS v4
• All data stored locally using IndexedDB (Dexie.js) - no backend needed
• State management with Zustand, UI components from shadcn/ui
• Browser notifications for task reminders and overdue alerts
• Static export deployed to GitHub Pages

---

My Process

1. Specified the complete requirements to DeepSeek AI
2. AI generated the entire project structure, code, and configuration
3. Fixed Tailwind CSS v4 compatibility issues
4. Configured GitHub Pages deployment with proper base paths
5. Added .nojekyll to serve underscore-prefixed folders
6. Wrote documentation and README

The whole project took about 2 hours from idea to live deployment, with AI handling 100% of the code generation.

---

🔗 Live: arsen-gevorgyan.github.io/task-planner

Login screen - Type your username to startLoading animation

• Shows a progress barDesktop
• Has app icons you can clickSettings
• Change theme, background, clock settingsCalendar
• See the current month and navigateCalculator
• Basic math operationsTic Tac Toe
• Play with a friendTranslator
• Encrypt/decrypt messages with Caesar cipherDark/Light mode
• Switch themesClock
• Shows time with options

I’m working on 3 new apps for Galaxy OS

First app: Galaxy Explorer
Click any planet button to see its image appear in a black circle with a golden glow. Below the image, it shows the planet’s distance from the Sun, how many satellites it has, and a short description. All 8 planets are in a grid.

Second app: Alien Decoder
A random NASA space fact is encoded using Caesar cipher with a random key. You copy the encoded text and key, paste them into the Translator app to decode, then type the answer back in the Decoder to check if you got it right.

Third app: Space Quiz
5 random questions about planets and space. Each question has 4 answer choices. Correct answers turn green and wrong ones turn red with the right answer shown. At the end, you get a final score and a message based on how well you did.

Cat Game - Devlog #1: My First Step into Godot

This is my first devlog about my Cat Game project.

At the beginning, I looked through all the mission guide steps and quickly understood one thing:

Trying to make a game without knowing Godot and GDScript is not a good idea.

I have a little experience with Unity. I made some small mini-games with it before. But Godot is completely new for me, so I needed to start from the beginning.

Step #1 - Finding the Best Way to Learn

First, I searched YouTube for some Godot courses and lessons. But after watching some of them, I realized this was not the best way for me to learn.

I don’t want to learn random things and then try to make a game. I already have a game in my mind. I need to learn only the tools and knowledge I need for my own game.

I decided to use AI as my teacher and learn step by step while building.

First, I gave the mission guide to ChatGPT and asked it to help me create a master prompt. I asked ChatGPT to ask me questions first, so it could understand what I wanted. After answering, I got a prompt describing my game.

I used ChatGPT for this because it mastered on textes. I decided to use ChatGPT mainly for creating the prompt.

After that, I used the finished master prompt with DeepSeek in Expert Mode.

I use AI tools only on free plans, so I did not want to stop if I reached a limit. I also thought DeepSeek could be useful for working with a large prompt.

Starting the Game

After sending the master prompt, I started building.

My first step was learning:

• How to organize folders
• How to create scenes
• How to navigate around the editor

After that, I started making my main menu.

I wanted 3 buttons and a background image. Each button needed 3 styles:

• Normal
• Hover
• Clicked

I made the pixel art using LibreSprite. I created the background and buttons, then saved as .png files.

I added the images using Theme Overrides -> Styles.

At first, everything worked, but the hover effect was too simple.

So I decided to try animations.

Adding Animations

I explained my idea to the AI, and it helped me understand animations in Godot.

I created an entrance animation where the buttons appear when the scene starts. I also made hover animations for when the mouse moves over and leaves.

Then I wrote two scripts:

• One for entrance
• One for hover in and out

I had problems. The code was often correct. The real problem was that I did not fully understand how things worked.

I used:

mouse_entered.connect(_on_hover)
mouse_entered.connect(_on_unhover)

At first, I did not know about mouse_exited. After searching and asking questions, I found it and fixed my script.

Adding a Cat Paw Cursor

I wanted to add a custom cat paw cursor. I explained the idea to the AI, learned how to make it, and got it working.

You can see the result in the video below.

What I Want to Improve

The background needs more details, and the button colors do not look very good yet. Honestly, the current version is still a little ugly.

But I am not only making a game. I am also learning a completely new skill and learning how to use Godot. This process is already a very good experience for me.

I am still learning, but step by step, I am turning the game from my imagination into something real.

More updates soon!

Cat Game - Devlog #2: Start Menu Upgrade

After working on the start menu in my first devlog, I decided that it needed more work.

The old version was not looking very good, so I started improving it.

This time, I mainly focused on the visual style of the menu.

Step #1 - Improving the Background

First, I changed the background and made it a night time scene.

I added:

• A moon
• Clouds
• Stars

The old background was very simple, so I wanted to make the start menu feel more like a real game.

Improving the Title and Buttons

I also changed the style of the title text.

After that, I changed all 3 buttons:

• Start
• Settings
• Quit

I wanted the buttons to fit the new style of the background better.

I also improved the hover animation.

The old animation felt a little slow, so I made it faster and smoother.

Improving the Start Animation

I also changed the start animation.

Now, the background details appears from the upper part of the scene when the game starts.

This makes the menu feel more interesting than simply showing everything immediately.

What Is Next?

The start menu is looking much better now, but I still want to improve it more.

My next goal is to finish the custom cat paw cursor and start working on the first minigame.

I am planning to make the first minigame a platformer.

The start menu is not perfect yet, but it is slowly becoming closer to what I imagined.

More updates soon!

CatOS Devlog - User Profile & Loading System

What I Built Today

Today I built the user onboarding flow for my cat-themed web operating system. When someone opens CatOS for the first time, they create a fake profile by entering their name and their cat’s name. After submitting the form, they are greeted with a custom loading screen before the desktop appears.

Screens I Made

Welcome Screen

• Full-screen dark gradient background
• Circular cat profile image with an orange glow effect
• “Welcome to CatOS” title in orange
• Two input fields:
  • Your Name
  • Cat’s Name
• Orange “Enter CatOS” button with a hover animation
• Hidden error message displayed when either input is empty
• Frosted glass card created using backdrop-filter: blur()

Loading Screen

• Smaller version of the cat profile image
• Personalized welcome message using the entered names
• Animated progress bar that fills from 0% to 100%
• Eight loading messages that change as progress increases
• Three bouncing cat paw emojis with a wave animation
• Smooth transition to the desktop after loading finishes

How It Works

1. The user enters their name and their cat’s name.
2. They click the Enter CatOS button or press Enter.
3. The names are stored in global JavaScript variables so they can be accessed throughout the operating system.
4. The welcome screen is hidden and the loading screen is displayed.
5. A timer runs every 350ms, increasing the progress bar by a random value.
6. The loading status message changes depending on the current progress percentage.
7. Once the progress reaches 100%, the loading screen disappears and the CatOS desktop is displayed.

CatOS Devlog - User Profile & Loading System

What I Built Today

Today I built the user onboarding flow for my cat-themed web operating system. When someone opens CatOS for the first time, they create a fake profile by entering their name and their cat’s name. After submitting the form, they are greeted with a custom loading screen before the desktop appears.

Screens I Made

Welcome Screen

• Full-screen dark gradient background
• Circular cat profile image with an orange glow effect
• “Welcome to CatOS” title in orange
• Two input fields:
  • Your Name
  • Cat’s Name
• Orange “Enter CatOS” button with a hover animation
• Hidden error message displayed when either input is empty
• Frosted glass card created using backdrop-filter: blur()

Loading Screen

• Smaller version of the cat profile image
• Personalized welcome message using the entered names
• Animated progress bar that fills from 0% to 100%
• Eight loading messages that change as progress increases
• Three bouncing cat paw emojis with a wave animation
• Smooth transition to the desktop after loading finishes

How It Works

1. The user enters their name and their cat’s name.
2. They click the Enter CatOS button or press Enter.
3. The names are stored in global JavaScript variables so they can be accessed throughout the operating system.
4. The welcome screen is hidden and the loading screen is displayed.
5. A timer runs every 350ms, increasing the progress bar by a random value.
6. The loading status message changes depending on the current progress percentage.
7. Once the progress reaches 100%, the loading screen disappears and the CatOS desktop is displayed.