How I Wrote my Website Code From Scratch Using AI Chatbots

In this article, I’ll explain how I wrote my website (EDPlugNG) code from scratch using AI chatbots like ChatGPT, Gemini, and Claude AI, all without knowing anything about coding or web development.

I’ll also share the challenges I faced, the solutions I found, and the lessons I learnt for getting helpful responses from AI.

Let's dive in.

My AI Coding Background

This was my first time using AI chatbots for a coding project of this magnitude. The website is hosted on Google's free blogging platform (Blogger), but it's so customised you wouldn't believe it's a Blogger site.

The whole code was written from scratch, starting from the most basic HTML structure.

It all started as an exploration, just trying things out with the free version of ChatGPT. I was so impressed with the tool that I slowly got immersed in it and decided I was going to complete the whole project this way.

As the project grew, ChatGPT became unreliable and started producing codes with errors, so I decided to move to Gemini. I started with the free version of Gemini (with limited access to the Pro model), which felt like a significant upgrade.

Later, I tried the full Pro version through the one-month free trial and completed the project using the Google One AI Premium plan.

During the project, I faced several challenges with getting helpful responses and learnt valuable lessons, which I'll share in this article. I also used Claude AI a few times, but its free version is super limited.

Claude's reasoning skill appears powerful, and I like its user-friendly interface (it smartly uploads large text blocks as files). However, I still prefer Google Gemini. It's cheaper, comes with extra storage across Google products, and the web design its code produces is clean. Plus, you can share your Pro subscription with other people through family sharing (they don't have to be your family).

Pros and Cons of Using AI for Coding

ChatGPT vs. Gemini vs. Claude AI: Which Is Better for Coding?

As I said, this project started with the free version of ChatGPT. My whole experience is with its free version, so I can't comment on the Pro version. It's possible the issues I faced aren't present there. Overall, moving from free ChatGPT to free Gemini felt like an upgrade.

I also used the free version of Claude AI. While I never used it a lot, it seems like a powerful chatbot with advanced reasoning. I fixed some minor errors I had issues with on Gemini, but I quickly hit usage limitations. I had to stick with Gemini.

Gemini was the main chatbot where the bulk of the website code was written. If you're looking for the best free AI for coding, I would recommend you start with Google Gemini. It's the cheapest when it comes to pricing, includes other benefits, and you can try the Pro version for free, which I couldn't get from other chatbots.

Factors That Affect the Quality of AI Chatbot Responses

My experience with these AI chatbots reveals several factors that affect the quality of the response you get. These include:

Limitations in Training Data

I observed the AI might struggle to provide an accurate or useful response if the information available in its training data is insufficient. For example, Google offers little support for theme development on Blogger, and getting help is difficult due to a lack of sufficient documentation. This could have contributed to the numerous issues and errors I experienced with codes generated by Gemini, as it struggled to find accurate data.

Model Capabilities

It's no secret that these models are not built the same. The capabilities of the models themselves—influenced by the resources allocated to them and the robustness of their internal algorithms—will affect their reasoning and computational power.

Take for instance, the free model might use limited resources compared to Pro version and have other limitations, all of which affect the quality of response you get from the AI.

Context Window

An AI's context window is the amount of text it can process at one time, acting like its "working memory" for a conversation. AI models have different context memory limits; one with a higher limit will no doubt offer a more quality response.

You want to manage this memory through efficient prompting. The more information the AI has to remember, the more likely it is to produce a poor response as this limit is approached.

The Quality of Your Prompt

Before enrolling in that AI prompt engineering course, note that prompting AI is all about communicating effectively, just as you would with a human. AIs are programmed to understand natural language.

The trick to quality prompting lies in providing detailed and precise information to help the AI understand what you're trying to accomplish. Instead of enrolling in another course, try improving your communication skills. Even a human needs sufficient information to provide a helpful response.

How to Improve the Quality of Responses From AI

To improve the quality of the response you get from AI chatbots, you can try the following:

Do Your Own Research and Refine Your Prompt

Do research on the topic and use that knowledge to teach the chatbot and improve your prompt. For example, if you notice a gap in the AI's knowledge, try doing your own findings and use the resources you find to refine your prompt so the AI can use the additional information to improve its response.

Start Simple and Build Complexity Gradually

You can start by drafting a detailed description of what you want your project to look like, then build each part one prompt at a time. Start with a simple skeleton or outline, and then update it with more features.

For example, to build my website's navigation bar, I started with simple features like links, a logo, and placement. I then updated it with more features in my next prompts, such as making it mobile-responsive, optimising it for screen readers, and making it sticky.

The bigger the code the AI has to produce, the more likely it is to make mistakes. Based on my experience, it's good to keep the lines of code to 500-1000, depending on complexity. If the code implements complex logic with JavaScript, keep the output lower.

Learn From Your Mistakes (and Others')

Experience is the best teacher. As you use these tools, you'll make mistakes that offer valuable lessons. Learn from them and implement solutions to ensure they don't happen again.

The Mistakes I Made Developing My Website With AI

Mistake 1: Letting Conversations Get Too Long

This was one of my greatest mistakes. The results? Wasted time, unhelpful responses, lies from the bot (telling me it fixed issues when it did nothing), headaches, and broken trust. At a certain point, I thought it was time to abandon the project. Little did I know, it was just time to abandon the current conversation.

Too long a conversation adds too much context for the AI. Opening a new chat was all I needed to do to get a helpful response when Gemini started becoming unhelpful.

Mistake 2: Trying to Do Too Much in One Prompt

I tried getting complex tasks involving different logic, JavaScript, and several code fixes done in one prompt. This led to other issues, especially when the output involved several hundred lines of code.

I finally learned to take each task one prompt at a time and limit the lines of code. This ensures the AI is never overworked, reduces bugs, and makes it easy to verify and identify issues.

Mistake 3: Derailing the Conversation With Unrelated Tasks

This unnecessarily adds more context for the AI to remember, which is inefficient. These AIs have limited resources and are designed to be efficient. The result is a low-quality response when the context becomes too large for it to process.

Mistake 4: Trusting the AI Blindly

Due to certain constraints, I couldn't always test and verify that the codes I got from the AI actually worked as intended. This resulted in more work for me later, as I had to rewrite those codes when I discovered issues.

Common Problems I Faced With AI Chatbots (and Their Solutions)

Problem 1: The AI Completely Ignores Instructions I Asked it to Remember

This happens as the context grows too large and it starts providing unreliable responses. When you notice a decline in the quality of responses, it might be time to start a new conversation.

Problem 2: It Produces Inaccurate Responses or 'Hallucinates'

It's advisable to always verify each response or code is accurate. It can get overconfident and tell you things that are not factually accurate. Don't believe everything it tells you; always verify.

Imagine if I had taken Gemini's word for it in the screenshot below and didn't press further? I would have had a failing code without even knowing!

Problem 3: It Gives Inadequate or Unclear Instructions For Code

Another problem I faced was not getting clear instructions on code implementation, which can lead to errors. The AI could sometimes give out instructions that were not detailed enough, which is confusing for someone with little coding knowledge.

Having a set of guidelines for the AI, through prompting, on how your instructions should be structured so they're easy to follow, detailed, and clear could help avoid errors.

Problem 4: It Produces Poorly Formatted Code With Stray Characters or Syntax Errors

For a newbie, you wouldn't know if these codes are valid until you test them, and some errors might be unnoticeable. A simple instruction asking it to rewrite the code when errors are noticed should be sufficient.

As a safeguard, you might also tell it to carefully and thoroughly review its code output for errors and issues before giving it to you.

Problem 5: It Does Lazy Work, Providing Incomplete Code Snippets

Another problem I've noticed with Gemini is its lazy approach. In an attempt to reduce code length, it may shorten codes, marking missing parts with ellipses or comments (which might not be obvious to a non-coder). It then proceeds to tell you to replace your existing code with this incomplete version.

The result is a broken code that's difficult to troubleshoot. Adding an extra instruction in your prompt, telling it to always provide a complete, copy-paste-ready code without the need for further editing, could help prevent this.

Problem 6: It Sometimes Writes Code Outside The Designated Code Box

Sometimes, codes are generated outside the code box, making copying a nightmare, especially on mobile. These kinds of codes are likely to contain errors from copying or pasting and are poorly formatted. Simply telling it to rewrite the code should be sufficient to fix the issue.

Free Vs Pro AI Version (Should You Upgrade?)

What I noticed with the free version of Gemini AI is the limitations in the amount of texts you can have in your prompt. Once I upgraded to Pro version, I could enter more texts as prompt.

This could also be same with other AI chatbots like ChatGPT and Claude. If you're hitting this limit, then you should consider upgrading to premium version.

Also, as you might have noticed, the free version of Gemini AI offers limited access to Pro which is about 4 prompt per day. This kind of limitation doesn't exist with Pro subscription.

How You Can Get Gemini Pro

You can get Gemini Pro through different subscriptions, with each coming with storage and other benefits across the Google ecosystem and apps:

• Through Google AI subscriptions (free with limited access, Plus, Pro, and Ultra)
• Through Google Workspace subscriptions

Depending on where you live, Google offers its AI products in a certain number of countries. You can check this page for more details on the Pro version and the list of countries each AI product is available in.

Once you've decided on a subscription, you can pay by adding your credit/debit card or using your Google Play balance. Using a Google Play gift card could be a smart way to save money, as you can sometimes get them at a discount. However, it can also be risky if you're trying to redeem from a country other than where you're physically located.

There have also been several complaints about Google's strict policies on gift cards, which make it difficult for some legitimate users. While some users try to bypass these restrictions with VPNs, most still don't have success.

Another smart way to make your Gemini AI subscription cheaper is by sharing it with other people. Google allows you to share your AI subscription through its family sharing options, which come with private storage and access to your benefits for each member.

According to the Google One Help documentation, here are some things you need to know about sharing your Google One benefits:

• Sharing your Google One plan will share your AI Pro benefits, storage space, and some other benefits with your family group (up to 5 other members).
• The person who shares their storage is called the Google One plan manager and can start or stop sharing at any time.
• Each member gets 15 GB of personal storage space first. After that is filled, their files count toward the shared storage pool.
• Others in your family won’t have access to your files unless you share them directly.
• You can't use a work or school account to join a family group, and you can only be in one family group at a time.
• You must be 18 or older to set up a family group, and the people you invite must live in the same country as you.

Also, according to a Redditor, they discovered when they shared their 2 TB of storage, each account had its own separate AI credits and video generation usage limits. For example, each family account has access to 3 video generations per day on Gemini through Google's latest Veo model.

All these extra benefits make the Google AI subscription by far the best value for money.

To start sharing, you first need to set up a family group at https://families.google.com/. Then, go to https://one.google.com/, click Settings, and turn on "Share Google One with family."

How You Can Get Gemini Pro for Free

You can get Gemini Pro for free through its one-month trial and also through the student offer from Google, which offers one year of Google AI Pro subscription to university students for free.

Conclusion: My Final Thoughts

Building an entire website from scratch with AI chatbots was a challenging but incredibly rewarding experience. It pushed me to learn the basics of communication, logical thinking, and problem-solving, even without a background in coding.

While the tools are not perfect and come with their own set of frustrations, they have democratised development in a way I never thought possible. If you're willing to be patient, meticulous, and learn from your mistakes, you can achieve surprisingly professional results.

Have you tried using AI for a large creative or technical project? What was your experience like, and what tips would you share? Drop your thoughts in the comments below!