Not long ago, from 2017/8 to 2018/8, I spent a full year making my second online course on Hahow. This wasn't just an online course — it was pushing everything I imagined an online course could be to the max, and beyond, doing something nobody had tried before. I also wanted it to completely surpass my first course, Introduction to Animated Interactive Web Programming (動態互動網頁程式入門), in both depth and breadth.

And this course, Introduction to Animated Interactive Web Effects (動態互動網頁特效入門), was itself a journey of finding myself — digging into what exactly gave rise to my fascination with interactive web and code. So before I get into how the course was made, I want to start with its subject matter — math, and education.

The Nature of Math and What Education Could Be

For thousands of years, mathematicians and scientists have spent most of their lives staring at the stars and the moon, working out universal gravitation and the trajectories governing everything in motion, drawing triangles and squares in the sand, deriving the Pythagorean theorem, and discovering that the world actually contains numbers that can't be expressed as fractions.

The real beauty of math and science lies in being able to predict the future with a single equation, escaping irrational judgment and control. Through more than two thousand years of humanity endlessly wondering what on earth this world even is, we finally found order within this thoroughly chaotic world — order that lets us predict how the moon will change tonight, that taught us how to build logical operations out of electricity and turn that into computers, and that has further ignited human potential, vigorously driving the emergence of all kinds of art and interactive technology.

That sounds beautiful, but from childhood on, most of us have hated math, sometimes wondering what on earth we're even learning all this stuff and doing these problems for.

Taiwan's education system has turned math, in many people's hearts, into a nightmare from their student years — just mentioning it triggers an instinctive aversion, let alone actively engaging with it. So how many people, quiz after quiz, felt their pen-holding hand tense up, until the sense of falling behind became the last straw, and they gave up on math altogether — left only to console themselves by saying: I really can't do this, I guess I'm just… bad at this for life!

Later in life, at some point in our careers, we notice that making games involves huge amounts of algorithms and math. Later, whether we go into business, medicine, or design, we discover that beyond just addition, subtraction, multiplication, and division for making change or running a business, a lot of creative work can also stand out through math and algorithms.

So is it really that we lack this potential, or simply that nobody ever showed us these things from an angle interesting enough to see them?

In Taiwan's education environment, exam-oriented thinking is extremely dominant — we judge a child's learning by their score, and teachers cram accordingly to raise those scores. In my memory, very few teachers, during regular class, would say:

你看！比例真的很美，在建築、設計的歷史中像是黃金比例、出版頁的隔線系統設計，都有用到，也有他的歷史故事在。

Look! Proportion really is beautiful — throughout the history of architecture and design, things like the golden ratio and the grid systems used in publication layout all draw on it, and each one has its own history behind it.

Not just teaching math in isolation, but explaining a subject by weaving in history, the humanities, and psychology.

Maybe when teaching free fall, you take everyone outside to throw balls of different weights and run the experiment, trying to trace out those endlessly varied trajectories, letting us see with our own eyes that motion which seems this complex can simply be described using acceleration and velocity along two directions — igniting the curiosity we were all born with. It's not that we lack the potential, it's that we never got to see it — maybe while we're at it, we could also learn about Galileo dropping two stones from the Leaning Tower of Pisa to confirm that falling speed isn't determined by air resistance.

What we care about, most of the time, is just whether this will be on the test, and whether we'll score high.

What you often hear is: lose three points on a test, get ten smacks. Every class ends with another quiz sheet handed out, one after another. Grades written in the school contact book become the topic parents compare with each other — if you don't study hard now, you won't find a good job when you grow up, you won't get to live a good life. But too much external motivation can destroy internal motivation, making us lose the sense of accomplishment in doing these things, no longer happy simply because we enjoy doing it. Learning is no different.

When it comes to education, I hold a far more romantic vision.

Unrealistic as it may be, I still wish the teacher's role could be a bright lamp, guiding you through the chaotic fog to see the world as it truly is — rather than just holding a textbook and stuffing this fact and that formula into you, then handing out a test and looking only at the score.

My First Attempt — Live Teaching on YouTube

In April 2017, I tried running a livestream called "Boss, Give Me Some Coding" (老闆，來點寇汀吧！), coding live using polished examples I'd designed myself, and it drew in a crowd of engineers and designers who loved technology and visual design. It was well received, but after several livestreams I started to feel the strain. Each time, explaining the basics took too long, and once we got to using trigonometric functions for effects later on, the comment section would erupt in a chorus of groans every time.

數學好難，還是放棄來去做視覺吧，我們可能就是沒這天份。

Math is so hard, let's just give up and go do visuals instead, maybe we just don't have the talent for this.

