How to Build a Website With Claude for Free (Every Type, Step-by-Step)

I want to tell you something before we start.

The first time I helped someone build a website with Claude AI, that person did not know what a browser was. She thought Google and the internet were the same thing. By the end of our session, she had a live portfolio website with a real URL that anyone in the world could visit.

She did not write a single line of code.

That is what this guide is for. If you are a complete beginner who has never built a website, never used AI, and barely knows where to start, this guide is written specifically for you. I am going to walk you through every single step, explain every term, give you every prompt you need, and make sure that by the time you finish reading this, you have a real, live website on the internet at zero cost.

Let us start from the very beginning.

What Is a Website, and How Does This Work? (Start Here if You Are New)

Before we talk about Claude, let me make sure we are all starting from the same place.

A website is a collection of pages that anyone can visit on the internet by going to a web address, also called a URL. A URL is the address you type into your browser. A browser is the app you use to visit websites. Chrome, Firefox, Safari, and Edge are all browsers. You are probably using one right now to read this.

Every website you have ever visited is made of three types of code working together. HTML is the structure, it decides what is on the page. CSS is the styling, it decides how things look, the colours, fonts, and layout. JavaScript is the behaviour, it makes things move, animate, and respond when you click buttons.

Normally, to build a website, you would need to learn all three of these. That takes months, sometimes years.

Claude writes all three of them for you. You describe what you want in plain English, and Claude produces the code. You do not need to understand the code. You just need to know how to copy it, save it as a file, and upload it somewhere. This guide shows you exactly how to do all of that.

What Is Claude AI?

Claude is an AI assistant made by a company called Anthropic. You can use it for free at claude.ai. It can write, explain things, answer questions, and most importantly for us, it can write complete website code from a simple description.

Think of Claude like a highly skilled developer who works for you for free. You tell it what you want in plain English, it builds it. You say “I do not like the colour,” it changes the colour. You say “make the text bigger,” it makes the text bigger. You never need to touch the code yourself.

The Truth About Claude’s Free Plan (Read This First)

I need to be honest with you about something important before you start building, because not knowing this will frustrate you halfway through your project.

The Claude free plan is real and genuinely useful, but it has a usage limit. According to data tracked by multiple independent sources in 2026, the Claude free tier gives you roughly 15 to 40 messages per rolling 5-hour window. That works out to approximately 30 to 100 messages across a full day if you spread your usage out. Anthropic does not publish a fixed number officially, because the limit is based on tokens, which is the technical term for the amount of text Claude reads and writes, not on the simple number of messages you send.

Here is what that means for building a website. If your message is short and Claude’s reply is short, you use fewer tokens and your limit stretches further. If you ask Claude to generate a long, complex webpage and Claude responds with 500 lines of code, that single exchange uses a large portion of your 5-hour window.

The window works on a rolling system. It does not reset at midnight. It starts counting from the moment you send your very first message and resets five hours later. So if you start chatting with Claude at 9am, your window refills at 2pm. If you send your first message at 3pm, it resets at 8pm.

When you hit the limit, Claude shows you a message that tells you exactly when your window resets. Your conversation is saved. Nothing is lost. You simply wait and come back.

Here is what the limit looks like in real terms for website building. A simple one-page website typically takes between 5 and 12 messages back and forth. That is very comfortable within a single 5-hour window on the free plan. A more complex multi-page site might take 20 to 35 messages spread across two or three sessions.

Here is how to use your free messages wisely so you do not waste a single one.

6 Rules to Stretch Your Free Claude Messages as Far as Possible

Rule 1: Put everything into your first message. Do not send five separate messages asking for five different things. Write one detailed prompt that includes every section, colour, font, and feature you want. The prompt templates I give you in this guide are designed exactly for this. Use them.

Rule 2: Start a fresh conversation for each new page. Claude re-reads your entire conversation history with every new message. The longer a conversation gets, the more tokens each new message costs. When you finish one page and start another, open a new chat.

Rule 3: When you hit the limit, use the wait productively. While you wait for your 5-hour window to reset, review what Claude built so far by opening the HTML file in your browser. Make a written list of every change you want. When your window reopens, paste that full list into one message instead of sending ten separate small changes.

Rule 4: Switch to Haiku for quick small fixes. The Claude free plan includes access to Claude Haiku 4.5, which is a faster, lighter model. For simple changes like “make the button red” or “change this text,” switch to Haiku in the model selector. Haiku uses fewer tokens for simple tasks, which means your limit stretches further.

Rule 5: Do not upload large files unnecessarily. Uploading images, PDFs, or large files uses tokens. For website building purposes, you do not need to upload files. Describe what you want in text. Use placeholder images that Claude adds automatically.

Rule 6: If you need more room, $20 for one month of Claude Pro gives you approximately 5 times the usage per session. One month of Pro is usually enough to build a complete, polished website. After launch, you can go back to the free plan for maintenance.

Now. Let us build your website.

What Kind of Website Do You Want to Build?

Before you open Claude and type a single word, take five minutes to answer these three questions on a piece of paper or in a notes app.

Question 1: What is the purpose of this website? What is it for? A portfolio showing your work? A blog sharing your thoughts? An online store selling products? A page for a local sports club? A personal page so people can learn about you?

Question 2: Who will visit your website? Are they potential employers? Customers who might buy from you? Friends and family? Readers who want to learn something? Knowing your audience helps you describe the right tone to Claude.

Question 3: What pages do you need? Most websites start with four pages. A Home page that introduces you or your business. An About page that tells your story. A Services or Work page that shows what you do or offer. A Contact page where people can reach you.

Write your answers down. You will use them in your prompt.

Understanding Claude Artifacts (The Preview Window)

When you use Claude to build a website, something called Artifacts appears. An Artifact is a live preview panel that Claude opens next to your chat. It shows you what your website actually looks like as Claude builds it.

When you see the Artifact panel appear, you will see two tabs at the top. One says Preview and one says Code. Click Preview to see how your website looks. Click Code to see the actual HTML Claude wrote. You do not need to understand the code. You just need to see the preview, decide if you like it, and tell Claude what to change.

This is the closest thing to having a developer sit next to you while they build your website live.

Step-by-Step: How to Build Your First Website With Claude for Free

I am going to walk you through this as if you have never done anything like this before. Follow every step in order and do not skip anything.

Step 1: Create Your Free Claude Account

Open your browser. In the address bar at the top, type claude.ai and press Enter. You will land on Claude’s homepage.

Click the button that says “Sign Up” or “Start for Free.” It will ask for your email address and a password. Type them in. Claude will send you a verification email. Open that email and click the confirmation link. Once confirmed, you are in.

You will see a clean chat interface. There is a text box at the bottom where you type. That is where your website begins.

Step 2: Use the Right Prompt for Your Website Type

This is the most important step. Your prompt is your instruction to Claude. Think of it exactly like briefing a builder before they start work. The more detail you give, the better the result. The less detail you give, the more generic the output.

I have written complete, detailed prompts for every type of website in this guide. Find the one that matches what you want to build. Copy it. Paste it into Claude’s text box. Then edit the parts in square brackets to match your specific details. Then press Enter or click the arrow button to send it.

That is all you do. Claude does the rest.

How to Build a Portfolio Website With Claude for Free

A portfolio website is perfect for designers, photographers, writers, developers, artists, or anyone who wants to show their work to potential employers, clients, or collaborators.

Copy this prompt, then replace everything inside the square brackets with your own information:

“I need you to build me a complete, fully working single-page portfolio website. Please output everything as a single HTML file with all CSS and JavaScript included inside it. Here are the full details.

The website is for a [your job title, for example: freelance graphic designer, photographer, or web developer] named [your full name]. The purpose is to show my work and skills to potential [employers or clients].

Please include these exact sections in this order:

Section 1, the hero section. This is the very top of the page. It should have a large, bold headline that says [write your headline here, for example: Hi, I am Sarah, and I Design Things People Love]. Below the headline, add a short one-sentence description that says [write yours here, for example: Freelance graphic designer helping small businesses look professional]. Add two buttons side by side. The first button says View My Work and scrolls down to my portfolio section when clicked. The second button says Get in Touch and scrolls down to the contact section.

