Building a Website Using AI

▶ Play this diagram as a visual lesson

Path 1: AI website builders (no code) ▶ Watch

Website builders such as Wix, Squarespace, Framer and Hostinger include AI features that generate a complete site - layout, text and images - from a short description of your business. You then edit by clicking and dragging. Best for: portfolios, small businesses, landing pages. Limit: less flexibility and you depend on the platform.

Path 2: AI app builders (prompt to app) ▶ Watch

Tools such as Lovable, Bolt.new, v0 and Replit generate a working web application - including code - from a chat conversation. You describe features ("a recipe site with search and a favourites page") and refine by chatting. This style is sometimes called "vibe coding". Best for: prototypes and small apps. Limit: you must still test carefully, and complex apps need real understanding of the code.

Path 3: AI coding assistants (full control) ▶ Watch

Coding assistants such as Claude Code, Cursor and GitHub Copilot work alongside you on real code in your own project folder. They write files, explain code, fix errors and run commands. Best for: learning to code, serious projects, and anything you want to own completely.

Step-by-step: build a personal portfolio site ▶ Watch

1. Plan. Write down the goal ("get freelance design clients"), the pages (Home, About, Work, Contact) and the audience.
2. Prompt. Give the AI a detailed brief (see below).
3. Generate. Let it create the HTML, CSS and JavaScript files.
4. Review. Open the page in a browser. Check it on a phone-sized screen too.
5. Improve. Ask for specific changes: "make the header sticky", "use a darker blue", "add a contact form".
6. Publish. Deploy to a free host such as GitHub Pages, Netlify, Vercel or Firebase Hosting, and optionally connect your own domain name.

A sample website prompt ▶ Watch

Build a one-page portfolio website for a graphic designer
named Priya. Sections: hero with name and tagline, About,
6-item project gallery, testimonials, and a contact form.
Style: clean, modern, white background, navy and orange
accents, large readable text. Must be responsive on
mobile and accessible (alt text, good contrast).
Use plain HTML, CSS and a little JavaScript in separate
files. Explain how to run it locally.

What the generated code looks like ▶ Watch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Priya - Graphic Designer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>Priya Sharma</h1>
    <p>Brand and poster design that gets noticed.</p>
  </header>
  ...
</body>
</html>

You do not have to understand every line at first, but reading the code the AI writes - and asking it to explain parts you do not understand - is one of the fastest ways to learn web development.

Checklist before you publish ▶ Watch

• Responsive - looks right on phones, tablets and desktops.
• Fast - compressed images, no unnecessary scripts.
• Accessible - alt text on images, readable contrast, keyboard navigation.
• SEO basics - clear page titles, descriptions and headings.
• Legal - use only images and fonts you have the right to use; add a privacy notice if you collect data.
• Secure - no API keys or passwords in the website files; forms protected against spam.