Web Projects

27 hand-built web projects — each with its own design identity.

Games, tools, UI clones, and full websites, written from scratch in HTML, CSS & vanilla JavaScript. No frameworks. No bundlers. No two projects that look alike.

Browse the live gallery →

---

The idea

Most project collections share one template and one color scheme. This one doesn't. Every project here was designed as its own small product, with a deliberate visual direction — a Braun-inspired calculator, a Nokia-LCD snake, a detective-noir privacy page, a banker's-ledger budget book. The code stays simple; the design does the talking.

---

🎮 Games

Project	Design identity	Highlights
Dino Game	Pixel desert sunset, handheld-console shell	Canvas engine, power-ups, combo system, day/night
Snake Game	Nokia 3310 olive LCD in a candybar phone	Canvas, special food, levels, touch D-pad
Tic Tac Toe	Schoolyard chalkboard in a wooden frame	Minimax AI (3 difficulties), confetti, sound
Animated Car	"Neon Drive" synthwave highway	Pure-SVG car, gears & turbo, rain & night modes
Arcade Hub	CRT arcade cabinet with scanlines	8 mini-games: Wordle, 2048, Simon, Memory & more

🛠️ Tools & Apps

Project	Design identity	Highlights
Budget Tracker	Banker's ledger	Charts, budgets, insights, CSV export
Movie Finder	Cinema noir picture palace	TMDB API, watchlist, favorites, surprise-me
Album Player	Warm analog listening room	Custom audio engine, album studio, per-album accents
Weather App	"Skydeck" avionics instrument panel	Live weather, hourly tape, 5-day forecast
Xchange	FX trading terminal	160+ currencies, live rates, quote board
Password Manager	Bank vault	Generator, strength audit, local-only storage
To Do List	Stationery legal pad + clipboard	Priorities, categories, drag & drop, undo
De Calc	Dieter Rams / Braun hardware	Scientific mode, memory keys, history
Email Validator	"The Sorting Office" postal desk	Typo fixes, disposable detection, batch CSV
Analog Clock	"Meridian" luxury horology	SVG watchface, timezones, five dial finishes

🎭 UI Clones & Templates

Project	Description	Stack
Netflix Clone	Landing page — hero, feature rows, FAQ, title modal	HTML · CSS · JS
Spotify Clone	Web player — sidebar, playlists, functional audio	HTML · CSS · JS
Myntra Clone	Fashion e-commerce storefront	HTML · CSS · JS
X / Twitter Clone	Feed UI in the dark theme	HTML · Tailwind
Windows 11 UI Clone	Desktop with taskbar, start menu & apps	HTML · CSS · JS
Bootstrap Website	Tech-news zine on Bootstrap 5, restyled as an acid dev-zine	Bootstrap 5
Cheatsheet Template	Amber-phosphor manpage terminal, 6 languages	Prism.js
Incognito Mode	"Off the Record" — private browsing as detective noir	HTML · CSS · JS

🌐 Websites

Project	Design identity	Highlights
Portfolio	Editorial ink & ivory studio	Typing hero, numbered sections, project index
Blog Website	Broadsheet newspaper	5 pages, search, dark "evening edition"
Landing Page	Brutalist gym poster	AI workout planner, BMI gauge, countdown
Foodies	Warm artisan eatery	Menu cards with price leaders, map, contact

---

Tech at a glance

• Structure — semantic HTML5, inline SVG icons & artwork, data-URI favicons
• Styling — modern CSS: custom properties, grid/flexbox, animations, mask, clip-path
• Logic — vanilla ES6+: Canvas, Web Audio, IntersectionObserver, localStorage, drag & drop
• APIs — TMDB (movies), OpenWeatherMap (weather), open.er-api.com (currency)
• Libraries — used sparingly, only where they earn their place: Chart.js, Prism.js, Bootstrap 5, Tailwind

---

Run locally

Everything is static — no build step.

git clone https://github.com/Abudora-0/web-projects.git
cd web-projects
npx serve .        # then open http://localhost:3000

You can also open any project's index.html directly, but a local server is recommended (a few projects fetch() local files, which browsers block on file://).

API projects (Weather App, Movie Finder, Xchange) need an internet connection and may need a valid API key in their script.js.

🎵 Adding songs locally (Spotify Clone & Album Player)

MP3 files are excluded from the repo (too large for GitHub), so the audio projects show empty libraries on GitHub Pages. Locally:

1. Drop your .mp3 files into the matching artist folders:

   Spotify Clone/songs/
   ├── billie/    ├── drake/    ├── dua/    ├── eminem/
   ├── kenny/     ├── taylor/   └── weeknd/
   

2. Each folder ships with info.json metadata and a cover.svg placeholder — add a cover.jpg for full album art.

3. Serve with npx serve . and open http://localhost:3000/Spotify%20Clone/.

4. The Album Player picks the songs up automatically via relative paths.

📁 Repository structure

web-projects/
├── index.html                        ← the live project gallery
├── README.md
├── LICENSE
├── Album Player/        ├── Landing Page/
├── Analog Clock/        ├── Movie Recommendation App/
├── Animated Car/        ├── Myntra Clone/
├── Arcade Hub/          ├── Netflix Clone/
├── Blog Website/        ├── Password Manager/
├── BootStrap Website/   ├── Personal Budget Expense Tracker/
├── CheatSheet Template/ ├── Portfolio/
├── De Calc/             ├── Snake Game/
├── Dino Game/           ├── Spotify Clone/
├── Email Validator/     ├── Tic Tac Toe/
├── Foodies/             ├── To Do List/
├── Incognito Mode/      ├── WIndow 11 UI Clone/
├── Wheather App/        ├── X & Twitter Clone/
└── Xchange/

Every project folder is self-contained: index.html + style.css + script.js.

---

License

Released under the MIT License — use anything here freely, with attribution.

Brand-clone projects (Netflix, Spotify, Myntra, X, Windows 11) are educational UI studies; the names, logos, and imagery they imitate belong to their respective owners.

---

Abdullah Akbar · github.com/Abudora-0 · Live gallery

Built with HTML, CSS & JavaScript — and a different idea every time.