DEV Community

btechnik
btechnik

Posted on

Get Started with Claude Code: A Developer's First Look at AI-Powered Coding

#ai #productivity #claude #devtools

Introduction

There are a lot of AI tools out there. Claude.ai, GitHub Copilot, Cursor, ChatGPT — the list keeps growing. So when I sat down to explore Claude Code, I had one question in mind: what actually makes this different?

By the end of this project, I had a working portfolio website — built almost entirely by AI — and a clearer picture of where Claude Code shines. Here's exactly what I learned.

What Is Claude Code?

Claude Code is Anthropic's agentic coding tool that runs directly in your terminal. Unlike Claude.ai (which is a chat interface), Claude Code has real capabilities that go much further:

  • ✅ Reads your entire project folder and understands file structure
  • ✅ Creates, edits, and deletes files on your behalf
  • ✅ Runs shell commands and terminal operations
  • ✅ Remembers project context across sessions via CLAUDE.md
  • ✅ Asks for permission before making changes (in Default mode)

The key insight: Claude.ai only knows what you tell it. Claude Code knows what's in your project.

Step 1: Installing Claude Code

Installation on Windows is a single PowerShell command:

irm https://claude.ai/install.ps1 | iex
Enter fullscreen mode Exit fullscreen mode

Once installed, verify it's working with:

claude --version
# Output: 2.1.79 (Claude Code)
Enter fullscreen mode Exit fullscreen mode

You'll also need to add API credits to your Anthropic account — Claude Code uses the API, so usage is token-based rather than subscription-based.

Pro Tip: Start with a small credit top-up ($5–$10) to explore the tool before committing more.

Step 2: Understanding the Trust Prompt

When you first run claude in a terminal, it immediately asks a critical security question:

"Is this a project you created or one you trust? Claude Code will be able to read, edit, and execute files here."

This isn't just a formality — it's an important safety mechanism. Claude Code needs read/write permissions on whatever directory you point it at. Running it from your home directory would give it access to personal files, OS configs, and sensitive data.

Best practice: Always navigate to a dedicated project folder before launching Claude Code. This scopes its permissions and keeps it focused on your actual work.

Step 3: Setting Up Project Memory with CLAUDE.md

This is one of the most powerful features, and easy to overlook.

Claude Code reads a file called CLAUDE.md at the start of every session. Think of it as a briefing document — it tells Claude Code what your project is, what tech stack you're using, conventions to follow, and anything else it should keep in mind.

# CLAUDE.md

This file provides guidance to Claude Code when working with code in this repository.

This is a single-page personal portfolio website built with plain HTML and CSS. No frameworks.
Enter fullscreen mode Exit fullscreen mode

With this in place, Claude Code never asks what kind of project you're working on. It already knows.

Why this matters for teams: CLAUDE.md can include coding standards, naming conventions, deployment notes, and architectural decisions. It becomes a living knowledge base that any team member — human or AI — can rely on.

Step 4: Configuring Claude Code

Two key configuration commands: /model and /config.

Choosing a Model

I selected Claude Haiku — the fastest and most cost-effective option. For a portfolio website, the heavy reasoning power of Opus wasn't needed.

Key Config Options

Setting My Choice Why
Thinking Mode Disabled Not needed for HTML/CSS; saves tokens
Permission Mode Default Requires approval for every file change
Model claude-haiku-4-5 Fast and cost-effective

Permission Modes explained:

  • Default — Claude Code proposes changes and asks for approval before applying
  • Auto-Accept Edits — Changes applied automatically without prompting
  • Plan — Claude Code only plans; you execute manually

For beginners, Default mode is highly recommended. It keeps you in control and helps you understand what the tool is doing.

Step 5: Building the Portfolio

With an empty project folder and a single prompt, Claude Code generated a complete portfolio website:

> Build me a portfolio website with About, Projects, and Contact sections. 
  Use a modern, technical color scheme.
Enter fullscreen mode Exit fullscreen mode

Claude Code then:

  1. Assessed the empty directory
  2. Created index.html with semantic HTML structure
  3. Added inline CSS with a dark, technical theme
  4. Populated the About section with a professional bio layout
  5. Added placeholder cards in the Projects section
  6. Built a Contact section with social links

Total cost for the initial build: $0.01. Tokens: ~390 input, ~5.8k output.

Iterating in Plain English

After the initial build, refinements were done in natural language:

  • "Add my GitHub and LinkedIn links to the footer"
  • "Update the About section with these professional details..."
  • "Make the color scheme darker and more technical-looking"

Each time, Claude Code proposed specific changes, showed the diff, and waited for approval.

Step 6: The @ Reference System

The most impressive feature: Claude Code's @ folder reference system.

With markdown files for the three past projects in a /projects folder, I used this prompt:

> Update the Projects section in @index.html using the content from @projects/ folder. 
  Read each markdown file to extract the title, description, and tech stack.
Enter fullscreen mode Exit fullscreen mode

Claude Code read all markdown files, extracted titles, descriptions, and tags, then updated the HTML with real project cards automatically.

The result: a fully populated Projects section featuring actual work — Telegram AI Bot with OpenClaw, Spotify Clone with Cursor, AWS Threat Detection with GuardDuty — all pulled from documentation files.

Monitoring Usage: /cost and /context

Two commands worth knowing:

/cost — Real-time session breakdown:

Total cost: $0.0593
Total duration (API): 34s
Total code changes: 655 lines added, 0 lines removed
Enter fullscreen mode Exit fullscreen mode

/context — Context window usage:

31.4k tokens (16%) out of 200k tokens
Enter fullscreen mode Exit fullscreen mode

Keeping an eye on /context matters for longer sessions — as the context fills up, responses about earlier parts of your project can become less precise.

Key Takeaways

It's not just a chat interface with file access. The combination of project awareness, CLAUDE.md memory, permission-based editing, and @ references creates a genuinely different developer experience.

The cost model is worth understanding. For the work covered here — building an entire portfolio website — total spend was under $0.10. Choosing the right model and disabling Thinking Mode when unnecessary makes a real difference.

Default permission mode is your friend. Seeing every proposed change before it's applied is an excellent way to understand what Claude Code is doing and why — which makes you a better developer in the process.

What's Next?

Next goals: deploying this portfolio via GitHub Pages, and exploring Claude Code with more complex projects — connecting it to AWS services, running test suites, and using Thinking Mode for actual architecture decisions.

If you've tried Claude Code, I'd love to hear about your use cases in the comments.

Nikhil Bhan is an AWS Community Builder (AI Engineering) based in Vancouver, Canada. He creates technical content for the NextWork community at nextwork.org.

Top comments (0)