Handy Tools — the project that made us “real”

Six everyday utilities. Two brothers. One rule: ship it or it doesn’t count. This is the full story of how Muhammad Hassan Qureshi and I turned our DIT final project into a live product — through two failed hosting platforms, one terrifying 404, and the workflow that changed everything.

Live at handy-tools-ten.vercel.app HTML · CSS · JavaScript Deployed on Vercel DIT Final Project · 2025
https://handy-tools-ten.vercel.app/
Handy Tools homepage — clean interface introducing the tools collection

The Short Version

Everyday problems, zero friction

Handy Tools is a suite of six quick, simple utilities — the kind of things you google once a week and wade through ad-filled pages to use: length and mass converters, a temperature converter, a BMI calculator, a word counter, and a to-do list. No sign-ups. no clutter, no “download our app”. You arrive, you use the tool, you leave. As the site itself promises: “quick, simple, and useful utilities that make everyday tasks easier.”

It’s used by students, professionals, writers — anyone who needs a fast answer without a detour. And for my brother and me, it was the certificate no institute could issue: proof that we could take an idea from conversation to production, with real users on the other end.

The Full Story

How two brothers shipped their first product

The assignment that refused to stay small

Handy Tools began life as the final project of our second semester in the Diploma in Information Technology — my brother Muhammad Hassan Qureshi and I, studying side by side at Government College of Commerce & Management Sciences, Ring Road Peshawar, submitted to the Khyber Pakhtunkhwa Board of Technical and Commerce Education. We could have built the conventional project everyone expects — a few static pages, a screenshot in a report, done. Instead we asked a hungrier question: what if our submission was a real, live website that examiners, teachers and the public could actually visit from anywhere in the world?

That single decision multiplied the difficulty — and the learning — by ten. Suddenly it wasn’t just about writing the tools. It was about hosting, domains, deployment pipelines and everything nobody teaches you in a semester. We dedicated the project report to our parents and teachers, whose support carried us through it — and then we went hunting for a way to put it on the internet.

Two platforms failed us first — and that was the gift

Our first stop was the classic free-hosting route: InfinityFree. Then Pantheon. Both taught us the same lesson the hard way — restrictive limits, forced setups, and walls between you and a genuinely professional result. Every dead end pushed us to research harder, and that research uncovered the thing that changed our developer lives: the modern workflow of Git + GitHub for version control, wired to Vercel for automated deployment. Push your code, and the site updates itself. We created our accounts, moved the project into a proper repository, and imported it into Vercel.

Then came the night we’ll never forget. The first deployment went live — and every page except the homepage screamed 404_NOT_FOUND. Our stylesheets were gone, our scripts were gone; the site was a skeleton. For a beginner, that’s the moment you quit. Instead, we debugged it like engineers: the culprit was relative path references — files inside the Pages folder were looking for /Styles/styles.css at the wrong root. One character — adding ./ — separated a broken site from a working one.

We restructured the whole repository into clean Pages, Styles, Scripts and Media folders, corrected every path, and pushed again. Vercel rebuilt automatically. The site loaded perfectly. Watching that deployment turn green taught us more about real-world web development than any tutorial ever had — the kind of lesson you can only buy with a genuine failure.

Small tools, serious standards

We made a deliberate philosophy call: no tool gets published until it deserves to exist. Every tool had to load instantly, work on a slow phone connection, look clean on any screen, and do exactly one thing well. The length converter handles every unit a student meets, from millimetres to miles. The BMI calculator gives a clear, WHO-standard category, not just a number. The word counter counts the way writers actually think, and the ToDo list remembers your tasks between visits using browser storage.

The final build: 9 HTML pages, 9 JavaScript modules, 1 unified stylesheet, 21 media assets — every line written by hand in Visual Studio Code, tested across screen sizes, and shipped through the Git-to-Vercel pipeline we’d bled to learn. Building as brothers meant every decision passed two very different brains — I obsessed over code structure; Hassan guarded the user’s eye view. The tools are better for every one of those arguments.

the journey, as told by a terminal
$ git init "handy-tools" — DIT final project, 2025
# two brothers, one mission: a LIVE submission
$ try hosting infinityfree --limit "too restrictive"
  ✗ dead end
