# How I Build Websites With AI Tools: A Beginner’s Guide to Creating Your First Personal Website

- Author: Eruditegfx (https://wurk.fun/user/Eruditegfx)
- Published: 2026-08-07
- Canonical (HTML): https://wurk.fun/blog/how-i-build-websites-with-ai-tools-a-beginners-guide-to-creating-your-first-pers
- Cover image: https://ik.imagekit.io/wurk/ChatGPT_Image_Aug_7__2026__06_22_26_PM_-H92980-5.png

---

Building a website used to feel like something you needed to be an experienced programmer to do.

You had to understand HTML, CSS, JavaScript, frameworks, code editors, hosting, and a lot of other things before you could create something that actually worked.

AI tools have changed that for me.

I’m not saying AI has replaced learning how websites work. Instead, I see AI as a tool that helps me move faster, understand unfamiliar code, troubleshoot problems, and turn an idea into something I can actually see in a browser.

In this guide, I’ll show you the approach I use to build a simple personal website with AI tools.

The three tools I use are **ChatGPT, Cursor, and GitHub Copilot**.

You don't need to be an expert programmer to start.

## 1. Start With a Simple Idea

The biggest mistake I would recommend avoiding is starting with something too complicated.

For your first project, build a simple personal website.

It could contain:

* Your name
* A short introduction
* Your skills
* Your projects
* A short About section
* Your contact information
* Links to your social profiles

That's enough.

You don't need to start by building a marketplace, social network, crypto application, or anything complicated.

The goal of your first project is to learn how the process works.

## 2. Use ChatGPT Before Writing Code

This is where I usually start.

Instead of immediately opening a code editor and trying to figure everything out, I first explain what I want to build.

For example, I might tell ChatGPT:

> "I want to build a clean personal portfolio website for a beginner UI/UX designer. It should have a hero section, About section, skills, projects and contact section. Make the design modern, responsive and professional."

The more specific you are, the better the result will usually be.

You can also describe the design you want.

For example:

* Dark or light theme
* Minimalist design
* Large typography
* Rounded cards
* Mobile responsive
* Smooth animations
* Specific sections

I use ChatGPT not only to generate code, but also to understand what the code is doing and figure out how to fix problems.

## 3. Move the Project Into Your Code Editor

Once I have an idea of the structure, I can start building the actual website.

This is where **Cursor** becomes useful.

Cursor is an AI-powered code editor that allows you to work with your project while using AI assistance directly inside the coding environment.

Instead of constantly copying code between a browser and my editor, I can explain what I want to change directly in the project.

For example:

> "Make the navigation bar responsive on mobile."

Or:

> "Add a project card section below the About section."

Or:

> "The spacing between these sections looks too large. Reduce it while keeping the design responsive."

The important thing is that I don't blindly accept everything the AI generates.

I check the changes and test them.

## 4. Use GitHub Copilot When You Need Coding Assistance

Another tool I use is **GitHub Copilot**.

Copilot can help with writing code, suggesting code while you type, and completing repetitive pieces of a project.

This is especially useful when you already understand roughly what you want to do but don't want to write every line manually.

For example, if I'm creating a component and know what information it should display, Copilot can help generate some of the structure.

But there's something important I learned:

**Don't let AI become your brain.**

If you don't understand anything about the code you're using, debugging becomes much harder when something breaks.

You don't need to understand every line immediately, but you should gradually learn what the important parts are doing.

## 5. Build One Section at a Time

I find it much easier to build a website section by section.

Instead of asking AI to create an entire complicated website in one prompt, start small.

For example:

**Step 1:** Create the navigation.

**Step 2:** Build the hero section.

**Step 3:** Add the About section.

**Step 4:** Add your skills.

**Step 5:** Add your projects.

**Step 6:** Add the contact section.

**Step 7:** Make everything responsive.

This approach makes troubleshooting much easier.

If something goes wrong, you also have a better idea of which part caused the problem.

## 6. Don't Just Accept the First Design

This is particularly important if you're interested in UI/UX.

AI can generate a working interface, but the first result isn't always the best result.

Look at the website critically.

Ask yourself:

* Is the text easy to read?
* Is the navigation clear?
* Does the spacing look good?
* Does it work properly on a phone?
* Are the buttons obvious?
* Is there too much information?
* Do the sections have a logical flow?

Then tell the AI exactly what you want improved.

Instead of saying:

> "Make it better."

Try something like:

> "The hero section feels too crowded. Reduce the amount of text, increase the spacing, and make the main call-to-action more prominent."

Specific instructions usually produce more useful changes.

## 7. Test Everything

Getting a website to appear in your browser doesn't mean you're finished.

Test it.

Click every button.

Check every link.

Resize the browser.

Open it on your phone.

Look for spelling mistakes.

Check whether images load correctly.

Test the navigation.

Sometimes an AI-generated website can look impressive while still having small problems that you won't notice until you actually use it.

Testing is one of the parts you shouldn't skip.

## 8. What You Actually Need to Learn

You don't need to become a professional developer before using AI to build websites.

But I strongly recommend learning the basics of:

* HTML
* CSS
* JavaScript
* Responsive design
* Git and GitHub
* Basic web development concepts

AI becomes much more useful when you understand what you're asking it to do.

Think of AI as a **coding assistant**, not a replacement for learning.

The better you understand the fundamentals, the better you can communicate with the AI and identify when its solution isn't right.

## My Simple Workflow

My basic workflow looks like this:

**Idea → ChatGPT → Build in Cursor → Use Copilot when needed → Test → Improve → Repeat**

ChatGPT helps me think through ideas, generate approaches and troubleshoot.

Cursor gives me an environment where I can actually work on the project with AI assistance.

GitHub Copilot helps with coding and suggestions while I'm working.

The tools don't magically build the perfect website for me.

I still have to decide what I want, review the output, test it and make design decisions.

## Final Advice

If you've always wanted to build a website but felt that coding was too difficult, start small.

Don't try to build the next Facebook on your first attempt.

Build a personal website.

Put your name on it.

Add your skills.

Show your projects.

Make it responsive.

Then improve it.

The first website you build probably won't be perfect, and that's completely fine.

What matters is that you start understanding the process.

For me, AI tools have made experimenting with web development much easier. They allow me to take an idea, ask questions, write code, test it, make mistakes and keep improving.

And that's probably the biggest lesson I can share:

**Don't use AI just to get the answer. Use it to help you learn how to get the answer yourself.**

![photo 2026 08 07 18 28 20](https://ik.imagekit.io/wurk/photo_2026-08-07_18-28-20_U2Zbkq3qA.jpg)