FNJ

Can ChatGPT Build a Website? What It Can and Can't Do

ChatGPT can write a website's code, but you assemble, test and host it. The full process step by step, and when a visual AI builder is the better tool.

PublishedOctober 14, 2026
Read time8 min
Written byThe Framer → Next.js team
All posts ↗

Yes, with a catch. ChatGPT can write the code for a website, HTML and CSS for a simple site or React components for a bigger one, and it can explain and debug that code when you paste errors back. What it gives you is code in a chat, though: you save it into files, preview it, fix what renders wrong, and upload it to a host yourself. For a marketing site, a visual AI builder usually gets you there with less assembly; for custom logic, a chat assistant is often the better tool.

The difference comes down to who does the assembly. A visual builder such as FNJ's AI website builder designs on a canvas you can see and hands you a finished project. A chat assistant hands you parts, and you're the builder.

What a chat assistant does well

  • Writing a single page from a description, as one file you can open in a browser.
  • Explaining code line by line, which makes it a patient tutor if you want to learn HTML and CSS.
  • Debugging. Paste an error message, or describe exactly what looks wrong, and it suggests a fix.
  • Small pieces of custom logic: a price calculator, a filterable list of services, a quiz that recommends a package.
  • Converting code: turning a plain HTML page into React components, or cleaning up old markup.
  • Drafting text: headlines, page titles and meta descriptions for you to edit.

What it leaves to you

The model writes code as text. You're the one who sees how it renders in a real browser on a real phone. That leaves you in charge of:

  • Assembly: creating files and folders, and keeping track of which version of each file is current.
  • Visual checking at every screen width.
  • Consistency across pages. Each new page drafted in a chat can drift in spacing, colors and header markup unless you keep pasting the shared styles back in.
  • Photos and real facts. It can't photograph your business or know your prices.
  • Hosting, the domain and HTTPS. Treat the chat as where the code is written, not where the site lives.
  • Maintenance. Next year's change means finding the right file and editing code, or pasting it back into a chat.

How to build a website with ChatGPT, step by step

The example here is a one-page site for a dog-walking business. The same process works for any small static site.

  1. Plan before you prompt. List the sections: a hero with your service area, services and prices, how it works, reviews, and contact with phone and email links. Decide on two colors and one or two fonts, or study a site you like and note its type sizes, spacing and colors precisely.

  2. Ask for one complete file. For example:

    Write a single-page website as one index.html file with the CSS in a style tag. It's for a dog-walking business in [neighborhood]. Sections: hero with a "Call to book" button linking to tel:[number], services and prices, how it works in three steps, reviews with placeholders, contact. Use CSS grid and flexbox, no frameworks, no absolute positioning. Mobile-first: it must work at 390px wide and look good at 1440px. Use system fonts, an off-white background and one dark green accent.

  3. Save it and open it. Paste the code into a plain text editor, save it as index.html, and open the file in your browser.

  4. Iterate with specifics. "The hero text overlaps the photo below 500px wide" is fixable. "Make it better" isn't. Once the file gets long, paste the current version back with each request so the changes apply to what you actually have.

  5. Test narrow widths. Use your browser's developer tools to preview phone sizes, then check the page on a real phone.

  6. Split it up as it grows. For more pages, move the CSS into styles.css and ask for each page to link to it. In plain HTML, every page repeats the header and footer, so changing a menu item later means editing every file. That's usually when people move to a framework such as Next.js, where pages share a layout, at the cost of a build step and more to learn.

  7. Add the search and sharing tags. Ask for a unique title and meta description on each page, Open Graph tags, a canonical link, and a sitemap.xml that lists your pages.

  8. Host it. Static files can go on Cloudflare Pages, whose direct upload takes a folder by drag and drop; on GitHub Pages from a repository; or on Netlify. On the free tiers as checked in September 2026: Cloudflare Pages has no published bandwidth cap for static assets, 500 deploys a month and custom domains included; Netlify's free tier is credit-based at roughly 15 GB of bandwidth a month; and Vercel's Hobby plan is for personal, non-commercial use only, so a business site needs Pro ($20 per seat).

  9. Connect your domain. Add it in the host's dashboard, create the DNS records the host asks for at your registrar, and wait for HTTPS before you share the link.

