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, and it’s already shaking up the web design world. Whether it’s simple content creation or building complete websites, developers and site owners have figured out ways to utilize the artificial intelligence tool for improved productivity.

By the time you finish reading this article you’ll be able to join their ranks because we’re going to teach you how to use ChatGPT 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. 😎

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 we’re primarily focusing on here. We don’t want to simply copy and paste a bunch of content into a WordPress page. The idea is for ChatGPT to write HTML, CSS, and JavaScript code, compile it into files, then upload those files to the host of your choosing.

⚙️ With a process like this, 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
• 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. In the following steps, we’ll show you how to use ChatGPT to build a website. The results are impressive. 🤩

How to use ChatGPT to build a website

Before anything, go to the OpenAI website and sign up to use ChatGPT.

We recommend a desktop computer when learning how to use ChatGPT to build a website, since you’ll be managing site files and uploading them to a host dashboard (which is rather difficult on a smartphone or tablet).

Once you have an account, you should see the main ChatGPT homepage, which consists of two areas to begin a chat: the top left (New Chat) and the bottom field (Send a message). You’ll also see suggestions in the middle, and your history to the left.

Place your cursor in the Send a message box to begin building a website.

In the next steps, we’ll give you very precise details for what to type into the message box to produce a modern, filled with content and responsive website.

As a result, you’ll receive:

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

We’ll then show you how to:

• Render those files in a browser
• Upload the files to a web host to publish the site online

⚠️ Note: ChatGPT also offers a ChatGPT Plus version that’s paid at $20 a month. It gives you access to a more advanced language model – GPT 4. While you can execute the instructions from this guide on the free version of ChatGPT, using the Plus plan is very likely to work out even better.

• Step 1: Set your project requirements with ChatGPT
• Step 2: Ask ChatGPT to write an HTML file for a homepage
• Step 3: Render the code in your browser
• Step 4: Check the site’s responsiveness
• Step 5: Replace the image path URLs
• Step 6: Ask for a footer file from ChatGPT
• Step 7: Upload files to the web host of your choosing

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 Louisville Slugger baseball bat.” 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 Louisville Slugger baseball bat. Also, include an image of a Louisville Slugger baseball bat, 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 Send Message. ChatGPT then starts 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.

Here’s a look at the full HTML file written by ChatGPT from before:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <title>Louisville Slugger Baseball Bat Review</title>
  <style>
    .bat-image {
      float: right;
      max-width: 600px;
    }
  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Louisville Slugger</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="#section1">Section 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section2">Section 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section3">Section 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section4">Section 4</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section5">Section 5</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <h1>Louisville Slugger Baseball Bat Review</h1>

    <img src="path/to/bat-image.jpg" alt="Louisville Slugger Baseball Bat" class="bat-image">
    <p><em>Caption: Louisville Slugger Baseball Bat</em></p>

    <section id="section1">
      <h2>Section 1</h2>
      <p>Content for Section 1...</p>
    </section>

    <section id="section2">
      <h2>Section 2</h2>
      <p>Content for Section 2...</p>
    </section>

    <section id="section3">
      <h2>Section 3</h2>
      <p>Content for Section 3...</p>
    </section>

    <section id="section4">
      <h2>Section 4</h2>
      <p>Content for Section 4...</p>
    </section>

    <section id="section5">
      <h2>Section 5</h2>
      <p>Content for Section 5...</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

You’ll notice that ChatGPT may include notes at the end of its response if there is a need to complete other actions to finish the webpage. For instance, it’s necessary to replace image paths to actually see your images.

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: If ChatGPT pauses in the middle of writing your code, simply send another message for it to continue where it left off. Sometimes, ChatGPT struggles with longer content blocks.

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!

We 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

However, ChatGPT didn’t provide names for the section headers, nor content for each section. This is an excellent chance to show how to ask ChatGPT to make a quick edit, since something is always bound to go wrong.

Go back to ChatGPT and make the request to fill the content headers and paragraphs with relevant text.

Now, it succeeded in giving us the content we wanted.

