From Zero to Code Hero: How I Built a Mobile VS Code Editor Without a PC or Fluent English

Made by M. Junaid

Author’s Note: This is not just a coding project – this is a real-life story of how I turned limitations into a powerful creation using only my mobile phone, a strong will, and AI support.

Introduction: From Limitations to Creation
A few months ago, I didn’t even have a personal computer. All I had was my mobile phone, a strong desire to learn, and a dream to build something valuable — not just for myself, but for others like me.

I thought, "What if there are more people who want to learn to code, but they don’t have a PC?" That’s where my idea was born: I decided to create a mobile-friendly VS Code-like editor that works directly on a phone browser.

But there was another challenge —
👉 I didn’t know English properly.

Still, I didn’t let that stop me. I started chatting with ChatGPT in Roman Urdu. I would write messages like:
“HTML code kese likhta he?”
“VS code jesa editor kese banayein mobile pe?”

At first, ChatGPT couldn’t fully understand what I meant. But I didn’t quit. I kept trying different ways of asking until finally, I began to understand how to build things. Slowly, line by line, I built something big.

𝗧𝗵𝗲 𝗕𝗶𝗿𝘁𝗵 𝗼𝗳 𝗤𝗮𝗯𝗶𝗹 𝗘𝗱𝗶𝘁𝗼𝗿
I named it Qabil Editor – “Qabil” means capable in Urdu. It’s a message to everyone who thinks they’re not good enough:

You are capable, no matter your background or tools.

I built it using:

🅷🆃🅼🅻, 🅲🆂🆂, 🅰🅽🅳 🅹🅰🆅🅰🆂🅲🆁🅸🅿🆃


Monaco Editor (used in real VS Code)

And ChatGPT as my guide, teacher, and debugger

🔧 Features I Added (Step by Step)
What started as a basic editor turned into something powerful:

✅ Multiple Tabs: HTML / CSS / JavaScript

✅ Live Preview (real-time output)

✅ Auto Save (to LocalStorage)

✅ Auto Close Tags

✅ Remove Extra Spaces Button

✅ Full HTML & CSS Suggestions (like VS Code)

✅ Theme Toggle (Light/Dark mode)

✅ Typing Animation with Glitch Effect

✅ Download Buttons for each file

✅ Mobile Responsive UI

✅ Tag Format Toggle (<h1></h1> or <h1>\n</h1> style)

Each feature took time and effort. I had no instructor, no formal training — just a mobile screen and endless conversations with ChatGPT.

⚔️ Challenges I Faced (And How I Fixed Them)
I faced a lot of issues that most devs solve with a PC and Stack Overflow. But I had none of that. I had to describe each bug to ChatGPT in broken English or Roman Urdu.

Here are some of the hardest problems:

❌ CSS Suggestions didn’t show inside <style> tag
➤ I manually adjusted logic using getValueInRange() to detect when CSS should trigger.

❌ Enter key wasn’t going to the next line
➤ I found duplicate editor.addCommand issues and fixed them.

❌ Style tag was behaving like CSS block
➤ I corrected the logic to treat <style> as an HTML tag, not a CSS model switch.

❌ Internal and inline CSS suggestions weren’t working
➤ I made the suggestions appear based on cursor detection inside style and style="".

❌ Mobile layout was breaking Monaco Editor
➤ I rewrote and adjusted layout CSS again and again until it worked on every screen size.

I even had to manually add over 200+ CSS properties and values for better suggestion support!

📱 Why This Project Matters
Thousands of learners, especially in countries like Pakistan, India, and Bangladesh, don’t have access to a computer. They want to code, but don’t know where to begin.

Qabil Editor proves you can start with just a mobile phone.

It’s not just a tool. It’s a statement — that passion beats limitations.

💭 𝗪𝗵𝗮𝘁’𝘀 𝗡𝗲𝘅𝘁 𝗳𝗼𝗿 𝗤𝗮𝗯𝗶𝗹 𝗘𝗱𝗶𝘁𝗼𝗿?
𝗜’𝗺 𝗽𝗹𝗮𝗻𝗻𝗶𝗻𝗴:


A React-based version

Making it a PWA so it can be installed like an app

Adding code sharing features

Building a community of mobile coders

Most of all, I want to inspire others to stop waiting for perfect tools and start building with what they have.
Final Thoughts: You Can Do It Too
When I started, I couldn’t code. I couldn’t speak English fluently. I didn’t even have a PC.

Today, I’ve built a fully working VS Code clone – on mobile – with the help of AI and a never-give-up mindset.

If you feel stuck or think your tools aren’t enough, remember this:

You don’t need perfect English.
You don’t need expensive devices.
You just need start and ask questions — even if it’s in Roman Urdu.

𝑴𝒂𝒅𝒆 𝒃𝒚 𝑴. 𝑱𝒖𝒏𝒂𝒊𝒅

𝑰𝒇 𝒕𝒉𝒊𝒔 𝒔𝒕𝒐𝒓𝒚 𝒊𝒏𝒔𝒑𝒊𝒓𝒆𝒅 𝒚𝒐𝒖, 𝒑𝒍𝒆𝒂𝒔𝒆 𝒔𝒖𝒑𝒑𝒐𝒓𝒕 𝒃𝒚 𝒔𝒉𝒂𝒓𝒊𝒏𝒈 𝒊𝒕 𝒂𝒏𝒅 𝒆𝒙𝒑𝒍𝒐𝒓𝒊𝒏𝒈 𝒕𝒉𝒆 𝑸𝒂𝒃𝒊𝒍 𝑬𝒅𝒊𝒕𝒐𝒓. 𝑴𝒐𝒓𝒆 𝑼𝒑𝒅𝒂𝒕𝒆𝒔 𝑪𝒐𝒎𝒊𝒏𝒈 𝑺𝒐𝒐𝒏!