Get Started with Claude Code: Your AI Building Assistant
Claude Code sounds technical, but it’s a powerful tool for anyone. Many people think they need to be coders to use it, but that’s not true. Claude Code is like an AI builder that can create websites, apps, and tools just by you asking in plain English. This guide will show you how to use it, even if you’ve never coded before. You’ll learn to build simple projects and understand how Claude Code works.
What You’ll Learn
This guide will walk you through setting up Claude Code, creating your first project like a website landing page, and understanding how to make changes. We’ll also explore building more complex projects like data dashboards and learn about important features like Claude Skills and publishing your creations online. By the end, you’ll be ready to use Claude Code for your own projects.
Prerequisites
- A computer (Mac or Windows)
- An internet connection
- A Claude Pro subscription (starts at $17/month)
Step 1: Install Claude Code
To start using Claude Code, you need to install it. While there are ways to install it using your computer’s terminal, which can be complicated, there’s a much easier option. Claude offers a desktop app for both Mac and Windows. This app includes Claude Code, the regular Claude chatbot, and Claude Co-work all in one place. Download and install this desktop app to get started.
Step 2: Understand the Claude Code Interface
Once you open the desktop app, you’ll see three main tabs at the top: Chat, Co-work, and Code. The ‘Chat’ tab is for the standard Claude AI chatbot you might already know. ‘Co-work’ is an AI agent that can perform tasks for you. The ‘Code’ tab is where the magic happens for building things. This is your main workspace for Claude Code.
Step 3: Create Your First Project: A Landing Page
Let’s build a simple landing page. In the ‘Code’ tab, type a prompt like: “Build me a landing page for a marketing agency in the hospitality niche.” Before sending, you have a few important settings to check.
Setting Permissions and Folders
Look for a dropdown menu. You can choose to have Claude Code ask for permission before making changes, or you can set it to auto-accept edits, which is usually recommended for speed. You can also use ‘Plan Mode’ to see a detailed plan before it starts building. To keep your projects organized, create a dedicated folder on your computer for each new project. When prompted, select this folder so Claude Code knows where to save the files it creates.
Choosing the Right Model
You can also select an AI model. ‘Opus’ (like 4.66) is generally the best for creating new projects or planning, but it uses more credits. ‘Sonnet’ is good for making revisions. ‘Haiku’ is rarely used except for simple chats. For your first project, ‘Opus’ is a good choice.
Trusting the Workspace
When you send your prompt, Claude Code will ask you to trust the workspace. This is because it needs permission to write and read files in the folder you selected. Since you’ve chosen a specific project folder, it’s limited to that area.
Reviewing Your Creation
After a few minutes, Claude Code will generate a landing page. It will appear in your selected folder as an HTML file. You can open this file in your web browser to see it. While the links might not work perfectly yet, and it’s not published online, you’ll see a well-designed page based on your prompt. This is a great start!
Step 4: Making Revisions and Iterating
The first version is rarely perfect. You can ask Claude Code to make changes. For example, if the background is too busy, you can say, “Blur the top background in the hero section.” For revisions, you can often use a less powerful model like ‘Sonnet’ to save credits. Claude Code will then update the page. Remember, building with AI is often a process of iteration: you ask, it creates, you review, and you ask for changes until you’re happy.
Step 5: Building a Data Dashboard
Let’s try something more complex: a dashboard to compare AI tools. First, go to the ‘Chat’ tab and ask Claude to create a prompt for Claude Code. For example, ask: “Create a prompt for Claude Code for a dashboard where I could compare the top 20 AI tools.” Claude will give you a detailed prompt. Copy this prompt and go back to the ‘Code’ tab.
Using Plan Mode
Create a new folder for this project. Paste the prompt into Claude Code. This time, select ‘Plan Mode’ before sending. Claude will create a detailed plan, outlining colors, architecture, and more. You can review this plan and approve it or ask for changes. Once approved, Claude Code will start building the dashboard.
Exploring the Dashboard
Claude Code will generate a working dashboard. It even tests its own work, which can take a bit longer but ensures quality. You’ll see files created in your project folder, showing the complexity of a full app. You can check how it looks on different devices, like mobile. This shows how Claude Code can build functional applications without you writing any code.
Step 6: Adding Business Context with .md Files
For more personalized projects, you can provide Claude Code with information about your business. Create a file named `claude.md` (using Markdown format). You can ask Claude AI to interview you about your business and create this document, or get it from its memory if you’ve used it before. This `.md` file acts like a cheat sheet for Claude Code, giving it context about your company, its goals, and its products.
Place this `claude.md` file in your project folder. When you prompt Claude Code to build something, it will use the information in this file. For example, you can ask it to “Fetch the latest AI news, use the context from claude.md, and turn it into content ideas for our business.” This allows Claude Code to create content that is perfectly aligned with your brand and business strategy.
Step 7: Understanding Claude Skills and Plugins
Claude Code can be extended with ‘Skills’ and ‘Plugins’. Skills are like custom instructions that tell Claude Code how to perform specific tasks. You can find many pre-made skills online that you can copy and paste into Claude Code. Plugins are ready-to-use workflows that can connect Claude Code to other applications like Google Drive or Slack.
By installing skills and plugins, you can add new capabilities to Claude Code, allowing it to automate more complex tasks or integrate with your existing tools. This is how you truly customize Claude Code to fit your workflow.
Step 8: Publishing Your Creations Online
While Claude Code builds projects on your computer, you can publish them online. This usually involves a few steps. First, you need to connect Claude Code to GitHub, a platform for storing code. You can create a free GitHub account if you don’t have one.
Once connected, you can ask Claude Code to push your project’s code to GitHub. After the code is on GitHub, you can use a service like Vercel (versel.com). Vercel makes it easy to deploy your code from GitHub onto the web. You’ll create an account on Vercel, paste your GitHub project URL, and Vercel will handle the rest, giving you a live web link to your creation.
Tips for Beginners
- Start small with simple websites or tools.
- Use ‘Plan Mode’ to understand the process.
- Use Claude Chat to help generate prompts.
- Provide context using `.md` files for better results.
- Always preview your work and iterate by asking for revisions.
- Don’t be afraid to experiment with different prompts and settings.
Claude Code is a powerful tool that can help you build amazing things without needing to be a programmer. By following these steps, you can start creating your own websites, apps, and tools today.
Source: Master 80% of Claude Code in 26 Minutes (YouTube)