Here’s the new code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <title>Louisville Slugger Baseball Bat Review</title>
  <style>
    .bat-image {
      float: right;
      max-width: 600px;
    }
  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Louisville Slugger</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="#section1">Section 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section2">Section 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section3">Section 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section4">Section 4</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section5">Section 5</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <h1>Louisville Slugger Baseball Bat Review</h1>

    <img src="path/to/bat-image.jpg" alt="Louisville Slugger Baseball Bat" class="bat-image">
    <p><em>Caption: Louisville Slugger Baseball Bat</em></p>

    <section id="section1">
      <h2>Superior Performance</h2>
      <p>The Louisville Slugger baseball bat offers unmatched performance on the field. Its precision-engineered design and high-quality materials contribute to exceptional power and accuracy in every swing. Whether you're a professional player or an amateur enthusiast, this bat ensures a consistent and powerful hitting experience.</p>
    </section>

    <section id="section2">
      <h2>Enhanced Durability</h2>
      <p>Durability is a key factor in choosing a baseball bat, and the Louisville Slugger excels in this area. Crafted with top-grade materials and expert craftsmanship, it withstands the rigors of intense gameplay. The bat's solid construction ensures longevity, allowing you to rely on it season after season without worrying about performance degradation.</p>
    </section>

    <section id="section3">
      <h2>Optimal Swing Control</h2>
      <p>With its balanced weight distribution and ergonomic grip, the Louisville Slugger offers optimal swing control. The bat's well-designed handle provides a comfortable and secure grip, enhancing your ability to generate bat speed and make precise contact with the ball. This level of control translates to improved batting performance and increased confidence at the plate.</p>
    </section>

    <section id="section4">
      <h2>Advanced Technology</h2>
      <p>Louisville Slugger continuously innovates its baseball bat technology to stay ahead of the game. Incorporating cutting-edge features and engineering advancements, their bats deliver exceptional performance. From optimized sweet spots to reduced vibration, these technological enhancements maximize the bat's potential and give you a competitive edge on the field.</p>
    </section>

    <section id="section5">
      <h2>Trusted by Professionals</h2>
      <p>Professional baseball players around the world trust Louisville Slugger bats for their competitive games. With a rich history and legacy of excellence, the brand has become synonymous with quality and performance. When you choose a Louisville Slugger baseball bat, you're aligning yourself with the same trusted equipment used by top athletes in the sport.</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

And the new webpage in the browser:

That’s not a bad 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 we 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, we recommend using the Chrome or Brave browser’s Inspect tool, which is shown by right-clicking on the webpage.

Click the little icon to Toggle device toolbar.

This reveals a dropdown menu to view the site on different devices and sizes.

You can choose something like an iPhone, Pixel, or tablet, and click around on your website to see how it works on the smaller screen.

You should also check how the menu works on a mobile device.

Our website appears pretty smooth, but if you ever have issues, we recommend going back to ChatGPT and requesting they use the newest version of Twitter Bootstrap, as 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 you learn how to use ChatGPT to build a website, you’ll find that you have to insert your own image path URLs for media to show up on the site.

ChatGPT already added styling and dimensional constraints to the images, but it only gave us a placeholder image path in the html.index file.

So, go back to the file in your code editor, and look for the img src= tag.

You need to replace the part between the quotation marks (path/to/bat-image.jpg, or whatever the file is named for you).

Ideally, you’ll want to use images you took, or those you’ve paid to publish online. Alternatively, there are Creative Commons options on places like Unsplash or our own copyright-free stock images.

In addition, you’ll want to host the image on a server you control. Simply grabbing the URL from a photo on Google is bound to get you in legal trouble, and there’s a chance that it gets removed from the server, since you don’t control it. You can often host images on your hosting account, or at free places like Google Photos. The goal is to get the URL for the image.

With the URL of your image in hand, paste that into the quotation marks where the placeholder text was.

For simplicity, we’re using an image hosted on Unsplash (not recommended for a site you plan to publish).

Save the file and refresh your browser. Our result came out fairly nice. ChatGPT sent the image to the right as we requested, and the text wraps around it regardless of the device size. The only issue is that the caption isn’t below the image.

No worries, though. A quick request to ChatGPT solves that.

Some other tweaks I made:

1. I eventually removed the caption, since it never really looked that good, and struggled on other devices.
2. I asked ChatGPT to name the nav links for their corresponding sections.
3. Furthermore, I requested a brief introduction before the image and first section.

The result:

