Vibe Coding for Beginners: Build and Deploy Your First Webpage with AI

Why First-Timers Always Get Stuck Building Webpages with AI

For most people trying AI-generated webpages for the first time, the real obstacle isn't the generation itself — AI can spit out a complete HTML page in seconds. The frustrating part comes after: Where did the file actually get saved? How do you tweak a small detail? What if you break something? And how do you share the final result with someone else?

This tutorial, shared by a Bilibili creator, walks through exactly that end-to-end journey: starting from an empty folder, building a personal intro webpage, making edits, saving versions, and finally publishing it as a publicly accessible link. The whole process is broken down into three core areas: how to set up your tools, where your webpage lives, and how to keep iterating on an existing page. The real value here isn't any specific tool — tools go out of date. The method of turning a requirement into a finished product, step by step, never does.

Don't Agonize Over Which Tool to Use — Ask AI to Decide for You

AI coding tools are multiplying fast, and their features keep changing. Instead of memorizing how any single tool works, it's more useful to learn how to find and get started with tools in general. The creator's approach here is refreshingly practical: don't ask AI vaguely, "what AI coding tools exist?" — that gives you an overwhelming list with no clear direction.

The right move is to be specific — tell AI what operating system you're on and what you're trying to do. It will then recommend a few popular options and give you detailed installation and setup steps. If you already have a target tool in mind (like the Coder app demonstrated in this tutorial), just name it and ask for a focused getting-started guide. This "let AI pick the tool" approach is more durable than memorizing any single product.

Creating Your First Project: A Workspace Is Just a Folder

"Project" sounds intimidating, but it really just means a folder where your webpage files live. The tutorial keeps it simple: create a new folder on your desktop and name it MyWeb.

Next, open your AI coding tool, click the plus icon in the workspace panel, select the MyWeb folder you just created, and open it. Most modern AI Agent products have a "select workspace" feature. The creator's strong recommendation: create a new workspace for each new project. It keeps files organized and saves you from hunting through a tangled mess later.

Once the workspace is set up, paste in your prompt to generate the personal homepage. One key detail here — the prompt explicitly asks AI to use vanilla HTML, CSS, and JS. Plain HTML produces lighter, more portable pages that are easier to deploy, and for a simple personal homepage it's more than enough. This first version only covers two sections: "About Me" and "Content I Share" — just enough to get something working.

Once generation completes, a preview opens automatically on the right side. You can also choose "Preview in external browser" from the top-right corner to see it in a real browser.

The Pinpoint Edit Method: Getting AI to Change Exactly What You Want

The reality of Vibe Coding is that you almost never get a perfect result on the first try — nearly everything requires multiple rounds of revision. But telling AI "make the name red" can sometimes cause it to change the wrong element. The creator shares a universally applicable trick: the pinpoint edit method.

Here's how it works: press F12 in your browser to open DevTools, click the element selector icon in the top-left corner, then click the area you want to change (say, your name). The corresponding code will be highlighted. Right-click and choose "Edit HTML," select all, and copy that code snippet. Then go back to your AI coding tool, paste the snippet into the chat, and say "make this red" before sending.

This way, AI has the exact code you're referring to, which dramatically reduces the chance of it editing the wrong part of the page. Refresh after the change and you'll see the text color updated precisely where you intended. This method works regardless of which tool you're using — it's a practical, universal technique.

The F12 DevTools panel is built into every modern browser (Chrome, Edge, Firefox, Safari) — no plugins needed. The element selector (usually Ctrl+Shift+C or Cmd+Shift+C) lets you click any visual element on the page, while the Elements panel on the right syncs and highlights the corresponding HTML. Originally designed for frontend engineers to debug issues, it takes on a new role in Vibe Coding: it acts as a translation layer between what you see visually and what the AI reads as code. The copied HTML snippet typically includes the element's tag, class names, and inline styles — enough information for AI to uniquely locate the target within the entire file, avoiding the collateral damage of a global find-and-replace.

Version Recovery: Three Backup Methods from Simple to Professional

What if you break something and want to go back? The tutorial covers three approaches, ordered from beginner-friendly to professional:

Method 1: Manual backup. Find your MyWeb folder and duplicate it. That copy is your saved version. It's the most low-tech approach, but it's direct and reliable for beginners.

Method 2: The tool's built-in undo. After each edit, most AI coding tools offer an "undo file changes" option. Select it and refresh the page to see the rollback. Many web coding tools include this feature — worth checking for whenever you try a new one.

Method 3: Git version control. This is the professional solution, ideal when your project grows complex and you need a full change history. For beginners, the creator recommends sticking with methods one and two for now — they're entirely sufficient at this stage.

Git is the most widely used distributed version control system in the software industry, created by Linux kernel author Linus Torvalds in 2005. Its core concept is the commit: whenever your code is in a reasonably stable state, you make a commit and Git takes a snapshot of all your files at that moment. No matter how many changes you make afterward, you can always roll back to any previous commit with precision. The command-line interface has a learning curve for beginners, but many AI coding tools already wrap common Git operations (init, commit, revert) into visual buttons — or you can simply describe what you want in natural language and let AI handle it. At the beginner stage, you don't need to understand Git's internals. Just internalize the mindset: committing regularly = saving progress regularly. The deeper details can wait until your projects get more complex.

One-Click Deployment: Using Your AI Tool's Built-In Site Feature

Your webpage looks great — but only you can see it. You need a publicly accessible link. There are many deployment options: your own server, a third-party hosting platform, and more. This tutorial takes the most friction-free route: using the AI coding tool's built-in site/publish feature, deployed directly via a prompt.

Click the plus icon, select "Site," type a prompt like "deploy the current page online" and send it. Deployment takes a moment, and when it's done the right panel shows a "Published" status.

There's one easy-to-miss detail: the default visibility is usually "only you can access this." You need to manually change it to "anyone can access" and confirm public access. Once that's done, copy the link, paste it into a browser, and it opens — and anyone you send it to can open it too. At this point, the entire workflow from project creation to live deployment is complete.

"Deploy" in web development means uploading local code to a public server so external users can access it. Traditional deployment involves purchasing a server, configuring a domain, and setting up HTTPS certificates — a fairly involved process. Modern hosting platforms like Vercel, Netlify, and GitHub Pages have dramatically simplified this through static site hosting: for pages built purely with HTML/CSS/JS, the platform simply stores your files on CDN nodes and assigns a public subdomain. The whole thing can be done in under a minute, and most platforms offer free tiers. The "Site" feature built into AI coding tools is essentially a further abstraction on top of these services — letting you publish with a single prompt without ever leaving the tool. Understanding this background helps you know where to look if your tool doesn't support it, or when you need more control over your deployment setup.

Getting Through the Workflow Is Just the Beginning

The real value of this tutorial isn't any specific tool — it's establishing a reusable workflow: set up tools → create a workspace → generate the page → make precise edits → back up versions → deploy live. Tools will change. This method of turning a requirement into a finished product, step by step, will always apply.

Once you're comfortable with these steps, whether you're building an event landing page or a small utility tool for work, you'll know exactly where to start. Of course, "being able to build a webpage" is only step one — the creator teases that the next installment will take this same page and walk through how to make it progressively more polished and visually designed. For anyone looking to break into Vibe Coding, this is a clear, concrete path worth walking through at least once.