Today, I am going to talk about how ChatGPT helped me to create a website where I can draw anything with the cursor just like a paint application. I am sure that you are already amazed at the capabilities that ChatGPT has, but this one is at another dimension as you are about to see.
ChatGPT Is Rising!
ChatGPT is a game-changing large language model developed by OpenAI. Since its release date of November 30, 2022, it has created a significant impact, particularly within the technology industry, due to its impressive capability of understanding and writing code. It is able to write code like a senior developer or even better.
ChatGPT not only writes efficient code, but it can also receive feedback and make improvements. Plus, it can even write clear, informative comments. I have even utilized ChatGPT to create a basic web-based game, directing it through the development process, and it performed exceptionally well. We also highly recommend checking that out.
In this post, we are going to ask ChatGPT to code us a website where we can draw anything on. It will function like an online paint application. This is amazing because the application is useful and ChatGPT is super-fast that it can do that in only 5 seconds.
I already did that, and publish the website online to show you live. You can visit the website via the following link that ChatGPT did for me in 5 seconds. I want you to take a hint from this simple application. Just think about how things would end up if you were spending more time with ChatGPT, creating a professional website in your dreams, sharing it with your friends, and getting users all around the world. Fantastic possibilities…
The website ChatGPT created its code in 5 seconds.
How To Code A Website In 5 Seconds With ChatGPT
For the sake of simplicity, it is not going to be a complicated website. In this paint app, I just want to be able to pick the color, select the thickness of the brush, and clear the screen. And It is going to be one that can be extensible.
To cover everything from scratch I am going to explain in depth so you can build on your own by yourself just like I did. So even if you are unfamiliar with software development, you will be able to create your own by the time you finish this tutorial. This is another topic that ChatGPT is great at! It makes normal people competent software developers.
Table Of Contents
- Building Project Structure: An overview of the project at a high level.
- Asking ChatGPT For The Code: We will describe our desired application to ChatGPT and implement the code it generates.
- Testing the Application: We will test our application, and try to find a point where it can be improved or fixed.
- Publishing The Website: We will publish the end product on the internet.
Building Project Structure
For the code editor, I used VSCode. You can pick your favorite one if you have any. After opening up VsCode, I create an empty folder then I only add one index.html file under it. That’s it.
Asking ChatGPT For The Code
Here is the magic part. Normally, as a software developer, I would first need to imagine the structure of the code, and think about the interaction between code pieces we are going to write. Then I would need to actually write the code. But now thanks to ChatGPT, I only need to explain what I need in plain English, and in the blink of an eye, it understands and starts to write the desired code.
If you want to copy it, I am adding the prompt I use below.
Give me code for a website where there is a blank canvas and I can draw on it using the cursor, with the option to choose the paint color and brush size. I should also clear the screen. Make the website responsive so that even mobile users have good experience
This took only 5 seconds for ChatGPT to come up with the expected code.
Then I just copy the given code and paste it into the previously created index.html file. That’s it!
Testing the Application
In a normal software development cycle in most cases, we would test our code after writing. So after copying and pasting the code that ChatGPT gave me, I want to test my application. In order to do that, we need a local host. So I use VsCode live extension. With that, I can easily right-click the index.html file and head over to the Open with Live Server.
It opens a browser tab that shows my code in action where I can easily try out the output of the code. Here is what it looks like.
It looks great to me for an application coded in 5 seconds. Usually, we try to detect the deficiencies or the lack of needs our application has in this part. I couldn’t figure out any bug. We can also add new features to this, for example:
- adding the ability to blur
- adding the ability to undo the last action
- adding the ability to cut and paste a selection
- adding the ability to select default patterns e.g square, triangle
The only thing you need to do is just ask ChatGPT for these modifications. But for now, I prefer going without them to keep things simple.
Publishing The Website
Publishing this website on the internet requires its own part. There are many ways to achieve this and delving deeper into that may cause distraction from the main point which is the possibility of creating your own imagined application in just 5 seconds thanks to ChatGPT.
As I said, to publish this application on the internet you would need some extra work and for now, we couldn’t get help from ChatGPT for that ( Surprisingly! ). Therefore, we prepared an article that explains how to host this web application on the internet for free.
You can view the published website that ChatGPT coded for me in the following link.
I want to draw your attention to this. It took us only 5 seconds to get the necessary code from ChatGPT that could otherwise take hours of work for a developer. Not only that, we can also improve this application and can create a professional real-world app that can get millions of users’ attention to our site. It saved hours of time that we can spend on something else we like. We can also monetize these websites if we can reach enough users. It has a huge potential and I am leaving that up to you for now.
Related Post: The Most Powerful ChatGPT Chrome Extension
Conclusion
- To create an HTML website, we used VsCode as a code editor.
- We then added the index.html file under the folder we created.
- We asked ChatGPT for the code by explaining to it the needs in plain English. In this case, it was a website where we can draw anything just like a paint application.
- We copied and pasted the provided code into the index.html file.
- By using VSCode Live Extension, We tested our code, searching for any bug or any improvement we can.
- Subsequently, we utilized the Netlify platform to deploy our website live.
Leave a Reply