Section 2, the about section. Use the heading About Me. Include three short paragraphs. The first paragraph should say [write a few sentences about who you are]. The second paragraph should say [write about your background or how you got into your field]. The third paragraph should say [write about what makes you different or what you are passionate about]. On the right side of this section, add a simple circular placeholder for a profile photo.

Section 3, the skills section. Use the heading What I Do. Display [list your skills, for example: Logo Design, Brand Identity, Social Media Graphics, Illustration, Print Design] as individual cards in a grid. Each card should have a simple icon, the skill name, and a short one-line description of that skill. Use placeholder icons and these descriptions: [write a short description for each skill, or simply say use appropriate short descriptions].

Section 4, the portfolio section. Use the heading My Work. Display 6 placeholder project cards in a grid with 3 columns on desktop and 1 column on mobile. Each card should have a placeholder rectangle image at the top, a project name below it, a short one-sentence project description, and a View Project link.

Section 5, the testimonials section. Use the heading What People Say. Display 3 testimonial cards side by side. Each card should have a quote icon, a fake but realistic testimonial text about working with me, and a fake client name and job title below it. Make up realistic-sounding ones.

Section 6, the contact section. Use the heading Let’s Work Together. Include a short introductory line that says [something like: I am currently open to new projects. Send me a message and let’s talk.]. Add a contact form with fields for Name, Email, Subject, and Message, plus a Send Message button. Below the form, show my email address as [your email address].

Section 7, the footer. Show my name, copyright year 2026, and links to [list any social media platforms you use, such as LinkedIn, Instagram, or Behance].

Design style: [choose one: modern and minimal, bold and creative, dark and sleek, clean and professional, colourful and energetic]. Colour scheme: [list your preferred colours, for example: white background with deep navy blue and warm gold accents, or: dark charcoal background with white text and coral orange accents]. Font style: [choose one: elegant serif fonts, clean modern sans-serif fonts, or: mix of a serif heading font and a clean body font].

Make the navigation bar sticky so it stays at the top of the screen when the user scrolls. Add smooth scrolling so clicking any navigation link slides smoothly to that section. Make the entire website fully responsive for mobile phones. Add a subtle fade-in animation as each section appears when the user scrolls down the page.

Output the complete finished code as a single HTML file.”

Send that prompt. Claude will open the Artifacts panel and build your complete portfolio website in front of you.

When it finishes, click the Preview tab to see how it looks. Take your time reviewing it. Then tell Claude what to change, one set of changes at a time.

How to Build a Blog Website With Claude for Free

A blog is ideal if you want to share knowledge, document your life or travels, build an audience, or establish yourself as an expert in a topic.

Here is your complete blog website prompt:

“I need you to build me a complete, fully working blog homepage as a single HTML file with all CSS and JavaScript inside it. Here are the full details.

The blog is called [your blog name]. The tagline is [write a short tagline, for example: Practical money tips for people starting from zero]. The blog is about [describe your blog topic]. The target reader is [describe your reader, for example: young adults in their 20s who want to manage money better].

Please include these exact sections:

Section 1, the header and navigation. Show the blog name in a clean logo style on the left. On the right, show navigation links to Home, Articles, About, and Newsletter. Make the navigation collapse into a hamburger menu icon on mobile.

Section 2, the hero section. Use a large full-width banner with a background colour of [your choice]. Inside it, display the blog name in large text, the tagline below it, and a Subscribe to Newsletter button.

Section 3, the featured post. Below the hero, highlight one featured post. Show a large placeholder image on the left taking up half the width. On the right, show a category label in a coloured badge, the post title in large text [make up a realistic post title that fits my blog topic], a 50-word excerpt [make up a realistic one], the author name as [your name], the publication date as 2 October 2026, and a Read Article button.

Section 4, the latest posts grid. Use the heading Latest Articles. Display 6 blog post cards in a grid of 3 columns on desktop and 1 column on mobile. Each card should have a placeholder image, a category badge, a post title, a 25-word excerpt, the author name, the date, and a Read More link. Make up 6 realistic post titles and excerpts that fit my blog topic of [repeat your topic].

Section 5, the sidebar. This only shows on desktop screens, to the right of the latest posts. Include a newsletter signup box with a short headline, one email input field, and a Subscribe button. Below that, show a popular posts list with 5 fake post titles linked to a placeholder hash.

Section 6, the categories section. Use the heading Browse by Category. Show [list 5 categories for your blog] as clickable pill-shaped tags in a row.

Section 7, the about section. Use the heading About the Author. Show a circular placeholder for the author photo on the left. On the right, write 3 sentences: [write them here, introducing yourself and your blog briefly]. Add a Read My Story button.

Section 8, the footer. Show the blog name, a short one-line description, links to [your social platforms], and a copyright line.

Design style: [your choice, for example: clean and minimal with plenty of white space]. Colour scheme: [for example: white background, dark slate grey text, emerald green accent colour]. Font style: [for example: a clean serif font for headings and a simple sans-serif for body text].

Make the layout fully mobile responsive. Add hover effects on the post cards so they lift slightly when the mouse moves over them. Make the navigation sticky. Add smooth scrolling throughout.

Output as a single HTML file.”

How to Build an eCommerce Website With Claude for Free

An eCommerce site lets people browse your products and click through to buy. Using Claude with GitHub Pages to build a product showcase that links to an existing payment platform like Etsy, PayPal, or Stripe is the best free method. I will show you exactly how to do it.

Here is your complete eCommerce prompt:

“I need you to build me a complete, fully working online product showcase website as a single HTML file with all CSS and JavaScript inside it. Important note: the Buy Now buttons on this site will link to a placeholder URL that I will replace later with my real payment links. There is no actual shopping cart needed. This is a beautiful product display site that sends people to external payment links to complete their purchase.

Here are the full details.

The store name is [your store name]. The tagline is [for example: Handcrafted with love, delivered to your door]. The store sells [describe your products clearly, for example: handmade soy candles in a range of scents and sizes]. My target customer is [describe them, for example: people who love natural home products and thoughtful gifts].

Please include these exact sections:

Section 1, the header and navigation. Show the store name on the left in stylish text. On the right, show navigation links to Home, Shop, About, and Contact. Make it mobile responsive with a hamburger menu on small screens.

Section 2, the hero section. A full-width banner with a compelling background colour or gradient. Display the store name large, the tagline below it, and two buttons side by side: Shop Now which scrolls to the products section, and Our Story which scrolls to the about section. Add a decorative placeholder image on one side.

Section 3, the product grid. Use the heading Shop Our Collection. Display 8 product cards in a 4-column grid on desktop, 2 columns on tablet, and 1 column on mobile. For each product card, include a placeholder product image, the product name [make up 8 realistic product names that fit my store, for example if I sell candles: Lavender Dreams Candle, Eucalyptus Calm Candle, Vanilla Spice Candle, etc.], a short 20-word product description for each, the price [make up realistic prices], a star rating showing 4.5 stars, and a Buy Now button that links to #buy for now. Add a hover effect so the card lifts and the button changes colour when the mouse moves over it.

Section 4, the features section. Use the heading Why Our Customers Love Us. Display 4 feature icons with short descriptions highlighting [list 4 things about your products, for example: all natural ingredients, handcrafted in small batches, plastic-free packaging, free shipping over £30].

Section 5, the about section. Use the heading Our Story. On the left side, show a large placeholder image. On the right side, write 3 paragraphs: the first is [your origin story, for example: I started making candles in my kitchen in 2021 after struggling to find truly natural alternatives]. The second is [your values or process]. The third is [your promise to customers]. Add a Learn More button.

Section 6, the testimonials section. Use the heading What Our Customers Say. Display 3 testimonial cards. Each card should have a star rating, a realistic review quote about the product [make up 3 realistic and specific reviews that mention product details], the reviewer’s name, and their location.

