TypeCraft
Build real visual components block-by-block. Type HTML, style it with CSS, and bring it to life with JavaScript. Your typing physically builds the result!
CSS Flower
beginnerBuild a beautiful animated flower using only HTML and CSS — with rotating petals, a glowing center, a green leaf, and a soft sky background.
Neon Toggle
beginnerCreate a glowing neon on/off switch with smooth CSS transitions, a dark theme, and clean class-based JS toggling.
Traffic Light
beginnerBuild an interactive traffic light that cycles through red, yellow, and green with glowing effects.
Digital Clock
intermediateBuild a glowing real-time table clock with labeled digit segments, a blinking separator, AM/PM, and live date — powered by JavaScript's Date API.
Gradient Generator
intermediateBuild an interactive gradient generator with two colour pickers and an angle slider — updates the live preview and outputs the real CSS instantly.
Orbit Loader
intermediateBuild a mesmerising multi-ring orbit loader with glowing cyan, purple, and green rings spinning at different speeds — pure CSS animation magic.
Glassmorphism Card
advancedCraft a stunning frosted-glass profile card with layered blur effects, gradient blobs, and a smooth hover lift — pure HTML and CSS.
Mini Calculator
advancedBuild a fully functional calculator with a dark UI, expression history, and live evaluation — powered by pure HTML, CSS, and JavaScript.
Typing Speed Meter
advancedBuild a real-time typing speed meter that tracks WPM, accuracy, and elapsed time as you type — with a live progress bar and reset button.