Claude Code Getting Started Guide

Introduction

Welcome to the Claude Code Getting Started Guide! In this comprehensive tutorial, you'll learn how to build a professional portfolio website using Claude Code, Anthropic's powerful AI coding assistant.

What You'll Build

• A responsive portfolio website with modern design
• Professional HTML5, CSS3, and JavaScript code
• Mobile-first responsive layout
• Interactive elements and animations
• Contact form functionality
• Optimized for performance and SEO

Prerequisites

System Requirements

• Operating System: Windows 10+, macOS 10.15+, or Linux (Ubuntu 18.04+)
• Terminal/Command Line: PowerShell (Windows), Terminal (macOS/Linux)
• Internet Connection: Required for downloading tools and deploying
• Web Browser: Chrome, Firefox, Safari, or Edge (latest versions)

Required Accounts

• Anthropic Account: Sign up at claude.ai
• GitHub Account: Sign up at github.com

Verify Your Setup

Before proceeding, verify you have the necessary tools installed:

Check Git Installation

# Check if Git is installed
git --version

# Expected output: git version 2.x.x

Check Node.js (Optional but Recommended)

# Check if Node.js is installed
node --version
npm --version

# Expected output: v18.x.x or higher

Installation & Setup

Step 1: Install Claude Code

macOS/Linux Installation

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

# Or using npm (if you have Node.js)
npm install -g @anthropic/claude-code

Windows Installation

# Using PowerShell
iwr https://claude.ai/install.ps1 | iex

# Or using npm (if you have Node.js)
npm install -g @anthropic/claude-code

Step 2: Verify Installation

# Verify Claude Code is installed
claude --version

# Expected output: claude-code v1.x.x

Step 3: Authentication

1. Go to claude.ai and sign in
2. Navigate to your account settings
3. Generate an API key for Claude Code
4. Authenticate Claude Code:

# Authenticate with your API key
claude auth login

# Follow the prompts to enter your API key

Your First Project

Step 1: Create Project Directory

# Create and navigate to your project directory
mkdir my-portfolio
cd my-portfolio

# Initialize the directory
claude init

Step 2: Generate Your Portfolio

Use this specific prompt with Claude Code to generate a professional portfolio:

claude create "Build me a professional portfolio website with the following specifications:

1. Modern, responsive design with clean aesthetics
2. Header with navigation menu (Home, About, Projects, Contact)
3. Hero section with personal introduction and call-to-action
4. About section with skills and experience
5. Projects section showcasing 3 sample projects with descriptions
6. Contact section with a working contact form
7. Footer with social media links
8. Mobile-first responsive design
9. Smooth scrolling and subtle animations
10. SEO optimized with proper meta tags
11. Use a professional color scheme (blues and grays)
12. Include placeholder content that I can easily customize

Please create this as a complete website with HTML, CSS, and JavaScript in separate files."

Step 3: Review Generated Files

Claude Code will generate the following structure:

my-portfolio/
 index.html          # Main HTML file
 styles.css          # Stylesheet
 script.js           # JavaScript functionality
 assets/             # Images and resources
    placeholder-images/
 README.md           # Project documentation

Step 4: Test Your Website

# Start a local development server
claude serve

# Or use Python if available
python -m http.server 8000

# Or use Node.js if available
npx serve .

Open your browser and navigate to http://localhost:8000 to view your portfolio.

Adding IDE Integration

Install Cursor IDE

1. Download Cursor from cursor.sh
2. Install the application on your system
3. Open Cursor and navigate to your project folder

Connect Claude Code to Cursor

# In your project directory
claude integrate cursor

# This will configure Cursor to work with Claude Code

Verify Integration

1. Open your project in Cursor
2. Look for the Claude Code extension in the extensions panel
3. Try using Ctrl+Shift+P (Cmd+Shift+P on Mac) and search for "Claude"
4. You should see Claude Code commands available

Using Claude in Cursor

• Ctrl+K: Quick Claude Code command
• Ctrl+Shift+K: Open Claude Code chat panel
• Right-click: Context menu with Claude options

Git & GitHub Deployment

Step 1: Initialize Git Repository

# Initialize Git in your project directory
git init

# Add all files to staging
git add .

# Make your first commit
git commit -m "Initial commit: Create portfolio website

- Add responsive HTML structure
- Implement modern CSS styling
- Include interactive JavaScript features
- Set up project documentation"

Step 2: Create GitHub Repository

1. Go to GitHub.com and sign in
2. Click the "+" icon and select "New repository"
3. Repository name: my-portfolio
4. Description: "Professional portfolio website built with Claude Code"
5. Set to Public (required for GitHub Pages)
6. Do NOT initialize with README (you already have files)
7. Click "Create repository"

Step 3: Generate Personal Access Token

