Web Development: Track Setup

Complete the platform setup first if you haven't already. You should have a terminal, Claude Code, Git, and a GitHub account ready.

1. Create your track folder

mkdir -p ~/dev/web-dev
cd ~/dev/web-dev

2. Web dev tools: let Claude Code do it

Open Claude Code in your track folder:

claude

Paste this prompt:

I'm setting up a web development environment. Please:

1. Install Node.js (latest LTS version) via nvm (Node Version Manager)
2. Verify npm is installed and working
3. Install VS Code if not already installed (or tell me how if it needs manual install)
4. Check if Docker is installed. If not, tell me how to install it (it needs admin access)

After each step, verify it worked and show me the result.

Note on VS Code: Claude Code may not be able to install VS Code directly because it's a GUI application. If it can't, it will give you a link. Install it manually from code.visualstudio.com and add the ESLint extension from the marketplace.

Note on Docker: Docker typically needs administrator access. If Claude Code can't install it directly, it will tell you what command to run yourself.

Verify

Once Claude Code finishes:

node --version
npm --version
docker --version

You should see version numbers for Node.js (20+), npm, and Docker.

If you've installed VS Code, check it too: code --version

3. Your first look

Everything is installed. Before you start Project 1, see what Claude Code can do when you point it at a web development problem.

Stay in your track folder with Claude Code open, and paste this:

Build a simple personal portfolio site with three sections: a hero with my name, 
an "About" section, and a "Projects" section with three placeholder cards. 
Use HTML, CSS, and vanilla JavaScript. Make it responsive. It should look good 
on both desktop and mobile. Serve it locally so I can see it in my browser.

In a few minutes, Claude will build a complete responsive website and show you how to view it. A working site from a single prompt.

As you work through the track, you'll learn why a single prompt isn't enough: why that HTML might not be accessible, why that CSS might break on certain devices, why that layout might fail a performance audit, and why a client would have opinions about every design choice.

But for now, look at what just happened. That's the starting point.

Ready

Start Project 1.