Using ChatGPT for Webpage Construction

Can ChatGPT create webpages? Let's take it to task and find out.

By Matthew Mayo, KDnuggets Managing Editor on March 23, 2023 in Programming

You've already met ChatGPT, the advanced language model designed by OpenAI that uses machine learning to understand natural language and generate human-like responses. It possesses a vast knowledge base, and with its sophisticated "understanding" of language is able to act as a powerful sidekick for anyone on the hunt for information. It can answer a wide range of questions, provide advice, engage in conversation on various topics, and has proven itself in a vast number of areas.

But can ChatGPT create webpages? Let's take it to task and find out.

Note that this was written using ChatGPT 3.5, prior to the release of the latest version.

Basic HTML Webpage

Let's start out with some basic HTML. Given that ChatGPT has already proven itself as a gifted coder and programming assistant, this shouldn't be much of a test.

Here's the prompt we used with ChatGPT to successfully create a "Hello, World" HTML page:

Create a simple "Hello, World!" webpage using HTML

ChatGPT generated the following basic HTML which, unsurprisingly, did what it was intended to do.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

ChatGPT advises us to place this in a file with the extension ".html" and open it with our browser. Mission accomplished.

I won't bother with a screenshot; you've all seen unformatted HTML output before.

Let's ask ChatGPT to make things look nicer.

Can you make this page look much better with the use of CSS?

ChatGPT spits on the following:

This example uses CSS to change the background color of the webpage to light blue, center the text on the page, change the color of the heading to navy, and increase the font size of the heading to 4em.

You can play around with css and style your webpage.

It is also a good practice to put css in a separate file and link it to your index.html file.

Which looks like this:

A simple webpage created by ChatGPT using HTML and CSS

An improvement, to be sure, but this is still child's play. Before we go on, however, let's take ChatGPT's advice and separate our HTML and CSS.

How would I put the CSS in a separate file and link it to my index.html file?

You can create a separate CSS file and link it to your HTML file using the link element within the head section of your HTML file. Here's an example of how you would do this:

Create a new file called "styles.css" in the same directory as your "index.html" file.
Add your CSS code to the "styles.css" file.
In your "index.html" file, add the following line within the head section:
<link rel="stylesheet" type="text/css" href="styles.css">

The rel attribute specifies the relationship between the current document and the linked document, the type attribute specifies the type of the linked document, and the href attribute specifies the location of the linked document.

Save both files, and open "index.html" in your web browser. The styles from "styles.css" should now be applied to the webpage.

You can also include css files from online links, like from "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css".

It will also be applied to your webpage and you don't need to include it in your local directory.

Simple HTML Form

Create a Craigslist-style webpage that does the following:
- allows me to add a new ad
- allows me to delete existing ads
- allows me to list all existing ads
- allows me to edit an existing ad

Creating a Craigslist-style webpage would involve using a combination of HTML, CSS, JavaScript, and a backend language such as PHP or Node.js to handle the dynamic aspects of the webpage. Here is an example of what the basic structure of the webpage might look like:

<!DOCTYPE html>
<html>
  <head>
    <title>Craigslist-style Webpage</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Craigslist-style Webpage</h1>
    <form id="add-ad-form">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title">
      <br>
      <label for="description">Description:</label>
      <textarea id="description" name="description"></textarea>
      <br>
      <button type="submit">Add Ad</button>
    </form>

    <table id="ads-table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <!-- This section will be populated with ads using JavaScript -->
      </tbody>
    </table>

    <script src="script.js"></script>
  </body>
</html>

The resulting front-end page with no background functionality isn't very good looking. So I ask:

Could you make the website look more professional with the use of a CSS file? I would like the color palette to be the national colors of Italy.

And ChatGPT obliges (the "add" button even turns red when you hover above it).

Simple HTML form with style created by ChatGPT

But what about the JavaScript? Let's see if ChatGPT can add that.

Can you add the javascript to add a new ad to the listing and display it?

// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody");

