🎮 Building a Browser Visual Novel

A Creative Dev Journey with HTML, CSS & JavaScript

🚀 The Original Prompt

My prompt:
please create a simple website using html, css and javascript that looks like visual novel with a regular conversation involving 2 16 year olds

From this single sentence, we began building a mini browser-based visual novel engine. Click here for code

Initial Features:
Full-screen background
Two characters (left and right)
Dialogue box at the bottom
Click to progress
Active speaker highlighting

Project structure:

index.html
style.css
script.js

Other options: nil

🎭 Upgrade 1: Real Character Portraits

We replaced placeholder blocks with real character images. Click here for code

Concepts introduced:
Using <img> for sprites
Absolute positioning
Opacity for speaker focus
Organising assets in an /images folder

This step introduced asset management — a core game development skill.

✨ Upgrade 2: Typewriter Text Effect

We enhanced immersion by adding animated dialogue text. Click here for code

Logic added:
Track whether text is currently typing
If typing → finish instantly on click
If finished → load next line
Use setTimeout for animation timing

This transformed a static webpage into a state-driven interactive system.

📱 Upgrade 3: Mobile Responsiveness

We made the visual novel fully usable on phones and tablets. Click here for code

Key concepts:
Meta viewport tag
Responsive units (vh, vw)
clamp() for fluid typography
Media queries
Debugging layout scaling issues

We even fixed a portrait shrinking issue caused by responsive width constraints — a real-world CSS debugging moment.

🔄 Systems Thinking: Flowcharting the Experience

We stepped back and mapped the logic of the experience.

User Opens Page

→ Load Dialogue

→ Is Text Typing?

→ Branch Logic

→ Loop Until End

This shifted us from “making something work” to “understanding how it works.”

📊 Professional Documentation with Mermaid.js

We converted the system into a proper flowchart using Mermaid.js. Click here for code

New concepts introduced:
Using a CDN to load libraries
Initialising Mermaid with configuration
Theme switching (dark mode)
Separating UI from logic

The project evolved from a simple web page into a documented interactive engine.

🧠 What This Project Actually Teaches

Front-End Development
HTML structure
CSS layout and responsiveness
JavaScript state management

Game Development Concepts
Dialogue systems
Input handling
Animation timing
Character state feedback

Software Engineering Skills
File organisation
Refactoring
Debugging
System documentation

🌱 Where It Could Go Next

Branching dialogue choices
Save / load system
Character expressions
Background transitions
Sound design
Teaching template version
Portfolio case study integration

🏁 Final Reflection

This journey shows how a simple creative prompt can evolve into:

An interactive system →  
A responsive experience →  
A documented architecture →  
An educational case study

That’s how real projects grow.