How to use ChatGPT to create a web page

ChatGPT is particularly good at everything related to computer programming or even website creation. We will get to the bottom of this with a specific example.

We assume here that you have minimal knowledge of creating a web page:

• you know that a web page is written in a fairly simple language called HTML;
• you probably also know that it is possible to define the presentation of said web page in another language, CSS. However, for a simple web page, you can do without CSS;
• You may also know that it is possible to program certain actions using a language such as Javascript. This part is clearly the most complex.

ChatGPT can greatly help you create a Web page, first and foremost by programming in Javascript, which it does very well.

Basic web page

Here, we asked ChatGPT to create a page that can find the number of the day in the year of a date, and also that of the week.

So we submitted this request to ChatGPT:

« Could you create a web page which, given a date, displays the day of the year (in number of elapsed days) and the current week number. So the app asks the user to enter a date and returns the response. The design of the page must be elegant, in keeping with the times. »

ChatGPT then produced the entire code for a page, with HTML, CSS and Javascript. It is this last part which would have been the most complicated to define and therefore, the instructions programmed by ChatGPT are very useful.

Let’s copy this text into an HTML editor, give the page a name and then upload it to an existing website. Here’s what we get.

Beautify the site

The site that ChatGPT offered us works as expected, but it is singularly lacking in panache. We are therefore going to ask it to improve its appearance – as a reminder, ChatGPT remembers what we wrote previously and it is open to dialogue, as indicated in this article: “How to use ChatGPT well? »

Here is our next request:

“My site has a style sheet called daniel.css, present at the root of the site. Could you use this style sheet? »

Obviously, if you make such a request, you would have to replace “daniel.css” with a CSS style sheet present on your site. Here is what we got from this exchange.

Improve the presentation

In terms of presentation, it’s not there yet, so we’re going to add some instructions:

“The website doesn’t look very good like this. Could you center the date request and make the input area larger? »

Now ChatGPT has provided us with the code for the following page.

Further improve the page style

Let’s go even further in the embellishment of such a page, but also in its practical side, by making it offer, by default, the current year – which again requires producing Javascript code. Here is the new query:

« It’s much better. Now, could you make the input box display the current year by default? And also to display the number of days and the number of the week in bold and well aligned? »

The code is present in ChatGPT. But, if necessary, remember that you can display the HTML code of the web page by operating (from Chrome) a right click in Windows or with Ctrl-click in Mac and selecting “ View page source code ».

A didactic character

If you want to learn Javascript or improve your knowledge, don’t hesitate to ask ChatGPT to explain in detail each of the instructions he used.