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. ๐Ÿ˜Ž

Keep reading to learn more about how to use ChatGPT to build a website. ๐Ÿ‘จโ€๐ŸŽ“

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.

How to use ChatGPT to build a website.

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.

The ChatGPT interface.

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

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:

I would like you to act as a frontend web developer. For the project, you’ll code a new website using these tools: HTML, Bootstrap framework using the CDN for CSS and JavaScript. The website should be mobile-friendly and responsive. It should also include the most recent version of Twitter Bootstrap CSS classes in the site structure for layout and style. When it’s all done, there should be a single HTML file. You should also include a navigation menu with internal links to the headings within the page content. Do not provide explanations for any of the code you write. Do you understand everything? Please reply with a yes or no answer if you understand all the requirements“.

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

How to use ChatGPT to build a website with one request.

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.

Another request in ChatGPT.

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.

You must replace the image paths.

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

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.

How to use ChatGPT to build a website with an HTML file.

โš ๏ธ 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.

Opening the Index html file from ChatGPT.

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.

Initial results in the process of making a website with ChatGPT.

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

Filling in section headers.

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

How to use ChatGPT to build a website with section ids.

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:

How to use ChatGPT to build a website with sections.

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.

Inspect.

Click the little icon to Toggle device toolbar.

Toggle responsive view for ChatGPT site.

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

Ipad Mini view.

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.

Multiple mobile views.

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

How to use ChatGPT to build a website that's responsive.

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.

Finding the image URL from ChatGPT.

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.

Changing the image URL from ChatGPT.

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.

How to use ChatGPT to build a website with images.

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

How to use ChatGPT to build a website that's responsive.

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:

How to use ChatGPT to build a website with content.

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:

Copying code.

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

Finding the body tag in the ChatGPT rendered code.

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

The final result of how to use ChatGPT to build a website.

โš ๏ธ 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.

uploading your html file.

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

Adding the index file.

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!

Results of how to use ChatGPT to build a website.

Last word on how to use ChatGPT to build a website

There are many possibilities when building a website with ChatGPT. You can use it in tandem with other AI tools, like those for making images. You might brainstorm blog content, business names, or product ideas.

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:

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

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.

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%.ย ๐Ÿš€

Free Access

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (itโ€™s free)!