How to Build a Website with Claude Code: Step-by-Step Guide

February 2026 • 8 min read

What if you could describe the website you want and have an AI build it? That's not a hypothetical -- it's a Tuesday afternoon with Claude Code. This guide walks you through building a complete website from scratch using Claude Code as your AI coding assistant, with Beam keeping your workflow organized every step of the way.

Whether you're a developer looking to speed up your workflow or someone who's never touched HTML before, Claude Code makes web development surprisingly approachable. You provide the creative direction. Claude writes the code. And Beam keeps everything structured so you never lose track of where you are in the process.

What We're Building

By the end of this tutorial, you'll have a fully responsive landing page with a hero section, a three-column features grid, customer testimonials, and a working contact form. It will look polished, load fast, and work on every screen size.

For the tech stack, we're keeping it intentionally simple: HTML, CSS, and vanilla JavaScript. No React, no Next.js, no build tools. This isn't because those frameworks aren't useful -- it's because you don't need them for a landing page, and skipping the framework overhead means you go from prompt to published in about 30 minutes.

Claude Code handles the coding. You handle the creative direction. That division of labor is what makes this workflow so effective.

Prerequisites

If you already have these installed, you're ready to go. If not, Node.js takes about two minutes to install from nodejs.org, and Claude Code is a single npm command. The whole setup should take less than five minutes.

Setting Up Your Beam Workspace

Before writing a single line of code, let's set up the environment. This is where Beam earns its keep -- instead of juggling loose terminal windows, you'll have a purpose-built workspace that keeps every part of the process in its lane.

Open Beam and create a new workspace with ⌘N. Name it "Landing Page" (or whatever you're building). Now set up three tabs:

• Tab 1: Claude Code session -- this is where the magic happens. All your prompts and Claude's code output live here.
• Tab 2: Dev server -- you'll run npx serve . here later to preview your site in real time.
• Tab 3: Git operations -- commits, pushes, and deployment commands go here, keeping them separate from your creative flow.

On Tab 1, use split panes (⌘⌥⌃T) so you can see Claude's output and the dev server side by side. This two-panel view is the key to fast iteration -- you'll give Claude instructions on one side and immediately see the result on the other.

Once your workspace is arranged, save the layout with ⌘S. You'll be able to reuse this exact configuration for every future web project without setting it up again.

Step 1: Describe Your Website to Claude Code

Switch to Tab 1 and navigate to your project directory. If you haven't created one yet, make a new folder for the project -- something like ~/Projects/acme-landing. Then start Claude Code by typing claude and hitting Enter.

Now comes the fun part. Give Claude a detailed description of what you want. The more specific you are, the closer the first draft will be to your vision. Here's an example prompt:

Claude will likely ask a few clarifying questions -- things like the specific shade of blue you want, whether the testimonials should include photos, or what the CTA button text should say. Answer these questions thoughtfully. They're not busywork; they're Claude narrowing in on exactly what you have in mind.

This back-and-forth is what separates AI-assisted development from template-based website builders. You're having a conversation about design, not filling in form fields.

Step 2: Watch Claude Scaffold the Project

After you confirm the details, Claude gets to work. You'll see the code appear in your terminal in real time -- the HTML structure first, then the CSS styling, then any JavaScript for interactivity. For a landing page like this, Claude typically generates everything in one pass.

As Claude writes the code, it explains its decisions. You'll see comments about why it chose flexbox over grid for a particular section, or why it's using CSS custom properties for the color scheme. This isn't just output -- it's a running tutorial on web development best practices.

A good rule of thumb: let Claude finish before you start making changes. Review the complete output first. It's tempting to jump in and request modifications mid-stream, but you'll get better results if you let the first draft land fully and then iterate from there.

Claude will create your index.html file with all the markup and styles. Depending on your prompt, it might also create separate CSS or JavaScript files. Either way, you'll have a fully functional page ready for preview within a couple of minutes.

Step 3: Iterate on Design with Live Preview

This is where the workflow really clicks. Switch to Tab 2 in your Beam workspace and start the development server:

This spins up a local server (usually at http://localhost:3000) that serves your project files. Open that URL in your browser, and you'll see your landing page live.

Now use your split pane view on Tab 1 to see Claude and the browser side by side. Tell Claude what to change in natural language:

• "Make the hero headline larger and add a subtle gradient to the text"
• "Change the CTA button color to a deeper blue and add a hover animation"
• "Add more vertical spacing between the features grid and the testimonials section"
• "The contact form feels too wide -- constrain it to 600px max width"

Each iteration takes seconds. Claude makes the change, you refresh the browser (or the dev server auto-reloads), and you see the result immediately. This rapid feedback loop is what makes the process feel less like coding and more like directing.

Don't be afraid to be picky. Ask for five different versions of the hero section if you want. Claude doesn't get tired, and each variation teaches it more about your preferences for the current project.

Step 4: Add Interactivity

Once the visual design feels right, it's time to make the page come alive. Ask Claude to add JavaScript for the interactive elements. Start with the essentials:

Claude writes clean, vanilla JavaScript for this -- no jQuery, no libraries, no bundle size bloat. You get exactly what you need: event listeners for smooth scrolling, regex validation for the email field, and an Intersection Observer for scroll-triggered animations.

Test each interaction in your live preview. Click the CTA, submit the form with invalid data, scroll up and down to see the animations trigger. If something doesn't feel right, tell Claude. "The smooth scroll is too fast -- slow it down." "The fade-in animation should come from the bottom, not just opacity." Claude adjusts in seconds.

This is one of the biggest advantages of vanilla JavaScript for a project like this. There's no build step, no compilation, no waiting. You make a change and see it immediately.

Step 5: Deploy to GitHub Pages

Your site looks great, the interactions work, and you're ready to put it on the internet. Switch to Tab 3 in your Beam workspace -- the one you set aside for Git operations.

If you haven't initialized a Git repository yet, do that first:

Create a new repository on GitHub (you can do this from the command line with the GitHub CLI or through the GitHub website), then push your code:

To enable GitHub Pages, go to your repository's Settings, navigate to the Pages section, and set the source to "Deploy from a branch" with the main branch selected. Within a minute or two, your site will be live at https://yourusername.github.io/acme-landing.

If you're not comfortable with Git commands, ask Claude for help right in your Claude Code session. It can walk you through every step or even generate the exact commands you need to copy and paste.

Memory File: Teach Claude Your Web Dev Conventions

Here's where things get really interesting for repeat projects. Every developer has preferences: maybe you use BEM for CSS class names, prefer rem over px, or always structure your HTML with semantic elements. Instead of repeating these preferences every time you start a new Claude Code session, you can write them down once.

Use Beam's "Install Project Memory" toolbar button to create a CLAUDE.md file in your project directory. This markdown file is automatically read by Claude Code at the start of every session. Write your conventions into it:

The next time you start Claude Code in this directory, it reads these conventions automatically and follows them without being asked. Over time, your CLAUDE.md becomes a living style guide that makes Claude increasingly aligned with how you like to build. Your AI assistant gets better at matching your style with every project.

Summary

Building a website with Claude Code isn't just faster than doing it by hand -- it's a fundamentally different way of working. You think in terms of outcomes, not syntax. Here's what we covered:

• Set up a Beam workspace with dedicated tabs for Claude Code, dev server, and Git -- saving the layout for reuse
• Described the website to Claude Code in plain English and let it scaffold the entire project
• Iterated on the design with a live preview, making changes in seconds through natural language
• Added interactivity with vanilla JavaScript -- smooth scrolling, form validation, scroll animations
• Deployed to GitHub Pages and had a live site in minutes
• Created a memory file to teach Claude your personal conventions for future projects

The whole process takes about 30 minutes. The workspace layout you built in Beam is reusable for every future project. And the memory file means Claude gets smarter about your preferences over time. That's not a workflow hack -- it's a compounding advantage.