Code with ChatGPT - A Very Simple How-to
In my first post about ChatGPT, I said how I see this new technology as being transformational to people’s lives, at least from the perspective of web-development and the creation of digital products. But certainly not limited to only those. Here I attempt to show how in roughly 30 mins (likely less) you could get a webpage up and running. In this case a to-do list, but you can apply the process outlined here to any project (within reason in terms of complexity). I would certainly encourage you to try an idea you may have been pondering, especially if you’re completely non-technical and have though “If only I could code…”.
This is admittedly a very superficial outline, and there’s many ways we can do deeper into details, but will take this as a starting point.
Let's Start!
Here is how to use ChatGPT to build a simple website.
1.????Install a code editor if you don’t have one.
This is a good one: https://code.visualstudio.com/
A code editor, allows you to create code files, and they have other utilities (tools that help in the development process), to help you catch coding issues (think of them as spellcheck for code – but they can go far beyond that)
For a website, you’re likely to need the following files:
The files are linked, through references in the code to pull in the Javascript, CSS and HTML together.
2.????Ask ChatGPT to help you code your project
I gave ChatGPT the following prompt to begin with:
I am a non-technical person, who wants to build a To-do list website, to help me manage my daily tasks. I have installed a code editor, but dont know where to start with actual code. Can you help with a plan and then generate the code necessary for the project.?
In the prompt I tried to explain who I am, and what I need. It’s better to be as specific as possible here so that the model has enough information to respond according to your needs.
You can try different prompts here to find the style that gives you the output in a form that works for you. This is one of the great things about GPT, in that it can be adapted, through iteration to respond in a style that suits your needs.
Here is the output I got:
< Start of output from ChatGPT >
Of course! Building a To-Do list website is a great project for beginners. I'll guide you through the steps and provide you with the necessary code snippets. You'll need to use HTML, CSS, and JavaScript for this project. Here's an outline of the steps:
Step 1: Plan the project
Break down the project into smaller tasks:
1.1. Design the user interface 1.2. List the required features (adding tasks, marking tasks as complete, removing tasks)
Step 2: Set up the project structure
Create a new folder for your project and create these files:
Step 3: Create the HTML structure
Add the following code to your index.html file:
<!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="style.css">
??? <title>To-Do List</title>
</head>
<body>
??? <h1>To-Do List</h1>
??? <form id="task-form">
??????? <input type="text" id="task-input" placeholder="Enter a new task">
??????? <button type="submit">Add Task</button>
??? </form>
??? <ul id="task-list">
??? </ul>
??? <script src="script.js"></script>
</body>
</html>>
Step 4: Style the elements with CSS
Add the following code to your style.css file:
body {
??? font-family: Arial, sans-serif;
??? margin: 0;
??? padding: 0;
}
h1 {
??? text-align: center;
??? background-color: #4CAF50;
??? color: white;
??? padding: 1em;
??? margin: 0;
}
#task-form {
??? display: flex;
??? justify-content: center;
??? margin: 1em 0;
}
#task-input {
??? flex-grow: 1;
??? padding: 0.5em;
??? font-size: 1em;
}
button {
??? background-color: #4CAF50;
??? color: white;
??? font-size: 1em;
??? padding: 0.5em 1em;
??? border: none;
??? cursor: pointer;
}
button:hover {
??? background-color: #45a049;
}
ul {
??? list-style-type: none;
??? padding: 0;
??? margin: 0;
}
li {
??? background-color: #f9f9f9;
??? padding: 1em;
??? border-bottom: 1px solid #ddd;
??? display: flex;
??? justify-content: space-between;
??? align-items: center;
}
li .delete {
??? color: red;
??? cursor: pointer;
}
li.completed {
??? text-decoration: line-through;
}
Step 5: Add functionality with JavaScript
Add the following code to your script.js file:
const taskForm = document.getElementById('task-form')
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
taskForm.addEventListener('submit', addTask);
taskList.addEventListener('click', handleTaskClick);
function addTask(e) {
e.preventDefault();
if (taskInput.value.trim()) {
const listItem = document.createElement('li');
listItem.textContent = taskInput.value;
listItem.innerHTML += ' <span class="delete">[X]</span>';
taskList.appendChild(listItem);
taskInput.value = '';
}
}
function handleTaskClick(e) {
if (e.target.classList.contains('delete')) {
e.target.parentElement.remove();
} else if (e.target.tagName === 'LI') {
e.target.classList.toggle('completed');
}
};
Now, you have a basic To-Do List website with the ability to add, remove, and mark tasks as completed. Open the `index.html` file in your web browser, and you should see your To-Do List website. As you progress in your web development journey, you can add more features and refine the design. Good luck!
< End of output from ChatGPT >
Warning
In the response above, I had to stitch together 2 responses from ChatGPT as the first one ended before it completed.
There is a quirk of the ChatGPT interface, due to a token limit (meaning how many words it can take in as input and then give as output), where the answer gets cut off. In those instances, it will break the formatting too. The fix is simple but requires you to pay attention. When you see this happen type in Continue.
Here is what this looked like:
A short detour:
Another guidance note here is that if you have never done any coding or web development, you might have a lot of questions on what this all means. Another great use of ChatGPT is that you can ask it to explain and comment the code – I found it to be a great learning tool.
My prompt:
Thanks for this, but I dont actually dont know what this all means. Can you explain what each file does and comment the code for me with what it does.
I only noticed my spelling mistakes after - but in this instance it doesnt seem to have made a difference to the output. But worth being careful, as it could pick up on those and influence the output. The risk with this one is the double negative.
You get the idea – you can play with this until you get all your questions answered, or you can flip the question and ask ChatGPT what topics you should research further.
My prompt:
If I wanted to learn this in more detail, what topics should I research and can you give me some references?
< Start of ChatGPT output >
To learn web development in more detail, you should research the following topics:
Here are some references to help you get started:
HTML:
CSS:
JavaScript:
Once you've mastered the basics, you can explore more advanced topics and tools, such as:
Remember that web development is a vast field, and it's essential to build a strong foundation in the basics before diving into advanced topics. The resources mentioned above will help you get started on your learning journey. Good luck!
< End of ChatGPT output >
Another warning and a suggestion
In this output, it provided working URLs, there is a risk with GPT (and perhaps more so in older versions) where it would make up the URL based on similar URLs in its training data set, therefore making them useless. However, in this example it does not seem to be the case. There is another way to get working URLs, which is to use Google search (you can ask ChatGPT what to search for) or you can use Bing AI Chat.
Bing AI
领英推荐
You can also put a similar question into Bing AI chat – it uses GPT-4 in the background – but it also acts as a more typical search engine returning web results.
The first answer gave me resources I could check out – but I wasn’t happy with the results as I still didn’t know what topics I should look up on those websites. So I then asked it for which topics to research.
This was better.
Here is a guide on how you can get started with Bing AI Bing Chat: How to Use the AI Chatbot (howtogeek.com)
Detour over - Back to our to-do list.
How to go from ChatGPT output to running webpage
Step 1:
The first thing it said to do is to create a folder.
Step 2:
Since you should have a code editor now. Open it up and open the folder from it.
From the File menu find the Open Folder option. File -> Open Folder.
Step 3:
Then find the folder you just created, select it and press Open.
You will then see a screen similar to this (your layout may slightly differ)
Step 4:
Then in the explorer tab on the right (in my screenshot – it’s likely on the left for you if you haven’t moved it). Press the new file icon.
Step 5:
Then create the files ChatGPT suggested, with the same names(this is important as the code will reference them by those names. Make sure you include the extensions in the file name (.html, .js, .css), as this tells the code editor what type of code to expect.
You should now see the files in the folder.
Step 6:
The files at this point will be blank. But we will copy the code from ChatGPT into each file. This is a simple Copy, Paste, Save operation. ChatGPT even has a helpful Copy code button on the right-hand side of the output.
Caution:?When the code gets cut off and you need to ask it to Continue, this Copy code button wont be very helpful as it will only copy up to the cut off point, you then need to manually select the rest of it and add it in. You can also ask the GPT to re-output just the file you need, but depending on how long it’s gotten it may still be cut off. ?
Step 7:
Once you’re done copying the files you’re ready to run the website and see if it worked. But how can you do this? I asked ChatGPT.
My prompt:
I have created the files and copied in the code you suggested, I want to see if this worked - what do I need to do?
< Start of ChatGPT Response >
To see if your To-Do List website works, follow these steps:
If everything works as expected, you've successfully built a simple To-Do List website! If you encounter any issues or need further assistance, feel free to ask.
< End of ChatGPT Response >
Doing as it suggested, it seems to have worked! ??
Completing and adding new tasks:
Deleting Tasks:
Now this will not have storage, so once you close the browser it will lose all your tasks – so you can expand this to add some kind of storage (you can ask ChatGPT how to do this).
You may also be wondering, where does the server come in? Currently this will only work on your browser on your machine, and no-one else’s.
Again, you can ask ChatGPT how to spin up a server and load up this website through the server. This may be a bit more complex, depending on what type of machine you’re using (PC or Mac/Linux) – but it can guide you through the process, or you can ask it what you need to Google (or Bing – is that a verb yet?) to learn how to do it.?
This may seem super complex still – but in a matter of 30 mins, you have something functional, and maybe even useful, but with some limitations. We could have asked ChatGPT to build storage and other features upfront – but that can be a next phase. The aim here was to show how a beginner in web development could get a web-page up and running in a short amount of time, and how to ask for help.
Final words:
While this was a quick tutorial on how to get to working code using ChatGPT and a few manual tasks, real world web development and software engineering is vastly more complex.
You can ask ChatGPT to act as a senior developer, performing a code review, and suggest changes to make the code more secure, performant and efficient. Which it does a good job of, but it's worth investing some time into understanding those practices for yourself to ensure you don't release anything that is not secure. Especially if you want to build something that will have multiple users and personal data.
The pace of development for AI based coding tools is incredible at the moment. This list only covers a single week of progress in this space just to illustrate just how fast things are moving.
Things like AutoGPT (which didn't exist 2 weeks before I posted this) - will make a lot of manual steps I outlined redundant, and there are working prototypes already out there - see here.
If you try this out, let me know how it goes!
Head of Salesforce - EMEA, Infosys Consulting
1 年Fascinating article Alex! Hope you are well