If any of those steps are unfamiliar, MDN's Learn web development course is a solid, plain-language reference for the HTML and CSS you'll be reading.

Where it gets hard

  • Layout bugs you can't read. When something overlaps on one phone size, you have to describe the symptom precisely or understand the CSS well enough to point at the cause.
  • Long conversations drift. Over many messages, earlier decisions can get lost, so the fifth page may not quite match the first. Pasting your shared stylesheet into each request helps.
  • Design by description. Without a visual reference the result trends toward a generic look: centered hero, three cards, a gradient.
  • Every future change is a code change. That's fine if you like code. It's a chore if you don't.

Chat assistant or visual AI builder?

Situation Better fit
A one-page site, and you're comfortable saving and editing files Chat assistant
You want to learn HTML and CSS as you go Chat assistant
A calculator, quiz or other custom interaction Chat assistant, or a developer
Adding a feature to an existing codebase A coding tool such as Cursor or Codex
A multi-page marketing site that must look consistent Visual AI builder
Matching the look of a site you admire Visual builder that reads references
You'd rather click and edit than read code Visual AI builder
Checking desktop, tablet and phone layouts side by side Visual AI builder

Using both

It isn't either-or. Two workflows combine them well:

  • Build visually, extend with code. Design and build the marketing site in FNJ, export it as a Next.js project, then use your chat assistant or coding tool to add custom logic. The export is a standard project with no FNJ runtime or script, so you can change it however you like.
  • Edit FNJ sites from your assistant. Every builder plan includes FNJ's MCP server. Connect ChatGPT, Cursor, Codex or another MCP-capable assistant by pasting one URL, and it can edit your FNJ sites on the AI subscription you already pay for, without using FNJ credits. The MCP website editing guide walks through that workflow.

When FNJ is the better starting point

If what you need is a multi-page marketing site that looks designed rather than assembled, FNJ does the parts a chat leaves to you. It reads a reference, plans a design system, builds every page at desktop, tablet and phone widths on a canvas you can edit, and exports a Next.js or HTML project you host yourself. For custom app logic, a chat assistant or a developer remains the right call. See how FNJ's AI website builder turns a reference into a finished site.

Frequently asked questions

Do I need to know how to code to build a website with ChatGPT?

Not to start, but it helps a lot. You'll save files, read error messages and describe layout problems precisely, and the assistant can explain each step as you go. If you'd rather not touch code, a visual AI builder is the easier route.

Can ChatGPT host my website?

Treat ChatGPT as the place the code gets written, not where the site lives. To put the site online, upload the files to a static host such as Cloudflare Pages, Netlify, Vercel or GitHub Pages, and connect your domain there.

Is website code written by ChatGPT good enough to publish?

For a simple site it can be, if you test it properly: check every screen width, click every link, and give each page its own title and description. Ask for semantic HTML and flexible grid and flexbox layouts rather than fixed pixel positions.

Can ChatGPT edit a website built with FNJ?

Yes, through FNJ's MCP server, which is included with every builder plan. Connect ChatGPT by pasting one URL, and it can edit your FNJ sites on your existing AI subscription without using FNJ credits.

#ai website builder#chatgpt#how to#web development

Build your site with our AI builder

Show it a site you love and describe your work. It designs every page for desktop, tablet and phone, and gives you the code.

Try the AI builder →
Up nextHow to Build a Website With AI: A Step-by-Step Guide
Also readAI Website Builder Prompts: 20 Examples That Work
Also readFramer AI Alternatives: AI Builders That Give You the Code

Ready to convert your website?

Paste your published Framer URL to generate a production-ready project in minutes.

Example: https://your-site.framer.websiteYour published site’s address — the one visitors see. A custom domain works too.