Section 7, the newsletter section. Use a full-width section with a contrasting background colour. Add a headline that says [something like: Get 10% Off Your First Order], a short description inviting people to subscribe, an email input, and a Subscribe button.

Section 8, the contact section. Use the heading Get in Touch. Show a short intro line, an email address as [your email], and a simple contact form with Name, Email, and Message fields and a Send Message button.

Section 9, the footer. Show the store name, a short description, links to [your social platforms], and a copyright line.

Design style: [your choice, for example: warm, elegant, and natural feeling]. Colour scheme: [for example: warm cream background with terracotta and forest green accents]. Font: [for example: an elegant serif heading font with clean body text].

Make it fully mobile responsive. Add smooth scrolling. Add a sticky header. Make all hover animations smooth and subtle.

Output as a single HTML file.”

Once Claude builds this, you replace every #buy link with your actual Etsy listing URL, PayPal payment link, or Stripe payment link. Your store is live, and you spent zero pounds or dollars.

How to Build a WordPress Website With Claude for Free

WordPress powers over 43% of all websites on the internet, according to information from W3Techs. It is the best choice for a blog you plan to post to regularly, a news site, or any website where you want to add new content easily without touching code every time.

Here is what you need to know first. WordPress is not just one thing. It comes in two versions. WordPress.com is a fully hosted service where you sign up and it manages everything for you, similar to Wix. WordPress.org is the software you download and install on your own hosting account. For a completely free website, WordPress.com’s free plan gives you a site at yourname.wordpress.com with a decent set of features.

For this guide, I will walk you through using Claude alongside the WordPress.com free plan, because it requires zero technical setup.

How to Use Claude to Write Your WordPress Website Content

Step 1. Go to wordpress.com and click Get Started. Sign up with your email. Choose your free subdomain. Select a free theme from the library. Your basic WordPress site is now set up.

Step 2. Open Claude in a separate browser tab. Now use Claude to write every piece of content on your site before you put it in WordPress. This is where most people go wrong. They build the structure of their WordPress site and then fill it with weak, rushed content. Do not do that. Let Claude write it all first.

Here is a complete prompt to write all the content for a WordPress website in one go:

“I need you to write all the content for my [describe type] WordPress website. Please write complete, ready-to-publish content for every page listed below. Use a [describe tone, for example: friendly, professional, warm, or conversational] writing style. The website is for [describe your business or yourself] and the target audience is [describe them].

Page 1: Homepage. Write a homepage hero headline under 10 words and a sub-headline under 25 words. Then write three short feature sections each with a bold heading and a 40-word description. Then write a 60-word about section summary. Then write one customer testimonial with a realistic name and job title.

Page 2: About page. Write a full About page in first person, around 300 words. Include: who I am, how I started this [business or blog], what I believe in, and what visitors can expect from working with me or reading my content. Include a short bio at the bottom under 50 words.

Page 3: Services or Products page [replace with what applies to you]. Write headings and descriptions for [list your services or products]. For each one, write the service name, a one-sentence summary, three bullet point benefits, and a starting price or call to action phrase.

Page 4: Contact page. Write a short welcoming intro for the contact page, under 50 words. Write the labels for the form fields: Name, Email, Subject, Message.

Page 5: Blog post 1. Write a full blog post of around 600 words on the topic [give your topic]. Include an engaging title, an introduction that hooks the reader, three main sections each with a subheading, and a conclusion with a call to action.

Also write: an SEO meta title under 60 characters for each page, an SEO meta description under 155 characters for each page, and 5 suggested blog post titles for future articles.”

Claude will produce all of that content. You copy each piece and paste it into the corresponding pages in your WordPress editor.

How Claude Customises the Look of Your WordPress Site

Every WordPress free theme allows you to add custom CSS. Custom CSS is code that changes how your site looks without touching the theme’s core files. You do not need to write it. Claude writes it for you.

In WordPress.com, go to Appearance, then click Additional CSS. That is where you paste anything Claude gives you.

Use this prompt when you want to change how your WordPress site looks:

“I am using a WordPress website with a free theme. I want to make the following visual changes using custom CSS only. Please write clean CSS I can paste into the Additional CSS box in WordPress.