1. Go to GitHub Settings � Developer settings � Personal access tokens
2. Click "Generate new token (classic)"
3. Name: "Claude Code Portfolio"
4. Expiration: 90 days (or as needed)
5. Select scopes: repo, workflow
6. Click "Generate token"
7. Important: Copy the token immediately (you won't see it again)

Step 4: Push to GitHub

# Add remote repository (replace YOUR_USERNAME with your GitHub username)
git remote add origin https://github.com/YOUR_USERNAME/my-portfolio.git

# Push your code to GitHub
git branch -M main
git push -u origin main

# When prompted for password, use your Personal Access Token

Step 5: Enable GitHub Pages

1. Go to your repository on GitHub
2. Click on "Settings" tab
3. Scroll down to "Pages" section
4. Under "Source", select "Deploy from a branch"
5. Branch: main, Folder: / (root)
6. Click "Save"

Making Updates

To update your live website:

# Make your changes, then:
git add .
git commit -m "Update portfolio content"
git push

# Changes will appear on your live site within a few minutes

Next Steps & Advanced Features

Customize Your Portfolio

• Personal Content: Replace placeholder text with your actual information
• Projects: Add your real projects with screenshots and descriptions
• Branding: Customize colors, fonts, and styling to match your personal brand
• Images: Add professional headshot and project images
• Resume: Add a downloadable PDF resume link

Advanced Claude Code Features

• Component Generation: claude create component "contact-form"
• Code Refactoring: claude refactor "improve performance"
• Bug Fixing: claude fix "responsive layout issues"
• Testing: claude test "add unit tests"
• Documentation: claude document "add code comments"

Project Ideas to Try Next

1. Blog Website: Create a personal blog with multiple pages
2. E-commerce Store: Build a simple online store interface
3. Dashboard App: Create a data visualization dashboard
4. Landing Page: Design a product landing page
5. Web Application: Build a todo app or calculator

Troubleshooting

Installation Issues

Claude Code Not Found

Permission Denied Errors

Authentication Problems

Invalid API Key

Git & GitHub Issues

Remote Repository Errors

Authentication Failed (GitHub)

Cursor Integration Issues

Extension Not Working

Development Server Issues

Port Already in Use

Website Not Loading

GitHub Pages Issues

Site Not Updating

Best Practices & Tips

Collaborating with Claude Code

Effective Prompting

• Be Specific: Include exact requirements, colors, layouts, and functionality
• Provide Context: Mention the project type, target audience, and goals
• Request Explanations: Ask Claude to explain the code it generates
• Iterate Gradually: Make small improvements rather than large changes

Best Prompt Examples

# Good: Specific and detailed
"Add a dark mode toggle to the portfolio with smooth transitions,
storing the preference in localStorage, and using CSS custom properties"

# Avoid: Too vague
"Make it look better"

Professional Development Workflow

Version Control Best Practices

• Commit Often: Make small, focused commits with clear messages
• Use Branches: Create feature branches for new functionality
• Write Good Commit Messages: Describe what and why, not just what
• Review Before Committing: Check your changes with git diff

Code Quality Standards

• Consistent Formatting: Use consistent indentation and spacing
• Meaningful Names: Use descriptive variable and function names
• Comments: Add comments for complex logic
• Performance: Optimize images and minimize code

Security & Best Practices

Protecting Sensitive Information

• Never commit API keys or passwords to version control
• Use .gitignore for sensitive files
• Use environment variables for configuration
• Regularly rotate access tokens

Performance Optimization

• Optimize Images: Use WebP format and appropriate sizes
• Minimize HTTP Requests: Combine CSS and JS files
• Use CDNs: For fonts and common libraries
• Enable Compression: Gzip your assets

Success Metrics

You'll know you've successfully completed this guide when you can check off all these items:

Technical Achievements

Learning Outcomes

Quality Checklist

Celebration Time! <�

Once you've achieved all the success metrics above, you've successfully:

• Built your first professional website with AI assistance
• Learned modern web development workflows
• Created a portfolio that showcases your new skills
• Set up a foundation for future web development projects

Share your success! Take a screenshot of your live portfolio and share it on social media with #ClaudeCodePortfolio

Getting Help

If you encounter issues or need additional support, here are the best resources:

Official Resources

• Claude Code Documentation: docs.anthropic.com/claude-code
• Anthropic Support: support.anthropic.com
• GitHub Issues: Report bugs and feature requests

Community Support

• Discord Community: Join the Claude Code Discord server
• Reddit: r/ClaudeCode and r/webdev communities
• Stack Overflow: Tag your questions with #claude-code

Learning Resources

• MDN Web Docs: Comprehensive web development reference
• Git Tutorial: Interactive Git learning
• GitHub Docs: GitHub features and workflows
• Web.dev: Google's web development resources

Quick Help Commands

# Get Claude Code help
claude --help

# Check system status
claude status

# View current configuration
claude config list

# Reset configuration if needed
claude config reset

Troubleshooting Checklist

Before asking for help, try these steps:

1. Check the Troubleshooting section above
2. Restart your terminal/command prompt
3. Update Claude Code to the latest version: claude update
4. Check your internet connection
5. Try the command in a different directory

When Asking for Help

To get the best help, include:

• Operating System: Windows/macOS/Linux version
• Claude Code Version: Output of claude --version
• Full Error Message: Copy the complete error text
• Steps to Reproduce: What you were trying to do
• Screenshots: If relevant to the issue