Technical Writing Sample · Claude Code Guide

If you've ever made a website you probably used some kind of code editor and maybe copied some code from a chatbot. Claude Code will eliminate that workflow (mostly). You can tell it what you want in a folder and it will write your html for you. If you need to make any modifications you can just tell it what you need and not worry about copy and pasting it back in.

I will assume you have a basic understanding of HTML and CSS for this tutorial. I will show you how to build a simple static website using Claude Code. You will end up with a single page website for a fictitious coffee shop that is responsive and you can modify it however you'd like.

What you will need

A paid plan for Claude Pro/Max/Team or Enterprise. Or you can use a Claude Console account. Claude code will not work if you do not have an account.
A terminal window. On Mac you can use Terminal or if you are on Windows use PowerShell.
Browser to preview your website.
Git (Optional). It's nice to have git installed to look at and revert changes. Also allows Claude Code to use it's Bash Tool if you have it installed on Windows.
Knowledge on HTML and CSS. Claude will write your code for you but it's helpful to know what it's writing.

Install Claude Code

Follow the steps below for your Operating System.

Mac/Linux/WSL

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

Windows

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

After installing Claude Code open a new terminal window and type in:

claude --version

You should see a number and (Claude Code) listed. If it says "claude" is not recognized. Close the terminal window and open a new one.

Creating a folder and starting a session

When you have Claude Code open it will use whatever folder you are in to create your site. You don't want to be in your Home folder because it will add your files to that. So we want to make a folder to work in.

Create a new folder
```
mkdir my-claude-site
```
Go into that folder
```
cd my-claude-site
```
Initialize a Git Repository (Optional)
```
git init
```
Start Claude Code
```
claude
```

When you first type claude it will take you to log in to your account. Once your session has started you will see the current directory you are in above your prompt. As long as it ends with my-claude-site you are good to go!

Allow Claude to do certain actions without permission

Claude Code has different permission modes. You can learn more about them here. When you open Claude Code in most terminals it will default to Auto mode. Which means there is another model that will determine what actions can be done without your input. Most of the time when editing files it will not ask you for permission.

When learning it may be helpful to see what files it is creating. You can press Shift + Tab to change your permission mode. Below the prompt you will see your current permission mode.

Status Bar	What it does
Manual Mode On	Will ask you before it modifies any files or executes any commands.
Accept Edits On	Can modify files and execute most file related commands without your permission.
Plan Mode On	Will ask for your permission to complete tasks. Will show you a plan before making any edits.
Auto Mode On	Uses a classifier model to determine what it can do without asking you.

Prompting Claude Code

If you tell Claude to "make me a website" it will give you very generic information. You can be as detailed as you want when describing your site. Here is what I used to make my initial website.

Make me a website for a fictitious coffee shop.

Use HTML CSS and JS do not use any libraries or frameworks.

Create these files:

index.html should contain a header with nav. Hero section with a title and CTA button that says View the menu. Menu section that will list 6 items with prices. Footer with hours and address.

styles.css make sure to link this in your head tag. You should make this page responsive and use mobile first principles. Use css grid for your menu. Make the page have a simple aesthetic.

script.js make sure to link this at the bottom of your body. Have your nav become a toggle for screens smaller than 768px.

Use proper HTML elements and include alt text where needed. Your colors should meet WCAG standards.

You should be as detailed as you want. When telling Claude what files you want to create explain what that file should do. Otherwise it will just make you a file and put nothing in it. Another thing to note is if you want certain things not done in your code let Claude know in your prompt. For example if you don't want it to use frameworks mention that in your prompt.

Claude will come up with a plan and create your files. If you are on Manual mode you can approve each file. Your folder should now look like this.

my-claude-site/
├── index.html
├── styles.css
└── script.js

Preview your site

Since our website is static we can just open it in our browser. Open another terminal window and navigate to your folder. Then type the following commands.

Windows

start index.html

Mac

open index.html

Or you can double click on index.html and it will open in your browser. Now you can leave this tab open and refresh whenever you make a change to your website. If you want to test your page on mobile sizes. Open your dev tools (F12 on windows Cmd + Option + I on mac). Click the toggle device size button. On Safari you will need to enable the develop menu in settings.

Modifying your website

You can continue prompting Claude with what you want to change about your site. Make small changes at a time and check your website in between. Some examples of modifications I've made are.

Change Type	Prompt
CSS modification	"Modify styles.css to change the hero section background to a darker grey. And make the hero section text white."
Adding elements to HTML	"Create a contact form in index.html and place it above your footer. Include a name field, email field and a text area. Style it to look like your menu section."
Fixing bugs	"When my screen size gets to around 400px my menu is overflowing to the right side. Please modify your css to make it 1 column."

If you have a bug try to be as descriptive as possible about what is happening. Let it know the screen size you are at and what element is having the issue. Saying my site is broken on mobile will not be helpful to Claude.

Keep in mind that since this is just an HTML page. Your form will not actually work. There is no back end for your form to send information to. You can hook your form up to a form service or back end. Then have Claude help you with that.

Review your code

Claude is great at writing code but its still your website. As you add more features and pages to your site you should start looking over the code it is writing. Don't just accept all edits. You'll end up with tons of unnecessary CSS rules.

You can always ask Claude to explain what it did. Or if you are using Git you can look at your diffs and commit your changes. You can even have Claude commit your changes for you. "Commit my changes with a message".

Always have a commit you can go back to if something goes wrong.

Store your project rules

You can use the command /init in Claude Code to generate a CLAUDE.md file for your project. You can add any rules that you want Claude to know about. For example: Do not use frameworks, Always use the colors created at the top of styles.css. Claude Code will remember these rules every time you open your session.

Troubleshooting

If you run into any issues while using Claude Code you can reference the table below.

Issue	Cause and Solution
Claude is not recognized in your terminal	You may have had your terminal window open when you installed Claude. Open a new terminal window. If you are still getting this error visit the Claude Code Docs.
Your files are being created in the wrong folder	You may have started your Claude Code session in a different folder. Exit your session and `cd` to your project folder. Then type `claude`.
My CSS changes are not showing up	Your browser may be caching your CSS file. Try hard refreshing your page. Also make sure your index.html file is pointing to your styles.css file correctly.
Claude is making changes to my files without my permission	You are in Auto mode or Accept Edits mode. Press `Shift + Tab` until you see Manual Mode On in the status bar.

Next Steps

Now that you have a website you can continue adding to it and host it. Hosting your site is another topic but I will touch on it briefly. You can use any static hosting service to host your website. Claude Code can help you deploy to services like GitHub Pages and Netlify.

What I love about Claude Code is being able to talk to it and edit my code all in the same place.

References

https://code.claude.com/docs/en/quickstart

https://code.claude.com/docs/en/permission-modes

https://code.claude.com/docs/en/memory

The CLI Web Developer: Making an HTML Website With Claude Code