// Handle the form submit event
addAdForm.addEventListener("submit", function(event) {
  event.preventDefault();

  // Get the values from the form inputs
  const title = document.querySelector("#title").value;
  const description = document.querySelector("#description").value;

  // Create a new table row and add the ad data
  const newRow = document.createElement("tr");
  newRow.innerHTML = `
    <td>${title}</td>
    <td>${description}</td>
    <td>
      <button>Edit</button>
      <button>Delete</button>
    </td>
  `;

  // Add the new row to the table
  adsTable.appendChild(newRow);

  // Clear the form inputs
  addAdForm.reset();
});

And the results:

Semi-functional HTML form with the use of JavaScript created by ChatGPT

Not bad. With a few prompts we went from nothing, to ugly HTML, to nicer HTML, to JavaScript that does something.

Trying Something Useful

Let's try something useful. Below is the prompt to create a simple (but potentially useful) homepage for a blog, with some specific requirements.

Let's create a webpage. I would like you to write the HTML and CSS and whatever else needed to generate a blog homepage that adheres to these requirements:
- the page will use a width of 1024px
- at the top of the page will be the title in large font
- below this should be a row of links to 3 useful pages on the blog
- below this will be a clickable banner advertisement that conforms to industry standard sizing
- below this there is a section of the latest blogs, which should show the 6 latest entries in a tiled layout with 2 rows of 3 tiles
- below the latest blog entries should be an "about" section that lists information about the website founder along with their photo
- below this should be a typical footer, including
- use lorem ipsum to fill in text
- page should be attractive, using a modern style
- there should be a CSS hover effect on the latest blog tiles

Here is the HTML and CSS generated by ChatGPT:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1024px;
      margin: 0 auto;
      padding: 1rem;
    }

    h1 {
      font-size: 2.5rem;
      text-align: center;
      margin-bottom: 1rem;
    }

    nav {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    nav a {
      text-decoration: none;
      color: #333;
      margin: 0 1rem;
    }

    .banner {
      display: block;
      width: 728px;
      height: 90px;
      background-color: #ccc;
      margin: 0 auto 1rem;
      text-align: center;
      line-height: 90px;
    }

    .blogs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .blog {
      width: 32%;
      background-color: #f0f0f0;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .blog:hover {
      transform: translateY(-10px);
    }

    .about {
      display: flex;
      margin-bottom: 1rem;
    }

    .about img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 1rem;
    }

    .about p {
      flex: 1;
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 1rem;
      text-align: center;
      font-size: 0.875rem;
    }
 </style>
</head>

<body>
  <h1>My Awesome Blog</h1>

  <nav>
    <a href="#">Useful Page 1</a>
    <a href="#">Useful Page 2</a>
    <a href="#">Useful Page 3</a>
  </nav>

  <a href="#" class="banner">Ad - 728x90</a>

  <div class="blogs">
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
  </div>

  <div class="about">
    <img src="founder.jpg" alt="Founder's Photo">
    <div>
      <h2>About the Founder</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p>
    </div>
  </div>

  <footer>
    © 2023 My Awesome Blog. All Rights Reserved.
  </footer>

</body>
</html>

And here is the final product:

Simple blog homepage created by ChatGPT

Looks pretty good. I mean, it could look a look better with some additional CSS guidance in the prompt I'm sure, but all in all it's not a bad start. It even has a hover effect on the tiles, visible in the top left tile (it is raised slightly on hover).

One note is that I asked for "the 6 latest entries in a tiled layout with 2 rows of 3 tiles" but ChatGPT generated this tiling in 2 columns instead.

It seems that with very some simple, straightforward prompting, ChatGPT certainly shows some capabilities for being able to generate webpages. I wonder how it would perform when asked to generate something dynamic, and how it would instruct the human to weave the different components together. A test for next time.

Matthew Mayo (@mattmayo13) is a Data Scientist and the Editor-in-Chief of KDnuggets, the seminal online Data Science and Machine Learning resource. His interests lie in natural language processing, algorithm design and optimization, unsupervised learning, neural networks, and automated approaches to machine learning. Matthew holds a Master's degree in computer science and a graduate diploma in data mining. He can be reached at editor1 at kdnuggets[dot]com.

Using ChatGPT for Webpage Construction

Basic HTML Webpage

Simple HTML Form

Trying Something Useful

More On This Topic

Latest Posts

Top Posts