How to Use ChatGPT to Build a Website

Are you interested in learning how to use ChatGPT to build a website?

Of course you are. That’s why you’re here.

ChatGPT has only been with us for a relatively short while, but it’s already transformed the landscape of the web design world. Developers and site owners have figured out ways to utilize it for improved productivity, and in many cases, to do things they previously wouldn’t have been able to.

By the time you finish reading this tutorial you’ll be able to join their ranks because I’m going to teach you how to use it to build a website (really!). From the homepage HTML files to a navigational menu, to a footer area, to CSS styling – you’ll have it all.

Ready to get started? 🤔 Let’s do this! 💪

How can ChatGPT help you build a website?

As a natural language processing tool driven by artificial intelligence, ChatGPT is trained to produce a detailed response following an instruction or question made by the user. It’s no secret that ChatGPT can provide written content for webpages, but it also thrives when you prompt it to write the actual code for a website.

That’s what I primarily want to focus on here. I don’t want to simply copy and paste a bunch of content into a WordPress page. The idea is to get ChatGPT to write HTML, CSS, and JavaScript code, compile it into files, and then upload those files to a hosting provider.

⚙️ By following this process, ChatGPT can create:

• Complete homepages
• Navigational menus
• Footers
• Sidebars
• Additional pages like Contact, About Us, and even Shop pages
• All the HTML, CSS, and other code language files needed
• Content for your webpages
• Suggestions on hosting, business names, domain names, product ideas, and more

However, ChatGPT is limited to generating written content. You can’t, therefore, ask it to complete tasks that require you to sign up on other websites or pay money for a product.

🛑 Here’s what ChatGPT can’t do for you:

• Buy or configure a domain name
• Purchase website hosting (we recommend Bluehost)
• Content management (you’d need something like WordPress for this)
• Install plugins or themes
• Upload the AI-generated files to a host (you have to do this manually)

These limitations shouldn’t hold you back, though. With that out of the way, let’s move forward with building a website using ChatGPT. You’ll be impressed by the results. 🤩

How to use ChatGPT to build a website

If you intend on following this tutorial step by step, I recommend using a desktop or a laptop computer. You’ll be managing site files and uploading them to a host dashboard, which is not exactly convenient on a smartphone or a tablet.

To begin, either log into your existing ChatGPT account, or if you haven’t registered for one yet, then go to the OpenAI website and sign up:

Technically, you can use ChatGPT without registering an account. However, I don’t recommend this approach for several reasons, the most important being that you won’t have access to the latest model, which is GPT-4o. This is the model we’re going to use in this tutorial. It’s available for both free users and those on the paid ChatGPT Plus plan.

How to toggle between GPT models and select the latest one

For free users, GPT-4o is the default model that your interface will be set to upon logging in. If you don’t log in, you’ll be on the GPT-3.5 model. Hence why I said you should create an account if you don’t already have one.

To double check, simply type anything into the chat window and then hover over GPT’s response. Look for the little AI emoji, click it, and you’ll see that the GPT-4o model is selected:

For ChatGPT Plus users, you’ll need to switch to the GPT-4o model by clicking on the top left menu that’s adjacent to the left sidebar:

Once you’ve either selected or confirmed that you’re using GPT-4o, you can get started with the steps below. If you do them correctly, you should end up with:

• An HTML file for a one-page website with a homepage, images, footer, and menu navigation
• Some styling code within that HTML file

I will also show you how to render those files in a browser, and in the final step, I’ll explain how to upload them to a web host to publish the site online.

Step 1: Set your project requirements with ChatGPT

Starting out, it’s best to specify some requirements to the ChatGPT bot. This way, it understands some overarching necessities that never change as you make more requests to build your website.

You can modify the requirements however you want, but it’s generally important to specify things like:

• Coding languages
• File structure
• Responsiveness
• How many files you want at the end
• That there’s no need to provide explanations for the code

Here’s an example of what to type in:

Once ChatGPT confirms, you’re ready to build the homepage.

Step 2: Ask ChatGPT to write an HTML file for a homepage

Now it’s time to send your first request: for a homepage. With all these steps, it’s wise to be as specific as possible. This way, you get the results you want on the first few tries.