Change 1: [describe it clearly, for example: make the site header background colour dark navy #0a192f with white text].

Change 2: [for example: change all the main headings on the site to use the Google Font Playfair Display].

Change 3: [for example: add a subtle box shadow to every blog post card on the homepage].

Change 4: [for example: make the primary call-to-action buttons coral red with white text and rounded corners].

Change 5: [for example: increase the body text size to 17px for better readability on mobile].

Please output only the CSS. No explanations needed.”

Paste Claude’s CSS output directly into WordPress. Your site updates instantly.

How to Build a Sports Website With Claude for Free

Whether you run a local football club, support a favourite team, run a fantasy sports blog, or want to cover sports news, Claude handles sports websites extremely well. The code it writes for fixture tables, squad pages, and league standings is clean and works beautifully on mobile.

Here is the complete prompt for a local sports club website:

“I need you to build me a complete, fully working sports club website as a single HTML file with all CSS and JavaScript inside it. Here are the full details.

The club is called [your club name]. The sport is [your sport, for example: football, cricket, basketball]. The club is based in [your town or city]. The club colours are [list 2 or 3 colours].

Please include these exact sections:

Section 1, the header and navigation. Show the club name and a placeholder circle for the club badge on the left. Navigation links on the right: Home, Fixtures, Squad, Coaches, Gallery, Contact. Mobile hamburger menu on small screens.

Section 2, the hero section. A full-width banner in the club colours. Large club name in the centre. A short motivational tagline below it, for example [make up a realistic one that fits the sport and the club]. Two buttons: View Fixtures which scrolls to the fixtures section, and Join the Club which scrolls to the contact section.

Section 3, the latest news strip. A narrow horizontal banner below the hero with 3 short news headlines in a marquee-style scroll or static display. Make up 3 realistic short news headlines that fit this type of club and sport.

Section 4, the next match highlight. Use the heading Next Match. Display a large match card showing: home team name as [club name], versus, away team name as [make up a realistic opponent name], the date as [choose a date in October 2026], the time, and the venue as [make up a venue name]. Add a large orange or gold Tickets Available badge.

Section 5, the fixtures table. Use the heading Upcoming Fixtures. Display a clean, mobile-friendly table with columns for Date, Opponent, Venue, Home or Away, and Result. Populate 8 rows with realistic upcoming fixtures for a [sport] club, mixing home and away games. Leave the Result column blank for future matches and fill in realistic results for the first 2 past matches.

Section 6, the squad section. Use the heading Our Squad. Display 10 player cards in a responsive grid. Each card should have a circular placeholder for the player photo, the player number in the top corner, the player’s name [make up 10 realistic names], their position, and their nationality shown as a small emoji flag. Group them into Goalkeepers, Defenders, Midfielders, and Forwards.

Section 7, the coaches section. Use the heading The Coaching Team. Display 3 coach profile cards. Each card has a circular photo placeholder, the coach name [make up 3 realistic names], their role [for example: Head Coach, Assistant Coach, Fitness Coach], and a 2-sentence bio about them.

Section 8, the photo gallery. Use the heading Club Gallery. Display 6 placeholder image boxes in a grid. On desktop, show 3 per row. On mobile, show 1 per row. Add a hover overlay effect that darkens the image and shows a zoom icon when the mouse moves over it.

Section 9, the contact and join section. Use the heading Join Riverside FC. Add a short paragraph inviting new players and volunteers. Then show a form with Name, Age, Position Played, Experience Level shown as a dropdown with the options: Beginner, Recreational, and Competitive, Email, and Phone Number fields, plus a Submit Registration button.

Section 10, the footer. Show the club name, address as [your address or a placeholder], social media links, and a copyright line.

Design style: bold and energetic. Use the club colours [repeat them] prominently throughout. Font: strong, modern sans-serif.

Make it fully mobile responsive. Make the fixtures table scroll horizontally on small screens so it does not get squashed. Add smooth scrolling and a sticky navigation bar.

Output as a single HTML file.”

How to Build a Business Website With Claude for Free

A business website builds trust with potential customers and gives your business a professional online presence. Here is your complete prompt:

“I need you to build me a complete, fully working small business website as a single HTML file with all CSS and JavaScript inside it. Here are the full details.

The business is called [your business name]. The business type is [for example: landscaping company, beauty salon, accountancy practice, plumbing service, online tutoring service]. The business is based in [your city or town]. The unique selling point is [what makes you different, for example: 15 years of experience, same-day service, fully insured, or family-run].

Please include these exact sections in this order:

Section 1, the header. Show the business name on the left and navigation links on the right for Home, Services, About, Testimonials, and Contact. Make it stick to the top of the screen when scrolling. Add a prominent Call Now button in the header in a contrasting colour showing [your phone number or write ‘placeholder number’].

Section 2, the hero section. A full-width bold banner. On the left side, display a large powerful headline [for example: Trusted Landscaping Services in Manchester Since 2009]. Below that, a supporting sentence [for example: We transform gardens and outdoor spaces that your neighbours will notice]. Below that, show a row of three small trust badges: one that says [number] Years Experience, one that says [number]+ Happy Customers, and one that says Fully Insured. Add two buttons: Get a Free Quote which scrolls to the contact section, and See Our Work which scrolls to the services section. On the right side, show a large placeholder image representing the business.

Section 3, the services section. Use the heading Our Services. Display [list your services, for example: 4 to 6 services] as individual cards in a grid. Each card should have an icon, the service name in bold, a 40-word description of what that service includes, and a Learn More link. Make up realistic service descriptions that match the type of business.

Section 4, the why choose us section. Use the heading Why Customers Choose [business name]. Display 4 reasons in a two-column grid. Each reason has a bold heading and a 30-word explanation. Use these as the reasons: [list 4 real reasons, or say ‘make up 4 realistic and compelling reasons for this type of business’].

Section 5, the about section. Use the heading About Us. On the left, a large placeholder image. On the right, write 3 paragraphs in first person: the first about [how the business started], the second about [what the team values or how you work], the third about [a specific outcome or transformation you deliver for customers]. Add a Meet the Team button.

Section 6, the testimonials section. Use the heading What Our Customers Say. Display 3 testimonials as cards with a star rating, a specific and realistic review quote mentioning specific service details, the customer name, and their town.

Section 7, the call to action banner. A full-width contrasting colour section with a bold headline that says [something urgent and relevant like: Ready to Transform Your Space? Get a Free Quote Today]. Add a button that scrolls to the contact form.

Section 8, the contact section. Use the heading Get in Touch. Show a two-column layout. On the left: the address [placeholder], phone number [placeholder], email [your email], and business hours [make up realistic ones]. On the right: a contact form with Name, Phone Number, Email, Service Required shown as a dropdown listing all your services, and Message, plus a Send Enquiry button.

Section 9, the footer. Business name, short tagline, navigation links, social media links, and a copyright line.

Design style: [professional and trustworthy, modern and clean, warm and approachable, bold and confident]. Colour scheme: [your choice]. Font: [your choice].

Make it fully mobile responsive. Add hover effects on service cards. Make the header sticky. Add smooth scrolling. Make phone numbers clickable so mobile users can tap to call.

Output as a single HTML file.”

How to Build a 3D Website With Claude for Free

You probably think 3D websites are only for big companies with big budgets. They are not. Claude can write Three.js code, which is a free JavaScript library that creates 3D graphics in any browser. No downloads required. No plugins. Nothing to install. It just works.

Here is the complete prompt:

“I need you to build me a complete, visually stunning single-page website with a real 3D element using Three.js loaded from CDN. Output everything as a single HTML file with all CSS and JavaScript inside it. Here are the full details.

The page is for [describe what the page is about, for example: a digital agency called NOVA Studio, or: a personal brand for a creative technologist named Alex Kim].

The 3D element I want is: [choose one of the following and describe it: A slowly rotating 3D Earth globe with a soft light source creating a day-and-night effect. OR: A field of 3D floating geometric shapes, cubes or spheres, that drift slowly in different directions and react by moving away when the mouse gets close. OR: A 3D animated text in the style of neon letters that appear to float and glow in 3D space. OR: A 3D particle system that looks like a galaxy of stars slowly rotating.]

Please build this exact layout:

The page has a pure black or very dark background. The 3D element sits centred in the viewport and fills most of the screen, rotating slowly on its own. Over the top of the 3D element, overlay the following text: a large bold headline that says [your headline], a short subheadline below it that says [your subheadline], and one glowing call-to-action button that says [your button text].

Below the 3D section, add a clean content section with a dark background and three feature columns with icons, headings, and short descriptions [make up relevant ones for the page concept I described].

Add a minimal dark footer with [your name or business name] and a copyright line.

Make the 3D element and the full layout responsive on mobile screens. On mobile, the 3D element should scale down to fit the screen width.

Add a smooth fade-in animation so the headline text and button appear gradually after the page loads.

Output as a single HTML file. Make sure the Three.js CDN link is from an official CDN source.”

How to Build a Landing Page With Claude for Free

A landing page is a single-page website designed to get one specific action from visitors. It might be signing up for a newsletter, downloading a free guide, joining a waitlist, or booking a consultation call. Every element on the page serves that one goal.

Here is the complete prompt:

“I need you to build me a high-converting single landing page as a complete HTML file with all CSS and JavaScript inside it. The one goal of this page is to get visitors to [describe your one goal clearly, for example: sign up for my free email newsletter, download my free meal planning guide, or book a free 30-minute consultation call].

Here are the full details.

What this page is offering: [describe the offer clearly, for example: a free 7-day email course on starting a freelance business from scratch].

Who this is for: [describe your target person, for example: people who want to leave their 9-5 job and start freelancing but do not know where to begin].

The promise: [what will they get or be able to do after taking the offer, for example: by the end of the 7 days, they will have their first freelance service package defined, their rates set, and their first client pitch ready to send].

Please include these exact sections:

Section 1, the very top of the page. Show a narrow announcement bar in a contrasting colour that says [something creating urgency, for example: Limited spots available, join 2,400 others who have already signed up].

Section 2, the hero section. A large, bold, benefit-driven headline that says [make this extremely specific and compelling for my offer]. Below that, a supporting subheadline in smaller text. Below that, a short social proof line that says [make up a realistic one, for example: Join 2,418 people already building their freelance future]. Then the main sign-up form. The form should have a First Name field, an Email Address field, and a large prominent button that says [your call to action, for example: Send Me the Free Course or Yes, I Want the Free Guide]. Below the button, add a line in small grey text that says: 100% free. No spam. Unsubscribe any time.

Section 3, the what you will get section. Use the heading Here is Exactly What You Get. Display [3 to 5 specific outcomes or lessons] as rows. Each row has a colourful numbered circle on the left, a bold short outcome heading, and a 30-word description of what they will learn or receive. Make these extremely specific and relevant to my offer of [repeat your offer].

Section 4, the who this is for section. Use the heading This is For You If. Display 5 bullet points starting with the word You. Each one should describe a specific pain point or situation my target audience is in. Make them feel seen and understood. Write these for the audience I described: [repeat your audience description].

Section 5, the social proof section. Use the heading People Are Already Getting Results. Display 3 large testimonial cards with a realistic photo placeholder, a specific and detailed testimonial quote that mentions a specific result, the person’s name, and their situation before finding this resource. Make these feel real and specific.

Section 6, the about section. Keep this short. Use the heading Who is Behind This. One circular photo placeholder. Two short paragraphs written in first person: one about who I am and why I created this, one about my credentials or experience. [Fill in your own details here or say make something realistic based on my offer].

Section 7, the FAQ section. Use the heading Common Questions. Display 5 questions in an accordion style where clicking a question reveals the answer. The questions should address the most likely objections someone might have before signing up, such as: Is this really free? How much time does it take? What if I am a complete beginner? When do the emails arrive? How do I unsubscribe? Write realistic, reassuring answers.

Section 8, the final call to action. Repeat the sign-up form one more time with a bold headline above it that says [something that reinforces the value, for example: Ready to Start? Your first email arrives in 5 minutes].

Section 9, a minimal footer with your name or business name, a privacy policy link that goes to #, and a copyright line.

Design style: clean, focused, and conversion-optimised. Nothing should distract from the main goal. Lots of white space. Colour scheme: [choose one primary accent colour and keep everything else clean]. Font: clean, readable sans-serif.

No navigation menu. A landing page should have no navigation links that take people away from the page. Make the CTA button the most prominent element on the page. Make it fully mobile responsive.

Output as a single HTML file.”

How to Use Claude With Wix to Build a Website for Free

Wix is a visual website builder where you drag elements around a canvas and drop them where you want. You cannot export code from Wix, so Claude’s role here is different. Claude becomes your content writer, your SEO strategist, and your creative director. Wix handles the actual visual layout.

Before you open Wix, do this with Claude first.

Use this prompt to prepare all your Wix content in one session:

“I am about to build a website on Wix for [describe your business or yourself]. I need you to prepare all the content I will paste into my Wix website. Please write the following and present each item clearly labelled so I know exactly where to put it.

1. Homepage hero headline: write one powerful headline under 10 words that immediately communicates what I do and who it is for.
2. Homepage hero subheadline: write one sentence under 25 words that expands on the headline and includes a benefit.
3. Homepage call-to-action button text: suggest 3 options for the button text and explain which to choose and why.
4. About page: write a full About page in first person, around 250 words. It should cover who I am, how I got started, what I believe in, and what makes my approach different. It should feel warm, genuine, and human. [Give me your own story in rough notes form here and I will transform it.]
5. Services or offerings section: for each of my [list your services], write a 40-word description that focuses on outcomes, not just what the service is. Make the language specific and compelling.
6. Testimonials: write 3 realistic testimonials. Each one should mention a specific result, feel genuine rather than generic, include a realistic full name and job title or situation.
7. FAQ section: write 5 questions and answers that address the most common questions or objections someone would have before choosing [your type of business].
8. Contact page intro: write 2 short sentences welcoming visitors to the contact page and encouraging them to reach out.
9. SEO meta title and meta description for each of these pages: Homepage, About, Services, and Contact. Meta titles must be under 60 characters. Meta descriptions must be under 155 characters. Include the keyword [your main keyword] in the homepage meta title and description.
10. Footer tagline: write one short memorable line under 12 words that captures what my brand stands for.

My business is [describe it in detail]. My target customer is [describe them in detail]. My tone is [for example: friendly and professional, bold and energetic, calm and reassuring].”

Paste every result into your Wix editor. Your Wix site will have far stronger content than almost anything else built with a page builder, because every word was crafted specifically for your audience.

For an even simpler AI-powered website builder, read the full breakdown of Hostinger AI Builder, which creates a complete site from a few prompts and handles the hosting in the same step.

How to Save Your Claude Website and Make It a Real File

When Claude finishes building your website, you need to save it as a real file on your computer. Here is exactly how to do that, step by step.

In the Artifacts panel on the right side of the Claude chat, click the tab that says Code. You will see a lot of text that starts with the words “less than sign DOCTYPE html greater than sign.” That is your website code. Do not be intimidated by it. You do not need to understand it.

Click anywhere inside that code panel. Press Control and A at the same time on Windows, or Command and A on Mac. This selects all the code. Now press Control and C on Windows, or Command and C on Mac. This copies it.

Now open Notepad if you are on Windows. To find Notepad, click the Start button at the bottom left of your screen, type Notepad, and click on it when it appears. If you are on a Mac, open TextEdit. To find it, click the magnifying glass icon at the top right of your screen, type TextEdit, and click on it.

In Notepad, press Control and V to paste the code. You will see the entire website code appear. On Mac, if you are using TextEdit, first go to the Format menu at the top, click Make Plain Text, and then paste.

Now go to File, then Save As. In the save window, navigate to your Desktop or a folder you can find easily. In the file name box, delete whatever is there and type exactly this: index.html

Make sure the file type is set to All Files on Windows, not Text Document. If you save it as index.txt it will not work as a website. It must end in .html.

Click Save.

Now find that file on your desktop. Double-click it. Your web browser will open and you will see your complete website. That is your website file. Every time you double-click it, your browser opens it exactly as it will look on the internet.

What to Do When Your Website Has Errors (And It Will Sometimes)

Let me be straight with you about something. Claude is remarkably good at writing website code, but errors happen. Sometimes a section looks misaligned. Sometimes a button does not scroll to the right place. Sometimes you open your HTML file in the browser and the whole page looks like plain text with no styling at all.

None of these situations mean something is seriously wrong. Every single one of them is fixable, and most of them take under five minutes to resolve when you know what to do.

This section walks you through every type of error you are likely to encounter, how to identify exactly what went wrong, how to describe it to Claude clearly so it fixes it on the first attempt, and what to do when the error is something you can spot and fix yourself without using any of your free Claude messages.

Why Errors Happen in the First Place

Claude generates code based on your description, and occasionally two things happen that cause visual or functional errors. The first is that Claude misinterprets part of your instruction and produces code that does what it understood, not what you meant. The second is that different browsers read CSS code in slightly different ways, and something that looks perfect in Chrome might look slightly different in Safari or Firefox.

Neither of these is a disaster. Both are completely normal, even for professional developers. The difference between a beginner and an experienced developer is not that experienced developers never hit errors. It is that they know how to identify the error quickly and describe it precisely so it gets fixed fast. I am going to give you that same skill right now.

Step 1: Open Your Website in a Browser and Look Carefully

Before you tell Claude anything is wrong, open your index.html file in your browser by double-clicking it on your desktop. Look at it the way your visitors will look at it. Scroll through the whole page slowly from top to bottom.

As you look, ask yourself these specific questions for each section:

Does the layout look like what you asked for, or is something in the wrong position?

Is the text readable? Is the font size too small, too large, or are some characters showing as boxes or question marks?

Are the colours correct? Are there any sections that appear completely white or completely black when they should have colour?

Do the navigation links work? Click each one and see if it scrolls to the right section.

Does the contact form look correct? Are all the fields visible? Does the Submit button appear?

Open the page on your phone as well. Email the index.html file to yourself, open the email on your phone, and tap the attachment to open it. Check whether each section displays properly on the smaller screen.

Write down every problem you find before going back to Claude. Do not just note that something looks wrong. Write down specifically what you see versus what you expected to see. That specific detail is what gets errors fixed on the first attempt.

Step 2: Identify Which Type of Error You Have

Most errors that appear in Claude-built websites fall into four categories. Knowing which category yours belongs to helps you fix it faster.

Layout errors are when things appear in the wrong position. A navigation bar that should be horizontal shows as a vertical list. A two-column section stacks into one column on desktop instead of only on mobile. Images appear outside their container and spill into other sections. These are CSS errors and Claude fixes them reliably when you describe what you see.

Styling errors are when colours, fonts, or sizes are not what you expected. A section appears with a white background when you wanted dark blue. Text appears in the default browser font instead of the font you asked for. Buttons appear grey and unstyled instead of with the colour and border radius you specified. These are also CSS errors.

Functionality errors are when something interactive does not work. Clicking a navigation link does nothing or jumps to the wrong section. The mobile hamburger menu icon appears but tapping it does not open the navigation. A hover effect you asked for does not appear when you move the mouse over the element. These are JavaScript errors in most cases.

Complete display failure is when you open your HTML file in the browser and see only plain unstyled text. No colours, no layout, just black text on a white background. This almost always happens for one of two reasons. Either the file was not saved correctly as an .html file, meaning it was saved as a .txt file instead, or the CSS section of the code was accidentally cut off when you copied it from Claude.

How to Fix a Complete Display Failure

If your website is showing as plain text with no styling, do this first before going back to Claude.

Right-click on your index.html file on your desktop and click Open With, then choose your browser if it is not already the default. If the page still shows plain text, right-click on the page inside the browser and click View Page Source. You will see the raw code. Look near the very top for a line that starts with the word “style” inside angle brackets. If you do not see it, the CSS portion of your code is missing.

Go back to Claude in your conversation and say exactly this:

“When I open my HTML file in the browser, the page shows only plain unstyled text with no colours or layout. There are no styles being applied at all. Can you send me the complete file again, making sure the style section is fully included inside the head section of the HTML file.”

Claude will regenerate the complete file with all styling intact. Copy the code again, following the same steps from the How to Save Your Claude Website section of this guide, making sure to save it as index.html and not as a text file.

How to Describe an Error to Claude So It Gets Fixed on the First Attempt

This is the skill that saves the most time. The difference between a vague error report and a precise one is the difference between getting a fix on the first message or going back and forth five times.

Here is the format that works every time. Use this as a template:

“I found [number] problems when I opened the website in my browser. Please fix all of them in one go and send me the updated complete HTML file.

Problem 1: [Name the section where the problem is]. What I see: [describe exactly what is visible]. What I expected: [describe what you asked for originally]. Example: Problem 1, the navigation bar. What I see: the navigation links are stacked vertically in a column on desktop. What I expected: they should be displayed horizontally in a single row from left to right.

Problem 2: [Repeat the same format].

Problem 3: [Continue for each problem you found].”

Grouping all your problems into one message is important. Every message you send uses part of your free session limit. Sending five separate single-problem messages uses five times more of your allowance than one message that lists all five problems together.

The Most Common Errors and Exactly How to Describe Them to Claude

Here are the errors that come up most often when building websites with Claude, written with the exact description you should paste into Claude when you encounter each one.

Navigation links do not scroll to the correct section.

“When I click the navigation links, they do not scroll to the correct sections. The Home link does nothing, the About link jumps to the wrong place, and the Contact link does not respond. Please check that the link href values in the navigation match the id values on the corresponding sections and fix any mismatches.”

The mobile hamburger menu icon appears but tapping it does nothing.

“On mobile, the hamburger menu icon appears in the top right corner but when I tap it, the navigation menu does not open or close. Please check the JavaScript function that controls the hamburger menu toggle and make sure it is correct.”

A section has a white background instead of the colour I requested.

“The services section is showing a white background instead of the [colour name] background I asked for. Please update the background colour of the services section to [describe the colour, for example: dark navy #0a192f] and make sure there is enough contrast between the background colour and the text colour so everything is readable.”

Images are not showing and appear as broken image icons.

“All the placeholder images on my website are showing as broken image icons with a small icon in the top left corner instead of the placeholder images. Please replace all image src values with valid placeholder image URLs using a free placeholder service like https://placehold.co. Use relevant sizes for each image, for example 800×500 for hero images and 400×300 for card images.”

Text is overlapping another element.

“In the hero section, the headline text is overlapping the navigation bar at the top of the page. Part of the headline is hidden behind the navigation. Please add enough top padding to the hero section to account for the height of the sticky navigation bar so the text is fully visible.”

The layout breaks on mobile but looks fine on desktop.

“The website looks correct on my desktop browser but when I open it on my phone, [describe exactly what looks wrong, for example: the three-column service cards stack into one column correctly but the text inside each card overflows outside the card boundaries and the prices are cut off on the right side]. Please fix the mobile styles for this specific issue.”

A button does nothing when clicked.

“The Get a Free Quote button in the hero section does nothing when I click it. It should scroll smoothly down to the contact form section at the bottom of the page. Please check the button’s onclick attribute or the href value and make sure it correctly targets the contact section’s id.”

Fonts are not loading and showing as the default browser font.

“The fonts I requested are not loading. The headings are showing in a generic serif font and the body text is showing in the default browser font instead of the fonts I specified. Please load the fonts from Google Fonts by adding the correct Google Fonts link tag to the head section and applying the font-family in the CSS.”

The contact form submit button does not appear to do anything.

“When I fill in the contact form and click the Submit button, nothing visible happens. No success message appears. Please add a visible success message that appears below the form after the Submit button is clicked, saying something like: Thank you for your message. I will be in touch within 24 hours. Show the message in green text.”

How to Use Your Browser to Find Errors Before Asking Claude

This is a beginner-friendly way to see more detail about what is going wrong on your page. You do not need to understand what all of it means. You just need to know how to find the error message and copy it to Claude.

On any browser on a desktop or laptop, press F12 on your keyboard. On a Mac, press Command, Option, and I together. A panel will open along the side or bottom of your browser. This is called the browser developer tools. It sounds technical but for our purposes, you only need one part of it.

Click the tab in that panel that says Console. The Console tab shows error messages in red text. These messages are generated by your browser as it tries to read your website code. If there are red messages there, they are clues about what is broken.

You do not need to understand what the messages say. Copy all the red text in the console by clicking on the first red message, scrolling to the last one, holding Shift and clicking it to select all of them, then right-clicking and choosing Copy.

Go to Claude and paste those error messages with this prompt:

“My browser console is showing these error messages when I open my website. Please read them and fix whatever is causing them in my HTML file.

[paste the copied error messages here]

Please send me the corrected complete HTML file.”

Claude will read the error messages and fix the underlying issues. This approach fixes problems that are hard to describe visually, because you are giving Claude the exact technical output from the browser rather than trying to put the issue into words.

How to Edit Your Website After It Is Built

Your website is live. People can visit it. But now you want to change the phone number in the footer, update a price, add a new service, swap the hero headline, or change the whole colour scheme. How do you do that without starting from scratch?

There are two types of edits. Simple edits are small text changes that you can make directly in the HTML file using a text editor, without going back to Claude at all. This saves your free Claude messages for bigger changes. Complex edits are structural, design, or functionality changes where asking Claude is the right approach.

I will walk you through both.

Simple Edits You Can Make Directly in Your HTML File (No Claude Needed)

Open your index.html file in a text editor. On Windows, right-click the file on your desktop, click Open With, and choose Notepad. On Mac, right-click the file, click Open With, and choose TextEdit.

You will see your website code. It looks intimidating at first but you only need to find the specific text you want to change. Here is how.

Press Control and F on Windows, or Command and F on Mac. A small search box appears. This is the Find function. You can type any word or phrase into it and your text editor will jump directly to that word in the code.

For example, if you want to change the phone number in the footer from 07700 900123 to 07800 123456, press Control F, type 07700 900123 in the search box, and press Enter. Your editor jumps to that exact spot in the code. Click directly on the text in the code, delete the old number, and type the new one.

You can change any visible text on your website this way. Headlines, descriptions, prices, contact details, button labels, testimonials, anything that appears as readable words on your page exists as readable words in your HTML file and can be found and changed with the Find function.

After making your change, press Control and S on Windows or Command and S on Mac to save the file. Then double-click the file to open it in your browser and confirm the change looks correct. Then re-upload the updated file to your hosting platform, whether that is Cloudflare Pages, GitHub Pages, or Netlify.

How to Change a Colour in Your HTML File Without Claude

Colours in HTML code are stored as either hex codes or colour names. A hex code looks like this: #0a192f or #ff6b6b. It always starts with a hash symbol followed by six letters or numbers. A colour name looks like this: navy or coral.

To change a colour, press Control F to open the Find function and type the hex code or colour name you want to replace. For example, if your primary button colour is coral and you want to change it to deep purple, type #ff6b6b or whatever the specific hex code is into the search box.

A better approach for changing a colour that appears in multiple places across the page is to use Find and Replace. In Notepad on Windows, go to the Edit menu and click Replace. In TextEdit on Mac, go to the Format menu and click Find, then Find and Replace. Type the old colour code in the Find field and the new colour code in the Replace field. Click Replace All. Every instance of that colour in your entire file updates at once.

To find the right hex code for any colour you want to use, search for “hex colour picker” in Google. The Google colour picker appears directly in the search results. Choose your colour visually and Google shows you the hex code to use.

Save your file after making the colour changes and open it in your browser to confirm everything looks correct before re-uploading it to your host.

How to Add a New Paragraph or Section of Text Without Claude

Find the section of your HTML file where you want to add text using the Find function. For example, if you want to add a new paragraph to your About section, search for a distinctive phrase from your existing About section text such as your own name or a unique phrase you know is in that section.

Once you find that spot, look for the paragraph tag, which appears in the code as the letter p inside angle brackets. A paragraph in HTML looks like this:

<p>This is an existing paragraph of text.</p>

To add a new paragraph directly after an existing one, click at the very end of the closing tag, which is the slash p inside angle brackets, and press Enter to create a new line. Then type:

<p>This is my new paragraph text that I am adding.</p>

Press Control and S to save, open the file in your browser, and your new paragraph appears in the correct location on the page.

If this feels difficult for your first attempt, do not worry. The Claude method below is simpler and just as fast.

How to Ask Claude to Make Edits After Your Site Is Built

For any change bigger than a simple text update or colour swap, going back to Claude is the right approach. Claude can add entirely new sections, redesign existing ones, add new interactive features, update the layout for mobile, or restructure the navigation.

There is one important thing to know about making edits through Claude after the site is already built.

You cannot just go to a new Claude conversation and say “update my website.” Claude has no memory of your previous conversations. Each new conversation starts completely fresh. Claude does not know what your website looks like, what code it contains, or what changes you have already made.

You have two options for editing through Claude after the original build.

Option 1: Continue in the same original conversation.

If you have not closed the original chat where Claude built your website, go back to it. Scroll to the bottom and type your edit request. Claude still has full context of everything in that conversation, including the last version of the code it produced. This is the easiest option and works well as long as you have not hit your usage limit and the conversation is not extremely long.

Option 2: Start a fresh conversation and paste your current code.

If your original conversation is gone, if you are in a new session, or if your conversation has grown very long and is using tokens inefficiently, start a new Claude conversation. Open your current index.html file in your text editor, select all the code with Control A, copy it with Control C, and paste it into your new Claude message along with your edit request.

Here is the prompt template for submitting your existing code for edits:

“Below is the complete HTML code for my current website. Please make the following changes to it and send me the full updated complete HTML file when you are done. Do not remove any existing sections or content unless I specifically ask you to.

Changes I need:

Change 1: [describe it clearly and specifically, for example: Replace the current hero headline that says ‘Hi I am Sarah’ with a new headline that says ‘Award-Winning Graphic Design for Growing Businesses’].

Change 2: [for example: Add a new section between the About section and the Contact section. The new section should be called Our Process and show 4 steps in a horizontal numbered flow. The steps are: Discovery Call, Concept Design, Revisions, and Final Delivery. Each step has a number in a circle, a bold heading, and a 25-word description. Make up appropriate descriptions].

Change 3: [for example: Change the primary button colour throughout the entire site from coral #ff6b6b to deep purple #6c3fc5. Update the hover colour to a slightly darker purple #5a33a8].

Change 4: [for example: The services section currently shows 4 cards in a 2-column grid. Please add a fifth card for a new service called Brand Refresh. The description is: A complete visual overhaul for businesses ready to evolve. New logo, colour palette, and brand guidelines delivered in 10 working days. Price from £750].

[paste your complete HTML code below this line]”

How to Update Your Live Website After Making Edits

Every time you make changes to your index.html file, whether you edited it directly in a text editor or got an updated version from Claude, you need to re-upload the file to your hosting platform to make the changes appear live on the internet.

Here is how to update on each platform.

Updating on Cloudflare Pages: Log in to your Cloudflare account at cloudflare.com. Click Pages in the left sidebar. Click on your project name. Click the Upload button or find the option to upload a new deployment. Upload your updated index.html file. Cloudflare processes it in about 10 to 20 seconds and your live site updates automatically.

Updating on GitHub Pages: Log in to your GitHub account at github.com. Click on your repository name. Find your index.html file in the repository and click on it. Look for the pencil edit icon in the top right area of the file view, or click the button that says Add file and choose Upload files to replace the existing one. If you upload a new file, name it exactly index.html so it overwrites the old one. GitHub rebuilds your site automatically within about one to two minutes.

Updating on Netlify: Log in to your Netlify account at netlify.com. Click on your site name in the dashboard. Look for the Deploys section and find the drag and drop area. Drag your updated index.html file onto it. Netlify deploys the update within seconds.

How to Add New Images to Your Website

When Claude built your website, it used placeholder images from a service like placehold.co. These are grey rectangles that show dimensions. At some point you will want to replace them with real photos.

The simplest way to add real images to a static HTML website hosted on GitHub Pages or Cloudflare Pages is to upload your images to the same repository or project folder as your index.html file and update the image references in the code to point to your image filenames.

Go back to Claude with your current code and use this prompt:

“My website currently uses placeholder images. I am going to upload my real images to the same folder as my HTML file. The image filenames I will use are: [list your actual image filenames, for example: hero-photo.jpg, about-me.jpg, project-1.jpg, project-2.jpg, project-3.jpg]. Please update the HTML so each image tag points to the correct filename. Here is the section where the images appear: [describe which sections have images, for example: the hero section, the about section, and the portfolio grid]. Send me the complete updated HTML file.”

Upload both the updated index.html file and your image files to your hosting platform together. Your real photos will appear on the live site.

An even simpler alternative is to upload your photos to a free image hosting service like Cloudinary or ImgBB, copy the direct image URL they give you, and paste that URL into the image src attribute in your HTML code instead of uploading the files yourself. For this approach, use Find in your text editor to locate each placeholder image URL and replace it with your real image URL one by one.

How to Know Whether to Edit Yourself or Ask Claude

Use this simple decision guide when you need to make a change to your website.

If the change involves replacing existing text, numbers, an email address, a phone number, or a short phrase with updated text, do it yourself in the text editor using the Find function. It is faster than going back to Claude and it saves your free messages.

If the change involves a colour swap across the whole site, do it yourself in the text editor using Find and Replace. It takes about 30 seconds.

If the change involves adding a new section, restructuring the layout, adding a new interactive feature, fixing a broken element, or making your site look significantly different in any way, ask Claude. Paste your current full code into a new Claude message along with a clear description of what you want changed.

If you are not sure which category your change falls into, ask Claude. That is what it is there for.

A Note on Keeping a Backup of Your Website Code

Every time Claude produces an updated version of your website, save a copy before you start the next round of changes. Create a folder on your desktop called Website Backups. Each time you get a new version from Claude, save a copy of the HTML file inside that folder with the date in the filename, for example index-2oct2026.html.

This takes ten seconds and saves enormous frustration. If you make twenty changes and decide you preferred the version from last Tuesday, you have it saved and can go back to it instantly rather than asking Claude to rebuild everything.

How to Put Your Website on the Internet for Free

Saving the file on your computer means only you can see it. To make it live so anyone in the world can visit it, you need to upload it to a hosting platform. Here are the best completely free options with exact steps for each.

Cloudflare Pages: The Best Free Host for Your Claude Website

Cloudflare Pages is the strongest free hosting choice available in 2026. Its free plan includes unlimited bandwidth, which means no matter how many people visit your site, you will never get a bill or have your site taken offline for being too popular. It also includes automatic HTTPS, which is the padlock icon that appears in browsers showing a site is secure. Custom domains are supported for free too.

Here is exactly how to get your site live on Cloudflare Pages.

Open your browser and go to pages.cloudflare.com. Click Sign Up and create a free Cloudflare account using your email address.

Once you are logged in, you will see a dashboard. Look for Pages in the left sidebar and click it. Click the button that says Create a Project. On the next screen, you will see two options. Click the one that says Upload Assets. This is the simplest option that does not require any technical setup.

You will see a page that says Upload your project files. Give your project a name in the box, for example myportfolio or mybusiness. Then drag your index.html file from your desktop and drop it into the upload area, or click the upload area and browse to find the file on your computer.

Click Deploy. Cloudflare takes about 10 to 20 seconds to process the file. When it is done, it gives you a URL that looks something like myportfolio.pages.dev. Click that link. Your website is now live on the internet. Anyone in the world can visit it right now.

To update your site later, go back to Cloudflare Pages, find your project, and upload a new version of the file. The old version is replaced immediately.

GitHub Pages: Free Hosting With a Tech-Friendly Workflow

GitHub Pages hosts websites directly from code that you store in a GitHub repository. A repository is essentially a folder on GitHub’s servers where your files live. GitHub Pages reads the files from that folder and serves them as a live website.

Here is exactly how to do it from scratch, even if you have never heard of GitHub before.

Go to github.com and click Sign Up. Create a free account with your email address and a username. GitHub will send you a verification email. Confirm it.

Once you are logged in, look for a green button that says New in the top left area. Click it. This creates a new repository. In the Repository Name field, type a name with no spaces, for example my-portfolio or my-shop. Under the name, make sure Public is selected, not Private. Scroll to the bottom and click Create Repository.

You will now see your empty repository. Look for a link that says Uploading an existing file or a button that says Add file and then Upload files. Click it. Drag your index.html file from your desktop into the upload area. In the box below that says Commit changes, type a short note like First upload. Click the green Commit changes button.

Your file is now in GitHub. Next, go to the Settings tab in your repository. It is in the row of tabs near the top. Scroll down the left sidebar and click Pages. Under the heading Build and Deployment, look for Source. Use the dropdown to select Deploy from a branch. Below that, choose your branch, which is usually called main. Click Save.

GitHub takes about one to two minutes to build your site. Refresh the page and you will see a message at the top that says Your site is live at followed by your URL, which looks like yourusername.github.io/my-portfolio.

Click that URL. Your website is live.

Netlify: Drag, Drop, and Done

Netlify offers one of the simplest drag-and-drop deployments available. Go to netlify.com and sign up for a free account. After logging in, scroll to the bottom of the main dashboard page. You will see a large area that says Drag and drop your site output folder here. Drag your index.html file onto that area. Netlify deploys it in seconds and gives you a live URL immediately.

Netlify is particularly useful if your website has a contact form, because Netlify can handle form submissions on its free plan and send them directly to your email address, without any coding needed on your part. To activate this, tell Claude: “Add the attribute netlify to my contact form’s opening form tag.” Claude will modify the code. Upload the updated file to Netlify and form submissions will arrive in your Netlify dashboard.

Adding a Custom Domain to Your Free Website

Your free website URL will be something like yourname.pages.dev or yourusername.github.io/site-name. That works fine for getting started. But if you want a professional address like yourname.com or yourbusiness.co.uk, you need a domain name.

A domain name costs roughly 10 to 15 pounds or dollars per year depending on the extension. You buy one from a registrar like Namecheap, Porkbun, or Google Domains. Then you connect it to your free Cloudflare Pages or GitHub Pages host. Both platforms support custom domains on their free plans and provide step-by-step instructions for connecting the domain you bought.

My advice is to launch on the free subdomain first. Once you are happy with your website and you know it is something you plan to keep, then buy the domain and connect it. That way you do not spend money before you know the site is worth it.

Is It Legal to Build and Sell Websites With Claude?

Yes, it is completely legal to use AI to build a website. There are no laws in any major jurisdiction that prohibit using AI tools to generate website code or content.

Here is the copyright question explained plainly, because there is a lot of confusion about it. In March 2026, the US Supreme Court declined to hear an appeal related to AI-generated works, which confirmed lower court rulings that work created entirely by AI without meaningful human creative input cannot hold copyright protection. The US Copyright Office takes the same position.

What this means in practice is that someone else could theoretically describe a similar prompt to Claude and produce something that looks similar to your site. The way to protect yourself is to make the site genuinely yours. Write your own real story on the About page. Use your actual photos. Add specific details about your real experience. The more human creativity you bring to the finished site, the more it becomes distinctly yours.

Selling websites you build with Claude to clients is also legal. Thousands of freelancers do this already on platforms like Fiverr and Upwork. You are selling your skill in directing Claude, making design decisions, handling the setup and hosting, and delivering a finished result. Be transparent with clients that you use AI tools in your process. Most clients care about the final result far more than the method.

Always check Anthropic’s usage policy directly at anthropic.com before taking commercial projects, as platform terms can change.

What to Do When Claude Hits Its Free Limit Mid-Build

This will happen if you are building something large, so let me prepare you for it so it does not stress you out.

When Claude hits the limit, it shows you a message. It will say something like “You have reached your usage limit” and display the exact time when your window resets. The conversation is completely saved. Your work is not lost. Nothing has been deleted.

Here is exactly what to do.

First, open the Artifacts panel if it is not already open and click Preview. View what Claude has built so far. Open the full preview in your browser by clicking the open in new tab icon if one is available. Look carefully at everything on the page.

Second, open a notes app or grab a pen and paper. Write down every specific change you want to make. Be detailed. Do not just write “fix the header.” Write “make the header background colour dark navy, move the logo to the left, and make the navigation links white with an underline on hover.”

Third, wait for the reset time Claude showed you. When the window opens, go back to your same Claude conversation. It is still there in your conversation history. Paste your full list of changes into one single message. Claude will make all of them at once, which uses far fewer messages than sending each change separately.

If you are building a complex site and hitting the limit frequently, one month of Claude Pro at $20 gives you approximately 5 times more usage per window. For most people, a single month of Pro is enough to build and launch a complete, polished website. After that, go back to the free plan.

The Best Prompting Habits That Get You Better Websites Faster

I have helped many people build websites with Claude, and the people who get the best results all do the same things. These habits are worth building from your very first session.

Be specific about numbers. Do not say “show some testimonials.” Say “show exactly 3 testimonial cards in a row.” Do not say “list my services.” Say “display exactly 5 service cards in a 3-column grid on desktop and 1 column on mobile.”

Describe the feeling, not just the layout. “Make it feel warm and welcoming like a cosy coffee shop” gives Claude more creative direction than “use a beige background.” Both are useful, but combining them produces the best result: “Use warm beige and terracotta tones that feel like a cosy coffee shop, and add a beige background.”

Include your actual content. The more real content you give Claude, the better the output. Do not rely on placeholder text for important sections like your About page or your main headline. Write those yourself and include them in the prompt.

Test on your phone before considering it finished. After opening your index.html file in your browser on a desktop, email the file to yourself and open the email on your phone. Tap the attachment. Your website should display properly on your phone screen. If it does not, tell Claude specifically what looks wrong on mobile and ask it to fix those elements.

Write down your brand details before you start. Make a small reference note with: your brand colours as hex codes if you have them, your preferred fonts if you know them, your logo description, and your tone of voice described in a few words. Paste these into every prompt so Claude keeps your branding consistent across all your pages.

Frequently Asked Questions

Final Thoughts: Your First Website Starts Right Now

You now have everything you need. The prompts, the steps, the hosting options, the troubleshooting guide, and the knowledge to answer your own questions as they come up.

I want to address the feeling that might be sitting with you right now. The feeling of “this still seems like a lot” or “what if I do it wrong?” Here is the truth: there is no wrong way to do this. Your first attempt at a website is not permanent. If you do not like what Claude builds, you describe the change and Claude rebuilds it. If you host it somewhere and decide you want to change everything, you upload a new file. Nothing is set in stone.

The only mistake you can make is deciding this is too complicated before you have tried it. It is not.

Here is your starting plan.

Open claude.ai and create your free account right now. Decide on the type of website you want from this guide. Find the prompt for that type, copy it, fill in your details, and send it. When Claude finishes, open the Artifacts panel, click Preview, and see your website. Then start refining it until it feels right. Save the code as index.html and upload it to Cloudflare Pages. Share the URL.

That is all of it. Start now.

If you want to see more of what Claude can do before you dive in, our guide on AI prompt examples shows you how to write prompts that get genuinely excellent results across every type of task. And if you are building this website to grow a business, our breakdown of AI marketing tools for small businesses covers the best tools to use alongside Claude once your site is live.