How to Build Websites with Claude Code as a Beginner

I’ve been getting a lot of messages recently from people who are interested in Claude Code or other AI coding tools.

Usually it’s something along the lines of “I want to try this, but I have no idea where to start”.

Which makes sense.

If you’ve never built anything with code before, opening something like this can feel a bit overwhelming.

So I thought I’d show one of the simplest things you can build with it.

A personal website.

Nothing fancy, just something small to understand how the whole process works.

And the interesting part is you don’t need to know how to code to do this.

I barely know any code myself.

Installing the Claude app

First thing is downloading the Claude desktop app.

Once you open it, you’ll see three sections at the top:

• Chat
• Co-work
• Code

For this we’re going straight into Code.

Some people use Claude through the terminal, but if you’re new I honestly wouldn’t bother with that yet.

The Code interface makes things a lot easier because you’re basically just prompting Claude and it builds everything inside a folder for you.

No terminal required.

Which is great if you’re someone who normally avoids the terminal (which used to be me).

Creating a folder for the project

The first thing Claude will ask you to do is choose a folder.

This is where the project will live.

I just created a folder called something like:

Claude Code → YouTube test

Once you select it, Claude will use that folder for everything it creates.

There’s also a setting where it asks if you want to approve edits before Claude changes files.

If you’re a bit cautious you can leave that on.

Personally I just auto-accept edits because it speeds things up a lot.

Since everything is isolated inside that folder anyway, nothing else on your computer gets touched.

The first prompt

One thing people massively overthink with AI tools is prompting.

You really don’t need to do anything fancy.

Just explain what you want like you’re talking to a developer.

That’s it.

So for this example I just wrote:

“Make me a personal website, that’s minimal, has an avatar, a name, a bio, links to some projects and a contact form”.

Claude then looks at the empty folder and starts building the website.

You’ll see it creating files like:

• index.html
• styles.css

If you don’t know what those are, it doesn’t really matter.

But basically:

• HTML is the structure of the site.
• CSS controls how everything looks.

Claude writes all of that automatically.

Seeing the website

Once it finishes generating everything you can click Preview.

Claude spins up a little local server so you can see the site.

You might see something about an HTTP server starting, but you don’t really need to understand any of that.

Just allow it.

And suddenly you have a website.

It will already include things like:

• an avatar
• your name
• a bio
• project links
• a contact form

All generated from a single prompt.

Which still feels a bit ridiculous when you think about it.

Changing the design

Now that the site exists, we can start changing things.

Instead of editing code, we just tell Claude what we want.

For example I asked it:

“Can you please add a dark mode, and also add a toggle for it in the top right of the website”.

A few seconds later the entire design updated and there was a working dark mode switch.

That kind of thing would normally take quite a bit of coding knowledge.

And time!

Here it’s just another sentence.

Adding real content

At this point the website just has placeholder text.

So you can replace it with actual content.

Something like:

Name: Oliur

Bio: Designer & creator

Projects: PlatSupply

Claude will update everything instantly.

You can also drag an avatar image into the chat and say:

“Use this image as the avatar”.

And it will add the image to the site.

Adding another section

After that I wanted to try adding something else.

So I asked Claude to create a blog section under the projects area.

Something like:

“Can you add a grid of thumbnails and titles for a blog, under the projects section”.

Claude generated a simple blog layout with placeholder posts.

At this point the site had:

• projects
• a blog section
• a contact form
• dark mode
• custom styling

And it probably took less than ten minutes.

Getting the website online

Right now the site only exists on your computer.

So the next step is putting it on the internet.

Before doing that we need to save the project somewhere online.

The easiest place to do that is GitHub.

If you don’t already have a GitHub account, you’ll need to create one first.

It’s free and only takes a minute.

Once you have an account, you’ll also need to connect GitHub to Claude the first time you try to upload something.

Claude will guide you through this automatically.

It just opens a GitHub login page where you approve the connection.

After that, Claude can create repositories and upload your project for you.

Then you can simply ask Claude:

“Upload to GitHub”.

Claude will then ask you if you want to create a new repository and upload all the files from your project folder.

You don’t need to run any commands or touch anything technical.

When it finishes, your website project will be saved in your GitHub account.

Deploying the site

Once the code is on GitHub, the next step is getting the website online.

Personally I’ve been using Hostinger for years now for a lot of my websites, so it’s usually the first place I go when I want to deploy something quickly.

The setup is also really simple, which makes it perfect for projects like this.

All you need to do is:

• Connect your GitHub account
• Select the repository
• Choose the branch
• Deploy

And that’s pretty much it.

Hostinger will build the site and give you a live URL.

If you don’t have a domain yet you can even use a temporary one just to get the site online quickly.

Within a minute or two your website is live on the internet.

If you do want to take it a step further, you can also connect your own custom domain inside Hostinger so the site lives at something like yourname.com instead of a temporary URL.

The whole process only takes a few minutes and Hostinger walks you through it step by step.

If you want to use the same setup I’m using, you can check out Hostinger here.

I’ve been hosting sites with them for years and it’s easily one of the simplest ways I’ve found to get projects like this online.

Updating the website later

What I like about this workflow is how simple updates are.

If you change something locally in Claude Code, you just push the update to GitHub again.

Hostinger sees the update and redeploys the site automatically.

So the process becomes:

Prompt → Build → Push → Live.

Which makes experimenting really easy.

Fixing problems

You’ll occasionally run into small issues.

At one point I thought my blog section hadn’t deployed properly.

Turned out the site just needed a hard refresh.

Command + Shift + R.

Problem solved.

But even if something actually breaks, you can just paste the error message or a screenshot into Claude and ask it to fix it.

Most of the time it figures it out.

Which still feels a bit ridiculous.

It’s never been easier

The interesting thing about tools like Claude Code is how much friction they remove.

A few years ago you’d need to understand things like:

• HTML
• CSS
• Git
• deployment pipelines
• hosting

Now you can mostly just explain what you want.

You don’t need to become a developer.

You just need an idea and the willingness to try things.

That’s basically how I’ve been using it recently.

Just building random things and seeing how far it goes.

And honestly it still feels like we’re only scratching the surface.