Claude Code Tutorial Part 2: Set Up Claude Code on Your Computer

Part 2 of 8 of Building a Website with Claude Code. See all parts.

Before you start

What you need on your computer

You need a laptop or desktop running macOS, Windows, or Linux, with:

• A web browser (Chrome, Firefox, Edge, or Safari).
• A terminal application. On macOS this is Terminal or iTerm. On Windows, install Windows Terminal from the Microsoft Store. On Linux it's already there.
• A code editor for reading what Claude writes. Install Visual Studio Code from https://code.visualstudio.com. You'll mostly view files rather than edit them yourself.
• An internet connection.

You do not need to know how to use the terminal beyond running a handful of commands that Claude itself will suggest.

The accounts you'll need

• An Anthropic account: sign up at https://claude.com and choose a plan (see Section 14 of Anthropic's pricing page). The Pro plan is enough to start.
• A GitHub account (optional but recommended), https://github.com. Free. Used for storing your code safely.
• A hosting account: see Part 8 for choices. You can sign up once you're ready to publish.
• A domain registrar account: see Section 28. Skip until you're going live.

Thirty minutes of vocabulary

Read this once. You'll learn the rest by doing.

The building blocks of a website

When Claude says "I'll add a Tailwind class to this Blade component", you'll want to understand roughly what each of those words means. Here are the six pieces that make up nearly every website on the internet.

HTML: the structure

HTML (HyperText Markup Language) is the bones of the page. Every heading, paragraph, image, and link is an HTML element. If you stripped away the styling, you'd be left with HTML.

<h1>Welcome to my bakery</h1>
<p>Open daily from 7am.</p>
<a href="/menu">See the menu</a>

Think of HTML as a Word document where every paragraph, heading, and image has a label so the browser knows what it is.

CSS: the look

CSS (Cascading Style Sheets) is the styling layer. Colours, fonts, spacing, layout, animations: all CSS. Without CSS, a website looks like an academic paper from 1995.

h1 {
    color: #0B63D9;
    font-family: Inter, sans-serif;
    font-size: 3rem;
}

Think of CSS as the clothes HTML wears. Same HTML body, very different outfit depending on the CSS.

Tailwind CSS: a particular flavour of CSS

Tailwind is a popular way of writing CSS where, instead of writing custom styles, you compose small utility classes directly in your HTML. The class text-blue-700 makes text blue; px-4 py-2 adds horizontal and vertical padding; rounded-md rounds the corners.

<button class="bg-blue-700 text-white px-4 py-2 rounded-md font-medium">
    Subscribe
</button>

People either love or hate Tailwind. The advantage: you can build interfaces fast without inventing new CSS class names every time. The disadvantage: HTML files look busy. This website uses Tailwind.

JavaScript: the behaviour

JavaScript (often just "JS") is the programming language of the browser. Anything interactive uses it: a menu that opens when clicked, a form that validates as you type, a chart that updates live, a modal that appears.

document.querySelector('.menu-button').addEventListener('click', () => {
    document.querySelector('.menu').classList.toggle('open');
});

Think of JavaScript as the page's behaviour: what happens after it loads.

PHP: a server-side language

PHP is a programming language that runs on the web server (not in the visitor's browser). When someone visits a page, PHP code runs, often pulls data from a database, builds an HTML page, and sends it to the visitor. By the time the page arrives at the browser, PHP has already finished its work.

<?php
$posts = Post::where('status', 'published')->latest()->take(10)->get();
?>
<h1>Latest articles</h1>
<ul>
    @foreach($posts as $post)
        <li><a href="/{{ $post->slug }}">{{ $post->title }}</a></li>
    @endforeach
</ul>

PHP powers a huge share of the web, including WordPress, Wikipedia, and Slack's website. It's particularly good for content-driven sites.

PHP frameworks: pre-built foundations

A PHP framework is a ready-made starter kit with conventions for organising files, talking to databases, handling forms, managing users, and routing URLs to code. You could build a website in PHP from scratch, but you'd be reinventing things every other developer has solved before.

Laravel is the dominant PHP framework today. It comes with:

• Eloquent, a polite way to talk to your database without writing SQL by hand.
• Blade, a template language for mixing HTML with little bits of PHP cleanly.
• Artisan, a command-line tool that scaffolds files, runs database migrations, and clears caches.
• Filament, a separate package that gives you an admin interface for editing content without touching code.

For this kind of site (news, tutorials, exams), Laravel is the strong default choice. It's also affordable to host because PHP runs on cheap shared hosting like Hostinger.

Other PHP frameworks exist (Symfony, CodeIgniter, CakePHP). Laravel has the friendliest documentation and the largest community in 2026.

Putting it together

A request for one page on a typical Laravel site goes like this:

1. The visitor's browser asks the server for /articles/welcome-to-our-blog.
2. The Laravel router decides which controller handles that URL.
3. The controller asks the database (via Eloquent) for the article record.
4. The controller passes the article to a Blade template.
5. The Blade template builds HTML (with Tailwind classes for styling).
6. The server sends the HTML, CSS, and JavaScript back to the browser.
7. The browser draws the page; JavaScript adds any interactive bits.

You don't need to remember all six steps. You only need to know that Claude understands each of these layers and can move between them fluently. Your job is to describe the outcome you want; Claude's job is to choose the right layer to change.

Setting up Claude Code

Installing Claude Code

Open your terminal.

On macOS or Linux, paste this and press Enter:

curl -fsSL https://claude.ai/install.sh | bash

On Windows, open PowerShell and paste:

irm https://claude.ai/install.ps1 | iex

Tip: The install script tells you what it's doing. Read the output. If it asks you to add a line to your shell configuration, do it. The terminal will explain.

To check it worked, type claude and press Enter. You should see a friendly prompt with the version number. If you do, you're set.

Your first conversation

Make a folder for your project. In the terminal:

mkdir my-first-site
cd my-first-site
claude

You're now in a Claude Code session. The cursor sits at a prompt waiting for your message. Type something like:

I want to build a simple one-page website for my dog walking business in Manchester. The page should have a hero, three service descriptions, customer reviews, a contact form, and a footer. Don't write any code yet, just tell me what you'd need to know.

Press Enter. Read the response. Reply with answers. That's the loop.

To exit, type exit and press Enter, or hold Ctrl and press D.

Permission modes

By default, Claude asks before changing anything. There are four modes. You'll cycle through them by pressing Shift+Tab.

Warning: Auto mode is powerful and risky on a real machine. Stick with Default or Accept edits to begin.

You can always press Esc to interrupt Claude in the middle of something.

The slash commands worth memorising

Type / to see the full list. The most useful for beginners:

The CLAUDE.md file

Run /init early on. Claude looks around the project and writes a CLAUDE.md file that captures the most important context. Every future session reads this file first, so Claude doesn't have to be told the same things twice.

Keep CLAUDE.md short. Useful things to add:

• The build command and the test command.
• Where things live (e.g. "public pages are Blade files in resources/views/").
• Conventions you want followed (e.g. "all user-facing copy is in British English").
• Things that have surprised you (e.g. "the live site is on Hostinger, deployed via FTP").

Skip things that are obvious from the code itself. The file is for what Claude couldn't otherwise know.

← Part 1 of 8: Introduction and the Prompt-First Mindset · All parts · Part 3 of 8: Plan Your Website Before You Build It →