Here’s a template of how to request an HTML homepage from ChatGPT:

“My first request is “Create a single web page that is a product review of a Doorway Pullup Bar.” You should include five sections of content on this page, each with an H2 tag to start the section, along with several paragraph tags after that with relevant text about the Doorway Pullup Bar. Also, include an image of a doorway pullup bar, along with a caption that explains what the image is. This image should float to the right side of the page and have a maximum width of 600px.”

Write in all your own requirements, and click the up arrow to deliver your instructions to ChatGPT. It’ll then start writing the appropriate code.

Click the Copy Code button and paste it into your favorite code editor. Options like Sublime Text, Notepad, and Atom all work fine, as long as you can edit code and export into a variety of file formats.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doorway Pullup Bar Review</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
        img.float-right {
            float: right;
            max-width: 600px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Pullup Bar Review</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#introduction">Introduction</a></li>
                <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
                <li class="nav-item"><a class="nav-link" href="#pros-cons">Pros and Cons</a></li>
                <li class="nav-item"><a class="nav-link" href="#conclusion">Conclusion</a></li>
            </ul>
        </div>
    </nav>

    <div class="container mt-5">
        <h2 id="introduction">Introduction</h2>
        <p>The Doorway Pullup Bar is a versatile piece of fitness equipment that allows you to perform a variety of upper body exercises in the comfort of your home. It can be easily installed in most doorways without the need for permanent modifications.</p>
        <img src="doorway-pullup-bar.jpg" alt="Doorway Pullup Bar" class="float-right">
        <p class="text-muted">Image: A Doorway Pullup Bar installed in a standard doorway.</p>
        <p>Whether you're looking to build muscle, increase endurance, or just stay fit, a doorway pullup bar can be an essential addition to your workout routine.</p>

        <h2 id="features">Features</h2>
        <p>The Doorway Pullup Bar comes with a range of features designed to enhance your workout experience. It is built with durable materials to ensure stability and safety during use.</p>
        <p>Some of the key features include:</p>
        <ul>
            <li>Multiple grip positions for various exercises</li>
            <li>Easy installation and removal</li>
            <li>Support for a wide range of body weights</li>
            <li>Compact design for convenient storage</li>
        </ul>

        <h2 id="installation">Installation</h2>
        <p>Installing the Doorway Pullup Bar is a straightforward process that requires no tools or permanent modifications to your doorway. Here are the steps:</p>
        <ol>
            <li>Ensure the door frame is sturdy and can support your weight.</li>
            <li>Place the pullup bar on the top of the door frame, ensuring it is centered.</li>
            <li>Push down on the bar to lock it into place.</li>
            <li>Test the stability of the bar before performing any exercises.</li>
        </ol>
        <p>In just a few minutes, you can have your pullup bar ready for use and start your workout immediately.</p>

        <h2 id="pros-cons">Pros and Cons</h2>
        <p>Like any fitness equipment, the Doorway Pullup Bar has its advantages and disadvantages. Here's a quick overview:</p>
        <p><strong>Pros:</strong></p>
        <ul>
            <li>Portable and easy to install</li>
            <li>Affordable compared to other fitness equipment</li>
            <li>Versatile for various exercises</li>
        </ul>
        <p><strong>Cons:</strong></p>
        <ul>
            <li>May not fit all door frames</li>
            <li>Can leave marks on doorways</li>
            <li>Weight limit may not accommodate all users</li>
        </ul>

        <h2 id="conclusion">Conclusion</h2>
        <p>Overall, the Doorway Pullup Bar is a valuable addition to any home gym setup. Its ease of use, portability, and range of features make it an excellent choice for anyone looking to improve their upper body strength and fitness levels.</p>
        <p>While it has a few limitations, such as compatibility with certain door frames and potential marking, the benefits far outweigh these drawbacks for most users.</p>
        <p>Consider adding a Doorway Pullup Bar to your fitness routine and experience the convenience and effectiveness of this simple yet powerful piece of equipment.</p>
    </div>
</body>
</html>

ChatGPT may or may not include notes at the end of its response if there is a need to complete other actions to finish the webpage. For example, it’s necessary to replace image URL paths to actually see your images:

In this particular instance, ChatGPT didn’t inform me of this, but when I’ve gone through these steps previously, it did. Regardless of what happens (or doesn’t happen) when you do this yourself, you’ll have to change the part of the code I underlined above. I’ll show you what to replace it with later on.

As mentioned, make sure you paste the code into a code editor.

Save the file within your code editor. A good filename is index.html, since that will play nicely in any site structure when you upload it to your host.

⚠️ Note: Sometimes, ChatGPT struggles with longer content blocks. If it happens to pause in the middle of writing your code, simply tell it to continue where it left off.

Step 3: Render the code in your browser (and make tweaks to the original code)

With the index.html file saved on your machine, click to open it in your browser.

That renders the code in the browser of your choice. The result is…not too bad!

I have a:

• Navigational menu
• Several menu items that link to the right sections
• A title for the homepage
• A broken image (expected) with a caption
• Several section headers with paragraph content

That’s a decent start for just a few minutes of designing a website! Continue on for additional styling and website features.

Step 4: Check the site’s responsiveness

One of the requirements I specified at the beginning of the project was for the website to be responsive. This is crucial in today’s mobile world, so we want that to happen automatically.

To test responsiveness, I recommend using the Chrome or Brave browser’s Inspect tool, which is shown by right-clicking on the webpage.

In Chrome, click the little down arrow to open up a drop down menu that will let you choose from a variety of different screen sizes:

For example, this is what the website would look like on an iPad Mini:

↕️ Click to expand image

↕️ Click to collapse image

And here’s what it would look like on a mobile device (Samsung Galaxy in this case):

↕️ Click to expand image

↕️ Click to collapse image

You can also check how the menu appears on a mobile device.

As you can see for yourself, my example website appears to be responsive.

If you do this testing and for some reason have issues with your site not rendering properly on different screen sizes, I recommend going back to ChatGPT and instructing it to use the newest version of Twitter Bootstrap. That often solves responsiveness problems. Otherwise, you can ask ChatGPT to make the site responsive again, since it didn’t work the first time.

Step 5: Replace the image path URLs

As I mentioned in the second step when ChatGPT generated the initial code, you’ll need to replace the placeholder image path URLs with real ones.

So, go back to the file in your code editor, and look for the section of code that says <img src="some-name-here.jpg".

You’ll need to replace the part between the quotation marks. In my example, I’ll be replacing the doorway-pullup-bar.jpg but yours will be named something different.

Ideally, you’ll want to use images that you took, or those you’ve already published online somewhere. Alternatively, there are Creative Commons options on places like Unsplash.

In addition, you’ll want to avoid grabbing the URL from a random photo on Google. This is bound to get you in legal trouble. Not to mention that the owner of the image could remove it at any time.

You can often host images on your own hosting account, or on free places like Google Photos. The goal is to get the URL for the image.

For our example here, I used an image from a public blog post that I published on my old Medium blog. It’s not exactly a doorway pullup bar, but it’s close enough to work.

If you have an image published somewhere that you’d like to use, you can usually get its URL by right clicking on it and selecting Copy Image Address:

Once you’ve copied the URL of the image you’d like to use, paste it into the quotation marks where the placeholder text was:

Then save the file and refresh your browser.

My result came out fairly nice. ChatGPT sent the image to the right as I requested, and the text wraps around it regardless of the device size. There are a few problems though.

The first is that the caption isn’t below the image. Instead, it’s awkwardly placed to the top left of the image and it’s breaking up the text:

Second, the text of the caption doesn’t align with what’s actually there. The same goes for the alt text. On top of all that, I also realized that my website doesn’t have a title.

No worries, though. A quick request to ChatGPT can solve all of these issues.

Step 6: Make adjustments to clean things up

Depending on how many adjustments you wish to make and how complex they are, you might want to break them up into pieces. You’ll have to make this judgement for yourself, but generally speaking, ChatGPT does better with multi-step requests if you break the steps up. For simple edits or closely related edits, you can try to group them into one request.

In this example, I decided to combine the image-related edits into one prompt, and then I put the title request as a separate prompt. Here is what I asked it to do for the image adjustments:

Note that I also provided the correct image path to ChatGPT when asking for the revised code. This way I wouldn’t have to manually replace it myself again.

The title request looked like this:

In case you’re wondering, the edited code did work. The caption was changed and moved to underneath the image, and the title was added to the top of the post:

Before we move on to the next step, I want to emphasize that sometimes ChatGPT will give you a code edit that might not give you the desired result you were looking for, or it might work, but it might break something else in the code.

If this happens, don’t panic. Just keep following up. Do it as many times as you need to until you get it right. Sometimes this might involve starting a fresh thread if the current thread you’re working in gets too long. Assuming you’re not requesting really odd, custom changes that might not be possible, then in most cases you will eventually reach your desired result.

Step 7: Ask for a footer file from ChatGPT

You can spend a significant amount of time using ChatGPT to make a much nicer looking website with numerous features. However, the goal of this tutorial is to give you the basic understanding so that you have a foundation to build off of. Just keep in mind that if you want to go beyond a one-page website, then you’ll need to make multiple files for each of your pages, and upload them all to your host.

For this example, I’d like to add one final element: a footer. That rounds out the ChatGPT-built website nicely, and allows me to insert pertinent information like a copyright tag.

You are welcome to use your own language, but here’s what I came up with:

“Please provide me code for an HTML footer based on the page we created above. Please include a copyright notice with the current year. Also, include links to a privacy policy and terms of services pages. Align all the footer content as centered for all devices. Give the footer a dark background with light text color“.

ChatGPT replied with:

Copy that code, and find the </body> tag in your HTML file. Paste the footer code right before the closing </body> tag.

After saving the file and refreshing the browser, we now have a completed one-page website with footer, menu, image, and content!

↕️ Click to expand image

↕️ Click to collapse image

Step 8: Upload files to the web host of your choosing

The last order of business is to take your HTML file and put it on a server. For this, you need a web host.

If you don’t already have one, you can sign up for an account with a host like Bluehost, SiteGround, or Hostinger. Be aware that some managed hosts like Kinsta and Flywheel only allow for WordPress sites, so you won’t be able to upload a basic HTML file to their dashboards.

For this example, I used a free hosting account that I set up with 000webhost in the past. If you just want to play around then you can do the same, but for more serious projects, I recommend looking through our roundup of the 👉 best web hosting providers.

Whichever host you ended up using, you’ll need to go to the dashboard and find the File Management area. Then open the public_html directory. Click whatever the upload button is, find your index.html file, and tap upload. This is what it looks like on 000webhost:

Keep in mind that your hosting company isn’t going to look exactly like this, but the general idea will be the same. Once the file has been uploaded, you should see it saved in the directory:

For the final step, jump to the frontend of your hosted website (assuming you’ve already added a domain or created a sandbox environment). Your AI-generated website will now be published for the world to see!

I used to have a link to the live version of the website here, but unfortunately 000webhost was discontinued as a service so it’s no longer available. Luckily, if you want to play around with what you learned here, there are alternative free hosting options you can use. The closest to 000webhost is probably InfinityFree.

Final thoughts on building a website with ChatGPT

It’s even possible to ask for platform-specific code depending on your website builder or content management system (like requesting Liquid code if working with Shopify).

Having said that, 🦾 it’s important to point out that ChatGPT and other similar AI tools have limitations:

• Accuracy is often an issue for ChatGPT, especially with recent events and data, or things that change frequently, like the pricing of a product.
• ChatGPT is limited to what’s already published on the internet. So, if uniqueness is the goal, you’re better off writing content from scratch. Otherwise, it’s just regurgitated from other content creators.
• ChatGPT’s content often sounds rigid – like a robot. Always double-check the content produced by AI, and get in the practice of rewriting it.
• Google doesn’t directly penalize AI-generated content, but it has since added an “experience” element to its content ranking evaluations. Many see this as a way to combat poor AI content; Google now detects if the author actually experienced what they are writing about (i.e., ChatGPT can’t write a reputable blog post about Italy, since it can’t actually travel there).

I hope your experience with ChatGPT is one that guides you along your web design and content creation process. It’s definitely not a replacement for good developers, but should speed up tedious tasks for some! 🤖

Let me know what you think about the whole idea of building a website with ChatGPT and how much sense it makes to you.