How to use AI Tool ChatGPT to create HTML and CSS and website code

ChatGPT is an AI tool based on large language model built by OpenAI. It can be used in multiple ways to improvise the productivity of users such as writing stories, writing emails, writing blog posts, creating websites etc.

ChatGPT if properly used can tremendously improvise the productivity of any software developer. In this article, we will look at how to use ChatGPT to create a website using the HTML and CSS code generated from chat GPT.

You can also join a lot of AI and ML developer communities such as Goom or Hugging face to learn more from peers on how to AI tools such as ChatGPT or GPT 3 to improve productivity.

How to use ChatGPT to create HTML and CSS and website code

ChatGPT can pretty much create the HTML and CSS of the website provided proper prompts are given by the developer.

Prompts

It is very important to give a proper prompt to get the required outputs. Let’s look at some of the prompts

Prompt if you want to need HTML and CSS for the Landing page for lead conversion.

Prompt 1: “Give Landing page HTML and CSS with the bootstrap framework that takes the email address and phone number in the lead generation form”

Below is the response from the ChatGPT AI bot for the above prompt which I believe is pretty good.

Prompt if you need HTML and CSS for Home Page carousal

Prompt 2: “Give an HTML and CSS code with a tailwind for Carousel that takes 50% of the page vertical space ”

Response from ChatGPT AI bot for the above prompt which I believe is pretty decent as below.

Prompt if you need HTML and CSS to import Data from excel and show it in the tabular format

Prompt 3: “Give an HTML and CSS code that display the table with the column’s name, date, and number”

Now, you can copy the HTML and CSS and tweak it for your use case or you can also ask follow-up questions by tweaking the prompt for your particular use case

ChatGPT is an amazing tool and as a developer, if used properly, it will improve your productivity by 10x. Go a head and play around and its completely free.