Hearing that made me genuinely angry, lol — how could you give up before you'd even tried? So before leaving the country, I spent a full year making 動態互動網頁特效入門, a course spanning basic web development, an intro to JS, Canvas and effects animation, all the way to advanced Vue applications — more than 60 polished examples and over 400 slides, greedily distilling everything I'd learned into refined teaching material. It hit over 600% of its funding goal in under ten hours, and to this day has close to 2,300 students.

The Struggle and Birth of 動態互動網頁特效入門

The original idea for this course came from building a Canvas-based animated clock during a livestream, which touched on the Pythagorean theorem and some trigonometric applications. I was genuinely afraid everyone would be totally lost at the time. Luckily the math involved wasn't too hard, so I managed to write the example smoothly, and made it plain enough for everyone to understand. There's actually something pretty satisfying about torturing people with lessons, lol.

From then on, the motivation grew stronger and stronger, extending into the theme of my second course, 動態互動網頁特效入門. I also noticed a pattern — a lot of front-end engineers or designers, when writing animation or effects, just use off-the-shelf libraries or code. I wanted to show people how to understand the underlying principles from the ground up, how to apply clever concepts or algorithms yourself.

Using fun examples — from code, from math, from design — bringing everything together to lead you into the dazzling world of effects on the web, seeing the purpose of learning through solving real problems or through real creation.

Building out experience across all kinds of interactive web development from a fully introductory angle, narrating how I usually think through problems, how I understand the way code actually works. Not just being able to write web syntax, but truly using these tools, step by step, to produce dazzling, sufficiently professional work with your own two hands.

So I started thinking from how to make effects animation in the first place — first using code to draw a few simple shapes, and then, as the coordinates started getting complicated, learning how to use vectors to manipulate things. Next, to make things interactive you need to introduce the concept of objects, giving every element on screen its own properties, and finally, some more advanced math — trigonometric functions, polar coordinates, and so on.

I put every concept I wanted to teach onto Trello one by one, and suddenly felt like I was basically teaching high school math, lol. I really wanted people to see a tangible result the moment they finished learning each concept, so I designed a polished example for every single one — precisely so that as soon as you finished learning it, you'd feel something, and fall even more in love with these abstract yet beautiful tools.

The Series Kicks Off With "HTML/CSS Quick Start"

Since it's still web development after all, I still needed to clearly cover the basic elements, syntax, and fundamental HTML/CSS along with pug/sass. But since a lot of people were returning students, I redesigned every single example from scratch and added even more beautiful demos to give everyone a refined introduction.

The course content covers flex, using preprocessor language modules, entirely redesigned examples that get you comfortable with the basic syntax of the web, all the way to using sass/pug to build a beautiful interface, training you to the point where you can write really beautiful dynamic effects with pure CSS alone. My favorite piece — one that took me forever to build — is a time box that switches between a dynamic meteor shower and daytime, built entirely out of HTML and CSS.

Next, Programming Fundamentals: "JavaScript, Beginner to Advanced"

The logic of a programming language matters enormously — if you've ever learned any language, you'll know there are actually a lot of fundamental concepts to master. From variables, strings, and loops, to simple conditional logic, array operations, and then bringing in time-based control to build animation. I believe the fundamentals of programming matter because they're about knowing what problem we want to solve, then describing that logic in a logical language for the computer to execute. So it's not just about understanding the syntax, but understanding why the concept exists in the first place, and where it can be used.

I explain setTimeout and setInterval to make a cute loading animation. After teaching string manipulation and animation, there's a project that's a Morse code translator — besides letting everyone strike while the iron's hot and practice manipulating strings and animation, it also lets them fully practice using functions, modularizing code so it can be reused.

I use more than ten fun examples to lay the JS fundamentals, later moving into object-oriented concepts — from writing spaghetti code to being able to independently build fun little applications. Once code starts getting layered in, you gain a lot more tools for building interactivity, and the final project combines piano sound effects to build a memory game, teaching game controls and flow design.

The final example — a memory-tile game, paired with some fun sound effect applications.

And Then We Get to the Main Event — Canvas and Effects Animation!

From math coordinates, physics simulation, trigonometric functions, to sound design — letting you combine math and code to create interactive art and all kinds of games (agar.io / Pac-Man / a sci-fi stopwatch… and more), with 10 examples and 6 major projects. This is the very heart of the course, lol.

After building the first unit's drawing exercises, I added tools for using offsets and adjusting the coordinate system, smuggling nine examples into a single one, letting everyone quickly practice advanced drawing and state-saving. Using the concept of a stack to save the canvas's transformation state at any given moment lets you draw extremely complex shapes.

