Education Ecosystem Blog

Introduction

ChatGPT is a large language model made from GPT-3 and developed by OpenAI. It has a wide range of applications in the world of technology. One interesting way that programmers are using it is for writing code. If you have experience developing websites, you would know the basic components of any website are HTML and CSS. Static sites, such as resume and brochures sites, typically only rely on these 2 languages. Due to its simplicity, ChatGPT is great for writing static site code. Dynamic sites are more sophisticated, as they require scripts, user inputs, queries and databases. In this article, we will show you 2 website examples that are generated using this AI chatbot. 

Examples of static sites built by ChatGPT

Example 1: Resume website

To create a resume website, you can give ChatGPT the following prompt:

create a resume website in html + css

Here is the picture of the code written by ChatGPT:

Next, paste this code into your development environment, such as VSCode. You can also install the Go Live extension, to click the preview in real-time. This is what the resume looks like in the browser: 

Considering that all of it is written by an AI, this website looks really good. Now, all you need to do is change the text to the relevant information about yourself. This would require you to understand basic HTML+CSS. Then, if you want the website to be interactive, you can add JavaScript.

Additionally, you can also engineer the prompt as you like and ChatGPT will produce a different output based on what you gave it. In the next example, we will see how you can use ChatGPT to create the front page of your website.

Example 2: Coffee roaster front page 

In this example, we will look at how you can use ChatGPT to create the front page of a website for a coffee shop. 

To create the front page of this website, you can give ChatGPT the following prompt:

create the front page of an e-commerce website for coffee roasting written in HTML and CSS

Note that there’s a limit to how much text ChatGPT can generate in a single request. You can simply ask ChatGPT to continue writing the code if you have reached the limit.

Similar to the previous example, you can paste the HTML and CSS code into your development environment. Here’s the website generated by ChatGPT:

The fact that the website code above is entirely written by an AI goes to show how much progress has been made in this field. However, this does not mean programmers are going to be replaced. Obviously, if you are looking to build a completely functional site, you would have to do careful planning, research, and designing. With that being said, it is still impressive that an AI can generate the website above. In the next section, we will explore some practical uses of ChatGPT for creating websites.

Practical usage for a web developer

If you are a web developer, you are probably interested in how you can use ChatGPT. The examples above show you one way of using ChatGPT to create static sites. While it is possible to use it to create dynamic web pages, it might be impractical to do so because of the complexity. Dynamic websites generate content on the server side based on inputs and other data sources. This is why ChatGPT is better suited for creating static sites. Examples of these sites are blogs, information sites, and portfolio sites. Here are some ways you can use it: 

• For creating website text. ChatGPT can be used to create the written content of your websites. Examples of this would be creating blog posts or even a description of your product.
• For designing your site. It can provide guidelines on layout, color to use, and which font to select to create a visually appealing site. 
• Use it for explaining code. If you are a web developer, you will sometimes encounter code that you don’t understand. One way you can overcome this is by copying and pasting the code into ChatGPT’s prompt, and asking it to explain to you.
• Use it for figuring stuff out. If you are trying to make your website look a certain way but are unsure how to do it, you can ask ChatGPT for advice on how to solve it. Or, if you encounter an error in your code, you can ask it to figure out the problem. 
• Use it for static sites. If you are building a website from scratch, you can ask ChatGPT to help you with the static parts to reduce your workload. Then, you can integrate them into your main site.

Conclusion 

ChatGPT is a great tool that you can use for developing sites. If you are a web developer or are planning to be one, you should consider using ChatGPT. However, creating a fully functioning website using ChatGPT alone could be challenging as it requires careful planning, extensive research, and designing. Instead, what you can do is integrate the static sites built by ChatGPT into your main website. As with most modern technology today, there will be valid concerns about security and ethics. For example, students are using ChatGPT to cheat on their assignments. This has caused some schools to outright ban access to it.