Here’s the code if you’re interested in using it as a template for your website:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <title>Louisville Slugger Baseball Bat Review</title>
  <style>
    .bat-image {
      float: right;
      max-width: 600px;
    }
  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Louisville Slugger</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="#section1">Superior Performance</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section2">Enhanced Durability</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section3">Optimal Swing Control</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section4">Advanced Technology</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section5">Trusted by Professionals</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <h1>Louisville Slugger Baseball Bat Review</h1>

    <p>Welcome to our review of the Louisville Slugger baseball bat! In this article, we'll explore the exceptional features and benefits of this renowned bat that has been trusted by players for years.</p>

    <img src="https://images.unsplash.com/photo-1653102740710-c1c006091f93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80" alt="Louisville Slugger Baseball Bat" class="bat-image">

    <section id="section1">
      <h2>Section 1: Superior Performance</h2>
      <p>The Louisville Slugger baseball bat offers unmatched performance on the field. Its precision-engineered design and high-quality materials contribute to exceptional power and accuracy in every swing. Whether you're a professional player or an amateur enthusiast, this bat ensures a consistent and powerful hitting experience.</p>
    </section>

    <section id="section2">
      <h2>Section 2: Enhanced Durability</h2>
      <p>Durability is a key factor in choosing a baseball bat, and the Louisville Slugger excels in this area. Crafted with top-grade materials and expert craftsmanship, it withstands the rigors of intense gameplay. The bat's solid construction ensures longevity, allowing you to rely on it season after season without worrying about performance degradation.</p>
    </section>

    <section id="section3">
      <h2>Section 3: Optimal Swing Control</h2>
      <p>With its balanced weight distribution and ergonomic grip, the Louisville Slugger offers optimal swing control. The bat's well-designed handle provides a comfortable and secure grip, enhancing your ability to generate bat speed and make precise contact with the ball. This level of control translates to improved batting performance and increased confidence at the plate.</p>
    </section>

    <section id="section4">
      <h2>Section 4: Advanced Technology</h2>
      <p>Louisville Slugger continuously innovates its baseball bat technology to stay ahead of the game. Incorporating cutting-edge features and engineering advancements, their bats deliver exceptional performance. From optimized sweet spots to reduced vibration, these technological enhancements maximize the bat's potential and give you a competitive edge on the field.</p>
    </section>

    <section id="section5">
      <h2>Section 5: Trusted by Professionals</h2>
      <p>Professional baseball players around the world trust Louisville Slugger bats for their competitive games. With a rich history and legacy of excellence, the brand has become synonymous with quality and performance. When you choose a Louisville Slugger baseball bat, you're aligning yourself with the same trusted equipment used by top athletes in the sport.</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Step 6: Ask for a footer file from ChatGPT

Obviously, we can spend a significant amount of time on ChatGPT to make a much nicer looking website with numerous features. Yet, we’ll leave it up to you to request elements like multiple pages, CSS files, and hero images or sliders using CSS or JavaScript. Just keep in mind that you’ll need to make multiple files for those situations, and upload them all to your host.

For our example, however, we would like to add one final element: a footer. That rounds out the ChatGPT-built website nicely, and allows us to insert pertinent information like a copyright tag.

You are welcome to use your own language, but here’s what we 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!

⚠️ Note: You may have noticed that ChatGPT explained how to incorporate multiple pages into your website. We won’t explore that in this article. But, the main idea is to create separate HTML files for extra pages (like our Privacy Policy and Terms of Service), then update the ‘href’ attributes where those pages are linked (like how we linked to pages in our footer).

Step 7: 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.

👉 Here’s a list of the best web hosting options compared and tested.

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.

Go to the host’s dashboard, and find its File Management area. Open the public_html directory.

As an example, the Hostinger File Management section should show a demo default.php file inside the public_html directory. Click the Upload button to add your HTML file.

Thereafter, you should see your HTML file saved in the directory.

Jump to the frontend of your hosted website (assuming you’ve already added a domain or created a sandbox environment). Your AI-generated website is now published for the world to see!

Last word on how to use ChatGPT to build a website

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).

Yet, when you learn how to use ChatGPT to build a website, 🦾 you must understand that there are limitations:

We 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 us know what you think about the whole idea of building a website with ChatGPT and how much sense it makes to you.