Once you know how to draw, we come to understand that the canvas itself has no concept of state-saving or objects, so we start using ES6 class syntax to build a ball object, adding mouse control and coordinate detection so we can interact with the ball, and learning physics concepts — packing position, velocity, and acceleration into the ball's state.

After this, for more complex coordinates and numerical calculations, we introduce the concepts of vectors and trigonometric functions, letting us understand, more easily and intuitively, object rotation, polar coordinates, and the process by which these shapes get drawn in the computer's world. If you extend the ball example from before just a little, mass-generating objects turns it into a beautiful particle system.

Next, using the concept of trigonometric functions, you can draw a really beautiful clock, giving it that sci-fi FUI feel.

By this point, roughly all the fundamental concepts have been taught, and what matters most now is application. How do you combine different techniques to build fun, interactive examples?

Straight into practice — lots of complete examples built entirely from scratch.

So what comes next is directly building a large application example — say, a game or an interactive art piece I personally like — analyzing the effect I want to achieve, and then breaking down step by step the principles involved, building it up from scratch.

If you combine drawing with the concept of recursion to make generative art, learn to use probability to grow branches, and add a bit of computer-graphics turtle drawing, you can draw a beautiful tree.

After learning to play with static manipulation, if you use TweenMax combined with easing functions, you can manipulate values to create beautiful animation. So besides directly manipulating HTML elements, you can also use it on JS objects to produce continuous, smooth values, applying animation principles to make the screen feel vivid and alive.

After learning TweenMax animation, if you use vector models, you can build attraction, repulsion, and collision detection, and then, combining that with object-oriented programming — inheriting from a game object down to each individual player — you can build something that's almost a fully functional agar.io. Add just a little extra logic and you can give the other balls AI too. I ended up playing my own finished example for a really long time, lol.

Next, combining physics concepts, we make a game about a kid going down the stairs. The stairs come in different types with different physical properties, and after adding game control logic, using the concept of inheritance to build game objects that extend into different types of steps, this nostalgic little game is born right in your hands.

Among the several big projects later on, my personal favorite was making a classic Pac-Man — from map design, object generation, wall rendering, to how to control Pac-Man's and the ghosts' animation, finally adding collision detection, the ghosts' food-eating mechanics, and AI that chases the player. It's a two-hour example, but it took me nearly two weeks to finish.

Okay, I know, that's really a lot — so making this course really did break me down, and every time I'd complain to myself about why I ever opened up so many units in the first place… But since I promised everyone, I had to see this thing through completely. Not just to be responsible to myself, but to genuinely burn through my own life force to let everyone see the world I believe in.

The Final Series Is Front-End Data Frameworks — Vue.js

Because modern front-end frameworks really matter, this final part starts by understanding why we need data synchronization and front-end frameworks, taking you through application scenarios — train tickets, a product listing, a movie selector, a card game — as your introduction, so you master how to apply Vue.js to interactive web pages. I also deliberately designed interactive examples that go beyond a simple to-do list, examples you can actually use to build polished interactive games or interfaces for real-world applications.

This series' project is building a movie-selection interface, combining Vue.js to first render data into elements on the page, then breaking down event triggering in Vue.js, plus using TweenMax to tune the triggering and feedback of the user's actions inside it. Within it, you practice adjusting the interface with CSS, FlexBox, Vue's rendering and computed properties, methods, building asynchronous animation states… and more. This one, too, took a very long time to plan out — how to make sure every detail I'd taught got practiced.

Bonus Units

In the final bonus units, I introduce TimelineMax / D3 / Three.js — almost any one of these could be taught as its own standalone course. Each one uses a straight 60 minutes to walk everyone through the library's features and how to use it — for instance, using TimelineMax plus mouse events to build scroll-triggered animation, or using Three.js to build a cool spinning-atom visual.

That's Roughly It for the Course Content Overview

More than half the examples aren't even mentioned here, but every single one cost me several sleepless nights and turned a few more hairs gray before it was born. So many failed drafts, so many examples I felt weren't good enough, got chiseled over and over — all so that, in the end, everything served up and presented in front of everyone would look sufficiently perfect.

Combining physics, animation, sound, art, text, technical knowledge, and old-school games, to open up your imagination of interactive web development as far as it can go.

Depth, Breadth, and Example Complexity — If You Try to Max Out All Three at Once…

I originally thought the hardest part of this course would be designing the examples, but as I worked through preparing the slides, I found that explaining these math and coding concepts clearly and plainly enough is genuinely hard! Not only did I need to lead into the topic starting from fun, everyday examples, I also needed diagrams and animations to help make things instantly clear — and above all, I had to re-digest things I thought I already knew inside and out.

The Difficulties of the Recording Process

