ChatGPT

OpenAI's Revolutionary Language Model.

ChatGPT Created A Paint Website In 5 Seconds – Learn Now!

Today, We are going to talk about how ChatGPT created 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…

https://chatgpt-website.netlify.app/

The website ChatGPT created its code in 5 seconds.

How To Create A Website With ChatGPT In 5 Seconds?

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.

a gif showing creating index.html file for website structure in vscode

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

chatgpt creates a website

This took only 5 seconds for ChatGPT to come up with the expected code.

a gif showing chatgpt response to the prompt asking for code of a paint app

Then I just copy the given code and paste it into the previously created index.html file. That’s it!

a gif showing how to copy the given code by chatgpt and paste it into the index.html file

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.

a picture showing how to open live server in vscode

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.

a gif showing application in live that chatgpt created

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.

The Website

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.

Published by

14 responses to “ChatGPT Created A Paint Website In 5 Seconds – Learn Now!”

  1. Wow, this is impressive and kudos to you for testing your intelligence. However, getting to the last part you didn’t narrate in detail how you customise the website and other things you did.

    I am also interested in creating a website for publication. Your example does help but not in every way.

    Can you share your contact information, it can be by email or social handle if you don’t mind.

    Thank you.

    1. Benjamin Tulloch Avatar
      Benjamin Tulloch

      You just have to ask it to make the modifications in normal english, it’s really that easy

    2. Hello,
      We have written an article explaining how to publish a website for free. You can check that out at the following link.
      Regards,

      https://chatgbt.net/how-to-deploy-web-applications-for-free/

  2. Excellent! Thank you.

  3. When you change the brush size and start drawing, it immediately clears the canvas by itself and resets the brush size to the smallest, default setting, while still showing the slider at the modified, larger setting. It did this in my default Chrome browser on my Pixel 3XL, in both mobile and desktop mode, as well as the mobile Firefox browser in both modes. I tested it also on a Galaxy S21 under the same terms and it did the same thing.

    It is far from scalable, or even working properly at this point. The concept is great and I’m excited to see what actually can be done to improve coding using AI, but you really jumped the gun posting this claiming it does what you want it to do without actually testing that it does thoroughly.

    Great idea, has a realistic real world application in some circumstances and situations, but this was definitely not a successful implementation of its abilities. Sorry.

    And what’s up with you disguising your website to look like it’s ChatGPT? Fake ass, deceptive URL, misrepresentation of what your website actually is, trying to confuse newer users trying to find the real tool by pretending to be OpenAI’s innovative creation. Kinda fucked up in a lot of ways.

  4. It’s great. Chat GPT have great potential and life saver sometimes. Give an overview or basic idea to create web apps

  5. Wow great. We have got generation X,Y and Z. Now it’s time to generation of idiots

  6. Great article

  7. What an amazing article! Thank you so much for your insights! Please keep going on with your great work 😎👏

  8. 得行不

Leave a Reply