Build a Personal Website with AI

Build a Personal Website with AI

You do not need to be a programmer to have a personal website. In this tutorial I will show you how to build a complete, modern personal site with an AI coding assistant, from nothing to deployed, even if you have never written a line of HTML. I will give you the exact prompts to use, the structure to follow, and the handful of concepts you need not to feel lost when the assistant starts talking about files and folders.

By the end you will understand enough about how a website is put together that you can extend your own page with confidence, and you will know how to get your AI assistant to do the heavy lifting safely.

Step 1: Start with a One-Page Brief

Before asking the AI to build anything, write a short brief. This prevents the assistant from inventing a site that does not match you.

I want to create my personal website. My name is [NAME], I work as [ROLE], and I want the site to highlight [3 KEY THINGS]. Please plan a one-page site with a header, an about section, a portfolio or projects section, and a contact section. Keep the design clean, modern, and mobile-friendly. Give me the outline first before writing any code.

Ask for an outline first, not code. You want to approve the structure before the assistant commits to tags and styling. Read the outline, adjust the section names or order, and only then say go.

Step 2: Generate the First Version in One File

For your first version, resist the temptation to split code into many files. Ask for a single file that includes the HTML, the CSS styling, and a little JavaScript. One file is easier to review and fix if something misbehaves.

Using the approved outline, write one file called index.html that contains the HTML, all CSS in a style block, and any small JavaScript. Use semantic tags like header, section, and footer. Make it responsive with a simple grid. Use a neutral color palette with one accent color. Add a profile section with a placeholder avatar.

Create a folder on your computer, save the file as index.html, and double-click it to open in your browser. This is your first preview. If it looks right, move on; if not, collect the problem and ask for a fix.

Things you will see, demystified

• HTML is the skeleton: the headings, paragraphs, and links that make up the content.
• CSS is the skin: colors, fonts, spacing, and layout.
• Semantic tags like section and footer simply name the parts of the page in a way browsers and search engines understand.
• Responsive means the layout adapts to phone, tablet, and desktop widths.

Step 3: Refine with Small, Single-Issue Prompts

The biggest mistake beginners make is asking for many changes at once. Fix one thing per request, and the assistant will stay on track.

In my current index.html, the profile image looks too large and the About section has too much text. Please reduce the profile image size and shorten the About text to two sentences. Change nothing else.

When something is broken, paste the relevant code and describe the symptom rather than guessing the cause.

The navigation links do not jump to sections when clicked. Please inspect the anchor links and the section id attributes and fix the mismatch. Keep everything else unchanged.

Working with code safely

• Before each change, keep a copy of the working file so you can always go back.
• Review the changes by reloading the page in your browser after every edit.
• Ask the assistant to explain anything you do not recognize before you accept it.

Step 4: Make Styling Match You

Once the structure is solid you can push the design toward something personal. Give concrete direction rather than asking for a vague "make it pretty."

Give the page a warmer, more personal feel. Change the accent color to a deep teal, use a serif font for the main heading and a clean sans-serif for the body, and add subtle rounded corners to the image. Update only the CSS. Explain the three most important changes you made.

Asking for an explanation of the changes is a low-effort way to learn. Each revision teaches you a little more about how CSS affects the page.

Step 5: Deploy It for Free

Your final page should be behind a website address the world can use. The easiest free path for a beginner is any static hosting service. You upload your index.html (and any image files) and the service gives you a live URL in minutes.

A static site is the simplest possible kind of website: fixed files, no server-side logic. For a personal page that is exactly what you want. Most modern hosting services provide drag-and-drop upload and a live link instantly.

If you want a custom domain that looks professional, buy a short domain and point it at your hosting, following the provider's steps. This is optional, but it makes the site yours in a way a random free subdomain never will.

Your First Update Workflow

Now that your site is live, here is the exact loop you will use for every future change.

1. Edit the HTML in a text editor.
2. Open the file in your browser to preview it locally.
3. When it looks right, re-upload the changed file to hosting.

That is it. No build step, no toolchain, no infinite setup. You have a personal website you can actually maintain.

Going Further with Confidence

Once the basics are comfortable, the same assistant can help you add things incrementally.

• Ask for a simple contact form that works with a free form service.
• Ask to add a projects grid so you can showcase more work.
• Ask for a light and dark mode toggle if you like fiddling with CSS.
• Ask for a blog section powered by simple HTML pages, one per post.

Always state the scope in your prompt: change only the contact section or add a new projects section and do not touch the header. Clear scope keeps the AI from rewriting things you just fixed.

Conclusion

You have gone from zero to a deployed personal website in one sitting, using an AI coding assistant for the parts you have not learned yet and a bit of deliberate iteration to keep the result polished. The real skill you gained is not HTML syntax; it is directing an assistant to produce and refine a working artifact, which will serve you on far more ambitious projects than a personal page.

Launch it today. Share the link with one person and watch them read it. Then, a week from now, use the update loop to make your first improvement. Before long a simple project will have grown into a real corner of the web that is unmistakably yours.