All along, I wanted every example to be built from zero through a complete line of reasoning. So when recording the course, I always spent a huge amount of time endlessly smoothing out the content, re-recording again and again, and constantly revising the slides. Even so, I never quite managed to control the timing properly, and preparing the course would often take far, far longer than I expected.

Because my own standards kept rising, I got even more perfectionist about the recording, my delivery, and post-production, wanting to explain concepts more clearly, and prepared hundreds of slides and diagrams. At the same time the code kept getting harder and more complex, and the difficulty of explaining it rose sharply, since nobody had ever offered a course like this — I had to slowly condense and refine an entire course outline out of nothing.

For me, because the difficulty of making this course rose so much, the timing of every unit was extremely hard to control — often, wanting to design one great example would eat up a week or two just like that. On top of that, I still had to digest the concepts, explain them, walk through the coding exercises, and refactor several times over — so units actually took a very long time to go live, and I'm deeply grateful for every student's patient understanding.

I also want to give special thanks to Shih-Han (詩涵) at Hahow, who reviewed my course — she watched all 3,000 minutes of it in full (genuinely impressive), gave me suggestions for revisions and adjustments, helped me plan out the overall course schedule properly, and handled a lot of external customer-service issues along the way. Even knowing this course's timeline had slipped so much, she stuck with it patiently and carefully all the way through.

Those Moments on the Verge of Giving Up

March 2018 was the darkest period — the course's release schedule had fallen behind, and I kept getting chased for it. Every time I was recording and saw the sky slowly brightening, I'd feel completely broken down; just thinking about having to talk through three straight hours of examples made me anxious, having to stretch my nerves to the absolute limit, and re-implement the entire program smoothly, coherently, and digestibly, all over again.

It was almost always recording from the middle of the night into the morning, and then still having to go to work and rush other projects — genuinely soul-crushing.

I kept thinking, why do I insist on making everything this polished? But looking back now, it's like seeing a deep, solid trail of footprints cut straight through an endless snowfield — only by surviving that kind of winter could I leave behind a course that feels sufficiently perfect in my own heart, and welcome in a spring where a hundred flowers bloom.

Over this year, I kept taking in new fields while simultaneously planning out a complete, thorough introduction. For instance, when I learned about synthesizers and the fundamentals of sound in music, I applied that directly into examples; or when I saw some genuinely cool game, I'd think about how to interpret it through my own technique and ideas. I really hoped to leave a milestone here, presenting the whole thread of exploring the integration of math and code up to this point — the roughly ten-year path of learning through developing software, games, and the web.

Lighting one streetlamp after another along this rough road, so it's never pitch black again.

A Journey With No Destination

For a lot of people, this course is like a journey with no destination. For me, it's a huge milestone — pouring in everything I'd built up, from when I first started coding, through opening my own studio, all the way to now, and putting together a complete summary in the hope of helping anyone who wants to explore this path. It's also, in a way, me telling myself: bring this chapter to a close, stop circling around what you already know, and set out again to explore the unknown world.

寫網頁真的只有如此嗎？ 我們是否因為工作而忘記了創作的初衷？ 學會數學或技術到底該怎麼用在日常生活中？ 創作到底還能以什麼形式、什麼體驗展現呢？

Is this really all there is to building websites? Have we forgotten why we started creating, because of work? Once you've learned math or a technical skill, how do you actually use it in daily life? What other forms, what other experiences, can creation still be expressed through?

Through this course, I wanted these questions to fully prove out everything I believe in — and I also set down the baggage I'd carried up to that point, heading to New York to pursue a master's degree, in search of more, different answers to these imaginings.

In August 2018, I headed to NYU to study for a master's in Integrated Digital Media (IDM), wanting to explore even more interesting interactive design.

I hope that whenever you come back to it, this course can be a solid foundation at your back. It doesn't just teach code — it builds up real internal strength in math, architecture design, and effects, so whether you've just set out on the road of programming, are stumbling along partway through it, or are already a battle-hardened engineer, you can gain something here.

One day, if someone tells me: hey, I watched your course, thank you for leaving this trail behind — then all the effort will have been worth it.

Come Join This Journey Toward the Unknown

動態互動網頁特效入門 goes from HTML/CSS all the way to object-oriented programming, and into an integrated application of math, music, and games. It covers a complete introduction to JavaScript, ES6 object-orientation, and eventually understanding the principles well enough to build your own game engine — examples ranging from a memory game, to Pac-Man, to generative art, to agar.io.

Running 3,085 minutes long, with more than 60 polished examples and over 400 slides, plus four bonus units on vue-cli, GSAP, D3, and Three.js — it became the longest course on Hahow.

Course link: https://hahow.in/cr/monoame-webdesign2