Skip to main content

Capstone: IDE Power User

Time: 30-60 minutes | Skills: VS Code Extension, Inline Chat, Terminal Integration, Hybrid Workflow

The Scenario​

You have been asked to build a small personal website -- a single HTML page with some CSS. Instead of doing everything in the terminal or everything in the IDE, you will practice the hybrid workflow from Lesson 4: planning in the terminal, editing in VS Code, and committing from the terminal.

By the end of this capstone, you will have a working HTML page and the confidence to switch fluidly between the IDE and the terminal.

Why does this matter?

In real projects, you rarely stick to one tool for everything. The best developers pick the right tool for each step. This capstone trains that muscle.

Prerequisites​

  • VS Code is installed with the Claude Code extension connected
  • You can run claude in PowerShell
  • You have a claude-tutorials folder (or similar) with Git initialized

Step-by-Step Instructions​

Step 1 -- Plan in the Terminal​

Open PowerShell and navigate to your project folder:

cd $env:USERPROFILE\Documents\claude-tutorials
mkdir capstone-12
cd capstone-12
git init

Start Claude Code in the terminal:

claude

Ask Claude to help you plan:

I want to create a simple personal portfolio page in HTML and CSS. It should have:
- A header with my name
- An "About Me" section
- A "Skills" section with a list
- A "Contact" section
- A separate style.css file
Plan the file structure and tell me what we'll create.

Read Claude's plan. This is the "thinking" phase -- no files are created yet. Once you are happy with the plan, exit Claude:

/exit

Step 2 -- Open in VS Code​

Open the project folder in VS Code:

code .

This launches VS Code with the capstone-12 folder open.

Step 3 -- Create Files Using the VS Code Panel​

Open the Claude Code panel in VS Code (click the Claude icon in the sidebar). Ask Claude to create the HTML file:

Create an index.html file for my portfolio. Include a header with the name "Alex Johnson", an About Me section, a Skills section with 5 web development skills, and a Contact section with placeholder email.

When Claude proposes the file creation, review the content carefully in the diff view. If it looks good, accept it. If you want changes, reject it and ask again with more specific instructions.

Step 4 -- Create the CSS File​

In the same Claude Code panel, ask:

Create a style.css file that makes this portfolio look modern and clean. Use a sans-serif font, a dark header, and good spacing. Link it from index.html.

Review the diff for both the new CSS file and any changes to index.html (to add the stylesheet link). Accept the changes.

Step 5 -- Preview Your Work​

Open index.html in a browser to see the result. You can do this from PowerShell:

start index.html

Or right-click index.html in the VS Code Explorer and select Open with Live Server (if you have the Live Server extension) or Reveal in File Explorer and then double-click it.

Step 6 -- Iterate with the Panel​

Look at the page in your browser. Pick one thing you want to improve. Go back to the Claude Code panel in VS Code and ask for the change. For example:

@style.css Make the header gradient go from dark blue to purple instead of solid dark

Or:

@index.html Add a "Projects" section between Skills and Contact with 3 placeholder project cards

Review each diff, accept or reject, and refresh your browser to see the result. Do this at least three times -- the goal is to get comfortable with the edit-review-accept cycle.

Step 7 -- Commit from the Terminal​

Switch back to PowerShell (or use the VS Code integrated terminal with Ctrl+`). Start Claude:

claude

Ask Claude to commit your work:

Create a git commit with all the files we created. Use a clear commit message.

Approve the git commands when prompted. Then verify:

Show me the git log

Exit Claude:

/exit

Step 8 -- Final Review​

Open the finished page in your browser one more time. You built this using a hybrid workflow:

  • Terminal for planning and git operations
  • VS Code panel for all file creation and editing
  • Diff review for every single change

Stretch Goals​

  1. Add a dark mode toggle. Ask Claude (via the VS Code panel) to add a button that switches between light and dark themes using JavaScript.

  2. Make it responsive. Ask Claude to add CSS media queries so the page looks good on mobile screens.

  3. Use @-mentions. Practice referencing files: @index.html and @style.css in the same message to ask Claude to make coordinated changes.

Self-Assessment​

Use this checklist to confirm you covered all the essentials:

  • Planned the project using Claude in the terminal
  • Created and edited files using the VS Code Claude Code panel
  • Reviewed and accepted/rejected changes using the diff view
  • Used @-mentions to reference specific files
  • Made at least three iterative improvements via the panel
  • Committed the final result using Claude in the terminal
  • Previewed the finished page in a browser
How did it go?

If you checked all seven boxes, you have mastered the hybrid workflow. This is the way most professional developers use Claude Code in practice -- combining the visual power of the IDE with the flexibility of the terminal. If some steps felt awkward, that is normal. The more you practice switching between tools, the more natural it becomes.

Congratulations!​

You have completed Module 12. You now know how to use Claude Code in VS Code, JetBrains IDEs, and the terminal -- and more importantly, you know when to use each one. The hybrid workflow you practiced here will serve you well in any real project.

In Module 13, you will learn about managing costs and staying safe when using Claude Code -- essential knowledge for using it responsibly in production.

Help Us Improve

How was this lesson? Take 2 minutes to share your feedback — it helps us make the tutorials better for everyone.

Give Feedback →