I know what it feels like to stare at a compiler error at 11pm and wonder if you're just not a "coding person." I also know what it feels like on the other side — when something you built actually runs. When a window appears on your desktop and responds to your clicks, or an LED blinks for the first time because you told it to.
That gap — between wanting to code and actually building something — is what I wanted to fix.
So I built gregthevibecoder.com. And I want to tell you exactly how I did it, what I used, and what I learned.
What Is Vibe Coding?
Vibe coding is a method where you describe what you want in plain English, let an AI write the code, run it, and tweak one small thing to make it yours.
Four steps. Every time.
- Copy the prompt — plain English describing what you want
- Paste into your AI — ChatGPT, Claude, or DeepSeek
- Run the code — the AI writes it, you paste and press play
- Make the Vibe Tweak — change one number, see what happens
No memorising syntax. No fighting error messages for hours. No staring at a blank screen.
The Stack
Before I get into the process — here's everything I used:
- WordPress.com Personal plan — hosting and CMS
- Blank Canvas theme — zero interference, full control
- Simple Custom CSS and JS plugin — for all custom code
- Claude (Anthropic) — primary AI collaborator for all HTML, CSS, JS
- ChatGPT and DeepSeek — cross-testing every lesson prompt
- KDP (Kindle Direct Publishing) — for the companion book
Total cost: WordPress Personal plan (~$96/year). Everything else free.
How I Built the Homepage
The homepage needed a live bouncing ball animation to prove the concept before explaining it. My rule was simple — show before you tell.
Here's the prompt I used to generate the canvas animation:
Create a canvas element (600x180) with a ball that bounces
off all four walls using requestAnimationFrame. The ball
should cycle through rainbow colors using HSL. Add a subtle
radial gradient on the ball for depth. Background #0D1117.
Claude generated the full JavaScript. I pasted it into the Simple Custom CSS and JS plugin, added the canvas element to the page HTML, and it ran first time.
The entire homepage — nav, hero, four-step section, six subject cards, comparison table, footer — was built by describing each section to Claude, pasting the HTML into WordPress, seeing how it looked, and iterating. No manual CSS written by hand.
Total time for the homepage: about 3 hours including all iterations.
The Lesson Template
Every lesson follows a 9-part template:
- The Vibe — one emotional sentence about the experience
- What You Will Have — clear description of the result
- Live preview — canvas demo where applicable
- Your Prompt — copy-to-clipboard prompt block
- What To Do After — numbered steps
- Didn't Work? — the error handling box
- Vibe Tweak — one explicit change
- Extra Credit — a remix prompt
- Reflection — one pattern recognition question
The Didn't Work? box is the most important feature on the entire site. Every lesson has one. It says: copy your error, go back to the AI, say "This didn't work. Here's the error: [paste]. Please fix it."
That one box prevents people from quitting. And it teaches the most important AI skill — iterating with an AI to fix a problem. That's not a beginner skill. That's how professional developers work every day.
I generated every lesson by describing the template to Claude with the specific subject and prompt, then iterating on the output. 18 lessons across 6 subjects took about 6 hours total.
The Subjects
The curriculum covers:
- HTML — bouncing ball → paddle game → Breakout arcade game
- Python — greeting app → number guesser → text adventure
- C# Console — greeting → age calculator → calculator
- WPF Desktop — first window → registration form → click counter
- Arduino — blink LED → button → mood light
- Raspberry Pi — GPIO blink → manual control → DHT11 sensor
The WPF lessons are the ones I'm most proud of. Most beginner coding sites skip WPF entirely or bury it in advanced content. I put it in Lesson 4 because it's where I personally code, and because WPF developers are a completely underserved audience in the beginner education space.
Cross-Testing Every Prompt
Every prompt in every lesson was tested in at least two AI tools — Claude and ChatGPT — before publishing. A few needed adjustments to work consistently across both.
This matters because your students will be using different AI tools. A prompt that only works in one tool is a bad prompt. The goal is a prompt that works first time in any of the major free AI tools.
Then I Wrote the Book
Once the site was complete I realised the curriculum was essentially a book. 18 lessons, 6 chapters, a clear beginning and end.
I described the structure to Claude — subject-based chapters, personal voice opening each chapter, all 18 lessons with prompts and steps — and generated the full manuscript as a Word document. Formatted for KDP with proper heading hierarchy, Georgia font, Courier New for code blocks.
Uploaded to Amazon KDP. Approved within 24 hours.
VIBE CODING: Learn to Build Real Things by Telling AI What You Want is now live — free on Kindle Unlimited, $0.99 Kindle, $4.99 paperback.
The entire process from "I should write a book" to published took about 4 hours.
What I Learned
1. Show before you tell.
The bouncing ball on the homepage comes before the headline. Beginners don't trust vibe coding until they see it working. Prove it first.
2. The Didn't Work? box is everything.
Every tutorial assumes things work first time. They don't. Building explicit error-recovery into every lesson is the difference between a student who quits and a student who learns their most important AI skill.
3. WPF is genuinely underserved.
If you're building educational content — find the thing everyone else skips. That's your moat.
4. Cross-test your prompts.
A prompt that only works in ChatGPT is a liability. Test everything in at least two tools before publishing.
5. Building in public is the product.
This article is part of the product. The story of how the site was built is as interesting as the site itself. Don't build in private.
6. AI collaboration is not cheating.
Using AI to build a site about using AI is not circular — it's proof of concept. If I can build an 18-lesson coding education platform in one day by describing what I want, the method works.
The Numbers So Far
First 7 days:
- 178 page views — up 642%
- 37 unique visitors — up 106%
- Top page after homepage: HTML Lesson 1 with 17 views
- Lesson progression working: visitors going from Lesson 1.1 → 1.2
- Book page: 4 views in first week
Small numbers but the right pattern. People are landing, clicking through to lessons, and progressing through the curriculum.
What's Next
Reddit posts in r/dotnet and r/csharp targeting the WPF angle. Amazon Ads once the WordPress Blaze campaign data comes in. YouTube channel with screen-recorded lesson walkthroughs. Paid tier once I have enough data on which subjects people love most.
If you want to see the site: gregthevibecoder.com
If you want the book: amazon.com/dp/B0GX2TGD7Q
If you have questions about the build process — ask below. Happy to go deep on any part of it.
That's about 1,100 words — perfect length for Dev.to. Technical enough for the developer audience, personal enough to be readable, and packed with actual build details that make it genuinely useful rather than just promotional.
Tags to add: beginners webdev ai programming
Go publish it! 🚀
Top comments (0)