howtocodeai.com
Tutorials / Beginner

Build Your First Website With AI and Put It Online (No Coding Experience)

The complete beginner path: use an AI chat to generate a real one-page website, then get it live on your own domain in under an hour. No installs, no frameworks.

DifficultyBeginner
Time45–60 min
You'll needClaude, ChatGPT, or Gemini (free tier works) · Any web host (~$3–10/mo) · A domain (~$10/yr)
You'll buildA real one-page website — about page, portfolio, or small business site — live on the internet at your own domain.

Here is the secret nobody tells beginners: a website is just a text file. One file, named index.html, that a browser knows how to draw. You do not need to install anything, learn a framework, or understand what a 'stack' is. You need an AI to write the file, and a host to put it on.

Step 1 — Decide what the page is for

AI output quality tracks input specificity. 'Make me a website' produces generic mush. Before you prompt, write down three things: who the site is for, the single action you want a visitor to take, and three sections you want on the page (for example: intro, services, contact).

Step 2 — Generate the site with one prompt

Open Claude, ChatGPT, or Gemini and paste a prompt like this, edited for your details:

Create a complete one-page website as a single HTML file with all CSS inside it (no external files, no JavaScript frameworks). It's for [a freelance photographer in Augusta, GA]. Sections: hero with my name and tagline, an about section, a 3-item services grid, and a contact section with my email. Design: clean and modern, [dark charcoal] background, [amber] accent color, large readable type, works on mobile. Use a Google Font. Output only the code.

Worth knowingThe phrase 'single HTML file with all CSS inside it' is doing the heavy lifting. It guarantees you get one self-contained file instead of a multi-file project you don't know how to assemble.

Step 3 — Look at it on your computer

Copy the code the AI gives you into a plain text editor (TextEdit on Mac in plain-text mode, Notepad on Windows). Save it as index.html — make sure it doesn't get saved as index.html.txt. Double-click the file. It opens in your browser. That's your website running locally.

Step 4 — Iterate in plain English

Don't settle for the first draft. Go back to the chat and ask for changes the way you'd talk to a designer: 'make the hero text bigger', 'add a testimonials section with 3 placeholder quotes', 'the contact section feels cramped, add spacing'. Each time, save the new code over index.html and refresh the browser. Five rounds of this is normal — it's how everyone works with AI.

Step 5 — Buy a domain and hosting

A domain is your address (yoursite.com); hosting is the computer that serves your file. Any shared host works for a single HTML file — entry plans run a few dollars a month, and most include or discount a domain the first year. You do not need anything labeled 'cloud', 'VPS', or 'WordPress' for this.

Step 6 — Upload the file

Every host has a File Manager in its control panel. Open it, navigate to the folder named public_html (or htdocs), and upload your index.html there. That folder is the root of your website — anything in it is live. Visit your domain. Your site is on the internet.

What just happened

You did the entire job of a 2010s freelance web developer in an afternoon: requirements, design, build, revisions, deployment. The skill you actually practiced — describing what you want precisely, then iterating — is the core skill of building with AI. Everything else on this site builds on it.

Where to go next

Add more pages by saving more files (about.html, contact.html) and asking the AI to 'add a navigation menu linking index.html, about.html, and contact.html on every page'. When you're ready for something interactive, build a browser game next — it's the same single-file trick.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.