Projects

Interaction Design & Anthropomorphic Programming.

Basic

Static coding.

HTML/CSS/JS

Project 1: Counter

A simple counter UI to practice layout, buttons, and basic styling.

Open ▶

Opens in new tab

HTML/CSS/JS

Project 2: Animation Line

A dynamic animation line.

Open ▶

Opens in new tab

HTML/CSS/JS

Project 3: ChatGPT Homepage

A ChatGPT simulation homepage.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 4: Clock Screen

A Clock screen.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 5: Checkbox

A simple example of a checkbox.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS Starter

Project 6: Checkbox

A simple example of a checkbox.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 7: Calculator

A simple calculator.

Responsive UI

Open ▶

Opens in new tab

CSS

Project 8: Dancer

An animation of dancer based on CSS.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 9: Exam

A simple exampe of exam.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 10: Exam

A simple exampe of exam.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 11: Google Homepage

A simple of Google homepage.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 12: Homepage

A personal homepage.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 13: Jump Path

A simple example of jump path.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 14: Progress 1

A simple example of progress bar.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 15: Progress 2

A simple example of progress bar.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS

Project 16: Spin Wheel

A simple example of spin wheel.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 17: ToDo List

A simple UI project of ToDo list.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Sound

Project 18: Abacus

An example of abacus.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 19: Animator

A simple example of web design.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 20: Animator Extension

An extended example of web design for Animator.

Responsive UI

Open ▶

Opens in new tab

Advanced

Interactive coding.

HTML/CSS/JS Interaction

Project 21: Bottle

A web design project of bottle.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Generation

Project 22: Business Card

A simple web business card.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Sound

Project 23: A Speaking Calculator

A simple of speaking calculator.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS Sound

Project 24: A Dancer with Sound

A simple web exmaple of a dancer with sound.

Responsive UI Basics

Open ▶

Opens in new tab

HTML/CSS/JS

Project 25: Certificate Generation

A simple project for generationg a certificate.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Interaction

Project 26: Fan

A web fan.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 27: Fishes

A simple web UI project of fishes.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Interaction

Project 28: iPad OS

A simple web simulation of iPad OS.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 29: Liquid Glass Login

A web project of liquid glass login interface.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS

Project 30: Open Door

A web project of open a door.

Responsive UI Basics

Open ▶

Opens in new tab

HTML/CSS/JS Interaction

Project 31: Qrcode with timer

A Qrcode with real time.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Interaction

Project 32: Spin Whee

A extended example of spin wheel.

Responsive UI

Open ▶

Opens in new tab

Games in a browser

Browser games to practice logic, state, and interaction design.

HTML/CSS/JS Game

Project 33: Breakout

A simple web breakout game.

Responsive UI

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 34: Car Racing

A web project of car racing.

UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 35: Dinosaur

A web game of dinosaur.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 36: Fighting

A web fighting game.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 37: Flappy Bird

A simple counter UI to practice layout, buttons, and basic styling.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 38: Lanterns

A simple web simulation of lanterns.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 39: Maze

A web game of maze.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 40: Meet Bot

A web game of meeting bot.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 41: Memory Card

A web game of memory card.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 42: Snake Application

A teaching application of game snake.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 43: StarCraft

A web version of game StarCraft.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 44: Thunder Fighter

A web version of thunder fighter.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS Game

Project 45: Tic-Tac-Toe

A web version of Tic-Tac-Toe.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS

Project 46: A Simulation of Mobile App

A web simulation of a mobile application.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS

Project 47: Camera Stream

A simple real-time web translation tool.

Responsive UI Interaction

Open ▶

Opens in new tab

AIs in a browser

JavaScript-based AI demos.

HTML/CSS/JS AI

Project 48: Ball Hand Controller

A project of using hands to control a ball.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 49: Control a Basketball in Air

A project of using hands to control a basketball.

Responsive UI Interaction

Open ▶

Opens in new tab

Project 50: Finger Calculator

Using two hands to do calculation.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 51: Finger Car

Using a finger to control a car racing game.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 52: FoggyMirror

A web project of simulating foggy mirror.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 53: PacMan

A web game of PacMan.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 54: PlayerInAir

Playing mp4 video in air.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 55: Extened PlayerInAir

An extened version of playing mp4 video in air.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 56: PlayWithIcon

Playing an image in air.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 57: Snakeface

Playing the game snake with face.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 58: Tic-Tac-Toe with AI

A simple web project of Tic-Tac-Toe with AI.

Responsive UI Interaction

Open ▶

Opens in new tab

HTML/CSS/JS AI

Project 59: Tic-Tac-Toe in Air

A web project of playing Tic-Tac-Toe in Air.

Responsive UI Interaction

Open ▶

Opens in new tab