$ try hosting pantheon --limit "not for beginners"
  ✗ dead end
$ discover github + vercel and connect
  ✓ repository imported — deployment #1 live
  ✗ 404_NOT_FOUND — styles & scripts missing
$ fix paths "/Styles/" → "./Styles/" and restructure repo
  ✓ 9 pages · 9 scripts · 1 stylesheet · 21 assets
$ git push origin main
  ✓ deployed: handy-tools-ten.vercel.app — everything works
$ status
  shipped: true · first position: earned · next: LearnFinity
# two brothers, one mission, zero experience shipping
$ pick stack
  html + css + javascript — no frameworks, no excuses
$ build --tools 6 --standard "deserves to exist"
  ✓ Length Unit Converter
  ✓ BMI Calculator
  ✓ Temperature Converter
  ✓ Word Counter
  ✓ ToDo List
  ✓ Mass Unit Converter
$ deploy --to vercel
  ✓ live: handy-tools-ten.vercel.app — 2024
$ status
  shipped: true · brothers: still talking · next: LearnFinity
lessons-learned.md
# what shipping taught us that tutorials never did
1. Done and live beats perfect and imaginary.
2. One wrong character in a path can break an entire site.
3. “Free hosting” that fights you costs more than it saves.
4. Git + Vercel: push code, and the site updates itself.
5. A 404 at 2 a.m. is the best teacher we ever had.
6. Building with family > building alone.
1. Done and live beats perfect and imaginary.
2. Real users forgive small flaws; they punish friction.
3. “Simple to use” is hard to build — that’s the job.
4. Every bug found after launch is a lesson with your name on it.
5. A domain that loads on a 2G phone wins hearts.
6. Building with family > building alone.

The Toolkit

Six tools, one promise each

Every tool answers one question completely, then gets out of your way — exactly as a handy tool should.

Length Unit ConverterMeters, centimeters, inches & more — instant, reliable
BMI CalculatorHeight & weight in, clear health category out
Temperature ConverterCelsius, Fahrenheit & Kelvin, for students & travellers
Word CounterWords, characters & limits for essays, posts, documents
ToDo ListAdd, remove, track — simple productivity, zero bloat
Mass Unit ConverterGrams, kilograms, pounds & ounces for cooking & science
/Pages/Tools/BMI-Calculator.html
Handy Tools BMI calculator — enter height and weight for an instant result
The BMI calculator — clear inputs, instant category, no clutter.
/Pages/Tools/Word-Counter.html
Handy Tools word counter — live word and character counting for writers
The word counter — built for writers tracking essays, posts and limits.

Under the Hood

Deliberately simple, professionally built

01Semantic HTML9 clean pages every device & search engine understands
02Hand-written CSS1 unified stylesheet — responsive on any connection
03Vanilla JavaScript9 modules — instant logic, zero dependencies
04Git & GitHubVersion control — every change tracked & reviewable
05Vercel pipelinePush to deploy — live worldwide, HTTPS, always-on

Why no frameworks?

On purpose. A suite of lightweight utilities should load like lightning on the worst phone in the room — and every framework, every bundled dependency, is a tax on that promise. Plain HTML, CSS and JavaScript, written carefully, remains the fastest, most maintainable way to serve simple tools to the entire planet. Knowing when not to reach for heavy machinery is an engineering decision we’re proud of.

It’s also the stack I teach my web development students first — because fundamentals compound, and frameworks change.

What it unlocked next

Handy Tools earned its grade — and then kept paying dividends. It taught us deployment pipelines, real-user thinking, and the discipline of maintenance. It became the proof-of-work behind my DIT Excellence Award, with the capstone scored at 92/100. And it planted the seed for the next, more ambitious chapter — LearnFinity — where the mission scales from handy tools to limitless learning. The brothers who shipped utilities are now building a platform. Same rule, though: ship it or it doesn’t count.

Try the tools — then imagine your own version

Every expert user of Handy Tools started the same way: one small problem, one clean tool. If you have an idea for a tool, a site, or a product — I’d genuinely love to hear it.