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 hasn’t been around for all that long, 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 this guide shows you how to use ChatGPT to build a website (really!). From the homepage HTML file to a navigational menu, to a footer area, to CSS styling: you’ll have it all.

Ready to get started? 🤔 Time to dive in! 💪

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 the focus of this tutorial. This isn’t about copying and pasting 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 can’t sign up for services on other websites or spend money on your behalf, so a few tasks always stay manual.

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

• Buy or configure a domain name
• Purchase website hosting (Bluehost is a solid pick for beginners)
• 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, it’s time to 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, use 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:

A free account is all you need for this tutorial. The free plan runs on the GPT-5.6 Luna model with unlimited everyday text chats, while things like file uploads and image generation stay limited. Paid plans (Go, Plus, and Pro) raise those limits, and Plus and Pro also unlock the stronger GPT-5.6 Sol reasoning models. Older names you might remember, like GPT-4o, have moved to the legacy section for paid users. The steps below work on any current model.

How to toggle between GPT models and select the latest one

Free accounts default to GPT-5.6 Luna, so there is nothing to configure. If you want to double check which model is active, look at the model name shown at the top of the chat window, or open the model picker dropdown near the top left of the interface:

On a Plus or Pro plan, that same dropdown lets you switch to GPT-5.6 Sol or one of the other models your plan includes:

Once you’ve either selected or confirmed your model, 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

This guide also shows you how to render those files in a browser, and in the final step, you’ll learn how to upload them to a web host to publish the site online.

💡 Tip: when ChatGPT writes longer code, it sometimes opens it in a canvas workspace that can render a live preview of a single-file webpage. If that happens, you can check the result right inside the chat before copying anything.

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 Visual Studio Code, Sublime Text, and Notepad 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <style>
        img.float-end {
            max-width: 600px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Pullup Bar Review</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
        </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-end">
        <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:

Regardless of what happens (or doesn’t happen) when you do this yourself, you’ll have to change the value of that src attribute before any picture shows up. Step 5 covers exactly what to replace it with.

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!

The first pass already includes 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 specified at the beginning of the project was for the website to be responsive. This is crucial in today’s mobile world, so you want that to happen automatically.

To test responsiveness, use 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, the 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, go back to ChatGPT and instruct it to use the newest version of 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 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 this example, the placeholder is 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.

The cleanest option is to host the image on your own hosting account once the site is uploaded, then point the code at that URL. Until then, any publicly reachable image URL works for local testing.

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.

In this example, the result came out fairly nice. ChatGPT sent the image to the right as 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, the website doesn’t have a title yet.

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, the image-related edits went into one prompt, and the title request went into a separate prompt. The image adjustments looked like this:

Note that the correct image path went into the prompt as well. That way the revised code doesn’t need another manual replacement afterwards.

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 moving on to the next step, it’s worth emphasizing that sometimes ChatGPT will give you a code edit that might not produce the result you were looking for, or it might work, but 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, one final element rounds out the ChatGPT-built website nicely: a footer. It also gives you a place to insert pertinent information like a copyright tag.

You are welcome to use your own language, but here’s a prompt that works:

“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 replies with a fresh block of footer code:

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, you 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 WordPress hosts like Flywheel only host WordPress sites, so you won’t be able to upload a basic HTML file to their dashboards. Others, like Kinsta‘s sister platform Sevalla, do accept static sites, but through a git-based workflow rather than a simple file upload.

If you just want to play around, a free hosting account works fine for a test like this. For more serious projects, have a look through the roundup of the 👉 best web hosting providers.

Whichever host you end 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.

Keep in mind that your hosting company’s dashboard isn’t going to look exactly like any other, 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!

Earlier versions of this tutorial used 000webhost for this step, but that service shut down in 2024, so its screenshots were retired along with it. If you want a similar free playground, the closest alternative is probably InfinityFree, and there are more free hosting options to pick from.

Other ways to build a website with AI

The method above gives you full ownership of every line of code, but it’s no longer the only way AI can put a site together. Since this tutorial first published, the options have multiplied, so it’s worth knowing the main alternatives before you commit to an approach:

• Dedicated AI website builders. Tools like the Wix AI website builder or 10Web generate a complete, hosted site from a short description, with no file handling required. The trade-off is that your site lives on their platform, usually with a subscription attached, and exporting it elsewhere ranges from awkward to impossible.
• WordPress-native AI. If you’d rather stay in WordPress, the block editor has AI options of its own now. Otter Blocks, a plugin of our own creation, ships a free AI Content Generator block that builds full pages or individual sections from a prompt and matches your theme’s colors automatically. One honest caveat: the AI features run on your own AI provider, so you connect an OpenAI API key (or WordPress’s native AI connector) rather than getting bundled AI credits with the plugin.
• AI coding assistants. If the copy-paste dance in this tutorial feels clunky, coding-focused tools can edit project files directly. They shine for bigger sites, but they assume more technical comfort than this tutorial does.

For a wider look at what AI can do inside a WordPress dashboard, check out the roundups of ChatGPT plugins for WordPress and the different ways to use OpenAI on WordPress.

So which route should you take? For a one-page experiment or a learning exercise, the ChatGPT file-based method in this tutorial is still the most instructive option, and you keep every line of code. For a business site you’ll maintain for years, WordPress with AI assistance is usually the more practical home.

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 still an issue for ChatGPT, especially with things that change frequently, like the pricing of a product. Built-in web search helps, but double-check anything factual before you publish it.
• 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).

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

What do you think about the whole idea of building a website with ChatGPT, and how much sense does it make to you? Let us know in the comments section below!

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀

Site Speed Guide - Below Post

Your Email *

Subscribe to our newsletter

Subscribe to our newsletter

FREE ACCESS

If you are human, leave this field blank.

Δ