How to make a website using ChatGPT?

Last Updated : 06 May, 2025

ChatGPT is an AI Chatbot developed by OpenAI. One of the key features of ChatGPT is its ability to understand and generate human-like language.OpenAI was founded in 2015 by a group of individuals including Sam Altman, Greg Brockman, Ilya Sutskever, John Schulman, and Elon Musk, among others. Since its inception, OpenAI has become a leader in the field of artificial intelligence and has developed several groundbreaking AI technologies, including GPT-3, the technology behind ChatGPT.

ChatGPT can be used for a variety of natural language processing tasks such as text classification, language translation, question answering, and conversational agents. It has a broad range of applications, from language learning to customer service chatbots.

Now, let's discuss the important things we need to keep in mind before making any website :

Purpose and goal of the website
Target Audience
Content
Plan the navigation of the website
Plan the design of the website
SEO
Mobile Responsiveness
Ensure that the website follows web standards and best practices
Budget and Timeline
Hosting and Maintenance

As we now know that the first step in making any website is to know the purpose of the website.

So, let's take an example to understand how we can make a website using ChatGPT.

Here we will make a basic portfolio website using ChatGPT so let's see how we can create it using ChatGPT in steps from scratch:

STEP 1: Give a prompt in ChatGPT saying, "I want to create a basic portfolio website. Provide me with the HTML code for the same!"

It will generate the following result as displayed in the screenshot attached below :

The full code of HTML displayed in ChatGPT :

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    
    <section id="home">
      <h1>Welcome to My Portfolio</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus ultricies erat id odio ullamcorper, eget bibendum 
        neque elementum. Nam sodales, sapien vel fermentum faucibus, 
        nibh tortor laoreet neque, sed tincidunt velit velit a quam.</p>
    </section>
    
    <section id="about">
      <h2>About Me</h2>
      <p>My name is John Doe and I'm a web developer based in San Francisco.
        I specialize in creating responsive websites that are optimized for mobile devices.</p>
    </section>
    
    <section id="services">
      <h2>My Services</h2>
      <ul>
        <li>Website Design</li>
        <li>Website Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
    </section>
    
    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        
        <button type="submit">Send Message</button>
      </form>
    </section>
    
    <footer>
      <p>&copy; 2023 My Portfolio</p>
    </footer>
    
    <script src="script.js"></script>
  </body>
</html>

We can customize this code according to our personal details & make changes to the code accordingly.

STEP 2: Give a prompt in ChatGPT saying, "Add CSS to this HTML code to make it look beautiful!"

It will generate the following result as displayed in the screenshot attached below :

The full code of CSS displayed in ChatGPT :

CSS

/* Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
}

h1, h2 {
  margin-top: 40px;
  text-align: center;
  color: #333;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

p {
  margin: 20px 0;
  line-height: 1.5;
  text-align: justify;
}

ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
}

nav ul {
  display: flex;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  background-color: #fff;
  color: #333;
}

section {
  margin: 40px;
}

#home {
  background-image: url("https://images.unsplash.com/photo-1492684223066-81342ee5ff52");
  background-size: cover;
  background-position: center;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#home h1 {
  color: #fff;
  font-size: 5rem;
  text-shadow: 2px 2px 0 #333;
}

#home p {
  color: #fff;
  font-size: 1.5rem;
  margin-top: 20px;
  text-shadow: 2px 2px 0 #333;
}

form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

label {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #333;
}

input[type="text"], input[type="email"], textarea {
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 5px 0;
}

input[type="submit"] {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #fff;
  color: #333;
}

footer {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

footer p {
  font-size: 1.2rem;
}

Again, you can customize the code according to the styling you need for your website.

STEP 3: Give a prompt in ChatGPT saying, "Also, add JavaScript to this HTML & CSS code to make the portfolio website interactive."

It will generate the following result as displayed in the screenshot attached below :

The full code of JavaScript displayed in ChatGPT :

JavaScript

// Select DOM elements
const navLinks = document.querySelectorAll('nav ul li a');
const sections = document.querySelectorAll('section');
const contactForm = document.querySelector('#contact-form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const messageInput = document.querySelector('#message');

// Add event listeners to the navigation links to scroll to sections
navLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const sectionId = link.getAttribute('href');
    const section = document.querySelector(sectionId);
    section.scrollIntoView({behavior: 'smooth'});
  });
});

// Add event listener to the contact form to send email
contactForm.addEventListener('submit', e => {
  e.preventDefault();
  const name = nameInput.value;
  const email = emailInput.value;
  const message = messageInput.value;
  const emailUrl = `mailto:[email protected]?
  subject=New message from ${name}&body=${message} (${email})`;
  window.location.href = emailUrl;
});

You can customize it according to your preference.

Now, you can compile the HTML, CSS & JavaScript code together either by using an online code editor or by linking CSS & JavaScript files to an HTML file & then running it. You will get the following result :

Thus, making a website using ChatGPT can make the process faster & easier. You can easily create any website Using ChatGPT & then customize it according to your needs & preferences.