ONLINE
AI Tools BEGINNER FREE 10-15 minutes

Build a Website with AI in 10 Minutes

Published:

The Pitch

You don’t need to know HTML, CSS, or JavaScript to build a website in 2026. You need a terminal, an AI tool, and an idea. That’s it.

This tutorial walks you through building a real, functional website using AI — from blank folder to something you can actually show people. We’re using Claude Code but Gemini CLI works too. The commands are slightly different but the concept is identical.

What You’ll Build

A personal portfolio site with:

  • A homepage with your name and what you do
  • An about section
  • A project gallery
  • Contact info
  • Mobile-friendly design
  • Dark mode (because it’s 2026)

Total time: about 10 minutes. Most of that is you deciding what to put on it.

Prerequisites

Step 1: Create a Project Folder

Open your terminal and make a new folder:

mkdir my-portfolio
cd my-portfolio

Step 2: Tell the AI What You Want

This is the entire trick. You describe what you want in plain English and let the AI build it.

Launch Claude Code:

claude

Then type something like:

Build me a personal portfolio website. Single page, modern design, dark mode.

Include these sections:
- Hero section with my name "Alex Chen" and tagline "Designer & Developer"
- About section with a short bio
- Projects section with 4 placeholder project cards that have titles, descriptions, and images
- Contact section with links to GitHub, Twitter, and email

Use a clean, minimal design. Make it responsive for mobile. Use vanilla HTML, CSS, and JavaScript — no frameworks. Put everything in an index.html file.

Hit enter and watch it build your entire site.

Step 3: Look at What It Made

Claude will create the files and explain what it did. Open the site in your browser:

# On Mac
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html

You now have a website. It took about 2 minutes.

Step 4: Make It Yours

Here’s where it gets fun. You don’t have to edit code manually. Just tell the AI what to change:

Change the color scheme to use a deep navy background with gold accent colors.
Replace the placeholder bio with: "I build things on the internet and occasionally they work."
Make the project cards have a hover animation that lifts them slightly.

Every change you describe gets made instantly. Want to add a section? Just say so:

Add a blog section below projects with 3 recent post cards. Include dates and short descriptions.

Want to change the entire vibe?

Make this look more brutalist — raw typography, high contrast, visible grid lines, no rounded corners.

The AI rebuilds the CSS in seconds. You’re art directing, not coding.

Step 5: Add Real Content

Replace the placeholders with your actual information:

Replace the project placeholders with these real projects:
1. "Weather Dashboard" - A weather app that shows forecasts for any city. Screenshot at /images/weather.png
2. "Task Manager" - A simple todo app with drag-and-drop. Screenshot at /images/tasks.png
3. "Portfolio Site" - This website (meta, I know). Screenshot at /images/portfolio.png

If you don’t have screenshots yet, tell the AI to use placeholder images:

Use placeholder images from picsum.photos for the project screenshots. Different image for each card.

Step 6: Put It Online (Free)

Your site is a single HTML file. Deploying it is trivial. Here are three free options:

Create a git repo, add all files, and give me the commands to push to GitHub and enable GitHub Pages.

Claude will generate the exact commands. Copy and paste them. Your site is live at yourusername.github.io/my-portfolio.

Option B: Netlify Drop

Go to app.netlify.com/drop and literally drag your project folder onto the page. That’s it. Free URL, free hosting, free SSL.

Option C: Vercel

npm i -g vercel
vercel

Follow the prompts. Done.

Going Further

Once your basic site works, try these:

Add a blog engine:

Convert this into an Astro project with a blog. Each blog post should be a markdown file in a /posts folder. Keep the same design.

Add animations:

Add subtle scroll-triggered animations to each section. Fade in from below as the user scrolls down. Use the Intersection Observer API, no libraries.

Make it a Progressive Web App:

Add a service worker and manifest.json so this works offline and can be installed as an app.

Add a contact form that actually works:

Add a contact form that sends emails using Formspree. The form should have name, email, and message fields.

Every one of these is a single prompt away. You describe what you want. The AI builds it. You look at it. You describe changes. Repeat until it’s exactly what you had in mind.

The Bigger Point

A year ago, building a portfolio site meant learning HTML and CSS basics (a few days), picking a framework (another day of decision paralysis), figuring out deployment (an afternoon of Stack Overflow), and actually designing something that doesn’t look terrible (debatable timeline).

Now it’s a conversation. You describe, the AI builds, you refine. The skill isn’t coding anymore. It’s knowing what you want and being able to describe it clearly.

That’s not a small shift. That’s the entire barrier to entry for web development collapsing in real time.

What You Learned

  • How to use AI tools to build a complete website from scratch
  • How to iterate on design by describing changes in plain English
  • How to deploy a static site for free
  • That the hardest part of building a website in 2026 is deciding what you want on it