I spent two weeks "vibe coding" a new site

Here's what I learned...

Author

Ian H
March 24, 2025

Like everyone else and their grandma and their dog, I’ve been deep in trenches coding stuff with AI.

We’re still very early in this new internet gold rush, and if you’re not already using tools like Cursor and Lovable, the best time to start is now.

Over the past couple weeks, I’ve been working on a fun little project as a way to learn the ropes of Cursor.

In today’s email, I’ll share what I’ve been working on, and some things I’ve learned along the way.

Just wanted to take a moment to share two SEO-related newsletters that are extremely entertaining and informative, both authored by Sean Markey:

I learn something new in just about every issue Sean sends out, which is saying a lot as I’ve been doing SEO for 8 years now.

Both are 100% free. Go subscribe!

What I built…

I’ve always like typing, and for years, I’ve wanted to build my own typing test website just for fun. As a non-coder, it’s always been just a dream. But with AI coding tools like Cursor, it’s finally possible for the non-coder idea guy like me to make these dreams a reality. What an exciting time to be alive!

Using Claude 3.7 Sonnet on Cursor (I have the pro $20/mo plan), I built a simple, highly-customizable typing test site called QWERTY Champ. It took about 600 prompts in total. More than half of those were to fix random bugs that kept popping up.

Try it out and let me know what you think! It’s got a detailed results page after you finish a test. There’s also a leaderboard. Go beat my high score!

Things I learned along the way

  1. I tried several different models and modes, but Claude 3.7 Sonnet on Agent mode quickly became my default for everything. It’s much better than the other models.

  2. 3.7 Sonnet on Agent mode can go way overboard sometimes, fixing things that weren’t broken, and causing stuff to break. Particularly when it comes to CSS changes. Sometimes it’ll accidentally delete (or unnecessarily add) hundreds or thousands of lines of code. When this happens, I just revert the changes (restore to the previous checkpoint) and re-send my prompt, along with a note like “only make this change; do not do anything I didn’t ask you to do!” That usually works to keep it focused on the right thing.

  3. You can edit the code yourself, and Cursor will keep your changes (as long as you save it! CTRL + S to save on Windows). Sometimes this is easier than asking Cursor to make a change, especially if it’s something minor like changing the padding or color of an element.

  4. If there’s something you don’t know how to do, just ask Cursor to walk you through it step-by-step. For example, I didn’t know how to deploy the site (forgive me, I’m used to WordPress, not hand-coded sites lol). So, I asked Cursor to walk me through deploying the site on Hostinger (my web host). I followed all the instructions, and it worked! Now I know how to deploy simple hand-coded sites yay.

  5. Sometimes, a feature isn’t worth adding. I wasted 3 days trying to add a popup that ONLY showed up for non-logged in users encouraging them to create an account to save their scores and appear on the leaderboard. However, this popup would briefly display for logged in users as well, and after hundreds of prompts explaining the problem and asking Cursor to fix it, the issue persisted. I even gave all the code to ChatGPT and asked it where the issue was, then fed that response into Cursor, but that still didn’t work (and I tried this dozens of times, and each time ChatGPT found a different issue that actually wasn’t the real issue). In this case, 3.7 Sonnet finally identified that the issue was due to the site being static. I would need to set up an authentication check at the server level in order for this feature to work seamlessly, but that was beyond my technical expertise. It’s probably not that hard, but I decided that having the popup wasn’t worth the headache, so I removed it entirely.

  6. Connect Cursor to Github so you don’t lose all your work. Relying on the “Restore checkpoint” button in Cursor isn’t always enough. I lost hours of work at one point because for whatever reason, Cursor kept some buggy code even after restoring to a point before that code was changed. Connecting to Github for version control would’ve saved me quite the headache. Ian Nuttall has a good video showing you how to connect to Github (I feel like this is a good time to mention that Ian Nuttall and I are NOT the same person. We get mixed up pretty often lol. He’s on a completely different level than me, you should seriously go follow him).

How to get started with Cursor

In case you have yet to dive in, I’d encourage you to at least get your feet wet by downloading Cursor and playing with the free version.

  1. Download it from the Cursor website

  2. Start a new project by clicking “Open project”, and then create a new folder with your project name. Select that new folder and open it in Cursor. Alternatively, you can clone a Github repository or connect via SSH.

  1. Explain what you want to build in the chat box. Better yet, first explain it to ChatGPT and get a full outline/PRD for your project, then paste that into Cursor’s chat.

  1. Learn more and stay up to date about Cursor on Playbooks and by following Ian Nuttall (not sponsored to say this; I just find his stuff extremely useful so I wanted to share).

Alright, that’s it for today. Hope you got some value out of this!

Thanks for reading,

Ian

What did you think of this email?

Login or Subscribe to participate in polls.

PS: Site for Sale

One of my readers has a site for sale in the hunting niche. All AI content. Gets traffic from Bing, Yahoo, and DuckDuckGo. Please reach out to me if you’re interested and I can share the site URL and put you in touch with the seller.

Asking price is $600 or best offer.

More details in the below screenshots:

This is for 2024. No earnings in 2025 so far.

Things you might be interested in: