How to Build Your First Website With Claude Code

<img src="https://i.ibb.co/nhT6p1R/Screenshot-2026-03-05-023924.png" alt="Screenshot 2026 03 05 023924" /> You do not need to learn HTML, CSS, or JavaScript to put a website on the internet. Claude Code, an AI tool from Anthropic, takes plain English descriptions and turns them into working code. Combine it with VS Code for editing and GitHub Pages for free hosting, and you can go from an empty folder to a live personal website in one sitting. This guide covers the full process with practical techniques you can follow start to finish. No complicated tricks, no prior coding experience. Install the tools, build a site, push it to GitHub, and deploy it live. What You Need Before You Start Two things have to be in place before you touch any code: the right accounts and the right software. Accounts and Subscriptions Claude Code access is only available on paid Anthropic plans. The free tier does not include it. The minimum is Claude Pro at $20 per month. Heavy vibe coding sessions burn through usage quickly, so the Max plan at $100 or $200 per month gives you significantly more room and includes tools like Claude Cowork for delegating tasks. If you prefer pay-as-you-go, you can authenticate with an API key through the Anthropic Console instead. You will also need a free GitHub account. GitHub Pages will host the finished site at no cost. Software to Install Start with Visual Studio Code. It runs on Mac, Windows, and Linux, costs nothing, and has the tightest integration with Claude Code of any editor. Then install Git. Mac systems usually have it preinstalled. On Windows, grab Git for Windows because Claude Code relies on it internally to run commands. Last, install Claude Code itself. Anthropic recommends the native installer over the older npm method. On Mac or Linux, run: curl -fsSL https://claude.ai/install.sh | bash On Windows PowerShell: irm https://claude.ai/install.ps1 | iex Once that finishes, run claude doctor in your terminal. It checks for missing dependencies and tells you whether the setup is ready to go. Installing and Connecting Claude Code to VS Code Claude Code plugs into VS Code two ways: a graphical sidebar extension or the integrated terminal. Both share conversation history, so you can bounce between them without losing context. Install the VS Code Extension Press Ctrl+Shift+X on Windows and Linux, or Cmd+Shift+X on Mac, to open the Extensions view. Search for "Claude Code" and grab the one published by Anthropic. A handful of unofficial extensions use similar names, so verify the publisher before installing. After installation, a spark icon shows up in the sidebar. Click it, sign in with your Anthropic account, and a chat interface opens right inside your editor. You type instructions there and review file changes without ever switching windows. Using the Integrated Terminal Instead Open VS Code’s integrated terminal with Ctrl+` on Windows and Linux or Cmd+` on Mac, then type claude. The CLI picks up that it’s running inside VS Code and automatically wires in diff viewing and diagnostics. Same AI agent, just a text-based interface instead of the graphical panel. From the terminal you also get slash command like /help and /clear for managing sessions. Beginners usually find the sidebar extension easier to follow. If you already spend most of your time in a terminal, the CLI will feel faster. Building Your Website Step by Step This is where the actual building happens. You tell Claude what you want, it generates the files, and you keep refining until the site looks right. Start a New Project Folder Make a new folder on your machine and give it a clear name like my-website. Open that project folder in VS Code through File > Open Folder, then fire up the Claude panel or terminal. Your first prompt matters. A vague instruction like "build me a website" gives you generic output. The more detail you pack into a single prompt, the closer the first draft lands to what you actually want. Something like: "Build a branded professional website for a consulting firm. Include a hero section, a services section with three cards, a contact form, and a footer. Use a modern design with a navy and white color scheme." Claude scans the project folder for context, sees it is empty, and generates the files from scratch. You will typically get an index.html file, a CSS stylesheet, and sometimes JavaScript. Each hack step from here is iterative: prompt, review, refine. The whole thing feels like a natural app development process, except Claude writes every line. Review and Refine the Output Here is where the real work of building better websites with Claude takes shape. That first output is a rough draft. Open the generated files and look at the design: colors, spacing, wording, mobile layout. Everything is fair game. One of the simple hacks that speeds this up is screenshotting a design element you like from another site and pasting it into the chat. Claude can match the style based on the image. Refining happens through follow-up prompts. Tell Claude exactly what to change: "Make the hero section taller and center the headline vertically." "Add a testimonials section between services and contact." Each instruction produces a set of inline diffs you can accept or reject one at a time. When you are designing a service page, whether your business involves <a href="https://churchsteeples.com/products/portable-baptistries">providing portable baptistries</a> or financial consulting, the process works the same way. Describe the service clearly in your prompt, and Claude builds the section structure around it. The more specific your instructions, the more beautiful websites you produce on the first pass. You can highlight code in the editor and tell Claude to fix it, too. Select a section that looks off, type "fix the spacing on this section" or "make this responsive," and the extension pulls your selection in as context automatically. Test Locally Before Going Live Preview the site on your own machine before pushing anything public. The fastest way is to right-click index.html in VS Code and choose "Open with Live Server" if you have that extension installed. Your browser opens with the site and refreshes automatically every time you save a change. If you would rather skip another extension, double-click the index.html file in your file explorer to open it directly in a browser. Confirm the layout looks right, links work, images load, and the contact form appears properly. Drag the browser window narrower to check how it responds on smaller screens. Pushing Your Website to GitHub Your site looks good locally. Now you need to get those files into a GitHub repository so you can deploy through GitHub Pages. Claude Code handles Git commands through natural language, so you do not need to memorize any syntax. Create a GitHub Repository Head to github.com, sign in, and click the "+" icon to create a new repository. Name it my-website, set visibility to Public (free GitHub Pages hosting requires a public repo), and skip the README initialization since your project folder already has files in it. Copy the repository URL. Let Claude Code Handle the Git Commands Back in VS Code, tell Claude something like: "Initialize a git repository, add all files, commit with the message ‘initial site launch,’ and push to [paste your repo URL]." Claude splits that into individual steps: git init, git add ., git commit, git remote add origin, and git push. Before running each command, Claude asks your permission. You see exactly what it wants to execute and either approve or deny. Because Git operations push data to the internet, the tool never fires them off without confirmation. You can turn on auto-accept for speed, though most beginners prefer reviewing each step. If this is your first time pushing to GitHub from a terminal, Git may prompt you to authenticate through your browser. Once the push finishes, your files are live on GitHub. Deploying Live With GitHub Pages Your code is on GitHub. Now you need GitHub to serve it as a live website. GitHub Pages does exactly that for static sites, and it costs nothing. Enable GitHub Pages in Repository Settings Open your repository on GitHub and click the Settings tab. In the left sidebar under "Code and automation," click Pages. Under "Build and deployment," find the Source dropdown and select "Deploy from a branch." Set the branch to main and the folder to / (root). Save. GitHub kicks off a deployment through GitHub Actions automatically. You can track progress in the Actions tab. A green checkmark means it worked. Access Your Live Website The finished site will be available at https://username.github.io/repository-name within a few minutes. Swap "username" for your actual GitHub username and "repository-name" for whatever you called the repo. Initial deployments sometimes take up to ten minutes, so a 404 in the first few minutes is normal. This works for any kind of static site. A portfolio, a landing page for a niche service like <a href="https://marvelcoatings.com/industries/data-centers">data centers coatings</a>, a simple blog. GitHub Pages hosts all of them free with HTTPS included. Custom domains are supported through a CNAME file and DNS configuration. What to Do When Something Goes Wrong The most frequent post-deployment problem is a 404 error. That usually points to the wrong branch or folder setting in GitHub Pages. Go back to Settings > Pages and confirm you selected the main branch and root folder. Also make sure the repository is set to Public. If the site loads but the CSS is missing, the issue is almost always a file path mismatch. GitHub Pages enforces case sensitivity, so "Style.css" in your HTML will not load if the actual file is named "style.css". Check every linked file against the real filename and casing. Claude Code produces imperfect code sometimes, particularly with complex layouts. When something looks broken, describe the problem directly: "The navigation menu overlaps the hero section on mobile" or "The contact form fields are not aligned." Claude will read the code, find the issue, and propose a fix. Sites with detailed functional requirements, like <a href="https://www.medreb8.com/pharmacy-formulary-management">formulary management</a> platforms or booking systems, often take several rounds of back and forth to get right. When changes go sideways, the checkpoint feature saves you. Hover over a previous message in the VS Code extension and click rewind. Your files snap back to that point in the conversation, which is far less error-prone than trying to undo edits by hand across multiple files. Where to Go From Here You now have a live website that you built without writing a single line of code by hand. Pushing updates from here is the same flow. Change something locally, tell Claude to commit and push, and the live site refreshes on its own. As projects grow, create a CLAUDE.md file in your project folder with persistent instructions about your preferred structure and conventions. You can organize work inside a Claude Project, use a Claude Artifact to preview components, or experiment with agents that handle multi-step tasks on their own. Add frameworks, build more complex apps, test web app features like dynamic content. The cycle is always the same: describe, review, refine, deploy.