Hands-on: Claude for Coding

Reading time: ~12 minutes

---

What Is Claude?

Claude is an AI assistant made by Anthropic. Unlike Copilot (which works inside your editor), Claude is a chat-based tool where you can have longer conversations about code. It's especially good for:

• Generating larger blocks of code
• Explaining concepts and code
• Debugging complex problems
• Planning your approach before coding

Before You Start

• Create a free account at claude.ai
• That's it — no installation needed, it runs in your browser

You can also use other AI chat tools (ChatGPT, Gemini, etc.) during the hackathon. This tutorial uses Claude as an example, but the techniques work with any AI assistant.

The CLEAR Prompting Framework

The quality of AI output depends entirely on the quality of your prompt. Use the CLEAR framework to write better prompts:

Letter	Stands for	What to include
C	Context	What are you building? What's the situation?
L	Language	What tech stack? (HTML, CSS, JavaScript, Python, etc.)
E	Expected output	What should the result look like?
A	Additional constraints	Any rules, limitations, or requirements?
R	Reference	Example code, format, or style to follow?

Example: Bad prompt vs. CLEAR prompt

Bad prompt:

"Make me a form"

CLEAR prompt:

Context: I'm building a contact page for a small business website. Language: HTML and CSS (no frameworks, plain/vanilla). Expected output: A contact form with fields for name, email, subject, and message, plus a submit button. Additional constraints: The form should be responsive (work on mobile), use a clean modern design, and validate that email is a real email format. Reference: Style similar to the Stripe.com contact page — minimal, lots of whitespace.

The CLEAR prompt will give you a much more useful result.

Use Case 1: Generate Code from a Description

When to use: You know what you want to build but don't want to write it from scratch.

Example prompt:

I'm building a task management app in HTML, CSS, and JavaScript (no frameworks). Create a component that shows a list of tasks. Each task has a title, a checkbox to mark it complete, and a delete button. Completed tasks should have a strikethrough style. Store tasks in localStorage so they persist on page refresh.

What to do with the result:

1. Read through the generated code
2. Make sure you understand what each part does
3. Test it in your browser
4. Modify anything that doesn't fit your project

Use Case 2: Debug Broken Code

When to use: Your code doesn't work and you can't figure out why.

Example prompt:

This JavaScript code should filter an array of products by price, but it returns an empty array every time. What's wrong?

const products = [
  { name: "Laptop", price: 999 },
  { name: "Phone", price: 699 },
  { name: "Tablet", price: 449 }
];

function filterByPrice(maxPrice) {
  return products.filter(p => p.price === maxPrice);
}

console.log(filterByPrice(500)); // returns []

Claude will spot that you're using === (exact match) instead of <= (less than or equal to), and explain why.

Tips for debugging prompts:

• Always include the actual code (copy-paste, don't describe it)
• Include the error message if there is one
• Describe what you expected to happen vs. what actually happens
• Mention what you've already tried

Use Case 3: Explain Code You Don't Understand

When to use: You're reading code (from a teammate, from the internet, or from AI) and you don't understand it.

Example prompt:

Explain this code line by line. I'm a beginner programmer:

const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

Claude will explain each concept (arrow functions, closures, spread operator, setTimeout) at your level.

Use Case 4: Convert Code Between Languages

When to use: You found a solution in one language but need it in another.

Example prompt:

Convert this Python function to JavaScript. Keep the same logic and variable names:

def calculate_average(numbers):
    if len(numbers) == 0:
        return 0
    return sum(numbers) / len(numbers)

Claude vs. Copilot — When to Use Which

Situation	Best tool
Quick autocomplete while typing	Copilot
Small function suggestions	Copilot
Questions about code in your editor	Copilot Chat
Generating larger blocks of code	Claude
Explaining concepts or debugging	Claude
Planning your approach before coding	Claude
Code review (is this code good?)	Claude
Converting between languages	Claude

During the hackathon: You can use both tools simultaneously. Many developers keep Copilot running in VS Code for quick suggestions while using Claude in a browser tab for bigger questions.

Common Mistakes to Avoid

1. Copy-pasting without reading — Always read and understand AI-generated code before using it
2. Not testing the output — AI code can look correct but have subtle bugs
3. Giving vague prompts — The more specific you are, the better the result
4. Trusting AI for security — Never trust AI-generated code for authentication, passwords, or sensitive data without expert review
5. Not iterating — If the first response isn't perfect, refine your prompt and ask again

---

Next: Tutorial 5: AI Ethics & Responsible Use