learntodriveai.dev/Web Development/Track setup
Web Development · Setup · ~5 min

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.

§ Steps

1. Create your track folder

TERMINAL
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:

TERMINAL
claude
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 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:

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

You should see version numbers for Node.js (22 or newer — the LTS install above lands there), npm, and Docker.

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

3. Netlify account

Project 1 ends with the site live on the internet, hosted by Netlify. Netlify needs an account and a one-time login from your machine. Do both now, so Claude can deploy later without stopping to wait for you.

  1. Sign up at app.netlify.com/signup. It's free. "Sign up with GitHub" is the quickest route. Netlify may ask a few onboarding questions; skip any that offer to deploy a project.
  2. In a terminal (not inside Claude Code), install the Netlify CLI and log in:
TERMINAL
npm install -g netlify-cli
netlify login

netlify login opens a browser tab titled "Authorize Application". Click Authorize. Back in the terminal, it confirms you're logged in to your Netlify account. That login is stored on your machine and lasts across sessions.

Verify

TERMINAL
netlify status

You should see your email address and your team name. In Project 1, Claude creates the site and deploys it with one command. You won't be asked any setup questions there.

4. Vercel account

Project 1 deploys to Netlify. From Project 2 on, the track deploys to Vercel instead — same idea, a different platform. Set it up now so Claude can deploy later without stopping to wait for you.

  1. Sign up at vercel.com/signup. It's free. "Continue with GitHub" is the quickest route; skip any onboarding step that offers to import a project.
  2. In a terminal (not inside Claude Code), install the Vercel CLI and log in:
TERMINAL
npm install -g vercel
vercel login

vercel login prints a prompt — follow it (confirm through GitHub, or click the emailed verification link). The login is stored on your machine and lasts across sessions. The first time Claude runs vercel in a project it asks a few one-time questions (which scope, link to an existing project or create a new one, the project name); accept the defaults unless the project says otherwise.

Verify

TERMINAL
vercel whoami

You should see your Vercel username.

5. 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.

PROMPT
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.

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.

←IntroductionStart Project 1→