Can ChatGPT Build a Basic HTML Page?

I decided to see if ChatGPT could be used to build a basic HTML/CSS page. I was surprised at what it, or both of us actually, could accomplish. I say both of us because without a good driver ChatGPT, nor any generative AI model, can’t really do anything without a good driver. When we start letting them drive each other (Google?) is when I believe we need to be very careful. Debugging PHP isn’t easy, forget about a massive of  AI model with billions or even trillions of parameters. I digress. ChatGPT is more like a Formula One car waiting for a driver. The better the driver the faster the car can be driven. Okay, maybe it’s not a perfect analogy but I think it makes my point. Back to the coding session.

I logged into ChatGPT and asked it:

Can you code in html?

The response:

As an AI language model, I don’t “code” in HTML, but I can certainly help you with HTML-related questions and provide examples of HTML code.

HTML stands for HyperText Markup Language, and it’s used to create web pages. HTML code consists of a series of tags, which define the structure and content of a web page. Here’s an example of some basic HTML code:

This code includes the basic structure of an HTML document, with the declaration at the top, followed by the html, head, and body tags. Inside the head tag, there’s a title tag that sets the title of the web page. Inside the body tag, there’s an h1 tag that sets the heading of the page, a p tag that sets a paragraph of text, and an img tag that displays an image with a specified source and alternate text.

Looks okay. The lazyload is being generated by my WP theme (no idea why). It should be a simple

<img src="myimage.jpg" alt="My Image">

tag.

I then asked it: Can you style html text using css? And here’s what it said:

Yes, you can style HTML text using CSS (Cascading Style Sheets). CSS allows you to change the appearance of text by controlling things like its color, size, font, and spacing. Here’s an example of how you can use CSS to style HTML text:

HTML code:

In this example, we have defined two CSS rules: one for the h1 element and one for the p element. The h1 rule changes the color, font size, font family, text alignment, text transformation, letter spacing, and margin of the h1 element, while the p rule changes the color, font size, font family, line height, text alignment, and margins of the p element.

By adding CSS to your HTML code, you can create more visually appealing and engaging web pages.

ChatGPT may not “code” but it was able to produce a fully functional, albeit basic, HTML page. Stay tuned as we take ChatGPT to the next level where we ask it to help us build a more complex single page website.