Your First Web Page

In the last lesson, you said hello to the world. Now let's make something personal — a page that's actually about you.

By the end of this lesson, you'll have a real web page with your name, your interests, a placeholder for your photo, and links to your social profiles. You won't need to write any code yourself. You'll describe what you want, and Claude will build it.

The Describe-Build-View Cycle

Vibe coding follows a simple loop. You use it every single time you build something, whether it's a one-page bio or a full website. Here's how it works:

After viewing, you go back to the first step: describe what you'd like to change. That's it. The entire workflow is this loop, repeated until you're happy with the result. No manuals. No memorizing syntax. Just conversation.

Describing Your Bio Page

Let's put the cycle to work. Open Claude Code in your terminal and type a description of the page you want. Here's an example:

Notice a few things about that request. It mentions specific content (name, interests), specific sections (photo, bio, interests, links), and a design direction (clean, modern, soft blue). The more detail you give, the closer the first result will be to what you imagine.

But don't stress about getting it perfect. Remember: this is a loop. You'll refine it after seeing the result.

What Claude Built — A Quick Tour

Claude generates an HTML file. HTML is the language browsers read to display web pages. You don't need to learn it, but it helps to recognize a few pieces so you can understand what's happening under the hood.

Here's what those pieces mean:

• 1 <h1> is a heading — the large title at the top of the page. Think of it as the page's name tag.
• 2 <p> is a paragraph — a block of regular text, like what you'd type in a document.
• 3 <img> is an image — it tells the browser to display a photo at that spot on the page.
• 4 <a href="..."> is a link — the clickable text that takes visitors to another page or profile.

The design itself (colors, fonts, spacing) is handled by CSS — a companion language that controls how things look. Claude writes both HTML and CSS together. You don't need to touch either one directly.

Viewing Your Page

Claude saved the file as index.html in your project folder. To see it, you just need to open it in a web browser. On a Mac, the fastest way is:

On Windows, use start index.html. On Linux, use xdg-open index.html. Or simply drag the file from your file manager into any open browser window.

Here's roughly what the result looks like:

That's a real, working web page — built entirely from a description you typed in English. No templates. No drag-and-drop editor. Just a conversation.

Making It Yours

The first version is rarely the final version. The power of vibe coding is how fast you can refine. Just describe the change you want in plain English, and Claude updates the code. Here are some examples:

Each time you make a request, Claude updates the file. Refresh your browser to see the change. Describe, build, view. That's the whole process.

Key Takeaways

• The describe-build-view cycle is the core workflow: describe what you want, let Claude build it, view the result, then describe changes.
• You don't need to memorize HTML or CSS. Just recognize the basics: headings, paragraphs, images, and links.
• Start rough, then refine. Your first description doesn't need to be perfect — you'll iterate.
• Open index.html in any browser to see your page. Use open index.html on Mac, or drag the file into your browser.
• The more specific your description (name, interests, color scheme), the closer the first result will be to what you want.